/*
 * portal.css — die Ergänzungen zu Tabler.
 *
 * Leitgedanke: hell, weiss, ruhig – aber nicht kühl. Eine Grundschule ist kein
 * Rechenzentrum. Die Wärme kommt über weiche Ecken, viel Luft und kräftige,
 * klare Farben an den Stellen, an denen wirklich etwas ausgesagt wird
 * (Krankmeldung, Abholzeit). Alles andere bleibt grau und still.
 *
 * Zweite Regel: grosse Ziele zum Antippen. Die Seite wird zum grössten Teil
 * morgens auf einem Handy bedient, oft mit einer Hand.
 */

:root {
    --kgs-rahmen: 14px;
    --kgs-grund: #f6f8fb;
    --kgs-akzent: #206bc4;
    --kgs-akzent-weich: #eaf1fb;
}

body.bg-hell {
    background: var(--kgs-grund);
}

/* ── Marke ───────────────────────────────────────────────────────────────── */

.marke-logo {
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    vertical-align: middle;
}

.marke-logo-karte {
    display: inline-block;
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
}

.marke-name {
    font-weight: 600;
    margin-left: .6rem;
    vertical-align: middle;
    color: #1d273b;
}

.kopfleiste {
    background: #fff;
    border-bottom: 1px solid #e6e9ef;
}

.navbar-menue {
    background: #fff;
    border-bottom: 1px solid #e6e9ef;
    box-shadow: 0 1px 2px rgba(24, 36, 51, .04);
}

/* Das Elternmenü steht am Handy in EINER Zeile — seit „Fotos" und „Dokumente"
 * dazugekommen sind, in sechs Spalten. Auf einem 320-Punkt-Bildschirm liefen
 * die Wörter ineinander („ÜbersichtDauerangabenFotos"), weil jeder Punkt
 * gleich breit ist und der Text darüber hinausragte.
 *
 * Deshalb hier: kleinere Schrift, kein Umbruch, und was dann noch zu lang ist,
 * endet mit drei Punkten. Das Symbol darüber bleibt in voller Grösse — es
 * trägt am Handy ohnehin die Erkennung. */
@media (max-width: 575.98px) {
    .navbar-menue .nav-link {
        padding-left: .25rem;
        padding-right: .25rem;
        min-width: 0;
    }

    .navbar-menue .nav-link-title {
        display: block;
        max-width: 100%;
        font-size: .6875rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.kleingedruckt {
    font-size: .8125rem;
}

/* ── Karten ──────────────────────────────────────────────────────────────── */

.card {
    border-radius: var(--kgs-rahmen);
    border-color: #e6e9ef;
}

.card-header {
    border-top-left-radius: var(--kgs-rahmen);
    border-top-right-radius: var(--kgs-rahmen);
}

/* Karte je Kind auf der Elternseite */
.kind-karte .kind-kopf {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.kind-abzeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--kgs-akzent-weich);
    color: var(--kgs-akzent);
    font-weight: 700;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

/* ── Auswahl der Abholzeit ───────────────────────────────────────────────── */

/*
 * Die Auswahl ist bewusst eine Reihe grosser Knöpfe und keine Klappliste:
 * Was zur Wahl steht, ist damit auf einen Blick sichtbar, und ein Kind, das
 * neben dem Elternteil steht, kann mitlesen.
 */
.zeitwahl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5rem;
}

.zeitwahl .zeitknopf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    width: 100%;
    min-height: 3.5rem;
    padding: .7rem .9rem;
    border: 2px solid #e6e9ef;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, background-color .12s, box-shadow .12s;
}

.zeitwahl .zeitknopf:hover:not(:disabled) {
    border-color: #c7d2e4;
    background: #fbfcfe;
}

.zeitwahl .zeitknopf:focus-visible {
    outline: 3px solid rgba(32, 107, 196, .35);
    outline-offset: 2px;
}

.zeitwahl .zeitknopf .zeit-titel {
    font-weight: 600;
    line-height: 1.2;
}

.zeitwahl .zeitknopf .zeit-hinweis {
    font-size: .75rem;
    color: #6c7a91;
    line-height: 1.25;
}

