/* ═══ pages.css · Unterseiten im Tara-Stil (So funktioniert's, Story, Produktseiten) ═══
   Lädt NACH home.css und nutzt ausschließlich dessen Tokens und Bausteine (Nav, Footer, Kapitel-Bühne, Zickzack, Preiskarte,
   Vorteile-Reihe, FAQ, CTA). Hier stehen nur die Teile, die es auf der Startseite nicht gibt: Seitenkopf (.ph), Code-Karten,
   HIVE-PASS-Raster, Story-Kapitel (.sy-…), Produktseiten (§ Produkt). Ratgeber: eigene, leichte ratgeber.css.
   Statisch (kein JS, Reduced Motion, Forced Colors) ist alles sichtbar; Startzustände der Story setzt
   home.js (pages()) per GSAP – Ausnahme: die Bühne im Seitenkopf (§ Story-Zustände unten, mit Fail-Safe wie auf der Startseite). */


/* ═══ Navigation: aktive Unterseite ═══ */
.nav-links a[aria-current="page"]{ background:rgba(255,196,0,.16); box-shadow:inset 0 -2px 0 var(--gold); }
.mnav-list a[aria-current="page"]{ background:rgba(255,196,0,.14); font-weight:800; }


/* ═══ P1 · Seitenkopf (.ph) ═══ */
.ph{ position:relative; isolation:isolate; overflow-x:clip;
  padding:calc(var(--nav-h) + clamp(36px, 8vh, 104px)) 0 clamp(56px, 9vw, 128px); }
@supports not (overflow:clip){ .ph{ overflow-x:hidden; } }
/* Gold-Schein oben rechts wie im Startseiten-Hero, dazu ein zartes Wabenraster als Grund (nur Linien, 6 % Gold) */
.ph::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(46% 52% at 84% 16%, rgba(255,196,0,.30), transparent 70%); }
.ph::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16.2v32.3L28 64.7 0 48.5V16.2ZM28 64.7V97' fill='none' stroke='%23c9a000' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 97px;
  -webkit-mask-image:radial-gradient(70% 80% at 80% 30%, #000, transparent 75%); mask-image:radial-gradient(70% 80% at 80% 30%, #000, transparent 75%); }

.ph-inner{ display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.ph-copy{ container-type:inline-size; width:100%; max-width:640px; margin-inline:auto; text-align:center; }
.ph-copy .eyebrow{ margin-bottom:20px; }

/* Headline: eine Stufe unter dem Startseiten-Hero (Unterseite), gleiche Schrift-Haltung; Zeilen als Masken für den Einflug */
.ph-h1{ margin:0; color:var(--ink); text-wrap:balance;
  font:900 clamp(2.5rem, 1.1rem + 4.4vw, 5rem)/1 var(--font-display); font-stretch:var(--wide); letter-spacing:-.035em;
  font-size:min(clamp(2.5rem, 1.1rem + 4.4vw, 5rem), 10.2cqi); }   /* nie breiter als die Spalte (wie .hero-h1) */
.ph-h1:is(:lang(en), :lang(hu), :lang(es)){ letter-spacing:-.02em; }
.ph-h1 .l{ display:block; }
.ph-h1 .l + .l{ margin-top:.08em; }
.ph-h1 .l-in{ display:inline-block; }
.ph-h1 .hl{ margin-top:.04em; }

.ph-lead{ max-width:44ch; margin:22px auto 32px; font-size:var(--fs-lead); line-height:1.55; color:var(--body); text-wrap:pretty; }
.ph-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
/* Preiszeile unter den Knöpfen: klein und gedämpft wie die Hinweise der Startseite, der Abstand trennt sie von den Haken */
.ph-price{ margin-top:14px; font-size:var(--fs-small); line-height:1.45; color:var(--muted); }

/* Signatur im Story-Kopf: Name in Ink, Rolle gedämpft, Gold-Linie als Anschlag */
.ph-sign{ display:inline-flex; flex-direction:column; gap:3px; margin-top:30px; padding:4px 0 4px 16px; border-left:3px solid var(--gold); text-align:left; }
.ph-sign-name{ font:850 1.125rem/1.2 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.ph-sign-role{ font-size:var(--fs-small); line-height:1.4; color:var(--muted); }

@media (min-width:900px){
  .ph-inner{ grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); }
  .ph--story .ph-inner{ grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); }   /* Porträt braucht mehr Bühne als das Mini-Handy */
  .ph-copy{ margin-inline:0; text-align:left; }
  .ph-lead{ margin-inline:0; }
  .ph-actions{ justify-content:flex-start; }
}

/* ── Bühne: Glow, zwei Ringe (langsam drehend), Objekt in der Mitte, schwebende Chips ── */
.ph-stage{ position:relative; display:grid; place-items:center; width:min(100%, 480px); aspect-ratio:1; margin-inline:auto; }
.ph-glow{ position:absolute; inset:10%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,196,0,.34), rgba(255,196,0,.08) 55%, transparent 70%); }
.ph-ring{ position:absolute; inset:3%; border-radius:50%; border:1.5px solid rgba(201,160,0,.28); pointer-events:none;
  animation:spin 70s linear infinite; }
