/* ==========================================================================
   Handy.Rocks – Gestaltung „Signal“ (Erweiterung handyrocks, SEO CMS 1.0.153)
   --------------------------------------------------------------------------
   Führt die Marke vom Juli 2026 weiter: Kopf in Tinte, Violett für Verweise,
   Signal-Orange für Hervorhebungen, das Logo mit den vier Empfangsbalken.
   Figtree für Überschriften und Text, JetBrains Mono für Zahlen, Codes und
   Rubrikzeilen. Keine Einblend-Effekte – alle Inhalte ohne JavaScript sichtbar.

   Dunkelmodus automatisch über die Systemeinstellung.

   Kontraste (WCAG AA): Text #151826 auf #F6F7FB = 16,9:1 · leiser Text
   #565F73 auf #FFFFFF = 6,4:1 · Violett #4A3AD4 auf #FFFFFF = 7,3:1 ·
   Text #151826 auf Signal #FF9E1B = 8,5:1 · dunkel: #E8EAF2 auf #0F1117 =
   15,6:1 · Verweis #A89FFF auf #0F1117 = 8,2:1
   ========================================================================== */

@font-face {
    font-family: 'Figtree';
    src: url('/assets/fonts/figtree-var.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --hr-papier: #F6F7FB;
    --hr-flaeche: #FFFFFF;
    --hr-flaeche-2: #EEF0F7;
    --hr-tinte: #151826;
    --hr-tinte-2: #565F73;
    --hr-tinte-3: #7B8398;
    --hr-linie: #E4E7F0;
    --hr-linie-2: #D3D8E5;
    --hr-violett: #4A3AD4;
    --hr-violett-2: #3626B4;
    --hr-violett-hell: #6D5EFF;
    --hr-violett-tint: #ECEAFF;
    --hr-signal: #FF9E1B;
    --hr-signal-2: #F08A00;
    --hr-signal-tint: #FFF3E0;
    --hr-gruen: #12894B;
    --hr-gruen-tint: #E5F5EC;
    --hr-rot: #C0392B;
    --hr-rot-tint: #FDEDEB;
    --hr-nacht: #12131A;
    --hr-nacht-2: #1B1E2B;
    --hr-nacht-3: #262A3B;
    --hr-ueberschrift: #12131A;
    --hr-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hr-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
    --hr-radius: 18px;
    --hr-radius-klein: 12px;
    --hr-schatten: 0 1px 2px rgba(18, 19, 26, .05), 0 12px 32px rgba(18, 19, 26, .08);
    --hr-schatten-gross: 0 2px 6px rgba(18, 19, 26, .06), 0 24px 60px rgba(18, 19, 26, .16);
    --hr-breite: 1200px;
    --hr-text-breite: 720px;

    /* Netzfarben (nur für Datenpunkte, immer mit Namen) */
    --c-telekom: #E20074; --c-vodafone: #E60000; --c-o2: #2F5BFF; --c-1u1: #2E7DD1;

    /* Kernvariablen auf die Marke umstellen */
    --navy: var(--hr-nacht);
    --primary-text: var(--hr-violett);
    --accent-text: var(--hr-violett);
    --font: var(--hr-sans);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hr-papier: #0F1117;
        --hr-flaeche: #171A23;
        --hr-flaeche-2: #1C202B;
        --hr-tinte: #E8EAF2;
        --hr-tinte-2: #A9B0C2;
        --hr-tinte-3: #8A92A6;
        --hr-linie: #262B38;
        --hr-linie-2: #343A4C;
        --hr-violett: #A89FFF;
        --hr-violett-2: #C7C1FF;
        --hr-violett-hell: #8F84FF;
        --hr-violett-tint: #221F3D;
        --hr-signal: #FFB547;
        --hr-signal-2: #FFC56E;
        --hr-signal-tint: #2E2414;
        --hr-gruen: #5FD08F;
        --hr-gruen-tint: #14271D;
        --hr-rot: #FF8A7A;
        --hr-rot-tint: #2E1916;
        --hr-ueberschrift: #F4F5FA;
        --hr-schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .3);
        --hr-schatten-gross: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 60px rgba(0, 0, 0, .45);
        color-scheme: dark;
    }
}

/* Inhalte nie versteckt: alte Einblend-Klassen neutralisieren */
.reveal, .reveal.visible { opacity: 1 !important; transform: none !important; }

html { scroll-padding-top: 84px; }
body {
    font-family: var(--hr-sans);
    background: var(--hr-papier);
    color: var(--hr-tinte);
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--hr-violett); }
a:hover { color: var(--hr-violett-2); }
:focus-visible { outline: 3px solid var(--hr-violett-hell); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(109, 94, 255, .25); }
img { max-width: 100%; height: auto; }
.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; }
.skip-link { background: var(--hr-signal); color: #151826; font-weight: 700; }

.hr-breite { max-width: var(--hr-breite); margin: 0 auto; padding: 0 1.5rem; }
.hr-lesespalte { max-width: calc(var(--hr-text-breite) + 3rem); }
.hr-klein { font-size: .85rem; color: var(--hr-tinte-2); line-height: 1.55; }
.hr-rubrik {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--hr-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--hr-violett); margin: 0 0 .7rem;
}

/* Empfangsbalken – das Markenzeichen im Kleinen */
.hr-balken { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.hr-balken i { display: block; width: 3px; border-radius: 1px; background: var(--hr-violett-hell); }
.hr-balken i:nth-child(1) { height: 4px; } .hr-balken i:nth-child(2) { height: 7px; }
.hr-balken i:nth-child(3) { height: 10px; } .hr-balken i:nth-child(4) { height: 12px; background: var(--hr-signal); }

/* ---------- Knöpfe ---------- */
.hr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--hr-sans); font-weight: 700; font-size: .95rem; line-height: 1.2;
    padding: .8rem 1.25rem; border-radius: 12px; border: 1.5px solid var(--hr-violett);
    background: var(--hr-violett); color: #fff; cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.hr-btn:hover { background: var(--hr-violett-2); border-color: var(--hr-violett-2); color: #fff; }
