/* Was Bootstrap nicht kennt.

   Das Grundgeruest der Seiten - Raster, Knoepfe, Tabellen, Formulare, Reiter, Navigation,
   Meldungen und Kennzeichen - kommt aus Bootstrap (als WebJar eingebunden, siehe
   fragment/head.jspf). Hier steht nur, was die Anwendung darueber hinaus braucht: das
   Kalendergitter mit seinen Spuren, der kleine Kalender, die Farben der Betreuer, die Balken der
   Auswertung und die Muster, die an mehreren Stellen wiederkehren.

   Farben stehen als Bootstrap-Variablen (--bs-...) und nicht als feste Werte: dieselbe Datei
   traegt damit ein helles wie ein dunkles Thema, und ein Kennzeichen sieht aus wie ein Kennzeichen
   von Bootstrap daneben. Die Farben der Betreuer sind die Ausnahme - die stehen am Elternteil und
   kommen als style-Attribut aus der View; hier steht nur, welche Form sie bekommen. */

/* Drei Themen
   -------------------------------------------------------------------------------------------
   Welches gilt, sagt das Attribut data-pw-theme am <html> (web/ThemeChoice, gemerkt in einem
   Cookie). Sie unterscheiden sich in zwei Fragen: welchen Grund die Seite hat, und ob der Inhalt
   frei darauf liegt oder auf einem Blatt steht.

     gradient  Verlauf als Grund, Leisten und Listen liegen einzeln darauf (Standard)
     paper     derselbe Verlauf, aber alles steht auf einem zusammenhaengenden Blatt
     dark      dunkler Verlauf in denselben Farbwinkeln, Inhalt wieder frei darauf

   Der Verlauf faerbt alles, was darauf liegt: Bootstraps Neutraltoene sind graue, und auf Cyan
   wirkt ein Grau schmutzig - eine weisse Tabelle auf farbigem Grund ist eine fremde Insel.
   Deshalb bekommt die ganze Skala denselben Blauton wie der Verlauf (Farbwinkel um 195 Grad),
   nur so weit entsaettigt, dass sie neutral bleibt. Es sind dieselben Variablen, die Bootstrap
   selbst benutzt - damit faerben sich Navigationsleiste, Felder, Reiter, Raender und Schrift
   mit, ohne dass an einer einzigen Komponente etwas nachgezogen werden muesste.

   Was Bootstrap fest in einer Klasse traegt (Knopffarben, Schatten), liest hier eine eigene
   --pw-Variable: nur so nimmt ein Thema sie mit, ohne die Regel zu wiederholen. */
:root {
    --pw-background-from: #aeeefc;
    --pw-background-to: #63c9e0;

    /* Flaechen, von der hellsten zur satten: das Blatt, auf dem gelesen wird; die Bahn darunter
       (ueberfahrene Zeile, Balkengrund); die Leisten und Boxen, die sich abheben sollen. */
    --bs-body-bg: #f3fafd;
    --bs-body-bg-rgb: 243, 250, 253;
    --bs-secondary-bg: #dbeaf1;
    --bs-secondary-bg-rgb: 219, 234, 241;
    --bs-tertiary-bg: #e9f4f9;
    --bs-tertiary-bg-rgb: 233, 244, 249;

    /* Schrift: das dunkle Ende derselben Skala. Ein neutrales Grau daneben liest sich auf blauem
       Grund kuehler als der Rest der Seite. */
    --bs-body-color: #16323d;
    --bs-body-color-rgb: 22, 50, 61;
    --bs-emphasis-color: #0b222b;
    --bs-secondary-color: rgba(22, 50, 61, 0.68);
    --bs-tertiary-color: rgba(22, 50, 61, 0.45);
    --bs-heading-color: #122c36;

    --bs-border-color: #bfd9e4;
    --bs-border-color-translucent: rgba(22, 50, 61, 0.15);

    /* Die tragende Farbe ist ein Petrol aus dem Verlauf und nicht Bootstraps Blau: dessen
       Violettstich steht quer zum Cyan der Seite. */
    --pw-accent: #0b7ea3;
    --pw-accent-strong: #096b8b;
    --pw-accent-deep: #075a76;
    --pw-accent-faded: #6ba7bb;

    --bs-primary: var(--pw-accent);
    --bs-primary-rgb: 11, 126, 163;
    --bs-primary-bg-subtle: #cfeaf4;
    --bs-primary-border-subtle: #9ed4e6;
    --bs-primary-text-emphasis: #075a76;

    --bs-secondary: #557a87;

    --bs-link-color: var(--pw-accent);
    --bs-link-color-rgb: 11, 126, 163;
    --bs-link-hover-color: var(--pw-accent-deep);
    --bs-link-hover-color-rgb: 7, 90, 118;

    --bs-focus-ring-color: rgba(11, 126, 163, 0.25);
    --pw-focus-border: #7cc2da;

    /* Der zweitrangige Knopf: hell und nicht gefuellt-dunkel (siehe .btn-secondary). */
    --pw-btn-soft-color: #24505f;
    --pw-btn-soft-bg: #dfeef4;
    --pw-btn-soft-border: #a9cddb;
    --pw-btn-soft-hover-color: #16323d;
    --pw-btn-soft-hover-bg: #cde5ee;
    --pw-btn-soft-hover-border: #8dbdcf;
    --pw-btn-soft-active-bg: #bcdae6;
    --pw-btn-soft-disabled-color: #7ba0ae;
    --pw-btn-soft-disabled-bg: #eaf4f8;
    --pw-btn-soft-disabled-border: #cadfe8;

    --pw-danger: #cf3c4f;
    --pw-danger-strong: #b63344;
    --pw-danger-deep: #9e2c3b;

    /* Der Schatten ist aus dem dunklen Ende der Skala gemischt und nicht schwarz - ein neutraler
       Schatten legt einen grauen Saum auf das Blau. */
    --pw-shadow: 0 1px 3px rgba(11, 60, 76, 0.10), 0 4px 12px rgba(11, 60, 76, 0.06);
    --pw-shadow-strong: 0 1rem 2.5rem rgba(11, 60, 76, 0.18);
    /* Kontur an einer Flaeche, deren Farbe aus den Daten kommt (Balken der Auswertung). */
    --pw-data-edge: rgba(22, 50, 61, 0.22);

    /* Der aktive Reiter traegt die Flaeche, auf der er steht - siehe .nav-tabs weiter unten. */
    --pw-tab-active-bg: var(--bs-body-bg);

    /* Ein Ferientag im Kalender: eine warme Toenung, die sich vom Blau der Seite abhebt, ohne mit
       ihm zu streiten. Bewusst kein Ton der tragenden Farbe - die gehoert dem heutigen Tag und der
       Markierung mit der Maus, und die muessen staerker bleiben als eine Angabe im Hintergrund. */
    --pw-calendar-holiday-bg: #fdf4e3;
    --pw-calendar-holiday-bg-outside: #f3eade;
    --pw-calendar-holiday-color: #8a6d3b;
}

/* Im Verlauf-Thema hebt sich der offene Reiter dagegen farbig ab: er steht dort nicht auf einer
   Flaeche, sondern auf dem Verlauf, und in dessen Blau sagt ein kraeftigerer Ton deutlicher,
   welche Sicht offen ist. */
:root[data-pw-theme="gradient"] {
    --pw-tab-active-bg: #7ecef1;
}

/* Dunkel: dieselben Farbwinkel, nur von der anderen Seite. Bootstrap bringt zu
   data-bs-theme="dark" seine eigenen dunklen Werte mit - auch fuer die Kennzeichen in Gruen, Rot
   und Gelb; hier steht nur, was davon den Blauton der Seite tragen soll. */
