/* The Bible Dogs — Website. Struktur und Bausteine nach dem Mockup V6.
   Die FARBEN stehen nicht hier, sondern in palette.css, die der Bau je
   Ausgabe schreibt: .com traegt Lila, China traegt Gold.
   Schriften liegen im Projekt, NICHT bei Google — in China gesperrt.
   Kein Dunkelmodus: die App hat keinen. */

@font-face{font-family:'Cinzel';src:url('/assets/fonts/Cinzel.woff2') format('woff2');
  font-weight:400 900;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/assets/fonts/Fraunces.woff2') format('woff2');
  font-weight:300 700;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/Inter.woff2') format('woff2');
  font-weight:300 700;font-display:swap}

:root{
  /* DREI ROLLEN, NACH AUFGABE BENANNT.
     Ueberschriften sind CINZEL — sie tragen die Marke, und die App macht es
     genauso (Cinzel fuer Titel, Inter fuer alles andere). Wer von der Website
     in die App wechselt, soll dieselbe Schrift wiedererkennen.
     FRAUNCES bleibt und hat eine einzige Aufgabe: das GESPROCHENE WORT —
     Verse, Zitate, Gebete, die Sinnsprueche der beiden Hunde. Sie ist die
     waermere Schrift, und genau deshalb gehoert sie dorthin und nirgends
     sonst. Eine Ueberschrift in Fraunces nimmt dem Vers darunter das
     Besondere.
     Die Vers-REFERENZ ist keine Rede, sondern eine Angabe: Cinzel, gesperrt,
     zwischen den zwei Sternen — dieselbe Form wie in der App. */
  --heading:'Cinzel',Georgia,serif;
  --quote:'Fraunces','Playfair Display',Georgia,serif;
  --caps:'Cinzel',Georgia,serif;
  /* CJK kommt vom Geraet — eine chinesische Schrift waere megabyteschwer */
  --body:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',
         'Hiragino Sans GB','Segoe UI',Roboto,sans-serif;
  --shadow-soft:0 4px 20px rgba(58,46,74,.08);
  --shadow-text:0 1px 3px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.2);
  --nav-h:104px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
/* DER GRUND IST DER HIMMEL DER APP, nicht eine flache Flaeche.
   Der Verlauf steht in palette.css und kommt aus site.config — die Werte
   sind dieselben fuenf wie in src/components/CelestialBackground der App.
   background-attachment:fixed: der Himmel bleibt stehen, waehrend der Inhalt
   darueber laeuft. Ohne das wandert er mit und der Eindruck von Tiefe faellt
   weg. */
body{margin:0;font-family:var(--body);font-weight:400;color:var(--ink);font-size:17px;
  line-height:1.7;background:var(--sky);background-attachment:fixed;
  min-height:100vh;overflow-x:hidden}

/* ── DIE PERLMUTT-FORMEN ────────────────────────────────────────────────
   Vier weiche Formen, die langsam ihre Gestalt aendern. Der Trick ist
   border-radius in Prozent: acht Werte, die sich verschieben — daraus wird
   eine organische Form, die nie eine Ellipse ist. Starker Blur und
   mix-blend-mode:screen lassen sie sich mischen wie Farbe im Wasser.
   Sie liegen FEST im Fenster (position:fixed) und ziehen nicht mit dem
   Scrollen mit; der Inhalt gleitet darueber hinweg. */
.liquid{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.blob{position:absolute;filter:blur(56px);mix-blend-mode:screen;opacity:.85}
@keyframes morph{
  0%,100%{border-radius:62% 38% 44% 56% / 48% 58% 42% 52%;transform:translate(0,0) rotate(0deg)}
  33%    {border-radius:38% 62% 58% 42% / 62% 38% 58% 42%;transform:translate(3%,-4%) rotate(6deg)}
  66%    {border-radius:52% 48% 36% 64% / 40% 56% 44% 60%;transform:translate(-3%,3%) rotate(-5deg)}
}
.blob-1{left:-14%;top:-16%;width:66vw;height:66vw;background:var(--liquid-1);
  animation:morph 34s ease-in-out infinite}
.blob-2{right:-18%;top:6%;width:60vw;height:60vw;background:var(--liquid-2);
  animation:morph 44s ease-in-out infinite reverse}
.blob-3{left:6%;bottom:-24%;width:72vw;height:72vw;background:var(--liquid-3);
  animation:morph 52s ease-in-out infinite}
.blob-4{right:4%;bottom:-10%;width:48vw;height:48vw;background:var(--liquid-4);
  animation:morph 38s ease-in-out infinite reverse}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}

/* ── DIE STERNE ── derselbe 4-Punkt-Pfad wie in der App (GlitterStar) ── */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0}
.stars svg{position:absolute;overflow:visible}
@keyframes twinkle{0%,100%{opacity:.28;transform:scale(.85)}50%{opacity:1;transform:scale(1.16)}}
.tw{animation:twinkle 4.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.tw{animation:none;opacity:.65}}

/* ── DIE SCHWEBENDE BLASE ───────────────────────────────────────────────
   Daisy und Fenny in einer Seifenblase, die eine ruhige Runde ueber die
   Seite zieht. z-index 0: sie laeuft HINTER dem Milchglas durch, und wenn
   sie unter einer Karte vorbeikommt, sieht man die beiden verschwommen
   hindurch. pointer-events:none, damit sie nie einen Klick abfaengt. */
.orb{position:fixed;z-index:0;pointer-events:none;
  width:clamp(112px,13vw,168px);height:clamp(112px,13vw,168px);border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 18%,transparent 42%),
    radial-gradient(circle at 70% 74%,var(--accent-25) 0%,transparent 52%),
    linear-gradient(150deg,rgba(255,255,255,.6),var(--accent-15) 48%,var(--accent-20));
  box-shadow:inset 0 -14px 30px var(--accent-20),inset 0 10px 22px rgba(255,255,255,.7),
    0 18px 44px rgba(95,88,120,.24);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:drift 82s ease-in-out infinite, bob 7s ease-in-out infinite}
/* Die Runde bleibt UNTER der Menuezeile (die ist rund 104 px hoch und liegt
   ueber allem): eine Blase, die dahinter verschwindet, sieht aus wie ein
   Fehler und nicht wie ein Einfall. Deshalb nirgends hoeher als 22 %. */
@keyframes drift{
  0%{left:6%;top:26%;transform:rotate(0deg)}      18%{left:74%;top:22%;transform:rotate(7deg)}
  36%{left:82%;top:56%;transform:rotate(-5deg)}   54%{left:58%;top:78%;transform:rotate(6deg)}
  72%{left:12%;top:66%;transform:rotate(-6deg)}   86%{left:4%;top:40%;transform:rotate(4deg)}
  100%{left:6%;top:26%;transform:rotate(0deg)}
}
@keyframes bob{0%,100%{margin-top:0}50%{margin-top:-14px}}
@media (prefers-reduced-motion:reduce){.orb{animation:none;left:78%;top:26%}}
/* AUF DEM TELEFON WANDERT SIE AUCH, AUF EINER EIGENEN RUNDE (15.09.2026).
   Vormittags stand sie dort fest unten rechts, und Elena fehlte die Bewegung.
   Gemessen: Die Schrift liegt IMMER ueber ihr (main hat z-index 1, die Blase 0),
   sie verdeckt also nie ein Wort. Die Runde fuehrt trotzdem vor allem an den
   Raendern und durch die untere Haelfte, damit sie selten hinter einer
   Ueberschrift steht, und sie ist kleiner als auf dem Laptop. */
@keyframes drift-mobil{
  0%{left:3%;top:62%;transform:rotate(0deg)}      20%{left:74%;top:78%;transform:rotate(6deg)}
  40%{left:78%;top:44%;transform:rotate(-5deg)}   60%{left:46%;top:86%;transform:rotate(5deg)}
  80%{left:4%;top:38%;transform:rotate(-4deg)}    100%{left:3%;top:62%;transform:rotate(0deg)}
}
@media (max-width:760px){
  .orb{width:76px;height:76px;animation:drift-mobil 70s ease-in-out infinite, bob 7s ease-in-out infinite}
  main{position:relative;z-index:1}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .orb{animation:none;left:auto;right:12px;top:auto;bottom:18px}
}
.orb-inner{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;gap:1%;padding:0 9%}
/* NICHT SPIEGELN: Daisy schaut nach rechts, Fenny nach links — nebeneinander
   sehen sie einander von selbst an, und ihr Anhaenger bleibt auf der
   richtigen Seite. */
