/* ==========================================================================
   JULIAN MÜHL — Premium Link-in-Bio Landingpage
   styles.css

   Aufbau dieser Datei (von oben nach unten):
   1. Design-Tokens (CSS-Variablen)   -> hier änderst du Farben/Schriften/Abstände
   2. Reset & Grundeinstellungen
   3. Typografie
   4. Layout-Grundgerüst
   5. Komponenten (Header, Buttons, Social-Icons, Footer)
   6. Animationen
   7. Responsive Anpassungen
   8. Zugänglichkeit (Fokus, reduced motion, etc.)

   Eine ausführliche, leicht verständliche Erklärung aller Werte findest du
   in der README.md im Hauptordner.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN-TOKENS
   Alle Farben, Schriften und Abstände werden zentral hier definiert.
   Wenn du z. B. die Markenfarbe ändern willst, reicht es, sie hier
   einmal anzupassen — der Rest der Seite übernimmt den neuen Wert
   automatisch.
   -------------------------------------------------------------------------- */
:root {
  /* ---- Farben (vorgegebene Corporate-Identity-Farben) ---- */
  --color-bg-top: #E3BC90;         /* Hintergrundverlauf: oben */
  --color-bg-bottom: #936245;      /* Hintergrundverlauf: unten */
  --color-button: #111A32;         /* Button-Hintergrund (dunkles Marineblau) */
  --color-button-hover: #182449;   /* minimal aufgehellt für Hover-Feedback */
  --color-button-primary: #9e5b41;       /* Matt-Copper-Variante: hebt den wichtigsten CTA hervor (CD-konform, weiß lesbar) */
  --color-button-primary-hover: #8a4f38; /* etwas dunkler für Hover-Feedback */
  --color-button-text: #FFFFFF;    /* Button-Schrift */
  --color-text: #111111;           /* Fließtext / Überschriften */
  --color-text-muted: rgba(17, 17, 17, 0.62); /* Untertitel, dezentere Texte */
  --color-focus-ring: #FFFFFF;     /* Fokus-Ring für Tastaturnavigation */

  /* Icons: dunkelblau, im Hover weiß (siehe Vorgabe) */
  --color-icon: #111A32;
  --color-icon-hover: #FFFFFF;
  --color-icon-bg-hover: rgba(17, 26, 50, 0.92);

  /* ---- Typografie ----
     Titel und Untertitel werden NICHT mehr als Live-Text in
     Baskerville gesetzt, sondern als Vektorgrafik ausgeliefert
     (assets/images/brand-title.svg / brand-subtitle.svg, direkt aus
     "Baskerville Regular" in Pfade umgewandelt). Grund: "Baskerville"
     ist eine macOS/iOS-Systemschrift und auf Windows/Android schlicht
     nicht installiert — als Vektor sieht der Schriftzug auf JEDEM
     Gerät exakt gleich aus, ganz ohne Font-Fallback-Risiko. Der
     eigentliche Text bleibt für Screenreader/SEO als unsichtbarer
     .sr-only-Text erhalten (siehe index.html).
     Brother 1816 ist eine kostenpflichtige Schrift und liegt diesem
     Projekt nicht bei — der Button-Stack fällt automatisch auf eine
     hochwertige Systemschrift zurück. Sobald du die lizenzierte
     Font-Datei hast, siehe Abschnitt "OPTIONALE WEBFONTS" weiter unten. */
  --font-button: 'Brother 1816', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: var(--font-button);

  /* Fluide, responsive Schriftgrößen (clamp: min, bevorzugt, max) */
  --font-size-button-title: clamp(1rem, 0.4vw + 0.9rem, 1.0625rem);
  --font-size-button-eyebrow: clamp(0.6875rem, 0.2vw + 0.65rem, 0.75rem);

  /* ---- Abstände (Spacing-Skala) ---- */
  --spacing-2xs: 0.5rem;   /* 8px */
  --spacing-xs: 0.75rem;   /* 12px */
  --spacing-sm: 1rem;      /* 16px */
  --spacing-md: 1.5rem;    /* 24px */
  --spacing-lg: 2.5rem;    /* 40px */
  --spacing-xl: 4rem;      /* 64px */
  --spacing-2xl: 6rem;     /* 96px */

  /* ---- Radius & Schatten ---- */
  --radius: 22px;
  --radius-icon: 14px;
  --shadow-button: 0 8px 20px -4px rgba(17, 26, 50, 0.35);
  --shadow-button-hover: 0 16px 36px -6px rgba(17, 26, 50, 0.45);
  --shadow-soft: 0 1px 2px rgba(17, 17, 17, 0.06);

  /* ---- Layout ---- */
  --content-max-width: 650px;
  --button-max-width: 600px;

  /* Feste, absolute Maße für ALLE Buttons — bewusst NICHT responsiv
     unterschiedlich, damit wirklich jeder der sechs Buttons zu jedem
     Zeitpunkt exakt gleich groß ist (keine Ausnahme, unabhängig von
     Textlänge oder Viewport-Breite). */
  --button-min-height: 84px;
  --button-padding-y: 24px;
  --button-padding-x: 32px;

  --social-icon-touch: 76px;
  --social-icon-size: 34px;

  /* Marken-Kopf (Titel/Untertitel) als Vektorgrafik, siehe Abschnitt 3.
     Titel bewusst kompakter/schmaler als zuvor (Baskerville Regular statt
     SemiBold). Die Breiten sind proportional zueinander (Verhältnis exakt
     aus der Vektor-Vorlage übernommen), damit beide Zeilen bei jeder
     Bildschirmgröße im selben Verhältnis zueinander skalieren. */
  --brand-title-width: clamp(260px, 64vw, 480px);
  --brand-subtitle-width: clamp(233px, 57.5vw, 431px);

  /* Fidano-Logo im Footer: ca. 75 % der Button-Breite (600px) */
  --footer-logo-width: clamp(210px, 74vw, 450px);

  /* Rundes Hero-Portrait ueber dem Namen. Etwas groesser als zuvor (wirkte
     vorher zu klein), aber bewusst schmaler als der Namenszug darunter, damit
     es die Titelbreite nicht erreicht. Bleibt kompakt genug, dass der erste
     Button auf dem iPhone schnell erreichbar ist (176px mobil -> 252px Desktop). */
  --portrait-size: clamp(176px, 48vw, 224px);

  /* ---- Bewegung / Timing ---- */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 200ms;
  --transition-base: 280ms;
}

