/* ============================================================================
   Corporate Design „Zuhausehelfer mit Herz“
   Farben, Schrift und Fokus stehen nur hier. Das Telerik-Thema (Meridian) leitet Hover, Aktiv und helle Stufen
   selbst aus den Grundfarben ab, deshalb genügen die --kendo-color-* unten. Die App nutzt dieselben Werte.
   Kontraste nach WCAG 2.2 AA geprüft, die Werte stehen hinter den Farben.
   ========================================================================== */

/* Markenschriften aus dem eigenen Haus (Lizenzen in wwwroot/fonts), nur für das Logo und die Anmeldung. */
@font-face {
    font-family: "Abril Fatface";
    src: url("fonts/AbrilFatface-Regular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Satisfy";
    src: url("fonts/Satisfy-Regular.ttf") format("truetype");
    font-display: swap;
}

:root {
    /* Marke */
    --zh-beere: #BA3165;            /* Primär: Hauptaktionen, aktive Navigation, Links. Weiß darauf 5,65:1 */
    --zh-beere-dunkel: #9A2552;     /* Hover, Text auf hellen Beere-Flächen. Weiß darauf 7,6:1 */
    --zh-beere-hell: #FBEFF4;
    --zh-aubergine: #622774;        /* Dunkel: Seitenleiste, Überschriften, Fokus. Auf Weiß 10,2:1 */
    --zh-aubergine-tief: #4E1F5D;
    --zh-aubergine-hell: #F4ECF6;
    --zh-gold: #FFD700;             /* Akzent: nur als Fläche mit dunkler Schrift (10,9:1), nie als Schrift auf Weiß */

    /* Neutral, warm */
    --zh-hintergrund: #FAF7F5;
    --zh-flaeche: #FFFFFF;
    --zh-flaeche-leise: #F5F0F2;
    --zh-rahmen: #E6DEE2;
    --zh-rahmen-feld: #8F8389;      /* Ränder von Eingabefeldern, 3,6:1 (WCAG 1.4.11) */
    --zh-text: #2A2230;             /* 14,4:1 auf dem Hintergrund */
    --zh-text-leise: #625860;       /* 6,4:1 auf dem Hintergrund */
    --zh-papier: #FFFFFF;           /* Vorschau von Gedrucktem (Logo auf dem Briefbogen): bleibt auch im Dunkeln weiß */
    --zh-papier-text: #2A2230;      /* Schrift auf Papier, auch im Dunkeln */

    /* Rollen, die im Dunkeln andere Werte brauchen als die Grundfarbe (siehe Block „Dunkle Darstellung“) */
    --zh-link: var(--zh-beere);
    --zh-link-hover: var(--zh-beere-dunkel);
    --zh-beere-tief: #9A2552;       /* Fläche unter weißer Schrift beim Überfahren, Weiß darauf 7,6:1 */
    --zh-leiste: #622774;           /* Seitenleiste mit weißer Schrift */
    --zh-leiste-kopf: #4E1F5D;

    /* Signal, getrennt von der Marke: Rot zieht ins Orange, damit es nicht wie die Beere aussieht */
    --zh-erfolg: #1D7A45;
    --zh-erfolg-text: #14532D;
    --zh-erfolg-flaeche: #E7F4EC;
    --zh-warnung: #B45309;
    --zh-warnung-text: #8A4B00;
    --zh-warnung-flaeche: #FFF1D6;
    --zh-fehler: #C2410C;           /* Weiß darauf 5,2:1 */
    --zh-fehler-text: #9A3412;
    --zh-fehler-flaeche: #FDEDE6;
    --zh-info: #1F5F8B;
    --zh-info-text: #1F4F7A;
    --zh-info-flaeche: #E8F1F8;

    /* Schrift: eine gut lesbare Sans-Serif; die Markenschriften nur für Logo und Anmeldung */
    --zh-schrift: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --zh-schrift-marke: "Abril Fatface", Georgia, "Times New Roman", serif;
    --zh-schrift-zier: "Satisfy", "Segoe Script", cursive;
    --zh-klein: .875rem;            /* Hinweise, Marken: 14 px */
    --zh-grund: 1rem;               /* Grundschrift: 16 px */
    --zh-titel: 1.25rem;            /* Seitentitel: 20 px */

    --zh-fokus: var(--zh-aubergine);
    --zh-radius: .75rem;
    --zh-schatten: 0 1px 2px rgba(42, 34, 48, .06), 0 2px 8px rgba(42, 34, 48, .05);

    /* Telerik-Thema Meridian */
    --kendo-font-family: var(--zh-schrift);
    --kendo-color-primary: var(--zh-beere);
    --kendo-color-secondary: var(--zh-aubergine);
    --kendo-color-tertiary: var(--zh-gold);
    --kendo-color-info: var(--zh-info);
    --kendo-color-success: var(--zh-erfolg);
    --kendo-color-warning: #F5A524;
    --kendo-color-error: var(--zh-fehler);
    /* Helle Signalflächen fest, sonst leitet das Thema sie aus den dunkleren Farben ab (Info wurde grau) */
    --kendo-color-info-subtle: var(--zh-info-flaeche);
    --kendo-color-info-on-subtle: var(--zh-info-text);
    --kendo-color-success-subtle: var(--zh-erfolg-flaeche);
    --kendo-color-success-on-subtle: var(--zh-erfolg-text);
    --kendo-color-warning-subtle: var(--zh-warnung-flaeche);
    --kendo-color-warning-on-subtle: var(--zh-warnung-text);
    --kendo-color-error-subtle: var(--zh-fehler-flaeche);
    --kendo-color-error-on-subtle: var(--zh-fehler-text);
    --kendo-color-on-app-surface: var(--zh-text);
    --kendo-color-subtle: var(--zh-text-leise);
    --kendo-color-surface: var(--zh-flaeche-leise);
    --kendo-color-base: #F3EEF0;
    --kendo-color-border: var(--zh-rahmen);
    --kendo-color-border-alt: #D9CFD4;
}

/* ---------------------------------------------------------------------------
   Dunkle Darstellung (Prismamed.Ui: farbschema.js setzt data-p-farbschema="dunkel" am <html>, nach Wahl im Menü oder
   wie das System). Flächen, Rahmen und die --kendo-color-* außer der Marke kommen aus Meridian dunkel; hier nur, was die
   eigenen Regeln brauchen. Kontraste nach WCAG 2.2 AA auf den dunklen Flächen von Meridian (app-surface bis base).
   Weiße Schrift auf Beere, Signalfarben und Leiste bleibt; Marke als Schrift wird aufgehellt.
   ------------------------------------------------------------------------ */
:root[data-p-farbschema="dunkel"] {
    --zh-hintergrund: var(--kendo-color-app-surface);
    --zh-flaeche: var(--kendo-color-surface-alt);
    --zh-flaeche-leise: var(--kendo-color-surface);
    --zh-rahmen: var(--kendo-color-border);
    --zh-text: var(--kendo-color-on-app-surface);
    --zh-text-leise: #BDB2BA;       /* 8,2:1 auf surface */

    --zh-beere-dunkel: #F29BBE;     /* Schrift in Beere (aktiver Reiter, Hinweise), 8,2:1 */
    --zh-beere-hell: #3B1A2B;       /* Beere-Fläche, Beere-Schrift darauf 7,5:1 */
    --zh-aubergine: #D9BCE4;        /* Überschriften und Fokus, 9,8:1 */
    --zh-aubergine-tief: #E9D9EF;
    --zh-aubergine-hell: #2C1F36;
    --zh-link: #F29BBE;
    --zh-link-hover: #F8C4D8;
    --zh-leiste: #3F1A4B;           /* dunkler als im Hellen, weiß darauf 14,4:1 */
    --zh-leiste-kopf: #30133A;

    --zh-erfolg-text: #8FD6A8;
    --zh-erfolg-flaeche: #163522;   /* jeweils 7,4 bis 8,3:1 mit der eigenen Schrift */
    --zh-warnung-text: #F2C077;
    --zh-warnung-flaeche: #3A2A0E;
    --zh-fehler-text: #F4A688;
    --zh-fehler-flaeche: #3D1D14;
    --zh-info: #5B9BD0;
    --zh-info-text: #9CC8EA;
    --zh-info-flaeche: #122C40;
    --zh-schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);

    /* Meridian dunkel legt „Warnung“ als mittelhelle Fläche für dunkle Schrift an (Helligkeit 0,64). Hinweiskarten mit
       k-bg-warning-subtle erben aber die helle Schrift (3:1). Wie die übrigen Signalfarben: dunkle Fläche, helle Schrift. */
    --kendo-color-warning-subtle: var(--zh-warnung-flaeche);
    --kendo-color-warning-on-subtle: var(--zh-warnung-text);

    /* Marke statt des Meridian-Blaus, aufgehellt wie PrismamedRoot es mit PrimaryColor macht (Helligkeit mindestens 0,72) */
    --kendo-color-primary: oklch(from #BA3165 max(l, 0.72) c h);
    --kendo-color-secondary: oklch(from #622774 max(l, 0.72) c h);
    --kendo-color-tertiary: var(--zh-gold);
}

/* Gedrucktes (Vertragstext, Logo auf dem Briefbogen) bleibt Papier: weiß mit dunkler Schrift. */
.zh-papier {
    background: var(--zh-papier);
    color: var(--zh-papier-text);
}

.zh-papier a {
    color: #9A2552;
}

/* ---------------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------------ */

/* Hintergrund nur am Dokument: Das Bild der Anmeldung liegt mit z-index -1 dahinter und bliebe sonst verdeckt. */
html {
    background: var(--zh-hintergrund);
}

body {
    color: var(--zh-text);
    font-family: var(--zh-schrift);
}

main {
    background: var(--zh-hintergrund);
    color: var(--zh-text);
}

a {
    color: var(--zh-link);
}

a:hover {
    color: var(--zh-link-hover);
}

/* Fokus: immer sichtbar, bei Maus und Tastatur unterschieden (WCAG 2.4.7, 2.4.11) */
:focus-visible {
    outline: 3px solid var(--zh-fokus);
    outline-offset: 2px;
}

.k-button:focus-visible {
    outline: 3px solid var(--zh-fokus);
    outline-offset: 2px;
}

.k-input:focus-within,
.k-picker:focus-within,
.k-input.k-focus,
.k-picker.k-focus {
    outline: 2px solid var(--zh-fokus);
    outline-offset: 1px;
}

.k-input-inner:focus-visible,
.k-picker .k-input-inner:focus-visible {
    outline: none;
}

.k-tabstrip-item:focus-visible {
    outline: 3px solid var(--zh-fokus);
    outline-offset: -3px;
}

.k-grid td:focus-visible,
.k-grid th:focus-visible,
.k-grid .k-focus {
    outline: 2px solid var(--zh-fokus);
    outline-offset: -2px;
}

.k-switch:focus-visible,
.k-switch.k-focus,
.k-checkbox:focus-visible,
.k-radio:focus-visible {
    outline: 2px solid var(--zh-fokus);
    outline-offset: 2px;
}

/* Eingabefelder: Rand mit genug Kontrast, Hinweise gerade statt kursiv */
.k-input,
.k-picker,
.k-textarea {
    border-color: var(--zh-rahmen-feld);
}

.k-checkbox,
.k-radio {
    border-color: var(--zh-rahmen-feld);
}

.k-form-hint {
    font-size: var(--zh-klein);
    font-style: normal;
    color: var(--zh-text-leise);
}

.k-label,
.k-form-label {
    color: var(--zh-text);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Seitenleiste in Aubergine, aktive Seite in Beere, Fokus in Gold
   ------------------------------------------------------------------------ */

.p-nav-sidebar {
    background: var(--zh-leiste) !important;
    color: #FFFFFF;
    border-right: 0 !important;
}

.p-nav-sidebar > .k-bg-base-subtle {
    background: var(--zh-leiste-kopf) !important;
    border-bottom-color: rgba(255, 255, 255, .14) !important;
    color: #FFFFFF;
}

/* Das Logo trägt selbst Beere und Aubergine: auf heller Fläche, damit es auf der dunklen Leiste sichtbar bleibt. */
.p-nav-sidebar > .k-bg-base-subtle img {
    background: #FFFFFF;
    border-radius: .5rem;
    padding: .2rem;
    box-sizing: content-box;
}

.p-nav-sidebar > .k-bg-base-subtle .k-font-bold {
    font-family: var(--zh-schrift-marke);
    font-weight: 400;
    font-size: var(--zh-titel);
    line-height: 1.1;
    letter-spacing: .01em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Wortmarke in zwei Zeilen: „Zuhausehelfer“ in Abril Fatface, darunter „mit Herz“ in Satisfy (Titel im Layout ohne den
   Zusatz). In einer Zeile passte sie nicht in die Leiste. */
.p-nav-sidebar > .k-bg-base-subtle .k-font-bold::after {
    content: "mit Herz";
    display: block;
    font-family: var(--zh-schrift-zier);
    font-size: var(--zh-titel);
    line-height: 1.1;
    color: #F3E8F6;
}

.p-nav-sidebar .k-button,
.p-nav-sidebar .k-button .k-svg-icon {
    color: #FFFFFF;
}

.p-nav-sidebar .k-treeview {
    background: transparent;
    color: #FFFFFF;
}

.p-nav-sidebar .k-treeview-item-content {
    color: #F3E8F6;
    border-radius: .5rem;
}

.p-nav-sidebar .k-treeview-item-content:hover,
.p-nav-sidebar .k-treeview-item-content.k-hover {
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
}

.p-nav-sidebar .k-treeview-item-content.k-selected,
.p-nav-sidebar .k-treeview-item-content.k-selected:hover {
    background: var(--zh-beere);
    color: #FFFFFF;
}

.p-nav-sidebar .k-treeview-item:focus-visible {
    outline: none;
}

.p-nav-sidebar .k-treeview-item:focus-visible > .k-treeview-item-content,
.p-nav-sidebar .k-treeview-item-content.k-focus {
    outline: 3px solid var(--zh-gold);
    outline-offset: -3px;
    box-shadow: none;
}

/* Unten in der Leiste: das Handbuch öffnet in einem neuen Tab. */
.p-nav-sidebar .zh-handbuch {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: 0 .625rem;
    margin-bottom: .5rem;
    border-radius: .5rem;
    color: #F3E8F6;
    font-size: var(--zh-grund);
    text-decoration: none;
}

.p-nav-sidebar .zh-handbuch:hover {
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
}

.p-nav-sidebar .zh-handbuch:focus-visible {
    outline: 3px solid var(--zh-gold);
    outline-offset: -3px;
}

.p-nav-sidebar .k-chip {
    background: transparent;
    border-color: rgba(255, 255, 255, .4);
    color: #FFFFFF;
    font-size: var(--zh-klein);
}

/* ---------------------------------------------------------------------------
   Kopfzeile, Titel, Karten, Reiter: weniger Rahmen, mehr Weißraum
   ------------------------------------------------------------------------ */

.zh-kopfzeile {
    background: var(--zh-flaeche) !important;
    border-bottom: 1px solid var(--zh-rahmen) !important;
}

.zh-seitenkopf-titel h1 {
    color: var(--zh-aubergine);
    font-size: var(--zh-titel);
    font-weight: 700;
}

.k-card {
    border: 1px solid var(--zh-rahmen);
    border-radius: var(--zh-radius);
    box-shadow: var(--zh-schatten);
    background: var(--zh-flaeche);
}

.k-card-header,
.k-card-header.k-bg-surface {
    background: transparent !important;
    border-bottom: 0;
    padding-bottom: 0;
}

.k-card-title {
    font-size: var(--zh-grund);
    font-weight: 700;
    color: var(--zh-aubergine);
}

.zh-inhalt h2,
.k-window h2 {
    font-size: var(--zh-grund);
    font-weight: 700;
    color: var(--zh-aubergine);
}

.zh-inhalt h3,
.k-window h3 {
    font-size: var(--zh-grund);
    font-weight: 600;
}

.k-window-title,
.k-dialog-title {
    font-size: var(--zh-titel);
    font-weight: 700;
    color: var(--zh-aubergine);
}

.k-tabstrip-content,
.k-tabstrip > .k-content {
    background: transparent;
}

.k-tabstrip-items-wrapper {
    border-bottom: 1px solid var(--zh-rahmen);
}

.k-tabstrip-item {
    color: var(--zh-text-leise);
}

.k-tabstrip-item:hover {
    color: var(--zh-text);
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active,
.k-tabstrip-item.k-active {
    color: var(--zh-beere-dunkel);
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: inset 0 -3px 0 var(--zh-beere);
    font-weight: 600;
}

.k-grid {
    border-color: var(--zh-rahmen);
    border-radius: var(--zh-radius);
}

.k-grid .k-table-thead,
.k-grid .k-grid-header {
    background: var(--zh-flaeche-leise);
}

.k-notification {
    color: var(--zh-text);
}

/* ---------------------------------------------------------------------------
   Anmeldung: Logo in der Markenschrift
   ------------------------------------------------------------------------ */

.fullscreen-image + .k-d-flex .k-card-body > .k-text-center:first-child h3 {
    font-family: var(--zh-schrift-marke);
    font-weight: 400;
    color: var(--zh-aubergine);
    font-size: 1.75rem;
    letter-spacing: .01em;
}

.fullscreen-image + .k-d-flex .k-card {
    max-width: calc(100vw - 2rem);
    border: 0;
    box-shadow: 0 10px 40px rgba(78, 31, 93, .25);
}

/* ---------------------------------------------------------------------------
   Kalender: Text auf den farbigen Terminen bleibt weiß und lesbar
   ------------------------------------------------------------------------ */

/* Nur Termine in Helferfarbe (Telerik setzt sie als background-color im style). Ein Termin ohne Farbe liegt auf der hellen
   Fläche von Meridian und behält dessen dunkle Schrift. */
.k-scheduler .k-event[style*="background-color"] {
    color: #FFFFFF;
}

.k-scheduler .k-event .k-text-subtle {
    color: inherit;
    opacity: .9;
}

/* ---------------------------------------------------------------------------
   Klickziele mindestens 24 px (WCAG 2.5.8), auch bei Links in Listen
   ------------------------------------------------------------------------ */

.zh-arbeit-zahlen a,
.zh-inhalt li > a:not(.zh-punkt):not(.k-button) {
    display: inline-block;
    min-height: 1.5rem;
    padding-block: .125rem;
}

/* ---------------------------------------------------------------------------
   Handy: Reiter in einer Zeile zum Wischen statt drei Zeilen untereinander
   ------------------------------------------------------------------------ */

@media (max-width: 640px) {
    .k-tabstrip-items-wrapper {
        min-width: 0;
    }

    .k-tabstrip-items-wrapper > .k-tabstrip-items {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        min-width: 0;
        max-width: 100%;
    }

    .k-tabstrip-items-wrapper > .k-tabstrip-items::-webkit-scrollbar {
        display: none;
    }

    .k-tabstrip-items-wrapper > .k-tabstrip-items > .k-tabstrip-item {
        flex: 0 0 auto;
    }
}

/* ---------------------------------------------------------------------------
   Schriftgrößen: höchstens drei je Seite (14, 16, 20 px)
   ------------------------------------------------------------------------ */

.k-avatar,
.k-avatar .k-avatar-text {
    font-size: var(--zh-klein);
}

.fullscreen-image + .k-d-flex .k-button-lg {
    font-size: var(--zh-grund);
}

.k-switch-label-on,
.k-switch-label-off {
    font-size: var(--zh-klein);
}

.fullscreen-image + .k-d-flex .k-card-body h4 {
    font-size: var(--zh-titel);
    color: var(--zh-aubergine);
}

/* Tastaturfokus auch auf Flächen, die Telerik selbst fokussierbar macht (Tabelleninhalt, Kalender). */
.k-grid [tabindex]:focus-visible,
.k-scheduler [tabindex]:focus-visible {
    outline: 2px solid var(--zh-fokus);
    outline-offset: -2px;
}

/* PContent (Prismamed): Unter einem hohen Kopfteil bekam die Tabelle die Höhe 0, etwa die Bezugspersonen am Handy.
   Mit einer Mindesthöhe läuft der Reiter weiter und die Tabelle bleibt erreichbar. */
.k-d-flex.k-flex-col > .k-flex-shrink-0 + .k-flex-grow.k-overflow-hidden {
    min-height: 20rem;
}