/* Blog-Uebersicht, Blog-Artikel, Versand, Ueber uns, Kontakt.
 *
 * Quelle: design/handoff/Blog.dc.html, Blog-Ribeye-Braten.dc.html,
 * Versand.dc.html, Ueber-uns.dc.html, Kontakt.dc.html (<style>-Bloecke).
 * Seitenkopf (.pgh/.bcrumb), Sektionsgeruest und Karte kommen aus
 * css/kategorie.css bzw. css/komponenten.css.
 */

/* NOVA polstert #content-wrapper oben mit 64px, unsere Seitenkoepfe bringen
   ihren Abstand selbst mit. data-page 5 = Kontakt, 7 = News, 19 = Versand,
   31 = eigene Linkseite (Ueber uns), 42 = News-Kategorie. Die 42 fehlte:
   auf den Kategorieseiten standen dadurch 124px Leere ueber dem Krumen. */
body[data-page="5"] #content-wrapper,
body[data-page="7"] #content-wrapper,
body[data-page="19"] #content-wrapper,
body[data-page="31"] #content-wrapper,
body[data-page="42"] #content-wrapper{padding-top:0}

/* ================= Maskottchen ================= */
.msc{position:relative;display:inline-block;flex-shrink:0;transition:transform var(--transition-base)}
.msc img{display:block;width:100%;transition:opacity .18s ease}
.msc .mh{position:absolute;inset:0;opacity:0}
.msc:hover img{opacity:0}
.msc:hover img.mh{opacity:1}
.msc:hover{transform:rotate(-3deg) scale(1.04)}
@media (prefers-reduced-motion:reduce){.msc,.msc img{transition:none}.msc:hover{transform:none}}

.slotbox{position:relative;border-radius:16px;overflow:hidden;background:#f5f9fd}
[data-theme="dark"] .slotbox{background:rgba(160,218,254,.06)}
.slotbox img{width:100%;height:100%;object-fit:cover;display:block}
.allbtn{display:flex;justify-content:center;margin-top:44px}

/* ================= Blog-Uebersicht ================= */
/* Der Seitenkopf sitzt hier dichter am Menue als auf den Kategorieseiten des
   Shops: Blog und Kategorie tragen Krumen plus Titel plus Chips, mit den
   60px der Vorlage stand darueber eine leere Bank. */
.tw-blog .pgh{padding-top:26px}
/* Sektionen der Sammelseite. .sec bringt 148px mit, das ist fuer eine Liste
   von Sektionen zu viel Luft - hier reicht die Haelfte. */
.tw-blog .bsec{padding:64px 0 0}
.tw-blog .bsec:last-of-type{padding-bottom:96px}
.tw-blog .bsec .shead{margin-bottom:26px}
.catchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.cchip{font:600 13px/1 var(--font-body);padding:11px 17px;border-radius:var(--radius-pill);border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--navy-800);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;display:inline-flex}
.cchip:hover{border-color:var(--navy-800);color:var(--navy-800)}
.cchip.on{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.cchip:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[data-theme="dark"] .cchip{background:transparent;color:var(--navy-100)}
[data-theme="dark"] .cchip.on{background:var(--sky-300);border-color:var(--sky-300);color:var(--navy-900)}
.bfsec{padding:44px 0 0}
.bfeat{display:grid;grid-template-columns:1.08fr .92fr;border:1px solid var(--hair);border-radius:18px;overflow:hidden;background:var(--color-surface);text-decoration:none;color:inherit;transition:transform var(--transition-base),box-shadow var(--transition-base)}
.bfeat:hover{transform:translateY(-3px);box-shadow:0 24px 44px -28px rgba(17,28,53,.28);color:inherit}
[data-theme="dark"] .bfeat{border-color:rgba(160,218,254,.14)}
.bfimg{position:relative;min-height:340px;background:#f5f9fd;padding:14px;box-sizing:border-box}
[data-theme="dark"] .bfimg{background:rgba(160,218,254,.06)}
.bfimg img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px}
.bfbody{padding:38px 40px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;justify-content:center}
.btag{display:inline-flex;font:700 11px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;border-radius:var(--radius-pill);background:var(--sky-100);color:var(--navy-800)}
.bft{font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1.12;text-transform:uppercase;letter-spacing:.025em;margin:0;color:var(--color-ink)}
[data-theme="dark"] .bft,[data-theme="dark"] .bct{color:var(--color-text-inverse)}
.bfx{font:400 14.5px/1.75 var(--font-body);color:var(--color-text-muted);margin:0}
.bmeta{display:flex;gap:14px;align-items:center;font:500 12.5px/1 var(--font-body);color:var(--color-text-muted);flex-wrap:wrap}
.bmeta svg{width:14px;height:14px}
.bmeta span{display:inline-flex;align-items:center;gap:6px}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bcard{border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--color-surface);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}
.bcard:hover{transform:translateY(-3px);box-shadow:0 24px 44px -28px rgba(17,28,53,.28);border-color:#dfe7f0;color:inherit}
.bcard:focus-visible,.bfeat:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[data-theme="dark"] .bcard{border-color:rgba(160,218,254,.14)}
.bcimg{height:200px;background:#f5f9fd;margin:10px;border-radius:10px;padding:12px;box-sizing:border-box}
[data-theme="dark"] .bcimg{background:rgba(160,218,254,.06)}
.bcimg img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px}
.bcbody{padding:8px 20px 22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;flex:1}
.bct{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.15;text-transform:uppercase;letter-spacing:.03em;margin:0;color:var(--color-ink)}
.bcx{font:400 13.5px/1.7 var(--font-body);color:var(--color-text-muted);margin:0;flex:1}

/* ================= Blog-Artikel =================
 * Die Bausteine (h2, Listen, Tabellen, Schritte, Do/Don't) sind Klassen fuer
 * den gepflegten Inhalt: was in JTLs News-Editor steht, sieht damit aus wie
 * die Referenz. Erzeugt wird davon nichts.
 */
.artsec{background:var(--color-bg);padding-top:36px}
.acat{display:inline-flex;align-items:center;gap:7px;font:700 11.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;background:var(--sky-100);color:var(--sky-700);padding:8px 13px;border-radius:var(--radius-pill)}
/* Beitragsueberschrift in der Display-Schrift (Ansage Bert 06.09.2026:
   "IMPACT ist dort die richtige"). --font-display ist Anton mit Impact als
   Fallback und traegt nur einen Schnitt, deshalb font-weight 400 statt 800.
   Versalien und Laufweite wie bei .stitle, damit die Beitragskoepfe wie der
   Rest der Seite aussehen. */
.atitle{font:400 clamp(32px,4.4vw,46px)/1.08 var(--font-display);text-transform:uppercase;letter-spacing:.02em;margin:14px 0 12px;max-width:840px;text-wrap:pretty;color:var(--color-ink)}
[data-theme="dark"] .atitle{color:var(--color-text-inverse)}
.alead{font:400 17px/1.7 var(--font-body);color:var(--color-text-muted);max-width:740px;margin:0}
.ameta{display:flex;gap:14px;flex-wrap:wrap;font:600 13px/1 var(--font-body);color:var(--color-text-muted);align-items:center;margin:18px 0 26px}
.ami{display:inline-flex;align-items:center;gap:7px}
.ameta svg{width:15px;height:15px;color:var(--sky-700)}
[data-theme="dark"] .ameta svg{color:var(--sky-300)}
.amdot{width:4px;height:4px;border-radius:var(--radius-pill);background:var(--color-border-strong)}
/* Kein fester Hoehenwert mehr, sondern das Seitenverhaeltnis der Bilder
   selbst (15.09.2026). Vorher lief hier ein 3:1-Band mit object-fit:cover,
   das bei JEDEM Beitragsbild oben und unten abgeschnitten hat - beim
   Auftau-Beitrag mitten durchs Steak. Ein Zwischenschritt auf 420px half
   nur teilweise; das Motiv blieb angeschnitten.

   Die Beitragsbilder liefert JTL als 3:2 (900x600 in der lg-Variante).
   Mit aspect-ratio:3/2 bleibt fuer cover nichts zu schneiden - das ganze
   Bild steht da, auf jeder Breite, ohne object-position je Motiv. Das
   cover bleibt trotzdem stehen: liefert jemand spaeter ein Bild in einem
   anderen Verhaeltnis, wird es beschnitten statt verzerrt. */
.aheroimg{aspect-ratio:3/2;height:auto;border-radius:18px;background:var(--color-photo-bg);display:grid;place-items:center;overflow:hidden}
.aheroimg img{width:100%;height:100%;object-fit:cover;display:block}
[data-theme="dark"] .aheroimg{background:rgba(160,218,254,.06)}
.agrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start;padding:38px 0 84px}
.art h2{font:800 23px/1.3 var(--font-body);margin:40px 0 12px;letter-spacing:-.01em;scroll-margin-top:150px}
.art h2:first-child{margin-top:0}
.art h3{font:800 18px/1.3 var(--font-body);margin:28px 0 10px}
.art p{font:400 15.5px/1.8 var(--font-body);color:var(--color-text-muted);margin:0 0 14px}
.art p b,.art li b{color:var(--color-ink)}
[data-theme="dark"] .art p b,[data-theme="dark"] .art li b{color:var(--color-text-inverse)}
.art ul,.art ol{margin:0 0 14px;padding-left:20px;font:400 15.5px/1.8 var(--font-body);color:var(--color-text-muted)}
.art img{max-width:100%;height:auto;border-radius:14px}

