/* ============================================================
   strom-in-spanien.de — Design System
   Mediterranes Blau + Sonnengelb. Editorial, ruhig, mobil zuerst.
   ============================================================ */
:root{
  --brand:#0A4E6E; --brand-700:#083A52; --brand-600:#0A4E6E; --brand-50:#EAF3F8; --brand-100:#D3E6F0;
  --sun:#FFC845; --sun-600:#F0B01F; --sun-50:#FFF6E0;
  --ink:#172F3A; --ink-2:#2E4A57; --muted:#526570; --line:#C7D5DD; --line-2:#E4ECF0;
  --bg:#FFFFFF; --bg-soft:#F3F7F9; --bg-deep:#072E41; --sky:#2A80A8; --control:#657D89;
  --note:#FFF5D8; --error:#A32626; --success:#22633D;
  --ok:#22633D; --ok-bg:#E7F2EC; --warn:#8A5A00; --warn-bg:#FFF5D8;
  --alert:#A32626; --alert-bg:#FBEBEB; --law:#3C3A8C; --law-bg:#EEEEFB;
  --r:14px; --r-s:9px;
  --sh:0 1px 2px rgba(16,32,45,.06),0 8px 24px -12px rgba(16,32,45,.18);
  --sh-l:0 2px 4px rgba(16,32,45,.05),0 18px 40px -18px rgba(16,32,45,.25);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E8EDF2; --ink-2:#C9D3DC; --muted:#93A2B1; --line:#25323D; --line-2:#1C262F;
    --bg:#0E151B; --bg-soft:#121C24; --bg-deep:#071119;
    --brand-50:#12242F; --brand-100:#183141; --brand:#5FB4DC; --brand-600:#4FA6D0; --brand-700:#8CCBEA;
    --sun-50:#2A2110; --warn-bg:#2A2110; --warn:#F0C674; --ok-bg:#10281E; --ok:#6EC79B;
    --alert-bg:#2A1517; --alert:#F19A9A; --law-bg:#1B1B33; --law:#A9A7F0;
    --sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
    --sh-l:0 2px 4px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ink:#E8EDF2; --ink-2:#C9D3DC; --muted:#93A2B1; --line:#25323D; --line-2:#1C262F;
  --bg:#0E151B; --bg-soft:#121C24; --bg-deep:#071119;
  --brand-50:#12242F; --brand-100:#183141; --brand:#5FB4DC; --brand-600:#4FA6D0; --brand-700:#8CCBEA;
  --sun-50:#2A2110; --warn-bg:#2A2110; --warn:#F0C674; --ok-bg:#10281E; --ok:#6EC79B;
  --alert-bg:#2A1517; --alert:#F19A9A; --law-bg:#1B1B33; --law:#A9A7F0;
  --sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --sh-l:0 2px 4px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px;
  overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--sans);
  font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;
  overflow-x:hidden;overflow-x:clip}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:var(--brand-600);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--brand-700)}
h1,h2,h3,h4{line-height:1.18;letter-spacing:-.021em;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.15rem);font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(1.42rem,1.1rem + 1.1vw,2rem);font-weight:750;margin-top:2.4em}
h3{font-size:clamp(1.12rem,1rem + .5vw,1.3rem);font-weight:700;margin-top:1.9em}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:12px 18px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--sun-600);outline-offset:2px;border-radius:4px}

/* ---------- Header ---------- */
.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px)}
.hrow{display:flex;align-items:center;gap:18px;min-height:64px}
.logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;line-height:0}
/* Unter 761 px gilt ausnahmslos die Bildmarke. Die Hell/Dunkel-Umschaltung der
   Wortmarke steht deshalb komplett in einer min-width-Abfrage: sonst gewinnt sie
   über die Spezifität (:root[data-theme] = zwei Klassen) gegen .logo-full und
   das Logo erscheint auf dem Handy doppelt — Bildmarke plus Wortmarke. */
.logo-full{display:none}
.logo-mark{height:32px;width:32px;display:block}
@media (min-width:761px){
  .logo-full{height:42px;width:auto;display:block}
  .logo-mark{display:none}
  .logo-dark{display:none}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .logo-light{display:none}
    :root:not([data-theme="light"]) .logo-dark{display:block}
  }
  :root[data-theme="dark"] .logo-light{display:none}
  :root[data-theme="dark"] .logo-dark{display:block}
  :root[data-theme="light"] .logo-light{display:block}
  :root[data-theme="light"] .logo-dark{display:none}
}
.themesw{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--muted);font:inherit;font-size:13px;
  font-weight:600;line-height:1}
.themesw:hover{border-color:var(--brand-600);color:var(--brand-700)}
.th-i{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.th-t{display:none}
/* Der Umschalter steht auf dem Handy in der Kopfzeile selbst, nicht im Menü:
   niemand sucht die Ansicht hinter einem Hamburger. */
.nav-tools{display:none}
@media (max-width:1099px){
  .nav-tools{display:none}
}
.nav-brand{display:none}
@media (max-width:1099px){
  .nav-brand{display:block;margin:0 20px 6px;padding-bottom:14px;border-bottom:1px solid var(--line);
    font-size:15px;font-weight:600;color:var(--brand-600);letter-spacing:-.01em}
}
.f-brand{padding-bottom:26px}
.f-brand img{height:38px;width:auto;display:block}
.mainnav{margin-left:auto}
.lvl1{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.lvl1 a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink-2);text-decoration:none;
  font-size:15.5px;font-weight:550;white-space:nowrap}
