/* ============================================================
   KOBOLDMAN.DE — Aktionsseite /aktionen
   ------------------------------------------------------------
   Gehoert zu public/aktionen.php. Wird NUR von /aktionen geladen.
   Alle eigenen Klassen tragen das Praefix ak- ; styles.css bleibt
   unangetastet, keine andere Seite veraendert sich.

   Der Look folgt den Produktseiten (assets/produktseite.css):
   Buehne mit runden Ecken, Karten mit 1.5px-Rand, Icon-Leiste,
   Handschrift-Akzent in Gruen. Orange gibt es nur fuer das, was
   Angebot ist: Sticker, Ersparnis-Marke, Frist, Countdown.

   Reihenfolge wie auf der Seite:
   Hero · Shopping-Week-Geraete · Titanium-Sets · Zubehoer ·
   Warum ueber Harry · Kleingedrucktes · FAQ · Kontakt
   ============================================================ */

:root{
  /* Orange aus dem CI (#D97706) traegt weisse Schrift nur in gross
     (3,2:1). Fuer kleine Schrift auf hellem Grund die dunkle Stufe. */
  --ak-orange:      var(--orange);
  --ak-orange-tief: #8F4403;
  --ak-orange-hell: #FDE9CF;
}

/* Kontrast wie auf den Produktseiten: --muted (#888) schafft auf Creme
   nur 3,1:1. #666 erreicht auf allen Flaechen dieser Seite mind. 4,5:1.
   Header und Footer liegen nicht in body>section und bleiben wie sie sind. */
body > section, body > .container{--muted:#666666}

.crumbs{padding:18px 0 0; font-size:.86rem; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--green-deep)}
.crumbs span{color:var(--muted)}

/* Hinweisband bei simulierter Zeit - gibt es nur lokal */
.ak-sim{
  margin:0; padding:7px 24px; text-align:center;
  background:var(--ink); color:#fff;
  font:600 .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- gemeinsam ---------- */
.ak-section{padding-block:clamp(56px,7vw,88px)}
.ak-mwst{font-family:var(--font-body); font-size:.76rem; font-weight:500; color:var(--muted); white-space:nowrap}
.ak-eyebrow-frist{background:var(--ak-orange-hell); color:var(--ak-orange-tief)}
.ak-ctas{display:flex; gap:12px; flex-wrap:wrap}

/* Handschrift-Akzent (Caveat, hoechstens zwei je Seite).
   Nur ab 901px: die Schrift wiegt 37 KB und wird nur fuer diese zwei
   Notizen geladen. Auf dem Handy kostete das im Lighthouse-Lauf rund
   0,3 s LCP und drei Punkte. Mit display:none fordert der Browser sie
   dort gar nicht erst an. Die Regel muss NACH .ak-hand stehen. */
.ak-hand{
  display:inline-block;
  font-family:'Caveat', cursive; font-weight:700;
  font-size:clamp(1.45rem,2.2vw,1.8rem); line-height:1.05;
  color:var(--green-deep);
  transform:rotate(-3deg);
}
@media (max-width:900px){.ak-hand{display:none}}

/* Buehne fuer die Vorwerk-Freisteller. Gleicher Grund wie .product-media,
   aber die Motive stehen im Fluss: zwei Geraete koennen nebeneinander
   stehen. Die Luft macht das Bild (max-width/max-height), nicht ein
   Prozent-Padding - das bezoege sich oben und unten auf die Breite. */
.ak-buehne{
  position:relative; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center; gap:4%;
  background:
    radial-gradient(105% 78% at 50% 4%, #fff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(168deg, var(--green-soft) 0%, var(--cream) 58%, var(--cream-warm) 100%);
  overflow:hidden;
}
.ak-buehne img{
  width:auto; height:auto; max-width:78%; max-height:82%;
  object-fit:contain;
  filter:drop-shadow(0 10px 14px rgba(60,50,20,.16));
}
.ak-buehne-zwei img{max-width:44%; max-height:74%}
/* Set-Motive von Vorwerk zeigen viele kleine Teile - die duerfen die Buehne staerker fuellen. */
.ak-deal-set .ak-buehne img{max-width:88%; max-height:90%}

/* Ersparnis-Marke auf der Karte. Weiss auf Orange: nur als grosse,
   fette Schrift (ab 18,66px fett gilt als gross, 3:1 reicht). */
.ak-badge{
  position:absolute; left:14px; top:14px; z-index:2;
  background:var(--ak-orange); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:1.2rem; line-height:1;
  padding:9px 14px; border-radius:var(--radius-full);
  box-shadow:0 6px 14px rgba(143,68,3,.22);
  white-space:nowrap;
}

/* ---------- Hero ---------- */
.ak-hero{padding-block:14px clamp(20px,3vw,36px)}
.ak-hero + .ak-sw{padding-top:clamp(36px,5vw,60px)}
.ak-hero-stage{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,56px); align-items:center;
  background:var(--cream); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,56px);
}
.ak-hero-ohne-bild{grid-template-columns:1fr}
.ak-h1{
  font-size:clamp(2.2rem,4.3vw,3.5rem); line-height:1.06;
  margin-bottom:18px; text-wrap:balance; color:var(--ink);
}
.ak-h1 .eyebrow{display:flex; width:max-content; max-width:100%; margin-bottom:16px; font-size:.92rem}
.ak-h1-zeile{display:block}
.ak-h1 em{display:block}
.ak-sub{font-size:1.12rem; color:var(--ink-soft); max-width:46ch; margin-bottom:22px; text-wrap:pretty}
.ak-hand-hero{margin:0 0 16px 2px}

