@charset "UTF-8";
/* Visenza Basis. Elemente und Bausteine, die jede Seite braucht.
   Braucht tokens.css davor. Nur was ueberall gilt, nichts Seitenspezifisches. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-leicht);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--rand-seite);
}

.sektion { padding-block: var(--raum-xl); }

/* Die helle Sektion belegt dieselben Namen um. Alles darin laeuft ohne Sonderregel. */
.sektion--hell {
  --grund: var(--grund-hell);
  --flaeche: var(--flaeche-hell);
  --linie: var(--linie-hell);
  --rand: var(--rand-hell);
  --rand-stark: var(--rand-stark-hell);
  --text: var(--text-hell);
  --text-ruhig: var(--text-hell-ruhig);
  --text-leise: var(--text-hell-leise);
  --akzent: var(--akzent-hell);
  --fokus: var(--fokus-hell);
  --icon: var(--icon-hell);
  background: var(--grund);
  color: var(--text);
}

/* Schrift */
h1, h2, h3 {
  margin: 0;
  text-wrap: balance;
  font-family: var(--font-head);
  font-weight: var(--fw-leicht);
  letter-spacing: var(--ls-head);
  text-transform: none;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h2); }
p { margin: 0 0 1em; color: var(--text-ruhig); }
strong { font-weight: var(--fw-normal); color: var(--text); }

.label {
  text-wrap: balance;
  font-family: var(--font-body);
  font-weight: var(--fw-normal);
  font-size: var(--fs-mini);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--akzent);
}

/* Die Akzentzeile. Cormorant kursiv, echter Schnitt, nie eine Schreibschrift */
.akzent {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: var(--fw-normal);
  font-size: var(--fs-h3);
  line-height: var(--lh-h2);
  letter-spacing: 0.02em;
  color: var(--akzent);
}
/* Auf Foto steht jeder Text im Schriftton, auch die Akzentzeile */
.auf-foto .akzent, .auf-foto .label { color: var(--text); }

/* Sektionskopf: Label, Ueberschrift, Einleitung */
.kopf { max-width: 58ch; margin-bottom: var(--raum-l); }
.kopf .label { display: block; margin-bottom: var(--raum-m); }
.kopf h1, .kopf h2 { margin-bottom: 0.5em; }
.kopf p { color: var(--text-leise); margin: 0; }

/* Buttons. Ein Bildschirm, ein Schritt. Nie zwei Primaerknoepfe nebeneinander.
   Seit 28.09.2026 "Glas mit Gold" statt gefuellter Pille (Christina). */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 1.4em;
  padding: 1.15em 2.2em;
  border: 1px solid var(--glas-gold-rand);
  border-radius: var(--radius-pill);
  background: var(--glas-gold);
  backdrop-filter: blur(var(--glas-unschaerfe));
  -webkit-backdrop-filter: blur(var(--glas-unschaerfe));
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  font-weight: var(--fw-normal);
  line-height: 1;
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
/* Hover nur als Farbwechsel. Kein Heben, kein Schatten: ein Ort, keine Software */
.cta:hover, .cta--zeigt-hover { background: var(--glas-gold-hover); border-color: var(--glas-gold-rand-hover); }
.cta:active, .cta--zeigt-aktiv { background: var(--gold-tief); }
.cta:focus-visible, .cta--zeigt-fokus { outline: 2px solid var(--fokus); outline-offset: 3px; }

/* Leiser zweiter Weg. Outline, nie ein zweites Ziel */
.cta--sekundaer { background: transparent; color: var(--text); border-color: var(--rand-stark); }
.cta--sekundaer:hover, .cta--sekundaer.cta--zeigt-hover { background: transparent; border-color: var(--akzent); }

/* Die Unterzeile unter dem Knopf: Dauer, Preis, keine Anmeldung */
.cta-block { display: inline-grid; gap: 0.7em; justify-items: start; }
.cta-block--mitte { justify-items: center; text-align: center; }
.unterzeile {
  margin: 0;
  font-size: var(--fs-mini);
  letter-spacing: 0.06em;
  color: var(--text-leise);
}

/* Icons. Linie, nie gefuellt */
.icon { display: block; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.cta__pfeil { width: 1.85em; height: 0.72em; stroke-width: 1.2; flex: none; }

/* Karten und Glas */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-karte);
  padding: clamp(22px, 3vw, 40px);
}
.glas { background: var(--glas); border: 1px solid var(--rand); border-radius: var(--radius-karte); }

/* Eingabe: Unterlinie, kein Rahmen, kein Radius (wie in der App) */
.feld {
  width: 100%;
  background: transparent;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--rand-stark);
  border-radius: 0;
  padding: 0.7em 2px;
  font-family: var(--font-body);
  font-weight: var(--fw-leicht);
  font-size: var(--fs-body);
}
.feld::placeholder { color: var(--text-leise); }
.feld:focus-visible { outline: 0; border-bottom-color: var(--fokus); }
.einwilligung { display: flex; gap: 0.7em; align-items: flex-start; font-size: var(--fs-mini); color: var(--text-leise); }
.einwilligung input { margin-top: 0.4em; accent-color: var(--gold-tief); }

/* Preis: eine Zahl in Cormorant, kein Streichpreis, kein Countdown */
.preis { font-family: var(--font-head); font-weight: var(--fw-leicht); font-size: var(--fs-h2); line-height: 1.1; color: var(--text); margin: 0; }
.vertrauen { margin: 0.4em 0 0; font-size: var(--fs-mini); letter-spacing: 0.06em; color: var(--text-leise); }

/* Wortmarke */
.marke__wort {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--fw-normal);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-marke);
  text-transform: uppercase;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}