/*
Teamplan, V0.1 - 2026
(c) 2026 copyright by Frank Schwarz
Alle Rechte vorbehalten, Frank Schwarz; fs@csskoeln.de
$Id: fsv-karten.css 1 17.10.2026 @fs$
Aus der FSV (fsv/assets/css/karten.css) unveraendert uebernommen (Entscheidung 17.10.2026: Oberflaeche strikt wie FSV).
Aenderungen nur in teamplan.css.
*/
/*
*****************************************************************************
FSV - Fahrschulverwaltung, V0.4 - 2026
(c) 2026 copyright by Frank Schwarz
Alle Rechte vorbehalten, Frank Schwarz; fs@csskoeln.de
*****************************************************************************
$Id: karten.css 1 06.10.2026 @fs$
*****************************************************************************
Seiten aus mehreren Karten mit eigenem Formular, wie im Altsystem (Raster mit
drei Spalten, Feldzeilen, Briefkopf-Vorschau). Siehe kern/fsv/includes/funk-karten.php.
*/

.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--box-abstand); margin: 0 0 var(--box-abstand); align-items: start; }
.raster-3 > .box { margin: 0; min-width: 0; }
.raster-3 > .breit2 { grid-column: span 2; }
@media (max-width: 900px) { .raster-3 { grid-template-columns: 1fr; } .raster-3 > .breit2 { grid-column: auto; } }