/* ---------------------------------------------------------------------
   OPTIONALE WEBFONTS
   Titel und Untertitel sind fest auf Baskerville (Systemschrift) gesetzt
   und benötigen keine zusätzliche Font-Datei. Nur für die Buttons gilt:
   sobald du die lizenzierte Datei für "Brother 1816" besitzt, lege sie
   unter assets/fonts/ ab, kommentiere die Regel unten ein (die zwei
   Sternchen "/*" und "*​/" entfernen) und trage den korrekten Dateinamen
   ein. Mehr dazu in der README.md.
----------------------------------------------------------------------

@font-face {
  font-family: 'Brother 1816';
  src: url('assets/fonts/Brother1816-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

---------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. RESET & GRUNDEINSTELLUNGEN
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Verhindert horizontales Scrollen auf jedem Gerät */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Der weiche, markante Hintergrundverlauf – auf der gesamten Seite.
     Diagonal (135deg = oben-links nach unten-rechts) statt streng
     vertikal, für eine lockerere, dynamischere Wirkung. Farbwerte
     unverändert (hell oben/links -> dunkel unten/rechts). */
  background: linear-gradient(135deg, var(--color-bg-top) 0%, var(--color-bg-bottom) 100%);
  background-attachment: fixed;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

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

ul {
  list-style: none;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAFIE
   Titel (Baskerville SemiBold) und Untertitel (Baskerville Regular) sind
   als Vektor-SVG eingebettet (in Pfade umgewandelt) — dadurch pixelgenau
   auf jedem Gerät, unabhängig von installierten Systemschriften. Der
   echte Text bleibt per .sr-only für Screenreader/SEO erhalten.
   Beide sind in vollem --color-text (#111111) gesetzt, nicht gedämpft,
   damit sie gegen den Verlauf klar erkennbar bleiben; ein sehr dezenter
   Schlagschatten gibt zusätzlich etwas Tiefe/Präsenz.
   -------------------------------------------------------------------------- */
.name {
  display: block;
  width: var(--brand-title-width);
  color: var(--color-text);
  margin-inline: auto;
  filter: drop-shadow(0 2px 5px rgba(17, 17, 17, 0.16));
}

.subtitle {
  display: block;
  width: var(--brand-subtitle-width);
  color: var(--color-text);
  margin-top: var(--spacing-sm);
  margin-inline: auto;
  filter: drop-shadow(0 1px 3px rgba(17, 17, 17, 0.12));
}

.name svg,
.subtitle svg {
  display: block;
  width: 100%;
  height: auto;
  /* Verhindert, dass Browser den (per Vorlage bereits mit Sicherheitsrand
     versehenen) Schriftzug oder seinen Schlagschatten an der SVG-eigenen
     Standard-Overflow-Grenze abschneiden. */
  overflow: visible;
}

/* --------------------------------------------------------------------------
   4. LAYOUT-GRUNDGERÜST
   -------------------------------------------------------------------------- */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  width: 100%;
  padding-inline: var(--spacing-md);
}

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. KOMPONENTEN
   -------------------------------------------------------------------------- */

/* ---- Header ---- */
.site-header {
  width: 100%;
  text-align: center;
  /* Etwas reduziert gegenueber der Version ohne Portrait: das runde
     Hero-Bild sitzt jetzt ganz oben und uebernimmt den optischen Anker,
     daher braucht es darueber weniger Leerraum. Haelt zugleich den ersten
     CTA auf dem iPhone in gut erreichbarer Naehe. */
  padding-top: clamp(3.25rem, 9vh, 6rem);
  /* Großzügiger Abstand zum ersten Button, damit der Kopfbereich
     (Portrait + Titel + Untertitel) klar für sich steht, statt an den
     Button-Stack heranzurücken. */
  padding-bottom: var(--spacing-2xl);
}

/* ---- Portrait (rundes Hero-Bild ueber dem Namen) ---- */
.portrait {
  width: var(--portrait-size);
  height: var(--portrait-size);
  margin-inline: auto;
  /* Abstand zum Namen: kompakter als der Kopfbereich-Abstand insgesamt,
     damit Portrait und Name als eine Einheit wirken. */
  margin-bottom: var(--spacing-lg);
  border-radius: 50%;
  overflow: hidden;
  /* Weicher, tiefliegender Schatten in der Marken-Marineblau-Familie
     (gleiche Sprache wie --shadow-button) plus eine hauchduenne, helle
     Kontur, die das Portrait dezent vom Verlauf abhebt — kein harter
     Rahmen, kein Glassmorphism. */
  box-shadow:
    0 18px 40px -14px rgba(17, 26, 50, 0.45),
    0 4px 12px -6px rgba(17, 26, 50, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.45);
  /* Dezente Grundflaeche, waehrend das Bild laedt (kein harter Sprung). */
  background-color: rgba(255, 255, 255, 0.18);
}

.portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Das Bild ist bereits quadratisch und fertig gerahmt (Kopf zentriert,
     Haende bewusst weggeschnitten), daher zentriert einsetzen — kein
     unguenstiger Crop, keine Verzerrung. */
  object-position: 50% 50%;
}

