/* ==========================================================================
   ernstl.io — Frontend
   --------------------------------------------------------------------------
   Die Farb- und Maßwerte stehen NICHT hier, sondern kommen inline aus
   views/partials/design-tokens.php. Diese Datei benutzt ausschließlich var(--…)
   und funktioniert dadurch in Hell und Dunkel ohne eine einzige doppelte Regel.

   Aufbau: Schrift · Grundgerüst · Kopf und Fuß · Textinhalte · Übersichten ·
           Produktboxen · Formulare · Einwilligung · Werbeplätze
   ========================================================================== */

/* --- Schrift ---------------------------------------------------------------
   Selbst gehostet, kein Verweis auf eine fremde Domain. Eine variable Datei
   deckt 400–700 ab; das spart gegenüber drei Einzelschnitten rund die Hälfte.
   Latin-Extended wird über unicode-range nur geholt, wenn ein Zeichen daraus
   wirklich vorkommt — auf deutschen Seiten also nie.                        */

@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Grundgerüst ---------------------------------------------------------- */

h1,h2,h3,h4,.marke,.knopf,.produktknopf,.rubrik{font-family:var(--schrift-titel)}
h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.75rem); line-height:1.12; margin:0 0 1rem;
   letter-spacing:-.022em; font-weight:700; text-wrap:balance}
h2{font-size:1.375rem; line-height:1.25; margin:2.5rem 0 .75rem; letter-spacing:-.015em;
   font-weight:700; text-wrap:balance}
h3{font-size:1.125rem; line-height:1.3; margin:2rem 0 .5rem; letter-spacing:-.01em; font-weight:700}
strong{font-weight:600}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
     background:var(--flaeche-2); border:1px solid var(--linie); border-radius:var(--radius);
     padding:.1em .35em}

.klein{font-size:.8125rem}
/* Kennzeichnung auf den Fehler- und Baustellenseiten. */
.status{display:inline-block; margin:0 0 1rem; padding:.2rem .6rem; font-size:.75rem;
  font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-leise);
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.rechts{text-align:right}
.versteckt{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap}

/* Sprungmarke — nur sichtbar, wenn sie den Fokus hat. */
.zum-inhalt{position:absolute; left:.5rem; top:-4rem; z-index:100; background:var(--akzent);
  color:var(--auf-akzent); padding:.6rem 1rem; border-radius:var(--radius-knopf);
  text-decoration:none; font-weight:600; transition:top .15s ease}
.zum-inhalt:focus-visible{top:.5rem; color:var(--auf-akzent)}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--akzent); outline-offset:2px; border-radius:var(--radius)}

/* --- Kopfleiste ------------------------------------------------------------
   Zwei Reihen: oben Marke, Suche, Modusschalter — darunter die Themen.
   Beide kleben oben, damit die Navigation beim Lesen erreichbar bleibt.     */

.kopf{position:sticky; top:0; z-index:40; background:var(--bg);
  border-bottom:1px solid var(--linie)}
.kopfreihe{display:flex; align-items:center; gap:1rem; height:3.25rem}
.kopf .marke{display:inline-flex; align-items:center; gap:.5rem; font-size:1.125rem;
  font-weight:700; letter-spacing:-.02em; color:var(--text); text-decoration:none; flex-shrink:0}
.kopf .marke::before{content:""; width:.6rem; height:.6rem; background:var(--akzent);
  border-radius:1px; flex-shrink:0}
.kopf .marke:hover{color:var(--akzent)}
.kopf .marke img{display:block; height:1.5rem; width:auto; max-width:11rem}
.kopf .marke.mit-logo::before{display:none}
/* Zwei Fassungen im Markup, sichtbar ist immer nur die zum Modus passende. */
.logo-dunkel{display:none}
:root[data-theme="dark"] .logo-hell{display:none}
:root[data-theme="dark"] .logo-dunkel{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-hell{display:none}
  :root:not([data-theme="light"]) .logo-dunkel{display:block}
}

