/* Design nach loveliciouslife.at: Weiß, Blaugrau #A9B8CC, Pfirsich #F0B9AF,
   Assistant + Rock Salt (selbst gehostet) */

@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/assistant.woff2') format('woff2');
}

@font-face {
    font-family: 'Rock Salt';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/rock-salt.woff2') format('woff2');
}

:root {
    /* Markenfarben */
    --blau: #a9b8cc;          /* Blaugrau, hell: Ränder, Fokus, dekorativ */
    --blau-dunkel: #5a6e8c;   /* abgedunkelt für Knöpfe/Links (Kontrast auf Weiß) */
    --blau-tief: #49597a;     /* Hover-Zustand */
    --pfirsich: #f0b9af;      /* Pfirsich: warme Akzente, Badges */
    --pfirsich-hell: #fbeae6; /* zarte Hintergrundfläche */
    --pfirsich-dunkel: #b06a5b; /* lesbare Textvariante des Pfirsichtons */

    --tinte: #040404;
    --text: #4a4a4a;
    --grau-hell: #e5e5e5;
    --fehler: #a5433c;
    --erfolg-gruen: #6d8a5b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text);
    background: #fff;
}

h1, h2, h3 {
    color: var(--tinte);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.6em;
}

a {
    color: var(--blau-dunkel);
}

/* Kopfbereich */

.kopf {
    text-align: center;
    padding: 2.2rem 1rem 1.6rem;
    border-bottom: 1px solid var(--grau-hell);
}

.kopf-marke {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

.kopf-marke a {
    color: var(--tinte);
    text-decoration: none;
    display: inline-block;
}

.kopf-logo {
    width: 180px;
    max-width: 70vw;
    height: auto;
    display: block;
}

.kopf-marke span {
    color: var(--pfirsich-dunkel);
}

/* Mit JavaScript (Klasse kopf-fixiert): Kopf liegt fix über der Seite und
   schrumpft beim Scrollen stufenlos — --schrumpf läuft von 0 (voll) bis 1
   (klein). Den Platz hält kopf.js als konstantes Polster am Seitenanfang
   frei, damit das Schrumpfen die Seitenhöhe nicht verändert (sonst
   schaukelt sich am Seitenende ein Flackern auf).
   Ohne JavaScript scrollt der Kopf wie bisher einfach mit. */
.kopf-fixiert .kopf {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: #fff;
    padding: calc(2.2rem - 1.75rem * var(--schrumpf, 0)) 1rem
             calc(1.6rem - 1.15rem * var(--schrumpf, 0));
}

.kopf-fixiert .kopf-logo {
    width: calc(180px - 110px * var(--schrumpf, 0));
}

/* Inhalt */

.inhalt {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.inhalt-breit {
    max-width: 1100px;
}

.seitentitel {
    text-align: center;
    font-weight: 300;
    font-size: 2rem;
    letter-spacing: 0.08em;
    margin-bottom: 1.5rem;
}

.seitentitel .akzent {
    font-family: 'Rock Salt', cursive;
    font-size: 1.4rem;
    color: var(--pfirsich-dunkel);
}

.karte {
    background: #fff;
    border: 1px solid var(--grau-hell);
    padding: 1.6rem 1.8rem;
    margin-bottom: 1.6rem;
    overflow-x: auto; /* breite Tabellen scrollen in der Karte, statt sie zu sprengen */
}

.kursliste .kurskarte h2 {
    margin-bottom: 0.2em;
}

/* Filterleiste über der Kursliste (Deeplinks: ?filter=kinder / ?filter=erwachsene) */
.filter-leiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.filter-knopf {
    display: inline-block;
    padding: 0.3rem 1.05rem;
    border: 1px solid var(--blau);
    border-radius: 999px;
    color: var(--blau-dunkel);
    text-decoration: none;
    font-weight: 400;
}

.filter-knopf:hover {
    background: var(--blau);
    color: #fff;
}

.filter-knopf-aktiv {
    background: var(--blau-dunkel);
    border-color: var(--blau-dunkel);
    color: #fff;
    font-weight: 600;
}

/* Titelzeile der Kurskarte: Titel links, Verfügbarkeits-Badge rechts */
.kurs-titelzeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem 1rem;
    flex-wrap: wrap;
}

.kurs-badge {
    background: var(--pfirsich);
    color: #7c3a2d;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
}

.kurs-badge-knapp {
    background: var(--pfirsich-hell);
    color: var(--pfirsich-dunkel);
}

/* Ausgebuchte Kurse: Karte dezent zurückgenommen */
.kurs-ausgebucht {
    border-top-style: solid;
    border-top-color: var(--pfirsich);
}

.kurs-ausgebucht .kurs-beschreibung,
.kurs-ausgebucht .kurs-meta {
    opacity: 0.75;
}

.kurs-aktion-hinweis {
    font-size: 0.92rem;
    color: var(--text);
}

.kurs-meta {
    color: var(--blau-dunkel);
    font-weight: 400;
    letter-spacing: 0.04em;
    margin-top: 0;
}

/* Zusammengehörendes bricht nie intern um (Datum, Ort, Preis) */
.meta-teil {
    white-space: nowrap;
}

.meta-rabatt {
    color: var(--erfolg-gruen);
    font-weight: 600;
}

.kurs-aktion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}