.hr-btn--signal { background: var(--hr-signal); border-color: var(--hr-signal); color: #151826; }
.hr-btn--signal:hover { background: var(--hr-signal-2); border-color: var(--hr-signal-2); color: #151826; }
.hr-btn--leise { background: transparent; color: var(--hr-violett); }
.hr-btn--leise:hover { background: var(--hr-violett-tint); color: var(--hr-violett-2); }
@media (prefers-color-scheme: dark) {
    .hr-btn { color: #12131A; }
    .hr-btn:hover { color: #12131A; }
}

/* ==========================================================================
   KOPF UND MENÜ (Markup des Kerns)
   ========================================================================== */
.header { background: rgba(18, 19, 26, .96); border-bottom: 1px solid rgba(255, 255, 255, .08); backdrop-filter: saturate(140%) blur(8px); position: sticky; top: 0; z-index: 1000; }
.header-inner { max-width: var(--hr-breite); height: 66px; padding: 0 1.5rem; }
.logo { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.logo:hover { color: #fff; }
.logo-mark { display: flex; width: auto; height: 34px; align-items: center; background: none; font-size: 0; box-shadow: none; border-radius: 0; }
.logo-mark svg { height: 34px; width: auto; }
.header .logo-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.nav { gap: .1rem; font-family: var(--hr-sans); }
.nav a, .nav-gruppe-kopf {
    color: rgba(255, 255, 255, .84); font-size: .93rem; font-weight: 600; padding: .5rem .72rem;
    border-radius: 9px; text-decoration: none; white-space: nowrap;
}
.nav a:hover, .nav a.active { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-gruppe { position: relative; }
.nav-gruppe-kopf { display: inline-flex; align-items: center; gap: .35rem; }
.nav-gruppe-kopf::after {
    content: ""; width: .38rem; height: .38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px); opacity: .6;
}
.nav-gruppe--aktiv > .nav-gruppe-kopf { color: #fff; box-shadow: inset 0 -2px 0 var(--hr-signal); border-radius: 9px 9px 0 0; }
.nav-unter {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px; padding: .5rem;
    background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein);
    box-shadow: var(--hr-schatten-gross); opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .15s, transform .15s, visibility .15s; z-index: 1100;
}
.nav-unter:has(> a:nth-child(10)) { columns: 2; column-gap: .5rem; min-width: 500px; }
.nav-gruppe:nth-last-of-type(-n+3) .nav-unter { left: auto; right: 0; }
.nav-unter::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-gruppe:hover .nav-unter, .nav-gruppe:focus-within .nav-unter { opacity: 1; visibility: visible; transform: none; }
.nav .nav-unter a { display: block; color: var(--hr-tinte); padding: .45rem .7rem; font-size: .9rem; font-weight: 500; border-radius: 8px; break-inside: avoid; white-space: normal; }
.nav .nav-unter a:first-child { font-weight: 700; color: var(--hr-violett); }
.nav .nav-unter a:hover { background: var(--hr-flaeche-2); color: var(--hr-ueberschrift); }
.nav .nav-unter a.active { background: var(--hr-violett-tint); color: var(--hr-violett); font-weight: 700; }
.nav-cta { margin-left: .4rem; background: var(--hr-signal) !important; color: #151826 !important; border-radius: 10px !important; padding: .48rem .95rem !important; font-weight: 700 !important; }
.nav-cta:hover { background: var(--hr-signal-2) !important; }
.hr-kopfsuche {
    margin-left: .5rem; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer;
}
.hr-kopfsuche:hover { background: rgba(255, 255, 255, .12); }
.hr-kopfsuche svg { width: 19px; height: 19px; }
/* Desktop: Menü rechtsbündig, Lupe ganz rechts dahinter */
@media (min-width: 1181px) {
    .header-inner > .nav { margin-left: auto; }
    .hr-kopfsuche { order: 3; margin-left: .75rem; }
}
@media (min-width: 1181px) and (max-width: 1320px) {
    .nav a, .nav-gruppe-kopf { padding: .5rem .5rem; font-size: .88rem; }
}
@media (max-width: 1180px) {
    .mobile-toggle { display: flex; position: relative; z-index: 1002; margin-left: auto; }
    .mobile-toggle span { background: #fff; }
    .mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav {
        display: none; position: fixed; top: 0; right: 0; width: 90%; max-width: 380px; height: 100vh; overflow-y: auto;
        background: var(--hr-nacht); flex-direction: column; align-items: stretch; padding: 4.75rem 1.25rem 2rem;
        box-shadow: -10px 0 40px rgba(0, 0, 0, .35); z-index: 1001; gap: .1rem;
    }
    .nav.active { display: flex; }
    .nav-gruppe-kopf { font-family: var(--hr-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--hr-signal); padding: 1rem .5rem .35rem; font-weight: 700; }
    .nav-gruppe-kopf::after { display: none; }
    .nav-unter, .nav-unter:has(> a:nth-child(10)) { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; columns: 1; }
    .nav .nav-unter a, .nav .nav-unter a:first-child { color: rgba(255, 255, 255, .86); padding: .55rem .5rem; border-bottom: 1px solid rgba(255, 255, 255, .07); border-radius: 0; }
    .nav .nav-unter a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
    .hr-kopfsuche { margin-left: auto; margin-right: .5rem; }
}

/* ---------- Suche ---------- */
.hr-suchfeld { position: relative; }
.hr-suche-treffer {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1200; background: var(--hr-flaeche);
    border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); box-shadow: var(--hr-schatten-gross);
    max-height: 60vh; overflow: auto; padding: .4rem; text-align: left;
}
.hr-suche-treffer a { display: block; padding: .55rem .7rem; border-radius: 8px; color: var(--hr-tinte); text-decoration: none; }
.hr-suche-treffer a:hover, .hr-suche-treffer a.aktiv { background: var(--hr-flaeche-2); }
.hr-suche-treffer a span { display: block; font-family: var(--hr-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hr-violett); }
.hr-suche-treffer a strong { font-weight: 650; }
.hr-suche-leer { padding: .6rem .7rem; color: var(--hr-tinte-2); font-size: .92rem; }
.hr-suchebene { position: fixed; inset: 0; z-index: 2000; background: rgba(10, 11, 16, .62); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; }
.hr-suchebene[hidden] { display: none; }
.hr-suchebene-box { width: min(640px, 100%); background: var(--hr-flaeche); border-radius: var(--hr-radius); padding: 1rem; box-shadow: var(--hr-schatten-gross); }
.hr-suchebene-box input { width: 100%; font: inherit; font-size: 1.1rem; padding: .85rem 1rem; border-radius: 12px; border: 1.5px solid var(--hr-linie-2); background: var(--hr-papier); color: var(--hr-tinte); }
.hr-suchebene-box .hr-suche-treffer { position: static; box-shadow: none; border: 0; margin-top: .5rem; max-height: 55vh; }

/* ==========================================================================
   STARTSEITE
   ========================================================================== */
.hr-held { position: relative; overflow: hidden; background: linear-gradient(180deg, #12131A 0%, #1B1E2B 100%); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.75rem, 6vw, 4.5rem); }
.hr-held-signal {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(900px 480px at 85% -10%, rgba(109, 94, 255, .32), transparent 62%),
        radial-gradient(520px 320px at 8% 110%, rgba(255, 158, 27, .16), transparent 70%),
        repeating-radial-gradient(circle at 92% 18%, rgba(255, 255, 255, .045) 0 1px, transparent 1px 46px);
}
.hr-held-inhalt { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.hr-held-kicker { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--hr-mono); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin: 0 0 1rem; }
.hr-held h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; color: #fff; margin: 0 0 1.1rem; max-width: 15ch; }
.hr-held h1 em { font-style: normal; color: var(--hr-signal); }
.hr-held-lead { font-size: clamp(1.06rem, 1.5vw, 1.2rem); color: rgba(255, 255, 255, .78); max-width: 40ch; margin: 0 0 1.6rem; }
.hr-held-suche { position: relative; display: flex; gap: .5rem; max-width: 560px; margin-bottom: 1.4rem; }
.hr-held-suche input {
    flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: .9rem 1.1rem; border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); color: #fff;
}
.hr-held-suche input::placeholder { color: rgba(255, 255, 255, .55); }
.hr-held-suche input:focus { outline: none; border-color: var(--hr-signal); background: rgba(255, 255, 255, .1); }
.hr-einstiege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; max-width: 620px; }
.hr-einstiege a {
    display: block; height: 100%; padding: .8rem .9rem; border-radius: 12px; text-decoration: none; color: #fff;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: background .15s, border-color .15s;
}
.hr-einstiege a:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 158, 27, .55); color: #fff; }
.hr-einstiege strong { display: block; font-size: .98rem; }
.hr-einstiege span { display: block; font-size: .82rem; color: rgba(255, 255, 255, .62); line-height: 1.4; margin-top: .15rem; }
.hr-held-bild .hr-bild { margin: 0; }
.hr-held-bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.hr-held-bild figcaption { color: rgba(255, 255, 255, .55); text-align: right; font-size: .76rem; margin-top: .4rem; }
.hr-held-bild .hr-ki { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .6); }
@media (max-width: 960px) {
    .hr-held-inhalt { grid-template-columns: 1fr; }
    .hr-held-bild { order: -1; }
    .hr-held-bild img { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) { .hr-einstiege { grid-template-columns: 1fr; } .hr-held-suche { flex-direction: column; } }

.hr-abschnitt { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.hr-abschnitt--flaeche { background: var(--hr-flaeche-2); }
.hr-abschnitt-kopf { max-width: 720px; margin-bottom: 1.8rem; }
.hr-abschnitt h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; color: var(--hr-ueberschrift); margin: 0 0 .7rem; }
.hr-abschnitt-kopf p { color: var(--hr-tinte-2); margin: 0; }

/* Die vier Netze */
.hr-netzkarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hr-netzkarte { position: relative; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); padding: 1.2rem 1.2rem 1.1rem; overflow: hidden; }
.hr-netzkarte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--netz, var(--hr-violett)); }
.hr-netzkarte-name { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; color: var(--hr-ueberschrift); margin: .2rem 0 .5rem; }
.hr-netzkarte .hr-netz-punkt { background: var(--netz, var(--hr-violett)); }
.hr-netzkarte p { margin: 0 0 .8rem; color: var(--hr-tinte-2); font-size: .95rem; line-height: 1.55; }
.hr-mehr { font-weight: 700; font-size: .92rem; text-decoration: none; }
.hr-mehr::after { content: " →"; }
.hr-netzleiste-fuss { margin-top: 1rem; }
@media (max-width: 960px) { .hr-netzkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hr-netzkarten { grid-template-columns: 1fr; } }

/* Bereichskarten */
.hr-bereichskarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem; }
.hr-bereichskarte { position: relative; display: flex; flex-direction: column; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.hr-bereichskarte:hover { box-shadow: var(--hr-schatten); transform: translateY(-2px); }
.hr-bereichskarte-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--hr-flaeche-2); }
.hr-bereichskarte-text { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.hr-bereichskarte-link { font-weight: 800; font-size: 1.2rem; color: var(--hr-ueberschrift); text-decoration: none; }
.hr-bereichskarte-link::after { content: ""; position: absolute; inset: 0; }
.hr-bereichskarte p { margin: 0; color: var(--hr-tinte-2); font-size: .95rem; line-height: 1.55; }
.hr-zahl-chip { align-self: flex-start; margin-top: auto; font-family: var(--hr-mono); font-size: .72rem; font-weight: 700; color: var(--hr-violett); background: var(--hr-violett-tint); padding: .2rem .5rem; border-radius: 6px; }

/* Werkzeuge */
.hr-werkzeug-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.hr-werkzeug { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .2rem .85rem; align-items: start; margin: 0; padding: 1.1rem 1.15rem; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); }
.hr-werkzeug:hover { border-color: var(--hr-violett-hell); box-shadow: var(--hr-schatten); }
.hr-werkzeug-zeichen { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: var(--hr-violett-tint); color: var(--hr-violett); font-family: var(--hr-mono); font-weight: 800; font-size: .9rem; }
.hr-werkzeug-link { font-weight: 800; color: var(--hr-ueberschrift); text-decoration: none; line-height: 1.3; }
.hr-werkzeug-link::after { content: ""; position: absolute; inset: 0; }
.hr-werkzeug p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--hr-tinte-2); }