.kopfsuche{margin-left:auto; display:flex; align-items:center}
.kopfsuche input[type=search]{width:11rem; padding:.35rem .6rem; font-size:.875rem;
  font-family:inherit; background:var(--flaeche); color:var(--text);
  border:1px solid var(--linie); border-right:0;
  border-radius:var(--radius-knopf) 0 0 var(--radius-knopf); min-width:0}
.kopfsuche input[type=search]:focus-visible{outline-offset:-1px; position:relative; z-index:1}
.kopfsuche button{padding:.35rem .7rem; font:inherit; font-size:.875rem; cursor:pointer;
  background:var(--flaeche); color:var(--text-leise); border:1px solid var(--linie);
  border-radius:0 var(--radius-knopf) var(--radius-knopf) 0}
.kopfsuche button:hover{color:var(--akzent); border-color:var(--linie-stark)}
.kopfsuche svg{display:block; width:1rem; height:1rem}

/* Auf schmalen Geräten bleibt nur die Lupe. Sie schickt ohne Begriff auf die Suchseite —
   dort ist Platz für ein ordentliches Feld. */
@media (max-width:40rem){
  .kopfsuche input[type=search]{display:none}
  .kopfsuche button{border-radius:var(--radius-knopf); width:2rem; height:2rem; padding:0;
    display:inline-flex; align-items:center; justify-content:center}
}

.modusschalter{flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; padding:0; cursor:pointer; color:var(--text-leise);
  background:none; border:1px solid var(--linie); border-radius:var(--radius-knopf)}
.modusschalter:hover{color:var(--akzent); border-color:var(--linie-stark)}
.modusschalter svg{width:1.05rem; height:1.05rem; display:block}
/* Gezeigt wird immer das Ziel des Klicks: im Hellen der Mond, im Dunklen die Sonne. */
.modusschalter .sonne{display:none}
:root[data-theme="dark"] .modusschalter .sonne{display:block}
:root[data-theme="dark"] .modusschalter .mond{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .modusschalter .sonne{display:block}
  :root:not([data-theme="light"]) .modusschalter .mond{display:none}
}
/* Ohne JavaScript hätte der Knopf keine Wirkung — dann bleibt er weg. */
html:not(.js) .modusschalter{display:none}

.themen{display:flex; gap:1.25rem; align-items:stretch; overflow-x:auto;
  scrollbar-width:none; border-top:1px solid var(--linie)}
.themen::-webkit-scrollbar{display:none}
.themen a{display:inline-flex; align-items:center; white-space:nowrap; padding:.55rem 0;
  font-size:.875rem; font-weight:500; color:var(--text-leise); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px}
.themen a:hover{color:var(--text)}
.themen a[aria-current="page"]{color:var(--text); border-bottom-color:var(--akzent)}

/* --- Fuß ------------------------------------------------------------------ */

.fuss{flex-shrink:0; margin-top:4rem; border-top:1px solid var(--linie);
  background:var(--flaeche)}
.fussinhalt{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center;
  padding-top:1.5rem; padding-bottom:1.5rem; font-size:.875rem; color:var(--text-leise)}
.fussinhalt a{color:var(--text-leise); text-decoration:none}
.fussinhalt a:hover{color:var(--akzent); text-decoration:underline}
.fussinhalt .abstand{margin-left:auto}

/* --- Textinhalte ---------------------------------------------------------- */

.intro{font-size:1.1875rem; line-height:1.55; color:var(--text-leise); margin:0 0 2rem;
  max-width:38rem; text-wrap:pretty}
.brotkrumen{display:flex; gap:.4rem; flex-wrap:wrap; font-size:.8125rem;
  color:var(--text-leise); margin:0 0 1.25rem}
.brotkrumen a{color:var(--text-leise); text-decoration:none}
.brotkrumen a:hover{color:var(--akzent); text-decoration:underline}

/* --- Artikelraster --------------------------------------------------------
   Lesespalte und Seitenspalte nebeneinander, zusammen 68 rem — mittig im breiten Rahmen.
   Unterhalb von 64 rem fällt die Seitenspalte unter den Text.                          */