:root[data-pw-theme="dark"] {
    --pw-background-from: #123a4b;
    --pw-background-to: #061a23;

    --bs-body-bg: #12303c;
    --bs-body-bg-rgb: 18, 48, 60;
    --bs-secondary-bg: #1d4454;
    --bs-secondary-bg-rgb: 29, 68, 84;
    --bs-tertiary-bg: #173a49;
    --bs-tertiary-bg-rgb: 23, 58, 73;

    --bs-body-color: #dcedf4;
    --bs-body-color-rgb: 220, 237, 244;
    --bs-emphasis-color: #f2fafd;
    --bs-secondary-color: rgba(220, 237, 244, 0.70);
    --bs-tertiary-color: rgba(220, 237, 244, 0.45);
    --bs-heading-color: #eaf6fa;

    --bs-border-color: #2d5768;
    --bs-border-color-translucent: rgba(220, 237, 244, 0.18);

    /* Auf dunklem Grund traegt das Petrol nur heller. */
    --pw-accent: #3fb6d8;
    --pw-accent-strong: #5cc6e3;
    --pw-accent-deep: #7ad4ec;
    --pw-accent-faded: #2b6d83;

    --bs-primary-rgb: 63, 182, 216;
    --bs-primary-bg-subtle: #10394b;
    --bs-primary-border-subtle: #2b6d83;
    --bs-primary-text-emphasis: #8fdcef;

    --bs-secondary: #7fa3b1;

    --bs-link-color-rgb: 63, 182, 216;
    --bs-link-hover-color-rgb: 122, 212, 236;

    --bs-focus-ring-color: rgba(63, 182, 216, 0.30);
    --pw-focus-border: #3fb6d8;

    --pw-btn-soft-color: #cfe6ef;
    --pw-btn-soft-bg: #1d4454;
    --pw-btn-soft-border: #386478;
    --pw-btn-soft-hover-color: #f2fafd;
    --pw-btn-soft-hover-bg: #275466;
    --pw-btn-soft-hover-border: #47788c;
    --pw-btn-soft-active-bg: #2f6478;
    --pw-btn-soft-disabled-color: #6b8d9b;
    --pw-btn-soft-disabled-bg: #173a49;
    --pw-btn-soft-disabled-border: #2d5768;

    --pw-danger: #d9515f;
    --pw-danger-strong: #c24450;
    --pw-danger-deep: #a83a46;

    /* Auf dunklem Grund traegt kein Schatten: dort hebt sich eine Flaeche ab, indem sie heller
       ist als ihr Grund - ein schwarzer Schatten darunter waere nur ein dunkler Saum. */
    --pw-shadow: none;
    --pw-shadow-strong: none;
    --pw-data-edge: rgba(220, 237, 244, 0.25);

    /* Dunkel traegt derselbe warme Stich, nur von der anderen Seite: aufgehellt statt getoent. */
    --pw-calendar-holiday-bg: #2c3a3c;
    --pw-calendar-holiday-bg-outside: #253032;
    --pw-calendar-holiday-color: #d8c49a;
}

/* Die Seite liegt auf einem Verlauf, der von links oben nach rechts unten laeuft. Er steht fest
   (background-attachment), damit er ueber die ganze Seite einer bleibt und beim Scrollen nicht
   von vorn beginnt; die Mindesthoehe sorgt dafuer, dass auch eine kurze Seite ihn ganz zeigt. */
body {
    min-height: 100vh;
    background: linear-gradient(to bottom right, var(--pw-background-from), var(--pw-background-to));
    background-attachment: fixed;
}

/* Im Blatt-Thema steht der ganze Inhalt auf einer zusammenhaengenden Flaeche, und der Verlauf
   rahmt sie. Der Text steht dann ueberall auf demselben Grund: die Lesbarkeit aendert sich nicht
   von oben nach unten und nicht beim Scrollen. Was frei auf dem Verlauf eine eigene Kante
   braucht, gibt sie hier wieder ab - auf dem Blatt waere sie ein Kasten im Kasten. */
:root[data-pw-theme="paper"] body > .container {
    background-color: var(--bs-body-bg);
    border-radius: 1rem;
    box-shadow: var(--pw-shadow-strong);
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
}

:root[data-pw-theme="paper"] .table {
    --bs-table-bg: transparent;
}

