/* ============================================================================
   tastivo.de (tv) — "Split"-Design-System
   Portiert aus screen-beispiele/design_handoff_tastivo (v7 Split, hifi):
   warmes Papier, Terrakotta-Akzent, Space Grotesk Headlines, IBM Plex Mono
   Meta. Alles unter .tv gescoped — erbt NICHT das Magazin-CSS.

   Barrierefreiheit (WCAG AA, geprüft):
   - --fg-faint von #979182 auf #6B6557 nachgedunkelt (5.1:1 auf --bg)
   - Akzent-Flächen mit heller Schrift nutzen --accent-fill #B54826 (4.9:1)
     statt #D95B33 (3.5:1); reines --accent bleibt Deko (Punkte, Balken)
   - Farbige Labels als Text: --green-text/--saffron-text/--rose-text/
     --lime-text statt der Deko-Töne (alle >= 4.5:1 auf --bg/--panel)
   ========================================================================== */

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/space-grotesk-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/space-grotesk-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/space-grotesk-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/space-grotesk-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-500.woff2') format('woff2'); }

.tv {
  --bg:      #F4F1E8;
  --panel:   #FCFAF3;
  --panel-2: #EFEBDE;
  --line:    #E3DECD;
  --line-2:  #CEC8B2;
  --fg:      #23211A;
  --fg-soft: #5F5B4C;
  --fg-faint:#6B6557;

  --accent:      #D95B33;
  --accent-fill: #B54826;
  --accent-deep: #B54826;
  --accent-text: #AC4423;
  --accent-ink:  #FCF3EE;
  --saffron: #C28E2C;
  --saffron-text: #8F6516;
  --star: #A2761F;
  --green:   #6E9E85;
  --green-text: #456E59;
  --lime:    #8AA03F;
  --lime-text: #5F7026;
  --rose:    #BC6F7B;
  --rose-text: #9C4855;
  --espresso:#23211A;
  --forest-hero: #3D5244;

  --grotesk: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
  --content: 1180px;
  --prose: 720px;

  background: var(--bg); color: var(--fg);
  font-family: var(--grotesk); font-size: 16.5px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
/* Seiten-Hintergrund auch ausserhalb des Wrappers (Overscroll) */
body.site-tastivo { background: #F4F1E8; }
body.site-tastivo .skip-link { background: #23211A; color: #F4F1E8; }

.tv a { color: inherit; text-decoration: none; }
.tv img { display: block; max-width: 100%; }
.tv button { font-family: inherit; }
.tv ::selection { background: var(--accent); color: var(--accent-ink); }
.tv .mono { font-family: var(--mono); }
.tv h1, .tv h2, .tv h3, .tv h4, .tv p, .tv ul, .tv ol, .tv figure { margin: 0; padding: 0; }
.tv main { flex: 1; width: 100%; }

.tv .wrap { max-width: var(--content); margin: 0 auto; padding: 0 36px; width: 100%; box-sizing: border-box; }
.tv *, .tv *::before, .tv *::after { box-sizing: border-box; }

/* ---------- CMP-BANNER/-MODAL (liegt AUSSERHALB des .tv-Wrappers) -----------
   Default-Buttons sind ink+yellow — bei tv Terrakotta #D95B33 auf Espresso
   #23211A = 4.2:1, zu wenig fuer den kleinen Uppercase-Text (WCAG AA 4.5:1).
   Stattdessen tastivo-Buttons: Accent-Fill #B54826 + helle Schrift (4.9:1).
   Literal-Hex, weil die .tv-Custom-Properties hier nicht greifen. */
body.site-tastivo .cmp-btn--primary,
body.site-tastivo .cmp-btn--equal {
  background: #B54826; color: #FCF3EE; border-color: #B54826;
}
body.site-tastivo .cmp-btn--primary:hover,
body.site-tastivo .cmp-btn--equal:hover {
  background: #A33F20; color: #FCF3EE;
}
body.site-tastivo .cmp-btn--ghost { color: #23211A; border-color: #CEC8B2; }
body.site-tastivo .cmp-btn--ghost:hover { border-color: #23211A; }

/* ---------- HEADER ------------------------------------------------- */
.tv .hd { position: sticky; top: 0; z-index: 60; background: rgba(244,241,232,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.tv .hd__in { max-width: var(--content); margin: 0 auto; padding: 0 36px; display: flex; align-items: center; gap: 28px; height: 66px; }
.tv .hd__logo { font-weight: 700; font-size: 24px; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 3px; flex-shrink: 0; color: var(--fg); }
.tv .hd__logo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tv .hd__nav { display: flex; gap: 22px; flex: 1; }
.tv .hd__nav a { font-weight: 500; font-size: 14.5px; color: var(--fg-soft); transition: color .15s; white-space: nowrap; }
.tv .hd__nav a:hover, .tv .hd__nav a.active { color: var(--fg); }
.tv .hd__saison { font-weight: 600; font-size: 13px; padding: 8px 15px; border-radius: 50px; background: var(--accent-fill); color: var(--accent-ink); white-space: nowrap; transition: transform .15s, filter .15s; }
.tv .hd__saison:hover { transform: translateY(-1px); filter: brightness(1.06); }
.tv .hd__ic { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--fg-soft); cursor: pointer; flex-shrink: 0; transition: border-color .15s, color .15s; background: transparent; }
.tv .hd__ic:hover { border-color: var(--fg); color: var(--fg); }
.tv .hd__ic svg { width: 16px; height: 16px; stroke: currentColor; }
.tv .hd__burger { display: none; }

/* Mobile-Nav (Burger-Panel) */
.tv .hd__panel { display: none; border-top: 1px solid var(--line); background: var(--bg); padding: 14px 20px 20px; }
.tv .hd__panel.open { display: block; }
.tv .hd__panel a { display: block; font-weight: 600; font-size: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--fg); }
.tv .hd__panel a:last-child { border-bottom: none; }
/* Inline-Suchfeld im Header-Panel */
.tv .hd__search { display: none; border-top: 1px solid var(--line); background: var(--bg); padding: 14px 20px; }
.tv .hd__search.open { display: block; }
.tv .hd__search form { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 50px; padding: 0 8px 0 18px; max-width: 560px; margin: 0 auto; }
.tv .hd__search input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--grotesk); font-size: 15px; color: var(--fg); padding: 12px 0; min-width: 0; }
.tv .hd__search button { font-weight: 600; font-size: 13px; padding: 9px 18px; background: var(--fg); color: var(--bg); border: none; border-radius: 50px; cursor: pointer; }

/* ---------- BREADCRUMB ---------------------------------------------- */
.tv .bc { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--fg-faint); padding: 18px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.tv .bc a:hover { color: var(--fg); }
.tv .bc .sep { color: var(--line-2); }

/* ---------- TYPO ------------------------------------------------------ */
.tv .h1 { font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.tv .h2 { font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -.025em; }
.tv .h3 { font-weight: 600; font-size: 19px; letter-spacing: -.015em; }
.tv .lede { font-size: 18px; color: var(--fg-soft); line-height: 1.55; max-width: 60ch; }
.tv .prose { max-width: var(--prose); }
.tv .prose p { margin-bottom: 1.1em; }
.tv .prose h2 { margin: 1.6em 0 .6em; scroll-margin-top: 90px; }
.tv .prose h3 { margin: 1.3em 0 .5em; }
.tv .prose ul, .tv .prose ol { padding-left: 1.3em; margin-bottom: 1.1em; }
.tv .prose li { margin-bottom: .35em; }
.tv .prose a { color: var(--accent-text); border-bottom: 1px solid currentColor; }
.tv .prose table { margin-bottom: 1.1em; }

.tv .meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); }
.tv .meta__author { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-soft); }
.tv .meta__avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(150deg, #C99BA1, #966671); display: inline-flex; align-items: center; justify-content: center; color: #FCF3EE; font-weight: 700; font-size: 11px; font-family: var(--grotesk); }
.tv .meta__stars { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-soft); }
.tv .meta__stars svg { width: 12px; height: 12px; fill: var(--star); stroke: var(--star); }

/* ---------- LABELS / CHIPS / BADGES ----------------------------------- */
.tv .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); display: inline-flex; align-items: center; gap: 7px; }
.tv .lbl .cdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tv .chips { display: flex; gap: 7px; flex-wrap: wrap; }
.tv .chip { font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; padding: 8px 15px; border-radius: 50px; border: 1px solid var(--line-2); background: transparent; color: var(--fg-soft); cursor: pointer; white-space: nowrap; transition: all .15s var(--ease); display: inline-flex; align-items: center; gap: 7px; }
.tv .chip:hover { border-color: var(--fg-faint); color: var(--fg); }
.tv .chip.active { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.tv .badge-thema { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg-soft); padding: 6px 12px; border-radius: 50px; }
.tv .badge-thema:hover { border-color: var(--accent); color: var(--accent-text); }