.beitragsraster{display:grid; gap:3rem; max-width:68rem; margin:0 auto}
@media (min-width:64rem){
  .beitragsraster{grid-template-columns:minmax(0,1fr) var(--seitenspalte)}
}
.beitrag{min-width:0; max-width:var(--lesespalte)}
.seitenspalte{min-width:0}
@media (max-width:63.99rem){
  .seitenspalte{max-width:var(--lesespalte); padding-top:2rem; border-top:1px solid var(--linie)}
}

.seitenblock{margin:0 0 2.5rem}
.seitenblock h2{margin:0 0 1rem; font-size:.8125rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--text-leise); padding-bottom:.6rem;
  border-bottom:1px solid var(--linie)}
.seitenliste{list-style:none; padding:0; margin:0}
.seitenliste li{display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:.85rem;
  align-items:start; padding:.85rem 0; border-bottom:1px solid var(--linie)}
.seitenliste li.ohne-bild{grid-template-columns:minmax(0,1fr)}
.seitenliste li:first-child{padding-top:0}
.seitenliste li:last-child{border-bottom:0}
.seitenbild{display:block; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--linie);
  border-radius:var(--radius); background:var(--flaeche)}
.seitenbild img{width:100%; height:100%; object-fit:cover; display:block}
.seitenliste a{font-family:var(--schrift-titel); font-weight:600; font-size:.9375rem;
  line-height:1.3; color:var(--text); text-decoration:none; display:block}
.seitenliste a:hover{color:var(--akzent)}
.seitenliste time{display:block; margin-top:.25rem; font-size:.75rem; color:var(--text-leise);
  font-variant-numeric:tabular-nums}

/* Der einzige mitlaufende Platz. Der Abstand nach oben hält ihn unter der klebenden
   Kopfleiste — sonst verschwände er beim Scrollen dahinter. */
@media (min-width:64rem){
  .werbeblock{position:sticky; top:6.5rem}
}

/* Aufmacherbild über dem Titel. Steht im Fließtext dasselbe Bild, wird es dort entfernt —
   das erledigt der Controller, nicht CSS. */
.aufmacher{margin:0 0 1.75rem}
.aufmacher img{display:block; width:100%; height:auto; border-radius:var(--radius);
  background:var(--flaeche)}
.aufmacher figcaption{font-size:.875rem; color:var(--text-leise); margin-top:.6rem}
.aufmacher.hochkant{display:flex; justify-content:center; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:var(--radius)}
.aufmacher.hochkant img{width:auto; max-width:100%; max-height:32rem; border-radius:0}

.beitragskopf{margin:0 0 2rem; padding-bottom:1.25rem; border-bottom:1px solid var(--linie)}
.meta{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:0;
  font-size:.875rem; color:var(--text-leise)}
.meta a{color:var(--text-leise)}
.meta a:hover{color:var(--akzent)}

.rubrik{font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--akzent); margin:0 0 .5rem}

.kurz-gesagt{background:var(--flaeche); border:1px solid var(--linie);
  border-left:3px solid var(--akzent); border-radius:0 var(--radius) var(--radius) 0;
  padding:1.15rem 1.35rem; margin:0 0 2rem}
.kurz-gesagt h2{margin:0 0 .4rem; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-leise); font-weight:700}
.kurz-gesagt p{margin:0}

.inhalt{font-size:1.0625rem; line-height:1.7}
.inhalt > h2{font-size:1.5rem; margin:2.75rem 0 .85rem; padding-top:.25rem}
.inhalt > h3{font-size:1.1875rem; margin:2.25rem 0 .5rem}
.inhalt ul,.inhalt ol{padding-left:1.25rem; margin:0 0 1.25rem}
.inhalt li{margin:.35rem 0}
.inhalt img{max-width:100%; height:auto; border-radius:var(--radius); display:block}
.inhalt figure{margin:2rem 0}
.inhalt figcaption{font-size:.875rem; color:var(--text-leise); margin-top:.6rem;
  padding-left:.75rem; border-left:2px solid var(--linie)}
