@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal; font-weight:400 800; font-display:swap;
  src:url('/assets/fonts/bricolage-grotesque.woff2') format('woff2');
}
@font-face{
  font-family:'Inter Tight';
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/inter-tight.woff2') format('woff2');
}
@font-face{
  /* Subset (latin + dt. Umlaute) — nur fuer Hand-Scribbles */
  font-family:'Caveat';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/caveat.woff2') format('woff2');
}
/* ============================================================
   KOBOLDMAN.DE — Shared base styles
   ============================================================ */
:root{
  /* Grün */
  --green:        #5FAF2D;
  --green-deep:   #3F7A1E;
  --green-soft:   #E8F5DC;
  /* Akzent */
  --orange:       #D97706;
  --orange-soft:  #FED7AA;
  /* Neutrale */
  --paper:        #FBFAF6;
  --cream:        #F4EFE6;
  --cream-warm:   #EBE4D4;
  --border:       #E0D8C4;
  /* Text */
  --ink:          #1A1A1A;
  --ink-soft:     #444444;
  --muted:        #888888;
  /* WhatsApp */
  --whatsapp:     #25D366;
  --whatsapp-deep:#1da851;

  /* Radien */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Schriften */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Inter Tight", system-ui, sans-serif;

  /* Container */
  --max-w: 1200px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  scroll-behavior:smooth;
  /* Safari auf iPhone/iPad vergroessert Schrift in einzelnen Bloecken von
     sich aus ("Text Autosizing"), vor allem im Querformat und auf breiten
     Viewports. Das Ergebnis sind Absaetze in unterschiedlichen Groessen,
     umbrechende Knoepfe und ein Layout, das insgesamt verzogen wirkt —
     ohne dass am CSS etwas falsch waere. Die Zeile schaltet das ab und
     laesst die im CSS definierten Groessen gelten. Betrifft nur WebKit;
     andere Browser ignorieren sie. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-family:var(--font-body);
  color:var(--ink-soft);
  background:var(--paper);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.05;
  letter-spacing:-0.015em;
  margin:0;
  font-weight:600;
  text-wrap:balance;
}
h1{font-size:clamp(2.2rem,4.8vw,4.0rem); font-weight:600}
h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
/* Platzhalter fuer den Motion-Unterstrich (motion.css M.2).
   Der Strich wird absolut unter die letzte Textzeile gesetzt und ragt
   rund 8px unter die H2 hinaus. Zusammen mit line-height:1.05 und
   margin:0 landete er dadurch mitten in den Oberlaengen des Folgetexts.
   Der Abstand steht bewusst HIER und nicht in motion.css: er muss auch
   ohne JS existieren, sonst springt das Layout beim Laden nach (CLS).
   Die Ausnahmenliste ist identisch mit EXCLUDE in motion.js — wo kein
   Strich gezeichnet wird, braucht es auch keinen Platz. */
h2{padding-bottom:14px}
.site-header h2,
.mobile-panel h2,
.hero h2,
.faq-item h2,
footer h2{padding-bottom:0}
h3{font-size:clamp(1.2rem,1.6vw,1.45rem); font-weight:600}
h4{font-size:1.1rem}
em{font-style:italic; color:var(--green-deep); font-family:var(--font-display)}
p{margin:0; text-wrap:pretty}

.container{max-width:var(--max-w); margin-inline:auto; padding-inline:24px}
section{padding-block:clamp(64px,8vw,96px)}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body);
  font-weight:600; font-size:1rem; line-height:1;
  padding:14px 22px;
  border-radius:var(--radius-md);
  border:2px solid transparent;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
  white-space:nowrap;
  text-decoration:none;
}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:9px 14px; font-size:.92rem}
.btn-lg{padding:16px 28px; font-size:1.08rem}
.btn-primary{background:var(--green-deep); color:#fff}
.btn-primary:hover{background:var(--ink)}
.btn-whatsapp{background:var(--whatsapp); color:#fff}
.btn-whatsapp:hover{background:var(--whatsapp-deep)}
.btn-secondary{background:var(--cream-warm); color:var(--ink); border-color:var(--border)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:#fff}
.btn .ic{width:18px; height:18px; flex:0 0 18px}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:600; letter-spacing:.02em;
  color:var(--green-deep);
  background:var(--green-soft);
  padding:7px 14px; border-radius:var(--radius-full);
  margin-bottom:20px;
  font-family:var(--font-body);
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,246,.9);
  /* Safari kennt bis heute nur die praefixierte Fassung. Ohne sie bleibt
     der Header dort einfach unscharf-los — die 90%-Deckung traegt ihn zwar,
     aber der Effekt fehlt. */
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px 24px;
  max-width:var(--max-w); margin-inline:auto;
}
/* Kopfzeilen-Breite: Platz fuer sieben Menuepunkte (20.08.2026).
   Mit "Mobilitaetsgarantie" kam der laengste Eintrag der Zeile dazu, dafuer
   ist der "Schnell erreichbar"-Badge entfallen, der frueher um denselben
   Platz konkurrierte. Unterm Strich bleibt die Zeile breit: die Messung vom
   16.08.2026 ergab 1222px fuer Badge + sechs Punkte, der Badge nimmt davon
   rund 180px mit, der siebte Punkt legt rund 155px drauf — macht wieder
   knapp 1200px.
   Die 1152px des normalen Containers reichen dafuer nicht, und Flexbox
   bricht hier nicht um, sondern laesst die Bloecke ineinander laufen. Genau
   das war am 16.08.2026 zu sehen: der Badge lag ueber "Produkte". Deshalb
   bekommt NUR die Kopfzeile 80px mehr Breite. */
@media (min-width:1281px){
  .nav{max-width:1280px}
}
.brand{display:flex; align-items:center; gap:14px}
.brand img{height:38px; width:auto}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(95,175,45,.6)}
  70%{box-shadow:0 0 0 10px rgba(95,175,45,0)}
  100%{box-shadow:0 0 0 0 rgba(95,175,45,0)}
}
/* nowrap: mit dem sechsten Punkt (Aktionen) brachen sonst
   "Über Harry" und "Frag Harry KI" auf zwei Zeilen um und die
   Kopfzeile wurde dadurch hoeher. Der kleinere Abstand faengt
   die zusaetzliche Breite auf. */
