/* =========================================================================
   Fernsehershop24.de – Landingpage "Die besten Fernseher günstig kaufen"
   Vanilla CSS, keine externen Ressourcen (DSGVO/TDDDG-freundlich).
   Kontraste nach WCAG 2.1 AA geprüft. Akzent: Amazon-Gelb (08/2026).
   ========================================================================= */

:root{
  --ink:#0b0e14;
  --ink-2:#141926;
  --ink-3:#1e2534;
  --paper:#ffffff;
  --paper-2:#f4f6fa;
  --paper-3:#e8ecf4;
  --text:#171c26;
  --text-mute:#525c6e;
  --text-inv:#f2f5fa;
  --text-inv-mute:#a7b1c2;

  --accent:#ffd814;          /* Amazon-Gelb: nur als Fläche, immer mit --on-accent */
  --accent-btn-hover:#f7ca00; /* Flächen-Hover */
  --on-accent:#0b0e14;       /* Text auf gelber Fläche, 13,88:1 */
  --accent-ink:#9a5b00;      /* gelbtoniger Text auf hellem Grund, 5,43:1 */
  --accent-dark:#7d4f00;     /* Text-Hover auf hellem Grund, 7,02:1 */
  --accent-hot:#ffb703;      /* Gelb auf dunklem Grund, 11,06:1 */
  --accent-soft:#fff6e0;
  --gold:#ffb703;
  --link:#0b4fd6;
  --line:#dde3ec;
  --line-dark:#2a3242;

  --r-s:8px;
  --r-m:14px;
  --r-l:22px;
  --sh-1:0 1px 2px rgba(11,14,20,.06), 0 4px 14px rgba(11,14,20,.06);
  --sh-2:0 2px 6px rgba(11,14,20,.08), 0 18px 44px rgba(11,14,20,.12);
  --wrap:1240px;

  --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
       "Noto Sans", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

body{
  margin:0;
  font-family:var(--f);
  font-size:17px;
  line-height:1.62;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}

h1,h2,h3{line-height:1.16; margin:0 0 .5em; letter-spacing:-.02em; font-weight:800}
h1{font-size:clamp(2.3rem, 5.6vw, 4.2rem); letter-spacing:-.03em}
h2{font-size:clamp(1.6rem, 3.1vw, 2.5rem)}
h3{font-size:1.16rem; font-weight:700}
p{margin:0 0 1rem}

a{color:var(--link); text-underline-offset:3px}
a:hover{color:var(--accent-ink)}

:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}
.hero :focus-visible, .usps :focus-visible, .sec--dark :focus-visible,
.foot :focus-visible, .topbar :focus-visible, .kat:focus-visible{
  outline-color:var(--accent-hot);
}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px}
.wrap--narrow{max-width:860px}

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--on-accent); padding:12px 20px; font-weight:700;
  border-radius:0 0 var(--r-s) 0; text-decoration:none;
}
.skip:focus{left:0}

.star{color:var(--accent-ink); font-weight:700}
.ad{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; background:var(--paper-3); color:var(--text-mute);
  padding:3px 8px; border-radius:4px; vertical-align:middle;
}

/* ------------------------------------------------------------------ Topbar */
.topbar{background:var(--ink); color:var(--text-inv-mute); font-size:.79rem}
.topbar__in{display:flex; gap:26px; justify-content:space-between; align-items:center;
  min-height:36px; flex-wrap:wrap}