.ph-ring::after{ content:""; position:absolute; top:12%; left:12%; width:12px; height:12px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 6px rgba(255,196,0,.18); }
.ph-ring--2{ inset:15%; border-style:dashed; border-color:rgba(201,160,0,.22); animation-duration:48s; animation-direction:reverse; }
.ph-ring--2::after{ top:auto; left:auto; right:6%; bottom:22%; width:8px; height:8px; }

/* So funktioniert's: Mini-Handy beim Scan (kein Video → 3D-Regel irrelevant, trotzdem nur 2D) */
.ph-device{ position:relative; z-index:1; width:min(50%, 228px); aspect-ratio:540/1116; padding:8px;
  border-radius:var(--r-device); background:var(--device); box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform:rotate(-5deg); }   /* transform statt rotate: GSAP übernimmt den Winkel, statt ihn doppelt anzuwenden */
.ph-screen{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:calc(var(--r-device) - 8px); background:var(--night); }
.ph-screen img{ width:100%; height:100%; object-fit:cover; }
.ph-corners{ position:absolute; inset:22% 16%; pointer-events:none; }
.ph-corners i{ position:absolute; width:20px; height:20px; border:3px solid var(--gold); }
.ph-corners i:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; border-top-left-radius:7px; }
.ph-corners i:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; border-top-right-radius:7px; }
.ph-corners i:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; border-bottom-left-radius:7px; }
.ph-corners i:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; border-bottom-right-radius:7px; }
/* Scan-Linie: Das Element ist die ganze Scan-Fläche, die Linie sitzt an der Unterkante von ::before. translateY −100 % → 0
   fegt sie über die volle Höhe (Prozent beziehen sich auf die eigene Höhe – ein 2-px-Element käme nur 3 px weit). */
.ph-scan{ position:absolute; inset:22% 16%; overflow:hidden; pointer-events:none; }
.ph-scan::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(255,196,0,0) 0, rgba(255,196,0,0) 72%, rgba(255,196,0,.26) calc(100% - 3px), var(--gold) calc(100% - 2px), var(--gold) 100%);
  animation:phScan 2.6s var(--ease-in-out) infinite alternate; }
@keyframes phScan{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
.ph-pill{ position:absolute; left:50%; bottom:8%; translate:-50% 0; width:max-content; max-width:88%; padding:6px 10px; border-radius:var(--r-pill); text-align:center;
  background:rgba(18,14,6,.72); color:var(--on-night); font:750 10.5px/1.2 var(--font-body); letter-spacing:.01em;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

/* Chips A · B · C: Code-Typen als Waben, Schatten per drop-shadow (clip-path schneidet box-shadow ab) */
.ph-chip{ position:absolute; z-index:2; width:clamp(54px, 6.4vw, 74px); filter:drop-shadow(0 12px 18px rgba(120,88,0,.22)); }
.ph-chip .hx{ width:100%; font:900 clamp(1.25rem, .9rem + 1vw, 1.75rem)/1 var(--font-display); color:var(--on-gold); background:var(--gold); }
.ph-chip--a{ left:6%; top:16%; }
.ph-chip--b{ right:4%; top:40%; }
.ph-chip--b .hx{ background:var(--tile-honey); color:var(--ink); }
.ph-chip--c{ left:14%; bottom:8%; }
.ph-chip--c .hx{ background:var(--tile-apricot); color:var(--ink); }

/* Story: Gründer-Porträt (PNG mit Wabe und freien Ecken) und Sammy */
.ph-portrait{ position:relative; z-index:1; width:min(80%, 380px); margin:0; filter:drop-shadow(0 26px 40px rgba(120,88,0,.28)); }
.ph-portrait img{ width:100%; height:auto; }
.ph-sammy{ position:absolute; z-index:2; left:2%; bottom:4%; width:min(30%, 140px); height:auto; transform:rotate(-8deg);
  filter:drop-shadow(0 14px 20px rgba(120,88,0,.25)); }


/* ═══ P3 · Code-Typen (Zickzack-Bauteil der Startseite, Karten ohne Link) ═══ */
.codes .why-head .h2{ margin-top:2px; }
.codes .why-head .h2:focus:not(:focus-visible){ outline:none; }           /* Fokus nach dem Ankersprung nur bei Tastatur sichtbar */
.code-block{ cursor:default; }
.code-block:active{ transform:none; }
@media (hover:hover){
  .code-block:hover .why-media{ translate:none; box-shadow:var(--shadow-card); }   /* kein Karten-Link → kein Link-Hover */
  .code-block:hover .why-tilt img{ scale:1.02; }
}
.code-letter{ position:absolute; z-index:2; left:22px; top:22px; width:50px;
  font:900 1.375rem/1 var(--font-display); background:var(--gold); color:var(--on-gold); }
.why-media[data-tile="honey"] .code-letter{ background:var(--gold); }
.why-media[data-tile="apricot"] .code-letter{ background:var(--ink); color:var(--surface); }
.why-media[data-tile="cream"] .code-letter{ background:var(--surface); color:var(--ink); }
.why-copy .code-badge{ display:inline-flex; align-items:center; min-height:28px; margin:0 0 14px; padding:5px 12px;
  border:1px solid rgba(201,160,0,.35); border-radius:var(--r-pill); background:rgba(255,196,0,.12);
  font:800 11.5px/1.25 var(--font-body); letter-spacing:.04em; color:var(--gold-text); }
.code-detail{ margin-top:4px; padding:14px 16px; border-left:3px solid var(--gold); border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--surface); box-shadow:var(--shadow-sm); font-size:var(--fs-small); line-height:1.6; color:var(--body); }
.code-detail strong{ color:var(--ink); }
@media (min-width:900px){
  .codes .why-block{ max-width:440px; }
}


/* ═══ P4 · HIVE-PASS ═══ */
.hive-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:56px; align-items:center; }
.hive-copy .h2{ margin:2px 0 18px; font-size:clamp(2rem, 1rem + 3.1vw, 3.75rem); }
.hive-copy .lead{ max-width:48ch; margin:0 0 28px; text-wrap:pretty; }
.hive-feats{ margin:0; }
@media (min-width:641px){ .hive-feats{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 28px; } }
.hive-card{ width:100%; max-width:440px; justify-self:center; }
.hive-card .amount small{ display:inline-block; margin-left:6px; }
@media (min-width:900px){
  .hive-grid{ grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:clamp(48px, 7vw, 110px); }
  .hive-card{ justify-self:end; }
}


