/* ==========================================================================
   Authentic Living Design – Grundgerüst
   Typo, Farben, Bausteine. Alles Sichtbare steht hier; Bewegung kommt in
   seite.js nur additiv dazu (siehe UEBERGABE.md, Abschnitt „Fallstricke").
   ========================================================================== */

/* --- Schriften: selbst gehostet, kein Google-CDN (Datenschutz) ------------
   Vogue ist die vom Kunden gelieferte Display-Schrift. Sie ist eine reine
   **Versalschrift**: Kleinbuchstaben werden als Großbuchstaben gesetzt
   (capHeight = xHeight = 700). Für Fließtext taugt sie deshalb nicht –
   dort steht Inter, eine neutrale Grotesk, die den hohen Kontrast der
   Vogue ruhig gegenhält.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Vogue';
  src: url('../fonts/vogue.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-normal.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* --- Token ---------------------------------------------------------------- */
:root {
  /* Papier statt Reinweiß: nimmt der Didone die Härte. */
  --papier: #f7f4ef;
  --papier-tief: #ece6dc;
  --tinte: #12100e;
  --tinte-leise: #6c6259;
  --linie: rgba(18, 16, 14, 0.16);
  --messing: #a08a5f;
  /* Farben des gelieferten Logos – für Druck und Profilbilder, nicht auf
     der Seite: dort gelten Tinte und Papier. */
  --marke-grund: #253547;
  --marke-zeichen: #dcceb5;

  /* Display = Vogue (nur Versalien), alles Lesbare = Inter. */
  --display: 'Vogue', 'Didot', 'Bodoni MT', Georgia, serif;
  --grotesk: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluide Skala. Die Referenz springt an Haltepunkten (gemessen: 768→12.8px,
     1024→9px, 1440→10px, 1728→11px). Das ist übernommen als *Verhältnis*,
     aber stufenlos gerechnet – sonst springt die Schrift beim Skalieren. */
  --rand: clamp(1.25rem, 3.2vw, 3.5rem);
  --t-mikro: clamp(0.625rem, 0.34vw + 0.53rem, 0.75rem);
  --t-klein: clamp(0.75rem, 0.3vw + 0.68rem, 0.875rem);
  --t-text: clamp(1rem, 0.5vw + 0.88rem, 1.1875rem);
  /* Vorspann: Referenz misst 23px bei 1440 (= 1.6vw). */
  --t-lead: clamp(1.125rem, 0.95vw + 0.6rem, 1.5rem);
  /* Die Displaygrade sind gegenüber der vorigen Schrift um rund ein Fünftel
     zurückgenommen: Versalien wirken bei gleichem Grad deutlich größer,
     weil keine Unterlängen und keine Mittellängen dazukommen. */
  --t-mittel: clamp(1.5rem, 2vw + 0.4rem, 2.7rem);
  --t-gross: clamp(2rem, 4.9vw, 5.3rem);
  --t-riesig: clamp(2.4rem, 10.4vw, 12rem);

  --zeit: 0.7s;
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Feste Seitenränder je Geräteklasse.
   Der fließende Wert oben ist am Desktop richtig, taugt aber am Telefon
   nicht: unter 625 px Fensterbreite läge er ohnehin immer am unteren
   Anschlag, und ein 412-px-Gerät bekäme denselben Rand wie ein 320-px-
   Gerät. Diese drei Stufen geben dem Satzspiegel je Geräteklasse eine
   feste, vorhersagbare Breite. Ab 901 px bleibt der gemessene Wert der
   Referenz unangetastet. */
@media (max-width: 400px) {
  :root { --rand: 1.25rem; }
}
@media (min-width: 401px) and (max-width: 560px) {
  :root { --rand: 1.5rem; }
}
@media (min-width: 561px) and (max-width: 900px) {
  :root { --rand: 2.25rem; }
}

/* --- Lenis (sanftes Scrollen) --------------------------------------------- */
/* Aus lenis.css übernommen, damit keine zusätzliche Datei geladen wird.
   Die Klasse `lenis` setzt das Skript selbst – ohne Skript greift nichts
   davon und es wird ganz normal gescrollt. */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* --- Grundlagen ----------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: var(--t-text);
  line-height: 1.5;
  /* Waagrechter Überlauf ist der häufigste Mobil-Fehler – hier zugenagelt. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--messing);
  outline-offset: 3px;
}

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Bausteine ------------------------------------------------------------ */

/* Kleines Grotesk-Label über Überschriften */
.label {
  font-family: var(--grotesk);
  font-size: var(--t-mikro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

/* Display-Überschriften in Vogue. Versalien vertragen keine negative
   Laufweite – die Buchstaben stoßen sonst aneinander. */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* Textlink im Referenz-Stil: unterstrichen, Grotesk, versal */
/* Unterstreichung über text-decoration statt border-bottom: so klebt die
   Linie am Text und rutscht nicht an die Kastenunterkante, wenn der Link
   am Touchgerät auf 44 px aufgepolstert wird. */
.link-fein {
  display: inline-flex;
  align-items: center;
  font-family: var(--grotesk);
  font-size: var(--t-mikro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.42em;
  transition: opacity 0.3s var(--kurve);
}
.link-fein:hover { opacity: 0.55; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  /* 44px Mindesthöhe für Tap-Ziele – gilt auch am Desktop, schadet nicht. */
  min-height: 44px;
  padding: 0.9em 2.2em;
  font-family: var(--grotesk);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--papier);
  background: var(--tinte);
  border: 1px solid var(--tinte);
  border-radius: 999px;
  transition: background 0.35s var(--kurve), color 0.35s var(--kurve);
}
.knopf:hover { background: transparent; color: var(--tinte); }

.knopf--hell {
  color: var(--tinte);
  background: var(--papier);
  border-color: var(--papier);
}
.knopf--hell:hover { background: transparent; color: var(--papier); }

/* KI-Kennzeichnung nach Art. 50 EU-KI-VO.
   Steht im Markup (nicht im Skript) und sitzt bewusst NICHT in einem
   Element, das skaliert oder abgedimmt wird – sonst schrumpft sie mit. */
.ki-hinweis {
  position: absolute;
  right: 0.7rem;
  bottom: 0.6rem;
  z-index: 3;
  font-family: var(--grotesk);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.ki-hinweis--dunkel {
  color: rgba(18, 16, 14, 0.45);
  text-shadow: none;
}
/* Vollflächige Abschnitte haben unten rechts schon Inhalt – dort würde die
   Kennzeichnung sonst über der Beschriftung liegen. */
.ki-hinweis--oben {
  top: clamp(4.5rem, 9vh, 6.5rem);
  bottom: auto;
}
/* Am Handy steht rechts oben der Termin-Knopf – dort würde die
   Kennzeichnung direkt darunter kleben. */
@media (max-width: 780px) {
  .ki-hinweis--oben {
    left: var(--rand);
    right: auto;
  }
}
.ki-hinweis--links {
  left: var(--rand);
  right: auto;
}

/* Rahmen nur um das Bild, damit die Kennzeichnung nicht auf der
   Bildunterschrift landet. */
.bild-rahmen {
  position: relative;
  display: block;
}