/* ===========================================================================
   FellDesk – zentrales Stylesheet
   ===========================================================================
   Die EINZIGE Datei, in der Farbwerte, Schatten und Radien stehen. In den
   PHP-Dateien tauchen nur noch Namen auf (bg-forest, text-danger, .btn), nie
   ein Hex-Wert. Wer die Marke umfärben will, ändert ausschließlich den
   :root-Block hier oben.

   Aufbau:
     1. Design-Token
     2. Grundlagen
     3. Bausteine (Buttons, Karten, Meldungen, Formularfelder)
     4. Seitenspezifisches (Hero, Header, Bewegung)
   =========================================================================== */


/* ---------------------------------------------------------------------------
   0. Schriften – selbst ausgeliefert
   ---------------------------------------------------------------------------
   Die Dateien liegen in assets/fonts/ und werden vom eigenen Server geladen.
   Kein Request an fonts.googleapis.com, keine IP-Adresse der Besucher an
   Dritte – deshalb braucht die Datenschutzerklärung dazu keinen Abschnitt.

   Zwei Subsets je Schnitt: "latin" deckt Deutsch inklusive Umlauten ab,
   "latin-ext" kommt nur nach, wenn ein Zeichen daraus wirklich vorkommt.
   Die unicode-range-Angaben stammen unverändert von Google.

   font-display: swap – der Text ist sofort lesbar und wird nachträglich in
   die richtige Schrift umgestellt, statt unsichtbar zu bleiben.
   --------------------------------------------------------------------------- */

/* --- Raleway (Überschriften) ----------------------------------------------
   Raleway und Karla liegen als Variable Fonts vor: eine Datei je Subset, die
   den gesamten Gewichtsbereich enthält. Deshalb steht in font-weight ein
   Bereich und kein Einzelwert.

   Vorher standen hier sechs bzw. acht @font-face-Regeln mit je einem festen
   Gewicht – die aber alle auf dieselbe Datei zeigten, weil Google Fonts für
   eine Variable-Font-Familie pro Subset nur eine Datei ausliefert. Das hatte
   zwei Folgen: Der Browser lud dieselbe Schrift zwei- bis dreimal unter
   verschiedenen Namen, und er hielt die Datei für den fertigen 800er-Schnitt.
   Statt die Gewichtsachse zu verstellen, nahm er die Standardinstanz
   (Raleway Thin) und rechnete daraus künstlich ein Fettes – sichtbar an
   ungleichmäßigen Strichstärken. Mit dem Bereich unten wird die Achse
   tatsächlich verstellt.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/raleway-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/raleway-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Karla (Fließtext) ----------------------------------------------------- */
@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/karla-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/karla-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------------------------------------------------------------------------
   1. Design-Token
   ---------------------------------------------------------------------------
   Die Farben stehen als RGB-Tripel ohne Klammern da. Das sieht ungewohnt aus,
   hat aber einen Grund: nur so kann Tailwind seine Transparenz-Schreibweise
   anwenden (bg-forest/70, text-sand/90). Ein fertiges "#2D5A27" würde das
   verhindern.
   --------------------------------------------------------------------------- */