/* ═══ Story-Kapitel (.sy) ═══ */
.sy{ position:relative; padding-block:var(--sec-y); }
.sy--promise{ background:var(--surface-2); }

/* Lesespalte mit großer Kapitelnummer (Outline-Ziffer, Desktop klebt sie mit) */
.sy-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; }
.sy-num{ margin:0; font:900 clamp(4.5rem, 3rem + 6vw, 9rem)/.8 var(--font-display); letter-spacing:-.05em; font-variant-numeric:tabular-nums;
  color:transparent; -webkit-text-stroke:1.5px var(--border-strong); }
@supports not (-webkit-text-stroke:1px black){ .sy-num{ color:var(--border-strong); } }
.sy-body{ min-width:0; }
.sy-body p:not(.eyebrow){ max-width:62ch; margin:0 0 20px; font-size:var(--fs-long); line-height:1.8; color:var(--body); hyphens:auto; -webkit-hyphens:auto; }
.sy-body p:last-child{ margin-bottom:0; }
/* story_p7 bringt eine Inline-Farbe aus der Übersetzung mit – Token-Farbe hat Vorrang (AA auf beiden Gründen) */
.sy-body a{ color:var(--gold-text) !important; text-decoration-color:var(--gold); }
@media (min-width:900px){
  .sy-grid{ grid-template-columns:minmax(120px, 200px) minmax(0, 720px); gap:clamp(32px, 5vw, 88px); justify-content:center; }
  .sy-num{ position:sticky; top:calc(var(--nav-h) + var(--finder-h) + 32px); align-self:start; text-align:right; }
}

/* Einstieg: erster Absatz groß; Wort-Entwicklung (Desktop-Story) wie der SEO-Absatz der Startseite: --k 0 → 1 */
.sy-body p.sy-lead{ font-size:clamp(1.25rem, .95rem + 1.1vw, 1.875rem); line-height:1.45; color:var(--ink); letter-spacing:-.01em; hyphens:manual; }
.sy-lead .split .w{ color:color-mix(in srgb, var(--ink) calc(var(--k, 1) * 100%), var(--muted)); }

/* Markenversprechen als Statement – Geist-Farbe → Ink (wie die Vorteile-Zeilen der Startseite) */
.sy-statement{ max-width:20ch; margin:0 0 clamp(44px, 7vw, 88px); color:var(--ink); text-wrap:balance;
  font:900 clamp(2.125rem, 1.1rem + 3.6vw, 4.5rem)/1.04 var(--font-display); font-stretch:var(--wide); letter-spacing:-.025em; }
.sy-statement .split .w{ color:color-mix(in srgb, var(--ink) calc(var(--k, 1) * 100%), var(--ghost)); }
.sy-grid--tight .sy-num{ font-size:clamp(3.5rem, 2.4rem + 4vw, 6.5rem); }

/* Leitprozess: drei Karten als Treppe (Bauteil .how-card der Startseite) */
.sy-head{ max-width:760px; margin:0 auto clamp(40px, 6vw, 72px); text-align:center; }
.sy-steps{ display:grid; grid-template-columns:minmax(0, 1fr); gap:24px; }
.sy-step{ position:relative; }
@media (min-width:900px){
  .sy-steps{ grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:start; }
  .sy-step:nth-child(2){ margin-top:56px; }
  .sy-step:nth-child(3){ margin-top:112px; }
}

