/* Die App im Design der Vorseite - die gemeinsame Grundlage aller Seiten.
 *
 * Vierte Datei dieser Art nach vorseite-layout.css (index.html),
 * start-design.css (start.html) und dashboard-design.css. Anders als die drei
 * beschreibt sie keine einzelne Seite, sondern das, was ALLE App-Seiten teilen:
 * Farbwerte, Kopf, Navigationen, Karten, Knoepfe, Fenster und Fussleiste.
 *
 * WARUM EINE GRUNDLAGE UND NICHT JE SEITE EINE DATEI: Der Block ganz unten in
 * "Farben und Rhythmus" stand bis zum 06.08.2026 in dashboard-design.css. Beim
 * Umstellen der uebrigen Seiten haette er ein zweites und drittes Mal
 * abgeschrieben werden muessen - drei Kopien derselben Umrechnung, die
 * garantiert auseinanderlaufen, sobald jemand einen Ton anfasst. Er steht
 * deshalb jetzt hier, und dashboard-design.css enthaelt nur noch, was das
 * Dashboard von den anderen unterscheidet.
 *
 * WER LAEDT SIE: alle neun App-Seiten. In dieser Reihenfolge:
 *
 *   styles.css            die Bauteile der App (Karten, Navigation, Fenster)
 *   vorseite-design.css   Farbtoene, Radien, die beiden Schriften
 *   app-design.css        diese Datei - die Grundlage
 *   [bereich]-design.css  was diese eine Seitengruppe ausmacht
 *
 * Die letzte Zeile gibt es zweimal: dashboard-design.css (dashboard.html,
 * ausfluege.html, bilanz.html) und arten-design.css (voegel.html,
 * pflanzen.html, saeugetiere.html). konto.html, info.html und
 * datenschutz.html kommen mit dieser Datei allein aus; was sie an Eigenem
 * brauchen, sind ein paar Zeilen und steht unten in eigenen Abschnitten.
 *
 * start.html bleibt aussen vor. Sie hat weder Kopf noch Navigation noch
 * Karten, rechnet mit einem breiteren Seitenrand und einem helleren
 * Flaechenton, und start-design.css beschreibt sie vollstaendig. Sie hier
 * mitzuziehen hiesse, Ausnahmen fuer eine Seite einzubauen.
 *
 * DIE DREI GRUNDSAETZE, dieselben wie in den anderen drei Dateien:
 *
 * 1. ALLES IN REM, nicht in px. Die App laedt schrift.js, und die Stufe
 *    "Groessere Schrift" aus dem Profil wirkt ueber die Wurzel-Schriftgroesse,
 *    also nur auf rem. vorseite-design.css bringt px mit (u. a. 15px am body
 *    und h1/h2/h3 in 42/32/25px) - was davon auf diesen Seiten ankommt, wird
 *    unten in rem zurueckgeholt.
 * 2. ES GIBT EINE NACHTFASSUNG: Creme wird Schrift, das Tintenschwarz wird
 *    Grund. Haengt an data-thema und nicht an einer Media Query, damit die
 *    Wahl aus dem Profil ("Farben") auch hier greift - Begruendung in thema.js.
 * 3. DIE SEITEN LADEN WEITER styles.css. Statt deren Regeln zu verdoppeln,
 *    werden unten nur die Farbwerte der App (--bg, --ink, --accent ...) auf
 *    die Toene der Vorseite gesetzt; die bestehenden Regeln ziehen damit von
 *    selbst mit. Angefasst wird nur, was eine feste Form hat (Radien,
 *    Schriftschnitte) oder was eine Farbe hart im Wert stehen hat.
 *
 * WAS EINE NEUE KARTE HIER BRAUCHT: nichts, solange sie nur --surface, --ink,
 * --accent und Freunde benutzt. Wer eine baut, muss nur nachsehen, wenn sie
 * px-Radien oder ein `color: #fff` mitbringt.
 *
 * Klassennamen bleiben, wie sie waren: konto.js, app.js, dashboard.js und die
 * uebrigen Skripte bauen ihre Elemente mit den Klassen aus styles.css.
 */

