/**
 * Nachtrag zu assets/css/app.css
 *
 * ┌────────────────────────────────────────────────────────────────────────┐
 * │ ÜBERGANG. Der Inhalt gehört nach `assets/css/app.css` bzw.             │
 * │ `assets/css/navigation.css`, die Einbindung nach                       │
 * │ `includes/header.php`.                                                 │
 * │                                                                        │
 * │ Beides liegt in Verzeichnissen, die `root` gehören (drwxr-sr-x); der   │
 * │ Agent läuft als `nanoclaw` und darf dort nicht schreiben. Deshalb      │
 * │ steht die <link>-Zeile einzeln in jeder Seite statt einmal im Kopf.    │
 * │                                                                        │
 * │ Auflösung, sobald die Rechte stehen:                                   │
 * │   cat nachtrag.css >> assets/css/app.css                               │
 * │   rm nachtrag.css                                                      │
 * │   # und die <link>-Zeile aus allen *.php entfernen                     │
 * └────────────────────────────────────────────────────────────────────────┘
 *
 * Keine festen Farbwerte: alles über die Variablen aus :root in app.css,
 * sonst bricht die dunkle Darstellung.
 */

/* ══ 1. Hintergrund-Schimmer ══════════════════════════════════════════════
 *
 * Vorher: `position: fixed` mit `inset: 0 0 auto` und `height: max(620px,75vh)`.
 *
 * Das ist die schlechteste der möglichen Kombinationen: fest am Bildschirm
 * verankert UND nur drei Viertel hoch. Der Schimmer klebt dadurch am oberen
 * Rand, und seine untere Kante wandert beim Scrollen als sichtbare Linie
 * über den Inhalt. Fest verankert heisst „gehört zum Bildschirm" — dann darf
 * es keine Kante geben, die man sehen kann.
 *
 * Jetzt: fest verankert über die GANZE Bildfläche. Der Verlauf endet dort,
 * wo er ohnehin durchsichtig wird (48%), nicht an einer Boxkante.
 *
 * Die Alternative wäre `position: absolute` mit grösserer Höhe gewesen — dann
 * gehörte der Schimmer zum Seitenanfang und würde weggescrollt. Beides ist
 * vertretbar; hier gewinnt die feste Variante, weil sie auf jeder Seite
 * gleich aussieht, auch auf den kurzen.
 */
body::before {
  inset: 0;
  height: auto;
}

/* ══ 1b. Waagerechter Rollbalken ══════════════════════════════════════════
 *
 * Die Deko-Form des Heros (.public-hero:after) sitzt auf `right:-12%` und ist
 * um 18° gedreht, was ihr Rechteck nochmals rund 32px verbreitert. Unterhalb
 * von etwa 1090px Fensterbreite ragt sie über den rechten Rand hinaus.
 *
 * `clip`, NICHT `hidden`: `hidden` erzeugt einen Scroll-Container, und dann
 * klebt die Kopfzeile (position:sticky) an diesem statt am Fenster. `clip`
 * schneidet nur ab und lässt `overflow-y: visible` unangetastet.
 */
html, body { overflow-x: clip; }

/* ══ 2. Kopfzeile auf dem Handy ═══════════════════════════════════════════
 *
 * `app.css` stellt `.header-inner` unter 580px auf `flex-direction: column`,
 * `navigation.css` setzt darüber `align-items: center`. Ergebnis: Marke
 * mittig in Zeile eins, Menü darunter in Zeile zwei — zwei Zeilen für zwei
 * Elemente, die nebeneinander passen.
 *
 * Marke links, Menü rechts, eine Zeile. Die Grenze 580px ist aus app.css
 * gespiegelt.
 */
@media (max-width: 580px) {
  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
  }

  /* DIE eigentliche Ursache.
   *
   * `app.css` gibt `.header-navigation` unter 580px `width: 100%`. Das ist
   * für das gestapelte Layout gedacht: dort füllt der Block die zweite Zeile
   * und schiebt seinen Inhalt mit `justify-content: flex-end` nach rechts.
   *
   * Nebeneinander bedeutet dieselbe Regel: der Block beansprucht die volle
   * Zeilenbreite NEBEN der Marke — zusammen also rund 160px mehr, als da
   * sind. Was übrig blieb, hing davon ab, wer nachgeben durfte: mit
   * `min-width: 0` an der Marke verschwand die Marke, ohne sie das Menü.
   * Beides waren Symptome derselben Zeile.
   */
  .header-navigation {
    width: auto;
    flex: none;
  }
}

/* ══ 3. Startseite: Bildbereich mit schwebenden Karten ════════════════════
 *
 * Träger ist .feature-visual, nicht das Bild selbst: absolut positionierte
 * Kinder brauchen einen positionierten Elternteil, und ein <img> kann keine
 * Kinder haben.
 */
.feature-visual { position: relative; min-width: 0; }