.orb-inner img{height:58%;width:auto;max-width:46%;object-fit:contain;margin-bottom:15%;
  filter:drop-shadow(0 5px 10px rgba(95,88,120,.2))}
/* Das Glanzlicht liegt UEBER den Hunden, sonst waeren sie aufgeklebt statt drin. */
.orb-shine{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.9) 0%,rgba(255,255,255,.3) 16%,transparent 38%),
    radial-gradient(circle at 72% 78%,var(--accent-20) 0%,transparent 48%);
  box-shadow:inset 0 -16px 34px var(--accent-20),inset 0 12px 26px rgba(255,255,255,.55)}

/* Der Inhalt liegt ueber Himmel, Formen, Sternen und Blase. */
.whisper-nav,main,footer{position:relative;z-index:1}
img{max-width:100%;height:auto}

/* ── Raster ── wie im Mockup: 1200 breit, 24 Rand ── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section-narrow{max-width:780px;margin:0 auto}
.section{padding:clamp(56px,7.5vw,96px) 0;position:relative}
/* fuer Abschnitte mit wenig Inhalt: sonst steht viel Luft um einen Satz */
.section-tight{padding:clamp(32px,4vw,52px) 0}
.section-header{text-align:center;margin-bottom:clamp(30px,4.5vw,48px)}

/* ── Schrift ── */
h1,h2,h3,h4{font-family:var(--heading);font-weight:600;margin:0 0 .5em;letter-spacing:.01em}
h1,.h1{font-size:clamp(2.5rem,6vw,5rem);line-height:1.05}
h2,.h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.15}
h3{font-size:1.4rem;line-height:1.3}
h1 em,h2 em,.accent{font-style:italic;color:var(--accent)}
p{margin:0 0 1.15em}
.lede{font-size:1.1rem;line-height:1.75;color:var(--ink-soft)}
.eyebrow{font-family:var(--caps);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;font-weight:600}
.center{text-align:center}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--ink)}
.ornament{color:var(--accent);opacity:.75}
/* DAS KREUZ IM MENUE IST GEZEICHNET, NICHT GESCHRIEBEN (15.09.2026). Das Zeichen
   ✝ macht das iPhone zu einem lila Emoji-Kaestchen, auf dem Mac blieb es eine
   feine Linie; aufgefallen ist es erst auf Elenas Telefon. Ein SVG sieht auf
   jedem Geraet gleich aus. */
.ornament-kreuz{width:.62em;height:.86em;fill:currentColor;vertical-align:-.08em;margin:0 .28em}

/* ── Whisper-Bar ── */
.whisper-nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:18px 0 14px;
  background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--accent-15)}
.whisper-logo-wrap{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:10px}
.whisper-logo-line{flex:0 0 clamp(30px,8vw,80px);height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.whisper-logo{font-family:var(--caps);font-weight:600;font-size:14px;letter-spacing:.4em;
  color:var(--accent);text-decoration:none;white-space:nowrap}
.whisper-menu{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,32px);
  padding:8px 0;border-top:1px solid var(--accent-20);border-bottom:1px solid var(--accent-20);
  max-width:900px;margin:0 auto;flex-wrap:wrap}
.whisper-menu a{font-family:var(--caps);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;transition:color .2s;font-weight:600}
.whisper-menu a:hover,.whisper-menu a[aria-current="page"]{color:var(--accent)}
.whisper-lang{display:flex;gap:6px;margin-left:6px}
.whisper-lang a{font-size:10px;letter-spacing:.12em;opacity:.6}
.whisper-lang a[aria-current="true"]{opacity:1;color:var(--accent)}
.nav-open{display:none;background:none;border:0;color:var(--accent);font-size:11px;cursor:pointer;
  font-family:var(--caps);letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:8px 12px}
@media (max-width:760px){
  :root{--nav-h:90px}
  .nav-open{display:block;margin:2px auto 0}
  .whisper-menu{display:none;flex-direction:column;gap:2px;padding:12px 0 14px}
  .whisper-menu[data-open="true"]{display:flex}
  .whisper-menu a{font-size:12px;padding:7px 0}
  .whisper-lang{margin:8px 0 0}
}

/* ── Knoepfe ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--caps);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;padding:15px 34px;border-radius:4px;text-decoration:none;
  border:1px solid transparent;transition:transform .2s,background .2s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
/* Glastropfen statt Farbflaeche: innen ein Lichtrand oben, ein Schatten
   unten — dieselbe Machart wie die Blase und die Karten. */