/* Abbildungen mit Unterschrift. Ohne diese Regeln erbt <figure> den
   Browser-Aussenabstand und <figcaption> die Grundtextfarbe - die Unterschrift
   stand dann dunkler als der Fliesstext darueber, also praesenter als das,
   was sie erklaert. Sie gehoert leiser: kleiner, gedaempft, mit einer
   Akzentlinie, die sie sichtbar an ihr Bild bindet. */
.art figure{margin:30px 0}
.art figure > svg{display:block;width:100%;height:auto}
.art figcaption{font:400 13.5px/1.6 var(--font-body);color:var(--color-text-muted);
                margin-top:10px;padding-left:12px;border-left:2px solid var(--sky-200)}
[data-theme="dark"] .art figcaption{border-left-color:rgba(160,218,254,.3)}
.art table{width:100%;border-collapse:separate;border-spacing:0;margin:16px 0 6px;border:1px solid var(--color-border);border-radius:12px;overflow:hidden}
/* Tabellenkopf im Hellmodus auf unserem Hellblau (Ansage Bert 06.09.2026),
   Navy nur noch im Dark Mode. Das hartkodierte #fff ist dabei mit raus -
   DESIGN_SYSTEM.md verbietet es, weil genau daran der Dunkelmodus bricht. */
.art th{background:var(--sky-100);color:var(--navy-900);font:700 12px/1.3 var(--font-body);text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:12px 16px}
[data-theme="dark"] .art th{background:var(--navy-900);color:var(--color-text-inverse)}
.art td{padding:13px 16px;font:400 14.5px/1.5 var(--font-body);color:var(--color-text-muted);border-top:1px solid var(--color-border)}
.art td:first-child{font-weight:700;color:var(--color-ink)}
[data-theme="dark"] .art td:first-child{color:var(--color-text-inverse)}
/* Breite Tabellen scrollen in sich, statt die Seite zu sprengen. */
.art .tabw{overflow-x:auto}

/* Bild links, Text rechts. Fuer Hochformat-Aufnahmen, die ueber die volle
   Spaltenbreite zu wuchtig werden. Unter 760px wieder untereinander. */
.art .figsplit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start;margin:30px 0}
.art .figsplit figure{margin:0}
.art .figsplit > div > p:first-child{margin-top:0}
@media (max-width:760px){.art .figsplit{grid-template-columns:1fr;gap:18px}}

/* ---- Bausteine fuer den Artikeltext ----
 * Quelle: design/handoff/Blog-Ribeye-Braten.dc.html. Alles unter `.art`
 * eingegrenzt: `.stp`/`.stpn` heissen in der Kasse anders (Schrittleiste),
 * und die soll davon nichts abbekommen.
 */
.art .h2i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--sky-100);color:var(--navy-800);flex-shrink:0;margin-right:10px;vertical-align:middle}
.art .h2i svg{width:18px;height:18px}
[data-theme="dark"] .art .h2i{background:rgba(160,218,254,.14);color:var(--sky-300)}
.art .hint{display:flex;gap:16px;align-items:center;background:var(--sky-50);border:1px solid var(--sky-200);border-radius:18px;padding:18px 20px;margin:26px 0}
[data-theme="dark"] .art .hint{background:rgba(160,218,254,.08);border-color:rgba(160,218,254,.25)}
.art .hint .msc{width:86px;flex:none}
.art .hint b{display:block;font-family:var(--font-accent);font-weight:400;font-size:21px;color:var(--sky-700);margin-bottom:4px}
[data-theme="dark"] .art .hint b{color:var(--sky-300)}
.art .hint p{font:400 14px/1.7 var(--font-body);color:var(--color-text);margin:0}
.art .stp{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:18px 0;border-bottom:1px dashed var(--color-border);background:none;border-radius:0}
.art .stp:last-of-type{border-bottom:0}
.art .stpn{width:52px;height:52px;border-radius:var(--radius-pill);background:var(--sky-100);color:var(--navy-900);font:800 20px/52px var(--font-body);text-align:center;border:0;display:block}
[data-theme="dark"] .art .stpn{background:rgba(160,218,254,.16);color:var(--sky-300)}
.art .stp > div > b{display:block;font:800 16.5px/1.3 var(--font-body);margin:4px 0 5px;color:var(--color-ink)}
[data-theme="dark"] .art .stp > div > b{color:var(--color-text-inverse)}
.art .stp p{font:400 14.5px/1.7 var(--font-body);color:var(--color-text-muted);margin:0}
.art .ttab tr.rec td{background:var(--sky-50)}
[data-theme="dark"] .art .ttab tr.rec td{background:rgba(160,218,254,.08)}
.art .tnum{font-feature-settings:'tnum'}
.art .recb{display:inline-flex;align-items:center;font:700 10px/1 var(--font-body);text-transform:uppercase;letter-spacing:.05em;background:var(--navy-900);color:var(--color-gold);border:1px solid rgba(227,188,85,.55);border-radius:var(--radius-pill);padding:5px 9px;margin-left:9px;vertical-align:2px}
.art .dodo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.art .doc{border-radius:18px;padding:20px;border:1px solid}
.art .doc.yes{background:var(--color-success-surface);border-color:rgba(26,127,75,.25)}
.art .doc.no{background:var(--color-error-surface);border-color:rgba(198,40,28,.22)}
.art .doc h3{display:flex;align-items:center;gap:9px;font:800 15px/1 var(--font-body);margin:0 0 12px}
.art .doc.yes h3{color:var(--color-success)}
.art .doc.no h3{color:var(--color-error)}
.art .doc svg{width:16px;height:16px;flex:none}
.art .doc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.art .doc li{display:flex;gap:9px;font:400 14px/1.55 var(--font-body);color:var(--color-text)}
@media (max-width:640px){.art .dodo{grid-template-columns:1fr}}

/* Seitenspalte mit Inhaltsverzeichnis. Das Verzeichnis baut js/tw-toc.js aus
   den <h2> des Artikels - fest verdrahtet wird es nicht. */
