/* ==================================================================
   GESTALTUNG HOERBUECHER.PRO
   Hell als Grundfassung, Dunkel folgt der Systemeinstellung.
   ================================================================== */

@font-face{font-family:"Literata";src:url("/assets/fonts/literata-var.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@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:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  /* Label-Farben */
  --hb-grund:#ffffff; --hb-band:#f6f5f8; --hb-flaeche:#f4f3f7; --hb-flaeche-2:#eae8ef;
  --hb-linie:#e4e2e9; --hb-linie-2:#cfccd8;
  --hb-text:#17161c; --hb-leise:#5d5a67; --hb-blass:#67636f;
  --hb-akzent:#2b3bd6; --hb-akzent-hi:#1e2baf; --hb-auf-akzent:#ffffff; --hb-akzent-weich:#e9ebfd;
  --hb-f-titel:"Literata",Georgia,"Times New Roman",serif;
  --hb-f-ui:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --hb-f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --hb-schatten:0 10px 24px -14px rgba(10,10,30,.45);

  /* Variablen des Kerns auf das Label umlenken */
  --navy:var(--hb-text); --navy-light:var(--hb-flaeche-2);
  --white:#ffffff; --off-white:var(--hb-grund); --light:var(--hb-flaeche); --light-gray:var(--hb-linie-2);
  --medium-gray:var(--hb-leise); --text-dark:var(--hb-text); --text-medium:var(--hb-leise);
  --primary:var(--hb-akzent); --primary-light:var(--hb-akzent); --primary-dark:var(--hb-akzent-hi);
  --primary-text:var(--hb-akzent); --accent-text:var(--hb-akzent); --secondary:var(--hb-akzent);
  --gradient-hero:var(--hb-grund); --gradient-neon:var(--hb-akzent); --gradient-glow:var(--hb-flaeche);
  --glow-primary:none; --glow-accent:none; --shadow:rgba(20,18,40,.06); --shadow-strong:rgba(20,18,40,.12);
  --font:var(--hb-f-ui); --mono:var(--hb-f-mono);
  --border-radius:10px; --border-radius-lg:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --hb-grund:#111116; --hb-band:#16161c; --hb-flaeche:#1b1b22; --hb-flaeche-2:#25252e;
    --hb-linie:#2a2a33; --hb-linie-2:#3b3b47;
    --hb-text:#f2f0ec; --hb-leise:#a8a5b0; --hb-blass:#908d9a;
    --hb-akzent:#9ea8ff; --hb-akzent-hi:#bcc2ff; --hb-auf-akzent:#111116; --hb-akzent-weich:#1f2240;
    --hb-schatten:0 10px 24px -14px rgba(0,0,0,.8);
    --white:#111116;
  }
}

/* Grundlage */
html,body{background:var(--hb-grund)}
body{color:var(--hb-text);font-family:var(--hb-f-ui);font-size:17px;line-height:1.6}
a{color:var(--hb-akzent)}
a:hover{color:var(--hb-akzent-hi)}
:focus-visible{outline:2px solid var(--hb-akzent);outline-offset:3px}
.skip-link{background:var(--hb-akzent);color:var(--hb-auf-akzent)}
.skip-link:focus{color:var(--hb-auf-akzent)}

/* Kopf */
.header{position:sticky;top:0;background:color-mix(in srgb,var(--hb-grund) 94%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--hb-linie)}
.header-inner{max-width:1240px;height:72px;padding:0 20px}
.logo{gap:10px}
.logo-mark{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;color:var(--hb-akzent);font-size:0}
.logo-mark svg{display:block}
.logo-name{font:700 25px/1 var(--hb-f-titel);letter-spacing:-.015em;color:var(--hb-text)}
.header .logo-sub{display:none}
.nav{gap:4px}
.nav a{color:var(--hb-text);font:500 16px/1 var(--hb-f-ui);padding:10px 12px;border-radius:0;background:none!important;border-bottom:2px solid transparent}
.nav a:hover,.nav a.active{color:var(--hb-text);border-color:var(--hb-akzent)}
.nav .nav-cta{margin-left:14px;padding:12px 20px!important;border-radius:999px;background:var(--hb-akzent)!important;color:var(--hb-auf-akzent)!important;font:600 15px/1 var(--hb-f-ui)!important;border:0}
.nav .nav-cta:hover{background:var(--hb-akzent-hi)!important;transform:none;box-shadow:none}
.mobile-toggle span{background:var(--hb-text)}
@media (max-width:768px){
  .header-inner{height:64px}
  .nav{background:var(--hb-grund);box-shadow:0 0 0 100vmax rgba(12,12,22,.42);border-left:1px solid var(--hb-linie)}
  /* Knopf bleibt über der Schublade und wird zum Schließen-Kreuz */
  .mobile-toggle{position:relative;z-index:1002}
  .mobile-toggle span{transition:transform .2s ease,opacity .2s ease}
  .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 a{border-bottom:1px solid var(--hb-linie);padding:14px 10px}
  .nav .nav-cta{margin:14px 0 0;text-align:center;justify-content:center}
  .logo-name{font-size:22px}
}

