[hidden] { display: none !important; }
/* Preisgrenzenlos – ohne externe Schriften und Frameworks. Hell/Dunkel nach Systemeinstellung. */
:root {
  --bg: #f6f5f1; --flaeche: #ffffff; --flaeche-2: #fbfaf7; --text: #1b1f24; --leise: #5a6370; --linie: #e4e1d9;
  --akzent: #0f766e; --akzent-2: #115e59; --akzent-hell: #d5f5ef; --akzent-text: #ffffff;
  --gut: #15803d; --gut-hell: #dcfce7; --ok: #4d7c0f; --ok-hell: #ecfccb; --neutral: #57534e; --neutral-hell: #eeece8;
  --schlecht: #b91c1c; --schlecht-hell: #fee2e2; --warn: #b45309; --warn-hell: #fef3c7; --info-hell: #e0f2fe;
  --gold: #f59e0b;
  --radius: 14px; --radius-k: 10px;
  --schatten: 0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.06);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1214; --flaeche: #171b1e; --flaeche-2: #1c2125; --text: #e9edf0; --leise: #9aa5af; --linie: #2a3136;
    --akzent: #2dd4bf; --akzent-2: #5eead4; --akzent-hell: #12352f; --akzent-text: #06201c;
    --gut: #4ade80; --gut-hell: #12301d; --ok: #a3e635; --ok-hell: #243112; --neutral: #a8a29e; --neutral-hell: #26292b;
    --schlecht: #f87171; --schlecht-hell: #3a1515; --warn: #fbbf24; --warn-hell: #33270a; --info-hell: #0f2a3a;
    --schatten: 0 1px 2px rgba(0,0,0,.5);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--schrift); }
