/* MetisOrdo — Stylesheet fuer alle Seiten.
Herkunft: Prototyp prototype/MetisOrdoCloud_Website.html, ungenutzte Regeln entfernt. */
/* ---------- Schrift: Inter, lokal eingebunden (keine Verbindung zu Google Fonts) ---------- */
@font-face{
font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url('../fonts/inter-latin-wght-normal.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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url('../fonts/inter-latin-ext-wght-normal.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;
}
:root{
/* Palette Braun/Beige/Petrol — Braun trägt, Beige gliedert, Petrol setzt Akzente */
--brown:#37271D; /* Träger: Text, Marke, dunkle Bänder */
--brown-deep-rgb:48,33,24; /* #302118 als Kanäle, für die halbtransparenten Schleier über Fotos */
--brown-deep:rgb(var(--brown-deep-rgb)); /* Braun abgedunkelt: dunkle Fotoflächen */
--petrol:#1F6B73; /* Akzent: Rubrikzeilen, Häkchen, Nummern — nur auf Weiß oder Beige */
--petrol-light:#7FC1C6; /* Akzent auf dunkelbraunem Grund */
--bordeaux-deep:#6E1422; /* Handlung, gedrückt/Hover */
--sand:#C4B6A2; /* Rahmen, Labels auf Braun — nie Textfarbe auf Weiß */
--white:#FFFFFF; /* Grundfläche und Luft, dominant */
--beige-rgb:239,230,212; /* #EFE6D4 als Kanäle, für den hellen Fotoverlauf */
--beige:rgb(var(--beige-rgb)); /* hellste Beigestufe: abgesetzte Bereiche */
--beige-deep:#E4D9C5; /* abwechselnde Zeilen, hervorgehobene Karte */
--linen:#E2D7C2; /* Linien auf Weiß, Fließtext auf Braun */
/* Beige-Abstufungen: EFE6D4 · E4D9C5 · E2D7C2 · C4B6A2 · 665545 */
--ink:var(--brown); /* Braun schreibt */
--ink-2:var(--brown); /* Fließtext, gleiche Trägerfarbe */
--muted:#665545; /* Sekundärtext auf Weiß, Linien im Projektablauf */
--line:var(--linen); /* Linien auf Weiß */
--line-strong:var(--sand); /* kräftigere Rahmen */
--line-dark:#14405C; /* Linien auf dunklem Grund */
--on-dark:#FFFFFF; /* Text auf Braun */
--on-dark-2:var(--linen); /* Fließtext auf Braun */
--on-dark-muted:var(--sand); /* Labels auf Braun */
--paper:var(--white);
--paper-alt:var(--beige);
--maxw:1180px;
--gutter:clamp(22px,5vw,64px);
/* Einheitliche Saettigung aller Fotoflaechen (Hero, Ausgangslage, Nutzen, Betriebsmodell, Kontakt) */
--photo-sat:.85;
/* Typo-Skala nach dem System von beyrerconsulting.com:
Basis 15-17px, fluid ueber die Viewportbreite, Endwert ab 1400px erreicht.
Gegenueber der Referenz durchgehend angehoben - besonders am unteren Ende,
weil Labels, Menue und Fusszeile sonst zu klein zu lesen sind.
h1 exakt wie die Referenz, alle Stufen darunter angehoben,
damit die Abstufung h1 > h2 > h3 > Text sichtbar bleibt.
Genau drei Ueberschriftsgroessen - h4 und Listentitel nutzen die h3-Stufe.
Insgesamt genau fuenf Schriftgroessen (sm, base, h3, h2, h1):
Versal-Labels laufen auf der base-Stufe, Lead-Absaetze auf der h3-Stufe. */
/* --type-scale verkleinert oder vergroessert die ganze Skala gleichmaessig;
die Pixelangaben rechts sind die Werte vor der Skalierung */
--type-scale:.9;
--fs-sm:calc(min(0.18vw + 15px,17.5px) * var(--type-scale)); /* klein 15 -> 17,5px */
--fs-base:calc(min(0.36vw + 16px,21px) * var(--type-scale)); /* Text, Labels 16 -> 21px */
--num-d:calc(var(--fs-base) * 2.1); /* Nummernkreis 34 -> 44px */
--fs-h1:calc(min(3.5vw + 17px,66px) * var(--type-scale)); /* h1 17 -> 66px */
--fs-h2:calc(min(2.64vw + 17px,54px) * var(--type-scale)); /* h2 17 -> 54px */
--fs-h3:calc(min(0.93vw + 16.5px,29.5px) * var(--type-scale)); /* h3, Lead 16,5 -> 29,5px */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:96px}
body{
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
color:var(--ink);background:var(--paper);
font-weight:400;font-size:var(--fs-base);line-height:1.66;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
/* ---------- typography ---------- */
h1,h2,h3,h4{font-weight:300;letter-spacing:-.005em;line-height:1.12;color:var(--brown);
overflow-wrap:break-word}
/* Keine automatische Silbentrennung in Ueberschriften ("Si-cherer"); getrennt wird nur an
im Text. Lange Komposita bekommen dort ein , overflow-wrap faengt den Rest ab. */
h1,h2,h3,h4{-webkit-hyphens:manual;hyphens:manual}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);line-height:1.14}
h3,h4{font-size:var(--fs-h3);font-weight:600;line-height:1.28}
/* Optischer Randausgleich: Inter Light hat links eingebauten Weissraum (E/B/I/M: 0,096em).
Bei grossen Headlines sind das 5-6px - ohne Ausgleich stehen sie sichtbar rechts neben
Eyebrow und Fliesstext. -.07em bringt die Grossbuchstaben auf die Kante der Eyebrow. */
h1,h2{margin-left:-.07em}
/* Wie die Referenz skaliert die Skala unter 768px im Hochformat ueber die
Viewporthoehe statt -breite (gedeckelt bei 900px Hoehe). Der dortige feste
h1-Wert von 35px entfaellt, weil h2 hier groesser waere als 35px. */
@media screen and (max-width:767px) and (orientation:portrait){
:root{
--fs-sm:calc((min(0.18vh,1.6px) + 15px) * var(--type-scale));
--fs-base:calc((min(0.36vh,3.2px) + 16px) * var(--type-scale));
--fs-h1:calc((min(3.5vh,31.5px) + 17px) * var(--type-scale));
--fs-h2:calc((min(2.64vh,23.8px) + 17px) * var(--type-scale));
--fs-h3:calc((min(0.93vh,8.4px) + 16.5px) * var(--type-scale));
}
}
p{max-width:64ch}
/* Kleine Versal-Ueberschriften - Eyebrow ueber Abschnitten und Labels ueber Karten:
ueberall gleiche Groesse und gleicher Buchstabenabstand */
.eyebrow,.num{font-size:var(--fs-base);font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--petrol)}
.eyebrow{margin-bottom:1.5rem}
.lead{font-size:var(--fs-h3);font-weight:300;line-height:1.5;color:var(--ink-2);max-width:56ch}
.lead+.lead{margin-top:1.2rem}
.muted{color:var(--muted)}
/* Textlinks im Fließtext: Petrol als Signalfarbe, auf braunen Flächen weiß */
p a:not(.btn),.flist a:not(.btn){color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.theme-black p a:not(.btn),.theme-black .flist a:not(.btn){color:#fff}
/* ---------- sections ---------- */
section{padding:clamp(74px,9vw,132px) 0}
.theme-black{background:var(--brown);color:var(--on-dark)}
.theme-black h1,.theme-black h2,.theme-black h3,.theme-black h4{color:#fff}
.theme-black .lead{color:var(--on-dark-2)}
.theme-black .eyebrow{color:var(--petrol)}
.theme-black .muted{color:var(--on-dark-muted)}
.theme-alt{background:var(--paper-alt)}
.section-head{max-width:56ch;margin-bottom:clamp(38px,4.5vw,62px)}
/* Nur Absaetze nach der Ueberschrift - die Eyebrow davor behaelt ihre eigene Groesse */
.section-head h2~p{margin-top:1.4rem;font-size:var(--fs-base);line-height:1.6}
/* ---------- header ---------- */
header{
position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:155px}
/* Logo links, Menue rechts - das erledigt justify-content:space-between in .nav;
auf kleinen Displays sitzt rechts stattdessen der Hamburger */
/* Hoehe des Firmenlogos ueber --logo-h. Der Faktor 846/788 stammt aus der frueheren Abstimmung
auf das Produktlogo und haelt die bisherige Groesse. Die negative Marge gleicht den
transparenten Rand links aus (112 * 564/448 = 141), damit die Linien an der Textkante beginnen. */
.nav{--logo-h:128px}
.firm{flex:none;line-height:0;margin-left:calc(var(--logo-h) * -141 / 788)}
.firm img{height:calc(var(--logo-h) * 846 / 788);width:auto}
.nav-links{display:flex;gap:1.2rem;list-style:none;align-items:center}
.nav-links a{
text-decoration:none;font-size:var(--fs-sm);letter-spacing:.04em;text-transform:uppercase;
font-weight:500;color:var(--brown);padding-bottom:3px;border-bottom:1px solid transparent;white-space:nowrap;
}
.nav-links a:hover{color:var(--petrol);border-bottom-color:var(--petrol)}
/* Zwischenstufe: Menü passt sonst zwischen 960 und 1150 px nicht neben das Logo */
@media(max-width:1150px){
.nav{--logo-h:108px}
.nav-links{gap:.7rem}
.nav-links a{font-size:var(--fs-sm);letter-spacing:.02em}
}
/* Hamburger: erscheint, sobald das Menue nicht mehr neben das Logo passt, und sitzt an
dessen Stelle rechts. Das Menue klappt unter der Kopfzeile auf. */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
width:48px;height:48px;padding:0;background:transparent;border:0;color:var(--brown);cursor:pointer}
.nav-toggle span{display:block;width:26px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:960px){
.nav-toggle{display:flex}
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
gap:0;padding:0 var(--gutter);background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nav-links.is-open{display:flex}
.nav-links li+li{border-top:1px solid var(--line)}
.nav-links a{display:block;padding:18px 0;border-bottom:0;font-size:var(--fs-base)}
}
/* Kopfzeile auf kleinen Displays: kleineres Logo, niedrigere Leiste */
@media(max-width:620px){
.nav{--logo-h:85px;height:96px;gap:.8rem}
}
/* ---------- buttons ---------- */
.btn{
display:inline-block;text-decoration:none;font-size:var(--fs-sm);font-weight:600;
letter-spacing:.16em;text-transform:uppercase;padding:15px 32px;
border:1px solid var(--petrol);transition:background .18s,color .18s,border-color .18s;
}
.btn--solid{background:var(--petrol);color:#fff}
.btn--solid:hover{background:var(--bordeaux-deep);border-color:var(--bordeaux-deep);color:#fff}
.theme-black .btn--solid{background:#fff;color:var(--brown);border-color:#fff}
.theme-black .btn--solid:hover{background:var(--on-dark-2);border-color:var(--on-dark-2);color:var(--brown)}
/* ---------- hero ---------- */
/* Vollflaechiges Foto hinter dem Text (Aufbau siehe Fotoflaechen), Inhalt vertikal mittig */
.hero{padding:clamp(88px,11vw,168px) 0;min-height:clamp(520px,74vh,820px);display:flex;align-items:center}
.hero>.wrap{flex:1 1 auto}
.hero h1{max-width:20ch;margin-bottom:1.8rem}
.hero .lead{max-width:56ch}
.video-link{display:inline-flex;align-items:center;gap:12px;margin-top:2.4rem;color:#fff;text-decoration:none;
font-size:var(--fs-sm);font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.video-link svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.2}
.video-link svg path{fill:currentColor;stroke:none}
.video-link:hover{color:var(--on-dark-2)}
/* ---------- produktvideo ---------- */
/* Hochformat-Video (9:16) rechts neben dem Abschnittskopf, auf schmalen Schirmen darunter */
.funktion-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(40px,6vw,96px);
align-items:center;margin-bottom:clamp(38px,4.5vw,62px)}
.funktion-intro .section-head{margin-bottom:0}
.produktvideo{margin:0;width:clamp(240px,24vw,320px)}
.produktvideo video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:var(--paper-alt);
border-radius:14px;box-shadow:0 18px 44px rgba(var(--brown-deep-rgb),.18)}
@media(max-width:860px){
.funktion-intro{grid-template-columns:1fr;row-gap:36px}
.produktvideo{width:min(100%,320px);justify-self:center}
}
/* ---------- grids ---------- */
.grid{display:grid;column-gap:clamp(28px,4vw,58px);row-gap:clamp(40px,4.5vw,64px)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
/* Karten ohne seitlichen Innenabstand: der Text beginnt an derselben Kante wie die
Abschnittsueberschrift. Eine Linie oben trennt die Karten wie in der Feature-Liste. */
.cell{border-top:1px solid var(--line);padding-top:clamp(24px,2.6vw,34px)}
.theme-black .cell{border-color:var(--line-dark)}
.num{display:block;margin-bottom:1.5rem}
.theme-black .num{color:var(--on-dark-muted)}
/* Nummer als Kreis mit weisser Zahl, abwechselnd Petrol und Braun (Einsatzbereiche, Projektablauf) */
.num--circle{display:grid;place-items:center;width:var(--num-d);height:var(--num-d);border-radius:50%;
background:var(--petrol);color:#fff;letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums}
.flist--numbered li:nth-child(even) .num--circle,.timeline li:nth-child(even) .num--circle{background:var(--brown)}
.cell h3{margin-bottom:1rem}
.cell p{font-size:var(--fs-base);line-height:1.6;color:var(--ink-2)}
.theme-black .cell p{color:var(--on-dark-2)}
/* Hervorgehobene Karte: beige Flaeche wie die dunkleren Stationen im Projektablauf, Schrift
bleibt wie sonst. Der obere Innenabstand bleibt wie bei .cell, damit Label und Ueberschrift auf
einer Hoehe mit der Nachbarkarte beginnen. */
.cell--featured{background:var(--beige-deep);border-top-color:var(--beige-deep);
padding:clamp(24px,2.6vw,34px) clamp(24px,3vw,40px) clamp(28px,3vw,40px);
-webkit-print-color-adjust:exact;print-color-adjust:exact}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr}}
/* Optischer Ausgleich (Der Unterschied): Spalte 1 hat kurze Zeilen, Spalte 2 laeuft bis an den
Rand - dadurch wirkt die linke Luecke groesser. Die mittlere Spalte rueckt um 20 % der
Spaltenluecke nach links, nur solange drei Spalten nebeneinander stehen. */
@media(min-width:901px){.grid-3--ausgleich>:nth-child(2){position:relative;left:calc(clamp(28px,4vw,58px) * -.2)}}
/* ---------- feature list ---------- */
.flist{list-style:none;border-top:1px solid var(--line)}
.theme-black .flist{border-color:var(--line-dark)}
.flist li{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(20px,4vw,58px);
padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.theme-black .flist li{border-color:var(--line-dark)}
/* Listentitel in der h3-Stufe; getrennt wird wie bei Ueberschriften nur an */
.flist strong{display:block;font-weight:600;font-size:var(--fs-h3);line-height:1.28;color:var(--brown);
overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual}
.theme-black .flist strong{color:#fff}
/* Alle Absaetze eines Eintrags stehen in der rechten Spalte, auch der zweite und dritte */
.flist li>:not(strong){grid-column:2}
.flist p{font-size:var(--fs-base);line-height:1.6;color:var(--ink-2);max-width:70ch}
.theme-black .flist p{color:var(--on-dark-2)}
@media(max-width:700px){.flist li{grid-template-columns:1fr;gap:.5rem}.flist li>:not(strong){grid-column:auto}}
/* Variante: Eintraege auf abwechselnd helleren und dunkleren Flaechen wie im Projektablauf. Der
Innenabstand ragt in den Seitenrand, damit der Text buendig mit der Ueberschrift beginnt. */
.flist--striped{--inset:clamp(16px,2vw,28px);border-top:0;margin-inline:calc(-1 * var(--inset));
-webkit-print-color-adjust:exact;print-color-adjust:exact}
.flist--striped li{padding-inline:var(--inset);border-bottom:0;background:var(--beige)}
.flist--striped li:nth-child(even){background:var(--beige-deep)}
/* Variante: Nummernkreis (.num--circle) vor dem Titel. Der Kreis hat eine eigene Spalte, damit
mehrzeilige Titel buendig untereinander stehen, und sitzt mittig auf der ersten Titelzeile
(Zeilenhoehe des Titels minus Kreisdurchmesser, halbiert). */
.flist--numbered strong{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.55em;align-items:start}
.flist--numbered .num{margin:calc((var(--fs-h3) * 1.28 - var(--num-d)) / 2) 0 0}
/* ---------- quote ---------- */
.pull{font-size:var(--fs-h2);font-weight:300;line-height:1.3;max-width:24ch}
/* ---------- footer ---------- */
footer{background:var(--brown);color:var(--on-dark-muted);padding:44px 0;border-top:1px solid var(--line-dark);font-size:var(--fs-sm)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.2rem}
.foot a{text-decoration:none;color:var(--on-dark-muted)}
.foot a:hover{color:#fff}
/* ---------- Portraets ---------- */
.portrait{width:min(100%,clamp(260px,28vw,356px));aspect-ratio:1;margin-bottom:1.9rem;overflow:hidden;
border:1px solid var(--line-strong)}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04)}
/* ---------- Fotoflaechen: Bild hinter dem Text ---------- */
/* Das Foto liegt als ![]()
unter dem Inhalt, darueber ein Verlauf (::before), der die
weisse Schrift lesbar haelt. Bei .photo--right beginnt das Foto auf breiten Schirmen
erst rechts der Textspalte, damit das Motiv nicht unter der Headline liegt; seine linke
Kante blendet weich in die Grundfarbe aus. Foto und Verlauf bleiben auch im PDF-Druck. */
.photo{position:relative;isolation:isolate;overflow:hidden;
-webkit-print-color-adjust:exact;print-color-adjust:exact}
.photo::before{content:"";position:absolute;inset:0;z-index:-1}
.photo-bg{position:absolute;inset:0;z-index:-2;margin:0}
.photo-bg img{width:100%;height:100%;object-fit:cover}
.photo--right .photo-bg{left:34%}
.photo--right .photo-bg img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);
mask-image:linear-gradient(90deg,transparent,#000 30%)}
@media(max-width:860px){
.photo--right .photo-bg{left:0}
.photo--right .photo-bg img{-webkit-mask-image:none;mask-image:none}
}
/* Hero: brauner Verlauf von links, rechts bleibt die Gespraechsszene sichtbar. Foto und Verlauf blenden
in mehreren Stufen und ueber eine laengere Strecke ineinander, damit keine sichtbare Kante an der
Fotogrenze entsteht; rechts bleibt ein leichter Schleier liegen, der die hellen Fensterflaechen daempft. */
.hero::before{background:
linear-gradient(0deg,rgba(var(--brown-deep-rgb),.25),rgba(var(--brown-deep-rgb),0) 45%),
linear-gradient(90deg,rgba(var(--brown-deep-rgb),.97) 0%,rgba(var(--brown-deep-rgb),.93) 32%,rgba(var(--brown-deep-rgb),.82) 46%,rgba(var(--brown-deep-rgb),.66) 60%,
rgba(var(--brown-deep-rgb),.15) 78%,rgba(var(--brown-deep-rgb),.15) 100%)}
.hero .photo-bg img{object-position:50% 28%;filter:saturate(var(--photo-sat));
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 22%,rgba(0,0,0,.75) 45%,#000 65%);
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 22%,rgba(0,0,0,.75) 45%,#000 65%)}
@media(max-width:860px){
.hero::before{background:linear-gradient(180deg,rgba(var(--brown-deep-rgb),.8),rgba(var(--brown-deep-rgb),.92))}
.hero .photo-bg img{-webkit-mask-image:none;mask-image:none}
}
/* ---------- Helle Fotoflaechen: Text links, Foto rechts als Hintergrund ---------- */
/* Ergaenzt .photo--right fuer helle Abschnitte (Ausgangslage, Betriebsmodell): Das Foto fuellt
den Abschnitt rechts in voller Hoehe und blendet nach links aus. Der helle Verlauf in der
Grundfarbe liegt hinter der Textspalte und haelt die dunkle Schrift lesbar, wo das Foto unter
den Text laeuft. */
.photo--light::before{background:linear-gradient(90deg,var(--beige) 0%,rgba(var(--beige-rgb),.92) 30%,
rgba(var(--beige-rgb),.7) 45%,rgba(var(--beige-rgb),.4) 60%,rgba(var(--beige-rgb),.15) 78%,rgba(var(--beige-rgb),0) 100%)}
/* Gedaempfte Farben und ein langer Uebergang, damit das Foto ruhig im Hintergrund bleibt */
.photo--light .photo-bg img{opacity:.8;filter:saturate(var(--photo-sat));
-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%)}
.photo-text{max-width:52%}
/* Aufzaehlung mit Haekchen in Petrol (Ausgangslage). Das Haekchen ist per CSS gezeichnet und sitzt
mittig auf der ersten Zeile; Folgezeilen laufen buendig mit dem Text, nicht unter das Haekchen. */
.checklist{list-style:none}
.checklist li{position:relative;padding-left:1.5em}
.checklist li+li{margin-top:.9rem}
.checklist li::before{content:"";position:absolute;left:.1em;top:.52em;width:.62em;height:.32em;
border-left:2px solid var(--petrol);border-bottom:2px solid var(--petrol);transform:rotate(-45deg)}
.warum .photo-bg img{object-position:72% 50%}
.betrieb .photo-bg img{object-position:65% 40%}
/* Schmal: Foto unter dem Text statt dahinter, oben weich in die Grundfarbe ausgeblendet */
@media(max-width:860px){
.photo--light{padding-bottom:0}
.photo--light::before{content:none}
.photo--light .photo-bg{position:relative;inset:auto;z-index:auto;aspect-ratio:16/10;margin-top:clamp(34px,6vw,56px)}
.photo--light .photo-bg img{-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);
mask-image:linear-gradient(180deg,transparent,#000 30%)}
.photo-text{max-width:none}
}
/* ---------- Piktogramme neben der Kartennummer ---------- */
.step-head{display:flex;align-items:center;gap:18px;margin-bottom:1.5rem}
.step-head .num{margin:0}
.icon{width:44px;height:44px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;
stroke-linecap:round;stroke-linejoin:round;color:var(--petrol)}
.theme-black .icon{color:#fff}
/* ---------- Performance: dezentes Buerofoto unter einem einfarbigen braunen Schleier ---------- */
.wirkung{background:#2B0B14}
.wirkung::before{background:rgba(var(--brown-deep-rgb),.55)}
.wirkung .eyebrow{color:var(--on-dark-muted)}
.wirkung .photo-bg img{filter:saturate(var(--photo-sat)) contrast(1.05);object-position:center 35%}
/* Karten als leicht abgesetzte Flaechen ueber dem Foto */
.wirkung .grid{column-gap:clamp(16px,2vw,26px);row-gap:clamp(16px,2vw,26px)}
.wirkung .cell{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
padding:clamp(24px,2.6vw,34px);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* ---------- Besonders: Netzwerk-Linien als Hintergrundtextur ---------- */
.texture{position:relative;isolation:isolate;overflow:hidden}
/* Links nicht ganz ausgeblendet, damit das Netz auch hinter der Textspalte erkennbar bleibt */
.texture-net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;color:var(--brown);opacity:.28;
fill:currentColor;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 55%);
mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 55%)}
.texture-net path{fill:none;stroke:currentColor;stroke-width:1.25;vector-effect:non-scaling-stroke}
/* ---------- Projektablauf: Zeitstrahl ---------- */
/* Fuenf Stationen auf einer durchgehenden Linie, die mitten durch die Nummernkreise laeuft. Die
Stationen liegen auf abwechselnd helleren und dunkleren Flaechen, die ohne Luecke aneinander-
stossen; der Innenabstand (--inset) ragt links und rechts in den Seitenrand, damit der Text
buendig mit der Ueberschrift beginnt und die Spalten so breit bleiben wie ohne Flaechen.
Das Linienstueck bis zur naechsten Station ist ::after mit z-index, sonst ueberdeckt die
Flaeche der naechsten Station das Linienende; der Nummernkreis liegt noch darueber, so dass
die Linie hinter den Kreisen durchlaeuft. Auf schmaleren Schirmen wird daraus ein senkrechter
Zeitstrahl durch die Kreise links, Titel und Text stehen rechts daneben. */
.timeline{--num-h:var(--num-d);--line-y:calc(var(--pad) + var(--num-h) / 2);
--inset:clamp(9px,1.1vw,16px);--pad:clamp(22px,2.4vw,32px);
list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
margin-inline:calc(-1 * var(--inset));
-webkit-print-color-adjust:exact;print-color-adjust:exact}
.timeline li{position:relative;min-width:0;padding:var(--pad) var(--inset);background:var(--beige)}
.timeline li:nth-child(even){background:var(--beige-deep)}
.timeline .num{position:relative;z-index:2}
.timeline h3{margin-bottom:.8rem}
/* In den schmalen Spalten trennen, sonst laufen Komposita wie "Unternehmenswissens" bis in die
Nachbarspalte - aber nur lange Woerter (ab 12 Zeichen, mind. 5 je Seite), damit der Text ruhig bleibt */
.timeline p{font-size:var(--fs-base);line-height:1.6;color:var(--ink-2);-webkit-hyphens:auto;hyphens:auto;
hyphenate-limit-chars:12 5 5}
.timeline li:not(:last-child)::after{content:"";position:absolute;z-index:1;left:calc(var(--inset) + var(--num-h) / 2);
right:calc(-1 * var(--inset));top:var(--line-y);height:1px;background:var(--muted)}
@media(max-width:980px){
.timeline{--inset:16px;grid-template-columns:1fr}
/* Kreis links ueber Titel- und Textzeile, die senkrechte Linie laeuft durch die Kreismitten */
.timeline li{display:grid;grid-template-columns:var(--num-h) minmax(0,1fr);column-gap:18px;align-items:start}
.timeline .num{grid-column:1;grid-row:1 / span 2;margin:0}
.timeline h3,.timeline p{grid-column:2}
/* erste Titelzeile mittig zum Kreis */
.timeline h3{margin-top:calc((var(--num-h) - var(--fs-h3) * 1.28) / 2)}
.timeline p{-webkit-hyphens:manual;hyphens:manual}
.timeline li:not(:last-child)::after{left:calc(var(--inset) + var(--num-h) / 2 - .5px);right:auto;width:1px;height:auto;
bottom:calc(-1 * var(--line-y))}
}
/* ---------- Kontakt: stark abgedunkeltes Beratungsgespraech als Abschluss ---------- */
.kontakt{padding:clamp(96px,12vw,176px) 0}
.kontakt::before{background:linear-gradient(90deg,rgba(var(--brown-deep-rgb),.96) 0%,rgba(var(--brown-deep-rgb),.9) 40%,rgba(var(--brown-deep-rgb),.5) 70%,rgba(var(--brown-deep-rgb),.4) 100%)}
.kontakt .photo-bg img{object-position:50% 30%;filter:saturate(var(--photo-sat))}
@media(max-width:860px){.kontakt::before{background:rgba(var(--brown-deep-rgb),.88)}}
/* Text und Formular untereinander in einer Spalte links - rechts bleibt das Motiv sichtbar */
.kontakt-col>*{max-width:38rem}
.kontakt-col .kontakt-form{margin-top:clamp(30px,3.5vw,44px)}
/* ---------- Kontaktformular ---------- */
/* Helle Glasflaeche statt weisser Karte: hebt sich vom dunklen Grund ab, ohne zu blenden; das
Foto schimmert gedaempft durch. Die Felder liegen als dunklere Mulden darin, die Schrift ist
hell wie der uebrige Text auf Braun. Der Button folgt der Regel fuer dunkle Flaechen (weiss). */
.kontakt-form{--field-line:rgba(255,255,255,.3);--error:#F2A7B1;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
box-shadow:0 24px 60px rgba(0,20,36,.35);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;color-scheme:dark;
padding:clamp(26px,3.2vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.kontakt-form .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.kontakt-form .field--full{grid-column:1/-1}
.kontakt-form label{font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;color:var(--on-dark-2)}
.kontakt-form .req{color:#fff}
.kontakt-form .opt{font-weight:400;color:var(--on-dark-muted)}
.kontakt-form input,.kontakt-form textarea{width:100%;font:inherit;font-size:var(--fs-base);color:#fff;
background:rgba(var(--brown-deep-rgb),.4);border:1px solid var(--field-line);border-radius:0;padding:12px 14px;
transition:background .18s,border-color .18s}
.kontakt-form textarea{min-height:9rem;resize:vertical}
.kontakt-form input:hover,.kontakt-form textarea:hover{border-color:rgba(255,255,255,.5)}
.kontakt-form input:focus,.kontakt-form textarea:focus{outline:2px solid #fff;outline-offset:-1px;
border-color:#fff;background:rgba(var(--brown-deep-rgb),.55)}
.kontakt-form input:user-invalid,.kontakt-form textarea:user-invalid{border-color:var(--error)}
/* Autofill faerbt Felder sonst hellgelb mit dunkler Schrift */
.kontakt-form input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;
-webkit-box-shadow:0 0 0 100px #16405D inset}
.kontakt-form .btn{grid-column:1/-1;justify-self:start;cursor:pointer;font-family:inherit;margin-top:6px}
.kontakt-form .btn:disabled{opacity:.6;cursor:default}
.form-note,.form-status{grid-column:1/-1;font-size:var(--fs-sm);line-height:1.5;max-width:none}
.form-note{color:var(--on-dark-muted)}
.form-status{font-weight:600;color:#fff}
.form-status:empty{display:none}
.form-status[data-state="error"]{color:var(--error)}
/* Bestaetigung der Datenschutzerklaerung: Checkbox links, Text daneben auf Hoehe der ersten Zeile */
.kontakt-form .field--check{flex-direction:row;align-items:flex-start;gap:12px}
.kontakt-form .field--check input{flex:none;width:20px;height:20px;margin-top:.12em;padding:0;accent-color:#fff;cursor:pointer}
.kontakt-form .field--check label{font-weight:400;line-height:1.5;cursor:pointer}
.kontakt-form .field--check a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Honeypot gegen Spam-Bots: fuer Menschen unsichtbar */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){.kontakt-form{grid-template-columns:1fr}}
/* ---------- Abstaende, die im Prototyp als style-Attribut im HTML standen ---------- */
/* Mehrere Absaetze in einer Karte oder einem Listeneintrag */
.cell p+p,.flist li p+p{margin-top:1rem}
/* Ausgangslage: Abstand zwischen Einleitung und Haekchenliste (vorher ein
) */
.photo-text p+.checklist{margin-top:1.66em}
/* Betriebsmodell und Kontakt: Lead unter der Ueberschrift, Fliesstext darunter */
.photo-text h2+.lead,.kontakt-col h2+.lead{margin-top:1.8rem}
.photo-text .lead+p{margin-top:1.6rem;color:var(--ink-2)}
.foot-links{display:flex;gap:1.8rem}
/* ---------- Webinar-Landingpage ---------- */
/* Eckdaten im Hero, zwei Spalten, damit sie links auf dem dunklen Verlauf bleiben */
.webinar-facts{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;
gap:1.4rem clamp(28px,4vw,58px);margin-top:2.4rem}
.webinar-facts dt{font-size:var(--fs-sm);font-weight:600;letter-spacing:.17em;text-transform:uppercase;
color:var(--on-dark-muted)}
.webinar-facts dd{font-size:var(--fs-base);color:#fff;margin-top:.3rem}
@media(max-width:560px){.webinar-facts{grid-template-columns:1fr}}
.webinar-cta{margin-top:2.6rem}
/* ---------- Rechtliche Seiten (Impressum, Datenschutz, AGB) ---------- */
/* Kopfbereich ohne Foto: niedriger als der Hero der Startseite */
.hero--plain{min-height:0;padding:clamp(56px,6.8vw,96px) 0}
.legal h2{margin-bottom:1.2rem}
.legal .flist{margin-top:0}
/* AGB: Inhaltsverzeichnis, Ziffern mit Nummer in eigener Spalte */
.agb-download{margin-top:2rem}
.agb ol{list-style:none}
.agb-toc{margin-bottom:clamp(38px,4.5vw,62px);padding:clamp(20px,2.4vw,32px);background:var(--beige)}
.agb-toc ol{columns:2 18rem;column-gap:2.5rem}
.agb-toc li{break-inside:avoid;padding:.2rem 0;line-height:1.45}
.agb-toc a{text-decoration:none}
.agb-toc a:hover{text-decoration:underline;text-underline-offset:3px}
.agb h2{font-size:var(--fs-h3);margin:clamp(34px,3.6vw,48px) 0 .6rem;scroll-margin-top:24px}
.agb-clauses>li{display:grid;grid-template-columns:3.4em minmax(0,1fr);column-gap:.9em;padding:.85rem 0;border-top:1px solid var(--line)}
.agb-clauses li ol{grid-column:2;margin-top:.6rem}
.agb-clauses li li{display:grid;grid-template-columns:4.2em minmax(0,1fr);column-gap:.9em;padding:.35rem 0}
.agb-num{font-weight:600;color:var(--petrol);font-variant-numeric:tabular-nums}
.agb-clauses p{font-size:var(--fs-base);line-height:1.6;color:var(--ink-2);max-width:72ch}
.agb-stand{margin-top:2.5rem}
/* Offene Angaben sichtbar machen - verschwindet, sobald alle Platzhalter befuellt sind */
.todo{background:#FFF3CD;color:#6B4E00;padding:.05em .35em;border-bottom:1px solid #E0B400;font-weight:600}
/* ---------- Barrierefreiheit ---------- */
.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--brown);color:#fff;
padding:12px 20px;font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}