/* ==========================================================================
   Farben und Rhythmus
   ========================================================================== */

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

  /* Die Breite der Inhaltsspalte. Steht am body und nicht am main, weil der
     Kopf sie auch braucht: Absenderzeile und Ueberschrift sollen ueber der
     ersten Karte stehen und nicht daneben. Jede Seitengruppe setzt sie auf
     ihr Mass um - 60rem im Dashboard, 54rem im Profil, 44rem auf den
     Textseiten. Der Vorgabewert ist der der Artenseiten: Dort steht ein
     Raster aus Fotos, das jede Spalte gebrauchen kann. */
  --spalte: 68rem;

  /* Rollen statt Rampenstufen: unten wird nur dieser Block getauscht, das
     Layout darunter bleibt in beiden Fassungen dasselbe. */
  --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);

  /* Die Farbwerte der App auf die der Vorseite umgestellt. Damit bekommen
     Karten, Pillen, Tab-Leiste und Fussleiste aus styles.css dieselben Toene,
     ohne dass dort eine Zeile geaendert werden muss. */
  --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);
  /* Die Silhouetten der Arten ohne Foto waren ein eigenes Dunkelgruen. Auf
     Creme ist die Schriftfarbe die passende: Sie ist ein Platzhalter und
     gehoert in den Ton des Textes, nicht in einen vierten. */
  --silhouette: color-mix(in srgb, var(--color-text) 82%, transparent);

  /* STUFE 700 UND 300, und beides mit Grund. 700 ist der Ton, der auf Creme
     noch traegt (gemessen 5,7:1) - er faerbt Schrift, Linien und die gefuellten
     Pillen. Die hellen Stufen 100 und 200 gingen auf dem Cremegrund unter (sie
     liegen fast genau auf seiner Helligkeit), deshalb ist der Flaechenton 300:
     dieselbe Entscheidung wie bei den Kacheln der Startseite, dort steht die
     Messung ausfuehrlich in start-design.css.

     WEISS AUF AKZENT WIRD ZU GRUND AUF AKZENT: styles.css schreibt an den
     gefuellten Pillen, Knoepfen und Zaehlmarken `color: #fff`. Hell passt das
     noch (Weiss auf dem tiefen Terrakotta), nachts stuende Weiss auf hellem
     Orange - unlesbar. Der Grundton dreht in beiden Fassungen mit und sitzt
     immer auf der anderen Seite der Rampe, deshalb steht unten ueberall
     var(--color-bg). */
  --accent: var(--color-accent-700);
  --accent-soft: var(--color-accent-300);

  /* SCHRIFT AUF DEM FLAECHENTON. Wo Text direkt auf --accent-soft steht (der
     Fortschritts-Chip ueber den Artenlisten, der Knopf im Toast), reicht die
     700er Stufe nicht ganz: gemessen 4,50 bei den Voegeln, 4,41 bei den
     Pflanzen, 4,44 bei den Saeugetieren - alle drei knapp unter den 4,5, die
     kleine Schrift braucht. Eine Stufe tiefer bringt rund 7:1. Denselben Weg
     geht der Entwurf auf der Startseite, wo die Artenzahl im Kreis in der
     800er Stufe steht (--start-a-zahl in start-design.css). */
  --app-tief: var(--color-accent-800);

  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  /* vorseite-design.css setzt am body 15px - das waere kleiner als die
     Grundschrift der App und wuerde "Groessere Schrift" ins Leere laufen
     lassen. */
  font-size: 1rem;
  line-height: 1.55;
  /* clip statt hidden: der Deko-Kreis im Kopf ragt bewusst ueber den Rand,
     soll aber keine Scrollleiste erzeugen. hidden wuerde einen Scroll-Bereich
     anlegen (dieselbe Falle wie in styles.css beim body). */
  overflow-x: clip;
}

/* Nachtfassung: dasselbe Blatt, umgedreht. Ausdruecklich auf body.app-body,
   damit diese Werte die Dunkelfassung aus styles.css schlagen - dort haengen
   sie an html[data-thema] und waeren sonst gleich stark. */
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;

  /* 400 statt 700: auf dem dunklen Grund ist die helle Stufe die lesbare
     (8,9:1). Der Flaechenton geht denselben Weg ans andere Ende der Rampe,
     und mit ihm die Schrift, die darauf steht. */
  --accent: var(--color-accent-400);
  --accent-soft: var(--color-accent-900);
  --app-tief: var(--color-accent-300);
}