/* Zwei Spalten: Hilfe und neu geprüft */
.hr-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.hr-zwei h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
@media (max-width: 860px) { .hr-zwei { grid-template-columns: 1fr; } }
.hr-linkliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hr-linie-2); }
.hr-linkliste li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--hr-linie-2); }
.hr-linkliste a { display: block; flex: 1; padding: .72rem 0; font-weight: 650; color: var(--hr-ueberschrift); text-decoration: none; }
.hr-linkliste a:hover { color: var(--hr-violett); }
.hr-linkliste a::before { content: "›"; color: var(--hr-signal); font-weight: 800; margin-right: .55rem; }
.hr-linkliste time { font-family: var(--hr-mono); font-size: .76rem; color: var(--hr-tinte-3); white-space: nowrap; }

/* So arbeiten wir */
.hr-versprechen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hr-versprechen li { background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); padding: 1.2rem 1.25rem; border-top: 3px solid var(--hr-violett-hell); }
.hr-versprechen li:nth-child(2) { border-top-color: var(--hr-signal); }
.hr-versprechen li:nth-child(3) { border-top-color: var(--hr-gruen); }
.hr-versprechen-titel { font-weight: 800; font-size: 1.08rem; color: var(--hr-ueberschrift); margin: 0 0 .35rem; }
.hr-versprechen p { margin: 0; color: var(--hr-tinte-2); font-size: .95rem; line-height: 1.6; }
.hr-haltung-fuss { margin-top: 1.1rem; }
@media (max-width: 860px) { .hr-versprechen { grid-template-columns: 1fr; } }

/* ==========================================================================
   ARTIKEL
   ========================================================================== */
.hr-main { display: block; }
.hr-kopf { position: relative; padding: clamp(1.75rem, 4.5vw, 3rem) 0 1.6rem; background: linear-gradient(180deg, var(--hr-flaeche-2) 0%, var(--hr-papier) 100%); }
.hr-kopf-inhalt { max-width: calc(var(--hr-text-breite) + 3rem); }
@media (min-width: 1101px) { .hr-artikel--toc .hr-kopf-inhalt { max-width: calc(var(--hr-text-breite) + 3rem + 19rem); padding-left: calc(1.5rem + 19rem); } }
.hr-brotkrumen { font-size: .84rem; color: var(--hr-tinte-2); margin-bottom: 1.3rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.hr-brotkrumen a { color: var(--hr-tinte-2); text-decoration: underline; text-decoration-color: var(--hr-linie-2); text-underline-offset: 3px; }
.hr-brotkrumen a:hover { color: var(--hr-violett); }
.hr-brotkrumen span[aria-hidden] { color: var(--hr-tinte-3); }
.hr-kopf h1 { font-size: clamp(1.95rem, 4.4vw, 3rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 800; color: var(--hr-ueberschrift); margin: 0 0 1rem; max-width: 24ch; }
.hr-lead { font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.62; color: var(--hr-tinte); max-width: var(--hr-text-breite); margin: 0 0 1.15rem; }
.hr-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .86rem; color: var(--hr-tinte-2); margin: 0; }
.hr-meta span + span::before { content: "·"; margin-right: 1.1rem; color: var(--hr-tinte-3); }
@media (max-width: 520px) { .hr-meta span + span::before { content: none; } .hr-meta { gap: .2rem 1rem; } }
.hr-meta a { color: var(--hr-tinte); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--hr-signal); }
.hr-geprueft { color: var(--hr-gruen); font-weight: 600; }
.hr-geprueft::after { content: " ✓"; }

/* Sofort-Lösung auf Hilfe-Seiten */
.hr-sofort { max-width: var(--hr-text-breite); background: var(--hr-signal-tint); border: 1px solid rgba(255, 158, 27, .45); border-left: 5px solid var(--hr-signal); border-radius: 0 var(--hr-radius-klein) var(--hr-radius-klein) 0; padding: 1rem 1.2rem; margin: 0 0 1.2rem; }
.hr-sofort-titel { font-family: var(--hr-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hr-tinte); margin: 0 0 .35rem; }
.hr-sofort p:last-child { margin: 0; font-size: 1.08rem; line-height: 1.6; }

.hr-titelbild-rahmen { max-width: var(--hr-breite); margin: 0 auto 2.25rem; padding: 0 1.5rem; }
.hr-titelbild { margin: 0; }
.hr-titelbild img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--hr-radius); background: var(--hr-flaeche-2); }
.hr-titelbild figcaption { text-align: right; margin-top: .4rem; }

