/* ==========================================================================
   [Bulle & Mensch] – zentrale Styles (site.css)
   Einbinden im <head> VOR dem seiteneigenen <style>:
     <link rel="stylesheet" href="/site.css">
   Regeln & Komponenten-Übersicht: Notion → Webseite – Claude Ablage → Design-System Webseite
   Header/Footer-Styles: Abschnitt 9 (Markup kommt aus /site-header.js).

   MOBILE FIRST: Grundregeln gelten für das Handy (ab 360 px Breite).
   Größere Bildschirme nur per min-width ergänzen – nie per max-width.
   Breakpoints: 640px (Tablet) · 900px (Desktop). Keine anderen Werte.
   Tippflächen mind. 44 px hoch (Buttons) bzw. 40 px (Schalter, Pillen).
   Schrift mind. 12 px. Kein waagrechtes Scrollen der Seite.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Farben */
  --navy:#1A1F2E;
  --lightblue:#447fb6;
  --accent:#447fb6;
  --gold:#fdbd00;
  --green:#2f9e6e;         /* eigene Bücher, Erfolg */
  --wikifolio:#78a600;     /* wikifolio-Markengrün (Buttons), wie wikifolio.com */
  --wikifolio-dark:#5f8e00;/* Hover, Text auf Weiß */
  --wikifolio-light:#95c11f;/* Logo-Grün, Rahmen */
  --gray:#f0f0f0;          /* Seitenhintergrund */
  --card:#ffffff;
  --text:#1a1f2e;
  --muted:#5b6270;
  --border:#e2e2e2;
  --on-dark:#c7cbd4;       /* Fließtext auf Navy */
  --on-dark-muted:#8b93a3; /* Kleingedrucktes auf Navy */

  /* Radien */
  --r-sm:8px;
  --r-md:10px;   /* Kauf-/Plattform-Buttons */
  --r-lg:14px;   /* Karten */
  --r-pill:999px;

  /* Schatten */
  --shadow-card:0 1px 3px rgba(0,0,0,0.04);
  --shadow-hover:0 10px 24px rgba(26,31,46,0.12);
  --shadow-gold:0 4px 14px rgba(253,189,0,0.35);

  /* Schrift */
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-brand:'Poppins',sans-serif;
}

/* ---------- 2. Basis ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{ background:var(--gray); color:var(--text); font-family:var(--font); min-height:100vh; }

/* Inhaltsbreite: EINE Breite fuer alle Seiten (1000px), damit Breadcrumb, Titel und Inhalt
   beim Seitenwechsel nicht springen. Die Klassen w-narrow/w-text/w-mid/w-wide bleiben
   aus Kompatibilitaet bestehen, haben aber alle dieselbe Breite. */
main{ width:100%; max-width:1000px; min-width:0; margin:0 auto; padding:24px 16px 48px; }
main.w-narrow, main.w-text, main.w-mid, main.w-wide{ max-width:1000px; }
@media (min-width:640px){ main{ padding:36px 16px 60px; } }
img{ max-width:100%; }

/* ---------- 3. Seitenkopf ---------- */
.eyebrow{ text-align:center; color:var(--accent); font-weight:700; font-size:14.5px; text-transform:uppercase; letter-spacing:0.8px; margin:0 0 8px; }
main h1{ font-size:23px; line-height:1.25; text-align:center; margin:0 0 6px; overflow-wrap:break-word; hyphens:auto; }
main p.intro{ font-size:15.5px; color:var(--muted); text-align:center; margin:0 auto 20px; max-width:520px; line-height:1.5; }
/* h1 ohne Intro darunter: mehr Abstand (:where = Seiten-CSS kann es überschreiben) */
main h1:where(:not(:has(+ .intro))){ margin-bottom:24px; }
@media (min-width:640px){
  main h1{ font-size:26px; }
  main p.intro{ font-size:16px; margin-bottom:28px; }
}

