/* ============================================================
KIOR Health Center — Designsystem "Editorial"
Grundgedanke: die Seite soll sich lesen wie ein Prospekt, nicht wie
ein Baukasten. Drei Mittel tragen das:
1. GROSSE SERIFEN-DISPLAYSCHRIFT gegen kleine, weit gesperrte
Versalzeilen. Der Kontrast zwischen beiden macht die Seite.
2. HAARLINIEN IN GOLD statt Kaesten. Gold traegt keinen Text
(2,26:1), aber es traegt eine Linie.
3. VIEL LUFT. Abschnitte stehen weit auseinander; die Ruhe ist der
Grund, warum die Fotos wirken.
Die Farben stehen in site_config.py unter FARBEN; die :root-Variablen
hier muessen dazu passen. Beide Markenfarben stammen aus der Bildmarke:
das Gold des Kreises und das Gruen der Wortmarke.
KONTRAST — warum es drei Goldtoene gibt
---------------------------------------
--gold (#D3A466) erreicht auf Weiss nur 2,26:1 und ist damit fuer Text
jeder Groesse zu wenig. Gold bleibt der FLAECHE und der LINIE
vorbehalten. Fuer Text auf hellem Grund steht --gold-deep (5,61:1), fuer
Text auf dunklem Grund --gold-hell (auf --green-deep 7,35:1).
Gemessen auf --paper:
--green 8,38:1 --gold-deep 5,61:1 --text 13,75:1
--green-deep 11,09:1 --text-2 5,99:1 --gold 2,26:1
============================================================ */
:root{
--green:#3A5346; /* Wortmarke — Ueberschriften, dunkle Flaechen */
--green-deep:#2C4036; /* Fusszeile, dunkle Abschnitte */
--gold:#D3A466; /* Kreis der Bildmarke — NUR Flaeche und Linie */
--gold-deep:#8A5F26; /* Akzentschrift auf hellem Grund */
--gold-hell:#EBCEA6; /* Akzentschrift auf dunklem Grund */
--paper:#FFFFFF;
--paper-2:#F7F4EF; /* warmes Off-White */
--paper-3:#F0EAE1; /* zweite Absetzung, z. B. Bildrahmen */
--line:#E6DFD4;
--text:#23302A;
--text-2:#5A6660;
--success:#4A7C59;
/* Abstandsraster. Ein Wert, der an vielen Stellen gebraucht wird,
gehoert nicht als Zahl in zwanzig Regeln. */
--raum-abschnitt:clamp(84px, 11vw, 168px);
--raum-wrap:clamp(20px, 5vw, 48px);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
background:var(--paper); color:var(--text);
font-family:'Inter', system-ui, sans-serif;
font-size:17px; line-height:1.75;
-webkit-font-smoothing:antialiased;
/* Kein overflow-x:hidden als Pflaster. Ueberlaeufe werden dort behoben,
wo sie entstehen — sonst versteckt man sie nur und die Seite ruckelt
beim Wischen. */
}
/* height:auto ist hier nicht Kosmetik, sondern Pflicht. Jedes traegt
width- und height-Attribute (gegen CLS). Wird die Breite dann per CSS
beschnitten, bliebe die Hoehe aus dem Attribut stehen und das Bild waere
verzerrt — auf dem Desktop unsichtbar, auf dem Telefon sofort.
Regeln mit absichtlich fester Hoehe (.logo-img) sind spezifischer und
gewinnen weiterhin. */
img{ max-width:100%; height:auto; display:block; }
picture{ display:block; }
a{ color:inherit; }
/* ---------- Schriftbild ---------- */
h1,h2,h3,h4{
font-family:'Source Serif 4', Georgia, serif;
font-weight:600; color:var(--green);
line-height:1.08; letter-spacing:-0.018em;
}
/* Deutsche Komposita sind lang: "Gesichtsbehandlungen",
"Umsatzsteuer-Identifikationsnummer". In einer grossen Ueberschrift passt
so ein Wort auf 320px nicht in die Spalte und schiebt die ganze Seite nach
rechts — der Ueberlauf passiert INNERHALB des Textflusses, weshalb die
Suche nach ueberstehenden Kaesten nichts findet.
KEIN hyphens:auto. Der Auftraggeber schliesst Silbentrennung projekt-
uebergreifend aus. Den Ueberlauf verhindert overflow-wrap:break-word
allein genauso zuverlaessig — es bricht das Wort, setzt aber keinen
Trennstrich. Wer hyphens:auto wieder einfuegt, nimmt eine Entscheidung
zurueck, die nicht technisch begruendet war. */
h1,h2,h3,h4,summary{ overflow-wrap:break-word; }
p,li,td,th,dd,dt,figcaption{ overflow-wrap:break-word; }
.d1{ font-size:clamp(38px, 6.6vw, 82px); line-height:1.02; }
.d2{ font-size:clamp(29px, 4.4vw, 54px); line-height:1.06; }
.d3{ font-size:clamp(23px, 2.6vw, 32px); line-height:1.15; }
.lede{
font-size:clamp(17px, 1.5vw, 20px); line-height:1.65;
color:var(--text-2); max-width:56ch;
}
:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
*{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* ---------- Raster ---------- */
.wrap{ max-width:1240px; margin:0 auto; padding:0 var(--raum-wrap); }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 var(--raum-wrap); }
.wrap-wide{ max-width:1560px; margin:0 auto; padding:0 var(--raum-wrap); }
section{ padding:var(--raum-abschnitt) 0; }
.bg-2{ background:var(--paper-2); }
.bg-dunkel{ background:var(--green-deep); color:rgba(255,255,255,0.82); }
.bg-dunkel h2,.bg-dunkel h3{ color:#fff; }
/* ---------- Kennzeichnung: Versalzeile mit Haarlinie ---------- */
/* Das wiederkehrende Element der Seite. Die Linie ist kurz und golden; sie
markiert den Anfang eines Abschnitts, ohne einen Kasten zu bauen. */
.label{
display:block; font-size:11.5px; font-weight:600;
text-transform:uppercase; letter-spacing:0.2em;
color:var(--gold-deep); margin-bottom:22px;
}
.label::after{
content:""; display:block; width:56px; height:1px;
background:var(--gold); margin-top:12px;
}
.label-hell{ color:var(--gold-hell); }
.label-hell::after{ background:var(--gold); }
/* Zentrierte Fassung fuer Abschnitte, die mittig stehen. */
.mitte{ text-align:center; }
.mitte .label::after{ margin-left:auto; margin-right:auto; }
.mitte .lede{ margin-left:auto; margin-right:auto; }
/* ---------- Abschnittskopf ---------- */
.kopf{ max-width:34ch; margin-bottom:clamp(44px, 6vw, 80px); }
.kopf.breit{ max-width:52ch; }
.kopf .lede{ margin-top:20px; }
/* Kopf links, Beitext rechts — die editoriale Grundfigur. */
.kopf-zweispaltig{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(28px, 5vw, 80px); align-items:end;
margin-bottom:clamp(44px, 6vw, 80px);
}
@media (max-width:820px){
.kopf-zweispaltig{ grid-template-columns:1fr; align-items:start; gap:20px; }
}
.kopf-zweispaltig .lede{ max-width:44ch; }
/* ---------- Kopfzeile ---------- */
header{
position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92);
backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid var(--line);
}
.header-inner{
max-width:1560px; margin:0 auto; padding:0 var(--raum-wrap);
height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
@media (max-width:720px){ .header-inner{ height:68px; } }
/* Ohne flex-shrink:0 gibt im Kopf zuerst das Logo nach und wird gestaucht. */
.logo-link{ flex-shrink:0; display:block; }
.logo-link picture{ display:block; }
.logo-img{ height:50px; width:auto; display:block; }
@media (max-width:720px){ .logo-img{ height:40px; } }
header nav{ display:flex; align-items:center; gap:clamp(18px, 2.4vw, 40px); }
.nav-links{ display:flex; gap:clamp(16px, 2vw, 32px); }
nav a{
text-decoration:none; font-size:14.5px; color:var(--green);
font-weight:500; white-space:nowrap; position:relative; padding:6px 0;
}
/* Unterstreichung waechst aus der Mitte — ruhiger als ein Farbwechsel. */
nav a::after{
content:""; position:absolute; left:50%; right:50%; bottom:0; height:1px;
background:var(--gold-deep); transition:left 0.25s ease, right 0.25s ease;
}
nav a:hover::after, nav a.active::after{ left:0; right:0; }
nav a.active{ color:var(--gold-deep); }
/* 1090px statt der uebliche 1000: nachgemessen braucht die Kopfzeile mit
sechs Menuepunkten, drei Sprachkuerzeln und der Schaltflaeche 1057px. Bei
1000px lief die Seite zwischen 1001 und 1057px um bis zu 56px nach rechts —
auf JEDER Seite, genau in der Breite eines quer gehaltenen Tablets.
Die Grenze muss mit der von .menu-btn uebereinstimmen, sonst gibt es eine
Breite ganz ohne sichtbare Navigation. */
@media (max-width:1090px){ .nav-links{ display:none; } }
@media (max-width:640px){ header nav > .btn{ display:none; } }
.lang-switch{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.lang-switch a{
font-size:12px; font-weight:600; letter-spacing:0.08em; text-decoration:none;
color:var(--text-2); padding:5px 8px; border-radius:3px;
}
.lang-switch a::after{ content:none; }
.lang-switch a:hover{ color:var(--green); background:var(--paper-2); }
/* aria-current markiert die laufende Sprache — dieselbe Angabe liest auch
ein Screenreader vor. */
.lang-switch a[aria-current]{ color:var(--green); background:var(--paper-2); }
@media (max-width:520px){ header .lang-switch{ display:none; } }
.menu-btn{
display:none; flex-direction:column; gap:5px; background:none; border:0;
cursor:pointer; padding:8px; flex-shrink:0;
}
.menu-btn span{
display:block; width:24px; height:1.5px; background:var(--green);
transition:transform 0.25s ease, opacity 0.25s ease;
}
@media (max-width:1090px){ .menu-btn{ display:flex; } }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
/* Das Menue steht bewusst AUSSERHALB von . Traegt der Header
backdrop-filter, wird er zum Containing Block fuer position:fixed darin —
das Menue rechnet dann gegen den Header statt gegen den Viewport und ist
auf ein paar Pixel zusammengeschnitten. */
.mobile-nav{
display:none; position:fixed; inset:82px 0 0 0; background:var(--paper);
z-index:49; padding:32px var(--raum-wrap) 48px; overflow-y:auto;
}
@media (max-width:720px){ .mobile-nav{ top:68px; } }
.mobile-nav.open{ display:block; }
.mobile-nav a{
display:block; padding:16px 0; font-size:22px; font-weight:600;
font-family:'Source Serif 4', Georgia, serif; color:var(--green);
text-decoration:none; border-bottom:1px solid var(--line);
}
.mobile-nav a::after{ content:none; }
/* Die Schaltflaeche im Burger-Menue braucht ihre eigene Farbregel.
".mobile-nav a" (Klasse + Typ = 0,1,1) schlaegt ".btn-primary" (0,1,0) —
der Knopf bekam dadurch dunkelgruene Schrift auf dunkelgruenem Grund und
war ein leerer Kasten. Zwei Klassen (0,2,0) gewinnen wieder. */
/* DIESELBE FALLE wie bei der Farbe eine Zeile darueber, nur an anderer
Eigenschaft: ".mobile-nav a" ist 0,1,1 und schlaegt ".btn" mit 0,1,0. Der
Knopf uebernahm dadurch Schriftgrad 22px, die Serifenschrift und
padding:16px 0 aus dem Menue. Gemessen auf 320 px: "Записаться на приём"
war 297 px breit in einem 280 px breiten Kasten, stand also 19 px ueber
den Rand — in allen drei Sprachen, weil alle drei Beschriftungen lang
sind. Zwei Klassen (0,2,0) holen die Knopftypografie zurueck.
white-space:normal statt des nowrap aus .btn: sollte eine Beschriftung
spaeter doch nicht in eine Zeile passen, bricht sie um, statt aus dem
Kasten zu laufen. */
.mobile-nav .btn{
display:block; text-align:center; margin-top:28px; border-bottom:0;
font-family:'Inter', sans-serif; font-size:15px; letter-spacing:0.08em;
padding:16px 22px; white-space:normal;
}
.mobile-nav .btn-primary{ color:#fff; }
.mobile-nav .btn-gold{ color:var(--green-deep); }
.mobile-nav .btn-ghost{ color:var(--green); }
.mobile-nav .btn-ghost:hover{ color:#fff; }
.mobile-nav .lang-switch{ margin-top:28px; justify-content:center; }
.mobile-nav .lang-switch a{
font-size:14px; padding:8px 14px; border:1px solid var(--line);
border-radius:3px;
}
/* ---------- Schaltflaechen ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center;
padding:15px 30px; border:1px solid transparent; border-radius:2px;
font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
text-decoration:none; cursor:pointer; white-space:nowrap;
transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
font-family:'Inter', sans-serif;
}
/* Gold als Flaeche mit dunkelgruener Schrift: 6,07:1. Umgekehrt — goldene
Schrift auf Weiss — waeren es 2,26:1 und damit unlesbar. */
.btn-primary{ background:var(--green); color:#fff; border-color:var(--green); }
.btn-primary:hover{ background:var(--green-deep); border-color:var(--green-deep); }
.btn-gold{ background:var(--gold); color:var(--green-deep); border-color:var(--gold); }
.btn-gold:hover{ background:#C2914F; border-color:#C2914F; }
.btn-ghost{ border-color:var(--green); color:var(--green); }
.btn-ghost:hover{ background:var(--green); color:#fff; }
/* Auf dunklem Grund kehrt sich das um. */
.btn-invers{ background:#fff; color:var(--green-deep); border-color:#fff; }
.btn-invers:hover{ background:var(--paper-2); border-color:var(--paper-2); }
.btn-outline-invers{ border-color:rgba(255,255,255,0.5); color:#fff; }
/* Textlink im Fliesstext. Farbe ist --gold-deep, nicht --gold: Letzteres
erreicht auf Weiss 2,26:1 und traegt deshalb keine Schrift (siehe Kopf). */
.link-gold{
color:var(--gold-deep); text-decoration:none; font-weight:600;
border-bottom:1px solid rgba(138,95,38,0.35); padding-bottom:1px;
}
.link-gold:hover{ border-bottom-color:var(--gold-deep); }
.btn-outline-invers:hover{ background:rgba(255,255,255,0.14); border-color:#fff; }
.btn:disabled{ opacity:0.6; cursor:not-allowed; }
.btn-gruppe{ display:flex; gap:14px; flex-wrap:wrap; }
/* Nebeneinander passen zwei Schaltflaechen unterhalb von 560 px nicht mehr.
Sie brachen um und standen dann verschieden breit untereinander — gemessen
auf 375 px: 245 px gegen 169 px, also 76 px Unterschied bei mittiger
Ausrichtung. Untereinander und gleich breit ist ruhiger und trifft sich
auch besser mit dem Daumen.
align-items:stretch ist der Vorgabewert; er steht hier ausdruecklich, weil
genau er die gleiche Breite macht. */
@media (max-width:560px){
.btn-gruppe{ flex-direction:column; align-items:stretch; max-width:360px; }
.cta-band .btn-gruppe{ margin-left:auto; margin-right:auto; }
}
/* Textlink mit Pfeil — der leise Ausgang aus einem Abschnitt. */
.link-pfeil{
display:inline-flex; align-items:center; gap:9px;
font-size:12.5px; font-weight:600; letter-spacing:0.14em;
text-transform:uppercase; color:var(--gold-deep); text-decoration:none;
}
.link-pfeil::after{
content:""; width:26px; height:1px; background:currentColor;
transition:width 0.25s ease;
}
.link-pfeil:hover::after{ width:40px; }
/* ---------- Hero ---------- */
.hero{
position:relative; min-height:clamp(540px, 88vh, 860px);
display:flex; align-items:flex-end;
padding:clamp(80px,14vh,150px) 0 clamp(48px,8vh,84px);
overflow:hidden; background:var(--green-deep); isolation:isolate;
}
.hero > picture{ position:absolute; inset:0; z-index:-2; }
.hero > picture img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Der Schleier ist NACHGERECHNET, nicht nach Augenmass gesetzt. Im Motiv
(Empfang) liegt ein helles Fenster: das 99. Perzentil der Textzone ist
rgb(236,237,232), praktisch weiss. Gemessen gegen dieses Perzentil:
alpha 0,84 -> weiss 7,11:1 --gold-hell 4,71:1 Nebentext .80 5,25:1
alpha 0,94 -> weiss 9,3:1 --gold-hell 6,2:1
Der Verlauf beginnt deshalb bei 0,84 und nicht darunter: bei 0,74 fiel die
goldene Versalzeile auf 3,62:1 und der Nebentext auf 3,72:1. Die Tiefe
bleibt, die Lesbarkeit haengt nicht davon ab, wo im Bild ein Text steht. */
.hero::after{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:linear-gradient(180deg, rgba(30,45,37,0.84) 0%,
rgba(30,45,37,0.88) 45%,
rgba(30,45,37,0.94) 100%);
}
/* ---------- Bildband: vollbreites Foto zwischen zwei Abschnitten ----------
Vorher stand das Bild in seiner Eigenbreite von 880 px in einem 1440 px
breiten Abschnitt: es klebte am linken Rand, rechts blieben 560 px leerer
Grund stehen (gemessen, nicht geschaetzt).
Gleiche Mechanik wie .hero: das Bild fuellt die Breite, die Hoehe ist
begrenzt, object-fit:cover verhindert die Verzerrung. Die Regel
img{height:auto} greift hier bewusst NICHT — sie soll verhindern, dass ein
Bild verzerrt, wenn die Breite beschnitten wird; diese Aufgabe uebernimmt
an dieser Stelle object-fit. */
.bildband{ padding:0; background:var(--paper-2); }
/* overflow:hidden ist hier die Bedingung fuer den Zoom: ohne sie waechst das
Bild ueber den Abschnitt hinaus und schiebt die Seite waagerecht. */
.bildband figure{ margin:0; overflow:hidden; }
.bildband img{
display:block; width:100%; height:clamp(240px, 35vw, 560px);
object-fit:cover;
transition:transform 0.8s cubic-bezier(.4,0,.2,1);
}
.bildband:hover img{ transform:scale(1.05); }
@media (prefers-reduced-motion: reduce){
.bildband:hover img{ transform:none; }
}
.hero h1{ color:#fff; max-width:15ch; margin-bottom:26px; }
.hero .lede{ color:rgba(255,255,255,0.88); max-width:48ch; margin-bottom:38px; }
.hero .btn-gruppe{ margin-bottom:0; }
/* KURZE FENSTER — der haeufigste Notebook-Fall, gemessen auf 1366x768.
Der Hero war dort 820 px hoch und beginnt erst unter der 82 px hohen
Kopfzeile: die Faktenzeile am Fuss endete 73 px UNTER der Falz und war nur
als angeschnittene Zeile zu sehen.
Die Ursache ist nicht die Hoehe des Heros, sondern die Schriftgroesse:
.d1 ist mit clamp(38px, 6.6vw, 82px) allein an der BREITE bemessen. Ein
breites, flaches Fenster bekommt damit die groesste Schrift im kleinsten
Platz — die Ueberschrift allein belegte 251 der 651 px Inhalt. Deshalb hier
eine zweite Schranke ueber die Fensterhoehe.
min-height laesst bewusst rund 40 px des naechsten Abschnitts stehen: das
zeigt, dass es weitergeht, und garantiert zugleich, dass die Faktenzeile
oberhalb der Falz endet. */
@media (min-width:1000px) and (max-height:940px){
.hero{
min-height:calc(100vh - 122px);
padding:clamp(40px,6.5vh,90px) 0 clamp(28px,4.5vh,60px);
}
/* Alle Abstaende haengen hier an vh, keiner steht fest. Feste Werte
halten bei 768 px noch und kippen bei 640 px alle auf einmal; so
schrumpfen sie stattdessen gleichmaessig mit. */
.hero .label{ margin-bottom:clamp(10px,2.4vh,22px); }
.hero h1{
font-size:min(clamp(38px,6.6vw,82px), 8vh);
margin-bottom:clamp(10px,2vh,18px);
}
.hero .lede{ margin-bottom:clamp(14px,2.9vh,26px); }
.hero-fakten{
margin-top:clamp(16px,3.3vh,30px); padding-top:clamp(12px,2.2vh,20px);
}
}
/* Kurzinfos am Fuss des Heros */
.hero-fakten{
display:flex; gap:clamp(20px,4vw,64px); flex-wrap:wrap; margin-top:48px;
padding-top:26px; border-top:1px solid rgba(255,255,255,0.24);
font-size:13px; color:rgba(255,255,255,0.80); letter-spacing:0.02em;
}
.hero-fakten b{
display:block; color:#fff; font-weight:600; font-size:15px;
letter-spacing:0; margin-bottom:3px;
}
.hero-fakten a{ color:inherit; text-decoration:none; }
.hero-fakten a:hover{ text-decoration:underline; }
/* Scrollhinweis. Rein dekorativ und deshalb aria-hidden im Markup. */
.scroll-hinweis{
position:absolute; right:var(--raum-wrap); bottom:clamp(48px,8vh,84px);
display:flex; align-items:center; gap:12px; color:rgba(255,255,255,0.80);
font-size:11px; text-transform:uppercase; letter-spacing:0.2em;
writing-mode:vertical-rl;
}
.scroll-hinweis::after{
content:""; width:1px; height:56px; background:rgba(255,255,255,0.4);
animation:scrollPuls 2.4s ease-in-out infinite;
transform-origin:top;
}
@keyframes scrollPuls{
0%,100%{ transform:scaleY(0.35); opacity:0.4; }
50% { transform:scaleY(1); opacity:1; }
}
@media (max-width:900px){ .scroll-hinweis{ display:none; } }
/* Kopf einer Unterseite: ruhig, mit viel Luft, ohne Foto. */
.seiten-kopf{
padding:clamp(48px,9vw,110px) 0 clamp(40px,6vw,72px);
border-bottom:1px solid var(--line);
}
.seiten-kopf h1{ margin-bottom:22px; }
.brotkrume{
font-size:12px; color:var(--text-2); margin-bottom:28px;
letter-spacing:0.04em;
}
.brotkrume a{ color:var(--gold-deep); text-decoration:none; }
.brotkrume a:hover{ text-decoration:underline; }
/* ---------- Nummerierter Index ---------- */
/* Die Grundfigur der Leistungs- und Preisseiten:
01 ─ Ultraschallreinigung 90 €
60 Minuten
Die Ziffer traegt die Seite optisch, der Preis steht auf einer festen
Achse rechts — er ist die Zahl, wegen der die Seite aufgerufen wird. */
.index{ border-top:1px solid var(--line); }
.index-zeile{
display:grid; grid-template-columns:auto minmax(0,1fr) auto;
gap:0 clamp(16px, 3vw, 44px); align-items:baseline;
padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--line);
text-decoration:none; color:inherit;
transition:background 0.3s ease, padding-left 0.3s ease;
}
a.index-zeile:hover{
background:var(--paper-2);
padding-left:18px; padding-right:18px;
margin-left:-18px; margin-right:-18px;
}
.index-nr{
font-family:'Source Serif 4', Georgia, serif; font-size:13px;
color:var(--gold-deep); font-weight:600; letter-spacing:0.06em;
font-variant-numeric:tabular-nums;
}
.index-nr::after{
content:""; display:inline-block; width:18px; height:1px;
background:var(--gold); vertical-align:middle; margin-left:10px;
}
@media (max-width:560px){ .index-nr::after{ width:10px; margin-left:6px; } }
.index-titel{
font-family:'Source Serif 4', Georgia, serif;
font-size:clamp(19px, 2vw, 24px); font-weight:600; color:var(--green);
line-height:1.25;
}
.index-dauer{
display:block; font-size:12.5px; font-weight:600; color:var(--gold-deep);
letter-spacing:0.08em; text-transform:uppercase; margin-top:8px;
}
.index-text{
display:block; font-size:15px; color:var(--text-2); margin-top:10px;
max-width:64ch; line-height:1.6;
}
.index-preis{
font-family:'Source Serif 4', Georgia, serif;
font-size:clamp(18px, 1.8vw, 22px); font-weight:600; color:var(--green);
white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums;
}
/* Unter 560px wandert der Preis unter den Namen — nebeneinander bliebe fuer
den Namen eine Spalte von zwoelf Zeichen. */
@media (max-width:560px){
.index-zeile{ grid-template-columns:auto minmax(0,1fr); row-gap:10px; }
.index-preis{ grid-column:2; text-align:left; }
}
/* Reine Positionsliste ohne Beschreibung: zweispaltig, damit lange
Preislisten nicht zu einer endlosen Kolonne werden. */
.index-kompakt{ column-count:2; column-gap:clamp(32px,5vw,72px); }
@media (max-width:720px){ .index-kompakt{ column-count:1; } }
.index-kompakt .zeile{
display:flex; justify-content:space-between; gap:20px; align-items:baseline;
padding:14px 0; border-bottom:1px solid var(--line);
break-inside:avoid; font-size:15.5px;
}
.index-kompakt .zeile span:last-child{
font-weight:600; color:var(--green); white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.preis-hinweis{
margin-top:36px; font-size:13.5px; color:var(--text-2);
padding-left:20px; border-left:1px solid var(--gold); line-height:1.6;
}
/* ---------- Bildstrecken ---------- */
/* Ein Bild, das aus der Textspalte ausbricht — das editoriale Mittel gegen
eine Seite, die nur aus Spalten besteht. */
.bild-breit{ margin:clamp(56px,8vw,110px) 0; }
.bild-breit img{ width:100%; }
.bild-breit figcaption{
margin-top:14px; font-size:12.5px; color:var(--text-2);
letter-spacing:0.04em;
}
/* Zwei Spalten: Text und Bild nebeneinander, im Wechsel. */
.duo{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(32px, 6vw, 96px); align-items:center;
}
@media (max-width:880px){ .duo{ grid-template-columns:1fr; gap:36px; } }
.duo.gedreht > *:first-child{ order:2; }
@media (max-width:880px){ .duo.gedreht > *:first-child{ order:0; } }
.duo-bild img{ width:100%; }
/* ---------- Leistungskarten ---------- */
.karten{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
gap:clamp(20px, 3vw, 40px);
}
@media (max-width:980px){ .karten{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .karten{ grid-template-columns:1fr; } }
.karte{
display:flex; flex-direction:column; text-decoration:none; color:inherit;
min-width:0;
}
.karte-bild{ display:block; overflow:hidden; background:var(--paper-3); margin-bottom:22px; }
/* Zoomkurve, an allen fuenf Stellen dieselbe.
Vorher cubic-bezier(.2,.7,.3,1): die steigt sofort steil an — gemessen lagen
nach 120 der 700 ms schon 54 % der Bewegung hinter uns, nach 240 ms 78 %.
Das sieht aus wie ein Ruck mit langem Nachkriechen, nicht wie eine Fahrt.
cubic-bezier(.4,0,.2,1) startet sanft und laeuft sanft aus; 0,8 s statt
0,7 s geben der Bewegung dabei genug Zeit. */
.karte-bild img{ width:100%; transition:transform 0.8s cubic-bezier(.4,0,.2,1); }
.karte:hover .karte-bild img{ transform:scale(1.05); }
@media (prefers-reduced-motion: reduce){
.karte:hover .karte-bild img{ transform:none; }
}
.karte .nr{
display:block;
font-family:'Source Serif 4', Georgia, serif; font-size:12px;
color:var(--gold-deep); letter-spacing:0.14em; display:block; margin-bottom:10px;
}
/* Kachel-Ueberschriften sind h2, nicht h3: sie stehen als einzige Ebene
unter der H1 der Seite. Als h3 sprang die Gliederung von 1 auf 3 — auf
zwoelf Seiten. Ein Screenreader, der nach Ueberschriften navigiert,
meldet dort eine fehlende Ebene. Die Groesse haengt an der Regel hier,
nicht am Tag, deshalb aendert sich optisch nichts. */
.karte h2{ font-size:clamp(20px,1.9vw,24px); margin-bottom:10px; }
.karte p{ font-size:14.5px; color:var(--text-2); line-height:1.6; flex:1; }
.karte .link-pfeil{ margin-top:18px; }
/* ---------- Team ---------- */
.team-gitter{
display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
gap:clamp(24px, 3.5vw, 52px);
}
@media (max-width:900px){ .team-gitter{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .team-gitter{ grid-template-columns:1fr; } }
.person{ text-decoration:none; color:inherit; display:block; min-width:0; }
.person-bild{ display:block; overflow:hidden; background:var(--paper-3); margin-bottom:20px; position:relative; }
.person-bild img{ width:100%; transition:transform 0.8s cubic-bezier(.4,0,.2,1); }
/* Der Zoom haengt an .person, NICHT an a.person. Taran hat als einziger keine
Profilseite; seine Karte ist deshalb ein
. Mit dem Zoom nur am Anker
war er die eine Kachel im Raster, die sich nicht ruehrt — das sieht nach
Fehler aus, nicht nach Absicht.
Der Farbwechsel der Ueberschrift bleibt dagegen dem Anker vorbehalten: er
ist ein Link-Hinweis und darf nicht an einer Kachel erscheinen, die nirgends
hinfuehrt. Ein Zoom am Foto ist Bildwirkung, kein Klickversprechen —
cursor:pointer setzt hier ohnehin nichts. */
.person:hover .person-bild img{ transform:scale(1.04); }
@media (prefers-reduced-motion: reduce){
.person:hover .person-bild img{ transform:none; }
}
.person .rolle{
display:block; font-size:11px; font-weight:600; letter-spacing:0.16em;
text-transform:uppercase; color:var(--gold-deep); margin-bottom:9px;
/* Zwei Zeilen Platz, auch wenn die Bezeichnung nur eine braucht.
"Masseurin" ist einzeilig, "Fachaerztin fuer Gynaekologie und
Geburtshilfe" zweizeilig — ohne diese Reserve stehen die Namen im
Raster auf zwei verschiedenen Hoehen. Die Vorgabe zaehlt in em, damit
sie einer Schriftgroessenaenderung folgt. */
line-height:1.35; min-height:2.7em;
}
.person h2{ font-size:clamp(19px,1.7vw,23px); line-height:1.25; }
a.person:hover h2{ color:var(--gold-deep); }
/* ---------- Profilseite ---------- */
.profil{
display:grid; grid-template-columns:minmax(0,0.72fr) minmax(0,1fr);
gap:clamp(32px, 6vw, 90px); align-items:start;
}
@media (max-width:860px){ .profil{ grid-template-columns:1fr; gap:36px; } }
/* Dasselbe Verhalten wie in der Teamkachel: wer dort ein Portrait anfaehrt,
erwartet es auf der Profilseite wieder. */
.profil-bild{ overflow:hidden; }
.profil-bild img{
width:100%; display:block;
transition:transform 0.8s cubic-bezier(.4,0,.2,1);
}
.profil-bild:hover img{ transform:scale(1.04); }
@media (prefers-reduced-motion: reduce){
.profil-bild:hover img{ transform:none; }
}
.profil-text p{ color:var(--text-2); margin-bottom:18px; max-width:62ch; }
.profil-text h2{ font-size:20px; margin:34px 0 12px; }
.profil-text ul{ margin:0 0 20px 20px; color:var(--text-2); }
.profil-text li{ margin-bottom:8px; }
/* Das Credo — der Satz, mit dem sich die Person selbst beschreibt. */
.credo{
margin:34px 0 0; padding:28px 0 0; border-top:1px solid var(--gold);
font-family:'Source Serif 4', Georgia, serif;
font-size:clamp(19px,1.9vw,24px); line-height:1.45; font-style:italic;
color:var(--green);
}
.credo cite{
display:block; margin-top:16px; font-size:11.5px; font-style:normal;
font-family:'Inter', sans-serif; color:var(--text-2);
letter-spacing:0.16em; text-transform:uppercase;
}
/* ---------- Galerie ---------- */
/* Bewusst ungleiche Kacheln: ein gleichmaessiges Raster aus 25 Bildern
ermuedet, ein Rhythmus aus grossen und kleinen nicht. */
.galerie{
display:grid; grid-template-columns:repeat(6, 1fr);
gap:clamp(10px, 1.4vw, 20px);
}
.galerie figure{ margin:0; overflow:hidden; background:var(--paper-3); grid-column:span 2; }
.galerie figure:nth-child(9n+1){ grid-column:span 3; }
.galerie figure:nth-child(9n+2){ grid-column:span 3; }
/* Der Link muss block sein: als Inline-Element erzeugt er unter dem Bild
eine Zeilenhoehen-Luecke, und die Kachel bekommt einen hellen Streifen. */
.galerie-link{ display:block; }
.galerie img{ width:100%; transition:transform 0.8s cubic-bezier(.4,0,.2,1); }
.galerie figure:hover img{ transform:scale(1.05); }
@media (prefers-reduced-motion: reduce){ .galerie figure:hover img{ transform:none; } }
@media (max-width:900px){
.galerie{ grid-template-columns:repeat(4, 1fr); }
.galerie figure, .galerie figure:nth-child(9n+1), .galerie figure:nth-child(9n+2){ grid-column:span 2; }
}
@media (max-width:560px){
.galerie{ grid-template-columns:1fr; }
.galerie figure, .galerie figure:nth-child(9n+1), .galerie figure:nth-child(9n+2){ grid-column:span 1; }
}
/* ---------- Merkmale ---------- */
.merkmale{
display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
gap:clamp(24px,3vw,44px) clamp(24px,3vw,48px);
}
@media (max-width:1000px){ .merkmale{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .merkmale{ grid-template-columns:1fr; } }
.merkmal{ min-width:0; padding-top:22px; border-top:1px solid var(--line); }
.merkmal .nr{
font-family:'Source Serif 4', Georgia, serif; font-size:12px;
color:var(--gold-deep); letter-spacing:0.14em; display:block; margin-bottom:14px;
}
.merkmal h2{ font-size:18px; margin-bottom:9px; }
.merkmal p{ font-size:14.5px; color:var(--text-2); line-height:1.6; }
/* ---------- Neuigkeiten ---------- */
.news-eintrag{
display:grid; grid-template-columns:auto minmax(0,1fr);
gap:0 clamp(16px,3vw,44px);
padding:clamp(28px,4vw,44px) 0; border-bottom:1px solid var(--line);
}
.news-eintrag:first-child{ border-top:1px solid var(--line); }
@media (max-width:560px){ .news-eintrag{ grid-template-columns:1fr; gap:14px; } }
.news-marke{
font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
color:var(--gold-deep); white-space:nowrap; padding-top:8px;
}
.news-eintrag h2{ font-size:clamp(21px,2.2vw,28px); margin-bottom:14px; }
.news-eintrag p{ color:var(--text-2); margin-bottom:12px; max-width:66ch; }
.news-eintrag ul{ margin:0 0 12px 20px; color:var(--text-2); }
.news-eintrag li{ margin-bottom:6px; }
/* ---------- Zitatband / Aussage ---------- */
.aussage{
font-family:'Source Serif 4', Georgia, serif;
font-size:clamp(24px,3.4vw,44px); line-height:1.25; color:#fff;
max-width:22ch; margin:0 auto; text-align:center;
}
/* ---------- Kontakt ---------- */
.kontakt-raster{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.82fr);
gap:clamp(36px, 6vw, 96px); align-items:start;
}
@media (max-width:900px){ .kontakt-raster{ grid-template-columns:1fr; } }
/* Grid-Kinder haben von Haus aus min-width:auto und schrumpfen nicht unter
die Breite ihres laengsten unteilbaren Inhalts. Gemessen bei 320px: die
Adresse "kiorhealth.center@gmail.com" ist ein einziges nicht trennbares
Wort und riss die Spur auf 381px — die Seite lief um 89px nach rechts. */
.kontakt-raster > *{ min-width:0; }
.kontakt-daten{ border-top:1px solid var(--line); }
.kontakt-zeile{
display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px;
padding:18px 0; border-bottom:1px solid var(--line); font-size:15.5px;
}
.kontakt-zeile .label-klein{
font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
color:var(--gold-deep); min-width:88px; padding-top:4px;
}
.kontakt-zeile a, .kontakt-zeile span:last-child{
color:var(--green); text-decoration:none; font-weight:500;
overflow-wrap:anywhere;
}
.kontakt-zeile a:hover{ color:var(--gold-deep); text-decoration:underline; }
/* ---------- Formular ---------- */
.form-feld{ margin-bottom:24px; }
.form-feld label{
display:block; font-size:11px; font-weight:600; letter-spacing:0.14em;
text-transform:uppercase; color:var(--text-2); margin-bottom:9px;
}
.form-feld input, .form-feld textarea, .form-feld select{
width:100%; padding:13px 0; border:0; border-bottom:1px solid var(--line);
font-family:'Inter', sans-serif; font-size:16px; color:var(--text);
background:transparent; border-radius:0;
transition:border-color 0.2s ease;
}
/* Maus- und Touchfokus: nur die Linie faerbt sich, kein Ring. */
.form-feld input:focus, .form-feld textarea:focus{
border-color:var(--gold-deep); outline:none;
}
/* Tastaturfokus braucht einen sichtbaren Ring (WCAG 2.4.7). Ohne diese Regel
gewinnt das obige outline:none durch hoehere Spezifitaet. */
.form-feld input:focus-visible, .form-feld textarea:focus-visible{
outline:2px solid var(--gold-deep); outline-offset:3px;
}
.form-feld textarea{ resize:vertical; min-height:120px; }
.form-reihe{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,32px); }
@media (max-width:560px){ .form-reihe{ grid-template-columns:1fr; } }
.form-consent{
display:flex; gap:12px; align-items:flex-start; font-size:13.5px;
color:var(--text-2); margin:10px 0 30px; line-height:1.6; cursor:pointer;
}
.form-consent input{ margin-top:5px; flex-shrink:0; accent-color:var(--green); }
.form-consent > span{ min-width:0; overflow-wrap:break-word; }
.form-consent a{ color:var(--gold-deep); }
.form-status{
padding:15px 18px; font-size:14.5px; margin-bottom:24px; display:none;
border-left:2px solid;
}
.form-status.show{ display:block; }
.form-status.success{ background:#EEF5F0; color:var(--success); border-color:var(--success); }
.form-status.error{ background:#FBEDEC; color:#A3312A; border-color:#A3312A; }
/* ---------- Rechtstexte ---------- */
.recht{ max-width:70ch; }
.recht h2{
font-size:clamp(20px,2vw,25px); margin:52px 0 16px;
padding-bottom:12px; border-bottom:1px solid var(--line);
}
.recht h2:first-child{ margin-top:0; }
.recht h3{ font-size:17px; margin:30px 0 10px; }
.recht p{ color:var(--text-2); margin-bottom:15px; }
.recht ul, .recht ol{ margin:0 0 18px 22px; color:var(--text-2); }
.recht li{ margin-bottom:8px; }
.recht a{ color:var(--gold-deep); }
/* Eine breite Tabelle scrollt in sich selbst, nie die Seite. display:block
ist noetig, damit overflow an einem
ueberhaupt wirkt. */
.recht table{
width:100%; border-collapse:collapse; margin:20px 0; font-size:14.5px;
display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
@media (min-width:640px){ .recht table{ display:table; overflow-x:visible; } }
.recht th, .recht td{ text-align:left; padding:11px 13px; border:1px solid var(--line); vertical-align:top; }
.recht th{ background:var(--paper-2); color:var(--green); font-weight:600; }
/* ---------- Textspalte allgemein ---------- */
.prose > *:first-child{ margin-top:0; }
.prose h2{
font-family:'Source Serif 4', Georgia, serif;
font-size:clamp(24px,2.8vw,34px); margin:clamp(56px,7vw,92px) 0 28px;
}
.prose > *:first-child.h2, .prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:20px; margin:38px 0 12px; }
.prose p{ color:var(--text-2); margin-bottom:18px; max-width:68ch; }
.prose ul{ margin:0 0 22px 0; list-style:none; }
.prose ul li{
position:relative; padding-left:26px; margin-bottom:11px; color:var(--text-2);
}
/* Goldener Strich statt Punkt — dasselbe Zeichen wie im Index. */
.prose ul li::before{
content:""; position:absolute; left:0; top:0.72em;
width:12px; height:1px; background:var(--gold);
}
/* ---------- Motiv ---------- */
/* Die Magnolie aus der Bildmarke als Wasserzeichen. Als CSS-Maske eingesetzt,
damit sie sich einfaerben laesst; die PNG traegt nur den Alphakanal. */
.motiv{
position:absolute; pointer-events:none; z-index:0;
background-color:var(--gold);
-webkit-mask:url('/assets/images/motiv-magnolie.png') no-repeat center / contain;
mask:url('/assets/images/motiv-magnolie.png') no-repeat center / contain;
opacity:0.13;
}
.motiv-rechts{ right:-90px; top:-60px; width:clamp(220px, 30vw, 420px); aspect-ratio:729/566; }
.motiv-links{ left:-110px; bottom:-70px; width:clamp(200px, 26vw, 380px); aspect-ratio:729/566; }
@media (max-width:720px){ .motiv{ display:none; } }
.hat-motiv{ position:relative; overflow:hidden; }
/* ---------- Abschluss-Aufruf ---------- */
.cta-band{
position:relative; background:var(--green-deep); color:#fff;
text-align:center; overflow:hidden;
}
.cta-band h2{ color:#fff; margin-bottom:20px; }
.cta-band p{ color:rgba(255,255,255,0.78); max-width:46ch; margin:0 auto 40px; }
.cta-band .btn-gruppe{ justify-content:center; }
.cta-band .motiv{ opacity:0.10; }
/* ---------- Fusszeile ---------- */
footer{
background:var(--green-deep); color:rgba(255,255,255,0.72);
padding:clamp(56px,7vw,96px) 0 36px; font-size:14px;
}
/* Vier Spalten: Marke, Leistungen, Zentrum, Kontakt.
Das Logo stand vorher als eigene Zeile ueber dem Raster — links daneben
blieb dann eine leere Flaeche ueber die halbe Breite. Als erste Spalte
traegt es die Zeile mit.
Die Markenspalte ist schmaler gesetzt: die drei Linkspalten sollen gleich
breit bleiben, das Logo braucht nur seine eigene Breite. */
.footer-spalten{
display:grid; grid-template-columns:auto repeat(3, minmax(0,1fr));
gap:clamp(28px,4vw,64px); margin-bottom:52px; align-items:start;
}
/* Das Logo traegt die Spalte — deshalb deutlich groesser als die 60 px, mit
denen es vorher als eigene Zeile ueber dem Raster stand. Die Spalte ist
auf auto gesetzt und waechst einfach mit; bei 95 px Hoehe misst sie rund
230 px, den drei Linkspalten bleiben davon je 246 px. */
/* Der Logo-Link muss block sein: als Inline-Element erzeugt er unter dem
Bild eine Zeilenhoehen-Luecke. Und er darf die Unterstreichung aus
".footer-spalte a:hover" nicht erben — bei einem Bild waere sie ein Strich
ins Leere. */
.footer-logo-link{ display:block; }
.footer-logo-link:hover{ text-decoration:none; }
.footer-logo-link picture{ display:block; }
.footer-logo-link img{ transition:opacity 0.2s ease; }
.footer-logo-link:hover img{ opacity:0.82; }
.footer-marke img{ height:clamp(76px, 6.6vw, 95px); width:auto; }
@media (max-width:980px){
/* Unter 980 px reicht die Breite fuer vier Spalten nicht mehr; die Marke
ruecke dann wieder ueber die Spalten statt neben sie. */
.footer-spalten{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.footer-marke{ grid-column:1 / -1; margin-bottom:16px; }
}
@media (max-width:760px){ .footer-spalten{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-spalten{ grid-template-columns:1fr; } }
.footer-spalte{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; min-width:0; }
.footer-h{
font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
color:var(--gold-hell); margin-bottom:8px;
}
.footer-spalte a{
color:rgba(255,255,255,0.72); text-decoration:none; line-height:1.5;
overflow-wrap:anywhere;
}
.footer-spalte a:hover{ color:#fff; text-decoration:underline; }
.footer-adresse{ line-height:1.7; }
/* Zweite Ueberschrift in derselben Spalte: der gap von 11px der Spalte reicht
nicht, um "Folgen Sie uns" vom Logo darueber abzusetzen. */
.footer-h-2{ margin-top:22px; }
/* Profil-Icons. 44x44 Trefferflaeche bei 21 px Zeichen — das ist die Groesse,
die WCAG 2.5.8 als Mindestmass fuer Zeigereingaben nennt; nebeneinander
liegende kleine Icons sind sonst auf dem Telefon kaum zu treffen. */
.profil-reihe{ display:flex; gap:6px; margin-left:-11px; }
.profil-icon{
display:flex; align-items:center; justify-content:center;
width:44px; height:44px; color:rgba(255,255,255,0.72);
transition:color 0.2s ease;
}
.profil-icon:hover{ color:#fff; }
.profil-icon svg{ display:block; }
.footer-unten{
display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
padding-top:28px; border-top:1px solid rgba(255,255,255,0.16);
font-size:12.5px;
}
/* Umsetzungshinweis hinter dem Copyright. Der Trenner steht im CSS und nicht
im Markup: ein Screenreader soll "KIOR Health Center, Umsetzung: Escalt
GmbH" lesen und keinen vorgelesenen Punkt dazwischen. */
.footer-agentur{ color:rgba(255,255,255,0.55); }
.footer-agentur::before{ content:"\00a0\00b7\00a0"; }
.footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a{ color:rgba(255,255,255,0.72); text-decoration:none; }
.footer-links a:hover{ color:#fff; text-decoration:underline; }
/* Der Widerruf der Einwilligung ist ein