.btn-solid{color:#fff;border-color:var(--accent);
  background:linear-gradient(155deg,var(--accent-light),var(--accent) 55%,var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 28px var(--accent-30)}
.btn-solid:hover{background:linear-gradient(155deg,var(--accent-light),var(--accent-light) 60%,var(--accent));color:#fff}
.btn-outline{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:#fff}
.btn-glass{color:var(--ink);border-color:rgba(255,255,255,.85);
  background:linear-gradient(155deg,rgba(255,255,255,.72),rgba(255,255,255,.36));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 24px rgba(95,88,120,.16)}
.btn-glass:hover{background:linear-gradient(155deg,rgba(255,255,255,.85),rgba(255,255,255,.5));color:var(--ink)}
.btn[aria-disabled="true"]{opacity:.6;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.center .btn-row,.hero-buttons{justify-content:center}

/* ── Himmelbilder ────────────────────────────────────────────
   --sky-tint faerbt das rosa Bild ein. Auf der China-Ausgabe steht
   --sky-blend auf `normal`, dort bleibt das Bild wie es ist. Sobald ein
   echtes lilanes Bild da ist, faellt die Einfaerbung weg und sonst nichts. */
.sky-bg{background-image:var(--sky-tint),url('/assets/img/sky-hero.jpg');
  background-size:cover;background-position:center;background-blend-mode:var(--sky-blend)}
.sky-bg-alt{background-image:var(--sky-tint),url('/assets/img/sky-app.jpg');
  background-size:cover;background-position:center;background-blend-mode:var(--sky-blend)}

/* ── Hero ── */
/* DER KOPFBEREICH OHNE FOTO. Er lag frueher auf einem Himmelbild und
   brauchte deshalb eine dunkle Schicht darueber und weisse Schrift. Der
   Himmel ist jetzt der Grund der ganzen Seite — ein Foto darauf waere ein
   zweiter Himmel im ersten, und die dunkle Schicht ein Loch darin.
   Damit faellt auch die weisse Schrift weg: es gilt wieder die Tinte der
   ganzen Website. */
.hero{min-height:min(100vh,860px);position:relative;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + 40px);padding-bottom:60px}
.hero-content{position:relative;z-index:2;text-align:center;width:100%}
.hero-content h1 em{color:var(--accent)}

/* Die Wortmarke traegt den Index. Cinzel, weit gesperrt, so gross wie
   der Bildschirm es zulaesst — sie soll das Erste sein, was man liest. */
/* PERLMUTT-SCHRIFT: der Verlauf wandert langsam durch die Buchstaben, wie
   Licht ueber eine Perle. Er laeuft von der Tinte ueber Gold in den Akzent
   und zurueck — die drei Farben der Marke in einer Bewegung. */
.hero-brand{font-family:var(--caps);font-weight:600;
  font-size:clamp(2.1rem,7.2vw,5.6rem);line-height:1.05;
  letter-spacing:clamp(.06em,1.1vw,.16em);margin:0 0 .22em;
  /* der gesperrte Satz schiebt die Zeile nach rechts, das holen wir zurueck */
  text-indent:clamp(.06em,1.1vw,.16em);
  background:linear-gradient(100deg,var(--ink) 0%,#8F6F21 22%,#C49A3C 34%,#E7CE8A 42%,
    var(--accent) 58%,var(--accent-light) 70%,var(--ink) 88%,var(--ink) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 16s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.hero-brand{animation:none}}
/* Ein Wort der Wortmarke bricht nie in sich um. Das Herz ist ein SVG mitten im
   Wort, und davor wie dahinter durfte der Browser trennen: auf dem Telefon stand
   „THE BIBLE D♥" und darunter allein „GS" (15.09.2026). */
.hero-brand .wort{white-space:nowrap}

/* DAS KREUZ-HERZ ALS "O". Die Raender ersetzen die Fleischkante, die ein
   echter Buchstabe eingebaut hat und ein SVG nicht — ohne sie klebt das Herz
   an seinen Nachbarn, und bei gesperrter Schrift faellt das doppelt auf.
   In em, damit sie mit der Schriftgroesse mitwachsen. */
/* DIE ABSTÄNDE — und der Grund, warum sie NICHT symmetrisch sein duerfen.
   LETTER-SPACING WIRD HINTER EINEM INLINE-BLOCK NICHT GESETZT. Zwischen zwei
   Buchstaben kommt die Sperrung dazu, hinter dem SVG faellt sie aus. Mit
   gleichen Raendern links und rechts entsteht dadurch genau eine Sperrung
   Unterschied — links zu viel, rechts zu wenig, und man sieht es sofort.
   Gemessen an der gerenderten Seite: 31 px links, 19 px rechts.
   Der rechte Rand holt die fehlende Sperrung deshalb selbst nach. Er rechnet
   mit DERSELBEN clamp()-Formel wie die Wortmarke — die Sperrung haengt an der
   Fensterbreite, ein fester Wert waere nur bei einer Breite richtig.
   Die letzten .004em gleichen die Fleischkanten aus: Cinzels D hat rechts
   .0323em, das G links .0366em (mit canvas gemessen, nicht geschaetzt). */
.logo-o{display:inline-block;width:.72em;height:.72em;vertical-align:-.05em;
  margin-left:.10em;
  margin-right:calc(.10em + clamp(.06em,1.1vw,.16em) - .004em);
  filter:drop-shadow(0 2px 5px rgba(143,111,33,.35))}
.hero-tagline{font-family:var(--quote);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,2.6vw,1.85rem);color:var(--accent);
  margin:0 0 1.1em;letter-spacing:.01em}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--caps);
  font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep,#8F6F21);
  font-weight:600;margin-bottom:22px}
.hero-eyebrow .ornament{color:var(--accent-soft);opacity:1}
/* FLIESSTEXT IST INTER, AUCH HIER. Die Zeile unter der Ueberschrift ist ein
   beschreibender Satz und kein Zitat — kursives Fraunces gab ihr eine
   Feierlichkeit, die dem Inhalt nicht entspricht, und stellte drei Schriften
   uebereinander (Cinzel, Fraunces, Inter), bevor die Seite ueberhaupt anfaengt.
   Fraunces bleibt, wo sie hingehoert: Verse, Zitate, Gebete. */
.hero-subtitle{font-size:clamp(1.02rem,1.9vw,1.22rem);max-width:46ch;margin:0 auto;
  line-height:1.65;color:var(--ink-soft);font-weight:400}

/* DER DREIKLANG. Gesperrte Versalien: die drei Worte sind kein Satz, sondern
   ein Dreiklang — und stehen deshalb wie eine Inschrift, nicht wie
   Fliesstext. Die Trenner sind Mittelpunkte, keine Bindestriche: ein
   Bindestrich verbindet Wortteile, ein Mittelpunkt trennt Gleichrangiges. */
.wayline{font-family:var(--caps);font-weight:600;text-transform:uppercase;
  font-size:clamp(.82rem,1.5vw,1rem);letter-spacing:.28em;color:var(--ink);
  margin:.85rem 0 0}
.wayline i{color:var(--accent);font-style:normal;margin:0 .15em}
.hero-verse-footer{position:absolute;bottom:26px;left:0;right:0;text-align:center;z-index:2;
  font-family:var(--quote);font-style:italic;font-size:.95rem;color:var(--ink-soft);
  opacity:.7;padding:0 1.5rem}
.sunrays{position:absolute;inset:0;pointer-events:none;
  background:conic-gradient(from 200deg at 52% 8%,transparent 0deg,rgba(255,252,240,.2) 14deg,
    transparent 28deg,rgba(255,252,240,.12) 42deg,transparent 60deg)}
/* EIN TITEL, EINE UNTERZEILE. Nur die Seiten, die eine Unterzeile mitbringen
   (`has-sub`), werden kleiner gesetzt — die Shop-Seite lebt von ihrem grossen
   Satz und bleibt, wie sie ist. */
.hero-sub h1.has-sub{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.12}
.hero-sub h1.has-sub em{display:block;font-size:.52em;margin-top:.34em;line-height:1.2}

/* kuerzerer Hero fuer Unterseiten */
.hero-sub{min-height:auto;padding-top:calc(var(--nav-h) + 28px);
  padding-bottom:clamp(48px,6vw,78px)}
.hero-sub::before{background:linear-gradient(180deg,rgba(31,24,40,.32),rgba(31,24,40,.5))}

/* ── Milchglas ── */
/* EINE KURZE NACHRICHT BRAUCHT EINE KURZE KARTE. „Bald verfuegbar" in der
   vollen Glasflaeche sah aus wie ein leerer Raum, in dem etwas fehlt — und
   genau das hatte Elena am 30.08. schon einmal angemerkt („Container zu
   hoch, wirkt leer"). Die Karte ist deshalb so gross wie ihr Inhalt. */
.glass.note-card{max-width:460px;margin:0 auto;
  padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,34px);border-radius:20px}
.glass{position:relative;
  background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.3) 50%,rgba(255,255,255,.46));
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  padding:clamp(32px,4.4vw,50px) clamp(26px,3.8vw,45px);border-radius:30px;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 26px 60px rgba(95,88,120,.22),inset 0 1px 0 rgba(255,255,255,.95)}
.glass::before{content:'';position:absolute;left:8%;right:8%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,1),transparent)}

/* ── Flaechen ── */
/* `.bg-white` GAB ES HIER EINMAL, und es war die letzte deckende Flaeche der
   ganzen Website: ein weisser Balken quer durch den Himmel, auf dem die
   Glasbaender der App-Seite standen. Glas auf Weiss ist kein Glas mehr,
   sondern ein heller Kasten — man sah durch nichts mehr hindurch. Der eine
   Aufruf steht jetzt auf `.bg-fade`, die Regel ist ersatzlos weg.
   `scripts/verify-web` schlaegt an, wenn wieder eine deckende Flaeche
   dazukommt. */
/* DIE ABSCHNITTE SIND DURCHSICHTIG. Frueher trug jeder seine eigene
   Farbflaeche und schnitt damit ein Loch in den Himmel. Jetzt laeuft der
   Himmel durch, und nur die einzelnen Karten setzen sich als Glas darauf.
   Die drei Namen bleiben, damit die Vorlagen unveraendert weiterlaufen —
   sie unterscheiden jetzt nur noch den Hauch, nicht mehr die Farbe. */
.bg-warm{background:transparent}
.bg-fade{background:linear-gradient(180deg,rgba(255,255,255,.22),transparent)}
.bg-fade-down{background:linear-gradient(180deg,transparent,rgba(255,255,255,.22))}
/* DIE TIEFERE FLAECHE — hell genug fuer eine gezeichnete Linie.
   Sie war ein Verlauf von fast Schwarz (#2A2238 → #1F1828) und die EINZIGE
   dunkle Flaeche der ganzen Website. Zwei Dinge stimmten daran nicht: Fenny
   ist ein dunkelgrauer Hund mit schwarzen Konturen, die darauf verschwanden,
   und eine einzelne schwarze Bahn zwischen lauter hellen Abschnitten liest
   sich wie ein Fremdkoerper. Der Gedanke — Daisy bringt Licht, Fenny steht in
   der Tiefe — bleibt und kommt jetzt aus einem satteren Lavendel derselben
   Familie. Die Schrift bleibt damit ueberall dieselbe dunkle Tinte; alle
   frueheren Sonderregeln fuer weisse Schrift auf Schwarz sind entfallen. */
/* Fennys Abschnitt: eine SPUR tiefer als der Rest, aber durchscheinend —
   der Himmel bleibt darunter sichtbar. */
.bg-deep{background:linear-gradient(135deg,var(--accent-15) 0%,var(--accent-08) 100%)}