.kurs-aktion .knopf-neben {
    margin-left: 0;
}

/* Anmelde-Knopf in der Kursliste etwas dezenter als die Formular-Knöpfe */
.kurs-aktion .knopf {
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
}

.kurs-beschreibung {
    white-space: normal;
}

/* Kursbild unter Titel und Kursdetails, links neben der Beschreibung;
   ohne Bild bleibt das Layout unverändert */
.kurs-inhalt {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.kurs-text {
    flex: 1 1 0;
    min-width: 0;
}

.kurs-bild {
    flex: 0 0 240px;
    max-width: 38%;
    display: block;
}

.kurs-bild img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--grau-hell);
}

.kurs-bild:hover img {
    border-color: var(--blau);
}

/* Großansicht ohne JavaScript: erscheint, wenn der Anker angesteuert wird
   (#bild-…); ein Klick irgendwo schließt sie wieder */
.lichtbox {
    display: none;
}

.lichtbox:target {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(4, 4, 4, 0.82);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    cursor: zoom-out;
}

.lichtbox img {
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    background: #fff;
    padding: 6px;
}

/* Klickbare Angaben in der Kurszeile (Ort, Einheiten): öffnen einen
   Detail-Dialog; Mouseover zeigt einen Tooltip (title-Attribut) */
.detail-link {
    color: var(--blau-dunkel);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/* Detail-Dialog (Treffpunkt, Terminliste) als Overlay ohne JavaScript
   (CSS :target); Klick auf Hintergrund oder „Schließen" blendet ihn aus */
.detail-dialog {
    display: none;
}

.detail-dialog:target {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(4, 4, 4, 0.55);
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.detail-dialog-hintergrund {
    position: absolute;
    inset: 0;
}

.detail-dialog-karte {
    position: relative;
    background: #fff;
    border: 1px solid var(--grau-hell);
    max-width: 460px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.4rem 1.6rem;
}

.detail-dialog-titel {
    margin-bottom: 0.6rem;
}

.detail-dialog-bild {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--grau-hell);
    margin-bottom: 0.9rem;
}

.ort-adresse {
    font-weight: 600;
    color: var(--tinte);
    margin: 0 0 0.6rem;
}

.ort-links a {
    font-weight: 600;
}

.detail-dialog-hinweis {
    font-size: 0.85rem;
    color: #777;
    margin-top: 0.3rem;
}

.detail-dialog-schliessen {
    margin-bottom: 0;
}

.termine {
    padding-left: 1.2rem;
    margin: 0.4rem 0 0.8rem;
}

/* Workshop-Termine zur Auswahl: Label und Termine als Pillen in einer
   Zeile — greift die Form der Filter-Knöpfe oben auf der Seite auf */
.termin-pillen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
}

.termin-pillen-titel {
    color: var(--blau-dunkel);
    font-weight: 600;
}

.termin-pille {
    display: inline-block;
    padding: 0.25rem 0.9rem;
    border: 1px solid var(--blau);
    border-radius: 999px;
    color: var(--blau-dunkel);
    font-size: 0.95rem;
    white-space: nowrap;
}

