/* ==========================================================================
U-Kassen-Webinar · Landingpage
Markenneutraler Entwurf. Farben und Schriften an einer Stelle (Tokens).
========================================================================== */
/* --- Schriften, lokal gehostet (DSGVO) ---------------------------------- */
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
src:url('fonts/familjen-grotesk-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
src:url('fonts/familjen-grotesk-400-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;
src:url('fonts/instrument-sans-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;
src:url('fonts/instrument-sans-400-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
src:url('fonts/dm-mono-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
src:url('fonts/dm-mono-500-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* --- Tokens -------------------------------------------------------------- */
/* Palette aus dem Curator-Logo und der Hausfarbe der Firmenseite:
Schwarz als Basis (#111110), Orange #E67300 als einziger Akzent, warme Graustufen
dazwischen. Das Schaubild kodiert damit die Strecke: grau = Ausgangslage,
gedaempftes Grau = was abfliesst, Orange = was bleibt. */
:root{
/* Grundflächen */
--tinte: #111110; /* Curator-Schwarz */
--tinte-hell: #1D1D1A;
--papier: #F4F3F1;
--papier-2: #EAE8E4;
--weiss: #FFFFFF;
/* Text */
--text: #1A1917;
--text-2: #67625C;
--text-inv: #F4F3F1;
--text-inv-2: #A8A29A;
/* Kleines Farbsystem, es kodiert die Strecke:
neutral = Ausgangslage, abfluss = was weggeht, bleibt = was übrig bleibt */
--neutral: #766F67;
--abfluss: #6B635B;
--abfluss-h: #A69D93;
--bleibt: #A85000; /* Markenorange, abgedunkelt für Text auf hellem Grund */
--bleibt-h: #FFA64D; /* aufgehellt für dunklen Grund */
--marke: #E67300; /* Curator-Orange unverändert, nur für Flächen */
--warn: #B3261E; /* nur Fehlermeldungen */
--linie: #DFDBD5;
--linie-inv: rgba(255,255,255,.14);
--schatten: 0 1px 2px rgba(17,17,16,.05), 0 8px 24px -12px rgba(17,17,16,.14);
--schatten-l: 0 2px 4px rgba(17,17,16,.06), 0 24px 48px -20px rgba(17,17,16,.22);
--rand: 14px;
--breite: 1180px;
--nav-h: 74px;
}
/* --- Grundlagen ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--papier);color:var(--text);
font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
font-size:clamp(16px,.95rem + .25vw,18px);line-height:1.62;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
h1,h2,h3,h4{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:600;
line-height:1.05;letter-spacing:-.022em;text-wrap:balance;margin:0;overflow-wrap:break-word}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--bleibt);outline-offset:3px;border-radius:4px}
::selection{background:var(--bleibt-h);color:var(--tinte)}
.mitte{width:min(100% - 40px,var(--breite));margin-inline:auto}
.schmal{max-width:62ch}
.mono{font-family:'DM Mono',ui-monospace,SFMono-Regular,monospace;font-weight:500;
font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.zahl{font-variant-numeric:tabular-nums}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Abschnitte */
section{padding:clamp(64px,7vw,116px) 0}
.dunkel{background:var(--tinte);color:var(--text-inv)}
.dunkel h1,.dunkel h2,.dunkel h3{color:var(--text-inv)}
.dunkel .vorzeile{color:var(--bleibt-h)}
.dunkel .fliess{color:var(--text-inv-2)}
.vorzeile{display:block;color:var(--bleibt);margin-bottom:18px}
h2{font-size:clamp(1.9rem,1.25rem + 2.3vw,3.1rem)}
h3{font-size:clamp(1.15rem,1.02rem + .5vw,1.4rem)}
.fliess{color:var(--text-2)}
.kopf{max-width:62ch;margin-bottom:clamp(36px,4vw,58px)}
.kopf p{margin-top:18px;font-size:1.06em}
.kopf.schmalkopf{margin-bottom:clamp(26px,3vw,38px)}
.kopf .bild{margin:26px 0 24px}
/* Früher stand hier -webkit-line-clamp:2 mit overflow:hidden, um Überschriften
auf zwei Zeilen zu halten. Das hat zwei Dinge kaputt gemacht: die Box ist nur
2 x 1.05em hoch, also wurden bei JEDER Überschrift die Unterlängen von g, j und p
abgeschnitten, und auf dem Handy fiel die dritte Zeile von „Welchen Durchführungsweg
hast du eigentlich?" ersatzlos weg. Länge steuert man über die Textlänge und
max-width, nicht durch Abschneiden. */
/* --- Knöpfe -------------------------------------------------------------- */
.knopf{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:16px 28px;border-radius:999px;border:1px solid transparent;
font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
text-decoration:none;cursor:pointer;transition:transform .18s,background .18s,color .18s,border-color .18s,box-shadow .18s;
}
.knopf:hover{transform:translateY(-2px)}
.knopf:active{transform:translateY(0)}
/* Curator-Orange unverändert, Schrift dunkel statt weiß: 6,1:1 statt 4,9:1
und es bleibt die echte Hausfarbe statt eines abgedunkelten Brauns. */
.knopf-voll{background:var(--marke);color:var(--tinte);box-shadow:0 10px 26px -12px rgba(230,115,0,.8)}
.knopf-voll:hover{background:#FF8A17;box-shadow:0 16px 34px -14px rgba(230,115,0,.9)}
.knopf-linie{border-color:var(--linie);background:transparent;color:var(--text)}
.knopf-linie:hover{border-color:var(--text);background:var(--weiss)}
.dunkel .knopf-linie,.hero .knopf-linie{border-color:rgba(255,255,255,.24);color:var(--text-inv)}
.dunkel .knopf-linie:hover,.hero .knopf-linie:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.knopf-gruppe{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* --- Navigation ---------------------------------------------------------- */
.nav{
position:fixed;inset:0 0 auto;height:var(--nav-h);z-index:60;
display:flex;align-items:center;
transition:background .3s,box-shadow .3s,border-color .3s;
border-bottom:1px solid transparent;
}
.nav-innen{width:min(100% - 40px,var(--breite));margin-inline:auto;
display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Logo als CSS-Maske statt ![]()
: so nimmt dieselbe Datei die Textfarbe an,
weiß über dem Deckblatt-Foto und dunkel in der festen Leiste. Ein ![]()
kann das nicht.
In der Leiste steht das Lockup ohne Claim, „TAKES CARE" wäre hier unter 5 px hoch. */
.marke{display:flex;align-items:center;text-decoration:none;color:#fff}
.marke .logo{display:block;width:77px;height:46px;flex:none;background-color:currentColor;
-webkit-mask:url('logo/curator-kompakt.svg') no-repeat left center/contain;
mask:url('logo/curator-kompakt.svg') no-repeat left center/contain}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{text-decoration:none;color:rgba(255,255,255,.78);font-size:.95rem;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav .knopf{padding:11px 22px;font-size:.95rem}
.nav-fest{background:rgba(244,243,241,.92);backdrop-filter:saturate(180%) blur(14px);
border-bottom-color:var(--linie);box-shadow:0 1px 20px -10px rgba(17,17,16,.3)}
.nav-fest .marke{color:var(--text)}
/* :not(.knopf), sonst überschreibt diese Regel die weiße Schrift im Knopf
und der Aufruf wird beim Scrollen unlesbar. */
.nav-fest .nav-links a:not(.knopf){color:var(--text-2)}
.nav-fest .nav-links a:not(.knopf):hover{color:var(--text)}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
align-items:center;justify-content:center;border-radius:10px}
.burger span{display:block;width:22px;height:2px;background:#fff;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:22px;height:2px;
background:inherit;transition:transform .25s}
.burger span::before{top:-7px}.burger span::after{top:7px}
.nav-fest .burger span,.nav-fest .burger span::before,.nav-fest .burger span::after{background:var(--text)}
.nav-offen .burger span{background:transparent}
.nav-offen .burger span::before{transform:translateY(7px) rotate(45deg);background:var(--text)}
.nav-offen .burger span::after{transform:translateY(-7px) rotate(-45deg);background:var(--text)}
/* --- Deckblatt ----------------------------------------------------------- */
.hero{
position:relative;background:var(--tinte);color:var(--text-inv);
min-height:min(94svh,920px);display:flex;align-items:flex-end;
padding:calc(var(--nav-h) + 70px) 0 clamp(48px,6vw,76px);overflow:hidden;isolation:isolate;
}
/* Das Foto liegt auf breiten Bildschirmen als Hintergrund, auf dem Handy
rutscht es als eigener Block zwischen Überschrift und Text (siehe unten). */
/* display:block ist Pflicht: ist von Haus aus inline, dann wirken
die senkrechten Abstände im Handy-Fluss überhaupt nicht. */
.hero-bild{display:block;position:absolute;inset:0;z-index:-2;margin:0}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:64% 42%}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
linear-gradient(to top,rgba(13,13,12,.92) 0%,rgba(13,13,12,.60) 38%,rgba(13,13,12,.08) 78%,rgba(13,13,12,.40) 100%),
linear-gradient(to right,rgba(13,13,12,.86) 0%,rgba(13,13,12,.38) 52%,rgba(13,13,12,0) 82%)}
/* Bewusst static: sonst bezieht sich das absolute Deckblatt-Foto auf die
Textspalte statt auf den ganzen Abschnitt. */
.hero-innen{position:static}
.hero h1{font-size:clamp(2.5rem,1.4rem + 5vw,5.1rem);letter-spacing:-.035em;color:#fff;
max-width:min(100%,900px)}
/* Nur Farbe, kein Markerbalken: Orange auf Orange lief ineinander und
der Balken war ohnehin reine Dekoration. */
.hero h1 em{font-style:normal;color:var(--bleibt-h)}
.hero-sub{margin-top:26px;max-width:56ch;font-size:clamp(1.05rem,.98rem + .4vw,1.24rem);
color:var(--text-inv-2);line-height:1.6}
.hero .knopf-gruppe{margin-top:38px}
.hero-fakten{display:flex;flex-wrap:wrap;gap:0;margin-top:44px;
border-top:1px solid var(--linie-inv);padding-top:22px}
.hero-fakten li{display:flex;flex-direction:column;gap:4px;padding-right:44px}
.hero-fakten b{font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:1.18rem;color:#fff}
.hero-fakten span{color:var(--text-inv-2);font-size:.86rem}
/* Terminplakette */
/* Die Leiste stand in DM Mono mit .1em Sperrung, das las sich technisch und das
Datum zerfiel in Einzelzeichen. Jetzt Familjen Grotesk wie das Datum in der
Sprungleiste auf dem Handy. Nur „LIVE" bleibt gesperrte Versalschrift als Akzent. */
.termin{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 14px;
padding:9px 18px 9px 12px;max-width:100%;
border:1px solid var(--linie-inv);border-radius:999px;background:rgba(255,255,255,.04);
color:var(--text-inv-2);margin-bottom:28px;
font-family:'Familjen Grotesk',sans-serif;font-weight:500;font-size:.92rem;letter-spacing:-.005em}
.termin span{display:inline-flex;align-items:center;gap:14px}
.termin span + span::before{content:'\00B7';opacity:.55}
.termin b{display:inline-flex;align-items:center;gap:7px;color:var(--bleibt-h);
font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.termin b::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--bleibt-h);
box-shadow:0 0 0 0 rgba(255,166,77,.6);animation:puls 2.6s infinite}
@keyframes puls{70%{box-shadow:0 0 0 9px rgba(255,166,77,0)}100%{box-shadow:0 0 0 0 rgba(255,166,77,0)}}
@media (prefers-reduced-motion:reduce){.termin b::before{animation:none}}
/* --- Bilder -------------------------------------------------------------- */
/* Eine Ecke bleibt scharf, dasselbe Spiel wie bei den Zielgruppenkarten. */
.bild{margin:0;border-radius:var(--rand) var(--rand) var(--rand) 2px;overflow:hidden;
background:var(--papier-2);line-height:0}
.bild img{width:100%;height:auto;display:block}
.dunkel .bild{background:var(--tinte-hell)}
.bild.breit{border-radius:var(--rand) var(--rand) var(--rand) 4px}
/* Text links, Bild rechts. .dreh kehrt die Seiten um. */
.zwei-bild{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
gap:clamp(30px,4vw,68px);align-items:center}
.zwei-bild .kopf{margin-bottom:0}
.zwei-bild.dreh{grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}
/* Liegt unter dem Abschnitt ein zweispaltiges Kartenraster, muss das Bild
dieselben Spalten und denselben Abstand benutzen, sonst steht es versetzt. */
.zwei-bild.gleiches-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:20px;align-items:end;margin-bottom:20px}
/* Gleicher Fall: der U-Kassen-Check steht direkt unter dem Handout-Abschnitt.
Mit .86fr war die rechte Spalte 14 px schmaler als die Karte darüber, dadurch
sprang die linke Kante. Hier dieselben Spalten und derselbe Abstand wie .zwei. */
.zwei-bild.wie-handout{grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px)}
.vita{margin-top:26px;display:grid;gap:0}
.vita li{display:flex;flex-direction:column;gap:3px;padding:14px 0;border-top:1px solid var(--linie)}
.vita li:last-child{border-bottom:1px solid var(--linie)}
.vita b{font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:1.05rem}
.vita span{color:var(--text-2);font-size:.92rem}
.platzhalter{color:var(--warn)}
/* --- Karten -------------------------------------------------------------- */
.raster{display:grid;gap:20px}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
.karte{background:var(--weiss);border-radius:var(--rand);padding:clamp(24px,2.4vw,34px);
box-shadow:var(--schatten);display:flex;flex-direction:column;gap:12px;height:100%}
.karte h3{letter-spacing:-.015em}
.karte p{color:var(--text-2);font-size:.98rem}
.karte .mono{color:var(--neutral)}
.dunkel .karte{background:var(--tinte-hell);box-shadow:none;border:1px solid var(--linie-inv)}
.dunkel .karte p{color:var(--text-inv-2)}
/* Zielgruppen: die abgesetzte Ecke ist das einzige formale Spiel auf der Seite */
.ziel{border-radius:var(--rand) var(--rand) var(--rand) 2px;position:relative;padding-top:30px}
.ziel .nr{font-family:'DM Mono',monospace;font-weight:500;font-size:.72rem;letter-spacing:.1em;
color:var(--bleibt)}
.ziel.betont{background:var(--tinte);color:var(--text-inv)}
.ziel.betont h3{color:#fff}
.ziel.betont p{color:var(--text-inv-2)}
.ziel.betont .nr{color:var(--bleibt-h)}
/* Negativliste im U-Kassen-Abschnitt */
.nichts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.nichts li{font-family:'DM Mono',monospace;font-weight:400;font-size:.8rem;letter-spacing:.02em;
padding:9px 16px;border-radius:999px;border:1px solid var(--linie-inv);color:var(--text-inv-2);
text-decoration:line-through;text-decoration-color:var(--abfluss-h);text-decoration-thickness:1px}
/* Durchführungswege */
.wege{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.wege li{padding:13px 22px;border-radius:999px;background:var(--weiss);box-shadow:var(--schatten);
font-family:'Familjen Grotesk',sans-serif;font-weight:500;color:var(--text-2)}
.wege li.offen{background:transparent;box-shadow:none;border:1px dashed var(--linie);color:var(--neutral)}
/* Gegenüberstellung damals / heute */
.dann{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:34px}
.dann > div{background:var(--weiss);border-radius:var(--rand);padding:30px;box-shadow:var(--schatten)}
.dann .mono{color:var(--neutral);display:block;margin-bottom:14px}
.dann b{display:block;font-family:'Familjen Grotesk',sans-serif;font-weight:600;
font-size:clamp(2rem,1.4rem + 2vw,2.9rem);letter-spacing:-.03em;line-height:1}
.dann .heute b{color:var(--bleibt)}
.dann p{margin-top:10px;color:var(--text-2);font-size:.95rem}
/* --- Signature: die Strecke ---------------------------------------------- */
.rechnung-zwei{display:grid;grid-template-columns:1fr;gap:0;align-items:start}
@media (min-width:1100px){
.rechnung-zwei{grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:clamp(30px,3vw,56px)}
.rechnung-zwei .band{margin-top:clamp(36px,4vw,60px);position:sticky;top:calc(var(--nav-h) + 26px)}
}
.strecke{margin-top:clamp(40px,4vw,60px);position:relative}
.strecke ol{display:grid;gap:0;counter-reset:s}
.stat{position:relative;display:grid;grid-template-columns:86px 1fr;gap:clamp(20px,3vw,44px);
padding:22px 0;align-items:start}
.stat::before{content:'';position:absolute;left:41px;top:0;bottom:0;width:1px;
background:var(--linie-inv)}
.stat:first-child::before{top:34px}
.stat:last-child::before{bottom:calc(100% - 34px)}
.stat .punkt{position:relative;display:flex;align-items:center;gap:12px;padding-top:6px}
.stat .punkt i{position:relative;z-index:2;width:11px;height:11px;border-radius:50%;
background:var(--neutral);margin-left:36px;flex:none;
box-shadow:0 0 0 5px var(--tinte);transition:background .4s,box-shadow .4s}
.stat .nr{position:absolute;left:0;top:2px;font-family:'DM Mono',monospace;font-weight:500;
font-size:.74rem;letter-spacing:.08em;color:var(--text-inv-2)}
.stat h3{font-size:clamp(1.15rem,1.02rem + .55vw,1.5rem);color:#fff;letter-spacing:-.02em}
.stat p{margin-top:8px;color:var(--text-inv-2);font-size:.98rem;max-width:56ch}
.stat.ab .punkt i{background:var(--abfluss-h);box-shadow:0 0 0 5px var(--tinte),0 0 18px rgba(166,157,147,.5)}
.stat.ziel-stat .punkt i{width:15px;height:15px;margin-left:34px;background:var(--bleibt-h);
box-shadow:0 0 0 5px var(--tinte),0 0 26px rgba(255,166,77,.6)}
.stat.ziel-stat h3{font-size:clamp(1.5rem,1.1rem + 1.8vw,2.3rem);color:var(--bleibt-h)}
.stat.ziel-stat .nr{color:var(--bleibt-h)}
/* Band: was vom Brutto langfristig bleibt */
.band{margin-top:46px;background:var(--tinte-hell);border:1px solid var(--linie-inv);
border-radius:var(--rand);padding:clamp(24px,2.6vw,36px)}
.band .mono{color:var(--text-inv-2);display:block;margin-bottom:18px}
.band svg{width:100%;height:auto}
.band figcaption{margin-top:16px;color:var(--text-inv-2);font-size:.88rem;max-width:62ch}
/* Auf schmalen Bildschirmen schrumpfen die Beschriftungen im Schaubild unter
die Lesbarkeit. Dort treten sie als echte Textzeilen unter das Bild. */
.legende{display:none;flex-wrap:wrap;gap:10px 20px;margin-top:18px}
.legende li{display:flex;align-items:center;gap:9px;
font-family:'DM Mono',monospace;font-weight:500;font-size:.72rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--text-inv-2)}
.legende i{width:11px;height:11px;border-radius:3px;background:var(--neutral);flex:none}
.legende .l-ab{background:var(--abfluss-h)}
.legende .l-bleibt{background:var(--bleibt-h)}
/* --- Prüfliste ----------------------------------------------------------- */
.pruef{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
background:var(--linie);border-radius:var(--rand);overflow:hidden;box-shadow:var(--schatten)}
.pruef li{background:var(--weiss);padding:22px 26px 22px 58px;position:relative;font-size:1rem}
.pruef li::before{content:'';position:absolute;left:24px;top:27px;width:16px;height:16px;
border-radius:50%;background:rgba(230,115,0,.1)}
.pruef li::after{content:'';position:absolute;left:29px;top:32px;width:6px;height:3px;
border-left:1.5px solid var(--bleibt);border-bottom:1.5px solid var(--bleibt);
transform:rotate(-45deg)}
.dunkel .pruef{background:var(--linie-inv)}
.dunkel .pruef li{background:var(--tinte-hell);color:var(--text-inv)}
/* --- Handout / Check ----------------------------------------------------- */
.zwei{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px);align-items:start}
.handout{background:var(--weiss);border-radius:var(--rand);box-shadow:var(--schatten-l);
padding:clamp(28px,3vw,42px)}
.handout .mono{color:var(--bleibt);display:block;margin-bottom:16px}
.handout h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);margin-bottom:8px}
.handout ul{margin-top:22px;display:grid;gap:14px}
.handout li{padding-left:30px;position:relative;color:var(--text-2);font-size:.97rem}
.handout li::before{content:'';position:absolute;left:0;top:.58em;width:12px;height:1.5px;
background:var(--bleibt)}
.schritte{display:grid;gap:0;margin-top:clamp(34px,4vw,52px)}
.schritte li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:18px 0;
border-top:1px solid var(--linie)}
.schritte li:last-child{border-bottom:1px solid var(--linie)}
.schritte b{font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:1.05rem}
.schritte span{font-family:'DM Mono',monospace;font-weight:500;font-size:.74rem;letter-spacing:.08em;
color:var(--neutral);padding-top:5px}
.schritte p{color:var(--text-2);font-size:.95rem;margin-top:4px}
/* --- Formular ------------------------------------------------------------ */
.anmeldung{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,4.5vw,72px);align-items:start}
.formular{background:var(--weiss);border-radius:var(--rand);padding:clamp(26px,3vw,40px);
box-shadow:var(--schatten-l);color:var(--text)}
.dunkel .formular h3,.formular h3{color:var(--text);margin-bottom:6px}
.formular > p{color:var(--text-2);font-size:.95rem;margin-bottom:24px}
.feld{display:grid;gap:7px;margin-bottom:16px}
.feld label{font-size:.86rem;font-weight:600;color:var(--text)}
.feld input,.feld select,.feld textarea{
width:100%;padding:14px 16px;border:1px solid var(--linie);border-radius:10px;
background:var(--papier);font:inherit;font-size:.98rem;color:var(--text);transition:border-color .2s,background .2s}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--bleibt);
background:var(--weiss);box-shadow:0 0 0 3px rgba(230,115,0,.12)}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.zustimmung{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:22px 0 4px}
.zustimmung input{width:19px;height:19px;margin-top:2px;accent-color:var(--bleibt)}
.zustimmung label{font-size:.85rem;color:var(--text-2);line-height:1.5}
.zustimmung a{color:var(--bleibt);text-underline-offset:2px}
.formular .knopf{width:100%;margin-top:18px}
.formular .fuss{margin-top:16px;font-size:.8rem;color:var(--neutral);text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fehler{background:rgba(179,38,30,.08);border:1px solid rgba(179,38,30,.25);color:var(--warn);
border-radius:10px;padding:13px 16px;font-size:.9rem;margin-bottom:20px}
.anmeldung-text .mono{color:var(--bleibt-h)}
.anmeldung-text h2{margin-bottom:20px}
.anmeldung-text .eckdaten{margin-top:32px;display:grid;gap:0}
.anmeldung-text .eckdaten li{display:flex;justify-content:space-between;gap:20px;
padding:15px 0;border-top:1px solid var(--linie-inv);font-size:.97rem;color:var(--text-inv-2)}
.anmeldung-text .eckdaten li:last-child{border-bottom:1px solid var(--linie-inv)}
.anmeldung-text .eckdaten b{color:#fff;font-weight:500}
/* --- Schluss + Hinweis --------------------------------------------------- */
.schluss{text-align:center}
.schluss h2{margin-inline:auto;max-width:20ch}
.schluss p{margin:20px auto 0;max-width:56ch}
.schluss .knopf-gruppe{justify-content:center;margin-top:36px}
.hinweis{padding:0 0 clamp(56px,6vw,80px)}
.hinweis p{font-size:.82rem;line-height:1.75;color:var(--neutral);
max-width:110ch;margin-inline:auto;text-align:center;text-wrap:balance}
/* --- Sprungleiste (nur Handy) --------------------------------------------
Deckende Farbe statt backdrop-filter: ein fest stehendes Blur-Element
flackert in Safari beim Scrollen. Die Kopfzeile darf blurren, sie steht
still, diese Leiste liegt über bewegtem Inhalt.
Sichtbar wird sie erst per .da aus der app.js. */
.sprung{
display:none;
position:fixed;left:0;right:0;bottom:0;z-index:55;
background:var(--papier);border-top:1px solid var(--linie);
box-shadow:0 -8px 24px -18px rgba(17,17,16,.45);
padding:9px 0 calc(9px + env(safe-area-inset-bottom));
transform:translateY(105%);visibility:hidden;
/* visibility, damit die versteckte Leiste nicht per Tab erreichbar ist.
Beim Einblenden muss sie sofort umspringen, beim Ausblenden erst nach
dem Wegfahren - daher die 0s-Dauer mit unterschiedlicher Verzögerung. */
transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s .28s;
}
.sprung.da{transform:none;visibility:visible;
transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s 0s}
.sprung-innen{width:calc(100% - 32px);margin-inline:auto;
display:flex;align-items:center;justify-content:space-between;gap:14px}
.sprung-text{margin:0;display:flex;flex-direction:column;gap:1px;line-height:1.3}
.sprung-text b{font-family:'Familjen Grotesk',sans-serif;font-weight:600;
font-size:.92rem;letter-spacing:-.01em;color:var(--text)}
.sprung-text span{font-size:.6rem;color:var(--neutral);letter-spacing:.14em;text-transform:uppercase}
/* .knopf steht auf dem Handy auf width:100%, hier muss er sich zurücknehmen. */
.sprung .knopf{width:auto;flex:0 0 auto;padding:12px 20px;font-size:.92rem;white-space:nowrap}
/* --- Fuß ----------------------------------------------------------------- */
footer{background:var(--tinte);color:var(--text-inv-2);padding:56px 0 40px;font-size:.9rem}
.fuss-innen{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
footer a{color:var(--text-inv-2);text-decoration:none;transition:color .2s}
footer a:hover{color:#fff}
.fuss-links{display:flex;flex-wrap:wrap;gap:26px}
.fuss-marke{flex-basis:100%;margin:0 0 30px;color:var(--text-inv)}
.fuss-marke .logo-voll{display:block;width:85px;height:60px;background-color:currentColor;
-webkit-mask:url('logo/curator-voll.svg') no-repeat left center/contain;
mask:url('logo/curator-voll.svg') no-repeat left center/contain}
/* --- Rechtstexte --------------------------------------------------------- */
.recht{padding-top:calc(var(--nav-h) + 70px);padding-bottom:clamp(64px,7vw,110px)}
.recht h1{font-size:clamp(2rem,1.5rem + 2vw,2.9rem);margin-bottom:30px}
.recht h2{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);margin:40px 0 12px;display:block}
.recht p,.recht li{color:var(--text-2);margin-bottom:12px}
.recht ul{list-style:disc;padding-left:22px;margin-bottom:12px}
.recht .platz{color:var(--warn);font-weight:600}
/* --- Einblenden ---------------------------------------------------------- */
.js .auf{opacity:0;transform:translateY(18px)}
.js .auf.da{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.js .auf{opacity:1;transform:none}
.sprung{transition:none}}
/* --- Schmale Bildschirme ------------------------------------------------- */
@media (max-width:1000px){
.zwei-bild,.zwei-bild.dreh,.zwei-bild.wie-handout{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(24px,3vw,40px)}
.r4{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(2,minmax(0,1fr))}
.zwei,.anmeldung{grid-template-columns:1fr}
.anmeldung-text{order:-1}
}
@media (max-width:860px){
:root{--nav-h:66px}
/* Feste Reihenfolge auf dem Handy: Überschrift, dann Bild, dann Text. */
/* .gleiches-raster muss hier mitgenannt werden, sonst gewinnt die
zweispaltige Regel von oben (zwei Klassen schlagen eine). */
.zwei-bild,.zwei-bild.dreh,.zwei-bild.gleiches-raster,.zwei-bild.wie-handout{grid-template-columns:1fr;gap:0;
align-items:stretch}
.zwei-bild .kopf{display:contents}
.zwei-bild .kopf .vorzeile{order:-3}
.zwei-bild .kopf h2{order:-2}
.zwei-bild > .bild{order:-1;margin:24px 0 26px}
.zwei-bild .kopf p,.zwei-bild .kopf ul{order:1}
.zwei-bild .kopf p + p{order:2}
.burger{display:inline-flex}
.nav-links{
position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;align-items:stretch;gap:0;
background:var(--papier);border-bottom:1px solid var(--linie);padding:10px 20px 22px;
box-shadow:0 20px 40px -24px rgba(17,17,16,.5);
transform:translateY(-12px);opacity:0;visibility:hidden;transition:.25s}
.nav-offen .nav-links{transform:none;opacity:1;visibility:visible}
.nav-links a:not(.knopf){color:var(--text);padding:15px 4px;border-bottom:1px solid var(--linie);font-size:1.02rem}
.nav-links a:not(.knopf):last-of-type{border-bottom:0}
.nav-links .knopf{margin-top:14px;width:100%}
.nav-offen{background:var(--papier);border-bottom-color:var(--linie)}
.nav-offen .marke{color:var(--text)}
.nav-offen .marke span{color:var(--text-2)}
}
@media (max-width:760px){
.r2,.r3,.r4,.dann,.pruef,.feld-paar{grid-template-columns:1fr}
.pruef li{padding:18px 22px 18px 54px}
.band svg .beschriftung{display:none}
.legende{display:flex}
/* Der Trennpunkt stünde beim Umbruch allein am Zeilenanfang. */
.termin span + span::before{display:none}
.termin{gap:2px 16px}
.hero{min-height:auto;padding-top:calc(var(--nav-h) + 40px);padding-bottom:44px}
.hero::after{display:none}
.hero-bild{position:static;margin:28px 0 30px;border-radius:var(--rand);overflow:hidden;line-height:0}
.hero-innen{position:relative}
.hero-bild img{height:auto;object-position:center}
.termin{border-radius:12px;font-size:.66rem;gap:3px 12px;padding:10px 14px}
.termin span{gap:12px}
.hero-fakten{gap:18px 0}
.hero-fakten li{width:50%;padding-right:16px}
/* Auf dem Handy sitzt der Punkt direkt auf der Linie, die Nummer steht
als Zeile über der Überschrift. */
.stat{grid-template-columns:1fr;gap:0;padding:18px 0 18px 30px}
.stat::before{left:5px}
.stat:first-child::before{top:28px}
.stat:last-child::before{bottom:calc(100% - 28px)}
.stat .punkt{display:block;padding:0;position:static}
.stat .punkt i{position:absolute;left:0;top:24px;margin:0}
.stat.ziel-stat .punkt i{left:-2px;top:22px;margin:0}
.stat .nr{position:static;display:block;margin:0 0 4px}
.stat > div{padding-left:0}
.knopf{width:100%}
.knopf-gruppe{gap:10px}
.nav .knopf{width:auto}
/* Sprungleiste an, und unten so viel Luft, dass sie den Fuß nicht verdeckt. */
.sprung{display:block}
footer{padding-bottom:calc(40px + 72px + env(safe-area-inset-bottom))}
}
@media (max-width:370px){
.mitte{width:calc(100% - 32px)}
.hero-fakten li{width:100%}
}