/* ==========================================================================
   GEOSight — Website-Stylesheet
   Grundlage: GEOSight_style_guide.md (Version 1.0).
   Alle Tokens und Komponentenwerte sind zeichengenau aus dem Guide uebernommen.
   Die Abschnittsnummern in den Kommentaren verweisen auf den Guide.
   Abgeleitete Werte (im Guide nicht definiert) sind als solche gekennzeichnet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */

/* §3 Primaere Farben */
:root {
  --dust-grey: #dad7cd;
  --dry-sage: #a3b18a;
  --fern: #588157;
  --hunter-green: #3a5a40;
  --pine-teal: #344e41;
}

/* §4 Erweiterte UI-Farben */
:root {
  --background-primary: #f7f6f2;
  --background-secondary: #efeee9;
  --background-elevated: rgba(255, 255, 255, 0.78);

  --surface-white: #ffffff;
  --surface-muted: #f2f1ec;
  --surface-dark: #263c31;

  --text-primary: #24342b;
  --text-secondary: #5f6d64;
  --text-muted: #879087;
  --text-inverse: #f8faf8;

  --border-light: rgba(52, 78, 65, 0.10);
  --border-medium: rgba(52, 78, 65, 0.18);
  --border-strong: rgba(52, 78, 65, 0.30);

  --success: #4f7a55;
  --success-light: #e7f0e5;

  --warning: #a87932;
  --warning-light: #f8efd9;

  --error: #ad4b45;
  --error-light: #f8e8e6;

  --info: #49727e;
  --info-light: #e5eff1;
}

/* §6 Gradients */
:root {
  --gradient-primary: linear-gradient(
    135deg,
    #344e41 0%,
    #3a5a40 55%,
    #588157 100%
  );

  --gradient-soft: linear-gradient(
    135deg,
    #f7f6f2 0%,
    #dad7cd 52%,
    #e6eadf 100%
  );

  --gradient-glow: radial-gradient(
    circle at top right,
    rgba(163, 177, 138, 0.38),
    transparent 58%
  );

  --gradient-hero:
    radial-gradient(
      circle at 82% 18%,
      rgba(163, 177, 138, 0.35),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #f8f7f3 0%,
      #eef1e8 50%,
      #dad7cd 100%
    );
}

/* §7 Typografische Skala */
:root {
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --font-size-4xl: 3.75rem;
  --font-size-5xl: 5rem;
}

/* §8 Layoutsystem */
:root {
  --container-max: 1280px;
  --container-content: 1120px;
  --container-text: 760px;
}

/* §9 Spacing-System */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
}

/* §10 Border Radius */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
}

/* §11 Schatten */
:root {
  --shadow-sm:
    0 1px 2px rgba(26, 44, 34, 0.04),
    0 4px 12px rgba(26, 44, 34, 0.04);

  --shadow-md:
    0 8px 24px rgba(26, 44, 34, 0.07),
    0 2px 8px rgba(26, 44, 34, 0.04);

  --shadow-lg:
    0 20px 50px rgba(26, 44, 34, 0.10),
    0 4px 16px rgba(26, 44, 34, 0.05);
}

/* §26 Animationen */
:root {
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}