/* Privatsphäre: Nacht-Fläche (in beiden Modi dunkel), Wabenraster in Gold, Schild-Wabe */
.sy--night{ overflow:hidden; isolation:isolate; background:var(--night); color:var(--on-night); }
.sy--night::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16.2v32.3L28 64.7 0 48.5V16.2ZM28 64.7V97' fill='none' stroke='%23ffc400' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 97px;
  -webkit-mask-image:linear-gradient(90deg, #000, transparent 70%); mask-image:linear-gradient(90deg, #000, transparent 70%); }
.sy-night-glow{ position:absolute; z-index:-1; right:-10%; top:-30%; width:60%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,196,0,.20), transparent 65%); }
.sy--night .h2{ color:var(--on-night); max-width:16ch; margin-bottom:22px; }
.sy--night p.sy-night-text{ max-width:54ch; font-size:var(--fs-lead); line-height:1.6; color:var(--on-night-muted); }
.sy-shield{ width:clamp(84px, 9vw, 128px); background:var(--gold); color:var(--on-gold); }
.sy-shield .ic-svg{ width:44%; height:auto; overflow:visible; stroke-width:1.7; }
.sy-shield .ic-fill{ fill:currentColor; stroke:none; opacity:.16; }
@media (min-width:900px){ .sy--night .sy-shield{ justify-self:end; } }

/* Schwarm: Text + Waben-Gruppe (fünf füllen sich, die sechste bleibt offen) */
.sy-swarm{ display:grid; grid-template-columns:minmax(0, 1fr); gap:56px; align-items:center; }
.sy-swarm .h2{ margin-bottom:22px; }
@media (min-width:900px){ .sy-swarm{ grid-template-columns:minmax(0, 1fr) minmax(0, 400px); gap:clamp(48px, 8vw, 120px); } }
.sy-comb{ position:relative; width:min(100%, 360px); aspect-ratio:271/260; margin-inline:auto; }
.sy-cell{ position:absolute; left:calc(var(--x) / 271 * 100%); top:calc(var(--y) / 260 * 100%); width:calc(86.6 / 271 * 100%);
  aspect-ratio:.866/1; clip-path:var(--hex); background:var(--border-strong); }
.sy-cell::before,.sy-cell i{ content:""; position:absolute; inset:3px; clip-path:var(--hex); }
.sy-cell::before{ background:var(--surface); }
.sy-cell i{ display:block; background:linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo)); transform-origin:50% 100%; }
.sy-cell.is-open{ background:var(--gold); }
.sy-cell.is-open::before{ background:var(--surface-2); }
.sy-cell.is-open img{ position:absolute; left:50%; top:50%; width:46%; height:auto; translate:-50% -50%; }

.sy-signature{ display:flex; align-items:center; gap:14px; margin-top:34px; padding-top:24px; border-top:1px solid var(--border); }
.sy-signature img{ flex:none; width:46px; height:46px; }
.sy-body .sy-signature p{ display:flex; flex-direction:column; gap:2px; margin:0; font-size:var(--fs-small); line-height:1.4; }
.sy-signature strong{ font:850 1.125rem/1.2 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.sy-signature-role{ color:var(--muted); }


/* ═══ § Produkt · Schlüssel, Brille, Fahrrad, Schulranzen (landing/_produkt.blade.php) ═══
   Reihenfolge der Flächen: Kopf (Grund) → Problem/Lösung (Grund) → Einsatz (Grund) → Schritte (Fläche 2) → Vorteile (Grund)
   → Vergleich (Fläche 2) → FAQ (Grund) → Weiterlesen (Fläche 2) → Gold-Band. */

/* PR1 · Kopf: Frage groß, Antwort eine Stufe kleiner mit „Bee-ID“ auf Gold */
.ph--product .ph-h1{ font-size:min(clamp(2.5rem, 1.1rem + 4.2vw, 4.75rem), 10.2cqi); }
.ph-h1 .l--answer{ margin-top:.26em; font-size:.54em; line-height:1.14; font-weight:850; letter-spacing:-.02em; color:var(--body); }
.ph-h1 .l--answer .hl{ margin-top:0; color:var(--on-gold); }
.ph--product .ph-lead{ margin-bottom:28px; }
.ph-copy .ph-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px; margin:26px 0 0; padding:0; list-style:none; }   /* (0,2,0) schlägt den Listen-Reset ul[class] */
.ph-trust li{ display:inline-flex; align-items:center; gap:8px; font:700 var(--fs-small)/1.3 var(--font-body); color:var(--ink); }
.ph-trust-ico{ flex:none; width:22px; background:var(--tile-honey); color:var(--gold-text); }
.ph-trust-ico .bi-icon{ stroke-width:3; }
@media (min-width:900px){ .ph-copy .ph-trust{ justify-content:flex-start; } }