.lvl1 a:hover{background:var(--brand-50);color:var(--brand-700)}
.hcta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.langsw{display:flex;gap:2px;border:1px solid var(--line);border-radius:8px;padding:2px}
.langsw a{padding:4px 8px;font-size:13px;border-radius:6px;text-decoration:none;color:var(--muted)}
.langsw a.on{background:var(--brand-50);color:var(--brand-700);font-weight:600}
/* Das Symbol ist ein SVG und kein Stapel aus drei <span>. Safari auf dem
   iPhone rendert display:flex auf einem <button> nicht zuverlässig; dort
   verschwanden die drei Striche und übrig blieb ein leeres Kästchen, dem
   niemand ansieht, dass es ein Menü ist. Ein Pfad im SVG kann das nicht
   passieren. */
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:9px;
  width:44px;height:40px;cursor:pointer;padding:0;color:var(--ink);
  align-items:center;justify-content:center;-webkit-appearance:none;appearance:none}
.burger svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}
.burger .b-x{display:none}
.burger[aria-expanded="true"] .b-i{display:none}
.burger[aria-expanded="true"] .b-x{display:block}
.burger:hover{border-color:var(--brand-600);color:var(--brand-700)}
.megamenu{display:none}
@media (min-width:1100px){
  /* Die Navigation füllt die ganze Höhe der Kopfzeile. Sonst liegt zwischen dem Link und
     dem Panel ein toter Streifen, und das Menü klappt zu, sobald die Maus ihn kreuzt. */
  .mainnav{position:static;align-self:stretch;display:flex;align-items:center}
  .megamenu{position:absolute;left:0;right:0;top:100%;background:var(--bg);
    border-bottom:1px solid var(--line);box-shadow:var(--sh-l);padding:26px 0 30px;
    display:block;visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .15s ease .28s,transform .15s ease .28s,visibility 0s .43s}
  /* Beim Verlassen bleibt das Panel kurz stehen, damit die Maus diagonal
     zum gewünschten Eintrag wandern kann, ohne dass es verschwindet. */
  /* Ohne JavaScript bleibt das klassische Hover-Verhalten. Mit JavaScript
     entscheidet app.js, damit das Panel auch wieder zugeht, wenn die Maus
     nach unten ins Dokument wandert — es liegt ja über dem Inhalt. */
  :root:not(.js) .mainnav:hover .megamenu,
  .mainnav:focus-within .megamenu,
  .mainnav.is-open .megamenu{
    visibility:visible;opacity:1;transform:none;
    transition:opacity .13s ease,transform .13s ease,visibility 0s}
  .mm{display:block}
  /* Nur die angesteuerte Rubrik zeigen — das hält das Panel flach. */
  .mm-col{display:none}
  .mainnav[data-active] .mm-col{display:none}
  .mainnav[data-active="stromanbieter-spanien"] .mm-col[data-group="stromanbieter-spanien"],
  .mainnav[data-active="strom-anmelden"] .mm-col[data-group="strom-anmelden"],
  .mainnav[data-active="strompreis-spanien"] .mm-col[data-group="strompreis-spanien"],
  .mainnav[data-active="stromrechnung-spanien"] .mm-col[data-group="stromrechnung-spanien"],
  .mainnav[data-active="stromausfall"] .mm-col[data-group="stromausfall"],
  .mainnav[data-active="gas-spanien"] .mm-col[data-group="gas-spanien"]{display:block}
  .mm-rest{display:none!important}
  .mm-col ul{list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 26px}
  .mm-extra{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
  .mm-extra span{color:var(--muted);margin-right:6px}
  .mm-extra a{color:var(--ink-2);text-decoration:none;font-weight:600;margin-right:4px}
  .mm-extra a:hover{color:var(--brand-600);text-decoration:underline}
  .mm-h{margin:0 0 10px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
  .mm-h a{color:var(--brand-700);text-decoration:none}
  .mm-col li{margin-bottom:9px}
  .mm-col li a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;display:block}
  .mm-col li a:hover{color:var(--brand-600)}
  .mm-col li span{display:block;color:var(--muted);font-size:13.2px;line-height:1.45}
}
@media (max-width:1099px){
  /* backdrop-filter macht die Kopfzeile zum Bezugsrahmen für alles, was
     position:fixed ist. Das Menü hängt in der Kopfzeile — mit Filter wurde
     es auf deren Höhe zusammengestaucht und war ein Streifen von 70 px
     statt eines Vollbildmenüs. Auf dem Handy fällt der Milchglaseffekt
     ohnehin nicht auf, also fliegt er raus. */
  .site{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .burger{display:flex;order:3;margin-left:0}
  /* In der Kopfzeile bleiben auf dem Handy nur Umschalter und Hamburger.
     Der Knopf „Leistung prüfen“ wandert ins Menü — dort hat er Platz. */
  .hcta{display:flex;order:2;margin-left:auto;gap:8px}
  .hcta .btn{display:none}
  .themesw{padding:9px 11px}
  .mainnav{position:fixed;left:0;right:0;top:64px;bottom:0;z-index:45;background:var(--bg);
    overflow-y:auto;overscroll-behavior:contain;padding:10px 0 60px;
    transform:translateX(100%);visibility:hidden;margin:0;
    transition:transform .22s ease,visibility 0s .22s;
    -webkit-overflow-scrolling:touch}
  .mainnav.open{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s}

  /* Die sechs Hauptlinks stehen als Überschriften schon in den Rubriken.
     Zweimal dieselbe Liste untereinander ist genau das, was das Menü
     unbrauchbar gemacht hat. */
  .lvl1{display:none}
  .megamenu{display:block;padding:0}
  /* Randlos: die Zeilen sollen die ganze Breite haben, sonst schwimmen die
     Trennlinien in der Mitte. .mm trägt sonst die 20 px von .wrap. */
  .mm{display:block;padding:4px 0 0;max-width:none}
  .mm-col,.mm-rest{display:block!important;padding:0;margin:0;
    border-bottom:1px solid var(--line-2)}
  .mm-extra{display:none}

  /* Rubrik = aufklappbare Zeile. Der Titel ist ein Link zur Übersichtsseite,
     der Pfeil daneben klappt die Unterpunkte auf. Zwei getrennte Ziele,
     damit man nicht aus Versehen navigiert, wenn man nur aufklappen will. */
  .mm-h{display:flex;align-items:stretch;margin:0;font-size:17px;font-weight:700;
    letter-spacing:-.01em;text-transform:none;color:var(--ink)}
  .mm-h a{flex:1;min-width:0;color:var(--ink);text-decoration:none;
    padding:15px 8px 15px 20px;display:flex;align-items:center}
  .mm-h a:active{background:var(--bg-soft)}
  .mm-t{flex:0 0 58px;background:none;border:0;border-left:1px solid var(--line-2);
    cursor:pointer;color:var(--muted);display:grid;place-items:center;padding:0}
  .mm-t::before{content:"";width:9px;height:9px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .18s ease}
  .mm-t[aria-expanded="true"]{color:var(--brand-600)}
  .mm-t[aria-expanded="true"]::before{transform:rotate(-135deg) translate(-3px,-3px)}
  .mm-col ul{list-style:none;margin:0;padding:0 20px 14px;display:none;background:var(--bg-soft)}
  .mm-col.is-open ul{display:block}
  .mm-col li{margin:0}
  .mm-col li a{color:var(--ink-2);text-decoration:none;font-size:15.5px;font-weight:550;
    display:block;padding:11px 0;border-bottom:1px solid var(--line-2)}
  .mm-col li:last-child a{border-bottom:0}
  .mm-col li span{display:none}

  /* Der Handlungsaufruf ganz unten im Menü, wo er niemanden verdrängt. */
  .nav-cta{padding:22px 20px 8px}
  .nav-cta .btn{width:100%}
}
/* Sonia schwebt sonst über den Menüeinträgen. */
.nav-open .sonia{display:none}
/* Aufklapp-Pfeil und Menü-Knopf gehören nur der Handyansicht. Wird das
   Fenster danach breiter gezogen, dürfen sie nicht im Mega-Menü auftauchen. */
.nav-cta,.mm-t{display:none}
@media (max-width:1099px){.nav-cta{display:block}.mm-t{display:grid}}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,var(--brand-50),var(--bg));border-bottom:1px solid var(--line);
  padding:26px 0 40px}