:root {
    /* Markenfarben – aus der bestehenden Bildwelt übernommen */
    --c-forest:        45 90 39;      /* #2D5A27 Hauptfarbe */
    --c-forest-light:  63 119 54;     /* #3F7736 */
    --c-forest-dark:   30 61 26;      /* #1E3D1A Hover-Zustand */
    --c-forest-deep:   20 42 17;      /* #142A11 Portal-Navigation, Preisband */

    --c-sand:         245 230 204;    /* #F5E6CC warmer Akzent */
    --c-sand-light:   250 243 230;    /* #FAF3E6 Seitenhintergrund */
    --c-sand-dark:    228 207 166;    /* #E4CFA6 */

    /* Schrift */
    --c-ink:           44 44 44;      /* #2C2C2C Fließtext */
    --c-ink-soft:      85 80 74;      /* #55504A zweite Ebene */
    --c-ink-faint:    107 100 89;     /* #6B6459 Beschriftungen, 4.6:1 auf Weiß */

    --c-line:         227 220 205;    /* #E3DCCD Trennlinien */

    /* Flächen des Portals. Neutraler als das cremige Sand der Marketing-
       seiten – dort trägt Wärme, hier trägt Ruhe. Nur minimal warm, damit
       es neben dem Forest-Grün nicht kalt kippt. */
    --c-app-bg:      246 246 243;     /* #F6F6F3 Arbeitsfläche */
    --c-app-panel:   255 255 255;     /* Panels */
    --c-app-line:    225 224 217;     /* #E1E0D9 Hairlines */

    /* Signalfarben */
    --c-danger:       140 29 19;      /* #8C1D13 Fehlertext, 8.9:1 auf danger-soft */
    --c-danger-dark:  110 22 16;      /* #6E1610 */
    --c-danger-soft:  253 236 234;    /* #FDECEA Fehlerhintergrund */

    --c-warning:      232 163 61;     /* #E8A33D Limit erreicht */
    --c-warning-ink:  180 102 28;     /* #B4661C Warntext auf Weiß, 4.6:1 */
    --c-warning-soft: 253 243 227;    /* #FDF3E3 */

    /* Schatten – mit echtem Versatz und weichem Radius, kein farbloser Halo */
    --shadow-card: 0 8px 26px -6px rgba(20, 42, 17, 0.14);
    --shadow-lift: 0 18px 42px -12px rgba(20, 42, 17, 0.30);

    /* Formen */
    --radius-card:  1rem;
    --radius-field: 0.625rem;
    --radius-pill:  9999px;

    /* Bewegung */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --speed:    0.25s;
}


/* ---------------------------------------------------------------------------
   2. Grundlagen
   --------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    /* Der fixierte Header darf Ankerziele nicht verdecken. */
    scroll-padding-top: 6rem;
    /* Sicherheitsnetz gegen genau die Art Bug, die preise.php hatte: ein
       breites Element (dort die Vergleichstabelle, min-width 36rem) hat den
       mobilen Viewport der ganzen Seite in die Breite gezogen, obwohl es in
       einem eigenen overflow-x-auto-Wrapper steckte. Der eigentliche Fix
       sitzt an der Quelle (contain: layout auf dem Wrapper in preise.php),
       das hier fängt nur ab, falls es woanders nochmal passiert. */
    overflow-x: hidden;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Tastaturbedienung muss sichtbar sein – auf hellem wie auf dunklem Grund. */
:focus-visible {
    outline: 3px solid rgb(var(--c-forest));
    outline-offset: 3px;
    border-radius: 4px;
}

.on-dark :focus-visible {
    outline-color: rgb(var(--c-sand));
}


/* ---------------------------------------------------------------------------
   3. Bausteine
   ---------------------------------------------------------------------------
   Wiederkehrende Elemente stehen hier einmal, statt in jeder PHP-Datei als
   Kette von zwölf Utility-Klassen.
   --------------------------------------------------------------------------- */

/* --- Buttons -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.375rem;
    border: 0;
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--speed) ease,
                border-color var(--speed) ease,
                color var(--speed) ease,
                transform var(--speed) ease,
                box-shadow var(--speed) ease;
}

.btn-sm  { padding: 0.5rem 1rem; font-size: 0.8125rem; border-radius: 0.375rem; }
.btn-lg  { padding: 0.875rem 1.75rem; font-size: 0.9375rem; border-radius: 0.5rem; }
.btn-block { width: 100%; }

.btn-primary {
    background-color: rgb(var(--c-forest));
    color: #fff;
}
.btn-primary:hover {
    background-color: rgb(var(--c-forest-dark));
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}

/* Auf dunklem Grund führt der helle Button. */
.btn-sand {
    background-color: rgb(var(--c-sand));
    color: rgb(var(--c-forest-deep));
    box-shadow: var(--shadow-lift);
}
.btn-sand:hover {
    background-color: #fff;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid rgb(255 255 255 / 0.5);
    color: #fff;
}
.btn-outline:hover {
    background-color: rgb(255 255 255 / 0.15);
    border-color: #fff;
}

.btn-quiet {
    background-color: transparent;
    border: 2px solid rgb(var(--c-line));
    color: rgb(var(--c-ink));
    text-transform: none;
    letter-spacing: normal;
}
.btn-quiet:hover {
    border-color: rgb(var(--c-forest));
    color: rgb(var(--c-forest));
}