/* Bühne: Produktfoto in der Honig-Kachel (4 : 5) mit Scan-Ecken und Scan-Linie, Produkt-Wabe, Benachrichtigungs-Karte */
.ph-photo{ position:relative; z-index:1; width:min(62%, 300px); aspect-ratio:4/5; margin:0; padding:10px; border-radius:var(--r-lg);
  background:var(--tile-honey); box-shadow:var(--shadow-lg); transform:rotate(-4deg); }   /* transform statt rotate (GSAP-fest) */
.ph-photo-in{ position:relative; display:block; width:100%; height:100%; overflow:hidden; border-radius:calc(var(--r-lg) - 6px);
  background:var(--surface-2); box-shadow:var(--shadow-photo); }
.ph-photo img{ width:100%; height:100%; object-fit:cover; }
.ph-photo .ph-corners, .ph-photo .ph-scan{ inset:11%; }
.ph-chip--prod{ right:8%; top:8%; }
.ph-chip--prod .hx{ background:var(--gold); color:var(--on-gold); }
.ph-chip--prod .bi-icon{ stroke-width:1.9; }
.ph-note{ position:absolute; z-index:2; left:0; bottom:10%; display:flex; align-items:center; gap:10px; max-width:min(70%, 250px);
  padding:10px 16px 10px 10px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow-md); }
.ph-note-ico{ flex:none; width:36px; background:var(--gold); color:var(--on-gold); }
.ph-note-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; font-size:12.5px; line-height:1.3; color:var(--body); }
.ph-note-txt strong{ font:850 13.5px/1.2 var(--font-display); color:var(--ink); }

/* PR2 · Problem und Lösung: Problem gestrichelt (offen), Lösung auf Honig mit Gold-Rand liegt darüber */
.duo{ position:relative; padding-block:var(--sec-y) clamp(40px, 6vw, 80px); }
.duo-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:20px; max-width:1080px; }
.duo-card{ position:relative; padding:clamp(28px, 4vw, 48px); border-radius:var(--r-xl); }
.duo-card .h2-sm{ margin:0 0 18px; }
.duo-card p:not(.eyebrow){ margin:0 0 14px; font-size:var(--fs-long); line-height:1.7; color:var(--body); text-wrap:pretty; }
.duo-card p:last-child{ margin-bottom:0; }
.duo-card--prob{ border:1.5px dashed var(--border-strong); }
.duo-card--prob .eyebrow{ color:var(--muted); }
.duo-card--sol{ border:2px solid var(--gold); background:var(--tile-honey); box-shadow:var(--shadow-lg); }
.duo-mark{ position:absolute; top:-28px; right:28px; width:60px; background:var(--gold); filter:drop-shadow(0 10px 16px rgba(120,88,0,.24)); }
@media (min-width:900px){
  .duo-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0; align-items:start; }
  .duo-card--prob{ padding-right:calc(clamp(28px, 4vw, 48px) + 56px); }
  .duo-card--sol{ z-index:1; margin:96px 0 0 -56px; }
}

