/* ruumero.ch — Landing + Kontakt. Hell/Dunkel ueber Tokens.
------------------------------------------------------------------
Regeln, die hier nicht verhandelbar sind:
- JEDE Farbe steht genau einmal, naemlich in einem der beiden
Token-Blocks. Wer eine Hex-Zahl in die HTML-Datei schreibt, bricht
den Hellmodus, ohne es zu merken (die alte Landing hatte 166).
- Bildpanels (Hero) tragen einen Schleier, dessen Farbe MIT dem Theme
wandert — genau wie auf der Referenz-Seite (bg-white/75 dark:bg-black/75).
Darum eigene Tokens --img-veil* / --on-img*, die in beiden Blocks
stehen. Nicht wieder auf "immer dunkel" zurueckbauen.
- color-scheme wandert mit. Ohne das toent Chrome auf Android unser
Lime ins Graue (genau dafuer stand dunkel).
- ES GIBT GENAU ZWEI GRUENTOENE, und beide stehen unten:
--lime (#a0e10f, das Gruen aus dem Logo) und --lime-deep (#557f05,
der eine dunklere Ton fuer Kontrast). Vorher waren es fuenf
(#a0e10f, #c6f26e, #79aa08, #5f8a04, #8ecb0b) plus gruenstichige
Grautoene — auf der Seite sah man das als Farbsalat. Die Regel ist
jetzt: FLAECHEN (Knopf, Strahl, Badge, Haken, Symbolring) tragen
immer --lime mit near-black Text, TEXT (Kicker, Links, Zahlen,
FAQ-Zeichen) traegt --lime-text, und das zeigt im Dunkelmodus auf
--lime, im Hellmodus auf --lime-deep (dort braucht Text 4.5:1 auf
Weiss, #a0e10f liefert nur 1.7:1). Kein dritter Gruenton. Hover
aendert darum die HELLIGKEIT (filter), nicht die Farbe.
- Die Grautoene sind NEUTRAL. Sie waren vorher gruenstichig
(#0b0d0a, #111310, #171a15, #f4f6f1, #f7f9f4, #15180f) — das zaehlt
fuers Auge als weitere Gruentoene. Nicht zurueckbauen.
*/
:root {
--lime:#a0e10f; /* Logo-Lime — der EINE Akzent */
--lime-deep:#557f05; /* der EINZIGE zweite Gruenton (4.75:1 auf Weiss) */
--lime-text:var(--lime); /* Lime als TEXT: im Dunkeln das Original */
--lime-ink:#070707; /* auf Lime-Flaeche immer near-black (Brand-Regel) */
--lime-soft:rgba(160,225,15,0.12);
--lime-glow:rgba(160,225,15,0.38);
--bg:#070707;
--bg-2:#0b0b0b;
--card:#111111;
--card-2:#171717;
--head-bg:rgba(7,7,7,0.72);
--panel-bg:rgba(255,255,255,0.08);
--line:rgba(255,255,255,0.09);
--line-2:rgba(255,255,255,0.16);
--h:#ffffff;
--text:#d7d7d7;
--muted:#9e9e9e;
--img-veil:linear-gradient(180deg,rgba(7,7,7,0.55),rgba(7,7,7,0.88));
--img-veil-side:linear-gradient(90deg,rgba(7,7,7,0.92) 0%,rgba(7,7,7,0.72) 45%,rgba(7,7,7,0.25) 100%);
--on-img-h:#ffffff;
--on-img-text:#d7d7d7;
--shadow:0 18px 50px rgba(0,0,0,0.45);
--logo-dark:none;
--logo-light:block;
color-scheme:dark;
}
html[data-theme="light"] {
/* --lime wird hier ABSICHTLICH NICHT ueberschrieben: es bleibt auch auf
Weiss das Logo-Lime, weil es dort FLAECHE ist (Knopf, Strahl, Ring)
und near-black Text traegt. Nur als TEXT wechselt es auf --lime-deep,
sonst faellt der Kontrast auf 1.7:1. Dadurch steht #a0e10f genau
EINMAL im ganzen Stylesheet. */
--lime-text:var(--lime-deep);
--lime-ink:#070707;
--lime-soft:rgba(160,225,15,0.18);
--lime-glow:rgba(160,225,15,0.34);
--bg:#ffffff;
--bg-2:#f5f5f5;
--card:#ffffff;
--card-2:#f8f8f8;
--head-bg:rgba(255,255,255,0.86);
--panel-bg:rgba(7,7,7,0.06);
--line:rgba(7,7,7,0.12);
--line-2:rgba(7,7,7,0.22);
--h:#141414;
--text:#2e2e2e;
--muted:#5f5f5f;
--img-veil:linear-gradient(180deg,rgba(255,255,255,0.68),rgba(255,255,255,0.90));
--img-veil-side:linear-gradient(90deg,rgba(255,255,255,0.93) 0%,rgba(255,255,255,0.78) 45%,rgba(255,255,255,0.30) 100%);
--on-img-h:#141414;
--on-img-text:#2e2e2e;
--shadow:0 16px 44px rgba(7,7,7,0.10);
--logo-dark:block;
--logo-light:none;
color-scheme:light;
}
/* Hier standen zwei Hellmodus-Sonderfaelle fuer .btn-lime mit eigenen
Hex-Werten (#a0e10f / #8ecb0b). Sie sind weg: --lime ist jetzt in
BEIDEN Themes das Logo-Lime und --lime-ink in beiden near-black, der
Knopf braucht also keinen Sonderfall mehr. */
/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
background:var(--bg);color:var(--text);
font-family:'Roboto',sans-serif;min-height:100vh;overflow-x:hidden;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--lime-text);text-decoration:none}
h1,h2,h3{font-family:'Atkinson Hyperlegible',sans-serif;color:var(--h)}
img{max-width:100%}
::selection{background:var(--lime);color:var(--lime-ink)}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.sec{padding:clamp(64px,9vw,110px) 0;scroll-margin-top:80px}
.sec-alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kicker{font-size:13px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--lime-text);margin-bottom:16px}
.h1{font-weight:700;font-size:clamp(44px,6.4vw,76px);line-height:1.0;letter-spacing:-0.025em;margin:0 0 24px}
.h2{font-weight:700;font-size:clamp(30px,4vw,46px);line-height:1.06;letter-spacing:-0.02em;margin:0 0 18px}
.h3{font-weight:700;font-size:21px;line-height:1.3;margin:0 0 10px}
.lead{font-size:19px;line-height:1.62;color:var(--text);margin:0 0 30px}
.p{font-size:16px;line-height:1.68;color:var(--muted);margin:0}
.small{font-size:14px;line-height:1.6;color:var(--muted)}
.center{text-align:center}
/* ---------- Knoepfe ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;padding:15px 30px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn-sm{font-size:15px;padding:11px 22px}
.btn-lime{background:var(--lime);color:var(--lime-ink);transition:filter .18s,box-shadow .18s,transform .18s}
/* Hover hellt auf statt die Farbe zu wechseln — so bleibt es bei zwei
Gruentoenen im ganzen Stylesheet (vorher kamen #c6f26e, #5f8a04 und
#8ecb0b allein aus Hover-Zustaenden). */
.btn-lime:hover{filter:brightness(1.08);box-shadow:0 0 18px 3px var(--lime-glow);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--h);border-color:var(--line-2);transition:border-color .18s,color .18s}
.btn-ghost:hover{border-color:var(--lime-text);color:var(--lime-text)}
.btn-onimg{background:var(--panel-bg);color:var(--on-img-h);border-color:var(--line-2)}
.lnk{color:var(--muted);transition:color .18s}
.lnk:hover{color:var(--lime-text)}
.navlnk{color:var(--text);font-size:15px;font-weight:500;white-space:nowrap;transition:color .18s}
.navlnk:hover{color:var(--lime-text)}
/* ---------- Kopfzeile ---------- */
header{position:sticky;top:0;z-index:50;background:var(--head-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header .bar{width:100%;max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
header .brand{display:flex;align-items:center;gap:10px;flex:none}
header .brand img{height:26px;width:auto}
/* Reihenfolge und Spezifitaet sind hier der ganze Trick: vorher stand
oben `header .brand img{display:block}` (0,1,2) und hat die beiden
Umschalter (0,1,0) ueberstimmt — es waren BEIDE Logos sichtbar.
Darum die Umschalter jetzt ebenfalls mit Element-Selektor. */
img.logo-on-dark{display:var(--logo-light)}
img.logo-on-light{display:var(--logo-dark)}
.nav-center{display:flex;align-items:center;gap:30px;flex:1;justify-content:center}
.hdr-right{display:flex;align-items:center;gap:14px;flex:none}
/* Hell/Dunkel-Umschalter */
.tsw{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line-2);border-radius:9px;background:transparent;color:var(--text);cursor:pointer;transition:border-color .18s,color .18s;flex:none}
.tsw:hover{border-color:var(--lime-text);color:var(--lime-text)}
.tsw .ico-sun{display:var(--logo-light)} /* dunkel aktiv -> Sonne anbieten */
.tsw .ico-moon{display:var(--logo-dark)}
/* Sprachumschalter DE/EN. Gleiche Huelle wie .tsw, nur breiter und mit
Text statt Icon. BEIDE Beschriftungen stehen im DOM, sichtbar ist je
Sprache genau eine. Umgeschaltet wird ueber die Klasse .ruu-en, die
i18n.js synchron im auf setzt — also vor dem ersten
Paint und ohne dass hier Javascript laufen muss. Derselbe Mechanismus
wie bei den beiden Logo-Dateien. */
.lsw{width:auto;min-width:38px;padding:0 9px;font-family:'Roboto',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.06em;line-height:1}
/* Die beiden Regeln VERSTECKEN nur — sie setzen nirgends display:inline
oder display:block. Sonst muesste man den Anzeigewert pro Einbauort neu
festlegen (Knopf = inline, Menueeintrag im Handy-Panel = block) und
waere beim naechsten Einbauort schon wieder falsch. So behaelt jedes
Element seinen natuerlichen Anzeigewert. */
.ruu-en .l-en{display:none}
html:not(.ruu-en) .l-de{display:none}
/* Handy-Navigation (reines , funktioniert ohne JS) */
.mnav{display:none;flex:none;position:static}
.mnav>summary{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line-2);border-radius:9px;color:var(--text);cursor:pointer}
.mnav[open]>summary{border-color:var(--lime-text);color:var(--lime-text)}
.mnav-panel{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:6px 16px 14px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.mnav-panel a{padding:14px 4px;font-size:16px;font-weight:600;color:var(--text);border-bottom:1px solid var(--line)}
.mnav-panel a:last-child{border-bottom:none;color:var(--lime-text)}
/* ---------- Bildpanels ---------- */
.hero{position:relative;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero .veil{position:absolute;inset:0;background:var(--img-veil-side)}
.hero .inner{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:clamp(86px,12vw,150px) 24px clamp(72px,10vw,120px)}
.hero .box{max-width:680px}
.hero .h1,.onimg .h2{color:var(--on-img-h)}
.hero .lead,.onimg .lead{color:var(--on-img-text)}
.onimg{position:relative;overflow:hidden}
.onimg>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.onimg .veil{position:absolute;inset:0;background:var(--img-veil)}
.onimg .inner{position:relative;width:100%;max-width:760px;margin:0 auto;padding:clamp(72px,10vw,120px) 24px;text-align:center}
/* ---------- Vertrauensband ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.trust>div{background:var(--card);padding:26px 22px;text-align:center}
.trust .n{font-family:'Atkinson Hyperlegible',sans-serif;font-weight:700;font-size:30px;color:var(--lime-text);line-height:1.1}
.trust .t{font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}
/* ---------- Emotionsblock (Bild + Text im Wechsel) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.split.rev .pic{order:2}
.split .pic{border-radius:14px;overflow:hidden;min-height:380px;position:relative;box-shadow:var(--shadow)}
.split .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ---------- Kundenreise mit Fortschrittsstrahl ----------
Der Strahl ist eine senkrechte Spur mit einer Lime-Fuellung, deren
Hoehe am Scrollfortschritt haengt; die Symbole kippen von grau auf
Lime, sobald die Bildschirmmitte sie passiert. Position und Hoehe der
Spur setzt site.js aus der TATSAECHLICHEN Lage des ersten/letzten
sichtbaren Symbols — darum hier nur width/Farbe, kein left/top.
Ohne JS bleibt die Spur unsichtbar (leer) und die Reise liest sich
als normale Abschnittsfolge.
WICHTIG — die Spur ist in SEGMENTE zerlegt, eines zwischen je zwei
Symbolen. Eine durchgehende Linie lief sichtbar DURCH die Symbole
(das aktive Symbol hat eine halbtransparente Lime-Flaeche, da
schimmert sie durch, und am Rand sah man sie ein- und austreten).
Jetzt hoert der Strahl am Symbolrand auf und setzt dahinter wieder
an. Die Segmente baut site.js aus den echten Symbol-Rechtecken,
deshalb steht hier kein top/height. Kein overflow:hidden auf dem
Segment — das wuerde den Lime-Schein der Fuellung abschneiden. */
.stepper{position:relative}
.stepper-track{position:absolute;left:0;top:0;width:2px;height:0;z-index:0;pointer-events:none}
.stepper-seg{position:absolute;left:0;width:100%;background:var(--line-2);border-radius:2px}
.stepper-seg>i{display:block;width:100%;height:0;background:var(--lime);border-radius:2px;box-shadow:0 0 14px 1px var(--lime-glow);transition:height .25s ease-out}
.stepper-steps{display:flex;flex-direction:column;gap:clamp(56px,8vw,104px)}
.stepper-step{display:grid;grid-template-columns:1fr 112px 1fr;gap:clamp(20px,3.4vw,44px);align-items:center}
/* grid-row:1 ist PFLICHT, nicht Kosmetik: mit NUR grid-column schiebt die
automatische Platzierung die drei Kinder in DREI Zeilen untereinander
(Text Zeile 1, Symbol Zeile 2, Bild Zeile 3) — genau so stand die
Kundenreise beim ersten Anlauf. Spalte ohne Zeile ist kein Layout. */
.stepper-step .st-text{grid-column:1;grid-row:1}
.stepper-step .st-ico{grid-column:2;grid-row:1;display:flex;justify-content:center}
.stepper-step .st-pic{grid-column:3;grid-row:1}
.stepper-step.rev .st-text{grid-column:3;grid-row:1}
.stepper-step.rev .st-pic{grid-column:1;grid-row:1}
.stepper-step .st-pic img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}
.stepper-icon{position:relative;z-index:2;flex:none;width:72px;height:72px;border-radius:50%;
background:var(--bg-2);border:3px solid var(--line-2);color:var(--muted);
display:flex;align-items:center;justify-content:center;
transition:border-color .3s,color .3s,background .3s,transform .3s,box-shadow .3s}
.stepper-icon.active{border-color:var(--lime);color:var(--lime-text);background:var(--lime-soft);transform:scale(1.1);box-shadow:0 0 22px 2px var(--lime-glow)}
.st-step-no{font-size:13px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.stepper-step.on .st-step-no{color:var(--lime-text)}
/* ---------- Abschluss-Karte ---------- */
.closer{background:var(--card-2);border:1px solid var(--line);border-radius:18px;padding:clamp(34px,6vw,72px) clamp(22px,4vw,48px);text-align:center}
/* ---------- Schritte ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 26px}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--lime);color:var(--lime-ink);font-family:'Atkinson Hyperlegible',sans-serif;font-weight:700;font-size:17px;margin-bottom:16px}
/* Fussnoten-Stern im Fliesstext: als Marke erkennbar, aber kein Link-Look,
der den Satz zerreisst. vertical-align statt , damit die Zeilenhoehe
im Karten-Raster nicht springt. */
.fn-mark{color:var(--lime-text);text-decoration:none;font-weight:700;font-size:.85em;vertical-align:super;line-height:0;padding:0 1px}
.fn-mark:hover,.fn-mark:focus-visible{text-decoration:underline}
.fn-note{margin:22px 0 0;color:var(--muted);font-size:14px;line-height:1.6}
/* ---------- Produkt / Preise ---------- */
.hero-prod{background:var(--card);border:1px solid var(--line-2);border-radius:18px;padding:clamp(28px,4vw,48px);box-shadow:var(--shadow)}
.price-big{font-family:'Atkinson Hyperlegible',sans-serif;font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1.05;color:var(--h)}
.ticks{display:flex;flex-direction:column;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.ticks li{display:flex;gap:12px;font-size:16px;line-height:1.55;color:var(--text)}
.ticks li::before{content:"";flex:none;width:19px;height:19px;margin-top:2px;border-radius:50%;background:var(--lime);
-webkit-mask:url("data:image/svg+xml;utf8,") center/15px no-repeat, linear-gradient(#000,#000);
-webkit-mask-composite:destination-out;mask-composite:exclude}
.addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.addon{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:22px 20px}
.addon .pr{font-family:'Atkinson Hyperlegible',sans-serif;font-weight:700;font-size:24px;color:var(--h);margin-top:6px}
/* ---------- FAQ ---------- */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;cursor:pointer}
.faq summary span.q{font-family:'Atkinson Hyperlegible',sans-serif;font-weight:700;font-size:19px;color:var(--h)}
.faq .ico{flex:none;width:24px;color:var(--lime-text);font-size:26px;line-height:1;transition:transform .25s;text-align:center}
.faq details[open] .ico{transform:rotate(45deg)}
.faq .a{padding:0 4px 24px;color:var(--muted);font-size:16px;line-height:1.65}
.faq .a strong{color:var(--text)}
/* ---------- Formular ---------- */
.form{display:flex;flex-direction:column;gap:16px}
.form label{display:block;font-size:14px;font-weight:700;color:var(--h);margin-bottom:7px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{
width:100%;background:var(--card-2);border:1px solid var(--line-2);border-radius:8px;
padding:13px 14px;color:var(--h);font-family:inherit;font-size:16px}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--lime-text)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.note{border-radius:10px;padding:14px 16px;font-size:15px;line-height:1.55;border:1px solid var(--line-2);background:var(--card-2);color:var(--text)}
.note-ok{border-color:var(--lime-text);color:var(--h)}
.note-err{border-color:#e05252;color:var(--h)}
/* ---------- Ueber uns: die beiden Gruender ----------
Portraits im VOLLEN Originalausschnitt, 1200x888 (Quelle 1458x1079).
Vorher lagen hier quadratische 800x800-Dateien — der Beschnitt steckte
also in den JPGs, nicht im CSS, und wirkte viel zu nah herangezoomt
(27.10.2026 von Patric reklamiert).
WICHTIG: aspect-ratio muss dem Verhaeltnis der Dateien entsprechen,
sonst schneidet object-fit:cover erneut zu. Neue Fotos entweder im
gleichen Verhaeltnis liefern oder diese Zeile mit anpassen.
"height:auto" ist PFLICHT und darf nicht weg: die Attribute
width="1200" height="888" im sind presentational hints, also
echtes CSS (width:1200px;height:888px). "width:100%" ueberschreibt
nur die Breite — die Hoehe blieb bei 888px stehen und hat das Bild
auf 362x888 gezerrt, obwohl aspect-ratio korrekt gesetzt war
(live gemessen 27.10.2026). */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(20px,3.4vw,34px);max-width:760px}
.team-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.team-card>img{display:block;width:100%;height:auto;aspect-ratio:1200/888;object-fit:cover}
.team-card .body{padding:22px 22px 26px}
.team-card .nm{font-family:'Atkinson Hyperlegible',sans-serif;font-weight:700;font-size:21px;line-height:1.25;color:var(--h);margin:0}
.team-card .ro{font-size:12.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime-text);margin:9px 0 0}
/* ---------- Google-Rezensionen ----------
Inhalt kommt aus /assets/data/reviews.json und wird von site.js
gerendert — ein Inline-Script waere durch die CSP ausgeschlossen.
Lange Rezensionen werden GEKUERZT ANGEZEIGT, aber nie gekuerzt
AUSGELIEFERT: .rev-txt ist lediglich geklemmt, der Knopf hebt die
Klemme auf. Eine mit "…" abgeschnittene Rezension waere eine
veraenderte Fremdaussage. */
.gline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:15px;color:var(--muted)}
.gline b{color:var(--h);font-weight:700}
.stars{display:inline-flex;align-items:center;gap:2px;color:var(--lime-text)}
.stars svg{width:17px;height:17px;fill:currentColor}
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;align-items:start}
/* .revs .rev — NICHT auf ".rev" allein verkuerzen (27.10.2026 live kaputt
gegangen): ".rev" ist auf der Startseite seit jeher der Seiten-Wechsler
von ".stepper-step" und ".split". Als die Rezensions-Karte hier als
blankes ".rev" dazukam, gewann sie wegen spaeterer Position im File und
hat den Schritten 2 und 4 "display:flex;flex-direction:column" plus
Kartenrahmen verpasst — das Grid kippte, Text und Bild liefen ueber die
volle Breite und das Bild legte sich ueber die leuchtende Lime-Spur.
Die Verschachtelung bindet die Karte an den Container #revList.revs. */
.revs .rev{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 22px;display:flex;flex-direction:column}
.rev-txt{font-size:15.5px;line-height:1.66;color:var(--text);margin:13px 0 0;white-space:pre-line}
.rev-txt.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;line-clamp:9;overflow:hidden}
.rev-more{align-self:flex-start;margin:12px 0 0;padding:0;border:0;background:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--lime-text);cursor:pointer}
.rev-more:hover{text-decoration:underline}
.rev-who{margin:16px 0 0;font-size:14px;color:var(--muted)}
.rev-who b{color:var(--h);font-weight:700}
/* ---------- Footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--line)}
footer .flogo{height:26px;width:auto;margin-bottom:18px}
footer .cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;margin-bottom:44px}
footer .ttl{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--h);margin-bottom:16px}
footer .list{display:flex;flex-direction:column;gap:11px;font-size:15px}
footer .base{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--line)}
/* ---------- Schmale Displays ---------- */
@media(max-width:900px){
.split{grid-template-columns:1fr}
.split.rev .pic{order:0}
.split .pic{min-height:240px}
/* Auf schmal wandert das Symbol in eine eigene linke Spalte, Text und
Bild stapeln rechts daneben. EIN Symbolsatz fuer beide Breiten —
die Referenz hat ihn doppelt im Markup gehalten und musste darum
unsichtbare Symbole herausfiltern. */
.stepper-steps{gap:48px}
.stepper-step{grid-template-columns:72px 1fr;gap:16px 18px;align-items:start}
.stepper-step .st-ico,.stepper-step.rev .st-ico{grid-column:1;grid-row:1;justify-content:flex-start}
.stepper-step .st-text,.stepper-step.rev .st-text{grid-column:2;grid-row:1}
.stepper-step .st-pic,.stepper-step.rev .st-pic{grid-column:2;grid-row:2}
.stepper-icon{width:56px;height:56px;border-width:2px}
}
@media(max-width:820px){
.nav-center{display:none}
.mnav{display:block}
}
@media(max-width:520px){.hide-sm{display:none}}
@media(max-width:640px){
.wrap{padding:0 16px}
header .bar{padding:10px 16px;gap:10px}
header .brand img{height:22px}
header .hdr-cta{display:none}
.h1{font-size:clamp(34px,8.4vw,44px)}
.h2{font-size:clamp(26px,6.6vw,34px)}
.lead{font-size:17px}
.btn{padding:14px 20px;flex:1 1 auto;justify-content:center}
.form .row{grid-template-columns:1fr}
.faq summary{padding:18px 2px;gap:12px}
.faq summary span.q{font-size:17px}
.faq .a{font-size:15.5px}
section{overflow-x:clip}
}