.hr-raster { max-width: calc(var(--hr-text-breite) + 3rem); margin: 0 auto; padding: 0 1.5rem 4rem; }
.hr-raster--toc { max-width: calc(var(--hr-text-breite) + 3rem + 19rem); display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.hr-seitenspalte { position: sticky; top: 90px; }
.hr-toc { border-left: 2px solid var(--hr-linie-2); padding-left: 1rem; }
.hr-toc summary { font-family: var(--hr-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hr-violett); cursor: pointer; list-style: none; margin-bottom: .6rem; }
.hr-toc summary::-webkit-details-marker { display: none; }
.hr-toc ol { list-style: none; margin: 0; padding: 0; }
.hr-toc a { display: block; font-size: .88rem; line-height: 1.4; padding: .32rem 0; color: var(--hr-tinte-2); text-decoration: none; }
.hr-toc a:hover, .hr-toc a.aktuell { color: var(--hr-ueberschrift); }
.hr-toc a.aktuell { font-weight: 700; box-shadow: -1rem 0 0 -0.84rem var(--hr-signal); }
@media (max-width: 1100px) {
    .hr-raster--toc { display: block; max-width: calc(var(--hr-text-breite) + 3rem); }
    .hr-seitenspalte { position: static; margin-bottom: 2rem; }
    .hr-toc { background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); padding: .9rem 1.1rem; }
    .hr-toc summary { margin: 0; }
    .hr-toc summary::after { content: " ▾"; }
    .hr-toc[open] summary { margin-bottom: .5rem; }
}

/* ---------- Fließtext ---------- */
.hr-main .prose { color: var(--hr-tinte); font-size: 1.0625rem; line-height: 1.75; }
.hr-main .prose > *:first-child { margin-top: 0; }
.hr-main .prose p { margin: 0 0 1.2rem; }
.hr-main .prose h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); line-height: 1.22; letter-spacing: -.018em; font-weight: 800; color: var(--hr-ueberschrift); margin: 3rem 0 1rem; padding: 0; border: 0; }
.hr-main .prose h2::before { content: ""; display: block; width: 2.25rem; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--hr-violett-hell) 0 60%, var(--hr-signal) 60% 100%); margin-bottom: .9rem; }
.hr-main .prose h3 { font-size: 1.2rem; line-height: 1.35; font-weight: 750; color: var(--hr-ueberschrift); margin: 2rem 0 .65rem; }
.hr-main .prose h4 { font-size: .98rem; font-weight: 750; color: var(--hr-ueberschrift); margin: 1.4rem 0 .5rem; }
.hr-main .prose a { color: var(--hr-violett); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(74, 58, 212, .35); }
.hr-main .prose a:hover { color: var(--hr-violett-2); text-decoration-color: currentColor; }
.hr-main .prose strong { color: var(--hr-ueberschrift); font-weight: 750; }
.hr-main .prose ul, .hr-main .prose ol { margin: 0 0 1.35rem 1.3rem; padding: 0; }
.hr-main .prose li { margin-bottom: .45rem; padding-left: .2rem; }
.hr-main .prose ul li::marker { color: var(--hr-signal); }
.hr-main .prose ol li::marker { color: var(--hr-violett); font-family: var(--hr-mono); font-weight: 700; font-size: .9em; }
.hr-main .prose hr { border: 0; border-top: 1px solid var(--hr-linie-2); margin: 2.5rem 0; }
.hr-main .prose code { font-family: var(--hr-mono); font-size: .9em; background: var(--hr-flaeche-2); border: 1px solid var(--hr-linie); padding: .05em .35em; border-radius: 5px; }
.hr-main .prose blockquote { margin: 1.75rem 0; padding: .3rem 0 .3rem 1.3rem; border-left: 3px solid var(--hr-violett-hell); color: var(--hr-ueberschrift); font-size: 1.1rem; }

/* Bilder */
.hr-main .prose figure, .hr-bild { margin: 2rem 0; }
.hr-bild img { border-radius: var(--hr-radius-klein); width: 100%; background: var(--hr-flaeche-2); }
.hr-main .prose figcaption, .hr-bild figcaption { font-size: .82rem; color: var(--hr-tinte-2); margin-top: .5rem; text-align: left; line-height: 1.5; }
.hr-ki { display: inline-block; font-family: var(--hr-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hr-tinte-2); border: 1px solid var(--hr-linie-2); border-radius: 4px; padding: 0 .35rem; margin-left: .35rem; vertical-align: 1px; }

/* Grafiken aus dem Bestand (SVG) – Variablen der alten Gestaltung auf „Signal“ umgelegt */
.hr-grafik {
    --surface: var(--hr-flaeche); --paper: var(--hr-papier); --ink: var(--hr-ueberschrift); --ink-2: var(--hr-tinte); --ink-3: var(--hr-tinte-2);
    --text: var(--hr-tinte); --muted: var(--hr-tinte-2); --muted-2: var(--hr-tinte-3); --line: var(--hr-linie-2); --line-2: var(--hr-flaeche-2);
    --brand: var(--hr-violett-hell); --brand-bright: var(--hr-violett-hell); --brand-tint: var(--hr-violett-tint); --brand-ink: var(--hr-violett-2);
    --signal: var(--hr-signal); --signal-deep: var(--hr-signal-2); --signal-tint: var(--hr-signal-tint); --ok: var(--hr-gruen); --ok-tint: var(--hr-gruen-tint);
    --c-telekom: #E20074; --c-vodafone: #E60000; --c-o2: #3D5AFE; --c-1u1: #2E7DD1;
    margin: 2rem 0; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); padding: 1rem 1rem .9rem;
}
.hr-grafik svg { display: block; width: 100%; height: auto; }
.hr-grafik svg text { font-family: var(--hr-sans) !important; }
.hr-grafik figcaption { padding: 0 .2rem; }

/* Tabellen */
.tabelle { overflow-x: auto; margin: 1.75rem 0; border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); background: var(--hr-flaeche); -webkit-overflow-scrolling: touch; }
.hr-main .prose table, .tabelle table { width: 100%; border-collapse: collapse; margin: 0; font-size: .93rem; line-height: 1.5; }
.hr-main .prose caption, .tabelle caption { caption-side: top; text-align: left; padding: .85rem 1rem .6rem; font-size: .98rem; color: var(--hr-ueberschrift); font-weight: 750; }
.hr-main .prose th, .tabelle th { background: var(--hr-flaeche-2); color: var(--hr-ueberschrift); font-weight: 750; font-size: .84rem; text-align: left; padding: .65rem 1rem; border-bottom: 1px solid var(--hr-linie-2); vertical-align: top; }
.hr-main .prose thead th { position: sticky; top: 0; }
.hr-main .prose tbody th { background: none; font-size: .93rem; font-weight: 700; border-bottom: 1px solid var(--hr-linie); }
.hr-main .prose td, .tabelle td { padding: .65rem 1rem; border-bottom: 1px solid var(--hr-linie); vertical-align: top; }
.hr-main .prose tr:last-child > * { border-bottom: 0; }
.hr-main .prose td.zahl { font-family: var(--hr-mono); font-size: .88rem; white-space: nowrap; }
.hr-main .prose .bester, .hr-main .prose td.bester { background: var(--hr-gruen-tint); font-weight: 700; }
@media (max-width: 900px) { .tabelle--breit table { min-width: 760px; } }
.hr-minibalken { display: inline-block; width: 46px; height: 6px; border-radius: 6px; background: var(--hr-flaeche-2); margin-right: .5rem; vertical-align: middle; overflow: hidden; }
.hr-minibalken i { display: block; height: 100%; background: var(--hr-violett-hell); border-radius: 6px; }

/* Netz-Chip */
.hr-netz { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-weight: 600; }
.hr-netz-punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--hr-flaeche); }