/* ── DER ECHTE SCREENSHOT ─────────────────────────────────────────────────
   Kein Geraeterahmen um das Bild. Ein gezeichnetes Telefon um einen echten
   Screenshot ist doppelt gemoppelt — der Screenshot IST schon ein Telefon.
   Was bleibt, ist die Rundung des Bildschirms, ein feiner Rand und derselbe
   weiche Schatten wie unter jeder Karte.
   `aspect-ratio` steht fest, damit die Seite beim Laden nicht springt. */
.shot{border-radius:22px;overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 18px 40px rgba(95,88,120,.24)}
/* DAS FORMAT IST DER BILDSCHIRM OHNE STATUSLEISTE. Uhrzeit, WLAN und Akku
   sind aus jedem Bild herausgeschnitten (170 px oben) — sie gehoeren dem
   Telefon, nicht der App, und auf einer Seite ueber die App lenken sie nur ab.
   Der Schnitt beginnt genau ueber der Sternenlinie, mit der jeder Bildschirm
   der App anfaengt. 1206 x 2452 = 841 x 1830. */
.shot img{display:block;width:100%;height:auto;aspect-ratio:1206/2452;object-fit:cover}

/* IN DEN DREI KARTEN NUR DER OBERE AUSSCHNITT. Ein Telefonbildschirm ist
   zweieinviertel Mal so hoch wie breit; in einer 330 px breiten Karte sind
   das 720 px Bild — der Text darunter stand ausserhalb des Bildschirms, und
   die Karte war nur noch Bild. Angeschnitten wird UNTEN (`object-position:top`):
   oben stehen Titel und erste Zeile, also das, was die Karte zeigen soll.
   Darunter laeuft das Bild sanft aus, damit der Schnitt als Absicht lesbar
   ist und nicht als Fehler. */
/* Etwas hoeher als zuerst gedacht: auf dem Startbildschirm MUSS die
   Evolutionsstufe zu sehen sein („noch 495 ✦ bis Jung" samt Balken und
   Pfoetchen) — sie ist der Kern dessen, was die Karte daneben erzaehlt.
   Gemessen, nicht geraten: bei 1/1.16 endete das Bild eine Zeile darueber. */
.promise-card .shot{aspect-ratio:1/1.28;position:relative}
.promise-card .shot img{height:100%;aspect-ratio:auto;object-position:top}
.promise-card .shot::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.55))}

/* IM TELEFONRAHMEN traegt das Bild keinen eigenen Rahmen: der Rahmen IST das
   gezeichnete Telefon. Nur die Rundung des Bildschirms bleibt. */
.shot.shot-in-phone{border:0;box-shadow:none;border-radius:28px;height:100%}
.shot.shot-in-phone img{height:100%;aspect-ratio:auto;object-position:top}

/* Zwei Bilder in einem Band stehen untereinander, mit Luft dazwischen —
   und in EINER Huelle, sonst rutscht das zweite in die naechste Rasterzeile. */
.tab-shots .shot + .shot{margin-top:clamp(14px,1.8vw,22px)}

/* Der Reiter: der ganze Inhalt links, das Bild rechts daneben. Das Bild ist
   schmal gehalten — es begleitet das Band, es uebernimmt es nicht. */
.tab-split{display:grid;grid-template-columns:1fr minmax(180px,232px);
  gap:clamp(22px,3vw,44px);align-items:start}
.tab-split > div > p{color:var(--ink-soft);line-height:1.75;margin:0}
@media (max-width:760px){
  .tab-split{grid-template-columns:1fr}
  .tab-shots{max-width:232px;margin:8px auto 0}
}

/* ── DAS VERSPRECHEN: drei Gedanken, drei Flaechen ────────────────────────
   Die Karten sind gleich breit und stehen oben buendig (`align-items:start`),
   damit die kuerzeste nicht auf die Hoehe der laengsten aufgeblasen wird —
   derselbe Fehler, den das Kachelraster schon einmal hatte. Unter 900 px
   fallen sie untereinander; drei schmale Saeulen mit je vier Woertern pro
   Zeile waeren schlechter zu lesen als ein Absatz. */
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;
  gap:clamp(20px,2.6vw,32px);max-width:1080px;margin:0 auto}
@media (max-width:900px){.promise-grid{grid-template-columns:1fr;max-width:640px}}
.glass.promise-card{padding:clamp(24px,2.8vw,34px) clamp(22px,2.6vw,30px);border-radius:22px}
.promise-card .shot{margin:0 0 clamp(18px,2.2vw,24px)}
.promise-card h3{margin:0 0 10px}
.promise-card p{margin:0;color:var(--ink-soft);line-height:1.75}

/* ── Die Karte des Mockups: Balken links ── */
/* MILCHGLAS statt weisser Kasten. Der Lichtstreif oben (::before) ist das,
   was Glas zu Glas macht — ohne ihn ist es nur eine helle Flaeche. */
.feature-card{border-radius:18px;
  padding:clamp(26px,3vw,36px) clamp(22px,2.6vw,30px);
  border-left:4px solid var(--accent);position:relative;text-align:left;
  background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.32));
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 14px 34px rgba(95,88,120,.16),inset 0 1px 0 rgba(255,255,255,.9)}
.feature-card::before{content:'';position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.feature-num{font-family:var(--caps);font-size:.75rem;letter-spacing:.2em;color:var(--accent);
  margin-bottom:12px;display:block;text-transform:uppercase}
.feature-card h3{font-family:var(--heading);font-size:1.4rem;margin-bottom:16px;line-height:1.3}
.feature-card p{color:var(--ink-soft);line-height:1.7;font-size:.95rem;margin:0}
.feature-card ul{margin:.7em 0 0;padding-left:1.15rem;color:var(--ink-soft);font-size:.93rem}
.feature-card li{margin-bottom:.35em}
/* align-items:start — ohne das wird JEDE Kachel einer Reihe so hoch wie die
   laengste, und unter dem kurzen Text steht eine leere Flaeche. Genau das
   ist gemeint mit "der Container ist zu hoch, das wirkt leer". */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(20px,2.6vw,32px);max-width:1200px;margin:0 auto;align-items:start}
.features-grid.narrow{grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr))}

/* ── Ein Reiter, ein Band ────────────────────────────────────────────────
   Fuenf Baender ueber die volle Breite statt fuenf gleich grosser Kacheln:
   die Reiter der App sind keine Geschwister einer Liste, sondern fuenf
   getrennte Raeume. Was in einem Reiter steckt (Bibel-Liste, die zwoelf
   Werkzeuge), steht IN seinem Band und nicht in einem eigenen Abschnitt
   weiter unten. */
.tab-block{max-width:1080px;margin:0 auto clamp(22px,2.8vw,34px);
  padding:clamp(28px,3.4vw,46px) clamp(24px,3vw,44px);
  border-radius:26px;position:relative;
  background:linear-gradient(150deg,rgba(255,255,255,.58),rgba(255,255,255,.28));
  backdrop-filter:blur(20px) saturate(1.45);-webkit-backdrop-filter:blur(20px) saturate(1.45);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 22px 50px rgba(95,88,120,.18),inset 0 1px 0 rgba(255,255,255,.92)}
.tab-block::before{content:'';position:absolute;left:10%;right:10%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.tab-block:last-child{margin-bottom:0}
.tab-block .feature-num{font-family:var(--caps);font-size:.8rem;letter-spacing:.22em;
  color:var(--accent);text-transform:uppercase;display:block;margin-bottom:10px}
.tab-block h3{font-family:var(--heading);font-size:clamp(1.45rem,2.5vw,2rem);
  line-height:1.25;margin:0 0 14px}
.tab-block > p{color:var(--ink-soft);line-height:1.75;margin:0;max-width:74ch}
/* Zwei Spalten fuer lange Absaetze — gesetzt von tabBlock(), nicht geraten.
   `column-width` statt `column-count`: unterhalb von ~740px Bandbreite faellt
   der Satz von selbst auf eine Spalte zurueck, ohne eine zweite Regel. */
.tab-block > p.two-col{max-width:none;columns:2;column-width:320px;
  column-gap:clamp(28px,3.4vw,54px)}
@media (max-width:760px){.tab-block > p.two-col{columns:1}}
/* Die Kacheln im Band stehen auf hellem Grund, damit sie sich vom Band abheben */
/* Nur drei Seiten bekommen die feine Linie — der breite Akzentbalken links
   ist das Erkennungszeichen jeder Karte auf dieser Website und bleibt. Ein
   `border`-Kurzschreibweise haette ihn hier still ueberschrieben. */
.tab-block .feature-card{background:linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,.28));
  border-top:1px solid var(--accent-15);border-right:1px solid var(--accent-15);
  border-bottom:1px solid var(--accent-15);
  border-radius:12px;padding:clamp(20px,2.2vw,26px)}