.iaside{display:flex;flex-direction:column;gap:14px;position:sticky;top:150px}
.iac{padding:20px;display:flex;flex-direction:column;gap:10px}
.iac > b{font:800 15px/1.3 var(--font-body)}
.iac p{font:400 13.5px/1.7 var(--font-body);color:var(--color-text-muted);margin:0}
.toc{display:flex;flex-direction:column;gap:2px}
.toc a{font:500 13.5px/1.5 var(--font-body);color:var(--color-text-muted);text-decoration:none;padding:7px 10px;border-radius:8px;border-left:2px solid transparent}
.toc a:hover{background:var(--color-bg-alt);color:var(--color-link)}
.toc a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.toc a.on{color:var(--color-link);border-left-color:var(--sky-400);font-weight:700}
[data-theme="dark"] .toc a:hover{background:rgba(160,218,254,.08)}
.relh{font:800 18px/1.3 var(--font-body);margin:36px 0 12px}
.relrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.relc{display:flex;gap:12px;align-items:center;border:1px solid var(--hair);border-radius:14px;padding:12px;text-decoration:none;color:inherit;background:var(--color-surface)}
.relc:hover{border-color:#dfe7f0;color:inherit}
[data-theme="dark"] .relc{border-color:rgba(160,218,254,.14)}
.relimg{width:64px;height:64px;border-radius:10px;background-color:var(--color-photo-bg);background-size:cover;background-position:center;flex:none}
.relc em{display:block;font:700 10.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);font-style:normal;margin-bottom:5px}
.relc b{font:700 13.5px/1.4 var(--font-body)}

/* ================= Versand ================= */
.vhg{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.stips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.stip{display:inline-flex;align-items:center;gap:9px;font:600 13px/1 var(--font-body);color:var(--navy-800);border:1px solid var(--hair);border-radius:var(--radius-pill);padding:12px 17px;background:var(--color-surface)}
.stip svg{width:16px;height:16px;color:var(--sky-600);flex:none}
[data-theme="dark"] .stip{color:var(--navy-100)}
[data-theme="dark"] .stip svg{color:var(--sky-300)}
.vpath{position:relative;max-width:940px;margin:0 auto;padding:20px 0 10px}
.vline{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:var(--hair);overflow:hidden}
.vfill{position:absolute;left:0;top:0;width:100%;height:0%;background:var(--sky-400)}
.vpkg{position:absolute;left:50%;top:0%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:var(--radius-pill);background:var(--navy-900);color:var(--sky-300);display:grid;place-items:center;z-index:3;box-shadow:0 14px 26px -12px rgba(17,28,53,.5)}
.vpkg svg{width:19px;height:19px}
.vst{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);align-items:center;margin:14px 0}
.vdot{grid-column:2;grid-row:1;width:13px;height:13px;border-radius:var(--radius-pill);background:var(--color-surface);border:3px solid var(--sky-400);justify-self:center;box-sizing:border-box;position:relative;z-index:2}
.vcard{grid-column:1;grid-row:1;padding:24px 0}
.vst.R .vcard{grid-column:3}
.vnum{display:block;font:700 11px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--sky-700);margin-bottom:9px}
[data-theme="dark"] .vnum{color:var(--sky-300)}
.vhead{display:flex;align-items:center;gap:13px;margin-bottom:9px}
.vni{width:38px;height:38px;border-radius:var(--radius-pill);background:var(--sky-50);color:var(--navy-800);display:grid;place-items:center;flex:none}
.vni svg{width:18px;height:18px}
[data-theme="dark"] .vni{background:rgba(160,218,254,.1);color:var(--sky-300)}
.vcard b{font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.12;text-transform:uppercase;letter-spacing:.03em;color:var(--color-ink)}
[data-theme="dark"] .vcard b{color:var(--color-text-inverse)}
.vcard p{font:400 14.5px/1.75 var(--font-body);color:var(--color-text-muted);margin:0}
.vslotw{aspect-ratio:4/3;margin-top:16px;border-radius:14px;overflow:hidden}
.kong{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.konul{margin:0;padding:0;list-style:none}
.konul li{display:flex;gap:14px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--hair);font:400 14.5px/1.7 var(--font-body);color:var(--color-text-muted)}
.konul li:last-child{border-bottom:0}
.konul svg{width:18px;height:18px;color:var(--sky-600);flex:none;margin-top:3px}
[data-theme="dark"] .konul svg{color:var(--sky-300)}
.konul b{color:var(--color-ink)}
[data-theme="dark"] .konul b{color:var(--color-text-inverse)}
.vknote{border:1px solid var(--hair);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;background:var(--color-surface)}
.vknote b{font:800 15px/1.3 var(--font-body)}
.vknote p{font:400 13.5px/1.7 var(--font-body);color:var(--color-text-muted);margin:0}
[data-theme="dark"] .vknote{border-color:rgba(160,218,254,.14)}

/* ================= Zahlungsmoeglichkeiten ================= */
/* Die Zahlungsseite traegt dieselbe Karte wie die Rechtsseiten und muss
   mit ihnen fluchten. Sie hatte hier zunaechst max-width:760px und
   margin:0 auto - gut gemeint fuer die Zeilenlaenge, aber damit sprang der
   Text 221 px nach rechts, waehrend die H1 am Containerrand stehen blieb.
   Gemessen zum Vergleich: Versandseite 0 px Versatz, AGB und Datenschutz
   je 31 px (das Innenpolster der Karte), Zahlungsseite 221 px. Die Regel
   ist deshalb entfallen; die Karte richtet sich jetzt wie ueberall sonst.
   Ansage Bert 08.09.2026. */

