/* ==========================================================================
   AUSMALEN MIT KOKO — Landingpage
   Ergänzt assets/style.css (Tokens, Nav, Warenkorb-Drawer, Footer).
   Neu hier: kosmische KOKO-Bühne, echte CSS-3D-Bücher, Video-Module.
   Mobile-first — jede Regel ohne Media-Query gilt ab 320 px.
   ========================================================================== */

:root{
  --kosmos:#1A0B3D;
  --kosmos-tief:#120726;
  --kosmos-hell:#33176B;
  --neon-cyan:#54D8FF;
  --neon-pink:#FF5FD1;
  --neon-gold:#FFC861;
  --buch-schatten:0 30px 60px -28px rgba(10,4,30,.75);
}

/* ---------- Grundraster ---------- */
.koko-section{padding:56px 0}
@media(min-width:760px){ .koko-section{padding:84px 0} }
@media(min-width:1100px){ .koko-section{padding:104px 0} }

.koko-head{max-width:60ch;margin:0 auto 40px;text-align:center}
.koko-head h2{
  font-size:clamp(26px,5.2vw,44px);
  line-height:1.08;
  margin:12px 0 14px;
  letter-spacing:-.01em;
}
.koko-head p{color:var(--ink-soft);font-size:clamp(15.5px,2.4vw,18px)}
.koko-head .eyebrow{color:var(--violet)}

/* ==========================================================================
   HERO
   ========================================================================== */
.koko-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--kosmos-tief);
  color:#fff;
  padding:64px 0 72px;
}
@media(min-width:760px){ .koko-hero{padding:96px 0 104px} }

.koko-hero__bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 42%;
  opacity:.55;
}
/* Lesbarkeit: Verlauf über das Bild, damit Text immer Kontrast hat */
.koko-hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(26,11,61,.25) 0%, rgba(18,7,38,.88) 70%),
    linear-gradient(180deg, rgba(18,7,38,.55) 0%, rgba(18,7,38,.35) 45%, var(--kosmos-tief) 100%);
}

/* Mobil: alles zentriert untereinander. Ab 980px zwei Spalten — Text links,
   Video rechts. Der Umbruchpunkt liegt bewusst hoch: darunter wird die
   Textspalte so schmal, dass die Überschrift unschön umbricht. */
.koko-hero__inner{
  position:relative;
  display:grid;
  gap:38px;
  justify-items:center;
  text-align:center;
  max-width:1180px;
  margin:0 auto;
}
@media(min-width:980px){
  .koko-hero__inner{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    align-items:center;
    gap:60px;
    text-align:left;
  }
  .koko-hero__inner .koko-hero__text{justify-self:start}
  .koko-hero__inner .koko-hero__lead{margin-left:0;margin-right:0}
  .koko-hero__inner .koko-hero__actions{justify-content:flex-start}
  .koko-hero__inner .koko-hero__trust{justify-content:flex-start}
  .koko-hero__media{justify-self:end}
}
/* Im Hero stehen zwei Fenster nebeneinander: das Buchvideo und die Hörprobe.
   Beides sind Produktbeweise und gehören auf einen Blick — untereinander
   sähe die Hörprobe wie ein Nachtrag aus.
   Deshalb schmaler als ein einzelnes Telefon, sonst passen sie nicht in die
   Spalte (rund 515 px bei 1280 px Fensterbreite). */
.koko-hero__media{
  display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:wrap;
}
.koko-hero__media .phone{width:min(214px,42vw);margin:0}
/* Unter 560 px ist für zwei Fenster nebeneinander kein Platz — dort wäre der
   Bildschirm schmaler als der Liedtitel. Sie stapeln und werden wieder größer.

   228 px und nicht mehr. Grund: Das Cover bekommt die Resthöhe des Spielers,
   seine Breite folgt daraus (aspect-ratio). Wird die Resthöhe größer als die
   verfügbare Breite, greift max-width und aus dem Quadrat wird ein Rechteck.
   Bei Telefonbreite w gilt Bildschirmhöhe (w−22)·16/9, feste Inhalte ≈ 195 px,
   nutzbare Breite w−54 — quadratisch bleibt es also bis w ≈ 232 px.
   Bei 240 px war das Cover 186×192 statt quadratisch. */
