/* ============================================================
   Schulte Digital Solutions - gemeinsames Stylesheet
   index.html (body.home) und Rechtsseiten (body.doc)

   Schriften liegen lokal unter assets/fonts/ - keine externen
   Requests, keine Drittanbieter. Lizenzen: assets/fonts/OFL-*.txt
   ============================================================ */

/* ---------- Schriften (SIL Open Font License 1.1) ---------- */

/* Archivo - Bold, Display */
@font-face{
	font-family:"Archivo";
	font-style:normal;
	font-weight:700;
	font-display:swap;
	src:url("fonts/archivo-700-latin.woff2") format("woff2");
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:"Archivo";
	font-style:normal;
	font-weight:700;
	font-display:swap;
	src:url("fonts/archivo-700-latin-ext.woff2") format("woff2");
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Newsreader - Lauftext (variable optische Groesse) */
@font-face{
	font-family:"Newsreader";
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url("fonts/newsreader-400-latin.woff2") format("woff2");
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:"Newsreader";
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url("fonts/newsreader-400-latin-ext.woff2") format("woff2");
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* IBM Plex Mono - Labels, Status, Kontakt */
@font-face{
	font-family:"IBM Plex Mono";
	font-style:normal;
	font-weight:500;
	font-display:swap;
	src:url("fonts/plex-mono-500-latin.woff2") format("woff2");
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:"IBM Plex Mono";
	font-style:normal;
	font-weight:500;
	font-display:swap;
	src:url("fonts/plex-mono-500-latin-ext.woff2") format("woff2");
	unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Farben und Parameter ---------- */
:root{
	--ground:#EFF3F0;
	--ink:#0B1A13;
	--ink-2:#465A50;
	--ink-3:#7A8C82;
	--rule:#D2DCD5;
	--accent:#004826;
	--hatch:rgba(0,72,38,.055);
	--fill-bg:rgba(0,72,38,.08);

	/* Markenfarben des Logos - fest, in keinem Farbschema anders.
	   Damit sie auch im Dark Mode stimmen, steht das Logo dort auf
	   einer eigenen hellen Flaeche (--logo-plate). Im hellen Schema
	   ist die Flaeche unsichtbar und ohne Innenabstand, die Seite
	   sieht dadurch genauso aus wie vorher. */
	--logo-word:#004826;
	--logo-sub:#9D9D9C;
	--logo-a:#004826;
	--logo-b:#357B62;
	--logo-c:#A3C1B5;
	--logo-plate:transparent;
	--plate-pad:0px;

	--f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
	--f-body:"Newsreader",Georgia,"Times New Roman",serif;
	--f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

	--build-draw:820ms;
	--build-fill:380ms;
	--build-stroke:2.4;
	--dash-bracket:224;
	--dash-bar:188;
	--delay-right:120ms;
	--delay-bar:240ms;
	--fill-delay:1060ms;
}

@media (prefers-color-scheme:dark){
	:root:not([data-theme="light"]){
		/* Dunkles Schema: alle UI-Farben bleiben in der Markenpalette
		   (Akzent = das Hellgruen #A3C1B5 aus dem Logo). Die
		   Logofarben selbst werden NICHT umgeschaltet. */
		--ground:#08130E;
		--ink:#E7EFE9;
		--ink-2:#A5B8AD;
		--ink-3:#798D83;
		--rule:#1E3128;
		--accent:#A3C1B5;
		--hatch:rgba(163,193,181,.07);
		--fill-bg:rgba(163,193,181,.1);

		/* Helle Flaeche unter dem Logo - entspricht dem hellen
		   Seitengrund, das Logo behaelt so seine eigene Umgebung. */
		--logo-plate:#EFF3F0;
		--plate-pad:clamp(12px,2.2vw,18px);
	}
}

:root[data-theme="dark"]{
	/* Dunkles Schema: alle UI-Farben bleiben in der Markenpalette
	   (Akzent = das Hellgruen #A3C1B5 aus dem Logo). Die
	   Logofarben selbst werden NICHT umgeschaltet. */
	--ground:#08130E;
	--ink:#E7EFE9;
	--ink-2:#A5B8AD;
	--ink-3:#798D83;
	--rule:#1E3128;
	--accent:#A3C1B5;
	--hatch:rgba(163,193,181,.07);
	--fill-bg:rgba(163,193,181,.1);

	/* Helle Flaeche unter dem Logo - entspricht dem hellen
	   Seitengrund, das Logo behaelt so seine eigene Umgebung. */
	--logo-plate:#EFF3F0;
	--plate-pad:clamp(12px,2.2vw,18px);
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}

body{
	margin:0;
	background:var(--ground);
	color:var(--ink);
	font-family:var(--f-body);
	font-size:16px;
	-webkit-font-smoothing:antialiased;
}

/* 45-Grad-Schraffur: nimmt den Winkel des Mittelbalkens im Logo auf */
body::before{
	content:"";
	position:fixed;
	inset:0;
	z-index:0;
	pointer-events:none;
	background:repeating-linear-gradient(45deg,var(--hatch) 0 1px,transparent 1px 15px);
	-webkit-mask-image:radial-gradient(115% 85% at 50% 38%,#000 0%,transparent 72%);
	mask-image:radial-gradient(115% 85% at 50% 38%,#000 0%,transparent 72%);
}

a:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:4px;
	border-radius:2px;
}

/* ============================================================
   Startseite (body.home)
   ============================================================ */
body.home{
	min-height:100dvh;
	padding:clamp(28px,7vw,80px);
	display:grid;
	align-items:center;
	justify-items:center;
}

.page{
	position:relative;
	z-index:1;
	width:100%;
	max-width:41rem;
	display:flex;
	flex-direction:column;
	gap:clamp(20px,3.2vw,30px);
}

/* ---------- Status ---------- */
.status{
	display:inline-flex;
	align-items:center;
	gap:.7em;
	align-self:flex-start;
	margin:0;
	font-family:var(--f-mono);
	font-size:.7rem;
	font-weight:500;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--ink-2);
}
.status .dot{
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--accent);
	animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.75)}}

