/* ═══════════════════════════════════════════════════════════════════════════
   LuminoSana Hub — gemeinsames Fundament aller Seiten dieses Auftritts
   Version 2026-08-15-2129

   WARUM EINE GEMEINSAME DATEI
       Fünf Seiten teilen sich dieses Fundament. Der Browser lädt es EINMAL
       und hat es danach für jede weitere Seite im Zwischenspeicher. Fünfmal
       dasselbe CSS im HTML wäre fünfmal Übertragung und fünf Orte zum Pflegen.
       Der Verweis ist dokument-relativ (../stil.css), damit der Doppelklick-Test
       besteht und der Ordner an jeder Adresse funktioniert.

   REGELN, DIE HIER EINGEBAUT SIND
       · nur transform und opacity werden animiert (Effekt-Bibliothek Teil A.1)
       · Zeiger-Effekte nur bei echtem Mauszeiger (A.8)
       · prefers-reduced-motion als Pflichtblock am Ende (A.7, Teil D)
       · Eingabefelder nie unter 16px, sonst zoomt iOS beim Antippen hinein
       · Bedienflächen mindestens 2,9rem hoch, damit ein Daumen sie trifft
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Schriften ─────────────────────────────────────────────────────────────
   Liegen als eigene Dateien im Hub, nie auf einem fremden Server.
     Onest ersetzt PP Pangram Sans (FUND-07 Nr. 118: Pangram kostet je Domain
       und Jahr, Onest ist SIL OFL — frei und unbefristet; die OFL.txt liegt
       neben der Datei, das verlangt die Lizenz). Metrisch fast deckungsgleich,
       das Layout steht. Variable Schrift: EINE Datei trägt die Achse 100–900.
       Zuschnitt: 337 Zeichen samt Latin Extended-A, weil NUTZER hier Namen
       eintippen (Michał, Nováková, Søren müssen richtig aussehen) —
       nachgezogen 2026-08-08 aus der offiziellen Quelle (google/fonts v2.001),
       bitgleich mit der kanonischen Datei in atelier/marke.
     Goldney trägt nur Überschriften, also nur die Zeichen für Deutsch und
       Englisch. Kommt je eine weitere Sprache dazu, wird neu zugeschnitten.
   font-display:swap zeigt Text sofort in der Ersatzschrift, statt ihn zu
   verstecken, bis die Datei da ist.

   ⭐ DIE GEWICHTE SIND LEICHTER ALS FRÜHER — das ist Absicht (Designsystem §6a).
       Onest 400 trägt rund 26 % mehr Tinte als PP Pangram Sans 400 (gemessen
       am 14.08.2026). Wer die alten Gewichte eins zu eins überträgt, bekommt
       eine sichtbar schwerere, härtere Seite. Verbindliche Umrechnung:
       400 → 300, 500 → 400, 600 bleibt (kleine Versalien brauchen die Kraft).
       Diese Datei folgt dem Live-Stand von luminosana.com. Nicht „korrigieren".
   ────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:Goldney;src:url(schriften/Goldney.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";
  src:url(schriften/Onest.woff2) format("woff2-variations"),
      url(schriften/Onest.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --gold:#dabe73;
  --gold-tief:#b99f56;
  --creme:#f3efe6;
  --creme-hell:#faf7f1;
  --papier:#fff;
  --tinte:#1d1c19;
  --gedaempft:#7d776a;
  --linie:#e2dccd;
  --radius:16px;
  --weich:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--creme);
  color:var(--tinte);
  font-family:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:300;             /* §6a: Fließtext 400 → 300, Onest baut fetter */
  line-height:1.6;
  min-height:100svh;          /* svh statt vh: vh springt auf iOS mit der Adressleiste */
  display:flex;
  flex-direction:column;
}

/* ── Die Papierfläche der Marke ────────────────────────────────────────────
   Dieselbe Textur wie luminosana.com (dort `.background-paper-full`): eine
   graugrüne Lage über einem Papierbild, über die ganze Fläche gezogen und
   beim Scrollen stehend. Sie nimmt der Cremefläche das Sterile.

   WARUM EIN FESTES ELEMENT UND NICHT background-attachment:fixed
       Beides sieht gleich aus, aber `fixed` am body zwingt den Browser, bei
       jedem Scroll-Bild neu zu zeichnen — genau die Bremse, die am
       2026-08-08 das Scroll-Zittern der Powerkapsel verursacht hat. Als
       eigenes festes Element bekommt die Fläche eine eigene Ebene und das
       Scrollen bleibt billig. Webflow löst es genauso (`position:fixed`).
       `position:fixed` nimmt das Element aus dem Flex-Fluss des body, das
       Spaltenlayout darüber bleibt also unberührt.
   ────────────────────────────────────────────────────────────────────────── */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(rgba(172,167,147,.15),rgba(172,167,147,.15)),
                   url(bilder/paper-textur.webp);
  background-position:0 0,50%;
  background-repeat:repeat,no-repeat;
  background-size:auto,cover;
}
a{color:inherit}
img{max-width:100%;height:auto}

