body.app-body {
  --leading: 1.75rem;
  --half: 0.875rem;
  --edge: clamp(1rem, 4vw, 2rem);

  --spalte: 68rem;

  --app-deko: var(--color-accent-2-200);
  --app-leise: color-mix(in srgb, var(--color-text) 78%, transparent);
  --app-still: color-mix(in srgb, var(--color-text) 62%, transparent);

  --bg: var(--color-bg);
  --surface: var(--color-neutral-100);
  --ink: var(--color-text);
  --ink-soft: var(--app-leise);
  --border: var(--color-divider);
  --shadow: var(--shadow-sm);

  --silhouette: color-mix(in srgb, var(--color-text) 82%, transparent);

  --accent: var(--color-accent-700);
  --accent-soft: var(--color-accent-300);

  --app-tief: var(--color-accent-800);

  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);

  font-size: 1rem;
  line-height: 1.55;

  overflow-x: clip;
}

html[data-thema="dunkel"] body.app-body {
  --color-bg: #201e1d;
  --color-text: #f5ead8;
  --color-divider: color-mix(in srgb, #f5ead8 18%, transparent);

  --app-deko: var(--color-accent-2-900);

  --surface: var(--color-neutral-900);
  --shadow: none;

  --accent: var(--color-accent-400);
  --accent-soft: var(--color-accent-900);
  --app-tief: var(--color-accent-300);
}

a { color: var(--accent); }

body.app-body .app-header {
  position: relative;
  background: none;
  color: var(--color-text);
  padding: calc(1.5 * var(--leading)) var(--edge) var(--half);
}

body.app-body .app-header::before {
  content: "";
  position: absolute;
  right: 0;
  top: -7rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: var(--app-deko);
  pointer-events: none;
  z-index: -1;
}

body.app-body .header-inner {
  max-width: calc(var(--spalte) - 2 * var(--edge));
  margin: 0 auto;
}

body.app-body .app-eyebrow {
  margin: 0;
  font-size: 0.8rem;
  line-height: var(--half);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}

body.app-body .app-header h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: 0;

  margin: var(--half) 0 0 -0.028em;
}

body.app-body .subtitle {
  margin: 0.35rem 0 0;
  font-size: 1rem;
  line-height: var(--leading);
  color: var(--app-leise);
  opacity: 1;
  max-width: 46ch;
  text-wrap: balance;
}

body.app-body main {
  width: 100%;
  max-width: var(--spalte);
  margin: 0 auto;
  padding: var(--leading) var(--edge) calc(2 * var(--leading));
}

body.app-body .site-nav { gap: var(--half) 0.5rem; margin-bottom: var(--leading); }
body.app-body .site-nav a { font-size: 0.85rem; padding: 0.4rem 0.9rem; }
body.app-body .site-nav a.active { color: var(--color-bg); }

body.app-body .tab-bar a { border-radius: 0.75rem; }

body.app-body .dashboard-card {
  border-radius: 2rem;
  padding: calc(0.8 * var(--leading)) calc(1.5 * var(--half)) var(--leading);
  margin-bottom: var(--leading);
}
body.app-body .dashboard-card h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 0 0 var(--half);
}
body.app-body .dashboard-card-header { margin-bottom: var(--half); }
body.app-body .card-hint {
  margin: calc(-0.5 * var(--half)) 0 var(--half);
  font-size: 0.85rem;
  line-height: 1.5;
}
body.app-body .card-more {
  margin-top: var(--leading);
  padding-top: var(--half);
}
body.app-body .card-more summary,
body.app-body .card-more p { font-size: 0.82rem; }

body.app-body .empty-hint { margin: 0; }

body.app-body .konto-button,
body.app-body .einstieg-link,
body.app-body .heute-link,
body.app-body .ausflug-link,
body.app-body .export-btn,
body.app-body .jagd-leiste,
body.app-body .streifzug-leiste,
body.app-body .szs-los,
body.app-body .sz-frage-knoepfe .sz-ja,
body.app-body .sz-probe-knoepfe .sz-probe-nein,
body.app-body .tempo-knoepfe .tempo-weiter,
body.app-body .sheet-count-row .sheet-plus,
body.app-body .ort-bar .ort-gps,
body.app-body .ort-bar .ort-nur.active,
body.app-body .range-filter button.active,
body.app-body .dashboard-subnav a.active,
body.app-body .dataset-filter button.active,
body.app-body .count-badge,
body.app-body .count-float {
  color: var(--color-bg);
}