/* ================= Dunkle Baender (Versand, Ueber uns) ================= */
.arrband,.ctaband{background:var(--navy-900);color:#fff;margin-top:130px;padding:0}
.arrband .in,.ctaband .in{padding-block:64px 70px}
.ctaband .in{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.arrband + .footw .foot,.ctaband + .footw .foot,.arrband + .foot,.ctaband + .foot{margin-top:0}
.arrband h2,.ctaband h2{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1.1;text-transform:uppercase;letter-spacing:.025em;margin:8px 0 12px;color:#fff}
.arrband .eyebrow,.ctaband .eyebrow{color:var(--sky-300)}
.ctaband p{font:400 15px/1.7 var(--font-body);color:var(--color-text-inverse-muted);margin:0;max-width:520px}
.ctaband .btns{display:flex;gap:12px;flex-wrap:wrap}
.arrhead{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap}
.arrcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.arrc{border:1px solid rgba(182,196,221,.22);border-radius:16px;padding:22px;background:rgba(244,249,255,.05)}
.arrc svg{width:20px;height:20px;color:var(--sky-300);margin-bottom:12px}
.arrc b{display:block;font:800 15px/1.3 var(--font-body);color:#fff;margin-bottom:6px}
.arrc p{font:400 13.5px/1.7 var(--font-body);color:var(--color-text-inverse-muted);margin:0}
.arrc a{color:var(--sky-300)}

/* ================= Ueber uns ================= */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0}
.zc{border-top:1px solid var(--hair);padding:22px 0 0}
.zn{font-family:var(--font-display);font-weight:400;font-size:38px;line-height:1;letter-spacing:.02em;color:var(--color-ink)}
[data-theme="dark"] .zn{color:var(--color-text-inverse)}
.zl{font:400 13px/1.55 var(--font-body);color:var(--color-text-muted);margin-top:8px}
.abg{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:96px}
.abg .slotbox{aspect-ratio:4/3}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.fcard{background:var(--color-surface);border:1px solid var(--hair);border-radius:16px;padding:26px;display:flex;gap:16px;align-items:flex-start}
[data-theme="dark"] .fcard{border-color:rgba(160,218,254,.14)}
.ficon{width:48px;height:48px;border-radius:var(--radius-pill);background:var(--sky-50);color:var(--navy-800);display:grid;place-items:center;flex-shrink:0}
.ficon svg{width:20px;height:20px}
[data-theme="dark"] .ficon{background:rgba(160,218,254,.1);color:var(--sky-300)}
/* Farbe explizit: ohne sie erbt die Ueberschrift NOVAs #525252 und stand im
   Dunkelmodus mit 1,3:1 auf --color-surface. Aufgefallen erst, als am
   28.08.2026 echte Titel statt "Lorem ipsum" in den Karten standen - grauer
   Blindtext auf dunklem Grund sieht niemand genauer an. */
.fcard h3{font:800 17px/1.3 var(--font-body);margin:0 0 7px;color:var(--color-text)}
/* "Beim Kurzbraten" hinter dem Titel: kennzeichnet die Handgriffe, die eben
   NICHT fuer jeden Cut gelten (Befund 11, 15.09.2026). */
.fonly{font:700 10.5px/1 var(--font-body);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-link);vertical-align:middle;white-space:nowrap}
.fcard p{font:400 14px/1.65 var(--font-body);color:var(--color-text-muted);margin:0}
/* Ein Gruppenfoto statt sechs Portraetkarten (13.09.2026) - das Raster
   .team/.tm/.tmn ... ist damit ersatzlos weg. */
/* Teamtext links, Gruppenfoto rechts (Ansage Bert 13.09.2026). Vorher lief der
   Text ueber die ganze Breite und das Foto darunter - das Bild war dafuer zu
   knapp aufgeloest. .slead deckelt sonst auf 560px, hier gibt die Spalte das
   Mass vor. */
.teamzeile{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.teamintro .slead,.teamintro .alead{max-width:none}
.teamcols > .slead + .slead{margin-top:14px}
@media (max-width:980px){
    .teamzeile{grid-template-columns:1fr;gap:32px}
}
.teamfoto{margin:0;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-card)}
.teamfoto img{width:100%;height:auto;display:block}

/* ================= Kontakt ================= */
.kg{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;padding-top:56px}
.kcard{border:1px solid var(--hair);border-radius:18px;padding:34px;background:var(--color-surface)}
[data-theme="dark"] .kcard{border-color:rgba(160,218,254,.14)}
/* Farbe explizit: NOVA faerbt Ueberschriften in Karten auf einen festen
   Grauton, im Dunkelmodus stand der Titel fast unsichtbar auf der Karte. */
.kcard h2,.kcard h3{font:800 19px/1.3 var(--font-body);margin:0 0 22px;color:var(--color-ink)}
.fld{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.fld label{font:700 12.5px/1 var(--font-body);letter-spacing:.02em}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* NOVAs Kontaktformular bleibt stehen - an ihm haengen Captcha, Pflichtfelder
   und Datenschutzhinweis. Eingekleidet wird nur.

   NOVA baut jede Gruppe als Bootstrap-Zeile mit vierspaltiger Beschriftung
   links und achtspaltigem Feld rechts. In einer 575 px breiten Karte bleiben
   davon zwei sehr schmale Spalten uebrig - Felder und Knoepfe waren
   unleserlich gequetscht. Beide Spalten laufen hier auf volle Breite, die
   Abschnittsueberschrift steht damit ueber ihren Feldern. */
.kcard .container{padding:0;max-width:none;width:100%}
.kcard fieldset.row{margin:0;display:block}
.kcard fieldset.row > [class*="col-"]{flex:0 0 100%;max-width:100%;padding:0;width:100%}
.kcard fieldset .row{margin-left:-7px;margin-right:-7px}
.kcard fieldset .row > [class*="col-"]{padding-left:7px;padding-right:7px}
.kcard .h3{font:700 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 12px}
.kcard .form-group{margin-bottom:16px}
.kcard .col-form-label{font:700 12.5px/1.3 var(--font-body);padding:0 0 8px;letter-spacing:.02em}
.kcard .optional,.kcard .required-info{font-weight:400;color:var(--color-text-muted)}
.kcard .required-info{font:400 12px/1.6 var(--font-body);margin-bottom:14px}
.kcard .required-star{color:var(--color-error)}
.kcard hr{border:0;border-top:1px solid var(--hair);margin:22px 0}
/* Knoepfe: NOVA steckt den Absender in eine 3/12-Spalte, in der er zur Pille
   zusammenschnurrt. Die Spalte laeuft auf volle Breite, der Knopf mit. */
.kcard .contact-form-privacy{padding:0;margin-bottom:14px}
/* Alle lg-Spalten laufen voll - nur die md-Paare (Vorname/Nachname) bleiben
   zweispaltig. */
.kcard .row > [class*="col-lg-"]{flex:0 0 100%;max-width:100%;margin-left:0}
.kcard .row > .col.ml-auto-util{margin-left:0;flex:0 0 100%;max-width:100%;padding:0}
.kcard .btn{width:100%;min-height:52px;flex:0 0 auto}
.kcard .form-row,.kcard .text-right-util{text-align:left}
/* NOVAs Captcha-Block traegt w-100-util und sprengte sonst die Karte. */
.kcard .w-100-util,.kcard .g-recaptcha,.kcard iframe{max-width:100%}
.kcard .form-control,.kcard .custom-select,.kcard textarea,.kcard input[type="text"],.kcard input[type="email"]{font:400 14.5px/1.4 var(--font-body);min-height:44px;padding:14px 18px;border-radius:var(--radius-pill);border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);width:100%;box-sizing:border-box;height:auto}
.kcard textarea,.kcard textarea.form-control{border-radius:16px;min-height:140px}
.kcard .form-control:focus,.kcard .custom-select:focus,.kcard textarea:focus{outline:none;border-color:var(--sky-400);box-shadow:var(--focus-ring)}
.kcard .form-control::placeholder{color:#8b99ad}
.kcard .invalid-feedback{color:var(--color-error);font:600 12.5px/1.5 var(--font-body)}
.kcard .form-control.is-invalid{border-color:var(--color-error)}
.privhint{font:400 12px/1.6 var(--font-body);color:var(--color-text-muted);margin:14px 0 0}
.kaside{display:flex;flex-direction:column;gap:14px}
.kc{border:1px solid var(--hair);border-radius:16px;padding:22px;display:flex;gap:15px;align-items:flex-start;background:var(--color-surface)}
[data-theme="dark"] .kc{border-color:rgba(160,218,254,.14)}
.kc .ficon{width:44px;height:44px}
.kc b{display:block;font:800 15px/1.3 var(--font-body);margin-bottom:4px}
.kc p{font:400 13.5px/1.7 var(--font-body);color:var(--color-text-muted);margin:0}
.kc a{font-weight:600}

/* ================= Responsive ================= */
@media (max-width:1024px){
/* minmax(0,...) wie beim Desktop-Wert: ein nacktes 1fr erbt min-width:auto
   vom Grid-Item und wuerde sich nicht unter die Inhaltsgroesse schrumpfen -
   das Rezeptbewertungs-rvslider (.art .tw-rb, ab 23.10.2026) ist breiter als
   der Viewport und sprengte ohne das hier die ganze Spalte samt Body. */
.agrid{grid-template-columns:minmax(0,1fr)}
.iaside{position:static}
.vhg,.abg,.kg,.kong{grid-template-columns:1fr;gap:32px}
.vals,.arrcards{grid-template-columns:repeat(2,1fr)}
.bfeat{grid-template-columns:1fr}
.bfimg{min-height:240px}
.zahlen{grid-template-columns:1fr 1fr}
/* Der Pfad wird einspaltig: Linie und Punkte nach links, Karten daneben. */
.vst{grid-template-columns:44px minmax(0,1fr)}
.vcard,.vst.R .vcard{grid-column:2}
.vdot{grid-column:1}
.vline,.vpkg{left:22px}
.vpath{padding-left:0}
}
@media (max-width:1000px){
.bgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.bgrid,.vals,.arrcards,.relrow,.frow{grid-template-columns:1fr}
.bfbody{padding:26px 22px}
.zahlen{grid-template-columns:1fr 1fr}
.aheroimg{aspect-ratio:3/2;height:auto}
.kcard{padding:24px}
}

/* ---- Versanddienstleister auf der Versandseite ----
 * Dieselbe Bauart wie die Zahlungs-Kacheln (.payl): das Markenlogo steckt
 * unveraendert im Bild, die Kachel bringt die Form. Anders als dort gibt es
 * keine Nachtvariante und auch keinen Rahmen fuer den Dunkelmodus: die
 * Kachel ist durchgehend DHL-Gelb (project/bin/dhl-gelb.mjs), und Gelb
 * traegt sich in beiden Modi selbst. Rot und Gelb bleiben dabei die
 * Markenfarben - umgefaerbt wurde nur das Weiss darunter.
 */
.shiprow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
/* Eine Pille, zwei Absender. --dhl-gelb ist die Markenfarbe von DHL und
   steht deshalb hier als Literal statt in tokens.css: sie gehoert nicht zu
   unserer Palette, sie muss nur exakt zum Bild passen. */
.shippill{--dhl-gelb:#fc0;
          display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px 0 0;
          border-radius:var(--radius-pill);background:var(--dhl-gelb);color:var(--navy-900);
          font:800 12.5px/1 var(--font-body);letter-spacing:var(--tracking-caps);
          text-transform:uppercase;box-sizing:border-box;overflow:hidden}
/* Buendig in der Pille: das Bild bringt dieselbe Grundfarbe mit, seine
   eigenen runden Ecken verschwinden darin. */
.shipl{height:100%;width:auto;display:block}
.shipsep{width:1px;height:20px;background:rgba(17,28,53,.28);flex:0 0 auto;margin-left:-1px}
.shippill svg{width:15px;height:15px}
/* Die Kurzfassung der Konditionen: was drunter in .konul ausformuliert
   steht, hier in einer Zeile zum Ueberfliegen. */
.shiphint{font:600 13px/1.6 var(--font-body);color:var(--color-text-muted);margin:0 0 20px;max-width:640px}
@media (max-width:420px){.shippill{height:36px;font-size:11.5px;padding-right:14px;gap:7px}.shiphint{font-size:12.5px}}

/* ---- Versand: Ueberblick ueber den acht Stationen ----
 * Vier Kacheln mit den Zahlen, nach denen gesucht wird. Bewusst flach
 * gehalten (Haarlinie statt Schatten): darunter folgt der Stationspfad, zwei
 * konkurrierende Karten-Ebenen waeren unruhig.
 */
.vsum{padding:44px 0 0}
.vsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vscard{border:1px solid var(--hair);border-radius:16px;padding:22px 20px;background:var(--color-surface);
        display:flex;flex-direction:column;gap:8px;align-items:flex-start}
[data-theme="dark"] .vscard{border-color:rgba(160,218,254,.14)}
.vscard svg{width:22px;height:22px;color:var(--sky-700)}
[data-theme="dark"] .vscard svg{color:var(--sky-300)}
.vscard b{font:800 21px/1.1 var(--font-body);color:var(--color-ink);letter-spacing:-.01em}
[data-theme="dark"] .vscard b{color:var(--color-text-inverse)}
.vscard span{font:400 13.5px/1.6 var(--font-body);color:var(--color-text-muted)}
@media (max-width:900px){.vsgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.vsgrid{grid-template-columns:1fr}}

/* ---- Versand-FAQ ----
 * Nutzt dieselbe .faq-Komponente wie das Glossar der Track-Seite, damit
 * Aufklappen und Fokusring ueberall gleich aussehen.
 */
.vfaq{padding:72px 0 96px}
.vfaql{display:flex;flex-direction:column;gap:10px;max-width:820px}

/* ================= Widerrufsformular =================
   Steht unter der Belehrung auf der Widerrufsseite. Zwei Spalten auf breiten
   Schirmen, eine auf schmalen; der Kommentar laeuft immer ueber die volle
   Breite, weil er als einziger mehrzeilig ist. */
.wrbform{margin-top:26px;padding:26px}
.wrbform h2{font:800 20px/1.3 var(--font-body);margin:0 0 8px}
.wrbintro{font:400 14.5px/1.65 var(--font-body);color:var(--color-text-muted);margin:0 0 20px;max-width:70ch}
.wrbfields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wrbrow{display:flex;flex-direction:column;gap:6px}
.wrbfull{grid-column:1/-1}
.wrbrow label{font:700 13px/1.3 var(--font-body)}
.wrbrow abbr{color:var(--color-error);text-decoration:none}
.wrbopt{font-weight:400;color:var(--color-text-muted)}
.wrbrow input,.wrbrow textarea{font:400 15px/1.5 var(--font-body);color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-border-strong);border-radius:10px;padding:11px 13px;width:100%;box-sizing:border-box}
.wrbrow input:focus,.wrbrow textarea:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--color-cta)}
.wrbsend{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.wrbhint{font:400 13px/1.5 var(--font-body);color:var(--color-text-muted)}
/* Der Honigtopf muss im Layout verschwinden, aber im DOM bleiben - display:none
   wuerde ihn manchen Skripten gerade verraten. */
.wrbhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.wrbfields{grid-template-columns:1fr}}

