/* Diamond Orca, Gestaltung v4.4 (Claude Design, 16.09.2026).
   Werte aus _design-eingang/2026-09-16 - Startseite v4.4/uebergabe/SPEZIFIKATION.md;
   wo Spezifikation und Entwurfsdatei abweichen, gilt die Entwurfsdatei, weil sie
   der abgenommene Stand ist. Kein Raster mit Media-Query: die Spalten brechen
   ueber auto-fit selbst um. Keine Inline-Stile (CSP: style-src 'self'). */

/* ---- Schrift: Plus Jakarta Sans, variabel (Gewichte 200 bis 800), SIL OFL.
   Zwei Unicode-Teilmengen wie bei Google Fonts; die zweite laedt nur, wenn ein
   Zeichen daraus vorkommt (etwa ein tschechischer Name). Nichts von fremden
   Servern. ---- */
@font-face{font-family:"Plus Jakarta Sans";src:url("assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+000D,U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0102,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Plus Jakarta Sans";src:url("assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-0101,U+0103-0130,U+0132-0148,U+014A-0151,U+0154-017E,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01C4-01CC,U+01E6-01E7,U+01EA-01EB,U+01FA-021B,U+022A-022D,U+0230-0233,U+0237,U+0259,U+02C7,U+02DD,U+1E08-1E09,U+1E0C-1E0F,U+1E14-1E17,U+1E1C-1E1D,U+1E20-1E21,U+1E24-1E25,U+1E2A-1E2B,U+1E2E-1E2F,U+1E36-1E37,U+1E3A-1E3B,U+1E42-1E49,U+1E4C-1E53,U+1E5A-1E5B,U+1E5E-1E69,U+1E6C-1E6F,U+1E78-1E7B,U+1E80-1E85,U+1E8E-1E8F,U+1E92-1E93,U+1E97,U+1E9E,U+1EF2-1EF9,U+2020,U+20A1,U+20A3-20A4,U+20A6-20AB,U+20AD-20AE,U+20B1-20B5,U+20B8-20BA,U+20BC-20BF,U+2113}

/* ---- Farben (Spezifikation Abschnitt 2) ---- */
:root{
  --sand:#f4f3f0;
  --weiss:#ffffff;
  --tinte:#0b1725;
  --grau:#5a6572;
  --tiefblau:#0b1c2e;
  --tiefblau-hover:#12283f;
  --signal:#3d9bfa;
  --link:#12558f;
  --rahmen:#e3e1dc;
  --rahmen-mittel:#cfcdc7;
  --unterstrich:#dcdad4;
  --unterstrich-link:#b9cbdd;
  --tinte-hell:#d3dde8;
  --tinte-hell-2:#c4d2df;
  --grau-dunkel:#7d90a4;
  --panel:rgba(255,255,255,.05);
  --panel-rahmen:rgba(255,255,255,.14);
  --fehler:#a33a2a;
}

/* ---- Grundlagen ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--tinte);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,blockquote,ul,ol,figure{margin:0}
h1,h2,h3{text-wrap:pretty}
a{color:inherit;text-decoration:none;transition:color .15s ease,background-color .15s ease,border-color .15s ease}
button{font:inherit;color:inherit;transition:color .15s ease,background-color .15s ease,border-color .15s ease}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.navigation a:focus-visible,.textlink:focus-visible,.fuss a:focus-visible,.kontaktliste a:focus-visible,.kontaktzeile a:focus-visible{border-radius:4px}
.band-dunkel :focus-visible,.karte-dunkel :focus-visible,.fuss :focus-visible{outline-color:var(--signal)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.skip{position:absolute;left:-9999px;top:8px;z-index:99;padding:10px 14px;border-radius:999px;background:var(--tiefblau);color:var(--sand);font-weight:600}
.skip:focus{left:8px}

/* content-box wie in der Entwurfsdatei: 1180px Inhalt plus 24px Rand je Seite. */
.rahmen{box-sizing:content-box;max-width:1180px;margin:0 auto;padding:0 24px}
.abschnitt{padding:80px 0}
.band-weiss{background:var(--weiss);border-top:1px solid var(--rahmen);border-bottom:1px solid var(--rahmen)}
.band-dunkel{background:var(--tiefblau);color:var(--sand)}

/* ---- Textbausteine ---- */
.etikett{font-weight:600;font-size:11px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.etikett-nr{display:flex;align-items:center;gap:10px;font-weight:600;font-size:12px;line-height:1;letter-spacing:.1em;color:var(--grau)}
.etikett-nr span:last-child{letter-spacing:.12em;text-transform:uppercase}
.karte-dunkel .etikett-nr{color:var(--signal)}
.unterzeile{font-weight:400;font-size:16px;line-height:1.7;color:var(--grau);max-width:46ch}
.unterzeile+.unterzeile{margin-top:16px}
.unterzeile a{color:var(--link);border-bottom:1px solid var(--unterstrich-link)}
.unterzeile a:hover{color:var(--tinte)}
.textlink{color:var(--link);border-bottom:1px solid var(--unterstrich-link)}
.textlink:hover{color:var(--tinte)}
.hinweis{margin-top:20px;font-size:12.5px;line-height:1.65;color:var(--grau);max-width:80ch}
.hinweis a{color:var(--link);border-bottom:1px solid var(--unterstrich-link)}
.verweis{margin-top:28px;font-size:15px;line-height:1.7;color:var(--grau);max-width:62ch}
.verweis a{color:var(--link);border-bottom:1px solid var(--unterstrich-link)}
.verweis a:hover{color:var(--tinte)}

/* ---- Knoepfe und Pillen (Spezifikation Abschnitt 5) ---- */
.knopf{display:inline-block;padding:15px 26px;border-radius:999px;font-weight:600;font-size:14.5px;line-height:1;white-space:nowrap;cursor:pointer;background:transparent;border:1px solid transparent;color:var(--tinte)}
.knopf:active{transform:translateY(1px)}
.knopf-dunkel{background:var(--tiefblau);color:var(--sand);border:0}
.knopf-dunkel:hover{background:var(--tiefblau-hover);color:var(--sand)}
.knopf-rahmen{border-color:var(--rahmen-mittel);color:var(--tinte)}
.knopf-rahmen:hover{border-color:var(--tinte);color:var(--tinte)}
.knopf-leise{border-color:var(--rahmen);color:var(--grau)}
.knopf-leise:hover{border-color:var(--rahmen-mittel);color:var(--tinte)}
.knopf[disabled]{opacity:.5;cursor:not-allowed}
.knopf[disabled]:active{transform:none}
.knopf-dunkel[disabled]:hover{background:var(--tiefblau)}
.pillen{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:18px}
.pille{padding:7px 14px;border-radius:999px;background:var(--sand);font-weight:500;font-size:12.5px;line-height:1;color:var(--grau)}

/* ---- Kopfzeile ---- */
.kopfzeile{border-bottom:1px solid var(--rahmen);background:rgba(244,243,240,.92)}
.kopfzeile .rahmen{padding:14px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.marke{display:flex;align-items:center;gap:10px}
.marke img{width:30px;height:24px}
.marke span{font-weight:700;font-size:15.5px;line-height:1;letter-spacing:-.02em;color:var(--tinte)}
.navigation{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-weight:500;font-size:14px;line-height:1;color:var(--grau)}
.navigation a{color:var(--grau);white-space:nowrap}
.navigation a:hover,.navigation a[aria-current=page]{color:var(--tinte)}
.navigation .knopf-kopf{padding:11px 20px;border-radius:999px;background:var(--tiefblau);color:var(--sand);font-weight:600;font-size:13.5px;line-height:1}
.navigation .knopf-kopf:hover{background:var(--tiefblau-hover);color:var(--sand)}
/* Daumenbedienung: am Handy mindestens 44 px hoch. Am Desktop bleibt die Vorlage unveraendert. */
@media (pointer:coarse),(max-width:640px){.knopf-kopf{display:inline-flex;align-items:center;min-height:44px}}

/* ---- Kopfbereich der Startseite ---- */
.hero{padding-top:56px}
.wortmarke{font-weight:800;font-size:clamp(46px,11.5vw,156px);line-height:.88;letter-spacing:-.055em;color:var(--tinte)}
.hero-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:36px;align-items:stretch;padding:44px 0 72px}
.hero h1{font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.15;letter-spacing:-.035em;max-width:24ch}
.einleitung{margin-top:20px;max-width:48ch;font-size:16px;line-height:1.7;color:var(--grau)}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-knoepfe .knopf{padding:14px 24px;font-size:14px}
.kontaktzeile{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:26px;font-weight:500;font-size:13.5px;line-height:1.5;color:var(--grau)}
.kontaktzeile a{color:var(--grau)}
.kontaktzeile a:hover{color:var(--tinte)}
.hero-bild{border-radius:20px;overflow:hidden;background:#e4e2dc;min-height:300px;height:100%}
.hero-bild picture{display:block;height:100%}
.hero-bild img{width:100%;height:100%;min-height:300px;object-fit:cover}

/* ---- Kopfbereich der Unterseiten ---- */
.seitenkopf{padding-top:56px;padding-bottom:24px}
.seitenkopf-allein{padding-bottom:80px}
.seitenkopf .etikett{margin-bottom:22px}
.seitenkopf-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px 48px;align-items:start}
.seitenkopf h1{font-weight:800;font-size:clamp(26px,3.6vw,40px);line-height:1.14;letter-spacing:-.035em;max-width:20ch}
.seitenkopf .knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* ---- Abschnittskopf und Raster ---- */
.abschnitt-kopf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px 48px;align-items:start;margin-bottom:44px}
.abschnitt-kopf h2,.titel{font-weight:800;font-size:clamp(26px,3.6vw,40px);line-height:1.14;letter-spacing:-.035em;max-width:20ch}
.abschnitt-kopf .etikett-nr{margin-bottom:16px}
.abschnitt-kopf-faelle{margin-bottom:40px}
.abschnitt-kopf-faelle h2{max-width:18ch}
.abschnitt-kopf-faelle .unterzeile{max-width:50ch}
.titel-allein{margin-bottom:40px}
.titel-phasen{margin-bottom:44px}
.raster{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.raster-260{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.raster-270{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.raster-290{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.raster-stretch{align-items:stretch}
.raster-zitate{margin-top:28px}
.abschnitt-teil+.abschnitt-teil{margin-top:72px}

/* ---- Karten ---- */
.karte{border-radius:20px;background:var(--weiss);border:1px solid var(--rahmen);padding:28px 26px}
.karte h3{margin-top:16px;font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-.03em}
.karte p{margin-top:12px;font-size:15px;line-height:1.65;color:var(--grau)}
/* Etiketten sind Absaetze; die Absatzregel darüber darf ihnen weder Rand noch
   Schriftgroesse geben (im Entwurf sind es divs ohne Rand). */
.karte .etikett,.karte .etikett-nr,.karte .phase{margin-top:0;line-height:1}
.karte .etikett{font-size:11px}
.karte .etikett-nr{font-size:12px}
.karte a{color:var(--link);border-bottom:1px solid var(--unterstrich-link)}
.karte a:hover{color:var(--tinte)}
.karte-dunkel{background:var(--tiefblau);border-color:var(--tiefblau);color:var(--sand)}
.karte-dunkel p{color:var(--tinte-hell)}
.karte-dunkel a{color:var(--sand);border-bottom-color:rgba(255,255,255,.35)}
.karte-dunkel a:hover{color:var(--sand);border-bottom-color:var(--sand)}
.karte-zweispaltig{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px 40px;align-items:start}
#bestandsaufnahme{scroll-margin-top:24px}

.karte-fall{padding:26px 24px}
.karte-fall h3{margin-top:14px;font-size:20px;line-height:1.28}
.karte-fall p{margin-top:10px;font-size:14.5px}

.karte-sand{background:var(--sand);padding:26px 24px}
.karte-sand h3{margin-top:0;font-size:19px;line-height:1.3;letter-spacing:-.025em}
.karte-sand p{margin-top:9px;line-height:1.7;max-width:52ch}

.karte-zahl{border-radius:16px;background:var(--sand);border:1px solid var(--rahmen);padding:26px 24px}
.karte-zahl .zahl{font-weight:800;font-size:28px;line-height:1.1;letter-spacing:-.035em;color:var(--tinte)}
.karte-zahl .text{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--grau)}
.karte-zahl .quelle{margin-top:14px;padding-top:12px;border-top:1px solid var(--rahmen);font-size:11.5px;line-height:1.5;color:var(--grau)}
.schlusszeile{margin-top:20px;font-size:14.5px;line-height:1.7;color:var(--grau);max-width:62ch}

.karte-zitat{border-radius:16px;background:var(--sand);border:1px solid var(--rahmen);padding:26px 24px}
.karte-zitat blockquote{font-weight:600;font-size:clamp(16px,2.2vw,19px);line-height:1.5;letter-spacing:-.02em;color:var(--tinte)}
.karte-zitat .nachweis{margin-top:14px;font-size:12px;line-height:1.5;color:var(--grau)}

.karte-phase{background:var(--panel);border-color:var(--panel-rahmen);color:var(--sand)}
.karte-phase .phase{margin-top:0;font-weight:600;font-size:11.5px;line-height:1;letter-spacing:.06em;color:var(--signal)}
.karte-phase h3{font-size:21px}
.karte-phase p{margin-top:11px;color:var(--tinte-hell-2)}

.karte-person{padding:30px 28px}
.karte-team{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.karte .selbst{margin-top:16px;font-size:clamp(16px,2.1vw,19px);line-height:1.55;letter-spacing:-.015em;color:var(--tinte);max-width:34ch}
.firmenzeile{display:flex;flex-wrap:wrap;gap:6px 20px;font-weight:500;font-size:13px;line-height:1.5;color:var(--grau)}
.karte .name{margin-top:12px;font-weight:700;font-size:24px;line-height:1.3;letter-spacing:-.03em;color:var(--tinte)}
.kontaktliste{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:16px;font-weight:500;font-size:14px;line-height:1.5;color:var(--grau)}
.kontaktliste a{color:var(--grau);border-bottom:1px solid var(--unterstrich)}
.kontaktliste a:hover{color:var(--tinte)}
.karte .adresse{margin-top:12px;font-size:15px;line-height:1.65;color:var(--tinte)}

/* Zeilen "Woran Sie es messen", "So starten Sie", "Was wir dafuer bauen",
   "Am Ende haben Sie", "Abrechnung" */
.karte .zeile{margin-top:8px;font-size:13px;line-height:1.6;color:var(--grau)}
.karte .zeile strong{font-weight:600;color:var(--tinte)}
.karte .zeile-erste{margin-top:16px;padding-top:14px;border-top:1px solid var(--rahmen)}
.karte-dunkel .zeile{color:var(--tinte-hell)}
.karte-dunkel .zeile strong{color:var(--sand)}
.karte-dunkel .zeile-erste{border-color:var(--panel-rahmen)}
.karte-phase .zeile{color:var(--tinte-hell-2)}
.karte-phase .zeile strong{color:var(--sand)}
.karte-phase .zeile-erste{margin-top:14px;padding-top:12px;border-color:var(--panel-rahmen)}

/* Listen in Karten */
.liste{list-style:none;padding:0;margin-top:14px}
.liste li{padding:9px 0;border-top:1px solid var(--rahmen);font-size:14.5px;line-height:1.5;color:var(--tinte)}
.liste li:last-child{border-bottom:1px solid var(--rahmen)}
.karte-dunkel .liste li{border-color:var(--panel-rahmen);color:var(--sand)}

/* ---- Fragenliste (Fuenf Fragen, Haeufige Fragen) ---- */
.abschnitt-fragen{padding:80px 0 56px}
.fragen{list-style:none;padding:0;max-width:78ch}
.fragen li{display:grid;grid-template-columns:40px 1fr;gap:0 12px;padding:17px 0;border-top:1px solid var(--rahmen)}
.fragen li:last-child{border-bottom:1px solid var(--rahmen)}
.fragen .nr{font-weight:600;font-size:13px;line-height:1.65;color:var(--grau)}
.fragen .frage{font-size:clamp(15px,1.9vw,17px);line-height:1.65;color:var(--tinte)}
.fragen .antwort{grid-column:2;margin-top:8px;font-size:15px;line-height:1.65;color:var(--grau);max-width:62ch}
.fragen .antwort a{color:var(--link);border-bottom:1px solid var(--unterstrich-link)}
.fragen .antwort a:hover{color:var(--tinte)}
.weiter{display:inline-block;margin-top:24px;padding-bottom:4px;font-weight:600;font-size:14.5px;line-height:1;color:var(--link);border-bottom:1px solid var(--unterstrich-link)}
.weiter:hover{color:var(--tinte)}

/* ---- Schlussaufruf ---- */
.abschnitt-schluss{padding:0 0 80px}
.schluss{border-radius:24px;background:var(--weiss);border:1px solid var(--rahmen);padding:clamp(28px,4vw,52px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px 48px;align-items:end}
.schluss h2{font-weight:800;font-size:clamp(26px,3.8vw,42px);line-height:1.14;letter-spacing:-.04em;max-width:24ch}
.schluss p{margin-top:16px;font-size:15.5px;line-height:1.7;color:var(--grau);max-width:48ch}
.schluss-knoepfe{display:flex;flex-wrap:wrap;gap:10px}

/* ---- Fusszeile ---- */
.fuss{background:var(--tiefblau);color:var(--sand)}
.fuss .rahmen{padding:64px 24px 40px}
.fuss-marke{display:flex;align-items:center;gap:14px;margin-bottom:44px}
.fuss-marke img{width:44px;height:35px}
.fuss-marke span{font-weight:800;font-size:clamp(28px,5vw,52px);line-height:1;letter-spacing:-.045em}
.fuss-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:28px 32px;padding-bottom:36px;border-bottom:1px solid var(--panel-rahmen)}
.fuss-spalte{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fuss-spalte .etikett{color:var(--grau-dunkel)}
.fuss-spalte a{color:var(--tinte-hell);font-weight:500;font-size:14px;line-height:1}
.fuss-spalte a:hover{color:var(--sand)}
.fuss-spalte span{color:var(--tinte-hell);font-weight:500;font-size:14px;line-height:1.5}
.fuss-urheber{padding-top:22px;font-size:12px;line-height:1.6;color:var(--grau-dunkel)}

/* ---- Rechtstexte (Impressum, Datenschutz) ---- */
.bloecke{max-width:72ch}
.block{padding:26px 0;border-top:1px solid var(--rahmen)}
.block:last-child{border-bottom:1px solid var(--rahmen)}
.block h2,.block h3{font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.025em}
.block p{margin-top:10px;font-size:15.5px;line-height:1.7;color:var(--grau)}
.block strong{font-weight:600;color:var(--tinte)}
.block a{color:var(--link);border-bottom:1px solid var(--unterstrich-link)}
.block a:hover{color:var(--tinte)}

/* ---- Formulare (Kontakt, Termin) ---- */
.formular-raster{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}
.formular-karte{flex:1 1 560px;min-width:0}
.neben-karte{flex:1 1 280px;min-width:0}
.neben-karte .knopf{margin-top:16px}
form{display:flex;flex-direction:column;gap:18px;margin-top:20px}
.zeile-felder{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.feld{display:flex;flex-direction:column;gap:8px;min-width:0}
.feld>span{font-weight:600;font-size:13.5px;line-height:1.4;color:var(--tinte)}
.feld input,.feld textarea{width:100%;font:inherit;font-size:15px;line-height:1.5;color:var(--tinte);background:var(--weiss);border:1px solid var(--rahmen-mittel);border-radius:12px;padding:12px 14px;transition:border-color .15s ease}
.feld input::placeholder,.feld textarea::placeholder{color:#8f98a3}
.feld input:hover,.feld textarea:hover{border-color:var(--tinte)}
.feld input:focus-visible,.feld textarea:focus-visible{border-color:var(--link);outline-offset:2px}
.feld textarea{resize:vertical;min-height:150px}
.pflicht{color:var(--link)}
.haken{display:flex;flex-direction:row;align-items:flex-start;gap:12px;cursor:pointer}
.haken input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--tiefblau)}
.haken .txt{font-size:14px;line-height:1.6;color:var(--grau)}
.haken .txt a{color:var(--link);border-bottom:1px solid var(--unterstrich-link)}
.legende{padding:0;font-size:14.5px;line-height:1.6;color:var(--grau)}
.fieldset-bare{border:0;padding:0;margin:0;min-width:0}
.slots{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.day{flex:1 1 150px;max-width:210px;border:1px solid var(--rahmen);border-radius:16px;background:var(--sand);padding:16px 14px}
.karte .day .wd{margin:0;font-weight:600;font-size:11px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.karte .day .dt{margin-top:8px;font-weight:700;font-size:15px;line-height:1.3;letter-spacing:-.02em;color:var(--tinte)}
.day ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.slot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:999px;border:1px solid var(--rahmen-mittel);background:var(--weiss);font-weight:600;font-size:13px;line-height:1;color:var(--tinte);cursor:pointer;transition:color .15s ease,background-color .15s ease,border-color .15s ease}
.slot .m{font-weight:500;font-size:11px;color:var(--grau)}
.slot:hover{border-color:var(--tinte)}
input.slotradio{position:absolute;opacity:0;width:0;height:0}
input.slotradio:checked+.slot{background:var(--tiefblau);border-color:var(--tiefblau);color:var(--sand)}
input.slotradio:checked+.slot .m{color:var(--tinte-hell)}
input.slotradio:focus-visible+.slot{outline:2px solid var(--link);outline-offset:3px}
.turnstile{min-height:65px}
.karte .turnstile-hinweis{margin:0;font-size:13px;line-height:1.5;color:var(--grau)}
.karte .note{margin:0;font-size:13.5px;line-height:1.6;color:var(--grau);max-width:60ch}
.karte .knopfzeile{margin:0}
.formmsg{padding:14px 16px;border:1px solid var(--fehler);border-left-width:4px;border-radius:12px;background:var(--weiss);font-size:15px;line-height:1.6;color:var(--tinte)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--fehler)}
.karte .fielderr{margin:0;font-size:13px;line-height:1.5;color:var(--fehler)}
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* Handy: Abstaende zwischen den Abschnitten straffen. Die festen Werte der Vorlage (80/72/44 px)
   sind fuer den grossen Bildschirm gedacht und addieren sich einspaltig zu Loechern
   (gemessen 17.09.2026: 152 px zwischen Kopfbild und Leistungsportfolio, 104 px zwischen
   Seitenkopf und erster Karte). Gilt nur bis 640 px Breite, der Desktop bleibt wie abgenommen. */
@media (max-width:640px){
  .abschnitt{padding:48px 0}
  .hero{padding-top:36px}
  .hero-raster{gap:28px;padding:32px 0 20px}
  .seitenkopf{padding-top:36px;padding-bottom:4px}
  .seitenkopf+.abschnitt{padding-top:32px}
  .seitenkopf-allein{padding-bottom:48px}
  .abschnitt-kopf{gap:16px 48px;margin-bottom:28px}
  .abschnitt-kopf-faelle,.titel-allein{margin-bottom:26px}
  .titel-phasen{margin-bottom:28px}
  .abschnitt-teil+.abschnitt-teil{margin-top:48px}
  .abschnitt-fragen{padding:48px 0 36px}
  .abschnitt-schluss{padding:0 0 48px}
  .fuss .rahmen{padding:44px 24px 32px}
  .fuss-marke{margin-bottom:28px}
}