/* biberach-gutschein.de – gemeinsame Grundlage (alle Seiten binden NUR diese Datei + ggf. page.css ein) */
:root{
  --blue:#00568A;      /* Hauptblau: Überschriften, Nav, Links */
  --deep:#003A5D;      /* Tiefblau: Footer, dunkle Felder */
  --yellow:#FEF140;    /* Akzent = Gelb der BiberachGUTSCHEIN-Karte */
  --yellow-ink:#1F2937;/* Text auf Gelb */
  --sky:#F2F8FB;       /* helle blaue Fläche */
  --cream:#FEF9E7;     /* warme Fläche */
  --ink:#1F2937;       /* Fließtext */
  --ink-2:#4B5563;     /* Sekundärtext */
  --paper:#FFFFFF;
  --display:"Fraunces", Georgia, serif;
  --text:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter:clamp(16px, 4vw, 32px);
  --max:1360px;
  --gap-section:clamp(96px, 12vw, 200px);
  --step--1:clamp(14px,.9vw,15px);
  --step-0:clamp(16px,1.1vw,18px);
  --step-1:clamp(19px,1.5vw,22px);
  --step-2:clamp(26px,2.4vw,34px);
  --step-3:clamp(34px,4vw,56px);
  --step-4:clamp(44px,7.5vw,112px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.22,1,.36,1);   /* Entrances, kurze UI-Bewegung */
  --ease-expo:cubic-bezier(.16,1,.3,1);   /* lange Reveals ab 800 ms */
  --ease-soft:cubic-bezier(.33,1,.68,1);  /* langsamer Drift auf Fotos */
  --t-hover:180ms;
  --stagger-item:75ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:var(--step-0);line-height:1.55;font-optical-sizing:auto}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.15em;transition:color var(--t-hover) ease,text-decoration-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--deep)}
  .site-nav a:hover{color:var(--blue)}
  .site-foot a:hover,.field-deep a:hover,.field-blue a:hover{color:var(--yellow)}
}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.02em;margin:0 0 .4em;text-wrap:balance;color:var(--blue);font-variation-settings:"opsz" 144,"SOFT" 30}
h1{font-size:var(--step-4);line-height:.95;letter-spacing:-.03em}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2);line-height:1.1}
p{margin:0 0 1em;text-wrap:pretty;max-width:68ch}
.lede{font-size:var(--step-1);line-height:1.4;max-width:52ch}
.wrap{width:min(100% - 2*var(--gutter), var(--max));margin-inline:auto}
.section{padding-block:var(--gap-section)}
.section--tight{padding-block:calc(var(--gap-section)*.6)}
.field-sky{background:var(--sky)}
.field-cream{background:var(--cream)}
.field-deep{background:var(--deep);color:#fff}
.field-deep h1,.field-deep h2,.field-deep h3{color:#fff}
.field-deep a{color:#fff}
.field-yellow{background:var(--yellow);color:var(--yellow-ink)}
.field-yellow h2,.field-yellow h3{color:var(--deep)}
.field-blue{background:var(--blue);color:#fff}
.field-blue h2,.field-blue h3{color:#fff}
/* Buttons: eckig, flach, eine Füllung */
.btn{display:inline-block;padding:.9em 1.5em;font:600 var(--step-0)/1 var(--text);text-decoration:none;border:0;cursor:pointer;background:var(--yellow);color:var(--yellow-ink);transition:transform .25s var(--ease-out),background var(--t-hover) ease,color var(--t-hover) ease}
.btn:hover{background:#ffe04a;transform:translateY(-1px);color:var(--yellow-ink)}
.btn:active{transform:translateY(1px)}
.btn--blue{background:var(--blue);color:#fff}.btn--blue:hover{background:var(--deep);color:#fff}
.btn--ghost{background:transparent;color:var(--blue);padding-inline:0;text-decoration:underline;text-underline-offset:.2em}
.btn--ghost:hover{background:transparent;transform:none;color:var(--deep)}
.field-deep .btn--ghost,.field-blue .btn--ghost{color:#fff}
/* Fokusring: tiefblau mit weißem Innenring, dadurch auf jeder Fläche ≥3:1 sichtbar (auf dunklen Flächen gelb) */
:focus-visible{outline:3px solid var(--deep);outline-offset:3px;box-shadow:0 0 0 3px #fff} /* taste-skill-ignore: Fokusring */
.field-deep :focus-visible,.field-blue :focus-visible,.site-foot :focus-visible{outline-color:var(--yellow)}
::selection{background:var(--yellow);color:var(--yellow-ink)}
/* Header */
.site-head{position:sticky;top:0;z-index:50;background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;gap:32px;min-height:72px}
.wordmark{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--blue);text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.wordmark .mark{width:30px;height:30px;background:var(--yellow);display:grid;place-items:center;color:var(--deep);font-size:16px;font-weight:800}
.wordmark{font-family:var(--text);font-weight:400;letter-spacing:-.01em}
.wordmark b{font-weight:800;color:var(--blue)}
.wordmark .logo{height:48px;width:auto;border-radius:3px;display:block;transition:transform .25s var(--ease)}
.wordmark:hover .logo{transform:rotate(-2deg)}
@media (max-width:860px){.wordmark .logo{height:40px}}
.site-nav{margin-left:auto;display:flex;gap:28px;align-items:center}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:500;transition:color var(--t-hover) ease,transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.site-nav a:hover{transform:translateY(-1px)}}
.site-nav a[aria-current="page"]{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px;text-decoration-color:var(--yellow)}
.site-nav .btn{padding:.7em 1.1em}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;font:600 16px var(--text);color:var(--blue);cursor:pointer}
@media (max-width:860px){
  .site-head .wrap{gap:12px}
  .wordmark{font-size:18px;gap:8px}
  .wordmark .mark{width:26px;height:26px;font-size:14px}
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:72px;background:var(--paper);flex-direction:column;align-items:flex-start;padding:16px var(--gutter) 24px;gap:18px}
  .site-nav.is-open{display:flex}
}
/* Footer */
.site-foot{background:var(--deep);color:#fff;padding-block:clamp(56px,8vw,112px) 32px}
.site-foot .big{font-family:var(--display);font-size:clamp(40px,5.2vw,78px);line-height:.9;letter-spacing:-.03em;font-weight:600;color:var(--yellow);margin:0 0 48px}
.site-foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;font-size:var(--step--1)}
.site-foot a{color:#fff}
.site-foot h2,.site-foot h4{font:600 var(--step-0)/1.3 var(--text);letter-spacing:0;color:#fff;margin:0 0 .6em}
.site-foot .legal{margin-top:48px;font-size:14px;color:#C9D6E2;display:flex;flex-wrap:wrap;gap:20px}
/* Motion helpers
   Entrances je Sektion: Überschrift → Text → Bild. base.js vergibt die Staffelung (--i, 75 ms Versatz)
   je Beobachter-Durchlauf. Versteckter Startzustand nur unter html.js + Bewegung erlaubt:
   ohne Skript und bei reduzierter Bewegung ist die Seite sofort die fertige Seite. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .8s var(--ease-expo);transition-delay:calc(var(--i,0) * var(--stagger-item))}
  .js figure.reveal,.js .reveal--pic{transform:translateY(16px) scale(1.03)}   /* Bilder setzen sich aus leichter Vergrößerung */
  .js .reveal.is-in{opacity:1;transform:none}
  .js figure.reveal.is-in,.js .reveal--pic.is-in{transition-duration:.8s,1.1s;transition-timing-function:var(--ease-out),var(--ease-soft)}
  /* Ken-Burns: langsamer Drift auf einem großen Foto, 12 s, nur transform */
  .js .drift{animation:drift 12s var(--ease-soft) forwards}
  @keyframes drift{from{transform:scale(1)}to{transform:scale(1.06)}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.site-nav a,a{transition-property:background,color,text-decoration-color}.btn:hover,.site-nav a:hover{transform:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Skip-Link wird bei Tastaturfokus sichtbar */
a.sr-only:focus{position:fixed;top:12px;left:12px;z-index:100;width:auto;height:auto;clip:auto;padding:12px 18px;background:var(--deep);color:#fff;font-weight:600;text-decoration:none;outline-color:var(--yellow)}

/* ==========================================================================
   Stand 11.11.2026 – Bewegung und gemeinsame Bausteine
   ========================================================================== */

/* ---------- Seitenwechsel: weiches Überblenden, das Logo bleibt stehen (Browser ohne View Transitions wechseln normal) ---------- */
@view-transition{navigation:auto}
.wordmark .logo{view-transition-name:bcg-logo}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .22s var(--ease-out) both}
  ::view-transition-new(root){animation:vt-in .38s var(--ease-out) both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- Knöpfe mit spürbarer Reaktion: heben beim Überfahren, geben beim Drücken nach, Druckpunkt als Farbfleck ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.97);transition-duration:.08s}
.btn::after{content:"";position:absolute;z-index:-1;left:var(--px,50%);top:var(--py,50%);width:1px;height:1px;border-radius:50%;background:currentColor;opacity:0;transform:scale(0);pointer-events:none} /* taste-skill-ignore: Druckpunkt der Schaltfläche, kein Trennstrich */
.btn.is-pressed::after{animation:btn-press .5s var(--ease-out)}
@keyframes btn-press{from{opacity:.22;transform:scale(0)}to{opacity:0;transform:scale(420)}}
.btn--ghost{overflow:visible}
.btn--ghost::after{display:none}
.btn--ghost:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}.btn.is-pressed::after{animation:none}}

/* ---------- Überschriften bauen sich Zeile für Zeile auf (base.js zerlegt sie beim Erscheinen und setzt sie danach zurück) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal.lines{opacity:1;transform:none;transition:none}
  .lines .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
  .lines .ln__in{display:block;transform:translateY(108%);transition:transform .95s var(--ease-expo);transition-delay:calc(var(--l,0) * 95ms + var(--i,0) * var(--stagger-item))}
  .lines.is-in .ln__in{transform:none}
}

/* ---------- Fotos ziehen beim Scrollen leicht langsamer mit (Rahmen schneidet ab, nichts überlappt) ---------- */
.pfx{overflow:hidden}
.pfx > img,.pfx > picture > img{will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .js .pfx > img{transform:translate3d(0,var(--py,0px),0) scale(1.12)}
}

/* ---------- Die Gutscheinkarte als Objekt: neigt sich, Lichtreflex wandert, lässt sich umdrehen ---------- */
.card3d{position:relative;width:100%;aspect-ratio:1200/757;perspective:1200px;-webkit-tap-highlight-color:transparent}
.card3d__tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease-out)}
.card3d.is-live .card3d__tilt{transition-duration:.12s;transition-timing-function:linear}
.card3d__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--ease-expo)}
.card3d.is-flipped .card3d__inner{transform:rotateY(180deg)}
.card3d__face{position:absolute;inset:0;overflow:hidden;border-radius:4.2%/6.6%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card3d__front{background:var(--blue);cursor:pointer}
.card3d__front img{display:block;width:100%;height:100%;object-fit:cover}
/* Lichtreflex: weiche weiße Scheibe, die der Zeigerposition folgt (kein Verlauf) */
.card3d__glare{position:absolute;left:0;top:0;width:46%;aspect-ratio:1;margin:-23% 0 0 -23%;border-radius:50%;background:#fff;filter:blur(26px);opacity:0;transform:translate3d(var(--gx,0px),var(--gy,0px),0);transition:opacity .4s ease;pointer-events:none;mix-blend-mode:soft-light}
.card3d.is-live .card3d__glare{opacity:.85}
/* Wunschbetrag auf der Karte (unten rechts im gelben Feld) */
.card3d__amount{position:absolute;right:4.5%;bottom:4.5%;padding:.08em .22em;background:var(--yellow);font-family:var(--display);font-weight:700;font-size:clamp(15px,7.2cqw,34px);line-height:1;letter-spacing:-.02em;color:var(--blue);font-variation-settings:"opsz" 144,"SOFT" 30;font-variant-numeric:tabular-nums}
.card3d__amount:empty{display:none}
.card3d__face{container-type:inline-size}
/* Rückseite: Guthabenabfrage direkt auf der Karte */
.card3d__back{transform:rotateY(180deg);background:var(--yellow);color:var(--yellow-ink)}
.cardback{height:100%;margin:0;display:flex;flex-direction:column;justify-content:center;gap:3cqw;padding:6cqw 7cqw}
.cardback__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cardback__title{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(14px,6.4cqw,22px);line-height:1.05;letter-spacing:-.02em;color:var(--deep);font-variation-settings:"opsz" 144,"SOFT" 30}
.cardback__row{display:flex;gap:2cqw;align-items:stretch}
.cardback__row input{flex:1 1 auto;min-width:0;width:100%;height:clamp(36px,12cqw,50px);margin:0;padding:0 3cqw;border:0;border-radius:0;background:var(--paper);color:var(--ink);font:500 clamp(14px,4.4cqw,16px) var(--text);-webkit-appearance:none;appearance:none}
.cardback__row input::placeholder{color:var(--ink-2);opacity:1}
.cardback__row input:focus-visible{outline:3px solid var(--deep);outline-offset:0;box-shadow:none}
.cardback__row .btn{flex:0 0 auto;padding:0 4cqw;font-size:clamp(14px,4.4cqw,16px);display:grid;place-items:center}
.cardback__note{margin:0;max-width:none;font-size:var(--step--1);line-height:1.3;color:var(--yellow-ink)}
.card3d__turn{position:absolute;left:0;top:calc(100% + 14px);padding:.55em .9em;border:0;border-radius:0;background:var(--yellow);color:var(--yellow-ink);font:600 var(--step--1)/1 var(--text);cursor:pointer;transition:transform .25s var(--ease-out),background var(--t-hover) ease}
.card3d__turn:hover{background:#ffe04a;transform:translateY(-2px)}
.card3d__turn:active{transform:translateY(1px) scale(.97)}
@media (prefers-reduced-motion:reduce){
  .card3d__tilt{transform:none;transition:none}
  .card3d__inner{transition:none}
  .card3d__glare{display:none}
}

/* ---------- Aufkleber „Wir sind dabei“: das Gutschein-Logo als Sticker, klebt sich beim Erscheinen auf ---------- */
.sticker{display:inline-flex;flex-direction:column;align-items:stretch;width:var(--sticker-w,92px);padding:5px 5px 4px;background:var(--paper);transform:rotate(var(--sticker-rot,-7deg));transform-origin:50% 50%}
.sticker img{display:block;width:100%;height:auto;aspect-ratio:400/252;object-fit:cover}
.sticker span{display:block;padding-top:3px;font:700 calc(var(--sticker-w,92px) * .125)/1.1 var(--text);letter-spacing:0;text-align:center;color:var(--blue);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .js .sticker.stick{opacity:0;transform:rotate(calc(var(--sticker-rot,-7deg) - 16deg)) scale(1.7)}
  .js .sticker.stick.is-stuck{opacity:1;transform:rotate(var(--sticker-rot,-7deg)) scale(1);transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .18s ease;transition-delay:calc(var(--i,0) * 110ms)}
}

/* ---------- Konfetti (Danke-Seite): Zeichenfläche über allem, fängt keine Klicks ---------- */
.confetti{position:fixed;left:0;top:0;z-index:200;width:0;height:0;pointer-events:none}
.confetti i{position:fixed;top:0;display:block;pointer-events:none;will-change:transform}
/* Rückseite der Karte ist nur da, wenn sie zu sehen ist (nach dem Zurückdrehen noch für die Dauer der Drehung) */
.card3d:not(.is-flipped):not(.is-turning) .card3d__back{display:none}
/* Zeigt die Rückseite, ist die Vorderseite nach der halben Drehung auch für Zeiger und Vorlesen weg */
.card3d.is-flipped .card3d__front{visibility:hidden;transition:visibility 0s .4s}
/* Nach der Drehung zeigt die Rückseite in jedem Browser, auch wenn er die 3D-Drehung flach rechnet (Meldung C. Heinzel 12.11.2026) */
.card3d.is-flipped:not(.is-turning) .card3d__back{backface-visibility:visible;-webkit-backface-visibility:visible}