@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
    --color-bg: #fef9fa;
    --color-text: #151515;
    --color-heading: #b48a61;
    --color-primary: #473e35;
    --color-primary-dark: #302923;
    --color-accent: #8e6c4b;
    --color-accent-light: #e5c2a2;
    --color-border: #dac5b0;
    --color-error: #b3261e;
    --color-success: #2e7d32;
    --font-family: 'Quicksand', -apple-system, Segoe UI, Roboto, sans-serif;
    /* Display-Schrift fuer Ueberschriften, Beschreibungen und Menue
       (Wunsch: Julius Sans One), mit Quicksand als Rueckfall. */
    --font-display: 'Julius Sans One', 'Quicksand', -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Julius Sans One (var(--font-display)) NUR fuer die vorgesehenen
   Ueberschriften h1..h6, in Frontend UND Backend. Navigation, Bereichsregister
   (Reiter), Kursart-Tabs, die News-Elemente sowie saemtliche Beschreibungs- und
   Fliesstexte bleiben in der urspruenglichen Standardschrift var(--font-family)
   - siehe den vervollstaendigten HOTFIX-FONT-Block weiter unten. Stand
   16.09.2026 (freigegebene Typografieabgrenzung). */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
}

/* Größere Basis-Schrift im Kunden-Frontend (nicht im Admin-Backend, dort
   sind die Tabellen auf die Standardgröße angewiesen). */
body:not(.admin-body) {
    font-size: 17px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    body:not(.admin-body) {
        font-size: 18px;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
    font-weight: 600;
}

/* Auswertungen-Übersicht: "Auswertungen" (h1) und "Offene Zahlungen je
   Termin" (h2) sollen optisch gleichrangig wirken, da die Kachelreihe der
   Auswertungen-Übersicht direkt vorangestellt ist - rein visuell, ändert
   nichts an der HTML-Ebene/Semantik der beiden Überschriften. */
.section-heading {
    font-size: 1.5rem;
}

a {
    color: var(--color-heading);
}

main {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

body.admin-body main {
    max-width: 1600px;
}

/* Admin-Backend: Menüzeile (+ Reiter-Leiste darunter, falls vorhanden)
   bleiben zusammen als eine Einheit beim Scrollen oben stehen - sticky auf
   dem gemeinsamen Wrapper statt auf .topnav allein, damit die Reiter-Leiste
   nicht selbst einen festen Pixel-Offset kennen muss (die Höhe von .topnav
   ist nicht fix, z. B. bricht sie unter 700px auf mehrere Zeilen um).
   z-index liegt über den Dropdown-Menüs (10) und den Inline-Dialogen der
   Inhaltsseiten. */
body.admin-body .admin-nav-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
}

.topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    background: var(--color-primary);
    color: #fff;
    flex-wrap: wrap;
    gap: 8px;
}