.topbar__item strong{color:#fff}
@media (max-width:900px){ .topbar__item--hide{display:none} }
@media (max-width:560px){ .topbar__in{justify-content:center; gap:14px; text-align:center} }

/* ------------------------------------------------------------------ Header */
.head{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.head__in{display:flex; align-items:center; gap:20px; min-height:70px}

.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.logo__mark{
  width:26px; height:20px; border-radius:4px; flex:none;
  background:linear-gradient(135deg,var(--accent-hot),var(--accent));
  box-shadow:0 0 0 3px rgba(255,216,20,.18);
  position:relative;
}
.logo__mark::after{
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:12px; height:3px; border-radius:2px; background:var(--accent);
}
.logo__txt{font-weight:800; font-size:1.12rem; letter-spacing:-.02em}
.logo__24{color:var(--accent-ink)}
.logo__de{color:var(--text-mute); font-weight:600}

.nav{margin-left:auto}
.nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0; align-items:center}
.nav a{
  display:block; padding:10px 13px; border-radius:var(--r-s);
  color:var(--text); text-decoration:none; font-weight:600; font-size:.94rem;
}
.nav a:hover{background:var(--paper-2); color:var(--accent-ink)}
.nav__cta{
  background:var(--ink); color:#fff!important; margin-left:8px;
}
.nav__cta:hover{background:var(--accent)!important; color:var(--on-accent)!important}

.burger{
  display:none; margin-left:auto; width:44px; height:40px; border:1px solid var(--line);
  background:#fff; border-radius:var(--r-s); cursor:pointer; padding:0;
  flex-direction:column; gap:5px; align-items:center; justify-content:center;
}
.burger span{display:block; width:19px; height:2px; background:var(--text); border-radius:2px; transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1000px){
  .burger{display:flex}
  .nav{
    position:absolute; left:0; right:0; top:100%; background:#fff;
    border-bottom:1px solid var(--line); box-shadow:var(--sh-2);
    display:none; padding:10px 22px 18px;
  }
  .nav.is-open{display:block}
  .nav ul{flex-direction:column; align-items:stretch; gap:2px}
  .nav a{padding:13px 12px; font-size:1rem}
  .nav__cta{margin:8px 0 0; text-align:center}
}

/* ------------------------------------------------------------------ Hero */
.hero{position:relative; background:var(--ink); color:var(--text-inv); overflow:hidden}
.hero__bg{position:absolute; inset:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center right}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,14,20,.94) 0%, rgba(11,14,20,.82) 38%,
    rgba(11,14,20,.30) 66%, rgba(11,14,20,.55) 100%);
}
.hero__in{position:relative; z-index:2; padding:clamp(56px,8vw,116px) 22px clamp(56px,7vw,104px); max-width:1240px}

.eyebrow{
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-hot); margin:0 0 14px;
}
.eyebrow--dark{color:var(--accent-ink)}

.hero h1{color:#fff; max-width:16ch; margin-bottom:.35em}
.hl{
  background:linear-gradient(180deg, transparent 88%, var(--accent) 88%, var(--accent) 97%, transparent 97%);
  padding-inline:2px;
}
.hero__lead{max-width:56ch; font-size:clamp(1.02rem,1.5vw,1.18rem); color:#dfe5ef}

.hero__btns{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 22px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:700; font-size:1rem; text-decoration:none;
  padding:15px 26px; border-radius:var(--r-s); border:2px solid transparent;
  cursor:pointer; transition:transform .12s ease, background .18s ease, box-shadow .18s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent); color:var(--on-accent); box-shadow:0 6px 20px rgba(255,216,20,.28)}
.btn--primary:hover{background:var(--accent-btn-hover); color:var(--on-accent)}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.42)}
.btn--ghost:hover{background:rgba(255,255,255,.1); color:#fff; border-color:#fff}
.btn--full{width:100%; margin-top:6px}
.btn .star{color:var(--on-accent); margin-left:2px}

.hero__trust{
  display:flex; flex-wrap:wrap; gap:8px 26px; list-style:none; margin:0; padding:0;
  color:#c9d2e0; font-size:.9rem;
}
.hero__trust li{position:relative; padding-left:20px}
.hero__trust li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  border-radius:50%; background:var(--accent-hot);
}