a { color: var(--akzent); text-underline-offset: 2px; }
a:hover { color: var(--akzent-2); }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.012em; }
h1 { font-size: clamp(1.8rem, 4.2vw, 2.9rem); margin: .2em 0 .35em; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin: 1.5em 0 .6em; }
h3 { font-size: 1.05rem; margin: .3em 0; }
section { margin: 8px 0 28px; }
.rahmen { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.rahmen-breit { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.sprung { position: absolute; left: -999px; } .sprung:focus { left: 16px; top: 8px; background: var(--flaeche); padding: 8px; z-index: 20; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.klein { font-size: .86rem; color: var(--leise); }
.leise { color: var(--leise); }
.zahl { color: var(--leise); font-size: .85em; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--fokus, #b45309); outline-offset: 2px; border-radius: 4px; }

/* ---------- Kopf & Navigation */
.kopf { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--text); text-decoration: none; }
.nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.nav > a, .nav summary { color: var(--text); text-decoration: none; padding: 7px 11px; border-radius: 999px; font-size: .95rem; cursor: pointer; list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: " ▾"; font-size: .75em; color: var(--leise); }
.nav > a:hover, .nav summary:hover, .nav [aria-current] { background: var(--akzent-hell); color: var(--text); }
.mega { position: relative; }
.mega-panel { position: absolute; left: 0; top: calc(100% + 8px); width: min(760px, 92vw); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,.15); padding: 18px;
  display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.mega-kat { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 16px; }
.mega-kat li { break-inside: avoid; }
.mega-kat a, .mega-seite a { display: block; padding: 5px 8px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .93rem; }
.mega-kat a:hover, .mega-seite a:hover { background: var(--akzent-hell); }
.mega-seite ul { list-style: none; margin: 6px 0; padding: 0; }
.mega-seite .mehr-link { color: var(--akzent); font-weight: 600; }
@media (max-width: 760px) {
  .mega-panel { position: fixed; left: 8px; right: 8px; top: 110px; width: auto; grid-template-columns: 1fr; max-height: 75vh; overflow: auto; }
  .mega-kat { columns: 1; }
  .such-text { display: none; }
}

/* ---------- Brotkrumen */
.brotkrumen { font-size: .85rem; color: var(--leise); margin: 16px 0 0; overflow-wrap: anywhere; }
.brotkrumen a { color: var(--leise); }

/* ---------- Held */
.held { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; padding: 44px 0 20px; }
.held-text .lead { max-width: 640px; }
.vorzeile { color: var(--leise); font-weight: 600; letter-spacing: .02em; margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.akzent { color: var(--akzent); }
.lead { font-size: 1.12rem; color: var(--leise); }
.held-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.held-zahlen div { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; box-shadow: var(--schatten); }
.held-zahlen b { display: block; font-size: 1.8rem; color: var(--akzent); font-variant-numeric: tabular-nums; }
.held-zahlen span { color: var(--leise); font-size: .92rem; }
@media (max-width: 860px) { .held { grid-template-columns: 1fr; padding-top: 28px; } }

/* ---------- Suche */
.such-form { display: flex; gap: 8px; margin: 18px 0 6px; max-width: 640px; }
.such-form input { flex: 1; min-width: 0; padding: 13px 14px; border-radius: var(--radius-k); border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text); font: inherit; box-shadow: var(--schatten); }
.such-form.gross { max-width: none; }
.such-ergebnisse { display: grid; gap: 8px; margin: 12px 0 24px; }
.treffer { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius-k); padding: 10px 14px; text-decoration: none; color: var(--text); }
.treffer:hover { border-color: var(--akzent); }
.treffer small { color: var(--leise); }
.treffer-kat { display: inline-block; padding: 4px 10px; margin: 0 6px 6px 0; border-radius: 999px; background: var(--akzent-hell); color: var(--text); text-decoration: none; }

/* ---------- Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--akzent); color: var(--akzent-text);
  text-decoration: none; font-weight: 700; padding: 10px 16px; border-radius: var(--radius-k); border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.knopf:hover { filter: brightness(1.07); color: var(--akzent-text); }
.knopf.gross { padding: 13px 22px; font-size: 1.05rem; }
.knopf.zweit { background: transparent; color: var(--text); border: 1px solid var(--linie); }
.knopf.zweit:hover { border-color: var(--akzent); color: var(--text); }
.klein-knopf { padding: 7px 12px; font-size: .9rem; }
.knopf sup, a sup { font-size: .62em; opacity: .75; }

/* ---------- Abschnitte, Raster, Karten */
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.abschnitt-kopf h2 { margin-bottom: .4em; }
.raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px;
  box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 6px; color: var(--text); position: relative; }
a.karte { text-decoration: none; transition: transform .15s ease, border-color .15s; } a.karte:hover { transform: translateY(-2px); border-color: var(--akzent); }
.karte h2 { font-size: 1.12rem; margin: .3em 0 0; }
.karte p { margin: 0; color: var(--leise); }
.karte .mehr { margin-top: auto; padding-top: 8px; color: var(--akzent); font-weight: 600; font-size: .93rem; }
.karte .icon { font-size: 1.6rem; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .82rem; color: var(--leise); }
.kat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.produkt h3 { font-size: .98rem; font-weight: 650; line-height: 1.35; }
.karte-link { color: var(--text); text-decoration: none; }
.karte-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.karte-link:hover { color: var(--akzent); }
.produkt .marke { font-size: .88rem; }
.tipp { font-size: .9rem; color: var(--text) !important; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tipp.leise { color: var(--leise) !important; }
.tipp .zeit { color: var(--leise); font-size: .84rem; }
.aktionen { margin-top: auto; padding-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.aktionen .knopf { flex: 1; }
.leer { padding: 22px; background: var(--flaeche); border-radius: var(--radius); border: 1px dashed var(--linie); color: var(--leise); }

/* Ländervergleich-Punkte */
.mini-vergleich { display: inline-flex; gap: 6px; flex-shrink: 0; }
.mini { position: relative; display: inline-flex; }
.mini i { position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--flaeche); background: var(--neutral-hell); }
.mini-gut i { background: var(--gut); } .mini-ok i { background: var(--ok); } .mini-neutral i { background: var(--neutral); }
.mini-schlecht i { background: var(--schlecht); } .mini-leer i { background: transparent; border-color: var(--neutral); }
.mini-ungeprueft { opacity: .45; }
.fl { width: 21px; height: 14px; vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
.knopf .fl { box-shadow: 0 0 0 1px rgba(255,255,255,.5); }

/* Stufen-Badges */
.stufe { display: inline-block; font-size: .85rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.stufe-gut { background: var(--gut-hell); color: var(--gut); } .stufe-ok { background: var(--ok-hell); color: var(--ok); }
.stufe-neutral { background: var(--neutral-hell); color: var(--neutral); } .stufe-schlecht { background: var(--schlecht-hell); color: var(--schlecht); }
.stufe-leer, .stufe-ungeprueft { background: transparent; color: var(--leise); border: 1px dashed var(--linie); font-weight: 600; }
.haeufig { display: block; font-size: .8rem; color: var(--leise); margin-top: 3px; }

/* Kacheln */
.kacheln { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.kacheln.klein { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.kachel { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.kachel:hover { border-color: var(--akzent); transform: translateY(-1px); color: var(--text); }
.kachel .icon { font-size: 1.5rem; }
.kachel span:last-child { color: var(--leise); font-size: .85rem; }

/* Kategorie */
.kat-kopf { display: flex; gap: 16px; align-items: flex-start; }
.kat-icon { font-size: 2.6rem; line-height: 1; padding-top: 8px; }
.kennzahlen { display: flex; gap: 8px 18px; flex-wrap: wrap; color: var(--leise); margin: 0; }
.kennzahlen b { color: var(--text); }
.kat-intro { max-width: 820px; }
.kat-bloecke { columns: 3 300px; column-gap: 20px; }
.kat-block { break-inside: avoid; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 16px; }
.kat-block h2 { font-size: 1.1rem; margin: 0 0 6px; } .kat-block h2 a { color: var(--text); text-decoration: none; }
.kat-block ul { list-style: none; margin: 0; padding: 0; } .kat-block li { padding: 2px 0; }
.hinweis-link { display: inline-block; margin: 6px 8px 6px 0; padding: 8px 14px; border-radius: 999px; background: var(--akzent-hell); color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; }
.hinweis-zeile { color: var(--leise); }

/* Seiten-Navigation */
.seiten-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 24px 0; }
.seiten-nav a, .seiten-nav span { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche); text-decoration: none; color: var(--text); }
.seiten-nav [aria-current] { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }

/* Produktseite */
.produkt-kopf { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; margin: 18px 0 8px; }
.produkt-symbol { width: 84px; height: 84px; display: grid; place-items: center; font-size: 2.6rem; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 22px; box-shadow: var(--schatten); }
.produkt-kopf h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
.fazit-box { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.fazit { margin: 0; padding: 12px 16px; border-radius: var(--radius-k); border-left: 4px solid var(--neutral); background: var(--flaeche); }
.fazit.gut { border-color: var(--gut); background: var(--gut-hell); } .fazit.ok { border-color: var(--ok); background: var(--ok-hell); }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tipps li { margin: .35em 0; }
@media (max-width: 760px) { .produkt-kopf { grid-template-columns: 1fr; } .produkt-symbol { width: 72px; height: 72px; font-size: 2.2rem; } .zwei-spalten { grid-template-columns: 1fr; } }

/* Tabellen */
.tabelle { overflow-x: auto; margin: 12px 0; }
table { border-collapse: collapse; width: 100%; background: var(--flaeche); border-radius: var(--radius); overflow: hidden; font-size: .95rem; border: 1px solid var(--linie); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
thead th { background: var(--flaeche-2); font-size: .85rem; color: var(--leise); }
tbody th { font-weight: 600; white-space: nowrap; }
.vergleich-tabelle td.zeit { color: var(--leise); font-size: .88rem; white-space: nowrap; }
.vergleich-tabelle .land-de { background: var(--flaeche-2); }

/* Preisindex */
.kernaussagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kern { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; box-shadow: var(--schatten); }
.kern b { display: flex; gap: 8px; align-items: center; font-size: 1.7rem; color: var(--akzent); }
.kern span { color: var(--leise); }
.balken { flex: 1; height: 10px; border-radius: 999px; background: var(--neutral-hell); overflow: hidden; min-width: 60px; }
.balken i { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }
.balken.gut i { background: var(--gut); }
.index-tabelle td:nth-child(2) { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.index-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px 24px; }
.index-teaser h2 { margin-top: 0; }
.balken-zeile { display: grid; grid-template-columns: 130px 1fr 48px; gap: 10px; align-items: center; margin: 8px 0; }
@media (max-width: 760px) { .index-teaser { grid-template-columns: 1fr; } }

/* Marken */
.sprungleiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 18px; }
.sprungleiste a { padding: 4px 9px; border-radius: 6px; background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; }
.marken-bloecke { columns: 4 220px; column-gap: 20px; }
.marken-block { break-inside: avoid; margin-bottom: 16px; }
.marken-block h2 { font-size: 1.2rem; margin: 0 0 4px; color: var(--akzent); }
.marken-block ul { list-style: none; padding: 0; margin: 0; }

/* Filter */
.filter { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 20px; }
.suche input { width: 100%; padding: 12px 14px; border-radius: var(--radius-k); border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .88rem; cursor: pointer; }
.chip.aktiv { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }

/* Texte & Artikel */
.seiten-kopf { padding: 14px 0 4px; }
.meta { color: var(--leise); font-size: .88rem; }
.artikel-raster { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.artikel-raster:has(> .text:only-child) { grid-template-columns: minmax(0, 1fr); }
.artikel .text { font-size: 1.04rem; max-width: 760px; }
.text h2 { scroll-margin-top: 90px; } .text h3 { margin-top: 1.4em; }
.text li { margin: .25em 0; }
.toc { position: sticky; top: 84px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 18px; font-size: .9rem; }
.toc ol { margin: .4em 0 0; padding-left: 1.1em; } .toc .ebene-3 { margin-left: 1em; list-style: circle; }
@media (max-width: 960px) { .artikel-raster { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }
.box { border-radius: var(--radius); padding: 14px 18px; margin: 20px 0; border: 1px solid var(--linie); background: var(--akzent-hell); }
.box-achtung { background: var(--warn-hell); } .box-info { background: var(--info-hell); }
.box-titel { display: block; margin-bottom: 4px; } .box p, .box li { color: var(--text); }
blockquote { margin: 20px 0; padding: 4px 18px; border-left: 4px solid var(--akzent); color: var(--leise); }
code { background: var(--akzent-hell); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 28px 0; }
.weiterlesen { margin: 32px 0; padding: 18px 22px; background: var(--flaeche); border-radius: var(--radius); border: 1px solid var(--linie); }
.weiterlesen h2 { margin-top: 0; font-size: 1.1rem; }
.vertrauen { margin: 40px 0; }
.haken { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.haken li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px 14px 44px; position: relative; }
.haken li::before { content: "✓"; position: absolute; left: 16px; top: 13px; color: var(--gut); font-weight: 800; }

/* Fuß */
.fuss { margin-top: 56px; padding: 32px 0 40px; border-top: 1px solid var(--linie); background: var(--flaeche); }
.fuss-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 18px; }
.fuss-spalten h2 { font-size: 1rem; margin: 0 0 8px; }
.fuss-spalten ul { list-style: none; padding: 0; margin: 0 0 8px; }
.fuss-spalten li { padding: 2px 0; font-size: .92rem; }
.fuss-spalten a { color: var(--text); text-decoration: none; } .fuss-spalten a:hover { color: var(--akzent); text-decoration: underline; }
.pflicht { font-weight: 600; }
.fuss-nav { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; }
.fuss-nav a { color: var(--text); }
@media (max-width: 600px) { body { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .kopf, .fuss, .aktionen, .seiten-nav { display: none; } body { background: #fff; } }

/* Mobil: Navigation einzeilig und waagerecht scrollbar statt zweizeilig */
@media (max-width: 760px) {
  .kopf-innen { flex-wrap: nowrap; gap: 8px; }
  .logo span { display: none; }
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav > a, .nav summary { white-space: nowrap; padding: 6px 9px; font-size: .9rem; }
  .mega { position: static; }
}

.vergleich-tabelle .link-zelle { text-align: right; width: 1%; white-space: nowrap; }
@media (max-width: 520px) { .vergleich-tabelle th, .vergleich-tabelle td { padding: 8px; } .vergleich-tabelle tbody th { white-space: normal; } }
.nur-mobil { display: none; }
@media (max-width: 520px) {
  .vergleich-tabelle .link-zelle, .vergleich-tabelle thead th:last-child { display: none; }
  .vergleich-tabelle .nur-mobil { display: block; margin-top: 6px; }
}
@media (max-width: 600px) {
  .kacheln, .kacheln.klein { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kachel { padding: 10px 12px; } .kachel strong { font-size: .92rem; line-height: 1.25; }
  .held-zahlen b { font-size: 1.45rem; }
}
.kat-icon .fl { width: 54px; height: 36px; border-radius: 4px; }
.kachel .icon .fl { width: 33px; height: 22px; }

.rechner { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; margin: 12px 0; }
.rechner label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .92rem; }
.rechner input[type=text], .rechner select { padding: 11px 12px; border-radius: var(--radius-k); border: 1px solid var(--linie);
  background: var(--bg); color: var(--text); font: inherit; font-weight: 400; }
.rechner .haken-label { flex-direction: row; align-items: center; font-weight: 400; }
.rechner-ergebnis { margin: 12px 0 20px; font-size: 1.1rem; }
.fazit.schlecht { border-color: var(--schlecht); background: var(--schlecht-hell); }

/* Review 11.10.: früher günstiger, Prüfverlauf, Suchknopf, Pflichtsätze Ausland */
.fazit.alt { border-left: 4px solid var(--leise); padding-left: 12px; }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.verlauf li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--linie, rgba(0,0,0,.08)); }
.verlauf time { font-variant-numeric: tabular-nums; color: var(--leise); min-width: 9.5em; }
.kopf .such-link { color: var(--text); text-decoration: none; padding: 7px 11px; border-radius: 999px; font-size: .95rem; white-space: nowrap; flex: none; }
.kopf .such-link:hover, .kopf .such-link[aria-current] { background: var(--akzent-hell); }
.kopf-innen .nav { flex: 1 1 auto; min-width: 0; }
@media (min-width: 761px) { .kopf-innen .nav { justify-content: flex-end; } }
.pflicht-ausland span { display: inline; margin-right: .5em; }
@media (max-width: 760px) { .kopf .such-link { padding: 6px 9px; } }

/* Review 2: Werbelink-Kennzeichnung, Form der Status-Punkte, mobile Navigation */
.werbe-marke { display: inline-block; margin-left: 6px; font-size: .75rem; color: var(--leise); vertical-align: middle; }
.fazit-box .werbe-marke { display: block; margin: 6px 0 0; }
.mini-ok i { background: var(--flaeche); box-shadow: inset 0 0 0 3px var(--ok); }
.mini-schlecht i { border-radius: 2px; }
.auswahl-hinweis { margin-top: 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fokus: #fbbf24; } }
:root[data-theme="dark"] { --fokus: #fbbf24; }
@media (max-width: 760px) {
  .kopf-innen { flex-wrap: wrap; row-gap: 4px; }
  .kopf-innen .logo { order: 1; }
  .kopf .such-link { order: 2; margin-left: auto; }
  .kopf-innen .nav { order: 3; flex-basis: 100%; }
  .kopf-innen .logo span { display: inline; }
}

/* Review 3: alte Ergebnisse grau statt grün, Mega-Menü auf dem Handy unter der zweizeiligen Kopfzeile */
.stufe-alt { background: var(--neutral-hell); color: var(--leise); }
.mini-alt i { background: var(--flaeche); box-shadow: inset 0 0 0 2px var(--neutral); }
@media (max-width: 760px) { .mega-panel { top: var(--kopf-hoehe, 120px); } }
@media (max-width: 760px) {
  /* Kein Scroll-Container: der würde das Mega-Menü abschneiden. Punkte brechen stattdessen um. */
  .kopf-innen .nav { overflow: visible; flex-wrap: wrap; row-gap: 2px; }
}

/* Review 4 */
@media (min-width: 761px) { .mega-panel { left: auto; right: 0; } }
.aktionen .nur-frisch { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.aktionen .nur-frisch .knopf { flex: 1; }
.mini-alt i { background: var(--flaeche); box-shadow: none; border: 2px dashed var(--neutral); }
@media (max-width: 520px) { .treffer { flex-wrap: wrap; } .treffer > span:first-child { min-width: 0; } .treffer .stufe { white-space: normal; } }
@media (max-width: 760px) { .kopf-innen .nav > a, .kopf-innen .nav summary { padding: 5px 7px; font-size: .88rem; } }

/* Review 5 (Nutzersicht) */
.tipp { flex-wrap: wrap; }
.tipp .zeit { flex-basis: 100%; }
.nur-handy { display: none; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.weiter-box { background: var(--flaeche); }
.land-sprung { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legende summary { cursor: pointer; }
.index-tabelle th:first-child { position: sticky; left: 0; background: var(--flaeche); z-index: 1; }
@media (max-width: 760px) {
  .kopf { position: static; background: var(--flaeche); backdrop-filter: none; }
  .nur-handy { display: block; margin-top: 12px; }
  .held-zahlen { display: none; }
  .filter .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .filter .chip { flex: none; }
}
@media (max-width: 420px) { .kopf-innen .nav a[href="/preisindex/"] { display: none; } }

/* Review 6 */
.aktionen { align-items: flex-start; }
.aktionen .knopf, .aktionen .nur-frisch .knopf { flex: 1 1 auto; white-space: nowrap; }
.legende summary { display: list-item; }
.produkt-kopf { grid-template-columns: 84px 1fr; }
@media (max-width: 760px) { .produkt-kopf { grid-template-columns: 1fr; } }
.land-sprung a { white-space: nowrap; }

/* Länderschalter */
.schalter label { display: block; font-weight: 600; margin-bottom: 6px; }
.schalter-ergebnis { margin: 16px 0; }
.schalter-ergebnis .knopf-reihe .knopf { flex: 1 1 auto; }
.werbe-leiste { font-size: .8rem; color: var(--leise); margin: 10px 0 0; }
.sortier-hinweis { margin-top: 10px; }
.link-zelle .werbe-marke { display: block; margin: 4px 0 0; }
.teilen { margin-top: 12px; }