/* PR3 · Einsatzbereiche: Waben-Kacheln 2 / 3 Spalten */
.uses{ padding-block:clamp(40px, 6vw, 80px) var(--sec-y); }
.uses-head{ max-width:720px; margin-bottom:clamp(28px, 4vw, 48px); text-align:center; }
.uses .uses-grid{ display:grid; margin-inline:auto; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; max-width:1000px; padding:0; list-style:none; }
@media (min-width:900px){ .uses .uses-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; } }
.use{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:20px; border:1px solid var(--border);
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.use-ico{ width:46px; margin-bottom:10px; color:var(--gold-text); }
.use-ico .bi-icon{ stroke-width:1.9; }
.use strong{ font:850 var(--fs-h3)/1.2 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; color:var(--ink); }
.use span:last-child{ font-size:var(--fs-small); line-height:1.5; color:var(--body); }

/* PR4 · Drei Schritte als Waben-Zeitleiste. --p (0 → 1, home.js rail) füllt die Verbindung; statisch voll. */
.psteps{ padding-block:var(--sec-y); background:var(--surface-2); }
.psteps-head{ max-width:760px; margin-bottom:clamp(40px, 6vw, 72px); text-align:center; }
.psteps .psteps-list{ --g:28px; display:grid; margin-inline:auto; grid-template-columns:minmax(0, 1fr); gap:var(--g); max-width:1080px; padding:0; list-style:none; }
.pstep{ --p:1; position:relative; display:grid; grid-template-columns:64px minmax(0, 1fr); gap:20px; align-items:start; }
.pstep-num{ width:64px; background:var(--gold); color:var(--on-gold); font:900 1.5rem/1 var(--font-display);
  filter:drop-shadow(0 10px 16px rgba(120,88,0,.22)); }
.pstep-copy{ padding-top:10px; }
.pstep-copy h3{ margin:0 0 8px; font:850 var(--fs-h3)/1.2 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.pstep-copy p{ max-width:36ch; margin:0; font-size:var(--fs-card); line-height:1.6; color:var(--body); text-wrap:pretty; }
.pstep:not(:last-child)::after{ content:""; position:absolute; left:31px; top:calc(64px / .866 + 8px); bottom:calc(8px - var(--g)); width:2px;
  border-radius:2px; pointer-events:none;
  background:linear-gradient(var(--gold), var(--gold)) 0 0 / 100% calc(var(--p) * 100%) no-repeat, var(--border-strong); }
@media (min-width:900px){
  .psteps .psteps-list{ --g:40px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .pstep{ grid-template-columns:minmax(0, 1fr); justify-items:center; gap:18px; text-align:center; }
  .pstep-copy{ padding-top:0; }
  .pstep-copy p{ margin-inline:auto; }
  .pstep:not(:last-child)::after{ left:calc(50% + 44px); top:calc(64px / .866 / 2 - 1px); bottom:auto; width:calc(100% + var(--g) - 88px); height:2px;
    background:linear-gradient(var(--gold), var(--gold)) 0 0 / calc(var(--p) * 100%) 100% no-repeat, var(--border-strong); }
}

/* PR4b · Woher kommt der QR-Code? Kopfspalte (desktop klebend) + drei Wege als Zeilen mit Haarlinien statt Karten-Raster */
.pget{ padding-block:var(--sec-y); }
.pget-inner{ display:grid; gap:clamp(28px, 4vw, 56px); max-width:1080px; }
.pget-head .h2-sm{ margin:0 0 14px; }
.pget-lead{ max-width:40ch; margin:0 0 22px; font-size:var(--fs-card); line-height:1.6; color:var(--body); text-wrap:pretty; }
.pget-demo{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding-bottom:2px; font-weight:800; color:var(--ink);
  text-decoration:none; border-bottom:2px solid var(--gold); transition:color var(--t-hover), border-color var(--t-hover); }
.pget-list{ display:grid; margin:0; padding:0; list-style:none; }
.pget-item{ display:grid; grid-template-columns:56px minmax(0, 1fr); gap:18px; padding-block:22px; border-top:1px solid var(--border); }
.pget-item:last-child{ border-bottom:1px solid var(--border); }
.pget-ico{ width:56px; color:var(--ink); }
.pget-copy h3{ margin:4px 0 6px; font:850 var(--fs-h3)/1.2 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.pget-copy p{ max-width:46ch; margin:0; font-size:var(--fs-card); line-height:1.6; color:var(--body); text-wrap:pretty; }
.pget-link{ display:inline-flex; align-items:center; min-height:44px; margin-top:6px; font-weight:800; color:var(--gold-text);
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; }
.pget-arr{ display:inline-block; transition:transform var(--t-hover) var(--ease-out); }
@media (hover:hover){
  .pget-demo:hover{ color:var(--gold-text); }
  .pget-demo:hover .pget-arr, .pget-link:hover .pget-arr{ transform:translateX(3px); }
}
.pget-demo:active, .pget-link:active{ transform:scale(.98); }
.pget-demo:focus-visible, .pget-link:focus-visible{ outline-offset:4px; border-radius:6px; }
@media (min-width:900px){
  .pget-inner{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); align-items:start; }
  .pget-head{ position:sticky; top:120px; }
}
@media (prefers-reduced-motion:reduce){ .pget-arr{ transition:none; } }

/* PR6 · Vergleich: Tabelle in der Karte, Bee-ID-Spalte als Honig-Säule */
.cmp{ padding-block:var(--sec-y); background:var(--surface-2); }
.cmp-head{ max-width:720px; margin-bottom:clamp(28px, 4vw, 48px); text-align:center; }
.cmp-scroll{ max-width:980px; overflow-x:auto; padding:8px 14px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-card); -webkit-overflow-scrolling:touch; }
.cmp-scroll:focus-visible{ outline-offset:4px; }
.cmp-table{ width:100%; min-width:620px; border-collapse:separate; border-spacing:0; font-size:var(--fs-card); line-height:1.35; }
.cmp-table th, .cmp-table td{ padding:15px 12px; text-align:center; vertical-align:middle; border-bottom:1px solid var(--border); }
.cmp-table thead th{ font:800 var(--fs-small)/1.3 var(--font-body); color:var(--muted); vertical-align:bottom; }
.cmp-table tbody th{ text-align:left; font-weight:700; color:var(--ink); }
.cmp-table tr:last-child > *{ border-bottom:0; }
.cmp-table .is-bee{ background:var(--tile-honey); }
.cmp-table thead .is-bee{ border-radius:var(--r-md) var(--r-md) 0 0; font:850 1rem/1.2 var(--font-display); color:var(--ink); white-space:nowrap; }
.cmp-table tr:last-child .is-bee{ border-radius:0 0 var(--r-md) var(--r-md); }
.cmp-mark{ display:inline-grid; width:30px; vertical-align:middle; background:var(--gold); color:var(--on-gold); }
.cmp-mark .bi-icon{ stroke-width:3; }
.cmp-table td.yes:not(.is-bee) .cmp-mark{ background:var(--tile-cream); color:var(--gold-text); }
.cmp-table td.no{ color:var(--muted-2); }
.cmp-table td > .bi-icon{ display:inline-block; vertical-align:middle; }   /* Reset macht SVGs zu Blöcken → sonst linksbündig */
.cmp-cost td{ font-weight:700; color:var(--body); }
.cmp-cost td.is-bee{ font:850 1rem/1.2 var(--font-display); color:var(--ink); }

/* PR8 · Weiterlesen: Ratgeber-Pills der Startseite */
.prel{ padding-block:clamp(56px, 8vw, 104px); background:var(--surface-2); }
.prel-inner{ max-width:880px; }
.prel .h2-sm{ margin:0 0 24px; }
.prel .guide-links{ margin:0; }


/* ═══ § Shop · Partnerprodukte (/produkte) ═══
   Kopf mit Foto-Fächer, Filter-Pills, Produktkarten oder Leerzustand, Bee-ID-Schutz je Gegenstand, Gold-Band. */
.ph-stage--shop .ph-photo{ position:absolute; width:min(46%, 220px); }
.ph-stage--shop .ph-photo--1{ left:6%; top:16%; transform:rotate(-10deg); }
.ph-stage--shop .ph-photo--2{ right:6%; top:8%; transform:rotate(8deg); }
.ph-stage--shop .ph-photo--3{ left:28%; top:30%; z-index:2; transform:rotate(-2deg); }
.ph-stage--shop .ph-chip--prod{ z-index:3; right:3%; top:auto; bottom:26%; }
.ph-stage--shop .ph-note{ z-index:3; left:2%; bottom:7%; }

.shop{ padding-block:clamp(24px, 4vw, 48px) var(--sec-y); }
.prod-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 clamp(28px, 4vw, 44px); }
.prod-chip{ display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--surface); color:var(--body); font:700 var(--fs-small)/1.2 var(--font-body); text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease); }
.prod-chip.on{ border-color:var(--gold); background:var(--gold); color:var(--on-gold); }
@media (hover:hover){ .prod-chip:not(.on):hover{ border-color:var(--gold-text); color:var(--ink); } }
.prod-chip:active{ transform:scale(.97); }
.prod-chip:focus-visible{ outline-offset:3px; }