/* ── Kontakt: zwei Adressen ──────────────────────────────────────────────
   Zwei ruhige Flaechen statt drei gleicher Kaestchen. Das Herz-Feld traegt
   den Akzent, damit auf den ersten Blick klar ist, welche der beiden Adressen
   die dieser Marke ist. */
/* MILCHGLAS, KEIN WEISSER KASTEN. Die zweite Karte stand als deckendes Weiss
   neben der ersten, die den Akzent traegt — zwei verschiedene Materialien in
   zwei Kaesten untereinander. Jetzt sind beide dieselbe Flaeche, und nur die
   Faerbung unterscheidet sie. Der Lichtstreif oben (::before) ist das, was
   Glas zu Glas macht — dieselbe Regel wie bei .glass und .tab-block. */
.contact-card{position:relative;padding:clamp(28px,3.4vw,44px);border-radius:20px;
  background:linear-gradient(150deg,rgba(255,255,255,.6),rgba(255,255,255,.3) 52%,rgba(255,255,255,.44));
  backdrop-filter:blur(20px) saturate(1.45);-webkit-backdrop-filter:blur(20px) saturate(1.45);
  border:1px solid rgba(255,255,255,.7);margin-bottom:clamp(18px,2.4vw,28px);
  box-shadow:0 20px 46px rgba(95,88,120,.18),inset 0 1px 0 rgba(255,255,255,.92)}
.contact-card::before{content:'';position:absolute;left:10%;right:10%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.contact-card h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 12px;line-height:1.25}
.contact-card > p{margin:0;color:var(--ink-soft);line-height:1.75}
/* Das Herz-Feld traegt den Akzent IM Glas, nicht statt des Glases. */
.contact-heart{background:linear-gradient(150deg,rgba(255,255,255,.52),var(--accent-08) 55%,rgba(255,255,255,.4));
  border-color:var(--accent-30)}
.contact-mail{display:inline-block;margin:20px 0 4px;font-family:var(--caps);
  font-size:clamp(.95rem,1.7vw,1.15rem);letter-spacing:.06em;color:var(--accent);
  text-decoration:none;border-bottom:2px solid var(--accent-30);padding-bottom:4px}
.contact-mail:hover{border-bottom-color:var(--accent)}
/* Der Hinweis braucht eine eigene Zeile Luft: ohne sie stand er direkt unter
   der Unterstreichung der Adresse und sah aus, als gehoere er zum Link. */
.contact-note{margin:22px 0 0;font-size:.88rem;line-height:1.7;color:var(--ink-soft);
  opacity:.8;padding-top:16px;border-top:1px solid var(--accent-15)}

/* ── Ein Punkt, eine Zeile ───────────────────────────────────────────────
   Begriff links, Text rechts, feine Linie dazwischen. Keine Kaestchen: die
   Karte gehoert dorthin, wo etwas WIRKLICH eine eigene Flaeche braucht, und
   nicht zwanzig Mal auf eine Seite. Auf schmalen Geraeten stapelt sich die
   Zeile — zwei Spalten waeren dort unlesbar. */
.point-list{margin-top:18px;border-top:1px solid var(--accent-15)}
.point{display:grid;grid-template-columns:minmax(160px,1fr) 2.5fr;
  gap:clamp(10px,2.2vw,32px);padding:clamp(15px,1.7vw,21px) 0;
  border-bottom:1px solid var(--accent-15)}
.point-term{font-family:var(--heading);font-weight:600;font-size:1.06rem;line-height:1.4;margin:0;color:var(--ink)}
.point-text{margin:0;color:var(--ink-soft);line-height:1.72;font-size:.97rem}
.point.is-soon .point-text{opacity:.85}
/* Ausserhalb eines Bandes darf die Liste die volle Breite des Rasters nutzen */
.point-list-wide{max-width:1080px;margin-left:auto;margin-right:auto}
@media (max-width:700px){
  .point{grid-template-columns:1fr;gap:5px}
  .point-term{font-size:1.02rem}
}
/* NICHT `.tab-block > p.group-label`: Seit der Seelenwohl-Reiter Screenshots
   hat, steckt die Liste eine Ebene tiefer (.tab-split > div), und die Regel
   griff nicht mehr. „Genau jetzt" und „Jeden Tag" standen wie Fliesstext da
   (Elena, 15.09.2026). */
.tab-block p.group-label{font-family:var(--caps);font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);max-width:none;
  margin:clamp(28px,3.2vw,40px) 0 14px}

/* Die Bibel-Liste: Schlagworte, keine Kacheln — fuer eine Kachel fehlt ihnen
   der Satz, und eine Kachel mit nur einer Ueberschrift sieht aus wie ein Fehler. */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chip{font-size:.88rem;line-height:1.35;padding:8px 15px;border-radius:999px;
  background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.3));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);color:var(--ink-soft)}

/* Was es in Version 1 noch nicht gibt, sagt es selbst — wie in der App. */
.soon-badge{display:inline-block;margin-left:10px;vertical-align:middle;
  font-family:var(--caps);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--accent-15);color:var(--accent);
  white-space:nowrap}
.feature-card.is-soon{opacity:.86}

/* ── Schritte auf dunkler Flaeche ── */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(20px,2.6vw,32px);max-width:1100px;margin:0 auto}
.step-card{text-align:center;padding:clamp(30px,3.4vw,40px) 30px;border-radius:12px;
  background:var(--accent-soft-05);border:1px solid var(--accent-soft-15)}
.step-num{font-family:var(--caps);font-size:4rem;color:var(--accent-soft);margin-bottom:14px;
  font-weight:600;line-height:1}
.step-card h3{font-family:var(--heading);font-size:1.4rem;color:var(--accent-soft);margin-bottom:14px}

/* ── Vers-Kasten und Merksatz ── */
.verse-block{background:var(--accent-08);border-left:3px solid var(--accent);
  padding:24px 28px;margin:30px 0;border-radius:0 8px 8px 0}
.verse-text{font-family:var(--quote);font-style:italic;font-size:1.15rem;line-height:1.5;margin-bottom:12px}
/* ✦ Vers ✦ — die Sterne setzt die Vorlage (verseRef in build.mjs), nie der
   Text. Alle Spielarten hier, damit eine Referenz ueberall gleich aussieht. */
/* GROSSBUCHSTABEN, IMMER. Eine Vers-Referenz ist eine Angabe, kein Satz —
   gesperrtes Cinzel in Versalien, zwischen den zwei Sternen. Das ist ihre Form
   auf der ganzen Website, egal wie gross sie gerade steht: JOHANNES 14:6.
   text-transform statt getippter Grossbuchstaben, damit in content/ die
   normale Schreibweise stehen bleibt — sonst muesste jemand daran denken, und
   im Chinesischen gaebe es nichts zu tippen (dort bleibt es wirkungslos, und
   das ist richtig so). */
.verse-ref{font-family:var(--caps);font-size:.85rem;letter-spacing:.2em;color:var(--accent);
  margin:0;display:inline-block;text-transform:uppercase;font-weight:600}
.verse-ref-small{font-family:var(--caps);font-size:.72rem;letter-spacing:.18em;
  color:var(--accent);display:block;margin:10px 0 0;text-transform:uppercase;font-weight:600}
/* Auf dem Himmelbild braucht die Stelle mehr Halt: sie stand als duenne graue
   Zeile in einem unruhigen Bild und war kaum zu lesen. Weiss mit Schatten,
   die Sterne im Gold der Marke. */