/* ---------- Logo und Fortschritt ---------- */
.mark,.progress{width:100%;max-width:min(380px,80vw)}
.mark{height:auto;display:block}

.progress{
	position:relative;
	height:2px;
	background:var(--rule);
	overflow:hidden;
}
.progress::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:34%;
	background:linear-gradient(90deg,transparent,var(--accent),transparent);
	animation:sweep 2.8s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes sweep{from{transform:translateX(-105%)}to{transform:translateX(300%)}}

/* ---------- Logoflaeche ----------
   Traegt im dunklen Schema den hellen Grund, auf dem die
   Markenfarben des Logos richtig wirken. */
.plate{
	background:var(--logo-plate);
	padding:var(--plate-pad);
	border-radius:2px;
}
.page .plate{
	width:100%;
	max-width:min(380px,80vw);
}
.page .plate .mark{width:100%;max-width:none}
.doc-head .plate{width:fit-content}

/* ---------- Text ---------- */
.page h1{
	margin:0;
	max-width:24ch;
	font-family:var(--f-display);
	font-weight:700;
	font-size:clamp(1.6rem,4.7vw,2.5rem);
	line-height:1.08;
	letter-spacing:-.022em;
	text-wrap:balance;
}
.lead{
	margin:0;
	max-width:58ch;
	font-size:clamp(1rem,2.1vw,1.14rem);
	line-height:1.62;
	color:var(--ink-2);
}

/* ---------- Kontakt ---------- */
.contact{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:.6em;
	padding-top:clamp(18px,2.6vw,24px);
	border-top:1px solid var(--rule);
}
.label{
	font-family:var(--f-mono);
	font-size:.68rem;
	font-weight:500;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--ink-3);
}
.mail{
	font-family:var(--f-mono);
	font-weight:500;
	font-size:clamp(1rem,3.1vw,1.32rem);
	color:var(--ink);
	text-decoration:none;
	padding-bottom:.1em;
	border-bottom:2px solid var(--accent);
	transition:color .18s ease,border-color .18s ease;
}
.mail:hover{color:var(--accent);border-color:var(--ink-3)}
.who{font-size:.94rem;color:var(--ink-3)}