/* Ab 1200px zwei Spalten: Text links, Gerät rechts, kein Text über dem Bild */
@media (min-width:1200px){
  .hero__bg{left:auto; right:0; width:52%; top:6%; bottom:6%}
  .hero__bg img{
    object-position:center;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%),
      linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg, transparent 0, #000 22%),
      linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-composite:intersect;
  }
  .hero::after{
    background:linear-gradient(90deg, rgba(11,14,20,.96) 0%, rgba(11,14,20,.9) 42%,
      rgba(11,14,20,.45) 54%, rgba(11,14,20,0) 68%);
  }
  /* Textspalte endet vor dem Bildpanel (48vw), egal wie breit der Bildschirm ist */
  .hero .eyebrow, .hero h1, .hero__lead, .hero__btns, .hero__trust{
    max-width:min(600px, calc(598px - 2vw));
  }
}
/* Schmalere Desktops behalten das Vollbild, der Text bleibt aber links */
@media (min-width:901px) and (max-width:1199px){
  .hero h1{max-width:14ch}
  .hero__lead{max-width:38ch}
  .hero::after{
    background:linear-gradient(100deg, rgba(11,14,20,.96) 0%, rgba(11,14,20,.9) 46%,
      rgba(11,14,20,.5) 72%, rgba(11,14,20,.6) 100%);
  }
}

@media (max-width:900px){
  .hero__bg img{object-position:center 92%; opacity:.72}
  .hero::after{
    background:linear-gradient(180deg, rgba(11,14,20,.95) 0%, rgba(11,14,20,.90) 46%,
      rgba(11,14,20,.72) 74%, rgba(11,14,20,.55) 100%);
  }
  .hero h1{max-width:none}
  .hero__btns .btn{flex:1 1 220px}
  .hero__trust{flex-direction:column; gap:6px}
}

/* ------------------------------------------------------------------ USPs */
.usps{background:var(--ink-2); color:var(--text-inv); padding:34px 0}
.usps__grid{display:grid; gap:26px; grid-template-columns:repeat(4,1fr)}
.usp__ico{color:var(--accent-hot); font-size:1.4rem; line-height:1}
.usp__t{font-size:1rem; font-weight:700; margin:8px 0 4px; letter-spacing:0; line-height:1.3}
.usp p{margin:0; font-size:.9rem; color:var(--text-inv-mute); line-height:1.55}
@media (max-width:900px){ .usps__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .usps__grid{grid-template-columns:1fr; gap:20px} }