.inhalt hr{border:0; border-top:1px solid var(--linie); margin:2.75rem 0}
.inhalt pre{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:1rem 1.15rem; margin:1.75rem 0; overflow-x:auto; font-size:.875rem; line-height:1.55}
.inhalt pre code{background:none; border:0; padding:0; font-size:inherit}
.inhalt blockquote{margin:1.75rem 0; padding:.25rem 0 .25rem 1.15rem;
  border-left:3px solid var(--akzent); color:var(--text-leise); font-size:1.0625rem}
.inhalt blockquote p:last-child{margin-bottom:0}
.inhalt table{width:100%; border-collapse:collapse; margin:1.75rem 0; font-size:.9375rem}
.inhalt th,.inhalt td{border:1px solid var(--linie); padding:.6rem .8rem; text-align:left}
.inhalt th{background:var(--flaeche); font-weight:600}
.tabellenhuelle{overflow-x:auto; margin:1.75rem 0}
.tabellenhuelle table{margin:0}
.galerie{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.75rem;
  margin:2rem 0}
.galerie figure{margin:0}
.video-link a::before{content:"▶\00a0"; color:var(--akzent)}

.beitragsfuss{margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--linie)}
.stand{font-size:.875rem; margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--linie)}
.schlagworte{display:flex; gap:.4rem; flex-wrap:wrap; margin:0 0 1rem}
.schlagworte a{font-size:.8125rem; padding:.2rem .6rem; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:var(--radius); color:var(--text-leise);
  text-decoration:none}
.schlagworte a:hover{border-color:var(--akzent); color:var(--akzent)}

.hinweis{background:var(--flaeche); border:1px solid var(--linie); border-left:3px solid var(--linie-stark);
  border-radius:0 var(--radius) var(--radius) 0; padding:1rem 1.25rem; color:var(--text-leise)}
.karte{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:1.35rem 1.5rem; margin:1.75rem 0}
.karte h2{margin-top:0}

/* --- Übersichten ----------------------------------------------------------
   Der Rahmen ist breit, gelesen wird trotzdem in einer schmalen Spalte: Überschrift und
   Einleitung bleiben deshalb auf Lesebreite, nur das Raster nutzt die volle Fläche.     */

.seitenkopf{max-width:var(--lesespalte); margin:0 0 2.5rem}
.seitenkopf h1{margin-bottom:.75rem}
.seitenkopf .intro{margin-bottom:.75rem}
.seitenkopf .suchformular{margin-bottom:0}

/* Kopf einer Kategorie: farbige Kante statt farbiger Fläche — Text bleibt lesbar,
   die Zuordnung ist trotzdem auf einen Blick da. */
.hubkopf{max-width:none; border-left:4px solid var(--kat,var(--akzent)); padding-left:1.15rem}
.hubkopf > *{max-width:var(--lesespalte)}

.blockkopf{display:flex; align-items:center; gap:1rem; margin:0 0 1.25rem; font-size:1.125rem;
  text-transform:uppercase; letter-spacing:.06em}
.blockkopf::after{content:""; flex:1; height:1px; background:var(--linie)}
.rasterblock{margin:3rem 0 0}
.rasterblock:first-child{margin-top:0}
.mehr{margin:2rem 0 0}

/* --- Kacheln -------------------------------------------------------------- */

.kachelraster{display:grid; gap:2rem 1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(16.5rem,1fr))}
.kachel{display:flex; flex-direction:column; gap:.7rem; min-width:0}
.kachelbild{display:block; overflow:hidden; aspect-ratio:16/10; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:var(--radius)}
.kachelbild img{width:100%; height:100%; object-fit:cover; display:block}
/* Ohne Bild tragen Rubrik und Titel eine eigene Fläche — nie ein leeres Feld im Raster.
   Weiße Schrift gibt es nur mit Kategoriefarbe darunter (Klasse `mit-farbe`); ohne sie
   bliebe weiß auf hellgrau. */