/* Kästen */
.hr-main .prose .kasten, .hr-kern { background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); padding: 1.15rem 1.35rem; margin: 1.75rem 0; }
.hr-main .prose .kasten > :last-child { margin-bottom: 0; }
.hr-main .prose .kasten-titel { font-weight: 800; color: var(--hr-ueberschrift); margin: 0 0 .4rem; }
.hr-main .prose .kasten--tipp { border-left: 4px solid var(--hr-gruen); }
.hr-main .prose .kasten--warnung { border-left: 4px solid var(--hr-signal); background: var(--hr-signal-tint); border-color: rgba(255, 158, 27, .35); }
.hr-main .prose .kasten--wissen { background: var(--hr-violett-tint); border-color: transparent; }
.hr-kern { background: var(--hr-violett-tint); border: 0; border-left: 4px solid var(--hr-violett-hell); border-radius: 0 var(--hr-radius-klein) var(--hr-radius-klein) 0; }
.hr-kern-titel { font-family: var(--hr-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hr-violett); margin: 0 0 .5rem !important; }
.hr-kern ul { margin-bottom: 0 !important; }
.hr-kern li:last-child { margin-bottom: 0; }

/* Steckbrief */
.hr-steckbrief { margin: 1.75rem 0; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); overflow: hidden; }
.hr-steckbrief-titel { display: flex; align-items: center; gap: .6rem; margin: 0 !important; padding: .8rem 1.15rem; background: var(--hr-nacht); color: #fff; font-weight: 800; font-size: 1rem; }
.hr-steckbrief dl { margin: 0; display: grid; grid-template-columns: 1fr; }
.hr-steckbrief dl > div { display: grid; grid-template-columns: minmax(9rem, 34%) 1fr; gap: 1rem; padding: .62rem 1.15rem; border-bottom: 1px solid var(--hr-linie); }
.hr-steckbrief dt { font-size: .86rem; color: var(--hr-tinte-2); font-weight: 600; }
.hr-steckbrief dd { margin: 0; font-size: .95rem; font-weight: 600; color: var(--hr-ueberschrift); }
.hr-steckbrief-stand { margin: 0 !important; padding: .6rem 1.15rem; font-size: .78rem; color: var(--hr-tinte-2); background: var(--hr-flaeche-2); }
@media (max-width: 520px) { .hr-steckbrief dl > div { grid-template-columns: 1fr; gap: .1rem; } }

/* Irrtum und Befund */
.hr-irrtum { margin: 1.75rem 0; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--hr-radius-klein); overflow: hidden; border: 1px solid var(--hr-linie); }
.hr-irrtum p { margin: 0 !important; padding: 1rem 1.15rem; font-size: .98rem; line-height: 1.55; }
.hr-irrtum span { display: block; font-family: var(--hr-mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .35rem; }
.hr-irrtum-annahme { background: var(--hr-rot-tint); color: var(--hr-tinte); }
.hr-irrtum-annahme span { color: var(--hr-rot); }
.hr-irrtum-befund { background: var(--hr-gruen-tint); }
.hr-irrtum-befund span { color: var(--hr-gruen); }
@media (max-width: 620px) { .hr-irrtum { grid-template-columns: 1fr; } }

/* Code-Chip (Hilfe) */
.hr-code { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 0 1.25rem; padding: .75rem .9rem; background: var(--hr-nacht); border-radius: var(--hr-radius-klein); color: #fff; }
.hr-main .prose .hr-code-wert { font-family: var(--hr-mono); font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; background: none; border: 0; color: var(--hr-signal); padding: 0; }
.hr-code-text { flex: 1; min-width: 12rem; font-size: .95rem; color: rgba(255, 255, 255, .82); }
.hr-code-kopieren { font: inherit; font-size: .82rem; font-weight: 700; color: #151826; background: var(--hr-signal); border: 0; border-radius: 8px; padding: .4rem .8rem; cursor: pointer; }
.hr-code-kopieren.kopiert { background: var(--hr-gruen); color: #fff; }

/* Schrittfolgen */
.hr-main .prose ol.hr-schritte { list-style: none; counter-reset: schritt; margin: 1.5rem 0; padding: 0; }
.hr-main .prose ol.hr-schritte > li { counter-increment: schritt; position: relative; padding: .9rem 1rem .9rem 3.4rem; margin: 0 0 .6rem; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); }
.hr-main .prose ol.hr-schritte > li::before { content: counter(schritt); position: absolute; left: 1rem; top: .9rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--hr-violett-hell); color: #fff; font-family: var(--hr-mono); font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; }

/* Pro und Contra, Karten, Kennzahlen (aus dem Bestand) */
.hr-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.75rem 0; }
.hr-spalte { background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); padding: 1rem 1.15rem; }
.hr-spalte--pro { border-top: 4px solid var(--hr-gruen); }
.hr-spalte--contra { border-top: 4px solid var(--hr-signal); }
.hr-main .prose .hr-spalte-titel { font-weight: 800; color: var(--hr-ueberschrift); margin: 0 0 .5rem; }
.hr-main .prose .hr-spalte ul { margin-bottom: 0; }
@media (max-width: 620px) { .hr-spalten { grid-template-columns: 1fr; } }
.hr-infokarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1.75rem 0; }
.hr-infokarte { background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); padding: 1rem 1.1rem; }
.hr-infokarte > :last-child { margin-bottom: 0 !important; }
.hr-main .prose .hr-infokarte-titel { font-weight: 800; color: var(--hr-ueberschrift); margin: 0 0 .35rem; }
.hr-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 1.75rem 0; }
.hr-kennzahl { background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); padding: .9rem 1rem; }
.hr-kennzahl-wert { display: block; font-family: var(--hr-mono); font-size: 1.5rem; font-weight: 800; color: var(--hr-violett); line-height: 1.15; }
.hr-kennzahl-text { display: block; font-size: .86rem; color: var(--hr-tinte-2); margin-top: .3rem; line-height: 1.45; }

/* Weiterführend (aus dem Bestand: art-close) */
.hr-weiter { margin: 2.25rem 0; padding: 1.2rem 1.35rem; border-radius: var(--hr-radius-klein); background: var(--hr-nacht); color: rgba(255, 255, 255, .86); }
.hr-main .prose .hr-weiter-titel { color: #fff; font-weight: 800; font-size: 1.08rem; margin: 0 0 .35rem; }
.hr-weiter p { color: rgba(255, 255, 255, .78); }
.hr-weiter .hr-weiter-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 0; }
.hr-main .prose .hr-weiter a { display: inline-block; margin: .35rem .4rem 0 0; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; padding: .45rem .8rem; font-weight: 650; font-size: .92rem; }
.hr-main .prose .hr-weiter a:first-of-type { background: var(--hr-signal); border-color: var(--hr-signal); color: #151826; }
.hr-main .prose .hr-weiter a:hover { background: rgba(255, 255, 255, .16); }
.hr-main .prose .hr-weiter a:first-of-type:hover { background: var(--hr-signal-2); }
.hr-weiter > div > b { display: block; color: #fff; font-size: 1.08rem; margin-bottom: .3rem; }

/* Chips, Linkraster, Schritte (aus dem Bestand) */
.hr-chip { display: inline-block; font-family: var(--hr-mono); font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: .18rem .5rem; border-radius: 6px; background: var(--hr-flaeche-2); color: var(--hr-tinte-2); margin: .2rem 0 .5rem; }
.hr-chip.bester { background: var(--hr-gruen-tint); color: var(--hr-gruen); }
.hr-linkraster { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.6rem; }
.hr-main .prose .hr-linkraster a { padding: .42rem .8rem; border: 1px solid var(--hr-linie-2); border-radius: 999px; text-decoration: none; font-weight: 650; font-size: .9rem; background: var(--hr-flaeche); color: var(--hr-ueberschrift); }
.hr-main .prose .hr-linkraster a:hover { border-color: var(--hr-violett-hell); color: var(--hr-violett); }
.hr-schritt-titel { display: block; color: var(--hr-ueberschrift); font-weight: 800; margin-bottom: .15rem; }
.hr-main .prose .hr-infokarte ul { margin: .4rem 0 .6rem 1.1rem; font-size: .94rem; }
.hr-main .prose .hr-infokarte-titel { display: flex; align-items: center; gap: .5rem; }
.hr-suche-hell input { background: var(--hr-flaeche) !important; color: var(--hr-tinte) !important; border-color: var(--hr-linie-2) !important; }
.hr-suche-hell input::placeholder { color: var(--hr-tinte-3) !important; }
.hr-suchseite { margin-bottom: 2rem; }
.hr-link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--hr-violett); text-decoration: underline; cursor: pointer; }