/* Die Stelle im Kopfbereich stand weiss mit Schatten — das galt fuer das
   Himmelfoto, das dort frueher lag. Auf dem hellen Grund war sie unlesbar.
   Jetzt dasselbe Gold wie ueberall, Text und Sterne im selben Wert. */
.verse-ref-inline{font-family:var(--caps);font-size:.82rem;letter-spacing:.2em;
  color:var(--accent);display:inline-block;margin-top:16px;
  text-transform:uppercase;font-weight:600}
.verse-ref .ornament,.verse-ref-small .ornament,.verse-ref-inline .ornament{opacity:.9}
.takeaway{font-family:var(--quote);font-style:italic;font-size:1.2rem;margin-top:30px;
  padding:24px 0 0;border-top:1px solid var(--accent-30);line-height:1.5}
.story-quote{font-family:var(--quote);font-style:italic;font-size:1.35rem;line-height:1.5;
  text-align:center;margin:clamp(38px,6vw,60px) 0;padding:clamp(28px,4vw,40px);
  background:var(--accent-08);border-radius:12px;
  border-top:2px solid var(--accent);border-bottom:2px solid var(--accent)}

/* ── Durchgestrichene Woerter ── */
.problem-words{display:flex;justify-content:center;gap:clamp(14px,2.4vw,24px);flex-wrap:wrap;margin:30px 0}
.problem-word{font-family:var(--quote);font-style:italic;font-size:clamp(1.5rem,3.6vw,2.5rem);
  color:var(--ink-soft);opacity:.7;text-decoration:line-through;
  text-decoration-color:var(--accent);text-decoration-thickness:2px}

/* ── Charaktere auf der Startseite ── */
/* ══ DIE SAMMELKARTE ══════════════════════════════════════════════════════
   Daisy und Fenny als Karten mit Perlmutt-Rand, Lichtschein hinter der Figur
   und Folienschimmer beim Darueberfahren. Pokemon trifft Sailor Moon.
   perspective auf dem Raster, damit sich die Karten wirklich NEIGEN koennen
   und nicht nur kippen aussehen. */
.characters-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);
  max-width:1000px;margin:clamp(42px,6vw,80px) auto 0;perspective:1400px}
@media (max-width:820px){.characters-grid{grid-template-columns:1fr;gap:44px}}

.character-card{position:relative;text-align:center;transform-style:preserve-3d;
  border-radius:30px;padding:26px 24px 30px;
  background:linear-gradient(155deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.5) 100%);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 28px 62px rgba(95,88,120,.26),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .5s}
.character-card:hover{box-shadow:0 38px 82px rgba(95,88,120,.34)}
/* Der Rand schillert von Gold ueber den Akzent nach Rosé — Perlmutt, nicht
   Metall. Als Maske gelegt, weil ein Verlauf kein border-color sein kann. */
.character-card::before{content:'';position:absolute;inset:0;border-radius:30px;padding:1.5px;
  pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.95),#E7CE8A 18%,#C49A3C 32%,
    var(--accent) 55%,#E4B8CE 72%,rgba(255,255,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
/* Der Schein hinter der Figur — sie steht damit IN der Karte statt darauf. */
.card-glow{position:absolute;left:50%;top:8%;width:82%;height:52%;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,251,238,.75) 0%,rgba(231,206,138,.32) 42%,transparent 72%)}

/* DIE FOLIE. Kippt man eine Sammelkarte, wandert ein Schimmer darueber —
   genau das, in Perlmutt. Der Schimmer folgt dem Zeiger (siehe das Skript im
   Seitenfuss); ohne Zeiger passiert nichts, und die Karte bleibt ruhig. */
.holo{position:absolute;inset:0;border-radius:30px;pointer-events:none;opacity:0;
  transition:opacity .4s;mix-blend-mode:soft-light;background-size:260% 260%;
  background:linear-gradient(105deg,transparent 20%,rgba(255,251,238,.9) 34%,
    rgba(231,206,138,.85) 41%,rgba(228,184,206,.8) 48%,rgba(131,151,196,.8) 55%,
    rgba(198,221,218,.75) 62%,transparent 76%)}
.character-card:hover .holo{opacity:.92}
.holo::after{content:'';position:absolute;inset:0;border-radius:30px;opacity:.5;
  background:repeating-linear-gradient(102deg,rgba(255,255,255,.14) 0 2px,transparent 2px 5px)}
.character-card .imgbox,.character-card > :not(.holo):not(.card-glow){position:relative}

/* ── DIE SAMMELKARTE, GROSS ───────────────────────────────────────────────
   Auf der Startseite stehen Daisy und Fenny als Sammelkarten; auf ihrer
   eigenen Seite standen dieselben zwei Figuren frei auf dem Himmel. Das war
   die Stelle, an der die Marke ihr eigenes Versprechen zurueckgenommen hat —
   wer die Karte sehen will, klickt auf „mehr ueber Daisy" und bekommt ein
   Bild. Jetzt traegt das Portraet dieselbe Karte: Perlmutt-Rand, Schein
   hinter der Figur, Folie am Zeiger.
   Es ist DIESELBE Klasse `.character-card` — nicht eine zweite Fassung
   davon. Das Skript im Seitenfuss neigt jede Karte, die so heisst; eine
   eigene Klasse haette hier still nichts getan. `.portrait-card` regelt
   ausschliesslich, was am grossen Bild anders ist. */
.portrait-card{padding:clamp(18px,2.2vw,26px);max-width:460px;margin:0 auto}
.portrait-card .char-img-large{max-width:none;width:100%}
/* Der Schein sitzt am grossen Bild tiefer: die Figur steht hier ganzflaechig
   in der Karte, nicht als Bueste ueber einem Namen. */
.portrait-card .card-glow{top:16%;height:60%}

/* ── DER TRENNER ── zwei Goldlinien und das Kreuz-Herz dazwischen ── */
.divider{display:flex;align-items:center;justify-content:center;gap:16px;
  max-width:560px;margin:0 auto clamp(30px,4vw,48px)}
.divider span{flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-30),transparent)}
.heart-cross{flex:0 0 auto;width:24px;height:24px;display:block;
  filter:drop-shadow(0 1px 3px rgba(143,111,33,.4))}
/* Beide Hunde stehen auf derselben Linie — sonst rutscht der groessere Name
   nach unten und die zwei Karten sehen aus wie ein Versehen. */
.imgbox{height:clamp(230px,26vw,340px);display:flex;align-items:flex-end;justify-content:center}
/* KEIN SCHLAGSCHATTEN. Ein drop-shadow folgt der Silhouette Pixel fuer Pixel
   und zeichnet damit jede Unsauberkeit der Freistellung nach — die Zeichnung
   sieht dann aus, als waere sie schlecht ausgeschnitten, obwohl sie es nicht
   ist. Elena am 01.09.2026. Die Figuren stehen ohne Schatten auf dem hellen
   Grund; Tiefe kommt aus dem Himmel dahinter, nicht aus einem Rand. */
.character-img{height:100%;width:100%;object-fit:contain;object-position:center bottom}
/* KEINE SONDERGROESSE MEHR FUER FENNY. Die alte Regel gab ihm 15 % zu, weil er
   in der frueheren Pose in die Vorderbeuge ging und dadurch gedrungen wirkte.
   Seit dem 01.09.2026 sitzt er aufrecht — die Zugabe kam nun oben drauf, und er
   ueberragte Daisy deutlich. Beide Bilder werden jetzt beim Zuschneiden auf
   dieselbe Flaeche eingepasst (678×900, unten angeschlagen), also braucht
   keiner von beiden eine Ausnahme.
   WER DIE POSE WIEDER AENDERT, schaut hier noch einmal hin: eine Figur, die
   sich duckt, braucht mehr Hoehe als eine, die steht. */
.character-name{font-family:var(--heading);font-weight:600;font-size:clamp(1.7rem,3.2vw,2.2rem);margin:14px 0 6px}
.character-tagline{font-family:var(--quote);font-style:italic;font-weight:300;
  color:var(--accent);font-size:1.05rem;margin-bottom:18px}
.character-quote{font-family:var(--quote);font-style:italic;font-size:1.08rem;
  color:var(--ink-soft);max-width:38ch;margin:0 auto 20px;line-height:1.55}
.character-link{font-family:var(--caps);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;font-weight:600}