.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:22px; }
.prod-card{ display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--shadow-card); transition:translate var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out); }
@media (hover:hover){ .prod-card:hover{ translate:0 -4px; border-color:var(--gold); box-shadow:var(--shadow-md); } }
.prod-imgwrap{ display:grid; place-items:center; aspect-ratio:4/3; margin:10px 10px 0; overflow:hidden; border-radius:calc(var(--r-lg) - 8px); background:var(--tile-honey); }
.prod-imgwrap img{ width:100%; height:100%; object-fit:cover; }
.prod-ph{ font-size:46px; opacity:.6; }
.prod-body{ display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; }
.prod-maker{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.prod-maker img{ width:24px; height:24px; border:1px solid var(--border); border-radius:6px; background:#fff; object-fit:contain; }
.prod-maker .ini{ display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:6px; background:var(--on-gold); color:var(--gold-hi); font:800 11px/1 var(--font-body); }
.prod-maker .nm{ font-size:var(--fs-small); color:var(--muted); }
.prod-name{ margin:0 0 6px; font:850 var(--fs-h3)/1.2 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; color:var(--ink); }
.prod-desc{ margin:0 0 16px; font-size:var(--fs-card); line-height:1.55; color:var(--body); }
.prod-buylabel{ margin:auto 0 8px; font:800 var(--fs-eyebrow)/1.2 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); }
.prod-shops{ display:flex; flex-direction:column; gap:8px; }
.prod-shop{ display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--r-pill);
  color:var(--ink); font:700 var(--fs-small)/1.2 var(--font-body); text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease); }
.prod-shop .dot{ flex:none; width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.prod-shop .ext{ margin-left:auto; color:var(--gold-text); transition:translate var(--t-hover) var(--ease-out); }
@media (hover:hover){
  .prod-shop:hover{ border-color:var(--gold-text); background-color:rgba(255,196,0,.10); }
  .prod-shop:hover .ext{ translate:2px -2px; }
}
.prod-shop:active{ transform:scale(.98); }
.prod-disc{ max-width:560px; margin:32px auto 0; text-align:center; font-size:var(--fs-small); line-height:1.55; color:var(--muted); }

/* Leerzustand: offene Karte (gestrichelt) mit Gold-Wabe – „Bald verfügbar“ */
.prod-empty{ max-width:620px; margin:0 auto; padding:clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px); border:1.5px dashed var(--border-strong);
  border-radius:var(--r-xl); background:var(--surface); text-align:center; }