.topnav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 700px) {
    main {
        padding: 16px;
    }

    .topnav {
        padding: 10px 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .topnav a {
        margin-right: 0;
    }

    .page-header {
        flex-wrap: wrap;
        gap: 8px;
    }
}

.topnav-logo {
    height: 36px;
    width: auto;
    display: block;
}

.topnav a {
    color: #fff;
    text-decoration: none;
    margin-right: 16px;
}

.topnav a:hover {
    text-decoration: underline;
}

/* Reiter-Leiste je Bereich (Stammdaten/Belege/Admin) - zeigt alle
   Geschwister-Seiten der aktuellen Seite, ein Klick zum Wechseln statt das
   Klapp-Menü erneut zu öffnen. Siehe src/admin_nav_sections.php. */
.section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 24px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.section-tab {
    display: inline-block;
    padding: 8px 16px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 3px solid transparent;
}

.section-tab:hover {
    color: var(--color-heading);
}

.section-tab--active {
    color: var(--color-heading);
    border-bottom-color: var(--color-accent);
    font-weight: 600;
}

/* Admin-Navigation einklappbar (A4). Auf grossen Bildschirmen unveraendert:
   Marke links, Menue (Links + Benutzer) fuellt die Zeile. Auf kleinen
   Bildschirmen liegt das Menue hinter der Umschalt-Schaltflaeche. */
.topnav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.admin-body .topnav-menu {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
@media (max-width: 700px) {
    body.admin-body .topnav {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    body.admin-body .topnav-brand {
        width: 100%;
        justify-content: space-between;
    }
    body.admin-body .admin-nav-toggle {
        display: inline-flex;
        align-items: center;
        color: #fff;
    }
    body.admin-body .topnav-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    body.admin-body .topnav-menu.open {
        display: flex;
    }
    body.admin-body .topnav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        width: 100%;
    }
    body.admin-body .topnav a,
    body.admin-body .topnav-user a {
        display: block;
        padding: 10px 0;
        min-height: 44px;
    }
}

/* Gemeinsame responsive Primitiven (A4): auf kleinen Bildschirmen Dialoge
   nahezu bildschirmfuellend, groessere Touch-Ziele und weiches Tabellen-
   Scrollen. */
.table-scroll {
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 700px) {
    dialog {
        width: calc(100% - 20px);
        max-width: 100%;
        max-height: calc(100vh - 32px);
        box-sizing: border-box;
    }
    /* 44px-Touchziel fuer eigenstaendige Buttons - aber NICHT fuer die kleinen
       Zeilenaktionen (.button-small), sonst werden Listenzeilen unnoetig hoch
       (A4-Feedback "grosse Zeilen pro Kurs"). */
    .button:not(.button-small),
    button[type="submit"],
    .section-tab {
        min-height: 44px;
    }
    .row-options-menu .link-button,
    .row-options-menu a,
    .member-options-menu .link-button,
    .member-options-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Kunden-Frontend: weiße Navigationsleiste mit schwarzer Schrift, passend
   zur Optik von soulartschneeberg.de (Admin-Backend bleibt unverändert). */
body:not(.admin-body) .topnav {
    background: #fff;
    color: #151515;
    border-bottom: 1px solid var(--color-border);
}

body:not(.admin-body) .topnav a {
    color: #151515;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: inherit;
    padding: 4px;
    cursor: pointer;
    border-radius: 6px;
}

.nav-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Kunden-Frontend: Logo + fest stehende Menüpunkte (Kurse, je nach Rolle
   "Meine Buchungen" oder "Zahlungen") links, Menü-Schaltfläche + restliche
   Punkte rechts. Navigationsleiste bleibt beim Scrollen oben fixiert. */
body:not(.admin-body) .topnav {
    position: sticky;
    top: 0;
    z-index: 50;
}

body:not(.admin-body) .topnav-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

body:not(.admin-body) .topnav-right {
    display: flex;
    align-items: center;
    position: relative;
}

body:not(.admin-body) .topnav-left a,
body:not(.admin-body) .topnav-right a {
    margin-right: 0;
}

body:not(.admin-body) .topnav-menu {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

body:not(.admin-body) .topnav-links,
body:not(.admin-body) .topnav-user {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    /* Kunden-Frontend: Logo + fest stehende Menüpunkte bleiben links, die
       Menü-Schaltfläche (3 Balken) bleibt immer rechts stehen. Alle
       restlichen Menüpunkte wandern gemeinsam in ein Menü, das rechtsbündig
       am rechten Rand der Navigationsleiste aufklappt. */
    body:not(.admin-body) .topnav {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    body:not(.admin-body) .nav-toggle {
        display: inline-flex;
        align-items: center;
    }

    body:not(.admin-body) .topnav-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 20;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        padding: 12px 16px;
        min-width: 200px;
    }

    body:not(.admin-body) .topnav-menu.open {
        display: flex;
    }

    body:not(.admin-body) .topnav-links,
    body:not(.admin-body) .topnav-user {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        width: 100%;
    }

    body:not(.admin-body) .topnav-links a,
    body:not(.admin-body) .topnav-user a {
        margin-right: 0;
        text-align: right;
    }
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* Kursart-Tabs (A2/B3): randlose Kategorie-Auswahl statt Überschrift. */
.course-kind-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.course-kind-tabs {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.course-kind-tab {
    text-decoration: none;
    color: var(--color-accent);
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}
.course-kind-tab:hover {
    color: inherit;
}
.course-kind-tab.is-active {
    color: inherit;
    font-weight: 700;
    border-bottom-color: currentColor;
}

.specials-jump-link {
    display: inline-block;
    font-size: 0.85rem;
    white-space: nowrap;
    margin: -8px 0 16px;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

/* Wiederverwendbares Mobil-Karten-Muster fuer Tabellen (A4): auf schmalen
   Bildschirmen wird jede Zeile zur Karte, statt horizontal zu scrollen. Wird
   per Klasse .cards-on-mobile aktiviert; jede <td> traegt data-label mit dem
   Spaltennamen (leeres data-label = Aktionsspalte ohne Beschriftung). */
@media (max-width: 700px) {
    table.cards-on-mobile thead {
        display: none;
    }
    table.cards-on-mobile,
    table.cards-on-mobile tbody,
    table.cards-on-mobile tr,
    table.cards-on-mobile td {
        display: block;
        width: 100%;
    }
    table.cards-on-mobile tr {
        border: 1px solid var(--color-border);
        border-radius: 8px;
        background: #fff;
        margin-bottom: 10px;
        padding: 6px 12px;
    }
    table.cards-on-mobile td {
        border: none;
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
    }
    table.cards-on-mobile td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-accent);
        text-align: left;
    }
    table.cards-on-mobile td[data-label=""]::before {
        content: "";
    }
    /* Kebab-Menü (Zeilenaktionen) oben rechts in der Karte statt unten
       (A4-Feedback). Betrifft nur Karten mit Kontextmenü .row-options. */
    table.cards-on-mobile tr {
        position: relative;
    }
    table.cards-on-mobile tr:has(.row-options) {
        padding-right: 44px;
    }
    table.cards-on-mobile td:has(.row-options) {
        position: absolute;
        top: 6px;
        right: 8px;
        width: auto;
        padding: 0;
        display: block;
    }
    table.cards-on-mobile td:has(.row-options)::before {
        content: none;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

th, td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.sortable-column {
    cursor: pointer;
    user-select: none;
}

.sortable-column:hover {
    background: rgba(0, 0, 0, 0.04);
}

.sort-indicator {
    display: inline-block;
    width: 1em;
    font-size: 0.75em;
    opacity: 0.7;
}

.button, button, input[type="submit"] {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
}

.button:hover, button:hover {
    background: var(--color-primary-dark);
}

/* Admin-Backend: Schaltflaechen sind standardmaessig hellgrau (sekundaere
   Aktion - Speichern/Bearbeiten/Filtern/Abbrechen/Zeilen-Aktionen/Exporte).
   Nur der jeweils primaere Einstiegspunkt einer Uebersichtsseite ("+ Neu...")
   sowie der Login-Button behalten die Akzentfarbe (Klasse .button-primary).
   Muss VOR den spezifischeren Kontextmenue-Regeln (.member-options-menu
   button/.row-options-menu button weiter unten) stehen: bei gleicher
   Spezifitaet gewinnt die spaeter im Stylesheet stehende Regel, so bleibt
   deren eigenstaendiges (transparentes) Kontextmenue-Styling unangetastet.
   .link-button/.member-card-summary werden zusaetzlich per :not()
   ausgeschlossen, da sie nur eine Klasse (niedrigere Spezifitaet) tragen
   und ein eigenes background-Styling brauchen (member-card-summary:
   transparenter Kartenkopf, nicht grau hinterlegt). Dieselbe Grauton wie
   .button-muted (siehe oben) - eine einheitliche "sekundaer"-Farbe im
   ganzen Backend. */
.admin-body .button:not(.button-primary),
.admin-body button:not(.link-button):not(.button-primary):not(.member-card-summary):not(.tile-session):not(.member-menu-item),
.admin-body input[type="submit"] {
    background: #e0e0e0;
    color: var(--color-text);
}

.admin-body .button:not(.button-primary):hover,
.admin-body button:not(.link-button):not(.button-primary):not(.member-card-summary):not(.tile-session):not(.member-menu-item):hover,
.admin-body input[type="submit"]:hover {
    background: #cccccc;
}

.admin-body .button-primary,
.admin-body button.button-primary {
    background: var(--color-primary);
    color: #fff;
}

.admin-body .button-primary:hover,
.admin-body button.button-primary:hover {
    background: var(--color-primary-dark);
}

.page-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    /* Immer rechtsbuendig - auch wenn die Kopfzeile auf schmalen Bildschirmen
       umbricht (A4-Feedback: Schnellaktionen + "Anordnung anpassen" rechts). */
    margin-left: auto;
    justify-content: flex-end;
}

.row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.button-small {
    padding: 4px 14px;
    font-size: 0.85rem;
}

.button-muted {
    background: #e0e0e0;
    color: var(--color-text);
}

.button-muted:hover {
    background: #cccccc;
}

.link-button {
    background: none;
    color: var(--color-accent);
    padding: 0;
    text-decoration: underline;
    font-size: inherit;
    font-weight: normal;
    border-radius: 0;
}

.link-button:hover {
    background: none;
    color: var(--color-primary-dark);
}

.link-button:disabled {
    color: var(--color-border);
    text-decoration: none;
    cursor: not-allowed;
}

.icon-link {
    display: inline-flex;
    color: var(--color-accent);
    vertical-align: middle;
}

.icon-link:hover {
    color: var(--color-primary-dark);
}

.inline-form {
    display: inline;
}

.inline-input {
    display: inline-block !important;
    width: auto !important;
    max-width: 160px !important;
    margin: 0 4px 0 0 !important;
    vertical-align: middle;
}

.inline-input--price {
    max-width: 70px !important;
}

form label {
    display: block;
    margin-bottom: 12px;
}

form label.checkbox, form label.radio {
    display: inline-block;
    font-weight: normal;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"],
input[type="search"],
textarea, select {
    display: block;
    width: 100%;
    max-width: 420px;
    padding: 6px 8px;
    margin-top: 4px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
}

.card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

fieldset {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

#document-form textarea {
    max-width: none;
}

.installments-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.installments-fields {
    flex: 0 0 160px;
}

.installments-table-wrap {
    flex: 1;
    min-width: 0;
}

@media (max-width: 700px) {
    .installments-layout {
        flex-direction: column;
    }
}

.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#add-item-btn {
    margin-top: 1em;
}

.item-description {
    resize: none;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.tile {
    display: block;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 24px;
    text-decoration: none;
    color: var(--color-text);
}

.tile:hover {
    border-color: var(--color-accent);
}

.tile-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-heading);
}

.tile-label {
    display: block;
    margin-top: 4px;
}

.tile-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.tile-session {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    color: var(--color-text);
}

.tile-session:hover {
    border-color: var(--color-accent);
    background: #fff;
}

.tile-session-date,
.tile-session-title,
.tile-session-meta,
.tile-session-status {
    display: block;
}

.tile-session-title {
    font-weight: 600;
    margin-top: 2px;
}

.tile-session-meta {
    margin-top: 4px;
    font-size: 0.85rem;
}

.tile-session-status {
    margin-top: 4px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.tile-session--heute {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.tile-session--heute:hover {
    background: var(--color-success);
}

.tile-session--ueberfaellig {
    background: var(--color-error);
    border-color: var(--color-error);
    color: #fff;
}

.tile-session--ueberfaellig:hover {
    background: var(--color-error);
}

.session-detail {
    margin-bottom: 24px;
}

.sparkline {
    display: block;
    width: 100%;
    height: 32px;
    margin-top: 12px;
}

.chart-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Dieselbe Grid-Item-Mindestbreite wie bei .dash-widget (siehe dortiger
   Kommentar), hier bewusst NICHT auf den Mobil-Media-Query beschraenkt: die
   320px-Mindestspurbreite oben bleibt unangetastet (sie entscheidet, wie
   viele Karten pro Zeile passen), min-width:0 wirkt nur dann ueberhaupt,
   wenn eine Karte breiter werden will als ihre zugeteilte Spur - und genau
   dann soll .chart-scroll darin scrollen statt die Spur zu sprengen. Ohne
   diese Situation aendert die Regel nichts, auch nicht bei 1280px. */
.chart-section-grid > .card {
    min-width: 0;
}

.chart-scroll {
    overflow-x: auto;
}

.bar-chart {
    width: 100%;
    height: auto;
    min-width: 480px;
}

.bar-chart-label {
    font-size: 9px;
    fill: var(--color-primary);
    font-family: var(--font-family);
}

.pie-chart-layout {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.pie-chart {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.pie-chart-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 200px;
}

.pie-chart-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.member-search-label {
    display: block;
    margin-bottom: 16px;
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.member-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
}

/* Inaktiv gesetzte Mitglieder: leicht grau unterlegt, damit sie in der Liste
   sofort auffallen. */
.member-card--inactive {
    background: #ececec;
    border-color: #d9d9d9;
}

.member-card-summary {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-heading);
}

.member-card-summary:hover,
.member-card-summary:focus {
    background: none;
    color: var(--color-accent);
}

.member-card .member-birthday {
    font-weight: normal;
    color: var(--color-text);
    display: block;
    font-size: 0.9rem;
}

.member-card .member-details {
    margin-top: 12px;
}

.member-options {
    position: relative;
    margin: 16px 0;
}

.member-options-menu {
    position: absolute;
    top: 100%;
    left: 0;
    /* Ueber der Sticky-Nav (z-index 100), damit ein geoeffnetes Kontextmenue
       nicht von der beim Scrollen fixierten Menuezeile ueberdeckt wird. */
    z-index: 150;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 140px;
}

.member-options-menu button,
.member-options-menu a {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--color-text);
    padding: 8px 16px;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    box-sizing: border-box;
}

.member-options-menu button:hover,
.member-options-menu a:hover {
    background: rgba(0, 0, 0, 0.06);
}

dialog.member-dialog {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    width: min(600px, 90vw);
    max-height: 85vh;
    overflow-y: auto;
}

dialog.member-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog.member-dialog .page-header {
    margin-top: 0;
}

.widget-order-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget-order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: grab;
}

.widget-order-item.dragging {
    opacity: 0.5;
}

.widget-order-item .drag-handle {
    color: var(--color-border);
    font-size: 1.3rem;
    line-height: 1;
    user-select: none;
}

.widget-order-label {
    flex: 1;
    font-weight: 600;
}

.widget-order-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-order-controls select {
    width: auto;
    max-width: none;
    margin: 0;
}

.course-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.course-card {
    display: flex;
    align-items: stretch;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: default;
}
.course-card-body {
    flex: 1;
    min-width: 0;
}

.course-card--selectable {
    cursor: pointer;
}

.course-card--selectable:hover {
    border-color: var(--color-accent);
}

.course-card:has(.course-select:checked) {
    border-color: var(--color-primary);
    border-width: 2px;
}

.course-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.course-date-badge {
    flex-shrink: 0;
    width: 72px;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 8px;
    text-align: center;
}
.course-date-day {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}
.course-date-weekday {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.9;
    line-height: 1.1;
}

.course-card-heading {
    flex: 1;
}

.course-card-heading h2 {
    margin: 0;
    font-size: 1.15rem;
}

.course-subtitle {
    margin: 2px 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
}

.course-weekday-time {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text);
}

.course-select {
    flex-shrink: 0;
    margin-top: 4px;
}

.favorite-heart {
    flex-shrink: 0;
    margin-top: 2px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-border);
    line-height: 0;
}

.favorite-heart svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.favorite-heart:hover {
    color: var(--color-error);
}

.favorite-heart.is-favorited {
    color: var(--color-error);
}

.favorite-heart.is-favorited svg {
    fill: currentColor;
}

/* Kein schwarzes Tap-Overlay auf Touch (Android/Chrome) - zentral fuer
   interaktive Elemente. Behebt den wiederkehrenden schwarz unterlegten
   Herz-Button beim Antippen (A2). */
a, button, label, input, select, summary, [tabindex] {
    -webkit-tap-highlight-color: transparent;
}
.favorite-heart:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* "Zum Startbildschirm hinzufuegen" als dezentes Icon oben rechts
   (A2, Variante A: Handy mit Pfeil). */
.install-icon-btn {
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    color: var(--color-accent);
    cursor: pointer;
    line-height: 0;
    border-radius: 6px;
}
.install-icon-btn:hover {
    opacity: 0.7;
}
.install-icon-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Logo als Link (A2): gleiche Ausrichtung wie das nackte Logo. */
.topnav-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* Schnellaktionen (A3, Variante A): kleine, zurueckhaltende Icon-Buttons
   (Umriss statt gefuellt), links neben "Anordnung anpassen". */
.quick-action-btn {
    background: none;
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    padding: 6px 8px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
}
.quick-action-btn:hover {
    background: #fff;
    color: var(--color-primary);
    border-color: var(--color-accent);
}
.quick-action-btn svg {
    display: block;
}

.course-description {
    margin: 12px 0;
    font-size: 0.9rem;
}

.course-cancellation-policy {
    margin: 12px 0;
    font-size: 0.85rem;
}

.course-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    text-decoration: none;
}

.course-location:hover {
    text-decoration: underline;
}

.course-card-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
}
/* Aktion (Teilnehmen/Stornieren) immer unten rechts - auch wenn der Footer
   auf schmalen (mobilen) Kacheln umbricht (A2/B4). */
.course-card-footer .button {
    margin-left: auto;
}

.course-card--special {
    border-color: var(--color-accent);
    border-width: 2px;
}

.course-card--disabled {
    opacity: 0.5;
}

.course-card--booked {
    border-color: var(--color-success);
    border-width: 3px;
}
/* Grün ist ausschliesslich dem Zustand "gebucht" vorbehalten (A2). */
.course-card--booked .course-status {
    color: var(--color-success);
    font-weight: 700;
}

.course-card--cancelled {
    border-color: var(--color-error);
    border-width: 2px;
    opacity: 0.75;
}

.teilnehmen-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
}