/* Salon/Sitter-Umschalter auf der Landingpage (#funktionen) */
.branche-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--c-ink-soft));
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.branche-tab:hover { color: rgb(var(--c-forest)); }
.branche-tab.is-active {
    background: rgb(var(--c-forest));
    color: #fff;
}

.btn-danger {
    background-color: rgb(var(--c-danger));
    color: #fff;
}
.btn-danger:hover {
    background-color: rgb(var(--c-danger-dark));
}

/* --- Icon-Schaltflächen --------------------------------------------------- */
.icon-btn {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: rgb(var(--c-ink-faint));
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.icon-btn:hover {
    background-color: rgb(var(--c-sand-light));
    color: rgb(var(--c-forest));
}

.icon-btn-sm { width: 2.25rem; height: 2.25rem; }

.icon-btn-danger:hover {
    background-color: rgb(var(--c-danger-soft));
    color: rgb(var(--c-danger));
}

/* --- Karten --------------------------------------------------------------- */
.card {
    background-color: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* Für Karten, deren Inhalt bis an den Rand läuft (Tabellen, Listen). */
.card-flush { overflow: hidden; }

/* --- Meldungen ------------------------------------------------------------ */
.alert {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    line-height: 1.6;
}

.alert-danger  { background-color: rgb(var(--c-danger-soft));  color: rgb(var(--c-danger)); }
.alert-warning { background-color: rgb(var(--c-warning-soft)); color: rgb(var(--c-ink)); }
.alert-info    { background-color: rgb(var(--c-sand));         color: rgb(var(--c-forest-dark)); }
.alert-success { background-color: rgb(var(--c-forest));       color: #fff; }

/* Fehlermeldung unter einem Formularfeld */
.form-error {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: rgb(var(--c-danger));
}

/* --- Formularfelder ------------------------------------------------------- */
.field {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-field);
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: rgb(var(--c-ink));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field::placeholder {
    color: rgb(var(--c-ink-faint));
}

.field:focus {
    outline: none;
    border-color: rgb(var(--c-forest));
    box-shadow: 0 0 0 3px rgb(var(--c-forest) / 0.15);
}

.field:disabled {
    background-color: rgb(var(--c-sand-light));
    color: rgb(var(--c-ink-faint));
    cursor: not-allowed;
}

.field-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   3b. Das Portal – eigene Oberfläche
   ---------------------------------------------------------------------------
   Landingpage und Portal haben verschiedene Aufgaben. Die Landingpage soll
   überzeugen; das Portal wird an der Theke bedient, zwischen zwei Terminen,
   oft mit einer Hand. Es darf nicht wie eine Website aussehen, sondern muss
   wie Werkzeug wirken.

   Alles hier hängt an <body class="app">. Die Marketing-Seiten bleiben
   unberührt.

   Die Entscheidungen im Einzelnen:
     * EINE Schriftfamilie (Karla). Displayschrift in Bedienelementen ist
       das sicherste Zeichen für "Website, die Software spielt".
     * Flächen statt Schwebekörper: 1px-Rahmen statt Schatten, 6px Radius
       statt 16px, kein Anheben beim Hover.
     * Ruhigerer Untergrund: das cremige Sand weicht einem neutralen Papier.
     * Dichter: kleinere Schriftgrade, engere Innenabstände, mehr Zeilen
       pro Bildschirm.
     * Grün nur noch für Aktionen, Auswahl und Zustand – nicht als Dekor.
   --------------------------------------------------------------------------- */
.app {
    --radius-app: 6px;
    background-color: rgb(var(--c-app-bg));
    font-size: 15px;              /* Grundmaß der Oberfläche */
}

/* --- Flächen --------------------------------------------------------------- */
.app .card {
    border: 1px solid rgb(var(--c-app-line));
    border-radius: var(--radius-app);
    box-shadow: none;
}

/* Kopfzeile eines Panels: Titel links, Nebenaktion rechts. */
.app .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgb(var(--c-app-line));
}

.app .panel-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(var(--c-ink));
}

.app .panel-body { padding: 1rem; }

/* --- Kennzahlen ------------------------------------------------------------ */
.app .stat {
    padding: 0.875rem 1rem;
}

.app .stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--c-ink-faint));
}

.app .stat-value {
    margin-top: 0.25rem;
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--c-ink));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app .stat-hint {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: rgb(var(--c-ink-faint));
}