/* ------------------------------------------------------------------ Sections */
.sec{padding:clamp(52px,7vw,96px) 0}
.sec--tint{background:var(--paper-2)}
.sec--dark{background:var(--ink); color:var(--text-inv)}
.sec--dark h2{color:#fff}
.sec--dark p{color:#ccd4e1}

.sec__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:34px;
}
.sec__head h2{margin:0; max-width:22ch}
.sec__note{margin:0; color:var(--text-mute); font-size:.85rem}
.sec--dark .sec__note{color:var(--text-inv-mute)}
.sec__link{font-weight:700; text-decoration:none; white-space:nowrap}
.sec__link::after{content:" →"}

/* ------------------------------------------------------------------ Karten */
.cards{display:grid; gap:24px; grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){ .cards{grid-template-columns:1fr; max-width:560px; margin-inline:auto} }

.card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--sh-1); overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s;
}
.card:hover{box-shadow:var(--sh-2); transform:translateY(-3px)}
.card--win{border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,216,20,.22), var(--sh-1)}
.card--best{border-color:#0f7a4a; box-shadow:0 0 0 3px rgba(15,122,74,.1), var(--sh-1)}

.card__flag{
  background:var(--accent); color:var(--on-accent); font-weight:800; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase; padding:9px 20px;
}
.card__flag--alt{background:#0f7a4a; color:#fff}
.card__flag--dark{background:var(--ink); color:#fff}

.card__body{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1}
.card__brand{font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-mute); margin:0 0 6px}
.card__t{font-size:1.42rem; margin:0 0 6px; letter-spacing:-.02em}
.card__price{font-size:1.05rem; font-weight:800; color:var(--accent-ink); margin:0 0 16px}

.card__specs{list-style:none; margin:0 0 16px; padding:0; border-top:1px solid var(--line)}
.card__specs li{
  display:flex; justify-content:space-between; gap:14px; padding:9px 0;
  border-bottom:1px solid var(--line); font-size:.92rem;
}
.card__specs span{color:var(--text-mute)}
.card__specs b{text-align:right; font-weight:700}

.card__txt{font-size:.94rem; color:#333c4c; flex:1}
.card__more{display:block; text-align:center; margin-top:12px; font-size:.9rem; font-weight:600}

.legal-inline{
  margin-top:26px; font-size:.82rem; color:var(--text-mute); line-height:1.6;
  border-left:3px solid var(--line); padding-left:14px; max-width:88ch;
}
.sec--dark .legal-inline{color:var(--text-inv-mute); border-color:var(--line-dark)}

/* ------------------------------------------------------------------ Kaufberater */
.advisor{display:grid; gap:26px; grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .advisor{grid-template-columns:1fr} }

.advisor__step{border:0; margin:0; padding:0; min-width:0}
.advisor__step legend{
  padding:0; font-weight:800; font-size:1.02rem; color:#fff; margin-bottom:14px;
}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{position:relative; display:inline-flex}
.chip input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.chip span{
  display:inline-block; padding:10px 16px; border-radius:999px; font-size:.9rem; font-weight:600;
  background:var(--ink-3); color:#d6dde9; border:1.5px solid transparent; transition:.15s;
}
.chip input:hover + span{background:#28303f; color:#fff}
.chip input:checked + span{background:var(--accent); color:var(--on-accent); border-color:var(--accent-hot)}
.chip input:focus-visible + span{outline:3px solid var(--accent-hot); outline-offset:3px}

.advisor__out{margin-top:34px}
.advisor__card{
  background:#fff; color:var(--text); border-radius:var(--r-l); padding:28px;
  display:grid; grid-template-columns:1.35fr 1fr; gap:28px; align-items:center;
  box-shadow:var(--sh-2); border-top:5px solid var(--accent);
}
@media (max-width:820px){ .advisor__card{grid-template-columns:1fr; gap:20px} }
.advisor__card h3{font-size:1.5rem; margin:.2em 0 .35em}
.advisor__why{margin:0; font-size:.96rem; color:#333c4c}
.advisor__meta{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none}
.advisor__meta li{
  background:var(--paper-2); border:1px solid var(--line); border-radius:999px;
  padding:5px 13px; font-size:.83rem; font-weight:600;
}
.advisor__buy{text-align:center}
.advisor__buy .card__price{font-size:1.4rem; margin-bottom:12px}
.advisor__alt{margin:12px 0 0; font-size:.88rem; color:var(--text-mute)}

/* Karten in dunklen Sektionen behalten ihre eigenen Textfarben */
.sec--dark .advisor__card p{color:#333c4c}
.sec--dark .advisor__card .card__brand{color:var(--text-mute)}
.sec--dark .advisor__card .card__price{color:var(--accent-ink)}
.sec--dark .advisor__card .advisor__alt{color:var(--text-mute)}

/* ------------------------------------------------------------------ Filter + Tabelle */
.filters{display:grid; gap:12px; margin-bottom:22px}
.filters__row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.filters__label{
  font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-mute); min-width:66px;
}
.filters__set{display:flex; flex-wrap:wrap; gap:7px}
.fbtn{
  font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  padding:8px 15px; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; color:var(--text); transition:.15s;
}
.fbtn:hover{border-color:var(--accent-dark); color:var(--accent-dark)}
.fbtn.is-on{background:var(--ink); border-color:var(--ink); color:#fff}

.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-m); background:#fff}
.ctab{width:100%; border-collapse:collapse; min-width:820px; font-size:.94rem}
.ctab th,.ctab td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line)}
.ctab thead th{
  background:var(--paper-2); font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-mute); font-weight:800; white-space:nowrap; position:sticky; top:0; z-index:2;
}
.sortbtn{
  font:inherit; font-size:inherit; letter-spacing:inherit; text-transform:inherit;
  color:inherit; font-weight:800; background:none; border:0; padding:0; cursor:pointer;
}
.sortbtn::after{content:" ↕"; opacity:.45}
.sortbtn[data-dir="asc"]::after{content:" ↑"; opacity:1; color:var(--accent-ink)}
.sortbtn[data-dir="desc"]::after{content:" ↓"; opacity:1; color:var(--accent-ink)}
.ctab tbody tr:hover{background:var(--accent-soft)}
.ctab td:first-child{font-weight:700}
.ctab .tmodel small{display:block; font-weight:500; color:var(--text-mute); font-size:.82rem}
.tag{
  display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700;
  background:var(--paper-3); color:var(--text);
}
.tag--oled{background:#efe6ff; color:#4b1fa8}
.tag--mini{background:#ffeadf; color:#a33000}
.tag--qled{background:#e2f2ff; color:#0b4a80}
.tbuy{
  display:inline-block; white-space:nowrap; font-weight:700; font-size:.88rem;
  background:var(--accent); color:var(--on-accent)!important; text-decoration:none;
  padding:9px 15px; border-radius:var(--r-s);
}
.tbuy .star{color:var(--on-accent)}                          /* war unsichtbar: Akzent auf Akzent */
.tbuy:hover{background:var(--accent-btn-hover)}
.tab-empty{margin-top:16px; color:var(--text-mute)}

/* ------------------------------------------------------------------ Rechner */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
@media (max-width:900px){ .calc{grid-template-columns:1fr; gap:28px} }
.calc__hint{font-size:.92rem; color:var(--text-mute)}
.calc__box{background:#fff; border:1px solid var(--line); border-radius:var(--r-l);
  padding:28px; box-shadow:var(--sh-1)}
.calc__lab{display:block; font-weight:700; margin-bottom:14px; font-size:1.05rem}
.calc__lab output{color:var(--accent-ink); font-size:1.3rem; font-weight:800}
.calc__range{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px;
  background:var(--paper-3); cursor:pointer; margin:0;
}
.calc__range::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--accent); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.28); cursor:grab;
}
.calc__range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:var(--accent);
  border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.28); cursor:grab;
}
.calc__scale{display:flex; justify-content:space-between; font-size:.78rem;
  color:var(--text-mute); margin-top:8px}