/* §28 Breakpoints */
:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Abgeleitete Tokens — im Guide nicht definiert.
   --link: Fern (#588157) erreicht auf --background-primary nur 4.13:1 und
   verfehlt damit WCAG 2.2 AA fuer Fliesstext (§27). Fuer Textlinks wird daher
   Hunter Green verwendet, Fern bleibt fuer Icons, Fokusring und Diagramme.
   --grid-gutter: Gutter aus §8 (Mobile 16px, Tablet 20px, Desktop 24px). */
:root {
  --link: #3a5a40;
  --link-hover: #344e41;
  --focus-ring: #588157;
  --grid-gutter: 16px;
  --chart-track: rgba(52, 78, 65, 0.10);
  --status-neutral-bg: #ecece7;
  --overlay-dark: rgba(26, 44, 34, 0.55);

  /* Milchglas ueber den gesperrten Inhalten (§12). Der Schleier ist bewusst
     dicht: die Platzhalterflaeche darunter darf nicht durchschlagen, damit die
     Schrift darauf in beiden Schemata sicher ueber 4.5:1 bleibt (§27). */
  --glass-veil: rgba(255, 255, 255, 0.78);
  --glass-veil-border: rgba(255, 255, 255, 0.55);
  --glass-veil-solid: #f6f7f4;
  --skeleton-bar: rgba(52, 78, 65, 0.14);

  /* Statusicons brauchen nach WCAG 1.4.11 nur 3:1, aber gegen die dunkle
     Kartenflaeche reichen die Statusfarben nicht. Deshalb je Schema eigene
     Icontoene — im Hellschema die Statusfarben, im Dunkelschema die
     aufgehellten Toene der Statuschips. */
  --icon-success: #4f7a55;
  --icon-warning: #a87932;
  --icon-error: #ad4b45;
}

/* --------------------------------------------------------------------------
   2. Dark Mode (§29)
   -------------------------------------------------------------------------- */

/* §29 — die elf Tokens des Guides, unveraendert */
[data-theme="dark"] {
  --background-primary: #17251e;
  --background-secondary: #1d2e25;
  --background-elevated: rgba(38, 60, 49, 0.82);

  --surface-white: #263c31;
  --surface-muted: #2e4639;

  --text-primary: #f2f5f1;
  --text-secondary: #c1cbc2;
  --text-muted: #92a096;

  --border-light: rgba(218, 215, 205, 0.10);
  --border-medium: rgba(218, 215, 205, 0.18);
}

/* Abgeleitet — §29 definiert diese Werte nicht. */
[data-theme="dark"] {
  --surface-dark: #142019;
  --border-strong: rgba(218, 215, 205, 0.30);
  --link: #a3b18a;
  --link-hover: #c3ceb0;
  --focus-ring: #a3b18a;
  --chart-track: rgba(218, 215, 205, 0.14);
  --status-neutral-bg: rgba(218, 215, 205, 0.12);
  --overlay-dark: rgba(11, 20, 15, 0.62);

  --glass-veil: rgba(23, 37, 30, 0.80);
  --glass-veil-border: rgba(218, 215, 205, 0.14);
  --glass-veil-solid: #1c2b23;
  --skeleton-bar: rgba(218, 215, 205, 0.14);

  --icon-success: #cbe3c9;
  --icon-warning: #f0d9a8;
  --icon-error: #f3c4c0;
}

/* Ohne explizite Nutzerwahl folgt die Seite dem Systemschema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background-primary: #17251e;
    --background-secondary: #1d2e25;
    --background-elevated: rgba(38, 60, 49, 0.82);

    --surface-white: #263c31;
    --surface-muted: #2e4639;

    --text-primary: #f2f5f1;
    --text-secondary: #c1cbc2;
    --text-muted: #92a096;

    --border-light: rgba(218, 215, 205, 0.10);
    --border-medium: rgba(218, 215, 205, 0.18);

    --surface-dark: #142019;
    --border-strong: rgba(218, 215, 205, 0.30);
    --link: #a3b18a;
    --link-hover: #c3ceb0;
    --focus-ring: #a3b18a;
    --chart-track: rgba(218, 215, 205, 0.14);
    --status-neutral-bg: rgba(218, 215, 205, 0.12);
    --overlay-dark: rgba(11, 20, 15, 0.62);

    --glass-veil: rgba(23, 37, 30, 0.80);
    --glass-veil-border: rgba(218, 215, 205, 0.14);
    --glass-veil-solid: #1c2b23;
    --skeleton-bar: rgba(218, 215, 205, 0.14);

    --icon-success: #cbe3c9;
    --icon-warning: #f0d9a8;
    --icon-error: #f3c4c0;
  }
}

/* --------------------------------------------------------------------------
   3. Basis und Typografie (§7)
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    sans-serif;
}

body {
  margin: 0;
  background: var(--background-primary);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color var(--duration-normal) var(--ease-standard),
    color var(--duration-normal) var(--ease-standard);
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.02;
  font-weight: 650;
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  font-weight: 620;
  letter-spacing: -0.035em;
}

p {
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
  text-wrap: balance;
}

h3 {
  font-size: var(--font-size-lg);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
}

h4 {
  font-size: var(--font-size-base);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--link);
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--link-hover);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

strong {
  font-weight: 600;
  color: var(--text-primary);
}

svg {
  display: block;
  flex: none;
}

/* Fokus: im Guide nicht spezifiziert (§27 nennt nur „klare Tastaturfokusse"). */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  transform: translateY(-200%);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  background: var(--hunter-green);
  color: #ffffff;
  font-weight: 550;
  text-decoration: none;
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   4. Layout (§8, §9)
   -------------------------------------------------------------------------- */

.container {
  width: min(100% - 40px, 1280px);
  margin-inline: auto;
}

.container--content {
  max-width: var(--container-content);
}

.container--text {
  max-width: var(--container-text);
}

.section {
  padding: var(--space-20) 0;
  border-top: 1px solid var(--border-light);
}

.section--muted {
  background: var(--background-secondary);
}

.section--plain {
  background: var(--background-primary);
}

.section-head {
  max-width: var(--container-text);
  margin-bottom: var(--space-12);
}

.section-head p {
  font-size: var(--font-size-md);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--hunter-green);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow svg {
  color: var(--fern);
}

/* Hunter Green erreicht auf den §29-Hintergruenden nur 1.85–2.06:1.
   Dry Sage liegt bei 6.27–6.98:1 und erfuellt damit AA. */
[data-theme="dark"] .eyebrow {
  color: var(--dry-sage);
}

[data-theme="dark"] .eyebrow svg {
  color: var(--dry-sage);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eyebrow,
  :root:not([data-theme="light"]) .eyebrow svg {
    color: var(--dry-sage);
  }
}

.grid {
  display: grid;
  gap: var(--grid-gutter);
}

.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   5. Komponenten
   -------------------------------------------------------------------------- */

/* §12 Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .glass {
  background: var(--background-elevated);
  border-color: var(--border-medium);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glass {
    background: var(--background-elevated);
    border-color: var(--border-medium);
  }
}

/* §13 Navigation */
.navbar {
  min-height: 68px;
  background: rgba(247, 246, 242, 0.82);
  border: 1px solid rgba(52, 78, 65, 0.08);
  backdrop-filter: blur(18px);
  border-radius: 18px;
}

.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .navbar {
  background: rgba(29, 46, 37, 0.86);
  border-color: var(--border-medium);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navbar {
    background: rgba(29, 46, 37, 0.86);
    border-color: var(--border-medium);
  }
}

.site-header {
  position: sticky;
  top: var(--space-3);
  z-index: 60;
  padding-top: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--font-size-base);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.brand__name {
  white-space: nowrap;
}

.nav-toggle {
  display: none;
}

.nav-menu {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.nav-list a:hover {
  color: var(--link);
  background: var(--surface-muted);
}

.nav-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--background-elevated);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.theme-toggle:hover {
  border-color: var(--dry-sage);
}

.theme-toggle__icon--sun {
  display: none;
}

[data-theme="dark"] .theme-toggle__icon--sun {
  display: block;
}

[data-theme="dark"] .theme-toggle__icon--moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--sun {
    display: block;
  }

  :root:not([data-theme="light"]) .theme-toggle__icon--moon {
    display: none;
  }
}