/* „+ n weitere": öffnet den Dialog mit allen offenen Workshop-Terminen */
.termin-pille-mehr {
    background: var(--blau-dunkel);
    border-color: var(--blau-dunkel);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.termin-pille-voll {
    border-color: var(--grau-hell);
    color: #888;
}

.termin-hinweis {
    color: var(--pfirsich-dunkel);
    font-size: 0.85em;
}

.termin-pille-voll .termin-hinweis {
    color: #888;
}

/* Knöpfe */

.knopf {
    display: inline-block;
    background: var(--blau-dunkel);
    color: #fff;
    text-decoration: none;
    border: 0;
    padding: 0.7rem 1.6rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.knopf:hover,
.knopf:focus {
    background: var(--blau-tief);
    color: #fff;
}

.knopf-gross {
    width: 100%;
    padding: 0.9rem;
    margin-top: 1rem;
}

.knopf-neben {
    margin-left: 0.6rem;
}

.knopf-schlicht {
    background: #fff;
    color: var(--blau-dunkel);
    border: 1px solid var(--blau);
}

/* Hinweise */

.hinweis-voll,
.hinweis-knapp {
    display: inline-block;
    padding: 0.15rem 0.7rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.hinweis-voll {
    background: var(--pfirsich);
    color: #7c3a2d;
}

.hinweis-knapp {
    background: var(--pfirsich-hell);
    color: var(--pfirsich-dunkel);
}

/* Formular */

.formular-abschnitt {
    border: 1px solid var(--grau-hell);
    border-left: 3px solid var(--blau);
    padding: 1.1rem 1.2rem 0.4rem;
    margin: 0 0 1.6rem;
    /* fieldsets weigern sich sonst, schmäler als ihr Inhalt zu werden
       (min-inline-size: min-content) — ein zu breites Element würde am
       Handy den ganzen Abschnitt aufspannen */
    min-width: 0;
}

.formular-abschnitt legend {
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blau-dunkel);
    padding: 0 0.5rem;
}

.formular-abschnitt.abschnitt-kind {
    border-left-color: var(--pfirsich);
}

.formular-abschnitt.abschnitt-kind legend {
    color: var(--pfirsich-dunkel);
}

.feld-hinweis {
    font-size: 0.88rem;
    color: var(--text);
    margin: 0.3rem 0 0;
}

.formular .feld {
    margin-bottom: 1.1rem;
}

.feldzeile {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.feldzeile .feld {
    flex: 1 1 240px;
}

.feldzeile .feld-klein {
    flex: 0 1 120px;
}

/* Reihe gleich breiter Zahlenfelder (Admin-Kursformular) */
.feldzeile-zahlen .feld {
    flex: 1 1 120px;
    max-width: 170px;
}

.feldzeile-zahlen label {
    white-space: nowrap;
}

.feld-status {
    max-width: 260px;
}

label {
    display: block;
    font-weight: 600;
    color: var(--tinte);
    margin-bottom: 0.25rem;
}

.optional {
    font-weight: 300;
    color: var(--text);
}

/* Nach einem Absenden mit Fehlern springt der Browser per autofocus zum
   ersten fehlerhaften Feld. Der Seitenkopf liegt dabei fix über der
   Seite — ohne diesen Abstand verschwände das Feld darunter. */
.formular input,
.formular select,
.formular textarea {
    scroll-margin-top: 6rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--tinte);
    border: 1px solid #ccc;
    border-radius: 0;
    background: #fff;
}

input:focus,
select:focus,
textarea:focus,
a:focus,
button:focus {
    outline: 3px solid var(--blau);
    outline-offset: 1px;
}

.feld-label {
    font-weight: 600;
    color: var(--tinte);
    margin: 0 0 0.25rem;
}

.feld-radio {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

.feld-radio input {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
}

.feld-radio label {
    font-weight: 300;
    margin: 0;
}

/* „Andere"-Auswahl mit Freitextfeld: Das Feld klappt allein über CSS auf,
   sobald der Radioknopf gewählt ist — ohne JavaScript. Dafür muss das
   Textfeld ein Geschwisterelement des Radioknopfs sein. */
.feld-radio-mit-freitext {
    flex-wrap: wrap;
}

.quelle-freitext {
    display: none;
    width: 100%;
    margin: 0.5rem 0 0.3rem 1.8rem;
}

#quelle-andere:checked ~ .quelle-freitext {
    display: block;
}

.quelle-freitext label {
    display: block;
    font-weight: 300;
    font-size: 0.92rem;
    margin-bottom: 0.2rem;
}

/* Das Textfeld steckt im .feld-radio und würde sonst von der Regel für
   Radioknöpfe (.feld-radio input) auf 1,2 rem zusammengestaucht */
.quelle-freitext input[type="text"] {
    width: 100%;
    height: auto;
    padding: 0.6rem 0.7rem;
}

.feld-checkbox {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.feld-checkbox input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.feld-checkbox label {
    font-weight: 300;
}

.feld-fehler {
    color: var(--fehler);
    font-weight: 600;
    font-size: 0.92rem;
    margin: 0.3rem 0 0;
}

.formular-erfolg {
    background: #e9efe4;
    border: 1px solid #cddbc3;
    color: var(--erfolg-gruen);
    padding: 0.8rem 1rem;
    font-weight: 600;
}

.formular-fehler {
    background: var(--pfirsich-hell);
    border: 1px solid var(--pfirsich);
    color: var(--fehler);
    padding: 0.8rem 1rem;
    font-weight: 600;
}

/* Preis-Zusammenfassung am Formularende */
.preis-box {
    border-top: 1px solid var(--grau-hell);
    margin-top: 1.2rem;
    padding-top: 0.9rem;
}

.preis-zeile {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.2rem 0;
}

.preis-gesamt {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--tinte);
    border-top: 2px solid var(--blau);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.pflicht-hinweis {
    font-size: 0.88rem;
    margin-bottom: 0;
}

/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */
.webseite-feld {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Erfolgs-/Statusseiten */

.erfolg h1 {
    color: var(--erfolg-gruen);
}

/* Fußzeile */

.fuss {
    text-align: center;
    padding: 1.5rem 1rem 2.5rem;
    border-top: 1px solid var(--grau-hell);
    font-size: 0.9rem;
}

/* Admin */

/* Farbwelten der drei Admin-Teile: Kursmanagement bleibt Blau/Grau,
   Hochzeitsplanung ist Lachsrosa, der Allgemeine Teil (Newsletter,
   Einstellungen) Salbeigrün. Umgesetzt durch Umfärben der Blau-
   Variablen, die alle Admin-Komponenten (Knöpfe, Links, Nav, Tabellen,
   Fokusrahmen) ohnehin nutzen — die Klasse setzt admin_seite_start(). */
body.admin-teil-hochzeit {
    --blau: #f0b9af;          /* Lachsrosa (= Pfirsichton der Marke) */
    --blau-dunkel: #ab5f50;   /* lesbare Textvariante auf Weiß */
    --blau-tief: #914e41;     /* Hover-Zustand */
}

body.admin-teil-allgemein {
    --blau: #b1c4ad;          /* Salbeigrün, hell */
    --blau-dunkel: #5c7a55;   /* lesbare Textvariante auf Weiß */
    --blau-tief: #4a6344;     /* Hover-Zustand */
}

/* Im Hauptmenü zeigt jeder Punkt beim Überfahren die Farbe seines
   Teils — so ist die Gruppierung auch von fremden Seiten aus sichtbar */
.admin-nav-punkt.nav-teil-yoga:hover { border-bottom-color: #a9b8cc; }
.admin-nav-punkt.nav-teil-hochzeit:hover { border-bottom-color: #f0b9af; }
.admin-nav-punkt.nav-teil-allgemein:hover { border-bottom-color: #b1c4ad; }
.admin-nav-punkt.nav-teil-yoga.admin-nav-aktiv { border-bottom-color: #5a6e8c; }
.admin-nav-punkt.nav-teil-hochzeit.admin-nav-aktiv { border-bottom-color: #ab5f50; }
.admin-nav-punkt.nav-teil-allgemein.admin-nav-aktiv { border-bottom-color: #5c7a55; }

/* Umschalter Yoga | Hochzeit direkt unter der Marke: zwei Pillen, die
   aktive in der Farbe ihres Teils. Er bestimmt, welche Bereiche das
   Menü darunter zeigt (admin_modus() in src/auth.php). */
.admin-modus {
    display: inline-flex;
    margin-top: 0.7rem;
    border: 1px solid var(--grau-hell);
    border-radius: 999px;
    padding: 3px;
    background: #fff;
}

.admin-modus-punkt {
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 1.1rem;
    border-radius: 999px;
}

.admin-modus-punkt:hover {
    color: var(--tinte);
}

.admin-modus-punkt.admin-modus-aktiv {
    color: #fff;
    font-weight: 600;
}

.admin-modus-yoga.admin-modus-aktiv { background: #5a6e8c; }
.admin-modus-hochzeit.admin-modus-aktiv { background: #ab5f50; }

/* Trennstrich zwischen den drei Teilen im Hauptmenü */
.admin-nav-trenner {
    width: 1px;
    align-self: stretch;
    background: var(--grau-hell);
}

.kopf-admin {
    padding-bottom: 1rem;
}

/* Admin-Menü: Ebene 1 = Bereiche, Ebene 2 = Unterpunkte NUR des
   Bereichs, in dem man gerade ist. */
.admin-nav {
    max-width: 1100px;      /* gleiche Breite wie der Inhalt darunter */
    margin: 1rem auto 0;
    text-align: left;
}

.admin-nav-haupt {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.3rem 1.7rem;
    border-bottom: 2px solid var(--grau-hell);
    padding: 0 0.2rem;
}

.admin-nav-punkt {
    color: var(--text);
    text-decoration: none;
    font-size: 1.05rem;
    padding: 0 0 0.4rem;
    margin-bottom: -2px; /* Reiter sitzt auf der Trennlinie */
    border-bottom: 3px solid transparent;
}

.admin-nav-punkt:hover {
    color: var(--tinte);
    border-bottom-color: var(--blau);
}

.admin-nav-punkt.admin-nav-aktiv {
    color: var(--tinte);
    font-weight: 600;
    border-bottom-color: var(--blau-dunkel);
}

.admin-nav-rechts {
    margin-left: auto;
    padding-bottom: 0.4rem;
    font-size: 0.85rem;
}

.admin-nav-rechts a {
    margin-left: 0.8rem;
}

/* Unterpunkte des aktiven Bereichs */
.admin-nav-unter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    padding: 0.55rem 0.2rem 0;
    font-size: 0.92rem;
}

.admin-nav-unterpunkt {
    color: var(--blau-dunkel);
    text-decoration: none;
}

.admin-nav-unterpunkt:hover {
    text-decoration: underline;
}

.admin-nav-unterpunkt.admin-nav-aktiv {
    color: var(--tinte);
    font-weight: 600;
}

.admin-benutzer {
    color: var(--text);
    margin-left: 1rem;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tabelle th,
.tabelle td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--grau-hell);
}

.tabelle th {
    color: var(--tinte);
    border-bottom: 2px solid var(--blau);
}

.tabelle .aktionen form {
    display: inline-block;
}

/* Aktionsspalte: Knöpfe brechen in der Zelle um (ca. zwei pro Zeile),
   statt in einer langen Zeile aus der Karte zu ragen */
.tabelle td.aktionen {
    min-width: 13.5rem;
}

/* Zellen, die nie intern umbrechen sollen (Preis, Termine, Datum) */
.tabelle .kein-umbruch {
    white-space: nowrap;
}

/* Kurszeile im Admin: Titel, darunter Kategorien und Anmeldelink */
.kurs-titel {
    display: block;
    line-height: 1.35;
}

.kurs-zusatz {
    display: block;
    color: #777;
    line-height: 1.5;
}

.knopf-mini-warnung {
    color: var(--fehler);
    border-color: var(--pfirsich);
}

.knopf-mini-warnung:hover {
    background: var(--fehler);
    border-color: var(--fehler);
    color: #fff;
}

/* Endgültiges Löschen: roter Knopf mit Papierkorb-Symbol */
.knopf-mini-loeschen {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--fehler);
    border-color: var(--fehler);
    color: #fff;
    font-weight: 600;
}

.knopf-mini-loeschen:hover {
    background: #83352f; /* abgedunkeltes Rot */
    border-color: #83352f;
    color: #fff;
}

.knopf-icon {
    flex-shrink: 0;
    vertical-align: -0.15em;
}

.knopf-mini {
    display: inline-block;
    white-space: nowrap; /* nie mitten im Wort umbrechen („QR-Code") */
    background: #fff;
    color: var(--blau-dunkel);
    border: 1px solid var(--blau);
    padding: 0.15rem 0.55rem;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    margin: 0 0.15rem 0.15rem 0;
}

.knopf-mini:hover {
    background: var(--blau-dunkel);
    color: #fff;
}

.knopf-mini-aktiv {
    background: var(--blau-dunkel);
    border-color: var(--blau-dunkel);
    color: #fff;
    font-weight: 600;
}

/* Workshops mit Terminwahl: Plätze gelten pro Termin, deshalb steht in der
   Termin-Spalte jeder Termin in einer eigenen Zeile mit (belegt/max) */

.termin-zeile {
    display: block;
    line-height: 1.5;
}

.termin-zeile-voll,
.termin-fehlt {
    color: var(--fehler);
}

/* Termin-Filter über der Anmeldeliste */

.termin-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 1rem;
}

.termin-filter-titel {
    margin-right: 0.35rem;
    color: var(--blau-dunkel);
    font-weight: 600;
}

.filter-hinweis {
    margin: -0.5rem 0 1rem;
    color: var(--text);
}

/* Statistik: Kennzahlen-Kacheln */
.statistik-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.stat-karte {
    flex: 1 1 160px;
    text-align: center;
    margin-bottom: 1rem;
}

.stat-zahl {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--tinte);
    margin: 0;
    line-height: 1.2;
}

.stat-name {
    margin: 0.15rem 0 0;
    color: var(--blau-dunkel);
    font-weight: 400;
}

/* Newsletter-Vorschau (gerenderte Mail im iframe) */
.nl-vorschau {
    width: 100%;
    height: 650px;
    border: 1px solid var(--grau-hell);
    background: #f6f6f6;
    margin-bottom: 1rem;
}

/* Kursnummer (steht im Verwendungszweck der Überweisungen) */
.kurs-nummer {
    color: var(--blau-dunkel);
    font-weight: 600;
    white-space: nowrap;
}

/* Vorschau des aktuellen Kursbilds im Admin-Formular */
.kursbild-vorschau {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--grau-hell);
}

.status-badge {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-bestaetigt { background: #e9efe4; color: var(--erfolg-gruen); }
.status-warteliste { background: var(--pfirsich-hell); color: var(--pfirsich-dunkel); }
.status-unbestaetigt { background: #f2f2f2; color: #777; }
.status-storniert { background: var(--pfirsich-hell); color: var(--fehler); }

/* Zeitliche Phase eines Kurses */
.status-bevorstehend { background: #e8edf4; color: var(--blau-dunkel); }
.status-heute { background: #fbeee9; color: var(--blau-dunkel); }
.status-laufend { background: #e9efe4; color: var(--erfolg-gruen); }
.status-abgeschlossen { background: #f2f2f2; color: #777; }
.status-gesperrt { background: var(--pfirsich-hell); color: var(--fehler); }

/* Blöcke ohne Einheiten bleiben in der Check-in-Liste sichtbar, aber
   deutlich abgesetzt: Einchecken geht nicht mehr, ein neuer Block muss her */
.status-aufgebraucht { background: var(--pfirsich-hell); color: var(--fehler); }
.zeile-aufgebraucht td { background: var(--pfirsich-hell); }
.hinweis-aufgebraucht { color: var(--fehler); }

.kurs-badge-geschlossen {
    background: #f2f2f2;
    color: #777;
}

/* QR-Druckansicht */

.qr-druck {
    text-align: center;
}

.qr-druck img,
.qr-druck svg {
    max-width: 100%;
}

/* Smartphones: kompakter Kopf, volle Knopfbreite, große Touch-Flächen */

@media (max-width: 600px) {
    body {
        font-size: 1rem;
    }

    .kopf {
        padding: 1.5rem 0.75rem 1.1rem;
    }

    .kopf-marke {
        font-size: 1.15rem;
        letter-spacing: 0.22em;
    }

    .kopf-logo {
        width: 140px;
    }

    .kopf-fixiert .kopf {
        padding: calc(1.5rem - 1.1rem * var(--schrumpf, 0)) 0.75rem
                 calc(1.1rem - 0.7rem * var(--schrumpf, 0));
    }

    .kopf-fixiert .kopf-logo {
        width: calc(140px - 80px * var(--schrumpf, 0));
    }

    .inhalt {
        padding: 1.25rem 0.75rem 2.5rem;
    }

    .karte {
        padding: 1.15rem 1rem;
    }

    .seitentitel {
        font-size: 1.5rem;
    }

    .seitentitel .akzent {
        font-size: 1.1rem;
    }

    /* Knöpfe untereinander und in voller Breite – gut treffbar mit dem Daumen */
    .knopf {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.95rem 1rem;
    }

    .knopf-neben {
        margin-left: 0;
        margin-top: 0.6rem;
    }

    .kurs-aktion .hinweis-voll,
    .kurs-aktion .hinweis-knapp {
        display: block;
        text-align: center;
        margin-bottom: 0.6rem;
    }

    /* Kursbild am Handy kompakt und mittig über der Beschreibung */
    .kurs-inhalt {
        flex-direction: column;
        gap: 0.9rem;
    }

    .kurs-bild {
        flex-basis: auto;
        width: min(230px, 75vw);
        max-width: 100%;
        margin: 0 auto;
    }

    /* Formularfelder stapeln sich; kein doppelter Abstand durch gap + margin */
    .feldzeile {
        gap: 0 1rem;
    }

    .feldzeile .feld-klein {
        flex: 1 1 240px;
    }

    .feld-checkbox input {
        width: 1.4rem;
        height: 1.4rem;
    }

    .knopf-mini {
        padding: 0.5rem 0.8rem;
        font-size: 0.95rem;
    }

    .admin-benutzer {
        display: block;
        margin: 0.4rem 0 0;
    }
}

/* Knopfzeile unter einem Formular (Hauptaktion + Abbrechen) */
.rueckfrage-knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
}

/* Schmale Zwei-Spalten-Tabelle (Bezeichnung links, Wert rechts) */
.tabelle-schmal {
    width: auto;
    margin: 0.5rem 0 1.2rem;
}

.tabelle-schmal th {
    border-bottom: 1px solid var(--grau-hell);
    white-space: nowrap;
    padding-right: 1.2rem;
}

/* Zahlenfeld mit nachgestellter Einheit („%") */
.feld-mit-einheit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feld-einheit {
    font-size: 1.05rem;
    color: var(--text);
}

/* Laufend mitgerechneter Erstattungsbetrag beim Stornieren */
.erstattung-vorschau {
    background: var(--pfirsich-hell);
    border-left: 3px solid var(--pfirsich);
    padding: 0.7rem 1rem;
    margin: 0.2rem 0 1.2rem;
}

.erstattung-vorschau strong {
    color: var(--tinte);
    font-size: 1.15rem;
}

/* Hervorgehobener Mini-Knopf für die Hauptaktion einer Zeile */
.knopf-mini-wichtig {
    background: var(--blau-dunkel);
    border-color: var(--blau-dunkel);
    color: #fff;
    font-weight: 600;
}

.knopf-mini-wichtig:hover {
    background: var(--tinte);
    border-color: var(--tinte);
    color: #fff;
}

/* Summenzeile unter der Rechnungsliste */
.tabelle tfoot th {
    border-top: 2px solid var(--blau);
    border-bottom: none;
    font-size: 1rem;
}

/* Mail-Vorschau (Admin → Einstellungen → E-Mail-Texte) */
.mail-vorschau-rahmen {
    width: 100%;
    height: 46rem;
    border: 1px solid var(--grau-hell);
    background: #f6f6f6;
}

@media print {
    .kopf, .fuss, .admin-nav, .kein-druck {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Schnupper-Formular (/schnuppern): Einverständnistext + Unterschrift */
.schnupper-text {
    font-size: 0.92rem;
    line-height: 1.55;
    background: var(--pfirsich-hell);
    border-radius: 8px;
    padding: 0.9rem 1rem;
}

.unterschrift-canvas {
    display: block;
    width: 100%;
    height: 180px;
    background: #fff;
    border: 1px solid var(--grau-hell);
    border-radius: 8px;
    /* Wichtig fürs Zeichnen am Touchscreen: Wischen im Feld scrollt
       nicht die Seite, sondern zeichnet */
    touch-action: none;
}

/* Knöpfe bewusst unter dem Feld statt als Overlay darüber — ein Knopf
   in der Schreibfläche stört beim Unterschreiben, besonders am Handy */
.unterschrift-knoepfe {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Vollbild-Unterschrift („Groß unterschreiben"): Overlay über der
   ganzen Seite; der Dreh-Hinweis verschwindet im Querformat von selbst */
.unterschrift-vollbild {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
}

.unterschrift-vollbild[hidden] {
    display: none;
}

.vollbild-hinweis {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    color: var(--blau-dunkel);
}

@media (orientation: landscape) {
    .vollbild-hinweis {
        display: none;
    }
}

.vollbild-canvas {
    flex: 1;
    min-height: 0;
    width: 100%;
    background: #fff;
    border: 1px dashed var(--blau);
    border-radius: 8px;
    touch-action: none;
}

.vollbild-knoepfe {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Solange das Vollbild offen ist, scrollt die Seite dahinter nicht */
.kein-scroll,
.kein-scroll body {
    overflow: hidden;
}

.unterschrift-ortdatum {
    margin-top: 0.4rem;
}

/* Unterschrift-Vorschau in der Admin-Liste */
.unterschrift-klein {
    display: block;
    max-height: 3rem;
    max-width: 12rem;
    border: 1px solid var(--grau-hell);
    border-radius: 4px;
    background: #fff;
}

/* Formulare fürs Brautpaar (formular.php) und deren Status im Admin */

.formular-unterfeld {
    margin: 0.6rem 0 0 1.8rem;
}

.formular-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.personen-zeile {
    border-top: 1px solid var(--grau-hell);
    padding-top: 0.8rem;
    margin-top: 0.8rem;
}

.formular-status + .formular-status {
    border-top: 1px solid var(--grau-hell);
    padding-top: 1rem;
    margin-top: 1.2rem;
}

.formular-verlauf {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0;
}

.formular-verlauf li {
    margin-bottom: 0.2rem;
}

.formular-link input {
    width: 100%;
    font-size: 0.85rem;
    color: var(--text);
}

.formular-antworten th {
    white-space: nowrap;
    vertical-align: top;
}

/* Zusatzfelder im Fragebogen nur zeigen, wenn die passende Auswahl
   markiert ist — rein per CSS (:has), damit das Formular ohne JavaScript
   funktioniert. Browser ohne :has zeigen die Felder einfach immer. */
@supports selector(:has(*)) {
    .bedingt {
        display: none;
    }

    .formular-abschnitt:has(#trauung-andere:checked) .bedingt-trauung-andere,
    .formular-abschnitt:has(#location-ja:checked) .bedingt-location-ja,
    .formular-abschnitt:has(#dienstleister-ja:checked) .bedingt-dienstleister-ja {
        display: block;
    }

    .formular-abschnitt:has(#location-nein:checked) .bedingt-location-nein {
        display: flex;
    }
}

/* Blöcke: Admin-Liste/Detail und die öffentliche digitale Karte (block.php) */
.formular-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 1rem;
}

.formular-zeile .feld {
    flex: 1 1 220px;
    margin-bottom: 0;
}

.feld-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.2rem;
}

.feld-reihe .feld {
    flex: 1 1 200px;
}

.block-rest {
    font-size: 1.25rem;
}

.block-rest strong {
    font-size: 1.8rem;
    color: var(--blau-dunkel);
}

.block-karte-admin {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.block-qr {
    flex: 0 0 170px;
    text-align: center;
}

.block-qr img {
    display: block;
    margin: 0 auto 0.3rem;
}

.block-link {
    display: inline-block;
    word-break: break-all;
    font-size: 0.85rem;
}

.block-karte {
    text-align: center;
}

.block-karte-name {
    margin: 0;
    color: var(--blau-dunkel);
}

.block-karte h1 {
    margin-top: 0.2rem;
}

.block-karte-rest {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.2rem 0;
}

.block-karte-zahl {
    font-size: 4rem;
    line-height: 1;
    font-weight: 600;
    color: var(--blau-dunkel);
}

.block-karte-qr {
    margin: 1.5rem auto;
}

.block-karte-qr img {
    display: block;
    margin: 0 auto 0.4rem;
    max-width: 100%;
    height: auto;
}

.block-karte-gueltig {
    text-align: left;
}

.block-karte-liste {
    padding-left: 1.2rem;
}

/* Online-Kauf von Blöcken (block-kauf.php, block-bestaetigen.php) */
.block-wahl {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.block-wahl input {
    margin-top: 0.35rem;
    flex: 0 0 auto;
}

.block-wahl label {
    display: block;
    flex: 1 1 auto;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--grau-hell);
    border-radius: 8px;
    cursor: pointer;
}

.block-wahl input:checked + label {
    border-color: var(--blau-dunkel);
    box-shadow: 0 0 0 1px var(--blau-dunkel);
}

.block-wahl-kopf {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.05rem;
}

.block-wahl-preis {
    white-space: nowrap;
    color: var(--blau-dunkel);
    font-weight: 600;
}

.block-wahl-meta,
.block-wahl-text {
    display: block;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.block-wahl-text {
    color: var(--text);
}

.block-zahlung {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: flex-start;
    text-align: left;
}

.block-zahlung-tabelle {
    flex: 1 1 260px;
}

.block-zahlung-tabelle th {
    text-align: left;
    white-space: nowrap;
    padding-right: 1rem;
}

.block-zahlung-qr {
    flex: 0 0 170px;
    text-align: center;
}

.block-zahlung-qr img {
    display: block;
    margin: 0 auto 0.3rem;
}

/* Blockarten auf der Kursseite: Karte wie ein Kurs, Badge im Blau der Marke */
.kurs-badge-block {
    background: var(--blau);
    color: #2f3d52;
}

/* „Auf diesem Gerät angemeldet bleiben" im Admin-Kopf */
.admin-geraet {
    display: inline;
    margin-right: 0.8rem;
}

.admin-geraet-knopf {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--blau-dunkel);
    text-decoration: underline;
    cursor: pointer;
}