.hero-home{background:
   radial-gradient(1100px 380px at 82% -8%,rgba(255,200,69,.30),transparent 62%),
   linear-gradient(170deg,var(--brand-50) 5%,var(--bg) 78%);padding:46px 0 52px}
.hero .lead{font-size:clamp(1.06rem,1rem + .5vw,1.33rem);color:var(--ink-2);max-width:63ch;margin-bottom:.9em}
.hero-home h1{max-width:19ch}
.hero-home .lead{max-width:62ch}
.hero-home .stats{max-width:none}
.h-kick{display:inline-block;background:var(--sun);color:#3E2C00;font-weight:750;font-size:12.5px;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:99px;margin-bottom:14px}
.hero-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.updated{font-size:13.5px;color:var(--muted);margin:14px 0 0}
.updated a{color:var(--muted)}
.bc{margin:0 0 16px}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;font-size:13.4px;color:var(--muted)}
.bc li+li::before{content:"›";margin-right:7px;color:var(--line)}
.bc a{color:var(--muted);text-decoration:none}
.bc a:hover{color:var(--brand-600);text-decoration:underline}
.bc [aria-current]{color:var(--ink-2)}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:56px;padding-block:44px 64px;align-items:start}
.layout-wide{grid-template-columns:minmax(0,1fr)}
.layout-wide .prose{max-width:none}
.layout-wide .prose>p,.layout-wide .prose>ul,.layout-wide .prose>ol,
.layout-wide .prose>h2,.layout-wide .prose>h3,.layout-wide .prose>.callout,
.layout-wide .prose>blockquote{max-width:74ch}
@media (max-width:980px){.layout{grid-template-columns:1fr;gap:34px;padding-block:32px 48px}}
.side{position:sticky;top:86px;display:grid;gap:22px}
@media (max-width:980px){.side{position:static;order:-1}}
.prose{max-width:74ch;min-width:0}
.prose>h2:first-child,.prose>p:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--brand-600)}
.lead{font-size:1.14rem;color:var(--ink-2)}
strong{font-weight:680}
abbr[title]{text-decoration:underline dotted;cursor:help}
em{color:var(--ink-2)}