.ak-hero-bild{position:relative}
/* Unten bleibt Platz fuer die Preiszeile - sie darf kein Motiv verdecken. */
.ak-buehne-hero{border-radius:var(--radius-lg); aspect-ratio:5/4; padding:18px 18px 76px}
.ak-buehne-hero img{max-width:82%; max-height:100%; filter:drop-shadow(0 16px 22px rgba(60,50,20,.18))}
.ak-buehne-hero.ak-buehne-zwei img{max-width:46%; max-height:88%}
.ak-hero-bild-leer{min-height:190px}

/* Der Sticker: das eine laute Element der Seite */
.ak-sticker{
  position:absolute; right:-10px; top:-18px; z-index:3;
  width:164px; height:164px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  margin:0; text-align:center;
  background:var(--ak-orange); color:#fff;
  box-shadow:0 12px 26px rgba(143,68,3,.30);
  transform:rotate(8deg);
}
.ak-sticker strong{font-family:var(--font-display); font-weight:700; font-size:2.5rem; line-height:1; letter-spacing:-.02em; white-space:nowrap}
.ak-sticker span{font-family:var(--font-display); font-weight:700; font-size:1.17rem; line-height:1.05}

.ak-hero-preis{
  position:absolute; left:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  max-width:calc(100% - 28px);
  background:rgba(251,250,246,.95); color:var(--ink-soft);
  padding:9px 14px; border-radius:var(--radius-md);
  font-size:.92rem; text-decoration:none;
  box-shadow:0 4px 12px rgba(60,50,20,.10);
}
.ak-hero-preis strong{font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--ink)}
.ak-hero-preis:hover{color:var(--ink)}

/* Countdown */
.ak-countdown{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:24px}
.ak-cd-label{font-weight:600; color:var(--ak-orange-tief); font-size:.95rem}
.ak-cd-uhr{display:flex; gap:8px}
.ak-cd-teil{display:flex; flex-direction:column; align-items:center; gap:4px}
.ak-cd-teil b{
  min-width:58px; padding:10px 8px; text-align:center;
  background:var(--ak-orange); color:#fff; border-radius:var(--radius-md);
  font-family:var(--font-display); font-weight:700; font-size:1.7rem; line-height:1;
  font-variant-numeric:tabular-nums;
}
.ak-cd-teil small{font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft)}

/* Hinweis auf einen Bonus, der fuer das im Hero Gezeigte NICHT gilt (Shopping Week
   im Hero, Bonus nur auf die Titanium-Sets). Gleicher Stil wie .ps-aktion auf den
   Produktseiten: ein Deal-Element in Orange, ganz als Link auf den Abschnitt. */