/* Der gewählte Knopf. Farbe kommt aus der Datenbank (Spalte farbe). */
.zeitwahl .zeitknopf.gewaehlt {
    border-color: var(--knopf-farbe, var(--kgs-akzent));
    background: var(--knopf-flaeche, var(--kgs-akzent-weich));
    box-shadow: inset 0 0 0 1px var(--knopf-farbe, var(--kgs-akzent));
}

.zeitwahl .zeitknopf.gewaehlt .zeit-titel {
    color: var(--knopf-farbe, var(--kgs-akzent));
}

.zeitwahl .zeitknopf:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Kleiner Hinweis unter der Auswahl, dass gespeichert wurde. */
.speicher-hinweis {
    font-size: .8125rem;
    min-height: 1.25rem;
    transition: opacity .2s;
}

.speicher-hinweis.leer {
    opacity: 0;
}

/* ── Freiwillige Info an die Schule ──────────────────────────────────────────
   Steht unter den grossen Knöpfen und gehört sichtbar zu ihnen, ohne sich
   vorzudrängen: Wer nur krank melden will, ist mit einem Tipp fertig. Ohne
   JavaScript blendet der Server das Feld über hidden aus; display:none muss
   deshalb auch gegen Bootstrap durchkommen. */
.info-feld[hidden] {
    display: none;
}

.info-feld {
    border-inline-start: 3px solid var(--tblr-border-color);
    padding-inline-start: .75rem;
}

.info-feld textarea {
    resize: vertical;
}

/* ── Monatsraster: Essen und Anwesenheit ─────────────────────────────────────
   Zwanzig Spalten nebeneinander. Der Name muss beim Wegscrollen stehen bleiben,
   sonst weiss nach der zehnten Spalte niemand mehr, wessen Zeile er liest. */
.monatsraster th,
.monatsraster td {
    padding-inline: .35rem;
}

.monatsraster .haftend {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--tblr-bg-surface, #fff);
}

.monatsraster thead .haftend {
    z-index: 2;
}

/* ── Tagesliste im Schulbereich ──────────────────────────────────────────── */