body.app-body .konto-button-still { color: var(--ink-soft); }
body.app-body .export-btn-still { color: var(--accent); }
body.app-body .export-btn:disabled { color: var(--ink-soft); }
body.app-body .jagd-leiste-still { color: var(--ink); }

body.app-body .messung-frage .messung-nein { color: var(--ink); }

body.app-body .konto-button-gefahr { color: #fff; }

body.app-body .konto-button,
body.app-body .konto-aktionen .konto-button { padding: 0.6rem 1.2rem; }

body.app-body .filter-chips button.active { color: var(--color-bg); }

body.app-body .toast-action { color: var(--app-tief); }

body.app-body button { font-family: inherit; }

body.app-body .konto-feld input,
body.app-body .konto-meldung,
body.app-body .szs-wahl select,
body.app-body .szs-wahl button,
body.app-body .toolbar-more select { border-radius: 0.75rem; }

body.app-body .streifzug-start,
body.app-body .streifzug-ende { border-radius: 1.5rem; }
body.app-body .species-sheet { border-radius: 1.5rem 1.5rem 0 0; }
@media (min-width: 700px) {
  body.app-body .species-sheet { border-radius: 1.5rem; }
}
body.app-body .sz-neu,
body.app-body .messung-liste { border-radius: 1.25rem; }

body.app-body .szs-titel,
body.app-body .sz-titel,
body.app-body .sheet-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.2;
  letter-spacing: 0;
}

body.app-body .sz-zahl strong,
body.app-body .sheet-count-value {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.15;
}

body.app-body .toast { border-radius: 1.25rem; }

body.app-body .badge-tile { border-radius: 1.25rem; }
body.app-body .badge-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 0.95rem;
  line-height: 1.25;
  letter-spacing: 0;
}

body.app-body .badge-subhead,
body.app-body .badge-kat-head {
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--accent);
}

body.app-body.profil-body { --spalte: 54rem; }

body.app-body .profil-avatar {
  border: 0;
  background: var(--accent-soft);
  color: var(--app-tief);
}

body.app-body .profil-kopf-text h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: 0;
}

body.app-body .stat-tile { border-radius: 1.5rem; padding: var(--half) 1.1rem; }
body.app-body .stat-tile-value {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.15;
}
body.app-body .stat-tiles { gap: var(--half); }

body.app-body .einstellungen-karte { padding: 0; }
body.app-body .einstellungen-summary { padding: calc(1.2 * var(--half)) calc(1.5 * var(--half)); }
body.app-body .einstellungen-inhalt { padding: 0 calc(1.5 * var(--half)) var(--leading); }

body.app-body .einstellung h3 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

body.app-body .jagd-block,
body.app-body .ort-detail,
body.app-body .orte-karte-wrap svg,
body.app-body .weitersagen-vorschau { border-radius: 1.25rem; }
body.app-body .runde-code { border-radius: 0.5rem; }
body.app-body .monat-pfeil { border-radius: 0.9rem; }

body.app-body.text-body { --spalte: 44rem; }

body.app-body .legal-page h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: 0;
  margin: calc(1.5 * var(--leading)) 0 var(--half);
}
body.app-body .legal-page h2:first-child { margin-top: 0; }
body.app-body .legal-page h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: 0;
  margin: var(--leading) 0 var(--half);
}
body.app-body .legal-page { line-height: 1.6; }
body.app-body .legal-page p { margin: 0 0 var(--half); }
body.app-body .legal-page li { margin-bottom: 0.35rem; }
body.app-body .legal-back {
  display: inline-block;
  margin-top: var(--leading);
  font-weight: 600;
}

body.app-body .info-faq details {
  border-radius: 1.5rem;
  padding: var(--half) 1.1rem;
  margin: 0 0 var(--half);
}
body.app-body .info-faq summary { font-size: 0.95rem; }

body.app-body .app-footer {
  width: 100%;
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 var(--edge) var(--leading);
  text-align: left;
}

@media (max-width: 699.98px) {

  body.app-body .app-header {
    padding: var(--leading) var(--edge) 0.5rem;
  }
  body.app-body .app-header::before {
    top: -6rem;
    width: 11rem;
    height: 11rem;
  }
  body.app-body .app-header h1 { margin-top: 0.35rem; }
  body.app-body .subtitle { font-size: 0.92rem; line-height: 1.45; }

  body.app-body main { padding-top: var(--half); }
  body.app-body .dashboard-card {
    border-radius: 1.5rem;
    padding: var(--half) 1.1rem calc(1.2 * var(--half));
    margin-bottom: var(--half);
  }
  body.app-body .legal-page h2 { margin-top: var(--leading); }
}