@media(max-width:559px){
  .koko-hero__media .phone{width:min(228px,68vw)}
}
.koko-hero .eyebrow{
  color:var(--neon-gold);
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
}
.koko-hero h1{
  font-size:clamp(34px,8.5vw,72px);
  line-height:1.02;
  margin:20px 0 8px;
  letter-spacing:-.02em;
  text-shadow:0 4px 40px rgba(84,216,255,.35);
}
.koko-hero h1 span{
  background:linear-gradient(96deg,var(--neon-gold) 0%,var(--neon-pink) 45%,var(--neon-cyan) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  /* Fallback, falls background-clip nicht greift */
  color:var(--neon-gold);
}
.koko-hero__claim{
  font-family:var(--display);font-weight:600;
  font-size:clamp(15px,3.4vw,22px);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--neon-cyan);
  margin-bottom:22px;
}
.koko-hero__lead{
  font-size:clamp(16px,2.6vw,19.5px);
  color:#D8D3F2;
  max-width:52ch;margin:0 auto 32px;
}
.koko-hero__actions{
  display:flex;flex-direction:column;gap:12px;
  align-items:stretch;margin-bottom:34px;
}
.koko-hero__actions .btn{justify-content:center}
@media(min-width:560px){
  /* flex-wrap ist nötig, seit hier drei Knöpfe stehen (Bücher, personalisiertes
     Buch, Lied). Ohne Umbruch würden sie sich auf schmalen Tablets gegenseitig
     stauchen, bis die Beschriftungen brechen. */
  .koko-hero__actions{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
  .koko-hero__actions .btn{width:auto}
}
.btn-neon{
  background:linear-gradient(96deg,var(--neon-pink),#B14BFF);
  color:#fff;
  box-shadow:0 14px 34px -12px rgba(255,95,209,.75);
}
.btn-neon:hover{filter:brightness(1.08)}
.btn-glass{
  border-color:rgba(255,255,255,.45);color:#fff;
  backdrop-filter:blur(6px);background:rgba(255,255,255,.07);
}
.btn-glass:hover{border-color:#fff;background:rgba(255,255,255,.14)}

.koko-hero__trust{
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:#AEA7D8;
}
.koko-hero__trust span{display:inline-flex;align-items:center;gap:7px}
.koko-hero__trust span::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--neon-cyan);box-shadow:0 0 8px var(--neon-cyan);
  flex:none;
}

/* ==========================================================================
   AR-DEMO — Handy-Rahmen mit Video
   ========================================================================== */
.ar-demo{background:linear-gradient(180deg,var(--kosmos-tief),var(--kosmos));color:#fff}
.ar-demo .koko-head h2{color:#fff}
.ar-demo .koko-head p{color:#BDB6E4}
.ar-demo .koko-head .eyebrow{color:var(--neon-cyan)}

.ar-grid{display:grid;gap:32px;align-items:center}
@media(min-width:900px){ .ar-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px} }

.phone{
  position:relative;
  width:min(280px,78vw);
  margin:0 auto;
  aspect-ratio:9/19;
  border-radius:38px;
  padding:11px;
  background:linear-gradient(160deg,#3A3560,#191436);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.phone__screen{
  position:relative;width:100%;height:100%;
  border-radius:28px;overflow:hidden;background:#000;
}
.phone__screen video{width:100%;height:100%;object-fit:cover;display:block}
.phone__notch{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:38%;height:20px;border-radius:0 0 12px 12px;background:#191436;z-index:2;
}
.phone__glow{
  position:absolute;inset:-14%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(140,92,245,.55),transparent 62%);
  filter:blur(28px);
}

/* ==========================================================================
   HÖRPROBE — Telefonrahmen mit Musikspieler
   Nutzt denselben .phone-Rahmen wie das Buchvideo, damit die Produkte
   zusammengehören. Nur der Bildschirminhalt ist ein anderer.
   ========================================================================== */
/* Die Regeln für den früheren eigenen Hörprobe-Abschnitt sind entfallen —
   der Spieler sitzt jetzt im Hero neben dem Buchvideo. */

/* Exakt dasselbe Format wie der Videorahmen daneben (.phone--video ist 9/16,
   nicht die 9/19 aus .phone). Zwei unterschiedlich hohe Telefone nebeneinander
   wirken wie ein Versehen — vorher standen hier 380 px neben 452 px. */
.phone--audio{aspect-ratio:9/16}

.spieler{
  position:relative;height:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:34px 16px 16px;
  background:linear-gradient(165deg,#2A1160,#140A33 60%,#0C0620);
  text-align:center;
}
/* Der Inhalt ist zusammen höher als der Telefonbildschirm. Ohne Regel
   schrumpft Flexbox ALLES anteilig — das Cover wurde dadurch rechteckig
   (206x178 statt quadratisch) und der runde Knopf zum Ei.
   Deshalb: alles andere fest, und nur das Cover gibt nach. Weil die Höhe
   schrumpft und die Breite aus aspect-ratio folgt, bleibt es dabei quadratisch. */
.spieler__bild{
  position:relative;
  flex:1 1 auto;min-height:0;
  aspect-ratio:1;width:auto;max-width:100%;
  margin:0 auto 12px;
  border-radius:16px;
  background:linear-gradient(140deg,var(--neon-pink),#B14BFF 55%,var(--neon-cyan));
  display:grid;place-items:center;overflow:hidden;
}
.spieler__titel,
.spieler__untertitel,
.spieler__knopf,
.spieler__leiste,
.spieler__zeit{flex:none}
.spieler__note{font-size:44px;line-height:1;color:rgba(255,255,255,.92)}

/* Die Balken zeigen nur an, DASS gerade etwas läuft — sie sind keine echte
   Frequenzanzeige. Sie bewegen sich deshalb ausschließlich beim Abspielen. */
.spieler__welle{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:flex-end;gap:4px;height:26px;
}
.spieler__welle i{
  width:5px;height:7px;border-radius:3px;
  background:rgba(255,255,255,.85);
  transition:height .18s;
}
.spieler.spielt .spieler__welle i{animation:welle .9s ease-in-out infinite}
.spieler.spielt .spieler__welle i:nth-child(2){animation-delay:.12s}
.spieler.spielt .spieler__welle i:nth-child(3){animation-delay:.24s}
.spieler.spielt .spieler__welle i:nth-child(4){animation-delay:.06s}
.spieler.spielt .spieler__welle i:nth-child(5){animation-delay:.3s}
.spieler.spielt .spieler__welle i:nth-child(6){animation-delay:.18s}
.spieler.spielt .spieler__welle i:nth-child(7){animation-delay:.36s}
@keyframes welle{ 0%,100%{height:7px} 50%{height:24px} }

.spieler__titel{
  font-family:var(--display);font-weight:700;font-size:16.5px;color:#fff;margin:0;
}
.spieler__untertitel{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#A79FD4;margin:3px 0 10px;
}
.spieler__knopf{
  width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(96deg,var(--neon-pink),#B14BFF);
  color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 26px -10px rgba(255,95,209,.8);
  transition:transform .15s;
}
.spieler__knopf:hover{transform:scale(1.06)}
.spieler__knopf:focus-visible{outline:3px solid var(--neon-cyan);outline-offset:3px}
.spieler__symbol{font-size:20px;line-height:1;margin-left:3px}
/* Beim Pausesymbol entfällt der optische Ausgleich nach rechts. */
.spieler.spielt .spieler__symbol{margin-left:0}

.spieler__leiste{
  -webkit-appearance:none;appearance:none;
  width:100%;height:5px;border-radius:3px;margin:12px 0 6px;
  background:rgba(255,255,255,.2);cursor:pointer;
}
.spieler__leiste::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;background:#fff;border:none;
}
.spieler__leiste::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:#fff;border:none;
}
.spieler__leiste:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}
.spieler__zeit{
  font-family:var(--mono);font-size:11.5px;color:#A79FD4;margin:0;
  font-variant-numeric:tabular-nums;
}

@media(prefers-reduced-motion:reduce){
  .spieler.spielt .spieler__welle i{animation:none;height:16px}
  .spieler__knopf{transition:none}
  .spieler__knopf:hover{transform:none}
}

.ar-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.ar-step{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:18px;border-radius:var(--radius);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.ar-step__num{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:17px;
  background:linear-gradient(140deg,var(--neon-cyan),#4A7BFF);color:#0E0722;
}
.ar-step h3{font-size:17.5px;margin-bottom:5px;color:#fff}
.ar-step p{font-size:15px;color:#BDB6E4}

/* ==========================================================================
   3D-BÜCHER
   ========================================================================== */
.buch-grid{
  display:grid;gap:38px 22px;
  grid-template-columns:1fr;
}
@media(min-width:600px){ .buch-grid{grid-template-columns:repeat(2,1fr);gap:46px 26px} }
@media(min-width:1000px){ .buch-grid{grid-template-columns:repeat(3,1fr);gap:56px 32px} }

.buch{display:flex;flex-direction:column;align-items:center;text-align:center}

/* --- die eigentliche 3D-Bühne --- */
.book3d{
  perspective:1100px;
  width:min(230px,64vw);
  margin-bottom:22px;
}
.book3d__inner{
  position:relative;
  transform-style:preserve-3d;
  transform:rotateY(-20deg) rotateX(5deg);
  transition:transform .55s cubic-bezier(.22,.68,.28,1);
  will-change:transform;
}
.buch:hover .book3d__inner,
.book3d__inner:focus-visible{
  transform:rotateY(-7deg) rotateX(2deg) translateZ(16px);
}
/* Vorderseite = echtes Cover */
.book3d__cover{
  position:relative;z-index:2;
  width:100%;aspect-ratio:1/1;
  border-radius:4px 8px 8px 4px;
  overflow:hidden;
  box-shadow:var(--buch-schatten);
  background:var(--cream-deep);
}
.book3d__cover img{width:100%;height:100%;object-fit:cover;display:block}
/* Buchrücken als Lichtkante links */
.book3d__cover::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:14px;z-index:3;
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 45%,rgba(255,255,255,.28) 82%,rgba(0,0,0,.06));
}
/* Seitenstapel dahinter */
.book3d__pages{
  position:absolute;top:2%;right:-9px;height:96%;width:22px;
  transform:translateZ(-12px);
  border-radius:0 5px 5px 0;
  background:
    repeating-linear-gradient(180deg,#fff 0 2px,#E7DFCE 2px 3.4px);
  box-shadow:2px 6px 16px -6px rgba(0,0,0,.5);
}
/* Bodenschatten */
.book3d__schatten{
  position:absolute;left:6%;right:6%;bottom:-20px;height:22px;
  background:radial-gradient(ellipse at center,rgba(20,10,45,.42),transparent 72%);
  filter:blur(7px);
  transform:translateZ(-40px);
}

.buch h3{
  font-size:17px;line-height:1.25;margin-bottom:6px;
  min-height:2.5em;display:flex;align-items:center;justify-content:center;
}
.buch__text{font-size:14.5px;color:var(--ink-soft);margin-bottom:14px;max-width:34ch}
.buch__foot{
  display:flex;flex-direction:column;gap:10px;align-items:center;width:100%;
  margin-top:auto;
}
.buch__preis{font-family:var(--mono);font-weight:600;font-size:19px;color:var(--navy)}
.buch .add-cart-btn{width:100%;max-width:230px;justify-content:center}
@media(min-width:420px){
  .buch__foot{flex-direction:row;justify-content:center;gap:14px}
  .buch .add-cart-btn{width:auto}
}

/* Badges */
.buch__badge{
  display:inline-block;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;margin-bottom:10px;
}
.badge-ar{background:rgba(140,92,245,.14);color:#6B37D6}
.badge-de{background:rgba(244,185,66,.2);color:#8A6410}
.badge-bald{background:rgba(88,91,122,.14);color:var(--ink-soft)}

/* „Demnächst" — Buch ohne Cover */
.book3d--bald .book3d__cover{
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(45deg,#EFE6D5 0 12px,#E7DCC7 12px 24px);
  border:2px dashed rgba(27,33,66,.2);
}
.book3d--bald .book3d__platzhalter{
  font-family:var(--display);font-weight:600;
  font-size:15px;color:var(--ink-soft);
  padding:0 18px;line-height:1.35;
}
.buch--bald{opacity:.82}
.buch--bald .buch__preis{color:var(--ink-soft)}

/* ==========================================================================
   PRODUKTLINIEN
   ========================================================================== */
.linie{margin-bottom:54px}
.linie:last-child{margin-bottom:0}
@media(min-width:760px){ .linie{margin-bottom:72px} }

.linie__kopf{
  max-width:60ch;margin:0 auto 28px;text-align:center;
  padding-top:22px;border-top:1px solid var(--line);
}
.linie:first-of-type .linie__kopf{border-top:none;padding-top:0}
.linie__nummer{
  display:inline-block;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--violet);
  background:rgba(140,92,245,.11);border-radius:999px;padding:5px 13px;margin-bottom:11px;
}
.linie__kopf h3{font-size:clamp(21px,3.6vw,29px);margin-bottom:8px}
.linie__kopf p{font-size:15px;color:var(--ink-soft)}

/* ---------- App-Hinweis im AR-Block ---------- */
.app-hinweis{
  margin-top:20px;padding:15px 18px;border-radius:var(--radius);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  font-size:14.8px;color:#CFC9EE;line-height:1.5;
}
.app-hinweis b{color:#fff;display:block;margin-bottom:3px}

/* ---------- Teaser für die personalisierten Bücher ---------- */
.linie--pers .pers-teaser{
  display:grid;gap:26px;align-items:center;
  background:linear-gradient(150deg,var(--kosmos-hell),var(--kosmos));
  color:#fff;border-radius:22px;padding:28px 22px;
}
@media(min-width:860px){
  .linie--pers .pers-teaser{grid-template-columns:1.05fr .95fr;padding:38px 36px;gap:40px}
}
.pers-teaser h4{font-family:var(--display);font-weight:600;font-size:clamp(20px,3.4vw,27px);margin-bottom:12px}
.pers-teaser p{color:#D6D1F2;font-size:15.5px;margin-bottom:16px}
.pers-teaser__liste{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.pers-teaser__liste li{
  position:relative;padding-left:26px;font-size:15px;color:#EDEAFB;
}
.pers-teaser__liste li::before{
  content:'✓';position:absolute;left:0;top:0;
  color:var(--neon-cyan);font-weight:700;
}
.pers-teaser__usp{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--neon-gold);margin-bottom:20px;
}
.pers-teaser__bild{border-radius:16px;overflow:hidden;box-shadow:var(--buch-schatten)}
.pers-teaser__bild img{width:100%;height:100%;object-fit:cover;display:block}

/* ==========================================================================
   ÜBER UNS — Gründerinnen und Gründer
   ========================================================================== */
.gruender{display:grid;gap:30px;max-width:1000px;margin:0 auto}
@media(min-width:860px){ .gruender{grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start} }

.gruender__personen{display:grid;gap:14px}
.person{
  display:flex;align-items:center;gap:15px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;
}
.person__initialen{
  width:52px;height:52px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:18px;color:#fff;
  background:linear-gradient(140deg,var(--violet),var(--coral));
}
.person h3{font-size:17px;margin-bottom:2px;line-height:1.25}
.person__rolle{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);
}

.gruender__text p{font-size:16.5px;color:var(--ink);margin-bottom:15px;line-height:1.65}
.gruender__text p:last-of-type{margin-bottom:0}
.gruender__signatur{
  font-family:var(--display) !important;font-weight:600;
  font-size:15.5px !important;color:var(--violet) !important;
  padding-top:8px;
}

/* ==========================================================================
   WARUM AUSMALEN — Video-Karten
   ========================================================================== */
.vorteil-grid{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:680px){ .vorteil-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1040px){ .vorteil-grid{grid-template-columns:repeat(3,1fr)} }

.vorteil{
  border-radius:var(--radius);overflow:hidden;
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.vorteil__video{
  position:relative;aspect-ratio:16/10;background:var(--cream-deep);overflow:hidden;
}
.vorteil__video video{width:100%;height:100%;object-fit:cover;display:block}
.vorteil__body{padding:22px}
.vorteil h3{font-size:19px;margin-bottom:8px}
.vorteil p{font-size:15px;color:var(--ink-soft)}

/* ==========================================================================
   SCHULEN
   ========================================================================== */
.schul-band{display:grid;gap:32px;align-items:center}
@media(min-width:900px){ .schul-band{grid-template-columns:1.1fr .9fr;gap:52px} }
.schul-bild{
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:16/9;
}
.schul-bild img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   Bewegungsreduktion respektieren
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .book3d__inner{transition:none;transform:rotateY(-10deg)}
  .buch:hover .book3d__inner{transform:rotateY(-10deg)}
  .scan-beam{animation:none;opacity:.35}
  *{scroll-behavior:auto !important}
}

/* ==========================================================================
   Sehr kleine Geräte (ab 320 px) nicht überfüllen
   ========================================================================== */
@media(max-width:359px){
  .wrap{padding:0 18px}
  .koko-hero__trust{font-size:10.5px;gap:8px 14px}
  .book3d{width:min(190px,70vw)}
}

/* ==========================================================================
   DIE ZWEI PRODUKTWELTEN
   Zwei gleichwertige Karten direkt unter dem Hero. Karte 2 ist farblich
   hervorgehoben, weil das personalisierte Buch die erklärungsbedürftigere
   und zugleich wertvollere Seite des Geschäfts ist.
   ========================================================================== */
.saeulen-sektion{background:var(--kosmos-tief);color:#fff}
.saeulen-sektion .koko-head p{color:#BDB6E4}
.saeulen-sektion .koko-head .eyebrow{color:var(--neon-cyan)}

/* Drei Säulen — Sortiment, personalisiertes Buch, Lied.
   Zwischen 880 und 1079 px wären drei Spalten zu schmal (nach dem Innenabstand
   blieben je gut 200 px Text). Dort laufen zwei nebeneinander und die dritte
   über die volle Breite — besser als eine halbe Spalte Leerraum daneben. */
.saeulen{display:grid;gap:22px}
@media(min-width:880px){ .saeulen{grid-template-columns:1fr 1fr;gap:28px} }
@media(min-width:880px) and (max-width:1079px){ .saeulen > :nth-child(3){grid-column:1 / -1} }
@media(min-width:1080px){ .saeulen{grid-template-columns:repeat(3,1fr)} }

.saeule{
  position:relative;
  display:flex;flex-direction:column;
  padding:34px 28px 30px;
  border-radius:24px;
  background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
}
@media(min-width:560px){ .saeule{padding:40px 36px 34px} }
/* Im Dreierraster etwas knapper, damit der Text nicht in eine Spalte gequetscht wird. */
@media(min-width:1080px){ .saeule{padding:36px 28px 30px} }

.saeule--akzent{
  border-color:rgba(255,95,209,.42);
  background:linear-gradient(165deg,rgba(255,95,209,.16),rgba(140,92,245,.08));
  box-shadow:0 30px 60px -34px rgba(255,95,209,.55);
}

.saeule__nr{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  font-family:var(--display);font-weight:700;font-size:17px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  margin-bottom:16px;
}
.saeule--akzent .saeule__nr{background:var(--neon-pink);border-color:transparent;color:#fff}

.saeule h3{font-size:clamp(21px,3.4vw,27px);margin-bottom:10px}
.saeule__lead{color:#D8D3F2;font-size:15.5px;margin-bottom:20px}

.saeule__liste{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px}
.saeule__liste li{
  position:relative;padding-left:24px;
  font-size:14.5px;color:#CFC9EC;line-height:1.5;
}
.saeule__liste li::before{
  content:'';position:absolute;left:0;top:8px;
  width:9px;height:9px;border-radius:50%;
  background:var(--neon-cyan);
}
.saeule--akzent .saeule__liste li::before{background:var(--neon-pink)}
.saeule__liste b{color:#fff;font-weight:600}

/* mt:auto schiebt Preis und Button nach unten, damit beide Karten trotz
   unterschiedlich langer Texte auf gleicher Höhe abschließen. */
.saeule__preis{
  margin-top:auto;margin-bottom:16px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:#9F98C9;
}
.saeule .btn{align-self:flex-start}
@media(max-width:559px){ .saeule .btn{align-self:stretch;justify-content:center} }

/* ==========================================================================
   PRODUKTDETAIL (magic-colors.html)
   Bilder links, Kaufinformationen rechts. Mobil gestapelt.
   ========================================================================== */
.pd{display:grid;gap:32px;margin-bottom:20px}
@media(min-width:900px){ .pd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:54px;align-items:start} }

.pd__medien{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:480px){ .pd__medien{grid-template-columns:1.6fr 1fr;align-items:start} }
@media(min-width:900px){ .pd__medien{position:sticky;top:96px} }

.pd__haupt,.pd__neben{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--cream-deep);box-shadow:var(--shadow)}
.pd__haupt img,.pd__neben img{width:100%;height:auto;display:block}

.pd__info h1{font-size:clamp(28px,5vw,42px);margin:12px 0 4px;letter-spacing:-.01em}
.pd__unterzeile{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px;
}
.pd__lead{font-size:17px;line-height:1.62;color:var(--ink);max-width:58ch;margin-bottom:26px}
.pd__lead b{color:var(--coral-deep)}

/* Der Dreischritt ist das Verkaufsargument — er erklaert, was das Buch
   von einem gewoehnlichen Malbuch unterscheidet. */
.pd__ablauf{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px}
.pd__ablauf li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:14px 16px;border-radius:14px;
  background:var(--cream-deep);border:1px solid var(--line);
  font-size:14.8px;line-height:1.5;
}
.pd__ablauf span{
  width:30px;height:30px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:14px;
  background:var(--violet);color:#fff;
}
.pd__ablauf b{font-family:var(--display);font-weight:600}

.pd__kauf{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:26px 0 10px}
.pd__preis{font-family:var(--display);font-weight:700;font-size:32px;color:var(--navy)}
.pd__hinweis{font-family:var(--mono);font-size:12px;color:var(--ink-soft);line-height:1.6}
@media(max-width:479px){ .pd__kauf .btn{width:100%;justify-content:center} }

/* ---------- Verfügbarkeit auf den Buchkarten ---------- */
.buch--ausverkauft{position:relative}
.buch--ausverkauft .book3d,
.buch--bald .book3d{filter:grayscale(.85);opacity:.55}
.buch__ausverkauft-badge{
  position:absolute;top:14px;right:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--navy);color:#fff;padding:6px 12px;border-radius:999px;
}
.buch__bestand{
  display:block;width:100%;margin-top:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--coral-deep);
}
.add-cart-btn:disabled{opacity:.5;cursor:not-allowed}
.add-cart-btn:disabled:hover{transform:none}

/* ==========================================================================
   MOBILES MENÜ
   Unter 820px war .nav-links auf display:none gesetzt — ohne Ersatz. Damit
   war auf Handy und Tablet keine Navigation erreichbar, obwohl von dort der
   Großteil des Verkehrs kommt (Instagram, TikTok). Der Umschalter wird von
   assets/storefront.js in jede .nav eingehängt, damit alle Seiten ihn haben.
   ========================================================================== */
.nav-schalter{
  display:none;
  width:44px;height:44px;              /* 44px: Mindestgröße für Fingertipps */
  border:1px solid var(--line);border-radius:12px;
  background:transparent;cursor:pointer;
  align-items:center;justify-content:center;
  flex-direction:column;gap:4px;padding:0;
}
.nav-schalter span{
  display:block;width:19px;height:2px;border-radius:2px;
  background:var(--navy);transition:transform .22s ease, opacity .18s ease;
}
.nav-schalter[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-schalter[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-schalter[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:820px){
  .nav-schalter{display:flex}
  .nav-inner{flex-wrap:wrap;gap:10px}

  /* Menü klappt unter der Leiste auf, statt den Inhalt zu überdecken */
  .nav-links{
    display:none;
    order:3;width:100%;
    flex-direction:column;gap:0;
    margin:6px 0 4px;padding:6px 0 2px;
    border-top:1px solid var(--line);
    text-transform:none;font-size:16px;
  }
  .nav-links.offen{display:flex}
  .nav-links li{width:100%}
  .nav-links a{
    display:block;width:100%;
    padding:13px 4px;                  /* großzügige Trefferfläche */
    border-bottom:1px solid var(--line);
  }
  .nav-links li:last-child a{border-bottom:none}
}

/* Fußzeilen-Links waren nur ~19px hoch — für Finger zu klein. */
@media(max-width:820px){
  footer .foot-grid a{display:inline-block;padding:7px 0}
}

/* ==========================================================================
   Hero-Video im Telefonrahmen
   Das Intro ist 9:16. Der Standardrahmen ist 9:19 und würde per object-fit:cover
   seitlich beschneiden — hier also die Bildhöhe an das Material anpassen.
   ========================================================================== */
.phone--video{aspect-ratio:9/16}

.phone__ton{
  position:absolute; z-index:3; left:50%; bottom:12px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--display); font-size:12.5px; font-weight:600; color:#fff;
  background:rgba(18,7,38,.72); border:1px solid rgba(255,255,255,.28);
  padding:7px 13px; border-radius:999px; cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background .18s ease, border-color .18s ease;
}
.phone__ton:hover{background:rgba(18,7,38,.9); border-color:rgba(255,255,255,.55)}
.phone__ton:focus-visible{outline:2px solid var(--neon-cyan,#54D8FF); outline-offset:2px}