/* Links im Fliesstext. vorseite-design.css faerbt jedes a mit dem hellen
   Terrakotta (#c67139) - auf Creme sind das rund 3:1, zu wenig fuer Text.
   BEWUSST OHNE VORANGESTELLTE KLASSE: So bleibt die Regel genauso stark wie
   die aus vorseite-design.css (und gewinnt nur ueber die Reihenfolge), waehrend
   alle Klassenregeln aus styles.css - .app-footer a, .dashboard-weiter a,
   .ausflug-anreise a - weiter ueber ihr stehen. */
a { color: var(--accent); }

/* ==========================================================================
   Kopf
   ========================================================================== */

/* Aus dem gruenen Verlaufsband wird Papier: derselbe Grund wie die Seite, dazu
   der weiche Kreis, der auf Vorseite und Startseite oben rechts steht.
   Die beiden Sonderverlaeufe der Artenseiten (.app-header-plants,
   .app-header-mammals) sind aus dem Markup raus - welche Liste offen ist,
   sagt jetzt die Akzentfarbe der ganzen Seite (siehe arten-design.css). */
body.app-body .app-header {
  position: relative;
  background: none;
  color: var(--color-text);
  padding: calc(1.5 * var(--leading)) var(--edge) var(--half);
}
/* Der Kreis malt HINTER allem (z-index: -1), sonst laege er ueber den Karten.
   Er darf in die Luft ueber dem Text ragen, nie in den Text selbst - Regel aus
   dem Entwurf der Vorseite.

   BUENDIG UND NICHT UEBERHAENGEND wie auf der Startseite: Dort sitzt der Kreis
   an einer 68rem breiten, mittigen Spalte und hat links und rechts Luft, in die
   er ragen kann. Dieser Kopf ist so breit wie das Fenster - jedes negative
   right waere Ueberhang ueber den Viewport, und auf overflow-x am body ist
   kein Verlass (steht am html nichts anderes, reicht der Browser den Wert an
   den Viewport weiter und behandelt den body selbst wieder als "sichtbar"). */
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;
}

/* Derselbe Textblock wie im Hauptteil: der Kopf haelt aussen den Seitenrand,
   innen liegt die Spalte des Inhalts. */
body.app-body .header-inner {
  max-width: calc(var(--spalte) - 2 * var(--edge));
  margin: 0 auto;
}

/* Absenderzeile ueber der Ueberschrift, im Ton der Abschnitts-Ueberschriften
   der Vorseite (.kicker) und der Startseite (.landing-eyebrow). Sie sagt, in
   welchem Bereich man ist; die Ueberschrift darunter nennt die Ansicht. Wo es
   keinen Bereich gibt (Profil, Textseiten), steht dort nur "Kolk". */
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;
  /* optischer Randausgleich: Caprasimo-Versalien wirken sonst eingerueckt */
  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;
}

/* ==========================================================================
   Aufbau
   ========================================================================== */

/* Eine Regel fuer alle Hauptteile: styles.css gibt main 1100px und den drei
   Sonderfaellen (.dashboard-main, .profil-main, .legal-page) eigene Werte -
   hier entscheidet allein --spalte, damit Kopf und Inhalt garantiert
   dieselbe Kante halten. */
body.app-body main {
  width: 100%;
  max-width: var(--spalte);
  margin: 0 auto;
  padding: var(--leading) var(--edge) calc(2 * var(--leading));
}

/* ==========================================================================
   Navigationen
   ========================================================================== */

/* Beide Leisten sind schon Pillen; hier bekommen sie nur den Rhythmus der
   Vorseite und den Grundton statt Weiss auf dem Akzent. */
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); }

/* Die Tab-Leiste ist auf dem Telefon der Ersatz fuer die Pillen und liegt am
   unteren Rand. Sie holt sich ihre Farben aus den Werten oben; hier nur die
   weichen Ecken des Entwurfs. */
body.app-body .tab-bar a { border-radius: 0.75rem; }

/* ==========================================================================
   Karten
   ========================================================================== */