/* ---- Buttons (Link-Liste) ---- */
.link-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* WICHTIG: "stretch" statt "center" — sonst schrumpft jedes <li> auf
     die Breite seines Textinhalts (Flexbox-Standardverhalten für
     Cross-Axis-Größe), und "width: 100%" am Button greift dadurch
     effektiv ins Leere. Erst "stretch" gibt jedem <li> die volle
     Breite, wodurch alle sechs Buttons wirklich identisch breit
     werden. Die Zentrierung übernimmt stattdessen der Button selbst
     via margin-inline: auto. */
  align-items: stretch;
  gap: var(--spacing-md);
  /* Kein eigener Abstand nach unten mehr: der Abstand zur Social-Reihe
     entsteht jetzt durch den nachfolgenden Direktkontakt-Block bzw. dessen
     Abschluss-Abstand (siehe .link-list--contact). */
  padding-bottom: 0;
}

/* Primär-CTA: der wichtigste Button (Kennenlerngespräch Vermögensaufbau)
   wird in Matt Copper hervorgehoben, damit der Blick zum Geld-Termin geführt
   wird. Alle Maße bleiben identisch zu den übrigen Buttons. */
.link-button.link-button--primary {
  background-color: var(--color-button-primary);
  /* Etwas kräftigerer, kupfergetönter Schatten: der Primär-CTA "schwebt"
     minimal stärker als die übrigen Buttons und zieht so den Blick. */
  box-shadow: 0 12px 28px -8px rgba(158, 91, 65, 0.5);
}