.ak-hero-hinweis{margin:0 0 24px}
.ak-hero-hinweis a{
  display:inline-block; max-width:100%;
  padding:9px 16px; border-radius:var(--radius-lg);
  background:var(--ak-orange-hell); color:var(--ak-orange-tief);
  font-size:.98rem; font-weight:500; line-height:1.4; text-decoration:none;
  transition:background .18s ease;
}
.ak-hero-hinweis a:hover{background:#FBD9AE}
.ak-hero-hinweis strong{font-weight:700}

/* Leiste unter dem Hero (wie .ps-trust) */
.ak-trust{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin:16px 0 0; padding:0; list-style:none;
}
.ak-trust li{
  display:flex; gap:12px; align-items:center;
  background:var(--cream); border:1.5px solid var(--border);
  border-radius:var(--radius-md); padding:14px 16px;
  font-size:.9rem; line-height:1.35; color:var(--ink-soft);
}
.ak-trust strong{display:block; color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:1.02rem}
.ak-trust-ic{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--green-soft); color:var(--green-deep);
}
.ak-trust-ic svg{width:20px; height:20px}
.ak-trust .harry-avatar{width:38px; height:38px; flex:0 0 38px; border:1.5px solid var(--green)}

@media (max-width:900px){
  .ak-hero-stage{grid-template-columns:1fr; gap:0; padding:0; background:none}
  .ak-hero-bild{order:-1; margin-top:34px}
  /* Motive stehen unten links, damit der Sticker oben rechts nichts verdeckt
     und die Preiszeile darunter Platz hat. */
  .ak-buehne-hero{aspect-ratio:4/3; align-items:flex-end; justify-content:flex-start; padding:14px 5% 74px 5%}
  .ak-buehne-hero img{max-width:62%; max-height:100%}
  .ak-buehne-hero.ak-buehne-zwei img{max-width:40%; max-height:86%}
  .ak-hero-text{padding-top:24px}
  .ak-sticker{right:-4px; top:-38px; width:150px; height:150px}
  .ak-sticker strong{font-size:2.2rem}
  .ak-hero-bild-leer{min-height:120px}
  .ak-trust{grid-template-columns:1fr 1fr}
  .ak-hero .ak-ctas .btn{flex:1 1 auto}
}
@media (max-width:480px){
  /* Vier gestapelte Kaesten schoeben die Angebote zu weit nach unten. */
  .ak-trust{gap:8px}
  .ak-trust li{padding:10px 12px; font-size:.8rem}
  .ak-trust strong{font-size:.92rem}
  .ak-trust-ic, .ak-trust .harry-avatar{display:none}
  .ak-cd-teil b{min-width:52px; font-size:1.5rem}
  .ak-countdown{gap:10px}
}
@media (max-width:380px){
  /* Auf schmalen Handys bricht das Preisschild im Hero um ("Polster-Set mit Bonus …").
     Zwei Zeilen brauchen unten mehr Platz, sonst verdeckt das Schild den Fuss des Motivs. */
  .ak-buehne-hero{padding-bottom:100px}
}