.meta{
	margin:0;
	display:flex;
	flex-wrap:wrap;
	gap:.35em 1.2em;
	font-family:var(--f-mono);
	font-weight:500;
	font-size:.66rem;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ink-3);
}
.meta a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule)}
.meta a:hover{color:var(--ink);border-color:var(--accent)}

/* ============================================================
   Logo-Zustaende (nur Startseite)
   .is-building  -> Kontur zeichnen, dann fuellen
   Danach bleibt das Logo statisch - siehe Hinweis weiter unten.
   ============================================================ */

.mark .schulte-text path{fill:var(--logo-word)}
.mark .digital-solutions-text path{fill:var(--logo-sub)}
.mark .logo-icon .dark-green{fill:var(--logo-a)}
.mark .logo-icon .medium-green{fill:var(--logo-b)}
.mark .logo-icon .light-green{fill:var(--logo-c)}

.mark .logo-icon .bracket,
.mark .logo-icon .center-bar{
	transform-box:fill-box;
	transform-origin:center;
}
.mark .logo-icon polygon,
.mark .logo-icon rect{
	vector-effect:non-scaling-stroke;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.mark.is-building .logo-icon .dark-green{stroke:var(--logo-a)}
.mark.is-building .logo-icon .medium-green{stroke:var(--logo-b)}
.mark.is-building .logo-icon .light-green{stroke:var(--logo-c)}

.mark.is-building .logo-icon .bracket polygon,
.mark.is-building .logo-icon .center-bar{
	stroke-width:var(--build-stroke);
	fill-opacity:0;
	stroke-opacity:1;
}
.mark.is-building .logo-icon .bracket polygon{
	stroke-dasharray:var(--dash-bracket);
	stroke-dashoffset:var(--dash-bracket);
}
.mark.is-building .logo-icon .center-bar{
	stroke-dasharray:var(--dash-bar);
	stroke-dashoffset:var(--dash-bar);
}

.mark.is-building .logo-icon .bracket--left polygon{
	animation:draw var(--build-draw) ease-out forwards 0ms,
	          fill-in var(--build-fill) ease-out forwards var(--fill-delay);
}
.mark.is-building .logo-icon .bracket--right polygon{
	animation:draw var(--build-draw) ease-out forwards var(--delay-right),
	          fill-in var(--build-fill) ease-out forwards var(--fill-delay);
}
.mark.is-building .logo-icon .center-bar{
	animation:draw var(--build-draw) ease-out forwards var(--delay-bar),
	          fill-in var(--build-fill) ease-out forwards var(--fill-delay);
}
.mark.is-building .schulte-text{animation:rise 620ms ease-out forwards 620ms}
.mark.is-building .digital-solutions-text{animation:rise 620ms ease-out forwards 840ms}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fill-in{to{fill-opacity:1;stroke-opacity:0}}
@keyframes rise{from{opacity:.22;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* Nach dem Aufbau bleibt das Logo bewusst voellig statisch.
   Eine dauerhafte Animation im SVG (Klammern bewegen, Balken skalieren)
   zwingt den Browser, in jedem Frame das gesamte SVG neu zu rastern -
   die Buchstaben der Wortmarke flimmern dann sichtbar, obwohl sie selbst
   nicht animiert sind. Der Ladezustand wird stattdessen ausserhalb des
   Logos gezeigt: Statuspunkt und Fortschrittsleiste. */

/* ============================================================
   Rechtsseiten (body.doc) - Impressum, Datenschutz
   ============================================================ */
body.doc{
	padding:clamp(28px,6vw,72px) clamp(20px,6vw,72px) clamp(56px,9vw,110px);
}

.doc{
	position:relative;
	z-index:1;
	max-width:44rem;
	margin:0 auto;
}

.doc-head{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:clamp(18px,2.8vw,26px);
	padding-bottom:clamp(22px,3.2vw,32px);
	border-bottom:1px solid var(--rule);
}
.doc-logo{
	width:clamp(148px,26vw,186px);
	height:auto;
	display:block;
}
.back{
	font-family:var(--f-mono);
	font-weight:500;
	font-size:.68rem;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--ink-3);
	text-decoration:none;
	transition:color .18s ease;
}
.back:hover{color:var(--accent)}

.doc h1{
	margin:clamp(30px,4.5vw,46px) 0 0;
	font-family:var(--f-display);
	font-weight:700;
	font-size:clamp(1.5rem,4vw,2.05rem);
	line-height:1.12;
	letter-spacing:-.02em;
	text-wrap:balance;
}
.doc-stand{
	margin:.9em 0 0;
	font-family:var(--f-mono);
	font-weight:500;
	font-size:.68rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ink-3);
}

.doc h2{
	margin:clamp(34px,4.5vw,50px) 0 .55em;
	font-family:var(--f-display);
	font-weight:700;
	font-size:clamp(1.06rem,2.5vw,1.22rem);
	line-height:1.25;
	letter-spacing:-.008em;
}
.doc h3{
	margin:1.9em 0 .55em;
	font-family:var(--f-mono);
	font-weight:500;
	font-size:.72rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ink-3);
}
.doc p,
.doc li{
	max-width:66ch;
	font-size:1rem;
	line-height:1.68;
	color:var(--ink-2);
}
.doc p{margin:0 0 1em}