.link-button.link-button--primary:hover,
.link-button.link-button--primary:focus-visible {
  background-color: var(--color-button-primary-hover);
  box-shadow: 0 20px 44px -10px rgba(158, 91, 65, 0.6);
  transform: scale(1.022);
}

.link-button--primary .link-button__eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

/* Direktkontakt-Block (WhatsApp + Kontakt speichern) */
.link-group-label {
  margin: var(--spacing-xl) auto var(--spacing-md);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--font-size-button-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

.link-list--contact {
  padding-bottom: var(--spacing-2xl);
}

/* Kontakt-Buttons: Icon + Text nebeneinander statt Eyebrow/Titel untereinander. */
.link-button.link-button--contact {
  flex-direction: row;
  gap: 0.65rem;
}

.link-button__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.link-button__icon svg {
  width: 100%;
  height: 100%;
}

/* "Kontakt speichern": sekundärer Ghost-Button (dezent, umrandet). */
.link-button.link-button--ghost {
  background-color: transparent;
  color: var(--color-button);
  box-shadow: none;
  border: 1.5px solid rgba(17, 26, 50, 0.35);
}

.link-button.link-button--ghost:hover,
.link-button.link-button--ghost:focus-visible {
  background-color: rgba(17, 26, 50, 0.06);
  border-color: var(--color-button);
  color: var(--color-button);
}

.link-button {
  width: 100%;
  max-width: var(--button-max-width);
  min-height: var(--button-min-height);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: var(--button-padding-y) var(--button-padding-x);
  background-color: var(--color-button);
  color: var(--color-button-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-button);
  text-align: center;
  transform: translateZ(0) scale(1);
  transition:
    transform var(--transition-base) var(--ease-premium),
    box-shadow var(--transition-base) var(--ease-premium),
    background-color var(--transition-base) var(--ease-premium);

  /* Startzustand für die Lade-Animation (siehe Abschnitt 6) */
  opacity: 0;
  transform: translateY(14px);
}

.link-button:hover,
.link-button:focus-visible {
  transform: scale(1.015);
  box-shadow: var(--shadow-button-hover);
  background-color: var(--color-button-hover);
}

.link-button:active {
  transform: scale(0.99);
}

.link-button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.link-button__eyebrow {
  font-family: var(--font-button);
  font-size: var(--font-size-button-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.link-button__title {
  font-family: var(--font-button);
  font-size: var(--font-size-button-title);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

/* ---- Social-Icons ---- */
.social-list {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Enger als vorher: die Icons sollen als zusammenhängende Gruppe
     wirken, nicht einzeln verstreut. */
  gap: var(--spacing-sm);
  /* Bewusst knapp: Icons und Fidano-Logo sollen als zusammengehöriger
     Abschluss der Seite wirken, nicht durch viel Leerraum getrennt. */
  padding-bottom: var(--spacing-sm);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--transition-base) var(--ease-premium),
    transform var(--transition-base) var(--ease-premium);
}

.social-list.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--social-icon-touch);
  height: var(--social-icon-touch);
  border-radius: var(--radius-icon);
  color: var(--color-icon);
  transition:
    color var(--transition-fast) var(--ease-premium),
    background-color var(--transition-fast) var(--ease-premium),
    transform var(--transition-fast) var(--ease-premium);
}

.social-link svg {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
}

.social-link:hover,
.social-link:focus-visible {
  color: var(--color-icon-hover);
  background-color: var(--color-icon-bg-hover);
  transform: scale(1.08);
}

.social-link:focus-visible {
  outline: 2px solid var(--color-button);
  outline-offset: 2px;
}

/* Zustand für den TikTok-Link, dessen finale URL noch fehlt */
.social-link[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

.social-link[aria-disabled="true"]:hover,
.social-link[aria-disabled="true"]:focus-visible {
  color: var(--color-icon);
  background-color: transparent;
  transform: none;
}

/* ---- Footer ---- */
.site-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-2xl);
}

