/* =====================================================================
   Galavo · Prototyp Landingpage · base.css (Grundlage, Agent A)
   Richtung „Papier & Tinte“ (docs/19 §5), Tokens wie L5 (landing-schritte.html). Hell und dunkel.

   Tokens (auf :root)
     Farbe, je als light-dark(hell, dunkel):
     --bg --surface --sand --line --ink --muted --on-ink --acc --ink-line
     --ink-hover   Hauptknopf beim Darüberfahren (statt festem #3A2F27)
     --glass       Glas für Kopf und Handy-Leiste (Grund zu 86 %)
     --rim         Lichtkante oben an Flächen im Dunkeln (hell transparent): box-shadow: inset 0 1px 0 var(--rim)
     --lift        hervorgehobene Fläche im Dunkeln je Ton (warm, nie grau; z. B. Invilu-Spalte); hell = --surface
     --shadow      Schatten, nur der Farbanteil wechselt
     Keine Farbe (Zweier-Muster: @media dark + :root:not([data-theme=light]) und :root[data-theme=dark]):
     --paper       Bütten 256 px, im Dunkeln je Ton eine eigene Kachel (lädt nur, wenn aktiv)
     --media-dim   Helligkeit für Fotos, Videos, Design-Screens: hell 1, dunkel .9 (filter:brightness(var(--media-dim)))
     Sonstige: --serif (Cormorant Garamond) --sans --ease --spring

   Hell und dunkel („Dunkler Karton“: Weißdruck statt Tinte, Goldfolie, Licht am Abend)
     Ohne Skript folgt alles dem System (color-scheme: light dark); mit Skript gilt immer hell, solange die Prototyp-Leiste nichts anderes setzt. theme.js (blockierend im <head>,
     vor dem CSS) setzt data-theme=light|dark (Prototyp-Schalter), data-tone=nachtpapier|mitternacht|bordeaux
     und html.dk für „effektiv dunkel“; bei jedem Wechsel feuert es „galavo:theme“ {detail:{dark,tone}}.
     Module lesen nur html.dk und hören auf das Ereignis. Was hell bleiben muss (Einladungen im Handy),
     setzt lokal color-scheme: light.
     Töne (nur die dunkle Hälfte ändert sich): D1 nachtpapier (Standard, warm braun-schwarz),
     D2 mitternacht (Nachtblau, Schrift warmes Creme), D3 bordeaux (tiefes Weinrot, Roségold).

   Klassen
     .wrap        Inhaltsbreite (max. 1240 px), Rand 16 px am Handy, 40 px ab 700 px
     .sec         Abschnitt mit senkrechtem Abstand (96 px, Handy 64 px)
     .sec-hd      Kopf eines Abschnitts: .eyebrow + .h2 + optional .lead (max. 40em)
     .eyebrow     Dachzeile in kleinen Versalien mit Altgold-Strich davor
     .h1 .h2 .h3  Überschriften in Cormorant; .h1 groß (Hero), .h2 Abschnitt, .h3 klein (Karten)
     .lead        größerer Nebentext;  .muted  Nebentext
     .btn         Hauptknopf in Tinte;  .btn-ghost  umrandeter Knopf;  .lnk  Textlink mit Linie
     .chip        Auswahl-Chip; gewählt mit aria-pressed="true" (oder aria-current)
     .card        Fläche mit Linie und Rundung
     .cta-bar     klebende Aktionsleiste am Handy (unter 700 px); sichtbar mit Klasse .on (setzt site.js)
     .vh          nur für Screenreader

   Bewegung
     html.rm      „Bewegung reduzieren“: setzt site.js aus der Prototyp-Leiste UND bei
                  prefers-reduced-motion. Module prüfen nur html.rm und hören auf das Ereignis
                  „galavo:motion“ (document). Grundregel: Endzustand ist das normale CSS,
                  Bewegung nur unter einer Klasse, die das Modul setzt. Animiert werden nur
                  transform, opacity und stroke-dashoffset.

   Gerüst einer Seite
     <div data-site="header"></div> … <main id="main"> … </main> <div data-site="footer"></div>
     site.js füllt Kopf und Fuß, die Handy-Leiste und die Prototyp-Leiste.
   ===================================================================== */

/* site.css, hero.css und wreath.css bindet jede Seite selbst vor base.css ein, nur wo sie gebraucht werden (T2). */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}