/* Kopfbereich der Kern-Seiten (Impressum, Datenschutz, Magazin) */
.page-hero{background:var(--hb-grund);color:var(--hb-text);padding:36px 20px 8px}
.page-hero::before{display:none}
.page-hero-content{max-width:820px}
.page-hero h1{font:650 clamp(36px,4.6vw,54px)/1.05 var(--hb-f-titel);letter-spacing:-.02em;color:var(--hb-text)}
.page-hero-tagline{color:var(--hb-leise);opacity:1;font-size:19px}
.breadcrumb{color:var(--hb-leise);opacity:1;font-size:14px}
.breadcrumb a{color:var(--hb-leise)}
.breadcrumb a:hover{color:var(--hb-text)}

/* Fließtext */
.prose{color:var(--hb-text);font-size:17px;line-height:1.7}
.prose h2{font:650 clamp(24px,2.6vw,30px)/1.15 var(--hb-f-titel);letter-spacing:-.01em;color:var(--hb-text);border-bottom:0;padding-bottom:0;margin:2.4rem 0 .8rem}
.prose h3{font:650 21px/1.25 var(--hb-f-titel);color:var(--hb-text)}
.prose strong{color:var(--hb-text)}
.prose a{color:var(--hb-akzent)}
.prose blockquote{background:var(--hb-flaeche);border-left-color:var(--hb-akzent);color:var(--hb-text)}
.prose th{background:var(--hb-flaeche-2);color:var(--hb-text)}
.prose td{border-bottom-color:var(--hb-linie)}
.prose code{background:var(--hb-flaeche);color:var(--hb-text)}
.inhalt-eng{padding-top:20px}
.prose .hb-hinweis-kasten{margin:1.5rem 0;padding:16px 18px;border-radius:10px;background:var(--hb-flaeche);box-shadow:inset 0 0 0 1px var(--hb-linie)}
.prose .hb-platzhalter{margin:1.5rem 0;padding:14px 16px;border-radius:8px;border:1px dashed var(--hb-linie-2);color:var(--hb-leise)}
.prose button{font:600 15px/1 var(--hb-f-ui);padding:12px 18px;border-radius:999px;border:0;background:var(--hb-akzent);color:var(--hb-auf-akzent);cursor:pointer}
.prose button[hidden]{display:none}

/* Fragen des Kerns */
.faq-section h2,.faq-item summary{font-family:var(--hb-f-titel)}

/* Fuß */
.footer{background:var(--hb-band);color:var(--hb-text);border-top:1px solid var(--hb-linie);padding:48px 20px 28px;margin-top:24px}
.footer-inner{max-width:1200px}
.footer-top{border-bottom-color:var(--hb-linie);gap:40px}
.footer .logo-name{font-size:22px}
.footer .logo-sub{display:none}
.footer-brand p{color:var(--hb-leise);font-size:15px;max-width:36ch}
.footer-links-group{gap:56px}
.footer-col h2{font:600 13px/1 var(--hb-f-ui);letter-spacing:.14em;color:var(--hb-leise)}
.footer-col a{color:var(--hb-text);font-size:15px;padding:4px 0}
.footer-col a:hover{color:var(--hb-akzent);text-decoration:underline}
.footer-copy,.footer-legal a{color:var(--hb-leise);font-size:14px}
.footer-copy a{color:var(--hb-leise)}
.footer-legal a:hover{color:var(--hb-text)}

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

/* Häufige Fragen der Kern-Seiten wie auf den Serienseiten: Linien statt Karten */
.faq-list{gap:0;margin-top:.5rem}
.faq-item{background:none;border:0;border-bottom:1px solid var(--hb-linie);border-radius:0}
.faq-item[open]{border-color:var(--hb-linie)}
.faq-q{padding:18px 40px 18px 0;font:600 20px/1.3 var(--hb-f-titel);color:var(--hb-text)}
.faq-q::after{right:0;color:var(--hb-akzent);font:500 22px/1 var(--hb-f-ui)}
.faq-item[open] .faq-q::after{content:"−"}
.faq-q:hover{color:var(--hb-akzent)}
.faq-a{padding:0 0 18px;color:var(--hb-leise);font-size:16px;line-height:1.7}