:root[data-pw-theme="paper"] .table-responsive {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

:root[data-pw-theme="paper"] .main-nav {
    background-color: var(--bs-tertiary-bg) !important;
}

/* Eine Tabelle ist bei Bootstrap durchsichtig. Ueber dem Verlauf hiesse das: die Zeilen stehen auf
   einem Grund, der von oben nach unten die Farbe wechselt - und beim Scrollen wandert er auch noch
   unter ihnen durch. Die Liste bekommt deshalb ihre eigene ruhige Flaeche. */
.table {
    --bs-table-bg: var(--bs-body-bg);
    --bs-table-hover-bg: var(--bs-secondary-bg);
}

/* Die Seite hat keinen Untergrund, auf dem alles steht - Leisten, Listen und Boxen liegen einzeln
   auf dem Verlauf. Damit eine Flaeche dort aufliegt und nicht in ihm schwimmt, bekommt sie
   dieselbe Kante: eine Rundung, einen feinen Rand und einen flachen Schatten. */
.pw-surface,
.table-responsive,
.main-nav,
.filter-bar,
.detail-box,
.report-text,
.modal-card {
    box-shadow: var(--pw-shadow);
}

/* Die Liste ist ein Block auf dem Verlauf: ihr Umschlag traegt Flaeche und Kante, damit die
   Zeilen nicht an den Kanten abgeschnitten wirken. */
.table-responsive {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    /* Die Rundung muss auch die erste und letzte Zeile beschneiden. */
    overflow: hidden;
}

/* In einer Box steht die Tabelle nicht fuer sich - dort traegt schon die Box die Kante. */
.detail-box .table-responsive {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* Bootstrap zieht unter die letzte Zeile noch eine Linie; am Rand des Blocks liegt sie auf der
   Kante und verdoppelt sie. */
.table > :last-child > tr:last-child > * {
    border-bottom-width: 0;
}

/* Die Knopffarben stehen bei Bootstrap fest in der Klasse und nicht in der Skala oben. Damit ein
   Knopf nicht als graues Stueck neben getoenten Flaechen steht, bekommt jede Art ihre Werte aus
   derselben Skala. */
.btn-primary {
    --bs-btn-bg: var(--pw-accent);
    --bs-btn-border-color: var(--pw-accent);
    --bs-btn-hover-bg: var(--pw-accent-strong);
    --bs-btn-hover-border-color: var(--pw-accent-strong);
    --bs-btn-active-bg: var(--pw-accent-deep);
    --bs-btn-active-border-color: var(--pw-accent-deep);
    --bs-btn-disabled-bg: var(--pw-accent-faded);
    --bs-btn-disabled-border-color: var(--pw-accent-faded);
}

/* Der zweitrangige Knopf ist hell und nicht gefuellt-dunkel: auf einer Detailseite stehen vier
   davon nebeneinander, und als dunkle Bloecke zoegen sie mehr Blick auf sich als das, worum es
   geht. So bleibt der gefuellte Knopf die eine Aktion, die gemeint ist. */
.btn-secondary {
    --bs-btn-color: var(--pw-btn-soft-color);
    --bs-btn-bg: var(--pw-btn-soft-bg);
    --bs-btn-border-color: var(--pw-btn-soft-border);
    --bs-btn-hover-color: var(--pw-btn-soft-hover-color);
    --bs-btn-hover-bg: var(--pw-btn-soft-hover-bg);
    --bs-btn-hover-border-color: var(--pw-btn-soft-hover-border);
    --bs-btn-active-color: var(--pw-btn-soft-hover-color);
    --bs-btn-active-bg: var(--pw-btn-soft-active-bg);
    --bs-btn-active-border-color: var(--pw-btn-soft-hover-border);
    --bs-btn-disabled-color: var(--pw-btn-soft-disabled-color);
    --bs-btn-disabled-bg: var(--pw-btn-soft-disabled-bg);
    --bs-btn-disabled-border-color: var(--pw-btn-soft-disabled-border);
}

/* Warnen soll das Rot weiter, nur eine Spur weniger grell als Bootstraps Signalrot - daneben
   liegt eine Seite in gedeckten Blautoenen. */
.btn-danger {
    --bs-btn-bg: var(--pw-danger);
    --bs-btn-border-color: var(--pw-danger);
    --bs-btn-hover-bg: var(--pw-danger-strong);
    --bs-btn-hover-border-color: var(--pw-danger-strong);
    --bs-btn-active-bg: var(--pw-danger-deep);
    --bs-btn-active-border-color: var(--pw-danger-deep);
}

/* Ein paar Stellen tragen Bootstraps Blau fest in der Klasse und nicht in der Skala: der aktive
   Reiter der Klaerung, das angehakte Kaestchen, der Rahmen eines Feldes im Fokus. Ohne sie
   staende mitten in der Petrol-Seite ein violettstichiges Blau. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

/* Bootstrap setzt die Farben der Reiter an .nav-tabs selbst und nicht in der Skala oben - am
   :root gesetzt bliebe der Wert wirkungslos. Der untere Rand des offenen Reiters gehoert dabei
   mitgezogen: er wird in der Flaeche gezeichnet, damit der Reiter in sie uebergeht, und stuende
   sonst als heller Strich unter einem farbigen Reiter. */
.nav-tabs {
    --bs-nav-tabs-link-active-bg: var(--pw-tab-active-bg);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--pw-tab-active-bg);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
.nav-link:focus-visible {
    border-color: var(--pw-focus-border);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:focus {
    border-color: var(--pw-focus-border);
}

.btn-outline-primary {
    --bs-btn-color: var(--pw-accent);
    --bs-btn-border-color: var(--pw-accent);
    --bs-btn-hover-bg: var(--pw-accent);
    --bs-btn-hover-border-color: var(--pw-accent);
    --bs-btn-active-bg: var(--pw-accent-deep);
    --bs-btn-active-border-color: var(--pw-accent-deep);
    --bs-btn-disabled-color: var(--pw-accent);
    --bs-btn-disabled-border-color: var(--pw-accent);
}

.btn-outline-secondary {
    --bs-btn-color: var(--pw-btn-soft-color);
    --bs-btn-border-color: var(--pw-btn-soft-border);
    --bs-btn-hover-color: var(--pw-btn-soft-hover-color);
    --bs-btn-hover-bg: var(--pw-btn-soft-hover-bg);
    --bs-btn-hover-border-color: var(--pw-btn-soft-hover-border);
    --bs-btn-active-color: var(--pw-btn-soft-hover-color);
    --bs-btn-active-bg: var(--pw-btn-soft-active-bg);
    --bs-btn-active-border-color: var(--pw-btn-soft-hover-border);
}

/* Links stehen in dieser Oberflaeche ueberall - in jeder Tabellenzeile, an jedem Eintrag des
   Kalenders, an jedem Balken des kleinen Kalenders. Durchweg unterstrichen waere das unruhig;
   beim Ueberfahren sagt der Strich dann, dass es einer ist. Bootstrap unterstreicht seit 5.3
   fest in seinem Reboot - deshalb hier als Regel und nicht als Variable. */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Die Seite beginnt nicht an der Oberkante des Fensters und endet nicht an ihrer letzten Zeile. */
body > .container {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.version {
    margin-top: 2rem;
    color: var(--bs-secondary-color);
    font-size: 80%;
}

/* Kopfzeile, Abschnitte, Wege zurueck
   ------------------------------------------------------------------------------------------- */

.header {
    margin-top: 1rem;
}

/* Der Seitentitel ist die groesste Ueberschrift; die Abschnitte darunter stehen eine Stufe
   kleiner. Bootstraps h2 waere sonst so gross wie er - und der Titel der Seite muss der Titel
   der Seite bleiben. */
h2 {
    font-size: 1.5rem;
}

.logout-form {
    display: inline;
}

/* Der Weg zurueck steht ueber der Seite - ein Link und keine Kette von Stationen, deshalb auch
   kein .breadcrumb von Bootstrap. */
.back-link {
    margin: 0.5rem 0 0;
    font-size: 90%;
}

/* Ueberschrift eines Abschnitts mit dem Weg daneben, der an ihm haengt (etwa "Neue Familie"). */
.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.section-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.section-header a {
    font-size: 90%;
}

/* Monatsueberschrift der Betreuungszeitenliste - sie gliedert, ohne so schwer zu wiegen wie eine
   Seitenueberschrift. */
.month-heading {
    margin: 1.6rem 0 0;
    padding-bottom: 0.2rem;
    font-size: 1.05rem;
    font-weight: normal;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Weg zu den vergangenen Betreuungszeiten und zurueck - sie stehen nicht unter den kommenden,
   sondern an deren Stelle. */
.archive-toggle {
    margin: 0.5rem 0 0;
    font-size: 90%;
}

/* Navigation
   -------------------------------------------------------------------------------------------
   Bootstraps Navigationsleiste, aber ohne dessen Skript: aufgeklappt wird ueber eine Checkbox
   (der Hamburger ist ihr Label), die Auswahl von Familie und Kind ist ein <details>. Beides
   braucht kein JavaScript - die Oberflaeche kommt durchweg ohne aus. */

/* Umschalt-Checkbox visuell versteckt, aber fokussierbar. */
.nav-toggle-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Ab der Breite md zeigt Bootstrap die Leiste ohnehin; darunter haengt sie an der Checkbox. Das
   !important schlaegt das display:none, das .collapse der zusammengeklappten Leiste gibt. */
.nav-toggle-checkbox:checked ~ .main-nav > .container-fluid > .nav-collapse {
    display: block !important;
}

/* Der Hamburger ist ein Label und kein Knopf - er tut nichts, er schaltet die Checkbox. */
.nav-toggle-label {
    cursor: pointer;
}

.nav-toggle-checkbox:focus-visible ~ .main-nav .nav-toggle-label {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Ausklappbarer Menuepunkt (Auswahl von Familie/Kind): das Aussehen ist Bootstraps Dropdown, das
   Auf- und Zuklappen macht <details> von sich aus. */
.nav-dropdown > details > summary {
    cursor: pointer;
    list-style: none;
}

.nav-dropdown > details > summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown > details > summary::after {
    content: " \25BE";
}

.nav-dropdown > details[open] > summary::after {
    content: " \25B4";
}

/* .dropdown-menu ist bei Bootstrap unsichtbar, bis dessen Skript .show setzt - hier sagt das
   offene <details>, dass es zu sehen ist. */
.nav-dropdown > details[open] > .dropdown-menu {
    display: block;
    position: absolute;
}

/* Kindauswahl: Familie als Gruppenkopf, ihre Kinder eingerueckt darunter. */
.nav-dropdown-menu .nav-group {
    font-weight: bold;
}

.nav-dropdown-menu .nav-group-item {
    padding-left: 2rem;
}

.nav-dropdown-menu .nav-hint {
    color: var(--bs-secondary-color);
}

/* Menuepunkt ohne Ziel (Betreuungszeiten ohne gewaehlte Familie). */
.nav-disabled {
    cursor: default;
}

/* Im eingeklappten Menue steht die Auswahl statisch untereinander - ueber der Seite schwebend
   deckte sie zu, was darunter steht. */
@media (max-width: 767.98px) {
    .nav-dropdown > details[open] > .dropdown-menu {
        position: static;
        border: none;
        box-shadow: none;
        padding-left: 1rem;
    }
}

/* Meldungen
   ------------------------------------------------------------------------------------------- */

/* Meldung mit einer Aktion daneben - etwa das Zuruecknehmen direkt nach dem Zusammenfuehren.
   Der Knopf steht in derselben Zeile wie der Text: er gehoert zur Meldung und nicht darunter.
   In einem schmalen Fenster rutscht er in die naechste Zeile, statt den Text zu quetschen. */
.info-action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.info-action form {
    display: inline;
}

/* Dialog ohne Skript
   -------------------------------------------------------------------------------------------
   Bootstraps Modal braucht JavaScript. Dieser haengt an :target, also am Anker in der Adresse -
   ohne Skript zu oeffnen und zu schliessen (Link auf '#'). Die Karte darin ist eine Bootstrap-Karte
   und sieht deshalb aus wie ein Dialog von dort. */

.modal-target {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1055;
    padding: 2rem 1rem;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-target:target {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.modal-card {
    width: 100%;
    max-width: 40rem;
    padding: 1.2rem 1.5rem 1.5rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modal-head h2 {
    margin: 0;
    font-size: 1.1rem;
}

.modal-close {
    color: var(--bs-secondary-color);
    font-size: 1.4rem;
    line-height: 1;
}

/* Reiter
   ------------------------------------------------------------------------------------------- */

.tabs {
    margin: 1.5rem 0 0.5rem;
}

/* Zweite Reiterreihe innerhalb der Klaerungssicht: sie steht unter der ersten und ist ihr
   untergeordnet - als Pillen, damit sie nicht wie eine zweite gleichrangige Reihe liest. */
.tabs.sub-tabs {
    margin-top: 1rem;
    font-size: 95%;
}

/* Anzahl am Reiter: sie sagt, wo etwas ansteht, ohne dass der Reiter geoeffnet werden muss.
   Zurueckhaltend - die Zahl ordnet ein und alarmiert nicht; ist dort nichts zu tun, bleibt sie
   ganz weg (siehe fragment/care-time-review-tabs.jspf). */
.tabs .tab-count {
    margin-left: 0.3rem;
    border-radius: 999px;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-weight: normal;
}

.tabs .nav-link.active .tab-count {
    background-color: rgba(255, 255, 255, 0.25);
    color: inherit;
}

.tabs.nav-pills .nav-link:not(.active) {
    color: var(--bs-secondary-color);
}

/* Umschalter und Filterleiste
   -------------------------------------------------------------------------------------------
   Der Umschalter zwischen der ganzen Familie und einem Kind steht dicht unter den Reitern und
   ueber der Filterleiste: was gezeigt wird, ist eine andere Frage als wovon. Deshalb ohne den
   Kasten der Filterleiste, sonst staenden zwei gleich schwere Leisten uebereinander. */

.scope-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0;
    font-size: 90%;
}

.scope-bar label,
.filter-field label,
.filter-group legend {
    margin: 0;
    color: var(--bs-secondary-color);
}

/* Wohin ein Entwurf gehoert: die Wahl der Planungsvariante auf seiner Detailseite. Sie steht
   unter den Knoepfen und sieht aus wie die Leiste ueber den Sichten - dieselbe Frage, nur fuer
   eine einzelne Zeit. */
.variant-move {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 90%;
}

.variant-move label {
    margin: 0;
    color: var(--bs-secondary-color);
}

.variant-move .form-select {
    width: auto;
}

/* Filterleiste der Betreuungszeiten: mehrere Gruppen in einer Reihe, auf schmalen Viewports
   untereinander. Sie schickt ihre Auswahl per GET - der Filter gehoert in die URL. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    /* mittig, damit die Haekchen auf der Hoehe der Auswahlfelder sitzen und nicht auf deren
       Unterkante */
    align-items: center;
    gap: 0.8rem 1.5rem;
    margin: 1.5rem 0;
    padding: 0.8rem 1rem;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* Die Felder stehen in der Leiste nebeneinander und nehmen nur, was sie brauchen: ueber die
   volle Breite - so kommen .form-select und .form-control von Bootstrap - schoebe jedes Feld
   alles dahinter in die naechste Zeile. */
.scope-bar .form-select,
.scope-bar .form-control,
.filter-bar .form-select,
.filter-bar .form-control {
    width: auto;
}

/* Ein einfaches Feld der Leiste: Beschriftung und Auswahl nebeneinander. */
.filter-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 90%;
}

/* Gruppe von Haekchen im erweiterten Filter (fieldset). */
.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.8rem;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 90%;
}

.filter-group legend {
    float: none;
    width: auto;
    padding: 0;
    margin-right: 0.4rem;
    font-size: 100%;
}

.filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.filter-bar .filter-actions {
    margin-left: auto;
}

/* Die Haekchen der Leiste stehen neben Auswahlfeldern - gleiche Schriftgroesse, gleiche Zeile. */
.filter-bar .checkbox-label {
    font-size: 90%;
}

/* Was die Leiste nicht abbilden kann, sagt sie - ueber die ganze Breite unter den Feldern. */
.filter-note {
    flex-basis: 100%;
    margin: 0;
    color: var(--bs-warning-text-emphasis);
    font-size: 85%;
}

/* Erweiterter Filter im Dialog: die Merkmale untereinander. */
.filter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

/* Kennzeichen
   -------------------------------------------------------------------------------------------
   Zustand einer Betreuungszeit, Befund einer Zeile in Import und Export, Merkmale daneben. Sie
   stehen als Bootstrap-Schildchen (.badge) und tragen hier nur ihre Farbe - je Bedeutung dieselbe,
   damit ein Gruen ueberall dasselbe heisst. */

.status {
    font-weight: 600;
}

/* Entwurf: bewusst zurueckhaltend, er ist noch kein Teil des Plans. */
.status-draft,
.status-export-unchanged,
.status-import-no_match,
.status-import-already_imported,
.status-import-duplicate {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

/* Geplant, und was nachgezogen wird: im Import die Zeit, die dem Termin folgt, im Export der
   Termin, der dem Plan folgt - dort wie hier heisst es "hier wird etwas nachgezogen" und nicht
   "hier entsteht etwas". An etwas Vorhandenem aendert sich etwas, das ist keine Warnung. */
.status-planned,
.status-imported,
.status-import-changed,
.status-export-update {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* Zugesagt, laeuft gerade, und was neu entsteht: angelegt wird im selben Gruen wie ein
   importierter Termin - beides heisst "hier entsteht etwas". */
.status-confirmed,
.status-running,
.status-import-ready,
.status-export-new {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

/* Abgesagt, und der Termin, der aus dem Kalender entfernt wird - dieselbe Warnfarbe. */
.status-canceled,
.status-export-remove {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

/* Offen und zu entscheiden: eine laufende Luecke, eine Ueberlappung und mehrere erkannte
   Elternteile beim Import. Ueberlappungen sind erlaubt und werden nur markiert, nicht
   verhindert. */
.status-gap-open,
.status-overlap,
.status-import-ambiguous {
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

/* In einer anderen Betreuungszeit aufgegangen - kein Zustand, sondern ein Merkmal daneben:
   abgesagt ist die Zeit nicht, die Betreuung findet unter der Kennung der anderen statt.
   Deshalb gedeckt und nicht in der Warnfarbe der Absage. */
.status-merged {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* Planungsvariante eines Entwurfs: wie der Entwurf selbst zurueckhaltend - durchgespielt ist
   nicht geplant -, aber mit Rand, damit das Kennzeichen neben dem Zustand als zweites zu
   erkennen ist und nicht mit ihm verschwimmt. */
.status-variant {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}

/* Private Notiz: sieht nur ihr Verfasser - zurueckhaltend, aber deutlich. Violett kennt Bootstrap
   als Kennzeichen nicht, deshalb steht es hier je Thema. */
.status-private {
    background-color: #e5dbff;
    color: #5f3dc4;
}

:root[data-pw-theme="dark"] .status-private {
    background-color: #2f2450;
    color: #c9b6ff;
}

/* Die Merkmale stehen neben etwas anderem und brauchen den Abstand dorthin; der Tooltip sagt,
   was sie bedeuten. */
.status-merged,
.status-overlap,
.status-variant,
.status-private {
    margin-left: 0.4rem;
    cursor: help;
}

/* Farbliche Kodierung nach Betreuer: die Farben stehen am Elternteil und kommen als
   style-Attribut aus der View - hier steht nur, welche Form die Kennzeichnung hat. */

/* Kennzeichen am Namen. Ohne gepflegte Farben bleibt es unauffaellig, behaelt aber seinen Platz,
   damit die Spalte mit und ohne Farbe gleich ausgerichtet ist. */
.parent-badge {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: var(--bs-border-radius-sm);
}

/* Streifen am linken Zeilenrand: er macht den Betreuerwechsel auf einen Blick sichtbar. Der
   transparente Rahmen steht auch in ungefaerbten Zeilen, sonst verrutschen sie gegeneinander. */
.care-stripe {
    border-left: 4px solid transparent;
}

/* Farbprobe in der Elternteil-Liste - zeigt die Kodierung dort, wo sie gepflegt wird. */
.color-swatch {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: var(--bs-border-radius-sm);
    border: 1px solid var(--bs-border-color);
    vertical-align: -0.1em;
    margin-right: 0.3rem;
}

/* Tabellen der Fachdaten
   -------------------------------------------------------------------------------------------
   Die Tabelle selbst ist eine von Bootstrap (.table). Hier steht, was die Spalten der Anwendung
   brauchen. */

.data-table {
    margin-top: 1rem;
}

.data-table > thead th {
    /* Abgesetzt von den Zeilen darunter: die Kopfzeile benennt die Spalten und ist nicht selbst
       ein Datensatz. */
    --bs-table-bg: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-weight: normal;
    font-size: 90%;
}

.data-table td {
    vertical-align: top;
}

/* Die gerade laufende Betreuungszeit: sie steht zwischen den uebrigen Zeiten ihres Monats und
   waere ohne Hervorhebung nicht zu finden. Der Streifen links traegt schon die Farbe des
   Betreuers, deshalb steht die Markierung im Hintergrund und in der Schrift. Ueber die Variable,
   die Bootstrap fuer die Zeile auswertet - sonst schluege das Ueberfahren sie wieder weg.
   Heller als das Kennzeichen "laeuft gerade", das in derselben Farbe daneben steht: in voller
   Staerke verschwaende das Schildchen im Grund seiner eigenen Zeile. */
.data-table > tbody > tr.care-running > td {
    --bs-table-bg: color-mix(in srgb, var(--bs-success-bg-subtle) 55%, var(--bs-body-bg));
}

.data-table > tbody > tr.care-running > td.care-stripe {
    font-weight: bold;
}

.data-table td.nowrap,
.nowrap {
    white-space: nowrap;
}

/* Name einer Betreuungszeit in der Liste: er steht ueber dem Zeitraum und ist dort der Link auf
   die Zeit - hervorgehoben, damit das Auge zuerst ihn findet ("erste Ferienwoche"). Umbrechen
   darf er, anders als die Zeitangabe darunter: in der Zelle steht sonst nowrap, und ein langer
   Name zoege die Spalte ueber die halbe Tabelle. */
.data-table a.care-name {
    display: block;
    font-weight: bold;
    white-space: normal;
}

.data-table th.num,
.data-table td.num {
    text-align: right;
}

.data-table th.actions,
.data-table td.actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

/* Aktionsspalte: Icon-Knoepfe stehen dicht beieinander, der Text steckt im Tooltip. */
.data-table td.actions form {
    display: inline;
    margin-left: 0;
}

.data-table td.actions .icon-btn {
    margin: 0 0.15rem;
}

/* Notizen werden mehrzeilig eingegeben - die Umbrueche sollen auch in der Anzeige stehen. Weil
   sie erhalten bleiben, darf im JSP kein Zeilenumbruch zwischen Zelle und Text stehen: er waere
   der erste Umbruch der Notiz und schoebe sie um eine Zeile nach unten. */
.note-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Zeitpunkt und Verfasser sagen, woher die Notiz kommt - sie stehen untereinander links neben
   dem Text, zurueckhaltend und in einer Spalte, die nur so breit wird wie noetig. */
.data-table td.note-meta {
    white-space: nowrap;
    width: 1%;
    color: var(--bs-secondary-color);
    font-size: 85%;
}

/* Knoepfe als Zeichen
   -------------------------------------------------------------------------------------------
   In den Aktionsspalten steht fuer Text kein Platz; das Icon traegt ihn im Tooltip. */

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.2rem;
    margin: 0 0.1rem;
    cursor: pointer;
    color: var(--bs-link-color);
    line-height: 1;
    vertical-align: middle;
}

.icon-btn:hover {
    color: var(--bs-link-hover-color);
}

.icon-btn.icon-btn-danger {
    color: var(--bs-danger);
}

.icon-btn.icon-btn-danger:hover {
    filter: brightness(1.2);
}

.icon-btn .icon {
    width: 1.1em;
    height: 1.1em;
    display: block;
}

.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Detailseiten
   ------------------------------------------------------------------------------------------- */

.detail-meta {
    margin: 1.5rem 0;
}

.meta-table th {
    text-align: left;
    color: var(--bs-secondary-color);
    font-weight: normal;
    padding-right: 2rem;
    font-size: 90%;
    white-space: nowrap;
}

/* Zusatzinfos: der Verlauf, die Zugriffe, die aufgegangenen Zeiten. */

.detail-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: flex-start;
}

.detail-box {
    flex: 1 1 320px;
    min-width: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.8rem 1rem;
    background-color: var(--bs-tertiary-bg);
    font-size: 85%;
    /* Breiter Inhalt scrollt in seiner Box und faellt nicht aus ihr heraus: eine Tabelle mit
       nowrap-Spalten (Zeitraum mit Jahr) braucht mehr Platz, als die Box in einer geteilten
       Zeile hat. Wer eine Tabelle zeigt, nimmt deshalb die ganze Breite (.detail-box-wide) -
       das hier ist die Sicherung fuer schmale Fenster. */
    overflow-x: auto;
}

/* Box mit einer Tabelle: zwei davon stehen nebeneinander, drei nicht. Vier Spalten samt
   Zeitraum, Betreuer, Zustand und Aktion brauchen mehr als ein Drittel der Zeile - bei drei
   Spalten blieben sie so schmal, dass die Tabelle scrollen muesste. Die Basis bemisst das:
   drei passen erst, wenn das Fenster wirklich breit ist. */
.detail-box-table {
    flex: 1 1 28em;
}

.detail-box-wide {
    flex-basis: 100%;
}

.detail-box h2 {
    margin-top: 0;
    margin-bottom: 0.6rem;
    font-size: 1.1rem;
}

/* Zusatzinfos stehen eingeklappt: der Verlauf, die Zugriffe und die aufgegangenen Zeiten sagen
   nicht, worum es auf der Seite geht - sie sind zum Nachschlagen da und schoeben das Wesentliche
   nach unten aus dem Blick. Aufgeklappt wird am Kopf der Box; <details> kann das von sich aus,
   ohne Skript, und der Inhalt steht auch geschlossen im Dokument (Suchen im Browser, Karate). */
.collapsible > summary {
    cursor: pointer;
}

.collapsible > summary h2 {
    display: inline;
    margin: 0;
}

/* Geoeffnet braucht der Kopf den Abstand, den er als .detail-box h2 haette; geschlossen waere er
   Luft unter der einzigen Zeile der Box. */
.collapsible[open] > summary {
    margin-bottom: 0.6rem;
}

/* Die Anzahl steht im Kopf, auch eingeklappt - sie ist der Grund, die Box zu oeffnen, wie bei den
   Reitern der Klaerung. */
.collapsible-count {
    color: var(--bs-secondary-color);
    font-weight: normal;
    font-size: 90%;
}

.detail-box .data-table {
    margin-top: 0.6rem;
}

.detail-box .empty-hint {
    margin-top: 0.4rem;
}

.detail-box-actions {
    margin-bottom: 0.6rem;
}

/* Wo der Kopf einer Box zum Aufklappen dient, steht der Link daneben nicht mehr in ihm, sondern
   darunter im aufgeklappten Inhalt - wie in .section-header etwas kleiner als der Text. */
.detail-box-actions a {
    font-size: 90%;
}

/* Aktionen auf einer Detailseite (Knoepfe und Formulare in einer Reihe) */
.entity-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin: 1.5rem 0 0;
}

.entity-actions form {
    display: inline;
    margin: 0;
}

/* Blaetterleiste der Detailseite: die vorherige Zeit links, die naechste rechts - so, wie sie
   zeitlich liegen. Am Rand der Folge steht statt des Knopfes ein abgeblendeter Platzhalter, damit
   der verbliebene nicht auf die andere Seite rutscht. */
.care-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    /* Darunter beginnt der naechste Abschnitt (die Notizen) - ohne Abstand klebt dessen
       Ueberschrift an den Knoepfen. */
    margin: 0.8rem 0 1.5rem;
}

/* "Noch nichts da" - gedaempft und abgesetzt von dem, was darueber steht. */
.empty-hint {
    margin-top: 2rem;
}

/* Formulare
   -------------------------------------------------------------------------------------------
   Die Felder selbst sind Bootstrap (.form-control, .form-select, .form-label). Hier stehen die
   Gruppen und die Felder, die aus mehreren Teilen bestehen. */

.form-group {
    margin-bottom: 1rem;
}

.data-form {
    max-width: 400px;
    margin-top: 1.5rem;
}

/* Ein Formular in einer Tabellenzelle traegt nur sein eines Feld (Stichwoerter des Imports,
   Vorlagen des Exports, Kalenderwahl der Google-Anbindung). Der Abstand, mit dem ein
   eigenstaendiges Formular unter seiner Ueberschrift beginnt, schiebt das Feld dort aus der Zeile:
   die Zellen stehen oben ausgerichtet, das Feld rutschte darunter. In der Zelle sagt schon die
   Spalte, worum es geht - und die Breite gibt sie vor. */
.data-table .data-form {
    max-width: none;
    margin-top: 0;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.login-container {
    max-width: 400px;
}

.login-form {
    margin-top: 1.5rem;
}

/* Ein Haekchen mit seinem Text in einer Zeile - das Label umschliesst beides, deshalb kein
   .form-check von Bootstrap (das setzt das Label daneben). */
.checkbox-label,
.radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"],
.radio-group input[type="radio"] {
    margin: 0;
    flex: 0 0 auto;
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* Hinweis unter einem Feld: .form-text von Bootstrap, hier nur ohne den Abstand nach oben, wo er
   in einer Reihe steht. */
.fix-form .field-hint,
.mini-calendar > .field-hint {
    margin-top: 0;
}

/* Standardzeiten: ein Zeitfeld je Wochentag, moeglichst wenig Platz */
.weekday-times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7em, 1fr));
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.weekday-time {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.weekday-time label {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 85%;
    font-weight: normal;
}

/* Farben eines Elternteils: Farbfeld und Abwahl stehen nebeneinander - die Abwahl gehoert zum
   Feld und nicht darunter. */
.color-field {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.3rem;
}

.color-field input[type="color"] {
    flex: 0 0 auto;
    width: 3.5rem;
}

/* Zeitangabe einer Betreuungszeit: Datum und Uhrzeit stehen nebeneinander, weil sie eine
   Angabe sind. Die Uhrzeit darf leer bleiben (dann gilt der ganze Tag) und braucht nur so viel
   Platz, wie "18:30" belegt - das Datum bekommt den Rest. */
.date-time-field {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.date-time-field input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
}

.date-time-field input[type="time"] {
    flex: 0 0 auto;
    width: 7rem;
}

/* Zeitvorschlaege unter einem Zeitfeld: Knoepfe, die das Feld fuellen */
.time-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.4rem 0 0;
}

/* Auswertung
   -------------------------------------------------------------------------------------------
   Die Verteilung der Naechte und der Wochenenden. Nebeneinander gestellte Zahlen muss man
   vergleichen - der Balken zeigt die Verteilung im Vorbeigehen, und darum geht es hier. Die
   Farbe kommt wie im Kalender vom Elternteil und steht als style-Attribut in der Seite; hier
   steht nur die Form. */

.share-table th.share-count,
.share-table td.share-count,
.share-table th.share-percent,
.share-table td.share-percent {
    text-align: right;
    white-space: nowrap;
}

/* Der Balken bekommt, was uebrig bleibt: die Zahlen davor sind schmal und sollen es bleiben. */
.share-table th.share-graph,
.share-table td.share-graph {
    width: 50%;
}

/* Die Bahn haelt die volle Breite, damit die Balken der Zeilen gegeneinander zu lesen sind - ein
   Balken allein sagt nur, wie lang er ist. */
.share-track {
    display: block;
    width: 100%;
    height: 0.9em;
    background-color: var(--bs-border-color);
    border-radius: 2px;
    overflow: hidden;
}

/* Die Farbe des Balkens steht am Elternteil und kann beliebig hell sein - auf heller Bahn waere
   sie dann kaum zu sehen. Die feine Kontur gibt jedem Balken eine Kante, ohne seine Farbe zu
   veraendern; bei einem Anteil von null ist er null breit und sie verschwindet mit ihm. */
.share-bar {
    display: block;
    height: 100%;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px var(--pw-data-edge);
}

/* Ohne gepflegte Farbe am Elternteil bleibt es bei der der Seite - unsichtbar duerfte der Balken
   nicht sein, er ist die Aussage der Zeile. */
.share-bar-plain {
    background-color: var(--bs-primary);
}

/* Was keinem Elternteil gehoert (ueberlappend, geteilt, nicht geplant): es steht in derselben
   Tabelle, ist aber keine Verteilung, sondern das, was daran offen ist. */
.share-table > tbody > tr.share-special > td {
    color: var(--bs-secondary-color);
}

.share-table > tbody > tr.share-special .share-bar {
    background-color: var(--bs-secondary);
}

/* Die Summe steht abgesetzt unter den Zeilen: sie ist keine weitere Zeile der Verteilung, sondern
   das, worauf sich die Anteile beziehen. */
.share-table tfoot td {
    border-top: 2px solid var(--bs-border-color);
    font-weight: bold;
}

/* Klaerung
   ------------------------------------------------------------------------------------------- */

/* Luecken der Klaerungssicht. Eine gerade laufende Luecke ist die dringendste - fuer jetzt ist
   niemand eingeteilt; anders als bei einer laufenden Betreuungszeit ist das kein guter Zustand,
   deshalb steht hier das Warngelb und nicht das Gruen. */
.gap-table > tbody > tr.gap-open > td {
    --bs-table-bg: color-mix(in srgb, var(--bs-warning-bg-subtle) 55%, var(--bs-body-bg));
}

/* Womit eine Betreuungszeit ueberlappt - im Reiter der Klaerung. Mehrere stehen untereinander
   und brauchen einen Abstand, sonst waere nicht zu sehen, wo die eine aufhoert. */
.overlap-partner + .overlap-partner {
    margin-top: 0.5rem;
}

/* Loesungsvorschlaege der Klaerungssicht: das Haekchen steht in der Zeile des Befundes, den es
   aufloest - in der Luecke bzw. an der ueberlappenden Zeit -, und gehoert zum Formular unter der
   Tabelle (form="review-fixes"). Der Text daneben darf umbrechen: "Beginn auf Fr, 14.08.2020
   12:00 setzen" ist laenger, als die Spalte breit ist. */
.data-table td.fix-cell {
    white-space: normal;
}

.fix-option {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    cursor: pointer;
}

.fix-option input[type="checkbox"] {
    flex: 0 0 auto;
}

/* Wo keine Aufloesung eindeutig ist, steht ein Gedankenstrich - zurueckhaltend, denn er sagt
   nicht "nichts zu tun", sondern "nicht zu rechnen". */
.fix-none {
    color: var(--bs-secondary-color);
}

/* Der Knopf steht unter der Tabelle, in der die Haekchen stehen. */
.fix-form {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0.8rem 0 1.5rem;
}

/* Kalender
   -------------------------------------------------------------------------------------------
   Monatsgitter mit einer Zeile je Woche. Die Farben der Eintraege stehen am Elternteil und kommen
   als style-Attribut aus der View - hier steht nur, welche Form die Kennzeichnung hat (wie bei
   .care-stripe in der Liste). */

.calendar-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0 0.5rem;
}

.calendar-month {
    margin: 0;
    font-size: 1.2rem;
    min-width: 9em;
    text-align: center;
}

/* Der gezeigte Monat ist zugleich der Sprung in einen anderen: statt einer Ueberschrift steht
   zwischen den Pfeilen ein Auswahlfeld. Es traegt deshalb die Schrift der Ueberschrift und nicht
   die eines Formularfelds - an dieser Stelle stand bisher der Monat, und so soll er weiter zu
   lesen sein. */
.calendar-jump {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.calendar-month-select {
    font-size: 1.2rem;
    min-width: 9em;
    width: auto;
}

/* Legende: im Gitter ist fuer den Namen des Betreuers nicht immer Platz. */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
    font-size: 90%;
}

/* Sieben Spalten bleiben auf schmalen Viewports nur lesbar, wenn das Gitter seitlich zu
   verschieben ist. */
.calendar {
    overflow-x: auto;
}

.calendar-grid {
    min-width: 46em;
}

/* Kopfzeile und Wochen benutzen dasselbe Raster, damit die Wochentage untereinander stehen; die
   erste Spalte ist die Kalenderwoche. */
.calendar-head,
.calendar-week {
    display: grid;
    grid-template-columns: 2.5em repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 2px;
}

.calendar-weekday {
    padding: 0.3rem 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 90%;
}

.calendar-weekday.calendar-weekend,
.calendar-week-number {
    color: var(--bs-tertiary-color);
}

.calendar-week-number {
    padding: 0.3rem 0.2rem;
    font-size: 80%;
    text-align: right;
}

.calendar-day {
    /* position: relative, damit das "+" des Plan-Links oben in der Zeile der Tagesnummer stehen
       kann, waehrend der Link selbst die freie Flaeche darunter fuellt. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 5.5em;
    padding: 0.3rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/* Tage der angrenzenden Monate fuellen die erste und letzte Woche auf. */
.calendar-day-outside {
    background-color: var(--bs-tertiary-bg);
}

/* An einem Ferientag ist die Zelle getoent - mehr nicht. Was aus dem Plan kommt, steht als Kasten
   darin und bleibt damit das Kraeftigere: die Ferien sagen, wann etwas zu planen waere, und nicht,
   was geplant ist. */
.calendar-day-holiday {
    background-color: var(--pw-calendar-holiday-bg);
}

.calendar-day-outside.calendar-day-holiday {
    background-color: var(--pw-calendar-holiday-bg-outside);
}

.calendar-day-today {
    border-color: var(--bs-primary);
}

/* Tagesnummer und Ferienname teilen sich eine Zeile. Sie MUSS es sein: bekaeme der Name eine
   eigene, schoebe er die Eintraege dieses Tages gegenueber dem Nachbartag nach unten, und die
   Spuren einer Betreuungszeit staenden nicht mehr auf einer Hoehe (web/CalendarLanes).
   Rechts bleibt Platz fuer das "+" des Plan-Links, das dort absolut sitzt. */
.calendar-day-head {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    min-width: 0;
    padding-right: 1.1em;
}

.calendar-day-number {
    /* feste Mindestbreite fuer zwei Ziffern: sonst beginnt der Ferienname am 3. weiter links als
       am 31., und die Spalte wirkt unruhig, obwohl ueberall dasselbe steht */
    min-width: 1.3em;
    color: var(--bs-secondary-color);
    font-size: 85%;
}

/* Der Name der Ferien steht nur am ersten Ferientag und am Anfang jeder Zeile (web/CalendarViews).
   Er gibt nach und endet mit Auslassungspunkten - vollstaendig steht er im Tooltip; eine breitere
   Zelle bekaeme er nicht, und umbrechen darf er nicht. */
.calendar-day-holiday-name {
    min-width: 0;
    overflow: hidden;
    color: var(--pw-calendar-holiday-color);
    font-size: 78%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-day-outside .calendar-day-number {
    color: var(--bs-tertiary-color);
}

.calendar-day-today .calendar-day-number {
    color: var(--bs-primary);
    font-weight: bold;
}

/* Ab hier planen: der Rest der Zelle unter den Eintraegen ist der Weg ins Formular mit diesem Tag
   als Beginn. Der Link fuellt die freie Flaeche (flex: 1), damit an einem leeren Tag nicht nur ein
   Zeichen zu treffen ist; sein "+" sitzt oben rechts in der Zeile der Tagesnummer, damit es auch
   an einem vollen Tag zu sehen bleibt. Es steht dauerhaft da und nicht erst beim Ueberfahren -
   auf einem Beruehrungsbildschirm gibt es kein Ueberfahren. */
.calendar-day-plan {
    flex: 1 1 1.2em;
    min-height: 1.2em;
    border-radius: var(--bs-border-radius-sm);
}

.calendar-day-plan-mark {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    padding: 0 0.25rem;
    color: var(--bs-tertiary-color);
    font-size: 85%;
    line-height: 1.2;
}

.calendar-day-plan:hover,
.calendar-day-plan:focus-visible {
    background-color: var(--bs-secondary-bg);
    outline: none;
}

.calendar-day-plan:hover .calendar-day-plan-mark,
.calendar-day-plan:focus-visible .calendar-day-plan-mark {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Mit der Maus markierter Zeitraum: gezogen wird ueber die Tage, und was markiert ist, steht
   getoent da. Der Rahmen bleibt dem heutigen Tag - so sind beide zugleich zu lesen.

   Waehrend des Ziehens ist im Gitter nichts auszuwaehlen: sonst faerbte sich der Text der
   ueberfahrenen Zellen mit und die Markierung waere nicht mehr zu erkennen. */
.calendar-marking {
    user-select: none;
}

/* Die Markierung gewinnt ueber die Toenung eines Ferientages - sie zeigt, was der Nutzer gerade
   tut, und die Ferien sind nur der Grund dafuer. Die Doppelklasse steht dafuer, nicht die
   Reihenfolge: .calendar-day-outside.calendar-day-holiday waere sonst staerker. */
.calendar-day.calendar-day-marked {
    background-color: var(--bs-primary-bg-subtle);
}

/* Ein Eintrag steht an jedem Tag, den seine Betreuungszeit beruehrt; der Streifen links traegt
   die Farbe des Betreuers und behaelt seinen Platz auch ohne gepflegte Farbe.

   Alle Eintraege sind gleich hoch - genau vier Zeilen (Kind, Zeit, Betreuer, Kennzeichen), jede
   einzeilig: nur dann stehen die Eintraege einer Spur an ihren Tagen auf einer Hoehe, und nur
   dann haelt ein Platzhalter genau den Platz eines Eintrags (web/CalendarLanes). Ein zu langer
   Name bricht deshalb nicht um, sondern endet mit Auslassungspunkten - im Tooltip steht er
   vollstaendig. */
.calendar-entry {
    display: block;
    min-height: 5.2em; /* vier Zeilen mal line-height */
    padding: 0.15em 0.35em;
    overflow: hidden;
    background-color: var(--bs-secondary-bg);
    border-left: 4px solid transparent;
    border-radius: var(--bs-border-radius-sm);
    color: var(--bs-body-color);
    font-size: 85%;
    line-height: 1.3;
}

/* Platzhalter einer an diesem Tag leeren Spur: er haelt nur den Platz - zu sehen ist er nicht,
   und anzuklicken auch nicht. */
.calendar-entry-empty {
    visibility: hidden;
}

.calendar-entry:hover {
    background-color: var(--bs-secondary-bg);
    text-decoration: none;
}

/* Entwurf: noch kein Teil des Plans, deshalb nur angedeutet. */
.calendar-entry-draft {
    border-left-style: dashed;
}

/* Kopfzeile eines Eintrags: das Schildchen des Kindes und, wenn die Zeit einen traegt, ihr Name
   daneben. Sie ist genau eine Zeile wie die drei darunter - deshalb flex und feste Hoehe: eine
   eigene Zeile fuer den Namen machte jeden Eintrag hoeher, auch die namenlosen, und gleich hoch
   muessen sie bleiben (siehe .calendar-entry). Beide Teile duerfen schrumpfen und enden dann mit
   Auslassungspunkten - dafuer min-width: 0, sonst schiebt ein langer Name das Schildchen aus der
   Zelle. */
.calendar-entry-head {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    height: 1.3em;
    overflow: hidden;
}

/* Der Name der Betreuungszeit sagt, worum es geht ("erste Ferienwoche") - im Gitter der Text,
   nach dem das Auge sucht, deshalb in der normalen Textfarbe und nicht abgeblendet wie der
   Betreuer. */
.calendar-entry-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Der Name des Kindes bleibt ein Schildchen, das seinen Text umschliesst - es waechst also nicht
   auf die ganze Zeilenbreite (flex: 0 1 auto) und gibt neben einem Namen nach, bevor es ihn
   verdraengt. */
.calendar-entry-child {
    flex: 0 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 0.3em;
    overflow: hidden;
    border-radius: var(--bs-border-radius-sm);
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Zeit, Betreuer und Kennzeichen sind je genau eine Zeile - siehe .calendar-entry. */
.calendar-entry-time,
.calendar-entry-parent,
.calendar-entry-marks {
    display: block;
    height: 1.3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.calendar-entry-parent,
.calendar-entry-status {
    color: var(--bs-secondary-color);
}

/* Kennzeichen am Eintrag (importiert, ueberlappt): im Gitter ist fuer ihren Text kein Platz, sie
   stehen als Zeichen mit Tooltip - gefiltert wird aber nach ihnen. */
.calendar-entry-mark {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.3em;
    border-radius: var(--bs-border-radius-sm);
    font-size: 90%;
    cursor: help;
}

/* Kleiner Kalender
   -------------------------------------------------------------------------------------------
   Neben der Detailseite und dem Formular einer Betreuungszeit (web/MiniCalendarViews): dieselben
   sieben Spalten wie das grosse Gitter, aber ohne Text - je Betreuungszeit nur ein farbiger Balken
   ueber die Tage, die sie belegt. Die Farben stehen am Elternteil und kommen als style-Attribut
   aus der View, hier steht nur die Form. */

/* Formular bzw. Kennzahlen und der Kalender stehen nebeneinander; auf schmalen Viewports rutscht
   der Kalender darunter. */
.with-mini-calendar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

/* Links steht alles, was zur Betreuungszeit gehoert: auf der Detailseite die Kennzahlen samt
   Knoepfen und Absage, im Formular die Felder. Die Spalte ist auf beiden Seiten gleich breit
   begrenzt - sonst wuechse sie auf der einen bis zum Zeilenende und der Kalender spraenge beim
   Wechsel zwischen Ansehen und Bearbeiten quer ueber die Seite. Sie ist breiter als das Formular
   selbst (das bei 400px bleibt), weil die Knoepfe daneben Platz brauchen. */
.with-mini-calendar > .main-column {
    flex: 1 1 22em;
    max-width: 46em;
    min-width: 0;
}

/* Das erste Element der Spalte beginnt oben - sein Aussenabstand haengt sonst am Zeilenanfang. */
.with-mini-calendar > .main-column > :first-child {
    margin-top: 0;
}

.mini-calendar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.8rem;
    flex: 0 1 21em;
    min-width: 16em;
}

/* Ein Monat fuellt die Spalte, zwei teilen sie. Schmaler als 16em ist ein Gitter mit sieben
   Spalten nicht mehr zu lesen - dann wickeln sich die Monate wieder untereinander; breiter als
   eine Spalte allein soll ein einzelnes Gitter nicht werden. */
.mini-month {
    flex: 1 1 16em;
    max-width: 21em;
    min-width: 0;
}

/* Die Hinweise unter dem Gitter gelten fuer den ganzen Kalender und stehen deshalb in einer
   eigenen Zeile - als Flex-Element neben den Monaten waeren sie eine schmale Spalte. */
.mini-calendar > .field-hint {
    flex: 1 1 100%;
}

/* Mehrere Monate stehen nebeneinander, wo das Fenster fuer zwei Gitter Platz hat: untereinander
   waechst der Kalender ueber die Spalte daneben hinaus, obwohl rechts Platz frei bleibt. Den
   doppelten Platz nimmt er sich nur, wenn es wirklich mehr als einen Monat gibt - sonst wuechse
   das einzelne Gitter mit. Die Grenze liegt so weit draussen, dass der Spalte daneben ihre Breite
   bleibt: der Kalender soll sich seinen Platz nicht bei den Kennzahlen und Feldern nehmen.
   Darunter bleibt es bei einer Spalte - zwei zu schmale Monate waeren schlechter als zwei
   untereinander. */
@media (min-width: 84em) {
    .mini-calendar:has(.mini-month + .mini-month) {
        flex-basis: 34em;
    }
}

.mini-month-label {
    margin: 0 0 0.3rem;
    color: var(--bs-secondary-color);
    font-size: 90%;
}

/* Kopfzeile und Wochen benutzen dasselbe Raster, damit die Wochentage untereinander stehen. */
.mini-head,
.mini-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 2px;
}

.mini-weekday {
    color: var(--bs-secondary-color);
    font-size: 70%;
    text-align: center;
}

.mini-weekday.mini-weekend {
    color: var(--bs-tertiary-color);
}

.mini-day {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 2.6em;
    padding: 0.15em 0.1em 0.25em;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
}

/* Tage der angrenzenden Monate fuellen die erste und letzte Woche auf. */
.mini-day-outside {
    background-color: var(--bs-tertiary-bg);
}

/* Ferientag im kleinen Kalender: nur die Toenung, kein Text - in einer Zelle von knapp drei
   Zeilen Hoehe waere fuer einen Namen kein Platz; er steht im Tooltip. */
.mini-day-holiday {
    background-color: var(--pw-calendar-holiday-bg);
}

.mini-day-outside.mini-day-holiday {
    background-color: var(--pw-calendar-holiday-bg-outside);
}

.mini-day-today {
    border-color: var(--bs-primary);
}

.mini-day-number {
    color: var(--bs-secondary-color);
    font-size: 70%;
    line-height: 1.1;
    text-align: center;
}

.mini-day-outside .mini-day-number {
    color: var(--bs-tertiary-color);
}

.mini-day-today .mini-day-number {
    color: var(--bs-primary);
    font-weight: bold;
}

/* Ein Balken je Spur und Tag; die negativen Raender reichen bis an die Zellenkante, damit ein
   Zeitraum ueber mehrere Tage als ein Balken zu lesen ist. Abgerundet ist er nur an seinen
   Enden. */
.mini-bar {
    display: block;
    height: 0.5em;
    box-sizing: border-box;
    margin: 0 -0.1em;
}

.mini-bar-start {
    margin-left: 0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.mini-bar-end {
    margin-right: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

/* Ohne gepflegte Farbe am Elternteil bleibt der Balken neutral - unsichtbar waere er kein
   Balken. */
.mini-bar-plain {
    background-color: var(--bs-secondary);
}

/* Platzhalter einer an diesem Tag leeren Spur: er haelt nur den Platz. */
.mini-bar-empty {
    background-color: transparent;
}

/* Entwurf: noch kein Teil des Plans, deshalb nur angedeutet. */
.mini-bar-draft {
    opacity: 0.5;
}

/* Die Betreuungszeit, um die es auf der Seite geht - unter mehreren Balken waere sie sonst nicht
   zu erkennen. Die Kanten laufen ueber ihre Tage durch. */
.mini-bar-shown {
    height: 0.7em;
    border-top: 1px solid var(--bs-body-color);
    border-bottom: 1px solid var(--bs-body-color);
}

a.mini-bar:hover {
    filter: brightness(0.85);
}

/* Bericht
   -------------------------------------------------------------------------------------------
   Derselbe Plan als Text zum Kopieren (web/CareTimeReportViews). Feste Schrift, weil die Spalten
   aus Leerzeichen bestehen - in einer laufenden Schrift stuenden Kind und Betreuer nicht
   untereinander, und kopiert wird genau das, was hier steht. */

.report-text {
    margin: 0.6rem 0 0;
    padding: 0.8rem 1rem;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    font-family: var(--bs-font-monospace);
    font-size: 90%;
    line-height: 1.5;
    /* zu breite Zeilen scrollen im Kasten, statt umzubrechen: ein Umbruch mitten im Zeitraum
       waere nicht mehr als einer zu lesen - dieselbe Sicherung wie an .detail-box */
    overflow-x: auto;
}