/* ===================================================================
   True Facts und How True Do
   Die beiden gefuehrten Blogkategorien haben eine eigene Seite. Alles
   hier arbeitet mit den Tokens; feste Farben gibt es nicht, sonst
   bricht der Dunkelmodus.
   =================================================================== */

/* --- gemeinsamer Takt: 80 px zwischen allen Bloecken, oben wie unten.
   Vorher brachte jede Sektion ihren eigenen Vorabstand mit, und der
   Rhythmusbrecher stiess unten ohne Luecke an das naechste Band. --- */
.tw-blog .twsec,
.tw-blog .twfaktsec,
.tw-blog .twbrowser,
.tw-blog .twarchiv{padding:80px 0}
/* Das erste Karussell schliesst direkt an den Seitenkopf an (Ansage Bert
   06.09.2026) - vorher standen Vorspann und erster Fakt zwei volle
   Abschnittsabstaende auseinander. */
.tw-blog .twfaktsec:first-of-type{padding-top:24px}
/* Gleicher Grund auf "How True Do": zwischen dem Vorspann der Seite und
   "Gilt fuer jeden Cut" standen zwei volle Abschnittsabstaende (Befund
   Glenn 13.09.2026). Eigene Klasse statt :first-of-type - die Sektion ist
   nicht das erste <section> ihres Elternknotens, der Selektor haette nie
   gegriffen. */
.tw-blog .twsec-erste{padding-top:24px}

/* --- CI-Trenner zwischen den Abschnitten (Ansage Bert 06.09.2026) ---------
 * Bambus als Tag/Nacht-Paar, dazu einzelne treibende Blueten. Bewusst ohne
 * JavaScript: Die Parallax-Mechanik der Startseite (.tr/.fl in
 * startseite.css plus tw-home.js) haengt an Skripten, die auf der
 * Wissensseite nicht geladen sind. Sie nur fuer die Dekoration mitzuziehen
 * waere teurer als eine CSS-Bewegung.
 *
 * Der Trenner ist reine Zutat: ohne CSS-Animation steht er still da, ohne
 * Bilder bleibt eine leere Zeile. Er traegt keinen Inhalt und ist deshalb
 * aria-hidden.
 *
 * Die Maske oben und unten laesst ihn in die Nachbarabschnitte auslaufen,
 * statt eine sichtbare Kante zu ziehen - dasselbe Mittel wie bei .tr auf
 * der Startseite. */
