/* Gemeinsamer Stil der Unterseiten /mail/ und /auf-anfrage/ (seit 23.10.2026).
   Die Startseite traegt ihren Stil weiter inline, damit sie ohne zweite Anfrage aufbaut.
   Farben, Schrift und Bauteile entsprechen der Startseite. Wer dort etwas Grundsaetzliches
   aendert (Farben, Kopfleiste, Knoepfe), zieht es hier nach. */

/* Schrift lokal statt Google Fonts: sonst ginge die IP jedes Besuchers an Google */
@font-face{font-family:Spinnaker;font-style:normal;font-weight:400;font-display:swap;
  src:url(/schrift/spinnaker-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:Spinnaker;font-style:normal;font-weight:400;font-display:swap;
  src:url(/schrift/spinnaker-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}
:root{--navy:#1a2b6d;--navy-tief:#0b1330;--navy-nacht:#070c20;--luft:#f4f6fc;--rot:#d41317;--rot-tief:#a80f13;--grau:#f2f2f2;
  --text:#1e222b;--weich:#5a6070;--linie:#dee1ea;--zart:#eceef5;--gruen:#9ce9c3;--breite:1300px;--kopf:84px;--e:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 20px)}
body{background:#fff;color:var(--text);font:400 17px/1.75 "Helvetica Neue",Helvetica,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
.huelle{max-width:var(--breite);margin:0 auto;padding:0 44px}
h1,h2,h3{font-family:Spinnaker,"Helvetica Neue",sans-serif;font-weight:400;color:var(--navy);line-height:1.1}
a{color:inherit}
::selection{background:var(--navy);color:#fff}
.gfix>*{min-width:0}
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--rot);color:#fff;padding:14px 22px;text-decoration:none;font-size:15px}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
/* Auf den dunklen Flaechen traegt Rot als Fokusrahmen nicht, dort gilt Weiss */
.dunkel :focus-visible,.schluss :focus-visible{outline-color:#fff}
.eintrag-zeile .knopf:focus-visible{outline:3px solid #fff;outline-offset:-6px}
main:focus{outline:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Kopfleiste: wie auf der Startseite, durchsichtig ueber dem dunklen Kopf, hell nach dem Scrollen */
header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--kopf);display:flex;align-items:center;transition:background .4s var(--e),box-shadow .4s var(--e)}
header::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,12,32,.74),rgba(7,12,32,.30));transition:opacity .4s var(--e)}
header.fest::before{opacity:0}
header > .huelle{position:relative;z-index:1}
header:not(.fest) :focus-visible{outline-color:#fff}
header .huelle{display:flex;align-items:center;justify-content:space-between;width:100%;gap:26px}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;white-space:nowrap}
.marke .zeichen{width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--rot);color:#fff;font-family:Spinnaker,sans-serif;font-size:19px;transition:transform .4s var(--e)}
.marke:hover .zeichen{transform:rotate(-90deg)}
.marke .wort{font-family:Spinnaker,sans-serif;font-size:25px;letter-spacing:.28em;color:#fff;transition:color .4s var(--e)}
header nav{display:flex;gap:21px;align-items:center}
header nav a:not(.knopf){font-size:14.5px;text-decoration:none;color:rgba(255,255,255,.88);position:relative;padding:9px 0;transition:color .3s}
header nav a:not(.knopf)::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;background:var(--rot);transition:width .34s var(--e)}
header nav a:not(.knopf):hover::after,header nav a[aria-current=page]::after{width:100%}
header nav a[aria-current=page]{color:#fff}
header.fest{background:rgba(255,255,255,.98);box-shadow:0 1px 0 var(--zart),0 8px 40px rgba(11,19,48,.07)}
@media(min-width:900px){header.fest{backdrop-filter:saturate(180%) blur(18px)}}
header.fest .marke .wort{color:var(--navy)}
header.fest nav a:not(.knopf){color:var(--weich)}
header.fest nav a:not(.knopf):hover,header.fest nav a[aria-current=page]{color:var(--navy)}
@media(max-width:1200px){header nav{gap:14px}header nav a:not(.knopf){font-size:14px;white-space:nowrap}}
.nur-menue{display:none}
.menuknopf{display:none;align-items:center;justify-content:center;width:46px;height:46px;flex:none;background:transparent;
  border:1.5px solid rgba(255,255,255,.92);border-radius:3px;cursor:pointer;padding:0;transition:border-color .3s var(--e)}
.menuknopf .striche{display:flex;flex-direction:column;gap:5px;width:20px}
.menuknopf .striche span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--e),opacity .25s var(--e)}
header.fest .menuknopf{border-color:var(--navy)}
header.fest .menuknopf .striche span{background:var(--navy)}
.menuknopf[aria-expanded=true] .striche span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menuknopf[aria-expanded=true] .striche span:nth-child(2){opacity:0}
.menuknopf[aria-expanded=true] .striche span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1080px){
  .menuknopf{display:flex}
  header nav a:not(.knopf){display:none}
  header nav.offen{position:fixed;top:var(--kopf);left:0;right:0;display:block;background:#fff;box-shadow:0 18px 44px rgba(11,19,48,.16);
    border-top:1px solid var(--zart);padding:8px 0 14px;max-height:calc(100vh - var(--kopf));max-height:calc(100dvh - var(--kopf));
    overflow-y:auto;overscroll-behavior:contain}
  header nav.offen a:not(.knopf){display:block;color:var(--navy);font-size:17px;padding:15px 24px;white-space:normal;border-bottom:1px solid var(--zart)}
  header nav.offen a:nth-last-of-type(3){border-bottom:0}
  header nav.offen a:not(.knopf)::after{display:none}
  header nav.offen a:not(.knopf):hover{background:var(--luft)}
  header nav.offen a:focus-visible{outline:3px solid var(--navy);outline-offset:-3px;background:var(--luft)}
  header nav.offen .nur-menue{display:block;font-weight:600}
  header nav.offen .knopf{display:none}
}
@media(max-width:620px){header nav .knopf.testen{display:none}}

/* Knoepfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--rot);color:#fff;text-decoration:none;font:500 15px/1.2 "Helvetica Neue",Helvetica,sans-serif;padding:16px 32px;min-height:52px;white-space:nowrap;cursor:pointer;border:none;transition:background .3s var(--e),box-shadow .3s var(--e)}
.knopf::after{content:"→";content:"→" / "";transition:transform .34s var(--e)}
.knopf:hover{background:var(--rot-tief);box-shadow:0 14px 40px rgba(212,19,23,.34)}
.knopf:hover::after{transform:translateX(7px)}
.knopf[aria-disabled=true]{opacity:.7;cursor:wait}
.knopf.testen{background:#fff;border:1.5px solid var(--navy);color:var(--navy)}
.knopf.testen::after{color:var(--navy)}
.knopf.testen:hover{background:var(--navy);color:#fff;box-shadow:none}
.knopf.testen:hover::after{color:#fff}
/* Umriss auf dunklem Grund: zweiter Weg neben dem roten Knopf */
.knopf.umriss{background:transparent;border:1.5px solid rgba(255,255,255,.8);color:#fff}
.knopf.umriss:hover{background:#fff;color:var(--navy);box-shadow:none}
.knopf.anrufen{gap:11px}
.knopf.anrufen::after{content:none}
.knopf.anrufen svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media(max-width:620px){header nav{gap:11px}header nav .knopf{padding:12px 15px;font-size:13.5px;min-height:46px;gap:8px}}
@media(max-width:420px){.marke .wort{display:none}}

/* Kopf der Unterseite: dunkel, mit Gitter wie der Hero der Startseite, aber ohne Foto */
.seitenkopf{position:relative;overflow:hidden;background:var(--navy-nacht);padding:calc(var(--kopf) + 84px) 0 104px}
.seitenkopf::before{content:"";position:absolute;inset:0;background:linear-gradient(102deg,rgba(7,12,32,1) 0%,rgba(22,37,92,.96) 55%,rgba(26,43,109,.9) 100%)}
.seitenkopf::after{content:"";position:absolute;inset:0;opacity:.45;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:96px 96px}
.seitenkopf .huelle{position:relative;z-index:2}
.kennung{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.kennung .stand-pille{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:20px;border:1px solid rgba(212,19,23,.7);background:rgba(212,19,23,.18);letter-spacing:.14em}
.kennung .stand-pille i{width:7px;height:7px;border-radius:50%;background:var(--rot);box-shadow:0 0 0 3px rgba(212,19,23,.28)}
.seitenkopf h1{color:#fff;font-size:clamp(40px,4.6vw,64px);max-width:17ch;margin-bottom:24px}
.seitenkopf h1 .zeile{display:block;color:rgba(255,255,255,.62);font-size:.62em;margin-top:14px;max-width:24ch;line-height:1.2}
.seitenkopf .lead{color:rgba(255,255,255,.88);font-size:19px;max-width:60ch;margin-bottom:36px;line-height:1.68}
.zweiter-weg{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:26px}
.zweiter-weg a{display:inline-flex;align-items:center;gap:9px;color:#fff;font-size:16.5px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--rot);padding-bottom:3px}
.zweiter-weg a::after{content:"→";content:"→" / "";transition:transform .34s var(--e)}
.zweiter-weg a:hover::after{transform:translateX(6px)}
.zweiter-weg span{color:rgba(255,255,255,.82);font-size:14.5px}
.kopf-bild{display:none}
@media(min-width:1200px){
  .seitenkopf .huelle:has(.kopf-bild) > :not(.kopf-bild){max-width:calc(100% - clamp(420px,36vw,540px) - 50px)}
  .kopf-bild{display:block;position:absolute;right:44px;top:50%;width:clamp(420px,36vw,540px);border-radius:12px;overflow:hidden;
    border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 80px rgba(45,80,210,.22);
    transform:translateY(-50%) perspective(1600px) rotateY(-8deg) rotateX(2deg);transform-origin:100% 50%}
  .kopf-bild img{width:100%;height:auto}
}

/* Eintrag, auf dunklem Grund */
.eintrag{max-width:640px;position:relative}
.eintrag-zeile{display:flex;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.eintrag-zeile input{flex:1;min-width:0;border:none;padding:0 22px;font:400 17px/1.4 "Helvetica Neue",Helvetica,sans-serif;color:var(--text);min-height:60px;background:transparent}
.eintrag-zeile input:focus{outline:none}
.eintrag-zeile input::placeholder{color:var(--weich);opacity:1}
.eintrag-zeile:focus-within{box-shadow:0 0 0 3px var(--navy-nacht),0 0 0 6px #fff,0 24px 70px rgba(0,0,0,.35)}
.eintrag-zeile .knopf{min-height:60px;flex:none}
.einw{display:flex;gap:11px;align-items:flex-start;margin-top:16px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.78);cursor:pointer}
.einw input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--rot)}
.einw a{color:#fff}
.honig{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.meldung{margin-top:12px;font-size:15px;min-height:1.4em;color:#fff}
.meldung.fehler{color:#ffb4b6}
.erfolg{display:none;background:#fff;padding:26px 28px;border-left:6px solid var(--rot);box-shadow:0 24px 70px rgba(0,0,0,.3)}
.erfolg .erfolg-titel{font-family:Spinnaker,sans-serif;font-size:22px;line-height:1.2;color:var(--navy);margin-bottom:8px}
.erfolg p{color:var(--weich);font-size:16px;margin:0}
.fertig > *:not(.erfolg){display:none}
.fertig .erfolg{display:block}
.eintrag-hinweis{margin-top:4px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.8);max-width:60ch}

/* Grundraster */
section{padding:120px 0}
.schmal{max-width:860px}
.grau{background:var(--grau)}
.hell{background:var(--luft)}
.augenbraue{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--rot);margin-bottom:22px;display:flex;align-items:center;gap:16px}
.augenbraue::before{content:"";width:40px;height:2px;background:var(--rot);flex:none}
h2{font-size:clamp(33px,4.1vw,52px);margin-bottom:24px}
h3{font-size:22px;margin-bottom:10px}
p{margin-bottom:20px;color:var(--weich)}
p.gross{font-size:19px;color:var(--text);line-height:1.7;max-width:64ch}
p:last-child{margin-bottom:0}
.weiter{display:inline-flex;align-items:center;gap:10px;margin-top:38px;font-size:16px;color:var(--rot);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .3s var(--e)}
.weiter::after{content:"→";content:"→" / "";transition:transform .34s var(--e)}
.weiter:hover{border-bottom-color:var(--rot)}
.weiter:hover::after{transform:translateX(6px)}
.fussnote{margin-top:26px;font-size:15px;line-height:1.7;color:var(--weich);max-width:70ch}

/* Bild aus dem Prototyp, im Fensterrahmen. Immer mit Kennzeichnung: es ist kein fertiges Produkt */
.fenster{position:relative;display:block;margin-top:52px;border-radius:12px;overflow:hidden;background:#0b1330;text-decoration:none;
  box-shadow:0 50px 120px rgba(7,12,32,.28),0 0 0 1px rgba(11,19,48,.1);transition:transform .5s var(--e),box-shadow .5s var(--e)}
.fenster:hover{transform:translateY(-4px);box-shadow:0 60px 130px rgba(7,12,32,.34),0 0 0 1px rgba(11,19,48,.12)}
.fenster-leiste{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#e9ecf4;border-bottom:1px solid var(--linie)}
.fenster-leiste i{width:10px;height:10px;border-radius:50%;background:#c9cfdd}
.fenster-leiste span{margin-left:12px;font-size:12px;color:var(--weich)}
.fenster img{width:100%;height:auto}
.fenster-marke{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:20px;
  background:rgba(7,12,32,.86);color:#fff;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.fenster-marke i{width:7px;height:7px;border-radius:50%;background:var(--rot)}
.demo-knopf{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:30px}
.demo-knopf span{font-size:15px;color:var(--weich)}

/* Karten: was geplant ist, was laeuft */
.karten{list-style:none;display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:48px}
@media(min-width:720px){.karten{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.karten.vier{grid-template-columns:repeat(4,1fr)}}
.karte{background:#fff;padding:34px 30px 32px}
.karte .zeichen{width:46px;height:46px;display:grid;place-items:center;border:1.5px solid var(--linie);margin-bottom:20px;transition:border-color .34s var(--e),background .34s var(--e)}
.karte:hover .zeichen{border-color:var(--rot);background:var(--rot)}
.karte .zeichen svg{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .34s var(--e)}
.karte:hover .zeichen svg{stroke:#fff}
.karte h3{font-size:21px;line-height:1.25;margin-bottom:8px}
.karte p{font-size:15.5px;line-height:1.7;margin:0}

/* Zusagen mit Zeichen */
.zusagen{list-style:none;display:grid;gap:26px;margin-top:48px}
@media(min-width:860px){.zusagen{grid-template-columns:1fr 1fr;gap:34px 48px}}
.zusage{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.zusage .zeichen{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--luft);border:1px solid var(--linie)}
.zusage svg{width:21px;height:21px;stroke:var(--rot);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zusage b{display:block;font-family:Spinnaker,sans-serif;font-weight:400;font-size:20px;line-height:1.3;color:var(--navy);margin-bottom:4px}
.zusage span{display:block;font-size:15.5px;line-height:1.7;color:var(--weich)}

/* Zwei Spalten nebeneinander */
.paar{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:48px}
@media(min-width:860px){.paar{grid-template-columns:1fr 1fr}}
.paar > div{background:#fff;padding:40px 36px}
.paar h3{font-size:24px}
.paar p{font-size:16px;line-height:1.7}

/* Schaubild: wie Serova im Betrieb mit dem Postfach zusammenhaengt */
.fluss{list-style:none;position:relative;display:grid;gap:22px;margin-top:40px}
.fluss-schritt:not(:last-child)::after{content:"";position:absolute;left:21px;top:44px;bottom:-22px;width:2px;background:var(--navy);opacity:.35}
.fluss-schritt{position:relative;display:grid;grid-template-columns:44px 1fr;gap:2px 18px}
.fluss-nr{grid-row:1 / 3;position:relative;z-index:1;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--navy);color:#fff;font-family:Spinnaker,sans-serif;font-size:19px;box-shadow:0 0 0 8px #fff}
.fluss-schritt:last-child .fluss-nr{background:var(--rot)}
.fluss-schritt b{font-family:Spinnaker,sans-serif;font-weight:400;font-size:20px;line-height:1.3;color:var(--navy)}
.fluss-schritt small{font-size:15px;line-height:1.6;color:var(--weich)}
@media(min-width:900px){
  .fluss{grid-template-columns:repeat(4,1fr);gap:0}
  .fluss::before{content:"";position:absolute;left:12.5%;right:12.5%;top:22px;height:2px;background:linear-gradient(90deg,var(--navy),var(--rot))}
  .fluss-schritt:not(:last-child)::after{display:none}
  .fluss-schritt{display:block;text-align:center;padding:0 18px}
  .fluss-nr{margin:0 auto 18px}
  .fluss-schritt b,.fluss-schritt small{display:block}
  .fluss-schritt b{margin-bottom:6px}
}

/* Ablauf in Schritten */
.schritte{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:48px}
@media(min-width:760px){.schritte{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.schritte{grid-template-columns:repeat(4,1fr)}}
.schritt{background:#fff;padding:36px 32px}
.schritt .nr{display:grid;place-items:center;width:44px;height:44px;background:var(--navy);color:#fff;font-family:Spinnaker,sans-serif;font-size:19px;margin-bottom:22px}
.schritt h3{font-size:20px}
.schritt p{font-size:15.5px;line-height:1.7;margin:0}

/* Fragen */
details{border-top:1px solid var(--linie)}
details:last-of-type{border-bottom:1px solid var(--linie)}
summary{cursor:pointer;list-style:none;padding:26px 56px 26px 0;position:relative;font-family:Spinnaker,sans-serif;font-size:20px;color:var(--navy);transition:color .24s;min-height:52px}
summary:hover{color:var(--rot)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:36px;width:16px;height:2px;background:var(--rot)}
summary::before{content:"";position:absolute;right:15px;top:29px;width:2px;height:16px;background:var(--rot);transition:transform .34s var(--e)}
details[open] summary::before{transform:rotate(90deg) scaleX(0)}
details p{padding:0 56px 28px 0;margin:0}
details a{color:var(--navy);text-underline-offset:3px}

/* Schluss mit Formular */
.schluss{position:relative;overflow:hidden;background:var(--navy-nacht);text-align:center}
.schluss::before{content:"";position:absolute;inset:0;background:linear-gradient(112deg,rgba(7,12,32,1) 0%,rgba(26,43,109,.92) 100%)}
.schluss .huelle{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
.schluss h2{color:#fff}
.schluss .augenbraue{color:#fff;justify-content:center}
.schluss p.gross{color:rgba(255,255,255,.86);margin-left:auto;margin-right:auto}
.schluss .eintrag{width:100%;margin:40px auto 0;text-align:left}
.schluss .nebenweg{margin-top:34px;font-size:15.5px;color:rgba(255,255,255,.8)}
.schluss .nebenweg a{color:#fff;text-underline-offset:3px}
.schluss .anruf-zeile{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}

footer{padding:44px 0;background:#060a1c;color:rgba(255,255,255,.55);font-size:14.5px}
.fuss{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer a{text-decoration:underline;text-underline-offset:3px;color:rgba(255,255,255,.55);transition:color .24s}
footer a:hover{color:#fff}

.zeigen{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e),transform .9s var(--e)}
.zeigen.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.zeigen{opacity:1;transform:none}*{transition-duration:.01ms !important}}

/* Handy: kompakter. Deutsche Komposita duerfen umbrechen. */
@media(max-width:720px){
  .huelle{padding:0 22px}
  header .huelle{gap:12px}
  header .knopf{padding:11px 16px;font-size:14px;min-height:44px;gap:8px}
  header .knopf::after{display:none}
  .marke{gap:11px}
  .marke .zeichen{width:34px;height:34px;font-size:17px}
  .marke .wort{font-size:19px;letter-spacing:.2em}
  section{padding:72px 0}
  .seitenkopf{padding:calc(var(--kopf) + 40px) 0 64px}
  .kennung{flex-wrap:wrap;margin-bottom:18px}
  .seitenkopf .lead{font-size:16.5px;line-height:1.6;margin-bottom:24px}
  .augenbraue{display:block;letter-spacing:.18em;hyphens:auto;overflow-wrap:break-word}
  .augenbraue::before{display:block;width:46px;margin-bottom:13px}
  .schluss .augenbraue::before{margin:0 auto 13px}
  h1,h2,h3{hyphens:auto;overflow-wrap:break-word}
  h2{font-size:clamp(28px,7.6vw,52px);margin-bottom:16px}
  p.gross{font-size:17px}
  .eintrag-zeile{flex-direction:column;background:transparent;box-shadow:none;gap:10px}
  .eintrag-zeile input{background:#fff;min-height:56px}
  .eintrag-zeile:focus-within{box-shadow:none}
  .eintrag-zeile input:focus{box-shadow:0 0 0 3px var(--navy-nacht),0 0 0 6px #fff}
  .eintrag-zeile .knopf{width:100%}
  .zweiter-weg span{font-size:13.5px}
  .fenster{margin-top:30px;border-radius:8px}
  .fenster-leiste{height:26px}
  .fenster-marke{left:10px;bottom:10px;font-size:10.5px;padding:4px 10px}
  .karten,.paar,.schritte,.zusagen{margin-top:30px}
  .karte,.paar > div,.schritt{padding:24px 22px}
  .karte p{font-size:15px;line-height:1.6}
  .zusage b{font-size:18px}
  .zusage span{font-size:15px}
  summary{font-size:18px;padding:20px 48px 20px 0}
  summary::after{top:31px}
  summary::before{top:24px}
  details p{padding:0 0 22px;font-size:15.5px}
  .schluss .eintrag{margin-top:26px}
  .fuss{flex-direction:column;gap:8px}
}
@media(max-width:480px){.seitenkopf h1{font-size:36px}}