/* ── Charakter-Profil, abwechselnd hell und dunkel ── */
.char-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:center;
  max-width:1100px;margin:0 auto}
@media (max-width:860px){.char-grid{grid-template-columns:1fr;gap:34px}}
.char-grid.reverse .char-media{order:2}
@media (max-width:860px){.char-grid.reverse .char-media{order:0}}
.char-img-large{width:100%;max-width:460px;margin:0 auto;display:block}
.char-text h2{font-size:clamp(2.4rem,5vw,4rem);line-height:1;margin-bottom:16px}
.char-text .tagline{font-family:var(--quote);font-style:italic;font-weight:300;color:var(--accent);
  font-size:1.2rem;margin-bottom:28px}
.short-desc{font-family:var(--quote);font-style:italic;font-size:1.45rem;margin-bottom:28px;line-height:1.4}
.char-text p{font-size:1.03rem;line-height:1.75;margin-bottom:18px}

/* ── Der eigene Bible Dog ──────────────────────────────────────────────────
   Zwei Welpen nebeneinander, darunter die Fellfarben zum Durchklicken. Die
   Wachstumsstufen sind BEWUSST nicht mehr hier: was man sich verdient, wird
   auf der Werbeseite nicht vorweggenommen. */
.puppy-pick-label{text-align:center}
.puppy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(24px,4vw,60px);max-width:860px;margin:clamp(18px,2.6vw,30px) auto 0}
.puppy-pick{text-align:center}

/* Die Buehne haelt ihre Hoehe, egal welche Farbe gerade zu sehen ist: die drei
   Bilder liegen uebereinander, nur eines ist sichtbar. Ohne das springt die
   Seite bei jedem Klick. */
.puppy-stage{position:relative;width:min(100%,300px);margin:0 auto;aspect-ratio:1}
.puppy-coat{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .28s ease}
@media (prefers-reduced-motion:reduce){.puppy-coat{transition:none}}

/* KEIN JAVASCRIPT: die Radio-Knoepfe liegen unsichtbar vor der Buehne, und
   `:checked ~` schaltet das passende Bild und das aktive Farbfeld. Faellt ein
   Skript aus oder ist keines geladen, steht trotzdem der erste Welpe da. */
#coat-poodle-cream:checked    ~ .puppy-stage .coat-cream,
#coat-poodle-brown:checked    ~ .puppy-stage .coat-brown,
#coat-poodle-gray:checked     ~ .puppy-stage .coat-gray,
#coat-wolfdog-charcoal:checked ~ .puppy-stage .coat-charcoal,
#coat-wolfdog-silver:checked   ~ .puppy-stage .coat-silver,
#coat-wolfdog-brown:checked    ~ .puppy-stage .coat-brown{opacity:1}

.puppy-label{font-family:var(--caps);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:14px 0 0;font-weight:600}

.puppy-swatches{display:flex;justify-content:center;gap:12px;margin-top:12px}
.swatch{cursor:pointer;line-height:0;padding:4px;border-radius:999px;
  border:2px solid transparent;transition:border-color .2s,transform .2s}
.swatch:hover{transform:scale(1.08)}
.swatch span:first-child{display:block;width:26px;height:26px;border-radius:999px;
  border:1px solid var(--accent-30);box-shadow:var(--shadow-soft)}
#coat-poodle-cream:checked    ~ .puppy-swatches .swatch-cream,
#coat-poodle-brown:checked    ~ .puppy-swatches .swatch-brown,
#coat-poodle-gray:checked     ~ .puppy-swatches .swatch-gray,
#coat-wolfdog-charcoal:checked ~ .puppy-swatches .swatch-charcoal,
#coat-wolfdog-silver:checked   ~ .puppy-swatches .swatch-silver,
#coat-wolfdog-brown:checked    ~ .puppy-swatches .swatch-brown{border-color:var(--accent)}
/* Der Knopf ist unsichtbar, aber NICHT weggeschoben. `.skip` (position:absolute;
   left:-9999px) waere hier falsch: beim Klick auf ein Farbfeld bekommt der
   zugehoerige Knopf den Fokus, und der Browser scrollt zu ihm — die Seite
   sprang 9999px nach links und der Bildschirm wurde leer. Also an Ort und
   Stelle lassen und nur unsichtbar machen. */
.coat-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
/* Tastatur: der Knopf ist unsichtbar, also zeigt sein Farbfeld den Rahmen. */
#coat-poodle-cream:focus-visible    ~ .puppy-swatches .swatch-cream,
#coat-poodle-brown:focus-visible    ~ .puppy-swatches .swatch-brown,
#coat-poodle-gray:focus-visible     ~ .puppy-swatches .swatch-gray,
#coat-wolfdog-charcoal:focus-visible ~ .puppy-swatches .swatch-charcoal,
#coat-wolfdog-silver:focus-visible   ~ .puppy-swatches .swatch-silver,
#coat-wolfdog-brown:focus-visible    ~ .puppy-swatches .swatch-brown{
  outline:2px solid var(--accent);outline-offset:3px}

/* Was danach kommt, bleibt ungesagt — ein eigener Kasten, damit es als
   Versprechen gelesen wird und nicht als vergessener Absatz. */
.puppy-secret{margin-top:clamp(26px,3.4vw,38px);padding:clamp(22px,2.8vw,32px);
  border-radius:12px;background:var(--accent-08);border:1px solid var(--accent-15)}
.puppy-secret h3{margin-bottom:8px}
.puppy-secret p{margin:0;color:var(--ink-soft)}

/* ── App-Bereich mit Telefon ── */
.app-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(34px,5vw,64px);align-items:center;max-width:1200px;margin:0 auto;padding:0 24px}
@media (max-width:900px){.app-grid{grid-template-columns:1fr}}
.app-section{position:relative}
.app-section::before{content:'';position:absolute;inset:0;background:rgba(31,24,40,.28)}
.app-title-stack{font-family:var(--heading);font-weight:600;font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.25;margin-bottom:14px}
/* DERSELBE SATZ, DIESELBE SCHRIFT. "Your daily walk with Jesus" steht auf der
   Startseite zweimal — oben im Bild und hier im App-Abschnitt. Oben war er
   Fraunces kursiv, hier gesperrtes Cinzel in Versalien: ein Leser sieht denselben
   Satz zweimal und haelt ihn fuer zwei verschiedene Dinge. Der Claim ist Rede,
   also Fraunces, wie jeder andere gesprochene Satz auch. */
.app-tagline{font-family:var(--quote);font-style:italic;font-size:1.05rem;letter-spacing:.01em;
  color:var(--accent);margin-bottom:20px}

.phone-wrap{display:flex;justify-content:center}
.phone{width:min(280px,78vw);aspect-ratio:280/580;background:linear-gradient(145deg,#2a2238,#1a1424);
  border-radius:38px;padding:12px;position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1) inset}
.phone::before{content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:60px;height:5px;background:#1a1424;border-radius:3px;z-index:3}
.phone-screen{width:100%;height:100%;border-radius:28px;padding:46px 24px 26px;display:flex;
  flex-direction:column;text-align:center;position:relative;overflow:hidden;
  background-image:url('/assets/img/sky-soft.jpg');background-size:cover;background-position:center}
.phone-shot{width:100%;height:100%;border-radius:28px;object-fit:cover;display:block}
.phone-eyebrow{font-family:var(--caps);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--phone-accent);margin-top:auto}
.phone-verse-text{font-family:var(--quote);font-style:italic;font-size:.98rem;line-height:1.5;
  color:var(--ink);margin:10px 0 8px}
.phone-ref{font-family:var(--caps);font-size:9px;letter-spacing:.16em;color:var(--phone-accent);
  margin-bottom:auto;text-transform:uppercase;font-weight:600}