/* Newsreader liegt nur im Schnitt 400 vor - Hervorhebung ueber
   Kontrast statt ueber einen simulierten Fettschnitt. */
.doc strong{font-weight:400;color:var(--ink)}
.doc ul{
	margin:0 0 1em;
	padding-left:1.15em;
	display:flex;
	flex-direction:column;
	gap:.35em;
}
.doc li::marker{color:var(--ink-3)}

.doc a{
	color:var(--ink);
	text-decoration:none;
	border-bottom:1px solid var(--accent);
	transition:color .18s ease;
}
.doc a:hover{color:var(--accent)}
.doc .back,
.doc .meta a{border-bottom:none}

/* Angaben-Block: Mono-Label, Wert daneben */
.facts{
	margin:0 0 1.4em;
	display:grid;
	grid-template-columns:auto 1fr;
	gap:.55em 1.6em;
	align-items:baseline;
}
.facts dt{
	font-family:var(--f-mono);
	font-weight:500;
	font-size:.7rem;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ink-3);
	padding-top:.25em;
}
.facts dd{
	margin:0;
	font-size:1rem;
	line-height:1.55;
	color:var(--ink);
}
@media (max-width:34rem){
	.facts{grid-template-columns:1fr;gap:.2em}
	.facts dd{margin-bottom:.8em}
}

/* Noch auszufuellende Angaben - im Quelltext und auf der Seite sichtbar */
.fill{
	font-family:var(--f-mono);
	font-weight:500;
	font-size:.86em;
	color:var(--ink);
	background:var(--fill-bg);
	border-bottom:1px dashed var(--accent);
	padding:.1em .4em;
	white-space:nowrap;
}

/* Hinweiskasten - vor dem Livegang loeschen */
.todo{
	margin:clamp(26px,3.5vw,36px) 0 0;
	padding:clamp(16px,2.4vw,22px) clamp(18px,2.6vw,24px);
	border:1px dashed var(--accent);
	background:var(--fill-bg);
	display:flex;
	flex-direction:column;
	gap:.5em;
}
.todo p,
.todo li{color:var(--ink);max-width:64ch}
.todo p:last-child,
.todo ul:last-child{margin-bottom:0}
.todo strong{
	font-family:var(--f-mono);
	font-weight:500;
	font-size:.72rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--accent);
}

.doc footer{
	margin-top:clamp(44px,6vw,72px);
	padding-top:clamp(20px,2.8vw,28px);
	border-top:1px solid var(--rule);
}

@media (prefers-reduced-motion:reduce){
	.status .dot{animation:none}
	.progress::after{animation:none;transform:none;width:40%}
	.mark.is-building .logo-icon .bracket polygon,
	.mark.is-building .logo-icon .center-bar{
		animation:none;
		fill-opacity:1;
		stroke-opacity:0;
	}
	.mark.is-building .schulte-text,
	.mark.is-building .digital-solutions-text{animation:none;opacity:1}
}