/* ---------- BUTTONS ------------------------------------------------------ */
.tv .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 13px 22px; min-height: 44px; border-radius: 50px; border: none; cursor: pointer; transition: transform .15s, filter .15s, border-color .15s; }
.tv .btn--primary { background: var(--accent-fill); color: var(--accent-ink); }
.tv .btn--primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.tv .btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--line-2); }
.tv .btn--ghost:hover { border-color: var(--fg); }
.tv .btn svg { width: 16px; height: 16px; stroke: currentColor; }

/* ---------- CONTENT CARD (S/M/L) ------------------------------------------ */
.tv .card { display: block; border-radius: 18px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); transition: transform .2s var(--ease), box-shadow .2s var(--ease); position: relative; }
.tv .card:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(35,33,26,.05), 0 18px 38px -18px rgba(35,33,26,.25); }
.tv .card__img { aspect-ratio: 3/4; position: relative; overflow: hidden; }
.tv .card__img img, .tv .card__img .illus { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.tv .card:hover .card__img img, .tv .card:hover .card__img .illus { transform: scale(1.04); }
.tv .card__body { padding: 15px 17px 17px; }
.tv .card__cat { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.tv .card__cat .cdot { width: 7px; height: 7px; border-radius: 50%; }
.tv .card__t { font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -.015em; }
.tv .card__meta { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); margin-top: 8px; display: flex; gap: 13px; align-items: center; }
.tv .card__meta .rs { display: inline-flex; align-items: center; gap: 5px; }
.tv .card__meta .rs svg { width: 12px; height: 12px; stroke: var(--fg-faint); }
.tv .card__meta .rate-s svg { width: 11px; height: 11px; fill: var(--star); stroke: var(--star); }
.tv .card--s .card__t { font-size: 14.5px; }
.tv .card--s .card__body { padding: 12px 14px 14px; }
.tv .card--l .card__t { font-size: 22px; }
.tv .card--l .card__body { padding: 20px 22px 22px; }

.tv .qcard { display: flex; flex-direction: column; gap: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 18px; padding: 22px; transition: transform .2s, border-color .2s; min-height: 150px; }
.tv .qcard:hover { transform: translateY(-3px); border-color: var(--line-2); }
.tv .qcard__lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-text); display: flex; align-items: center; gap: 7px; }
.tv .qcard__lbl--kueche { color: var(--saffron-text); }
.tv .qcard__t { font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -.015em; }
.tv .qcard__arr { margin-top: auto; color: var(--accent-text); font-size: 17px; }

/* ---------- ECKDATEN-BOX ---------------------------------------------------- */
.tv .eck { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; }
.tv .eck__it { padding: 16px 12px 14px; text-align: center; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.tv .eck__it:first-child { border-left: none; }
.tv .eck__it svg { width: 18px; height: 18px; stroke: var(--accent-text); margin-bottom: 2px; }
.tv .eck__v { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
.tv .eck__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }

/* ---------- TABLES ------------------------------------------------------------ */
.tv .tbl { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); font-size: 14.5px; }
.tv .tbl th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); text-align: left; padding: 12px 16px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-weight: 500; }
.tv .tbl td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tv .tbl tr:last-child td { border-bottom: none; }
.tv .tbl td:first-child { font-weight: 600; }
.tv .tblwrap { border-radius: 14px; overflow-x: auto; }