.calc__res{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.calc__big{font-size:2.4rem; font-weight:800; letter-spacing:-.03em; line-height:1.05; margin:0}
.calc__big span{color:var(--accent-ink)}
.calc__sub{margin:6px 0 0; color:var(--text-mute); font-size:.92rem}
.calc__pick{margin:14px 0 0; font-size:.94rem}

/* ------------------------------------------------------------------ Kategorien */
.kats{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .kats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .kats{grid-template-columns:1fr} }
.kat{
  position:relative; display:block; border-radius:var(--r-l); overflow:hidden;
  text-decoration:none; color:#fff; background:var(--ink); aspect-ratio:10/7;
}
.kat img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.kat:hover img{transform:scale(1.05)}
.kat__in{
  position:absolute; inset:auto 0 0 0; padding:22px;
  background:linear-gradient(0deg, rgba(6,8,14,.92), rgba(6,8,14,.55) 55%, transparent);
}
.kat__t{display:block; font-size:1.24rem; font-weight:800; letter-spacing:-.02em}
.kat__s{display:block; font-size:.9rem; color:#c7d0de; margin-top:2px}
.kat::after{
  content:"→"; position:absolute; top:16px; right:18px; width:36px; height:36px;
  display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.16);
  font-size:1.05rem; transition:.2s;
}
.kat:hover::after{background:var(--accent); color:var(--on-accent)}

/* ------------------------------------------------------------------ Blogkarten */
.posts{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .posts{grid-template-columns:1fr} }
.post{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-m); padding:22px; text-decoration:none; color:var(--text);
  transition:.2s; box-shadow:var(--sh-1);
}
.post:hover{border-color:var(--accent); box-shadow:var(--sh-2); transform:translateY(-2px); color:var(--text)}
.post__tag{
  align-self:flex-start; font-size:.72rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft);
  padding:4px 10px; border-radius:999px; margin-bottom:12px;
}
.post h3{font-size:1.06rem; margin:0 0 8px}
.post p{font-size:.9rem; color:var(--text-mute); margin:0 0 14px; flex:1}
.post__go{font-weight:700; font-size:.9rem; color:var(--accent-ink)}
.post__go::after{content:" →"}