/* ---------- TOC ---------- */
.toc{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:var(--bg-soft)}
.toc-h{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{margin:0 0 3px;counter-increment:t}
.toc a{display:block;padding:5px 0 5px 24px;font-size:14.3px;line-height:1.4;color:var(--ink-2);
  text-decoration:none;position:relative;border-radius:6px}
.toc a::before{content:counter(t);position:absolute;left:0;top:5px;width:17px;height:17px;border-radius:5px;
  background:var(--brand-100);color:var(--brand-700);font-size:10.5px;font-weight:700;display:grid;place-items:center}
.toc a:hover{color:var(--brand-700)}
.toc a.active{color:var(--brand-700);font-weight:650}
.toc a.active::before{background:var(--brand-600);color:#fff}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:10px;
  font-weight:680;font-size:15.5px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;line-height:1.2;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--sun);color:#3A2A00;box-shadow:0 1px 0 rgba(0,0,0,.05),0 10px 22px -12px rgba(240,176,31,.9)}
.btn-primary:hover{background:var(--sun-600);color:#3A2A00}
.btn-dark{background:var(--brand);color:#fff}
.btn-dark:hover{background:var(--brand-700);color:#fff}
/* Im dunklen Schema ist --brand ein helles Blau: dort braucht der Knopf dunkle Schrift */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn-dark,
  :root:not([data-theme="light"]) .btn-dark:hover{color:#07202C}
}
:root[data-theme="dark"] .btn-dark,
:root[data-theme="dark"] .btn-dark:hover{color:#07202C}
.btn-ghost{background:transparent;border-color:currentColor;color:inherit}
.btn-sm{padding:9px 15px;font-size:14.3px;border-radius:9px}
.btn-block{width:100%}

/* ---------- Cards ---------- */
.cards{display:grid;gap:18px;margin:26px 0 34px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr!important}}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;
  background:var(--bg);text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:.15s}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-l);border-color:var(--brand-100)}
.card h3{margin:0 0 7px;font-size:17px;line-height:1.3;color:var(--ink)}
.card p{margin:0 0 14px;font-size:14.6px;color:var(--muted);line-height:1.55;flex:1}
.c-kick{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-600);margin-bottom:8px}
.c-go{font-size:14px;font-weight:650;color:var(--brand-600)}
.c-go::after{content:" →"}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:26px 0}
.stat{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--bg)}
.s-n{display:block;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:800;color:var(--brand-600);
  letter-spacing:-.03em;line-height:1.1}
.s-l{display:block;font-size:13.6px;color:var(--muted);margin-top:5px;line-height:1.4}

/* ---------- Tabellen ---------- */
.tablewrap{margin:24px 0 30px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
caption{text-align:left;padding:14px 18px 0;font-size:13.5px;color:var(--muted);caption-side:top}
th{background:var(--bg-soft);text-align:left;font-weight:700;font-size:13.4px;letter-spacing:.02em;
  color:var(--ink-2);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:top;line-height:1.5}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg-soft)}
.tnote{font-size:13.2px;color:var(--muted);padding:10px 16px 14px;margin:0;border-top:1px solid var(--line-2)}
.phones table{min-width:560px}
a.tel{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;text-decoration:none;
  background:var(--brand-50);color:var(--brand-700);padding:5px 10px;border-radius:7px;display:inline-block}
a.tel:hover{background:var(--brand-100)}
@media (max-width:620px){
  .phones table,.phones thead,.phones tbody,.phones th,.phones td,.phones tr{display:block;min-width:0}
  .phones thead{display:none}
  .phones tr{border-bottom:1px solid var(--line);padding:12px 4px}
  .phones td{border:0;padding:4px 14px;display:flex;gap:10px;justify-content:space-between;align-items:center}
  .phones td::before{content:attr(data-l);color:var(--muted);font-size:12.5px;flex:0 0 auto}
}

/* ---------- Callouts ---------- */
.callout{display:flex;gap:14px;border-radius:var(--r);padding:17px 19px;margin:26px 0;
  background:var(--brand-50);border:1px solid var(--brand-100)}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout ul{margin:.6em 0 0;padding-left:1.15em}