/* Preis als braune Pille (A2). Braun = --color-primary. */
.course-price-pill {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 0.85rem;
    /* Kein nowrap: lange Ticket-Varianten duerfen umbrechen, sonst sprengt die
       Pille auf schmalen (mobilen) Kacheln die Breite (horizontaler Ueberlauf). */
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Beschreibung/Details als dezenter kleiner Button (oeffnet Dialog, A2/B4). */
.course-desc-btn {
    margin: 10px 0;
    background: none;
    color: var(--color-accent);
    border: 1px solid var(--color-border);
}
.course-desc-btn:hover {
    background: var(--color-bg);
    color: var(--color-accent);
}

/* Ruhiger Umriss-Button, u. a. fuer "Stornieren" (A2). Rot bleibt Warnungen
   vorbehalten - daher bewusst neutral/braun statt rot. */
.button-outline {
    background: none;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    padding: 6px 14px;
    font-size: 0.85rem;
}
.button-outline:hover {
    background: var(--color-bg);
    color: var(--color-accent);
}

.course-desc-dialog,
.course-storno-dialog {
    max-width: 520px;
    width: calc(100% - 32px);
}
.course-desc-dialog-meta {
    color: var(--color-accent);
    font-size: 0.85rem;
    margin-top: 0;
}

dialog.teilnehmen-dialog {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    max-width: 400px;
    width: 90%;
}

dialog.teilnehmen-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog.item-description-dialog {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    width: min(480px, 90vw);
}

dialog.item-description-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog.item-description-dialog textarea {
    width: 100%;
    max-width: none;
}

.info-icon {
    display: inline-block;
    margin-left: 4px;
    color: var(--color-accent);
    cursor: help;
    font-weight: 600;
}

.error {
    color: var(--color-error);
}

.success {
    color: var(--color-success);
}

.hint {
    color: var(--color-text);
    opacity: 0.7;
    font-size: 0.9em;
}

.text-error {
    color: var(--color-error);
    font-weight: 600;
}

.row-expired {
    background: rgba(179, 38, 30, 0.12);
}

.row-inactive {
    opacity: 0.6;
}

.row-options {
    position: relative;
    display: inline-block;
}

.row-options-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text);
    list-style: none;
}