/* Kompakte Variante für die Tarifreihe im Adminbereich.
   Dort stehen seit dem Business-Tarif fünf Kacheln nebeneinander statt vier.
   Ohne diese Rücknahme stößt die längste Beschriftung ("Conversion (Free →
   Paid)") in der schmaleren Spalte um und die Reihe wird höher als die
   darüber. Greift erst ab der Breite, in der tatsächlich fünf Spalten
   nebeneinander stehen - darunter ist Platz genug. */
@media (min-width: 1024px) {
    .app .stat-kompakt { padding: 0.75rem 0.875rem; }
    .app .stat-kompakt .stat-label { font-size: 0.6875rem; letter-spacing: 0.03em; }
    .app .stat-kompakt .stat-value { font-size: clamp(1rem, 2.4vw, 1.25rem); }
    .app .stat-kompakt .stat-hint  { font-size: 0.75rem; }
}

/* --- Bedienelemente -------------------------------------------------------- */
/* Ein Knopf, eine Form – über alle fünf Portalseiten hinweg. */
.app .btn {
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-app);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.app .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.app .btn-lg { padding: 0.625rem 1.125rem; font-size: 0.9375rem; }

/* Kein Anheben, kein Schatten: In einer Software springt nichts. */
.app .btn:hover { transform: none; box-shadow: none; }
.app .btn-primary:hover { background-color: rgb(var(--c-forest-dark)); }
.app .btn-sand { box-shadow: none; }

.app .btn-quiet {
    border-width: 1px;
    border-color: rgb(var(--c-app-line));
    background-color: rgb(var(--c-app-panel));
}
.app .btn-quiet:hover {
    border-color: rgb(var(--c-ink-faint));
    color: rgb(var(--c-ink));
}

.app .icon-btn {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-app);
}
.app .icon-btn-sm { width: 1.75rem; height: 1.75rem; }

/* --- Formularfelder -------------------------------------------------------- */
.app .field {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-app);
    border-color: rgb(var(--c-app-line));
    font-size: 0.875rem;
}

.app .field-label {
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--c-ink));
}

/* --- Listen und Tabellen --------------------------------------------------- */
.app .data-table th {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.75rem;
}

.app .data-table td { font-size: 0.875rem; }

/* Zeilentrenner in Panels */
.app .divide-line > * + * { border-color: rgb(var(--c-app-line)); }
.app .border-line { border-color: rgb(var(--c-app-line)); }

/* --- Status-Marker --------------------------------------------------------- */
/* Die drei Zustände eines Termins müssen sich auf einen Blick unterscheiden,
   auch schräg von der Seite an der Theke. Deshalb wechseln nicht nur die
   Textfarbe, sondern Fläche, Rahmen und Punktfarbe zusammen. */
.app .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.5rem;
    border: 1px solid rgb(var(--c-app-line));
    border-radius: var(--radius-app);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgb(var(--c-ink-soft));
    background: rgb(var(--c-app-bg));
    white-space: nowrap;
}

.app .chip::before {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
}

/* geplant – steht noch an: kräftiges Grün auf hellgrüner Fläche */
.app .chip-open {
    color: rgb(var(--c-forest));
    background: rgb(var(--c-forest) / 0.10);
    border-color: rgb(var(--c-forest) / 0.30);
}

/* erledigt – abgehakt: vollflächig grüner Button/Chip mit weißer Schrift, Punkt wird zum Haken */
.app .chip-done {
    color: #ffffff;
    background-color: rgb(var(--c-forest));
    border-color: rgb(var(--c-forest));
}
.app select.chip-done option {
    color: rgb(var(--c-ink));
    background-color: #ffffff;
}
.app .chip-done::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0;
    background: none;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translate(1px, -1px);
}