:root{
 --bg:light-dark(#F7F2EA,#16120F);--surface:light-dark(#FFFDF9,#201B17);--sand:light-dark(#EDE4D6,#2A231E);--line:light-dark(#E2D7C6,#3A312A);
 --ink:light-dark(#2A221C,#F3ECE2);--muted:light-dark(#64584C,#A89C8E);--on-ink:light-dark(#FFFDF9,#16120F);
 --acc:light-dark(#7E6129,#D9B877);--ink-line:light-dark(#2A221C,#E9E0D3);
 --ink-hover:light-dark(#3A2F27,#FFFAF2);
 --lift:light-dark(#FFFDF9,#3E3426);
 --glass:color-mix(in srgb,var(--bg) 86%,transparent);
 --rim:light-dark(transparent,rgba(255,240,222,.07));
 --paper:url(../assets/paper/paper-deckle-light.webp);
 --media-dim:1;
 --shadow:0 22px 40px -28px light-dark(rgba(42,34,28,.55),rgba(0,0,0,.85));
 --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
 --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
 --spring:cubic-bezier(.2,.9,.25,1.15);
 --ease:cubic-bezier(.3,.7,.2,1);
 color-scheme:light dark;
}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
/* D2 Mitternacht und D3 Bordeaux: hell bleibt gleich, nur die dunkle Hälfte ändert sich */
:root[data-tone=mitternacht]{
 --bg:light-dark(#F7F2EA,#0E1320);--surface:light-dark(#FFFDF9,#161C2D);--sand:light-dark(#EDE4D6,#1E2539);--line:light-dark(#E2D7C6,#2E3754);
 --ink:light-dark(#2A221C,#F3ECE2);--muted:light-dark(#64584C,#ABA79F);--on-ink:light-dark(#FFFDF9,#0E1320);
 --acc:light-dark(#7E6129,#D9B877);--ink-line:light-dark(#2A221C,#E7E1D6);--ink-hover:light-dark(#3A2F27,#FFFAF2);
 --rim:light-dark(transparent,rgba(220,230,255,.07));--lift:light-dark(#FFFDF9,#272E52);
}
:root[data-tone=bordeaux]{
 --bg:light-dark(#F7F2EA,#1A0C10);--surface:light-dark(#FFFDF9,#251217);--sand:light-dark(#EDE4D6,#30171E);--line:light-dark(#E2D7C6,#4A2730);
 --ink:light-dark(#2A221C,#F5E9E3);--muted:light-dark(#64584C,#C2A6A4);--on-ink:light-dark(#FFFDF9,#1A0C10);
 --acc:light-dark(#7E6129,#E6B79E);--ink-line:light-dark(#2A221C,#EEDCD3);--ink-hover:light-dark(#3A2F27,#FFF6F0);
 --rim:light-dark(transparent,rgba(255,226,218,.08));--lift:light-dark(#FFFDF9,#442C2D);
}
/* Was keine Farbe ist: Papier-Kachel und Bildhelligkeit (System dunkel, außer erzwungen hell; oder erzwungen dunkel) */
@media (prefers-color-scheme:dark){
 :root:not([data-theme=light]){--paper:url(../assets/paper/paper-deckle-dark.webp);--media-dim:.9}
 :root:not([data-theme=light])[data-tone=mitternacht]{--paper:url(../assets/paper/paper-deckle-navy.webp)}
 :root:not([data-theme=light])[data-tone=bordeaux]{--paper:url(../assets/paper/paper-deckle-wine.webp)}
}
:root[data-theme=dark]{--paper:url(../assets/paper/paper-deckle-dark.webp);--media-dim:.9}
:root[data-theme=dark][data-tone=mitternacht]{--paper:url(../assets/paper/paper-deckle-navy.webp)}
:root[data-theme=dark][data-tone=bordeaux]{--paper:url(../assets/paper/paper-deckle-wine.webp)}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;background:var(--paper) 0 0/256px 256px repeat,var(--bg);overflow-x:clip}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
a{color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Layout */
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.wrap{padding:0 40px}}
.sec{padding:96px 0;position:relative}
@media (max-width:699px){.sec{padding:64px 0}}
.sec-hd{display:grid;gap:14px;max-width:40em}
.sec-hd.center{margin:0 auto;text-align:center;justify-items:center}

/* Schrift */
.eyebrow{display:flex;align-items:center;gap:12px;font:500 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--acc);flex:none}
.h1{font:500 clamp(46px,6vw,72px)/1.02 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.h2{font:500 clamp(34px,4.2vw,52px)/1.06 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.h3{font:500 26px/1.15 var(--serif)}
.h1 em,.h2 em{font-style:italic;color:var(--acc)}
.lead{font-size:clamp(17px,1.6vw,19px);line-height:1.5;color:var(--muted);max-width:34em}
.muted{color:var(--muted)}

/* Knöpfe und Links */
.btn,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;font:600 16px/1 var(--sans);white-space:nowrap;border-radius:4px;text-decoration:none;cursor:pointer;border:0}
.btn{background:var(--ink);color:var(--on-ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn:hover{background:var(--ink-hover)}
.btn-ghost:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.lnk{display:inline-flex;align-items:center;gap:6px;font-weight:500;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ink) 35%,transparent);padding-bottom:2px}
.lnk:hover{border-color:var(--ink)}

/* Chips */
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border-radius:99px;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font:500 14px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 40%,transparent)}
.chip[aria-pressed=true],.chip[aria-current]{background:var(--ink);color:var(--on-ink);box-shadow:none}

/* Fläche */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:inset 0 1px 0 var(--rim)}

/* Klebende Aktionsleiste am Handy */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease)}
.cta-bar .btn{width:100%}
.cta-bar.on{transform:none}
@media (max-width:699px){.cta-bar{display:block}}

/* Bewegung reduzieren: sofort Endzustand */
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important}
html.rm{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Video auf Tippen (html.tap-video, site.js): kleiner runder Knopf unten mittig im Handy, ▶ spielt stumm, dann ❚❚ */
.v-tap{position:absolute;left:50%;bottom:5%;z-index:5;translate:-50% 0;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(21,17,14,.74);color:#FFFDF9;cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.v-tap svg{width:16px;height:16px;fill:currentColor}
.v-tap:focus-visible{outline:2px solid #FFFDF9;outline-offset:2px;box-shadow:0 0 0 4px rgba(21,17,14,.74)}
.v-tap[hidden]{display:none}
.v-tap.big{width:64px;height:64px}
.v-tap.big svg{width:22px;height:22px}