/* ---------- Deal-Karten ---------- */
.ak-sw{background:var(--paper)}
.ak-deals{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.ak-deal{
  display:flex; flex-direction:column;
  background:var(--paper); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  scroll-margin-top:100px;
}
.ak-deal-kopf{position:relative}
/* Karte ohne Bild: keine Buehne, die Marke steht dann im Fluss ueber dem Titel. */
.ak-deal-kopf.ak-ohne-bild{padding:20px 22px 0}
.ak-deal-kopf.ak-ohne-bild:empty{display:none}
.ak-ohne-bild .ak-badge{position:static; display:inline-block}
.ak-deal-body{display:flex; flex-direction:column; flex:1; padding:20px 22px 24px}
.ak-deal h3{font-size:1.18rem; line-height:1.2; margin:0 0 4px; color:var(--ink)}
.ak-zusatz{font-size:.9rem; color:var(--ink-soft); margin:0}
.ak-preis{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:16px 0 0}
.ak-preis-gross{
  font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:clamp(2.3rem,3.4vw,2.9rem); line-height:1; letter-spacing:-.02em;
}
.ak-rechnung{margin:8px 0 0; font-size:.9rem; line-height:1.45; color:var(--ink-soft)}
.ak-rechnung > span{display:block}
.ak-rechnung s{color:var(--muted); text-decoration-thickness:1.5px}
.ak-einzeln{margin:6px 0 0; font-size:.9rem; color:var(--ink-soft)}
.ak-frist{
  align-self:flex-start;
  margin:14px 0 0; padding:5px 11px; border-radius:var(--radius-full);
  background:var(--ak-orange-hell); color:var(--ak-orange-tief);
  font-size:.8rem; font-weight:600;
}
.ak-deal-ctas{display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:auto; padding-top:18px}
.ak-deal-ctas .ak-mehr{align-self:center}
.ak-mehr{font-size:.92rem; font-weight:600; color:var(--green-deep); text-decoration:underline; text-underline-offset:3px}
.ak-mehr:hover{color:var(--ink)}
@media (max-width:1000px){.ak-deals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ak-deals{grid-template-columns:1fr}}

/* ---------- Titanium ---------- */
.ak-ti{background:var(--cream)}
.ak-teile{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:10px 0 0}
.ak-teile li{
  font-size:.8rem; font-weight:600; color:var(--green-deep);
  background:var(--green-soft); padding:4px 10px; border-radius:var(--radius-full);
}
.ak-beigabe{margin:12px 0 0; font-size:.9rem; color:var(--ink-soft); line-height:1.9}
.ak-chip-wahl{
  display:inline-block; padding:2px 10px; border-radius:var(--radius-full);
  border:1.5px solid var(--border); background:var(--paper);
  font-weight:600; color:var(--ink); line-height:1.5; white-space:nowrap;
}
.ak-weiss{margin:10px 0 0; font-size:.88rem; color:var(--ink-soft)}

/* Umschalter "welche Beigabe": zwei grosse Wahlfelder */
.ak-wahl{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
  border:0; padding:0; margin:0 auto 32px; max-width:720px;
}
.ak-wahl legend{
  width:100%; padding:0; margin-bottom:12px; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink);
}
.ak-wahl label{
  flex:1 1 240px; display:flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--paper); border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:14px 16px; font-size:.9rem; color:var(--ink-soft);
  transition:border-color .18s ease, background .18s ease;
}
.ak-wahl label strong{display:block; font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--ink)}
.ak-wahl input{width:20px; height:20px; flex:0 0 20px; margin:0; accent-color:var(--green-deep)}
.ak-wahl label:hover{border-color:var(--green)}
.ak-wahl label:has(input:checked){border-color:var(--green-deep); background:var(--green-soft)}
.ak-wahl label:has(input:focus-visible){outline:2px solid var(--green-deep); outline-offset:2px}
.ak-hand-wahl{margin-left:10px; vertical-align:middle}

/* Umschalten ohne JavaScript. Ausgangslage: die Akku-Variante steht da.
   Browser ohne :has() bleiben einfach dabei. */
