/* ==========================================================================
   Auftragsdock – stil.css
   Gemeinsames Stylesheet für alle Seiten von auftragsdock.de
   Grundlage: Auftragsdock-Styleguide, Stand September 2026
   ========================================================================== */

/* --- 1. Design Tokens ---------------------------------------------------- */
:root{
  /* Grundtöne */
  --tiefwasser:#152430;   /* Primärtext, dunkle Flächen  */
  --dock:#2C4354;         /* Sekundärtext                */
  --stahl:#8D989E;        /* Nachrangig, Marker          */
  --stahl-hell:#C9CFD1;   /* Links auf dunklem Grund     */
  --papier:#ECEDEA;       /* Seitenhintergrund           */
  --papier-weiss:#F7F7F5; /* Abgesetzte Flächen          */
  --linie:#D3D7D6;        /* Rahmen, Trenner, 1px        */

  /* Bedeutungstöne – ausschließlich für Zustände, nie als Dekoration */
  --signal:#EFB100;       /* Klärung nötig, Hauptaktion  */
  --signal-tief:#8A6600;  /* Signal als Text auf hell    */
  --signal-aktiv:#E0A600; /* Signal im Hover-Zustand     */
  --freigabe:#2F7A57;     /* Geprüft, zugeordnet         */
  --fehler:#B3382C;       /* Eingabe fehlerhaft          */

  /* Dunkle Flächen – gelten nur auf Tiefwasser-Grund */
  --linie-dunkel:#2A3B47;  /* Fugen und Trenner auf dunkel */
  --rahmen-dunkel:#4A5D6B; /* Umrissschaltfläche auf dunkel */

  /* Schriften */
  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Maße */
  --breit:1180px;
  --radius:2px;
}

/* --- 2. Schriften -------------------------------------------------------- */
/* Die WOFF2-Dateien gehören nach /fonts/. Benötigte Schnitte:
   Archivo 500/600/700, IBM Plex Sans 400/500/600, IBM Plex Mono 400/500.
   Alle unter SIL Open Font License, Selbsthosting ausdrücklich erlaubt.
   Keine Einbindung über fonts.googleapis.com – siehe Datenschutzerklärung §6. */