.prod-empty-ico{ width:76px; margin:0 auto 20px; background:var(--gold); color:var(--on-gold); filter:drop-shadow(0 10px 16px rgba(120,88,0,.22)); }
.prod-empty .h2-sm{ margin:0 0 12px; }
.prod-empty p{ max-width:44ch; margin:0 auto; font-size:var(--fs-long); line-height:1.65; color:var(--body); text-wrap:pretty; }

/* Bee-ID-Schutz je Gegenstand: vier Link-Karten zu den Produktseiten */
.shop-cats{ padding-block:var(--sec-y); background:var(--surface-2); }
.shop-cats-head{ max-width:720px; margin-bottom:clamp(28px, 4vw, 48px); text-align:center; }
.shop-cats .shop-cats-grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; max-width:1120px; margin-inline:auto; }
@media (min-width:641px){ .shop-cats .shop-cats-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1000px){ .shop-cats .shop-cats-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.shop-cat{ display:flex; flex-direction:column; gap:8px; height:100%; padding:24px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-sm); color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:translate var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out); }
.shop-cat-ico{ width:50px; margin-bottom:8px; color:var(--gold-text); transition:rotate .4s var(--ease); }
.shop-cat h3{ margin:0; font:850 var(--fs-h3)/1.2 var(--font-display); font-stretch:var(--wide-mid); letter-spacing:-.02em; color:var(--ink); }
.shop-cat p{ flex:1; margin:0; font-size:var(--fs-card); line-height:1.55; color:var(--body); }
.shop-cat-more{ margin-top:6px; font:800 var(--fs-small)/1.2 var(--font-body); color:var(--gold-text); transition:translate var(--t-hover) var(--ease-out); }
@media (hover:hover){
  .shop-cat:hover{ translate:0 -4px; border-color:var(--gold); box-shadow:var(--shadow-md); }
  .shop-cat:hover .shop-cat-ico{ rotate:30deg; }
  .shop-cat:hover .shop-cat-more{ translate:4px 0; }
}
.shop-cat:active{ transform:scale(.99); }
.shop-cat:focus-visible{ outline-offset:4px; }


/* ═══ Story-Zustände (wie §5.6 der Startseite) ═══
   Nur die dekorative Bühne im Seitenkopf startet in der Desktop-Story unsichtbar; pageHead() setzt sie als Erstes sichtbar.
   Fail-Safe: Ohne fertigen Aufbau entfernt home.js nach 3000 ms html.story → alles sichtbar. */
@media (min-width:900px) and (min-height:620px){
  html.story .ph-stage > *{ visibility:hidden; }
}


/* ═══ Reduced Motion ═══ (globale Regel aus home.css stoppt Ringe und Scan-Linie; hier die stehenden Zustände) */
@media (prefers-reduced-motion: reduce){
  .ph-scan::before{ animation:none; transform:translateY(-50%); }
  .code-block:hover .why-tilt img{ scale:none; }
}


/* ═══ Forced Colors ═══ Waben, Chips und Zellen in Systemfarben */
@media (forced-colors: active){
  .prod-chip.on{ forced-color-adjust:none; background:Highlight; color:HighlightText; border-color:Highlight; }
  .ph-chip .hx, .code-letter, .sy-shield, .ph-note-ico, .ph-trust-ico, .duo-mark, .use-ico, .pstep-num, .cmp-mark, .prod-empty-ico, .shop-cat-ico{
    forced-color-adjust:none; background:CanvasText; color:Canvas; }
  .pstep:not(:last-child)::after{ forced-color-adjust:none; background:CanvasText; }
  .cmp-table .is-bee{ forced-color-adjust:none; background:Canvas; outline:2px solid Highlight; outline-offset:-2px; }
  .sy-cell{ forced-color-adjust:none; background:CanvasText; }
  .sy-cell::before{ forced-color-adjust:none; background:Canvas; }
  .sy-cell i{ forced-color-adjust:none; background:Highlight; }
  .ph-glow, .ph-ring, .ph::before, .ph::after, .sy--night::before, .sy-night-glow{ display:none; }
  .sy-num{ -webkit-text-stroke:0; color:GrayText; }
  .nav-links a[aria-current="page"]{ outline:2px solid CanvasText; }
}


/* ═══ Print ═══ */
@media print{
  .ph-stage, .sy-comb, .sy-night-glow{ display:none !important; }
  .duo-card--sol, .cmp-scroll, .use{ box-shadow:none; }
  .cmp-scroll{ overflow:visible; }
  .sy--night{ background:Canvas; color:CanvasText; }
  .sy--night .h2, .sy--night p.sy-night-text{ color:CanvasText; }
  .sy-num{ position:static; -webkit-text-stroke:0; color:GrayText; }
  [data-reveal], [data-reveal] > *, .ph-h1 .l-in{ opacity:1 !important; visibility:visible !important; transform:none !important; translate:none !important; }
}