.phone-icons{display:flex;justify-content:center;gap:14px;font-size:15px;
  background:rgba(255,255,255,.55);border-radius:999px;padding:8px 12px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.phone-icon{opacity:.45}
.phone-icon.active{opacity:1}

/* ── Newsletter ── */
/* Das Formular lag frei auf dem Himmel — als einziger Block der Seite ohne
   Flaeche unter sich. Jetzt sitzt es auf Glas wie alles andere. */
.rudel-card{max-width:600px;margin:36px auto 0;text-align:left}
/* Die drei Anlaesse. Sie stehen linksbuendig, weil eine Aufzaehlung mittig
   gesetzt an jeder Zeile eine andere Kante hat — der Block selbst ist
   zentriert, die Zeilen sind es nicht. */
.rudel-list{list-style:none;margin:0 0 28px;padding:0 0 26px;
  border-bottom:1px solid var(--accent-20);
  display:grid;gap:11px;max-width:520px;margin-inline:auto}
.rudel-list li{display:flex;gap:12px;align-items:baseline;
  font-size:1rem;line-height:1.5;color:var(--ink)}
.rudel-list .ornament{flex:none;font-size:.8rem}
.newsletter-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px;margin:0 auto}
/* Ein Eingabefeld muss ALS Feld erkennbar bleiben — es ist der einzige Ort
   der Seite, an den man hineinschreibt. Deshalb heller als jede andere
   Flaeche, aber immer noch durchscheinend: deckendes Weiss war der letzte
   Fleck, durch den der Himmel nicht lief. */
.newsletter-form input{padding:14px 18px;border:1px solid var(--accent-30);border-radius:8px;
  font-family:var(--body);font-size:.95rem;color:var(--ink);width:100%;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.newsletter-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.newsletter-form .full-width,.newsletter-form .btn{grid-column:1 / -1}
@media (max-width:560px){.newsletter-form{grid-template-columns:1fr}}
/* Die Einwilligung ist Pflichttext und stand als kleinste Schrift der Seite
   linksbuendig in einem sonst zentrierten Block, ueber einem Bild, mit dem
   Datenschutz-Link direkt am Satzende klebend. Jetzt: eine ruhige Flaeche, auf
   der sie als Formularelement lesbar ist. Am TEXT aendert sich nichts. */
/* Die Einwilligung ist Pflichttext und war der haesslichste Fleck der Seite:
   kleinste Schrift, linksbuendig in einem sonst mittigen Block, zweizeilig
   ueber die volle Breite, und der Datenschutz-Link klebte am Satzende.
   Jetzt: eine eigene, leicht abgesetzte Flaeche, die sie als Formularelement
   ausweist — und der Link steht darunter auf der Kante des Textes, nicht
   im Satz. AM TEXT SELBST AENDERT SICH NICHTS. */
.consent-block{grid-column:1 / -1;border-radius:12px;padding:14px 16px;
  background:rgba(255,255,255,.34);border:1px solid var(--accent-20)}
.consent{display:flex;gap:12px;align-items:flex-start;text-align:left;font-size:.9rem;
  line-height:1.6;color:var(--ink-soft);cursor:pointer}
.consent input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--accent)}
/* 12px Kaestchen + 12px Abstand = 30px: der Link steht exakt unter dem
   ersten Buchstaben der Einwilligung, nicht unter dem Kaestchen. */
.consent-link{margin:8px 0 0 30px;font-size:.84rem}
.consent-link a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* Der Honigtopf steht im Quelltext und nirgends auf dem Bildschirm. Nicht
   display:none: manche Bots pruefen genau darauf und lassen das Feld dann
   leer. Weggeschoben wie `.skip`, aber ohne dessen Fokus-Rueckkehr. */
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Die Rueckmeldung nach dem Absenden. role=status, damit ein Screenreader sie
   vorliest, ohne dass der Fokus springt. */
.nl-status{grid-column:1 / -1;margin:2px 0 0;font-size:.92rem;line-height:1.5;
  color:var(--ink-soft);text-align:left}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ── Rechtstexte ──────────────────────────────────────────────────────────
   DIE HEIKELSTE FLAECHE DER GANZEN WEBSITE, und sie war es genau deshalb:
   drei Zeilen auf einer Karte tragen einen wandernden Untergrund muehelos,
   zwei Bildschirmseiten Datenschutzerklaerung nicht. Der Text lag ohne jede
   Flaeche auf dem Himmel — und die Perlmutt-Formen ziehen darunter durch und
   hellen mit `mix-blend-mode:screen` alles auf, was hinter ihnen liegt. Der
   Kontrast einer Zeile haengt damit davon ab, WO sie gerade steht.
   Der Bogen ist deshalb dichter als jedes andere Glas der Seite (.82 statt
   .62 oben) und traegt zusaetzlich seine eigene Saettigung: er nimmt dem
   Grund die Bewegung, ohne ihn zuzudecken. Wer die Zahl senkt, misst vorher
   nach — die Schrift steht hier laenger als irgendwo sonst. */
.legal-sheet{position:relative;margin:0 auto;max-width:900px;
  padding:clamp(30px,4vw,58px) clamp(24px,3.6vw,54px);border-radius:26px;
  background:linear-gradient(165deg,rgba(255,255,255,.82),rgba(255,255,255,.72) 45%,rgba(255,255,255,.78));
  backdrop-filter:blur(26px) saturate(1.35);-webkit-backdrop-filter:blur(26px) saturate(1.35);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 26px 60px rgba(95,88,120,.2),inset 0 1px 0 rgba(255,255,255,.95)}
.legal-sheet::before{content:'';position:absolute;left:8%;right:8%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,1),transparent)}
/* DIE UEBERSCHRIFT EINES RECHTSTEXTES IST EIN DOKUMENTENTITEL, KEIN HERO.
   „Datenschutzerklaerung" ist EIN Wort aus zwanzig Buchstaben; in der
   Hero-Groesse (bis 5rem) war es breiter als der Bogen, auf dem es steht,
   und lief rechts darueber hinaus. Deutsch setzt hier die Grenze, nicht
   Englisch — an „Privacy Policy" waere das nie aufgefallen. Die Trennung
   greift auf die `lang`-Auszeichnung der Seite zurueck, die jede Seite
   traegt (verify-web prueft es). */
.legal h1{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.18;margin-bottom:.8em}
.legal h1,.legal h2,.legal h3{overflow-wrap:break-word;hyphens:auto}
.legal{max-width:76ch;margin-inline:auto}
.legal h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-top:2.2em}
.legal h2:first-of-type{margin-top:1em}
.legal ul{padding-left:1.15rem}.legal li{margin-bottom:.5em}
.legal table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.95rem}
.legal th,.legal td{text-align:left;padding:.65rem .7rem;vertical-align:top;
  border-bottom:1px solid var(--accent-25)}
.legal th{font-weight:600;color:var(--accent);font-family:var(--caps);font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.stand{font-size:.9rem;color:var(--ink-soft)}
.gap{background:var(--accent-20);border:1px dashed var(--accent);border-radius:4px;
  padding:.1em .5em;font-weight:600;font-size:.93em}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* DAS IMPRESSUM AUF DEM TELEFON (15.09.2026). Die Beschriftungen brechen nicht
   um (nowrap), „ANWENDBARE RECHTSVORSCHRIFTEN" allein ist breiter als die halbe
   Karte, und die Werte lagen rechts ausserhalb, im seitlich scrollbaren Kasten.
   Man sah nur leere Zeilen. Schmal steht deshalb die Beschriftung UEBER dem
   Wert. Eine Breitenmessung findet das nicht: der Kasten scrollt ja. */
@media (max-width:560px){
  .legal table,.legal tbody,.legal tr,.legal th,.legal td{display:block;width:auto}
  .legal th{white-space:normal;border-bottom:0;padding-bottom:.15rem}
  .legal td{padding-top:0;overflow-wrap:anywhere}
}

/* ── Fuss ── */
footer{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.72));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.75);padding:64px 0 34px}
.foot{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.foot h4{font-family:var(--caps);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot a{color:var(--ink-soft);text-decoration:none;font-size:.93rem}
.foot a:hover{color:var(--accent)}
/* Der Kontoname unter der Plattform. Er ist die Zeile, nach der jemand
   sucht — kleiner als die Beschriftung, aber nicht so blass, dass man ihn
   nicht abtippen kann. */
.foot .handle{display:block;font-size:.82rem;letter-spacing:.01em;
  color:var(--accent);opacity:.85}
.foot-note{margin-top:44px;padding-top:22px;border-top:1px solid var(--accent-20);
  font-size:.84rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:2000;background:#fff;padding:.7rem 1.2rem;border-radius:6px;
  box-shadow:var(--shadow-soft)}