@font-face{font-family:'Archivo';src:url('/fonts/archivo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/fonts/archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/fonts/plex-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/fonts/plex-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/fonts/plex-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* --- 3. Grundlagen ------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  font-family:var(--sans);
  font-size:17px;line-height:1.6;
  color:var(--tiefwasser);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(2.1rem,5.2vw,3.55rem);line-height:1.08}
h2{font-size:clamp(1.65rem,3.4vw,2.35rem)}
h3{font-size:1.06rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
p{max-width:66ch}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

.wrap{max-width:var(--breit);margin:0 auto;padding:0 28px}
.mess{max-width:70ch}

/* --- 4. Kopfbereich ------------------------------------------------------ */
.kopf{
  position:sticky;top:0;z-index:60;
  background:rgba(236,237,234,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie);
}
.kopf-in{max-width:var(--breit);margin:0 auto;padding:13px 28px;display:flex;align-items:center;gap:26px}
.marke{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:-.025em;text-decoration:none}
.marke svg{display:block;flex:none}
.kopf nav{margin-left:auto;display:flex;align-items:center;gap:26px}
/* Textlinks in der Navigation. :not(.knopf) schließt die Schaltfläche aus –
   sonst überschreibt diese Regel wegen höherer Spezifität deren Farbe und Padding. */
.kopf nav a:not(.knopf){font-size:.9rem;color:var(--dock);text-decoration:none;border-bottom:1px solid transparent;padding:2px}
.kopf nav a:not(.knopf):hover{border-bottom-color:var(--signal)}
.zurueck{margin-left:auto;font-size:.9rem;color:var(--dock);text-decoration:none;border-bottom:1px solid transparent;padding:2px}
.zurueck:hover{border-bottom-color:var(--signal)}
@media(max-width:820px){.kopf nav a.nav-nur-breit{display:none}}

/* --- 5. Schaltflächen ---------------------------------------------------- */
.knopf{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:.94rem;
  background:var(--tiefwasser);color:var(--papier-weiss);
  padding:11px 20px;border:1px solid var(--tiefwasser);border-radius:var(--radius);
  text-decoration:none;cursor:pointer;transition:background .15s ease;
}
.knopf:hover{background:var(--dock)}
.knopf-hell{background:transparent;color:var(--tiefwasser);border-color:var(--stahl)}
.knopf-hell:hover{background:transparent;border-color:var(--tiefwasser)}
.knopf-signal{background:var(--signal);border-color:var(--signal);color:var(--tiefwasser)}
.knopf-signal:hover{background:var(--signal-aktiv);border-color:var(--signal-aktiv)}
.knopf-dunkelgrund{background:transparent;border-color:var(--rahmen-dunkel);color:var(--papier)}
.knopf-dunkelgrund:hover{background:transparent;border-color:var(--stahl)}
.knopf-klein{padding:8px 15px;font-size:.87rem}

/* --- 6. Abschnitte ------------------------------------------------------- */
section{border-top:1px solid var(--linie)}
section.dunkel,section.hero{border-top:none}
.block{padding:76px 0}
.block-eng{padding:58px 0}
.block-recht{padding:40px 0}
@media(max-width:700px){.block{padding:52px 0}.block-eng{padding:44px 0}.block-recht{padding:32px 0}}
.marker{font-family:var(--display);font-weight:600;font-size:.78rem;color:var(--stahl);margin-bottom:14px;display:block}

/* --- 7. Startseite: Hero ------------------------------------------------- */
.hero{padding:64px 0 70px}
.hero h1{max-width:15ch;margin-bottom:20px}
.hero .lead{font-size:1.16rem;color:var(--dock);max-width:56ch;margin-bottom:26px}
.hero-aktion{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}
.hero-fuss{font-size:.87rem;color:var(--stahl);max-width:52ch}

/* --- 8. Startseite: Beweis-Panel ----------------------------------------- */
.beweis{margin-top:46px;display:grid;gap:0;grid-template-columns:minmax(0,1fr) 54px minmax(0,1.12fr);align-items:stretch}
@media(max-width:900px){.beweis{grid-template-columns:minmax(0,1fr)}}
.blatt{background:var(--papier-weiss);border:1px solid var(--linie);position:relative}
.blatt-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--linie);font-size:.79rem;color:var(--stahl);font-family:var(--mono)}
.blatt-koerper{padding:18px 16px 20px}
.mail-meta{font-family:var(--mono);font-size:.78rem;color:var(--stahl);margin-bottom:14px;line-height:1.75}
.mail-meta b{color:var(--dock);font-weight:500}
.mail-text{font-size:.9rem;line-height:1.72;color:var(--dock)}
.mail-text ul{list-style:none;margin:9px 0;padding:0}
.mail-text li{padding-left:14px;position:relative}
.mail-text li::before{content:"–";position:absolute;left:0;color:var(--stahl)}
.vage{background:rgba(239,177,0,.32);padding:0 2px;border-radius:1px}
.pfeil{display:flex;align-items:center;justify-content:center;color:var(--stahl)}
@media(max-width:900px){.pfeil{padding:14px 0;transform:rotate(90deg)}}