.ak-ti .ak-nur-kruemelsauger{display:none}
@supports selector(:has(*)){
  .ak-ti:has(#ak-beigabe-kruemelsauger:checked) .ak-buehne.ak-nur-kruemelsauger{display:flex}
  .ak-ti:has(#ak-beigabe-kruemelsauger:checked) p.ak-nur-kruemelsauger{display:block}
  .ak-ti:has(#ak-beigabe-kruemelsauger:checked) .ak-nur-akku{display:none}
  .ak-ti:has(#ak-beigabe-akku:checked) .ak-wahl-akku,
  .ak-ti:has(#ak-beigabe-kruemelsauger:checked) .ak-wahl-kruemelsauger{
    border-color:var(--green-deep); background:var(--green-soft); color:var(--green-deep);
  }
}

/* ---------- Zubehoer-Leiste ---------- */
.ak-zub{background:var(--paper)}
.ak-zub-kopf{display:flex; justify-content:space-between; align-items:flex-end; gap:16px 40px; flex-wrap:wrap; margin-bottom:28px}
.ak-zub-kopf h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.ak-zub-kopf p{max-width:38ch; font-size:.96rem; color:var(--ink-soft); padding-bottom:14px}
.ak-zub-leiste{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(172px,1fr); gap:14px;
  list-style:none; margin:0; padding:2px 2px 12px;
  overflow-x:auto; scroll-snap-type:x proximity; overscroll-behavior-x:contain;
  scrollbar-width:thin;
}
.ak-zub-leiste:focus-visible{outline:2px solid var(--green-deep); outline-offset:4px; border-radius:var(--radius-md)}
.ak-zub-karte{
  display:flex; flex-direction:column; scroll-snap-align:start;
  background:var(--paper); border:1.5px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; padding-bottom:16px; scroll-margin-top:100px;
}
.ak-zub-karte.ak-ohne-bild{padding-top:6px; background:var(--cream)}
.ak-zub-karte .ak-buehne{aspect-ratio:1/1}
.ak-zub-karte .ak-buehne img{max-width:74%; max-height:74%}
.ak-zub-karte h3{font-size:1rem; line-height:1.25; margin:14px 14px 2px; color:var(--ink)}
.ak-zub-karte .ak-zusatz{margin:0 14px; font-size:.84rem}
.ak-zub-preis{margin:10px 14px 0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:.9rem}
.ak-zub-preis .ak-mwst{flex-basis:100%}
.ak-zub-preis s{color:var(--muted); text-decoration-thickness:1.5px}
.ak-zub-preis strong{font-family:var(--font-display); font-weight:700; font-size:1.45rem; color:var(--ink); line-height:1}
.ak-zub-karte .ak-mehr{margin:auto 14px 0; padding-top:12px; font-size:.86rem}
@media (max-width:640px){.ak-zub-leiste{grid-auto-columns:62%}}

/* ---------- Keine Aktion aktiv ---------- */
.ak-hero-leerlauf{padding-block:14px clamp(40px,6vw,64px)}
.ak-leer{
  background:var(--cream); border-radius:var(--radius-lg);
  padding:clamp(28px,5vw,64px);
}
.ak-leer .ak-sub{max-width:56ch}

/* ---------- Warum ueber Harry ---------- */
.ak-warum{background:var(--paper)}
/* Zubehoer und "Warum" liegen beide auf Papier - ohne das stuende doppelter Abstand dazwischen. */
.ak-zub + .ak-warum, .ak-hero-leerlauf + .ak-warum{padding-top:0}
.ak-warum-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.ak-warum-karte{background:var(--cream); border-radius:var(--radius-lg); padding:28px}
.ak-warum-karte .ic{
  width:44px; height:44px; border-radius:50%;
  background:var(--green-soft); color:var(--green-deep);
  display:grid; place-items:center; margin-bottom:16px;
}
.ak-warum-karte .ic svg{width:22px; height:22px}
.ak-warum-karte h3{font-family:var(--font-display); font-size:1.1rem; color:var(--ink); margin-bottom:8px; font-weight:600}
.ak-warum-karte p{font-size:.95rem; color:var(--ink-soft)}
@media (max-width:860px){.ak-warum-grid{grid-template-columns:1fr}}

/* ---------- Kleingedrucktes ---------- */
.ak-fuss{background:var(--cream); padding-block:clamp(36px,5vw,56px)}
.ak-fuss h2{font-size:1.15rem; padding-bottom:0; margin:0 0 16px}
.ak-fuss dl{margin:0; max-width:86ch; font-size:.88rem; line-height:1.6; color:var(--ink-soft)}
.ak-fuss dt{font-weight:600; color:var(--ink); margin-top:14px}
.ak-fuss dt:first-child{margin-top:0}
.ak-fuss dd{margin:2px 0 0}
.ak-fuss a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}

/* ---------- FAQ: Antworten sind hier laenger als 500px hoch auf dem Handy ---------- */
.faq-item.open .faq-a{max-height:900px}
.faq-a a{color:var(--green-deep); text-decoration:underline; text-underline-offset:2px}

/* ---------- Kontakt-Abschluss: wie bisher auf dieser Seite ----------
   Stand vorher im Inline-Style von aktionen.html. Dunkler Grund statt
   des gruenen aus styles.css, Text mittig. */
.final-cta{background:var(--ink); color:#fff; padding-block:clamp(64px,8vw,96px); text-align:center}
.final-cta h2{color:#fff; font-size:clamp(1.9rem,3.6vw,2.8rem); margin-bottom:16px}
.final-cta p{color:#c8c4ba; max-width:52ch; margin:0 auto 28px}
.final-cta .ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}