/* abgesagt – fällt aus: rot auf rosé, Schrift durchgestrichen */
.app .chip-cancel {
    color: rgb(var(--c-danger));
    background: rgb(var(--c-danger-soft));
    border-color: rgb(var(--c-danger) / 0.25);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Als Auswahlfeld: sieht aus wie der Marker, ist aber bedienbar. */
.app select.chip {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.5rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    background-size: 0.75rem;
}

.app select.chip::before { content: none; }

.app select.chip:hover { border-color: rgb(var(--c-ink-faint)); }

/* --- Meldungen im Portal --------------------------------------------------- */
.app .alert {
    border-radius: var(--radius-app);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}


/* ---------------------------------------------------------------------------
   3c. Dialoge
   ---------------------------------------------------------------------------
   Anlegen und Bearbeiten laufen über <dialog>. Das native Element bringt
   Fokusfalle, Inertisierung des Hintergrunds und korrekte Stapelung mit –
   nachgebaute Overlays scheitern genau daran.

   Der Dialog schließt ausschließlich über "Speichern" oder "Abbrechen":
   ein Klick daneben tut nichts (kein Listener), die Escape-Taste wird im
   JavaScript abgefangen. So geht keine halb ausgefüllte Eingabe verloren.
   --------------------------------------------------------------------------- */
.modal {
    width: min(46rem, calc(100vw - 1rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 1px solid rgb(var(--c-app-line));
    border-radius: 10px;
    background: rgb(var(--c-app-panel));
    color: rgb(var(--c-ink));
    box-shadow: 0 24px 60px -20px rgb(var(--c-forest-deep) / 0.35);
    overflow: visible;
}

@media (max-width: 640px) {
    .modal {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1.5rem);
    }
    .modal-body {
        padding: 0.875rem;
    }
    .modal-head, .modal-foot {
        padding: 0.75rem 0.875rem;
    }
}

.modal::backdrop {
    background: rgb(var(--c-forest-deep) / 0.45);
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgb(var(--c-app-line));
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
}

.modal-sub {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: rgb(var(--c-ink-faint));
}

.modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(100vh - 14rem);
}

.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgb(var(--c-app-line));
    background: rgb(var(--c-app-bg));
    border-radius: 0 0 10px 10px;
}

/* --- Screenshot-Lightbox (funktionen.php) ----------------------------------
   Eigener Dialog statt .modal: die Formular-Dialoge sind bewusst schmal
   (46rem) und nur über Speichern/Abbrechen zu schließen. Ein Screenshot soll
   dagegen möglichst groß und lesbar sein und sich auch per Klick daneben
   schließen lassen - keine Eingabe, die dabei verloren gehen könnte. */
.shot-lightbox {
    /* Kein eigenes "position" hier: der Browser zentriert <dialog>
       (position: fixed) beim showModal() von selbst. Ein eigenes
       "position: relative" hebelt das aus - der Dialog springt dann an den
       Dokumentanfang statt ueber der aktuellen Scrollposition zu erscheinen.
       Fuer den absolut positionierten Schliessen-Button gibt es stattdessen
       einen inneren .relative-Wrapper im Markup. */
    width: min(1400px, 94vw);
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: none;
    border-radius: 12px;
    background: transparent;
    overflow: visible;
}

.shot-lightbox::backdrop {
    background: rgb(var(--c-forest-deep) / 0.75);
}

.shot-lightbox img {
    display: block;
    width: 100%;
    max-height: calc(100vh - 7rem);
    object-fit: contain;
    border-radius: 12px;
    background: rgb(var(--c-app-bg));
}

/* --- Terminlisten: abwechselnde Zeilen -------------------------------------
   Liegen mehrere Termine untereinander, verschwimmen gleichfarbige Zeilen
   trotz Trennlinie – besonders am Schertisch, wo nur kurz aufs Display
   geschaut wird. Der Wechsel weiss/grau trennt sie auf einen Blick.

   Der Hover-Ton ist bewusst waermer (sand-light) statt gleich dem Zebra-Ton
   (app-bg): Waere beides derselbe Wert, waere auf einer geraden Zeile nicht
   mehr erkennbar, ob sie gerade unter dem Zeiger liegt.

   :nth-child(even) laesst die erste Zeile weiss – Termin 1 weiss, Termin 2
   grau, Termin 3 wieder weiss.

   Beide Zustaende werden explizit gesetzt, nicht nur der graue: Bliebe die
   ungerade Zeile transparent, haetten Zebra und Untergrund dieselbe Farbe,
   sobald die Liste einmal nicht auf einem weissen Panel liegt. */
.termin-liste > li:nth-child(odd):not(.termin-abgesagt) {
    background-color: rgb(var(--c-app-panel));
}

.termin-liste > li:nth-child(even):not(.termin-abgesagt) {
    background-color: rgb(var(--c-app-bg));
}

.termin-liste > li:hover:not(.termin-abgesagt) {
    background-color: rgb(var(--c-sand-light));
}