.kachelbild.ohne-bild{display:flex; flex-direction:column; justify-content:flex-end; gap:.4rem;
  padding:1.1rem; background:var(--flaeche-2)}
.kachelbild.ohne-bild .kacheltitel{font-size:1.2rem}
.kachelbild.ohne-bild .kacheltitel a:hover{text-decoration:underline}
.mit-farbe .kachelbild.ohne-bild{background:var(--kat); border-color:transparent}
.mit-farbe .kachelbild.ohne-bild .kachelrubrik{color:rgba(255,255,255,.78)}
.mit-farbe .kachelbild.ohne-bild .kacheltitel a{color:#fff}
.mit-farbe .kachelbild.ohne-bild .kacheltitel a:hover{color:#fff}
.kacheltext{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.kachelrubrik{margin:0; font-size:.6875rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em}
.kachelrubrik a{color:var(--kat,var(--akzent)); text-decoration:none}
.kachelrubrik a:hover{text-decoration:underline}
.kacheltitel{font-size:1.0625rem; line-height:1.3; margin:0; letter-spacing:-.012em;
  text-wrap:balance}
.kacheltitel a{color:var(--text); text-decoration:none}
.kacheltitel a:hover{color:var(--akzent)}
.kachel time{font-size:.75rem; color:var(--text-leise); font-variant-numeric:tabular-nums}
.kachel .anriss{margin:.15rem 0 0}

/* Aufmacher: dasselbe Bauteil, nur zweispaltig und größer. */
.aufmacherblock{margin:0 0 3rem; padding-bottom:2.5rem; border-bottom:1px solid var(--linie)}
.aufmacherblock .rubrik{margin-bottom:.85rem}
@media (min-width:52rem){
  .kachel.gross{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr);
    gap:.5rem 2rem; align-items:center}
  .kachel.gross .kachelbild{aspect-ratio:16/9}
  .kachel.gross .kacheltext{gap:.45rem}
}
.kachel.gross .kacheltitel{font-size:clamp(1.35rem,1rem + 1.4vw,1.9rem); line-height:1.15}
.kachel.gross .anriss{font-size:1rem}
.kachel.gross .kachelbild.ohne-bild .kacheltitel{font-size:1.75rem}

.kategorienleiste{display:flex; gap:.5rem; flex-wrap:wrap; margin:0}
.kategorienleiste a{display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .75rem;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  border-left:3px solid var(--kat,var(--linie-stark));
  font-size:.875rem; color:var(--text); text-decoration:none}
.kategorienleiste a:hover{border-color:var(--akzent); border-left-color:var(--kat,var(--akzent));
  color:var(--akzent)}
.kategorienleiste .anzahl{font-size:.75rem; color:var(--text-leise);
  font-variant-numeric:tabular-nums}

.beitragsliste{list-style:none; padding:0; margin:1.5rem 0}
.beitragsliste li{padding:1.1rem 0; border-bottom:1px solid var(--linie); display:grid; gap:.3rem}
.beitragsliste li:first-child{padding-top:0}
.beitragsliste li:last-child{border-bottom:0}
.beitragsliste a{font-family:var(--schrift-titel); font-weight:700; font-size:1.125rem;
  line-height:1.3; letter-spacing:-.012em; color:var(--text); text-decoration:none;
  text-wrap:balance}
.beitragsliste a:hover{color:var(--akzent)}
.beitragsliste time{color:var(--text-leise); font-size:.75rem; order:-1;
  font-variant-numeric:tabular-nums; letter-spacing:.02em}
.anriss{color:var(--text-leise); font-size:.9375rem; line-height:1.55}

.blaettern{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin:2.5rem 0 0; padding-top:1.25rem; border-top:1px solid var(--linie); font-size:.9375rem}
.weiterlink{font-weight:600}

/* --- Formulare ------------------------------------------------------------ */

.suchformular{margin:1.5rem 0 2.5rem}
.feldzeile{display:flex; gap:.5rem; flex-wrap:wrap}
.feldzeile input[type=search],.suchformular input[type=search]{flex:1 1 16rem; min-width:0;
  padding:.65rem .85rem; font-size:1rem; font-family:inherit; background:var(--bg);
  color:var(--text); border:1px solid var(--linie-stark); border-radius:var(--radius-knopf)}
.feldzeile input[type=search]::placeholder{color:var(--text-leise)}
.knopf{display:inline-block; padding:.65rem 1.25rem; background:var(--akzent);
  color:var(--auf-akzent); border:1px solid var(--akzent); border-radius:var(--radius-knopf);
  font:inherit; font-family:var(--schrift-titel); font-size:1rem; font-weight:600;
  text-decoration:none; cursor:pointer}
.knopf:hover{background:var(--akzent-stark); border-color:var(--akzent-stark);
  color:var(--auf-akzent)}
.amazon-suche{background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); padding:1.25rem 1.5rem; margin:2rem 0}
.spende{margin:1.5rem 0}

/* --- Häufige Fragen ------------------------------------------------------- */

.faq{margin:3rem 0 0; padding-top:1.5rem; border-top:1px solid var(--linie)}
.faq details{border:1px solid var(--linie); border-radius:var(--radius); margin:.5rem 0;
  background:var(--flaeche)}
.faq summary{padding:.85rem 1.1rem; cursor:pointer; font-weight:600; list-style:none;
  display:flex; gap:.65rem; align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--akzent); font-weight:700; flex-shrink:0}