.pos{display:grid;grid-template-columns:34px 122px minmax(0,1fr) 64px 22px;gap:8px;align-items:baseline;font-family:var(--mono);font-size:.775rem;padding:7px 0;border-bottom:1px dotted var(--linie);opacity:0;animation:auf .34s ease forwards}
.pos:last-of-type{border-bottom:none}
.pos .art{color:var(--dock);font-weight:500}
.pos .txt{font-family:var(--sans);font-size:.845rem;color:var(--tiefwasser)}
.pos .menge{text-align:right;color:var(--dock)}
.pos .zei{text-align:center;font-size:.9rem;line-height:1}
.pos .zei.ok{color:var(--freigabe)}
.pos .zei.warn{color:var(--signal-tief)}
.pos.offen{background:rgba(239,177,0,.13);margin:0 -10px;padding-left:10px;padding-right:10px;box-shadow:inset 3px 0 0 var(--signal)}
.pos .hinweis{grid-column:2/6;font-family:var(--sans);font-size:.78rem;color:var(--signal-tief);margin-top:3px}
.pos .herkunft{grid-column:2/6;font-family:var(--sans);font-size:.78rem;color:var(--stahl);margin-top:3px}
@keyframes auf{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.pos:nth-of-type(1){animation-delay:.35s}
.pos:nth-of-type(2){animation-delay:.62s}
.pos:nth-of-type(3){animation-delay:.89s}
.pos:nth-of-type(4){animation-delay:1.16s}
.pos:nth-of-type(5){animation-delay:1.43s}
@media(max-width:520px){.pos{grid-template-columns:22px 92px minmax(0,1fr) 52px 16px;gap:6px;font-size:.72rem}.pos .txt{font-size:.8rem}.blatt-kopf{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.pos{opacity:1;animation:none}}
.entwurf-fuss{margin-top:16px;padding-top:13px;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.82rem;color:var(--stahl)}
.entwurf-fuss .knopf{pointer-events:none}

/* --- 9. Startseite: Zahlenreihe ------------------------------------------ */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:34px}
@media(max-width:760px){.zahlen{grid-template-columns:1fr}}
.zahl{background:var(--papier);padding:24px 22px}
.zahl .gross{font-family:var(--display);font-weight:700;font-size:2.1rem;letter-spacing:-.03em;display:block;margin-bottom:6px}
.zahl p{font-size:.9rem;color:var(--dock);max-width:34ch}

/* --- 10. Startseite: Ablauf ---------------------------------------------- */
/* Nummerierung nur, weil der Inhalt tatsächlich eine Abfolge ist. */
.ablauf{margin-top:38px;border-top:1px solid var(--linie)}
.schritt{display:grid;grid-template-columns:66px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--linie);align-items:start}
@media(max-width:640px){.schritt{grid-template-columns:44px 1fr;gap:14px}}
.schritt .nr{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--signal-tief);line-height:1}
.schritt p{font-size:.95rem;color:var(--dock);margin-top:5px}

/* --- 11. Dunkle Abschnitte ----------------------------------------------- */
.dunkel{background:var(--tiefwasser);color:var(--papier)}
.dunkel h2{color:var(--papier-weiss)}
.dunkel p{color:var(--stahl-hell)}
.dunkel .marker{color:var(--stahl)}
.prinzip-satz{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.6vw,2.3rem);letter-spacing:-.02em;line-height:1.2;max-width:20ch;margin-bottom:14px}
.prinzip-satz .halb{color:var(--signal)}
.spalten{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie-dunkel);border:1px solid var(--linie-dunkel);margin-top:40px}
@media(max-width:760px){.spalten{grid-template-columns:1fr}}
.spalte{background:var(--tiefwasser);padding:26px 24px}
.spalte h3{color:var(--papier-weiss);margin-bottom:14px}
.spalte ul{list-style:none;font-size:.92rem;color:var(--stahl-hell)}
.spalte li{padding:7px 0 7px 26px;position:relative;border-bottom:1px solid var(--linie-dunkel)}
.spalte li:last-child{border-bottom:none}
.spalte li::before{position:absolute;left:0;top:7px;font-size:.95rem}
.spalte.macht li::before{content:"✓";color:var(--freigabe)}
.spalte.macht-nicht li::before{content:"✕";color:var(--signal)}
.schluss{background:var(--tiefwasser);color:var(--papier)}
.schluss h2{color:var(--papier-weiss);max-width:18ch}
.schluss p{color:var(--stahl-hell)}
.schluss .hero-aktion{margin-top:26px}
.schluss-tel{font-size:.86rem;color:var(--stahl);margin-top:8px}
.schluss-tel a{color:var(--stahl-hell)}