.co-i{flex:0 0 26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:14px;
  background:var(--brand-600);color:#fff}
.co-t{font-weight:720;margin:0 0 5px}
.co-warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.co-warn .co-i{background:var(--warn);color:#fff}
.co-danger{background:var(--alert-bg);border-color:color-mix(in srgb,var(--alert) 30%,transparent)}
.co-danger .co-i{background:var(--alert);color:#fff}
.co-tip{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.co-tip .co-i{background:var(--ok);color:#fff}
.co-money{background:var(--sun-50);border-color:color-mix(in srgb,var(--sun-600) 40%,transparent)}
.co-money .co-i{background:var(--sun-600);color:#3A2A00}
.co-law{background:var(--law-bg);border-color:color-mix(in srgb,var(--law) 28%,transparent)}
.co-law .co-i{background:var(--law);color:#fff}

/* ---------- Steps ---------- */
.steps{list-style:none;counter-reset:s;margin:28px 0;padding:0}
.steps>li{display:flex;gap:16px;padding:0 0 22px;position:relative}
.steps>li::before{content:"";position:absolute;left:15px;top:36px;bottom:0;width:2px;background:var(--line)}
.steps>li:last-child::before{display:none}
.steps>li:last-child{padding-bottom:0}
.stepn{flex:0 0 32px;height:32px;border-radius:50%;background:var(--brand-600);color:#fff;display:grid;
  place-items:center;font-weight:750;font-size:15px;z-index:1}
.steph{margin:4px 0 6px;font-size:17px}
.steps p:last-child{margin-bottom:0}

/* ---------- Compare ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 32px}
@media (max-width:640px){.compare{grid-template-columns:1fr}}
.cmp-c{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;background:var(--bg)}
.cmp-c h3{margin:0 0 10px;font-size:16px;display:flex;align-items:center;gap:9px}
.cmp-c h3 span{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-weight:800;font-size:15px}
.cmp-pro{border-color:color-mix(in srgb,var(--ok) 32%,transparent);background:var(--ok-bg)}
.cmp-pro h3 span{background:var(--ok);color:#fff}
.cmp-con{border-color:color-mix(in srgb,var(--alert) 26%,transparent);background:var(--alert-bg)}
.cmp-con h3 span{background:var(--alert);color:#fff}
.cmp-c ul{margin:0;padding-left:1.15em;font-size:15px}
.cmp-c li{margin-bottom:.45em}

/* ---------- FAQ ---------- */
.faq{margin:24px 0 32px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 34px 16px 0;font-weight:670;font-size:16.5px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:22px;font-weight:400;
  color:var(--brand-600);line-height:1;transition:transform .18s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--brand-700)}
.faq-a{padding:0 0 18px;color:var(--ink-2)}
.faq-a p:last-child{margin-bottom:0}

/* ---------- Definitionsliste ---------- */
.deflist{margin:24px 0 30px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.deflist dt{background:var(--bg-soft);padding:11px 18px;font-weight:700;font-size:15px;border-bottom:1px solid var(--line-2)}
.deflist dd{margin:0;padding:13px 18px;border-bottom:1px solid var(--line);font-size:15.4px;color:var(--ink-2)}
.deflist dd:last-child{border-bottom:0}

/* ---------- Zitat ---------- */
blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--sun);font-size:1.07rem;color:var(--ink-2)}
blockquote cite{display:block;font-size:13.6px;color:var(--muted);font-style:normal;margin-top:8px}

/* ---------- CTA ---------- */
.cta{margin:38px 0;padding:30px 30px 28px;border-radius:18px;background:linear-gradient(160deg,var(--bg-deep),#0A4E6E);
  color:#EAF4FA;box-shadow:var(--sh-l);position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,69,.30),transparent 68%)}
.cta h2{color:#fff;margin:0 0 10px;font-size:clamp(1.28rem,1.1rem + .8vw,1.75rem);position:relative}
.cta p{color:#C8DEEA;margin:0 0 20px;max-width:58ch;position:relative;font-size:16px}
.cta em{color:#FFD87A;font-style:italic}
.cta strong{color:#fff}
.cta-k{display:inline-block;font-size:11.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  color:#FFD87A;margin-bottom:10px;position:relative}
.cta-b{display:flex;flex-wrap:wrap;gap:12px;position:relative}
.cta .btn-ghost{color:#EAF4FA;border-color:rgba(234,244,250,.42)}
.cta .btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.sidecta{border:1px solid var(--line);border-left:4px solid var(--sun);border-radius:var(--r);padding:18px 19px;
  background:var(--bg-soft)}
.sidecta h3{margin:0 0 13px;font-size:15.6px;line-height:1.35}
.sidecta .btn{width:100%}
/* Was es kostet, bevor geklickt wird: Zeit, Unterlage, Folge. Wer das vorher
   weiß, klickt eher — und ärgert sich hinterher nicht. */
.sidecta-n{margin:10px 0 0;font-size:12.6px;color:var(--muted);line-height:1.5}

/* ---------- Übergabe vom eigenen Rechner ans Werkzeug ---------- */
.bridge{margin:-8px 0 34px;padding:22px 24px 20px;border:1px solid var(--line);
  border-top:0;border-radius:0 0 18px 18px;background:var(--bg-soft)}
.bridge-k{margin:0 0 8px;font-size:11.5px;font-weight:750;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-600)}
.bridge-l{margin:0 0 8px;font-size:17px;font-weight:700;line-height:1.35;color:var(--ink);
  letter-spacing:-.015em}
.bridge-c{margin:0 0 16px;font-size:15.2px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.bridge .btn{width:auto}
.bridge-n{margin:11px 0 0;font-size:12.8px;color:var(--muted);line-height:1.5}
@media (max-width:600px){
  .bridge{padding:18px 16px 16px}
  .bridge .btn{width:100%}
}

/* ---------- Tool / Widget ---------- */
.tool{margin:30px 0;border:1px solid var(--line);border-radius:18px;background:var(--bg);box-shadow:var(--sh);overflow:hidden}
.tool-h{padding:20px 24px 16px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.tool-h h3{margin:0 0 5px;font-size:18px}
.tool-h p{margin:0;font-size:14.3px;color:var(--muted)}
.tool-b{padding:22px 24px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}}
.field label{display:block;font-size:13.6px;font-weight:650;margin-bottom:6px;color:var(--ink-2)}
.field .hint{font-size:12.6px;color:var(--muted);font-weight:400;display:block;margin-top:3px}
.field input,.field select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:15.5px;background:var(--bg);color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--brand-600);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-600) 18%,transparent)}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:4px 0 0}
@media (max-width:620px){.checks{grid-template-columns:1fr}}
.chk{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  cursor:pointer;font-size:14.6px;background:var(--bg);transition:.12s}
.chk:hover{border-color:var(--brand-100);background:var(--brand-50)}
.chk input{margin:2px 0 0;accent-color:var(--brand-600);width:17px;height:17px;flex:0 0 auto}
.chk b{display:block;font-weight:640}
.chk span{display:block;font-size:12.6px;color:var(--muted)}
.chk:has(input:checked){border-color:var(--brand-600);background:var(--brand-50)}
.tool-r{margin-top:22px;border-top:1px solid var(--line);padding-top:22px}
.result{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;background:var(--brand-50);
  border-radius:var(--r);padding:20px 22px;margin-bottom:16px}
.result .big{font-size:clamp(2rem,1.5rem + 2vw,2.9rem);font-weight:800;color:var(--brand-700);letter-spacing:-.03em;line-height:1}
.result .u{font-size:1.1rem;font-weight:700;color:var(--brand-700)}
.result .sub{flex:1 1 100%;font-size:14.3px;color:var(--ink-2);margin-top:6px}
.bar{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--line-2);margin:14px 0 8px}
.bar i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);margin-bottom:6px}
.legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;background:var(--brand-600)}
.widget{margin:30px 0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--bg-soft)}
.widget h3{margin:0 0 6px}
.widget-s{color:var(--muted);font-size:14.6px;margin-bottom:16px}

/* ---------- Quellen / Related ---------- */
.sources{margin-top:46px;padding-top:24px;border-top:1px solid var(--line);font-size:14.4px;color:var(--muted)}
.sources h2{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
.sources ol{padding-left:1.25em;margin:0}
.sources li{margin-bottom:5px;word-break:break-word}
.sources a{color:var(--muted);text-decoration:underline}
.related{margin-top:46px}
.related h2{font-size:1.25rem;margin-top:0}

/* ---------- Footer ---------- */
.site-f{background:var(--bg-deep);color:#B9D2DF;margin-top:60px;padding:48px 0 30px;
  padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.f-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:860px){.f-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (max-width:480px){.f-grid{grid-template-columns:1fr}}
.f-h{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#6E97AC;font-weight:700;margin:0 0 11px}
.f-h a{color:#fff;text-decoration:none}
.site-f ul{list-style:none;margin:0;padding:0}
.site-f li{margin-bottom:7px}
.site-f li a{color:#B9D2DF;text-decoration:none;font-size:14.4px}
.site-f li a:hover{color:#fff;text-decoration:underline}
.f-bottom{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.f-dis{font-size:13px;color:#7FA3B6;max-width:80ch;margin:0 0 14px;line-height:1.6}
.f-legal{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:12px}
.f-legal a{color:#B9D2DF;font-size:13.4px;text-decoration:none}
.f-legal a:hover{color:#fff;text-decoration:underline}
.f-c{font-size:12.6px;color:#5E8499;margin:0}

/* ---------- Print ---------- */
@media print{
  .site,.site-f,.cta,.side,.burger{display:none}
  body{font-size:11pt}.layout{display:block}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Widget-Fußnote ---------- */
.widget-f{font-size:13.2px;color:var(--muted);margin:14px 0 0;line-height:1.55}
.widget-f a{color:var(--muted)}
.widget-slot:empty{display:none}
.widget-note{font-size:13.4px;color:var(--muted);margin:10px 0 0;text-align:center}
.widget-alt{display:none;font-size:13.4px;color:var(--muted);margin-top:12px}
.widget-load{display:none}
.note-load{display:none}
@media (min-width:720px){
  .widget[data-consent] .widget-load{display:flex}
  .widget[data-consent] .widget-open{display:none}
  .widget[data-consent] .note-open{display:none}
  .widget[data-consent] .note-load{display:block}
}
.widget.is-embedded .widget-open,
.widget.is-embedded .widget-load,
.widget.is-embedded .widget-note{display:none!important}
.widget.is-embedded .widget-alt{display:inline-block}
.widget-open{margin-top:4px}
@media (max-width:600px){
  .widget{padding:18px 15px}
  .widget h3{font-size:17px}
}

/* ============================================================
   Sonia — Assistentin
   ============================================================ */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sonia{position:fixed;right:20px;bottom:20px;z-index:70;
  bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.sonia-fab{display:flex;align-items:center;gap:10px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:99px;padding:7px 18px 7px 7px;cursor:pointer;
  box-shadow:var(--sh-l);font:inherit;font-size:14.6px;font-weight:650;line-height:1}
.sonia-fab img{border-radius:50%;background:var(--brand-50);display:block}
.sonia-fab:hover{border-color:var(--brand-600);color:var(--brand-700)}
.sonia.is-open .sonia-fab{display:none}
@media (max-width:560px){.sonia-fab span{display:none}.sonia-fab{padding:7px}}

.sonia-panel{width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 120px));
  background:var(--bg);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-l);
  display:flex;flex-direction:column;overflow:hidden}
.sonia-h{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid var(--line);
  background:var(--bg-soft)}
.sonia-h img{border-radius:50%;background:var(--brand-50);flex:0 0 auto}
.sonia-name{margin:0;font-weight:700;font-size:15.5px;line-height:1.2}
.sonia-role{margin:2px 0 0;font-size:11.8px;color:var(--muted);line-height:1.35}
.sonia-x{margin-left:auto;background:none;border:0;font-size:26px;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 4px;align-self:flex-start}
.sonia-x:hover{color:var(--ink)}
.sonia-log{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:12px;
  -webkit-overflow-scrolling:touch}
.sonia-msg{max-width:92%;font-size:14.8px;line-height:1.58}
.sonia-msg p{margin:0 0 9px}
.sonia-msg p:last-child{margin-bottom:0}
.sonia-bot{align-self:flex-start;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:14px 14px 14px 5px;padding:12px 14px;color:var(--ink)}
.sonia-user{align-self:flex-end;background:var(--brand);color:#fff;border-radius:14px 14px 5px 14px;
  padding:10px 14px;max-width:85%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sonia-user{color:#07202C}}
:root[data-theme="dark"] .sonia-user{color:#07202C}
.sonia-src{display:inline-block;margin-top:4px;font-size:13.6px;font-weight:650;
  color:var(--brand-600);text-decoration:none}
.sonia-src:hover{text-decoration:underline}
.sonia-alt{font-size:13.6px;color:var(--muted)}
.sonia-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.sonia-chip{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:7px 12px;
  font:inherit;font-size:13.2px;color:var(--ink-2);cursor:pointer;text-align:left}
.sonia-chip:hover{border-color:var(--brand-600);color:var(--brand-700);background:var(--brand-50)}
.sonia-cta{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.sonia-cta p{font-size:13.6px;color:var(--ink-2)}
.sonia-cta .btn{margin:2px 4px 2px 0}
.sonia-cta .btn-ghost{border-color:var(--line);color:var(--ink-2)}
.sonia-typing{display:flex;gap:4px;padding:3px 0}
.sonia-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.4;
  animation:sonia-b 1.1s infinite}
.sonia-typing span:nth-child(2){animation-delay:.18s}
.sonia-typing span:nth-child(3){animation-delay:.36s}
@keyframes sonia-b{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}}
.sonia-f{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--line);background:var(--bg)}
.sonia-f input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;background:var(--bg);color:var(--ink)}
.sonia-f input:focus{border-color:var(--brand-600);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-600) 18%,transparent)}
.sonia-f button{flex:0 0 44px;height:44px;border:0;border-radius:10px;background:var(--sun);
  color:#3A2A00;font-size:20px;font-weight:700;cursor:pointer;line-height:1}
.sonia-f button:hover{background:var(--sun-600)}
.sonia-legal{margin:0;padding:0 14px 12px;font-size:11.6px;color:var(--muted);line-height:1.5;
  background:var(--bg)}
.sonia-legal a{color:var(--muted)}
@media (max-width:560px){
  .sonia{right:14px;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .sonia.is-open{inset:0;right:0;left:0;bottom:0}
  .sonia-panel{width:100%;height:100%;border-radius:0;border:0;
    padding-top:env(safe-area-inset-top,0px)}
  .sonia-fab{margin-left:auto}
}
@media print{.sonia{display:none}}
.sonia-q{font-size:13.4px;color:var(--muted);font-style:italic;margin:0 0 6px}

/* Hilfe zur CUPS-Nummer direkt am Werkzeug */
.widget-help{margin:2px 0 16px;padding:13px 15px;border-radius:12px;background:var(--brand-50);
  border:1px solid var(--brand-100)}
.widget-help p{margin:0 0 9px;font-size:14.2px;line-height:1.55;color:var(--ink-2)}
.widget-help code{background:var(--bg);padding:1px 6px;border-radius:5px;font-size:13px;
  border:1px solid var(--line)}
.widget-help a{display:inline-block;font-size:13.8px;font-weight:650;color:var(--brand-600);
  text-decoration:none;margin-right:16px}
.widget-help a:hover{text-decoration:underline}

/* ---------- Zitierhinweis ---------- */
.cite{margin-top:42px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-soft)}
.cite-h{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.cite-s{margin:0 0 8px}
.cite-s code{font-size:13.2px;line-height:1.6;color:var(--ink-2);word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cite-n{margin:0;font-size:12.8px;color:var(--muted)}
.cite-n a{color:var(--muted)}

/* ---------- Suche ---------- */
.sitesearch{margin:0 0 34px}
.ss-f{display:flex;gap:10px;flex-wrap:wrap}
.ss-f input{flex:1 1 320px;min-width:0;padding:14px 16px;border:1px solid var(--line);
  border-radius:11px;font:inherit;font-size:16.5px;background:var(--bg);color:var(--ink)}
.ss-f input:focus{border-color:var(--brand-600);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-600) 18%,transparent)}
.ss-f button{padding:14px 24px;border:0;border-radius:11px;background:var(--sun);color:#3A2A00;
  font:inherit;font-weight:700;font-size:15.5px;cursor:pointer}
.ss-f button:hover{background:var(--sun-600)}
.ss-n{margin:22px 0 10px;font-size:13.4px;color:var(--muted)}
.ss-none{margin:22px 0;color:var(--muted)}
.ss-hit{display:block;padding:15px 17px;border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:10px;text-decoration:none;background:var(--bg)}
.ss-hit:hover{border-color:var(--brand-600);background:var(--bg-soft)}
.ss-hit strong{display:block;color:var(--brand-700);font-size:16.5px;margin-bottom:4px}
.ss-hit span{display:block;color:var(--ink-2);font-size:14.6px;line-height:1.5}
.ss-hit em{display:block;color:var(--muted);font-size:13.4px;margin-top:6px;font-style:normal}

/* ============================================================
   Stundenstreifen — Tarifperioden über 24 Stunden
   Farbe trägt die Information nur zusätzlich: In jeder Stunde
   steht die Periodenziffer, und jede Zelle hat eine vollständige
   Beschriftung für Screenreader. Wer Rot und Grün nicht
   unterscheidet, liest die Ziffern.
   ============================================================ */
.hours{margin:28px 0 34px;padding:20px 22px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg)}
.hours-t{margin:0 0 16px;font-weight:700;font-size:16px;line-height:1.35;color:var(--ink)}
.hr{margin:0 0 14px}
.hr-l{display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline;
  margin:0 0 6px;font-size:14px;font-weight:650;color:var(--ink-2)}
.hr-n{font-weight:400;font-size:13px;color:var(--muted)}
.hstrip{display:grid;grid-template-columns:repeat(24,1fr);gap:2px}
.hh{position:relative;height:38px;display:grid;place-items:center;
  font-size:11px;font-weight:700;border-radius:3px;font-variant-numeric:tabular-nums}
/* Die Sättigung steigt mit dem Preis: Die teuren Stunden sollen den Streifen
   dominieren, die günstigen zurücktreten. Gleiche Tönung wie die Callouts,
   nur kräftiger — ein blasser Streifen beantwortet die Frage nicht, wie viel
   des Tages teuer ist. */
.hh-p1{background:color-mix(in srgb,var(--alert) 28%,var(--bg));color:var(--alert);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--alert) 62%,transparent)}
.hh-p2{background:color-mix(in srgb,var(--warn) 26%,var(--bg));color:var(--warn);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 52%,transparent)}
.hh-p3,.hh-p6{background:color-mix(in srgb,var(--ok) 12%,var(--bg));color:var(--ok);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent)}
/* Übergangsstunde, je nach Tagestyp P1 oder P2 */
.hh-p8{background:repeating-linear-gradient(135deg,
    color-mix(in srgb,var(--warn) 24%,var(--bg)) 0 5px,
    color-mix(in srgb,var(--alert) 24%,var(--bg)) 5px 10px);
  color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.hl-p8::before{background:linear-gradient(135deg,var(--warn) 50%,var(--alert) 50%)}
.hh-p4{background:var(--brand-100);color:var(--brand-700);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-600) 30%,transparent)}
.hh-p5{background:var(--brand-50);color:var(--brand-600);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-600) 20%,transparent)}
.haxis{display:grid;grid-template-columns:repeat(6,1fr) 0;margin-top:4px;
  font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.haxis span{transform:translateX(-50%)}
.haxis span:first-child{transform:none}
.hlegend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--line-2);font-size:13.2px;color:var(--ink-2)}
.hl::before{content:"";display:inline-block;width:11px;height:11px;border-radius:3px;
  margin-right:7px;vertical-align:-1px}
.hl-p1::before{background:var(--alert)}
.hl-p2::before{background:var(--warn)}
.hl-p3::before,.hl-p6::before{background:var(--ok)}
.hl-p4::before{background:var(--brand-600)}
.hl-p5::before{background:var(--brand-100);box-shadow:inset 0 0 0 1px var(--brand-600)}
.hours-n{margin:12px 0 0;font-size:13px;color:var(--muted);line-height:1.55}
@media (max-width:700px){
  .hours{padding:16px 14px 12px}
  .hh{height:30px;font-size:9.5px;border-radius:2px}
  .hstrip{gap:1px}
}
@media (max-width:420px){
  .hh{height:26px}
  .hh span[aria-hidden]{font-size:9px}
}

/* ---------- Hauptaktion: Rechnung prüfen (Handy-Leiste, Hero-Hinweis) ---------- */
.hero-n{margin:12px 0 0;font-size:14px;color:var(--muted)}
.mcta{display:none}
@media (max-width:1099px){
  .mcta{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:65;
    padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -10px 24px -18px rgba(0,0,0,.45)}
  .mcta .btn{flex:1 1 auto;padding:12px 16px}
  .mcta-n{flex:0 1 auto;font-size:12.6px;line-height:1.3;color:var(--muted);max-width:15ch}
  body.has-mcta{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .has-mcta .sonia{bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  .nav-open .mcta,.has-mcta:has(.sonia.is-open) .mcta{display:none}
}
@media (max-width:420px){.mcta-n{display:none}}
@media print{.mcta{display:none}}
/* Schmale Desktop-Breiten: Kopfzeilen-Knopf kürzen, damit er nicht abgeschnitten wird */
@media (min-width:1100px) and (max-width:1279px){.hcta .hcta-x{display:none}}