/* ── Bausteine ────────────────────────────────────────────────────────────── */
.mitte{width:100%;max-width:34rem;margin:0 auto;
  padding:clamp(1.5rem,5vw,3rem) clamp(1.1rem,5vw,1.5rem)}
.breit{max-width:64rem}

/* Das Zeichen der Marke. War bis 2026-08-15 auf 4,6rem gedeckelt und wirkte
   dort wie ein Fehler im Bild (Olivers Befund am fertigen Auftritt). */
.logo{width:clamp(4.6rem,14vw,6.4rem);height:auto;display:block;margin:0 auto 1.6rem}

h1,h2,h3{font-family:Goldney,Georgia,serif;font-weight:400;line-height:1.15;margin:0 0 .5rem}
h1{font-size:clamp(1.9rem,6.5vw,2.7rem)}
h2{font-size:clamp(1.5rem,4.6vw,2.1rem)}
/* Goldney ist eine Schreibschrift und braucht mehr Grad als eine Serifenschrift,
   um lesbar zu bleiben. Bei 1,25rem war „Keine E-Mail bekommen?" kaum zu
   entziffern (Olivers Befund 2026-08-15), jetzt 1,7rem. */
h3{font-size:clamp(1.35rem,3.4vw,1.7rem)}

.eyebrow{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-tief);margin:0 0 .9rem;font-weight:400}   /* §6a: 500 → 400 */
.lead{color:var(--gedaempft);margin:0 auto 2.2rem;max-width:34rem}

/* ── Formularteile ────────────────────────────────────────────────────────── */
.karte{background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(1.3rem,5vw,2rem);box-shadow:0 18px 40px -28px rgba(29,28,25,.35)}
.feld{margin-bottom:1.05rem}
label{display:block;font-size:.82rem;font-weight:400;margin-bottom:.35rem;color:var(--tinte)}  /* §6a: 500 → 400 */
input,select{
  width:100%;font:inherit;font-size:1rem;color:var(--tinte);
  background:var(--creme-hell);border:1px solid var(--linie);border-radius:10px;
  padding:.72rem .85rem;min-height:2.9rem;
  transition:border-color .2s var(--weich), box-shadow .2s var(--weich);
}
select{
  appearance:none;padding-right:2.4rem;background-repeat:no-repeat;
  background-position:right .95rem center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237d776a' stroke-width='1.6'/%3E%3C/svg%3E");
}
input:focus-visible,select:focus-visible{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(218,190,115,.32)}

/* ── Knöpfe ───────────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;font:inherit;font-weight:400;font-size:1rem;text-decoration:none;  /* §6a: 500 → 400 */
  color:var(--tinte);background:var(--gold);border:0;border-radius:10px;
  padding:.95rem 1.2rem;min-height:3.1rem;cursor:pointer;
  transition:transform .22s var(--weich), opacity .22s var(--weich);
}
.knopf.schmal{width:auto}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{transform:translateY(-2px);opacity:.94}
}
.knopf:active{transform:translateY(1px)}
.knopf:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}

.hinweis{font-size:.76rem;color:var(--gedaempft);margin:1rem 0 0;line-height:1.5}

/* ── Sprachwahl ───────────────────────────────────────────────────────────── */
.sprachen{display:flex;gap:.4rem;justify-content:center;margin:0 0 1.8rem;flex-wrap:wrap}
.sprachen a{
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:.32rem .8rem;border-radius:999px;border:1px solid var(--linie);color:var(--gedaempft);
  transition:border-color .2s var(--weich),color .2s var(--weich)}
.sprachen a[aria-current]{border-color:var(--gold);color:var(--gold-tief)}
@media (hover:hover){.sprachen a:hover{border-color:var(--gold)}}

/* ── Fuß ──────────────────────────────────────────────────────────────────── */
footer{margin-top:auto;text-align:center;font-size:.75rem;color:var(--gedaempft);
  padding:2rem 1rem 2.4rem}
footer a{color:var(--gedaempft)}
.kleingedruckt{font-size:.72rem;line-height:1.55;max-width:46rem;margin:0 auto 1rem}

/* ── Einblenden beim Erscheinen ───────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--weich),transform .7s var(--weich)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* ── Pflichtblock, immer am Ende (Effekt-Bibliothek Teil D) ───────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}