/* ============================================================
Designsystem lipoclinic.es
Uebernommen aus schoenheitsoperationen.de: dieselbe Klinik, dasselbe
Markenbild. Uebernommen ist die Bildsprache — Farben, Schriften,
Proportionen, die Rundung der Knoepfe, die Zierlinie — nicht das Markup.
Die Klassennamen sind die des Generators (internal/build/shell.py); ein
Kopieren der Regeln aus der alten Datei haette sie ins Leere laufen
lassen.
Farben stehen zusaetzlich in site_config.py unter FARBEN, von wo aus
theme-color, Manifest und Icons versorgt werden. Wer hier eine Farbe
aendert, aendert sie dort mit.
ZWEI REGELN, an denen diese Datei schon einmal gescheitert ist:
1. Reihenfolge. Ein @media-Block hat keine hoehere Spezifitaet. Steht die
unbedingte Grundregel SPAETER in der Datei, gewinnt sie bei jeder
Fensterbreite — die mobile Anpassung wirkt dann nirgends. Jede
Anpassung steht deshalb NACH der Regel, die sie ueberschreiben soll.
2. Hover nur fuer echte Zeiger. :hover ohne
@media (hover:hover) and (pointer:fine) bleibt auf Touchgeraeten nach
dem Antippen sichtbar haengen.
============================================================ */
:root{
--navy:#1B293D; /* Ueberschriften, dunkle Flaechen, Hauptknopf */
--blue:#4B74B2; /* Links und Akzent auf hellem Grund, 4,73:1 */
--accent:#93BCFA; /* heller Akzent, nur auf Navy, 7,56:1 */
--accent-dark:#6E9CE2; /* Hover und Zierrat, auf Weiss nur 2,79:1 */
--paper:#FFFFFF;
--paper-2:#E0E7F2; /* abgesetzte Abschnitte */
--line:#E2E2E2;
--text-2:#5B6472; /* Fliesstext, 5,98:1 auf Weiss */
--text-3:#C1CBDA; /* gedaempft auf Navy, 8,96:1 */
--green:#2E9E5B;
--serif:'EB Garamond',Georgia,serif;
--sans:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
background:var(--paper); color:var(--navy);
font-family:var(--sans); line-height:1.6;
-webkit-font-smoothing:antialiased;
}
/* height:auto ist hier nicht Kosmetik, sondern Pflicht. Jedes traegt
width- und height-Attribute (gegen CLS). Wird die Breite dann per CSS
beschnitten — hier durch max-width:100% —, bleibt die Hoehe aus dem
Attribut stehen und das Bild wird verzerrt. Auf dem Desktop faellt das
nicht auf, weil der Container fast der natuerlichen Breite entspricht; auf
dem Telefon sofort. Regeln mit absichtlich fester Hoehe sind spezifischer
und gewinnen weiterhin. */
img{ max-width:100%; height:auto; display:block; }
/* muss sich wie das darin verhalten (WebP-Rueckfall) */
picture{ display:block; }
a{ color:var(--blue); }
h1,h2,h3,h4{
font-family:var(--serif); font-weight:500; color:var(--navy);
line-height:1.15; letter-spacing:0.01em;
}
/* Lange Woerter brechen sonst aus der Spalte aus und schieben die ganze
Seite seitwaerts — der Ueberlauf passiert IM Textfluss, weshalb die
uebliche Suche nach ueberstehenden Kaesten nichts findet.
Betrifft hier vor allem die russische Fassung ("Косметическая",
"Абдоминопластика") und spanische Fachwoerter wie "Abdominoplastia".
hyphens:auto trennt nach den Regeln der Sprache, die im
steht; overflow-wrap ist der Notnagel, wenn selbst getrennt nichts
passt. */
h1,h2,h3,h4,summary{ overflow-wrap:break-word; hyphens:auto; }
p,li,td,th,dd,figcaption{ overflow-wrap:break-word; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*{ animation:none !important; transition:none !important; }
}
.wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:900px; margin:0 auto; padding:0 24px; }
section{ padding:96px 0; }
.eyebrow{
font-family:var(--sans); font-size:0.72rem; font-weight:600;
color:var(--blue); letter-spacing:0.34em; text-transform:uppercase;
margin-bottom:14px;
}
/* Auf dunklem Grund traegt die Zeile Weiss — var(--blue) hat gegen Navy
nur 2,4:1. */
.on-dark .eyebrow{ color:var(--accent); }
/* Lesespalte. Der wrap ist 1200 px breit, weil Raster und Galerie die Breite
brauchen — Fliesstext braucht das Gegenteil. Ueber rund 75 Zeichen je Zeile
verliert das Auge beim Ruecksprung die naechste Zeile, und auf einem
1400-px-Fenster lief der Absatz vorher ueber die volle Breite.
ch bezieht sich auf die Breite der Ziffer 0 der laufenden Schrift, die
Spalte passt sich damit der Schriftgroesse an. */
.prose{ max-width:72ch; }
.prose h2, .prose h3{ max-width:24ch; }
/* Zierlinie — das Erkennungszeichen des Markenbildes. Faehrt beim
Sichtbarwerden auf ihre Breite aus; ohne .in-view bleibt sie 0 breit und
damit unsichtbar, was ohne JavaScript richtig aussieht, weil daneben
nichts fehlt. */
.line{
height:2px; width:72px; margin:22px 0;
background:linear-gradient(90deg, var(--accent), var(--accent-dark));
}
.line.center{ margin-left:auto; margin-right:auto; }
/* ---------- Kopfbereich ---------- */
header{
position:sticky; top:0; z-index:50;
background:rgba(255,255,255,0.94);
backdrop-filter:blur(6px);
border-bottom:1px solid var(--line);
}
.header-inner{
max-width:1280px; margin:0 auto; padding:16px 24px;
display:flex; align-items:center; justify-content:space-between; gap:24px;
}
/* Der Logo-Link darf nicht schrumpfen: ohne flex-shrink:0 gibt ausgerechnet
er nach, sobald die Navigation eng wird. */
.header-inner > a{ flex-shrink:0; }
.logo-img{ height:52px; width:auto; display:block; }
/* Eine Navigation fuer beide Ansichten. Auf dem Schirm eine Zeile, auf dem
Telefon dieselbe Liste als Flaeche unter der Kopfzeile — der Unterschied
steht ausschliesslich im Medienblock am Dateiende. */
/* NUR die oberste Liste ist eine Zeile. Ohne den Kindkombinator traf die
Regel auch das
darin: sieben Behandlungen als
waagerechter Streifen, 1038 px breit, und die Seite lief um 185 px ueber.
Im Quelltext war davon nichts zu sehen — die Verschachtelung ist ja
korrekt, nur der Selektor war zu weit. */
.main-nav > ul{ list-style:none; display:flex; align-items:center; gap:22px; }
.main-nav > ul > li{ display:flex; align-items:center; }
.main-nav .dropdown{ list-style:none; display:block; }
.main-nav .dropdown li{ display:block; }
nav a{
text-decoration:none; color:var(--navy);
font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase;
font-weight:400; white-space:nowrap; padding:6px 2px;
border-bottom:1px solid transparent;
transition:border-color .2s ease, color .2s ease;
}
/* blue statt accent-dark: der hellere Ton hat auf Weiss nur 2,79:1 und
faellt damit unter die 4,5:1, die WCAG AA fuer normalen Text verlangt.
In site_config.py steht seit dem Farbabgleich, dass er nie auf hellen
Grund gehoert — hier stand er trotzdem. blue erreicht 4,73:1. */
nav a.active{ border-color:var(--blue); color:var(--blue); }
@media (hover:hover) and (pointer:fine){
nav a:hover{ border-color:var(--blue); color:var(--blue); }
}
/* ---------- Untermenue der Galerie ----------
Drei Wege hinein, absichtlich getrennt:
1. focus-within — die Tastatur, auf jedem Geraet. Steht zuerst, damit es
auch dann gilt, wenn die Hover-Regel unten nicht greift.
2. hover, aber NUR hinter @media (hover:hover) and (pointer:fine). Ohne
diese Schranke loest ein Tippen auf einem Touchgeraet zuerst :hover
aus: das Menue klappt auf, der Tipp gilt als verbraucht, und der
Besucher landet nicht auf der Seite, die er antippen wollte.
3. .open — von main.js gesetzt, genau fuer diese Touchgeraete.
Der Elternpunkt bleibt dabei ein normaler Link auf die Uebersicht. */
.has-dropdown{ position:relative; }
.has-dropdown > a{ display:inline-flex; align-items:center; gap:6px; }
.has-dropdown > a::after{
content:""; width:6px; height:6px; margin-top:-3px;
border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
transform:rotate(45deg); transition:transform .2s ease;
}
.has-dropdown.open > a::after,
.has-dropdown:focus-within > a::after{ transform:rotate(225deg); margin-top:3px; }
.main-nav .dropdown{
position:absolute; top:100%; left:50%; transform:translate(-50%,4px);
min-width:250px; padding:10px 0;
background:var(--paper); border:1px solid var(--line); border-radius:12px;
box-shadow:0 20px 40px rgba(27,41,61,.14);
opacity:0; visibility:hidden; pointer-events:none; z-index:200;
transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.main-nav .has-dropdown:focus-within .dropdown,
.main-nav .has-dropdown.open .dropdown{
opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
@media (hover:hover) and (pointer:fine){
.main-nav .has-dropdown:hover .dropdown{
opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
}
.main-nav .dropdown a{
display:block; padding:9px 22px; font-size:0.78rem; letter-spacing:0.04em;
text-transform:none; white-space:nowrap; border-bottom:none;
}
@media (hover:hover) and (pointer:fine){
.main-nav .dropdown a:hover{ background:var(--paper-2); color:var(--blue); }
}
/* Sprachumschalter. Erscheint nur, wenn site_config.py mehr als eine Sprache
fuehrt — bei einer Sprache erzeugt shell.py den Block gar nicht erst. */
.lang-switch{ display:flex; align-items:center; gap:2px; flex-shrink:0; }
.lang-switch a{
font-size:0.72rem; font-weight:600; letter-spacing:0.08em; line-height:1;
color:var(--text-2); padding:7px 9px; border-radius:6px;
border-bottom:none; text-transform:uppercase;
transition:color .15s ease, background .15s ease;
}
/* aria-current markiert die laufende Sprache. Dieselbe Angabe liest auch ein
Screenreader vor — eine zusaetzliche Klasse waere doppelt gepflegt. */
.lang-switch a[aria-current]{ color:var(--navy); background:var(--paper-2); }
@media (hover:hover) and (pointer:fine){
.lang-switch a:hover{ color:var(--navy); background:var(--paper-2); }
}
.menu-btn{
display:none; background:none; cursor:pointer;
border:1px solid var(--navy); border-radius:6px;
/* 44x44: der Mindestwert, den sowohl Apple als auch die WCAG-Empfehlung
fuer Bedienelemente nennen. Vorher 40 px hoch. */
width:44px; height:44px; padding:0;
align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.menu-btn span{
display:block; width:18px; height:2px; background:var(--navy);
border-radius:1px; transition:transform .25s ease, opacity .25s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
/* ---------- Bildmarke ----------
Wie auf schoenheitsoperationen.de zweiteilig: Wortmarke und daneben das
runde Zeichen. Beide tragen width und height gegen CLS, deshalb ist
height:auto hier Pflicht — sonst behaelt die Wortmarke bei beschnittener
Breite ihre 52 px Attributhoehe und wird gestaucht. */
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand .logo-img{ height:52px; width:auto; }
.brand .brand-badge{ height:44px; width:auto; }
/* Das Fusszeilenlogo ist die helle Fassung und steht auf Navy. */
.footer-logo{ height:auto; max-width:200px; margin-bottom:14px; }
/* ---------- Schaltflaechen ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:0.6em;
text-decoration:none; font-family:var(--sans); font-weight:400;
letter-spacing:0.22em; text-transform:uppercase; font-size:0.78rem;
padding:1.05em 2.1em; border-radius:100px;
border:1px solid transparent; cursor:pointer;
transition:background .35s ease, color .35s ease, transform .3s ease,
border-color .3s ease;
}
.btn-primary{ background:var(--navy); color:var(--paper); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn:disabled{ opacity:0.6; cursor:not-allowed; }
@media (hover:hover) and (pointer:fine){
.btn-primary:hover{ background:var(--accent-dark); color:#fff; transform:translateY(-2px); }
.btn-ghost:hover{ border-color:var(--accent-dark); color:var(--accent-dark); }
}
/* Auf dunklem Grund kehrt sich der Geisterknopf um. */
.on-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
@media (hover:hover) and (pointer:fine){
.on-dark .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
}
/* ---------- Startseiten-Hero ----------
ZWEI FASSUNGEN, und die Unterscheidung ist keine Kosmetik: .hero-full legt
die Schrift ueber ein Foto und schreibt sie deshalb weiss, .hero ohne Foto
steht auf Papier und schreibt dunkel. Die weissen Regeln haengen darum
ausnahmslos an .hero-full. Standen sie an .hero, war die Startseite ohne
Hero-Bild weiss auf weiss — im Quelltext unauffaellig, im Browser sofort. */
.hero{ padding:96px 0 90px; }
.hero h1{ font-size:clamp(2.2rem, 5vw, 4rem); line-height:1.08; margin:0 0 8px; max-width:20ch; }
.hero .sub{
font-family:var(--serif); font-style:italic; font-weight:400;
font-size:1.35rem; color:var(--blue); margin:0 0 24px;
}
.hero p.lede{ font-size:1.02rem; color:var(--text-2); max-width:52ch; margin:0 0 30px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-full{
position:relative; overflow:hidden; min-height:82svh;
display:flex; align-items:flex-end;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
/* Der Verlauf traegt die Schrift. Ohne ihn steht Weiss auf einem Foto, und
der Kontrast haengt davon ab, was zufaellig im Bildausschnitt liegt. */
.hero-full::after{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(27,41,61,.10) 0%,
rgba(27,41,61,.48) 42%, rgba(27,41,61,.94) 100%);
}
.hero-content{
position:relative; z-index:2; width:100%;
max-width:1200px; margin:0 auto; padding:120px 24px 56px;
}
/* Ab hier nur noch der Fall MIT Foto. */
.hero-full h1{ color:#fff; max-width:18ch; text-shadow:0 2px 14px rgba(0,0,0,.45); }
.hero-full .sub{ color:var(--accent); text-shadow:0 1px 8px rgba(0,0,0,.4); }
.hero-full p.lede{ color:#E8EDF5; }
.hero-full .eyebrow{ color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.65); }
/* ---------- Grusswort des Arztes ----------
Steht direkt unter dem Hero der Startseite. Das Portraet traegt eigene
width/height gegen CLS; height:auto ist deshalb Pflicht, sobald die Spalte
schmaler wird als die 480 px der Datei. */
.welcome{ background:var(--paper-2); }
.welcome-grid{
display:grid; grid-template-columns:240px 1fr; gap:44px; align-items:start;
max-width:900px; margin:0 auto;
}
.welcome-portrait{ margin:0; }
.welcome-portrait img{ width:100%; height:auto; border-radius:12px; }
.welcome-text h2{ font-size:clamp(1.8rem,3.4vw,2.4rem); margin-bottom:18px; }
.welcome-text p{ color:var(--text-2); margin-bottom:14px; max-width:60ch; }
.welcome-sign{
margin-top:24px; padding-top:18px;
border-top:1px solid rgba(27,41,61,.14);
font-family:var(--serif); font-style:italic;
color:var(--navy) !important; font-size:1.05rem;
}
.welcome-sign span{
display:block; margin-top:6px; font-family:var(--sans); font-style:normal;
font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
color:var(--text-2);
}
/* ---------- Kopf der Unterseiten ---------- */
.page-hero{ padding:64px 0 40px; }
.page-hero h1{
font-size:clamp(2rem,4.6vw,3.4rem); margin:0 0 6px; max-width:20ch;
}
.page-hero .sub{
font-family:var(--serif); font-style:italic; font-size:1.2rem;
color:var(--blue); margin:0 0 18px;
}
.page-hero p{ color:var(--text-2); font-size:1rem; max-width:62ch; margin-top:14px; }
.breadcrumb{
font-family:var(--serif); font-style:italic;
font-size:0.85rem; color:var(--text-2); margin-bottom:16px;
}
.breadcrumb a{ color:var(--text-2); text-decoration:none; }
@media (hover:hover) and (pointer:fine){
.breadcrumb a:hover{ color:var(--blue); }
}
/* ---------- Kennzahlenband ---------- */
.trust{ background:var(--paper-2); padding:48px 0; }
.trust-grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;
}
.trust-grid .n{
font-family:var(--serif); font-weight:500; font-size:2.2rem; color:var(--navy);
}
.trust-grid .l{ font-size:0.85rem; color:var(--text-2); margin-top:4px; }
/* ---------- Eckdaten einer Behandlung ---------- */
.quick-facts{
background:var(--paper-2); border-radius:12px; overflow:hidden;
display:grid; grid-template-columns:repeat(4,1fr);
}
.quick-facts div{ padding:22px 20px; border-right:1px solid rgba(27,41,61,.08); }
.quick-facts div:last-child{ border-right:none; }
.quick-facts .k{
display:block; text-transform:uppercase; letter-spacing:0.14em;
font-size:0.7rem; color:var(--text-2); margin-bottom:6px; font-weight:600;
}
.quick-facts .v{ font-weight:600; font-size:1.05rem; color:var(--navy); }
/* ---------- Behandlungsliste ---------- */
.service-grid{
display:grid; grid-template-columns:1fr 1fr; gap:0 56px;
max-width:860px; margin:48px auto 0;
}
.service-col h3{
font-family:var(--serif); font-style:italic; font-size:1.4rem;
color:var(--blue); margin:0 0 18px; padding-bottom:14px;
border-bottom:1px solid var(--line);
}
.service-col ul{ list-style:none; }
.service-col li{ border-bottom:1px solid var(--line); }
.service-col a{
display:flex; justify-content:space-between; align-items:center; gap:12px;
padding:15px 2px; text-decoration:none; color:var(--navy);
font-weight:600; font-size:0.98rem;
transition:color .18s ease, padding-left .18s ease;
}
.service-col a::after{ content:"→"; color:var(--blue); font-weight:400; }
@media (hover:hover) and (pointer:fine){
.service-col a:hover{ color:var(--blue); padding-left:6px; }
}
/* ---------- Bildergalerie vorher/nachher ----------
Das Kernstueck dieser Website. Ein Paar ist EINE Einheit: die beiden
Haelften duerfen nie in verschiedene Zeilen rutschen, sonst steht ein
Nachher-Bild neben dem Vorher-Bild eines anderen Falls. Deshalb traegt
das Paar ein eigenes Raster mit zwei festen Spalten und bleibt auch auf
dem Telefon zweispaltig — nebeneinander ist der ganze Sinn des
Vergleichs. */
.ba-grid{
display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:32px; margin-top:40px;
}
.ba-pair{
display:grid; grid-template-columns:1fr 1fr; gap:8px;
margin:0; min-width:0;
}
.ba-pair img{
width:100%; height:auto; border-radius:8px; background:var(--paper-2);
}
.ba-pair figcaption{
grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:8px;
font-family:var(--serif); font-style:italic;
font-size:0.85rem; color:var(--text-2); margin-top:8px;
}
.ba-pair figcaption span{ text-align:center; }
/* ---------- Ablauf in Schritten ---------- */
.steps{
display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
margin-top:48px; counter-reset:step;
}
.step::before{
counter-increment:step; content:counter(step);
font-family:var(--serif); font-weight:500; font-size:2.6rem;
color:var(--accent-dark); display:block; margin-bottom:12px; line-height:1;
}
.step h3{ font-family:var(--sans); font-weight:700; font-size:1rem; margin-bottom:8px; }
.step p{ font-size:0.92rem; color:var(--text-2); }
/* ---------- Fragen und Antworten ---------- */
.faq-list{ margin-top:40px; }
details{ border-bottom:1px solid var(--line); padding:20px 0; }
details:first-child{ border-top:1px solid var(--line); }
summary{
cursor:pointer; font-family:var(--sans); font-weight:600; font-size:1.02rem;
color:var(--navy); list-style:none;
display:flex; justify-content:space-between; align-items:center; gap:16px;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
content:"+"; font-family:var(--sans); font-size:1.4rem; color:var(--blue);
font-weight:400; flex-shrink:0;
}
details[open] summary::after{ content:"–"; }
details p{ margin-top:14px; font-size:0.96rem; color:var(--text-2); max-width:70ch; }
/* ---------- Zitat ---------- */
.quote{ background:var(--navy); color:#fff; }
.quote-inner{ max-width:780px; margin:0 auto; text-align:center; }
blockquote{
font-family:var(--serif); font-style:italic; font-weight:500;
font-size:clamp(1.3rem,2.6vw,1.75rem); line-height:1.5;
margin:0 0 22px; color:#fff;
}
.quote-inner cite{
font-style:normal; font-weight:600; letter-spacing:0.1em;
color:var(--accent); font-size:0.85rem; text-transform:uppercase;
}
/* ---------- Abschluss-Aufforderung ---------- */
.cta-final{ text-align:center; }
.cta-final h2{ font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:16px; }
.cta-final p{ color:var(--text-2); max-width:52ch; margin:0 auto 30px; }
.cta-final .hero-ctas{ justify-content:center; }
.cta-link{
font-family:var(--sans); font-size:0.8rem; font-weight:600;
letter-spacing:0.16em; text-transform:uppercase;
color:var(--blue); text-decoration:none;
border-bottom:1px solid transparent; padding-bottom:4px;
transition:border-color .2s ease;
}
@media (hover:hover) and (pointer:fine){
.cta-link:hover{ border-color:var(--blue); }
}
.cta-banner .cta-link{ color:var(--accent); }
.cta-banner{ background:var(--navy); text-align:center; }
.cta-banner h2{ color:#fff; }
/* ---------- Kontakt und Formular ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
.form-field{ margin-bottom:20px; }
.form-field label{
display:block; font-size:0.72rem; font-weight:600; letter-spacing:0.12em;
text-transform:uppercase; color:var(--text-2); margin-bottom:7px;
}
.form-field input, .form-field select, .form-field textarea{
width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:10px;
font-family:var(--sans); font-size:0.98rem; color:var(--navy); background:#fff;
transition:border-color .2s ease, box-shadow .2s ease;
}
/* Maus- und Touchfokus: nur die Rahmenfarbe, kein Ring. */
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
outline:none; border-color:var(--accent-dark);
box-shadow:0 0 0 4px rgba(110,156,226,.18);
}
/* Tastaturfokus braucht einen sichtbaren Ring (WCAG 2.4.7). Ohne diese Regel
gewinnt das outline:none darueber durch hoehere Spezifitaet. */
.form-field input:focus-visible, .form-field select:focus-visible,
.form-field textarea:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.form-field textarea{ resize:vertical; min-height:140px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-consent{
display:flex; gap:12px; align-items:flex-start;
font-size:0.84rem; color:var(--text-2); margin:24px 0;
}
.form-consent input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--accent-dark); }
.form-note{ font-size:0.8rem; color:var(--text-2); margin-top:10px; }
.form-status{ padding:14px 16px; border-radius:10px; font-size:0.9rem; margin-bottom:20px; display:none; }
.form-status.show{ display:block; }
.form-status.success{ background:#E7F6EC; color:var(--green); border:1px solid #BEE6CB; }
.form-status.error{ background:#FBE9E9; color:#B3261E; border:1px solid #F3C6C6; }
.contact-info-card{
background:var(--paper-2); border-radius:16px; padding:32px;
}
.contact-info-card h2{ font-size:1.3rem; margin-bottom:18px; }
.contact-info-row{
display:flex; gap:14px; padding:14px 0;
border-top:1px solid rgba(27,41,61,.10); font-size:0.95rem;
}
.contact-info-row:first-of-type{ border-top:none; padding-top:0; }
.contact-info-row .label{ color:var(--text-2); min-width:90px; }
.contact-info-row a{ color:var(--navy); text-decoration:none; font-weight:600; }
/* ---------- Rechtstexte und Fliesstextseiten ---------- */
.legal-content{ max-width:820px; }
.legal-content h2{ font-size:1.5rem; margin:44px 0 14px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size:1.15rem; margin:26px 0 10px; }
.legal-content p{ font-size:1rem; color:var(--text-2); margin-bottom:14px; }
.legal-content ul, .legal-content ol{ margin:0 0 16px 22px; color:var(--text-2); }
.legal-content li{ margin-bottom:8px; }
.legal-content a{ color:var(--blue); text-decoration:underline; }
/* Eine breite Tabelle darf nur SICH SELBST scrollen, nie die Seite.
display:block ist noetig, damit overflow an einem