/* ============================================================ * RH Nutzerhandbuch (alle 10 Handbuch-Seiten) * Scope: .rh-page.rh-handbuch (Renderer: inc/rh-handbuch.php) * Design-Referenz: design_handoff_handbuch/ (README + Prototyp) * WICHTIG: Kommentare ASCII-only (Optimierer-Falle, CLAUDE.md S3). * ============================================================ */ /* ---------- Tokens (Fallback liegt zusaetzlich inline im ) ---------- */ .rh-page.rh-handbuch{ --hb-primary:#143D2A; --hb-accent:#EAF7EC; --hb-hover:#F0F5F1; --hb-bg:#F4F7F5; --hb-card:#FFFFFF; --hb-ink:#0D1F14; --hb-body:#22382B; --hb-muted:#4A6655; --hb-line:#E2EAE4; --hb-line-soft:#EEF3EF; --hb-green:#1E7A38; --hb-mark:#D6F2CE; --hb-note-bg:#EAF3FB; --hb-note-bd:#C9E0F2; --hb-note-label:#1D5C9E; --hb-note-text:#1E4E79; --hb-warn-bg:#FDF3E0; --hb-warn-bd:#F0DCAF; --hb-warn-label:#8A5B00; --hb-warn-text:#7A5210; --hb-r:12px; --hb-shadow-card:0 10px 28px rgba(13,31,20,.07); --hb-shadow-tile:0 12px 30px rgba(13,31,20,.09); --hb-shadow-drop:0 18px 44px rgba(13,31,20,.16); --hb-ring:0 0 0 3px rgba(20,61,42,.18); /* Font-Tokens redundant zum Inline-Fallback mitfuehren, damit die Seite * auch ohne den Inline-Block vollstaendig gestylt ist. */ --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; } /* Gescoptes Box-Sizing (kein globaler Reset, CLAUDE.md S3): width:100% + * Padding auf Inputs/Buttons darf nie ueberlaufen. */ .rh-page.rh-handbuch, .rh-page.rh-handbuch *{box-sizing:border-box;} /* ---------- Full-Bleed (CSS-Fallback; JS-Korrektur im Template) ---------- */ .rh-page.rh-handbuch{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); overflow-x:clip; /* NIE hidden: wuerde die Sticky-Sidebar killen */ background:var(--hb-bg); color:var(--hb-body); font-family:var(--font-sans); } body.rh-fullwidth{overflow-x:clip;} /* ---------- Grundlayout: Sidebar + Content ---------- */ .rh-page.rh-handbuch .rh-hb-shell{ display:flex; align-items:flex-start; min-height:70vh; } .rh-page.rh-handbuch .rh-hb-main{ flex:1; min-width:0; } .rh-page.rh-handbuch .rh-hb-doc{ max-width:800px; margin:0 auto; padding:48px 40px 90px; } /* ---------- Skip-Link ---------- */ .rh-page.rh-handbuch .rh-hb-skip{ position:absolute; left:-9999px; top:0; z-index:1200; padding:10px 18px; background:var(--hb-primary); color:#fff; border-radius:0 0 12px 0; font:600 14px/1.2 var(--font-sans); text-decoration:none; } .rh-page.rh-handbuch .rh-hb-skip:focus{left:0;} /* ---------- Sidebar ---------- */ .rh-page.rh-handbuch .rh-hb-sidebar{ width:276px; flex:0 0 276px; background:var(--hb-card); border-right:1px solid var(--hb-line); position:sticky; top:0; max-height:100vh; overflow-y:auto; display:flex; flex-direction:column; padding:0 0 14px; } .rh-page.rh-handbuch .rh-hb-brand{ display:flex; align-items:center; gap:11px; padding:20px 18px 16px; text-decoration:none; } .rh-page.rh-handbuch .rh-hb-brand__logo{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:var(--hb-primary); color:#fff; font:700 16px/1 var(--font-display); } .rh-page.rh-handbuch .rh-hb-brand__txt{ display:flex; flex-direction:column; gap:1px; font:600 15px/1.2 var(--font-sans); color:var(--hb-ink); } .rh-page.rh-handbuch .rh-hb-brand__sub{ font:600 9.5px/1.2 var(--font-mono); letter-spacing:.18em; color:var(--hb-green); } /* ---------- Suche ---------- */ .rh-page.rh-handbuch .rh-hb-search{ position:relative; padding:0 14px 12px; } .rh-page.rh-handbuch .rh-hb-search input{ width:100%; padding:9px 12px; border:1px solid var(--hb-line); border-radius:10px; background:var(--hb-bg); font:400 13.5px/1.4 var(--font-sans); color:var(--hb-ink); } .rh-page.rh-handbuch .rh-hb-search input::placeholder{color:var(--hb-muted);} .rh-page.rh-handbuch .rh-hb-search input:focus{ outline:none; border-color:var(--hb-primary); box-shadow:0 0 0 3px rgba(20,61,42,.10); background:var(--hb-card); } .rh-page.rh-handbuch .rh-hb-search__drop{ position:absolute; left:14px; right:14px; top:calc(100% - 6px); z-index:900; background:var(--hb-card); border:1px solid var(--hb-line); border-radius:var(--hb-r); box-shadow:var(--hb-shadow-drop); overflow:hidden; max-height:min(430px,60vh); overflow-y:auto; } .rh-page.rh-handbuch .rh-hb-hit{ display:block; width:100%; text-align:left; padding:10px 14px; background:transparent; border:0; border-bottom:1px solid var(--hb-line-soft); cursor:pointer; font-family:var(--font-sans); } .rh-page.rh-handbuch .rh-hb-hit:last-child{border-bottom:0;} .rh-page.rh-handbuch .rh-hb-hit:hover, .rh-page.rh-handbuch .rh-hb-hit.is-active{background:var(--hb-hover);} .rh-page.rh-handbuch .rh-hb-hit--empty{ cursor:default; color:var(--hb-muted); font:400 13px/1.5 var(--font-sans); } .rh-page.rh-handbuch .rh-hb-hit__label{ display:block; font:600 10.5px/1.4 var(--font-mono); letter-spacing:.06em; color:var(--hb-green); margin-bottom:2px; } .rh-page.rh-handbuch .rh-hb-hit__snip{ display:block; font:400 13px/1.5 var(--font-sans); color:var(--hb-body); overflow:hidden; } .rh-page.rh-handbuch .rh-hb-hit__snip mark{ background:var(--hb-mark); color:inherit; padding:0 1px; border-radius:3px; } /* ---------- Sidebar-Navigation ---------- */ .rh-page.rh-handbuch .rh-hb-nav{ display:flex; flex-direction:column; gap:2px; padding:2px 14px 10px; } .rh-page.rh-handbuch .rh-hb-nav__group{ font:600 9.5px/1.2 var(--font-mono); letter-spacing:.18em; color:var(--hb-muted); padding:14px 12px 6px; } .rh-page.rh-handbuch .rh-hb-nav__item{ display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:8px; text-decoration:none; } .rh-page.rh-handbuch .rh-hb-nav__item:hover{background:var(--hb-hover);} .rh-page.rh-handbuch .rh-hb-nav__item.is-active{background:var(--hb-accent);} .rh-page.rh-handbuch .rh-hb-nav__num{ font:600 10.5px/1 var(--font-mono); color:var(--hb-muted); min-width:18px; } .rh-page.rh-handbuch .rh-hb-nav__t{ font:500 13.5px/1.35 var(--font-sans); color:var(--hb-primary); } .rh-page.rh-handbuch .rh-hb-nav__subs{ display:flex; flex-direction:column; padding:2px 0 6px 40px; } .rh-page.rh-handbuch .rh-hb-nav__subs a{ display:block; padding:4px 0; font:400 12.5px/1.4 var(--font-sans); color:var(--hb-muted); text-decoration:none; } .rh-page.rh-handbuch .rh-hb-nav__subs a:hover, .rh-page.rh-handbuch .rh-hb-nav__subs a.is-current{color:var(--hb-primary);} .rh-page.rh-handbuch .rh-hb-nav__subs a.is-current{font-weight:600;} .rh-page.rh-handbuch .rh-hb-sidebar__foot{ margin:auto 14px 0; padding:16px 12px 4px; border-top:1px solid var(--hb-line-soft); font:400 11.5px/1.5 var(--font-sans); color:var(--hb-muted); } /* ---------- Mobile Topbar + Drawer-Overlay (Desktop aus) ---------- */ .rh-page.rh-handbuch .rh-hb-topbar{display:none;} .rh-page.rh-handbuch .rh-hb-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(13,31,20,.45); } /* ---------- Typografie ---------- */ /* Salient-Hardening: h1-h3 werden vom Parent-Theme hochspezifisch gestylt, * daher hier mit erhoehter Spezifitaet + !important (CLAUDE.md S3). */ .rh-page.rh-handbuch .rh-hb-eyebrow{ display:block; font:600 11px/1.4 var(--font-mono)!important; letter-spacing:.14em; color:var(--hb-green); text-transform:uppercase; } .rh-page.rh-handbuch .rh-hb-h1{ font:600 37px/1.1 var(--font-display)!important; letter-spacing:-.02em!important; color:var(--hb-ink)!important; margin:6px 0 16px!important; padding:0!important; text-wrap:balance; } .rh-page.rh-handbuch .rh-hb-h2{ font:600 22px/1.35 var(--font-sans)!important; letter-spacing:-.01em!important; color:var(--hb-ink)!important; margin:0 0 12px!important; padding:0!important; } .rh-page.rh-handbuch .rh-hb-h2--tiles{margin:44px 0 14px!important;} .rh-page.rh-handbuch .rh-hb-h3{ font:600 17px/1.4 var(--font-sans)!important; color:var(--hb-ink)!important; margin:28px 0 10px!important; padding:0!important; scroll-margin-top:96px; } .rh-page.rh-handbuch .rh-hb-p{ margin:0 0 14px; font:400 15.5px/1.75 var(--font-sans); color:var(--hb-body); text-wrap:pretty; } .rh-page.rh-handbuch .rh-hb-lead{ margin:0 0 18px; font:400 16.5px/1.75 var(--font-sans); color:var(--hb-body); text-wrap:pretty; } .rh-page.rh-handbuch .rh-hb-it{font-style:italic;} .rh-page.rh-handbuch .rh-hb-sec{ margin-top:44px; scroll-margin-top:96px; } /* Inline-Icons im Fliesstext: kleine App-Symbole neben ihrer Nennung * ("Zahnrad", "Trichter-Symbol", ...) -> Bruecke zum Screenshot. */ .rh-page.rh-handbuch .rh-hb-ic{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px!important; background:var(--hb-accent); color:var(--hb-primary); vertical-align:-4px; margin:0 1px; } .rh-page.rh-handbuch .rh-hb-ic svg{ display:block; width:12px; height:12px; } /* Nummern-Badge im Fliesstext: Gegenstueck zum Screenshot-Marker (.rh-hb-mark), * gleiche Optik -> der Leser findet die Stelle im Bild sofort. * Mittig zur Zeile ausgerichtet (Betreiber-Feedback 2026-07-23). */ .rh-page.rh-handbuch .rh-hb-mk{ display:inline-block; width:16px; height:16px; border-radius:999px!important; background:var(--hb-primary); color:#fff; font:700 10px/16px var(--font-mono)!important; text-align:center; vertical-align:-1px; margin-right:5px; } /* Liste, deren Punkte alle mit einem Nummern-Badge beginnen: das Badge IST * das Aufzaehlungszeichen -> kein zusaetzlicher Bullet. Doppelklasse fuer * hoehere Spezifitaet als die disc-Regel weiter unten. * Badge absolut zur ERSTEN Zeile zentriert (li-Zeilenhoehe 15.5px x 1.7 * ~ 26px, Badge 16px -> top 5px) -- Inline-Metriken rutschten live nach * unten (Salient), absolut ist zuverlaessig. Umbruchzeilen ruecken durch * das padding sauber unter den Textanfang ein. */ .rh-page.rh-handbuch .rh-hb-ul.rh-hb-ul--mk{padding-left:0;} .rh-page.rh-handbuch .rh-hb-ul.rh-hb-ul--mk li{ position:relative; padding-left:26px!important; list-style:none!important; } .rh-page.rh-handbuch .rh-hb-ul.rh-hb-ul--mk li > .rh-hb-mk{ position:absolute; left:0; top:5px; margin:0; } /* Listen: Salient setzt list-style + line-height direkt auf li -> auf dem li * kontern (CLAUDE.md S3, Site-Footer-Lektion). */ .rh-page.rh-handbuch .rh-hb-ul, .rh-page.rh-handbuch .rh-hb-ol{ margin:0 0 14px; padding:0 0 0 22px; } .rh-page.rh-handbuch .rh-hb-ul li, .rh-page.rh-handbuch .rh-hb-ol li{ margin:0 0 8px!important; padding:0!important; font:400 15.5px/1.7 var(--font-sans)!important; color:var(--hb-body); } .rh-page.rh-handbuch .rh-hb-ul li{list-style:disc!important;} .rh-page.rh-handbuch .rh-hb-ol li{list-style:decimal!important;} .rh-page.rh-handbuch .rh-hb-ul li::marker, .rh-page.rh-handbuch .rh-hb-ol li::marker{color:var(--hb-muted);} /* ---------- Inline-Elemente: Pills + Code ---------- */ .rh-page.rh-handbuch .rh-hb-pill{ display:inline-block; padding:1px 9px; border-radius:999px; border:1px solid transparent; font:600 11.5px/1.5 var(--font-mono)!important; white-space:nowrap; } .rh-page.rh-handbuch .rh-hb-pill--y{background:#FFF3C9;color:#7A5900;border-color:#EFE0A3;} .rh-page.rh-handbuch .rh-hb-pill--b{background:#E1EFFC;color:#1D5C9E;border-color:#C4DFF5;} .rh-page.rh-handbuch .rh-hb-pill--g{background:#E3F6E6;color:#1E7A38;border-color:#BFE8C8;} .rh-page.rh-handbuch .rh-hb-pill--v{background:#EFE7FB;color:#6A3FB8;border-color:#DCCBF3;} .rh-page.rh-handbuch .rh-hb-pill--r{background:#FBE5E3;color:#B0332A;border-color:#F3CBC7;} .rh-page.rh-handbuch .rh-hb-code{ font:500 12.5px/1.5 var(--font-mono)!important; background:var(--hb-accent); color:var(--hb-primary); padding:1.5px 6px; border-radius:6px; white-space:nowrap; } /* ---------- Hinweis-/Warnboxen ---------- */ .rh-page.rh-handbuch .rh-hb-box{ display:flex; gap:12px; margin:20px 0; padding:14px 16px; border-radius:var(--hb-r); border:1px solid transparent; } .rh-page.rh-handbuch .rh-hb-box--note{background:var(--hb-note-bg);border-color:var(--hb-note-bd);} .rh-page.rh-handbuch .rh-hb-box--warn{background:var(--hb-warn-bg);border-color:var(--hb-warn-bd);} .rh-page.rh-handbuch .rh-hb-box__label{ font:700 10.5px/1.5 var(--font-mono)!important; letter-spacing:.08em; padding-top:3px; } .rh-page.rh-handbuch .rh-hb-box--note .rh-hb-box__label{color:var(--hb-note-label);} .rh-page.rh-handbuch .rh-hb-box--warn .rh-hb-box__label{color:var(--hb-warn-label);} .rh-page.rh-handbuch .rh-hb-box__t{ margin:0; flex:1; font:400 14.5px/1.65 var(--font-sans); } .rh-page.rh-handbuch .rh-hb-box--note .rh-hb-box__t{color:var(--hb-note-text);} .rh-page.rh-handbuch .rh-hb-box--warn .rh-hb-box__t{color:var(--hb-warn-text);} /* ---------- Tabellen ---------- */ .rh-page.rh-handbuch .rh-hb-tablewrap{ margin:16px 0 20px; background:var(--hb-card); border:1px solid var(--hb-line); border-radius:var(--hb-r); box-shadow:var(--hb-shadow-card); overflow-x:auto; } .rh-page.rh-handbuch .rh-hb-table{ width:100%; border-collapse:collapse; margin:0; } .rh-page.rh-handbuch .rh-hb-table th{ background:var(--hb-accent); padding:10px 16px; text-align:left; font:600 10.5px/1.5 var(--font-mono)!important; letter-spacing:.07em; text-transform:uppercase; color:var(--hb-primary); border:0; } .rh-page.rh-handbuch .rh-hb-table td{ padding:10px 16px; border:0; border-top:1px solid var(--hb-line-soft); font:400 14px/1.6 var(--font-sans); color:var(--hb-body); vertical-align:top; } .rh-page.rh-handbuch .rh-hb-check{color:var(--hb-green);font-weight:700;} .rh-page.rh-handbuch .rh-hb-dash{color:var(--hb-muted);} /* ---------- Screenshot-Figuren ---------- */ .rh-page.rh-handbuch .rh-hb-shots{ display:grid; grid-template-columns:1fr; gap:14px; margin:16px 0 20px; } .rh-page.rh-handbuch .rh-hb-shots--grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;} .rh-page.rh-handbuch .rh-hb-shots--three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start;} .rh-page.rh-handbuch .rh-hb-fig{ margin:0; background:var(--hb-card); border:1px solid var(--hb-line); border-radius:var(--hb-r); padding:10px; box-shadow:var(--hb-shadow-card); } /* Bild-Button: natuerliches Seitenverhaeltnis (kein Letterboxing -> maximale * Darstellungsgroesse). border-radius mit !important: Salients * body[data-button-style^=rounded]-Regel drueckt Buttons sonst 200px auf -- * mit overflow:hidden ergab das einen Ellipsen-Ausschnitt (Live-Bug 2026-07-23). */ .rh-page.rh-handbuch .rh-hb-fig__imgbtn{ position:relative; display:block; width:100%; padding:0; border:0; background:var(--hb-bg); border-radius:8px!important; overflow:hidden; cursor:zoom-in; min-height:64px; /* Fallback-Flaeche, falls das Bild fehlt (onerror) */ } .rh-page.rh-handbuch .rh-hb-fig__imgbtn img{ display:block; width:100%; height:auto; max-width:100%; } /* Nummerierte Marker auf Screenshots (Prozent-Koordinaten aus der Config). * Bewusst klein, damit sie ihr Ziel nicht verdecken -- Koordinaten zeigen * NEBEN das Ziel, nie mittig darauf. */ .rh-page.rh-handbuch .rh-hb-mark{ position:absolute; transform:translate(-50%,-50%); width:16px; height:16px; border-radius:999px!important; background:var(--hb-primary); color:#fff; font:700 9.5px/16px var(--font-mono)!important; text-align:center; box-shadow:0 0 0 1.5px #fff,0 1px 4px rgba(13,31,20,.35); pointer-events:none; } .rh-page.rh-handbuch .rh-hb-fig__cap{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 4px 2px; font:400 13px/1.5 var(--font-sans); color:var(--hb-muted); } .rh-page.rh-handbuch .rh-hb-fig__btn{ flex:0 0 auto; padding:3px 11px; border-radius:999px!important; border:1px solid #D2EBD6; background:var(--hb-accent); color:var(--hb-primary); font:600 10.5px/1.5 var(--font-mono)!important; cursor:zoom-in; } .rh-page.rh-handbuch .rh-hb-fig__btn:hover{background:#DDF2E1;} /* ---------- Startseite: Kachel-Grid ---------- */ .rh-page.rh-handbuch .rh-hb-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; } .rh-page.rh-handbuch .rh-hb-tile{ display:flex; flex-direction:column; gap:8px; background:var(--hb-card); border:1px solid var(--hb-line); border-radius:var(--hb-r); padding:18px; text-decoration:none; transition:box-shadow .15s ease,border-color .15s ease; } .rh-page.rh-handbuch .rh-hb-tile:hover{ box-shadow:var(--hb-shadow-tile); border-color:#C9DACD; } .rh-page.rh-handbuch .rh-hb-tile__pill{ align-self:flex-start; padding:2px 10px; border-radius:999px; background:var(--hb-accent); color:var(--hb-primary); font:600 10.5px/1.5 var(--font-mono)!important; letter-spacing:.06em; } .rh-page.rh-handbuch .rh-hb-tile__t{ font:600 16px/1.35 var(--font-sans); color:var(--hb-ink); } .rh-page.rh-handbuch .rh-hb-tile__d{ font:400 13.5px/1.55 var(--font-sans); color:var(--hb-muted); } /* ---------- Vor/Zurueck-Karten ---------- */ .rh-page.rh-handbuch .rh-hb-pn{ display:flex; gap:14px; margin-top:56px; padding-top:22px; border-top:1px solid var(--hb-line); } .rh-page.rh-handbuch .rh-hb-pn__card{ flex:1; display:flex; flex-direction:column; gap:4px; background:var(--hb-card); border:1px solid var(--hb-line); border-radius:var(--hb-r); padding:14px 18px; text-decoration:none; transition:box-shadow .15s ease,border-color .15s ease; } .rh-page.rh-handbuch .rh-hb-pn__card:hover{ border-color:#C9DACD; box-shadow:0 8px 22px rgba(13,31,20,.08); } .rh-page.rh-handbuch .rh-hb-pn__card--next{align-items:flex-end;text-align:right;} .rh-page.rh-handbuch .rh-hb-pn__label{ font:600 10.5px/1.5 var(--font-mono)!important; letter-spacing:.08em; color:var(--hb-green); } .rh-page.rh-handbuch .rh-hb-pn__t{ font:600 14.5px/1.4 var(--font-sans); color:var(--hb-primary); } /* ---------- Lightbox ---------- */ .rh-page.rh-handbuch .rh-hb-lb{ position:fixed; inset:0; z-index:100000; background:rgba(13,31,20,.82); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:28px; cursor:zoom-out; } .rh-page.rh-handbuch .rh-hb-lb__frame{ position:relative; display:block; line-height:0; max-width:100%; } .rh-page.rh-handbuch .rh-hb-lb__img{ max-width:100%; max-height:88vh; border-radius:12px!important; background:var(--hb-card); cursor:default; } .rh-page.rh-handbuch .rh-hb-lb__frame .rh-hb-mark{ width:22px; height:22px; font:700 11px/22px var(--font-mono)!important; } .rh-page.rh-handbuch .rh-hb-lb__cap{ margin:0; font:400 13px/1.5 var(--font-sans); color:#DDEAE1; text-align:center; } .rh-page.rh-handbuch .rh-hb-lb__close{ position:absolute; top:16px; right:20px; width:40px; height:40px; border:0; border-radius:999px!important; background:rgba(255,255,255,.14); color:#fff; font:400 24px/1 var(--font-sans); cursor:pointer; } .rh-page.rh-handbuch .rh-hb-lb__close:hover{background:rgba(255,255,255,.26);} /* ---------- Screenreader-only ---------- */ .rh-page.rh-handbuch .rh-sr-only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ============================================================ * Salient-/WPCode-Hardening (CLAUDE.md S3) * ============================================================ */ /* [hidden] gegen Salients display-Regel absichern -- Lightbox, Drawer-Overlay * und Such-Dropdown haengen daran. */ .rh-page.rh-handbuch [hidden]{display:none!important;} /* WPCode-Snippet setzt a{font-family:monospace!important} -> per Spezifitaet * zuruecksetzen; Mono-Elemente ziehen oben einzeln nach (!important). */ .rh-page.rh-handbuch a{font-family:inherit!important;text-decoration:none;} /* Salients Typografie-Panel belegt b/i/em mit eigenen Fonts (Caveat!). */ .rh-page.rh-handbuch b, .rh-page.rh-handbuch strong{font-family:inherit!important;color:inherit;} .rh-page.rh-handbuch i, .rh-page.rh-handbuch em{ font-family:inherit!important; font-style:normal!important; font-size:inherit!important; line-height:inherit!important; letter-spacing:inherit!important; } .rh-page.rh-handbuch .rh-hb-it{font-style:italic!important;} /* Buttons: Salient rundet/faerbt global. */ .rh-page.rh-handbuch button{ font-family:var(--font-sans); -webkit-appearance:none; appearance:none; } /* Fokus-Ring auf allen interaktiven Elementen. */ .rh-page.rh-handbuch a:focus-visible, .rh-page.rh-handbuch button:focus-visible, .rh-page.rh-handbuch input:focus-visible{ outline:none!important; box-shadow:var(--hb-ring)!important; } /* ============================================================ * Responsive * ============================================================ */ @media (max-width:1020px){ .rh-page.rh-handbuch .rh-hb-shell{display:block;} /* Topbar sichtbar + sticky */ .rh-page.rh-handbuch .rh-hb-topbar{ display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:950; background:var(--hb-card); border-bottom:1px solid var(--hb-line); padding:10px 18px; } .rh-page.rh-handbuch .rh-hb-topbar__btn{ display:flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid var(--hb-line); border-radius:999px!important; background:var(--hb-accent); color:var(--hb-primary); font:600 12.5px/1.4 var(--font-sans); cursor:pointer; } .rh-page.rh-handbuch .rh-hb-topbar__ic{ display:flex; flex-direction:column; gap:3px; } .rh-page.rh-handbuch .rh-hb-topbar__ic span{ display:block; width:14px; height:2px; border-radius:2px; background:var(--hb-primary); } .rh-page.rh-handbuch .rh-hb-topbar__crumb{ font:500 13px/1.4 var(--font-sans); color:var(--hb-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rh-page.rh-handbuch .rh-hb-topbar__crumb a{color:var(--hb-primary);} /* Sidebar -> Off-Canvas-Drawer */ .rh-page.rh-handbuch .rh-hb-sidebar{ position:fixed; top:0; left:0; bottom:0; z-index:1100; max-height:none; height:100%; transform:translateX(-104%); transition:transform .22s ease; box-shadow:var(--hb-shadow-drop); border-right:1px solid var(--hb-line); } .rh-page.rh-handbuch .rh-hb-sidebar.is-open{transform:translateX(0);} .rh-page.rh-handbuch .rh-hb-doc{padding:34px 24px 70px;} } @media (max-width:680px){ .rh-page.rh-handbuch .rh-hb-doc{padding:26px 18px 60px;} .rh-page.rh-handbuch .rh-hb-h1{font-size:30px!important;} .rh-page.rh-handbuch .rh-hb-h2{font-size:20px!important;} .rh-page.rh-handbuch .rh-hb-shots--grid, .rh-page.rh-handbuch .rh-hb-shots--three{grid-template-columns:1fr;} .rh-page.rh-handbuch .rh-hb-pn{flex-direction:column;} .rh-page.rh-handbuch .rh-hb-pn__card--next{align-items:flex-start;text-align:left;} .rh-page.rh-handbuch .rh-hb-tiles{grid-template-columns:1fr 1fr;} } @media (max-width:480px){ .rh-page.rh-handbuch .rh-hb-tiles{grid-template-columns:1fr;} } /* ---------- Reduced Motion ---------- */ @media (prefers-reduced-motion:reduce){ .rh-page.rh-handbuch .rh-hb-sidebar, .rh-page.rh-handbuch .rh-hb-tile, .rh-page.rh-handbuch .rh-hb-pn__card{transition:none!important;} }