[data-theme="light"] .theme-toggle__icon--sun {
  display: none;
}

[data-theme="light"] .theme-toggle__icon--moon {
  display: block;
}

/* §14 Buttons
   Die Basisklasse steht bewusst VOR den Varianten. .button setzt einen
   transparenten Rahmen als Grundwert, den .button-secondary mit dem Wert aus
   §14 ueberschreibt. Stuende .button danach, gewaenne bei gleicher
   Spezifitaet die spaetere Regel und der Sekundaer-Button bliebe rahmenlos. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.button-primary {
  background: #3a5a40;
  color: #ffffff;
  border-radius: 12px;
  padding: 13px 20px;
  font-weight: 550;
  box-shadow: 0 8px 20px rgba(58, 90, 64, 0.18);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.72);
  color: #344e41;
  border: 1px solid rgba(52, 78, 65, 0.16);
  border-radius: 12px;
  padding: 13px 20px;
}

.button-primary:hover {
  background: var(--pine-teal);
  color: #ffffff;
  transform: translateY(-1px);
}

.button-secondary:hover {
  border-color: var(--dry-sage);
  color: var(--pine-teal);
  transform: translateY(-1px);
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

[data-theme="dark"] .button-secondary {
  background: var(--background-elevated);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button-secondary {
    background: var(--background-elevated);
    color: var(--text-primary);
    border-color: var(--border-medium);
  }
}

/* §15 Formulare */
.input {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(52, 78, 65, 0.14);
  background: rgba(255, 255, 255, 0.82);
  color: #24342b;
}