.tw-blog .twci{position:relative;height:150px;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.tw-blog .twci img{position:absolute;display:block}
.tw-blog .twci img.darkonly{display:none}
[data-theme="dark"] .tw-blog .twci img.lightonly{display:none}
[data-theme="dark"] .tw-blog .twci img.darkonly{display:block}

/* Der Halm ist als Randstueck gezeichnet: sein Schnitt liegt buendig auf der
 * rechten Kante der Grafik. Deshalb sitzt er hier auf right:0 und nicht mit
 * negativem Versatz - er soll aus dem Seitenrand hereinwachsen, nicht als
 * angeschnittenes Objekt im Raum stehen. Ein frueherer Entwurf hatte beide
 * Halmenden im Bild; der stand dann mitten in der Flaeche, egal wie man ihn
 * schob. Wegmaskieren verbietet CLAUDE.md zu Recht - die Loesung war eine
 * eigene Grafik, keine Kaschierung. */
.tw-blog .twci .twci-halm{right:0;top:50%;width:min(30%,380px);height:auto;
  transform:translateY(-50%);opacity:.85}
.tw-blog .twci-links .twci-halm{right:auto;left:0;transform:translateY(-50%) scaleX(-1)}

/* Einzelblaetter und Blueten. Position, Groesse und Tempo kommen als
 * Variablen aus dem Template, damit dieselbe Regel jede Streuung traegt. */
.tw-blog .twci .twci-fl{left:var(--x);top:var(--y);width:calc(var(--s) * 46px);opacity:.8;
  animation:twci-treiben calc(var(--t) * 1s) ease-in-out infinite alternate;
  animation-delay:calc(var(--d) * -1s)}
@keyframes twci-treiben{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--r))}
}
@media (prefers-reduced-motion:reduce){
  .tw-blog .twci .twci-fl{animation:none}
}
@media (max-width:900px){
  .tw-blog .twci{height:104px}
  .tw-blog .twci .twci-halm{width:min(52%,260px)}
  .tw-blog .twci .twci-fl{width:calc(var(--s) * 24px)}
}
/* Messungs-Band. Ansage Bert 06.09.2026: im Hellmodus hellblau, Navy bleibt
   dem Dunkelmodus. Die Umschaltung laeuft ueber lokale Variablen auf dem Band
   selbst - sonst stuende dieselbe Entscheidung in acht Regeln.
   Der Knopf wird im Hellmodus navy: Himmelblau auf Himmelblau verschwindet.
   Dieselbe Paarung traegt schon .twfaktpfeil.on auf demselben Grund.
   Ansage Bert 08.09.2026: Grund auf das CI-Blau --sky-300 angehoben (vorher
   --sky-100, wirkte blass gegen das Info-Band im Header). Damit musste die
   Eyebrow-Farbe nachgezogen werden: --sky-700 kam auf --sky-300 nur noch auf
   3,6:1 (Kontrastrechnung project/rules DESIGN_SYSTEM-Auftrag 08.09.2026),
   unter den 4,5:1 fuer Fliesstext - jetzt --navy-700 wie --band-muted, das
   liegt bei 8,2:1. Text (navy-900/navy-700) und Knopf (navy-900-Flaeche)
   bleiben unveraendert, deren Kontrast war mit 11,2:1 bzw. 8,2:1 schon vor
   der Aenderung weit im gruenen Bereich. */
/* .twsec-alt teilt sich diese Farbtoken mit .twband. Bis zum 08.09.2026 trug
   sie --color-bg-alt (#f5f9fd) und war damit eine dritte, blasse Blaustufe auf
   einer Seite, die laut DESIGN_SYSTEM.md nur zwei Flaechen kennt: --sky-300
   hell, --navy-900 dunkel - dieselbe Flaeche wie das Info-Band ueber der
   Navigation (.usp in layout.css). Ansage Bert 08.09.2026, hier beim
   Nachziehen der Wissensseite eingeloest.

   Geteilt werden nur die Farben. Abstand (84px) und die Display-Ueberschrift
   bleiben dem Band vorbehalten - .twsec-alt ist ein normaler Abschnitt, der
   nur auf der Markenflaeche liegt. Im Dunkelmodus aendert sich nichts:
   --color-bg-alt und --navy-900 sind dort beide #111c35. */
.tw-blog :is(.twband,.twsec-alt){
  --band-bg:var(--sky-300);
  --band-text:var(--navy-900);
  --band-muted:var(--navy-700);
  --band-eyebrow:var(--navy-700);
  --band-bildbg:rgba(17,28,53,.06);
  --color-cta:var(--navy-900);
  --color-cta-ink:var(--sky-300);
  --color-cta-hover:var(--navy-700);
  background:var(--band-bg);color:var(--band-text)
}
.tw-blog .twband{padding:84px 0}
[data-theme="dark"] .tw-blog :is(.twband,.twsec-alt){
  --band-bg:var(--navy-900);
  --band-text:var(--color-text-inverse);
  --band-muted:var(--color-text-inverse-muted);
  --band-eyebrow:var(--sky-300);
  --band-bildbg:rgba(160,218,254,.08);
  --color-cta:var(--navy-600);
  --color-cta-ink:#e0f2fe;
  --color-cta-hover:var(--navy-500)
}
.tw-blog .twband h2{font-family:var(--font-display);font-weight:400;font-size:38px;line-height:1.08;text-transform:uppercase;letter-spacing:.02em;margin:6px 0 12px;color:var(--band-text);text-wrap:pretty}
.tw-blog .twband p{font-size:15.5px;line-height:1.75;color:var(--band-muted);margin:0 0 14px}
.tw-blog :is(.twband,.twsec-alt) .eyebrow{color:var(--band-eyebrow)}
/* Was in .twsec-alt auf der Markenflaeche sonst untergeht: --color-text-muted
   (#5a6b82) kommt auf #a0dafe nur auf 3,6:1 und liegt damit unter den 4,5:1
   fuer Fliesstext, und --color-primary IST das Himmelblau - der Merksatz
   haette seinen Balken auf der eigenen Farbe verloren. */
.tw-blog .twsec-alt .slead{color:var(--band-muted)}
.tw-blog .twsec-alt .twmerk{color:var(--band-text);border-left-color:var(--band-eyebrow)}
.tw-blog .twsec-alt .twbild{background:var(--band-bildbg)}
.tw-blog .twband .twstark{color:var(--band-text);font-size:17px;font-weight:600}
.tw-blog .twband .btn{margin-top:8px}

.tw-blog .twsplit{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start}
.tw-blog .twband .twsplit{align-items:center}
.tw-blog .twsplit-links{grid-template-columns:.94fr 1.06fr}
/* Ansage Bert 06.09.2026: die rechte Spalte soll mittig zur linken stehen.
   Nur dort, wo es angefordert ist - der Standard bleibt oben buendig, sonst
   wandern kurze Textspalten neben hohen Bildern in die Seitenmitte. */
.tw-blog .twsplit-mittig{align-items:center}

/* Versandseite: das Foto der echten Verpackung neben dem Text. Das Bild
   ist freigestellt und braucht deshalb keinen Rahmen und keine Flaeche -
   es steht auf dem Seitenhintergrund und traegt in beiden Farbmodi. */
.vboxgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.vboxbild img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 24px 40px rgba(17,28,53,.22))}
[data-theme="dark"] .vboxbild img{filter:drop-shadow(0 24px 40px rgba(0,0,0,.5))}
@media (max-width:900px){
  .vboxgrid{grid-template-columns:1fr;gap:28px}
}
.tw-blog .twbild{border-radius:18px;overflow:hidden;background:var(--color-surface-2);padding:14px;box-sizing:border-box;margin-bottom:18px}
.tw-blog .twbild img{width:100%;height:300px;object-fit:cover;display:block;border-radius:10px}
.tw-blog .twband .twbild{background:var(--band-bildbg)}
.tw-blog .twband .twbild img{height:400px}

.tw-blog .twmerk{border-left:3px solid var(--color-primary);padding:2px 0 2px 18px;margin:16px 0;font-size:16px;line-height:1.7;font-weight:600;color:var(--color-text)}
.tw-blog .twhand{font-family:var(--font-accent);font-size:19px;color:var(--navy-700);margin:6px 0}
[data-theme="dark"] .tw-blog .twhand{color:var(--sky-300)}
.tw-blog .twklein{font:400 12.5px/1.6 var(--font-body);color:var(--color-text-muted);margin:0}
.tw-blog .twstark{font-weight:600;color:var(--color-text)}