.nav-links{display:flex; gap:15px; align-items:center}
.nav-links a{white-space:nowrap}
.nav-links a{font-weight:500; font-size:.95rem; color:var(--ink-soft); position:relative}
.nav-links a:hover{color:var(--green-deep)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background:var(--green); border-radius:2px;
}
/* Aktionen als Dauer-Hinweis in der Navigation (16.08.2026).
   Gefuellt gruen auf Kevins Ansage — die orange Fassung vom selben Tag
   ist wieder raus.
   NICHT als gruener Unterstrich, weil der die Markierung fuer "du bist
   auf dieser Seite" ist (.nav-links a.active::after) — haette Aktionen
   ihn dauerhaft, saehe jede Seite so aus, als waere man dort.
   Die Regel greift ueber den href, damit die 28 Seiten mit dieser
   Navigation nicht einzeln angefasst werden muessen. */
.nav-links a[href="/aktionen"]{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; color:#fff;
  background:var(--green);
  padding:6px 14px 6px 11px; border-radius:var(--radius-full);
  margin-inline:-4px;
  box-shadow:0 2px 10px rgba(95,175,45,.4);
}
.nav-links a[href="/aktionen"]::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#fff;
  animation:aktionen-puls 1.8s ease-in-out infinite;
}
.nav-links a[href="/aktionen"]:hover{color:#fff; filter:brightness(1.08)}
@keyframes aktionen-puls{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.4; transform:scale(.75)}
}
/* Auf der Aktionen-Seite selbst uebernimmt die Pille die Aktiv-Markierung:
   der Unterstrich unter einer gefuellten Flaeche saehe aus wie ein Fehler.
   Der Punkt hoert dort auf zu pulsen — angekommen ist angekommen. */
.nav-links a.active[href="/aktionen"]{box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}
.nav-links a.active[href="/aktionen"]::before{animation:none}
.nav-links a.active[href="/aktionen"]::after{content:none}
@media (prefers-reduced-motion: reduce){
  .nav-links a[href="/aktionen"]::before{animation:none}
}

.nav-cta{display:flex; gap:10px; align-items:center}
.mobile-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px}
.mobile-toggle svg{width:24px; height:24px}
/* Darunter wird gestaffelt Platz gemacht, statt die Zeile ineinander
   laufen zu lassen:
   - ab 1280px abwaerts faellt der Kontakt-Geisterknopf weg (rund 100px).
     Er ist der entbehrlichste Teil der Zeile: Kontakt steht im Footer, im
     Mobil-Menue und in der Sticky-Leiste, und der WhatsApp-Knopf daneben
     bleibt stehen. Dazu ruecken die Punkte enger zusammen (15px -> 11px,
     nochmal rund 24px).
   - ab 1120px abwaerts reicht auch das nicht mehr, dort uebernimmt das
     Hamburger-Menue. Diese Schwelle lag bis zum 20.08.2026 bei 900px —
     mit sechs Punkten trug sie, mit sieben nicht mehr. Tablets im
     Querformat (1024px) bekommen dadurch das Mobil-Menue statt der
     Desktop-Zeile. Das ist gewollt: lieber ein sauberes Menue als eine
     Kopfzeile, in der Logo und Navigation uebereinander liegen.
   ACHTUNG: Die Zahlen sind gerechnet, nicht im Browser gemessen — auf
   diesem Rechner steht kein Browser zur Verfuegung. Vor dem Merge an den
   drei Schwellen 1281 / 1120 / 900 nachsehen. */
@media (max-width:1280px){
  .nav-cta .btn.btn-ghost{display:none}
  .nav-links{gap:11px}
}
@media (max-width:1120px){
  .nav-links{display:none}
  .nav-cta .btn:not(.btn-whatsapp){display:none}
  .mobile-toggle{display:block}
}

/* ============================================================
   Mobile menu panel
   ============================================================ */
