/* PFIFF v1 | Sprint D | Status: Stable | LastEdit: 2026-08-29 */
/* Layout je Bildschirm, inklusive Querformat. Reine Medienabfrage, kein zweiter Satz Markup und
   kein JavaScript (0 Kernregeln, Sprint-D-Auftrag Punkt 3). */

.pf-kopf { display: grid; gap: 0.3rem; padding-bottom: 0.25rem; }

/* Ergebnis- und Prüfungsübersicht: etwas mehr Luft zwischen den Blöcken. */
.pf-ergebnis__untertitel { margin-top: 0.5rem; }

/* Tablet und größer: mehr Atemraum, aber weiterhin eine Spalte im Fließtext, damit Fragezeilen
   nie breiter als rund 62 Zeichen laufen (Sprint-D-Auftrag Punkt 3, Querformat). */
@media (min-width: 48rem) {
  .pf-app { max-width: 52rem; padding-top: 2rem; }
  .pf-kopf__titel { font-size: 34px; }
  .pf-karte__liste { grid-template-columns: 1fr 1fr; }
  .pf-pruefung__umfang { grid-template-columns: 1fr 1fr; }
}

/* DECISION: Die im Entwurf (#2a/#3a) gezeigte echte Zweispaltigkeit — feste linke Kontext-
   spalte, rechts die eine Sache, Aktion unten rechts am Daumen — verlangt zwei getrennte
   Flex-Container im Markup (Seitenleiste vs. Arbeitsfläche). Unser DOM liefert für jeden
   Bildschirm eine einzige flache Kinderliste von .pf-app ohne diese Unterteilung; sie allein
   über :nth-child oder Selektoren nachzubilden wäre so brüchig, dass jede künftige Änderung an
   der Kinderreihenfolge (Sprint 6 z. B.) das Layout lautlos zerlegen würde. Nach Sprint-D-Auftrag
   Punkt 3 ("Geht das nicht ohne Eingriff ins Markup, ist der Punkt streichbar") bleibt es bei der
   oben stehenden, breiteren Einspalten-Anordnung für Querformat — kein zweiter Spaltenblock.
   [verschoben] echte Zweispaltigkeit für #/2a/#3a, siehe PROJEKT-GEDAECHTNIS.md Abschnitt 6. */