/* --- Fakten-Karussell --- */
.tw-blog .twfakt{background:var(--sky-100);border-radius:var(--radius-lg);padding:26px 30px 22px}
[data-theme="dark"] .tw-blog .twfakt{background:var(--color-surface);border:1px solid var(--hair)}
.tw-blog .twfaktkopf{display:flex;align-items:center;gap:22px;min-height:126px}
.tw-blog .twfaktic{flex-shrink:0;width:46px;height:46px;border-radius:var(--radius-pill);background:var(--navy-900);display:grid;place-items:center;color:var(--sky-300)}
.tw-blog .twfaktic svg{width:24px;height:24px}
[data-theme="dark"] .tw-blog .twfaktic{background:var(--sky-300);color:var(--navy-900)}
.tw-blog .twfaktbody{display:flex;flex-direction:column;gap:5px}
.tw-blog .twfakttitel{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1.15;text-transform:uppercase;letter-spacing:.025em;color:var(--navy-900);margin:0}
[data-theme="dark"] .tw-blog .twfakttitel{color:var(--color-text-inverse)}
.tw-blog .twfakttext{font-size:14.5px;line-height:1.7;color:var(--navy-700);margin:4px 0 0}
[data-theme="dark"] .tw-blog .twfakttext{color:var(--color-text-inverse-muted)}
.tw-blog .twfaktleiste{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(17,28,53,.12)}
[data-theme="dark"] .tw-blog .twfaktleiste{border-top-color:var(--hair)}
.tw-blog .twfaktpunkte{display:flex;gap:12px;align-items:center}
.tw-blog .twfaktgruppe{font:700 11px/1 var(--font-body);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--navy-700)}
[data-theme="dark"] .tw-blog .twfaktgruppe{color:var(--color-text-inverse-muted)}
.tw-blog .twfaktpunkt{width:9px;height:9px;border-radius:var(--radius-pill);border:0;padding:0;cursor:pointer;background:rgba(17,28,53,.25);transition:all var(--transition-fast)}
[data-theme="dark"] .tw-blog .twfaktpunkt{background:rgba(160,218,254,.3)}
.tw-blog .twfaktpunkt.on{width:24px;background:var(--navy-900)}
[data-theme="dark"] .tw-blog .twfaktpunkt.on{background:var(--sky-300)}
.tw-blog .twfaktpfeile{display:flex;gap:10px;align-items:center}
.tw-blog .twfaktzahl{font:500 12.5px/1 var(--font-body);color:var(--navy-700);font-variant-numeric:tabular-nums;margin-right:4px}
[data-theme="dark"] .tw-blog .twfaktzahl{color:var(--color-text-inverse-muted)}
.tw-blog .twfaktpfeil{width:44px;height:44px;border-radius:var(--radius-pill);border:1.5px solid var(--navy-900);background:transparent;color:var(--navy-900);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:transform var(--transition-fast),background var(--transition-fast)}
.tw-blog .twfaktpfeil.on{background:var(--navy-900);color:var(--sky-300)}
.tw-blog .twfaktpfeil:hover{transform:translateY(-1px)}
.tw-blog .twfaktpfeil svg{width:18px;height:18px}
[data-theme="dark"] .tw-blog .twfaktpfeil{border-color:var(--sky-300);color:var(--sky-300)}
[data-theme="dark"] .tw-blog .twfaktpfeil.on{background:var(--sky-300);color:var(--navy-900)}
.tw-blog .twfaktpunkt:focus-visible,.tw-blog .twfaktpfeil:focus-visible,.tw-blog .twfilter button:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* --- Abstammungsleiter --- */
.tw-blog .twleiter{display:flex;gap:8px;margin-top:18px}
.tw-blog .twstufe{flex:1;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 12px;display:flex;flex-direction:column;gap:4px;align-items:center}
.tw-blog .twstufe b{font:700 13px/1 var(--font-body);color:var(--navy-800)}
.tw-blog .twstufe span{font:500 12.5px/1 var(--font-body);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
[data-theme="dark"] .tw-blog .twstufe b{color:var(--color-text)}
.tw-blog .twstufe.on{flex:1.25;border-color:var(--navy-900);background:var(--navy-900)}
.tw-blog .twstufe.on b{color:var(--color-text-inverse)}
.tw-blog .twstufe.on span{color:var(--sky-300)}

/* --- Skalentabelle --- */
.tw-blog .twtabwrap{overflow-x:auto;margin-top:8px}
.tw-blog .twskalen{width:100%;border-collapse:collapse;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;min-width:520px}
.tw-blog .twskalen th{text-align:left;padding:12px 14px;font:700 11.5px/1.3 var(--font-body);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--navy-900);background:var(--sky-100)}
[data-theme="dark"] .tw-blog .twskalen th{color:var(--sky-300);background:var(--navy-900)}
.tw-blog .twskalen td{padding:13px 14px;font:400 13.5px/1.6 var(--font-body);color:var(--color-text-muted);vertical-align:top;border-top:1px solid var(--hair)}
.tw-blog .twskalen td b{display:block;font:700 13.5px/1.5 var(--font-body);color:var(--color-text)}
.tw-blog .twskalen td span{display:block;font:400 12px/1.4 var(--font-body);color:var(--color-text-muted);margin-top:3px}
.tw-blog .twskalen tr.on{background:var(--sky-50)}
[data-theme="dark"] .tw-blog .twskalen tr.on{background:var(--color-surface-2)}

.tw-blog .twkasten{background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:12px;margin-top:16px}
.tw-blog .twkasten h3{font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.15;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text);margin:0}
.tw-blog .twkasten p{font:400 14.5px/1.75 var(--font-body);color:var(--color-text-muted);margin:0}
.tw-blog .twstufen{display:flex;gap:7px;flex-wrap:wrap}
.tw-blog .twstufen span{font:600 12.5px/1 var(--font-body);padding:9px 13px;border-radius:var(--radius-pill);background:var(--color-surface-2);color:var(--navy-800);border:1px solid var(--color-border)}
[data-theme="dark"] .tw-blog .twstufen span{color:var(--color-text)}
.tw-blog .twstufen span.on{background:var(--navy-900);color:var(--sky-300);border-color:var(--navy-900)}

/* --- Kennzahl --- */
.tw-blog .twstat{border:1px solid var(--color-border);border-radius:18px;background:var(--color-surface);padding:26px 28px;display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.tw-blog .twstatn{font-family:var(--font-display);font-weight:400;font-size:52px;line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums}
.tw-blog .twstatl{font:700 13px/1.4 var(--font-body);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--navy-800)}
[data-theme="dark"] .tw-blog .twstatl{color:var(--color-text)}
.tw-blog .twstat p{font:400 13.5px/1.7 var(--font-body);color:var(--color-text-muted);margin:0}

/* --- Querkarte (Beitrag im Kontext) --- */
.tw-blog .twquer{display:flex;gap:16px;align-items:center;border:1px solid var(--hair);border-radius:16px;background:var(--color-surface);padding:14px;text-decoration:none;color:inherit;transition:transform var(--transition-base),box-shadow var(--transition-base)}
.tw-blog .twquer:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);color:inherit}
.tw-blog .twquer:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tw-blog .twquerbild{flex-shrink:0;width:150px;height:104px;border-radius:12px;overflow:hidden;background:var(--color-surface-2)}
.tw-blog .twquerbild img{width:100%;height:100%;object-fit:cover;display:block}
.tw-blog .twquertext{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.tw-blog .twquertext h3{font-family:var(--font-display);font-weight:400;font-size:21px;line-height:1.15;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text);margin:0}
.tw-blog .twquertext p{font:400 13.5px/1.65 var(--font-body);color:var(--color-text-muted);margin:0}
.tw-blog .twkontext{margin-bottom:18px}

/* --- Grundlagen (How True Do) --- */
.tw-blog .twgriffe{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}