/* ------------------------------------------------------------------ FAQ */
.acc{margin-top:26px; border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__i h3{margin:0; font-size:inherit}
.acc__q{
  width:100%; text-align:left; font:inherit; font-size:1.06rem; font-weight:700;
  background:none; border:0; padding:20px 46px 20px 0; cursor:pointer; color:var(--text);
  position:relative; line-height:1.4;
}
.acc__q:hover{color:var(--accent-ink)}
.acc__q::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:1.6rem; font-weight:700; color:var(--accent-ink); line-height:1; transition:transform .2s;
}
.acc__q[aria-expanded="true"]::after{content:"−"}
.acc__a{padding:0 46px 22px 0}
.acc__a p{margin:0; color:#333c4c}

/* ------------------------------------------------------------------ Transparenz */
.trans__lead{font-size:1.06rem}
.trans__list{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px}
.trans__list li{position:relative; padding-left:30px; color:#ccd4e1}
.trans__list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--accent-hot); font-weight:800;
}

/* ------------------------------------------------------------------ Footer */
.foot{background:var(--ink); color:var(--text-inv-mute); padding:56px 0 30px; font-size:.92rem}
.foot__grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px}
@media (max-width:900px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot__grid{grid-template-columns:1fr} }
.foot__col ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot__col a{color:var(--text-inv-mute); text-decoration:none}
.foot__col a:hover{color:#fff; text-decoration:underline}
.foot__t{font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; margin:0 0 14px}
.logo--foot{color:#fff; margin-bottom:12px}
.logo--foot .logo__de{color:var(--text-inv-mute)}
.logo--foot .logo__24{color:var(--accent-hot)}   /* 6,19:1 auf dunklem Grund */
.foot .star{color:var(--accent-hot)}
.foot__col--brand p{max-width:34ch; margin:0}

.foot__legal{
  margin-top:44px; padding-top:24px; border-top:1px solid var(--line-dark);
  font-size:.8rem; line-height:1.65; color:#8e99ab;
}
.foot__legal strong{color:#cbd3e0}
.foot__copy{margin-top:14px; color:#8e99ab}

/* ------------------------------------------------------------------ To top */
.totop{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--ink); color:#fff; border-radius:50%; text-decoration:none;
  box-shadow:var(--sh-2); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s, transform .25s, visibility .25s;
  transform:translateY(10px); font-size:1.1rem;
}
.totop.is-on{opacity:1; visibility:visible; pointer-events:auto; transform:none}
.totop:hover{background:var(--accent); color:var(--on-accent)}

/* ------------------------------------------------------------------ Reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none} }

/* ------------------------------------------------------------------ Print */
@media print{
  .head,.topbar,.totop,.hero__bg,.filters,.btn,.tbuy{display:none!important}
  body{font-size:11pt; color:#000}
  .sec--dark,.hero{background:#fff!important; color:#000!important}
  .hero::after{display:none}
}