/* Selbst gehostete Schriften (kein Google-Aufruf, DSGVO-sauber). Variable Fonts. */
@font-face{
  font-family:'Schibsted Grotesk';
  src:url('/assets/fonts/schibsted-grotesk-latin-var.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('/assets/fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* =========================================================================
   noey – Frontend (Richtung A · Editorial)
   Akzent zentral als Variable: --accent (hell, Fuellungen/Knoepfe),
   --link (dunkel, Textlinks – erreicht 4.5:1 auf Weiss). Beide beim
   Logo-Eingang in EINEM Zug auf die echte Markenfarbe umstellen.
   Fonts: Fallback-Stack ohne externen Aufruf (DSGVO). Self-Hosting per
   @font-face unter /assets/fonts/ spaeter hier ergaenzen.
   ========================================================================= */
/* Die alten Tokennamen bleiben bestehen und zeigen auf die neue Palette –
   dadurch uebernehmen alle bereits gestalteten Bausteine die neue Optik,
   ohne dass jede Regel einzeln angefasst werden muss. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F6F7F5;
  --text:#14181A; --heading:#14181A; --muted:#5A6367; --border:#E4E7E8;
  --accent:#ED4861; --accent-strong:#B32B43; --link:#B32B43; --accent-soft:#FDE8EB;
  --cta:#ED4861; --cta-strong:#B32B43;
  --footer-bg:#14181A; --footer-text:#C3C9CB;
  --radius:8px; --radius-sm:6px; --maxw:1240px;
  --shadow:0 6px 20px rgba(20,24,26,.06);
  --font-head:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-body:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Neue Namen fuer die neu gebauten Bausteine */
  --ink:#14181A; --mut:#5A6367; --soft:#71797D; --panel:#FFFFFF;
  --line:#E4E7E8; --hair:#EEF0F1; --alt:#F6F7F5; --gold:#F2B01E;
  --r:8px; --r-s:6px; --r-xs:4px;
  --t:.2s cubic-bezier(.3,.7,.35,1);
  --head:'Instrument Serif',Georgia,serif;
  --ui:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
}

/* Nacht: kein reines Schwarz – augenschonender, und die Weltfarben
   wirken darauf weicher statt hart ausgestanzt. */
:root[data-mode="night"]{
  --bg:#1A1E1D; --surface:#232827; --surface-2:#1F2423;
  --text:#ECEFEE; --heading:#ECEFEE; --muted:#A3ABAC; --border:#333938;
  --accent:#ED4861; --accent-strong:#F5A3B0; --link:#F5A3B0; --accent-soft:#3D262B;
  --footer-bg:#0F1211; --footer-text:#A3ABAC;
  --shadow:0 6px 20px rgba(0,0,0,.4);
  --ink:#ECEFEE; --mut:#A3ABAC; --soft:#99A1A3; --panel:#232827;
  --line:#333938; --hair:#2A302F; --alt:#1F2423; --gold:#FFC94A;
}

/* ── Weltfarben ────────────────────────────────────────────────────────────
   Schluessel ist die THEMEN-ID aus dem Backend. Legst du eine Welt neu an
   oder benennst sie um, muss die ID hier eingetragen werden – sonst faellt
   die Welt auf die Hausfarbe zurueck (kein Fehler, nur kein eigener Ton).

   WICHTIG: Der Rueckfall muss VOR den Weltregeln stehen. :root und
   [data-w="…"] haben dieselbe Spezifitaet – stuende er weiter unten,
   wuerde er alle vier Welten ueberschreiben.

   Rueckfall ist bewusst Rot und nicht Grau: solange die Welten im Backend
   fehlen, traefe sonst jede Seite ins Graue – und die auffaellige
   Produktbox saehe aus wie die ruhige, nur farblos.
   ------------------------------------------------------------------------ */
:root{--sig:#ED4861;--txt:#B32B43;--fld:#FDE8EB}   /* Standard ohne Welt */
[data-w="koerper-geist"]      {--sig:#ED4861;--txt:#B32B43;--fld:#FDE8EB}
[data-w="geld-weiterkommen"]  {--sig:#3A7F8A;--txt:#2A5F68;--fld:#E3EFF1}
[data-w="zuhause-naehe"]      {--sig:#FFE457;--txt:#6F5A00;--fld:#FFF7D2}
[data-w="unterwegs-technik"]  {--sig:#BCBF56;--txt:#66691C;--fld:#F3F4DE}
:root[data-mode="night"] [data-w="koerper-geist"]     {--sig:#ED4861;--txt:#F5A3B0;--fld:#3D262B}
:root[data-mode="night"] [data-w="geld-weiterkommen"] {--sig:#4E97A3;--txt:#93C9D2;--fld:#1B3339}
:root[data-mode="night"] [data-w="zuhause-naehe"]     {--sig:#FFE457;--txt:#E4CE6B;--fld:#37331F}
:root[data-mode="night"] [data-w="unterwegs-technik"] {--sig:#BCBF56;--txt:#D3D683;--fld:#313320}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
a,button,.nav-toggle,.lang-switch,.btn,.btn-buy{-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--heading);line-height:1.2;font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--panel);color:var(--ink);padding:10px 16px;z-index:100;border:1px solid var(--line);border-radius:8px}
.skip-link:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:4px}

/* --- Kopf + Navigation --- */
.site-header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.site-header-inner{display:flex;flex-wrap:wrap;align-items:center;gap:26px;min-height:66px}
.site-logo{display:flex;align-items:center}
.site-logo img{height:26px;width:auto;transform:translateY(1px)}  /* optischer Ausgleich: die Wortmarke hat nur x-Hoehen-Buchstaben + y-Unterlaenge, ihr Schriftbild sitzt sonst zu hoch. transform statt margin, weil margin im zentrierten Flex nur halb wirkt. */
.site-header-right{margin-left:auto;display:flex;align-items:center;gap:14px}
/* Hamburger mit federndem "Punk-Flip": morpht beim Oeffnen zum pinken X.
   Rein CSS, gesteuert ueber aria-expanded (setzt blog.js bereits). */
.nav-toggle{display:none;position:relative;width:42px;height:42px;background:none;border:0;cursor:pointer;
  padding:0;margin-left:auto;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
  transition:transform .5s cubic-bezier(.68,-0.6,.32,1.6)}
.nav-toggle span{position:absolute;left:50%;top:50%;width:24px;height:2px;background:var(--heading);border-radius:2px;
  transition:transform .45s cubic-bezier(.68,-0.6,.32,1.6),background-color .3s ease,opacity .2s ease}
.nav-toggle span:nth-child(1){transform:translate(-50%,-50%) translateY(-7px)}
.nav-toggle span:nth-child(2){transform:translate(-50%,-50%)}
.nav-toggle span:nth-child(3){transform:translate(-50%,-50%) translateY(7px)}
.nav-toggle:hover span:nth-child(1){transform:translate(-50%,-50%) translateY(-8.5px)}
.nav-toggle:hover span:nth-child(3){transform:translate(-50%,-50%) translateY(8.5px)}
.nav-toggle[aria-expanded="true"]{transform:rotate(180deg)}
.nav-toggle[aria-expanded="true"] span{background:var(--accent)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:translate(-50%,-50%) scaleX(0)}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){
  .nav-toggle,.nav-toggle span{transition-duration:.12s}
  .nav-toggle[aria-expanded="true"]{transform:none}
}

.site-nav{flex:1}
.site-nav-list{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.site-nav-item{position:relative}
.site-nav-item>a{display:block;padding:10px 14px;font-weight:600;font-size:15.5px;color:var(--heading);border-radius:8px}
.site-nav-item>a:hover{background:var(--surface-2);text-decoration:none;color:var(--link)}
.site-nav-item.active>a{color:var(--link)}
.site-nav-item .caret{font-size:.8em;opacity:.6}
.nav-count{font-size:.68em;font-weight:600;color:var(--muted);top:-.5em}
.site-subnav{list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 4px);left:0;
  min-width:210px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:50}
.site-nav-item.has-children:hover .site-subnav,.site-nav-item.open .site-subnav{opacity:1;visibility:visible;transform:translateY(0)}
.site-subnav a{display:block;padding:9px 12px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--text)}
.site-subnav a:hover{background:var(--accent-soft);color:var(--link);text-decoration:none}
.site-subnav a.active{color:var(--link);font-weight:600}

.lang-toggle{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;
  font-size:13px;font-weight:700;line-height:1;background:var(--surface)}
.lang-seg{padding:8px 14px;color:var(--muted);text-decoration:none;letter-spacing:.02em;
  transition:background .15s,color .15s}
.lang-seg:hover{background:var(--surface-2);color:var(--heading);text-decoration:none}
.lang-seg.on{background:#22635E;color:#fff}
.flag{border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}

/* --- Topbar (Vertrauenszeile ueber dem Header) --- */
.topbar{background:var(--footer-bg);color:var(--footer-text);font-size:13px;
  padding:7px 16px;text-align:center;letter-spacing:.01em}

/* --- Startseite --- */
.site-main{min-height:60vh;padding:0 0 60px}
.home-hero{text-align:center;padding:56px 20px 34px}
.home-hero h1{font-size:clamp(30px,5vw,46px);margin:0 0 14px}
.home-hero p{max-width:62ch;margin:0 auto;color:var(--muted);font-size:19px}
/* Startseiten-Hero linksbuendig mit Kicker + Vertrauenspunkten (Mockup-Layout) */
.home-hero--start{text-align:left;padding:52px 0 36px;
  background:radial-gradient(700px 320px at 85% -40%,var(--accent-soft) 0%,transparent 70%)}
.home-hero--start h1{max-width:18ch}
.home-hero--start p{margin:0;max-width:52ch}
/* Historische Regel aus der ersten Fassung (fette kursive Inter). Die Schriften
   sind ausgetauscht; weiter unten wird sie auf Instrument Serif ueberschrieben.
   Sie bleibt nur stehen, weil Laufweite und Zeilenhoehe dort gesetzt sind. */
.home-hero--start h1,.page-head h1{font-family:var(--font-body);font-weight:850;font-style:italic;
  letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.home-hero--start h1{font-size:clamp(38px,6.4vw,72px)}
.page-head h1{font-size:clamp(32px,5vw,56px)}
/* Kicker: kleine Akzentzeile ueber jeder Seiten-Ueberschrift (Startseite, Thema, Autor) */
.kicker,.home-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.kicker::before,.home-kicker::before{content:"";width:26px;height:2px;background:var(--accent)}

/* Einheitlicher Seitenkopf fuer Themen-, Autoren- und Inhaltsseiten */
.page-head{padding:30px 0 14px}
.page-head h1{font-size:clamp(29px,4.2vw,44px);margin:0 0 10px}
.page-head p{color:var(--muted);font-size:18px;max-width:62ch;margin:0}
.page-head .ph-count{font-size:13.5px;color:var(--muted);margin-top:14px}

/* Sektions-Schlagzeile (Editorial Bold): NUR fuer Abschnitte, nie fuer Seitentitel */
.mega-head{display:flex;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin:46px 0 20px}
.mega-head h2{font-family:var(--font-body);font-weight:850;font-style:italic;
  font-size:clamp(28px,4.8vw,54px);letter-spacing:-.035em;line-height:1;margin:0;color:var(--heading)}
.mega-head a{font-size:14.5px;font-weight:600;color:var(--muted)}
.mega-head a:hover{color:var(--link);text-decoration:none}

/* Startseite zweispaltig: Aufmacher links, Empfehlung + zweiter Beitrag rechts */
.home-split{display:grid;grid-template-columns:1.55fr .85fr;gap:22px;align-items:start;margin-bottom:26px}
.home-split .hs-main .feature{margin:0}
.home-split .hs-main .f-media{aspect-ratio:auto;height:100%;min-height:520px}
.home-split .hs-side{display:flex;flex-direction:column;gap:22px}
.home-split .hs-side .post-card{flex:1}
@media(max-width:900px){
  .home-split{grid-template-columns:1fr}
  .home-split .hs-main .f-media{min-height:0;aspect-ratio:16/9.6}
}

/* Empfehlungs-Karte (rechte Spalte) – der Kauf-Knopf bleibt das einzige Korallen-Element */
.reco-card{background:var(--accent-soft);border-radius:var(--radius);padding:22px 22px 24px}
.reco-badge{display:inline-block;border:1px solid var(--accent);color:var(--accent-strong);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;margin-bottom:14px}
.reco-img{width:100%;max-height:150px;object-fit:contain;margin:0 0 12px}
.reco-card h3{font-family:var(--font-body);font-weight:800;letter-spacing:-.02em;font-size:24px;
  color:var(--footer-bg);margin:0 0 4px}
.reco-card .stars{color:#DE9A2E;letter-spacing:2px;font-size:16px;margin-bottom:8px}
.reco-card .stars span{color:var(--muted);font-size:13px;letter-spacing:0}
.reco-card p{font-size:14.5px;color:var(--accent-strong);margin:0 0 16px;line-height:1.55}
.reco-card .offers{display:flex;flex-direction:column;gap:8px}
.reco-card .btn-buy{display:block;text-align:center}
.reco-card .price-note{font-size:12px;color:var(--muted);margin-top:8px}

/* Feature-Karte: der neueste Beitrag gross, Titel als weisse Sprechblase */
.feature{display:block;margin:0 0 26px;color:inherit}
.feature:hover{text-decoration:none}
.feature .f-media{position:relative;aspect-ratio:16/9.6;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(140deg,var(--accent-soft),#B9D3D0 58%,#3E8079);
  transition:transform .2s ease,box-shadow .2s ease}
.feature:hover .f-media{transform:translateY(-3px);box-shadow:var(--shadow)}
.feature .f-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature .f-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,28,24,.5),transparent 46%)}
.feature .f-top{position:absolute;top:16px;left:16px;display:flex;flex-wrap:wrap;gap:7px}
.feature .f-pill{background:rgba(255,255,255,.94);border-radius:999px;padding:6px 13px;
  font-size:12.5px;font-weight:600;color:var(--heading)}
.feature .f-title{position:absolute;top:16px;right:16px;max-width:60%;text-align:left}
.feature .f-title span{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:#fff;padding:5px 13px;border-radius:12px;font-family:var(--font-head);font-weight:600;
  font-size:clamp(18px,2.4vw,30px);line-height:1.62;color:var(--heading)}
.feature .f-foot{position:absolute;left:20px;bottom:18px;color:#fff;font-size:13.5px;font-weight:600}
.feature .f-arrow{position:absolute;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;
  background:#fff;display:grid;place-items:center;font-size:18px;color:var(--heading)}
@media(max-width:700px){
  .feature .f-media{aspect-ratio:4/4.4}
  .feature .f-title{position:absolute;top:auto;bottom:74px;left:16px;right:16px;max-width:none}
  .feature .f-foot{bottom:26px}
  .feature .f-arrow{width:38px;height:38px;bottom:22px}
}
.home-trust{display:flex;gap:12px 26px;flex-wrap:wrap;font-size:14px;font-weight:500;margin-top:24px}
.home-trust>span{display:inline-flex;align-items:center;gap:8px}
.tick{width:19px;height:19px;flex:none;border-radius:50%;background:var(--accent-soft);
  color:var(--link);display:inline-flex;align-items:center;justify-content:center;line-height:1}
.tick svg{display:block}
.topic-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:26px 0}
.topic-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;transition:transform .2s,box-shadow .2s;color:inherit}
.topic-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.topic-tile h2{font-size:20px;margin:0 0 6px}
.topic-tile p{margin:0;color:var(--muted);font-size:14.5px}
.topic-tile .sub{margin-top:10px;font-size:13px;color:var(--link);font-weight:600}
.section-head{margin:38px 0 16px;font-size:26px}

/* --- Artikel-Kacheln (Uebersicht) --- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:transform .2s,box-shadow .2s;color:inherit;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.post-card .thumb{aspect-ratio:16/9;background:var(--surface-2);object-fit:cover;width:100%}
.post-card .card-body{padding:16px 18px 18px}
.post-card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.chip{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--link)}
.post-card h3{font-size:19px;margin:0 0 8px;line-height:1.25}
.post-card .excerpt{margin:0;color:var(--muted);font-size:14.5px}
.post-card .card-meta{margin-top:12px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.post-card .card-meta .rm{margin-left:auto;color:var(--link);font-weight:600;font-size:13.5px}

/* --- Redaktions-Merker [todo]: erscheint NUR in der Backend-Vorschau ------ */
.blog-todo{background:#fff7ed;border:2px dashed #f97316;color:#9a3412;border-radius:12px;
  padding:14px 18px;margin:22px 0;font-weight:700;font-size:16px;clear:both}

/* --- Breadcrumb --- */
.breadcrumb{font-size:13.5px;color:var(--muted);padding:20px 0 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--link)}
.breadcrumb .sep{margin:0 7px;opacity:.5}

/* --- Artikel --- */
.article{max-width:880px;margin:0 auto;padding:8px 0 20px}
.article-hero{aspect-ratio:16/9;width:100%;object-fit:cover;border-radius:var(--radius);margin:16px 0 8px;background:var(--surface-2)}
.article h1{font-size:clamp(28px,4.4vw,40px);margin:18px 0 10px;line-height:1.15}
.article-meta{color:var(--muted);font-size:14px;margin-bottom:8px}
.article-body{font-size:18px;line-height:2.0}   /* Fliesstext-Zeilenabstand 2.0 (Briefing 1.4) */
.article-body h2{font-size:27px;margin:1.6em 0 .5em;scroll-margin-top:80px}
.article-toc{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin:1.4em 0}
.article-toc .toc-h{font-family:var(--font-head);font-weight:600;font-size:16px;margin-bottom:6px;color:var(--heading)}
.article-toc ol{margin:0;padding-left:1.3em}
.article-toc li{margin:4px 0}
.article-toc a{color:var(--link);text-underline-offset:2px}
.article-body h3{font-size:22px;margin:1.4em 0 .4em}
.article-body h4{font-size:19px;margin:1.2em 0 .3em}
.article-body p{margin:0 0 1.1em}
.article-body ul,.article-body ol{margin:0 0 1.1em;padding-left:1.4em}
.article-body li{margin:.3em 0}
.article-body blockquote{margin:1.3em 0;padding:.4em 1.1em;border-left:4px solid var(--accent);
  background:var(--surface-2);border-radius:0 8px 8px 0;color:var(--ink)}
.article-body code{background:var(--surface-2);padding:.12em .4em;border-radius:5px;font-size:.9em}
.article-body hr{border:0;border-top:1px solid var(--border);margin:2em 0}
.article-body a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.article-body a.btn-buy,.article-body a.btn{color:#fff;text-decoration:none}

/* Bilder im Text */
.blog-img{margin:1.4em 0}
.blog-img-media{position:relative;display:inline-block;line-height:0}
.blog-img img{border-radius:12px;width:100%}
.blog-img figcaption{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.5}
.blog-img-links{float:left;max-width:46%;margin:.4em 1.4em .3em 0}
.blog-img-rechts{float:right;max-width:46%;margin:.4em 0 .3em 1.4em}
.blog-img-zentriert{text-align:center}
.blog-img-voll img{width:100%}
.ai-badge{position:absolute;left:10px;bottom:10px;background:rgba(24,24,27,.82);color:#fff;
  font-size:11.5px;padding:4px 9px;border-radius:999px;line-height:1;letter-spacing:.02em}
.ai-badge b{color:var(--accent);font-weight:700}

/* KI-Kennzeichnung des Beitrags: Kreis, der beim Hover/Tap zur Pille aufklappt (Marken-Pink) */
.ki-badge{position:absolute;left:10px;bottom:10px;z-index:3;width:40px;height:40px;border-radius:999px;
  background:#22635E;color:#fff;box-shadow:0 2px 9px rgba(0,0,0,.26);overflow:hidden;cursor:default;
  transition:width .3s cubic-bezier(.4,0,.2,1)}
.ki-badge--inline{position:relative;left:auto;bottom:auto;display:inline-block;vertical-align:middle;margin:0 0 8px}
.ki-badge:hover,.ki-badge:focus{width:170px;outline:none}
.ki-c,.ki-p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.ki-c{flex-direction:column}
.ki-c svg{width:17px;height:17px}
.ki-c b{font-size:10px;font-weight:800;letter-spacing:.03em;line-height:1;margin-top:1px}
.ki-p{flex-direction:row;gap:7px;opacity:0;white-space:nowrap;padding:0 13px}
.ki-p svg{width:15px;height:15px;flex:none}
.ki-p b{font-size:13px;font-weight:800}
.ki-badge:hover .ki-c,.ki-badge:focus .ki-c{opacity:0}
.ki-badge:hover .ki-p,.ki-badge:focus .ki-p{opacity:1}
@media(prefers-reduced-motion:reduce){.ki-badge{transition:none}}

/* Hinweis / FAQ / Werbehinweis */
.blog-note{background:#f5f5f6;border:1px solid #e8e8ea;border-radius:12px;padding:16px 18px 16px 16px;margin:1.4em 0;display:flex;gap:13px;align-items:flex-start}
.blog-note-ic{flex:none;width:26px;height:26px;border-radius:50%;background:#e3e3e6;color:#5b5b63;display:flex;align-items:center;justify-content:center;margin-top:2px}
.blog-note-body{min-width:0}
.blog-note-body>*:first-child{margin-top:0}.blog-note-body>*:last-child{margin-bottom:0}
.blog-faq{margin:2em 0}
.blog-faq h2{font-size:25px;margin-bottom:.5em}
.blog-faq dt{font-weight:700;font-family:var(--font-head);font-size:18px;margin:1em 0 .3em;color:var(--heading)}
.blog-faq dd{margin:0 0 .6em;color:var(--text)}
.blog-ad-note{background:#f7f7f8;border:1px solid #ececec;color:#6b7280;border-radius:10px;
  padding:11px 15px;font-size:13.5px;margin:0 0 20px}
.blog-ai-foot{font-size:13px;color:var(--muted);border-top:1px solid var(--border);padding-top:14px;margin-top:26px}
/* AdSense-Anzeige am Artikelende */
.blog-ad-unit{margin:2em 0 1em;text-align:center;min-height:50px}
.blog-ad-label{display:block;font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:5px}
.blog-ad-unit .adsbygoogle{display:block}

/* --- Produkt-Box + Vergleich (netzwerk-neutral) --- */
.product-box.has-reco{position:relative;margin-top:2.4em;border-color:var(--accent)}
.p-reco{position:absolute;top:-13px;left:20px;background:var(--accent);color:#fff;font-size:12px;
  font-weight:700;letter-spacing:.05em;padding:6px 14px;border-radius:999px;line-height:1}
.product-box{border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin:1.6em 0;
  background:var(--surface);display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:stretch}
/* Bildspalte waechst auf die volle Hoehe der Box mit (align-items:stretch am
   .product-box) und das Bild fuellt sie komplett aus – kein Leerraum unten. */
.product-box .p-media{position:relative;border-radius:10px;overflow:hidden;background:var(--surface-2);
  min-height:180px;align-self:stretch}
.product-box .p-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;padding:0}
.product-box .ad-tag{position:absolute;top:8px;left:8px;z-index:2;background:rgba(24,24,27,.8);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:5px}
.product-box .p-body{display:flex;flex-direction:column;text-align:center}
.product-box h3{margin:0 0 4px;font-size:21px}
.product-box .stars{color:#DE9A2E;letter-spacing:2px;font-size:16px}   /* Gold = gelernte Bewertungsfarbe */
.product-box .stars span{color:var(--muted);font-size:13px;letter-spacing:0}
.product-box .p-body>p{margin:.5em 0;font-size:15px}
.product-box .p-proscons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0;text-align:left}
.product-box .p-proscons.one{grid-template-columns:1fr}
.product-box .pc-col{border-radius:9px;padding:9px 12px}
.product-box .pc-pro{background:#eef7e6}
.product-box .pc-con{background:var(--surface-2)}
.product-box .pc-h{font-size:12.5px;font-weight:700;margin-bottom:3px}
.product-box .pc-pro .pc-h{color:#3b6d11}
.product-box .pc-con .pc-h{color:#8a5a12}
.product-box .p-proscons ul{margin:0;padding-left:1.1em;font-size:14px;line-height:1.55}
.product-box .p-proscons li{margin:2px 0}
.product-box .offers{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.product-box .price-note{text-align:center}
.btn-buy{display:inline-block;background:var(--cta);color:#fff;font-weight:700;padding:12px 18px;
  border-radius:10px;font-size:15px}
.product-box .btn-buy{display:block;width:100%;text-align:center}
.btn-buy:hover{background:var(--cta-strong);text-decoration:none;color:#fff}

/* Download-Box: gleicher Rahmen wie die Produkt-Box, aber mit Datei-Download.
   Ohne Cover-Bild steht im Media-Bereich ein grosses Format-Kuerzel (PDF/Excel). */
.download-box{border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin:1.6em 0;
  display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;background:var(--surface);box-shadow:var(--shadow)}
.download-box .dlb-media{position:relative;border-radius:10px;overflow:hidden;background:var(--surface-2);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.download-box .dlb-media img{width:100%;height:100%;object-fit:cover}
.download-box .dlb-ico{font-family:var(--font-head);font-weight:700;font-size:34px;color:var(--accent-strong);letter-spacing:.02em}
.download-box .dlb-tag{position:absolute;top:8px;left:8px;z-index:2;font-size:10px;font-weight:700;letter-spacing:.05em;
  background:var(--heading);color:#fff;border-radius:6px;padding:2px 7px}
.download-box .dlb-body h3{margin:0 0 6px;font-size:19px}
.download-box .dlb-body p{margin:0 0 12px;color:var(--muted);font-size:15px}
.download-box .dlb-btn{display:inline-flex;align-items:center;gap:8px;width:auto}
.download-box .dlb-btn .dl-ico{width:18px;height:18px;flex:none}
@media (max-width:520px){
  .download-box{grid-template-columns:1fr;text-align:center}
  .download-box .dlb-media{max-width:180px;margin:0 auto}
  .download-box .dlb-btn{display:block;width:100%}
}
.btn-buy .merchant{font-weight:500;opacity:.9;font-size:13px}
.price-note{font-size:12px;color:var(--muted);margin-top:6px}

/* Markdown-Tabellen (aus | … | im Text, z. B. importiert). Auf schmalen
   Bildschirmen scrollt der Wrapper waagerecht, statt das Layout zu sprengen. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6em 0;
  border:1px solid var(--border);border-radius:12px}
.md-table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5;background:var(--surface)}
.md-table th,.md-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.md-table thead th{font-family:var(--font-head);font-weight:700;color:var(--heading);
  background:var(--surface-2);border-bottom:2px solid var(--border);white-space:nowrap}
.md-table tbody tr:last-child td{border-bottom:0}
.md-table tbody tr:nth-child(even) td{background:rgba(20,20,25,.025)}
.compare-table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:14px;margin:1.6em 0}
.compare-table{width:100%;border-collapse:collapse;margin:0;font-size:15px;min-width:560px;background:var(--surface)}
.compare-table th,.compare-table td{padding:14px;text-align:left;vertical-align:middle;border-top:1px solid var(--border)}
.compare-table thead th{background:var(--surface-2);border-top:0;font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--heading)}
.compare-table .ct-prod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.compare-table .ct-prod img{width:84px;height:84px;object-fit:cover;background:var(--surface-2);border-radius:10px;padding:0}
.compare-table .ct-prod strong{font-size:15px}
/* Vergleichstabelle: Sterne und Zahl bleiben auf EINER Zeile; die Zahl in
   demselben Grau wie in den Produktboxen (nur die Sterne sind gelb). */
.compare-table .stars{color:#DE9A2E;letter-spacing:1px;flex-wrap:nowrap;white-space:nowrap}
.compare-table .stars span{color:var(--muted);font-size:13px;letter-spacing:0}
/* Empfehlungs-Zeile im Vergleich: zartes Gruen + Badge (konkurriert nicht mit dem Pink-CTA) */
.compare-table tr.ct-reco>td{background:#f0f9eb}
.ct-reco-badge{display:block;width:max-content;margin-top:6px;background:#4e8a30;color:#fff;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.02em}
.compare-table ul{list-style:none;margin:0;padding:0;font-size:14px}
.compare-table ul li{position:relative;padding-left:19px;margin:3px 0}
.compare-table ul li::before{content:"✓";position:absolute;left:0;color:#4e8a30;font-weight:700}   /* Gruen = positiv; Pink bleibt exklusiv fuer Buttons */
.compare-table .offers{display:flex;flex-direction:column;gap:6px}
.compare-table .price-note{font-size:12px;color:var(--muted);margin-top:2px}
.compare-table .highlight{background:var(--accent-soft)}

/* --- Teilen --- */
.share{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:26px 0;padding-top:18px;border-top:1px solid var(--border)}
.share .label{font-weight:600;color:var(--muted);font-size:14px;margin-right:2px}
.share-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);color:#3f3f46;font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s,box-shadow .15s}
.share-pill .si{display:inline-flex;align-items:center}
.share-pill:hover{background:var(--surface);border-color:var(--accent);box-shadow:0 2px 8px rgba(20,20,25,.06);text-decoration:none}
@media(max-width:520px){.share-pill span:not(.si){display:none}.share-pill{padding:9px}}

/* --- Related --- */
.related{margin:40px 0 10px}
.related h2{font-size:24px;margin-bottom:14px}

/* --- 404 --- */
.notfound{text-align:center;padding:80px 20px}
.notfound h1{font-size:40px;margin-bottom:12px}
.notfound p{color:var(--muted);margin-bottom:20px}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:12px 22px;border-radius:10px}
.btn:hover{background:var(--accent-strong);color:#fff;text-decoration:none}

/* --- Preview-/Draft-Banner --- */
.preview-banner{background:#fef3c7;color:#92400e;text-align:center;padding:10px;font-weight:600;font-size:14px}

/* --- Footer --- */
.site-footer{background:var(--footer-bg);color:var(--footer-text);margin-top:40px}
.site-footer-inner{padding:34px 20px}
.site-footer-brand{font-family:var(--font-head);font-size:22px;color:#fff;margin-bottom:12px}
.site-footer-brand img{height:24px;width:auto}
.site-footer-nav{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:14px}
.site-footer-nav a{color:#fff;font-weight:600;font-size:14.5px}
.site-footer-ad{color:#a8a29e;font-size:13px;max-width:80ch;margin:0 0 8px}
.site-footer-copy{color:#a8a29e;font-size:13px;margin:0}

/* --- Cookie-Banner --- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:520px;margin:0 auto;
  background:var(--heading);color:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 10px 40px rgba(0,0,0,.3);z-index:80}
.cookie-banner p{margin:0 0 12px;font-size:14px}
.cookie-banner .cb-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner button{border:0;border-radius:8px;padding:9px 16px;font-weight:600;cursor:pointer;font-size:14px}
.cb-accept{background:var(--accent);color:#fff}
.cb-decline{background:#3f3f46;color:#fff}

/* --- PDF-/Lead-Dialog --- */
.lead-pdf{font-weight:600}
.modal-overlay{position:fixed;inset:0;background:rgba(24,24,27,.55);display:none;align-items:center;
  justify-content:center;z-index:90;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:16px;max-width:440px;width:100%;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal h3{margin:0 0 14px;font-size:22px}
.modal label{display:block;font-size:14px;font-weight:600;margin:12px 0 6px}
.modal input[type=email]{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:9px;font:inherit}
.modal .cb-row{display:flex;gap:9px;align-items:flex-start;margin:12px 0;font-size:14px;color:var(--muted)}
.modal .cb-row input{margin-top:3px}
.modal .modal-actions{display:flex;gap:10px;margin-top:16px}
.modal .modal-close{margin-left:auto;background:none;border:0;font-size:22px;cursor:pointer;color:var(--muted)}
.modal-err{color:#b91c1c;font-size:13px;margin-top:6px;display:none}

/* --- Mobile --- */
@media(max-width:860px){
  .site-logo{flex-shrink:0}
  .site-logo img{height:24px}
  .lang-switch span{display:none}
  .lang-switch{width:42px;height:42px;padding:0;border-radius:50%;justify-content:center;gap:0}
  .nav-toggle{display:flex;order:3}
  .site-nav{order:4;flex-basis:100%;display:none}
  .site-nav.open{display:block}
  .site-nav-list{flex-direction:column;gap:2px;padding:10px 0}
  .site-nav-item>a{padding:12px 8px}
  .site-subnav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    border-left:2px solid var(--border);border-radius:0;margin:0 0 6px 14px;display:none}
  .site-nav-item.open .site-subnav{display:block}
  .site-header-right{order:2}
  .product-box{grid-template-columns:1fr}
  .product-box .p-media{aspect-ratio:16/9;min-height:0}
  .product-box .p-proscons{grid-template-columns:1fr}
  .blog-img-links,.blog-img-rechts{float:none;max-width:100%;margin:1.2em 0}
}

/* =========================================================================
   Sanfte Scroll-Animationen (dezent, wiederholend, alle Geraete).
   blog.js vergibt .reveal an Artikel-Elemente und schaltet .in beim
   Sichtbarwerden (rauf UND runter). Ohne JS bleibt alles sichtbar -> SEO/A11y.
   ========================================================================= */
.reveal{opacity:0;transform:translateY(12px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* Titelbild "setzt sich" weich von leicht groesser auf normal (Container clippt) */
.article>.blog-img-media{overflow:hidden;border-radius:var(--radius);margin:16px 0 8px}
.article>.blog-img-media>.article-hero{margin:0;border-radius:0;
  transition:transform .9s cubic-bezier(.22,.61,.36,1);will-change:transform}
.reveal.blog-img-media>.article-hero{transform:scale(1.06)}
.reveal.in.blog-img-media>.article-hero{transform:scale(1)}

/* Buttons: Anheben am Desktop + spuerbares Tap-Feedback auf Mobile */
.btn,.btn-buy{transition:transform .18s ease, box-shadow .25s ease, background-color .2s ease}
@media(hover:hover){.btn:hover,.btn-buy:hover{transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(20,20,25,.16)}}
.btn:active,.btn-buy:active{transform:translateY(0) scale(.96)}

/* Sekundaerer Knopf (z. B. "Abbrechen" im PDF/Excel-Dialog): gleiche Groesse und
   Rundung wie .btn, aber zurueckhaltend statt gefuellt. */
.prev2{display:inline-block;background:var(--surface-2);color:var(--text);font-weight:700;
  padding:12px 22px;border-radius:10px;border:1px solid var(--border);cursor:pointer;
  font:inherit;font-weight:700;line-height:1;transition:background-color .2s ease}
.prev2:hover{background:var(--border);text-decoration:none}

/* Produktboxen: dezentes Anheben am Desktop */
.product-box{transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
@media(hover:hover){.product-box:hover{transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.07);border-color:#efd3e0}}

/* Bewegung reduzieren, wenn im System gewuenscht */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none}
  .article>.blog-img-media>.article-hero,.btn,.btn-buy,.product-box{transition:none}
  .reveal.blog-img-media>.article-hero{transform:none}
}

/* --- Autorenseite (E-E-A-T-Profil) --- */
.author-hero{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 26px;margin:18px 0 26px;box-shadow:var(--shadow)}
.author-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:3px solid var(--accent-soft)}
.author-meta{flex:1 1 260px;min-width:0}
.author-meta h1{margin:0 0 4px;font-size:30px}
.author-role{margin:0 0 10px;color:var(--link);font-weight:600;font-size:15px}
.author-bio{margin:0 0 14px;color:var(--text);font-size:16px;line-height:1.65;max-width:60ch}
.author-links{display:flex;flex-wrap:wrap;gap:8px}
.author-links a{display:inline-block;padding:6px 12px;border:1px solid var(--border);
  border-radius:999px;font-size:13.5px;font-weight:500;color:var(--muted);background:var(--surface-2)}
.author-links a:hover{color:var(--link);border-color:var(--accent);text-decoration:none}
.author-posts-h{font-size:20px;margin:6px 0 16px}
/* Autoren-Box am Artikelende */
.author-box{display:flex;gap:16px;align-items:flex-start;margin:30px 0 6px;padding:18px 20px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:14px}
.author-box-ph{flex:0 0 auto}
.author-box-ph img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid var(--surface)}
.author-box-body{min-width:0}
.author-box-kicker{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.author-box-name{display:inline-block;margin-top:2px;font-family:var(--font-head);font-size:19px;
  font-weight:700;color:var(--heading);text-decoration:none}
.author-box-name:hover{color:var(--link)}
.author-box-role{color:var(--link);font-weight:600;font-size:13.5px;margin-top:1px}
.author-box-bio{margin:8px 0 8px;color:var(--text);font-size:14.5px;line-height:1.6}
.author-box-more{font-size:13.5px;font-weight:600;color:var(--link);text-decoration:none}
.author-box-more:hover{text-decoration:underline}
.author-link{color:inherit;font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent-soft)}
.author-link:hover{color:var(--link);border-bottom-color:var(--accent)}
@media(max-width:560px){
  .author-hero{padding:20px;gap:16px}
  .author-photo{width:88px;height:88px}
  .author-meta h1{font-size:25px}
}

/* Vergleichstabelle: Kauf-Knoepfe nie umbrechen; Angebots-Spalte nimmt nur ihre
   noetige Breite, die Vorteile-Spalte gibt entsprechend nach (und bleibt lesbar). */
.compare-table .btn-buy{white-space:nowrap}
.compare-table th:last-child,.compare-table td:last-child{width:1%}
.compare-table ul{max-width:52ch}

/* =========================================================================
   VIDEO-BAUSTEIN  [video …]
   Startet nie von allein: erst Standbild + Play-Knopf, der Player entsteht
   beim Klick (blog.js). Bei YouTube heisst das zugleich: vorher kein Kontakt
   zu Google. Das Pop-up folgt der Mediathek-Lightbox (heller Milchglas-Grund,
   weisse Karte, Schliessen-Quadrat oben rechts, Titel als Pille darunter).
   ========================================================================= */
.blog-video{margin:1.6em 0}
/* Darstellung wie bei Bildern: halbe Breite, Text fliesst daneben vorbei */
/* Feste Breite (nicht nur max-width): ein Video bringt – anders als ein Bild –
   keine Eigenbreite mit. Sobald der Player das Standbild ersetzt, wuerde der
   Float sonst auf null schrumpfen und das Video verschwinden. */
.blog-video--links{float:left;width:46%;margin:.4em 1.4em .3em 0}
.blog-video--rechts{float:right;width:46%;margin:.4em 0 .3em 1.4em}
/* Hochformat neben Fliesstext: bei 46 % Spaltenbreite waere ein 9:16-Clip
   ueber 1000 px hoch und wuerde den Text daneben erschlagen. */
.blog-video--hoch.blog-video--links,
.blog-video--hoch.blog-video--rechts{width:30%}
@media(max-width:640px){.blog-video--links,.blog-video--rechts{float:none;width:100%;margin:1.6em 0}
  .blog-video--hoch.blog-video--links,.blog-video--hoch.blog-video--rechts{width:100%}}
/* Hochformat ueber die volle Breite waere riesig – auf Lesehoehe begrenzen. */
.blog-video--hoch.blog-video--voll{max-width:min(100%,420px);margin-inline:auto}
.blog-video figcaption{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.5}

/* --vr traegt das Seitenverhaeltnis des Videos (aus dem Dateikopf, lib/image.php).
   Ohne Angabe – YouTube, WebM – bleibt es bei 16:9 wie bisher. */
.video-wrap{position:relative;display:block}
.video-poster{display:block;width:100%;padding:0;border:0;cursor:pointer;position:relative;
  aspect-ratio:var(--vr,16/9);border-radius:12px;overflow:hidden;background:#241c22;line-height:0}
/* Passt der Rahmen zum Video, darf das Standbild hineinpassen statt beschnitten
   zu werden. Ohne bekanntes Format bleibt es beim fuellenden Zuschnitt. */
.video-poster img{width:100%;height:100%;object-fit:cover;display:block}
.blog-video[style*="--vr"] .video-poster img{object-fit:contain}
.video-poster::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 62% at 50% 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,.42) 100%)}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.95);color:#18181B;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.32);transition:transform .18s ease}
.video-play svg{margin-left:4px}
.video-poster:hover .video-play{transform:translate(-50%,-50%) scale(1.06)}
.video-poster:focus-visible{outline:2px solid var(--link);outline-offset:3px}

/* nach dem Klick: Player an Ort und Stelle */
.video-inline{position:relative;width:100%;aspect-ratio:var(--vr,16/9);border-radius:12px;overflow:hidden;background:#241c22}
.video-inline iframe,.video-inline video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Pop-up */
.video-lb{position:fixed;inset:0;z-index:1200;display:none;place-items:center;
  padding:clamp(1rem,3.5vw,2.5rem);background:rgba(233,232,238,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);backdrop-filter:blur(18px) saturate(1.05)}
.video-lb.is-open{display:grid}
/* Die Breite wird zusaetzlich aus der verfuegbaren Hoehe begrenzt: sonst waere
   ein quadratischer Clip 1180 px hoch und ein Hochformat doppelt so hoch wie
   der Bildschirm. --vrn ist dasselbe Verhaeltnis als Zahl (blog.js setzt es). */
.video-lb-in{width:min(100%,1180px,calc((100vh - 11rem) * var(--vrn,1.7778)));
  display:flex;flex-direction:column;align-items:center;gap:1.1rem}
@supports (height:100dvh){
  .video-lb-in{width:min(100%,1180px,calc((100dvh - 11rem) * var(--vrn,1.7778)))}
}
.video-lb-card{width:100%;background:#fff;border-radius:14px;padding:10px;
  box-shadow:0 18px 60px -18px rgba(20,15,17,.45)}
.video-lb-frame{position:relative;aspect-ratio:var(--vr,16/9);border-radius:8px;overflow:hidden;background:#241c22}
.video-lb-frame iframe,.video-lb-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-lb-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center}
.video-lb-ki{background:var(--accent);color:#fff;border-radius:999px;padding:.5rem 1rem;
  font-size:13.5px;font-weight:600;box-shadow:0 6px 20px -8px rgba(20,15,17,.35)}
.video-wrap.is-playing .ki-badge{top:10px;bottom:auto}
.video-lb-cap{background:#fff;color:var(--heading);border-radius:999px;padding:.55rem 1.15rem;
  font-size:14.5px;font-weight:500;box-shadow:0 6px 20px -8px rgba(20,15,17,.35)}
.video-lb-x{position:fixed;top:20px;right:20px;z-index:1210;width:52px;height:52px;border:0;cursor:pointer;
  background:#fff;color:var(--heading);border-radius:14px;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px -8px rgba(20,15,17,.4);transition:transform .16s ease}
.video-lb-x:hover{transform:scale(1.05)}

@media (prefers-reduced-motion:reduce){.video-play,.video-lb-x{transition:none}}


/* Bausteine duerfen NIE neben einem umflossenen Bild/Video stehen – sonst
   wird die Produkt-Box in die Restbreite gequetscht und bricht auseinander.
   clear:both stellt sie sauber darunter. */
.product-box,.compare-table-scroll,.blog-note,.blog-faq{clear:both}

/* ═══════════════════════════════════════════════════════════════════════════
   NEUE OBERFLÄCHE (Umbau Juli 2026)
   Kopfzeile, mobiles Menü, Fuss und Beitragskarte in der neuen Formensprache.
   Steht bewusst am Ende: gleiche Spezifität, spätere Regel gewinnt.
   ═══════════════════════════════════════════════════════════════════════════ */

body{font-size:16px;line-height:1.6;transition:background .35s ease,color .35s ease}
h1,h2,h3,h4{font-weight:400;letter-spacing:-.018em}
h3,h4{font-family:var(--ui);font-weight:700;letter-spacing:-.02em}
.wrap{max-width:var(--maxw);padding:0 clamp(18px,4vw,40px)}
a:hover{text-decoration:none}
:focus-visible{outline:2.5px solid var(--sig);outline-offset:3px;border-radius:var(--r-xs)}
.lbl{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.3}
.ic{width:1em;height:1em;display:block;flex:none;fill:currentColor}

/* ── Kopfzeile ── */
.head{position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--line);transition:background .35s ease}
.headin{max-width:var(--maxw);margin:0 auto;padding:14px clamp(18px,4vw,40px);
  display:flex;align-items:center;gap:30px}
.logo{font-family:var(--head);font-size:29px;line-height:1;letter-spacing:-.02em;
  flex:none;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo b{color:#ED4861;font-weight:400}
.nlinks{display:flex;gap:26px}
.nlinks a{font-size:14.5px;font-weight:500;color:var(--mut);position:relative;
  padding:6px 0;transition:color var(--t)}
.nlinks a:hover{color:var(--ink)}
.nlinks a[aria-current]{color:var(--ink);font-weight:600}
.nlinks a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-15px;
  height:2px;background:var(--sig)}
.nright{margin-left:auto;display:flex;align-items:center;gap:12px}
.nlang{display:flex;gap:2px}
.nlang a,.nlang span{padding:6px 9px;border-radius:var(--r-xs);color:var(--soft);
  font-size:12px;font-weight:600;line-height:1;transition:background var(--t),color var(--t)}
.nlang a:hover{color:var(--ink);text-decoration:none}
.nlang [aria-current]{background:var(--ink);color:var(--bg)}
.nsep{width:1px;height:22px;background:var(--line);flex:none}
.nmode{display:flex;gap:2px}
.nmode button{width:29px;height:26px;display:grid;place-items:center;border:0;
  border-radius:var(--r-xs);background:none;color:var(--soft);cursor:pointer;
  transition:background var(--t),color var(--t)}
.nmode button:hover{color:var(--ink)}
.nmode button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.nmode .ic{font-size:15px}
.burger{display:none;width:42px;height:42px;border-radius:var(--r-s);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border:1px solid var(--line);background:none;cursor:pointer;flex:none;margin-left:auto}
.burger i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform var(--t),opacity var(--t)}
body.menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Mobiles Menü ── */
.mnav{position:fixed;inset:0;z-index:55;background:var(--bg);padding:76px 0 40px;
  overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
body.menu-open .mnav{opacity:1;visibility:visible;transform:none;
  transition:opacity .22s ease,transform .22s ease,visibility 0s}
body.menu-open{overflow:hidden}
.mnav .in{padding:0 clamp(18px,5vw,32px);max-width:var(--maxw);margin:0 auto}
.mworld{border-top:1px solid var(--line)}
.mworld:last-of-type{border-bottom:1px solid var(--line)}
.mworld > button,.mworld > .mworld-link{width:100%;display:flex;align-items:center;gap:14px;
  padding:18px 4px;text-align:left;border:0;background:none;cursor:pointer;color:var(--ink)}
.mworld .sq{width:32px;height:32px;border-radius:var(--r-s);background:var(--sig);flex:none}
.mworld .wn{flex:1;font-family:var(--head);font-size:25px;line-height:1.1;letter-spacing:-.02em}
.mworld .cnt{font-size:12.5px;font-weight:600;color:var(--soft)}
.mworld .chev{width:26px;height:26px;display:grid;place-items:center;color:var(--soft);
  transition:transform var(--t)}
.mworld[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mkats{display:none;padding:0 0 14px}
.mworld[aria-expanded="true"] .mkats{display:block}
.mkats a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 14px;border-radius:var(--r-s);background:var(--fld);color:var(--txt);
  font-size:17px;font-weight:600;margin-bottom:6px}
.mkats a:hover{text-decoration:none}
.mkats a .z{font-size:12.5px;font-weight:600;opacity:.7}
.mfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}

/* ── Beitragskarte ── */
.post-card{display:flex;flex-direction:column;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);transition:transform var(--t);color:var(--ink)}
.post-card:hover{transform:translateY(-3px);text-decoration:none}
.post-card .thumb{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--alt);
  transition:transform .5s cubic-bezier(.3,.7,.35,1)}
.post-card:hover .thumb{transform:scale(1.04)}
.post-card .card-body{padding:17px 18px 19px;display:flex;flex-direction:column;flex:1;gap:8px}
.post-card .chips{display:flex;gap:6px;flex-wrap:wrap}
.post-card .chip{background:var(--fld);color:var(--txt);border-radius:var(--r-xs);
  padding:5px 10px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.post-card h3{font-size:19.5px;line-height:1.24;text-wrap:balance}
.post-card .excerpt{font-size:13.5px;line-height:1.55;color:var(--mut)}
.post-card .card-meta{font-size:11.5px;font-weight:600;color:var(--soft);padding-top:12px;
  border-top:1px solid var(--hair);margin-top:auto;display:flex;align-items:center;gap:7px}
.post-card .rm{margin-left:auto;color:var(--txt)}

/* ── Fuss ── */
.foot{margin-top:clamp(50px,7vw,80px);border-top:1px solid var(--line);
  padding:30px 0 44px;font-size:12.5px;color:var(--soft)}
.foot .in{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.foot b{color:var(--ink);font-weight:600}
.footnav{display:flex;gap:16px;flex-wrap:wrap}
.footnav a{color:var(--soft)}
.footnav a:hover{color:var(--ink);text-decoration:none}

/* ── Responsiv ── */
@media (max-width:860px){
  .nlinks,.nright{display:none}
  .burger{display:flex}
}
@media (max-width:620px){
  .foot .in{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Artikel: zweispaltig mit mitlaufendem Inhaltsverzeichnis ── */
.artgrid{display:grid;grid-template-columns:minmax(0,1fr) 290px;
  gap:clamp(28px,4.5vw,64px);align-items:start;margin-top:clamp(24px,3vw,36px)}
.artmain{min-width:0}
.aside{position:sticky;top:86px;display:flex;flex-direction:column;gap:16px}
.article-toc{background:var(--alt);border:0;border-radius:var(--r);padding:20px;margin:0}
.article-toc .toc-h{font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft);margin-bottom:10px}
.article-toc ol{list-style:none;margin:0;padding:0;counter-reset:none}
.article-toc li{margin:0}
.article-toc a{display:block;font-size:14px;line-height:1.45;padding:9px 12px;
  border-radius:var(--r-s);color:var(--mut);transition:background var(--t),color var(--t)}
.article-toc a:hover{color:var(--ink);background:var(--panel);text-decoration:none}
.article-toc a.on{background:var(--fld);color:var(--txt);font-weight:700}
.article-hero{border-radius:var(--r);width:100%}
.article .article-meta{color:var(--soft);font-size:13px}

@media (max-width:980px){
  .artgrid{grid-template-columns:1fr}
  /* Verzeichnis wandert ueber den Text und wird zur Kachelreihe */
  .aside{position:static;order:-1}
  .article-toc{padding:16px 18px}
  .article-toc ol{display:flex;flex-wrap:wrap;gap:6px}
  .article-toc a{display:inline-block;padding:7px 11px;background:var(--panel)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPFEHLUNGSKASTEN – zwei Darstellungen
   [produkt id="…"]                      -> .lay-ruhig      (Standard)
   [produkt id="…" layout="auffaellig"]  -> .lay-auffaellig
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sterne immer klassisch gold, in beiden Darstellungen */
.stars{color:var(--gold);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.stars .si{color:var(--gold)}
.stars .num{color:var(--ink);font-weight:700;font-size:14px}

/* ── Ruhig: kein Kasten, Linien statt Rahmen, Textlink-Charakter ── */
.product-box.lay-ruhig{background:none;border:0;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);border-radius:0;padding:20px 0 24px;margin:2em 0;
  display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:start;box-shadow:none}
.product-box.lay-ruhig .p-media{width:132px;margin:0}
.product-box.lay-ruhig .p-media img{width:132px;height:132px;object-fit:cover;
  border-radius:var(--r-xs);background:var(--alt)}
.product-box.lay-ruhig .ad-tag{position:static;display:inline-block;margin-bottom:8px;
  background:none;color:var(--soft);padding:0;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.product-box.lay-ruhig .p-reco{position:static;display:inline-flex;align-items:center;gap:8px;
  background:none;color:var(--txt);padding:0;margin-bottom:12px;font-size:10.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;box-shadow:none}
.product-box.lay-ruhig h3{font-family:var(--head);font-weight:400;
  font-size:clamp(23px,2.6vw,27px);line-height:1.15;margin:0 0 10px}
.product-box.lay-ruhig .p-body > p{font-size:16.5px;line-height:1.65;max-width:56ch;color:var(--ink)}
.product-box.lay-ruhig .btn-buy{background:none;color:var(--txt);border:1.5px solid var(--sig);
  border-radius:var(--r-s);padding:11px 20px;font-size:14px;font-weight:700;box-shadow:none}
.product-box.lay-ruhig .btn-buy:hover{background:var(--fld);text-decoration:none}

/* ── Auffällig: Farbband, Farbfläche, gefüllter Knopf ── */
.product-box.lay-auffaellig{background:var(--fld);border:0;border-radius:var(--r);
  padding:0;overflow:hidden;margin:2em 0;box-shadow:none}
.product-box.lay-auffaellig .p-reco{position:static;display:block;background:var(--sig);
  color:#fff;padding:9px 24px;border-radius:0;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;box-shadow:none}
:root[data-mode="night"] .product-box.lay-auffaellig .p-reco{color:#14181A}
.product-box.lay-auffaellig .p-media{padding:26px 28px 0;margin:0}
.product-box.lay-auffaellig .p-media img{width:180px;height:180px;object-fit:cover;
  border-radius:var(--r-s);background:var(--panel)}
.product-box.lay-auffaellig .ad-tag{position:static;display:inline-block;margin-bottom:10px;
  background:none;color:var(--txt);opacity:.75;padding:0;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.product-box.lay-auffaellig .p-body{padding:22px 28px 28px}
.product-box.lay-auffaellig h3{font-family:var(--head);font-weight:400;
  font-size:clamp(24px,2.8vw,29px);line-height:1.14;margin:0 0 10px}
.product-box.lay-auffaellig .p-body > p{font-size:16px;line-height:1.65;color:var(--txt)}
.product-box.lay-auffaellig .btn-buy{background:var(--sig);color:#fff;border:0;
  border-radius:var(--r-s);padding:14px 26px;font-size:15px;font-weight:700;box-shadow:none}
:root[data-mode="night"] .product-box.lay-auffaellig .btn-buy{color:#14181A}
.product-box.lay-auffaellig .btn-buy:hover{text-decoration:none;filter:brightness(.94)}

@media (min-width:861px){
  .product-box.lay-auffaellig{display:grid;grid-template-columns:1fr;align-items:start}
  .product-box.lay-auffaellig .p-media{grid-column:1;float:left;padding:26px 0 26px 28px}
}
@media (max-width:620px){
  .product-box.lay-ruhig{grid-template-columns:1fr;gap:16px}
  .product-box.lay-ruhig .p-media,
  .product-box.lay-ruhig .p-media img{width:100%;height:auto;aspect-ratio:16/10}
  .product-box.lay-auffaellig .p-media,
  .product-box.lay-auffaellig .p-media img{width:100%;height:auto;aspect-ratio:16/10}
  .product-box.lay-auffaellig .p-media{padding:22px 22px 0}
  .product-box.lay-auffaellig .p-body{padding:18px 22px 24px}
  .product-box .btn-buy{display:block;text-align:center}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KORREKTUR: Schlagzeilen auf die Serif zurückholen
   Die alte Richtung setzte Startseiten-, Seiten- und Sektionstitel bewusst
   in fett-kursive Grotesk (font-weight:850, font-style:italic). Das war die
   Signatur der Vorgängerfassung und überschreibt sonst die neue Schrift.
   Zwei Nebenwirkungen kamen dazu, die es ohnehin zu beheben gab:
     · 850 liegt über der Achse der Variable (400–800) -> geklemmt
     · die selbst gehostete Grotesk hat KEINEN Kursiv-Schnitt
       -> der Browser hat die Schräge gefälscht
   ═══════════════════════════════════════════════════════════════════════════ */
.home-hero--start h1,
.page-head h1,
.mega-head h2,
.section-head h2{
  font-family:var(--head);
  font-weight:400;
  font-style:normal;
  letter-spacing:-.022em;
  line-height:1.04;
}
.home-hero--start h1{font-size:clamp(40px,7vw,78px)}
.page-head h1{font-size:clamp(34px,5.4vw,58px)}
.mega-head h2{font-size:clamp(26px,3.4vw,32px);line-height:1.1}

/* Kicker in der Weltfarbe statt im alten Akzent */
.kicker,.home-kicker{color:var(--txt);font-size:10.5px;letter-spacing:.16em}
.kicker::before,.home-kicker::before{background:var(--sig)}

/* Kartentitel und Artikelüberschriften: Grotesk, aber echt fett statt kursiv */
.post-card h3,.f-title,.feature h3{font-family:var(--ui);font-weight:700;font-style:normal}

/* ═══════════════════════════════════════════════════════════════════════════
   WORTMARKE
   Als Maske statt als Bild: dadurch nimmt das Logo die Textfarbe an und
   wechselt im Nachtmodus von selbst mit. Die SVG-Datei bleibt austauschbar –
   sie muss nur einfarbig sein, die Farbe darin ist egal.
   ═══════════════════════════════════════════════════════════════════════════ */
.logo{display:block;width:104px;height:32px;flex:none;
  background-color:var(--ink);
  -webkit-mask:url('/assets/images/logo-noey.svg') no-repeat center/contain;
          mask:url('/assets/images/logo-noey.svg') no-repeat center/contain;
  transition:background-color .35s ease,opacity var(--t)}
.logo:hover{opacity:.72}
.logo b{display:none}   /* alter Text-Punkt, falls die Vorlage noch einen hat */

/* Fuss: dort steht die Marke als Text neben dem Zusatz */
.foot .logo{width:84px;height:26px}

@media (max-width:620px){ .logo{width:92px;height:28px} }

/* Rueckfall, falls Masken nicht unterstuetzt werden (sehr alte Browser):
   dann erscheint statt der Maske ein schlichter Schriftzug. */
@supports not ((-webkit-mask: url('')) or (mask: url(''))){
  .logo{background:none;font-family:var(--head);font-size:29px;line-height:1;
    letter-spacing:-.02em;color:var(--ink);width:auto;height:auto}
  .logo::after{content:"noey."}
}

/* Sprungziele: Abstand zur klebenden Kopfzeile, sonst rutscht die
   angesprungene Ueberschrift darunter und wirkt "kaputt". */
html{scroll-behavior:smooth}
.article-body h2,.article-body h3,[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* Autorenbox ohne Kurzbiografie – Name, Zustaendigkeit, Weg zu den Beitraegen */
.author-box{background:var(--alt);border:0;border-radius:var(--r);padding:22px 24px}
.author-box-kicker{font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft)}
.author-box-name{font-family:var(--head);font-weight:400;font-size:26px;
  letter-spacing:-.02em;color:var(--ink);display:inline-block;margin:4px 0 2px}
.author-box-name:hover{text-decoration:none;color:var(--txt)}
.author-box-role{font-size:14px;font-weight:600;color:var(--txt);margin-bottom:10px}
.author-box-more{font-size:14px;font-weight:600;color:var(--txt)}

/* ═══════════════════════════════════════════════════════════════════════════
   KORREKTUREN NACHTMODUS
   Ursache der meisten Fehler: der Ersatzton fuer "keine Welt gesetzt" gab es
   nur in der Tagfassung. --txt war dort dunkelgrau – auf Weiss richtig, auf
   Dunkel unsichtbar. Deshalb waren Autorenzeile, Teilen-Knoepfe und der
   aktive Verzeichniseintrag unlesbar.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-mode="night"]{--sig:#ED4861;--txt:#F5A3B0;--fld:#3D262B}

/* Vorteile / Nachteile: die hellen Flaechen kommen aus der alten Fassung
   und muessen nachts eigene Werte bekommen. */
:root[data-mode="night"] .pc-col{background:var(--alt);border-color:var(--line)}
:root[data-mode="night"] .pc-pro{background:#1D2A1E;border-color:#2E4630}
:root[data-mode="night"] .pc-con{background:#2A2119;border-color:#46372A}
:root[data-mode="night"] .pc-pro .pc-h{color:#A9D9A6}
:root[data-mode="night"] .pc-con .pc-h{color:#E8B478}
:root[data-mode="night"] .pc-col li,
:root[data-mode="night"] .pc-col ul{color:var(--ink)}

/* Teilen-Leiste: Beschriftungen sassen auf dem alten dunklen Text */
.share-pill{color:var(--ink);border-color:var(--line);background:var(--panel)}
.share-pill:hover{background:var(--alt);text-decoration:none}
:root[data-mode="night"] .share-pill{background:var(--alt);color:var(--ink)}
.share > strong,.share-label{color:var(--ink)}

/* Autorenbox: Zustaendigkeiten und Weiterfuehrung nachts hell genug */
:root[data-mode="night"] .author-box{background:var(--alt)}
:root[data-mode="night"] .author-box-role,
:root[data-mode="night"] .author-box-more{color:var(--ink)}
:root[data-mode="night"] .author-box-more:hover{color:#F5A3B0}

/* Inhaltsverzeichnis: aktiver Eintrag nachts hell auf dunkel */
:root[data-mode="night"] .article-toc a{color:#C7CFD1}
:root[data-mode="night"] .article-toc a:hover{background:#2A302F;color:#fff}
:root[data-mode="night"] .article-toc a.on{background:#2E3534;color:#fff}

/* Hinweis- und Werbehinweis-Kaesten */
:root[data-mode="night"] .blog-note,
:root[data-mode="night"] .blog-ad-note,
:root[data-mode="night"] .ad-disclosure{background:var(--alt);color:var(--mut);border-color:var(--line)}

/* ═══════════════════════════════════════════════════════════════════════════
   KORREKTUR PRODUKT-BOX
   Fehler: .p-reco war in der alten Fassung absolut positioniert, also NICHT
   im Raster. Durch position:static wurde es ein drittes Rasterelement und
   hat Bild- und Textspalte verschoben. Ausserdem streckte sich die Bild-
   spalte auf die volle Boxhoehe (align-items:stretch) – daher die tote
   graue Flaeche unter dem Bild.
   Loesung: benannte Rasterbereiche, Bild oben verankert, Text linksbuendig.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ruhig ── */
.product-box.lay-ruhig{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  grid-template-areas:"reco reco" "media body";
  column-gap:24px;row-gap:14px;
  align-items:start;text-align:left}
.product-box.lay-ruhig .p-reco{grid-area:reco;align-self:start}
.product-box.lay-ruhig .p-media{grid-area:media;align-self:start;
  width:132px;height:132px;border-radius:var(--r-s);overflow:hidden;background:var(--alt)}
.product-box.lay-ruhig .p-media img{width:100%;height:100%;object-fit:cover;display:block}
.product-box.lay-ruhig .p-body{grid-area:body;text-align:left}

/* ── Auffällig ── */
.product-box.lay-auffaellig{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  grid-template-areas:"band band" "media body";
  column-gap:26px;row-gap:0;
  align-items:start;text-align:left}
.product-box.lay-auffaellig .p-reco{grid-area:band;align-self:start;margin:0}
.product-box.lay-auffaellig .p-media{grid-area:media;align-self:start;
  width:180px;height:180px;margin:26px 0 26px 28px;padding:0;
  border-radius:var(--r-s);overflow:hidden;background:var(--panel)}
.product-box.lay-auffaellig .p-media img{width:100%;height:100%;object-fit:cover;display:block}
.product-box.lay-auffaellig .p-body{grid-area:body;text-align:left;padding:26px 28px 28px 0}

/* Beide: Fliesstext und Listen linksbuendig, Sterne und Knopf ebenso */
.product-box.lay-ruhig h3,.product-box.lay-auffaellig h3,
.product-box.lay-ruhig .p-body > p,.product-box.lay-auffaellig .p-body > p,
.product-box.lay-ruhig .stars,.product-box.lay-auffaellig .stars,
.product-box.lay-ruhig .offers,.product-box.lay-auffaellig .offers,
.product-box.lay-ruhig .price-note,.product-box.lay-auffaellig .price-note{
  text-align:left;justify-content:flex-start;margin-left:0;margin-right:0}
.product-box .offers{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.product-box .btn-buy{width:auto;display:inline-flex;align-items:center;justify-content:center}
.product-box .p-proscons{margin-top:16px}

/* Schmale Schirme: alles untereinander, Bild in voller Breite */
@media (max-width:640px){
  .product-box.lay-ruhig,.product-box.lay-auffaellig{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"reco" "media" "body"}
  .product-box.lay-ruhig .p-media,.product-box.lay-auffaellig .p-media{
    width:100%;height:auto;aspect-ratio:16/10;margin:0}
  .product-box.lay-auffaellig .p-media{margin:22px 22px 0}
  .product-box.lay-auffaellig .p-body{padding:18px 22px 24px}
  .product-box .btn-buy{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KORREKTUR: Schrift AUF der Signalfarbe
   Weiss auf Rosé und Petrol geht – auf Gelb und Oliv nicht (rund 1,3 : 1).
   Deshalb pro Welt ein eigener Ton fuer "Schrift auf Signalfarbe".
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--onsig:#FFFFFF}
[data-w="koerper-geist"]     {--onsig:#FFFFFF}
[data-w="geld-weiterkommen"] {--onsig:#FFFFFF}
[data-w="zuhause-naehe"]     {--onsig:#2A2205}   /* auf Gelb dunkel */
[data-w="unterwegs-technik"] {--onsig:#22240B}   /* auf Oliv dunkel */
:root[data-mode="night"] [data-w="geld-weiterkommen"]{--onsig:#0E1F22}

.product-box.lay-auffaellig .p-reco{color:var(--onsig)}
.product-box.lay-auffaellig .btn-buy{background:var(--sig);color:var(--onsig)}
.next a{color:var(--onsig)}
.sidecard .ini,.mworld .sq{color:var(--onsig)}

/* ═══════════════════════════════════════════════════════════════════════════
   ZWISCHENÜBERSCHRIFTEN FETT
   Instrument Serif gibt es NUR in einem Schnitt (400). font-weight:700 wuerde
   der Browser faelschen – er zieht die Buchstaben kuenstlich breit, das sieht
   matschig aus. Deshalb bekommen Zwischentitel im Artikel die Grotesk in
   echtem Fett. Seitentitel bleiben in der Serif.
   Fuer SEO ist beides ohne Bedeutung: Google bewertet die Gliederung
   (h2/h3), nicht die Strichstaerke.
   ═══════════════════════════════════════════════════════════════════════════ */
.article-body h2,.article-body h3,.article-body h4{
  font-family:var(--ui);font-weight:700;letter-spacing:-.022em;line-height:1.2}
.article-body h2{font-size:clamp(24px,3vw,30px);margin-top:1.9em}
.article-body h3{font-size:clamp(19px,2.2vw,22px);margin-top:1.6em}
.blog-faq dt{font-family:var(--ui);font-weight:700}

/* ═══════════════════════════════════════════════════════════════════════════
   LESEBREITE AUF DEM DESKTOP
   Die Spalte lag bei rund 55 Zeichen – sicher, aber auf breiten Schirmen
   wirkt sie schmal. Jetzt rund 72 Zeichen: immer noch im empfohlenen
   Bereich (65–75), aber deutlich satter. Daneben etwas mehr Platz fuer die
   Seitenspalte und ein kleinerer Abstand dazwischen.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--maxw:1300px}
.artgrid{grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,3.4vw,52px)}
.artmain{max-width:none}
.article-body,.article .article-body > *{max-width:none}
.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > blockquote{max-width:72ch}
.article-body > h2,.article-body > h3,.article-body > h4{max-width:64ch}
.article .article-meta,.article .breadcrumb{max-width:none}

@media (max-width:1100px){
  .artgrid{grid-template-columns:1fr}
  .article-body > p,.article-body > ul,.article-body > ol{max-width:none}
}

/* Die eigentliche Ursache: .article war auf 880 px gedeckelt – das galt fuer
   Text UND Seitenspalte zusammen. Die Begrenzung gehoert jetzt an den
   Fliesstext (72 Zeichen), nicht an die ganze Spalte. */
.article{max-width:none}

/* ═══════════════════════════════════════════════════════════════════════════
   KORREKTUR BILD IN DER PRODUKT-BOX
   Vorher: festes Quadrat, oben verankert -> das Bild "schwebt", daneben und
   darunter bleibt Luft. Jetzt waechst die Bildspalte auf die volle Hoehe der
   Box mit, und das Foto fuellt sie randlos aus (mittig beschnitten).
   Umgesetzt ueber absolute Positionierung: nur so kennt das Bild die Hoehe,
   die ihm das Raster zuweist.
   ═══════════════════════════════════════════════════════════════════════════ */
.product-box.lay-ruhig,
.product-box.lay-auffaellig{align-items:stretch}

.product-box.lay-ruhig .p-media,
.product-box.lay-auffaellig .p-media{
  position:relative;align-self:stretch;height:auto;min-height:150px;
  border-radius:var(--r-s);overflow:hidden;background:var(--alt)}

.product-box.lay-ruhig .p-media img,
.product-box.lay-auffaellig .p-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

/* Das Werbe-Etikett sitzt wieder auf dem Bild, nicht darueber */
.product-box.lay-ruhig .p-media .ad-tag,
.product-box.lay-auffaellig .p-media .ad-tag{
  position:absolute;left:8px;top:8px;z-index:2;margin:0;
  background:rgba(20,24,26,.72);color:#fff;padding:4px 9px;border-radius:var(--r-xs);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* Auffällig: Bild bleibt am Rand buendig, Innenabstand kommt vom Textteil */
.product-box.lay-auffaellig .p-media{margin:26px 0 26px 28px}

@media (max-width:640px){
  .product-box.lay-ruhig .p-media,
  .product-box.lay-auffaellig .p-media{min-height:0;aspect-ratio:16/10}
  .product-box.lay-auffaellig .p-media{margin:22px 22px 0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KORREKTUR "AUFFÄLLIG": Bild klebte am Text
   Fehler: margin-left am Bild, obwohl es in einer festen Rasterspalte sitzt –
   dadurch schob es sich in den Spaltenabstand und unter die Überschrift.
   Richtig: Innenabstand an der ganzen Box, das Farbband zieht sich mit
   negativem Aussenabstand wieder über die volle Breite.
   ═══════════════════════════════════════════════════════════════════════════ */
.product-box.lay-auffaellig{
  padding:0 28px 28px;
  column-gap:28px;row-gap:0}
.product-box.lay-auffaellig .p-reco{
  margin:0 -28px 24px;          /* wieder randlos über die volle Breite */
  align-self:start}
.product-box.lay-auffaellig .p-media{margin:0}
.product-box.lay-auffaellig .p-body{padding:0}

@media (max-width:640px){
  .product-box.lay-auffaellig{padding:0 20px 22px;column-gap:0;row-gap:16px}
  .product-box.lay-auffaellig .p-reco{margin:0 -20px 18px}
  .product-box.lay-auffaellig .p-media{margin:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DAS REGISTER auf der Startseite
   ═══════════════════════════════════════════════════════════════════════════ */
.register{margin:clamp(28px,4vw,44px) 0 clamp(36px,5vw,56px)}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tabs button{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--panel);text-align:left;cursor:pointer;display:flex;flex-direction:column;
  transition:transform var(--t),border-color var(--t)}
.tabs button:hover{transform:translateY(-2px)}
.tabs .bd{height:5px;background:var(--sig);opacity:.4;transition:opacity var(--t)}
.tabs button:hover .bd{opacity:.75}
.tabs .in{padding:22px 24px;flex:1;display:flex;flex-direction:column;justify-content:center}
.tabs .tn{font-size:16px;font-weight:700;letter-spacing:-.015em;display:block;color:var(--ink)}
.tabs .tk{font-size:12px;color:var(--soft);margin-top:2px;display:block}
.tabs button[aria-selected="true"]{background:var(--fld);border-color:transparent}
.tabs button[aria-selected="true"] .bd{opacity:1}
.tabs button[aria-selected="true"] .tn{color:var(--txt)}
.tabs button[aria-selected="true"] .tk{color:var(--txt);opacity:.72}

.panel{margin-top:10px;border-radius:var(--r);padding:clamp(22px,3vw,34px);
  background:var(--fld);display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,4vw,46px)}
.panel[hidden]{display:none}
.panel h2{font-family:var(--head);font-weight:400;font-size:clamp(26px,3.4vw,36px);
  line-height:1.06;margin:0;color:var(--ink)}
.kats{display:flex;flex-direction:column;gap:2px;align-self:center}
.kats a{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:var(--r-s);
  transition:background var(--t),padding-left var(--t)}
.kats a:hover{background:color-mix(in srgb,var(--panel) 62%,transparent);
  padding-left:18px;text-decoration:none}
.kats .sq{width:34px;height:34px;border-radius:var(--r-s);background:var(--sig);flex:none}
.kats .kn{flex:1;font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.kats .kz{font-size:12.5px;font-weight:600;color:var(--txt);opacity:.7;
  font-variant-numeric:tabular-nums}

/* Themenkacheln am Seitenende entfallen – das Register oben fuehrt bereits dorthin */
.home-hero--start + .register + .mega-head{margin-top:0}

@media (max-width:900px){
  .tabs{grid-template-columns:repeat(2,1fr)}
  .panel{grid-template-columns:1fr}
}
@media (max-width:620px){
  .tabs{grid-template-columns:1fr;gap:8px}
  .tabs .in{padding:18px 20px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   STARTSEITE: Kopfbereich, Aufmacher, Empfehlungskarte
   Bewusst nur ueber CSS geloest – die Ausgabe bleibt unveraendert, damit am
   PHP nichts kaputtgehen kann. Erreicht wird trotzdem der Entwurf:
   Kopf zweispaltig, Aufmacher mit Text neben Bild statt Text auf Bild.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kopfbereich: Claim links, Anriss rechts ── */
.home-hero--start{display:grid;grid-template-columns:1.3fr .7fr;
  gap:clamp(22px,4vw,56px);align-items:end;
  padding:clamp(38px,6vw,72px) 0 clamp(30px,4vw,48px);background:none;text-align:left}
.home-hero--start h1{grid-column:1;grid-row:1;max-width:14ch;margin:0;
  font-size:clamp(38px,6.4vw,74px);line-height:1.02}
.home-hero--start > p{grid-column:2;grid-row:1;max-width:42ch;margin:0;
  font-size:16px;line-height:1.65;color:var(--mut);align-self:end}
.home-kicker{grid-column:1;grid-row:1;align-self:start;margin:0 0 14px}
.home-trust{grid-column:1/-1;grid-row:2;display:flex;gap:22px;flex-wrap:wrap;
  margin-top:20px;font-size:13.5px;color:var(--mut)}
.home-trust span{display:inline-flex;align-items:center;gap:9px}
.home-trust .tick{width:20px;height:20px;border-radius:50%;background:var(--fld);
  color:var(--txt);display:inline-flex;align-items:center;justify-content:center;flex:none}

/* ── Aufmacher: Text neben Bild statt Text auf Bild ── */
.feature{display:grid;grid-template-columns:1fr 1.05fr;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  transition:transform var(--t);min-height:clamp(300px,34vw,420px)}
.feature:hover{transform:translateY(-3px);text-decoration:none}
.feature .f-media{display:contents}
.feature .f-img{grid-column:2;grid-row:1/span 4;width:100%;height:100%;
  object-fit:cover;min-height:220px}
.feature .f-shade{display:none}
.feature .f-top{grid-column:1;grid-row:1;align-self:start;display:flex;gap:8px;
  flex-wrap:wrap;padding:clamp(22px,3vw,34px) clamp(22px,3vw,34px) 0}
.feature .f-pill{background:var(--fld);color:var(--txt);border-radius:var(--r-xs);
  padding:5px 11px;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;backdrop-filter:none;border:0}
.feature .f-title{grid-column:1;grid-row:2;padding:16px clamp(22px,3vw,34px) 0;
  background:none}
.feature .f-title span{font-family:var(--head);font-weight:400;
  font-size:clamp(26px,3.4vw,42px);line-height:1.06;letter-spacing:-.024em;
  color:var(--ink);background:none;padding:0;box-shadow:none;text-wrap:balance}
.feature .f-foot{grid-column:1;grid-row:3;align-self:end;
  padding:14px clamp(22px,3vw,34px) clamp(22px,3vw,34px);
  font-size:12.5px;color:var(--soft);background:none}
.feature .f-arrow{grid-column:1;grid-row:4;justify-self:start;
  margin:0 clamp(22px,3vw,34px) clamp(22px,3vw,34px);
  width:44px;height:44px;border-radius:50%;background:var(--sig);color:var(--onsig);
  display:flex;align-items:center;justify-content:center;font-size:18px}

/* ── Empfehlungskarte in der Seitenspalte ── */
.reco-card{background:var(--fld);border:0;border-radius:var(--r);padding:22px}
.reco-card .reco-badge{display:inline-block;background:var(--sig);color:var(--onsig);
  border:0;border-radius:var(--r-xs);padding:5px 11px;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.reco-card .reco-img{width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--r-s);margin-bottom:14px;background:var(--panel)}
.reco-card h3{font-family:var(--head);font-weight:400;font-size:24px;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.reco-card p{font-size:14px;line-height:1.6;color:var(--txt);opacity:.86;margin:8px 0 14px}
.reco-card .btn-buy{background:var(--sig);color:var(--onsig);border:0;
  border-radius:var(--r-s);padding:13px 20px;font-weight:700;width:100%;
  display:flex;align-items:center;justify-content:center}

.home-split{display:grid;grid-template-columns:1.55fr .95fr;gap:18px;align-items:start}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}

@media (max-width:1000px){
  .home-hero--start{grid-template-columns:1fr;align-items:start}
  .home-hero--start h1,.home-hero--start > p,.home-kicker{grid-column:1}
  .home-hero--start > p{grid-row:auto}
  .home-trust{grid-row:auto}
  .home-split{grid-template-columns:1fr}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}
  .feature .f-img{grid-column:1;grid-row:1;aspect-ratio:16/9;min-height:0}
  .feature .f-top{grid-row:2}.feature .f-title{grid-row:3}
  .feature .f-foot{grid-row:4}.feature .f-arrow{grid-row:5}
}
@media (max-width:620px){ .post-grid{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════════════════════
   KORREKTUR: Überschrift in der Produkt-Box klebte oben
   Der Textteil begann buendig mit der Bildoberkante, und die Serif setzt die
   Versalhoehe hoch an – dadurch wirkte der Titel angedrueckt und der obere
   Bogen des "T" schien angeschnitten. Etwas Luft oben und eine Zeilenhoehe,
   die die Oberlaengen nicht kappt.
   ═══════════════════════════════════════════════════════════════════════════ */
.product-box.lay-ruhig .p-body,
.product-box.lay-auffaellig .p-body{padding-top:10px}
.product-box.lay-ruhig h3,
.product-box.lay-auffaellig h3{
  margin-top:0;line-height:1.22;padding-top:2px;overflow:visible}
/* Die Box darf oben nicht beschneiden, sonst kappt sie die Oberlaenge */
.product-box.lay-ruhig{overflow:visible}
.product-box.lay-auffaellig .p-body{padding-bottom:0}

@media (max-width:640px){
  .product-box.lay-ruhig .p-body,
  .product-box.lay-auffaellig .p-body{padding-top:4px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   RÜCKNAHME: Aufmacher wieder in seiner urspruenglichen Anordnung
   Der Umbau ueber display:contents war zu trickreich – faellt ein Element
   aus, zerfaellt die ganze Anordnung. Jetzt bleibt die gewachsene Struktur
   (Bild mit Text darauf) und wird nur sauber gestaltet.
   ═══════════════════════════════════════════════════════════════════════════ */
.feature{display:block;position:relative;overflow:hidden;border:0;
  border-radius:var(--r);background:var(--alt);min-height:0;
  aspect-ratio:16/9;transition:transform var(--t)}
.feature:hover{transform:translateY(-3px)}
.feature .f-media{display:block;position:absolute;inset:0}
.feature .f-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Verlauf von unten – macht die Schrift auf jedem Foto lesbar */
.feature .f-shade{display:block;position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,13,0) 34%,rgba(10,12,13,.82) 100%)}
.feature .f-top{position:absolute;top:16px;left:16px;right:16px;z-index:2;
  display:flex;gap:8px;flex-wrap:wrap;padding:0}
.feature .f-pill{background:rgba(255,255,255,.92);color:#14181A;border:0;
  border-radius:var(--r-xs);padding:5px 11px;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.feature .f-title{position:absolute;left:0;right:0;bottom:56px;z-index:2;
  padding:0 clamp(18px,3vw,30px);background:none;display:block}
.feature .f-title span{font-family:var(--head);font-weight:400;
  font-size:clamp(24px,3.2vw,40px);line-height:1.08;letter-spacing:-.024em;
  color:#fff;background:none;padding:0;box-shadow:none;text-wrap:balance;
  text-shadow:0 1px 14px rgba(0,0,0,.45)}
.feature .f-foot{position:absolute;left:0;right:0;bottom:20px;z-index:2;
  padding:0 clamp(18px,3vw,30px);font-size:12.5px;color:rgba(255,255,255,.86);
  background:none}
.feature .f-arrow{position:absolute;right:16px;bottom:16px;z-index:2;margin:0;
  width:42px;height:42px;border-radius:50%;background:#fff;color:#14181A;
  display:flex;align-items:center;justify-content:center;font-size:17px}
@media (max-width:700px){ .feature{aspect-ratio:4/3} }

/* ═══ Produktbild breiter, Textspalte schmaler ═══ */
.product-box.lay-ruhig{grid-template-columns:200px minmax(0,1fr)}
.product-box.lay-auffaellig{grid-template-columns:250px minmax(0,1fr)}
@media (max-width:900px){
  .product-box.lay-ruhig{grid-template-columns:160px minmax(0,1fr)}
  .product-box.lay-auffaellig{grid-template-columns:190px minmax(0,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KORREKTUR: Kicker lag ueber der Ueberschrift
   Beide sassen in derselben Rasterzelle. Jetzt bekommt der Kopfbereich drei
   Zeilen: Kicker, Ueberschrift samt Anriss, Vertrauenszeile.
   ═══════════════════════════════════════════════════════════════════════════ */
.home-hero--start{grid-template-rows:auto auto auto;align-items:start}
.home-kicker{grid-column:1/-1;grid-row:1;align-self:start;margin:0 0 6px}
.home-hero--start h1{grid-column:1;grid-row:2;align-self:end}
.home-hero--start > p{grid-column:2;grid-row:2;align-self:end}
.home-trust{grid-column:1/-1;grid-row:3;margin-top:26px}

@media (max-width:1000px){
  .home-hero--start h1,.home-hero--start > p{grid-column:1;align-self:start}
  .home-hero--start > p{grid-row:3}
  .home-trust{grid-row:4;margin-top:20px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KORREKTUR AUFMACHER: Groesse begrenzen
   Bei voller Breite ergab 16:9 rund 700 px Hoehe – der Aufmacher fuellte den
   ganzen Bildschirm. Ausserdem sprang er, weil er mal allein ueber die volle
   Breite steht und mal in der schmalen Spalte neben der Empfehlung.
   Jetzt feste Hoehe statt Seitenverhaeltnis: in beiden Faellen gleich hoch.
   ═══════════════════════════════════════════════════════════════════════════ */
.feature{aspect-ratio:auto;height:clamp(300px,38vh,420px);min-height:0}
.hs-main .feature{height:clamp(300px,38vh,420px)}

/* Titel und Fusszeile sicher unten halten, mit kraeftigerem Verlauf */
.feature .f-shade{background:linear-gradient(180deg,
  rgba(10,12,13,0) 30%,rgba(10,12,13,.55) 62%,rgba(10,12,13,.88) 100%)}
.feature .f-title{bottom:52px;top:auto}
.feature .f-title span{font-size:clamp(22px,2.6vw,32px);line-height:1.12}
.feature .f-foot{bottom:18px;top:auto}

@media (max-width:700px){
  .feature{height:clamp(240px,34vh,320px)}
  .feature .f-title{bottom:46px}
  .feature .f-title span{font-size:clamp(20px,5vw,26px)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUFMACHER – jetzt wie im Entwurf: Text links, Bild rechts
   Die Ausgabe wurde dafuer neu gebaut (zwei getrennte Spalten statt Text auf
   Bild). Damit haengt die Lesbarkeit nicht mehr vom Motiv ab, und ein
   fehlendes Bild laesst nur die rechte Spalte leer statt alles zu verschieben.
   ═══════════════════════════════════════════════════════════════════════════ */
.feature{display:grid;grid-template-columns:1fr 1.04fr;position:relative;
  height:auto;aspect-ratio:auto;min-height:clamp(280px,32vw,380px);
  overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);transition:transform var(--t)}
.feature:hover{transform:translateY(-3px)}
.feature .f-text{display:flex;flex-direction:column;gap:12px;
  padding:clamp(22px,3vw,34px);justify-content:center}
.feature .f-top{position:static;display:flex;gap:8px;flex-wrap:wrap;padding:0}
.feature .f-pill{background:var(--fld);color:var(--txt);border:0;
  border-radius:var(--r-xs);padding:5px 11px;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.feature .f-title{position:static;padding:0;background:none;
  font-family:var(--head);font-weight:400;color:var(--ink);
  font-size:clamp(24px,3vw,38px);line-height:1.08;letter-spacing:-.024em;
  margin:4px 0 0;text-shadow:none;text-wrap:balance}
.feature .f-dek{font-size:14.5px;line-height:1.6;color:var(--mut);max-width:42ch;margin:0}
.feature .f-foot{position:static;padding:0;background:none;margin-top:6px;
  font-size:12.5px;color:var(--soft)}
.feature .f-media{position:relative;background:var(--alt);min-height:200px}
.feature .f-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature .f-shade,.feature .f-arrow{display:none}

@media (max-width:900px){
  .feature{grid-template-columns:1fr;min-height:0}
  .feature .f-media{order:-1;aspect-ratio:16/9;min-height:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANGLEICH AN DEN ENTWURF – drei Abweichungen
   1. Aufmacher lief in einer schmalen Spalte neben der Empfehlungskarte.
      Im Entwurf hat er die volle Breite; die Empfehlung steht darunter.
   2. Kopfbereich war zu hoch und die Ueberschrift zu gross.
   3. Sektionsueberschrift ohne Trennlinie.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · Aufmacher ueber die volle Breite, Empfehlung darunter */
.home-split{display:block}
.home-split .hs-main{margin-bottom:18px}
.home-split .hs-side{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.feature{grid-template-columns:1fr 1.15fr;min-height:clamp(300px,30vw,400px)}
.feature .f-title{font-size:clamp(26px,2.9vw,40px)}
.feature .f-text{gap:14px;padding:clamp(26px,3.2vw,40px)}

/* 2 · Kopfbereich: kompakter, Ueberschrift ruhiger */
.home-hero--start{padding:clamp(32px,4.5vw,56px) 0 clamp(24px,3vw,36px);
  row-gap:0;align-items:end}
.home-hero--start h1{font-size:clamp(36px,5.4vw,66px);line-height:1.04;max-width:15ch;margin:0}
.home-hero--start > p{align-self:end;padding-bottom:4px}
.home-trust{margin-top:22px;gap:24px}

/* 3 · Sektionsueberschrift mit Trennlinie wie im Entwurf */
.mega-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:clamp(44px,6vw,60px) 0 22px;padding-bottom:14px;
  border-bottom:1px solid var(--line);position:relative}
.mega-head::after{content:"";position:absolute;left:0;bottom:-1px;width:76px;height:1px;
  background:var(--sig)}
.mega-head h2{font-size:clamp(26px,3.4vw,32px);line-height:1.1}
.mega-head a{font-size:13.5px;font-weight:600;color:var(--mut);white-space:nowrap}
.mega-head a:hover{color:var(--ink);text-decoration:none}

@media (max-width:900px){
  .home-split .hs-side{grid-template-columns:1fr}
  .home-hero--start h1{max-width:none}
}

/* Kategorie ohne Beitrag: sichtbar, aber nicht anklickbar */
.kats .leer{opacity:.5;cursor:default}
.kats .leer:hover{background:none;padding-left:14px}

/* ═══════════════════════════════════════════════════════════════════════════
   VERTRAUENSZEILE ruhiger – die grauen Kreise stammen aus der alten Fassung
   und passen nicht zur neuen Formensprache. Jetzt nur ein feiner Haken in
   der Weltfarbe, kleiner gesetzt und zurueckhaltend.
   ═══════════════════════════════════════════════════════════════════════════ */
.home-trust{font-size:13px;gap:26px;color:var(--soft)}
.home-trust span{gap:7px}
.home-trust .tick{width:auto;height:auto;background:none;border-radius:0;
  color:var(--sig);flex:none}
.home-trust .tick svg{width:13px;height:13px;stroke-width:3.4}

/* Hinweis: Zwischen dieser Stelle und dem Block «KACHEL» am Dateiende
   lagen zwei aeltere Anordnungen der Produktbox («Bild endet bei der
   Vorteile-Box» und «Spiegel»). Beide waren reine Anordnungsregeln und
   wurden vom Kachel-Block vollstaendig ueberschrieben – entfernt. */

/* ═══════════════════════════════════════════════════════════════════════════
   DUNKELMODUS: WELTFARBEN AUCH AM <html> SELBST
   Weiter oben stehen die Nachtfarben als Nachfahren-Regel
   (:root[data-mode="night"] [data-w="…"]). Die greift nur, wenn data-w an
   einem Element UNTER dem <html> haengt – etwa an .article oder .post-card.
   Auf Themen- und Artikelseiten sitzt data-w aber am <html> selbst, also am
   selben Element wie data-mode. Dort blieben die hellen Werte stehen:
   #B32B43 auf dunklem Grund ergibt 2,4:1 und ist praktisch unlesbar.
   Deshalb hier dieselben Werte noch einmal ohne Nachfahren-Kombinator.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-mode="night"][data-w="koerper-geist"]     {--sig:#ED4861;--txt:#F5A3B0;--fld:#3D262B}
:root[data-mode="night"][data-w="geld-weiterkommen"] {--sig:#4E97A3;--txt:#93C9D2;--fld:#1B3339}
:root[data-mode="night"][data-w="zuhause-naehe"]     {--sig:#FFE457;--txt:#E4CE6B;--fld:#37331F}
:root[data-mode="night"][data-w="unterwegs-technik"] {--sig:#BCBF56;--txt:#D3D683;--fld:#313320}
:root[data-mode="night"][data-w="geld-weiterkommen"] {--onsig:#0E1F22}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUKTBOX – ENDGUELTIGE ANORDNUNG «KACHEL»
   Bild als feste Kachel oben links, daneben Titel, Sterne und Kurztext.
   Vorteile und Nachteile darunter ZWEISPALTIG ueber die volle Breite –
   das ist der Hebel, der die Box flach haelt. Fusszeile: Preishinweis
   links, Kaufknopf rechts.

   Raster (Ausgabe: p-reco · p-media · p-body · p-proscons · offers · price-note):
        "reco  reco"
        "media body"
        "pc    pc"
        "foot  foot"
   offers und price-note liegen beide im Bereich «foot», der eine nach links,
   der andere nach rechts ausgerichtet. Sie ueberlagern sich nicht, weil
   unterhalb von 620px ohnehin alles untereinander steht.

   Dieser Block steht am Dateiende und ersetzt die vorherige Anordnung
   «Spiegel». Jede Eigenschaft wird ausdruecklich gesetzt, weil weiter oben
   noch Regeln aus frueheren Fassungen liegen.
   ═══════════════════════════════════════════════════════════════════════════ */
.product-box.lay-ruhig,
.product-box.lay-auffaellig{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  grid-template-areas:"reco reco" "media body" "pc pc" "foot foot";
  align-content:start;
  column-gap:20px;row-gap:14px;
  padding:20px;
  margin:2.2em 0;
  min-height:0;
  border-radius:var(--r);
  overflow:hidden;
  text-align:left}
.product-box.lay-ruhig{background:var(--panel);border:1px solid var(--line)}
.product-box.lay-auffaellig{background:var(--fld);border:0}

/* ── Bild: feste Kachel, waechst NICHT mit der Texthoehe mit ───────────── */
.product-box.lay-ruhig .p-media,
.product-box.lay-auffaellig .p-media{
  grid-area:media;
  position:relative;display:block;float:none;
  align-self:start;
  width:100%;max-width:none;
  height:auto;min-height:0;
  aspect-ratio:4/3;
  margin:0;padding:0;
  border-radius:var(--r-s);
  overflow:hidden;background:var(--alt)}
.product-box.lay-ruhig .p-media img,
.product-box.lay-auffaellig .p-media img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;display:block;margin:0;padding:0;border-radius:0}
.product-box.lay-ruhig .p-media .ad-tag,
.product-box.lay-auffaellig .p-media .ad-tag{position:absolute;top:8px;left:8px;z-index:2}

/* ── Textblock neben der Kachel ────────────────────────────────────────── */
.product-box.lay-ruhig .p-body,
.product-box.lay-auffaellig .p-body{
  grid-area:body;padding:0;margin:0;text-align:left}

/* ── Vorteile und Nachteile: volle Breite, zwei Spalten ────────────────── */
.product-box .p-proscons{
  grid-area:pc;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0}
.product-box .p-proscons.one{grid-template-columns:1fr}

/* ── Fusszeile ─────────────────────────────────────────────────────────── */
.product-box.lay-ruhig .offers,
.product-box.lay-auffaellig .offers{
  grid-area:foot;justify-self:end;align-self:center;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;
  margin:0;padding:0}
.product-box.lay-ruhig .price-note,
.product-box.lay-auffaellig .price-note{
  grid-area:foot;justify-self:start;align-self:center;
  margin:0;padding:0;max-width:55%;text-align:left}
.product-box.lay-ruhig .offers .btn-buy,
.product-box.lay-auffaellig .offers .btn-buy{
  flex:0 0 auto;width:max-content;max-width:100%;display:inline-flex;min-height:46px}

/* ── Auszeichnung ──────────────────────────────────────────────────────── */
.product-box.lay-ruhig .p-reco{
  grid-area:reco;position:static;display:inline-flex;align-self:start;justify-self:start;
  padding:0;margin:0;background:none;width:auto}
.product-box.lay-auffaellig .p-reco{
  grid-area:reco;position:static;display:block;align-self:start;
  background:var(--sig);color:var(--onsig);
  padding:10px 20px;margin:-20px -20px 0;width:auto;border-radius:0}

/* ── Tablet: schmalere Kachel ──────────────────────────────────────────── */
@media (max-width:860px){
  .product-box.lay-ruhig,
  .product-box.lay-auffaellig{grid-template-columns:180px minmax(0,1fr)}
}

/* ── Handy: alles untereinander, Bild in voller Breite ─────────────────── */
@media (max-width:620px){
  .product-box.lay-ruhig,
  .product-box.lay-auffaellig{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"reco" "media" "body" "pc" "foot" "note";
    padding:16px;row-gap:14px}
  .product-box.lay-ruhig .p-media,
  .product-box.lay-auffaellig .p-media{aspect-ratio:16/10}
  .product-box .p-proscons{grid-template-columns:1fr}
  .product-box.lay-ruhig .offers,
  .product-box.lay-auffaellig .offers{justify-self:stretch;justify-content:stretch}
  .product-box.lay-ruhig .offers .btn-buy,
  .product-box.lay-auffaellig .offers .btn-buy{flex:1 1 100%;width:100%;text-align:center}
  .product-box.lay-ruhig .price-note,
  .product-box.lay-auffaellig .price-note{
    grid-area:note;justify-self:start;max-width:100%}
  .product-box.lay-auffaellig .p-reco{padding:10px 16px;margin:-16px -16px 0}
}
/* Ohne Empfehlungs-Auszeichnung faellt die erste Rasterzeile ganz weg –
   sonst bliebe oben ein leerer Zeilenabstand stehen. */
.product-box.lay-ruhig:not(.has-reco),
.product-box.lay-auffaellig:not(.has-reco){
  grid-template-areas:"media body" "pc pc" "foot foot"}
@media (max-width:620px){
  .product-box.lay-ruhig:not(.has-reco),
  .product-box.lay-auffaellig:not(.has-reco){
    grid-template-areas:"media" "body" "pc" "foot" "note"}
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUFMACHER: TEXT SENKRECHT MITTIG, WAAGERECHT LINKSBUENDIG
   Der Textblock soll oben und unten gleich viel Luft haben – wie im
   abgestimmten Entwurf. Waagerecht bleibt alles linksbuendig.

   Aus der ersten Fassung stand an der Metazeile noch align-self:start und
   an der Lesezeit align-self:end. In einer senkrechten Flexspalte wirkt
   align-self WAAGERECHT – die Lesezeit wurde dadurch nach rechts gezogen.
   Deshalb hier fuer alle vier Bausteine ausdruecklich linksbuendig.
   ═══════════════════════════════════════════════════════════════════════════ */
.feature .f-text{
  display:flex;flex-direction:column;
  justify-content:center;      /* senkrecht mittig – gleicher Rand oben/unten */
  align-items:flex-start;      /* waagerecht linksbuendig */
  text-align:left}
.feature .f-top,
.feature .f-title,
.feature .f-dek,
.feature .f-foot{align-self:flex-start;text-align:left}
.feature .f-top{justify-content:flex-start}
.feature .f-title{max-width:20ch;margin-left:0;margin-right:0}
.feature .f-dek{max-width:46ch;margin-left:0;margin-right:0}

/* Ebenfalls aus der ersten Fassung: display:contents am Bildrahmen. Dadurch
   war er kein Rasterfeld mehr und das Bild fuellte die rechte Spalte nicht
   auf voller Hoehe – unten blieb ein weisser Streifen. */
.feature .f-media{display:block;align-self:stretch;height:100%;grid-column:2;grid-row:auto}
.feature .f-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .feature .f-media{grid-column:1;height:auto}
  .feature .f-title,.feature .f-dek{max-width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KAUFKNOPF UEBER DIE VOLLE BREITE
   Er sitzt jetzt in einer eigenen Rasterzeile und ist genau so breit wie
   die Vorteile- und Nachteile-Felder zusammen. Der Preishinweis rutscht
   darunter.
   ═══════════════════════════════════════════════════════════════════════════ */
.product-box.lay-ruhig,
.product-box.lay-auffaellig{
  grid-template-areas:"reco reco" "media body" "pc pc" "foot foot" "note note"}
.product-box.lay-ruhig:not(.has-reco),
.product-box.lay-auffaellig:not(.has-reco){
  grid-template-areas:"media body" "pc pc" "foot foot" "note note"}
.product-box.lay-ruhig .offers,
.product-box.lay-auffaellig .offers{
  grid-area:foot;justify-self:stretch;justify-content:stretch}
.product-box.lay-ruhig .offers .btn-buy,
.product-box.lay-auffaellig .offers .btn-buy{
  flex:1 1 100%;width:100%;max-width:none;text-align:center}
.product-box.lay-ruhig .price-note,
.product-box.lay-auffaellig .price-note{
  grid-area:note;justify-self:start;align-self:start;max-width:100%;margin:-4px 0 0}

/* Breitere Textspalte im Aufmacher (stand vorher weiter oben und ist beim
   Aufraeumen mit weggefallen – hier wiederhergestellt). */
.feature{grid-template-columns:1.45fr 1fr}
.feature .f-title{font-size:clamp(27px,3.1vw,42px)}
@media (max-width:900px){ .feature{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════════════════════
   «KURZ GESAGT» – die Antwort vor dem Text
   Kurzbefehl [kurz]…[/kurz] am Anfang des Artikels.
   Aufbau wie im abgestimmten Entwurf: senkrechter Balken in der Weltfarbe,
   daneben das Etikett und ein etwas groesserer, halbfetter Absatz.
   Der Absatz ist bewusst groesser als der Fliesstext – er ist die Antwort,
   nicht die Einleitung.
   ═══════════════════════════════════════════════════════════════════════════ */
.capsule{display:grid;grid-template-columns:auto minmax(0,1fr);
  background:var(--fld);border-radius:var(--r);overflow:hidden;
  margin:0 0 2em}
.capsule .rail{background:var(--sig);width:10px}
.capsule .tx{padding:22px 26px 24px;min-width:0}
.capsule .lbl{display:block;color:var(--txt);
  font-family:var(--ui);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.capsule p{font-family:var(--ui);font-size:17.5px;line-height:1.6;
  font-weight:500;color:var(--ink);margin:9px 0 0}
.capsule p:first-of-type{margin-top:9px}
.capsule ul,.capsule ol{margin:9px 0 0;padding-left:1.2em;font-size:16.5px}
.capsule a{color:var(--txt);text-underline-offset:3px}
/* Der Kasten steht ganz oben – der erste Absatz danach braucht keinen
   zusaetzlichen Abstand nach oben. */
.article-body .capsule + p{margin-top:0}
@media (max-width:620px){
  .capsule .rail{width:6px}
  .capsule .tx{padding:18px 18px 20px}
  .capsule p{font-size:16.5px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DUNKELMODUS: KAUFKNOPF HELLER
   Auf dunklem Grund wirkt der Weltton der ruhigen Fassung gedaempft.
   Schrift und Rahmen werden deshalb im Nachtmodus aufgehellt – ueber
   color-mix, damit es fuer alle vier Welten gilt und nicht nur fuer Rot.
   Die Grundwerte darueber stehen als Rueckfall fuer aeltere Browser.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-mode="night"] .product-box.lay-ruhig .btn-buy{
  color:var(--txt);border-color:var(--sig)}
@supports (color: color-mix(in srgb, red 50%, white)){
  :root[data-mode="night"] .product-box.lay-ruhig .btn-buy{
    color:color-mix(in srgb, var(--txt) 62%, #FFFFFF);
    border-color:color-mix(in srgb, var(--sig) 72%, #FFFFFF)}
  :root[data-mode="night"] .product-box.lay-ruhig .btn-buy:hover{
    background:color-mix(in srgb, var(--sig) 18%, transparent)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   INHALTSVERZEICHNIS: AKTIVER EINTRAG LEICHT FARBIG
   Getoenter Grund in der Weltfarbe, Schrift im dunkleren Weltton, dazu ein
   schmaler Balken links. Der Balken ist bewusst dabei: Farbe allein ist
   fuer Farbenblinde kein Unterschied.

   Zwei Fallen, die hier ausdruecklich behandelt werden:
   · Weiter oben steht .article-toc a:hover{background:var(--panel)} und in
     einer Medienabfrage .article-toc a{background:var(--panel)}. Beide
     wuerden den getoenten Grund wieder wegnehmen. Deshalb wird der aktive
     Zustand auch fuer :hover und :focus gesetzt.
   · background-color statt der Kurzform background – die Kurzform setzt
     nebenbei Bild, Position und Wiederholung zurueck und kollidiert
     dadurch leichter mit aelteren Regeln.
   ═══════════════════════════════════════════════════════════════════════════ */
.article-toc a{position:relative;border-radius:var(--r-s);
  transition:background-color .18s ease,color .18s ease}
.article-toc a.on,
.article-toc a.on:hover,
.article-toc a.on:focus-visible{
  background-color:var(--fld);
  color:var(--txt);
  font-weight:700;
  padding-left:15px}
.article-toc a.on::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:3px;background-color:var(--sig)}

:root[data-mode="night"] .article-toc a.on,
:root[data-mode="night"] .article-toc a.on:hover,
:root[data-mode="night"] .article-toc a.on:focus-visible{
  background-color:var(--fld);color:var(--txt)}
:root[data-mode="night"] .article-toc a.on::before{background-color:var(--sig)}

/* Waagerechte Fassung auf schmalen Schirmen (derselbe Haltepunkt wie die
   bestehende Regel weiter oben): dort ist links kein Platz fuer den Balken. */
@media (max-width:980px){
  .article-toc a.on,
  .article-toc a.on:hover{padding-left:11px}
  .article-toc a.on::before{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   WELTFARBEN – KENNUNGEN MIT «-und-»
   Das Backend erzeugt die Kennung aus dem Namen. slugify() in lib/helpers.php
   ersetzt das kaufmaennische Und durch «-und-»:
       Körper & Geist        →  koerper-und-geist
       Geld & Weiterkommen   →  geld-und-weiterkommen
       Zuhause & Nähe        →  zuhause-und-naehe
       Unterwegs & Technik   →  unterwegs-und-technik
   Die kurzen Schreibweisen weiter oben treffen deshalb nicht – alle vier
   Reiter fielen auf die Hausfarbe zurueck und sahen gleich aus.
   Beide Schreibweisen bleiben eingetragen, damit es auch dann stimmt, wenn
   eine Kennung von Hand vergeben wurde.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-w="koerper-und-geist"]     {--sig:#ED4861;--txt:#B32B43;--fld:#FDE8EB;--onsig:#FFFFFF}
[data-w="geld-und-weiterkommen"] {--sig:#3A7F8A;--txt:#2A5F68;--fld:#E3EFF1;--onsig:#FFFFFF}
[data-w="zuhause-und-naehe"]     {--sig:#FFE457;--txt:#6F5A00;--fld:#FFF7D2;--onsig:#2A2205}
[data-w="unterwegs-und-technik"] {--sig:#BCBF56;--txt:#66691C;--fld:#F3F4DE;--onsig:#22240B}

:root[data-mode="night"] [data-w="koerper-und-geist"],
:root[data-mode="night"][data-w="koerper-und-geist"]     {--sig:#ED4861;--txt:#F5A3B0;--fld:#3D262B;--onsig:#FFFFFF}
:root[data-mode="night"] [data-w="geld-und-weiterkommen"],
:root[data-mode="night"][data-w="geld-und-weiterkommen"] {--sig:#4E97A3;--txt:#93C9D2;--fld:#1B3339;--onsig:#0E1F22}
:root[data-mode="night"] [data-w="zuhause-und-naehe"],
:root[data-mode="night"][data-w="zuhause-und-naehe"]     {--sig:#FFE457;--txt:#E4CE6B;--fld:#37331F;--onsig:#2A2205}
:root[data-mode="night"] [data-w="unterwegs-und-technik"],
:root[data-mode="night"][data-w="unterwegs-und-technik"] {--sig:#BCBF56;--txt:#D3D683;--fld:#313320;--onsig:#22240B}

/* ═══════════════════════════════════════════════════════════════════════════
   REGISTER: KATEGORIEN OHNE BEITRAG
   Sie werden als <span class="leer"> ausgegeben, nicht als Verweis. Die
   Anordnung galt aber nur fuer <a> – deshalb standen sie eingerueckt und
   versetzt statt in einer Reihe. Jetzt dieselbe Zeile wie die aktiven,
   nur gedaempft und mit blassem Quadrat.
   ═══════════════════════════════════════════════════════════════════════════ */
.kats a,
.kats .leer{display:flex;align-items:center;gap:14px;padding:13px 14px;
  border-radius:var(--r-s);text-decoration:none}
.kats .leer{opacity:1;cursor:default}
.kats .leer .sq{background:var(--sig);opacity:.28}
.kats .leer .kn{color:var(--mut);font-weight:500}
.kats .leer:hover{background:none;padding-left:14px}

/* ═══════════════════════════════════════════════════════════════════════════
   REGISTER: FARBSTREIFEN DER REITER WIE IM ENTWURF
   Bisher galt fuer alle vier derselbe Wert (opacity .4). Perzeptiv ist das
   ungleich: Gelb verschwindet dabei fast, Petrol bleibt kraeftig. Im Entwurf
   sind die Werte deshalb je Farbe verschieden – Gelb voll, Oliv .55,
   Petrol .34. Genau das wird hier je Welt gesetzt.
   Der ausgewaehlte Reiter zeigt seinen Streifen immer voll.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--bd-off:.45}
[data-w="koerper-geist"],[data-w="koerper-und-geist"]         {--bd-off:.45}
[data-w="geld-weiterkommen"],[data-w="geld-und-weiterkommen"] {--bd-off:.34}
[data-w="zuhause-naehe"],[data-w="zuhause-und-naehe"]         {--bd-off:1}
[data-w="unterwegs-technik"],[data-w="unterwegs-und-technik"] {--bd-off:.55}
.tabs .bd{opacity:var(--bd-off)}
.tabs button:hover .bd{opacity:1}
.tabs button[aria-selected="true"] .bd{opacity:1}

/* Beschreibung im Register-Feld, in der Weltfarbe wie im Entwurf */
.panel .pl p{margin:10px 0 0;max-width:46ch;color:var(--txt);
  font-size:15.5px;line-height:1.6}
:root[data-mode="night"] .panel .pl p{color:var(--txt)}

/* ═══════════════════════════════════════════════════════════════════════════
   COOKIE-HINWEIS IM NEUEN DESIGN
   Der Kasten stammte noch aus der ersten Fassung: Radius 14px statt unserem
   Wert, ein Grau (#3F3F46) das in der Palette gar nicht vorkommt, und keine
   Anpassung an den Dunkelmodus.
   Jetzt: heller Kasten wie alle anderen Flaechen, Zustimmen in der
   Weltfarbe, Ablehnen als ruhiger Umriss. Beide Knoepfe gleich gross –
   ein optisch schwaches «Ablehnen» ist rechtlich heikel.
   ═══════════════════════════════════════════════════════════════════════════ */
.cookie-banner{
  background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;max-width:560px;
  box-shadow:0 12px 40px rgba(20,24,26,.14)}
:root[data-mode="night"] .cookie-banner{
  box-shadow:0 12px 40px rgba(0,0,0,.5)}
.cookie-banner p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--mut)}
.cookie-banner .cb-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner button{
  border-radius:var(--r-s);padding:0 20px;min-height:44px;
  font-family:var(--ui);font-size:14.5px;font-weight:700;
  cursor:pointer;flex:1 1 140px;
  transition:background-color .2s ease,border-color .2s ease}
/* Zustimmen bewusst im DUNKLEREN Weltton statt in der Signalfarbe:
   Weiss auf #ED4861 ergibt nur 3,7:1 und reicht fuer 14,5px nicht.
   Auf --txt sind es je nach Welt 6,4 bis 8,9:1. */
.cookie-banner .cb-accept{
  background:var(--txt);color:#FFFFFF;border:1.5px solid var(--txt)}
:root[data-mode="night"] .cookie-banner .cb-accept{
  background:var(--sig);color:var(--onsig);border-color:var(--sig)}
.cookie-banner .cb-accept:hover{filter:brightness(.94)}
.cookie-banner .cb-decline{
  background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.cookie-banner .cb-decline:hover{background:var(--alt);border-color:var(--soft)}
.cookie-banner button:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
@media (max-width:520px){
  .cookie-banner{left:12px;right:12px;bottom:12px;padding:16px}
  .cookie-banner button{flex:1 1 100%}
}

/* Mobiles Menue in einer Sprache ohne Beitraege: kurzer Hinweis statt einer
   leeren Flaeche, und der Fuss rueckt nach oben statt unten zu kleben. */
.mnav .mleer{margin:0 0 26px;color:var(--mut);font-size:15px;line-height:1.55;
  padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mnav .in:has(.mleer) .mfoot{margin-top:0}

/* ═══════════════════════════════════════════════════════════════════════════
   AUFMACHER AUF SCHMALEN SCHIRMEN
   Das Bild schrumpfte auf dem Handy zu einer Briefmarke oben links. Grund:
   weiter oben steht am Bildrahmen height:100% fuer die zweispaltige Fassung.
   In der einspaltigen Fassung ist die Zeilenhoehe aber vom Inhalt abhaengig –
   und das Bild darin liegt absolut, traegt also nichts bei. Die Hoehe lief
   dadurch gegen null.
   Hier bekommt der Rahmen deshalb eine eigene, feste Form: volle Breite,
   Seitenverhaeltnis 16:9, keine geerbte Hoehe.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .feature{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
  .feature .f-media{
    grid-column:1;grid-row:1;
    display:block;position:relative;
    width:100%;max-width:none;
    height:auto;min-height:0;
    aspect-ratio:16/9;
    align-self:auto;
    margin:0;border-radius:0;overflow:hidden}
  .feature .f-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .feature .f-text{grid-column:1;grid-row:2;padding:clamp(20px,5vw,28px)}
  .feature .f-title{font-size:clamp(23px,5.6vw,30px)}
}
@media (max-width:520px){
  .feature .f-media{aspect-ratio:4/3}
}
/* Am Schreibtisch: der Bildrahmen darf seine Rasterspalte nicht ueberragen.
   Er war 637px breit in einer 489px-Spalte – sichtbar war dadurch nur der
   linke Ausschnitt, das Motiv sass aus der Mitte. */
@media (min-width:901px){
  .feature .f-media{width:100%;max-width:100%;min-width:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZEICHEN DER UNTERKATEGORIEN
   Zweifarbig: blasse Grundform plus volles Detail, beide in der Weltfarbe.
   Sie sitzen im selben Quadrat wie bisher – nur ist es jetzt nicht mehr
   gefuellt, sondern traegt das Zeichen. Kategorien ohne eigenes Zeichen
   behalten das schlichte Quadrat, damit die Reihe nicht ausfranst.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Die Kachel wird mit dem DUNKLEN Weltton getoent, nicht mit der
   Signalfarbe. Grund: Gelb ist selbst hell – 20 % Gelb auf gelber Flaeche
   ergaben nur 1,04 Unterschied, die Kachel war praktisch unsichtbar. Bei
   Rot waren es 1,26. Mit dem dunklen Ton liegen jetzt alle vier zwischen
   1,31 und 1,36, also gleich gut sichtbar. */
.kats .sq.hat-ic{
  background:color-mix(in srgb,var(--txt) 20%,transparent);
  display:grid;place-items:center;color:var(--txt)}
.kats .sq.hat-ic .ic{width:20px;height:20px;display:block}
:root[data-mode="night"] .kats .sq.hat-ic{
  background:color-mix(in srgb,var(--txt) 22%,transparent);color:var(--txt)}
/* Aeltere Browser ohne color-mix: schlicht die helle Weltflaeche */
@supports not (color: color-mix(in srgb, red 50%, white)){
  .kats .sq.hat-ic{background:var(--fld)}
}
/* Kategorien ohne Beitrag: Zeichen mitdaempfen */
.kats .leer .sq.hat-ic{opacity:.55}

/* Mobiles Menue: kleines Zeichen vor der Kategorie */
.mkats a{display:flex;align-items:center;gap:10px}
/* Auch hier der dunkle Ton: ein gelbes Zeichen auf weissem Grund
   waere kaum zu erkennen. */
.mkats .mk-ic{width:17px;height:17px;flex:none;color:var(--txt)}

/* ═══════════════════════════════════════════════════════════════════════════
   VORTEILE / NACHTEILE: IMMER KLAR ABGEGRENZT
   In der auffaelligen Box liegen die Felder auf der Weltflaeche. Beide sind
   sehr hell, der Unterschied betrug nur 1,00 bis 1,09 – auf Gelb waren die
   Felder praktisch unsichtbar.
   Mit einer helleren Flaeche allein ist das nicht zu loesen: selbst reines
   Weiss kaeme nur auf 1,08. Deshalb eine sichtbare UMRANDUNG. Die gewaehlten
   Toene erreichen gegen jede der vier Weltflaechen mindestens 3,4 – das ist
   der Wert, den die Richtlinie fuer Bedienelement-Kanten verlangt.
   Ein zusaetzlicher farbiger Balken links macht Vorteile und Nachteile auch
   ohne Farbwahrnehmung unterscheidbar.
   ═══════════════════════════════════════════════════════════════════════════ */
.product-box .p-proscons > .pc-col{
  border-radius:var(--r-s);
  border:1.5px solid transparent;
  border-left-width:4px;
  padding:12px 14px}
.product-box .pc-pro{background:#EEF7E6;border-color:#5E8C3A}
.product-box .pc-con{background:#F6F7F5;border-color:#9C7830}
.product-box .pc-pro .pc-h{color:#3B6D11}
.product-box .pc-con .pc-h{color:#8A6516}

/* Auf der farbigen Flaeche der auffaelligen Box zusaetzlich eine ruhige
   weisse Grundflaeche – die Umrandung allein traegt, aber zusammen liest
   sich der Block deutlich schneller. */
.product-box.lay-auffaellig .pc-pro{background:#F4FAEF}
.product-box.lay-auffaellig .pc-con{background:#FBFBFA}

:root[data-mode="night"] .product-box .pc-pro{background:#1D2A1E;border-color:#5E8C3A}
:root[data-mode="night"] .product-box .pc-con{background:#2A2119;border-color:#9C7830}
:root[data-mode="night"] .product-box .pc-pro .pc-h{color:#A9D9A6}
:root[data-mode="night"] .product-box .pc-con .pc-h{color:#E8B478}

/* ═══════════════════════════════════════════════════════════════════════════
   ARTIKEL-TITELBILD MIT SOCKEL
   Die Ueberschrift sitzt IM Bild, unten links auf einem deckenden Block.
   Deckend und nicht durchscheinend – dadurch ist die Schrift lesbar, egal wie
   hell oder unruhig das Foto ist. Gemessen 17,9 (hell) und 12,9 (dunkel).
   Die KI-Marke wandert nach rechts unten, sonst liegt sie auf der Datumszeile.
   ═══════════════════════════════════════════════════════════════════════════ */
.article-hero-wrap{position:relative;margin:0 0 1.6em}
.article-hero-wrap .blog-img-media{
  border-radius:var(--r);overflow:hidden;margin:0}
.article-hero-wrap .article-hero{
  display:block;width:100%;height:auto;border-radius:0;margin:0}

.hero-sockel{
  position:absolute;left:0;bottom:0;z-index:3;
  max-width:min(78%,700px);
  /* Bewusst die SEITEN-Farbe, nicht die Kartenflaeche: der Sockel soll mit
     dem Hintergrund verschmelzen, als waere das Bild eingestanzt. Nachts
     unterscheiden sich --panel und --bg, darum fiel dort eine Kante auf. */
  background:var(--bg);
  padding:26px 32px 22px;
  border-radius:0 var(--r) 0 0}
.hero-sockel .hs-kicker{
  display:block;font-family:var(--ui);font-size:10.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--txt);margin:0 0 8px}
.hero-sockel h1{
  font-family:var(--head);font-weight:400;
  font-size:clamp(24px,3.4vw,42px);line-height:1.06;letter-spacing:-.02em;
  color:var(--ink);margin:0;text-wrap:balance}
.hero-sockel .article-meta{
  font-family:var(--ui);font-size:13px;color:var(--mut);margin:12px 0 0}

/* KI-Marke: im Titelbild nach rechts unten, sonst deckt sie die Datumszeile.
   Nur hier – bei Bildern im Fliesstext bleibt sie links. */
.article-hero-wrap .ki-badge{left:auto;right:12px;bottom:12px}
.article-hero-wrap .ki-badge:hover,
.article-hero-wrap .ki-badge:focus{right:12px;left:auto}

/* Schmale Schirme: keine Ueberlagerung. Ueber einem 350px breiten Foto bliebe
   vom Motiv nichts uebrig, und die Ueberschrift wuerde winzig oder sechszeilig. */
@media (max-width:760px){
  .hero-sockel{
    position:static;max-width:none;border-radius:0;
    padding:18px 0 0;background:none}
  .article-hero-wrap .ki-badge{right:10px;bottom:10px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   WERBEHINWEIS LEISER
   Der Hinweis MUSS oben stehen – Werbung muss erkennbar sein, BEVOR sich
   jemand mit dem Inhalt beschaeftigt (UWG Art. 3 Abs. 1 lit. b, Grundsatz
   3.12 der Lauterkeitskommission; in Deutschland § 5a Abs. 4 UWG). Ein
   Hinweis erst am Artikelende kaeme zu spaet.
   Die Vorschrift verlangt aber ERKENNBARKEIT, keine Auffaelligkeit. Aus dem
   grauen Kasten wird deshalb eine ruhige Zeile mit einem schmalen Strich
   links – sichtbar, aber ohne den Leseeinstieg zu bremsen.
   Zweites Signal bleibt die «ANZEIGE»-Marke auf jedem Produktbild.
   ═══════════════════════════════════════════════════════════════════════════ */
.article .blog-ad-note{
  background:none;
  border:0;
  border-left:2px solid var(--line);
  border-radius:0;
  /* --mut, nicht --soft: ein Pflichthinweis darf nicht so blass sein, dass
     man ihn uebersieht. Mit --soft waeren es 3,16 gewesen – unter dem
     Mindestwert 4,5 und damit auch als «klar erkennbar» angreifbar. */
  color:var(--mut);
  font-size:12.5px;
  line-height:1.5;
  padding:2px 0 2px 12px;
  margin:0 0 26px;
  max-width:70ch}
:root[data-mode="night"] .article .blog-ad-note{
  background:none;border-left-color:var(--line);color:var(--mut)}
@media (max-width:620px){
  .article .blog-ad-note{font-size:12px;margin-bottom:20px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   UMFLOSSENE BILDER: [bild-links] und [bild-rechts] wirkten nicht
   Weiter oben steht «.article .article-body > *{max-width:none}» aus der
   Lesebreiten-Anpassung. Das trifft JEDES direkte Kind des Fliesstexts –
   also auch die Bild-Figur. Ihr max-width:46% war damit weg, und das Bild
   nahm seine volle Eigenbreite ein statt umflossen zu werden.
   Der Umbruch auf volle Breite unterhalb 860px bleibt unberuehrt, deshalb
   greift die Korrektur ausdruecklich erst ab 861px.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:861px){
  .article .article-body > .blog-img-links,
  .article .article-body > .blog-img-rechts{max-width:46%}
  .article .article-body > .blog-img-links{float:left;margin:.4em 1.6em .6em 0}
  .article .article-body > .blog-img-rechts{float:right;margin:.4em 0 .6em 1.6em}
  /* Ueberschriften und Produktboxen sollen nicht neben dem Bild kleben */
  .article-body h2,.article-body h3,.article-body h4,
  .article-body .product-box,.article-body .capsule{clear:both}
}
/* Steht der Werbehinweis vor dem Titelbild, braucht er oben etwas Luft zur
   Brotkrume und unten etwas weniger, damit er nicht vom Bild abgetrennt wirkt. */
.article .blog-ad-note{margin:4px 0 14px}

/* ═══════════════════════════════════════════════════════════════════════════
   WERBEHINWEIS: EINE ZEILE STATT ZWEI
   Zwei Zeilen liest das Auge als Absatz – etwas, das man lesen soll, also
   Aufmerksamkeit. Eine Zeile liest es als Beschriftung, wie eine
   Bildunterschrift: wahrgenommen, aber nicht bremsend. Genau das ist hier
   gewuenscht, denn verlangt ist Erkennbarkeit, nicht Auffaelligkeit.
   Gemessen: der Text braucht 816px, die Artikelbreite betraegt 1200px –
   er passt, ohne dass am Wortlaut etwas geaendert werden muss.
   Der senkrechte Strich faellt weg: bei zwei Zeilen hielt er den Text
   zusammen, bei einer Zeile waere er nur ein weiteres Element, das Blicke
   zieht. Unterhalb von rund 900px bricht der Satz von selbst um – dort ist
   die zweizeilige Form richtig.
   ═══════════════════════════════════════════════════════════════════════════ */
.article .blog-ad-note{
  border:0;
  padding:0;
  max-width:none;
  margin:6px 0 14px}
:root[data-mode="night"] .article .blog-ad-note{border:0}

/* ═══════════════════════════════════════════════════════════════════════════
   TITELBILD-SOCKEL: ENGER UND GROESSER  (Variante B)
   Drei Aenderungen gegenueber der ersten Fassung:
   1. Der Block ist nur noch so breit wie sein laengster Text
      (width:max-content) statt fixer 78 Prozent. Vorher blieb rechts im
      Block eine leere weisse Zone – die fiel besonders auf, weil Block und
      Seitenhintergrund dasselbe Weiss sind und das Auge deshalb keinen
      Kasten sieht, sondern eine Flaeche.
   2. Nach LINKS zieht der Block trotzdem bis zum Bildrand durch. Das
      uebernimmt ein ::before, damit die buendige Kante links erhalten
      bleibt, ohne rechts Leerraum zu erzeugen.
   3. Das Bild wird flacher geschnitten (16:7,5) und die Ueberschrift
      groesser. Gemessen verliert das Foto dadurch 116 px Hoehe – es wirkt
      ruhiger, ohne kleiner zu sein, weil der groessere Titel den Blick
      uebernimmt.
   ═══════════════════════════════════════════════════════════════════════════ */
.article-hero-wrap .blog-img-media{position:relative}
.article-hero-wrap .article-hero{
  display:block;width:100%;height:auto;aspect-ratio:16/7.5;object-fit:cover}

.hero-sockel{
  width:max-content;
  max-width:min(78%,760px);
  padding:26px 34px 22px 34px;
  border-radius:0 var(--r) 0 0}
/* Zieht die weisse Flaeche nach links bis zum Bildrand durch. */
.hero-sockel::before{
  content:"";position:absolute;right:100%;top:0;bottom:0;
  width:100vw;background:var(--bg)}
.hero-sockel h1{font-size:clamp(30px,4.6vw,56px);line-height:1.02;letter-spacing:-.025em}
.hero-sockel .hs-kicker{margin-bottom:7px}
.hero-sockel .article-meta{font-size:12.5px;margin-top:10px}

@media (max-width:760px){
  /* Auf dem Handy bleibt es beim Umbruch unter das Bild – dort waere ein
     Block IM Bild nur ein Deckel ueber dem Motiv. */
  .article-hero-wrap .article-hero{aspect-ratio:16/10}
  .hero-sockel{width:auto;max-width:none;padding:18px 0 0}
  .hero-sockel::before{display:none}
  .hero-sockel h1{font-size:clamp(25px,6.4vw,34px)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KI-KENNZEICHNUNG NEUTRAL
   Das Zeichen war #22635E – ein Petrolgruen, das in keiner der vier Welten
   vorkommt. Gemessener Abstand zur Palette: 96 Punkte zum Petrol von
   «Geld & Weiterkommen», 157 bis 357 zu allem anderen. Es war also eine
   fuenfte Farbe ohne Bedeutung, und in der gelben Welt standen zwei voellig
   unverwandte Toene nebeneinander.
   Jetzt neutral dunkel wie die «ANZEIGE»-Marke: es ist eine Kennzeichnung,
   kein Markenelement. Vorteil nebenbei – der Kontrast steigt von 6,97 auf
   17,87, was auf hellen Fotos deutlich hilft.
   Im Dunkelmodus wird es hell auf dunklem Grund, sonst verschwaende es.
   ═══════════════════════════════════════════════════════════════════════════ */
.ki-badge{
  background:rgba(20,24,26,.88);
  color:#FFFFFF;
  backdrop-filter:blur(4px);
  box-shadow:0 2px 10px rgba(0,0,0,.22)}
:root[data-mode="night"] .ki-badge{
  background:rgba(236,239,238,.92);
  color:#14181A;
  box-shadow:0 2px 10px rgba(0,0,0,.5)}

/* ═══════════════════════════════════════════════════════════════════════════
   KATEGORIE-KACHEL IM DUNKELMODUS
   Im Hellmodus sichtbar, im Dunkelmodus verschwunden. Zwei Ursachen, die sich
   multiplizieren:
   1. Getoent wurde mit dem HELLEN Nachtton der Welt bei 22 Prozent.
   2. Kategorien ohne Beitrag bekommen zusaetzlich Deckkraft .55 auf das
      ganze Quadrat – also auch auf dessen Hintergrund.
   22 % x 55 % = 12 % Resttoenung. Auf dunklem Grund ist das nichts mehr.

   Loesung: im Dunkelmodus mit WEISS toenen statt mit dem Weltton – das ist
   auf jedem dunklen Untergrund gleich gut sichtbar (1,5 bei allen vier
   Welten, hell sind es 1,31 bis 1,36). Und die Daempfung fuer leere
   Kategorien wirkt nur noch auf das ZEICHEN, nicht mehr auf die Kachel.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-mode="night"] .kats .sq.hat-ic{
  background:rgba(255,255,255,.13);
  color:var(--txt)}
/* Deckkraft nicht mehr auf das ganze Quadrat – sonst blasst auch die
   Kachelflaeche aus und beide Abschwaechungen multiplizieren sich. */
.kats .leer .sq.hat-ic{opacity:1}
.kats .leer .sq.hat-ic .ic{opacity:.6}
:root[data-mode="night"] .kats .leer .sq.hat-ic{background:rgba(255,255,255,.10)}

/* ═══════════════════════════════════════════════════════════════════════════
   RUECKFALL OHNE color-mix — WICHTIG FUER AELTERE GERAETE
   Auf einem aelteren Huawei mit Chrome fehlten die Kacheln hinter den
   Zeichen, auf einem ebenso alten iPhone waren sie da. Ursache: color-mix()
   gibt es erst ab Chrome 111 (Maerz 2023); Safari kann es seit 16.2 und
   damit laenger.
   Der bisherige Rueckfall war unbrauchbar: er setzte die Kachel auf
   var(--fld) – also GENAU die Farbe der Flaeche, auf der sie liegt. Damit
   war sie dort erst recht unsichtbar.
   Jetzt umgekehrt aufgebaut: die schlichte, ueberall funktionierende
   Variante ist die Grundlage, color-mix nur noch die Verbesserung fuer
   Browser, die es koennen. Der Rueckfall erreicht 1,31 gegen jede
   Weltflaeche – praktisch derselbe Wert wie die moderne Fassung (1,31–1,36).
   ═══════════════════════════════════════════════════════════════════════════ */
.kats .sq.hat-ic{background:rgba(0,0,0,.12)}
:root[data-mode="night"] .kats .sq.hat-ic{background:rgba(255,255,255,.13)}
.kats .leer .sq.hat-ic{background:rgba(0,0,0,.09)}
:root[data-mode="night"] .kats .leer .sq.hat-ic{background:rgba(255,255,255,.10)}

@supports (color: color-mix(in srgb, red 50%, white)){
  .kats .sq.hat-ic{background:color-mix(in srgb,var(--txt) 20%,transparent)}
  :root[data-mode="night"] .kats .sq.hat-ic{background:rgba(255,255,255,.13)}
  .kats .leer .sq.hat-ic{background:color-mix(in srgb,var(--txt) 15%,transparent)}
}

/* Dieselbe Umkehr fuer den Kaufknopf im Dunkelmodus und fuer das Schweben
   ueber einer Kategorie – auch dort war color-mix die einzige Angabe. */
.kats a:hover{background:rgba(255,255,255,.55)}
:root[data-mode="night"] .kats a:hover{background:rgba(255,255,255,.09)}
@supports (color: color-mix(in srgb, red 50%, white)){
  .kats a:hover{background:color-mix(in srgb,var(--panel) 62%,transparent)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KICKERZEILE MIT SCHWEIZER KREUZ
   Statt des roten Strichs ein rundes Schweizerkreuz. Rund, weil die
   SCHILDFORM dem Bund vorbehalten ist (Wappenschutzgesetz) – ein Kreuz im
   Quadrat oder Kreis ist als Herkunftsangabe erlaubt, ein Wappen nicht.
   Rund ist davon die eindeutigste Form.

   Die Schrift steht bewusst im Ton der Ueberschrift, nicht in Rot:
   · das Kreuz ist bereits das Signal – zwei Akzente in einer Zeile
     schwaechen sich gegenseitig,
   · sonst staenden drei Rottoene nebeneinander (Fahnenrot, Hausfarbe,
     Weltton),
   · und die Zeile erscheint auch auf Themenseiten, wo sie sonst je nach
     Welt eine andere Farbe neben dem festen roten Kreuz haette.
   Kontrast 17,9 auf Weiss.
   ═══════════════════════════════════════════════════════════════════════════ */
.kicker,.home-kicker{color:var(--ink)}
:root[data-mode="night"] .kicker,
:root[data-mode="night"] .home-kicker{color:var(--ink)}

.kicker::before,.home-kicker::before{
  width:17px;height:17px;border-radius:50%;background:#DA291C;
  /* Das weisse Kreuz als Maske – dadurch bleibt es bei jedem Zoom scharf
     und braucht keine zusaetzliche Bilddatei. */
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-position:center center, center center;
  background-size:10px 3.2px, 3.2px 10px;
  flex:none}

/* Teilsterne: Umrisse unten, volle Sterne darueber auf Wertbreite beschnitten.
   span.st-wrap/.st-fill schlagen die generische Nummern-Regel (.stars span),
   sonst wuerden die Sterne klein und grau wie die Zahl daneben. Farbe:
   klassisches Bewertungs-Gelb, das jeder von Shops und Google kennt. */
.stars span.st-wrap{position:relative;display:inline-block;line-height:1;
  color:#FFB300;font-size:inherit;letter-spacing:inherit}
.stars span.st-fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
  pointer-events:none;color:#FFB300;font-size:inherit;letter-spacing:inherit}

/* Sichtbarer Preis in der Produktbox-Fusszeile */
.product-box .p-price{font-weight:800;font-size:19px;color:var(--ink);margin:2px 0 6px}
.product-box.lay-auffaellig .p-price{font-size:21px}