.input:focus {
  border-color: #588157;
  box-shadow: 0 0 0 4px rgba(88, 129, 87, 0.14);
}

.input {
  width: 100%;
  font-family: inherit;
  font-size: var(--font-size-base);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

/* Die §15-Optik bleibt auf :focus; der sichtbare Ring kommt zusaetzlich
   bei Tastaturfokus und wird nicht mehr von outline: none geschlagen. */
.input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.input::placeholder {
  color: var(--text-secondary);
  opacity: 0.75;
}

[data-theme="dark"] .input {
  background: var(--surface-muted);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .input {
    background: var(--surface-muted);
    color: var(--text-primary);
    border-color: var(--border-medium);
  }
}

.field {
  display: block;
  text-align: left;
}

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 550;
}

.field__hint {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* §16 Karten */
.card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(52, 78, 65, 0.10);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* Klickbare Karten heben sich beim Hover maximal 2 px an (§16). */
.card--interactive {
  transition:
    transform var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
}

.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-medium);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--success-light);
  color: var(--hunter-green);
}

.card p {
  font-size: var(--font-size-base);
}

[data-theme="dark"] .card {
  background: var(--background-elevated);
  border-color: var(--border-light);
}

[data-theme="dark"] .card__icon {
  background: rgba(163, 177, 138, 0.16);
  color: var(--dry-sage);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card {
    background: var(--background-elevated);
    border-color: var(--border-light);
  }

  :root:not([data-theme="light"]) .card__icon {
    background: rgba(163, 177, 138, 0.16);
    color: var(--dry-sage);
  }
}

/* §17 Statusfarben */
.status-success {
  background: #e7f0e5;
  color: #3a5a40;
}

.status-warning {
  background: #f8efd9;
  color: #855d24;
}

.status-error {
  background: #f8e8e6;
  color: #923d38;
}

.status-neutral {
  background: #ecece7;
  color: #5f6d64;
}

/* Status wird nie allein ueber Farbe transportiert: jeder Chip traegt
   zusaetzlich Icon und Text (§27). */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.5;
}

[data-theme="dark"] .status-success {
  background: rgba(79, 122, 85, 0.24);
  color: #cbe3c9;
}

[data-theme="dark"] .status-warning {
  background: rgba(168, 121, 50, 0.24);
  color: #f0d9a8;
}

[data-theme="dark"] .status-error {
  background: rgba(173, 75, 69, 0.24);
  color: #f3c4c0;
}