/* Der Button fuellt die Zeile bereits aus; sein eigener Hover wuerde den
   Zeilen-Hover nur ueberdecken. */
.termin-liste > li > button:hover {
    background-color: transparent;
}

/* --- Rechtstexte ----------------------------------------------------------- */
/* Impressum, Datenschutz und AGB sind Fließtext. Statt jeden Absatz mit
   Utility-Klassen zu behängen, formatiert dieser eine Block den ganzen
   Artikel – so bleiben die Seiten selbst reiner Inhalt. */
.legal-text {
    color: rgb(var(--c-ink-soft));
    line-height: 1.75;
}

.legal-text h2 {
    margin-top: 2.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgb(var(--c-line));
    font-family: Raleway, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: rgb(var(--c-forest-deep));
}

.legal-text h2:first-child { margin-top: 0; }

.legal-text h3 {
    margin-top: 1.75rem;
    font-family: Raleway, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: rgb(var(--c-forest));
}

.legal-text p,
.legal-text ul,
.legal-text ol,
.legal-text address {
    margin-top: 0.9rem;
    font-style: normal;
    max-width: 68ch;
}

.legal-text ul,
.legal-text ol {
    padding-left: 1.25rem;
}

.legal-text ul { list-style: disc; }
.legal-text ol { list-style: decimal; }

.legal-text li { margin-top: 0.4rem; }

.legal-text strong { color: rgb(var(--c-ink)); font-weight: 600; }

.legal-text a {
    color: rgb(var(--c-forest));
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-text a:hover { color: rgb(var(--c-forest-dark)); }

/* Hinweis auf die Rechtsgrundlage – gehört zum Absatz, tritt aber zurück. */
.legal-text .legal-ref {
    font-size: 0.875rem;
    color: rgb(var(--c-ink-faint));
}

/* Kontaktblock mit ruhigem Hintergrund */
.legal-text address.legal-card {
    background: rgb(var(--c-sand-light));
    border-radius: var(--radius-field);
    padding: 1rem 1.25rem;
    color: rgb(var(--c-ink));
}

/* --- Tabellen im Portal --------------------------------------------------- */
.data-table th {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--c-ink-faint));
}

.data-table tbody tr:hover {
    background-color: rgb(var(--c-sand-light));
}

/* Zebra-Streifen: eigene Modifier-Klasse statt Default, damit die
   bestehenden (nicht gestreiften) Tabellen unangetastet bleiben. */
.data-table-zebra tbody tr:nth-child(even) {
    background-color: rgb(var(--c-app-line) / 0.35);
}
.data-table-zebra tbody tr:hover {
    background-color: rgb(var(--c-sand-light));
}
.data-table-zebra tbody tr {
    cursor: pointer;
}


/* ---------------------------------------------------------------------------
   4. Seitenspezifisches
   --------------------------------------------------------------------------- */

/* --- Ratgeber (Guide) Layout & Typografie --------------------------------- */
.guide-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .guide-layout {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }

    .guide-sidebar {
        position: sticky;
        top: 7.5rem;
        max-height: calc(100vh - 9rem);
        overflow-y: auto;
    }
}

.guide-list-ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.guide-list-ul li {
    margin-bottom: 0.5rem;
}
.guide-list-ul li::marker {
    color: rgb(var(--c-forest));
}

.guide-list-ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.guide-list-ol li {
    margin-bottom: 0.5rem;
}
.guide-list-ol li::marker {
    color: rgb(var(--c-forest));
    font-weight: 700;
}

.guide-table-wrap {
    overflow-x: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-card);
    border: 1px solid rgb(var(--c-line));
    background-color: #ffffff;
    box-shadow: var(--shadow-card);
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    text-align: left;
}

.guide-table th {
    background-color: rgb(var(--c-sand));
    color: rgb(var(--c-forest-deep));
    font-weight: 700;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgb(var(--c-line));
}

.guide-table td {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgb(var(--c-line) / 0.6);
}

.guide-table tbody tr:last-child td {
    border-bottom: none;
}

.guide-table tbody tr:nth-child(even) {
    background-color: rgb(var(--c-sand-light) / 0.4);
}