/* --- 12. Tabellen -------------------------------------------------------- */
.tab{width:100%;border-collapse:collapse;margin-top:32px;font-size:.94rem;background:var(--papier-weiss);border:1px solid var(--linie)}
.tab th,.tab td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--linie)}
.tab thead th{font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--dock);background:var(--papier)}
.tab tbody tr:last-child td{border-bottom:none}
.tab td.z{font-family:var(--mono);font-size:.88rem;white-space:nowrap}
.tab .betont{background:rgba(239,177,0,.12);font-weight:600}
.tab-fuss{font-size:.83rem;color:var(--stahl);margin-top:12px;max-width:74ch}
@media(max-width:640px){.tab th,.tab td{padding:10px 10px;font-size:.86rem}.tab td.z{white-space:normal;font-size:.82rem}.tab{table-layout:fixed}.tab th,.tab td{overflow-wrap:break-word;hyphens:auto;padding:10px 7px;font-size:.8rem}.tab th:first-child,.tab td:first-child{width:27%}}

/* --- 13. Preis ----------------------------------------------------------- */
.preis-gitter{display:grid;grid-template-columns:1.25fr 1fr;gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:34px}
@media(max-width:820px){.preis-gitter{grid-template-columns:1fr}}
.preis-feld{background:var(--papier-weiss);padding:30px 26px}
.preis-feld.neben{background:var(--papier)}
.preis-feld.jahr{grid-column:1/-1;background:var(--papier-weiss)}
.preis-feld.jahr .marker{margin-bottom:10px}
.preis-feld.jahr ul{max-width:62ch}
.preis-wert{font-family:var(--display);font-weight:700;font-size:3rem;letter-spacing:-.035em;line-height:1;display:block}
.preis-wert.klein{font-size:2.2rem}
.preis-wert span{font-size:1rem;font-weight:500;letter-spacing:0;color:var(--stahl);margin-left:2px}
.preis-feld ul{list-style:none;margin-top:20px;font-size:.93rem;color:var(--dock)}
.preis-feld li{padding:8px 0 8px 24px;position:relative;border-bottom:1px solid var(--linie)}
.preis-feld li:last-child{border-bottom:none}
.preis-feld li::before{content:"✓";position:absolute;left:0;color:var(--freigabe)}
.preis-feld p{font-size:.93rem;margin-top:14px;color:var(--dock)}
.direktbestellung{margin-top:22px;font-size:.9rem;color:var(--stahl)}
.direktbestellung a{color:var(--dock);text-decoration:none;border-bottom:1px solid var(--stahl-hell)}
.direktbestellung a:hover{border-bottom-color:var(--signal)}

/* --- 14. Branchen -------------------------------------------------------- */
.branchen{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.branche{border:1px solid var(--stahl-hell);background:var(--papier-weiss);padding:9px 15px;font-size:.9rem;color:var(--dock)}

/* --- 15. FAQ ------------------------------------------------------------- */
.faq{margin-top:30px;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:15px;font-size:1.35rem;color:var(--signal-tief);font-weight:500}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 20px;font-size:.95rem;color:var(--dock)}

/* --- 16. Rechtsseiten ---------------------------------------------------- */
.titel{padding:52px 0 40px}
.titel h1{font-size:clamp(2rem,4.6vw,2.9rem);max-width:none}
.titel p{color:var(--dock);margin-top:12px}
.recht h2{font-size:1.32rem;font-weight:700;letter-spacing:-.015em}
.recht h3{margin-top:22px}
.recht p{margin-top:10px}
.recht ul,.recht ol{margin-top:10px;padding-left:20px;max-width:66ch}
.recht li{padding:3px 0}
.recht dl{margin-top:12px;max-width:66ch;border-top:1px solid var(--linie)}
.recht dt{font-family:var(--display);font-weight:600;font-size:.84rem;color:var(--stahl);margin-top:14px}
.recht dd{margin:3px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--linie)}
.recht dd:last-of-type{border-bottom:none}
.recht .klein{font-size:.9rem;color:var(--dock)}
a.link{color:var(--dock);text-decoration:none;border-bottom:1px solid var(--stahl-hell)}
a.link:hover{border-bottom-color:var(--signal)}
.merk{border-left:3px solid var(--signal);background:rgba(239,177,0,.12);padding:16px 18px;margin-top:20px;font-size:.93rem;max-width:68ch}
.merk b{font-family:var(--display)}
.inhalt{background:var(--papier-weiss);border:1px solid var(--linie);padding:22px 24px;margin-top:8px}
.inhalt ol{columns:2;column-gap:40px;max-width:none;margin-top:0;padding-left:20px}
@media(max-width:700px){.inhalt ol{columns:1}}
.inhalt a{color:var(--dock);text-decoration:none}
.inhalt a:hover{color:var(--signal-tief)}
.stand{color:var(--stahl);font-size:.9rem;margin-top:14px}