.mobile-panel{
  position:fixed; inset:0; z-index:80;
  background:rgba(26,26,26,.5);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.mobile-panel.open{opacity:1; pointer-events:auto}
.mobile-panel-inner{
  position:absolute; top:0; right:0;
  width:min(360px, 88vw); height:100%;
  background:var(--paper);
  padding:24px;
  display:flex; flex-direction:column; gap:18px;
  transform:translateX(100%);
  transition:transform .3s ease;
  box-shadow:-10px 0 40px rgba(0,0,0,.15);
}
.mobile-panel.open .mobile-panel-inner{transform:translateX(0)}
.mobile-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; border-bottom:1px solid var(--border);
}
.mobile-panel-head img{height:32px; width:auto}
.mobile-panel-close{
  background:none; border:0; padding:8px; cursor:pointer; color:var(--ink);
}
.mobile-panel-close svg{width:22px; height:22px}
.mobile-panel-links{display:flex; flex-direction:column; gap:4px; margin:8px 0}
.mobile-panel-links a{
  font-family:var(--font-display); font-weight:500;
  font-size:1.2rem; color:var(--ink);
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.mobile-panel-links a:hover{color:var(--green-deep)}
/* Gegenstueck zur gruenen Aktionen-Pille aus der Desktop-Navigation */
.mobile-panel-links a[href="/aktionen"]{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:600;
  background:var(--green);
  padding:12px 16px; border-radius:var(--radius-md);
  border-bottom-color:transparent;
}
.mobile-panel-links a[href="/aktionen"]::before{
  content:""; width:8px; height:8px; border-radius:50%; background:#fff;
  animation:aktionen-puls 1.8s ease-in-out infinite;
}
.mobile-panel-links a.active[href="/aktionen"]::before{animation:none}
@media (prefers-reduced-motion: reduce){
  .mobile-panel-links a[href="/aktionen"]::before{animation:none}
}
.mobile-panel-ctas{display:flex; flex-direction:column; gap:10px; margin-top:auto}
.mobile-panel-ctas .btn{width:100%}

/* ============================================================
   Harry helper avatars (CSS crops from 3-poses image)
   ============================================================ */
/* Die Avatar-Kreise ziehen ihr Motiv nicht mehr per background-position aus
   dem Dreier-Streifen, sondern kommen als eigenes quadratisches Portrait.
   Grund: aus dem Streifen ragte regelmaessig die Nachbarfigur mit in den
   Kreis, und der Ausschnitt musste bei jeder Groesse neu stimmen. Mit
   cover sitzt jedes Motiv bei jeder Kreisgroesse richtig.
   locker/berater sind Harrys neue Aufnahmen, praktiker bleibt beim alten
   Motiv — nur dort haelt er ein Geraet in der Hand. */
/* ============================================================
   Harry-Fotos in den Bildflaechen
   ------------------------------------------------------------
   Seit 12.08.2026 sind das echte Freisteller (rembg, siehe
   _reference/harry-kacheln-bauen.py). Damit sind zwei Dinge weg,
   die vorher noetig waren:

   1. Die `mask-image`-Ellipse. Sie liess die Kanten des Vollbilds
      in den Kachelverlauf auslaufen, damit kein Rechteck in der
      Kachel stand. Ein Freisteller hat keine Kanten, die Maske
      haette nur noch Harrys Schultern und Fuesse ausgeblendet.
   2. `object-fit:cover`. Cover fuellt die Flaeche, indem es
      beschneidet — beim Vollbild traf das die Wand, beim
      Freisteller Harrys Beine. Ein abgeschnittener Koerper ohne
      Hintergrund sieht aus wie ein Fehler, deshalb `contain`:
      die Figur steht vollstaendig in der Flaeche, der Kachelton
      liegt drumherum.

   object-position bleibt unten buendig — Harry steht damit auf
   der Kachelkante statt in ihrer Mitte zu schweben.
   ============================================================ */
.harry-foto{
  width:100%; height:100%;
  object-fit:contain;
  object-position:center bottom;
}

.harry-avatar{
  border-radius:50%;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  flex-shrink:0;
}
.harry-avatar.locker   { background-image:url("harry-locker-portrait.webp"); }
.harry-avatar.berater  { background-image:url("harry-berater-portrait.webp"); }
.harry-avatar.praktiker{ background-image:url("harry-praktiker-portrait.webp"); }

.harry-portrait-crop{
  background-image:url("harry-3-posen.jpg");
  background-repeat:no-repeat;
  background-color:var(--green-soft);
}
.harry-portrait-crop.locker   { background-size:auto 380%; background-position: 23% 14%; }
.harry-portrait-crop.berater  { background-size:auto 380%; background-position: 57% 14%; }
.harry-portrait-crop.praktiker{ background-size:auto 380%; background-position: 86% 14%; }

/* ============================================================
   Trust Bar
   ============================================================ */
.trust-bar{
  background:var(--green-deep);
  color:#fff;
  padding-block:28px;
}
.trust-bar .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.trust-left{display:flex; align-items:center; gap:20px}
.trust-badge{
  flex:0 0 auto;
  background:#fff;
  color:var(--green-deep);
  font-family:var(--font-display);
  font-weight:700;
  border-radius:50%;
  width:96px; height:96px;
  display:grid; place-items:center;
  text-align:center;
  line-height:1;
  font-size:.7rem;
  letter-spacing:.05em;
  position:relative;
  transform:rotate(-6deg);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.trust-badge strong{font-size:1.55rem; display:block; margin-bottom:2px; letter-spacing:0}
.trust-badge em{color:var(--green-deep); font-style:normal; font-size:.65rem; letter-spacing:.08em}
.trust-text{font-family:var(--font-display); font-size:clamp(1.1rem,1.8vw,1.5rem); font-weight:500; line-height:1.25}
.trust-text strong{font-weight:600}
.trust-meta{font-size:.85rem; opacity:.8; margin-top:6px; font-family:var(--font-body)}
.trust-bar .btn-ghost{color:#fff; border-color:#fff}
.trust-bar .btn-ghost:hover{background:#fff; color:var(--green-deep)}

/* Mini trust strip (under heros etc) */
.trust-strip{
  display:flex; flex-wrap:wrap; gap:18px 26px;
  font-size:.9rem; color:var(--ink-soft);
  margin-top:24px;
}
.trust-strip li{
  list-style:none; display:inline-flex; align-items:center; gap:8px;
}
.trust-strip li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--green); flex:0 0 6px;
}
.trust-strip ul{display:contents; padding:0; margin:0}

/* ============================================================
   "Frag Harry"-Box — recurring inline lead capture
   ============================================================ */
.frag-harry{
  display:flex; gap:18px; align-items:center;
  background:var(--cream-warm);
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 22px;
  margin:32px 0;
}
.frag-harry .ava{
  width:54px; height:54px; flex:0 0 54px;
  border:2px solid var(--green);
}
.frag-harry .txt{flex:1; min-width:0}
.frag-harry .txt strong{
  display:block; font-family:var(--font-display); font-weight:600;
  color:var(--ink); font-size:1.02rem; margin-bottom:2px;
}
.frag-harry .txt span{font-size:.92rem; color:var(--ink-soft)}
.frag-harry .btn{flex-shrink:0}
@media (max-width:600px){
  .frag-harry{flex-direction:column; align-items:flex-start; text-align:left}
  .frag-harry .btn{width:100%}
}

/* Inline link-style lead */
.lead-link{
  color:var(--green-deep); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}
.lead-link:hover{color:var(--ink)}

/* ============================================================
   Newsletter
   ============================================================ */
.newsletter-section{
  background:var(--cream-warm);
  padding-block:64px;
}
.newsletter-wrap{
  max-width:780px; margin-inline:auto;
  background:var(--paper);
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,40px);
  display:grid; grid-template-columns:1fr 1.1fr; gap:36px;
  align-items:center;
}
.newsletter-copy h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.4rem,2.4vw,1.8rem);
  margin-bottom:10px;
}
.newsletter-copy p{color:var(--ink-soft); font-size:.98rem}
.newsletter-form{display:flex; flex-direction:column; gap:10px}
.newsletter-input-row{display:flex; gap:8px}
.newsletter-input-row input{
  flex:1; min-width:0;
  font-family:var(--font-body); font-size:1rem;
  padding:13px 16px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--paper); color:var(--ink);
  transition:border-color .15s ease;
}
.newsletter-input-row input:focus{outline:none; border-color:var(--green-deep)}
.newsletter-fine{font-size:.78rem; color:var(--muted); line-height:1.4}
.newsletter-fine a{text-decoration:underline}
.newsletter-success{
  display:none;
  background:var(--green-soft); color:var(--green-deep);
  border-radius:var(--radius-md);
  padding:14px 18px; font-weight:600; font-size:.95rem;
}
.newsletter-success.show{display:block}
@media (max-width:780px){
  .newsletter-wrap{grid-template-columns:1fr; gap:24px}
}

