/* ==========================================================================
   Gemeinsame Bedienelemente
   --------------------------------------------------------------------------
   Sprunglink und Ansichtseinstellungen (Schriftgröße, Farbschema).

   HERKUNFT: Diese Datei hieß bis zum 18.10.2026 umschalter.css und trug
   zusätzlich den Umschalter zwischen den beiden Fassungen. Mit der
   Entscheidung für die moderne Fassung ist der Umschalter entfallen — der
   Sprunglink und die Ansichtssymbole aber nicht. Sie heißt deshalb jetzt nach
   dem, was sie tut. Die Regeln des bisherigen Erscheinungsbilds (.alt-*) sind
   mit entfernt; sie sprachen Klassen an, die es nicht mehr gibt, und eine
   CSS-Regel für eine Klasse, die es nicht gibt, fällt niemandem auf (Falle 17).

   Eigenständig gehalten: keine Abhängigkeit von style.css, damit dieselbe
   Datei auf der Website und im Verwaltungsbereich funktioniert. Die eigenen
   Farbwerte stehen deshalb hier als --um-*-Variablen.
   ========================================================================== */

:root {
    --um-flaeche: #ffffff;
    --um-band: #f2f5f7;
    --um-linie: #d9e1e6;
    --um-text: #5a6570;
    /* Gleicher Ton wie --alt-teal-dark: Schrift, nicht Fläche. Auf dem hellen
       Band #f2f5f7 erreichte #0b7f9b nur 4,2:1. */
    --um-akzent: #0a7089;
    --um-akzent-hell: #eaf6fa;
    --um-schatten: rgba(0, 0, 0, 0.2);
}

/* Dunkles Schema. Gesetzt wird das Attribut von ansicht.js, noch bevor der
   Browser zum ersten Mal zeichnet – sonst blitzt die helle Fassung kurz auf. */
html[data-farbschema="dunkel"] {
    --um-flaeche: #1c2329;
    --um-band: #161b20;
    --um-linie: #333c43;
    --um-text: #aab4bc;
    --um-akzent: #5ecfe8;
    --um-akzent-hell: #123039;
    --um-schatten: rgba(0, 0, 0, 0.6);

    /* Sagt dem Browser, dass Formularfelder, Bildlaufleisten und die
       voreingestellten Rahmen ebenfalls dunkel gehören. */
    color-scheme: dark;
}

/* --- Sprunglink ----------------------------------------------------------
   „Zum Inhalt springen" ist unsichtbar, bis er den Tastaturfokus bekommt.
   Wer die Seite mit der Tastatur bedient – etwa weil eine Maus motorisch
   schwierig ist – musste sich sonst auf jeder Seite erst durch Kopfband und
   Navigation arbeiten, bevor der eigentliche Text kam. Dasselbe gilt für
   Vorleseprogramme. */

.sprunglink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 18px;
    background-color: var(--um-flaeche);
    color: var(--um-akzent) !important;
    border: 2px solid var(--um-akzent);
    border-radius: 0 0 6px 0;
    font-family: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 2px 8px var(--um-schatten);
}

.sprunglink:focus {
    left: 0;
}

/* ==========================================================================
   Ansicht: Schriftgröße und Farbschema
   --------------------------------------------------------------------------
   Zwei kleine Symbole oben rechts im Kopfbereich. Jeder Klick schaltet eine
   Stufe weiter, nach der letzten wieder von vorn.

   Vorher stand die Schriftgrößen-Auswahl als beschriftete Knopfreihe offen im
   Kopfband. Sie war damit auffälliger als der Praxisname und zwang das
   Kopfband in zwei Zeilen. Jetzt beansprucht sie 34 px. Wer sie braucht,
   findet sie weiterhin oben – nur ohne dass sie sich jedem Besucher
   aufdrängt. Das frühere Wegklicken entfällt damit ersatzlos: Es gab es nur,
   weil die Reihe störte.

   Die Zwischenstufe – ein Symbol, das eine Auswahlliste aufklappt – ist
   wieder entfernt. Sie hatte einen Fehler, der als „reagiert nur im unteren
   Fünftel" gemeldet wurde; die Begründung steht ausführlich im Kopf von
   ansicht.js. Drei Stufen und drei Farbschemata sind wenig genug, um sie
   durchzuklicken.
   ========================================================================== */

.ansicht-werkzeuge {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 8px;
    /* Kein margin-left: Beide Kopfzeilen sind Flex-Behälter mit eigenem gap,
       ein zusätzlicher Abstand käme doppelt. */
    font-family: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}


/* Gestaltungsvorschlag: Dort passen Logo, sechs Navigationskacheln und die
   Werkzeuge nicht gemeinsam in eine Zeile — die Kacheln allein brauchen gut
   650 px. Als Flex-Kind rutschten die Werkzeuge deshalb in eine zweite Zeile
   unter das Kopfband. Sie liegen hier absolut in der Ecke der Kopfleiste.

   BEZUGSPUNKT IST DER KOPFBEREICH, NICHT DER INHALTSRAHMEN.
   Zuerst war .nav-bar der Bezug, damit die Symbole mit dem Inhalt fluchten.
   Das sah auf breiten Bildschirmen falsch aus: Der Inhalt hört bei 1200 px
   auf, das Kopfband läuft über die volle Breite — bei 1600 px standen die
   Symbole 207 px vom Rand entfernt und schienen mitten in der Fläche zu
   schweben. Sie sitzen jetzt am Fensterrand, wo man sie sucht.

   header ist position: sticky und damit ein gültiger Bezugspunkt; .nav-bar
   braucht deshalb ausdrücklich *kein* position: relative. */