/* Quellen */
.hr-quellen { margin: 2.75rem 0 1.5rem; padding: 1.1rem 1.25rem; border: 1px dashed var(--hr-linie-2); border-radius: var(--hr-radius-klein); font-size: .9rem; color: var(--hr-tinte-2); }
.hr-main .prose .hr-quellen h2 { font-size: 1rem; margin: 0 0 .6rem; letter-spacing: 0; }
.hr-main .prose .hr-quellen h2::before { display: none; }
.hr-main .prose .hr-quellen ul { margin-bottom: .6rem; }
.hr-main .prose .hr-quellen li { margin-bottom: .3rem; }
.hr-main .prose .hr-quellen p { margin-bottom: .5rem; }

/* Seitenkarten auf Bereichsseiten */
.hr-main .prose ul.hr-seitenkarten { list-style: none; margin: 1.25rem 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.hr-main .prose .hr-seitenkarte { position: relative; margin: 0; padding: 0; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); overflow: hidden; display: flex; flex-direction: column; }
.hr-main .prose .hr-seitenkarte:hover { border-color: var(--hr-violett-hell); box-shadow: var(--hr-schatten); }
.hr-seitenkarte-bild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 !important; background: var(--hr-flaeche-2); }
.hr-seitenkarte-bild--leer { background: linear-gradient(135deg, var(--hr-violett-tint), var(--hr-signal-tint)); }
.hr-main .prose .hr-seitenkarte-link { display: block; padding: .7rem .9rem 0; font-weight: 750; color: var(--hr-ueberschrift); text-decoration: none; line-height: 1.35; }
.hr-main .prose .hr-seitenkarte-link::after { content: ""; position: absolute; inset: 0; }
.hr-main .prose .hr-seitenkarte p { margin: .3rem 0 .85rem; padding: 0 .9rem; font-size: .86rem; line-height: 1.45; color: var(--hr-tinte-2); }