/* ============================================================
   Final CTA (reusable)
   ============================================================ */
.final-cta{
  background:var(--green-deep); color:#fff;
  position:relative; overflow:hidden;
}
.final-cta::before{
  content:""; position:absolute; right:-200px; top:-200px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
}
.final-grid{
  display:grid; grid-template-columns:1fr 380px; gap:48px;
  align-items:center; position:relative;
}
.final-copy h2{color:#fff; font-size:clamp(2rem,4vw,3.2rem); margin-bottom:18px}
.final-copy em{color:#c5e9a8}
.final-copy p{font-size:1.12rem; color:#d4e8c5; margin-bottom:32px; max-width:46ch}
.final-ctas{display:flex; gap:12px; flex-wrap:wrap}
.final-cta .btn-primary{background:#fff; color:var(--green-deep)}
.final-cta .btn-primary:hover{background:var(--ink); color:#fff}
.final-cta .btn-ghost{border-color:#fff; color:#fff}
.final-cta .btn-ghost:hover{background:#fff; color:var(--green-deep)}
.final-cta .eyebrow{background:rgba(255,255,255,.12); color:#fff}
.final-fine{font-size:.85rem; color:#c5e9a8; margin-top:18px}
.harry-portrait{
  position:relative;
  background-image:url("harry-3-posen.jpg");
  background-size:auto 130%;
  background-position:48% 0%;
  background-repeat:no-repeat;
  border-radius:var(--radius-lg);
  aspect-ratio:3/4;
  background-color:rgba(255,255,255,.04);
}
.harry-portrait.praktiker{background-position:88% 0%}
.harry-portrait.locker{background-position:14% 0%}
/* Freisteller-Variante: die neuen Einzelfotos statt des alten Posen-Streifens.
   Motive sind 1050x1400 = 3:4, die Buehne auch — contain schneidet nichts ab. */
.harry-portrait.foto-berater,
.harry-portrait.foto-locker{
  background-size:contain;
  background-position:center bottom;
}
.harry-portrait.foto-berater{background-image:url("harry-berater.webp")}
.harry-portrait.foto-locker{background-image:url("harry-locker.webp")}
.harry-portrait::after{
  content:"";
  position:absolute; inset:0;
  border-radius:var(--radius-lg);
  box-shadow:inset 0 -100px 80px -40px rgba(63,122,30,.7);
}
.harry-card{
  position:absolute; bottom:20px; left:auto; right:16px;
  background:#fff; color:var(--ink);
  padding:16px 20px;
  border-radius:var(--radius-md);
  box-shadow:0 12px 32px rgba(0,0,0,.2);
  font-family:var(--font-body);
  max-width:280px;
}
.harry-card strong{font-family:var(--font-display); font-size:1.05rem; display:block; margin-bottom:2px}
.harry-card span{font-size:.86rem; color:var(--muted)}
@media (max-width:900px){
  .final-grid{grid-template-columns:1fr; gap:40px}
  .harry-portrait{max-width:340px; margin-inline:auto}
  .harry-card{left:auto; right:16px}
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--ink); color:#c8c4ba;
  padding-block:64px 32px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px;
  margin-bottom:48px;
}
.footer-brand img{height:42px; width:auto; filter:brightness(1.4) saturate(.9); margin-bottom:18px}
.footer-brand p{font-size:.92rem; max-width:30ch; margin-bottom:18px}
.footer-col h5{
  font-family:var(--font-display); font-size:.92rem;
  color:#fff; font-weight:600; margin-bottom:18px;
  letter-spacing:.02em;
}
.footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.footer-col a{font-size:.92rem; color:#c8c4ba}
.footer-col a:hover{color:#fff}
/* Drei Bloecke: Copyright links, Rechtslinks MITTIG, Signatur rechts.
   Vorher flex + space-between — damit sass der mittlere Block nicht in
   der Mitte, sondern dort, wo die beiden aeusseren ihn zufaellig hin-
   liessen (bei 1280px 48px zu weit links). 1fr auto 1fr zentriert ihn
   echt, unabhaengig davon wie breit die Nachbarn sind. */
.footer-bottom{
  padding-top:24px; border-top:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:12px 24px;
  font-size:.82rem; color:#888070;
}
.footer-bottom > :last-child{justify-self:end}
.footer-bottom a{color:#888070}
.footer-bottom a:hover{color:#fff}
.cross-link{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.05);
  padding:8px 14px; border-radius:var(--radius-full);
  font-size:.82rem;
}
/* Auf Tablet stand die kurze Marken-Spalte neben "Produkte" und liess
   daneben ein grosses Loch. Ab hier laeuft sie ueber die volle Breite,
   darunter die drei Link-Spalten. */
@media (max-width:1000px){
  .footer-grid{grid-template-columns:repeat(3,1fr); gap:32px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:640px){.footer-grid{grid-template-columns:1fr 1fr; gap:28px}}
@media (max-width:420px){.footer-grid{grid-template-columns:1fr}}
/* Unten gestapelt und zentriert — nebeneinander blieben zwischen
   "Datenschutz" und der Signatur nur 24px, das sah gequetscht aus. */
@media (max-width:700px){
  .footer-bottom{grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px}
  .footer-bottom > :last-child{justify-self:center}
}

/* ============================================================
   Floating WhatsApp
   ============================================================ */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:60px; height:60px; border-radius:50%;
  background:var(--whatsapp); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(37,211,102,.35), 0 4px 12px rgba(0,0,0,.15);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float svg{width:30px; height:30px}
.wa-float::after{
  content:"Schreib Harry";
  position:absolute; right:74px; top:50%; transform:translateY(-50%);
  background:var(--ink); color:#fff;
  padding:8px 14px; border-radius:var(--radius-md);
  font-size:.85rem; font-weight:600; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
/* Hover NUR fuer echte Zeigegeraete. Auf Touch (iPad/iPhone) setzt
   Safari beim ersten Tap den Hover-Zustand, blendet den Tooltip ein
   und verschluckt dafuer den Klick — der Link geht erst beim ZWEITEN
   Tap auf. Mit (hover:hover) gibt es auf Touch gar keinen Hover, also
   auch kein zweites Antippen. */
@media (hover:hover) and (pointer:fine){
  .wa-float:hover{transform:scale(1.08); box-shadow:0 10px 30px rgba(37,211,102,.5)}
  .wa-float:hover::after{opacity:1}
}
/* Tastatur-Nutzer sehen das Label weiterhin */
.wa-float:focus-visible::after{opacity:1}
@media (max-width:520px){
  .wa-float{width:54px; height:54px}
  .wa-float svg{width:26px; height:26px}
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{opacity:0}
.reveal.in{animation:revealIn .45s cubic-bezier(.22,.61,.36,1) both; will-change:opacity, transform}
@keyframes revealIn{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }

/* ============================================================
   Reusable product card (small)
   ============================================================ */
.product-card{
  background:var(--paper);
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  display:flex; flex-direction:column;
  transition:transform .18s ease, border-color .18s ease;
}
.product-card:hover{transform:translateY(-3px); border-color:var(--green)}
.product-img{
  aspect-ratio:1/1;
  background:var(--cream);
  border-radius:var(--radius-md);
  margin-bottom:16px;
  display:grid; place-items:center;
  color:var(--muted); font-size:.78rem;
  position:relative;
}
.product-tag{
  position:absolute; top:10px; left:10px;
  background:var(--ink); color:#fff;
  font-size:.7rem; font-weight:600;
  padding:4px 8px; border-radius:var(--radius-full);
  font-family:var(--font-body); letter-spacing:.02em;
}
.product-tag.green{background:var(--green-deep)}
.product-tag.orange{background:var(--orange); color:#fff}
.product-name{
  font-family:var(--font-display); font-weight:600;
  font-size:1.05rem; color:var(--ink); margin-bottom:4px;
}
.product-desc{font-size:.86rem; color:var(--muted); margin-bottom:12px; flex:1}
.product-foot{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.85rem; color:var(--green-deep); font-weight:600;
}

/* Section helpers */
.section-lede{
  max-width:54ch; margin:0 0 32px;
  color:var(--ink-soft); font-size:1.08rem;
}
.section-lede.center{text-align:center; margin-inline:auto; margin-bottom:48px}
.section-head-center{text-align:center; margin-bottom:48px}

/* ============================================================
   A.21 — Hover-Effekte (Cards + CTAs) + WhatsApp-Float-Puls
   ============================================================ */
.product-card,.svc-card,.bl-card,.cat-card,.kat-card,.model-card,
.harry-card,.persona-card,.service-mini-card,.alt-card{
  transition:transform .3s ease, box-shadow .3s ease, border-color .18s ease;
}
.product-card:hover,.svc-card:hover,.bl-card:hover,.cat-card:hover,.kat-card:hover,
.model-card:hover,.harry-card:hover,.persona-card:hover,.service-mini-card:hover,.alt-card:hover,
.way-card:hover,.cross-card:hover,.svc-cross-card:hover,.service-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(26,26,26,.10);
}
/* primäre CTAs: bestehenden Lift behalten + dezenter Scale + Schatten */
.btn-primary:hover,.btn-whatsapp:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
/* WhatsApp-Float: sehr dezenter Puls alle 4s (Hover-Scale hat Vorrang) */
@keyframes waPulse{ 0%,85%,100%{transform:scale(1)} 92%{transform:scale(1.05)} }
.wa-float{ animation:waPulse 4s ease-in-out infinite; }
.wa-float:hover{ animation:none; }

/* ============================================================
   A.21 — Header-Schatten beim Scrollen + Klick-Ripple auf CTAs
   ============================================================ */
.site-header{ transition:box-shadow .2s ease, background-color .2s ease; }
.site-header.scrolled{ box-shadow:0 4px 20px rgba(26,26,26,.08); }

/* dezenter Klick-Ripple (CSS-only, von der Mitte), 400ms expand+fade */
.btn-primary, .btn-whatsapp{ position:relative; }
.btn-primary::after, .btn-whatsapp::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle, rgba(255,255,255,.55) 10%, transparent 55%);
  opacity:0; transform:scale(.4); pointer-events:none;
}
.btn-primary:active::after, .btn-whatsapp:active::after{ animation:btnRipple .4s ease-out; }
@keyframes btnRipple{ 0%{opacity:.55; transform:scale(.4)} 100%{opacity:0; transform:scale(1)} }

/* ============================================================
   A.21 — Hero-Stagger Hauptseite (CSS-only, läuft 1x bei Load)
   Klassen .hero-copy/.hero-lede/.hero-ctas existieren nur auf /
   ============================================================ */
.hero-copy h1{ animation:heroIn .5s cubic-bezier(.22,.61,.36,1) both; }
.hero-lede{ animation:heroIn .5s cubic-bezier(.22,.61,.36,1) .1s both; }
.hero-ctas{ animation:heroIn .5s cubic-bezier(.22,.61,.36,1) .2s both; }
@keyframes heroIn{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }

/* ============================================================
   R2 — FAQ-Komponente (aus Seiten-Inline-CSS gehoben; Seiten mit
   eigener identischer Inline-Kopie bleiben kompatibel)
   ============================================================ */
.faq-section{background:var(--paper); padding-block:clamp(64px,8vw,96px)}
.faq-list{max-width:780px; margin:32px auto 0}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%; text-align:left; background:none; border:0; font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:var(--ink); padding:22px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq-q .plus{width:28px; height:28px; border-radius:50%; background:var(--cream); color:var(--green-deep); display:grid; place-items:center; flex:0 0 28px; font-size:1.2rem; font-weight:700; transition:transform .25s ease, background .25s ease}
.faq-item.open .faq-q .plus{transform:rotate(45deg); background:var(--green); color:#fff}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; color:var(--ink-soft); font-size:.98rem; line-height:1.6}
.faq-item.open .faq-a{max-height:500px; padding:0 0 22px}

/* ============================================================
   R2 — Hero Vorher/Nachher-Slider (Signature-Moment, nur /)
   Portiert aus design/hero-prototyp-v3.html (Variante V3)
   ============================================================ */
.hero-slider{
  position:relative; aspect-ratio:1323/952; width:100%;
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border);
  box-shadow:0 24px 48px -22px rgba(60,50,20,.4);
  touch-action:none; cursor:ew-resize; user-select:none; -webkit-user-select:none;
}
.hero-slider:focus-visible{outline:3px solid var(--green-deep); outline-offset:3px}
.hero-slider .hs-carpet{position:absolute; inset:0}
/* sauber (unten) */
.hero-slider .hs-clean{
  background:
    radial-gradient(90% 70% at 70% 30%,rgba(255,255,255,.55),transparent 60%),
    repeating-linear-gradient(90deg,#e8f5dc 0 9px,#e1f0d0 9px 18px),
    var(--green-soft);
}
/* dreckig (oben, geclippt via --pos) */
.hero-slider .hs-dirty{
  background:
    repeating-linear-gradient(90deg,#e0d6c0 0 9px,#d8ccb2 9px 18px),
    var(--cream-warm);
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);
}
.hero-slider .hs-dirty::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 18% 30%,rgba(120,100,60,.28) 0 6px,transparent 7px),
    radial-gradient(circle at 40% 62%,rgba(120,100,60,.22) 0 9px,transparent 10px),
    radial-gradient(circle at 66% 24%,rgba(120,100,60,.20) 0 5px,transparent 6px),
    radial-gradient(circle at 74% 70%,rgba(120,100,60,.25) 0 11px,transparent 12px),
    radial-gradient(circle at 28% 82%,rgba(120,100,60,.18) 0 7px,transparent 8px),
    radial-gradient(circle at 54% 44%,rgba(120,100,60,.15) 0 4px,transparent 5px);
}
.hero-slider .hs-tag{
  position:absolute; top:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; padding:3px 8px; border-radius:5px;
}
.hero-slider .hs-dirty::after{
  content:"vorher"; position:absolute; top:12px; left:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:#7d6f52; background:rgba(251,250,246,.7);
  padding:3px 8px; border-radius:5px;
}
.hero-slider .hs-tag-clean{right:12px; color:var(--green-deep); background:rgba(251,250,246,.8)}
/* Kobold-Silhouette (reine CSS-Formen) */
.hero-slider .hs-kobold{
  position:absolute; right:15%; bottom:8%; width:64px; height:118px; opacity:.9;
  filter:drop-shadow(0 8px 10px rgba(63,122,30,.25));
}
.hero-slider .hs-kobold .k-head{position:absolute; top:0; left:14px; width:36px; height:30px; border-radius:14px 14px 10px 10px; background:var(--green-deep)}
.hero-slider .hs-kobold .k-neck{position:absolute; top:26px; left:26px; width:12px; height:16px; background:var(--green-deep)}
.hero-slider .hs-kobold .k-body{position:absolute; top:38px; left:6px; width:52px; height:56px; border-radius:14px 14px 20px 20px; background:var(--green)}
.hero-slider .hs-kobold .k-base{position:absolute; bottom:0; left:2px; width:60px; height:24px; border-radius:8px; background:var(--green-deep)}
/* Griff-Linie */
.hero-slider .hs-handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px;
  background:rgba(255,255,255,.85); transform:translateX(-1px); z-index:8;
  box-shadow:0 0 0 1px rgba(217,119,6,.25);
}
.hero-slider .hs-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:var(--orange); border:3px solid #fff;
  box-shadow:0 6px 16px -4px rgba(217,119,6,.7);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.hero-slider .hs-grip svg{display:block}
/* Harry-Badge an der Slider-Karte (Personal Brand bleibt im Viewport) */
.hero-harry-badge{
  position:absolute; left:10px; bottom:10px; z-index:9;
  display:flex; align-items:center; gap:10px; pointer-events:none;
}
.hero-harry-badge img{
  width:76px; height:76px; border-radius:50%;
  border:3px solid var(--paper); box-shadow:0 6px 16px rgba(60,50,20,.25);
  background:var(--paper);
}
@media (min-width:900px){
  .hero-harry-badge{left:-14px; bottom:-14px}
  .hero-harry-badge img{width:88px; height:88px}
}

/* ============================================================
   R2 — Sticky-Kontakt-Leiste mobil (<=768px, nach ~600px Scroll)
   ============================================================ */
.sticky-contact{
  display:none;
}
@media (max-width:768px){
  .sticky-contact{
    display:flex; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(251,250,246,.96);
    border-top:1px solid var(--border);
    box-shadow:0 -6px 24px rgba(60,50,20,.12);
    transform:translateY(110%); opacity:0;
    transition:transform .3s ease, opacity .3s ease;
  }
  .sticky-contact.visible{transform:translateY(0); opacity:1}
  .sticky-contact a{
    flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-display); font-weight:600; font-size:.98rem;
    min-height:48px; border-radius:var(--radius-md); text-decoration:none;
  }
  .sticky-contact .sc-wa{background:var(--whatsapp); color:#fff}
  .sticky-contact .sc-tel{background:var(--paper); color:var(--green-deep); border:1.5px solid var(--green-deep)}
  .sticky-contact svg{width:19px; height:19px; flex:0 0 auto}
  /* Footer-Inhalt nicht verdecken, solange die Leiste eingeblendet sein kann */
  body:has(.sticky-contact){padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}

/* ============================================================
   R2 — Trust-Zeile Produktseiten (unter dem Produkt-Hero)
   ============================================================ */
.pd-trustline{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
  font-size:.88rem; color:var(--ink-soft);
}
.pd-trustline span{display:inline-flex; align-items:center; gap:6px}
.pd-trustline .ck{color:var(--green-deep); font-weight:700}

/* ============================================================
   Produktbühne (.product-media)
   ------------------------------------------------------------
   Wiederverwendbare Bühne für die freigestellten Vorwerk-
   Produktbilder. Markenhintergrund und Schatten kommen IMMER
   aus dem CSS — nie ins Bild rendern. Die PNGs/WebPs bleiben
   transparent, damit die Produktdarstellung unverändert ist.

   Nutzung:
     <div class="product-media product-media--tile">
       <img src="…-800.webp" srcset="…" sizes="…"
            width="800" height="800" loading="lazy" alt="…">
     </div>
   ============================================================ */
.product-media{
  /* Einziger Regler für die Motivgröße: max. Kantenlänge auf der Bühne.
     Die Luft macht das BILD (max-width/max-height), nicht das Padding —
     Prozent-Padding bezieht sich in CSS immer auf die BREITE, auch oben
     und unten. Auf einer nicht-quadratischen Bühne (--wide) lief das
     Motiv dadurch über und wurde von overflow:hidden beschnitten. */
  --pm-motiv:84%;
  position:relative;
  aspect-ratio:1/1;              /* einheitliches Seitenverhältnis */
  border-radius:var(--radius-md);
  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;
}
/* weicher Bodenschatten unter dem Produkt (rein dekorativ) */
.product-media::after{
  content:"";
  position:absolute;
  left:50%; bottom:9%;
  width:56%; height:6%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(60,50,20,.28) 0%, rgba(60,50,20,.12) 46%, rgba(60,50,20,0) 72%);
  filter:blur(4px);
  pointer-events:none;
  z-index:0;
}
/* Absolut zentriert: behält das Seitenverhältnis der Datei (kein Verzerren)
   und kann die Bühne auf keiner Achse überschreiten — egal welches
   Bühnen-Seitenverhältnis. Der Bodenschatten (::after) liegt dadurch
   immer unter dem Produkt, nie darauf. */
.product-media img{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  width:auto; height:auto;
  max-width:var(--pm-motiv);
  max-height:var(--pm-motiv);
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 10px 14px rgba(60,50,20,.16));
}
/* Badges (.product-tag, .ts-badge) liegen über dem Produkt */
.product-media > .product-tag,
.product-media > .ts-badge{z-index:2}

/* Varianten — steuern nur noch die Motivgröße bzw. das Bühnenformat */
.product-media--hero{
  --pm-motiv:86%;
  border-radius:var(--radius-lg);
}
.product-media--hero img{filter:drop-shadow(0 16px 22px rgba(60,50,20,.18))}
/* kleine Kacheln: mehr Luft, damit das Motiv nicht an die Ecken stößt */
.product-media--tile{--pm-motiv:78%}
/* schmale Aufsatz-/Zubehörkarten: Produkt darf etwas größer stehen */
.product-media--part{--pm-motiv:84%}
/* Querformat-Bühne. NUR für querformatige Motive verwenden — hochformatige
   Geräte (VK7, VM7) gehören auf die quadratische Standard-Bühne. */
.product-media--wide{aspect-ratio:4/3}

/* Icon-Bühne: gleiche Fläche wie eine Foto-Bühne, aber mit dem Kategorie-
   Icon statt einem Produktfoto. Damit stehen Foto- und Icon-Karten in
   gemischten Reihen auf gleicher Höhe, solange noch nicht jede Kategorie
   ein freigestelltes Motiv hat. Kein Bodenschatten — ein flaches Icon
   steht nicht auf dem Boden. */
.product-media--icon::after{display:none}
.product-media--icon svg{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:30%; height:30%;
  color:var(--green-deep);
  opacity:.5;
}

@media (max-width:640px){
  .product-media{--pm-motiv:80%}
  .product-media--tile{--pm-motiv:74%}
}

/* ============================================================
   A.21 — Reduced Motion: statische Version für bewegungs-
   empfindliche Nutzer (respektiert prefers-reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   A.22 — Aktionspreise: Streichpreis + Aktionspreis
   Wird nur sichtbar, wenn assets/aktionen.js eine laufende
   Aktion findet. Ohne JS bleibt der regulaere Preis stehen.
   ============================================================ */
.preis-regulaer{color:var(--muted); font-weight:400; text-decoration:line-through; text-decoration-thickness:1.5px; margin-right:.15em}
.preis-aktion{color:var(--green-deep); font-weight:700}
.preis-hinweis{display:inline-block; margin-left:8px; padding:3px 9px; border-radius:var(--radius-full); background:var(--green-soft); color:var(--green-deep); font-family:var(--font-body); font-size:.78rem; font-weight:600; white-space:nowrap; vertical-align:middle}
.pd-price [data-aktion="aktiv"] .preis-hinweis, .pd-price.preis-hinweis{font-size:.8rem}
@media (max-width:520px){
  .preis-hinweis{display:block; margin:6px 0 0}
}