.nav-bar > .ansicht-werkzeuge {
    position: absolute;
    top: 8px;
    right: 16px;
    margin: 0;
}

/* Ab 993 px steht die Navigation in derselben Zeile wie das Logo. Dann sitzen
   die Symbole auf der Höhe der Kacheln — und zwar UNTEREINANDER.
   --------------------------------------------------------------------------
   Die Rechnung dahinter: Die Kopfzeile hat 1168 px Inhaltsbreite. Logo und
   Praxisname brauchen 459, die sechs Kacheln 656, dazwischen 16 Abstand —
   macht 1131. Es bleiben also 37 px.

   Nebeneinander sind die beiden Symbole 72 px breit. Der dafür nötige Freiraum
   sprengte die Zeile, die Navigation rutschte darunter und das Kopfband wuchs
   von 105 auf 141 px. Untereinander sind es 34 px, und alles bleibt in einer
   Zeile.

   Der frühere Weg — 24 px Zuschlag nach oben, damit die Symbole über den
   Kacheln Platz haben — schob Logo und Praxisname nach unten. Für zwei Symbole
   ein zu hoher Preis. So kostet die Anordnung keine Höhe mehr:
   34 px breit, 72 px hoch, und die Zeile ist ohnehin 96 px hoch. */
@media (min-width: 993px) {
    .nav-bar > .ansicht-werkzeuge {
        flex-direction: column;
        gap: 4px;
        /* calc statt transform: translateY(-50%) — siehe die Begründung beim
           bisherigen Erscheinungsbild weiter unten. 36 px ist die halbe Höhe
           der Spalte (34 + 4 + 34). */
        top: calc(50% - 36px);
    }

}

/* Freiraum für die Symbole — aber nur, solange sie ihn brauchen.
   --------------------------------------------------------------------------
   Die Symbole hängen am Fensterrand, die Kacheln am Inhaltsrahmen (1200 px).
   Je breiter das Fenster, desto weiter rücken beide auseinander; ab rund
   1290 px berühren sie sich nicht mehr und der Inhalt bleibt unberührt. Erst
   darunter überschneiden sie sich — nachgerechnet: Überlappung in Pixeln ist
   634 minus der halben Fensterbreite.

   Der Freiraum allein hätte die Zeile gesprengt und die Navigation genau in
   die zweite Zeile gedrückt, die vermieden werden soll. Die Kacheln rücken
   deshalb im selben Zug enger zusammen (8 statt 16 px). Unterm Strich braucht
   die Zeile dadurch kaum mehr Platz als vorher. */
@media (min-width: 993px) and (max-width: 1319px) {
    header.hat-ansicht .nav-bar > nav {
        padding-right: 44px;
    }

    header.hat-ansicht .nav-links {
        gap: 8px;
    }
}

/* Das Meldefeld sagt Vorleseprogrammen die neue Einstellung an. Optisch darf
   es nicht erscheinen, aus dem Baum entfernt werden darf es aber auch nicht —
   display: none nimmt ihm die Stimme. Deshalb weggeschoben statt versteckt. */
.ansicht-melder {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ansicht-knopf {
    position: relative;
    /* Absicherung: Ein positioniertes Element wird ohnehin über den normalen
       Fluss gezeichnet. Mit ausdrücklichem z-index gilt das auch gegenüber
       anderen positionierten Nachbarn — etwa dem Ausklappmenü der Navigation
       im bisherigen Erscheinungsbild, das z-index 60 trägt. */
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--um-linie);
    border-radius: 8px;
    background-color: var(--um-flaeche);
    color: var(--um-akzent);
    font-family: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

/* Kein Kind des Knopfs nimmt Zeigerereignisse an. Damit ist bei jedem Klick
   der Knopf selbst das Ziel — nie das Symbol darin.
   --------------------------------------------------------------------------
   Das ist die Absicherung gegen die Fehlerklasse, die uns den Fehler „reagiert
   nur im unteren Fünftel" eingebracht hat: Der Knopf schreibt beim Umschalten
   sein innerHTML neu und zerstört dabei den angeklickten Knoten. Ein Handler,
   der später im selben Ereignis noch etwas über ereignis.target wissen will,
   hält dann einen abgehängten Knoten in der Hand — und closest() liefert für
   den null. Ist immer der Knopf das Ziel, kann das nicht passieren. */
.ansicht-knopf > * {
    pointer-events: none;
}

.ansicht-knopf svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Fest in px, nicht in rem: Der Knopf ist 34 px hoch und wächst mit der
   Schriftstufe nicht mit — „A++" bei 18 px Wurzelgröße sprengte ihn sonst
   genau dann, wenn die größte Stufe eingestellt ist. */
.ansicht-stufe {
    font-size: 13px;
    letter-spacing: -0.03em;
}

.ansicht-knopf:hover {
    border-color: var(--um-akzent);
    background-color: var(--um-akzent-hell);
}


/* --- Freistehend (Anmeldeseite der Verwaltung) ---------------------------- */

.ansicht-werkzeuge.ansicht-frei {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 300;
    margin: 0;
}


/* Der Verwaltungsbereich stapelt seine Kopfzeile am Telefon. Dort bleibt die
   Gruppe im Fluss – sie steht neben „Abmelden", wo ohnehin Platz ist. */
@media (max-width: 768px) {
    .header-aktionen > .ansicht-werkzeuge,
    .header-aktionen [data-ansicht-hier] > .ansicht-werkzeuge {
        margin-top: 0;
    }
}