/* Die grosse Rundung ist das Erkennungszeichen des Entwurfs (dieselbe wie die
   Kacheln der Startseite). Der Rahmen bleibt als Haarlinie stehen: ohne ihn
   verschwimmt die helle Kartenflaeche auf dem Cremegrund. */
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; }

/* vorseite-design.css gibt jedem p einen Fussabstand; .empty-hint hat als
   einziger Absatz dieser Seiten keinen eigenen und bekaeme ihn sonst dazu. */
body.app-body .empty-hint { margin: 0; }

/* ==========================================================================
   Knoepfe, Felder und Meldungen
   ========================================================================== */

/* Gefuellte Knoepfe: Grundton auf dem Akzent statt Weiss auf dem Akzent -
   Begruendung oben bei --accent. Eine Liste und keine Sammelregel, weil
   `color: #fff` in styles.css an mehr Stellen steht als nur an gefuellten
   Knoepfen: Der Schliessen-Knopf im Artendetail und die Zaehlmarke mit der
   Null liegen auf dem FOTO, nicht auf dem Akzent - sie haben einen dunklen
   Schleier als Grund und bleiben deshalb weiss, in beiden Fassungen. */
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 {
  color: var(--color-bg);
}

/* Die stillen Zwillinge daneben. Sie stehen in styles.css als eigene Klasse
   HINTER dem gefuellten Knopf und gewinnen dort ueber die Reihenfolge - hier
   nicht mehr, weil die Regel oben eine Klasse mehr traegt. Ohne diese vier
   Zeilen stuende ihre Schrift im Grundton auf ihrer hellen Flaeche, also
   unsichtbar. */
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); }
/* "Nein, danke" in der Messungs-Frage ist Absicht kein leiser Ausweg, sondern
   der gleich grosse, nur umrandete Zwilling von "Ja, gern" - Ablehnen muss so
   leicht sein wie Zustimmen (Art. 7 Abs. 3 DSGVO, Begruendung in styles.css).
   Er darf also nicht die Schrift des gefuellten Knopfes erben. */
body.app-body .messung-frage .messung-nein { color: var(--ink); }
/* Der Loesch-Knopf traegt sein eigenes Rot (styles.css) und bleibt Weiss
   darauf: Es ist eine Warnfarbe und keine Akzentflaeche, die nachts dreht. */
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; }

/* Gefuellte Chips: dieselbe Frage wie bei den Knoepfen. Die Zeile gilt auch
   fuer die Wahlzeilen im Profil (Schrift, Farben, Vibrieren, Nutzungsmessung) -
   sie leihen sich die Optik der Filterzeile und haetten sonst nachts Weiss auf
   hellem Orange (gemessen 2,07:1). */
body.app-body .filter-chips button.active { color: var(--color-bg); }

/* Schrift auf dem Flaechenton, Begruendung oben bei --app-tief. */
body.app-body .toast-action { color: var(--app-tief); }

/* Knoepfe erben die Schrift der Seite. Ohne das nimmt der Browser fuer jedes
   button seine eigene (gemessen: Arial) - bei den meisten faellt es nicht auf,
   weil styles.css dort `font: inherit` schreibt, aber der ⓘ-Knopf auf den
   Artenkarten und die Saeulen des Tagesdiagramms haben keins. Vorher stand
   dort Arial neben "Segoe UI" und fiel kaum auf, jetzt stuende es neben
   Figtree. */
body.app-body button { font-family: inherit; }

/* Eingabefelder und Auswahlen bekommen die weichen Ecken des Entwurfs. */
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; }

/* ==========================================================================
   Fenster (dialog)
   ========================================================================== */

/* Startdialog, Ergebnisfenster, Artendetail, Messungs- und Spendenfrage. Sie
   liegen ueber der Seite und gehoerten bisher zu den letzten Stellen, an denen
   noch Weiss auf hellem Orange stand - die Knoepfe darin sind oben mit
   erledigt. Hier nur die Form: dieselbe Rundung wie die Karten, eine Stufe
   kleiner, weil ein Fenster kleiner ist als die Seite. */
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; }

/* Ueberschriften der Fenster in Caprasimo - derselbe Platz wie die
   Kartenueberschriften. */
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;
}
/* Die grossen Zahlen des Ergebnisfensters und des Artendetails stehen dort,
   wo auf der Startseite die Artenzahl im Kreis steht. */
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;
}