.karten-formular { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.karten-zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.karten-zeile > .feld { flex: 1 1 200px; min-width: 0; }
.karten-zeile > .feld.feld-breit { flex: 3 1 220px; }
/* Ein Feld, das nur aus einem Haken (ohne Beschriftung darüber) besteht, steht auf der Linie der Eingabefelder neben ihm: unten ausgerichtet, nicht oben. */
.karten-zeile > .feld:has(> .kaestchen:only-child) { align-self: flex-end; }
.karten-zeile > .feld.feld-schmal { flex: 1 1 150px; max-width: 200px; }
@media (max-width: 600px) { .karten-zeile > .feld.feld-schmal { max-width: none; } }
.karten-hinweis { margin: -8px 0 0; }
.karten-adresse { display: flex; flex-direction: column; gap: 16px; }
.karten-info { margin: 0 0 var(--box-abstand); }
.karten-lesen { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.karten-formular .aktionen { margin-top: 0; }
.karten-formular .gruppe-titel { margin: 8px 0 -6px; }

/* Briefkopf-Vorschau: je Angabe eine Zeile, nur wenn etwas darin steht */
.karten-wert { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 4px 12px; padding: 10px 8px; font-size: 14px; }
.karten-wert > span { color: var(--text-gedaempft); flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.karten-wert > strong { text-align: right; overflow-wrap: anywhere; font-weight: 600; }
.box-kopf .pille { flex: 0 0 auto; }
/* Boxen nebeneinander (Raster): jeder Kopf ist mindestens so hoch wie ein Knopf, damit die Titel auf einer Linie stehen, auch wenn nur eine Box einen Knopf hat. */
.raster-3 > .box > .box-kopf, .raster-3 > .box > .box-titel:first-child { min-height: var(--feld-hoehe); }
.raster-3 > .box > .box-titel:first-child, .raster-3 > .box > .box-kopf > .box-titel { display: flex; align-items: center; flex-wrap: wrap; min-height: var(--feld-hoehe); }
/* Knöpfe im Kopf einer Box stehen mittig auf der Titelzeile: kein Abstand oben (.aktionen hat sonst 8 px). */
.box-kopf .aktionen { margin: 0; }
/* Pille hinter dem Titel (im Titeltext): Titel und Pille stehen als Zeile, beide mittig (nicht auf der Grundlinie). */
.box-titel:has(> .pille) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Öffnungszeiten: je Wochentag eine Zeile, der zweite Zeitraum klappt aus */
.zeiten-text { margin: 0 0 6px; font-weight: 600; }
.zeiten-tabelle { border-collapse: collapse; width: 100%; }
.zeiten-tabelle th { text-align: left; font-weight: 600; width: 2.6em; padding: 4px 8px 4px 0; vertical-align: baseline; }
.zeiten-tabelle td { vertical-align: baseline; }
.zeiten-tabelle td { padding: 2px 0; }
.zeiten-zeitraum { display: inline-flex; align-items: center; gap: 6px; }
.zeiten-zeitraum input[type="time"] { width: 7.5em; }
.zeiten-zweiter { margin: 2px 0 0; }
.zeiten-zweiter summary { cursor: pointer; font-size: 14px; color: var(--text-gedaempft); }
.reihe-knapp { display: inline-flex; align-items: center; gap: var(--knopf-abstand); flex-wrap: wrap; margin-left: auto; }
.box-kopf .reihe-knapp { justify-content: flex-end; }
.status-formular { display: inline-block; margin: 0; }
.knopf-reihe { display: flex; gap: var(--knopf-abstand); flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-top: 12px; }

/* Logo und Hauptfarbe (Logo & Darstellung) */
.logo-vorschau { display: flex; align-items: center; justify-content: flex-start; padding: 10px; margin: 4px 0 8px; border: 1px dashed var(--linie); border-radius: 10px; background: var(--hintergrund); }
.logo-vorschau img { display: block; max-width: 240px; max-height: 120px; height: auto; }
.farbwahl { width: 72px; height: 36px; padding: 2px; border: 1px solid var(--rahmen-eingabe); border-radius: 8px; background: var(--flaeche); cursor: pointer; }
.wahl-reihe { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* Titel über einer Gruppe von Haken o. Ä. (kein label): dieselbe Schrift und Zeilenhöhe wie die Beschriftung eines Felds, sonst stehen die Bedienelemente
   in einer Reihe mit Feldern gegeneinander versetzt (Linien-Audit). */
.feld-titel { font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--text); }
.zeiten-zeitraum input[type="time"] { width: 6.6em; padding: 0 6px; }
.zeiten-zeitraum { flex-wrap: nowrap; white-space: nowrap; }

/* Rollen & Rechte: Rollen links, Rechte rechts */
.rollen-raster .tabelle-rahmen { margin: 0; }
/* Die Rechtetabelle ist 15 % schmaler als vorher (57 statt 67 % der Breite), damit die Rollen links mehr Platz haben. */
.rollen-raster { grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); }
.rollen-raster > .breit2 { grid-column: auto; }
@media (max-width: 900px) { .rollen-raster { grid-template-columns: 1fr; } }
.spalte-schalter { text-align: center; width: 6em; }
.tabelle td.spalte-schalter input[type="checkbox"] { margin: 0; }

/* Kästchen in einer Feldzeile (zum Beispiel "Aktiv"): Platz für die Beschriftung, dann das Kästchen auf Höhe des Felds */
.karten-zeile .kaestchen-feld { justify-content: flex-start; min-height: 0; flex: 0 0 auto; }
.karten-zeile .kaestchen-platz { font-size: 12px; font-weight: 600; line-height: 1.5; }
.karten-zeile .kaestchen-feld .kaestchen { min-height: var(--feld-hoehe); }

/* Aufbewahrungsfristen: Wert je Zeile mit Eingabe, Speichern-Knopf und Haken. */
.frist-wert { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 0; }
.frist-eingabe { display: flex; align-items: center; gap: 8px; }
.frist-eingabe input { width: 84px; }
.frist-haken { font-size: 14px; }
/* Feste Spaltenbreiten, damit nichts seitlich scrollt: der Text bricht in der Zelle um. */
.aufbewahrung-fristen { table-layout: fixed; width: 100%; }
.aufbewahrung-fristen th:nth-child(1) { width: 27%; }
.aufbewahrung-fristen th:nth-child(2) { width: 19%; }
.aufbewahrung-fristen th:nth-child(3) { width: 11%; }
.aufbewahrung-fristen th:nth-child(4), .aufbewahrung-fristen th:nth-child(5) { width: 9%; }
.aufbewahrung-fristen th:nth-child(6) { width: 25%; }
.aufbewahrung-fristen td { vertical-align: baseline; overflow-wrap: anywhere; white-space: normal; }
.tabelle.aufbewahrung-fristen td, .tabelle.aufbewahrung-fristen td.nowrap { white-space: normal; }
.frist-eingabe input { width: 72px; min-width: 0; }

/* Aufgaben: Priorität als Ampel (immer mit Text) und Privat-Pille */
.pille.prio { gap: 6px; }
.prio-hoch i { color: #C62828; }
.prio-normal i { color: #E0A800; }
.prio-niedrig i { color: #2E7D32; }
.ampel-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.prio-wahl { display: inline-flex; align-items: center; gap: 6px; min-height: var(--feld-hoehe); padding: 0 12px; border: 1px solid var(--rahmen-eingabe); border-radius: 8px; background: var(--flaeche); cursor: pointer; font-size: 14px; }
.prio-wahl input { margin: 0; }
.prio-wahl:has(input:checked) { border-color: var(--haupt); background: var(--haupt-hell); font-weight: 600; }
.aufgabe-zeit { min-width: 120px; }
.aufgabe-zeile { justify-content: flex-start; align-items: center; }
.aufgabe-zeile > strong { flex: 1 1 auto; text-align: left; }

/* Anmeldeeinstellungen: Zahl und Einheit nebeneinander */
.dauer-eingabe { display: flex; gap: 8px; align-items: center; }
.dauer-eingabe input { width: 84px; min-width: 0; }
.dauer-eingabe select { width: auto; min-width: 120px; }

/* Master-Klassen: Gruppen mit Knopf "Preise übertragen" */
.master-box { margin-top: 16px; }
.master-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 8px; margin: 0; }
.master-text { min-width: 0; overflow-wrap: anywhere; }

/* Reiterleisten (jeder Reiter ein echter Link auf eine eigene Seite) */
.reiter-leiste { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 12px; flex-wrap: wrap; }
.reiter-knopf { min-height: var(--feld-hoehe); padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none; font: 600 14px/1 var(--schrift-text); color: var(--text-gedaempft); cursor: pointer; }
.reiter-knopf:hover { color: var(--haupt); }
.reiter-knopf.aktiv { color: var(--haupt); border-bottom-color: var(--haupt); }
.va-auswahl { border: 0; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* Eine Gruppe zusammengehöriger Haken mit Überschrift (fieldset), zum Beispiel Vorbesitz beim Abschluss. */
.feld-gruppe { border: 0; margin: 8px 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* Mehrfachauswahl mit Haken (zum Beispiel Klassen der Fahrlehrerlaubnis): mehrspaltig auf breiten Flächen, eine Spalte auf dem Smartphone. */
.mehrfach-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; }
/* Haken auf der Linie der ersten Textzeile (eine Beschriftung darf auf zwei Zeilen umbrechen): 7,5 px + Zeile 21 px + 7,5 px = Feldhöhe. */
.mehrfach-liste .kaestchen { min-height: var(--feld-hoehe); align-items: flex-start; padding-top: 7.5px; margin: 0; }
.mehrfach-liste .kaestchen > input[type="checkbox"], .mehrfach-liste .kaestchen > input[type="radio"] { margin-top: 1.5px; }
.mehrfach-liste .kaestchen label { overflow-wrap: anywhere; }
@media (max-width: 520px) { .mehrfach-liste { grid-template-columns: minmax(0, 1fr); } }

/* Mein Profil (Reiter Zugang, Passwort, PIN & Geräte, Zwei-Faktor) */
.reiter-feld .gruppe-titel { font-size: 14px; margin: 20px 0 8px; color: var(--text-gedaempft); font-weight: 700; }
.reiter-feld .gruppe-titel:first-child, .reiter-titel-zeile .gruppe-titel { margin-top: 0; margin-bottom: 0; }
.reiter-feld > * + * { margin-top: 12px; }
.reiter-titel-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.reiter-abstand { margin-top: 24px; }
.profil-kopf { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.profil-daten { flex: 1 1 260px; min-width: 0; }
.profil-gross { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--linie); flex: 0 0 96px; }
.profil-gross-leer { display: inline-flex; align-items: center; justify-content: center; background: var(--haupt-hell); color: var(--haupt); font-size: 40px; }
.qr-box { display: inline-block; padding: 8px; background: #fff; border: 1px solid var(--linie); border-radius: 8px; }
.qr { display: block; width: min(100%, 280px); height: auto; aspect-ratio: 1 / 1; }
.geheimnis { display: inline-block; padding: 6px 10px; background: var(--tabellenkopf); border-radius: 6px; font-size: 15px; letter-spacing: 1px; overflow-wrap: anywhere; }
.codes-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.codes-liste code { display: block; padding: 8px 10px; background: var(--tabellenkopf); border-radius: 6px; font-size: 15px; text-align: center; }

/* Karten ohne eigene Box im Reiter (Firma): Abstand untereinander, Titelzeile rechtsbündig ohne Titel */
.karten-flach { border: 1px solid var(--linie); border-radius: var(--box-rundung); padding: 12px 16px; background: var(--flaeche); min-width: 0; }
.karten-flach + .karten-flach { margin-top: var(--box-abstand); }
.karten-flach > .gruppe-titel:first-child { margin-top: 0; }
.karten-flach > * + * { margin-top: 12px; }
.karten-flach > .gruppe-titel + * { margin-top: 8px; }
.reiter-titel-rechts { justify-content: flex-end; }

/* Reiter als Links (eigene Seiten, zum Beispiel Aufgaben): immer sichtbar, ohne Skript */
.reiter-leiste.reiter-links { display: flex; margin-bottom: 0; border-bottom: 0; flex: 1 1 auto; }
a.reiter-knopf { display: inline-flex; align-items: center; text-decoration: none; }

/* Reiter als eigene Seiten (kern/fsv/includes/funk-reiter.php): echte Links, immer sichtbar, der aktive Reiter kommt vom Server */
.reiter-leiste.reiter-fest { display: flex; }
.reiter-fest .reiter-knopf { gap: 8px; white-space: nowrap; }
.reiter-symbol { display: inline-flex; align-items: center; justify-content: center; width: 18px; flex: 0 0 18px; font-size: 14px; }
.reiter-fest .reiter-zaehler { margin-left: 2px; }

/* Foto-Ausschnitt (zoomen und verschieben) */
.foto-buehne { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.foto-buehne[hidden] { display: none; }
.foto-flaeche-rahmen { display: flex; justify-content: center; }
.foto-flaeche { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1 / 1; border-radius: 8px; border: 1px solid var(--linie); background: #fff; touch-action: none; cursor: grab; }
.foto-flaeche.zieht { cursor: grabbing; }
.foto-buehne .feld { width: 100%; max-width: 320px; margin: 0 auto; text-align: center; }
.foto-buehne input[type="range"] { display: block; width: 100%; max-width: 320px; height: 28px; margin: 0 auto; padding: 0; }

/* Mein Profil: Bezeichnung über dem Wert, linksbündig (Vorgabe 06.10.2026), nicht links/rechts getrennt */
.profil-daten .karten-wert, .reiter-feld .karten-wert.profil-wert { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 2px; }
.profil-daten .karten-wert > span, .reiter-feld .karten-wert.profil-wert > span { font-size: 12px; font-weight: 600; }
.profil-daten .karten-wert > strong, .reiter-feld .karten-wert.profil-wert > strong { text-align: left; }

/* Datei-Auswahl: Abstand zur Beschriftung, zu Hinweisen darunter und zu den Knöpfen */
.feld input[type="file"] { margin-top: 0; }
/* Der Knopf der Dateiauswahl sieht aus wie die anderen Knöpfe (nicht der Standardknopf des Browsers). */
input[type="file"]::file-selector-button { height: 24px; margin: 0 10px 0 0; padding: 0 12px; border: 1px solid var(--rahmen-eingabe); border-radius: 6px; background: var(--flaeche); color: var(--haupt); font: 600 13px var(--schrift-text); cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--haupt); }
.feld input[type="file"] ~ .feld-hinweis { margin: 8px 0 0; }
form:has(input[type="file"]) .aktionen { margin-top: 16px; }

/* Mehrere Häkchen in einer Reihe (zum Beispiel Einsatzstandorte) */
.kaesten-reihe { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 8px 0; }

/* Platzhalter-Knöpfe der Versandtexte: Abstand wie überall zwischen Knöpfen */
.platzhalter-reihe { display: flex; flex-wrap: wrap; gap: var(--knopf-abstand); margin-top: 4px; }
.platzhalter-reihe .knopf { height: auto; min-height: var(--feld-hoehe-klein, 32px); white-space: normal; text-align: left; }
.vt-sprache { max-width: 260px; margin: 8px 0 12px; }

/* Schnellwahl unter einem Feld (zum Beispiel 45 / 60 Minuten) */
.schnellwahl { display: flex; flex-wrap: wrap; gap: var(--knopf-abstand); margin: 4px 0; }

/* Fuhrpark: Zusatzzeile unter dem Namen, Art-Pillen als Links, Fristen nebeneinander, Felder je Art ausblenden */
.zusatz { display: block; font-size: 14px; color: var(--text-gedaempft); }
.pillen-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; font-size: 14px; }
.pillen-titel { font-weight: 600; color: var(--text-gedaempft); }
a.pille { text-decoration: none; }
a.pille:hover { border-color: var(--haupt); color: var(--haupt); }
a.pille[aria-current="true"] { background: var(--haupt-hell); border-color: var(--haupt); color: var(--haupt); }
.fristen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
[data-ohne-art][hidden], [data-einsatz-gruppe][hidden], [data-privat-feld][hidden] { display: none !important; }
/* Fahrzeugformular: Klassen und "Geeignet für" getrennt, je ein Abschnitt; die Haken zweispaltig (eine Spalte auf dem Handy), gleich hohe Zeilen */
.fz-abschnitte { display: flex; flex-direction: column; gap: var(--box-abstand, 8px); margin: 8px 0; }
.fz-abschnitt { border: 1px solid var(--linie, #E1E3EA); border-radius: 8px; padding: 12px 16px; background: var(--flaeche, #fff); }
.fz-abschnitt[hidden] { display: none !important; }
.fz-abschnitt .gruppe-titel { margin: 0 0 8px; }
.fz-haken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.fz-haken .kaestchen { min-height: var(--feld-hoehe); align-items: center; margin: 0; }
.fz-haken .kaestchen label { overflow-wrap: anywhere; }
.fz-haken .fz-haken-leer { grid-column: 1 / -1; }
@media (max-width: 520px) { .fz-haken { grid-template-columns: minmax(0, 1fr); } }
.fz-privat { margin-top: 12px; }
.fz-privat label { display: block; }
.fz-privat select { max-width: 320px; }
.bisher-deaktiviert { margin: 0; color: var(--warnung); }
.bisher-deaktiviert i { margin-right: 4px; }

/* Fuhrpark > Kosten: Kennzahlen der Auswahl, stornierte Posten durchgestrichen, Liter nur bei "Tanken" */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.kennzahlen-klein { margin: 4px 0 8px; }
.kennzahl { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--hintergrund); min-width: 0; }
.kennzahl > span { font-size: 12px; font-weight: 600; color: var(--text-gedaempft); }
.kennzahl > strong { font-size: 16px; overflow-wrap: anywhere; text-align: center; }
.kosten-storniert td { text-decoration: line-through; color: var(--text-gedaempft); }
.kosten-storniert td .pille { text-decoration: none; }
[data-nur-tanken][hidden] { display: none !important; }
.kopf-filter { min-width: 0; max-width: 100%; }
.kopf-filter select { min-width: 0; max-width: 100%; }

/* Bild-Ausschnitt (Logo eines Standorts, Logos in QR-Codes): Anzeige, Ausschnitt-Bühne, Vorschau auf Weiß und Papier */
.ausschnitt-stand { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 12px; }
.ausschnitt-fassung { display: flex; flex-direction: column; gap: 6px; }
.ausschnitt-etikett { font-size: 14px; color: var(--text-gedaempft); }
.ausschnitt-flaeche { display: flex; align-items: center; justify-content: center; width: 240px; max-width: 100%; height: 140px; padding: 8px; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.ausschnitt-weiss { background: #ffffff; }
.ausschnitt-papier { background: #f1ecdf; }
.ausschnitt-flaeche img, .ausschnitt-flaeche canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.ausschnitt-buehne { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ausschnitt-buehne[hidden] { display: none; }
.ausschnitt-format { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ausschnitt-format select { width: auto; min-width: 160px; }
.ausschnitt-bild { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ausschnitt-flaeche-canvas { width: 100%; max-width: 560px; height: auto; border: 1px solid var(--linie); border-radius: 8px; touch-action: none; background-color: #ffffff; background-image: linear-gradient(45deg, #e6e8ee 25%, transparent 25%, transparent 75%, #e6e8ee 75%), linear-gradient(45deg, #e6e8ee 25%, transparent 25%, transparent 75%, #e6e8ee 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.ausschnitt-regler { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 560px; text-align: center; font-size: 14px; }
.ausschnitt-regler input[type="range"] { display: block; width: 100%; height: 28px; padding: 0; }
.ausschnitt-fehler { color: #9e1f17; }
.ausschnitt-fehler[hidden] { display: none; }

/* QR-Codes mit Logo (Administration > Einstellungen > QR-Codes): je Bereich Formular links, Vorschau rechts */
.qr-bereich { padding: 12px 0; border-top: 1px solid var(--linie); }
.qr-bereich:first-of-type { border-top: 0; }
.qr-titel { font-size: 16px; line-height: 21px; margin: 0 0 4px; }
/* Das Formular beginnt auf der Oberkante der Vorschau daneben (Spalten nebeneinander: erste Zeile auf einer Linie). */
.qr-formular > .karten-formular:first-child { margin-top: 0; }
.qr-inhalt { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-top: 8px; }
.qr-formular { flex: 1 1 320px; min-width: 0; }
.qr-vorschau { flex: 0 1 260px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qr-flaeche { display: inline-flex; align-self: flex-start; padding: 8px; border: 1px solid var(--linie); border-radius: 8px; background: #ffffff; }
.qr-flaeche svg { display: block; max-width: 100%; height: auto; }

/* Logo & Darstellung > Logogrößen: Regler, Zahlenfeld und Vorschau in nachgebauter Umgebung (kern/web/js/logo-groesse.js setzt --vorschau-hoehe). */
.logo-regler-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.logo-regler { flex: 1 1 260px; min-width: 0; }
.logo-regler input[type="range"] { width: 100%; height: var(--feld-hoehe); margin: 0; accent-color: var(--haupt); }
.logo-zahl { flex: 0 0 140px; }
.logo-vorschau-feld { min-width: 0; padding: 12px; border: 1px dashed var(--linie); border-radius: 10px; background: var(--hintergrund); overflow: hidden; }
.logo-vorschau-feld > * + * { margin-top: 8px; }
.logo-umgebung { display: block; min-width: 0; max-width: 100%; box-sizing: border-box; }
.logo-vorschau-logo { display: flex; align-items: center; justify-content: center; height: var(--vorschau-hoehe); max-width: 100%; min-width: 0; }
.logo-vorschau-bild { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
/* Pixel-Vorschauen: die Breite ist eingestellt, die Höhe folgt dem Bild (höchstens --vorschau-hoehe-max). Der Briefkopf (mm) bleibt bei fester Höhe. */
.logo-vorschau-feld[data-logo-vorschau="px"] .logo-vorschau-logo { width: var(--vorschau-breite); height: auto; max-height: var(--vorschau-hoehe-max, none); }
.logo-vorschau-feld[data-logo-vorschau="px"] .logo-vorschau-bild { width: 100%; height: auto; max-height: var(--vorschau-hoehe-max, none); }
.logo-vorschau-feld[data-logo-vorschau="px"] .logo-vorschau-platzhalter { width: 100%; height: auto; }
.logo-mass { margin: 0; }
.logo-vorschau-platzhalter { display: flex; align-items: center; justify-content: center; height: 100%; aspect-ratio: 2 / 1; max-width: 100%; border: 1px dashed currentColor; border-radius: 6px; font-size: 12px; opacity: .7; box-sizing: border-box; }
/* Kopfleiste */
.logo-umgebung-kopfleiste { display: flex; align-items: center; gap: 24px; padding: 10px 8px 10px 7px; background: var(--kopfleiste); color: var(--kopfleiste-text); }
.logo-umgebung-marke { display: flex; align-items: center; gap: 6px; min-width: 0; }
.logo-umgebung-marke .logo-umgebung-titel { font-family: var(--schrift-titel); font-size: 22px; font-weight: 700; }
.logo-umgebung-kette { font-size: 14px; }
/* Anmeldeseite */
.logo-vorschau-feld [hidden] { display: none; }
.logo-box-mass { margin: 0; }
.logo-umgebung-anmeldung { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: var(--box-aussen); padding: var(--box-padding); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--box-rundung); }
.logo-umgebung-anmeldung .logo-vorschau-logo { margin-bottom: 4px; }
/* Maßlinie: so breit wie die Box innen, damit sich Logo- und Boxbreite direkt vergleichen lassen. */
.logo-masslinie { display: flex; align-items: center; justify-content: center; position: relative; height: 12px; border-left: 1px solid var(--text-gedaempft); border-right: 1px solid var(--text-gedaempft); }
.logo-masslinie::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--text-gedaempft); }
.logo-masslinie-text { position: relative; padding: 0 8px; background: var(--flaeche); font-size: 12px; color: var(--text-gedaempft); }
.logo-umgebung-zeile { display: block; height: var(--feld-hoehe); border: 1px solid var(--linie); border-radius: 8px; background: var(--hintergrund); }
.logo-umgebung-knopf { display: flex; align-items: center; justify-content: center; height: var(--feld-hoehe); border-radius: 8px; background: var(--haupt); color: #FFFFFF; font-weight: 700; }
/* Leiste im Portal */
.logo-umgebung-portalleiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 380px; padding: 8px 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; color: var(--haupt); }
.logo-umgebung-symbole { display: flex; gap: 16px; font-size: 18px; }
/* Briefkopf im Maßstab; alle Maße in mm kommen als --g-* aus BRIEFPAPIER_LAGE (unitlos), --massstab setzt das Skript */
.logo-umgebung-briefkopf { position: relative; width: calc(210 * var(--massstab) * 1mm); height: calc(var(--g-vorschau-hoehe) * var(--massstab) * 1mm); background: #FFFFFF; border: 1px solid var(--linie); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); overflow: hidden; }
.logo-brief-logo { position: absolute; top: calc(var(--g-logo-oben) * var(--massstab) * 1mm); right: calc(var(--g-logo-rechts) * var(--massstab) * 1mm); width: var(--vorschau-breite); height: var(--vorschau-hoehe); max-width: 100%; }
.logo-brief-logo .logo-vorschau-logo { width: 100%; height: 100%; justify-content: flex-end; align-items: flex-start; }
.logo-brief-logo .logo-vorschau-bild { width: 100%; height: 100%; object-position: top right; }
.logo-brief-rand { position: absolute; left: 0; right: 0; top: calc(var(--g-text-oben) * var(--massstab) * 1mm); border-top: 1px dashed var(--text-gedaempft); }
.logo-brief-ruecksende { position: absolute; left: calc(var(--g-ruecksende-x) * var(--massstab) * 1mm); top: calc((var(--g-ruecksende-y) - 2) * var(--massstab) * 1mm); width: calc(var(--g-ruecksende-b) * var(--massstab) * 1mm); border-top: 1px solid var(--linie); }
.logo-brief-anschrift { position: absolute; left: calc(var(--g-anschrift-x) * var(--massstab) * 1mm); top: calc((var(--g-anschrift-y) - 4) * var(--massstab) * 1mm); width: calc(var(--g-anschrift-b) * var(--massstab) * 1mm); height: calc(18 * var(--massstab) * 1mm); background: repeating-linear-gradient(to bottom, var(--linie) 0, var(--linie) 1px, transparent 1px, transparent calc(4.55 * var(--massstab) * 1mm)); }
.logo-brief-info { position: absolute; left: calc(var(--g-info-x) * var(--massstab) * 1mm); top: calc((var(--g-info-y) - 3) * var(--massstab) * 1mm); width: calc(var(--g-info-b) * var(--massstab) * 1mm); height: calc(30 * var(--massstab) * 1mm); background: repeating-linear-gradient(to bottom, var(--linie) 0, var(--linie) 1px, transparent 1px, transparent calc(3.33 * var(--massstab) * 1mm)); }