/* Rechner */
.hr-rechner { margin: 0 0 2.25rem; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius); box-shadow: var(--hr-schatten); overflow: hidden; }
.hr-rechner-kopf { padding: 1.2rem 1.35rem .9rem; background: linear-gradient(135deg, var(--hr-violett-tint), var(--hr-flaeche) 70%); border-bottom: 1px solid var(--hr-linie); }
.hr-main .prose .hr-rechner-titel { font-size: 1.3rem; font-weight: 800; color: var(--hr-ueberschrift); margin: 0 0 .3rem; line-height: 1.25; }
.hr-main .prose .hr-rechner-kopf .hr-klein { margin: 0; }
.hr-rechner-form { padding: .6rem 1.35rem 1rem; }
.hr-rechner-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.hr-rz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--hr-linie); }
.hr-rz-label { font-weight: 700; font-size: .96rem; color: var(--hr-ueberschrift); }
.hr-rz-feld { display: flex; align-items: center; gap: .5rem; }
.hr-rz-feld input[type=number] { width: 5.5rem; font: inherit; font-family: var(--hr-mono); font-size: 1rem; font-weight: 700; text-align: right; padding: .45rem .6rem; border: 1.5px solid var(--hr-linie-2); border-radius: 9px; background: var(--hr-papier); color: var(--hr-tinte); }
.hr-rz-feld input:focus, .hr-rz-qualitaet:focus { outline: none; border-color: var(--hr-violett-hell); box-shadow: 0 0 0 3px rgba(109, 94, 255, .2); }
.hr-rz-einheit { font-size: .82rem; color: var(--hr-tinte-2); min-width: 7.5rem; }
.hr-rz-qualitaet { grid-column: 1 / -1; font: inherit; font-size: .9rem; padding: .45rem .6rem; border: 1.5px solid var(--hr-linie-2); border-radius: 9px; background: var(--hr-papier); color: var(--hr-tinte); max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.hr-main .prose .hr-rz-hinweis { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: var(--hr-tinte-3); line-height: 1.4; }
.hr-rz--wlan input[type=range] { width: 11rem; accent-color: var(--hr-violett-hell); }
.hr-rz--wlan output { font-family: var(--hr-mono); font-weight: 800; min-width: 3.5rem; text-align: right; }
.hr-rechner-ergebnis { padding: 1.2rem 1.35rem 1.25rem; background: var(--hr-nacht); color: #fff; }
.hr-main .prose .hr-ergebnis-zeile { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .3rem; }
.hr-ergebnis-wert { font-family: var(--hr-mono); font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: 800; color: var(--hr-signal); line-height: 1; }
.hr-ergebnis-einheit { font-size: 1.05rem; font-weight: 700; color: rgba(255, 255, 255, .86); }
.hr-main .prose .hr-ergebnis-empfehlung { color: rgba(255, 255, 255, .9); font-size: 1.02rem; margin: 0 0 .9rem; }
.hr-main .prose .hr-ergebnis-empfehlung strong { color: #fff; }
.hr-main .prose ol.hr-ergebnis-balken { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .35rem; }
.hr-main .prose ol.hr-ergebnis-balken li { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr 6.5rem; gap: .6rem; align-items: center; margin: 0; padding: 0; font-size: .84rem; color: rgba(255, 255, 255, .8); }
.hr-ergebnis-balken i { display: block; height: 8px; border-radius: 8px; background: var(--hr-violett-hell); min-width: 2px; }
.hr-ergebnis-balken b { font-family: var(--hr-mono); font-size: .8rem; color: #fff; text-align: right; white-space: nowrap; }
.hr-rechner-ergebnis .hr-klein { color: rgba(255, 255, 255, .6); margin: 0; }
.hr-main .prose dl.hr-ergebnis-liste { margin: 0 0 .9rem; display: grid; grid-template-columns: minmax(10rem, 38%) 1fr; gap: .45rem 1rem; align-items: baseline; }
.hr-ergebnis-liste dt { color: rgba(255, 255, 255, .7); font-size: .9rem; }
.hr-ergebnis-liste dd { margin: 0; color: #fff; font-weight: 650; }
.hr-ergebnis-liste dd.hr-stark { color: var(--hr-signal); font-size: 1.18rem; font-weight: 800; }
@media (max-width: 560px) { .hr-main .prose dl.hr-ergebnis-liste { grid-template-columns: 1fr; gap: .1rem; } .hr-ergebnis-liste dd { margin-bottom: .5rem; } }
.hr-rz-feld input[type=date] { font: inherit; font-family: var(--hr-mono); font-size: .95rem; padding: .45rem .6rem; border: 1.5px solid var(--hr-linie-2); border-radius: 9px; background: var(--hr-papier); color: var(--hr-tinte); }
.hr-js .hr-rechner-form[hidden], .hr-js .hr-rechner-ergebnis[hidden] { display: block; }
@media (max-width: 560px) { .hr-rz { grid-template-columns: minmax(0, 1fr); } .hr-rz-qualitaet { width: 100%; } .hr-rz-einheit { min-width: 0; } }

/* Fragen */
.hr-main .faq-block { margin-top: 3rem; }
.hr-main .faq-block .section-heading { font-size: clamp(1.45rem, 2.4vw, 1.8rem); font-weight: 800; letter-spacing: -.018em; color: var(--hr-ueberschrift); margin: 0 0 1rem; }
.hr-main .faq-item { background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); margin-bottom: .6rem; padding: 0; }
.hr-main .faq-q { cursor: pointer; list-style: none; padding: .9rem 2.6rem .9rem 1.1rem; font-weight: 750; color: var(--hr-ueberschrift); position: relative; }
.hr-main .faq-q::-webkit-details-marker { display: none; }
.hr-main .faq-q::after { content: "+"; position: absolute; right: 1.1rem; top: .75rem; font-family: var(--hr-mono); font-size: 1.2rem; color: var(--hr-violett); }
.hr-main .faq-item[open] .faq-q::after { content: "–"; }
.hr-main .faq-a { padding: 0 1.1rem .9rem; color: var(--hr-tinte); }
.hr-main .faq-a p:last-child { margin-bottom: 0; }

/* Autor */
.hr-autorbox { display: flex; gap: 1rem; align-items: flex-start; margin: 2.75rem 0 0; padding: 1.2rem 1.25rem; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); }
.hr-autor-bild { width: 72px; height: 72px; border-radius: 50%; flex: none; object-fit: cover; }
.hr-autor-initialen { display: flex; align-items: center; justify-content: center; background: var(--hr-nacht); color: var(--hr-signal); font-family: var(--hr-mono); font-weight: 800; font-size: 1.2rem; }
.hr-main .prose .hr-autor-name { font-weight: 800; margin: 0 0 .3rem; }
.hr-main .prose .hr-autor-name a { color: var(--hr-ueberschrift); text-decoration: none; }
.hr-main .prose .hr-autor-name span { font-weight: 500; color: var(--hr-tinte-2); font-size: .9rem; }
.hr-autorbox p { margin: 0 0 .4rem; font-size: .95rem; }

/* Passt dazu */
.hr-passt { padding: 3rem 0 3.5rem; background: var(--hr-flaeche-2); border-top: 1px solid var(--hr-linie); }
.hr-passt h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.015em; color: var(--hr-ueberschrift); margin: 0 0 1.2rem; }
.hr-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.hr-themenkarte { position: relative; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius-klein); overflow: hidden; display: flex; flex-direction: column; }
.hr-themenkarte:hover { border-color: var(--hr-violett-hell); box-shadow: var(--hr-schatten); }
.hr-themenkarte-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.hr-themenkarte-text { padding: .9rem 1rem 1rem; }
.hr-themenkarte .hr-rubrik { margin-bottom: .35rem; font-size: .66rem; }
.hr-themenkarte-link { display: block; font-weight: 800; color: var(--hr-ueberschrift); text-decoration: none; line-height: 1.3; }
.hr-themenkarte-link::after { content: ""; position: absolute; inset: 0; }
.hr-themenkarte p { margin: .35rem 0 0; font-size: .9rem; color: var(--hr-tinte-2); line-height: 1.5; }

/* Rechts- und Fehlerseiten */
.hr-artikel--recht .hr-kopf h1, .hr-artikel--fehler .hr-kopf h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.hr-artikel--fehler .hr-kopf { padding-top: 3.5rem; }
.hr-drucken-zeile { margin: 1rem 0; }

/* ==========================================================================
   FUSSBEREICH (Markup des Kerns)
   ========================================================================== */
.footer { background: var(--hr-nacht); color: rgba(255, 255, 255, .82); padding: 3.5rem 1.5rem 1.75rem; border-top: 0; font-family: var(--hr-sans); position: relative; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--hr-violett-hell) 0 70%, var(--hr-signal) 70% 100%); }
.footer-inner { max-width: var(--hr-breite); }
.footer-top { border-bottom: 1px solid rgba(255, 255, 255, .1); gap: 2.5rem; }
.footer .logo-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.footer-brand { max-width: 300px; }
.footer-brand p { color: rgba(255, 255, 255, .7); font-size: .9rem; }
.footer-links-group { gap: 2rem; }
.footer-col { min-width: 140px; }
.footer-col h2 { font-family: var(--hr-mono); color: var(--hr-signal); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-col a { color: rgba(255, 255, 255, .8); font-size: .9rem; padding: .22rem 0; }
.footer-col a:hover { color: #fff; }
.footer-copy, .footer-legal a { color: rgba(255, 255, 255, .6); }
.footer-copy a { color: rgba(255, 255, 255, .8); }
.footer-legal { align-items: center; }
.footer-consent { background: none; border: 0; padding: 0; font: inherit; font-size: .78rem; color: rgba(255, 255, 255, .6); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.footer-consent:hover { color: #fff; }

/* ---------- Weitere Rechner, Filter, Checklisten, Roaming-Ampel (Oktober 2026) ---------- */
.hr-abschnitt-mehr { margin: 1.4rem 0 0; }
.hr-link-pfeil { font-weight: 700; color: var(--hr-violett); text-decoration: none; }
.hr-link-pfeil::after { content: " →"; }
.hr-link-pfeil:hover { text-decoration: underline; }

.hr-main .prose .hr-rz-gruppe, .hr-rz-gruppe { font-family: var(--hr-mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hr-violett); padding: .95rem 0 .15rem; }
.hr-rechner-form--zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1.6rem; }
.hr-rechner-form--zwei .hr-rz { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) { .hr-rechner-form--zwei { grid-template-columns: minmax(0, 1fr); } }
.hr-rz-feld--breit { width: 100%; grid-column: 1 / -1; }
.hr-rz-feld--breit input[type=text] { width: 100%; font: inherit; font-family: var(--hr-mono); font-size: 1.05rem; letter-spacing: .06em; padding: .55rem .7rem; border: 1.5px solid var(--hr-linie-2); border-radius: 9px; background: var(--hr-papier); color: var(--hr-tinte); }
.hr-rz-feld--breit input[type=text]:focus { outline: none; border-color: var(--hr-violett-hell); box-shadow: 0 0 0 3px rgba(109, 94, 255, .2); }
.hr-filter-chips { display: flex; flex-wrap: wrap; gap: .45rem; grid-column: 1 / -1; }
.hr-filter-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .78rem; border: 1.5px solid var(--hr-linie-2); border-radius: 999px; font-size: .9rem; font-weight: 600; cursor: pointer; background: var(--hr-papier); color: var(--hr-tinte); line-height: 1.3; }
.hr-filter-chip:has(input:checked) { border-color: var(--hr-violett-hell); background: var(--hr-violett-tint); }
.hr-filter-chip input { accent-color: var(--hr-violett-hell); margin: 0; }
.hr-filter-chip:focus-within { box-shadow: 0 0 0 3px rgba(109, 94, 255, .25); }
.hr-rechner-form .hr-frage { padding: .85rem 0 .95rem; border-bottom: 1px solid var(--hr-linie); }
.hr-frage legend { padding: 0 0 .55rem; }
.hr-main .prose .hr-filter-zahl, .hr-filter-zahl { margin: .7rem 0 0; font-size: .85rem; color: var(--hr-tinte-2); }
.hr-filter--tabelle { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.5rem 0 .6rem; }
.hr-filter--tabelle input[type=search], .hr-filter--tabelle select { font: inherit; font-size: .95rem; padding: .5rem .7rem; border: 1.5px solid var(--hr-linie-2); border-radius: 9px; background: var(--hr-papier); color: var(--hr-tinte); }
.hr-filter--tabelle input[type=search] { flex: 1 1 14rem; min-width: 0; }
.hr-filter--tabelle .hr-filter-zahl { margin: 0; }
.hr-rechner > .tabelle { margin: 0; border-left: 0; border-right: 0; border-radius: 0; }
.hr-main .prose .hr-rechner > .hr-klein { padding: .7rem 1.35rem 1rem; margin: 0; }
.hr-aufklapp { border-top: 1px solid var(--hr-linie); }
.hr-aufklapp > summary { cursor: pointer; padding: .95rem 1.35rem; font-weight: 700; color: var(--hr-violett); }
.hr-aufklapp > summary:hover { color: var(--hr-violett-2); }
.hr-aufklapp .tabelle { margin: 0 1.35rem 1.2rem; }
.hr-main .prose .hr-rechner-ergebnis a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.hr-main .prose ul.hr-ergebnis-gruende { margin: .2rem 0 .9rem 1.1rem; padding: 0; color: rgba(255, 255, 255, .82); font-size: .9rem; }
.hr-main .prose ul.hr-ergebnis-gruende li { margin: 0 0 .35rem; }

.hr-checkliste { margin: 2rem 0; padding: 1.25rem 1.35rem 1rem; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-radius: var(--hr-radius); box-shadow: var(--hr-schatten); }
.hr-main .prose .hr-checkliste-titel { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; color: var(--hr-ueberschrift); margin: 0 0 .7rem; }
.hr-main .prose .hr-checkliste ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.hr-main .prose .hr-checkliste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: start; padding: .65rem 0; margin: 0; border-bottom: 1px solid var(--hr-linie); }
.hr-checkliste input[type=checkbox] { width: 1.2rem; height: 1.2rem; margin: .18rem 0 0; accent-color: var(--hr-gruen); cursor: pointer; }
.hr-checkliste label { cursor: pointer; }
.hr-checkliste input:checked + label { color: var(--hr-tinte-2); text-decoration: line-through; text-decoration-color: var(--hr-tinte-3); }
.hr-main .prose .hr-checkliste-mehr { font-size: .85rem; white-space: nowrap; }
.hr-main .prose .hr-checkliste-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; }
.hr-main .prose .hr-checkliste .hr-klein { margin: 0; }
.hr-notfallkarte { margin: 0 0 1rem; padding: 1rem 1.1rem; border: 2px dashed var(--hr-linie-2); border-radius: var(--hr-radius-klein); background: var(--hr-papier); }
.hr-main .prose .hr-notfallkarte-titel { font-weight: 800; color: var(--hr-ueberschrift); margin: 0 0 .25rem; }
.hr-main .prose .hr-notfallkarte .hr-klein { margin: 0; }
.hr-notfallkarte-felder { display: grid; grid-template-columns: minmax(9rem, 40%) minmax(0, 1fr); gap: .5rem .9rem; align-items: center; margin-top: .7rem; }
.hr-notfallkarte-felder label { font-size: .9rem; font-weight: 600; }
.hr-notfallkarte-felder input { font: inherit; font-family: var(--hr-mono); font-size: .95rem; padding: .45rem .6rem; border: 1.5px solid var(--hr-linie-2); border-radius: 8px; background: var(--hr-flaeche); color: var(--hr-tinte); min-width: 0; }
.hr-notfallkarte-fest { grid-column: 1 / -1; font-family: var(--hr-mono); font-weight: 800; margin-top: .3rem; }
@media (max-width: 560px) {
    .hr-notfallkarte-felder { grid-template-columns: minmax(0, 1fr); }
    .hr-main .prose .hr-checkliste li { grid-template-columns: auto minmax(0, 1fr); }
    .hr-main .prose .hr-checkliste-mehr { grid-column: 2; }
}