/* ---------- CALLOUTS ------------------------------------------------------------ */
.tv .tip { display: grid; grid-template-columns: 40px 1fr; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 1.4em 0; align-items: start; }
.tv .tip__ic { width: 40px; height: 40px; border-radius: 50%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; }
.tv .tip__ic svg { width: 17px; height: 17px; stroke: var(--saffron-text); }
.tv .tip__t { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.tv .tip p { font-size: 14.5px; color: var(--fg-soft); margin: 0; }

.tv .shortanswer { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; margin: 22px 0; position: relative; max-width: var(--prose); }
.tv .shortanswer::before { content: 'Die kurze Antwort'; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 8px; }
.tv .shortanswer p { font-size: 17px; font-weight: 500; line-height: 1.5; margin: 0; }

.tv .pro { background: var(--espresso); color: #EFEBE0; border-radius: 18px; padding: 26px 28px; margin: 1.6em 0; }
.tv .pro__h { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.015em; margin-bottom: 14px; color: #F4F1E8; }
.tv .pro__h svg { width: 18px; height: 18px; stroke: var(--saffron); }
.tv .pro ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; }
.tv .pro li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 14.5px; color: rgba(239,235,224,.85); line-height: 1.5; }
.tv .pro li::before { content: '→'; color: #F08A5E; }

.tv .note { display: grid; grid-template-columns: 36px 1fr; gap: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; align-items: center; font-size: 14px; color: var(--fg-soft); }
.tv .note svg { width: 18px; height: 18px; stroke: var(--green-text); }
.tv .note a { font-weight: 600; color: var(--accent-text); border-bottom: 1px solid currentColor; }

/* ---------- FAQ AKKORDEON --------------------------------------------------------- */
.tv .faq { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; }
.tv .faq details { border-top: 1px solid var(--line); }
.tv .faq details:first-child { border-top: none; }
.tv .faq summary { list-style: none; cursor: pointer; padding: 17px 20px; font-weight: 600; font-size: 15.5px; display: flex; align-items: center; gap: 12px; transition: background .15s; }
.tv .faq summary::-webkit-details-marker { display: none; }
.tv .faq summary:hover { background: var(--panel-2); }
.tv .faq summary::after { content: '+'; margin-left: auto; font-family: var(--mono); font-size: 17px; color: var(--accent-text); transition: transform .2s; }
.tv .faq details[open] summary::after { transform: rotate(45deg); }
.tv .faq .faq__a { padding: 0 20px 18px; font-size: 14.5px; color: var(--fg-soft); max-width: 64ch; }

/* ---------- AUTOREN-BOX -------------------------------------------------------------- */
.tv .author { display: grid; grid-template-columns: 72px 1fr; gap: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; align-items: center; }
.tv .author__avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(150deg, #C99BA1, #966671); display: flex; align-items: center; justify-content: center; color: #FCF3EE; font-weight: 700; font-size: 24px; overflow: hidden; flex-shrink: 0; }
.tv .author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tv .author__name { font-weight: 700; font-size: 17px; letter-spacing: -.015em; }
.tv .author__role { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin: 3px 0 7px; }
.tv .author__bio { font-size: 14px; color: var(--fg-soft); line-height: 1.5; margin: 0; }
.tv .author__link { font-weight: 600; font-size: 13px; color: var(--accent-text); display: inline-block; margin-top: 7px; }
.tv .author--s { grid-template-columns: 44px 1fr; padding: 14px 16px; }
.tv .author--s .author__avatar { width: 44px; height: 44px; font-size: 15px; }
.tv .author--s .author__name { font-size: 15px; }
.tv .author--s .author__bio, .tv .author--s .author__link { display: none; }

/* ---------- AD-SLOTS -------------------------------------------------------------- */
.tv .ad { background: repeating-linear-gradient(45deg, var(--panel-2) 0 14px, var(--panel) 14px 28px); border: 1px dashed var(--line-2); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-faint); }
.tv .ad__lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.tv .ad__size { font-family: var(--mono); font-size: 11px; }
.tv .ad--content { width: 100%; height: 250px; margin: 30px 0; }
.tv .ad--side { width: 300px; height: 600px; }
.tv .ad--mobile { width: 320px; height: 250px; margin: 26px auto; display: none; max-width: 100%; }
body.site-tastivo.no-ad-placeholders .tv .ad { display: none !important; }
/* Echte Backend-Anzeigen (AdRenderer-Output) im tastivo-Raster */
.tv .ad-live--content { margin: 30px 0; }
.tv .ad-live--side { width: 300px; }
.tv .ad-live .admanager-slot { margin: 0 !important; }

/* ---------- CTA NEWSLETTER / PINTEREST ---------------------------------------------------- */
.tv .cta { background: var(--accent-fill); color: var(--accent-ink); border-radius: 20px; padding: 34px 36px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; margin: 36px 0; }
.tv .cta__t { font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.025em; line-height: 1.08; margin-bottom: 7px; }
.tv .cta__s { font-size: 14.5px; opacity: .95; max-width: 46ch; }
.tv .cta__form { display: flex; gap: 8px; min-width: 340px; }
.tv .cta__in { flex: 1; font-family: var(--grotesk); font-size: 14px; padding: 13px 17px; border: none; border-radius: 50px; outline: none; background: rgba(252,243,238,.96); color: var(--fg); min-width: 0; }
.tv .cta__in::placeholder { color: var(--fg-faint); }
.tv .cta__btn { font-weight: 600; font-size: 14px; padding: 0 22px; min-height: 46px; background: var(--espresso); color: #F4F1E8; border: none; border-radius: 50px; cursor: pointer; transition: transform .15s; }
.tv .cta__btn:hover { transform: translateY(-1px); }
.tv .cta__pin { font-family: var(--mono); font-size: 11px; margin-top: 10px; }
.tv .cta__pin a { border-bottom: 1px solid currentColor; font-weight: 500; }

/* ---------- BEWERTUNGS-WIDGET ---------------------------------------------------------------- */
.tv .rate { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px; text-align: center; }
.tv .rate__t { font-weight: 700; font-size: 19px; letter-spacing: -.02em; margin-bottom: 4px; }
.tv .rate__s { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); margin-bottom: 14px; }
.tv .rate__stars { display: inline-flex; gap: 6px; }
.tv .rate__star { width: 44px; height: 44px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tv .rate__star svg { width: 30px; height: 30px; fill: none; stroke: var(--line-2); stroke-width: 1.6; transition: all .12s; }
.tv .rate__star.on svg { fill: var(--star); stroke: var(--star); }

/* ---------- SECTION HEAD / GRIDS ------------------------------------------------ */
.tv .sh { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.tv .sh__t { font-weight: 700; font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.025em; }
.tv .sh__link { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft); white-space: nowrap; }
.tv .sh__link:hover { color: var(--accent-text); }
.tv .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tv .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tv .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tv .sec { margin: 44px 0; scroll-margin-top: 130px; }

/* ---------- FOOTER ---------------------------------------------------------------------------------- */
.tv .ft { background: var(--espresso); color: #C9C4B4; margin-top: 80px; padding: 60px 0 28px; }
.tv .ft__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.tv .ft__logo { font-weight: 700; font-size: 24px; color: #F4F1E8; display: flex; align-items: baseline; gap: 3px; margin-bottom: 12px; }
.tv .ft__logo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tv .ft__about { font-size: 13.5px; line-height: 1.6; color: #ACA797; max-width: 30ch; }
.tv .ft__social { display: flex; gap: 8px; margin-top: 16px; }
.tv .ft__soc { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(244,241,232,.25); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10.5px; color: #C9C4B4; transition: all .15s; }
.tv .ft__soc:hover { border-color: var(--accent); color: #F4F1E8; }
.tv .ft__soc--pin { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); font-weight: 700; }
.tv .ft h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #9A957F; margin-bottom: 14px; font-weight: 500; }
.tv .ft__grid a { display: block; font-size: 14px; padding: 4px 0; color: #C9C4B4; transition: color .15s; }
.tv .ft__grid a:hover { color: #F4F1E8; }
.tv .ft__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: 10.5px; color: #9A957F; padding-top: 22px; border-top: 1px solid rgba(244,241,232,.14); margin-top: 36px; }

/* ---------- ILLUS-PLATZHALTER (bis gpt-image-2-Fotos da sind) ----------------- */
.tv .illus { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tv .illus::before { content: attr(data-letter); position: relative; font-weight: 700; color: rgba(252,250,243,.55); line-height: 1; z-index: 2; font-size: 38px; letter-spacing: -.02em; }
.tv .illus::after { content: ''; position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(120% 80% at 22% 18%, rgba(255,255,255,.16), transparent 55%),
  radial-gradient(100% 90% at 82% 88%, rgba(0,0,0,.16), transparent 55%); }
.tv .illus-green  { background: linear-gradient(150deg, #A9BC8E, #6F8A5B); }
.tv .illus-red    { background: linear-gradient(150deg, #D08A64, #AC5A33); }
.tv .illus-orange { background: linear-gradient(150deg, #D9AC62, #B07F36); }
.tv .illus-yellow { background: linear-gradient(150deg, #D9C480, #A9914C); }
.tv .illus-mint   { background: linear-gradient(150deg, #9CC0AC, #678F79); }
.tv .illus-teal   { background: linear-gradient(150deg, #8DB0A6, #5C8278); }
.tv .illus-pink   { background: linear-gradient(150deg, #C99BA1, #966671); }
.tv .illus-forest { background: linear-gradient(150deg, #7A957F, #49624F); }

/* Kategorie-Punkte (nur Deko-Flaechen, kein Text) */
.tv .c-rezepte { background: var(--accent); }
.tv .c-wissen  { background: var(--green); }
.tv .c-kueche  { background: var(--saffron); }
.tv .c-magazin { background: var(--rose); }
.tv .c-saison  { background: var(--lime); }
.tv .c-schnell { background: var(--saffron); }

/* ============================================================================
   STARTSEITE — Vollbild-Split (v7)
   ========================================================================== */
.tv .split { display: grid; grid-template-columns: 46% 54%; min-height: 100vh; }
.tv .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
.tv .stage__bg { position: absolute; inset: 0; z-index: 0; }
.tv .stage__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv .stage__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(30,26,18,.82) 0%, rgba(30,26,18,.18) 48%, rgba(30,26,18,.34) 100%); }
.tv .stage__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 26px 34px; }
.tv .stage__logo { font-weight: 700; font-size: 25px; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 3px; color: #F4F1E8; }
.tv .stage__logo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tv .stage__count { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: rgba(244,241,232,.85); }
.tv .stage__info { position: relative; z-index: 2; padding: 34px; }
.tv .stage__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #F0926B; margin-bottom: 14px; display: block; }
.tv .stage__title { font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.02; letter-spacing: -.03em; color: #F8F5EC; max-width: 16ch; margin-bottom: 16px; text-wrap: balance; }
.tv .stage__meta { font-family: var(--mono); font-size: 12.5px; color: rgba(248,245,236,.85); display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.tv .stage__btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px; padding: 14px 24px; background: var(--accent-fill); color: var(--accent-ink); border: none; border-radius: 50px; cursor: pointer; transition: transform .15s, filter .15s; }
.tv .stage__btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.tv .stage__info.swap { animation: tvswap .3s var(--ease); }
@keyframes tvswap { from { transform: translateY(10px); } to { transform: none; } }

.tv .list { min-width: 0; }
.tv .list__head { padding: 30px 40px 6px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.tv .list__t { font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.025em; }
.tv .list__hint { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); margin-left: auto; }
.tv .list__search { margin: 14px 40px 4px; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 15px; transition: border-color .2s; }
.tv .list__search:focus-within { border-color: var(--accent); }
.tv .list__search svg { width: 15px; height: 15px; stroke: var(--fg-faint); flex-shrink: 0; }
.tv .list__search input { flex: 1; border: none; outline: none; background: transparent; color: var(--fg); font-family: var(--grotesk); font-size: 14px; min-width: 0; }
.tv .list__search input::placeholder { color: var(--fg-faint); }

.tv .grp { padding: 26px 40px 8px; }
.tv .grp__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tv .grp__label .cdot { width: 8px; height: 8px; border-radius: 50%; }
.tv .grp__label .n { margin-left: auto; }

.tv .it { display: grid; grid-template-columns: 1fr auto auto 26px; gap: 18px; align-items: baseline; padding: 17px 0; border-top: 1px solid var(--line); cursor: pointer; transition: padding-left .2s var(--ease); position: relative; }
.tv .grp .it:first-of-type { border-top: none; }
.tv .it:hover, .tv .it.active { padding-left: 12px; }
.tv .it::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 60%; border-radius: 2px; background: var(--accent); transition: transform .2s var(--ease); }
.tv .it:hover::before, .tv .it.active::before { transform: translateY(-50%) scaleY(1); }
.tv .it__t { font-weight: 600; font-size: 19px; letter-spacing: -.015em; line-height: 1.25; color: var(--fg-soft); transition: color .15s; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv .it:hover .it__t, .tv .it.active .it__t { color: var(--fg); }
.tv .it__time { font-family: var(--mono); font-size: 12px; color: var(--fg-faint); white-space: nowrap; }
.tv .it__rate { font-family: var(--mono); font-size: 12px; color: var(--fg-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.tv .it__rate svg { width: 11px; height: 11px; fill: var(--star); stroke: var(--star); }
.tv .it__arr { color: var(--fg-faint); font-size: 16px; text-align: right; transition: color .15s, transform .2s; }
.tv .it:hover .it__arr, .tv .it.active .it__arr { color: var(--accent-text); transform: translateX(3px); }
.tv .it.is-hidden { display: none; }

.tv .bottom { padding: 34px 40px 28px; border-top: 1px solid var(--line); margin-top: 26px; display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; }
.tv .bottom__t { font-weight: 700; font-size: 22px; letter-spacing: -.02em; margin-bottom: 4px; }
.tv .bottom__t .a { color: var(--accent-text); }
.tv .bottom__s { font-size: 13.5px; color: var(--fg-soft); max-width: 44ch; }
.tv .nl__form { display: flex; gap: 8px; min-width: 320px; }
.tv .nl__in { flex: 1; font-family: var(--grotesk); font-size: 14px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 10px; outline: none; background: var(--panel); color: var(--fg); min-width: 0; transition: border-color .2s; }
.tv .nl__in:focus { border-color: var(--accent); }
.tv .nl__in::placeholder { color: var(--fg-faint); }
.tv .nl__btn { font-weight: 600; font-size: 13.5px; padding: 12px 20px; background: var(--accent-fill); color: var(--accent-ink); border: none; border-radius: 10px; cursor: pointer; transition: transform .15s, filter .15s; }
.tv .nl__btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.tv .nl__hint { font-size: 11px; color: var(--fg-faint); margin-top: 8px; max-width: 60ch; }
.tv .nl__hint a { border-bottom: 1px solid currentColor; }
.tv .foot { padding: 0 40px 30px; font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.tv .foot a:hover { color: var(--fg); }
.tv .flash { max-width: 560px; margin: 14px 40px 0; background: var(--panel); border: 1px solid var(--green-text); color: var(--green-text); border-radius: 12px; padding: 12px 16px; font-size: 14px; }
.tv .flash--error { border-color: var(--accent-text); color: var(--accent-text); }

/* ============================================================================
   SEITENSPEZIFISCHE KOMPONENTEN (aus den Handoff-Views)
   ========================================================================== */

/* --- Rezept-Detail --- */
.tv .layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
.tv .side { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 18px; }
.tv .toc { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.tv .toc__t { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 10px; }
.tv .toc a { display: block; font-size: 13.5px; font-weight: 500; color: var(--fg-soft); padding: 5px 0; transition: color .15s; }
.tv .toc a:hover { color: var(--accent-text); }
.tv .toc--guide { max-width: var(--prose); margin: 22px 0; padding: 18px 22px; }
.tv .toc--guide ol { list-style: none; counter-reset: toc; columns: 2; gap: 24px; padding: 0; }
.tv .toc--guide li { counter-increment: toc; margin-bottom: 6px; break-inside: avoid; }
.tv .toc--guide a { font-size: 14px; display: inline-flex; gap: 8px; padding: 0; }
.tv .toc--guide a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--accent-text); }

.tv .rhead { display: grid; grid-template-columns: 380px 1fr; gap: 30px; align-items: start; margin: 24px 0 10px; }
.tv .rhead__col { min-width: 0; }
.tv .rhero { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3/4; }
.tv .rhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv .rhero--solo { max-width: 440px; margin: 24px 0; }
.tv .rhead .eck { grid-template-columns: repeat(3, 1fr); }
.tv .rhead .eck__it:nth-child(n+4) { border-top: 1px solid var(--line); }
.tv .rhead .eck__it:nth-child(4) { border-left: none; }
.tv .rhero__actions { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 20px; }

.tv .zut { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; margin: 1.6em 0; scroll-margin-top: 90px; }
.tv .zut__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tv .zut__t { font-weight: 700; font-size: 21px; letter-spacing: -.02em; margin: 0; }
.tv .portions { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-2); border-radius: 50px; overflow: hidden; margin-left: auto; }
.tv .portions button { width: 42px; height: 42px; border: none; background: transparent; font-size: 19px; font-weight: 600; color: var(--accent-text); cursor: pointer; transition: background .15s; }
.tv .portions button:hover { background: var(--panel-2); }
.tv .portions__v { font-family: var(--mono); font-size: 13px; padding: 0 8px; min-width: 86px; text-align: center; }
.tv .zgroup { margin-top: 16px; }
.tv .zgroup__t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 8px; }
.tv .zrow { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; margin: 0; }
.tv .zrow:hover .zrow__name { color: var(--fg); }
.tv .zrow input { width: 17px; height: 17px; accent-color: var(--accent-fill); cursor: pointer; transform: translateY(2px); }
.tv .zrow__amt { font-family: var(--mono); font-size: 13px; color: var(--fg-soft); min-width: 76px; }
.tv .zrow__name { font-size: 15.5px; font-weight: 500; color: var(--fg-soft); transition: color .15s; }
.tv .zrow__name a { color: var(--accent-text); border-bottom: 1px dotted currentColor; }
.tv .zrow.done .zrow__amt, .tv .zrow.done .zrow__name { text-decoration: line-through; opacity: .55; }

.tv .steps { counter-reset: step; list-style: none; display: flex; flex-direction: column; gap: 22px; margin: 1.2em 0; padding: 0; }
.tv .step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.tv .step::before { counter-increment: step; content: counter(step); width: 44px; height: 44px; border-radius: 50%; background: var(--espresso); color: #F4F1E8; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.tv .step__body p { font-size: 15.5px; line-height: 1.6; margin: 0; }
.tv .step__img { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3/4; margin-top: 12px; max-width: 300px; }
.tv .step__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- Zutaten-Seite --- */
.tv .zhero { display: grid; grid-template-columns: 400px 1fr; gap: 22px; margin: 26px 0 8px; align-items: start; }
.tv .zhero__img { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3/4; }
.tv .zhero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv .steck { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; }
.tv .steck__t { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); }
.tv .steck__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; border-top: 1px solid var(--line); padding-top: 12px; }
.tv .steck__row:first-of-type { border-top: none; padding-top: 0; }
.tv .steck__k { color: var(--fg-soft); }
.tv .steck__v { font-weight: 600; text-align: right; }
.tv .sbar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.tv .sbar__m { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tv .sbar__seg { width: 100%; height: 34px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); }
.tv .sbar__seg.on { background: var(--green); border-color: var(--green); }
.tv .sbar__seg.peak { background: var(--accent); border-color: var(--accent); }
.tv .sbar__l { font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; color: var(--fg-faint); text-transform: uppercase; }
.tv .sbar__legend { display: flex; gap: 16px; font-family: var(--mono); font-size: 10px; color: var(--fg-faint); }
.tv .sbar__legend span { display: inline-flex; align-items: center; gap: 6px; }
.tv .sbar__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tv .jump { position: sticky; top: 66px; z-index: 40; background: rgba(244,241,232,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); padding: 12px 0; margin-top: 18px; }
.tv .jump .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tv .jump .chips::-webkit-scrollbar { display: none; }
.tv .ersatz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tv .ers { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.tv .ers__name { font-weight: 700; font-size: 16px; letter-spacing: -.015em; }
.tv .ers__ratio { font-family: var(--mono); font-size: 11px; color: var(--accent-text); margin: 5px 0 8px; }
.tv .ers__note { font-size: 13.5px; color: var(--fg-soft); line-height: 1.5; margin: 0; }
.tv .minicard { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 50px; padding: 8px 18px 8px 8px; transition: transform .15s, border-color .15s; }
.tv .minicard:hover { transform: translateY(-2px); border-color: var(--line-2); }
.tv .minicard__img { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0; }
.tv .minicard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv .minicard__t { font-weight: 600; font-size: 14.5px; }

/* --- Kategorieseiten --- */
.tv .khero { border-radius: 20px; background: var(--panel-2); border: 1px solid var(--line); padding: 30px 32px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 22px 0 20px; }
.tv .khero__t { font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em; color: var(--fg); margin: 0; }
.tv .khero__n { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); }
.tv .kintro { max-width: var(--prose); color: var(--fg-soft); font-size: 15.5px; line-height: 1.6; }
.tv .kintro a { color: var(--accent-text); border-bottom: 1px solid currentColor; }
.tv .kintro__more { display: none; }
.tv .kintro.open .kintro__more { display: inline; }
.tv .kintro__btn { background: none; border: none; color: var(--accent-text); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; }
.tv .fbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 26px 0 20px; }
.tv .fbar__sort { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-soft); background: transparent; border: 1px solid var(--line-2); border-radius: 50px; padding: 9px 15px; cursor: pointer; }
.tv .fbar__sort:hover { border-color: var(--fg-faint); color: var(--fg); }
.tv .pager { display: flex; justify-content: center; gap: 6px; margin: 36px 0 10px; }
.tv .pager a, .tv .pager span.cur { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 50%; font-family: var(--mono); font-size: 12.5px; color: var(--fg-soft); transition: all .15s; padding: 0 8px; }
.tv .pager a:hover { border-color: var(--fg); color: var(--fg); }
.tv .pager .cur { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.tv .xlinks { display: flex; gap: 8px; flex-wrap: wrap; }
.tv .wfeat { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tv .wf { background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; padding: 28px 30px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s, border-color .2s; }
.tv .wf:hover { transform: translateY(-3px); border-color: var(--line-2); }
.tv .wf__lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-text); }
.tv .wf__t { font-weight: 700; font-size: 24px; line-height: 1.18; letter-spacing: -.02em; }
.tv .wf__teaser { font-size: 14.5px; color: var(--fg-soft); line-height: 1.55; margin: 0; }
.tv .wf__teaser strong { color: var(--fg); }
.tv .wf__arr { margin-top: auto; color: var(--accent-text); font-weight: 600; font-size: 14px; }

/* --- Zutaten-Index (A-Z) --- */
.tv .isearch { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 50px; padding: 0 10px 0 20px; max-width: 520px; margin: 24px 0; }
.tv .isearch:focus-within { border-color: var(--accent); }
.tv .isearch svg { width: 17px; height: 17px; stroke: var(--fg-faint); flex-shrink: 0; }
.tv .isearch input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--grotesk); font-size: 15px; color: var(--fg); padding: 15px 0; min-width: 0; }
.tv .isearch input::placeholder { color: var(--fg-faint); }
.tv .alpha { display: flex; gap: 4px; flex-wrap: wrap; margin: 18px 0 8px; }
.tv .alpha a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; border-radius: 50%; color: var(--fg-soft); border: 1px solid transparent; transition: all .15s; }
.tv .alpha a:hover { border-color: var(--line-2); color: var(--fg); }
.tv .alpha a.dis { opacity: .3; pointer-events: none; }
.tv .igroup { margin: 30px 0; scroll-margin-top: 90px; }
.tv .igroup__t { font-weight: 700; font-size: 28px; letter-spacing: -.025em; color: var(--accent-text); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 16px; }
.tv .igrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tv .ient { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px 10px 10px; transition: transform .15s, border-color .15s; }
.tv .ient:hover { transform: translateY(-2px); border-color: var(--line-2); }
.tv .ient__img { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; position: relative; flex-shrink: 0; }
.tv .ient__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv .ient__t { font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.tv .ient__s { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); margin-top: 2px; display: block; }
.tv .ient__s.insea { color: var(--accent-text); }
.tv .ient.is-hidden { display: none; }
.tv .igroup.is-hidden { display: none; }

/* --- Ratgeber --- */
.tv .rel { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: var(--prose); }
.tv .rel a { display: flex; align-items: baseline; gap: 10px; padding: 13px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-weight: 600; font-size: 15px; transition: border-color .15s, transform .15s; }
.tv .rel a:hover { border-color: var(--line-2); transform: translateX(3px); }
.tv .rel a::before { content: '→'; color: var(--accent-text); }

/* --- Was-passt-zu --- */
.tv .quick { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; margin: 20px 0; max-width: var(--prose); }
.tv .quick::before { content: 'Die Top 3'; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 8px; }
.tv .quick p { font-size: 16.5px; font-weight: 500; margin: 0; }
.tv .lsec { margin: 38px 0; scroll-margin-top: 130px; max-width: 860px; }
.tv .litem { display: grid; grid-template-columns: 56px 96px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); align-items: start; }
.tv .litem:last-child { border-bottom: 1px solid var(--line); }
.tv .litem__num { font-family: var(--mono); font-size: 15px; color: var(--accent-text); padding-top: 4px; }
.tv .litem__img { width: 96px; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; position: relative; }
.tv .litem__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv .litem__t { font-weight: 700; font-size: 18.5px; letter-spacing: -.015em; margin-bottom: 6px; }
.tv .litem__p { font-size: 14.5px; color: var(--fg-soft); line-height: 1.55; margin: 0; }
.tv .litem__btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; font-size: 12.5px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 50px; color: var(--fg); transition: border-color .15s, color .15s; }
.tv .litem__btn:hover { border-color: var(--accent); color: var(--accent-text); }

/* --- Themen-Hub --- */
.tv .thero { position: relative; background: var(--forest-hero); display: flex; align-items: flex-end; min-height: 320px; }
.tv .thero__over { position: relative; z-index: 2; width: 100%; padding: 70px 0 48px; }
.tv .thero__lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #F4D8CB; display: block; margin-bottom: 14px; }
.tv .thero__t { font-weight: 700; font-size: clamp(34px, 5vw, 60px); letter-spacing: -.03em; line-height: 1; color: #F8F5EC; max-width: 18ch; margin-bottom: 12px; text-wrap: balance; }
.tv .thero__s { font-size: 17px; color: rgba(248,245,236,.88); max-width: 50ch; }
.tv .tintro { font-size: 17px; color: var(--fg-soft); line-height: 1.6; max-width: var(--prose); margin: 30px 0 10px; }
.tv .tintro em { color: var(--fg); font-style: normal; font-weight: 600; }
.tv .mix { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.tv .mix__side { display: flex; flex-direction: column; gap: 14px; }
.tv .mrow { display: grid; grid-template-columns: 68px 1fr; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px; transition: transform .15s, border-color .15s; }
.tv .mrow:hover { transform: translateY(-2px); border-color: var(--line-2); }
.tv .mrow__img { width: 68px; aspect-ratio: 3/4; border-radius: 11px; overflow: hidden; position: relative; }
.tv .mrow__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv .mrow__t { font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.tv .mrow__m { font-family: var(--mono); font-size: 10px; color: var(--fg-faint); margin-top: 4px; }

/* --- Magazin --- */
.tv .cat-lbl { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-text); margin-top: 22px; }
.tv .cat-lbl::before { content: ''; width: 22px; height: 1.5px; background: var(--rose); }
.tv .quote { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; margin: 2em 0; }
.tv .quote p { font-weight: 600; font-size: 22px; line-height: 1.35; letter-spacing: -.015em; max-width: 26ch; margin: 0 0 10px; }
.tv .quote cite { font-family: var(--mono); font-size: 11px; font-style: normal; color: var(--fg-faint); }
.tv .nutzwert { background: var(--panel); border: 1px solid var(--accent); border-radius: 18px; padding: 24px 26px; margin: 2em 0; }
.tv .nutzwert__t { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--accent-text); margin-bottom: 12px; }
.tv .nutzwert__t svg { width: 18px; height: 18px; stroke: var(--accent-text); }
.tv .nutzwert ul { list-style: none; display: flex; flex-direction: column; gap: 9px; padding: 0; margin: 0; }
.tv .nutzwert li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 14.5px; color: var(--fg-soft); line-height: 1.5; }
.tv .nutzwert li::before { content: '→'; color: var(--accent-text); }
.tv .aimg { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; max-width: 440px; margin: 1.8em 0; }
.tv .aimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv .aimg__cap { font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); margin-top: -1em; margin-bottom: 2em; }

/* --- Saisonkalender --- */
.tv .mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 30px 0; }
.tv .mtile { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 3/4; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.tv .mtile:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -18px rgba(35,33,26,.3); }
.tv .mtile .illus, .tv .mtile > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.tv .mtile .illus::before { font-size: 56px; }
.tv .mtile__over { position: relative; z-index: 2; padding: 16px 18px; background: linear-gradient(to top, rgba(30,26,18,.85), rgba(30,26,18,.2) 75%, transparent); }
.tv .mtile__t { font-weight: 700; font-size: 21px; letter-spacing: -.02em; color: #F8F5EC; }
.tv .mtile__s { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: rgba(248,245,236,.85); margin-top: 3px; display: block; }
.tv .mtile__now { position: absolute; top: 12px; left: 12px; z-index: 3; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; background: var(--accent-fill); color: var(--accent-ink); padding: 5px 11px; border-radius: 50px; }
.tv .mnav { display: flex; align-items: center; gap: 14px; margin: 22px 0 8px; }
.tv .mnav__btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; padding: 10px 17px; border: 1px solid var(--line-2); border-radius: 50px; color: var(--fg-soft); transition: all .15s; }
.tv .mnav__btn:hover { border-color: var(--fg); color: var(--fg); }
.tv .mnav__cur { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin: 0 auto; }
.tv .pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tv .pcard { display: block; border-radius: 16px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.tv .pcard:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(35,33,26,.28); }
.tv .pcard__img { aspect-ratio: 3/4; position: relative; }
.tv .pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv .pcard__body { padding: 12px 15px 14px; }
.tv .pcard__t { font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }
.tv .pcard__s { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); margin-top: 4px; display: block; }
.tv .pcard__s.peak { color: var(--accent-text); }
.tv .gsec { margin: 36px 0; }

/* --- Autorenseite --- */
.tv .ahero { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; margin: 34px 0; }
.tv .ahero__pic { width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(150deg, #C99BA1, #966671); display: flex; align-items: center; justify-content: center; color: #FCF3EE; font-weight: 700; font-size: 64px; overflow: hidden; }
.tv .ahero__pic img { width: 100%; height: 100%; object-fit: cover; }
.tv .ahero__role { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 10px; }
.tv .ahero__bio { font-size: 16px; color: var(--fg-soft); line-height: 1.6; max-width: 58ch; margin-top: 14px; }
.tv .ahero__chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.tv .ahero__soc { display: flex; gap: 8px; margin-top: 18px; }
.tv .ahero__soc a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10.5px; color: var(--fg-soft); transition: all .15s; }
.tv .ahero__soc a:hover { border-color: var(--accent); color: var(--accent-text); }
.tv .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 620px; margin: 30px 0; }
.tv .fact { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.tv .fact__v { font-weight: 700; font-size: 24px; letter-spacing: -.02em; }
.tv .fact__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin-top: 3px; }

/* --- Suche --- */
.tv .ssearch { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 50px; padding: 0 10px 0 22px; max-width: 640px; margin: 28px 0 10px; }
.tv .ssearch:focus-within { border-color: var(--accent); }
.tv .ssearch svg { width: 18px; height: 18px; stroke: var(--fg-faint); flex-shrink: 0; }
.tv .ssearch input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--grotesk); font-size: 16.5px; color: var(--fg); padding: 17px 0; min-width: 0; }
.tv .ssearch button { font-weight: 600; font-size: 14px; padding: 12px 22px; background: var(--fg); color: var(--bg); border: none; border-radius: 50px; cursor: pointer; }
.tv .scount { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); margin: 6px 0 18px; }
.tv .scount strong { color: var(--fg); }
.tv .typetag { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg-soft); position: absolute; top: 10px; left: 10px; z-index: 3; }
.tv .empty { background: var(--panel); border: 1px dashed var(--line-2); border-radius: 18px; padding: 40px; text-align: center; margin-top: 22px; display: none; }
.tv .empty.show { display: block; }
.tv .empty__t { font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.tv .empty__s { font-size: 14.5px; color: var(--fg-soft); margin-bottom: 18px; }

/* --- Kommentare (Gast, moderiert) --- */
.tv .tvc { max-width: var(--prose); }
.tv .tvc__list { list-style: none; display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 0 0 26px; }
.tv .tvc__item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.tv .tvc__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg-soft); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.tv .tvc__meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.tv .tvc__meta strong { font-size: 15px; letter-spacing: -.01em; }
.tv .tvc__meta time { font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); }
.tv .tvc__text { font-size: 14.5px; color: var(--fg-soft); line-height: 1.55; margin: 0; }
.tv .tvc__empty { font-size: 14.5px; color: var(--fg-soft); margin: 0 0 22px; }
.tv .tvc__reply-btn { background: none; border: none; padding: 0; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); cursor: pointer; }
.tv .tvc__reply-btn:hover { color: var(--accent-deep); text-decoration: underline; }
.tv .tvc__list--replies { margin: 14px 0 0; gap: 10px; }
.tv .tvc__item--reply { background: var(--panel-2); padding: 12px 14px; }
.tv .tvc__avatar--s { width: 34px; height: 34px; font-size: 13px; }
.tv .tvc__item--reply { grid-template-columns: 34px 1fr; }
.tv .tvc__form--reply { margin-top: 14px; padding: 16px 18px; background: var(--panel-2); }
.tv .tvc__textarea--s { min-height: 80px; }
.tv .tvc__form { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.tv .tvc__field { display: block; }
.tv .tvc__field .lbl { display: block; margin-bottom: 6px; }
.tv .tvc__row { display: grid; grid-template-columns: minmax(0, 320px); }
.tv .tvc__input, .tv .tvc__textarea { width: 100%; font-family: var(--grotesk); font-size: 15px; padding: 12px 15px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); color: var(--fg); outline: none; transition: border-color .15s; }
.tv .tvc__input:focus, .tv .tvc__textarea:focus { border-color: var(--accent); }
.tv .tvc__textarea { resize: vertical; min-height: 110px; }
.tv .tvc__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tv .tvc__hint { font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); max-width: 46ch; }
.tv .tvc__foot .btn { margin-left: auto; }

/* --- 404 --- */
.tv .nf { display: grid; grid-template-columns: 300px 1fr; gap: 50px; align-items: center; padding: 70px 0 40px; max-width: 920px; }
.tv .nf__img { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3/4; }
.tv .nf__code { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 12px; }
.tv .nf__t { font-weight: 700; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 12px; }
.tv .nf__s { font-size: 16px; color: var(--fg-soft); max-width: 44ch; margin-bottom: 22px; }
.tv .nfsearch { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 50px; padding: 0 8px 0 20px; max-width: 460px; margin-bottom: 18px; }
.tv .nfsearch:focus-within { border-color: var(--accent); }
.tv .nfsearch svg { width: 17px; height: 17px; stroke: var(--fg-faint); flex-shrink: 0; }
.tv .nfsearch input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--grotesk); font-size: 15px; color: var(--fg); padding: 15px 0; min-width: 0; }
.tv .nfsearch button { font-weight: 600; font-size: 13.5px; padding: 11px 20px; background: var(--fg); color: var(--bg); border: none; border-radius: 50px; cursor: pointer; }

/* --- Über uns / Rechtsseiten --- */
.tv .mission { padding: 56px 0 30px; max-width: 820px; }
.tv .mission__t { font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.03em; line-height: 1.04; }
.tv .mission__t em { font-style: normal; color: var(--accent-text); }
.tv .team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 26px 0; }
.tv .tm { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px 18px; text-align: center; transition: transform .15s, border-color .15s; }
.tv .tm:hover { transform: translateY(-3px); border-color: var(--line-2); }
.tv .tm__pic { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: #FCF3EE; font-weight: 700; font-size: 26px; overflow: hidden; }
.tv .tm__pic img { width: 100%; height: 100%; object-fit: cover; }
.tv .tm__n { font-weight: 700; font-size: 15.5px; letter-spacing: -.01em; }
.tv .tm__r { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin-top: 5px; }
.tv .how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tv .hw { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.tv .hw__num { font-family: var(--mono); font-size: 12px; color: var(--accent-text); display: block; margin-bottom: 12px; }
.tv .hw__t { font-weight: 700; font-size: 18px; letter-spacing: -.015em; margin-bottom: 8px; }
.tv .hw__s { font-size: 14px; color: var(--fg-soft); line-height: 1.55; margin: 0; }
.tv .legal { max-width: var(--prose); padding: 40px 0 20px; }
.tv .legal h1 { margin-bottom: 8px; }
.tv .legal h2 { margin: 1.8em 0 .5em; font-size: 19px; }
.tv .legal h3 { margin: 1.4em 0 .4em; font-size: 16.5px; }
.tv .legal p, .tv .legal ul { margin-bottom: 1em; color: var(--fg-soft); font-size: 15px; }
.tv .legal ul { padding-left: 1.3em; }
.tv .legal strong { color: var(--fg); }
.tv .legal a { color: var(--accent-text); border-bottom: 1px solid currentColor; }

/* ---------- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1020px) {
  .tv .grid-4, .tv .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .tv .ft__grid { grid-template-columns: 1fr 1fr; }
  .tv .eck { grid-template-columns: repeat(3, 1fr); }
  .tv .eck__it:nth-child(4) { border-left: none; }
  .tv .eck__it { border-top: 1px solid var(--line); }
  .tv .eck__it:nth-child(-n+3) { border-top: none; }
  .tv .layout { grid-template-columns: 1fr; }
  .tv .side { display: none; }
  .tv .rhead { grid-template-columns: 1fr; }
  .tv .rhero { max-width: 420px; }
  .tv .pgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .tv .split { grid-template-columns: 1fr; }
  .tv .stage { position: relative; height: auto; min-height: 480px; border-right: none; border-bottom: 1px solid var(--line); }
  .tv .it { grid-template-columns: 1fr auto 26px; }
  .tv .it__time { display: none; }
  .tv .grp, .tv .list__head { padding-left: 24px; padding-right: 24px; }
  .tv .list__search { margin-left: 24px; margin-right: 24px; }
  .tv .bottom { padding: 28px 24px; grid-template-columns: 1fr; }
  .tv .nl__form { min-width: 0; }
  .tv .foot { padding: 0 24px 26px; }
  .tv .flash { margin: 14px 24px 0; }
  .tv .zhero { grid-template-columns: 1fr; }
  .tv .zhero__img { max-width: 420px; }
  .tv .ersatz { grid-template-columns: 1fr; }
  .tv .mgrid { grid-template-columns: repeat(2, 1fr); }
  .tv .mix { grid-template-columns: 1fr; }
  .tv .team { grid-template-columns: repeat(2, 1fr); }
  .tv .how { grid-template-columns: 1fr; }
}
@media (max-width: 800px) { .tv .wfeat { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .tv .nf { grid-template-columns: 1fr; gap: 26px; padding-top: 36px; } .tv .nf__img { max-width: 260px; } }
@media (max-width: 720px) {
  .tv .wrap { padding: 0 20px; }
  .tv .hd__in { padding: 0 20px; gap: 14px; }
  .tv .hd__nav { display: none; }
  .tv .hd__burger { display: flex; }
  .tv .grid-2, .tv .grid-3, .tv .grid-4 { grid-template-columns: 1fr; }
  .tv .cta { grid-template-columns: 1fr; padding: 26px 24px; }
  .tv .cta__form { min-width: 0; }
  .tv .ad--content { display: none; }
  .tv .ad--mobile { display: flex; }
  .tv .ft__grid { grid-template-columns: 1fr; gap: 28px; }
  .tv .ahero { grid-template-columns: 1fr; text-align: center; }
  .tv .ahero__pic { margin: 0 auto; }
  .tv .ahero__chips, .tv .ahero__soc { justify-content: center; }
  .tv .facts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tv .toc--guide ol { columns: 1; }
  .tv .litem { grid-template-columns: 36px 1fr; }
  .tv .litem__img { display: none; }
}
@media (max-width: 560px) { .tv .igrid { grid-template-columns: 1fr; } }
@media (max-width: 1000px) and (min-width: 561px) { .tv .igrid { grid-template-columns: repeat(2, 1fr); } }