/* Bild grösser, Text schmaler.
   Summe der Basen bleibt genau 100% und es gibt KEIN `gap` — beides
   zusammen (Basis 100% + Abstand) würde die Zeile umbrechen lassen, weil
   .feature-row auf `flex-wrap: wrap` steht. Der Abstand kommt deshalb aus
   dem Innenabstand der Textspalte. */
.feature-row--visual > .feature-copy {
  flex: 1 1 40%;
  padding-right: clamp(20px, 4vw, 56px);
}
.feature-row--visual > .feature-visual { flex: 1 1 60%; }

/* Die Grenze 799px ist aus app.css gespiegelt (dort setzt `.feature-row>*`
   auf flex-basis:100%). Ohne diese Zeile gewänne die obige Regel wegen
   höherer Spezifität, und die Spalten blieben auf dem Handy nebeneinander. */
@media (max-width: 799px) {
  .feature-row--visual > .feature-copy,
  .feature-row--visual > .feature-visual { flex-basis: 100%; }
  .feature-row--visual > .feature-copy { padding-right: 0; }
}

/* ── Karten ──
 * Sie hängen NUR nach links und nach unten über.
 *
 * Nach rechts dürfen sie nicht: dort endet der .container mit lediglich 20px
 * Rand zum Fenster (width: min(1160px, 100% - 40px)). Genau daran ist die
 * frühere Fassung gescheitert (`right:-7%`). Links liegt die Textspalte,
 * unten der Abstand des Abschnitts — beide Richtungen sind gefahrlos, und
 * zwar bei jeder Fensterbreite, nicht nur bei der zufällig getesteten.
 */
.float-card {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  max-width: 210px;
}
.float-card h3 { font-family: var(--font-display); color: var(--text); }
.float-card p  { color: var(--muted); }

/* Senkrecht in die Zonen gesetzt, in denen KEIN Text steht: der Textblock
 * liegt mittig, oben und unten daneben ist die Spalte leer. Eine Karte über
 * dem Fliesstext macht ihn unlesbar — das ist kein Stilfehler, sondern ein
 * kaputter Absatz.
 *
 * Der Überhang bleibt zusätzlich in der Grössenordnung des Spaltenabstands
 * (padding-right der Textspalte, clamp(20px,4vw,56px)). Beides zusammen:
 * Auch wenn der Text bei einer Breite länger umbricht als hier geprüft,
 * ragt die Karte höchstens in den Zwischenraum, nicht in die Schrift. */
.float-card--a { top: 2%;     left: -34px; }
.float-card--b { top: 74%;    left: -26px; animation-delay: -1.5s; }
.float-card--c { bottom: -8%; left: 42%;   animation-delay: -3s; }

/* ══ 4. Rechtliche Seiten (Impressum, Datenschutz) ════════════════════════
 *
 * Fliesstext in Lesebreite. 68 Zeichen je Zeile sind bequem lesbar; über die
 * volle Containerbreite von 1160px wären es rund 160 — bei einem Text, den
 * man ohnehin ungern liest, ist das der Unterschied zwischen „überflogen"
 * und „gar nicht erst angefangen".
 */
.legal-page {
  max-width: 46rem;
  padding: clamp(32px, 6vw, 72px) 0 clamp(40px, 7vw, 88px);
}
.legal-page h1 { margin-bottom: clamp(20px, 3vw, 32px); }
.legal-page h2 {
  margin-top: clamp(32px, 5vw, 52px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--line);
}
.legal-page h3 { margin-top: clamp(24px, 3vw, 34px); font-size: 1.05rem; }
.legal-page h4 { margin-top: 20px; font-size: .95rem; color: var(--muted); }
.legal-page p  { margin-bottom: 14px; color: var(--muted); }
.legal-page ul { margin: 0 0 14px; padding-left: 20px; color: var(--muted); }
.legal-page li { margin-bottom: 5px; }
.legal-page code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface-2);
  font-size: .92em;
}

/* Lange Adressen dürfen umbrechen, sonst sprengen sie auf dem Handy die
   Zeile und erzeugen wieder einen waagerechten Rollbalken. */
.legal-page a { overflow-wrap: anywhere; }

.legal-source {
  margin-top: clamp(32px, 5vw, 52px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* ── Verweise am Fuss jeder Seite ──
 * Sitzen am Ende von <main>, weil `includes/footer.php` nicht beschreibbar
 * ist. Optisch schliessen sie direkt an die Fusszeile an. */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 26px 0 0;
  font-size: 13px;
}
.legal-links a { color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--text); text-decoration: underline; }
.legal-links a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* ══ 5. Abschnitt „Wie ist der Ablauf?" ═══════════════════════════════════
 *
 * Ohne Bild steht dort Überschrift links, Schritte rechts. `.feature-row`
 * zentriert seine Kinder senkrecht — bei einer kurzen Überschrift neben
 * einer langen Liste sieht die Überschrift dadurch verloren aus. Oben
 * ausrichten.
 */
#workflow .feature-row { align-items: start; }