.breadcrumb{ font-size:13px; color:var(--muted); margin-bottom:20px; }
.breadcrumb a{ color:var(--muted); text-decoration:none; display:inline-block; padding:6px 0; }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb span[aria-current]{ color:var(--text); font-weight:600; }

/* ---------- 4. Sortieren / Umschalten (Segment-Schalter) ----------
   <div class="section-header">
     <h2 class="section-title">Titel</h2>            (optional)
     <div class="sort-toggle" role="group" aria-label="Sortierung">
       <button type="button" class="sort-btn active" aria-pressed="true"  data-sort="new">Neueste zuerst</button>
       <button type="button" class="sort-btn"        aria-pressed="false" data-sort="old">Älteste zuerst</button>
     </div>
   </div>                                                                  */
/* Handy: Schalter über volle Breite, Buttons gleich breit (gut mit dem Daumen). Ab 640 px: kompakt rechts. */
.section-header{ display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-bottom:14px; }
.section-title{ font-size:19px; margin:0; display:flex; align-items:center; gap:8px; }
.sort-toggle{ display:flex; gap:6px; background:var(--border); padding:4px; border-radius:var(--r-md); }
.sort-btn{
  flex:1 1 0; min-width:0; min-height:40px; line-height:1.25;
  font-family:inherit; border:none; background:transparent; padding:8px 10px; border-radius:7px;
  font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; white-space:normal;
}
.sort-btn.active,
.sort-btn[aria-pressed="true"]{ background:var(--card); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,0.08); }
@media (min-width:640px){
  .section-header{ flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .section-header.end{ justify-content:flex-end; }
  .sort-btn{ flex:none; min-height:0; padding:7px 13px; font-size:13px; white-space:nowrap; }
}

/* ---------- 5. Buttons ----------
   .btn            Basis (Pille)
   .btn-gold       Haupt-Aktion (Gold)
   .btn-navy       Zweit-Aktion (Navy)
   .btn-wikifolio  wikifolio-Links (Markengrün)
   .btn-sm         kleiner
   .btn-block      Handy: volle Breite                                  */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-weight:700; font-size:15px; line-height:1.2;
  min-height:44px; padding:11px 24px; border-radius:24px; border:none; cursor:pointer;
  text-decoration:none !important; white-space:nowrap;
  transition:filter .15s ease, transform .12s ease;
}
.btn:hover{ filter:brightness(0.96); }
.btn-gold{ background:var(--gold); color:var(--navy) !important; }
.btn-navy{ background:var(--navy); color:#fff !important; }
.btn-wikifolio{ background:var(--wikifolio); color:#fff !important; }
.btn-wikifolio:hover{ background:var(--wikifolio-dark); filter:none; }
.btn-sm{ font-size:13.5px; padding:8px 16px; min-height:40px; }
.btn-block{ display:flex; width:100%; white-space:normal; text-align:center; }
@media (min-width:640px){ .btn-block{ display:inline-flex; width:auto; } }
.btn-wrap{ text-align:center; margin:0 0 28px; }

/* ---------- 6. Pillen / Chips (Sprungmarken, Social-Links) ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--border);
  min-height:40px; color:var(--text); text-decoration:none; font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:var(--r-pill);
}
a.pill:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- 7. Karten ----------
   .card = weiße Inhaltskarte. Text darin (h2, h3, p, Listen, Links) ist einheitlich gestylt. */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 16px; margin-bottom:16px; scroll-margin-top:80px; }
.card h2{ font-size:16px; text-transform:uppercase; letter-spacing:0.8px; color:var(--accent); margin:0 0 12px; }
.card h3{ font-size:15px; color:var(--navy); margin:16px 0 6px; }
.card h3:first-child{ margin-top:0; }
.card p, .card ul, .card ol{ font-size:16px; line-height:1.65; margin:0 0 10px; }
.card ul, .card ol{ padding-left:20px; }
.card p:last-child, .card ul:last-child, .card ol:last-child{ margin-bottom:0; }
.card a:where(:not([class])){ color:var(--accent); text-decoration:underline; overflow-wrap:anywhere; }
.card .btn{ margin-top:6px; }
@media (min-width:640px){ .card{ padding:22px; } }
a.card-link{ text-decoration:none; color:var(--text); transition:box-shadow .15s ease, transform .15s ease; }
a.card-link:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }

/* ---------- 7b. Aufklapp-Schritte (Checkliste, Promo) ----------
   <details class="step"><summary><span class="stitle"><span class="num">1</span>Titel<span class="ssub">Untertitel</span></span><span class="chev">+</span></summary>
   <div class="step-body">…</div></details> */
details.step{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:16px; overflow:hidden; scroll-margin-top:80px; }
details.step summary{ list-style:none; cursor:pointer; padding:16px; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
details.step summary::-webkit-details-marker{ display:none; }
details.step summary .stitle{ font-size:16px; font-weight:700; color:var(--navy); }
details.step summary .stitle .num{ display:inline-block; background:var(--accent); color:#fff; width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%; font-size:13px; margin-right:10px; }
details.step summary .ssub{ display:block; font-size:13px; color:var(--muted); font-weight:400; margin:2px 0 0 34px; }
details.step summary .chev{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--gray); color:var(--navy); font-size:16px; line-height:24px; text-align:center; font-weight:700; }
details.step[open] summary .chev{ transform:rotate(45deg); }
details.step .step-body{ padding:16px 16px 18px; border-top:1px solid var(--border); }
details.step h3{ font-size:15px; color:var(--navy); margin:16px 0 8px; }
details.step h3:first-child{ margin-top:0; }
details.step p, details.step ul, details.step ol{ font-size:16px; line-height:1.65; margin:0 0 10px; }
details.step ul, details.step ol{ padding-left:20px; }
details.step p:last-child, details.step ul:last-child, details.step ol:last-child{ margin-bottom:0; }
details.step a:where(:not([class])){ color:var(--accent); text-decoration:underline; overflow-wrap:anywhere; }
@media (min-width:640px){
  details.step summary{ padding:18px 22px; }
  details.step .step-body{ padding:16px 22px 22px; }
}

/* ---------- 7c. Schnell-Navigation (Sprung-Buttons oben auf der Seite) ---------- */
.quicknav{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 28px; }
.quicknav a{ display:inline-flex; align-items:center; min-height:40px; background:var(--navy); color:#fff; text-decoration:none; font-weight:700; font-size:14px; padding:9px 18px; border-radius:24px; }
.quicknav a:nth-child(2){ background:var(--accent); }
.quicknav a:nth-child(3){ background:var(--gold); color:var(--navy); }

/* ---------- 7d. Link-Liste mit Icon (Plattformen, Social) ----------
   <div class="group-label">Titel</div>
   <ul class="links"><li><a class="linkcard [big]"><span class="icon c-spotify">…</span> Spotify</a></li></ul> */
.group-label{ font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin:28px 0 10px; padding-left:4px; }
.group-label:first-of-type{ margin-top:8px; }
ul.links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
a.linkcard{
  display:flex; align-items:center; gap:14px; min-height:44px; background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:14px 16px; text-decoration:none; color:var(--text); font-weight:600; font-size:16px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.linkcard:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(26,31,46,0.10); border-color:var(--gold); }
a.linkcard.big{ padding:18px; font-size:18px; }
a.linkcard .icon{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; color:#fff; font-size:17px; font-weight:700; }
a.linkcard.big .icon{ width:42px; height:42px; border-radius:11px; font-size:21px; }

/* ---------- 7e. Plattform- und Markenfarben (Icon-Hintergründe) ---------- */
.c-spotify{ background:#1DB954; }
.c-apple{ background:linear-gradient(135deg,#f452ff,#832bc1); }
.c-youtube{ background:#FF0000; }
.c-ytmusic{ background:#FF0033; }
.c-amazon{ background:#00A8E1; }
.c-deezer{ background:linear-gradient(135deg,#a238ff,#ff0092); }
.c-rtl{ background:#E2001A; }
.c-audible{ background:#F8991C; }
.c-tunein{ background:#14A4E6; }
.c-pocketcasts{ background:#F43E37; }
.c-overcast{ background:#FC7E0F; }
.c-castbox{ background:#F55B23; }
.c-podaddict{ background:#6ABE4C; }
.c-podrepublic{ background:#38A9E4; }
.c-podfriend{ background:#7B61FF; }
.c-podcastde{ background:#2D6CA2; }
.c-android{ background:#3DDC84; color:var(--navy); }
.c-rss{ background:#FFA500; }
.c-instagram{ background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
.c-linkedin{ background:#0A66C2; }
.c-facebook{ background:#1877F2; }
.c-x, .c-tiktok, .c-threads{ background:#000; }
.c-substack{ background:#FF6719; }
.c-pinterest{ background:#E60023; }
.c-wikifolio{ background:var(--wikifolio); }
.c-navy{ background:var(--navy); }
.c-accent{ background:var(--accent); }
.c-gold{ background:var(--gold); color:var(--navy); }

/* ---------- 7f. Folgen-Karten (/folgen, Themen-Seiten, Startseite) ----------
   <div class="ep-grid">
     <a class="ep-card" href="/0XX-slug"><img class="thumb" …><div class="ep-body"><div class="ep-num">Folge X</div><div class="ep-title">…</div><div class="ep-guest">Name</div></div></a>
   </div>
   (alternativ: <div class="ep-card"><a class="ep-card-link">…</a><a class="ep-guest" href="/gast/…">Name</a></div>)
   Diese Struktur NICHT ändern: scripts/publish-scheduled.mjs fügt neue Karten genau so ein. */
.ep-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.ep-card{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:var(--text); transition:transform .15s ease, box-shadow .15s ease; }
a.ep-card:hover, .ep-card:has(> .ep-card-link):hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(26,31,46,0.12); }
.ep-card .ep-card-link{ display:contents; color:inherit; text-decoration:none; }
.ep-card .thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--navy); }
.ep-card .ep-body{ padding:14px 16px 16px; }
.ep-card .ep-num{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--accent); margin-bottom:4px; }
.ep-card .ep-title{ font-size:15.5px; font-weight:700; line-height:1.35; margin-bottom:6px; }
.ep-card .ep-guest{ font-size:13.5px; color:var(--muted); }
.ep-card a.ep-guest{ display:block; padding:8px 16px 14px; margin-top:-8px; text-decoration:none; }
.ep-card a.ep-guest:hover{ color:var(--accent); text-decoration:underline; }

/* ---------- 7g. Playlist-Karten (dunkel) ---------- */
.playlist-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
a.playlist-card{ display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; border-radius:var(--r-lg); background:var(--navy); color:#fff; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
a.playlist-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(26,31,46,0.25); }
a.playlist-card .playlist-title{ font-weight:700; font-size:15px; }
a.playlist-card .playlist-desc{ font-weight:400; font-size:13px; color:var(--on-dark); line-height:1.4; }

/* ---------- 7h. YouTube-Button + Zurück-Link ---------- */
.yt-cta-wrap{ text-align:center; margin:0 0 32px; }
a.yt-cta{ display:inline-flex; align-items:center; gap:9px; min-height:44px; background:#FF0000; color:#fff !important; text-decoration:none !important; font-weight:700; font-size:15.5px; padding:12px 26px; border-radius:26px; box-shadow:0 4px 14px rgba(255,0,0,0.28); transition:transform .15s ease, box-shadow .15s ease; }
a.yt-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,0,0,0.35); }
.back-link{ text-align:center; margin:0 0 28px; }
.back-link a{ display:inline-block; padding:10px 0; color:var(--accent); font-weight:700; font-size:14px; text-decoration:none; }
.back-link a:hover{ text-decoration:underline; }

/* ---------- 7i. Newsletter-Band (dunkel, mit Formular) ----------
   <div class="nl-band"><p>Text</p><form class="nl-form"><input type="email"><input class="nl-hp"><button>…</button></form>
   <div class="nl-msg"></div><div class="nl-fineprint">…</div></div> */
.nl-band{ background:var(--navy); border-radius:18px; padding:24px 18px; text-align:center; margin:24px 0; }
.nl-band p{ color:#fff; font-size:16px; line-height:1.55; max-width:520px; margin:0 auto 16px; }
.nl-form{ display:flex; gap:8px; max-width:420px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.nl-form input[type="email"]{ flex:1 1 220px; min-height:44px; font-family:inherit; font-size:16px; padding:11px 14px; border-radius:10px; border:none; min-width:0; }
.nl-form button{ flex:none; min-height:44px; background:var(--gold); color:var(--navy); border:none; font-family:inherit; font-weight:700; font-size:15px; padding:11px 20px; border-radius:24px; cursor:pointer; }
.nl-form button:disabled{ opacity:0.7; cursor:default; }
.nl-msg{ margin-top:10px; font-size:13.5px; color:var(--on-dark); }
.nl-msg.ok{ color:#7CE0A0; }
.nl-msg.err{ color:#ff8080; }
.nl-fineprint{ color:var(--on-dark-muted); margin:8px auto 0; }
.nl-fineprint a{ color:var(--on-dark-muted); }
.nl-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (min-width:640px){
  .nl-band{ padding:28px 24px; }
  .nl-band p{ font-size:16.5px; }
}

/* ---------- 8. Kleingedrucktes ---------- */
.fineprint{ text-align:center; color:var(--muted); margin:24px 0 0; }
.fineprint a{ color:var(--muted); text-decoration:underline; }

/* Eyebrow-Link (z.B. Gastname "Folge 32 · Larissa Kravitz" -> /gast/...) */
.eyebrow a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.eyebrow a:hover{ text-decoration-thickness:2px; }

/* Rechtstext (Datenschutz-Hinweis unter Formularen, "Kostenlos, jederzeit abbestellbar ...")
   IMMER klein: 12px, egal in welcher Box. Hell: .fineprint, auf Navy: .nl-fineprint.
   Hohe Spezifitaet, damit Regeln wie ".nl-band p" oder Seiten-CSS ihn nicht vergroessern. */
.fineprint, .nl-fineprint,
:is(main, form, .nl-band, .card) :is(p.fineprint, p.nl-fineprint){ font-size:12px; line-height:1.45; }
:is(main, form, .nl-band, .card) p.nl-fineprint{ color:var(--on-dark-muted); margin-bottom:0; }

/* ---------- 9. Header, Navigation, Footer ----------
   Markup kommt aus /site-header.js (<div id="site-header-root"> / <div id="site-footer-root">).
   Vorher per JavaScript eingefügt – jetzt hier, damit nichts flackert. Mobile first, Breakpoint 640px. */
  header.topbar{position:relative;background:#1A1F2E;color:#fff;padding:22px 16px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;}
  .logo-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
  .wordmark{font-family:'Poppins',sans-serif;font-weight:400;font-size:clamp(26px,8.2vw,44px);letter-spacing:0.3px;color:#fff;text-align:center;text-decoration:none;line-height:1.15;white-space:nowrap;}
  .header-tagline{margin-top:10px;font-size:17.5px;color:#fff;opacity:0.85;text-align:center;width:100%;}
  .header-social{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
  .header-social a{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:110px;padding:5px 11px 5px 8px;border-radius:20px;color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,0.25);transition:transform .15s ease, box-shadow .15s ease;}
  .header-social a:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,0.3);}
  .header-social .ico{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;font-size:9px;flex:none;}
  .header-social .c-spotify .ico{background:transparent;width:20px;height:20px;}
  .header-social .c-spotify .ico svg{width:20px;height:20px;display:block;}
  .header-social .c-youtube{background:#FF0000;}
  .header-social .c-spotify{background:#1DB954;}
  .header-social .c-apple{background:#872EC4;}
  .header-social .c-more{width:110px;background:none;box-shadow:none;color:#8b93a3;font-weight:700;font-size:10.5px;text-decoration:none;padding:2px 0 0;margin-top:2px;}
  .header-social .c-more:hover{color:#fff;transform:none;box-shadow:none;}
  /* Mobile first (vorher (max-width:420px)) */
  .header-social{ position:static; align-items:center; flex-direction:row; justify-content:center; margin-top:12px; flex-wrap:wrap; }
  @media (min-width:640px){
    .header-social{ position:absolute; align-items:flex-end; flex-direction:column; justify-content:revert; margin-top:revert; flex-wrap:revert; }
  }
  .header-extra-slot{width:100%;align-self:stretch;margin-top:12px;display:flex;justify-content:center;}
  .header-extra-slot > div{margin:0 auto;}
  nav.mainnav{background:#1A1F2E;border-top:1px solid rgba(255,255,255,0.12);position:relative;z-index:30;}
  nav.mainnav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;}
  nav.mainnav > ul > li{position:relative;}
  nav.mainnav a,nav.mainnav button.navtoggle{color:#fff;text-decoration:none;font-size:15px;font-weight:600;padding:13px 14px;display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;white-space:nowrap;}
  nav.mainnav > ul > li > a:hover,nav.mainnav button.navtoggle:hover{color:#fdbd00;}
  nav.mainnav .caret{font-size:9px;opacity:0.7;transition:transform .15s ease;}
  nav.mainnav li.open .caret{transform:rotate(180deg);}
  nav.mainnav .dropdown{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#232838;min-width:230px;max-width:80vw;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,0.35);padding:6px;z-index:40;}
  nav.mainnav li.open .dropdown{display:block;}
  nav.mainnav .dropdown a{display:block;padding:10px 12px;font-size:15px;font-weight:500;border-radius:7px;white-space:normal;}
  nav.mainnav .dropdown a:hover{background:rgba(255,255,255,0.08);color:#fdbd00;}
  nav.mainnav li.split{display:flex;align-items:center;}
  nav.mainnav li.split > a{padding-right:2px;}
  nav.mainnav .caret-btn{padding:13px 12px 13px 2px;}
  @media (min-width:640px){ header.topbar{ min-height:130px; } } /* Plattform-Buttons rechts brauchen die Hoehe */
  /* Teilen-Button im blauen Header. Handy: rundes Icon oben rechts neben dem Logo. Ab 640px: Pille oben links, gegenueber den Plattform-Buttons. */
  .header-share-bar{position:absolute;right:6px;top:6px;z-index:35;}
  .header-share-bar .share-wrap{position:relative;}
  .header-share-bar .header-share-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:40px;height:40px;padding:0;border-radius:50%;color:#1A1F2E;font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,0.3);border:none;cursor:pointer;font-family:inherit;background:#fdbd00;transition:transform .15s ease, box-shadow .15s ease;}
  .header-share-bar .header-share-btn:hover{background:#ffce33;transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,0.35);}
  .header-share-bar .header-share-btn .ico{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex:none;color:#1A1F2E;}
  .header-share-bar .header-share-btn .ico svg{width:16px;height:16px;display:block;}
  .header-share-bar .share-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .header-share-bar .header-share-panel{right:0;left:auto;}
  @media (min-width:640px){
    .header-share-bar{top:14px;left:14px;right:auto;bottom:auto;}
    .header-share-bar .header-share-btn{width:110px;height:auto;padding:5px 11px 5px 8px;border-radius:20px;}
    .header-share-bar .header-share-btn .ico{width:16px;height:16px;border-radius:50%;background:rgba(26,31,46,0.18);}
    .header-share-bar .header-share-btn .ico svg{width:11px;height:11px;}
    .header-share-bar .share-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;}
    .header-share-bar .header-share-panel{left:0;right:auto;}
  }
  .header-share-panel{display:none;position:absolute;top:100%;right:0;margin-top:8px;width:190px;flex-wrap:wrap;gap:6px;background:#232838;border-radius:12px;padding:10px;box-shadow:0 12px 30px rgba(0,0,0,0.35);z-index:60;}
  .share-wrap.open .header-share-panel{display:flex;}
  .header-share-panel a,.header-share-panel button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;color:#fff;padding:0;text-decoration:none;transition:transform .15s ease;}
  .header-share-panel a svg,.header-share-panel button svg{width:14px;height:14px;display:block;}
  .header-share-panel a:hover,.header-share-panel button:hover{transform:translateY(-1px);}
  .header-share-panel .s-native{background:#fdbd00;color:#1A1F2E;}
  .header-share-panel .s-whatsapp{background:#25D366;}
  .header-share-panel .s-telegram{background:#26A5E4;}
  .header-share-panel .s-x{background:#000;}
  .header-share-panel .s-facebook{background:#1877F2;}
  .header-share-panel .s-linkedin{background:#0A66C2;}
  .header-share-panel .s-email{background:#5b6270;}
  .header-share-panel .s-copy{background:#1A1F2E;}
  .header-share-panel .s-copy.copied{background:#2fae60;}
  /* Mobile first (vorher (max-width:680px)) */
  nav.mainnav ul{ flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; }
  nav.mainnav ul::-webkit-scrollbar{ display:none; }
  nav.mainnav > ul > li{ flex:none; }
  nav.mainnav a,nav.mainnav button.navtoggle{ padding:12px 10px;font-size:13px; }
  nav.mainnav .caret-btn{ padding:12px 10px 12px 2px; }
  nav.mainnav .dropdown{ position:fixed;left:auto;top:auto;transform:none;max-width:92vw;max-height:70vh;overflow-y:auto; }
  @media (min-width:640px){
    nav.mainnav ul{ flex-wrap:wrap; justify-content:center; overflow-x:revert; -webkit-overflow-scrolling:revert; scrollbar-width:revert; }
    nav.mainnav ul::-webkit-scrollbar{ display:revert; }
    nav.mainnav > ul > li{ flex:revert; }
    nav.mainnav a{ padding:13px 14px; font-size:15px; }
    nav.mainnav button.navtoggle{ padding:13px 14px; font-size:15px; }
    nav.mainnav .caret-btn{ padding:13px 12px 13px 2px; }
    nav.mainnav .dropdown{ position:absolute; left:50%; top:100%; transform:translateX(-50%); max-width:80vw; max-height:revert; overflow-y:revert; }
  }
  .site-header-sticky{position:relative;}
  @media (min-width:640px){ .site-header-sticky{position:sticky;top:0;z-index:100;box-shadow:0 4px 14px rgba(0,0,0,0.2);} }
  .mobile-sticky-logo{display:none;}
  /* Mobile first (vorher (max-width:680px)) */
  .mobile-sticky-logo{ display:block;position:fixed;top:0;left:0;right:0;z-index:110;background:#1A1F2E;text-align:center;padding:10px 16px;box-shadow:0 4px 14px rgba(0,0,0,0.25);transform:translateY(-100%);transition:transform .2s ease; }
  .mobile-sticky-logo.is-visible{ transform:translateY(0); }
  .mobile-sticky-logo a{ font-family:'Poppins',sans-serif;font-weight:400;font-size:clamp(18px,6.5vw,24px);letter-spacing:0.3px;color:#fff;text-decoration:none;white-space:nowrap; }
  .mobile-share-wrap{ position:absolute;top:50%;right:14px;transform:translateY(-50%); }
  .mobile-share-wrap .header-share-btn{ display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fdbd00;color:#1A1F2E;border:none;cursor:pointer;padding:0;box-shadow:0 3px 8px rgba(0,0,0,0.3); }
  .mobile-share-wrap .header-share-btn .ico{ width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:#1A1F2E; }
  .mobile-share-wrap .header-share-btn .ico svg{ width:16px;height:16px;display:block; }
  .mobile-share-wrap .header-share-panel{ right:0;left:auto; }
  @media (min-width:640px){
    .mobile-sticky-logo{ display:none; }
  }
  footer.site-footer{background:#1A1F2E;color:#c7cbd4;font-size:13px;line-height:1.6;text-align:center;padding:20px 16px 26px;margin-top:32px;}
  footer.site-footer p{margin:0 0 10px;max-width:680px;margin-left:auto;margin-right:auto;}
  footer.site-footer p:last-child{margin-bottom:0;}
  footer.site-footer a{color:#c7cbd4;text-decoration:underline;}
  footer.site-footer a:hover{color:#fff;}
  footer.site-footer .footer-social{display:flex;justify-content:center;gap:10px;margin:0 0 14px;flex-wrap:wrap;}
  footer.site-footer .footer-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;text-decoration:none;color:#fff;font-size:14px;font-weight:700;}
  footer.site-footer .footer-social a:hover{opacity:0.85;}
  footer.site-footer .footer-social svg{width:18px;height:18px;display:block;}
  footer.site-footer .footer-social .c-youtube svg,footer.site-footer .footer-social .c-linkedin svg{width:17px;height:17px;}
  footer.site-footer .c-instagram{background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);}
  footer.site-footer .c-linkedin{background:#0A66C2;}
  footer.site-footer .c-x{background:#000;}
  footer.site-footer .c-youtube{background:#FF0000;}
  footer.site-footer .c-tiktok{background:#000;}
  footer.site-footer .c-campfire{background:#ff6b35;}
  footer.site-footer .footer-cols{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;text-align:left;margin:0 0 18px;}
  footer.site-footer .footer-col{min-width:150px;}
  footer.site-footer .footer-col h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:0.6px;color:#8b93a3;font-weight:700;}
  footer.site-footer .footer-col a{display:block;margin-bottom:7px;text-decoration:none;}
  footer.site-footer .footer-col a:hover{text-decoration:underline;}
  footer.site-footer .footer-fine{font-size:11.5px;color:#8b93a3;}
  footer.site-footer .footer-fine a{color:#8b93a3;}
  /* Mobile first (vorher (max-width:480px)) */
  footer.site-footer .footer-cols{ gap:32px;justify-content:space-between; }
  footer.site-footer .footer-col{ min-width:0;flex:1 1 40%; }
  @media (min-width:640px){
    footer.site-footer .footer-cols{ gap:48px; justify-content:center; }
    footer.site-footer .footer-col{ min-width:150px; flex:revert; }
  }
  html{height:100%;}
  body{display:flex;flex-direction:column;}
  main{flex:1 0 auto;}
  footer.site-footer{flex:none;}

/* ---------- Deal-Karten (/deals, Startseite) ----------
   <div class="deal-grid"><div class="card deal"><div class="deal-head"><span class="deal-logo c-…">🏆</span><div><span class="deal-tag">…</span><h2|h3>…</h2|h3></div></div>
   <p class="offer">…</p><ul>…</ul><div class="actions"><a class="btn …">…</a></div></div></div> */
.deal-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.deal{ display:flex; flex-direction:column; margin-bottom:0; }
.deal-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.deal-logo{ width:48px; height:48px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; flex:none; color:#fff; font-size:22px; }
.deal-tag{ display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--muted); }
.deal h2, .deal h3{ margin:2px 0 0; overflow-wrap:anywhere; hyphens:auto; }
.deal .offer{ font-size:18px; font-weight:800; color:var(--navy); margin:0 0 8px; }
.deal ul{ margin-bottom:14px; }
.deal .actions{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.deal .actions .btn{ margin-top:0; }
@media (min-width:640px){
  .deal-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  .deal-grid{ grid-template-columns:1fr 1fr 1fr; }
}