.footer-logo-link {
  display: inline-flex;
  border-radius: var(--radius-icon);
  transition: opacity var(--transition-fast) var(--ease-premium);
}

.footer-logo-link:hover,
.footer-logo-link:focus-visible {
  opacity: 0.82;
}

.footer-logo-link:focus-visible {
  outline: 2px solid var(--color-button);
  outline-offset: 4px;
}

.footer-logo {
  /* Etwa 75 % der Button-Breite (--button-max-width: 600px) — deutlich
     sichtbar, aber weiterhin kleiner als der Haupttitel. */
  width: var(--footer-logo-width);
  height: auto;
}

/* --------------------------------------------------------------------------
   6. ANIMATIONEN (Laden der Seite)
   Die eigentliche Steuerung (Klassen togglen, Verzögerung pro Button)
   übernimmt script.js. Hier definieren wir nur, WIE es aussieht.
   -------------------------------------------------------------------------- */
.site-header {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 600ms var(--ease-premium),
    transform 600ms var(--ease-premium);
}

.site-header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.link-button.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   7. RESPONSIVE ANPASSUNGEN
   Die Seite ist "Mobile First" aufgebaut — die Basis-Styles oben gelten
   bereits für Smartphones. Ab hier verfeinern wir für größere Screens.
   -------------------------------------------------------------------------- */

/* Tablet */
@media (min-width: 640px) {
  :root {
    --spacing-md: 1.75rem;
  }

  /* Bewusst KEINE abweichende Button-Höhe/Padding ab hier: alle sechs
     Buttons bleiben auf jedem Breakpoint exakt gleich groß. */
}