/* --- 17. Fußbereich ------------------------------------------------------ */
.fuss{background:var(--tiefwasser);border-top:1px solid var(--linie-dunkel);color:var(--stahl);font-size:.86rem;padding:34px 0 44px}
.fuss-in{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center}
.fuss-marke{display:flex;align-items:center;gap:9px}
.fuss-marke svg{display:block;flex:none}
.fuss a{color:var(--stahl-hell);text-decoration:none;border-bottom:1px solid transparent}
.fuss a:hover{border-bottom-color:var(--signal)}
.fuss .rechts{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
@media(max-width:640px){.fuss .rechts{margin-left:0}}

/* --- 18. Formular (Beauftragung) ----------------------------------------- */
/* Fehlerzustand vorläufig mit Signal tief + Signalbalken – analog zu
   „Klärung nötig“. Endgültige Fehlerfarbe: offener Punkt im Styleguide. */
.auftrag-gitter{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;align-items:start;padding:8px 0 72px}
@media(max-width:900px){.auftrag-gitter{grid-template-columns:1fr;gap:28px}}
.formular fieldset{border:0;border-top:1px solid var(--linie);padding:22px 0 6px;margin:0;min-width:0}
.formular legend{float:left;width:100%;padding:0;margin-bottom:16px;font-family:var(--display);font-weight:600;font-size:.78rem;color:var(--stahl)}
.formular legend + *{clear:both}
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.feld label{font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--dock)}
.feld .opt{font-family:var(--sans);font-weight:400;color:var(--stahl)}
.feld input,.feld select,.feld textarea{font-family:var(--sans);font-size:1rem;line-height:1.4;color:var(--tiefwasser);background:var(--papier-weiss);border:1px solid var(--stahl-hell);border-radius:var(--radius);padding:10px 12px;width:100%}
.feld textarea{min-height:110px;resize:vertical}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline:3px solid var(--signal);outline-offset:1px;border-color:var(--tiefwasser)}
.feld input:user-invalid,.feld select:user-invalid,.feld textarea:user-invalid{border-color:var(--fehler);box-shadow:inset 3px 0 0 var(--fehler)}
.feld .fehlertext{font-size:.82rem;color:var(--fehler)}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.feld-reihe.plz{grid-template-columns:140px 1fr}
@media(max-width:640px){.feld-reihe,.feld-reihe.plz{grid-template-columns:1fr}}
.check{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;margin-bottom:12px;font-size:.93rem;color:var(--dock);max-width:66ch}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--freigabe)}
.check input:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.formular-fuss{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.formular-fuss p{font-size:.86rem;color:var(--stahl);max-width:46ch}
button.knopf{font-family:var(--sans);line-height:inherit}

.uebersicht{background:var(--papier-weiss);border:1px solid var(--linie);padding:24px 22px;position:sticky;top:84px}
@media(max-width:900px){.uebersicht{position:static}}
.uebersicht h2{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;margin-bottom:14px}
.uebersicht .leistung{list-style:none;margin-top:16px;font-size:.92rem;color:var(--dock)}
.uebersicht .leistung li{padding:7px 0 7px 24px;position:relative;border-bottom:1px solid var(--linie)}
.uebersicht .leistung li:last-child{border-bottom:none}
.uebersicht .leistung li::before{content:"✓";position:absolute;left:0;color:var(--freigabe)}
.uebersicht .netto{font-size:.82rem;color:var(--stahl);margin-top:10px}
.schritte{list-style:none;counter-reset:schritt;margin-top:18px;padding-top:16px;border-top:1px solid var(--linie)}
.schritte li{counter-increment:schritt;display:grid;grid-template-columns:26px 1fr;gap:8px;padding:6px 0;font-size:.9rem;color:var(--dock)}
.schritte li::before{content:counter(schritt);font-family:var(--display);font-weight:700;color:var(--signal-tief)}
.hinweis-demo{margin-top:18px;padding-top:14px;border-top:1px solid var(--linie);font-size:.88rem;color:var(--stahl)}
.hinweis-demo a{color:var(--dock);text-decoration:none;border-bottom:1px solid var(--stahl-hell)}
.hinweis-demo a:hover{border-bottom-color:var(--signal)}

.versand{margin-top:26px;border:1px solid var(--linie);border-left:3px solid var(--freigabe);background:var(--papier-weiss);padding:18px 20px}
.versand h3{margin-bottom:6px}
.versand p{font-size:.92rem;color:var(--dock)}
.versand textarea{display:block;font-family:var(--mono);font-size:.8rem;line-height:1.6;width:100%;min-height:280px;margin:12px 0;padding:12px;border:1px solid var(--stahl-hell);background:var(--papier);color:var(--tiefwasser);resize:vertical}
.versand-aktion{display:flex;flex-wrap:wrap;gap:10px}

/* --- 19. Über uns -------------------------------------------------------- */
/* Echte Fotos der Menschen, keine Stockbilder (Styleguide, Abschnitt 7). */
.geschichte{max-width:60ch;margin-top:30px}
.geschichte p{font-size:1.1rem;line-height:1.7;color:var(--dock);margin-top:24px}
.geschichte p:first-child{margin-top:0}
.personen{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:34px}
@media(max-width:760px){.personen{grid-template-columns:1fr}}
.person{background:var(--papier);padding:26px 24px;display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:start}
@media(max-width:480px){.person{grid-template-columns:1fr}}
.portrait{width:132px;aspect-ratio:4/5;background:var(--papier-weiss);border:1px solid var(--linie);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:3rem;color:var(--stahl-hell);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.person h3{margin-bottom:2px}
.person .rolle{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--stahl);margin-bottom:12px;display:block}
.person p{font-size:.93rem;color:var(--dock)}
.bild{margin-top:34px}
.geschichte + .bild{margin-top:56px}
.bild img{width:100%;height:auto;display:block;border:1px solid var(--linie)}
.bild figcaption{font-size:.83rem;color:var(--stahl);margin-top:10px}
.adresse{font-style:normal;margin-top:20px;line-height:1.7;color:var(--stahl-hell)}
.adresse a{color:var(--papier)}

.bild-dunkel{margin-bottom:26px;max-width:720px}
.bild-dunkel img{border-color:var(--linie-dunkel)}
.bild-dunkel figcaption a{color:var(--stahl-hell)}

/* 20. Datenstandort (Startseite) */
.hero-europa{margin-top:6px;font-weight:600;color:var(--dock)}
.europa-text{max-width:62ch;margin-top:16px}
.kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:34px}
@media(max-width:1000px){.kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kacheln{grid-template-columns:minmax(0,1fr)}}
.kachel{background:var(--papier-weiss);padding:26px 24px}
.kachel svg{display:block;color:var(--dock);margin-bottom:16px}
.kachel h3{margin-bottom:8px}
.kachel p{font-size:.9rem;color:var(--dock)}
.weg{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:26px;font-size:.86rem;color:var(--stahl);counter-reset:weg}
@media(max-width:760px){.weg{grid-template-columns:minmax(0,1fr)}}
.weg li{padding:14px 18px 14px 0;border-top:2px solid var(--dock);position:relative}
.weg-ort{display:block;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--tiefwasser);margin-bottom:2px}