/* --- Hero ----------------------------------------------------------------- */
/* Das Bild trägt die Stimmung, der Verlauf trägt den Text. Von links dicht,
   nach rechts offen: die Schrift steht dadurch immer auf >7:1 Kontrast,
   ohne dass das Foto zugekleistert wird. */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 8s ease-out;
    transform: scale(1.04);
    z-index: 0;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* Der Verlauf liegt bewusst als eigene Ebene ÜBER allen Slides, nicht auf
   jedem Slide einzeln. Lag er auf den Flächen, überlagerten sich während der
   Überblendung zwei halbtransparente Verläufe – und das Ergebnis war heller
   als jeder einzelne davon. Weißer Text stand dann kurzzeitig auf einer zu
   hellen Fläche. Als eigene Ebene bleibt die Abdunklung über den gesamten
   Wechsel hinweg konstant. */
.hero-scrim {
    background-image: linear-gradient(
        100deg,
        rgba(20, 42, 17, 0.94) 0%,
        rgba(20, 42, 17, 0.86) 40%,
        rgba(20, 42, 17, 0.58) 72%,
        rgba(20, 42, 17, 0.40) 100%
    );
    z-index: 1;
}

@media (max-width: 768px) {
    .hero-slide {
        background-position: center center;
    }

    /* Auf schmalen Geräten läuft der Text über die ganze Breite, nicht nur
       über die linke Spalte. Der Verlauf muss deshalb überall tragen. */
    .hero-scrim {
        background-image: linear-gradient(
            170deg,
            rgba(20, 42, 17, 0.90) 0%,
            rgba(20, 42, 17, 0.84) 55%,
            rgba(20, 42, 17, 0.88) 100%
        );
    }
}

/* Wer Bewegung reduziert haben möchte, bekommt ein stehendes Bild statt der
   Überblendung. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: none;
        transform: none;
    }
}

/* --- Kopfleiste der öffentlichen Seiten ----------------------------------- */
/* Nur Farbe und Schatten werden animiert. Die Höhe bleibt konstant: eine
   mitlaufende Padding-Animation würde bei jedem Scroll-Tick ein Re-Layout
   auslösen, und der Wechsel von transparent auf weiß trägt das Signal
   ohnehin allein. */
.site-header {
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.site-header.is-scrolled,
.site-header.is-solid {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(20, 42, 17, 0.10);
}

.site-header.is-scrolled .header-brand,
.site-header.is-solid .header-brand {
    color: rgb(var(--c-forest-deep)) !important;
}

.site-header.is-scrolled .header-sub,
.site-header.is-solid .header-sub {
    color: rgb(var(--c-ink-faint)) !important;
}

.site-header.is-scrolled .nav-link,
.site-header.is-solid .nav-link {
    color: rgb(var(--c-ink)) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.site-header.is-scrolled .nav-link:hover,
.site-header.is-solid .nav-link:hover {
    background-color: rgb(var(--c-sand-light)) !important;
}

.site-header.is-scrolled #mobile-toggle,
.site-header.is-solid #mobile-toggle {
    color: rgb(var(--c-forest)) !important;
}

.site-header.is-scrolled #lang-switch,
.site-header.is-solid #lang-switch {
    background-color: rgb(var(--c-sand-light)) !important;
    border-color: transparent !important;
}

.site-header.is-scrolled .lang-switch-item[data-active="true"],
.site-header.is-solid .lang-switch-item[data-active="true"] {
    background-color: #ffffff !important;
    color: rgb(var(--c-forest-deep)) !important;
    box-shadow: var(--shadow-sm);
}

.site-header.is-scrolled .lang-switch-item[data-active="false"],
.site-header.is-solid .lang-switch-item[data-active="false"] {
    color: rgb(var(--c-ink-faint)) !important;
}