/* Sortierbare Kopfzeile: die ganze Zelle ist anklickbar. */
th.sortierbar {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortierbar:hover {
    background: #f3f5f9;
}

th.sortierbar .sortier-pfeil {
    opacity: .25;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
}

th.sortierbar.aktiv .sortier-pfeil {
    opacity: 1;
    color: var(--kgs-akzent);
}

/* Zeile, die nach der Sperrzeit noch geändert wurde. */
/* Die ganze Zeile in der Farbe der Abholzeit. Auf tr UND td gesetzt, weil
   Bootstrap Zellenhintergründe eigenständig färbt und sonst gewinnt. */
.table tbody tr.zeile-farbig,
.table tbody tr.zeile-farbig > td {
    background-color: var(--zeilen-farbe);
}

.table-hover tbody tr.zeile-farbig:hover > td {
    filter: brightness(.95);
}

/* Nachgemeldet war früher ein gelber Hintergrund. Der wäre jetzt die einzige
   Zeilenfarbe, die eine andere überdeckt — deshalb ein Streifen an der Kante,
   der sich mit jeder Farbe verträgt. */
tr.nachgemeldet > td:first-child {
    box-shadow: inset .25rem 0 0 var(--tblr-orange, #f76707);
}

/* Schon draussen: tritt zurück, ohne zu verschwinden. Die Zeile steht ohnehin
   unten, sie soll den Blick nicht mehr auf sich ziehen. */
tr.ist-draussen > td {
    opacity: .55;
}

/* Kurzes Aufleuchten, wenn die Live-Aktualisierung eine Zeile ausgetauscht hat. */
@keyframes kgs-aufleuchten {
    from { background-color: #e7f5ec; }
    to   { background-color: transparent; }
}

tr.frisch > td {
    animation: kgs-aufleuchten 1.6s ease-out;
}

.live-anzeige {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    color: #6c7a91;
}

.live-punkt {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #2fb344;
}

.live-anzeige.pausiert .live-punkt {
    background: #c1c9d4;
}

.live-anzeige.fehler .live-punkt {
    background: #d63939;
}

/* ── Dauerangaben ────────────────────────────────────────────────────────── */

.wochenraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}

.wochentag-karte {
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    padding: .75rem;
    background: #fff;
}

.wochentag-karte > label {
    font-weight: 600;
    margin-bottom: .4rem;
    display: block;
}

/* Knöpfe, die es nur ohne JavaScript braucht. js-an setzt js-an.js, bevor der
   Rumpf gezeichnet wird – so blitzen sie nicht kurz auf. */
.js-an .ohne-js {
    display: none !important;
}

/* ── Kleinkram ───────────────────────────────────────────────────────────── */

.zahl-kachel .zahl {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.tabelle-fest {
    table-layout: fixed;
}

.abschnitt-titel {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c7a91;
    font-weight: 600;
}

/* Auf dem Handy sollen Knöpfe in Formularen die volle Breite bekommen. */
@media (max-width: 575.98px) {
    .btn-handy-voll {
        width: 100%;
    }
    .zeitwahl {
        grid-template-columns: 1fr 1fr;
    }
}
/* ── Druck ───────────────────────────────────────────────────────────────── */

@media print {
    body {
        background: #fff;
    }
    .sprachwahl {
        display: none;
    }
    .card {
        border: none;
        box-shadow: none;
    }
    .druckkopf {
        margin-bottom: 1rem;
    }
    table {
        font-size: 11pt;
    }
    tr.nachgemeldet > td {
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ── Handy: die eine Regel, an der Layouts sonst brechen ─────────────────── */

/*
 * Flex- und Grid-Kinder bekommen von sich aus min-width:auto. Ein langer Wert
 * darin – eine E-Mail-Adresse, ein Kindername – kann seine Spalte dann über die
 * Bildschirmbreite hinausdrücken, und die ganze Seite laesst sich seitlich
 * schieben. Auf einem 412 Punkt breiten Handy faellt das sofort auf.
 * Deshalb: Kinder duerfen schrumpfen, lange Werte brechen um.
 */
.kind-kopf > *,
.list-group-item > *,
.navbar-nav .nav-item,
.zeitwahl > .zeitknopf {
    min-width: 0;
}

.kind-kopf .flex-fill,
.list-group-item .min-w-0 {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* E-Mail-Adressen sind der haeufigste Ueberlaeufer. */
td a[href^="mailto:"],
.alert input[readonly] {
    overflow-wrap: anywhere;
}

/* Die Tagesspalte in der Elternuebersicht. Bootstrap kennt kein w-33. */
.spalte-tag {
    width: 7.5rem;
}

/* Letzte Sicherung: Die Seite selbst wird nie seitlich schiebbar. Breite
   Inhalte scrollen in ihrem eigenen Kasten (.table-responsive). */
html, body {
    overflow-x: hidden;
}

/* ── Sprachwahl ─────────────────────────────────────────────────────────── */

/* Natives <details>/<summary>: kein JavaScript nötig, funktioniert also auch
   dann, wenn auf dem Handy keins läuft. Bleibt beim Scrollen fest unten
   rechts stehen, ausserhalb des normalen Seitenflusses. */
.sprachwahl {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 1030;
}

.sprachwahl-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(24, 36, 51, .2);
    font-size: 1.5rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.sprachwahl-knopf::-webkit-details-marker {
    display: none;
}

.sprachwahl[open] .sprachwahl-knopf {
    box-shadow: 0 2px 14px rgba(24, 36, 51, .32);
}

.sprachwahl-liste {
    position: absolute;
    right: 0;
    bottom: 3.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

.sprachwahl-eintrag {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border-radius: 999px;
    padding: .4rem .9rem .4rem .5rem;
    box-shadow: 0 2px 8px rgba(24, 36, 51, .18);
    text-decoration: none;
    color: #1d273b;
    font-size: 1.15rem;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(.4rem) scale(.92);
    animation: sprachwahl-faecher .16s ease-out forwards;
}

.sprachwahl-eintrag .sprachwahl-name {
    font-size: .8125rem;
    font-weight: 600;
}

.sprachwahl-eintrag.aktiv {
    outline: 2px solid var(--kgs-akzent);
    outline-offset: -2px;
}

.sprachwahl-eintrag:nth-child(1) { animation-delay: .02s; }
.sprachwahl-eintrag:nth-child(2) { animation-delay: .05s; }
.sprachwahl-eintrag:nth-child(3) { animation-delay: .08s; }
.sprachwahl-eintrag:nth-child(4) { animation-delay: .11s; }
.sprachwahl-eintrag:nth-child(5) { animation-delay: .14s; }
.sprachwahl-eintrag:nth-child(6) { animation-delay: .17s; }

@keyframes sprachwahl-faecher {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .sprachwahl-eintrag {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ── Druck ─
/* ── Dienstplan: Reihenfolge des Personals ziehen ────────────────────────── */

/* Das Gegenstück zu .ohne-js: Ein Griff zum Ziehen ist ohne JavaScript ein
   Knopf, der nichts tut. Dann steht die Liste in ihrer gespeicherten
   Reihenfolge, und das ist ehrlicher als ein toter Anfasser. */
html:not(.js-an) .nur-mit-js {
    display: none !important;
}

.griff {
    cursor: grab;
    /* Ohne das scrollt das Handy die Seite, statt die Zeile zu ziehen. */
    touch-action: none;
}

.griff:active {
    cursor: grabbing;
}

tr.wird-gezogen > td {
    opacity: .45;
    background-color: #f4f6fa;
}

/* Die Lücke, in die die Zeile fällt, wenn man jetzt loslässt. */
tr.ablegen-hier > td {
    box-shadow: inset 0 3px 0 -1px var(--kgs-akzent, #2f6fb3);
}

tr.ablegen-hier-unten > td {
    box-shadow: inset 0 -3px 0 -1px var(--kgs-akzent, #2f6fb3);
}

/* Kurze Rückmeldung neben der Überschrift, wenn die Reihenfolge steht. */
.reihenfolge-hinweis {
    font-size: .8125rem;
    color: #2fb344;
}

.reihenfolge-hinweis.fehler {
    color: #d63939;
}

/* ── Fotogalerie: das Betrachterfenster ─────────────────────────────────────
 *
 * Kein fertiges Bauteil von Tabler, weil ein Modal hier das Falsche wäre: Das
 * Bild soll den Bildschirm füllen, nicht in einem Kasten mit Kopfzeile sitzen.
 * Ohne JavaScript bleibt das Fenster verborgen (`hidden`), und die Kacheln
 * sind gewöhnliche Links auf das grosse Bild.
 */
.galerie-betrachter {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(12, 14, 18, .97);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem .5rem 4.5rem;
    /* Am Handy soll das Wischen im Fenster nicht die Seite dahinter scrollen. */
    touch-action: pan-y;
}

.galerie-betrachter img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: .25rem;
}

.galerie-knopf {
    position: absolute;
    border: 0;
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    cursor: pointer;
}

.galerie-knopf:hover,
.galerie-knopf:focus-visible {
    background: rgba(255, 255, 255, .3);
}

.galerie-zu  { top: .75rem; inset-inline-end: .75rem; }

/* Logische Ränder statt left/right: Bei arabischer Anzeige dreht sich die
 * Anordnung damit von selbst mit der Leserichtung. */
.galerie-vor  { inset-inline-start: .5rem; }
.galerie-nach { inset-inline-end: .5rem; }
.galerie-vor, .galerie-nach { top: 50%; transform: translateY(-50%); }

/* Derselbe Pfeil, einmal gespiegelt – ein Symbol weniger im Vorrat. */
.galerie-nach svg { transform: scaleX(-1); }
[dir="rtl"] .galerie-vor svg  { transform: scaleX(-1); }
[dir="rtl"] .galerie-nach svg { transform: none; }

.galerie-fuss {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    color: #fff;
    font-size: .875rem;
    background: rgba(0, 0, 0, .35);
}

/* Die Kacheln im Raster: ein leichter Hinweis, dass sie anklickbar sind. */
.galerie-bild img {
    transition: opacity .15s ease-in-out;
    background: #eef1f5;
}

.galerie-bild:hover img,
.galerie-bild:focus-visible img {
    opacity: .85;
}

/* Das Suchfeld über der Kontenliste.
 *
 * Am Schreibtisch steht es rechts neben der Überschrift, am Handy darunter
 * über die ganze Breite: Daneben blieben sonst vier Zentimeter, in die kein
 * Nachname passt. */
.konten-suchfeld {
    max-width: 20rem;
}

@media (max-width: 767.98px) {
    /* Tablers Kartenkopf steht auf flex-wrap: nowrap — ohne das Umbrechen
       bleiben dem Feld neben Überschrift und Hinweistext 137 von 394 px,
       und darin steht kein Nachname. */
    .konten-suchfeld-kopf {
        flex-wrap: wrap;
    }

    .konten-suchfeld {
        flex: 0 0 100%;
        max-width: none;
        margin-top: .5rem;
        margin-left: 0;
    }
}

/* ── Der Schreibbereich für Elternbriefe ────────────────────────────────────
 *
 * Der Text soll hier so aussehen wie später im Brief und im Portal der Eltern.
 * Deshalb steht die Fläche auf Papierbreite und nicht über die ganze Karte:
 * Eine Zeile mit hundertzwanzig Zeichen liest sich schlecht und sieht im
 * fertigen PDF dann ganz anders aus. */
.editor-flaeche {
    min-height: 22rem;
    max-width: 46rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--tblr-border-color, #dadfe5);
    border-radius: 0 0 .25rem .25rem;
    border-top: 0;
    background: #fff;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.editor-flaeche:focus {
    outline: 2px solid var(--kgs-akzent, #2f6fb3);
    outline-offset: -2px;
}

/* Abstände wie im fertigen Brief, nicht wie im Rest des Backends. */
.editor-flaeche p        { margin: 0 0 .85rem; }
.editor-flaeche h2       { font-size: 1.35rem; margin: 1.2rem 0 .5rem; }
.editor-flaeche h3       { font-size: 1.15rem; margin: 1rem 0 .4rem; }
.editor-flaeche h4       { font-size: 1rem;    margin: .9rem 0 .3rem; }
.editor-flaeche ul,
.editor-flaeche ol       { margin: 0 0 .85rem 1.25rem; }
.editor-flaeche li       { margin-bottom: .25rem; }
.editor-flaeche blockquote {
    margin: 0 0 .85rem;
    padding-left: 1rem;
    border-left: 3px solid #dadfe5;
    color: #556;
}
.editor-flaeche table    { width: 100%; margin-bottom: .85rem; border-collapse: collapse; }
.editor-flaeche th,
.editor-flaeche td       { border: 1px solid #dadfe5; padding: .35rem .5rem; text-align: left; }
.editor-flaeche th       { background: #f4f6fa; }
.editor-flaeche hr       { margin: 1.2rem 0; border: 0; border-top: 1px solid #dadfe5; }

.editor-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .5rem;
    max-width: 46rem;
    border: 1px solid var(--tblr-border-color, #dadfe5);
    border-radius: .25rem .25rem 0 0;
    background: #f4f6fa;
}

.editor-leiste .btn.active {
    background: var(--kgs-akzent, #2f6fb3);
    border-color: var(--kgs-akzent, #2f6fb3);
    color: #fff;
}

/* Dieselben Abstände für die Anzeige eines fertigen Dokuments — im Backend
   wie im Elternbereich, damit der Brief überall gleich aussieht. */
.brief p          { margin: 0 0 .85rem; }
.brief h2         { font-size: 1.35rem; margin: 1.2rem 0 .5rem; }
.brief h3         { font-size: 1.15rem; margin: 1rem 0 .4rem; }
.brief h4         { font-size: 1rem;    margin: .9rem 0 .3rem; }
.brief ul, .brief ol { margin: 0 0 .85rem 1.25rem; }
.brief li         { margin-bottom: .25rem; }
.brief blockquote {
    margin: 0 0 .85rem;
    padding-left: 1rem;
    border-left: 3px solid #dadfe5;
    color: #556;
}
.brief table      { width: 100%; margin-bottom: .85rem; border-collapse: collapse; }
.brief th, .brief td { border: 1px solid #dadfe5; padding: .35rem .5rem; text-align: left; }
.brief th         { background: #f4f6fa; }
.brief hr         { margin: 1.2rem 0; border: 0; border-top: 1px solid #dadfe5; }

/* Tabellen in einem Brief können am Handy breiter sein als der Bildschirm.
   Sie bekommen deshalb ihren eigenen Schiebebereich, statt die ganze Seite
   nach rechts zu ziehen. */
@media (max-width: 575.98px) {
    .brief table, .editor-flaeche table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Ein Pfeil, der nach vorn zeigt – gespiegelt aus dem Zurück-Pfeil, damit der
   Vorrat an Symbolen klein bleibt. Bei arabischer Anzeige dreht er mit. */
.pfeil-vor { transform: scaleX(-1); }
[dir="rtl"] .pfeil-vor { transform: none; }