[data-theme="dark"] .status-neutral {
  background: var(--status-neutral-bg);
  color: var(--text-secondary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .status-success {
    background: rgba(79, 122, 85, 0.24);
    color: #cbe3c9;
  }

  :root:not([data-theme="light"]) .status-warning {
    background: rgba(168, 121, 50, 0.24);
    color: #f0d9a8;
  }

  :root:not([data-theme="light"]) .status-error {
    background: rgba(173, 75, 69, 0.24);
    color: #f3c4c0;
  }

  :root:not([data-theme="light"]) .status-neutral {
    background: var(--status-neutral-bg);
    color: var(--text-secondary);
  }
}

/* --------------------------------------------------------------------------
   6. Hero (§22, §23)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 160px 0 112px;
  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(163, 177, 138, 0.34),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #f8f7f3 0%,
      #eff1e9 55%,
      #dad7cd 100%
    );
}

.hero {
  border-top: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-glow);
  opacity: 0.5;
  pointer-events: none;
}

[data-theme="dark"] .hero {
  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(163, 177, 138, 0.16),
      transparent 34%
    ),
    linear-gradient(145deg, #1b2b23 0%, #17251e 55%, #1d2e25 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    background:
      radial-gradient(
        circle at 82% 15%,
        rgba(163, 177, 138, 0.16),
        transparent 34%
      ),
      linear-gradient(145deg, #1b2b23 0%, #17251e 55%, #1d2e25 100%);
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-12);
}

/* min-width: 0 verhindert, dass lange Woerter das Grid-Kind aufweiten. */
.hero__content {
  min-width: 0;
}

.hero-title {
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.98;
  font-weight: 650;
  letter-spacing: -0.055em;
}

.hero-title {
  max-width: 15ch;
  margin: 0 0 var(--space-6);
}

.hero__lead {
  max-width: var(--container-text);
  margin: 0 0 var(--space-8);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.hero__trust svg {
  color: var(--fern);
}

/* Kurzanalyse: Eingabe (§15). Die Breite ist begrenzt, damit Feld und Knopf
   auch im breiten Hero eine ruhige Zeile bilden. */
.hero__form {
  max-width: 640px;
  margin: 0 0 var(--space-5);
}

.hero__form-row {
  display: grid;
  gap: var(--space-3);
}

.hero__form .button-primary {
  justify-content: center;
}

/* Nur ohne JavaScript sichtbar: dort sind Feld und Knopf deaktiviert. */
.hero__nojs {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--background-elevated);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.js .hero__nojs {
  display: none;
}

/* --------------------------------------------------------------------------
   6b. Ergebnis der Kurzanalyse (§2.3 Progressive Information)
   Reihenfolge wie in §28 vorgegeben: Score, dann Pruefpunkte, dann das,
   was der vollstaendige Bericht zusaetzlich zeigt.
   -------------------------------------------------------------------------- */

.hero__result {
  position: relative;
  z-index: 1;
  margin-top: var(--space-16);
}

.hero__result[hidden] {
  display: none;
}

.teaser {
  padding: var(--space-6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  background: var(--surface-white);
  box-shadow: var(--shadow-md);
}

.teaser__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-5);
}

.teaser__domain {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.teaser__domain svg {
  flex: none;
  color: var(--fern);
}

.teaser__message {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.teaser__message:not(:empty) {
  margin-bottom: var(--space-4);
}

/* Zustaende. Sichtbar ist immer nur der Block, der zum Zustand gehoert. */
.teaser__pulse,
.teaser__done {
  display: none;
}

.teaser[data-teaser-state="running"] .teaser__pulse {
  display: flex;
}

.teaser[data-teaser-state="done"] .teaser__done {
  display: block;
}

/* §26: keine Bewegung, nur ein ruhiger Helligkeitswechsel. Der Punkt geht
   nie ganz aus, damit nichts blinkt. */
.teaser__pulse {
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.teaser__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fern);
  opacity: 0.55;
  animation: teaser-pulse 1600ms var(--ease-standard) infinite alternate;
}

@keyframes teaser-pulse {
  from {
    opacity: 0.35;
  }

  to {
    opacity: 1;
  }
}

.teaser__grid {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.teaser__subtitle {
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 620;
  letter-spacing: -0.02em;
}

/* Drei Gratis-Pruefpunkte. Der Status steht als Icon, als Text im Chip und
   als Farbe da — Farbe ist nie das einzige Signal (§27). */
.checks {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.check__icon {
  flex: none;
  margin-top: 2px;
}

.check--ok .check__icon {
  color: var(--icon-success);
}

.check--warn .check__icon {
  color: var(--icon-warning);
}

.check--fail .check__icon {
  color: var(--icon-error);
}

.check__body {
  min-width: 0;
}

.check__label {
  display: block;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 600;
}

.check__detail {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.check .status {
  grid-column: 2;
  justify-self: start;
}

/* Gesperrte Inhalte. Unter dem Glas liegt bewusst nur eine Platzhaltergrafik:
   die Befunde selbst werden nicht ausgeliefert. */
.locked {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.locked__card {
  position: relative;
  overflow: hidden;
  min-height: 128px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  background: var(--surface-muted);
}

.locked__skeleton {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
}

.locked__bar {
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--skeleton-bar);
}

.locked__bar:nth-child(2) {
  width: 82%;
}

.locked__bar:nth-child(3) {
  width: 61%;
}

/* Grundzustand ist das opake Panel. Nur wenn der Browser backdrop-filter
   beherrscht, wird daraus echtes Milchglas. */
.locked__glass {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--glass-veil-border);
  border-radius: inherit;
  background: var(--glass-veil-solid);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: center;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .locked__glass {
    background: var(--glass-veil);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

.locked__glass svg {
  flex: none;
  color: var(--text-secondary);
}

/* Der Hook bleibt bewusst sekundaer: die einzige primaere Aktion dieser
   Sektion ist der Analyse-Knopf im Hero (§30 Regel 3). Den sichtbaren Rahmen
   bringt .button-secondary aus §14 mit. */
.teaser__cta {
  margin: 0 0 var(--space-5);
}

.teaser__foot {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.teaser__foot:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Produkt-UI (Hero-Panel und Beispielanalyse, §19, §20)
   -------------------------------------------------------------------------- */

.panel {
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-5);
}

.panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.panel__title svg {
  color: var(--fern);
}

/* Mobil untereinander: nebeneinander bliebe fuer Erklaertext und Status-Chip
   zu wenig Platz. Ab 640px stehen Ring und Text wieder nebeneinander. */
.score-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.score-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background:
    conic-gradient(
      from -90deg,
      var(--fern) 0 calc(var(--score, 0) * 1%),
      var(--chart-track) calc(var(--score, 0) * 1%) 100%
    );
}

.score-ring::before {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: var(--surface-white);
}

.score-ring__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  line-height: 1;
}

.score-ring__number {
  font-size: var(--font-size-3xl);
  font-weight: 650;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

/* 20 px in 600 ist nach WCAG 2.2 kein „large scale text" (dafuer waeren
   >=24 px oder >=18.66 px ab Weight 700 noetig) und braucht deshalb die
   vollen 4.5:1. --text-muted erreicht auf der Ringflaeche nur 3.30:1 (hell)
   bzw. 4.34:1 (dunkel), --text-secondary dagegen 5.44:1 und 7.10:1. */
.score-ring__scale {
  margin-top: var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-secondary);
}

.score-block__body {
  min-width: 0;
}

.score-block__label {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.score-block__note {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.panel__foot {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.panel__foot svg {
  margin-top: 2px;
  color: var(--fern);
}

/* Kennzahlen-Karten (§20) */
.metric {
  gap: var(--space-2);
}

.metric__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 550;
}

.metric__label svg {
  color: var(--fern);
}

.metric__value {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.1;
}

.metric__explain {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.report {
  display: grid;
  gap: var(--grid-gutter);
}

.report__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.report__domain {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.report__domain svg {
  color: var(--fern);
}

.report__meta {
  margin: 0;
  margin-left: auto;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Plattformvergleich (§20) */
.chart__caption {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.bars {
  display: grid;
  gap: var(--space-4);
}

.bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-3);
  align-items: center;
}

.bar__label {
  font-size: var(--font-size-sm);
  font-weight: 550;
  color: var(--text-primary);
}

.bar__value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.bar__track {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--chart-track);
  overflow: hidden;
}

.bar__fill {
  display: block;
  height: 100%;
  width: var(--bar-value, 0%);
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
}

.bar--muted .bar__fill {
  background: var(--dry-sage);
}

/* Empfehlung (§2.4) */
.recommendation {
  gap: var(--space-4);
}

.recommendation__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.recommendation__list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.recommendation__list > div {
  display: grid;
  grid-template-columns: minmax(0, 190px) 1fr;
  gap: var(--space-1) var(--space-4);
}

.recommendation__list dt {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.recommendation__list dd {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.approval {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--warning-light);
  color: #855d24;
  font-size: var(--font-size-sm);
}

.approval svg {
  margin-top: 2px;
  flex: none;
}

[data-theme="dark"] .approval {
  background: rgba(168, 121, 50, 0.18);
  color: #f0d9a8;
  border-color: rgba(168, 121, 50, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .approval {
    background: rgba(168, 121, 50, 0.18);
    color: #f0d9a8;
    border-color: rgba(168, 121, 50, 0.35);
  }
}

.recommendation__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.recommendation__hint {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Aufklappbare Details (§2.3) */
.details {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--surface-white);
}

.details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-4) var(--space-5);
  list-style: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: 550;
  color: var(--text-primary);
  border-radius: var(--radius-lg);
}

.details > summary::-webkit-details-marker {
  display: none;
}

.details > summary:hover {
  color: var(--link);
}

.details > summary svg {
  color: var(--fern);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.details[open] > summary svg {
  transform: rotate(180deg);
}

.details__body {
  padding: 0 var(--space-5) var(--space-5);
}

.spec {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.spec > div {
  display: grid;
  grid-template-columns: minmax(0, 190px) 1fr;
  gap: var(--space-1) var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--font-size-sm);
}

.spec dt {
  font-weight: 600;
  color: var(--text-primary);
}

.spec dd {
  margin: 0;
  color: var(--text-secondary);
}

.note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.note svg {
  margin-top: 2px;
  color: var(--fern);
}

.note:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   8. Weitere Sektionen
   -------------------------------------------------------------------------- */

/* 5 — So funktioniert es */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--grid-gutter);
}

.step {
  position: relative;
  padding-top: var(--space-12);
  border-top: 2px solid var(--border-light);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: calc(-1 * var(--space-5));
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--hunter-green);
  color: #ffffff;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.step h3 {
  margin-bottom: var(--space-2);
}

.step p {
  font-size: var(--font-size-base);
}

.step .status {
  margin-top: var(--space-3);
}

/* 7 — SEO und AI Visibility */
.compare__list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.compare__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.compare__list svg {
  margin-top: 3px;
  color: var(--fern);
}

/* 8 — Datenschutz */
.privacy {
  display: grid;
  gap: var(--space-12);
}

.privacy__list {
  display: grid;
  gap: var(--space-4);
}

.privacy__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--surface-white);
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.privacy__list svg {
  margin-top: 3px;
  color: var(--fern);
}

/* Kein fuenftes Datenschutz-Versprechen, sondern ein neutraler Hinweis:
   steht ausserhalb der Liste und traegt die Status-Optik aus §17. */
/* Haelt Liste und Hinweis als ein Grid-Kind zusammen, damit die zweispaltige
   .privacy-Aufteilung erhalten bleibt. */
.privacy__panel {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
}

.privacy__external {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.5;
}

.privacy__external svg {
  margin-top: 2px;
}

/* 9 — Zielgruppen */
.audience {
  padding-left: var(--space-5);
  border-left: 2px solid var(--dry-sage);
}

.audience h3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.audience h3 svg {
  color: var(--fern);
}

.audience__question {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-weight: 550;
}

.audience p:last-child {
  font-size: var(--font-size-base);
}

/* 10 — Preise */
.plan {
  gap: var(--space-4);
}

.plan--highlight {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.plan__name {
  margin: 0;
}

.plan__price {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.15;
}

.plan__billing {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.plan__features {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  flex: 1;
}

.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.plan__features svg {
  margin-top: 2px;
  color: var(--fern);
}

.plan .button {
  width: 100%;
}

.pricing__note {
  margin-top: var(--space-8);
  font-size: var(--font-size-sm);
}

/* 11 — FAQ */
.faq {
  display: grid;
  gap: var(--space-3);
  max-width: var(--container-text);
}

.faq .details__body p {
  font-size: var(--font-size-base);
}

/* 12 — Abschluss-CTA */
.closing {
  position: relative;
  overflow: hidden;
  background: var(--gradient-soft);
}

[data-theme="dark"] .closing {
  background: linear-gradient(135deg, #1d2e25 0%, #17251e 52%, #1b2b23 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .closing {
    background: linear-gradient(135deg, #1d2e25 0%, #17251e 52%, #1b2b23 100%);
  }
}

.closing__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Die Eingabe steht im Hero. Hier fuehrt ein Verweis dorthin zurueck. */
.closing__actions {
  margin: var(--space-8) 0 var(--space-4);
}

.closing__hint {
  max-width: 520px;
  margin: 0 auto var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.closing__trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.closing__trust svg {
  color: var(--fern);
}

/* 13 — Footer */
/* §3 nennt Pine Teal ausdruecklich fuer den Footer. --gradient-primary endet
   bei Fern #588157; dort erreicht selbst reines Weiss nur 4.48:1, AA fuer
   Fliesstext ist auf dieser Flaeche also nicht erreichbar. Auf Pine Teal
   liegen alle Footer-Texte zwischen 6.03:1 und 9.08:1. */
.site-footer {
  background: var(--pine-teal);
  color: var(--text-inverse);
  padding: var(--space-20) 0 var(--space-10);
}

.site-footer h3 {
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.site-footer p {
  color: rgba(248, 250, 248, 0.90);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: rgba(248, 250, 248, 0.92);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer :focus-visible {
  outline-color: var(--dust-grey);
}

.footer__grid {
  display: grid;
  gap: var(--space-10);
}

.footer__brand .brand {
  color: var(--text-inverse);
  margin-bottom: var(--space-4);
}

.footer__brand .brand__mark {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.footer__claim {
  max-width: 32ch;
  font-size: var(--font-size-md);
  font-weight: 550;
  color: #ffffff;
}

.footer__placeholder {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--font-size-sm);
  color: rgba(248, 250, 248, 0.78);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(248, 250, 248, 0.18);
  font-size: var(--font-size-sm);
  color: rgba(248, 250, 248, 0.90);
}

.footer__bottom p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: rgba(248, 250, 248, 0.90);
}

.footer__hosting {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------------
   9. Animationen (§26)
   Fade-in maximal 8 px Bewegung, Karten-Hover maximal 2 px, kein Bounce,
   nichts Dauerhaftes. Ohne JavaScript sind alle Inhalte sofort sichtbar.
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .bar__fill {
  width: 0;
  transition: width var(--duration-slow) var(--ease-standard);
}

.js .is-visible .bar__fill {
  width: var(--bar-value, 0%);
}

/* --------------------------------------------------------------------------
   10. Responsive (§28)
   Breakpoints 640 / 768 / 1024 / 1280 / 1536 px.
   -------------------------------------------------------------------------- */

/* Mobile-Navigation: ohne JavaScript bleibt das Menue offen und bedienbar. */
@media (max-width: 1023px) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: var(--background-elevated);
    color: var(--text-primary);
    cursor: pointer;
  }

  .js .nav-toggle__icon--close {
    display: none;
  }

  .js .nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
    display: block;
  }

  .js .nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
    display: none;
  }

  .js .nav-menu {
    display: none;
  }

  .js .nav-menu.is-open {
    display: flex;
  }

  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4) 0 var(--space-2);
    border-top: 1px solid var(--border-light);
    margin-top: var(--space-2);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list a {
    padding: 0 var(--space-2);
  }

  .nav-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-actions .button {
    width: 100%;
  }

  .theme-toggle {
    align-self: flex-start;
  }
}

@media (min-width: 640px) {
  .score-block {
    flex-direction: row;
    align-items: center;
  }

  /* Feld und Knopf nebeneinander. Das Feld traegt die flexible Spalte. */
  .hero__form-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan .button {
    width: auto;
  }
}

@media (min-width: 768px) {
  :root {
    --grid-gutter: 20px;
  }

  .section {
    padding: var(--space-24) 0;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teaser {
    padding: var(--space-8);
  }

  .locked {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Chip in eine eigene Spalte, sobald die Zeile breit genug ist. */
  .check {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .check .status {
    grid-column: 3;
  }
}

@media (min-width: 1024px) {
  :root {
    --grid-gutter: 24px;
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--space-16);
  }

  /* Score links, Pruefpunkte rechts: begrenzt die Zeilenlaenge im breiten
     Ergebnisblock und haelt die Reihenfolge aus §28 bei. */
  .teaser__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-12);
    align-items: start;
  }

  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .privacy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-16);
  }

  .site-header {
    top: var(--space-4);
    padding-top: var(--space-4);
  }

  .navbar {
    flex-wrap: nowrap;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
  }

  .nav-menu {
    flex: 1 1 auto;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .metrics--report {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .section {
    padding: var(--space-32) 0;
  }
}

@media (min-width: 1536px) {
  .hero__inner {
    gap: var(--space-20);
  }
}

/* --------------------------------------------------------------------------
   11. Reduzierte Bewegung (§26)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .js .bar__fill {
    width: var(--bar-value, 0%);
  }

  .card--interactive:hover,
  .button-primary:hover,
  .button-secondary:hover {
    transform: none;
  }

  .details[open] > summary svg {
    transform: rotate(180deg);
  }
}