.faq details[open] summary::before{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--linie)}
.faq details p{margin:0; padding:.9rem 1.1rem}

/* --- Produktboxen ---------------------------------------------------------
   Klare Kante statt Schatten, Bildfläche immer weiß: Amazon liefert die Fotos
   freigestellt auf Weiß, im Dunkelmodus stünden sie sonst in einem grauen Kasten. */

.produktbox{background:var(--flaeche); border:1px solid var(--linie);
  border-top:3px solid var(--akzent); border-radius:0 0 var(--radius) var(--radius);
  padding:1.25rem 1.4rem; margin:2.5rem 0}
.produktbox .werbekennzeichnung{margin-bottom:.9rem; padding-bottom:.65rem;
  border-bottom:1px solid var(--linie)}
.werbekennzeichnung{font-size:.75rem; line-height:1.5; color:var(--text-leise); margin:0 0 .75rem}
.produktinhalt{display:grid; gap:1.35rem; align-items:start}
.produktbox.hat-bild .produktinhalt{grid-template-columns:minmax(0,150px) minmax(0,1fr)}
.produktbox.hat-bild.stil-compact .produktinhalt{grid-template-columns:minmax(0,84px) minmax(0,1fr); gap:.9rem}
.produktbox.hat-bild.stil-wide .produktinhalt{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
@media (max-width:32rem){.produktbox.hat-bild .produktinhalt{grid-template-columns:1fr}}
.produktbild{background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:.6rem; display:flex; align-items:center; justify-content:center}
.produktbild img{max-width:100%; height:auto; display:block; mix-blend-mode:multiply}
.produkttitel{font-size:1.125rem; line-height:1.3; margin:0 0 .2rem; text-wrap:balance}
.produktmarke{color:var(--text-leise); font-size:.75rem; text-transform:uppercase;
  letter-spacing:.06em; margin:0 0 .75rem}
.produktmerkmale{list-style:none; padding:0; margin:0 0 1rem; font-size:.9375rem}
.produktmerkmale li{padding-left:1.1rem; position:relative; margin:.25rem 0}
.produktmerkmale li::before{content:"›"; position:absolute; left:0; color:var(--akzent);
  font-weight:700}
.produktpreis{display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; margin:0 0 .35rem}
.produktpreis .preis{font-family:var(--schrift-titel); font-size:1.625rem; font-weight:700;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums}
.produktpreis .preis-alt{color:var(--text-leise); font-size:.9375rem}
.produktpreis .ersparnis{background:var(--akzent); color:var(--auf-akzent); font-size:.75rem;
  font-weight:700; padding:.15rem .4rem; border-radius:var(--radius)}
.produktpreis .verfuegbarkeit,.produktpreis .prime{font-size:.8125rem; color:var(--text-leise)}
.produktpreis.ohne{font-size:.9375rem; margin-bottom:.75rem}
.preishinweis{font-size:.6875rem; color:var(--text-leise); margin:0 0 1rem; line-height:1.45}
.produktknopf{display:inline-block; background:var(--akzent); color:var(--auf-akzent);
  font-family:var(--schrift-titel); font-weight:600; padding:.7rem 1.35rem;
  border-radius:var(--radius-knopf); text-decoration:none; text-wrap:balance; max-width:100%}
@media (min-width:26rem){.produktknopf{white-space:nowrap}}
.produktknopf:hover{background:var(--akzent-stark); color:var(--auf-akzent)}
.produktfuss{font-size:.6875rem; color:var(--text-leise); margin:1.15rem 0 0;
  padding-top:.75rem; border-top:1px solid var(--linie)}
.produktknopf-allein{display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin:2rem 0}
.werbekennzeichnung.inline{margin:0}

.produktvergleich{margin:2.5rem 0}
.vergleichstabelle th[scope=row]{display:flex; align-items:center; gap:.7rem; font-weight:600;
  background:transparent}
.vergleichstabelle .minibild{background:#fff; border:1px solid var(--linie);
  border-radius:var(--radius); padding:.25rem; flex-shrink:0; line-height:0}
.vergleichstabelle .minibild img{display:block; max-width:56px; height:auto; mix-blend-mode:multiply}
.vergleichstabelle .preisspalte{font-variant-numeric:tabular-nums; white-space:nowrap}
.vergleichstabelle .preis{font-weight:700}
.vergleichstabelle .produktknopf{padding:.45rem .85rem; font-size:.875rem; white-space:nowrap}

/* --- Einwilligung --------------------------------------------------------- */

.consent{position:fixed; inset:auto 0 0 0; z-index:50; background:var(--bg);
  border-top:1px solid var(--linie-stark)}
.consent-inhalt{max-width:var(--lesespalte); margin:0 auto; padding:1.35rem 1.25rem}
.consent h2{margin:0 0 .5rem; font-size:1.0625rem}
.consent p{font-size:.9375rem; margin:0 0 .85rem}
.consent-optionen{display:grid; gap:.6rem; margin:0 0 1rem; padding:.85rem 1rem;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius)}
.consent-optionen .ankreuz{display:flex; gap:.6rem; align-items:flex-start; font-size:.9375rem}
.consent-optionen input{margin-top:.25rem; flex-shrink:0}
.consent-knoepfe{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.consent .knopf-leise{padding:.65rem 1.25rem; background:var(--bg); color:var(--text);
  border:1px solid var(--linie-stark); border-radius:var(--radius-knopf);
  font:inherit; font-weight:600; cursor:pointer}
.consent .knopf-leise:hover{border-color:var(--akzent); color:var(--akzent)}
.consent .knopf-text{background:none; border:0; color:var(--text-leise); font:inherit;
  text-decoration:underline; cursor:pointer; padding:.65rem .25rem}
.consent .consent-speichern{display:none}
.consent .consent-optionen:not([hidden]) ~ .consent-knoepfe .consent-speichern{display:inline-block}
.consent-fuss{font-size:.8125rem; color:var(--text-leise); margin:.85rem 0 0}

/* --- Werbeplätze ---------------------------------------------------------- */

.werbeplatz{margin:2.5rem 0; padding:.75rem 0; border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.werbeplatz .werbekennzeichnung{margin:0 0 .5rem}
.werbeplatz-leer{border:1px dashed var(--linie); border-radius:var(--radius); height:100%;
  min-height:inherit}
.werbeplatz-sticky{position:sticky; bottom:0}

/* --- Bewegung ------------------------------------------------------------- */

@media (prefers-reduced-motion:no-preference){
  a,button,.themen a{transition:color .12s ease, border-color .12s ease, background-color .12s ease}
}