/* --- Untermenü / Dropdown in der Navigation ------------------------------- */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    width: 16rem;
    padding: 0.375rem;
    border-radius: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 50;
    pointer-events: none;

    background-color: rgba(20, 42, 17, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: 0 14px 32px -8px rgba(20, 42, 17, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -0.75rem;
    left: 0;
    right: 0;
    height: 0.75rem;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-chevron {
    transition: transform 0.2s ease;
}

.nav-dropdown:hover .dropdown-chevron,
.nav-dropdown:focus-within .dropdown-chevron,
.nav-dropdown.is-open .dropdown-chevron {
    transform: rotate(180deg);
}

.site-header.is-scrolled .nav-dropdown-menu,
.site-header.is-solid .nav-dropdown-menu {
    background-color: #ffffff;
    border: 1px solid rgb(var(--c-line));
    color: rgb(var(--c-ink));
    box-shadow: 0 16px 36px -8px rgba(20, 42, 17, 0.15);
}

.nav-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.88);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.site-header.is-scrolled .nav-dropdown-item,
.site-header.is-solid .nav-dropdown-item {
    color: rgb(var(--c-ink));
}
.site-header.is-scrolled .nav-dropdown-item:hover,
.site-header.is-scrolled .nav-dropdown-item:focus,
.site-header.is-solid .nav-dropdown-item:hover,
.site-header.is-solid .nav-dropdown-item:focus {
    background-color: rgb(var(--c-sand-light));
    color: rgb(var(--c-forest-dark));
}

.nav-dropdown-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    background-color: rgba(255, 255, 255, 0.15);
    color: rgb(var(--c-sand));
}
.site-header.is-scrolled .nav-dropdown-icon,
.site-header.is-solid .nav-dropdown-icon {
    background-color: rgb(var(--c-sand));
    color: rgb(var(--c-forest-dark));
}

/* --- Die eine authored Bewegung ------------------------------------------ */
/* Ein einziger Moment: der Hero baut sich auf. Kein Effekt-Konfetti auf
   jedem Abschnitt. Startzustand ist sichtbar, damit ohne JS nichts fehlt. */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.rise {
    animation: rise 0.9s var(--ease-out) both;
}

.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.18s; }
.rise-3 { animation-delay: 0.31s; }
.rise-4 { animation-delay: 0.44s; }
.rise-5 { animation-delay: 0.57s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rise {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* --- Druck ---------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .no-print { display: none !important; }
}

/* --- Diagramme & Balken --------------------------------------------------- */
.chart-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-app);
    transition: background-color 0.15s ease;
}
.chart-row:hover {
    background-color: rgba(45, 90, 39, 0.06);
}
.chart-row.is-current {
    background-color: rgba(45, 90, 39, 0.08);
    box-shadow: inset 0 0 0 1px rgba(45, 90, 39, 0.25);
}
.chart-row.is-today {
    background-color: rgba(45, 90, 39, 0.12);
    box-shadow: inset 0 0 0 1px rgba(45, 90, 39, 0.35);
}

.chart-label {
    width: 6.5rem;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--c-ink));
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.chart-track {
    flex: 1;
    height: 1rem;
    background-color: rgb(var(--c-app-line));
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.chart-bar-fill {
    height: 100%;
    background-color: rgb(var(--c-forest));
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.chart-bar-fill-rev {
    height: 100%;
    background-color: rgb(var(--c-warning-ink));
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.chart-value {
    width: 6.5rem;
    flex-shrink: 0;
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--c-ink));
}
.chart-value.is-zero {
    color: rgb(var(--c-ink-faint));
    font-weight: 500;
}

/* --- Split-Screen Login & Registrierung ---------------------------------- */
.auth-aside {
    width: 100%;
    min-height: 280px;
}
.auth-main {
    width: 100%;
}
@media (min-width: 1024px) {
    .auth-aside {
        width: 60% !important;
        min-height: 100vh;
    }
    .auth-main {
        width: 40% !important;
    }
}

/* ---------------------------------------------------------------------------
   Diagrammfläche (admin/stats.php)
   ---------------------------------------------------------------------------
   Chart.js zeichnet mit maintainAspectRatio:false genau in die Höhe des
   Elternelements. Die Höhe steht deshalb hier und nicht als Utility-Klasse im
   Markup: Von den Tailwind-Höhen ist nur ein Bruchteil ins gebaute
   assets/tailwind.css gelangt (h-56 und sm:h-64 sind drin, h-40 oder h-44
   nicht). Eine andere Utility-Klasse bliebe wirkungslos, bis jemand den
   CSS-Build neu laufen lässt - und das fiele erst am fertigen Diagramm auf.

   Werte: ursprünglich 14rem / 16rem, dann auf zwei Drittel (9.5rem / 11rem)
   und nun noch einmal um ein Viertel zurückgenommen.
   --------------------------------------------------------------------------- */
.chart-box {
    height: 7.125rem;
}

@media (min-width: 640px) {
    .chart-box {
        height: 8.25rem;
    }
}