/* --- Rezept-Browser --- */
.tw-blog .twfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.tw-blog .twfilter .cchip span{opacity:.6;margin-left:5px;font-variant-numeric:tabular-nums}
.tw-blog .twcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tw-blog .twcut{border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--color-surface);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base)}
.tw-blog .twcut:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);color:inherit}
.tw-blog .twcut:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tw-blog .twcutbild{aspect-ratio:1;background:var(--product-stage);margin:10px;border-radius:10px;display:grid;place-items:center;overflow:hidden;box-sizing:border-box}
.tw-blog .twcutbild img{width:100%;height:100%;object-fit:cover;display:block}
.tw-blog .twcuttext{padding:4px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.tw-blog .twcuttext h3{font-family:var(--font-display);font-weight:400;font-size:18px;line-height:1.15;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text);margin:0}
.tw-blog .twcuttext p{font:400 12.5px/1.55 var(--font-body);color:var(--color-text-muted);margin:0;flex:1}
.tw-blog .twcutgo{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--font-body);color:var(--color-link)}
.tw-blog .twcutgo svg{width:14px;height:14px}
.tw-blog .twleer{font:600 14px/1.6 var(--font-body);color:var(--color-text-muted);text-align:center;padding:40px 0;margin:0}

.tw-blog .twarchiv .twzahl{font:600 13px/1 var(--font-body);padding:11px 17px;border-radius:var(--radius-pill);background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--navy-800);white-space:nowrap}
[data-theme="dark"] .tw-blog .twarchiv .twzahl{color:var(--color-text)}

@media (max-width:980px){
    .tw-blog .twsplit,.tw-blog .twsplit-links{grid-template-columns:1fr;gap:32px}
    .tw-blog .twgriffe{grid-template-columns:1fr 1fr}
    .tw-blog .twcuts{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
    .tw-blog .twsec,.tw-blog .twfaktsec,.tw-blog .twbrowser,.tw-blog .twarchiv{padding:48px 0}
    .tw-blog .twband{padding:48px 0}
    .tw-blog .twband h2{font-size:28px}
    .tw-blog .twgriffe{grid-template-columns:1fr}
    .tw-blog .twcuts{grid-template-columns:1fr 1fr}
    .tw-blog .twfakt{padding:22px}
    .tw-blog .twfaktkopf{flex-direction:column;align-items:flex-start;gap:14px;min-height:0}
    .tw-blog .twfakttitel{font-size:22px}
    .tw-blog .twfaktgruppe{display:none}
    .tw-blog .twquer{flex-direction:column;align-items:stretch}
    .tw-blog .twquerbild{width:100%;height:150px}
    .tw-blog .twleiter{flex-wrap:wrap}
    .tw-blog .twstufe{flex:1 1 30%}
}

/* Hervorhebungen im Dunkelmodus: navy-900 ist dort die Seitenfarbe, ein
   navy-900-Feld verschwindet also im Hintergrund statt hervorzustechen.
   Im Dunkeln uebernimmt Himmelblau die Rolle - dieselbe Umkehrung wie beim
   CTA (DESIGN_SYSTEM.md: "Himmelblau wechselt darin die Rolle"). */
[data-theme="dark"] .tw-blog .twstufe.on{background:var(--color-primary);border-color:var(--color-primary)}
[data-theme="dark"] .tw-blog .twstufe.on b{color:var(--navy-900)}
[data-theme="dark"] .tw-blog .twstufe.on span{color:var(--navy-800)}
[data-theme="dark"] .tw-blog .twstufen span.on{background:var(--color-primary);color:var(--navy-900);border-color:var(--color-primary)}
[data-theme="dark"] .tw-blog .twskalen th{background:var(--color-surface-2)}

/* ---- Muuhsletter ----
 * Die Seite benutzt bewusst dieselben Bausteine wie Kontakt (.kg/.kcard/
 * .kaside/.kc). Deshalb steht hier nur, was dort fehlt: die Abstaende der
 * beiden Sektionen und die ruhigere Abmeldekarte.
 *
 * padding-top:0 in .nlsec ist Notwehr gegen NOVAs clear.css, die jedem
 * <section> in <main> 4rem verpasst.
 */
.nlsec{padding:0}
.nlsec-ab{padding-bottom:130px}
/* NOVA haengt an .newsletter-subscribe 80px Abstand nach unten - dort ist es
   der Trenner zur Abmeldung, die direkt darunter steht. Hier sitzen beide in
   eigenen Karten, der Abstand liegt also INNERHALB der Karte und riss unter
   dem Datenschutzhinweis ein leeres Feld auf. Getrennt wird jetzt ueber
   .nlab. */
.tw-nl .newsletter-subscribe,.tw-nl .newsletter-unsubscribe{margin-bottom:0}
/* Die Abmeldung ist die Nebenhandlung: schmaler als die Anmeldekarte und
   ohne die Begleitkarten daneben. Der Abstand haelt sie von der Anmeldung
   getrennt, damit niemand versehentlich im falschen Formular landet. */
.nlab{max-width:620px;margin-top:44px}
/* NOVA gibt dem Abmelde-Knopf btn-outline-primary. Zwei Dinge fehlen ihm:
   Erstens der Rahmen - `.tw .btn` setzt `border:0`, damit die gefuellten
   Pillen sauber sind, und nimmt der Outline-Variante damit ihr einziges
   Merkmal. Der Knopf stand als blosser Text auf der Karte. Zweitens die
   Schriftfarbe im Dunkelmodus: `.tw .btn-outline-primary` faerbt nur den
   hellen Fall, dunkel blieb Navy auf Navy. */
.tw-nl .btn-outline-primary{border:1.5px solid var(--color-border-strong)}
.tw-nl .btn-outline-primary:hover{border-color:var(--color-cta)}
[data-theme="dark"] .tw-nl .btn-outline-primary{color:var(--sky-300);border-color:rgba(160,218,254,.4)}
[data-theme="dark"] .tw-nl .btn-outline-primary:hover{background:var(--color-cta);border-color:var(--color-cta);color:var(--color-cta-ink)}
/* Der Datenschutzhinweis unter dem Anmeldeknopf: NOVAs .info small ist im
   Dunkelmodus zu dunkel und stand direkt am Knopf. */
.tw-nl .newsletter-subscribe-consent{font:400 12px/1.6 var(--font-body);color:var(--color-text-muted);margin:14px 0 0}
@media (max-width:640px){
.nlab{margin-top:32px}
.nlsec-ab{padding-bottom:90px}
}

/* Verweis in einer Handgriff-Karte (How True Do, Karte "Auftauen"). Ersetzt
   seit dem 15.09.2026 die breite Querkarte darunter: die stand als einzelner
   Block ueber der halben Seitenbreite und liess vor "Zu jedem Cut die
   Anleitung" ein Loch stehen (Ansage Tom). Kein .btn - ein Knopf in einer
   Infokarte wiegt schwerer als die Karte selbst. */
.fmehr{display:inline-flex;align-items:center;gap:4px;margin-top:10px;
  font:700 14px/1 var(--font-body);color:var(--color-link);text-decoration:none}
.fmehr:hover{text-decoration:underline}
.fmehr svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5}

/* Wunschtag-Band auf der Versandseite (02.10.2026) */
.wtband{background:var(--sky-300);color:var(--navy-900)}
.wtband .eyebrow,.wtband .stitle{color:var(--navy-900)}
.wtbandp{font:400 16px/1.7 var(--font-body);max-width:640px;margin:0}
.wtsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wtstep{background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:8px}
.wtstep svg{width:22px;height:22px;color:var(--sky-600)}
.wtstep b{font:700 15px/1.3 var(--font-body)}
.wtstep p{margin:0;font:400 14px/1.65 var(--font-body);color:var(--color-text-muted)}
[data-theme="dark"] .wtband{background:var(--navy-900);color:var(--color-text)}
[data-theme="dark"] .wtband .eyebrow{color:var(--sky-300)}
[data-theme="dark"] .wtband .stitle{color:var(--color-text)}
[data-theme="dark"] .wtstep{background:var(--color-surface)}
[data-theme="dark"] .wtstep svg{color:var(--sky-300)}
@media (max-width:767px){.wtsteps{grid-template-columns:1fr}}