/* ==========================================================================
Stars Media — gemeinsames Stylesheet fuer Website und Unterseiten
Stand 21.07.2026. Aus website-test-v7.html herausgeloest, damit die fuenf
SEO-Seiten dieselbe Optik teilen und nicht kopiert werden muessen.
Schriften: Jost (Ueberschriften) + Inter (alles andere), selbst gehostet.
Keine Monospace mehr — las sich nach Entwicklerwerkzeug, falsche Tonlage
fuer eine aerztliche Zielgruppe.
========================================================================== */
@font-face { font-family:'Inter'; font-weight:100 900; font-display:swap; src:url('../assets/fonts/inter-var.woff2') format('woff2'); }
:root{
--papier:#ffffff; --dunst:#f3f7f7;
--wash-1:#e9f2f2; --wash-2:#d8e8ea; --wash-3:#c4dbdd;
--tief:#0b2226; --tief-2:#10323a;
/* v8.2 — --ink-mute war #8b979b und lag damit auf Weiss bei 3,0:1, auf den
hellen Karten sogar bei 2,5:1. Betroffen war fast jede Kleinschrift:
Zaehlerbeschriftung, Kartenfuss, Fusszeile, Kontaktlabels, Formularhinweis.
#5b696d liegt auf Weiss bei 5,7:1 und auf der hellsten Karte bei 4,8:1,
also ueberall ueber AA — und bleibt optisch trotzdem zurueckgenommen. */
--ink:#101719; --ink-soft:#4b585c; --ink-mute:#5b696d;
--hell:#eaf2f3; --hell-2:#9bb0b4;
--linie:#e3eaea; --linie-stark:#ccd9da;
--accent:#1f6b62; --accent-hell:#2f9b8d; --accent-tief:#14524a;
--funke:#d2705c;
--jost:'Jost',-apple-system,'Segoe UI',sans-serif;
--inter:'Inter',-apple-system,sans-serif;
--breit:1320px; --lese:600px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
margin:0; background:var(--papier); color:var(--ink);
font-family:var(--inter); font-size:clamp(15px,1.15vw,16.5px); line-height:1.6;
-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.seite{ max-width:var(--breit); margin:0 auto; padding:0 22px; }
@media (min-width:900px){ .seite{ padding:0 44px; } }
/* --- Schrift-Bausteine (nur Jost + Inter) -------------------------------- */
.riese{ font-family:var(--jost); font-weight:300; font-size:clamp(40px,6.2vw,88px); line-height:1.02; letter-spacing:-.022em; margin:0; max-width:14ch; }
.riese b{ font-weight:500; }
.riese em{ font-style:normal; color:var(--accent); }
.gross{ font-family:var(--jost); font-weight:300; font-size:clamp(28px,4.1vw,56px); line-height:1.06; letter-spacing:-.018em; margin:0; }
.gross b{ font-weight:500; }
.lead{ font-size:clamp(16px,1.35vw,18.5px); line-height:1.6; color:var(--ink-soft); max-width:var(--lese); margin:22px 0 0; }
/* Beschriftungen: Inter, gesperrt, in Versalien — ruhig statt technisch */
.label{
font-family:var(--inter); font-size:11px; font-weight:600;
letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 18px;
}
.notiz{ font-size:12.5px; line-height:1.7; color:var(--ink-mute); }
/* --- Bewegung: gemeinsame Grundregeln ------------------------------------ */
.auf{ opacity:0; transform:translateY(20px) scale(.99); filter:blur(6px); }
.auf.da{
opacity:1; transform:none; filter:none;
transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1), filter .75s ease;
}
.auf.da.v2{ transition-delay:.08s; } .auf.da.v3{ transition-delay:.16s; }
.auf.da.v4{ transition-delay:.24s; } .auf.da.v5{ transition-delay:.32s; }
/* Sprung zum Inhalt — fuer Tastatur und Vorlesewerkzeuge */
.sprung{
position:absolute; left:12px; top:-60px; z-index:60;
background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 8px 8px;
font-size:14px; font-weight:600; text-decoration:none; transition:top .2s;
}
.sprung:focus{ top:0; }
/* --- Nav ----------------------------------------------------------------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:40; padding:14px 0; transition:background .4s, box-shadow .4s, padding .4s; }
.nav.fest{ background:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(1.5); box-shadow:0 1px 0 var(--linie); padding:8px 0; }
.nav-in{ max-width:var(--breit); margin:0 auto; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
@media (min-width:900px){ .nav-in{ padding:0 44px; } }
.wort{ font-family:var(--jost); font-weight:500; font-size:16px; letter-spacing:.01em; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; }
.wort i{ width:9px; height:9px; border-radius:50%; background:linear-gradient(140deg,var(--accent-hell),var(--accent-tief)); }
/* Unter 960px gab es gar keine Navigation — kein Menue, kein Ersatz.
Jetzt: Klappmenue ueber einen Schalter, ohne JavaScript-Zwang
(der Schalter ist eine Checkbox, das Menue haengt an :checked). */
.menue{ display:none; gap:6px; }
@media (min-width:960px){ .menue{ display:flex; } }
.menue-schalter{ position:absolute; opacity:0; pointer-events:none; }
.menue-knopf{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
width:44px; height:44px; border:1px solid var(--linie-stark); border-radius:100px;
background:rgba(255,255,255,.8); cursor:pointer; flex-direction:column; padding:0;
}
@media (min-width:960px){ .menue-knopf{ display:none; } }
.menue-knopf s{ display:block; width:17px; height:1.5px; background:var(--ink); text-decoration:none; transition:transform .25s, opacity .2s; }
.menue-schalter:checked ~ .nav-in .menue-knopf s:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.menue-schalter:checked ~ .nav-in .menue-knopf s:nth-child(2){ opacity:0; }
.menue-schalter:checked ~ .nav-in .menue-knopf s:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg); }
.schublade{
position:fixed; inset:64px 0 auto; z-index:39;
background:rgba(255,255,255,.97); backdrop-filter:blur(16px);
border-bottom:1px solid var(--linie);
display:grid; gap:2px; padding:14px 22px 20px;
clip-path:inset(0 0 100% 0); transition:clip-path .38s cubic-bezier(.7,0,.2,1), visibility .38s;
/* v8.1 — geschlossen auch fuer Tastatur und Screenreader weg. Vorher war die
Schublade nur abgeschnitten: sieben Links lagen unsichtbar im Tab-Weg. */
visibility:hidden;
}
.menue-schalter:checked ~ .schublade{ clip-path:inset(0 0 0 0); visibility:visible; }
@media (min-width:960px){ .schublade{ display:none; } }
.schublade a{ font-family:var(--jost); font-weight:500; font-size:19px; color:var(--ink); text-decoration:none; padding:12px 0; border-bottom:1px solid var(--linie); }
.schublade a:last-child{ border-bottom:0; }
/* v8.1 — .nav-in ist kein Geschwister der Checkbox, sondern ein Kind von
header.nav; der Fokusring erschien deshalb nie. */
.menue-schalter:focus-visible ~ .nav .nav-in .menue-knopf{ outline:2px solid var(--accent); outline-offset:3px; }
.menue a{ font-size:14px; color:var(--ink-soft); text-decoration:none; padding:9px 15px; border-radius:100px; }
.menue a:hover{ background:rgba(31,107,98,.08); color:var(--accent-tief); }
.knopf-voll{
display:inline-flex; align-items:center; gap:10px;
font-size:15px; font-weight:600; color:#fff; text-decoration:none;
background:linear-gradient(135deg,var(--accent-hell),var(--accent-tief));
border-radius:100px; padding:15px 27px; box-shadow:0 12px 30px rgba(31,107,98,.24);
transition:filter .25s, transform .25s;
}
.knopf-voll:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.nav .knopf-voll{ font-size:13.5px; padding:11px 20px; }
.knopf-leer{
display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600;
color:var(--ink); text-decoration:none; background:rgba(255,255,255,.7);
border:1px solid var(--linie-stark); border-radius:100px; padding:14px 24px; transition:border-color .25s,color .25s;
}
.knopf-leer:hover{ border-color:var(--accent); color:var(--accent-tief); }
/* --- Hero: klebende Buehne, Punkte am Scroll ----------------------------- */
/* Die klebende Buehne gibt es NUR ab 1040px. Darunter war der Hero kaputt:
der Inhalt (1.603 px) stand in einem 844 px hohen, nicht scrollenden
Kasten mit overflow:hidden — die Suchkarte, also das Herzstueck, lag
unerreichbar unterhalb der Kante. Am Handy laeuft der Hero deshalb
normal mit und waechst mit seinem Inhalt. */
.buehne{ position:relative; }
.klebe{
overflow:hidden; display:flex; align-items:center;
padding:104px 0 64px;
background:
radial-gradient(1000px 620px at 76% 6%, #fff 0%, rgba(255,255,255,0) 58%),
radial-gradient(900px 720px at 88% 46%, var(--wash-3) 0%, rgba(196,219,221,0) 62%),
linear-gradient(168deg, var(--wash-1) 0%, var(--dunst) 44%, #fff 88%);
}
/* Patientensicht: neutrales Suchfenster, kein Google-Nachbau */
/* v8.2 — Die Zaehlerreihe ist aus der Textspalte herausgeloest und ein eigenes
Gitterkind geworden. Grund: am Handy standen die drei Zahlen untereinander
und schoben die Such-Karte — das einzige Bild, das das Problem zeigt — auf
Position 1.150 px, also zweimal Wischen unter den Falz. Jetzt lautet die
Reihenfolge am Handy Text → Karte → Zahlen; am Desktop bleibt das Bild
unveraendert (Text oben links, Zahlen darunter, Karte rechts ueber beide
Zeilen). */
.hero-gitter{ display:grid; gap:36px; align-items:center; width:100%; }
@media (min-width:1040px){
.hero-gitter{ grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:40px 48px; }
.hero-text{ grid-column:1; grid-row:1; }
.sucher{ grid-column:2; grid-row:1 / span 2; align-self:center; }
.zaehler-reihe{ grid-column:1; grid-row:2; }
}
.sucher{
background:rgba(255,255,255,.86); backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.9); border-radius:24px;
box-shadow:0 26px 70px rgba(11,34,38,.13); padding:18px; max-width:520px;
}
/* v8.2 — kein eigener Abstand mehr noetig, der Gitterabstand macht das jetzt. */
.sucher-kopf{
display:flex; align-items:center; gap:12px;
background:#fff; border:1px solid var(--linie-stark); border-radius:100px; padding:13px 18px;
}
.sucher-kopf .lupe{ width:15px; height:15px; border:1.6px solid var(--ink-mute); border-radius:50%; position:relative; flex:none; }
.sucher-kopf .lupe::after{ content:''; position:absolute; right:-5px; bottom:-4px; width:7px; height:1.6px; background:var(--ink-mute); transform:rotate(45deg); }
.sucher-kopf .eingabe{ font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; }
.sucher-kopf .strich{ display:inline-block; width:1.5px; height:17px; background:var(--accent); vertical-align:-3px; margin-left:2px; animation:blinken 1.1s step-end infinite; }
@keyframes blinken{ 50%{ opacity:0; } }
.sucher-liste{ padding:6px 4px 2px; }
.treffer-zeile{
padding:15px 12px; border-bottom:1px solid var(--linie);
opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease;
}
.treffer-zeile.da{ opacity:1; transform:none; }
.treffer-zeile:last-child{ border-bottom:0; }
.treffer-zeile .anzeige{
display:inline-block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color:var(--ink); border:1px solid var(--linie-stark); border-radius:4px; padding:1px 6px; margin-right:8px;
}
.treffer-zeile .pfad{ font-size:12px; color:var(--ink-mute); }
.treffer-zeile .titel{ font-size:16px; color:#1a4fa0; margin:4px 0 3px; }
.treffer-zeile .text{ font-size:13px; color:var(--ink-soft); margin:0; }
/* Die eigene Praxis: nicht gefunden */
.treffer-zeile.selbst{
background:linear-gradient(120deg, rgba(210,112,92,.09), rgba(210,112,92,.03));
border:1px dashed rgba(210,112,92,.45); border-radius:14px; margin-top:10px;
}
.treffer-zeile.selbst .titel{ color:var(--ink); opacity:.45; }
.treffer-zeile.selbst .text{ color:#a8523f; font-weight:600; }
/* v8.1 — Zwei Korrekturen an der klebenden Buehne:
a) `padding:0` hat der fest stehenden Kopfleiste (72 px) keinen Platz
gelassen. In einem flachen Fenster rutschte die obere Zeile des Heros
— die Marke „Marketing fuer Zahnarztpraxen · Oesterreich“ — unter die
Leiste und lag genau ueber dem Logo. Deshalb bleibt oben Platz stehen;
`align-items:center` zentriert dann innerhalb des freien Raums.
b) Die Buehne klebt nur noch, wenn das Fenster hoch genug ist. Der
Hero-Inhalt misst 763 px (1440 breit) bzw. 840 px (1100 breit); mit
Kopfleiste und Luft braucht er rund 900 px. In flacheren Fenstern
waechst der Hero jetzt normal mit, statt oben und unten abgeschnitten
zu werden — `overflow:hidden` haette den Rest sonst verschluckt. */
@media (min-width:1040px) and (min-height:820px){
/* v8.2 — 200vh waren 2.000 px Scrollweg, bevor der zweite Abschnitt kam.
Seit das Tippen ohnehin an der Uhr anlaeuft (siehe website.js), braucht
der Aufbau diesen Weg nicht mehr; 150vh halten die ruhige Buehne, ohne
den Besucher so lange festzuhalten. */
.buehne{ height:150vh; } /* Scrollweg fuer den Aufbau */
.klebe{ position:sticky; top:0; height:100vh; height:100svh; padding:96px 0 48px; }
}
/* Flache Notebook-Fenster: derselbe Hero, nur enger gesetzt, damit er in die
Hoehe passt statt oben unter der Kopfleiste zu verschwinden. */
@media (min-width:1040px) and (max-height:1000px){
.klebe .riese{ font-size:clamp(34px,4.1vw,58px); }
.klebe .hero-tag{ margin-bottom:16px; }
.klebe .lead{ margin-top:16px; font-size:16px; }
.klebe .hero-reihe{ margin-top:22px; }
.klebe .zaehler-reihe{ padding-top:18px; gap:20px 40px; }
.klebe .zaehler b{ font-size:clamp(26px,2.5vw,34px); }
.klebe .zaehler span{ margin-top:6px; }
.klebe .treffer-zeile{ padding:11px 12px; }
.klebe .sucher{ padding:14px; }
}
.hero-inhalt{ position:relative; z-index:2; width:100%; }
.hero-tag{
display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--accent-tief);
background:rgba(255,255,255,.72); border:1px solid rgba(31,107,98,.16);
border-radius:100px; padding:8px 16px; margin-bottom:26px;
}
.hero-tag s{ width:6px; height:6px; border-radius:50%; background:var(--accent-hell); text-decoration:none; }
.hero-reihe{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:34px; }
/* Zaehler im Hero */
.zaehler-reihe{ display:flex; flex-wrap:wrap; gap:28px 52px; margin-top:0; padding-top:26px; border-top:1px solid var(--linie-stark); max-width:820px; }
.zaehler b{ display:block; font-family:var(--jost); font-weight:300; font-size:clamp(30px,3.4vw,46px); line-height:1; letter-spacing:-.02em; }
.zaehler span{ display:block; font-size:12px; letter-spacing:.05em; color:var(--ink-mute); margin-top:10px; max-width:22ch; }
.zaehler.markiert b{ color:var(--funke); }
.rollhinweis{
position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
font-size:10.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute);
animation:sinken 2.4s ease-in-out infinite;
}
@keyframes sinken{ 0%,100%{ transform:translate(-50%,0); opacity:.35; } 50%{ transform:translate(-50%,6px); opacity:.9; } }
/* --- Bahn: seitlich scrollende Leistungen -------------------------------- */
.bahn-kopf{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.bahn-hinweis{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin:0; }
.bahn{
display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
padding:40px 22px 20px; margin-top:8px; scrollbar-width:none;
}
.bahn::-webkit-scrollbar{ display:none; }
@media (min-width:900px){ .bahn{ padding:44px calc((100vw - var(--breit))/2 + 44px) 24px; } }
.karte{
scroll-snap-align:start; flex:0 0 300px; min-height:330px;
background:var(--dunst); border:1px solid var(--linie); border-radius:22px;
padding:30px 26px; display:flex; flex-direction:column;
transition:transform .3s ease, box-shadow .3s ease, border-color .3s;
}
/* v8.1 — Kartenbreite mitwachsend statt fest 344 px. Bei 1440 px begann die
fuenfte Karte („Was wir nicht machen“) exakt bei x=1440, lag also vollstaendig
ausserhalb; niemand ahnte, dass sie existiert. Mitwachsend schaut sie auf
jeder Breite ein Stueck herein — genau das Signal, das eine Bahn braucht. */
/* Vier Karten sollen auf breiten Schirmen vollstaendig ins Bild passen:
Inhaltsspalte 1320 minus 88 Innenabstand = 1232 nutzbar, minus drei
Luecken zu 16 = 1184 fuer vier Karten, also hoechstens 296 je Karte. */
@media (min-width:700px){ .karte{ flex-basis:clamp(268px, 20vw, 292px); } }
.karte:hover{ transform:translateY(-5px); box-shadow:0 20px 46px rgba(11,34,38,.10); border-color:var(--linie-stark); }
.karte.hell{ background:linear-gradient(165deg,#fff 0%, var(--wash-1) 55%, var(--wash-2) 100%); border-color:rgba(31,107,98,.2); }
.karte .nr{ font-family:var(--jost); font-weight:200; font-size:54px; line-height:1; color:var(--ink); }
.karte.hell .nr{ color:var(--accent); }
.karte h3{ font-family:var(--jost); font-weight:500; font-size:20px; margin:24px 0 10px; }
.karte p{ margin:0; font-size:14px; color:var(--ink-soft); }
.karte .fuellt{ flex:1; }
.karte .weg{ font-size:11.5px; letter-spacing:.04em; color:var(--ink-mute); border-top:1px solid var(--linie-stark); padding-top:14px; margin-top:18px; }
.karte .weg b{ color:var(--ink); font-weight:600; }
/* --- Band: oeffnet sich aus der Mitte ------------------------------------ */
.band-huelle{ padding:0 0 0; }
.band{
background:linear-gradient(165deg,var(--tief) 0%, #0a1c20 62%, #16414a 100%);
color:var(--hell); padding:96px 0 0; position:relative; overflow:hidden;
clip-path:inset(0 26% round 30px);
transition:clip-path 1.1s cubic-bezier(.66,0,.24,1);
}
.band.offen{ clip-path:inset(0 0 round 0); }
.band::after{ content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(760px 460px at 84% 8%, rgba(47,155,141,.28), transparent 64%); }
.band > *{ position:relative; z-index:1; }
.band .gross{ color:#fff; }
.band .lead{ color:var(--hell-2); }
.band .label{ color:rgba(155,176,180,.85); }
/* v9 — Regionsreiter über der Erhebung. Bewusst anders als der
Behandlungs-Umschalter darunter: das hier wechselt den ganzen Abschnitt
(Überschrift, Zahlen, Karte, Methodenhinweis), nicht nur eine Einfärbung.
Deshalb Unterstrich statt Pille — die Form sagt „Reiter", nicht „Filter". */
.regionen{ display:flex; flex-wrap:wrap; gap:4px; margin:0 0 26px; }
.regionen button{
font-family:var(--inter); font-size:13.5px; font-weight:600; letter-spacing:.02em;
color:var(--hell-2); background:none; border:0; border-bottom:2px solid transparent;
padding:9px 2px; margin-right:22px; cursor:pointer;
transition:color .25s, border-color .25s;
}
.regionen button:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.28); }
.regionen button[aria-pressed="true"]{ color:#fff; border-bottom-color:var(--funke); }
.regionen button:focus-visible{ outline:2px solid var(--accent-hell); outline-offset:3px; }
.schalter{ display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; }
.schalter button{
font-family:var(--inter); font-size:12.5px; font-weight:600; letter-spacing:.02em;
color:var(--hell-2); background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.13); border-radius:100px; padding:10px 17px; cursor:pointer;
transition:background .25s, color .25s, border-color .25s;
}
.schalter button:hover{ color:#fff; border-color:rgba(255,255,255,.32); }
.schalter button[aria-pressed="true"]{ background:linear-gradient(135deg,var(--funke),#b8543f); border-color:transparent; color:#fff; }
/* v8.1 — Vorsatz ueber den Kennwerten: sagt, worauf sich die Zahlen beziehen. */
.kennwerte-vorsatz{ font-size:14px; line-height:1.6; color:var(--hell-2); max-width:70ch; margin:30px 0 0; }
.kennwerte-vorsatz b{ color:#fff; font-weight:600; }
.kennwerte{ display:flex; flex-wrap:wrap; gap:26px 54px; margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.13); }
.kennwert b{ display:block; font-family:var(--jost); font-weight:300; font-size:clamp(32px,3.6vw,50px); line-height:1; color:#fff; }
.kennwert span{ display:block; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:rgba(155,176,180,.9); margin-top:12px; }
.kennwert.spitze b{ color:var(--funke); }
.karten-huelle{ position:relative; margin-top:30px; }
#karte{ display:block; width:100%; height:56vh; min-height:340px; max-height:620px; }
.karten-fuss{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; padding-bottom:30px; }
.suche{ position:relative; flex:1 1 240px; max-width:330px; }
.suche input{
width:100%; font-family:var(--inter); font-size:14px; color:#fff;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
border-radius:100px; padding:14px 20px; outline:none;
}
.suche input::placeholder{ color:rgba(155,176,180,.75); }
.suche input:focus{ border-color:var(--accent-hell); }
.treffer{
position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:5;
background:#0a1c20; border:1px solid rgba(255,255,255,.15); border-radius:18px;
max-height:240px; overflow:auto; display:none;
}
.treffer.auf-liste{ display:block; }
.treffer button{
display:flex; width:100%; justify-content:space-between; gap:12px; align-items:baseline;
background:none; border:0; border-bottom:1px solid rgba(255,255,255,.08);
font-family:var(--inter); font-size:13.5px; color:var(--hell); padding:12px 18px; text-align:left; cursor:pointer;
}
.treffer button:last-child{ border-bottom:0; }
.treffer button:hover{ background:rgba(255,255,255,.07); color:#fff; }
.treffer i{ font-style:normal; font-size:12px; color:rgba(155,176,180,.85); }
.legende{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:11.5px; letter-spacing:.04em; color:rgba(155,176,180,.9); }
.legende span{ display:inline-flex; align-items:center; gap:8px; }
.legende s{ width:8px; height:8px; border-radius:50%; text-decoration:none; }
.l-funke{ background:var(--funke); } .l-gedeckt{ background:var(--accent-hell); } .l-staub{ background:#6b7780; }
.ortsbefund{
position:absolute; left:0; bottom:12px; max-width:350px;
background:rgba(10,28,32,.94); border:1px solid rgba(255,255,255,.15); border-left:3px solid var(--funke);
border-radius:18px; padding:17px 20px; display:none;
}
.ortsbefund.auf-box{ display:block; }
.ortsbefund b{ display:block; font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:7px; }
.ortsbefund p{ margin:0; font-size:13.5px; color:var(--hell-2); line-height:1.5; }
.ortsbefund em{ font-style:normal; color:var(--funke); font-weight:600; }
/* v8.2 — Der Methodik-Absatz stand bei 3,45:1 und 12,5 px: ausgerechnet der
Text, der die Glaubwuerdigkeit der ganzen Erhebung traegt, war der am
schlechtesten lesbare der Seite. Jetzt 5,2:1 und eine Spur groesser. */
.band .notiz{ color:rgba(155,176,180,.85); font-size:13.5px; border-top:1px solid rgba(255,255,255,.1); padding:22px 0 90px; max-width:88ch; }
/* v9.1 — Kartenhinweis als Klappe. Der Methodentext ist wichtig, er traegt die
Glaubwuerdigkeit der Erhebung — aber mit rund 1.600 Zeichen offen unter der
Karte hat er den Abschnitt erschlagen. Jetzt eine Zeile, auf Klick der Rest.
Eigene Klassen sind noetig, weil weiter unten `details` und `summary` als
ELEMENTE gestylt sind (FAQ: 20 px Jost, Plus-Zeichen, Trennlinie, 22 px
Polsterung). Ohne Ueberschreiben saehe der kleine Hinweis aus wie eine
FAQ-Frage. Deshalb hier durchweg `.notiz-klapp >` davor. */
.band .notiz-block{ border-top:1px solid rgba(255,255,255,.1); padding:20px 0 90px; max-width:88ch; }
.notiz-klapp{ border-bottom:0; padding:0; }
.notiz-klapp > summary{ font-family:var(--inter); font-weight:500; font-size:13.5px;
color:rgba(155,176,180,.95); display:inline-flex; align-items:center; gap:9px;
justify-content:flex-start; padding:2px 0; }
.notiz-klapp > summary:hover{ color:#fff; }
/* Der Plus-Marker der FAQ wuerde hier rechts im Nichts stehen, weil die Zeile
nicht ueber die volle Breite geht. Stattdessen ein Zeichen direkt am Text. */
.notiz-klapp > summary::after{ content:'+'; font-size:15px; font-weight:400; margin-left:1px; }
.notiz-klapp[open] > summary::after{ content:'–'; }
.i-kreis{ flex:0 0 auto; width:15px; height:15px; border-radius:50%; border:1px solid currentColor;
display:inline-flex; align-items:center; justify-content:center;
font-style:normal; font-weight:600; font-size:10px; line-height:1; }
/* Innerhalb der Klappe traegt der Block schon Linie und Polsterung. */
.band .notiz-klapp .notiz{ border-top:0; padding:12px 0 0; }
.notiz-quelle{ margin:14px 0 0; font-size:12px; color:rgba(155,176,180,.7); }
/* --- Kontakt ------------------------------------------------------------- */
.kontakt-gitter{ display:grid; gap:34px; margin-top:44px; }
@media (min-width:900px){
.kontakt-gitter{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; }
/* v9.1 — Seit die Kontaktliste raus ist, steht nur noch das Formular im
Gitter. Zwei Spalten wuerden es in die linke Haelfte druecken und rechts
eine leere Spalte lassen. Ohne Gitter liefe es dafuer ueber die volle
Seitenbreite (bis 1320 px) — Eingabefelder in dieser Laenge sind muehsam
zu lesen und wirken wie ein Formularfehler.
Also: allein stehend eine begrenzte Spalte. :has() zaehlt selbst, damit
eine zweite Spalte spaeter ohne Nacharbeit wieder greift. */
.kontakt-gitter:not(:has(> :nth-child(2))){ grid-template-columns:minmax(0,64ch); }
}
.kontakt-liste{ display:grid; gap:2px; }
.kontakt-zeile{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--linie); }
.kontakt-zeile:first-child{ border-top:1px solid var(--linie-stark); }
.kontakt-zeile b{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); min-width:120px; }
.kontakt-zeile span, .kontakt-zeile a{ font-size:16px; color:var(--ink); text-decoration:none; }
.kontakt-zeile a:hover{ color:var(--accent-tief); text-decoration:underline; }
.formular{ background:var(--dunst); border:1px solid var(--linie); border-radius:22px; padding:28px 24px; }
@media (min-width:700px){ .formular{ padding:34px 30px; } }
.feld{ display:block; margin-bottom:16px; }
.feld span{ display:block; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-soft); margin-bottom:7px; }
.feld input, .feld textarea{
width:100%; font-family:var(--inter); font-size:15.5px; color:var(--ink);
background:#fff; border:1px solid var(--linie-stark); border-radius:12px;
padding:13px 15px; outline:none;
}
.feld textarea{ min-height:110px; resize:vertical; }
.feld input:focus, .feld textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,107,98,.12); }
.formular button{
font-family:var(--inter); font-size:15px; font-weight:600; color:#fff; cursor:pointer;
background:linear-gradient(135deg,var(--accent-hell),var(--accent-tief));
border:0; border-radius:100px; padding:15px 28px; width:100%;
}
.formular button:hover{ filter:brightness(1.08); }
.formular .hinweis{ font-size:12.5px; line-height:1.65; color:var(--ink-mute); margin:16px 0 0; }
/* --- Abschnitte ---------------------------------------------------------- */
section{ padding:96px 0; }
/* v9.1 — Zwei Abschnitte, die direkt aufeinanderfolgen, brachten 96 px unteres
und 96 px oberes Polster mit: 192 px Leere zwischen den Karten von 03 und der
Ueberschrift von 04, dasselbe zwischen 04 und 05. Das fiel vorher nicht auf,
weil dort eine Bildflaeche stand — seit die raus ist, stossen die Polster
aufeinander.
Der Abstand ist beabsichtigt, nur doppelt: Das obere Polster des zweiten
Abschnitts wird deshalb halbiert, zusammen 144 px. Nur bei direkter
Nachbarschaft — steht ein Band oder eine Bahn dazwischen, bleibt es bei 96. */
section + section{ padding-top:48px; }
@media (min-width:900px){ section{ padding:124px 0; } }
.bildplatz{
position:relative; border:1px dashed var(--linie-stark); border-radius:24px;
background:repeating-linear-gradient(135deg, rgba(31,107,98,.035) 0 12px, rgba(31,107,98,0) 12px 24px),
linear-gradient(160deg,var(--wash-1),var(--wash-2));
display:flex; align-items:center; justify-content:center; text-align:center; min-height:260px; padding:30px;
}
.bildplatz p{ font-size:12.5px; line-height:1.85; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-tief); max-width:46ch; margin:0; }
.bildplatz p b{ display:block; font-size:14px; margin-bottom:9px; color:var(--ink); letter-spacing:.04em; }
.foto-band{
position:relative; border-radius:28px; overflow:hidden; min-height:470px;
display:flex; flex-direction:column; justify-content:space-between;
background:linear-gradient(155deg,var(--tief) 0%, var(--tief-2) 48%, #1c4d55 100%); padding:46px 28px;
}
@media (min-width:820px){ .foto-band{ padding:58px 50px; } }
.foto-band::after{ content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(700px 420px at 82% 12%, rgba(47,155,141,.32), transparent 62%); }
.foto-band > *{ position:relative; z-index:1; }
.foto-band .gross{ color:#fff; max-width:17ch; }
.foto-band .label{ color:rgba(234,242,243,.6); }
.glas-reihe{ display:grid; gap:12px; margin-top:38px; }
@media (min-width:700px){ .glas-reihe{ grid-template-columns:repeat(3,1fr); } }
.glas{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); border-radius:18px; padding:24px 22px; }
.glas b{ display:block; font-family:var(--jost); font-weight:300; font-size:clamp(28px,3vw,40px); line-height:1; color:#fff; }
.glas span{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(234,242,243,.62); margin-top:11px; }
.schritte{ display:grid; gap:16px; margin-top:46px; }
@media (min-width:860px){ .schritte{ grid-template-columns:repeat(3,1fr); } }
.schritt{ background:var(--dunst); border:1px solid var(--linie); border-radius:22px; padding:32px 28px; }
.schritt b{ display:block; font-family:var(--jost); font-weight:200; font-size:52px; line-height:1; color:var(--accent); }
.schritt h3{ font-family:var(--jost); font-weight:500; font-size:19px; margin:22px 0 10px; }
.schritt p{ margin:0; font-size:14px; color:var(--ink-soft); }
.vertrauen{ display:grid; gap:28px 46px; margin-top:42px; }
/* v9.1 — Seit die Referenzkarte raus ist, sind es drei Punkte. In zwei Spalten
stand der dritte allein mit einem Loch daneben. Drei Spalten fuellen die Reihe.
Kommt die Referenz zurueck, sind es wieder vier — dann ist 2x2 ruhiger als
3+1. :has() zaehlt die Karten selbst, damit niemand daran denken muss; ohne
:has()-Unterstuetzung bleibt es bei der Grundregel, also einspaltig. */
@media (min-width:820px){
.vertrauen{ grid-template-columns:repeat(3,1fr); }
.vertrauen:has(> :nth-child(4)){ grid-template-columns:repeat(2,1fr); }
}
.v-punkt{ border-top:1px solid var(--linie-stark); padding-top:20px; }
.v-punkt h3{ font-family:var(--jost); font-weight:500; font-size:19px; margin:0 0 9px; }
.v-punkt p{ margin:0; font-size:14.5px; color:var(--ink-soft); }
.wortmarke{ overflow:hidden; line-height:.8; }
.wortmarke span{
display:block; font-family:var(--jost); font-weight:300; font-size:clamp(56px,15.5vw,228px);
letter-spacing:-.03em; white-space:nowrap;
background:linear-gradient(180deg,var(--wash-2) 0%, rgba(216,232,234,.22) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
details{ border-bottom:1px solid var(--linie); padding:22px 0; }
details:first-of-type{ border-top:1px solid var(--linie-stark); }
summary{ font-family:var(--jost); font-weight:500; font-size:20px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:18px; align-items:baseline; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:'+'; color:var(--ink-mute); font-weight:300; font-size:21px; }
details[open] summary::after{ content:'–'; }
details p{ font-size:15px; color:var(--ink-soft); margin:14px 0 0; max-width:68ch; }
/* v9.1 — Erster Link im Fliesstext einer FAQ-Antwort. Es gab dafuer noch keine
Regel, also erschien er im Browser-Standardblau (#0000ee) mitten in einer
Seite ohne einen einzigen blauen Ton. Unterstrichen bleibt er bewusst: In
einem Absatz ist Farbe allein kein ausreichender Hinweis auf einen Link —
wer Farben schlecht unterscheidet, braucht die Linie. */
details p a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px;
text-decoration-thickness:1px; }
details p a:hover{ color:var(--accent-tief); }
.schluss{
border-radius:30px; padding:66px 26px; text-align:center; position:relative; overflow:hidden;
background:linear-gradient(150deg,var(--wash-1) 0%, var(--wash-2) 45%, var(--wash-3) 100%);
border:1px solid rgba(31,107,98,.16);
}
@media (min-width:820px){ .schluss{ padding:94px 56px; } }
.schluss .lead{ margin:22px auto 0; }
.schluss .hero-reihe{ justify-content:center; }
/* --- Fusszeile ------------------------------------------------------------
v9.1 — War eine graue Textwueste: vier durch
getrennte Zeilen, in denen
Anschrift, Firmenbuchnummer, Seitenlinks und Rechtstexte gleich aussahen.
Jetzt drei benannte Spalten auf der Akzentfarbe. Der farbige Block schliesst
die Seite sichtbar ab, statt sie ausfransen zu lassen.
Kontrast auf #1f6b62 gemessen: Weiss 6,3:1, die gedaempfte Schrift
rgba(255,255,255,.78) noch 4,6:1 — beides ueber AA. */
.fuss{ background:var(--accent); color:rgba(255,255,255,.78); padding:64px 0 40px;
font-size:13.5px; line-height:1.75; }
.fuss-gitter{ display:grid; gap:38px; }
@media (min-width:760px){
.fuss-gitter{ grid-template-columns:1.6fr 1fr 1fr; gap:48px; }
}
.fuss-marke .wort{ font-family:var(--jost); font-weight:500; font-size:17px; color:#fff;
display:flex; align-items:center; gap:10px; margin-bottom:12px; }
/* Der Markenpunkt ist auf dem farbigen Grund unsichtbar, wenn er den Verlauf
der Kopfzeile behaelt — hier weiss. */
.fuss-marke .wort i{ width:9px; height:9px; border-radius:50%; background:#fff; }
.fuss-marke p{ margin:0; max-width:34ch; }
.fuss-spalte{ display:flex; flex-direction:column; gap:9px; }
.fuss-spalte h2{ font-family:var(--inter); font-size:11px; font-weight:600;
letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55);
margin:0 0 6px; }
.fuss a{ color:rgba(255,255,255,.88); text-decoration:none; }
.fuss a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* Die Trennlinie laeuft ueber die volle Breite — mit max-width brach sie
mitten im Fuss ab und sah aus wie ein Darstellungsfehler. */
.fuss-fein{ margin:46px 0 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.18);
font-size:11.5px; line-height:1.7; color:rgba(255,255,255,.6); }
/* v9.1 — Diese Regel stand NACH der neuen Fusszeilen-Farbe und hat sie
ueberschrieben: Auf dem tuerkisen Grund waren die Links dunkelgrau und
damit praktisch unlesbar — auf allen sieben Seiten, die noch das alte
Fusszeilen-Markup haben. Ein geteiltes Stylesheet macht so einen Fehler
sofort ueberall sichtbar. Entfernt; die Farbe steht jetzt nur noch oben. */
.ph{ border-bottom:1px dotted rgba(139,151,155,.8); }
.entwurf{
position:fixed; bottom:0; left:0; right:0; z-index:50;
background:#f7efed; border-top:1px solid rgba(156,74,60,.25); color:#9c4a3c;
font-size:11px; font-weight:600; letter-spacing:.06em; text-align:center; padding:7px 16px;
}
body{ padding-bottom:32px; }
/* Ohne JavaScript wuerde .auf{opacity:0} die halbe Seite verschlucken.
Das