.hr-ampel { display: inline-flex; align-items: center; gap: .38rem; font-family: var(--hr-mono); font-size: .74rem; font-weight: 700; padding: .2rem .55rem; border-radius: 6px; white-space: nowrap; line-height: 1.4; }
.hr-ampel::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; flex: none; }
.hr-ampel--ja { background: var(--hr-gruen-tint); color: var(--hr-gruen); }
.hr-ampel--nein { background: var(--hr-signal-tint); color: #9A4F00; }
.hr-ampelkarte { margin: 1.6rem 0; padding: 1rem 1.2rem; background: var(--hr-flaeche); border: 1px solid var(--hr-linie); border-left: 5px solid var(--hr-gruen); border-radius: 0 var(--hr-radius-klein) var(--hr-radius-klein) 0; }
.hr-ampelkarte--nein { border-left-color: var(--hr-signal); }
.hr-main .prose .hr-ampelkarte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.12rem; color: var(--hr-ueberschrift); margin: 0 0 .6rem; }
.hr-ampelkarte dl { display: grid; gap: .35rem; margin: 0; }
.hr-ampelkarte dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .8rem; }
.hr-ampelkarte dt { font-size: .86rem; color: var(--hr-tinte-2); }
.hr-ampelkarte dd { margin: 0; font-weight: 600; }
@media (max-width: 560px) { .hr-ampelkarte dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hr-ampel--nein { color: var(--hr-signal); } }
:root[data-theme="dark"] .hr-ampel--nein { color: var(--hr-signal); }

/* ---------- Glossar und Begriffshinweise ---------- */
abbr.hr-begriff { text-decoration: underline dotted var(--hr-violett-hell); text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: help; }
abbr.hr-begriff:focus-visible { outline: 2px solid var(--hr-violett-hell); outline-offset: 2px; border-radius: 3px; }
.hr-begriff-fenster { display: block; margin: .5rem 0 .7rem; padding: .7rem .9rem; background: var(--hr-violett-tint); border-left: 3px solid var(--hr-violett-hell); border-radius: 0 8px 8px 0; font-size: .92rem; line-height: 1.5; color: var(--hr-tinte); }
.hr-begriff-fenster strong { color: var(--hr-ueberschrift); }
.hr-main .prose .hr-begriff-fenster a { white-space: nowrap; }
.hr-glossar-abc { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 1.5rem; position: sticky; top: 0; padding: .5rem 0; background: var(--hr-papier); z-index: 2; }
.hr-main .prose .hr-glossar-abc a { display: inline-grid; place-items: center; min-width: 2.1rem; height: 2.1rem; border: 1px solid var(--hr-linie-2); border-radius: 8px; font-family: var(--hr-mono); font-weight: 700; text-decoration: none; background: var(--hr-flaeche); }
.hr-main .prose .hr-glossar-abc a:hover { border-color: var(--hr-violett-hell); }
.hr-main .prose dl.hr-glossar { margin: 0 0 1.5rem; }
.hr-glossar > div { padding: .75rem 0; border-bottom: 1px solid var(--hr-linie); scroll-margin-top: 4.5rem; }
.hr-glossar > div:target { background: var(--hr-signal-tint); }
.hr-glossar dt { font-weight: 800; color: var(--hr-ueberschrift); }
.hr-glossar dd { margin: .2rem 0 0; }

/* ==========================================================================
   DRUCK
   ========================================================================== */
@media print {
    .header, .footer, .hr-seitenspalte, .hr-passt, .hr-titelbild-rahmen, .hr-autorbox, .hr-code-kopieren, .hr-rechner, .skip-link,
    ins.adsbygoogle, .google-auto-placed, .hr-checkliste-knoepfe, .hr-filter { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .hr-raster, .hr-raster--toc { display: block; max-width: none; padding: 0; }
    .hr-kopf { padding: 0 0 1rem; background: none; }
    .hr-kopf-inhalt { padding-left: 1.5rem !important; }
    .hr-main .prose a { color: inherit; text-decoration: none; }
    .hr-code { background: none; color: #000; border: 1px solid #999; }
    .hr-main .prose .hr-code-wert { color: #000; }
    .faq-item { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}