/* * RH Home - gescoptes Stylesheet fuer die Startseite (template-rh-home.php). * * 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 (ue/oe/ae/ss/-> statt Umlaute/Pfeil). * * QUELLE: umgesetzt aus dem Claude-Design-Handoff "design_handoff_requesthub_startseite" * (Startseite.dc.html, README.md). System & Konventionen: CLAUDE.md. * * AUFBAU (bewusst): Struktur, Typografie, Buttons, Sektions-Layout, Branchen-Pills, * ROI-Leiste, Step-Karten, Modul-Grid, Tab-Leiste sowie die aeusseren Rahmen der * Mockups sind gescopte .rh-*-Klassen. Die intrikaten INNEREIEN der Mockups (Handy- * Screens, Wochen-Kalender, Feature-Panels) bleiben als Inline-Styles im PHP-Markup - * pixelgenau nach Referenz, rein dekorativ (aria-hidden) und je einmalig, daher keine * Klassen. Die dafuer noetigen Tokens (--surface-*, --radius-*, --text-*) sind unten * mitdefiniert, damit die Inline-Styles 1:1 aufloesen. * * Design-Tokens liegen auf ".rh-page" statt ":root" -> Salient bleibt unberuehrt. * JEDER Selektor ist unter ".rh-page" gescopt. Desktop-first; Breakpoints am Dateiende. */ /* ============================================================ 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-black:#000000; --rh-paper:#F5F6F4; --rh-paper-200:#ECEEEA; --rh-line:#E2E5E0; --rh-line-dark:#2B4A3B; --rh-grey-500:#8B8E99; --rh-grey-400:#B4B7BD; /* Semantic */ /* --muted / --text-muted: barrierefrei #5F6470 (~6:1). Das Roh-Token --rh-grey-500 (#8B8E99, ~3,3:1) faellt fuer Fliesstext durch WCAG AA und bleibt nur fuer dekorative Mikro-Labels (Eyebrows/Captions). CLAUDE.md S12. */ --ink:var(--rh-purple); --body:#34303F; --muted:#5F6470; --on-dark:#FFFFFF; --on-dark-muted:#B7CABF; --rh-error:#B3261E; /* Handoff-Aliase (fuer die Inline-Mockup-Styles, 1:1 aufloesbar) */ --surface-muted:#F5F6F4; --surface-card:#FFFFFF; --surface-dark:#173528; --text-ink:#0C0533; --text-body:#34303F; --text-muted:#5F6470; --text-on-dark-muted:#B7CABF; /* 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; --tracking-tight:-0.02em; --tracking-label:0.04em; --tracking-caps:0.12em; /* Radius & shadow (--r-* Projekt-Namen + --radius-* Handoff-Aliase) */ --r-md:18px; --r-lg:28px; --r-xl:40px; --r-pill:999px; --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --radius-xl:40px; --radius-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) */ font-family:var(--font-sans);color:var(--ink);background:var(--rh-white); /* Full-Bleed: aus Salients zentriertem Content-Container ausbrechen (No-JS-Fallback; das Template misst zusaetzlich die echte Position und korrigiert per JS). */ width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); /* clip (nicht hidden!): klippt den 100vw-Ueberlauf ohne .rh-page zum Scroll-Container zu machen -> position:sticky bliebe sonst kaputt. */ 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;text-decoration:none;} /* ============================================================ Layout ============================================================ */ .rh-page .rh-section{padding:100px 0;position:relative;} /* Anker-Sprungziele (z. B. #howto) unter Salients Header freihalten. */ .rh-page .rh-section[id]{scroll-margin-top:90px;} .rh-page .rh-section--hero{padding:76px 0 112px;position:relative;overflow:hidden; background:radial-gradient(125% 125% at 62% 88%,#46B768 0%,#207A46 38%,#18482F 64%,#143226 100%); color:var(--on-dark);} .rh-page .rh-section--ind{padding:72px 0 8px;background:var(--rh-white);} .rh-page .rh-section--howto{padding:100px 0;background:var(--surface-muted);} .rh-page .rh-section--cockpit{padding:96px 0 100px;background:var(--rh-green-deep);color:var(--on-dark);overflow:hidden;} .rh-page .rh-section--feature{padding:104px 0;background:var(--rh-white);} .rh-page .rh-section--muted{background:var(--surface-muted);} .rh-page .rh-section--trio{padding:104px 0;background:var(--rh-white);} .rh-page .rh-section--cta{padding:40px 0 108px;background:var(--rh-white);} .rh-page .rh-container{max-width:1160px;margin:0 auto;padding:0 32px;} .rh-page .rh-container--tight{max-width:820px;} .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;} /* ============================================================ Typografie ============================================================ */ .rh-page .rh-eyebrow{display:block;font-family:var(--font-mono);font-weight:600;font-size:11px; letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--rh-green-deep);} .rh-page .rh-eyebrow--green{color:var(--rh-green);} .rh-page .rh-eyebrow--muted{color:var(--rh-grey-500);} .rh-page .rh-h1{font-family:var(--font-display);font-weight:700;font-size:clamp(42px,5vw,72px); line-height:1.0;letter-spacing:-.02em;color:#fff;margin:14px 0 0;} .rh-page .rh-h2{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.8vw,50px); line-height:1.04;letter-spacing:-.02em;color:var(--text-ink);margin:14px 0 0;} .rh-page .rh-h2--feature{font-size:clamp(30px,3.6vw,46px);line-height:1.05;} .rh-page .rh-h2--cockpit{font-size:clamp(32px,4vw,54px);line-height:1.03;color:#fff;} .rh-page .rh-h3{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.25; letter-spacing:-.01em;color:var(--text-ink);margin:14px 0 4px;} .rh-page .rh-lead{font-family:var(--font-sans);font-size:20px;line-height:1.55;color:var(--text-body);margin:20px 0 0;} .rh-page .rh-lead--hero{color:#D6E7DC;max-width:33em;margin-top:26px;} .rh-page .rh-lead--dark{color:#B7CABF;} .rh-page .rh-text{font-family:var(--font-sans);font-size:17px;line-height:1.6;color:var(--text-body);margin:0;} .rh-page .rh-mark{background:var(--rh-green);color:var(--rh-green-deep);padding:0 .1em;border-radius:7px; -webkit-box-decoration-break:clone;box-decoration-break:clone;} /* Zentrierte Section-Koepfe */ .rh-page .rh-head{max-width:820px;margin:0 auto;text-align:center;} .rh-page .rh-head .rh-lead,.rh-page .rh-head .rh-text{margin-left:auto;margin-right:auto;max-width:36em;} .rh-page .rh-head .rh-text{margin-top:20px;} /* ============================================================ Buttons (Pill) - README S4.1 ============================================================ */ .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;letter-spacing:.04em;white-space:nowrap; text-decoration:none;border:1.5px solid transparent;border-radius:var(--r-pill);padding:17px 30px; cursor:pointer;transition:background .18s ease,transform .12s ease,color .18s ease,border-color .18s ease;} .rh-page .rh-btn:active{transform:scale(.97);} .rh-page .rh-btn__ic{font-size:1.05em;line-height:1;} .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);color:var(--rh-green-deep);} .rh-page .rh-btn--ghost{background:transparent;color:var(--rh-green);border-color:var(--rh-green);} .rh-page .rh-btn--ghost:hover{background:rgba(163,246,152,.12);color:var(--rh-green);} .rh-page .rh-btn--outline{background:transparent;color:var(--text-ink);border-color:var(--rh-line);} .rh-page .rh-btn--outline:hover{background:var(--surface-muted);border-color:var(--rh-grey-400);} /* Fokus (a11y): gruener Marken-Ring statt UA-Default. */ .rh-page a:focus-visible,.rh-page button:focus-visible,.rh-page [tabindex]:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px;} .rh-page .rh-btn:focus-visible{outline:none;box-shadow:var(--ring);} /* ============================================================ Check-Listen ============================================================ */ /* DS-CheckList: blankes Haekchen (kein Kreis) - Feature-Splits & Showcase. */ .rh-page .rh-checklist{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;} .rh-page .rh-checklist li{display:flex;gap:12px;align-items:center;font-size:17px;line-height:1.4;color:var(--text-body);} .rh-page .rh-checklist__ic{flex:none;color:var(--rh-green-deep);} /* ============================================================ HERO ============================================================ */ .rh-page .rh-hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center;position:relative;z-index:2;} .rh-page .rh-hero__glow{position:absolute;right:-8%;top:20%;width:520px;height:520px;border-radius:50%; background:rgba(163,246,152,.16);filter:blur(90px);pointer-events:none;z-index:1;} /* Ambient-Glow + Bodenschatten hinter/unter dem Handy-Mockup (Referenz Startseite.dc.html:59-60). */ .rh-page .rh-hero__ambient{position:absolute;inset:-8% -10%;background:rgba(163,246,152,.2);filter:blur(64px);border-radius:50%;pointer-events:none;z-index:0;} .rh-page .rh-hero__floor{position:absolute;left:50%;bottom:-30px;transform:translateX(-46%);width:66%;height:44px;background:rgba(4,14,9,.5);filter:blur(30px);border-radius:50%;pointer-events:none;z-index:0;} .rh-page .rh-hero__spark{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; border-radius:50%;background:var(--rh-green-deep);vertical-align:middle;margin-left:12px;transform:translateY(-6px);} .rh-page .rh-hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;} .rh-page .rh-hero__trust{margin-top:30px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:#9FC4AD;} .rh-page .rh-hero__visual{position:relative;justify-self:end;} /* 3D-Tilt + Phone-Breite als Klassen (statt inline), damit Mobile-Breakpoints sie abschwaechen koennen. */ .rh-page .rh-hero__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-hero__phonebody{width:326px;} /* Schwebender Flag-Mark + "Sofort gebucht"-Pill am Hero-Visual */ .rh-page .rh-hero__flag{position:absolute;left:-40px;top:6px;width:104px;z-index:8; animation:rh-floatb 6s ease-in-out infinite;filter:drop-shadow(0 14px 26px rgba(0,0,0,.34));} .rh-page .rh-hero__pill{position:absolute;right:-12px;bottom:38px;z-index:9;display:inline-flex;align-items:center;gap:8px; background:#fff;padding:9px 14px;border-radius:999px;box-shadow:0 14px 30px rgba(8,20,14,.24);animation:rh-float 6s ease-in-out infinite;} .rh-page .rh-hero__pill-dot{width:8px;height:8px;border-radius:50%;background:var(--rh-green-deep);animation:rh-pulse 2.4s infinite;} .rh-page .rh-hero__pill-txt{font-family:var(--font-mono);font-size:12px;font-weight:600;color:#173528;} /* ============================================================ INDUSTRIES (Branchen-Pills) + ROI-Leiste ============================================================ */ /* Lead-Satz + kompakte Chips als Aufzaehlung ("Zu unseren besten Kunden gehoeren ..."). */ .rh-page .rh-ind__lead{margin:0;text-align:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--muted);} .rh-page .rh-ind__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px auto 0;max-width:860px;} .rh-page .rh-ind__pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1.5px solid var(--rh-line); border-radius:999px;background:#fff;box-shadow:var(--shadow-sm);font-weight:600;font-size:13.5px;color:var(--text-ink); transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;} .rh-page .rh-ind__pill:hover{border-color:var(--rh-green);transform:translateY(-2px);box-shadow:var(--shadow-md);} .rh-page .rh-ind__dot{width:7px;height:7px;border-radius:50%;background:var(--rh-green);} /* Kunden-Logo-Marquee (zwischen Lead und Pills). Zwei identische Sets im Track, Loop per translateX(-50%) -> nahtlos, solange kein gap zwischen den Sets liegt (Abstaende nur als padding auf den Items). Logos in Originalfarben, kein Filter. max-width 720px: ein Set (6 Logos x ~200px = 1200px) muss den Viewport decken, sonst reisst der Loop eine sichtbare Luecke. Bei mehr Logos ggf. verbreitern. */ .rh-page .rh-clients{max-width:720px;margin:6px auto 0;} .rh-page .rh-clients__viewport{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);} .rh-page .rh-clients__track{display:flex;width:max-content;} .rh-page .rh-clients__set{display:flex;align-items:center;margin:0;padding:0;} /* list-style aufs li -- Salient setzt disc direkt aufs li, das ul wuerde verlieren. */ .rh-page .rh-clients__item{list-style:none;flex:0 0 auto;padding:8px 30px;line-height:1;} .rh-page .rh-clients__img{display:block;height:32px;width:auto;max-width:140px;object-fit:contain;} @keyframes rh-logoscroll{to{transform:translateX(-50%);}} /* Dauer haengt an der Set-Breite: ~8s pro Logo haelt das Tempo bei ~25px/s. Kommt ein Logo dazu, die Dauer mitziehen (sonst rast das Band). */ @media (prefers-reduced-motion: no-preference){ .rh-page .rh-clients__track{animation:rh-logoscroll 48s linear infinite;} .rh-page .rh-clients:hover .rh-clients__track{animation-play-state:paused;} } /* reduce: statische, zentriert umbrechende Reihe; Duplikat-Set weg, keine Maske. */ @media (prefers-reduced-motion: reduce){ .rh-page .rh-clients__track{width:auto;justify-content:center;} .rh-page .rh-clients__set{flex-wrap:wrap;justify-content:center;} .rh-page .rh-clients__set[aria-hidden="true"]{display:none;} .rh-page .rh-clients__viewport{-webkit-mask-image:none;mask-image:none;} } .rh-page .rh-roi{max-width:1040px;margin:52px auto 0;} .rh-page .rh-roi__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface-muted); border:1px solid var(--rh-line);border-radius:var(--radius-lg);overflow:hidden;} .rh-page .rh-roi__cell{padding:28px 18px;text-align:center;border-right:1px solid var(--rh-line);} .rh-page .rh-roi__cell:last-child{border-right:0;} .rh-page .rh-roi__eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rh-grey-500);} .rh-page .rh-roi__val{margin-top:9px;display:flex;align-items:center;justify-content:center;gap:7px;} .rh-page .rh-roi__ico{width:24px;height:24px;flex:none;border-radius:50%;background:var(--rh-green-100);display:inline-flex;align-items:center;justify-content:center;} .rh-page .rh-roi__num{font-family:var(--font-display);font-weight:700;font-size:37px;letter-spacing:-.02em;color:var(--rh-green-deep);} .rh-page .rh-roi__label{margin-top:9px;font-size:13px;color:var(--muted);line-height:1.4;} /* Lesbarer Disclaimer-Satz -> --muted (WCAG AA), NICHT das dekorative --rh-grey-400 (CLAUDE.md S12). */ .rh-page .rh-roi__foot{margin-top:14px;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--muted);} /* ============================================================ HOW IT WORKS (3 Schritte) ============================================================ */ .rh-page .rh-steps{max-width:1180px;margin:46px auto 0;padding:0 32px;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:12px;} .rh-page .rh-step{flex:1 1 240px;min-width:236px;background:#fff;border:1px solid var(--rh-line); border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:24px 20px;display:flex;flex-direction:column;} .rh-page .rh-step--wide{flex:1.55 1 340px;min-width:300px;padding:24px 22px;} .rh-page .rh-step__head{display:flex;align-items:center;gap:11px;} .rh-page .rh-step__badge{width:34px;height:34px;flex:none;border-radius:50%;background:var(--rh-green);color:#173528; font-family:var(--font-display);font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;} .rh-page .rh-step__badge--dark{background:var(--rh-green-deep);color:var(--rh-green);} .rh-page .rh-step__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--rh-grey-500);} .rh-page .rh-step__text{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--muted);} .rh-page .rh-step__text b{color:var(--rh-green-deep);font-weight:600;} .rh-page .rh-step__mock{margin-top:auto;} .rh-page .rh-steparrow{flex:none;display:flex;align-items:center;justify-content:center;color:var(--rh-grey-400);} /* ============================================================ Buchungs-Popover - Nachbau des echten App-Popovers. Mehrfach verwendet (Storyboard Schritt 3, Cockpit-Woche, Cockpit-Tagesansicht), gerendert von rh_home_pop() im Template. Oeffnen/Schliessen via .is-open (JS: Hover auf Desktop, Tap auf Touch); --top/--bottom = Aufklapprichtung relativ zum Termin-Element (position:relative). Label/Wert/Betrag haengen an eigenen Klassen (__k / __v / __amt), NICHT an /: Salients Typo-Panel belegt die generischen Tags site-weit mit Deko-Fonts (i/em -> "Caveat" = Handschrift) - siehe Hardening-Block unten. ============================================================ */ .rh-page .rh-pop{position:absolute;left:50%;width:238px;background:#fff;border:1px solid var(--rh-line); border-radius:14px;box-shadow:0 24px 50px rgba(12,5,51,.28);padding:13px;z-index:30;text-align:left; opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.16,.8,.24,1);cursor:default;} .rh-page .rh-pop--top{bottom:calc(100% + 12px);transform:translate(-50%,8px) scale(.97);} .rh-page .rh-pop--bottom{top:calc(100% + 12px);transform:translate(-50%,-8px) scale(.97);} .rh-page .rh-pop.is-open{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1);} .rh-page .rh-pop__tail{position:absolute;left:50%;width:14px;height:14px;background:#fff;} .rh-page .rh-pop--top .rh-pop__tail{bottom:-7px;transform:translateX(-50%) rotate(45deg);border-right:1px solid var(--rh-line);border-bottom:1px solid var(--rh-line);} .rh-page .rh-pop--bottom .rh-pop__tail{top:-7px;transform:translateX(-50%) rotate(45deg);border-left:1px solid var(--rh-line);border-top:1px solid var(--rh-line);} /* Rechtsbuendige Variante (letzte Kalenderspalte, KI-Chip im Step-2-Screen): ohne sie wuerde .rh-browser{overflow:hidden} das Popover seitlich clippen. */ .rh-page .rh-pop--r{left:auto;right:-4px;} .rh-page .rh-pop--top.rh-pop--r{transform:translate(0,8px) scale(.97);} .rh-page .rh-pop--bottom.rh-pop--r{transform:translate(0,-8px) scale(.97);} .rh-page .rh-pop--r.is-open{transform:translate(0,0) scale(1);} .rh-page .rh-pop--r .rh-pop__tail{left:auto;right:24px;transform:rotate(45deg);} /* Karte mit offenem Popover ueber Now-Linie + Nachbarn heben (!important schlaegt den Inline-z-index der Termincards). */ .rh-page [data-rh-cal].is-popped{z-index:20!important;} .rh-page .rh-pop__head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--rh-line);} .rh-page .rh-pop__avatar{flex:none;width:34px;height:34px;border-radius:10px;background:var(--rh-green-100);display:inline-flex;align-items:center;justify-content:center;} .rh-page .rh-pop__id{display:flex;flex-direction:column;min-width:0;} .rh-page .rh-pop__name{font-weight:700;font-size:13px;color:var(--text-ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rh-page .rh-pop__service{font-size:10.5px;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rh-page .rh-pop__rows{display:flex;flex-direction:column;gap:5px;margin-top:9px;} .rh-page .rh-pop__row{display:flex;gap:7px;align-items:center;font-size:10.5px;color:var(--text-body);line-height:1.35;min-width:0;} .rh-page .rh-pop__row svg{flex:none;} .rh-page .rh-pop__k{font-weight:600;color:var(--text-ink);flex:none;} .rh-page .rh-pop__v{color:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rh-page .rh-pop__pay{margin-top:10px;background:var(--rh-green-100);border:1px solid var(--rh-green);border-radius:11px;padding:9px 11px;} .rh-page .rh-pop__paytitle{display:flex;align-items:center;gap:6px;font-weight:700;font-size:11px;line-height:1.3;color:#2C5A3E;} .rh-page .rh-pop__payrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:4px;font-size:10.5px;line-height:1.3;color:var(--text-body);} .rh-page .rh-pop__amt{font-weight:700;color:var(--text-ink);font-family:var(--font-mono);font-size:10.5px;} .rh-page .rh-pop__amt.rh-pop__grn{color:#2C5A3E;} /* ============================================================ COCKPIT (dunkle Sektion + Browser-Mockup) ============================================================ */ .rh-page .rh-cockpit__glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:1000px;height:600px; background:radial-gradient(ellipse at center,rgba(70,183,104,.35),transparent 62%);pointer-events:none;z-index:0;} .rh-page .rh-cockpit__head{position:relative;z-index:1;} /* width:calc(100% - 48px) haelt bei schmalen Viewports 24px Gutter, max-width kappt bei Desktop. */ .rh-page .rh-browser{max-width:1120px;width:calc(100% - 48px);margin:52px auto 0;position:relative;z-index:1;border-radius:16px;background:#fff; box-shadow:0 50px 120px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07),0 0 90px rgba(163,246,152,.12);overflow:hidden;} .rh-page .rh-browser__bar{height:46px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#F1F3EF;border-bottom:1px solid var(--rh-line);} .rh-page .rh-browser__dots{display:inline-flex;gap:8px;} .rh-page .rh-browser__dots i{width:11px;height:11px;border-radius:50%;background:var(--rh-grey-400);} .rh-page .rh-browser__dots i:nth-child(1){background:#E4655B;} .rh-page .rh-browser__dots i:nth-child(2){background:#E9B44C;} .rh-page .rh-browser__dots i:nth-child(3){background:#5B9E6F;} .rh-page .rh-browser__url{margin:0 auto;background:#fff;border:1px solid var(--rh-line);border-radius:999px;padding:6px 20px; font-family:var(--font-mono);font-size:12px;color:var(--rh-grey-500);} .rh-page .rh-browser__app{display:flex;min-height:562px;background:#fff;} /* Sidebar-Ecke an den 16px-Browser-Radius anpassen: overflow:hidden clippt die eckige dunkle Aside sonst zu einem weissen Splitter unten links. */ .rh-page .rh-browser__scroll aside{border-bottom-left-radius:16px;} .rh-page .rh-cockpit__legend{max-width:1120px;width:calc(100% - 48px);margin:26px auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px;position:relative;z-index:1;} .rh-page .rh-legend{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:#C7DBCF;} .rh-page .rh-legend i{width:11px;height:11px;border-radius:3px;} /* Cockpit: mobile Ansicht (.rh-calm, Markup im Template). Ersetzt <=900px die Sidebar + das Tages-Grid -> kein horizontales Scrollen auf dem Smartphone. Die Chips sind wie die uebrigen Mockup-Interaktionen dekorativ (aria-hidden). */ .rh-page .rh-calm{display:none;width:100%;padding:14px 14px 18px;background:#fff;} .rh-page .rh-calm__top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--rh-line);} .rh-page .rh-calm__brand{display:inline-flex;align-items:center;gap:8px;} .rh-page .rh-calm__brand img{width:20px;height:20px;object-fit:contain;} .rh-page .rh-calm__brand b{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text-ink);} .rh-page .rh-calm__new{background:var(--rh-green);color:#173528;padding:7px 13px;border-radius:999px;font-family:var(--font-mono);font-weight:600;font-size:11px;white-space:nowrap;} /* Chips = die Plaetze/Raeume des Tages (Tagesansicht). Ressourcennamen sind laenger als die frueheren Tageszahlen -> kleinere Schrift + Ellipse (min-width:0, sonst waechst ein Flex-Item ueber seine Spalte hinaus statt zu kuerzen). */ .rh-page .rh-calm__days{display:flex;gap:6px;margin-top:12px;} .rh-page .rh-calm__day{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 8px;border:1px solid var(--rh-line);border-radius:12px;cursor:pointer;transition:background .15s ease,border-color .15s ease;} .rh-page .rh-calm__day i{font-style:normal;font-family:var(--font-mono);font-size:9px;color:var(--rh-grey-500);text-transform:uppercase;letter-spacing:.04em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rh-page .rh-calm__day b{font-weight:600;font-size:11.5px;color:var(--text-ink);line-height:1.15;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rh-page .rh-calm__day.is-on{background:var(--rh-green-deep);border-color:var(--rh-green-deep);} .rh-page .rh-calm__day.is-on i{color:#8FB09C;} .rh-page .rh-calm__day.is-on b{color:#fff;} /* min-height laesst dem nach unten aufklappenden Buchungs-Popover Platz (Browser-Karte clippt per overflow:hidden). */ /* min-height 400: Luft fuer das bottom-Popover des zweiten Listen-Events (der Browser-Rahmen clippt per overflow:hidden). */ .rh-page .rh-calm__list{margin-top:14px;display:flex;flex-direction:column;gap:4px;min-height:400px;} .rh-page .rh-calm__row{display:flex;gap:10px;align-items:stretch;} .rh-page .rh-calm__time{width:42px;flex:none;font-family:var(--font-mono);font-size:10.5px;color:var(--rh-grey-500);padding-top:8px;} .rh-page .rh-calm__ev{flex:1;position:relative;border-radius:10px;padding:9px 12px;min-width:0;} .rh-page .rh-calm__ev--paid{background:var(--rh-green);} .rh-page .rh-calm__ev--conf{background:var(--rh-green-deep);border-left:3px solid var(--rh-green);} .rh-page .rh-calm__ev--req{background:var(--rh-green-100);border:1.5px dashed #3E7A4E;} .rh-page .rh-calm__ev[data-rh-cal]{cursor:pointer;} .rh-page .rh-calm__title{font-weight:700;font-size:13px;line-height:1.2;color:#173528;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .rh-page .rh-calm__sub{margin-top:2px;font-size:11px;color:#2C5A3E;} .rh-page .rh-calm__ev--conf .rh-calm__title{color:#fff;font-weight:600;} .rh-page .rh-calm__ev--conf .rh-calm__sub{color:#A9C6B5;} .rh-page .rh-calm__ev--req .rh-calm__sub{color:#3E7A4E;} /* ============================================================ FEATURE-SPLIT A / B ============================================================ */ /* Markup-Reihenfolge in BEIDEN Splits: Text zuerst, Visual danach (-> Mobile: Text ueber Bild). Default (Feature B): Text links (breite Spalte). --rev (Feature A): Visual links via order. */ .rh-page .rh-fsplit{display:grid;grid-template-columns:1.08fr .92fr;gap:72px;align-items:center;} .rh-page .rh-fsplit--rev{grid-template-columns:.92fr 1.08fr;} .rh-page .rh-fsplit--rev .rh-fsplit__visual{order:1;} .rh-page .rh-fsplit--rev .rh-fsplit__text{order:2;} .rh-page .rh-fsplit__visual{position:relative;justify-self:center;} .rh-page .rh-fsplit__glow{position:absolute;inset:6% 10%;background:rgba(163,246,152,.33);filter:blur(70px);border-radius:50%;pointer-events:none;} /* ============================================================ FEED-MOCKUP (Feature-Split A): horizontal wischbare Video-Servicecards. Echte Scroll-Row mit Scroll-Snap; die naechste Card ragt angeschnitten in den Screen (Feed-Optik). Videos nur, wenn Dateien liegen (PHP file_exists); Play/Pause + Zaehler/Dots steuert das Inline-JS im Template. ============================================================ */ /* scroll-padding-left = Snap-Abstand der aktiven Card zum Screen-Rand: ohne dieses klebt "scroll-snap-align:start" bei "mandatory" die Card buendig an den Scrollport und scrollt das linke padding weg. Wert deckt sich mit dem JS-Offset (-16) im Template. */ .rh-page .rh-feed{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;padding:14px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;} .rh-page .rh-feed::-webkit-scrollbar{display:none;} .rh-page .rh-feed__card{position:relative;flex:0 0 216px;height:378px;border-radius:20px;overflow:hidden;scroll-snap-align:start;cursor:pointer;outline:3px solid transparent;outline-offset:-3px;transition:outline-color .18s ease,box-shadow .18s ease;} .rh-page .rh-feed__card.is-on{outline-color:var(--rh-green);box-shadow:0 14px 30px rgba(12,5,51,.25);} .rh-page .rh-feed__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .rh-page .rh-feed__shine{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;} .rh-page .rh-feed__card.is-on .rh-feed__shine{opacity:1;} .rh-page .rh-feed__shine::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:36%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);animation:rh-sweep 5s ease-in-out infinite;} .rh-page .rh-feed__vbadge{position:absolute;top:10px;left:10px;display:none;align-items:center;gap:5px;background:rgba(8,20,14,.5);backdrop-filter:blur(3px);padding:4px 8px;border-radius:999px;font-family:var(--font-mono);font-size:9.5px;color:#fff;letter-spacing:.02em;} .rh-page .rh-feed__card.has-video.is-on .rh-feed__vbadge{display:inline-flex;} .rh-page .rh-feed__check{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:50%;background:var(--rh-green-deep);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.3);opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease;} .rh-page .rh-feed__card.is-on .rh-feed__check{opacity:1;transform:none;} .rh-page .rh-feed__meta{position:absolute;left:0;right:0;bottom:0;padding:38px 13px 15px;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);} .rh-page .rh-feed__title{color:#fff;font-weight:700;font-size:16px;line-height:1.15;} .rh-page .rh-feed__sub{margin-top:3px;color:#D6E7DC;font-size:11px;} .rh-page .rh-feed__price{margin-top:5px;color:#C6F9BF;font-size:11.5px;font-family:var(--font-mono);} .rh-page .rh-feed__prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.28);opacity:0;} .rh-page .rh-feed__card.has-video.is-on .rh-feed__prog{opacity:1;} .rh-page .rh-feed__prog i{display:block;height:100%;background:var(--rh-green);width:0;animation:rh-prog 8s linear infinite;} /* Feed-Navigation (Desktop): Ein overflow-x-Container laesst sich mit der Maus nicht scrollen - es gibt kein horizontales Mausrad. Ohne Pfeile ist das Wischen am Desktop also weder sichtbar noch bedienbar. Die Buttons sitzen halb ausserhalb des Handys (.rh-feedstage ist ihr Bezugsrahmen) und schalten eine Card weiter. tabindex="-1" im Markup: das ganze Mockup ist dekorativ (aria-hidden) und sein Inhalt steht als Text daneben - fokussierbare Elemente in aria-hidden waeren ein A11y-Fehler. Touch-Geraete wischen ohnehin -> dort ausgeblendet. */ .rh-page .rh-feedstage{position:relative;} .rh-page .rh-feednav{position:absolute;top:50%;z-index:6;width:44px;height:44px;flex:none; display:inline-flex;align-items:center;justify-content:center;cursor:pointer; border:1px solid var(--rh-line);border-radius:50%;background:#fff;color:var(--rh-green-deep); box-shadow:0 10px 26px rgba(12,5,51,.16);transform:translateY(-50%); transition:transform .16s ease,box-shadow .16s ease,opacity .2s ease,background .16s ease;} .rh-page .rh-feednav:hover{background:var(--rh-green-100);box-shadow:0 14px 32px rgba(12,5,51,.2);transform:translateY(-50%) scale(1.06);} .rh-page .rh-feednav:active{transform:translateY(-50%) scale(.94);} /* -34px: der Button ragt so weit heraus, dass die verbleibenden 10px nur auf dem 12px breiten Handy-Rahmen liegen - der Screen-Inhalt (v. a. die angeschnittene Nachbar-Card, die das Weiterwischen andeutet) bleibt frei. */ .rh-page .rh-feednav--prev{left:-34px;} .rh-page .rh-feednav--next{right:-34px;} /* Am Anfang/Ende der Reihe: sichtbar, aber deutlich abgeschwaecht und tot. */ .rh-page .rh-feednav.is-off{opacity:.3;pointer-events:none;box-shadow:var(--shadow-sm);} /* Hinweis unter dem Mockup: sagt dem Besucher, dass das Mockup echt bedienbar ist. Formulierung deckt Maus UND Touch ab, damit kein zweiter Text noetig ist. */ .rh-page .rh-feedhint{margin:20px 0 0;display:flex;align-items:center;justify-content:center;gap:9px; font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted);} .rh-page .rh-feedhint svg{flex:none;color:var(--rh-green-deep);opacity:.7;} @media (hover:none){.rh-page .rh-feednav{display:none;}} /* ============================================================ FEATURE-BAUKASTEN (Tabs + Panels + Modul-Grid) ============================================================ */ /* Chip-Reihe = tablist + "mehr Features"-Sprung-Chip (der steht ausserhalb der tablist). */ .rh-page .rh-trio__tabrow{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:36px;padding:0 24px;} .rh-page .rh-trio__tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;} .rh-page .rh-trio__tab--more{display:inline-flex;align-items:center;gap:7px;} /* Farbe/Rahmen/Radius + der Aktiv-Zustand liegen im Theme-Hardening-Block (!important, gegen Salients Button-Regeln); hier nur die davon unberuehrten Struktur-Properties. */ .rh-page .rh-trio__tab{padding:12px 22px;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer; transition:background .16s ease,color .16s ease,border-color .16s ease;} .rh-page .rh-trio__panels{max-width:1040px;margin:36px auto 0;padding:0 32px;} .rh-page .rh-trio__card{background:var(--surface-muted);border:1px solid var(--rh-line);border-radius:var(--radius-lg); padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;} .rh-page .rh-trio__body{text-align:left;} .rh-page .rh-trio__h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:27px;letter-spacing:-.01em;color:var(--text-ink);} .rh-page .rh-trio__text{margin:14px 0 22px;font-size:17px;line-height:1.6;color:var(--text-body);max-width:40ch;} .rh-page .rh-trio__checks{display:flex;flex-direction:column;gap:13px;} .rh-page .rh-trio__check{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--text-body);} .rh-page .rh-trio__check-ic{flex:none;width:22px;height:22px;border-radius:50%;background:var(--rh-green); display:inline-flex;align-items:center;justify-content:center;margin-top:1px;} /* Rechenbeispiel unter den Checks: haelt die Stoerer-Zahlen (siehe .rh-stat) ehrlich - Mono, klein, muted; nennt die Annahme statt sie zu verschweigen. */ .rh-page .rh-trio__note{margin:18px 0 0;font-family:var(--font-mono);font-size:11px;line-height:1.55;color:var(--muted);} /* Ergebnis-Stoerer: schwebende Kennzahlen-Karte am Mockup-Rand (Slots-Panel). Uebersetzt das Mockup in zwei Zahlen (Prozent + Euro), damit der Nutzen ohne Lesen ankommt. Traeger (.rh-trio__mock) ist relativ; ab <=900px klappt der Stoerer unter das Mockup. */ .rh-page .rh-trio__mock{position:relative;} /* bottom so gewaehlt, dass der Stoerer nur ueber der freien Fussleiste des Mockups liegt (dieses traegt dafuer padding-bottom:40px) - er darf die Pointe des Vergleichs nicht verdecken. */ .rh-page .rh-stat{position:absolute;right:-10px;bottom:-30px;z-index:3;display:flex;align-items:center;gap:13px; background:#fff;border:1px solid var(--rh-line);border-radius:16px;padding:12px 15px;box-shadow:var(--shadow-lg);} .rh-page .rh-stat__ic{width:30px;height:30px;flex:none;border-radius:50%;background:var(--rh-green); display:inline-flex;align-items:center;justify-content:center;} .rh-page .rh-stat__val{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.01em; line-height:1.1;color:var(--rh-green-deep);white-space:nowrap;} .rh-page .rh-stat__lbl{margin-top:3px;font-size:10.5px;line-height:1.3;color:var(--muted);max-width:15ch;} .rh-page .rh-stat__sep{width:1px;flex:none;align-self:stretch;background:var(--rh-line);} .rh-page .rh-mod{max-width:1160px;margin:72px auto 0;padding:0 32px;} /* Sprungziel des "mehr Features"-Chips - unter Salients Header freihalten. */ .rh-page #rh-module{scroll-margin-top:90px;} .rh-page .rh-mod__head{text-align:center;max-width:44em;margin:0 auto;} .rh-page .rh-mod__h3{margin:12px 0 0;font-family:var(--font-display);font-weight:600;font-size:clamp(24px,2.6vw,34px); letter-spacing:-.01em;color:var(--text-ink);} .rh-page .rh-mod__grid{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;} .rh-page .rh-mod__card{display:flex;gap:13px;align-items:flex-start;padding:18px;background:#fff;border:1px solid var(--rh-line); border-radius:16px;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;} .rh-page .rh-mod__card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--rh-green);} /* Bewusst KEIN Highlight-Modifier: im Modul-Grid sind alle Karten gleichwertig - eine hervorgehobene Karte liest sich sonst wie eine Empfehlung (Entscheidung 2026-07-14). */ .rh-page .rh-mod__ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--rh-green-100);display:inline-flex;align-items:center;justify-content:center;} .rh-page .rh-mod__title{display:flex;align-items:center;gap:7px;flex-wrap:wrap;} .rh-page .rh-mod__name{font-weight:700;font-size:14.5px;color:var(--text-ink);} /* Kleines Tag, keine Pille: bei 9px Text wirkt ein voller Pill-Radius wie eine Kapsel (die Pill-Form ist Buttons/Chips vorbehalten, CLAUDE.md S8). */ .rh-page .rh-mod__badge{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.04em; color:var(--rh-green-deep);background:var(--rh-green-100);border-radius:6px;padding:3px 7px;line-height:1.2;} .rh-page .rh-mod__desc{margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--muted);} .rh-page .rh-mod__foot{margin-top:30px;text-align:center;font-size:17px;line-height:1.6;color:var(--text-ink);} .rh-page .rh-mod__foot b{font-weight:600;} .rh-page .rh-mod__foot span{color:var(--muted);} .rh-page .rh-trio__cta{margin-top:34px;text-align:center;} /* ============================================================ FINAL CTA (dunkelgruenes Panel + gruenes Gluehen) ============================================================ */ .rh-page .rh-finalcta{position:relative;overflow:hidden;border-radius:var(--radius-xl);text-align:center; padding:74px 32px;color:var(--on-dark); background:radial-gradient(120% 130% at 50% 0%,#207A46 0%,#173528 52%,#0E2419 100%); box-shadow:0 40px 90px rgba(12,5,51,.24);} .rh-page .rh-finalcta::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%); width:720px;height:420px;background:radial-gradient(ellipse at center,rgba(163,246,152,.28),transparent 62%);pointer-events:none;} .rh-page .rh-finalcta__inner{position:relative;z-index:1;max-width:640px;margin:0 auto;} .rh-page .rh-finalcta__lead{color:#B7CABF;margin:18px auto 0;max-width:30em;} .rh-page .rh-finalcta__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px;} .rh-page .rh-finalcta__note{margin:22px 0 0;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:#9FC4AD;} /* ============================================================ Keyframes (README S7.1) ============================================================ */ @keyframes rh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes rh-floatb{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-9px) rotate(-4deg)}} @keyframes rh-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} @keyframes rh-blink{0%,80%,100%{opacity:.2}40%{opacity:1}} @keyframes rh-pulse{0%{box-shadow:0 0 0 0 rgba(163,246,152,.55)}70%{box-shadow:0 0 0 9px rgba(163,246,152,0)}100%{box-shadow:0 0 0 0 rgba(163,246,152,0)}} @keyframes rh-ken{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.2) translate(-4%,-3%)}} @keyframes rh-sweep{0%{transform:translateX(-170%) skewX(-12deg)}55%,100%{transform:translateX(360%) skewX(-12deg)}} @keyframes rh-prog{0%{width:0}92%{width:100%}100%{width:100%}} /* Hero-Eintritts-Animation (nur ohne reduce). */ @media (prefers-reduced-motion: no-preference){ .rh-page .rh-hero__text > *{animation:rh-rise .6s ease both;} .rh-page .rh-hero__text > *:nth-child(2){animation-delay:.06s;} .rh-page .rh-hero__text > *:nth-child(3){animation-delay:.12s;} .rh-page .rh-hero__text > *:nth-child(4){animation-delay:.18s;} .rh-page .rh-hero__text > *:nth-child(5){animation-delay:.24s;} } /* ============================================================ Scroll-Reveal (Self-Healing, CLAUDE.md S11) - .rh-anim wird per JS aufs
gesetzt. Startzustand nur unter no-preference UND wenn JS .rh-anim gesetzt hat -> kein FOUC. ============================================================ */ @media (prefers-reduced-motion: no-preference){ .rh-page.rh-anim .rh-reveal{opacity:0;transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,.8,.24,1),transform .8s cubic-bezier(.16,.8,.24,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;} } /* ============================================================ Theme-Hardening gegen Salient (h1-h3/button + [hidden]). Erhoehte Spezifitaet (.rh-page.rh-home) + !important. CLAUDE.md S3. ============================================================ */ /* Generische Tags: Salients Typografie-Panel (Theme-Options -> salient-dynamic-styles.css) belegt sie site-weit mit eigenen Fonts: .bold,strong,b -> Plus Jakarta Sans ...,i,em,... -> Caveat (eine HANDSCHRIFT!) + font-size:22px/line-height:32px Eine Regel direkt auf dem Tag schlaegt jede von .rh-page geerbte Font - Vererbung verliert immer gegen eine direkte Regel (gleiche Falle wie bei "ul li{list-style}", CLAUDE.md S3). Symptom war: die Werte im Buchungs-Popover (Zeit/Personen/Telefon) standen live in Schreibschrift, 22px gross. Hier fuer die ganze Seite zurueckholen. font-weight bleibt bewusst unangetastet ( soll fett bleiben). Neue Bausteine trotzdem mit eigenen Klassen bauen statt mit /. */ .rh-page.rh-home b,.rh-page.rh-home strong{font-family:inherit!important;} .rh-page.rh-home i,.rh-page.rh-home em{font-family:inherit!important;font-style:normal!important; font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;} /* Ausnahmen: die beiden Stellen, die bewusst eine andere Familie tragen (die Regel oben zoege ihnen sonst per !important die geerbte Sans unter). */ .rh-page.rh-home .rh-calm__brand b{font-family:var(--font-display)!important;} .rh-page.rh-home .rh-calm__day i{font-family:var(--font-mono)!important;font-size:9px!important;letter-spacing:.04em!important;} /* Links: ein WPCode-Snippet im WP-Admin setzt site-weit a{font-family:monospace!important} -> ohne Gegenwehr stehen ALLE Links der Seite in System-Monospace (Courier), auch die Branchen-Pills und die CTAs (statt JetBrains Mono). Bei !important auf beiden Seiten gewinnt die hoehere Spezifitaet (CLAUDE.md S3, wie in rh-footer.css). "inherit" gibt jedem Link die Font seines Kontexts zurueck; die Mono-Elemente ziehen darunter nach. */ .rh-page.rh-home a{font-family:inherit!important;} .rh-page.rh-home .rh-btn,.rh-page.rh-home .rh-trio__tab{font-family:var(--font-mono)!important;} .rh-page.rh-home .rh-h1{font:700 clamp(42px,5vw,72px)/1.0 var(--font-display)!important;letter-spacing:-.02em!important;color:#fff!important;} .rh-page.rh-home .rh-h2{font:700 clamp(30px,3.8vw,50px)/1.04 var(--font-display)!important;letter-spacing:-.02em!important;color:var(--text-ink)!important;} .rh-page.rh-home .rh-h2--feature{font-size:clamp(30px,3.6vw,46px)!important;line-height:1.05!important;} .rh-page.rh-home .rh-h2--cockpit{font-size:clamp(32px,4vw,54px)!important;line-height:1.03!important;color:#fff!important;} .rh-page.rh-home .rh-finalcta__title{color:#fff!important;} .rh-page.rh-home .rh-h3{font:600 19px/1.25 var(--font-display)!important;letter-spacing:-.01em!important;color:var(--text-ink)!important;} .rh-page.rh-home .rh-trio__h3{font:600 27px/1.15 var(--font-display)!important;letter-spacing:-.01em!important;} .rh-page.rh-home .rh-mod__h3{font:600 clamp(24px,2.6vw,34px)/1.1 var(--font-display)!important;letter-spacing:-.01em!important;} .rh-page.rh-home .rh-btn{border-radius:var(--r-pill)!important;} /* Die Tab-Pills sind die einzigen