.row-options-btn::-webkit-details-marker {
    display: none;
}

.row-options-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
}

.row-options-menu {
    position: absolute;
    top: 100%;
    right: 0;
    /* Ueber der Sticky-Nav (z-index 100), damit ein geoeffnetes Kontextmenue
       nicht von der beim Scrollen fixierten Menuezeile ueberdeckt wird. */
    z-index: 150;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 160px;
}

.row-options-menu a,
.row-options-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--color-text);
    padding: 8px 16px;
    text-decoration: none;
    font-weight: normal;
}

.row-options-menu a:hover,
.row-options-menu button:hover {
    background: rgba(0, 0, 0, 0.06);
}

.text-success {
    color: var(--color-success);
    font-weight: 600;
}

details summary {
    cursor: pointer;
    color: var(--color-heading);
    font-weight: 600;
}

details p {
    margin: 8px 0 0;
}

.news-box {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.news-item {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.news-item:first-of-type {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

.news-item h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.news-item p {
    margin: 0;
    font-size: 0.9rem;
}

.news-badge {
    display: inline-block;
    background: var(--color-error);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}

.news-badge[hidden] {
    display: none;
}

.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
    /* Inhalts-/containergetrieben: reicht der Platz nicht fuer eine Zeile
       (schmale Karte in der zweispaltigen Dashboard-Stufe), bricht die Zeile
       um - unabhaengig von einer festen Viewport-Grenze. Bei ausreichend
       breiten Karten bleibt die bisherige einzeilige Darstellung erhalten. */
    flex-wrap: wrap;
}

.calendar-nav h1, .calendar-nav h2 {
    margin: 0;
    /* KEIN white-space: nowrap: eine nicht umbrechende Ueberschrift zwingt der
       Karte ihre Min-Content-Breite auf und verbreitert sie ueber die
       verfuegbare Spur hinaus (Ueberlauf). white-space: normal laesst die
       Ueberschrift bei Bedarf umbrechen, min-width: 0 hebt die automatische
       Flex-Mindestbreite auf, sodass sie tatsaechlich schrumpfen kann. */
    white-space: normal;
    min-width: 0;
}

@media (max-width: 700px) {
    /* "Woche vom ..." (Kunden-Frontend) bzw. "September 2026" neben "←
       Vorheriger Monat"/"Nächster Monat →" (Admin: dashboard.php, reports.php)
       sind zu breit für eine Zeile neben den beiden Navigations-Links -
       daher kleinere Schrift, eigene volle Zeile oben, Links darunter
       links/rechts. Kein horizontales Scrollen mehr nötig. Bislang galt das
       nur fürs Kunden-Frontend (:not(.admin-body)) - der Admin-Kalender
       (dash-widget--full, Jahresnavigation auf reports.php) hatte dieselbe
       Ursache (white-space:nowrap oben) und denselben Überlauf, nur bisher
       unbemerkt. */
    .calendar-nav {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .calendar-nav h2 {
        font-size: 0.95rem;
        white-space: normal;
        order: -1;
        width: 100%;
        text-align: center;
    }
}

.calendar-table {
    table-layout: fixed;
}

.calendar-table th, .calendar-table td {
    white-space: normal;
    vertical-align: top;
    width: 14.28%;
    height: 90px;
}

.calendar-table td.is-empty {
    background: #f5f0ea;
}

.calendar-table td.is-today {
    background: #e8e8e8;
}

.calendar-day-number {
    font-weight: 600;
    margin-bottom: 4px;
}

.cal-event {
    display: block;
    color: #fff;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
    white-space: normal;
    text-decoration: none;
    cursor: pointer;
}

.cal-event:hover {
    text-decoration: underline;
}

.cal-event--ok {
    background: var(--color-success);
}

.cal-event--warn {
    background: var(--color-error);
}

.cal-event--cancelled {
    background: #6b6b6b;
    text-decoration: line-through;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dash-widget--full {
    grid-column: 1 / -1;
}

.dash-widget--half {
    grid-column: span 1;
}

.dash-widget .card {
    margin-bottom: 0;
    height: 100%;
}

@media (max-width: 700px) {
    /* Eine Grid-Spur ohne explizites Minimum uebernimmt als Basisgroesse das
       groesste Min-Content-Mass ihrer Karten - bei einer Tabelle (z. B. dem
       Kalender) reisst das die Spur weit ueber die verfuegbare Breite
       hinaus, obwohl .table-scroll selbst overflow-x:auto traegt.
       minmax(0, 1fr) kappt dieses Minimum auf 0 und macht die Spur wieder
       tatsaechlich schrumpfbar; min-width:0 auf der Karte selbst ist noetig,
       weil Grid-Items unabhaengig davon ihre eigene automatische
       Mindestbreite aus dem Inhalt ziehen.

       Nachgemessener Inhaltsbedarf der Karten (konstant, unabhaengig vom
       Viewport): rund 1105,5px in Summe. Bei main-Padding 24px je Seite
       (Basiswert oberhalb 700px) passt das ungeschuetzte 2-Spalten-Layout
       (.dashboard-grid { grid-template-columns: 1fr 1fr; } weiter unten,
       bewusst unveraendert) deshalb erst ab einer Fensterbreite von rund
       1154px von selbst ueberlaufsfrei - und die vollbreite Kalender-Karte
       treibt es noch hoeher. Zwischen 701px und 1279px greift deshalb eine
       eigene, ebenso geschuetzte Zweispalten-Stufe (naechster Block); erst ab
       1280px (verifiziert) genuegt die vorhandene Basisregel ueberlaufsfrei. */
    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash-widget {
        min-width: 0;
    }

    .dash-widget--half {
        grid-column: 1;
    }
}

@media (min-width: 701px) and (max-width: 1279px) {
    /* Echtes zweispaltiges Layout fuer Tablet-/Laptop-Breiten - derselbe
       Schutz wie im Mobil-Media-Query oben (minmax(0, 1fr) + min-width:0), nur
       mit zwei Spuren statt einer. Die Obergrenze ist bewusst 1279px (nicht
       1199px): bei 1200/1240/1279px zieht das zweispaltige Basislayout (1fr
       1fr) sonst die Min-Content-Breite des vollbreiten Kalender-Widgets in
       die Spuren und laeuft ueber (nachgemessen +31px bei 1200px). Erst ab
       1280px genuegt die unveraenderte Basisregel ueberlaufsfrei (verifiziert).
       minmax(0, 1fr) kappt die Spurminima auf 0; die Karteninhalte scrollen
       bei Bedarf innerhalb ihrer .table-scroll-Container, statt die Seite zu
       verbreitern. */
    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .dash-widget {
        min-width: 0;
    }
}

.auth-box {
    max-width: 360px;
    margin: 80px auto;
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.auth-logo {
    display: block;
    height: 64px;
    width: auto;
    margin: 0 auto 16px;
}

/* Serientermine: Mehrfachauswahl + Sammellöschung (A1) */
.col-select {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}
.col-select input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}
.bulk-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.bulk-count {
    color: var(--color-accent);
    font-weight: 600;
}

/* Einheitliche Admin-Listen: Toolbar, Sortierung, Pagination (A1 Teil 2) */
.list-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
}
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.list-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--color-accent);
}
.list-toolbar input[type="search"],
.list-toolbar select,
.list-toolbar button,
.list-reset-form button {
    /* Gleiche Hoehe wie die Suchmaske, damit "Anwenden"/"Ansicht
       zuruecksetzen" buendig mit dem Suchfeld sitzen (align-items:flex-end
       richtet die Unterkanten aus). */
    min-height: 40px;
}
.list-toolbar input[type="search"],
.list-toolbar select {
    /* Doppelten Abstand vermeiden: das Label setzt bereits gap:4px, die
       globale Input-Regel zusaetzlich margin-top:4px. */
    margin-top: 0;
}
.list-reset-form {
    margin-left: auto;
}
.list-sort {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.list-sort:hover {
    text-decoration: underline;
}
.list-sort.is-active {
    font-weight: 700;
}
.list-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.list-pagination-info {
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.button.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* HOTFIX FONT 9dcfb31 (16.09.2026 vervollstaendigt)
   Produktiv bestaetigte Ruecknahme der Julius-Sans-One-Umstellung. Die neue
   Gestaltung (var(--font-display)) tragen ausschliesslich die vorgesehenen
   Ueberschriften h1..h6. Navigation (.topnav a), Bereichsregister (.section-tab)
   und die Kursart-Tabs (.course-kind-tab) bleiben in Frontend UND Backend bei
   der Standardschrift var(--font-family); ebenso die News-Elemente im Frontend.
   (Die News-Zwischenueberschrift .news-item h3 ist ein h3 und wird hier gezielt
   ueberschrieben - hoehere Spezifitaet gewinnt.) Der Kommentartext selbst ist
   nicht pruefungsrelevant; die Tests pruefen Selektoren und CSS-Wirkung. */
.topnav a,
.section-tab,
.course-kind-tab,
body:not(.admin-body) .news-box summary,
body:not(.admin-body) .news-item h3,
body:not(.admin-body) .news-item p {
    font-family: var(--font-family);
}