/* Desktop */
@media (min-width: 1024px) {
  .site-header {
    /* Proportional zur reduzierten Basis (siehe Kommentar am .site-header):
       etwas mehr Luft als auf Mobile, aber weniger als vor dem Portrait. */
    padding-top: clamp(4rem, 10vh, 7rem);
  }

  /* Auf grossen Screens darf das Portrait etwas mehr Praesenz haben
     (nie kleiner als der mobile Maximalwert von 224px), bleibt aber klar
     schmaler als der Namenszug. */
  :root {
    --portrait-size: clamp(224px, 18vw, 252px);

    /* Breiterer Button-/Content-Bereich ab Desktop: im breiten Fenster
       wirkten die Buttons zu schmal (wie in der Mobilansicht). Der Bereich
       waechst dezent mit der Fensterbreite und bleibt klar begrenzt, damit
       die Buttons ruhig und gut lesbar bleiben. Mobil/Tablet unveraendert. */
    --content-max-width: clamp(680px, 56vw, 820px);
    --button-max-width: clamp(640px, 53vw, 760px);
  }

  /* Der zentrierte Flex-Container (.container, align-items: center) laesst
     seine Kinder normalerweise auf Inhaltsbreite schrumpfen — dadurch waren
     die Buttons auf dem Desktop nur so breit wie ihr Text (also gefuehlt so
     schmal wie in der Mobilansicht). Hier bekommt die Button-Liste eine
     definierte Breite, damit die Buttons den breiteren Desktop-Raum nutzen.
     Mobil/Tablet bleibt unveraendert (dort ist der Container ohnehin schmaler
     als diese Breite). */
  .link-list {
    width: var(--button-max-width);
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   8. ZUGÄNGLICHKEIT
   -------------------------------------------------------------------------- */

/* Nutzer:innen, die reduzierte Bewegung bevorzugen, bekommen keine
   Animationen — Inhalte erscheinen aber trotzdem (kein Ausblenden). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header,
  .link-button,
  .social-list,
  .footer-logo-link {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Sichtbarer, aber dezenter Fokusring für alle interaktiven Elemente,
   die keine eigene Regel definiert haben (Tastaturnavigation). */
:focus-visible {
  outline: 2px solid var(--color-button);
  outline-offset: 2px;
}

/* Screenreader-only: versteckt Inhalte visuell, hält sie aber für
   assistive Technologien zugänglich (z. B. Sprungmarke, Kontextlabel). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   9. RECHTSTEXTE (Impressum / Datenschutz)
   Eigenstaendige, gut lesbare Textseiten auf dem Marken-Verlauf: der Inhalt
   liegt auf einer ruhigen, hellen „Papier"-Karte, damit langer Fliesstext
   auch ueber dem dunkleren Verlaufsende klar lesbar bleibt.
   -------------------------------------------------------------------------- */
.legal-wrap {
  width: 100%;
  padding-inline: var(--spacing-md);
}

.legal {
  width: 100%;
  max-width: 780px;
  margin: clamp(2.5rem, 7vh, 5rem) auto clamp(3rem, 8vh, 6rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: rgba(250, 246, 240, 0.94);
  border: 1px solid rgba(17, 26, 50, 0.08);
  border-radius: 18px;
  box-shadow: 0 20px 50px -24px rgba(17, 26, 50, 0.4);
}

.legal-back {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: rgba(17, 26, 50, 0.75);
  text-decoration: none;
}

.legal-back:hover,
.legal-back:focus-visible {
  color: var(--color-button);
  text-decoration: underline;
}

.legal h1 {
  font-family: 'Baskerville', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
  color: var(--color-button);
  margin-bottom: 1.5rem;
}

.legal h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: var(--color-button);
}

.legal h2.optional {
  color: rgba(17, 26, 50, 0.6);
}

.legal p,
.legal address,
.legal li {
  line-height: 1.7;
  font-size: 1rem;
  color: rgba(17, 17, 17, 0.86);
}

.legal address {
  font-style: normal;
}

.legal a {
  color: var(--color-button);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal .optional em,
.legal .legal-note {
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.92rem;
}

.legal-note {
  margin-top: 2rem;
}

/* Platzhalter deutlich markieren (vor dem Livegang ausfuellen/entfernen). */
.legal .tbd {
  background: rgba(168, 101, 76, 0.16);
  color: #7a4632;
  padding: 0.05em 0.4em;
  border-radius: 5px;
  font-style: normal;
}

/* Dezente Rechtslinks im Footer der Startseite. */
.legal-links {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.legal-links a {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(17, 26, 50, 0.7);
  text-decoration: none;
}

.legal-links a:hover,
.legal-links a:focus-visible {
  color: var(--color-button);
  text-decoration: underline;
}

/* Rechtslinks am Fuss einer Rechtstext-Seite: linksbuendig, dezent abgesetzt. */
.legal .legal-links {
  justify-content: flex-start;
  gap: var(--spacing-md);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(17, 26, 50, 0.12);
}

/* --------------------------------------------------------------------------
   10. 404-SEITE
   Ruhige, mittige Fehlerseite im Marken-Look mit klarem Weg zurück.
   -------------------------------------------------------------------------- */
.notfound {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-md);
}

.notfound__code {
  font-family: 'Baskerville', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(4rem, 16vw, 7rem);
  line-height: 1;
  color: var(--color-button-primary);
  filter: drop-shadow(0 2px 5px rgba(17, 17, 17, 0.12));
}

.notfound__title {
  font-family: 'Baskerville', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  color: var(--color-text);
  margin-top: var(--spacing-sm);
}

.notfound__text {
  max-width: 30rem;
  margin: var(--spacing-sm) auto var(--spacing-lg);
  color: rgba(17, 17, 17, 0.7);
  line-height: 1.6;
}

.notfound__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 var(--spacing-lg);
  background-color: var(--color-button-primary);
  color: var(--color-button-text);
  border-radius: var(--radius);
  font-family: var(--font-button);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 28px -8px rgba(158, 91, 65, 0.5);
  transition:
    transform var(--transition-base) var(--ease-premium),
    box-shadow var(--transition-base) var(--ease-premium),
    background-color var(--transition-base) var(--ease-premium);
}

.notfound__cta:hover,
.notfound__cta:focus-visible {
  background-color: var(--color-button-primary-hover);
  box-shadow: 0 20px 44px -10px rgba(158, 91, 65, 0.6);
  transform: scale(1.022);
}