html{font-size:20px}
/* ── Schriften, selbst gehostet ──────────────────────────────────────────
Barlow und Barlow Semi Condensed liegen in schriften/ als woff2 (auf
Latin + Latin-Extended reduziert). Kein Google-Aufruf, keine IP-Übertragung
an Dritte. Quelle: die Originaldateien aus dem WordPress-Medienarchiv.
------------------------------------------------------------------- */
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(schriften/barlow-400.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(schriften/barlow-500.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(schriften/barlow-600.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;src:url(schriften/barlow-700.woff2) format('woff2')}
@font-face{font-family:Oswald;font-style:normal;font-weight:700;font-display:swap;src:url(schriften/oswald-700.woff2) format('woff2')}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/barlowsc-400.woff2) format('woff2')}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(schriften/barlowsc-500.woff2) format('woff2')}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(schriften/barlowsc-600.woff2) format('woff2')}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(schriften/barlowsc-700.woff2) format('woff2')}
:root{
--navy:#003747;
--navy-tief:#002B38;
--petrol:#003747;
--petrol-hell:#147C90;
--cyan:#4DB8CA;
--cyan-blass:#9BD3DC;
--koralle:#FB7164;
--koralle-dunkel:#F0574C;
--weiss:#FFFFFF;
--text-grau:#95A7B0;
--karte-grau:#5E727C;
--linie:#E1E8EB;
--papier:#F1F6F8;
--papier-2:#E4EEF1;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--navy);color:#DCE7EB;
font-family:"Barlow Semi Condensed",Barlow,-apple-system,BlinkMacSystemFont,Helvetica,sans-serif;
font-size:1rem;line-height:1.6;
}
/* Markenbuch: Headline = Oswald Bold versal, Sublines = Barlow Bold.
h1 und h2 sind die grossen Ueberschriften, h3 und h4 die Zwischen-
ueberschriften in Kacheln und Feldern. */
h1,h2,h3,h4{
font-weight:700;text-transform:uppercase;
letter-spacing:-.01em;line-height:1.06;margin:0;
}
/* Oswald hat hoehere Versalien als Barlow. Mit 1,06 stossen die Umlaut-
punkte an die Zeile darueber — deshalb hier mehr Durchschuss. */
h1,h2{font-family:Oswald,Barlow,"Barlow Semi Condensed",sans-serif;
letter-spacing:.005em;line-height:1.15}
h3,h4{font-family:Barlow,"Barlow Semi Condensed",sans-serif;letter-spacing:-.01em}
p{margin:0 0 1.1rem}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
/* ---------- Navigation ---------- */
.nav{background:var(--navy-tief);padding:16px 0;position:sticky;top:0;z-index:50}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.logo{display:block;line-height:0;align-self:flex-start;margin-top:-16px}
.logo img{height:74px;width:auto;display:block}
.navlinks{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.navlinks a{color:#E3EDF1;text-decoration:none;font-size:1rem}
.navlinks a:hover,.navlinks a:focus-visible,.navlinks a.aktiv{color:var(--koralle)}
.navlinks a.aktiv{font-weight:600}
/* ---------- Buttons ---------- */
.knopf{
display:inline-block;text-decoration:none;color:#fff;
background:var(--koralle);
font-family:Barlow,sans-serif;font-weight:500;font-size:1.05rem;line-height:1.35;
padding:15px 28px;border-radius:5px;
}
/* Knoepfe in der Navigationsleiste: kleiner als im Inhalt, beide versal.
Mit a davor, sonst gewinnt .navlinks a mit seiner hoeheren
Spezifitaet und setzt die Groesse wieder auf 1rem. */
.navlinks a.knopf--nav{
padding:8px 16px;font-size:.82rem;font-weight:600;
text-transform:uppercase;letter-spacing:.05em;border-radius:4px;
}
.knopf:hover{background:var(--koralle-dunkel)}
.knopf:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.knopf--weiss{background:#fff;color:var(--petrol)}
.hero .knopf--weiss{background:var(--navy);color:#fff}
.knopf--weiss:hover{background:#E4EEF1}
/* ---------- Hero ---------- */
.hero{
/* Farben aus dem Originalverlauf der alten Seite
(wp-backup/.../2024/01/verlauf.png). Der helle Kopf bleibt als
Andeutung, der groessere Teil ist dunkel — so laesst sich die
Schrift weiss setzen und die Vorzeile in Koralle. */
/* Der Originalverlauf, in 21 Stufen aus verlauf.png ausgelesen und
eins zu eins uebernommen — nicht nachgebaut. Dadurch ist die ganze
Spanne von hell oben bis dunkel unten im Bild, ohne Zoom. */
background:linear-gradient(180deg,#96D2D6 0%,#96D0D5 5%,#96CDD4 10%,#95CBD2 15%,#94C8D0 20%,#94C5CF 25%,#93C2CC 30%,#92BFCA 35%,#8FBCC8 40%,#8EB9C7 45%,#82B0BF 50%,#70A3B5 55%,#5D95A8 60%,#4A879E 65%,#357991 70%,#206C84 75%,#0A5F77 80%,#005169 85%,#004F67 90%,#004F67 95%,#004F67 100%);
color:#fff;padding:84px 0 92px;
}
/* Der Text sitzt weit rechts, unter Newsletter/Termine, damit er dem
Logo nicht den Bildmittelpunkt streitig macht. */
.hero .wrap{display:grid;grid-template-columns:1.18fr .82fr;gap:44px;align-items:center}
.hero .wrap > div:last-child{justify-self:end;max-width:44ch}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:32px}
.hero .wrap > div:last-child{justify-self:stretch;max-width:none}}
.hero-signet{width:100%;max-width:560px;height:auto;margin:0 auto}
.hero-knoepfe{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.augenmerk{color:var(--koralle);font-weight:700;font-size:1.15rem;margin-bottom:14px}
.hero .augenmerk{color:var(--koralle)}
/* Feste Groessen statt clamp: die Zeile wanderte beim Ziehen des Fensters
staendig mit. Jetzt drei feste Stufen. */
.hero h1{font-size:3.3rem;color:#fff}
@media(max-width:900px){.hero h1{font-size:2.5rem}}
@media(max-width:520px){.hero h1{font-size:2rem}}
/* Namensgleichheit: .unter ist auch das Aufklappmenü der Navigation und
steht dort auf opacity:0. Diese Absätze müssen das zurücksetzen. */
.hero .unter{
position:static;opacity:1;visibility:visible;transform:none;
background:none;border:none;box-shadow:none;min-width:0;padding:0;
margin-top:14px;max-width:46ch;font-size:1.1rem;color:#E7F2F5;
}
/* ---------- Karten ---------- */
.karten-teil{padding:88px 0 96px}
/* Die Zeile ueber der korallenen Vorzeile, wie auf der alten Startseite */
.vorsatz{color:#9FB6C0;font-size:1.05rem;margin-bottom:22px}
.vorsatz b{color:#DCE9ED;font-weight:700}
.augenmerk-koralle{color:var(--koralle);font-weight:700;font-size:1.15rem;margin-bottom:12px}
/* Grundsatz: Ueberschriften bekommen KEINE Breite in ch. Das brach die
Zeile nach n Zeichen um, unabhaengig von der Fensterbreite. Umbrueche
stehen als
im HTML. Im Fliesstext bleiben die ch-Werte — dort
halten sie die Zeilenlaenge lesbar.
Vorher: max-width:20ch brach die Zeile schon nach 20 Zeichen um, unabhaengig
von der Fensterbreite — und text-wrap:balance verteilte zusaetzlich
selbststaendig um. Jetzt bestimmt das
im HTML den Umbruch. */
.teil-h2{color:#fff;font-size:3rem;margin-bottom:52px}
@media(max-width:900px){.teil-h2{font-size:2.3rem}}
@media(max-width:520px){.teil-h2{font-size:1.8rem}}
.karten{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media(max-width:900px){.karten{grid-template-columns:1fr;gap:28px}}
.karte{
background:#fff;color:var(--petrol);border-radius:4px;overflow:hidden;
display:flex;flex-direction:column;
}
.karte img{width:100%;height:230px;object-fit:cover}
.karte-innen{padding:32px 34px 26px;flex:1}
.karte .datum{
font-family:Barlow,sans-serif;font-weight:700;text-transform:uppercase;
letter-spacing:.09em;font-size:.97rem;color:var(--petrol-hell);margin-bottom:12px;
}
.karte h3{font-size:1.75rem;margin-bottom:14px}
.fuerwen-zeile{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.fuerwen-zeile img{width:46px;height:46px;flex:0 0 46px;mix-blend-mode:multiply}
.karte .fuerwen{margin:0;font-weight:700;font-size:1.05rem;color:#0B5F70;margin-bottom:16px}
.karte p{color:var(--karte-grau);font-size:1.05rem}
.karte strong{color:var(--petrol)}
.liste{list-style:none;padding:0;margin:20px 0 0}
.liste li{
padding:10px 0 10px 26px;position:relative;
border-bottom:1px solid var(--linie);font-size:1.05rem;color:var(--karte-grau);
}
.liste li:last-child{border-bottom:none}
.liste li::before{content:"";position:absolute;left:0;top:1.25em;width:13px;height:3px;border-radius:2px;background:var(--koralle)}
.liste strong{color:var(--petrol)}
.merke{
margin-top:22px;padding:16px 18px;border-radius:4px;
border-left:4px solid var(--koralle);background:#F1F6F8;
font-size:1.02rem;color:var(--karte-grau);
}
.merke p{margin:0}
.merke strong{color:var(--petrol)}
.preiszeile{
display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
padding:22px 34px 0;
}
.preis{font-family:Barlow,sans-serif;font-weight:700;font-size:2.6rem;line-height:1;color:var(--petrol)}
.preisnote{color:var(--karte-grau);font-size:.92rem}
.karte-cta{
margin:18px 22px 22px;border-radius:4px;text-decoration:none;
background:linear-gradient(90deg,var(--petrol) 0%,var(--petrol-hell) 45%,var(--koralle) 100%);
color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:16px 18px;
}
.karte-cta span:first-child{
font-family:Barlow,sans-serif;font-weight:700;
text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem;
}
.karte-cta .pille{
background:rgba(255,255,255,.22);border-radius:4px;padding:8px 16px;
font-size:.9rem;font-weight:500;white-space:nowrap;
}
.karte-cta:hover .pille{background:rgba(255,255,255,.34)}
.karte-cta:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.ctanote{padding:0 34px 30px;margin:0;font-size:.88rem;color:var(--karte-grau)}
/* ---------- Anna ---------- */
.anna{background:var(--navy-tief);padding:88px 0}
.anna .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}
@media(max-width:900px){.anna .wrap{grid-template-columns:1fr;gap:34px}}
.anna img{border-radius:6px}
.anna h2{color:#fff;font-size:clamp(1.8rem,3.9vw,2.7rem);margin-bottom:20px}
.referenzen{
margin-top:28px;padding-top:24px;border-top:3px solid rgba(255,255,255,.14);
color:var(--text-grau);font-size:.96rem;line-height:1.9
}
/* ---------- Verteiler ---------- */
.verteiler{
background:linear-gradient(135deg,var(--petrol-hell) 0%,var(--cyan) 100%);
color:#fff;padding:68px 0;text-align:center;
}
.verteiler h2{font-size:2.1rem;margin:0 auto 16px}
.verteiler p{color:#EAF7FA;max-width:46ch;margin:0 auto 26px}
/* ---------- Fuß ---------- */
.fuss{background:var(--navy-tief);color:#8FA8B3;padding:62px 0 44px;font-size:.89rem;line-height:1.78}
.fuss h4{color:#fff;font-size:.95rem;letter-spacing:.07em;margin:0 0 12px}
.fussgitter{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
@media(max-width:800px){.fussgitter{grid-template-columns:1fr;gap:30px}}
.fuss a{color:var(--cyan)}
.fussende{margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);color:#66808B}
/* ---------- Buttonvarianten ---------- */
.knopf--rahmen{background:transparent;border:1px solid rgba(255,255,255,.42);color:#E3EDF1}
.knopf--rahmen:hover{background:rgba(255,255,255,.12);color:#fff}
/* ---------- Terminfenster ---------- */
.upcoming{background:var(--navy)}
.upcoming .wrap{
margin-top:-40px;background:#fff;color:var(--petrol);border-radius:6px;
padding:24px 28px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
box-shadow:0 16px 44px rgba(7,34,47,.36);position:relative;z-index:5;
}
@media(max-width:860px){.upcoming .wrap{grid-template-columns:1fr}}
.upcoming-titel{font-family:Barlow,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:1.02rem;color:var(--petrol-hell)}
.upcoming-liste{display:flex;gap:30px;flex-wrap:wrap;font-size:1rem}
.upcoming-liste b{display:block;font-family:"Barlow Semi Condensed",sans-serif;font-size:1.22rem;letter-spacing:.02em}
.upcoming-liste span{color:var(--karte-grau)}
/* ---------- Team ---------- */
.ueber{background:var(--navy-tief);padding:86px 0}
.ueber .einleitung{max-width:62ch}
.ueber h2{color:#fff;font-size:clamp(2rem,4.6vw,3rem);margin-bottom:20px}
.team{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:50px}
@media(max-width:900px){.team{grid-template-columns:1fr}}
.person{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start}
@media(max-width:520px){.person{grid-template-columns:1fr}}
.person img{border-radius:5px;width:100%;height:190px;object-fit:cover;object-position:center 20%}
.person h3{color:#fff;font-size:1.5rem;margin-bottom:6px}
.person .rolle{color:var(--koralle);font-weight:700;font-size:.97rem;margin-bottom:10px}
.person p{color:var(--text-grau);font-size:.97rem}
.person a{color:var(--cyan)}
/* ---------- Logo-Laufband ---------- */
.kunden{background:var(--navy);padding:72px 0 84px;overflow:hidden}
.kunden .kopfzeile{text-align:center;margin-bottom:36px}
.kunden h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.4rem)}
.laufband{display:flex;gap:22px;width:max-content;animation:laufen 48s linear infinite}
.laufband:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.laufband{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.laufband img{width:186px;height:132px;object-fit:contain;background:#fff;border-radius:4px;padding:14px;flex:0 0 auto}
.kunden-note{text-align:center;margin:34px auto 0;max-width:62ch;color:var(--text-grau);font-size:.95rem;padding:0 28px}
/* ---------- Fuss vierspaltig ---------- */
.fussgitter{grid-template-columns:repeat(4,1fr) !important;gap:34px}
@media(max-width:900px){.fussgitter{grid-template-columns:1fr 1fr !important}}
@media(max-width:600px){.fussgitter{grid-template-columns:1fr !important}}
/* ---------- Seiteninhalt allgemein ---------- */
.inhalt{padding:80px 0 92px}
.inhalt h1{color:#fff;font-size:3.1rem;margin-bottom:22px}
@media(max-width:900px){.inhalt h1{font-size:2.4rem}}
@media(max-width:520px){.inhalt h1{font-size:1.9rem}}
.inhalt h2{color:#fff;font-size:clamp(1.6rem,3.6vw,2.3rem);margin:52px 0 18px}
.inhalt .fliess{max-width:64ch}
/* Breiter, wo der Text neben breiten Kachelreihen sonst schmal wirkt.
Nicht die volle Seitenbreite: ab etwa 80 Zeichen je Zeile findet das
Auge den Zeilenanfang schlechter — das trifft Menschen mit Legasthenie
zuerst. 78 Zeichen ist der Kompromiss. */
.inhalt .fliess--breit{max-width:78ch}
/* Ohne Begrenzung: der Text laeuft ueber die ganze Spaltenbreite */
.inhalt .fliess--voll{max-width:none}
/* Knopf im Fliesstext: je eine Zeilenhoehe Luft davor und danach,
sonst klebt er an den Absaetzen. */
.inhalt p:has(> .knopf){margin-top:1.7em;margin-bottom:1.7em}
.inhalt .fliess p{color:#C6D6DC}
.inhalt .fliess p.vorspann{
font-size:clamp(1.12rem,2.2vw,1.32rem);line-height:1.55;color:#fff;font-weight:500;
margin-bottom:8px;
}
.inhalt .fliess ul{margin:14px 0 20px;padding-left:0;list-style:none}
.inhalt .fliess li{
color:#C6D6DC;position:relative;padding-left:22px;margin-bottom:8px;line-height:1.55;
}
.inhalt .fliess li::before{
content:"";position:absolute;left:2px;top:.62em;
width:7px;height:7px;border-radius:50%;background:var(--koralle);
}
.inhalt .fliess li b{color:#fff}
.inhalt .fliess p.stand{
margin-top:38px;color:var(--text-grau);font-size:.92rem;
border-top:1px solid rgba(255,255,255,.14);padding-top:16px;
}
.inhalt .fliess a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.inhalt .fliess a:hover{color:#fff}
.lücke{
background:rgba(251,113,100,.14);border-left:4px solid var(--koralle);
padding:18px 22px;border-radius:4px;margin:26px 0;color:#F3C8C3;font-size:.96rem;max-width:64ch;
}
.lücke b{color:#fff}
.dreispalt{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
@media(max-width:900px){.dreispalt{grid-template-columns:1fr}}
.feld{background:#fff;color:var(--petrol);border-radius:4px;padding:28px 30px}
.feld h3{font-size:1.4rem;margin-bottom:10px}
.feld p{color:var(--karte-grau);font-size:1rem}
.feld .preisline{font-family:Barlow,sans-serif;font-weight:700;font-size:1.5rem;margin:14px 0 4px}
.feld a.knopf{margin-top:16px}
.hinweisbox{background:var(--navy-tief);border-radius:5px;padding:24px 28px;margin-top:32px;max-width:64ch}
.hinweisbox--breit{max-width:none}
.hinweisbox h3{color:#fff;font-size:1.2rem;margin-bottom:8px}
.hinweisbox p{color:#A9C4CE;font-size:.97rem;margin:0}
/* ================= Navigation mit Untermenüs ================= */
.navlinks{position:relative}
.menu{position:relative}
.menu>a{display:inline-flex;align-items:center;gap:7px}
.menu>a::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.75}
.unter{
position:absolute;top:calc(100% + 14px);left:-16px;min-width:268px;
background:#012F3E;border:1px solid rgba(255,255,255,.16);border-radius:5px;padding:8px 0;
box-shadow:0 18px 44px rgba(0,0,0,.5);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .14s ease,transform .14s ease;z-index:60;
}
@media(prefers-reduced-motion:reduce){.unter{transition:none}}
.menu:hover .unter,.menu:focus-within .unter{opacity:1;visibility:visible;transform:none}
.unter::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.unter a{
display:block;padding:11px 22px;color:#E3EDF1;text-decoration:none;
font-size:.98rem;line-height:1.35;
}
.unter a:hover,.unter a:focus-visible{background:rgba(255,255,255,.09);color:var(--koralle)}
.unter a small{display:block;color:#8FA8B3;font-size:.85rem}
@media(max-width:900px){
.unter{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
background:transparent;padding:4px 0 10px;min-width:0}
.unter a{color:#BFD6DE;padding:7px 0 7px 16px}
.unter a small{color:#7C97A3}
.unter a:hover{background:transparent;color:#fff}
.menu>a::after{display:none}
.navlinks{flex-direction:column;align-items:flex-start;gap:8px;width:100%}
}
/* ================= Team größer ================= */
/* Portraet nahezu quadratisch und oben buendig mit dem Text. Die Kacheln
stehen darunter ueber die ganze Breite, nicht mehr neben dem Bild. */
.person--gross{grid-template-columns:360px 1fr;gap:34px;align-items:start}
.person--gross img{height:auto;aspect-ratio:1/1;width:100%;object-position:center 22%}
@media(max-width:700px){.person--gross{grid-template-columns:1fr}
.person--gross img{aspect-ratio:4/3}}
.team--breit{grid-template-columns:1fr;gap:44px}
/* Anna und Lisa nebeneinander: zwei Spalten, in jeder Portraet, Text
und die eigenen Kacheln untereinander. */
.team--paar{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:1000px){.team--paar{grid-template-columns:1fr;gap:56px}}
.person-spalte{display:flex;flex-direction:column;gap:0}
.person-spalte .person--gross{grid-template-columns:1fr;gap:22px}
.person-spalte .person--gross img{aspect-ratio:1/1;width:100%}
.ueber-gitter--spalte{grid-template-columns:1fr;gap:14px;margin-top:22px}
/* ============ Angebotskacheln wie auf der Originalseite ============ */
.kachel-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px}
@media(max-width:900px){.kachel-reihe{grid-template-columns:1fr;gap:18px}}
.kachel{
background:#fff;color:var(--petrol);display:flex;flex-direction:column;
text-align:center;padding:38px 30px 0;border:1px solid var(--linie);
}
.kachel--mitte{
background:linear-gradient(160deg,var(--petrol) 0%,#2E6E82 100%);
color:#fff;border-color:transparent;
}
.kachel img.ikon{width:88px;height:88px;margin:0 auto 26px;mix-blend-mode:multiply}
.kachel--mitte img.ikon{filter:brightness(0) invert(1);mix-blend-mode:normal}
.kachel h3{font-size:1.35rem;line-height:1.15;margin-bottom:14px;color:var(--petrol);font-weight:700}
.kachel--mitte h3{color:#fff}
.kachel .claim{font-weight:700;font-size:1rem;color:var(--karte-grau);margin-bottom:14px}
.kachel--mitte .claim{color:#CFE7EC}
.kachel p{color:var(--karte-grau);font-size:1rem}
.kachel--mitte p{color:#DCEAEF}
.kachel .fuell{flex:1;min-height:16px}
.kachel-cta{
margin:26px -30px 0;padding:18px 22px;text-decoration:none;color:#fff;
display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;
background:linear-gradient(90deg,var(--petrol) 0%,#4A7C8C 45%,var(--koralle) 100%);
}
.kachel--mitte .kachel-cta{background:linear-gradient(90deg,#0B3B4C 0%,var(--koralle) 100%)}
.kachel-cta span:first-child{
font-family:Barlow,sans-serif;font-weight:700;text-transform:uppercase;
letter-spacing:.05em;font-size:1rem;
}
.kachel-cta .pille{background:rgba(255,255,255,.24);border-radius:4px;padding:7px 14px;font-size:.85rem;line-height:1.2;text-align:center}
.kachel-cta:hover .pille{background:rgba(255,255,255,.38)}
.kachel-cta:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
/* ============ Korrekturen: Ränder, Icons, Buttons ============ */
.kachel{border:none}
.kachel img.ikon{width:96px;height:96px;margin:0 auto 24px;mix-blend-mode:normal}
.kachel--mitte img.ikon{filter:brightness(0) invert(1)}
/* Buttonleisten aller Kacheln gleich hoch, Text einzeilig */
.kachel-cta{
margin:26px -30px 0;padding:0 20px;min-height:66px;
display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.kachel-cta span:first-child{
font-size:.98rem;letter-spacing:.04em;line-height:1.15;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kachel-cta .pille{
flex:0 0 auto;min-width:104px;text-align:center;white-space:nowrap;
padding:9px 14px;font-size:.86rem;line-height:1.1;
}
@media(max-width:1080px){
.kachel-cta span:first-child{white-space:normal;font-size:.9rem}
}
/* Über- und Teamseite: Struktur statt leerer Fläche */
.inhalt h1{margin-bottom:26px}
.ueber-gitter{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:38px}
/* Drei nebeneinander, unter dem Portraet */
.ueber-gitter--drei{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
@media(max-width:1000px){.ueber-gitter--drei{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.ueber-gitter--drei{grid-template-columns:1fr}}
@media(max-width:860px){.ueber-gitter{grid-template-columns:1fr}}
.wertfeld{
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
border-radius:5px;padding:26px 28px;
}
.wertfeld h3{color:#fff;font-size:1.3rem;margin-bottom:10px}
.wertfeld p{color:#B6CBD3;font-size:.98rem;margin:0}
.wertfeld .nr{
font-family:Barlow,sans-serif;font-weight:700;color:var(--koralle);
font-size:.9rem;letter-spacing:.1em;display:block;margin-bottom:8px;
}
.zahlband{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:34px 0 6px;
border-top:2px solid rgba(255,255,255,.14);border-bottom:2px solid rgba(255,255,255,.14);
padding:26px 0;
}
@media(max-width:700px){.zahlband{grid-template-columns:1fr;gap:16px}}
.zahlband b{
display:block;font-family:Barlow,sans-serif;font-weight:700;
font-size:2.2rem;color:#fff;line-height:1;
}
.zahlband span{color:#8FA8B3;font-size:.95rem}
/* ============ Seitenköpfe mit Foto ============ */
.hero--foto{
position:relative;background:var(--petrol);padding:0;overflow:hidden;
min-height:min(78vh,640px);display:flex;align-items:center;
}
.hero--foto .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero--foto .schleier{
position:absolute;inset:0;
background:linear-gradient(95deg,rgba(7,34,47,.90) 0%,rgba(7,34,47,.72) 34%,rgba(20,124,144,.28) 66%,rgba(155,211,220,.10) 100%);
}
.hero--foto .wrap{position:relative;z-index:2;display:block;padding-top:76px;padding-bottom:76px}
.hero--foto .textblock{max-width:46ch}
.seitenkopf{position:relative;overflow:hidden;background:var(--petrol);min-height:340px;display:flex;align-items:flex-end}
.seitenkopf .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%}
.seitenkopf .schleier{
position:absolute;inset:0;
background:
linear-gradient(180deg,rgba(0,55,71,.14) 0%,rgba(0,55,71,.52) 52%,rgba(0,43,56,.95) 100%),
linear-gradient(90deg,rgba(0,43,56,0) 42%,rgba(0,43,56,.42) 72%,rgba(0,43,56,.55) 100%);
}
/* Text im rechten Raum, damit er dem Bildmotiv nicht im Weg steht.
Unter 860 px wieder über die volle Breite. */
.seitenkopf .wrap{
position:relative;z-index:2;padding-top:70px;padding-bottom:38px;
display:grid;grid-template-columns:1.15fr .85fr;column-gap:44px;
}
.seitenkopf .wrap > *{grid-column:2}
@media(max-width:860px){
.seitenkopf .wrap{grid-template-columns:1fr}
.seitenkopf .wrap > *{grid-column:1}
}
.seitenkopf h1{color:#fff;font-size:2.7rem;margin:0}
@media(max-width:900px){.seitenkopf h1{font-size:2.1rem}}
@media(max-width:520px){.seitenkopf h1{font-size:1.7rem}}
.seitenkopf .augenmerk-koralle{margin-bottom:12px}
.inhalt--nachkopf{padding-top:52px}
/* ============ Angebotsblock mit Glühbirnen ============ */
.karten-teil--foto{position:relative;overflow:hidden;background:linear-gradient(180deg,#00303E 0%,var(--petrol) 100%)}
.karten-teil--foto .bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;
}
.karten-teil--foto .schleier{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,55,71,.62) 0%,rgba(0,55,71,.86) 46%,rgba(0,55,71,.95) 100%);
}
.karten-teil--foto .wrap{position:relative;z-index:2}
/* ---------- Folgenliste des Podcasts ---------- */
.liste--folgen li{padding-top:14px;padding-bottom:14px}
.liste--folgen b{color:var(--petrol)}
.folge-meta{color:var(--karte-grau);font-size:.94rem}
.gast{color:var(--petrol-hell);font-weight:600}
/* ---------- Einwilligungsbanner ----------
Erscheint einmal pro Besucher. Beide Knöpfe sind gleich auffällig —
ein Banner, bei dem Zustimmen leichter fällt, ist unwirksam. */
.einwilligung{
position:fixed;left:0;right:0;bottom:0;z-index:200;
/* Hell auf dunkler Seite — der Banner soll sich abheben, nicht einfügen */
background:#FFFFFF;border-top:5px solid var(--koralle);
box-shadow:0 -18px 60px rgba(0,0,0,.55);
padding:26px 28px 28px;
/* fährt von unten hoch, wie auf der alten Seite */
transform:translateY(102%);
transition:transform .55s cubic-bezier(.16,.84,.36,1);
}
.einwilligung.sichtbar{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
.einwilligung{transition:none;transform:translateY(0)}
}
.einwilligung .wrap{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
@media(max-width:820px){.einwilligung .wrap{grid-template-columns:1fr;gap:20px}}
.einwilligung h2{color:var(--petrol);font-size:1.45rem;margin-bottom:10px}
.einwilligung p{color:#40565F;font-size:1.02rem;max-width:70ch;margin-bottom:6px}
.einwilligung a{color:#0B5F70;text-decoration:underline}
.einwilligung-links{margin-top:12px;font-size:.95rem}
.einwilligung-links a{color:#0B5F70;text-decoration:underline;white-space:nowrap}
.einwilligung-knoepfe{display:flex;gap:14px;flex-wrap:wrap}
.einwilligung-knoepfe button{
font-family:Barlow,sans-serif;font-weight:700;font-size:1.06rem;line-height:1.35;
padding:16px 30px;border-radius:5px;cursor:pointer;white-space:nowrap;
/* Beide Knöpfe gleich stark: Ablehnen muss genauso leicht sein wie Zustimmen */
background:var(--petrol);color:#fff;border:2px solid var(--petrol);
}
.einwilligung-knoepfe button:hover{background:#00506A;border-color:#00506A}
.einwilligung-knoepfe button:focus-visible{outline:3px solid var(--koralle);outline-offset:3px}
/* ---------- Rechtstexte: Zwischenüberschriften in Versalien ----------
Auf Annas Wunsch. Versalien nehmen dem Wort seine Umrissform und sind
für Menschen mit Legasthenie schwerer zu lesen — deshalb bewusst nur
hier, nie im Fließtext und nie in den Hauptüberschriften. Die Laufweite
federt einen Teil davon ab. */
.rechtstext h2{
text-transform:uppercase;letter-spacing:.06em;
font-size:1.35rem;line-height:1.3;margin-top:40px;
}
.rechtstext h3{text-transform:uppercase;letter-spacing:.05em;font-size:1.1rem}
/* ============ Wertfelder in verschiedenen Tönen ============ */
.wertfeld{border:none}
.wertfeld--a{background:linear-gradient(155deg,#147C90 0%,#0B5F70 100%)}
.wertfeld--b{background:linear-gradient(155deg,#4DB8CA 0%,#2A93A8 100%)}
.wertfeld--b h3,.wertfeld--b p{color:#04303D}
.wertfeld--b .nr{color:#8A2B22}
.wertfeld--c{background:linear-gradient(155deg,#FB7164 0%,#E0574B 100%)}
.wertfeld--c h3,.wertfeld--c p{color:#fff}
.wertfeld--c .nr{color:#5C1A14}
.wertfeld--d{background:#fff}
.wertfeld--d h3{color:var(--petrol)}
.wertfeld--d p{color:var(--karte-grau)}
.wertfeld--d .nr{color:var(--petrol-hell)}
.wertfeld--d a{color:var(--petrol-hell) !important;font-weight:600}
/* Zwei Porträts als Kopfbild */
.doppelkopf{position:relative;background:var(--petrol);overflow:hidden}
.doppelkopf .fotos{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.doppelkopf .fotos img{width:100%;height:100%;object-fit:cover}
.doppelkopf .fotos img:first-child{object-position:center 22%}
.doppelkopf .schleier{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,55,71,.55) 0%,rgba(0,55,71,.86) 55%,rgba(0,43,56,.97) 100%);
}
.doppelkopf .wrap{position:relative;z-index:2;padding:86px 28px;text-align:center}
.doppelkopf h1{color:#fff;margin:0 auto}
.doppelkopf .augenmerk-koralle{margin-bottom:12px}
.doppelkopf .unterzeile{color:#CFE2E8;max-width:52ch;margin:18px auto 0}
/* Brand Manual: Erweiterungsverlauf Petrol -> Lagune -> Flamingo, nur Störer/Infoboxen, 90° */
.kachel-cta,.karte-cta{
background:linear-gradient(90deg,#003747 0%,#4DB8CA 52%,#FB7164 100%) !important;
}
.knopf{background:#FB7164}
.knopf:hover{background:#E85C50}
/* Hibiskus als zweite Zusatzfarbe */
.wertfeld--h{background:linear-gradient(180deg,#D689CE 0%,#B96BB1 100%)}
.wertfeld--h h3,.wertfeld--h p{color:#3A1436}
.wertfeld--h .nr{color:#57204F}
/* Kopfbild ohne Text: nur das Bild, die Überschrift steht darunter im Inhalt */
/* Das Band nimmt das Verhaeltnis der Kopfbilder an. Dadurch beschneidet
der Browser nie vertikal — auf keiner Seite wird ein Kopf angeschnitten. */
/* Kein max-height. Die Deckelung staucht das Band auf hohen Fenstern
und dann beschneidet der Browser doch — bei Gesichtern genau das Kinn. */
.seitenkopf--bild{min-height:0;aspect-ratio:2400/980;display:block}
/* Hoeher, damit die ganze Gluehbirne samt Sockel ins Bild passt */
.seitenkopf--hoch{aspect-ratio:2400/1180}
/* Kopfbild mit einem Gesicht: hoeher und weiter oben angesetzt,
sonst wird die Stirn abgeschnitten. */
/* Das Band nimmt genau das Seitenverhaeltnis des Bildes an. Damit muss
der Browser nie vertikal beschneiden — das Gesicht bleibt bei jeder
Fensterbreite vollstaendig. */
/* Kein max-height: die Deckelung hat auf breiten Bildschirmen das Band
gestaucht, und dann hat der Browser doch vertikal beschnitten —
genau das Kinn. Ohne Deckelung gilt das Seitenverhaeltnis immer. */
.seitenkopf--portraet{min-height:0;aspect-ratio:2400/1067}
/* Zwei Gesichter brauchen mehr Hoehe als eines, sonst schneidet der
Browser eine von beiden an. */
.seitenkopf--beide{min-height:0;aspect-ratio:2000/1162}
.seitenkopf--beide .bg{object-position:center 50%}
.seitenkopf--portraet .bg{object-position:center 50%}
.seitenkopf--hoch .bg{object-position:center 46%}
.seitenkopf--bild .bg{position:absolute;inset:0;object-position:center 30%}
.seitenkopf--gross{min-height:min(58vh,430px)}
.seitenkopf--gross .bg{object-position:center 24%}
.seitenkopf .unterzeile{color:#CFE2E8;max-width:56ch;margin:18px 0 0}
/* ============ Doppelfeld: weiß neben Verlauf ============ */
.doppelfeld{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px}
@media(max-width:860px){.doppelfeld{grid-template-columns:1fr}}
.dfeld{padding:44px 42px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.dfeld--weiss{background:#fff;color:var(--petrol)}
.dfeld--verlauf{background:linear-gradient(180deg,#0B4B5F 0%,#003747 100%);color:#fff}
.dfeld img.ikon{width:132px;height:132px;margin:0 auto 26px}
.dfeld h3{font-size:1.22rem;line-height:1.32;margin-bottom:16px}
.dfeld--weiss h3{color:var(--petrol)}
.dfeld--verlauf h3{color:#fff}
.dfeld .koralle{color:var(--koralle);font-weight:700;text-transform:uppercase;
font-family:Barlow,sans-serif;letter-spacing:-.01em;font-size:1.05rem;margin-bottom:14px}
.dfeld p{color:var(--karte-grau);font-size:1rem;margin:0}
.dfeld--verlauf p{color:#C6DBE2}
.dfeld ul{list-style:none;padding:0;margin:0;color:#C6DBE2;font-size:1rem;line-height:1.85}
.fussnote{text-align:center;color:var(--koralle);font-size:.92rem;margin-top:16px}
.fussnote a{color:var(--koralle)}
/* ============ Rasterkästen mit Korallrand ============ */
.rasterfeld{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
@media(max-width:860px){.rasterfeld{grid-template-columns:1fr}}
.rkasten{
border:1px solid var(--koralle);background:rgba(255,255,255,.035);
padding:34px 30px;text-align:center;
}
.rkasten img{width:100px;height:100px;margin:0 auto 20px}
.rkasten h3{color:var(--koralle);font-size:1.2rem;margin-bottom:12px}
.rkasten p{color:#B6CBD3;font-size:1rem;margin:0}
.rkasten strong{color:#fff}
/* ============ Aufklapper (Fragen, Anlaufstellen) ============
... reines HTML, kein JavaScript.
Karten weiß auf Petrolgrund, Pfeil in Koralle.
---------------------------------------------------------- */
.aufklapp-gruppe{max-width:74ch;margin-top:34px;display:flex;flex-direction:column;gap:10px}
.aufklapp{background:#fff;color:var(--petrol);border-radius:4px;overflow:hidden}
.aufklapp>summary{
list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
padding:20px 24px;font-family:Barlow,sans-serif;font-weight:600;
font-size:clamp(1.02rem,1.9vw,1.16rem);line-height:1.35;color:var(--petrol);
}
.aufklapp>summary::-webkit-details-marker{display:none}
.aufklapp>summary::after{
content:"";flex:0 0 auto;margin-left:auto;margin-top:.34em;
width:11px;height:11px;border-right:2.5px solid var(--koralle);
border-bottom:2.5px solid var(--koralle);transform:rotate(45deg);
transition:transform .18s ease;
}
.aufklapp[open]>summary::after{transform:rotate(-135deg)}
.aufklapp>summary:hover{background:#F2F6F8}
.aufklapp>summary:focus-visible{outline:3px solid var(--koralle);outline-offset:-3px}
.aufklapp-inhalt{padding:2px 24px 24px;border-top:1px solid var(--linie)}
.aufklapp-inhalt p{color:var(--karte-grau);margin:14px 0 0;line-height:1.6}
.aufklapp-inhalt p:first-child{margin-top:16px}
.aufklapp-inhalt b,.aufklapp-inhalt strong{color:var(--petrol)}
.aufklapp-inhalt a{color:var(--petrol-hell);text-decoration:underline;text-underline-offset:2px}
.aufklapp-inhalt a:hover{color:var(--koralle)}
.aufklapp-inhalt ul{list-style:none;margin:14px 0 0;padding:0}
.aufklapp-inhalt li{
position:relative;padding-left:20px;margin-bottom:9px;color:var(--karte-grau);line-height:1.55;
}
.aufklapp-inhalt li::before{
content:"";position:absolute;left:1px;top:.6em;width:6px;height:6px;
border-radius:50%;background:var(--koralle);
}
.aufklapp-inhalt li b{color:var(--petrol)}
/* Glossar: Begriff und Erklärung, weiße Karten untereinander */
.begriffe{max-width:74ch;margin-top:34px;display:flex;flex-direction:column;gap:16px}
.begriff{background:#fff;color:var(--petrol);border-radius:4px;padding:28px 30px}
.begriff h3{font-size:clamp(1.3rem,2.6vw,1.6rem);margin:0 0 4px;color:var(--petrol)}
.begriff .auch{
color:var(--koralle);font-family:"Barlow Semi Condensed",sans-serif;
font-size:.95rem;margin:0 0 12px;
}
.begriff p{color:var(--karte-grau);line-height:1.6;margin:0 0 12px}
.begriff p:last-child{margin-bottom:0}
.begriff b,.begriff strong{color:var(--petrol)}
.begriff ul{list-style:none;margin:12px 0 0;padding:0}
.begriff li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--karte-grau)}
.begriff li::before{
content:"";position:absolute;left:1px;top:.6em;width:6px;height:6px;
border-radius:50%;background:var(--koralle);
}
/* Sprungmarken-Leiste (A–Z bzw. Bundesländer) */
.sprungleiste{
display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;max-width:74ch;
}
.sprungleiste a{
display:inline-block;padding:7px 15px;border:1px solid rgba(255,255,255,.28);
border-radius:999px;color:#D8E5EA;font-family:"Barlow Semi Condensed",sans-serif;
font-size:.95rem;text-decoration:none;transition:.15s;
}
.sprungleiste a:hover{background:var(--koralle);border-color:var(--koralle);color:#fff}
/* ============ Menüknopf fürs Handy ============
Reines CSS über eine versteckte Checkbox — kein JavaScript.
Ab 900 px Breite ist der Knopf unsichtbar und das Menü immer offen.
-------------------------------------------------------------- */
.menu-schalter{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.menu-knopf{display:none}
@media(max-width:900px){
.menu-knopf{
display:flex;align-items:center;gap:10px;cursor:pointer;
padding:9px 15px;border:1px solid rgba(255,255,255,.3);border-radius:999px;
color:#E3EDF1;font-family:"Barlow Semi Condensed",sans-serif;
font-size:1rem;letter-spacing:.02em;user-select:none;
}
.menu-knopf .balken{
position:relative;display:block;width:19px;height:2px;background:currentColor;
}
.menu-knopf .balken::before,.menu-knopf .balken::after{
content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor;
transition:transform .18s ease,top .18s ease;
}
.menu-knopf .balken::before{top:-6px}
.menu-knopf .balken::after{top:6px}
.navlinks{display:none}
.menu-schalter:checked ~ .navlinks{display:flex}
.menu-schalter:checked ~ .menu-knopf{background:var(--koralle);border-color:var(--koralle);color:#fff}
.menu-schalter:checked ~ .menu-knopf .balken{background:transparent}
.menu-schalter:checked ~ .menu-knopf .balken::before{top:0;transform:rotate(45deg)}
.menu-schalter:checked ~ .menu-knopf .balken::after{top:0;transform:rotate(-45deg)}
.menu-schalter:focus-visible ~ .menu-knopf{outline:3px solid var(--koralle);outline-offset:3px}
.navlinks{padding-top:18px;border-top:1px solid rgba(255,255,255,.14);margin-top:14px}
.navlinks .knopf{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
.menu-knopf .balken::before,.menu-knopf .balken::after{transition:none}
}
/* Zähler im Aufklapper (Anzahl Stellen je Bundesland) */
.aufklapp>summary .anzahl{
display:inline-flex;align-items:center;justify-content:center;
min-width:24px;height:24px;padding:0 7px;margin-left:12px;
border-radius:999px;background:rgba(0,55,71,.09);color:var(--petrol);
font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;font-size:.86rem;
}
/* Untertitel in den Angebotskarten — gleiche Anmutung wie im Doppelfeld */
.feld .koralle{
color:var(--koralle);font-weight:700;text-transform:uppercase;
letter-spacing:.06em;font-size:.78rem;margin:-4px 0 10px;
}
/* ============ Die drei Stufen: ASK15 / DEEP15 / COACH15 ============ */
.stufen-teil{background:var(--navy-tief);padding:78px 0 84px}
.stufen{
display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
align-items:stretch;gap:0;margin-top:44px;
}
.stufe{
background:#fff;color:var(--petrol);border-radius:4px;padding:32px 30px;
display:flex;flex-direction:column;text-align:center;
}
.stufe--mitte{background:linear-gradient(160deg,var(--petrol) 0%,#2E6E82 100%);color:#fff}
.stufe--letzte{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.stufe .code{
font-family:Barlow,sans-serif;font-weight:700;letter-spacing:-.01em;
font-size:clamp(1.5rem,3vw,1.95rem);line-height:1.1;margin:0 0 6px;
}
.stufe .spruch{
color:var(--koralle);font-family:Barlow,sans-serif;font-weight:700;
font-size:1.02rem;margin:0 0 16px;
}
.stufe--mitte .spruch{color:#FFB3AA}
.stufe p.was{font-size:.98rem;line-height:1.5;color:var(--karte-grau);margin:0}
.stufe--mitte p.was{color:#D8EAF0}
.stufe--letzte p.was{color:#C6D6DC}
.stufe .fuell{flex:1}
.stufe .preisband{
margin-top:18px;padding-top:14px;border-top:1px solid var(--linie);
font-family:Barlow,sans-serif;font-weight:700;font-size:1.05rem;
}
.stufe--mitte .preisband,.stufe--letzte .preisband{border-top-color:rgba(255,255,255,.22)}
.stufen-pfeil{
display:flex;align-items:center;justify-content:center;width:54px;color:var(--koralle);
}
.stufen-pfeil svg{width:26px;height:26px}
@media(max-width:900px){
.stufen{grid-template-columns:1fr;gap:0}
.stufen-pfeil{width:auto;height:44px;transform:rotate(90deg)}
}
/* ============ Newsletter-Formular ============
Schlichtes HTML-Formular. Beim Absenden geht genau eine Anfrage an HubSpot.
Kein fremdes Script, kein reCAPTCHA, keine Cookies.
------------------------------------------------------------------ */
.anmeldung{max-width:34rem;margin-top:22px}
.anmeldung .zeile{display:flex;gap:12px;flex-wrap:wrap}
.anmeldung label{
display:block;font-family:"Barlow Semi Condensed",sans-serif;font-size:.84rem;
letter-spacing:.08em;text-transform:uppercase;color:var(--text-grau);margin-bottom:6px;
}
.anmeldung input{
width:100%;font-family:"Barlow Semi Condensed",sans-serif;font-size:1.05rem;
padding:12px 14px;border:1px solid rgba(255,255,255,.22);border-radius:5px;
background:#fff;color:var(--petrol);
}
.anmeldung input:focus-visible{outline:3px solid var(--koralle);outline-offset:2px}
.anmeldung .feld{flex:1 1 190px;min-width:0}
.anmeldung .knopf{border:0;cursor:pointer;font-size:1.05rem;margin-top:18px}
.anmeldung .knopf[disabled]{opacity:.55;cursor:default}
.anmeldung .zustimmung{
display:flex;gap:11px;align-items:flex-start;margin-top:18px;
font-size:.95rem;color:#C6D6DC;line-height:1.5;
}
.anmeldung .zustimmung input{width:18px;height:18px;flex:0 0 auto;margin-top:3px;padding:0}
.anmeldung .zustimmung a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.anmeldung .meldung{margin-top:16px;padding:14px 18px;border-radius:4px;display:none;font-size:1rem}
.anmeldung .meldung.an{display:block}
.anmeldung .meldung.gut{background:rgba(77,184,202,.16);border-left:4px solid var(--cyan);color:#DCF1F5}
.anmeldung .meldung.schlecht{background:rgba(251,113,100,.16);border-left:4px solid var(--koralle);color:#F8D5D1}
.anmeldung select{
width:100%;font-family:"Barlow Semi Condensed",sans-serif;font-size:1.05rem;
padding:12px 14px;border:1px solid rgba(255,255,255,.22);border-radius:5px;
background:#fff;color:var(--petrol);appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23003747' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
padding-right:38px;
}
.anmeldung select:focus-visible{outline:3px solid var(--koralle);outline-offset:2px}
/* ---------- Cookie-Tabelle im Datenschutz ---------- */
.cookietabelle{width:100%;border-collapse:collapse;margin:20px 0 24px;font-size:.97rem}
.cookietabelle th,.cookietabelle td{
text-align:left;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.16);vertical-align:top;
}
.cookietabelle th{font-family:Barlow,sans-serif;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;font-size:.9rem;color:var(--cyan)}
.cookietabelle code{background:rgba(255,255,255,.10);padding:2px 6px;border-radius:3px}
@media(max-width:700px){
.cookietabelle,.cookietabelle tbody,.cookietabelle tr,.cookietabelle td{display:block;width:100%}
.cookietabelle thead{display:none}
.cookietabelle td{border-bottom:none;padding:4px 0}
.cookietabelle tr{border-bottom:1px solid rgba(255,255,255,.16);padding:12px 0}
}
/* ---------- Gruppenauswahl im Einwilligungsfenster ---------- */
.vislos{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.einwilligung-gruppen{border:none;margin:16px 0 4px;padding:0;display:grid;gap:10px}
.einwilligung .gruppe{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
color:#40565F;font-size:.98rem;line-height:1.45}
.einwilligung .gruppe b{color:var(--petrol)}
.einwilligung .gruppe small{display:block;color:#6B7F89;font-size:.9rem}
.einwilligung .gruppe input{width:22px;height:22px;flex:0 0 22px;margin-top:2px;
accent-color:var(--petrol);cursor:pointer}
.einwilligung .gruppe--fest,.einwilligung .gruppe--ruht{cursor:default;color:#6B7F89}
.einwilligung .gruppe--fest input,.einwilligung .gruppe--ruht input{cursor:default}
.einwilligung .wrap{align-items:start}
.einwilligung-knoepfe{flex-direction:column}
@media(max-width:820px){.einwilligung-knoepfe{flex-direction:row}}
/* Vorbereitete Dienste im Datenschutz sichtbar abgrenzen */
.geplant-hinweis{border-left:4px solid var(--cyan);padding:14px 18px;background:rgba(77,184,202,.10);
border-radius:0 4px 4px 0;margin:24px 0 12px}
.cookietabelle small{color:var(--text-grau);font-weight:400}