/*
* RH Tonspur - gescoptes Stylesheet (Feature-Seite Keramik-Verwaltung, /keramik-verwaltung/).
*
* WICHTIG: Diese Datei ist bewusst KOMPLETT ASCII (keine Umlaute/Sonderzeichen in
* Kommentaren!). Grund: Wird die CSS vom Server/Optimierer nicht als UTF-8 behandelt,
* verschluckt ein nicht-UTF-8-sicherer Minifier am kaputten Mehrbyte-Kommentar die
* direkt folgende erste Regel (.rh-page{--tokens}) -> dann fehlen live ALLE Token-Styles.
* Bitte ASCII-only halten.
*
* QUELLE: aufgebaut nach rh-bezahlung.css (der bestehenden Feature-Seite). System: CLAUDE.md.
*
* Konventionen:
* - Design-Tokens liegen auf ".rh-page" statt ":root" -> Salient bleibt unberuehrt.
* - JEDER Selektor ist unter ".rh-page" gescopt (kein globales CSS-Leck).
* - Marken-Fonts per im (Template), NICHT per @import (Optimierer-sicher).
* - Mockups sind rein CI-farbig: Signalgruen = abholbereit/aktiv, neutrale Flaeche +
* Graustufe = wartet. Die Amber-/Blau-Statusfarben der App sind hier bewusst NICHT
* uebernommen (CLAUDE.md Abschnitt 6/14: keine neuen Akzentfarben).
*
* Desktop-first; Breakpoints am Dateiende (max-width).
*/
/* ============================================================
Design Tokens (auf .rh-page gescopt, nicht :root)
============================================================ */
.rh-page{
/* Brand */
--rh-green-deep:#173528; --rh-green-deep-700:#1F4A37; --rh-green-deep-900:#0E2419;
--rh-green:#A3F698; --rh-green-300:#C6F9BF; --rh-green-100:#E9FCE5; --rh-green-600:#7CE775;
--rh-purple:#0C0533;
/* Neutrals */
--rh-white:#FFFFFF; --rh-paper:#F5F6F4; --rh-line:#E2E5E0; --rh-line-dark:#2B4A3B;
--rh-grey-500:#8B8E99; --rh-grey-400:#B4B7BD;
/* Semantic */
/* --muted: dunkler als --rh-grey-500 (#8B8E99, ~3,3:1 -> WCAG-Fail). #5F6470 ~6:1. */
--ink:var(--rh-purple); --body:#34303F; --muted:#5F6470;
--on-dark:#FFFFFF; --on-dark-muted:#B7CABF; --rh-error:#B3261E;
/* Type */
--font-display:'Clash Display','General Sans',system-ui,sans-serif;
--font-sans:'General Sans',system-ui,-apple-system,Segoe UI,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
/* Radius & shadow */
--r-md:18px; --r-lg:28px; --r-xl:40px; --r-pill:999px;
--shadow-sm:0 1px 2px rgba(12,5,51,.06),0 1px 1px rgba(12,5,51,.04);
--shadow-md:0 8px 24px rgba(12,5,51,.08);
--shadow-lg:0 24px 60px rgba(12,5,51,.12);
--shadow-glow:0 12px 40px rgba(163,246,152,.35);
--ring:0 0 0 3px rgba(163,246,152,.55); /* gruener Fokus-Ring (CLAUDE.md) */
/* Verlauf hinter Foto-Kacheln: fehlt ein Bild, bleibt eine bewusste Flaeche stehen. */
--rh-tile:linear-gradient(155deg,#2F7A4E 0%,#173528 100%);
font-family:var(--font-sans);color:var(--ink);background:var(--rh-white);
/* Full-Bleed: aus Salients zentriertem Content-Container ausbrechen. Reines CSS
greift nur bei symmetrischer Zentrierung -> das Template ergaenzt eine JS-Korrektur,
die die echte Position misst. Dies hier ist der No-JS-Fallback. */
width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
/* clip (nicht hidden!): klippt den 100vw-Fallback-Ueberlauf, macht .rh-page aber
NICHT zum Scroll-Container -> position:sticky bliebe sonst kaputt (latent). */
overflow-x:clip;-webkit-font-smoothing:antialiased;
}
/* Restlichen horizontalen Scroll durch den Full-Bleed unterbinden (nur auf RH-Seiten). */
body.rh-fullwidth{overflow-x:clip;}
/* ============================================================
Base (gescopt)
============================================================ */
.rh-page, .rh-page *{box-sizing:border-box;}
.rh-page ::selection{background:var(--rh-green);color:var(--rh-green-deep);}
.rh-page img{max-width:100%;display:block;}
.rh-page a{color:inherit;}
/* Layout */
.rh-page .rh-section{padding:96px 32px;}
/* padding-top mit Luft fuer das Phone: Es ragt rund 90px ueber die Oberkante des
Fotos hinaus (bottom:-52px bei 622px Geraetehoehe vs. 448px Foto). */
.rh-page .rh-section--hero{padding:124px 32px 96px;background:radial-gradient(125% 120% at 75% 100%,#235540 0%,#173528 52%,#0E2419 100%);color:var(--on-dark);}
.rh-page .rh-section--cta{padding:40px 32px 110px;}
.rh-page .rh-section--muted{background:var(--rh-paper);}
.rh-page .rh-section--dark{background:var(--rh-green-deep);color:var(--on-dark);}
.rh-page .rh-container{max-width:1160px;margin:0 auto;}
.rh-page .rh-center{text-align:center;}
/* Nur fuer Screenreader (visuell versteckte Section-Ueberschriften). */
.rh-page .rh-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Type */
.rh-page .rh-eyebrow{font-family:var(--font-mono);font-weight:600;font-size:12px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.rh-page .rh-eyebrow--green{color:var(--rh-green);}
.rh-page .rh-h1{font-family:var(--font-display);font-weight:700;font-size:60px;line-height:1.02;letter-spacing:-.02em;margin:20px 0 0;}
.rh-page .rh-h2{font-family:var(--font-display);font-weight:700;font-size:44px;line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:16px 0 0;}
.rh-page .rh-h3{font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px;}
.rh-page .rh-h2--dark,.rh-page .rh-h3--dark{color:var(--on-dark);}
.rh-page .rh-lead{font-family:var(--font-sans);font-size:19px;line-height:1.55;margin:22px 0 0;}
.rh-page .rh-body{font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--muted);margin:0;}
.rh-page .rh-mark{background:var(--rh-green);color:var(--rh-green-deep);padding:.02em .14em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.rh-page .rh-section--hero .rh-lead{color:var(--on-dark-muted);}
/* Buttons */
.rh-page .rh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-mono);font-weight:600;font-size:15px;line-height:1.2;letter-spacing:.02em;text-decoration:none;border:1.5px solid transparent;border-radius:var(--r-pill);padding:16px 26px;cursor:pointer;transition:background .18s ease,transform .12s ease,box-shadow .18s ease;}
.rh-page .rh-btn:active{transform:scale(.97);}
.rh-page .rh-btn--primary{background:var(--rh-green);color:var(--rh-green-deep);}
.rh-page .rh-btn--primary:hover{background:var(--rh-green-600);}
/* :not(:active) laesst das Press-Feedback scale(.97) beim Druecken gewinnen. */
.rh-page .rh-btn--primary:hover:not(:active){transform:translateY(-1px);box-shadow:var(--shadow-glow);}
.rh-page .rh-btn--ghost{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.28);}
.rh-page .rh-btn--ghost:hover{background:rgba(255,255,255,.08);}
.rh-page .rh-btn--outline{background:transparent;color:var(--ink);border-color:var(--rh-line);}
.rh-page .rh-btn--outline:hover{background:var(--rh-paper);}
/* Fokus (a11y): gruener Marken-Ring statt UA-Default. */
.rh-page a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px;}
.rh-page .rh-btn:focus-visible{outline:none;box-shadow:var(--ring);}
.rh-page .rh-faq summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-md);}
/* ============================================================
Hero (Text + Foto + Flag-Mark + Handy-Mockup)
============================================================ */
/* Rechte Spalte etwas breiter als frueher (480px): Seit das Hero-Phone das grosse
3D-Geraet der Branchenseiten ist, braucht es Platz neben dem Foto - sonst deckt es
das Regal-Foto fast komplett zu. */
.rh-page .rh-hero__grid{display:grid;grid-template-columns:1fr 520px;gap:48px;align-items:center;}
.rh-page .rh-hero__trust{font-family:var(--font-mono);font-size:12px;line-height:1.5;letter-spacing:.04em;color:var(--on-dark-muted);margin:30px 0 0;}
.rh-page .rh-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
/* min-height haelt die Spalte hoch genug fuer das Phone: Es haengt 52px unter dem
Foto und ist 622px hoch, ragt also oben heraus, wenn die Textspalte kurz ausfaellt
(kuerzere H1 auf sehr breiten Schirmen). Ohne die Reserve stiesse es in den
Theme-Header. */
.rh-page .rh-hero__visual{position:relative;min-height:470px;}
/* Foto rechtsbuendig auf 76% - links davor haengt das Phone (wie rh-branche.css). */
.rh-page .rh-photo{position:relative;width:76%;margin-left:auto;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:11/12;box-shadow:0 30px 70px rgba(0,0,0,.4);background:linear-gradient(160deg,#1F4A37 0%,#0E2419 100%);}
.rh-page .rh-photo img{width:100%;height:100%;object-fit:cover;}
/* Tag unten RECHTS: oben rechts schwebt das Flag-Mark, links davor das Phone. */
.rh-page .rh-photo__tag{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:7px;background:rgba(14,36,25,.72);backdrop-filter:blur(6px);border:1px solid var(--rh-line-dark);border-radius:var(--r-pill);padding:8px 14px;font-family:var(--font-mono);font-weight:600;font-size:11px;line-height:1.3;letter-spacing:.04em;color:var(--rh-green);}
.rh-page .rh-photo__dot{width:7px;height:7px;border-radius:50%;background:var(--rh-green);box-shadow:0 0 0 4px rgba(163,246,152,.25);}
.rh-page .rh-flagmark{position:absolute;top:-20px;right:28px;width:104px;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.3));}
/* Handy-Geraet: 1:1 das Hero-Phone der Branchenseiten (rh-branche.css) - 3D-Kippung,
Schwebe-Animation, 296px breit, 600px Screen. Bewusst deutlich groesser als das
flache Geraet davor, damit der Check-in-Screen lesbar ist.
Schichtung: wrap (positioniert) -> perspective -> tilt -> float -> body -> screen.
Die Kippung MUSS auf einer eigenen Ebene liegen: transform + Schwebe-Animation am
selben Element wuerden sich gegenseitig ueberschreiben. */
.rh-page .rh-phonewrap{position:absolute;left:0;bottom:-52px;width:292px;z-index:5;}
.rh-page .rh-phone3d{perspective:1700px;position:relative;z-index:1;}
.rh-page .rh-phone3d__tilt{transform:rotateY(-16deg) rotateX(4deg) rotateZ(-1deg);transform-style:preserve-3d;
filter:drop-shadow(38px 46px 52px rgba(6,18,12,.5));}
.rh-page .rh-phone3d__float{animation:rh-float 7s ease-in-out infinite;}
.rh-page .rh-phone__body{position:relative;width:292px;max-width:100%;border-radius:42px;padding:11px;
background:linear-gradient(150deg,#12301F,#0A1B12);box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),0 0 0 1px rgba(0,0,0,.3);}
.rh-page .rh-phone__screen{position:relative;height:600px;border-radius:33px;overflow:hidden;background:var(--rh-white);}
.rh-page .rh-phone__island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:24px;background:#0A1B12;border-radius:15px;z-index:6;}
.rh-page .rh-phone__statusbar{position:absolute;top:0;left:0;right:0;height:42px;z-index:4;
display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:var(--ink);}
.rh-page .rh-phone__time{font-family:var(--font-mono);font-weight:600;font-size:12px;line-height:1;color:var(--ink);}
.rh-page .rh-phone__sys{display:inline-flex;align-items:center;gap:6px;}
.rh-page .rh-phone__page{position:absolute;inset:42px 0 0;display:flex;flex-direction:column;padding:10px 18px 0;}
.rh-page .rh-phone__home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:104px;height:5px;border-radius:99px;background:rgba(13,31,20,.22);z-index:5;}
@keyframes rh-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
/* Check-in-Screen im Handy: Fotoslots + Bucher-Name + Treffer-Banner + Fertig.
Der Screen ist jetzt ~274px breit (vorher ~188px) - die Groessen sind entsprechend
angehoben, bleiben aber unter der App-Realitaet, damit alles auf einen Screen passt
(CLAUDE.md: Mockup-Screen kompakt halten, sonst staucht die Flexbox die Karten). */
.rh-page .rh-ci__head{display:flex;flex-direction:column;padding-bottom:11px;border-bottom:1px solid var(--rh-line);}
.rh-page .rh-ci__store{font-family:var(--font-sans);font-weight:700;font-size:12px;line-height:1.3;color:var(--ink);}
.rh-page .rh-ci__title{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin-top:3px;}
.rh-page .rh-ci__label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-family:var(--font-mono);font-weight:600;font-size:9px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 7px;}
.rh-page .rh-ci__count{color:var(--rh-green-deep);}
/* Zwei Kacheln statt drei: ein aufgenommenes Foto gross genug zum Erkennen,
daneben der naechste offene Slot. */
.rh-page .rh-ci__shots{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.rh-page .rh-ci__shot{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;background:var(--rh-tile);}
.rh-page .rh-ci__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rh-page .rh-ci__shot--empty{background:var(--rh-green-100);border:1px dashed var(--rh-line);color:var(--rh-green-deep);display:flex;align-items:center;justify-content:center;}
.rh-page .rh-ci__shot--empty svg{width:30px;height:30px;opacity:.7;}
.rh-page .rh-ci__shotcap{position:absolute;left:0;right:0;bottom:0;padding:4px 0;text-align:center;font-family:var(--font-mono);font-weight:600;font-size:9px;line-height:1.4;letter-spacing:.04em;color:#fff;background:rgba(14,36,25,.62);}
.rh-page .rh-ci__shot--empty .rh-ci__shotcap{color:var(--rh-green-deep);background:transparent;}
.rh-page .rh-ci__field{border:1px solid var(--rh-line);border-radius:10px;padding:9px 11px;font-family:var(--font-sans);font-weight:600;font-size:12px;line-height:1.3;color:var(--ink);}
.rh-page .rh-ci__field--next{margin-top:7px;}
.rh-page .rh-ci__ok{display:flex;align-items:center;gap:7px;margin-top:7px;background:var(--rh-green-100);border:1px solid var(--rh-green-600);border-radius:10px;padding:7px 10px;font-family:var(--font-sans);font-weight:600;font-size:11px;line-height:1.3;color:var(--rh-green-deep);}
.rh-page .rh-ci__okic{flex:none;width:15px;height:15px;border-radius:50%;background:var(--rh-green-deep);color:var(--rh-green);display:flex;align-items:center;justify-content:center;}
.rh-page .rh-ci__btn{margin-top:12px;background:var(--rh-green-deep);color:#fff;border-radius:11px;padding:13px;text-align:center;font-family:var(--font-mono);font-weight:600;font-size:12px;line-height:1.2;}
.rh-page .rh-ci__hint{margin-top:10px;text-align:center;font-family:var(--font-sans);font-size:10px;line-height:1.5;color:var(--muted);}
/* ============================================================
Problem cards
============================================================ */
.rh-page .rh-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;}
.rh-page .rh-pcard{background:var(--rh-white);border:1px solid var(--rh-line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:32px;}
/* ============================================================
Steps (vier Schritte)
============================================================ */
.rh-page .rh-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:left;margin-top:56px;}
.rh-page .rh-step__head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.rh-page .rh-step__num{flex:none;width:44px;height:44px;border-radius:50%;background:var(--rh-green);color:var(--rh-green-deep);font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;}
.rh-page .rh-step__line{flex:1;height:1px;background:var(--rh-line);}
.rh-page .rh-step .rh-body{font-size:16px;}
/* ============================================================
Alternierende Reihen (Text + Mockup)
============================================================ */
.rh-page .rh-altrow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.rh-page .rh-altrow__lead{margin-top:18px;}
.rh-page .rh-clist{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
/* list-style gehoert aufs li: Salient setzt "ul li{list-style:disc}" direkt aufs li,
ein geerbter Wert vom ul verliert dagegen immer (CLAUDE.md Abschnitt 3). */
.rh-page .rh-clist li{list-style:none;display:flex;align-items:flex-start;gap:12px;font:400 16px/1.45 var(--font-sans);color:var(--body);}
.rh-page .rh-clist--dark li{color:var(--on-dark);}
.rh-page .rh-clist--green li{color:var(--rh-green-deep);}
.rh-page .rh-cdot{flex:none;width:24px;height:24px;border-radius:50%;background:var(--rh-green);color:var(--rh-green-deep);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.rh-page .rh-clist--dark .rh-cdot{background:var(--rh-green);color:var(--rh-green-deep);}
.rh-page .rh-clist--green .rh-cdot{background:var(--rh-green-deep);color:var(--rh-green);}
.rh-page .rh-panel{border-radius:var(--r-xl);padding:36px;}
.rh-page .rh-panel--dark{background:var(--rh-green-deep);box-shadow:var(--shadow-glow);}
.rh-page .rh-panel--green{background:var(--rh-green);}
.rh-page .rh-mockwrap{display:flex;justify-content:center;}
/* ============================================================
Mockup 1: Theken-Ansicht (Stationen + Buchungskarte)
============================================================ */
.rh-page .rh-desk{width:100%;max-width:520px;background:var(--rh-white);border:1px solid var(--rh-line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:22px;}
.rh-page .rh-desk__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--rh-line);}
.rh-page .rh-desk__title{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.2;color:var(--ink);}
.rh-page .rh-desk__date{font-family:var(--font-mono);font-size:11px;line-height:1.3;color:var(--muted);}
.rh-page .rh-desk__stations{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;}
.rh-page .rh-station{display:flex;flex-direction:column;gap:2px;border:1px solid var(--rh-line);border-radius:12px;padding:10px 8px;background:var(--rh-white);}
.rh-page .rh-station--on{background:var(--rh-green-deep);border-color:var(--rh-green-deep);}
.rh-page .rh-station__n{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1;color:var(--ink);}
.rh-page .rh-station__l{font-family:var(--font-mono);font-weight:600;font-size:9px;line-height:1.3;letter-spacing:.02em;color:var(--muted);}
.rh-page .rh-station--on .rh-station__n{color:var(--rh-green);}
.rh-page .rh-station--on .rh-station__l{color:var(--on-dark-muted);}
.rh-page .rh-bcard{margin-top:14px;border:1px solid var(--rh-green-600);border-radius:16px;padding:14px;background:var(--rh-white);box-shadow:var(--shadow-sm);}
.rh-page .rh-bcard__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.rh-page .rh-bcard__who{font-family:var(--font-sans);font-weight:700;font-size:14px;line-height:1.3;color:var(--ink);}
.rh-page .rh-bcard__ref{font-family:var(--font-mono);font-weight:600;font-size:11px;color:var(--muted);margin-left:8px;}
.rh-page .rh-bcard__badge{font-family:var(--font-mono);font-weight:600;font-size:10px;line-height:1.3;letter-spacing:.02em;color:var(--rh-green-deep);background:var(--rh-green-100);border:1px solid var(--rh-green-600);border-radius:var(--r-pill);padding:4px 9px;}
.rh-page .rh-bcard__meta{font-family:var(--font-mono);font-size:10px;line-height:1.4;color:var(--muted);margin-top:4px;}
.rh-page .rh-bcard__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;}
.rh-page .rh-bcard__btn{margin-top:14px;background:var(--rh-green-deep);color:#fff;border-radius:10px;padding:11px;text-align:center;font-family:var(--font-mono);font-weight:600;font-size:11px;line-height:1.2;}
/* Foto-Kachel mit Status-Band. Der Verlauf traegt die Kachel, falls das Bild fehlt. */
.rh-page .rh-thumb{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--rh-tile);}
.rh-page .rh-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rh-page .rh-thumb__st{position:absolute;left:0;right:0;bottom:0;padding:3px 4px;text-align:center;font-family:var(--font-mono);font-weight:600;font-size:8px;line-height:1.4;letter-spacing:.02em;color:var(--rh-green-deep);background:var(--rh-green);}
/* "Im Brand": gedimmt statt farbig - Handoff-Regel "farbig = jetzt dran, grau = liegt noch". */
.rh-page .rh-thumb--wait img{filter:grayscale(.55);opacity:.75;}
.rh-page .rh-thumb--wait .rh-thumb__st{color:#fff;background:rgba(14,36,25,.72);}
.rh-page .rh-thumb--sm{border-radius:8px;}
/* ============================================================
Mockup 2: Fertig-Mail
============================================================ */
.rh-page .rh-mail{width:100%;max-width:440px;background:var(--rh-white);border:1px solid var(--rh-line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;}
.rh-page .rh-mail__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--rh-green-deep);padding:14px 18px;}
.rh-page .rh-mail__from{font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.2;color:var(--rh-green);}
.rh-page .rh-mail__tag{font-family:var(--font-mono);font-weight:600;font-size:9px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--rh-green-deep);background:var(--rh-green);border-radius:var(--r-pill);padding:3px 8px;}
.rh-page .rh-mail__to{font-family:var(--font-mono);font-size:10px;line-height:1.4;color:var(--muted);padding:12px 18px 0;}
.rh-page .rh-mail__subject{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);padding:4px 18px 12px;border-bottom:1px solid var(--rh-line);}
.rh-page .rh-mail__body{padding:16px 18px 20px;}
.rh-page .rh-mail__p{font-family:var(--font-sans);font-size:14px;line-height:1.5;color:var(--body);margin:0;}
.rh-page .rh-mail__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;max-width:230px;}
.rh-page .rh-mail__note{font-family:var(--font-sans);font-size:12px;line-height:1.5;color:var(--muted);margin:14px 0 0;}
.rh-page .rh-mail__btn{margin-top:14px;display:inline-block;background:var(--rh-green);color:var(--rh-green-deep);border-radius:var(--r-pill);padding:10px 18px;font-family:var(--font-mono);font-weight:600;font-size:11px;line-height:1.2;}
/* ============================================================
Mockup 3: Abhol-Ankuendigung
============================================================ */
.rh-page .rh-ann{width:100%;max-width:420px;background:var(--rh-white);border:1px solid var(--rh-line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:24px;}
.rh-page .rh-ann__title{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);}
.rh-page .rh-ann__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.rh-page .rh-chip{font-family:var(--font-mono);font-weight:600;font-size:11px;line-height:1.3;color:var(--ink);background:var(--rh-white);border:1.5px solid var(--rh-line);border-radius:var(--r-pill);padding:8px 13px;}
.rh-page .rh-chip--on{background:var(--rh-green-deep);border-color:var(--rh-green-deep);color:var(--rh-green);}
.rh-page .rh-ann__sub{font-family:var(--font-mono);font-weight:600;font-size:10px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:20px;}
.rh-page .rh-ann__pieces{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;}
.rh-page .rh-pick{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--rh-tile);border:2px solid transparent;}
.rh-page .rh-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rh-page .rh-pick__n{position:absolute;left:0;right:0;bottom:0;padding:3px 4px;text-align:center;font-family:var(--font-mono);font-weight:600;font-size:8px;line-height:1.4;color:#fff;background:rgba(14,36,25,.66);}
.rh-page .rh-pick--on{border-color:var(--rh-green-600);}
/* Haken oben rechts: rein dekorativ (das ganze Mockup ist aria-hidden). */
.rh-page .rh-pick--on::after{content:"";position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:50%;background:var(--rh-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173528' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center/9px 9px no-repeat;}
.rh-page .rh-pick--off img{filter:grayscale(.6);opacity:.55;}
.rh-page .rh-pick--off .rh-pick__n{background:rgba(14,36,25,.78);}
.rh-page .rh-ann__btn{margin-top:18px;background:var(--rh-green-deep);color:#fff;border-radius:var(--r-pill);padding:12px;text-align:center;font-family:var(--font-mono);font-weight:600;font-size:11px;line-height:1.2;}
/* ============================================================
Mockup 4: Erinnerungs-Timeline
============================================================ */
.rh-page .rh-tl{width:100%;max-width:420px;background:var(--rh-white);border:1px solid var(--rh-line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:24px;}
.rh-page .rh-tl__title{font-family:var(--font-sans);font-weight:700;font-size:14px;line-height:1.3;color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--rh-line);}
.rh-page .rh-tl__list{list-style:none;margin:0;padding:16px 0 0;}
.rh-page .rh-tl__item{list-style:none;position:relative;display:flex;align-items:center;gap:12px;padding:0 0 18px 0;}
.rh-page .rh-tl__item:last-child{padding-bottom:6px;}
/* Verbindungslinie zwischen den Punkten (nicht am letzten Eintrag). */
.rh-page .rh-tl__item:not(:last-child)::before{content:"";position:absolute;left:6px;top:14px;bottom:2px;width:1.5px;background:var(--rh-line);}
.rh-page .rh-tl__dot{position:relative;z-index:1;flex:none;width:13px;height:13px;border-radius:50%;background:var(--rh-white);border:2px solid var(--rh-line);}
.rh-page .rh-tl__item--done .rh-tl__dot{background:var(--rh-green-deep);border-color:var(--rh-green-deep);}
.rh-page .rh-tl__item--now .rh-tl__dot{background:var(--rh-green);border-color:var(--rh-green-deep);box-shadow:0 0 0 4px rgba(163,246,152,.35);}
.rh-page .rh-tl__day{flex:none;width:58px;font-family:var(--font-mono);font-weight:600;font-size:11px;line-height:1.3;color:var(--muted);}
.rh-page .rh-tl__what{font-family:var(--font-sans);font-size:14px;line-height:1.4;color:var(--body);}
.rh-page .rh-tl__item--now .rh-tl__what{font-weight:600;color:var(--ink);}
.rh-page .rh-tl__end{display:flex;align-items:center;gap:12px;margin-top:6px;background:var(--rh-paper);border:1px solid var(--rh-line);border-radius:14px;padding:14px;}
.rh-page .rh-tl__endic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--rh-green-deep);color:var(--rh-green);display:flex;align-items:center;justify-content:center;}
.rh-page .rh-tl__endtxt{display:flex;flex-direction:column;gap:2px;}
.rh-page .rh-tl__endh{font-family:var(--font-sans);font-weight:700;font-size:13px;line-height:1.3;color:var(--ink);}
.rh-page .rh-tl__ends{font-family:var(--font-mono);font-size:10px;line-height:1.4;color:var(--muted);}
/* ============================================================
USP (dunkle Sektion)
============================================================ */
.rh-page .rh-usp__head{max-width:780px;margin:0 auto;}
.rh-page .rh-usp__sub{margin-top:14px;}
.rh-page .rh-usp__sub--dark{color:var(--on-dark-muted);}
.rh-page .rh-usp__actions{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.rh-page .rh-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.rh-page .rh-dcard{background:var(--rh-green-deep-700);border:1px solid var(--rh-line-dark);border-radius:var(--r-lg);padding:30px;}
.rh-page .rh-dcard__text{color:var(--on-dark-muted);font-size:16px;}
.rh-page .rh-dark-note{text-align:center;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--on-dark-muted);margin:40px 0 0;}
/* .rh-page a{color:inherit} -> Linkfarbe auf dunklem Grund explizit setzen. */
.rh-page .rh-dark-note a{color:var(--rh-green);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
/* ============================================================
Beta-Aufruf
============================================================ */
.rh-page .rh-beta{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px;align-items:start;}
.rh-page .rh-beta .rh-clist{margin-top:18px;}
.rh-page .rh-promise{background:var(--rh-green-100);border-radius:var(--r-md);padding:24px 28px;margin:36px auto 0;max-width:860px;text-align:center;font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--rh-green-deep);}
/* ============================================================
FAQ
============================================================ */
.rh-page .rh-faq{max-width:820px;margin:48px auto 0;display:flex;flex-direction:column;gap:14px;text-align:left;}
.rh-page .rh-faq details{background:var(--rh-white);border:1px solid var(--rh-line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;}
.rh-page .rh-faq details[open]{border-color:var(--rh-green-600);box-shadow:var(--shadow-md);}
.rh-page .rh-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;font-family:var(--font-mono);font-weight:600;font-size:15px;line-height:1.4;color:var(--ink);}
.rh-page .rh-faq summary::-webkit-details-marker{display:none;}
.rh-page .rh-faq__icon{flex:none;width:28px;height:28px;border-radius:50%;background:var(--rh-green);color:var(--rh-green-deep);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;transition:transform .2s;}
.rh-page .rh-faq details[open] .rh-faq__icon{transform:rotate(45deg);}
.rh-page .rh-faq__a{padding:0 24px 24px;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--body);max-width:680px;}
.rh-page .rh-faq__link{color:var(--rh-green-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
/* Sanftes Aufklappen (CLAUDE.md Abschnitt 11: Accordions oeffnen sanft, ease). */
.rh-page .rh-faq details[open] .rh-faq__a{animation:rh-faq-open .2s ease both;}
@keyframes rh-faq-open{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
/* ============================================================
Final CTA
============================================================ */
.rh-page .rh-finalcta{position:relative;background:var(--rh-green-deep);border-radius:var(--r-xl);box-shadow:var(--shadow-glow);padding:72px 48px;text-align:center;color:var(--on-dark);overflow:hidden;}
.rh-page .rh-finalcta__title{color:var(--on-dark);}
.rh-page .rh-finalcta__lead{color:var(--on-dark-muted);max-width:600px;margin:18px auto 0;}
.rh-page .rh-finalcta__actions{margin-top:34px;}
.rh-page .rh-imprint{font-family:var(--font-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;color:var(--muted);text-align:center;margin:64px 0 0;}
/* ============================================================
Dezente Animationen (ANIMATIONEN-HANDOFF.md), an Projekt-Konvention angepasst:
alles unter .rh-page gescopt, .rh-anim wird per JS aufs gesetzt.
- Hidden-Startzustand zusaetzlich hinter @media no-preference -> ohne JS bzw. bei
"reduce" ist sofort alles sichtbar (kein FOUC, SEO-sicher).
- .rh-force = Selbstheilung: friert eine Transition ein, macht JS hart sichtbar.
============================================================ */
@media (prefers-reduced-motion: no-preference){
.rh-page.rh-anim .rh-reveal{
opacity:0;
transform:translateY(18px);
transition:opacity .6s cubic-bezier(.22,.61,.36,1),
transform .6s cubic-bezier(.22,.61,.36,1);
will-change:opacity,transform;
}
.rh-page.rh-anim .rh-reveal.is-in{opacity:1;transform:none;}
.rh-page.rh-anim .rh-reveal.rh-force{opacity:1!important;transform:none!important;transition:none!important;}
}
/* Hover-Lift fuer Karten. */
.rh-page .rh-pcard,.rh-page .rh-dcard{transition:transform .25s ease,box-shadow .25s ease;}
.rh-page .rh-pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.rh-page .rh-dcard:hover{transform:translateY(-3px);}
/* Sehr langsamer Zoom auf das Hero-Foto. */
.rh-page .rh-photo img{transition:transform 1.6s cubic-bezier(.22,.61,.36,1);}
.rh-page .rh-photo:hover img{transform:scale(1.04);}
/* ============================================================
Theme-Hardening (Salient / Parent-Theme)
Salient stylt h1-h3 und