/* Das Foto oben im Artendetail braucht keine eigene Rundung: .species-sheet
   rollt (overflow-y: auto) und schneidet seine Kinder deshalb selbst an der
   eigenen Kante ab. */

/* Toasts: runde Ecken wie die Fenster, eine Stufe kleiner. */
body.app-body .toast { border-radius: 1.25rem; }

/* Die Abzeichen der Roten Liste und die Merkmal-Zeilen im Artendetail behalten
   ihre festen Farben. Sie stehen fuer eine Einstufung und nicht fuer den
   aktiven Datensatz - liefen sie ueber --accent, waere eine "stark
   gefaehrdet"-Marke bei den Pflanzen gruen. Ihre Toene sind ohnehin warm und
   stehen auf dem Cremegrund ruhig; die Nachtwerte stehen in styles.css.
   Dasselbe gilt fuer die Regionskarte im Profil: Land, Wasser und Uferlinie
   sind Kartografie und keine Marke. */

/* ==========================================================================
   Auszeichnungen (konto.html)
   ========================================================================== */

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;
}
/* Die beiden Zwischenzeilen ("Als Naechstes", "Erreicht") und die
   Kategorienamen sind Etiketten und keine Kapitel: Caprasimo faellt bei
   kleinen Grossbuchstaben auseinander, sie behalten deshalb die Textschrift.
   Dieselbe Entscheidung wie bei .nk-subhead und .schutz-subhead im Dashboard. */
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);
}

/* ==========================================================================
   Profil (konto.html)
   ========================================================================== */

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

/* Der Kreis mit dem Anfangsbuchstaben ist derselbe wie die Zahlenkreise der
   Startseite: gefuellte Flaeche, kein Rahmen. */
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;
}

/* Die Kennzahlen des Profils in Caprasimo - dieselbe Familie wie die Zahlen
   der Bilanz. */
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); }

/* Die aufklappbare Einstellungs-Karte bringt ihre Polsterung in der Zeile
   selbst mit (damit die ganze Breite antippbar ist) - der Kartenabstand von
   oben muss deshalb hier zurueckgenommen und in die Zeile gelegt werden. */
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); }
/* Die Ueberschriften der einzelnen Einstellungen sind Zwischenzeilen in einer
   Karte, keine Kartenueberschriften - Textschrift, damit die Karte eine
   Ueberschrift behaelt und nicht acht. */
body.app-body .einstellung h3 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

/* Zeilen und Kaesten des Profils in den Radien des Entwurfs. */
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; }

/* ==========================================================================
   Textseiten (info.html, datenschutz.html)
   ========================================================================== */

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

/* Die Abschnittsueberschriften sind hier die einzige Gliederung einer langen
   Seite und duerfen deshalb gross bleiben - anders als in einer Karte, wo die
   Ueberschrift mit dem Inhalt um Platz konkurriert. vorseite-design.css gaebe
   ihnen 32px; in rem und eine Spur kleiner passen sie zur Textbreite. */
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;
}

/* Die aufklappbaren Fragen sind Kaesten in der Seite - dieselbe Rundung wie
   die Vorschlagskaesten des Dashboards, eine Stufe kleiner als eine Karte. */
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; }

/* ==========================================================================
   Fussleiste
   ========================================================================== */

/* Aussehen kommt aus styles.css (.app-footer) und zieht ueber die oben
   gesetzten Farbwerte mit. Hier nur die Ausrichtung: die Seiten stehen links,
   die Fussleiste stuende sonst als einzige mittig. */
body.app-body .app-footer {
  width: 100%;
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 var(--edge) var(--leading);
  text-align: left;
}

/* ==========================================================================
   Telefon
   Muss NACH den Grundregeln stehen: eine Medienabfrage hat keine hoehere
   Spezifitaet, es entscheidet die Reihenfolge.
   ========================================================================== */

@media (max-width: 699.98px) {
  /* Der Kopf bleibt knapp - bis zur ersten Karte zaehlt jeder Zentimeter -,
     aber die Ueberschrift darf gross bleiben: sie ist der Ton der Seite. */
  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); }
}