/* Siro Pilot — Oberfläche
   Systemschriften statt Google Fonts: keine externen Abrufe, keine DSGVO-Diskussion. */

:root {
    --blau: #1a7bc0;
    --blau-dunkel: #14639a;
    --blau-hell: #e8f2fa;
    --ink: #231f20;
    --grau-900: #2f3235;
    --grau-600: #666d73;
    --grau-400: #9aa1a7;
    --grau-200: #e3e7ea;
    --grau-100: #f1f4f6;
    --grau-50: #f8fafb;
    --weiss: #fff;
    /* Drei Rollen, die frueher unter --weiss bzw. --blau-dunkel mitliefen. Getrennt,
       weil der Dunkelmodus sie gegenlaeufig umstellen muss: Die Flaeche wird dunkel,
       die Schrift auf dem blauen Knopf bleibt weiss, und der Grund der
       Auszeichnungsleiste bleibt in BEIDEN Modi dunkel (er trug vorher --ink, das im
       Dunkelmodus zur hellen Textfarbe wird - die Leiste waere unsichtbar geworden). */
    --flaeche: #fff;
    --blau-auf-hell: #14639a;
    --leiste-grund: #231f20;
    --gruen: #1d8a4e;
    --gruen-hell: #e6f4ec;
    --rot: #c0392b;
    --rot-hell: #fbeceb;
    --gelb: #b8860b;
    --gelb-hell: #fdf4e0;
    /* Masse der Eingabefelder. Als Variablen, weil das Datumsfeld seine Hoehe
       daraus errechnen muss (siehe unten) — sonst laeuft sie beim naechsten
       Aenderen des Polsters lautlos auseinander. */
    --feld-polster: 9px;
    --feld-rahmen: 1px;
    --feld-zeile: 1.2;
    --radius: 10px;
    --schatten: 0 1px 3px rgba(35, 31, 32, .08), 0 1px 2px rgba(35, 31, 32, .04);
    --schatten-gross: 0 4px 16px rgba(35, 31, 32, .1);
}

/* Damit Rollbalken, Auswahlmenues und Kalenderblaetter des Browsers mitziehen. */
:root { color-scheme: light dark; }

* { box-sizing: border-box; }

/* Lange Zeichenketten ohne Leerzeichen brechen die Seite auf, statt umzubrechen:
   Am Telefon lässt sich die Seite dann seitlich schieben. Aufgefallen am 18.08. auf
   der Übersicht — seit die LinkedIn-Adresse in der Protokollmeldung steht, stand dort
   ein Wort aus 70 Zeichen (gemessen: 127 px Überstand auf 375 px).
   Bewusst einmal für alles statt an der einen Stelle: Der Fehler kommt sonst mit dem
   nächsten Link, dem nächsten Dateinamen, der nächsten langen Adresse zurück.

   `anywhere` und ausdrücklich NICHT `break-word`. Der Unterschied ist nicht kosmetisch:
   Nur `anywhere` verkleinert auch die **Mindestbreite** eines Feldes. Ein Flex- oder
   Rasterfeld ohne eigenes `min-width` ist von sich aus mindestens so breit wie sein
   längstes Wort — mit `break-word` wächst also das Feld, statt dass das Wort umbricht,
   und die Seite läuft weiter über. Nachgemessen am Seitenkopf der Übersicht:
   `break-word` 138 px Überstand, `anywhere` 0. */
body { overflow-wrap: anywhere; }

/* Muss vor allen Komponentenregeln stehen und sie überstimmen: eine Regel wie
   .knopf{display:inline-flex} schlägt sonst das hidden-Attribut, und versteckte
   Elemente bleiben sichtbar. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--grau-50);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Gerüst --- */
.kopf {
    background: var(--flaeche);
    border-bottom: 1px solid var(--grau-200);
    position: sticky; top: 0; z-index: 50;
}
.kopf-inner {
    max-width: 1180px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 24px; height: 58px;
}
/* Die Marke ist seit 26.08. das Logo und kein Schriftzug mehr. Die feste Höhe ist
   Pflicht: Die Bilddatei bringt ihre eigenen Maße (920x384) mit und wäre sonst um ein
   Vielfaches höher als der 58 px hohe Kopf. Breite über auto, damit das Verhältnis
   stimmt; display:block am Bild nimmt die Grundlinienlücke unter dem Bild weg.
   Die Datei ist mit 920 px Breite absichtlich viel größer als die Anzeigegröße —
   so bleibt sie auf Bildschirmen mit doppelter Punktdichte scharf. */
.marke { display: inline-flex; align-items: center; flex: 0 0 auto; }
.marke:hover { text-decoration: none; }
.marke img { display: block; height: 40px; width: auto; }
.marke .logo-dunkel { display: none; }
.kopf nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.kopf nav a {
    padding: 6px 12px; border-radius: 6px; color: var(--grau-600); font-size: 14px; font-weight: 500;
}
.kopf nav a:hover { background: var(--grau-100); color: var(--ink); text-decoration: none; }
.kopf nav a.aktiv { background: var(--blau-hell); color: var(--blau-auf-hell); }

main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }

/* --- Seitenkopf --- */
.seitenkopf { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.seitenkopf h1 { margin: 0; font-size: 25px; letter-spacing: -.4px; }
.seitenkopf p { margin: 4px 0 0; color: var(--grau-600); font-size: 14px; }
.seitenkopf .aktionen { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.zurueck { display: inline-block; color: var(--grau-600); font-size: 13px; margin-bottom: 10px; }

/* --- Reiter innerhalb einer Website --- */
.reiter {
    display: flex; gap: 2px; border-bottom: 1px solid var(--grau-200); margin-bottom: 24px;
    overflow-x: auto;
}
.reiter a {
    padding: 9px 14px; font-size: 14px; font-weight: 500; color: var(--grau-600);
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.reiter a:hover { color: var(--ink); text-decoration: none; }
.reiter a.aktiv { color: var(--blau); border-bottom-color: var(--blau); }
/* Die Kurzform der Beschriftung erscheint erst am Telefon (siehe Medienabfrage). */
.reiter-kurz { display: none; }

/* --- Karten --- */
.karte {
    background: var(--flaeche); border: 1px solid var(--grau-200);
    border-radius: var(--radius); box-shadow: var(--schatten); margin-bottom: 16px;
}
.karte-kopf {
    padding: 14px 18px; border-bottom: 1px solid var(--grau-200);
    display: flex; align-items: center; gap: 12px;
}
.karte-kopf h2 { margin: 0; font-size: 15px; font-weight: 600; }
.karte-kopf .aktionen { margin-left: auto; }
.karte-inhalt { padding: 18px; }
.karte-inhalt > :first-child { margin-top: 0; }
.karte-inhalt > :last-child { margin-bottom: 0; }

/* --- Kennzahlen --- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kennzahl {
    background: var(--flaeche); border: 1px solid var(--grau-200); border-radius: var(--radius);
    padding: 15px 17px; box-shadow: var(--schatten);
}
.kennzahl .wert { font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px; }
.kennzahl .titel { font-size: 12.5px; color: var(--grau-600); font-weight: 600; }
/* Der Stand unter der Zahl: leiser als die Beschriftung, damit die Kachel weiter
   von der Zahl lebt und nicht von ihrem Datum. */
.kennzahl .stand { font-size: 11.5px; color: var(--grau-600); opacity: .85; margin-top: 2px; }

/* --- Raster --- */
/* min(300px, 100%): Unter 332 px Fensterbreite waere eine feste Mindestspalte
   von 300 px breiter als der Platz — die Seite liefe seitlich aus. */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.spalten-2 { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
/* `min-width: 0` ist nicht schmueckendes Beiwerk: Rasterfelder schrumpfen von
   sich aus nicht unter ihren Mindestinhalt. Ohne das blieb die Spalte 335 px
   breit, obwohl nur 288 px Platz waren — die ganze Seite liess sich schieben.
   Gilt bewusst in JEDER Breite, nicht nur im einspaltigen Umbruch: Die rechte
   Spur ist auf 320 px festgelegt, ihr Feld darf also nie an seinem Mindestinhalt
   haengen bleiben und rechts herausragen. */
.spalten-2 > * { min-width: 0; }
@media (max-width: 900px) {
    .spalten-2 { grid-template-columns: 1fr; }
}

/* --- Knöpfe --- */
.knopf {
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    padding: 8px 15px; border-radius: 7px; border: 1px solid var(--grau-200);
    background: var(--flaeche); color: var(--ink); font-size: 14px; font-weight: 500;
    cursor: pointer; font-family: inherit; line-height: 1.4; text-decoration: none;
}
.knopf:hover { background: var(--grau-100); text-decoration: none; }
.knopf-haupt { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.knopf-haupt:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.knopf-gefahr { color: var(--rot); border-color: #f0cfcb; }
.knopf-gefahr:hover { background: var(--rot-hell); }
.knopf-klein { padding: 5px 10px; font-size: 13px; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }

/* --- Formulare --- */
.feld { margin-bottom: 17px; }
.feld label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
/* Ueberschrift ueber ZWEI Feldern (Datum + Uhrzeit). Sieht aus wie ein label, ist aber
   keines: Ein `<label for>` kann nur auf ein Feld zeigen, und ein Klick darauf setzte den
   Fokus willkuerlich in eines der beiden. Gleiche Regel, damit die Karte einheitlich
   bleibt — zwei getrennt gepflegte Beschriftungsstile laufen sonst auseinander. */
.feld .feld-titel { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.feld .hinweis { font-size: 13px; color: var(--grau-600); margin: -2px 0 7px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], textarea, select {
    width: 100%; padding: var(--feld-polster) 11px;
    border: var(--feld-rahmen) solid var(--grau-200); border-radius: 7px;
    font-family: inherit; font-size: 14.5px; line-height: var(--feld-zeile);
    background: var(--flaeche); color: var(--ink);
}
/* **Alle drei Datum-/Zeit-Feldtypen gehoeren ueberall zusammen.** `date` kam am 17.08.,
   `datetime-local` am 20.08. dazu — und `time` wurde beim dritten Mal vergessen: Es hatte
   weder Rahmen noch feste Hoehe, stand deshalb neben dem Datumsfeld auf anderer Hoehe und
   fiel leer in sich zusammen. `bin/test-termine.php` prueft jetzt, dass jeder in der
   Oberflaeche benutzte Typ hier steht — die vierte Kopie von Hand zu pflegen geht schief.
   Datums- UND Datum-Zeit-Felder auf iPhone und iPad — `datetime-local` traegt
   dieselbe native Darstellung wie `date` und war beim Einbau der Terminfunktion
   am 20.08. genau derselbe Fall. Deshalb stehen beide ueberall zusammen; eine
   Regel, die nur einen der beiden kennt, laesst den Fehler wiederkommen.
   Datumsfelder auf iPhone und iPad: Dort tragen sie eine native Darstellung mit
   eigener Breite, die `width: 100%` uebergeht — das Feld ragt dann rechts aus der
   Karte, waehrend jedes normale Textfeld unauffaellig bleibt. `-webkit-appearance:
   none` gibt die Breite frei, `min-width: 0` loest die Mindestbreite, `max-width`
   deckelt. Rahmen, Polster und Hintergrund kommen ohnehin aus der Regel oben, es
   geht also keine Optik verloren; der Tipp-Auswaehler auf iOS bleibt.
   Auf dem Mac (Chromium und WebKit gemessen) aendert das nichts — dort war das
   Feld nie zu breit. Der Wertetext steht in Safari von sich aus mittig; links
   ausgerichtet passt er zu jedem anderen Feld. */
input[type=date], input[type=time], input[type=datetime-local] {
    min-width: 0; max-width: 100%;
    -webkit-appearance: none; appearance: none;
    /* Die Hoehe steht fest, statt am Inhalt zu haengen. Ohne die native
       Darstellung zeigt ein LEERES Datumsfeld auf iOS gar nichts an (kein
       „tt.mm.jjjj" wie am Rechner) — seine Hoehe fiel dann auf das Polster
       zusammen, und dasselbe Feld war leer sichtbar flacher als gefuellt.
       Gerechnet aus denselben Variablen wie das Polster oben, damit beides
       zusammenbleibt: Zeile + Polster oben/unten + Rahmen oben/unten.
       Nebenbei behebt das eine alte Unstimmigkeit: Datumsfelder waren auch am
       Rechner 4 px hoeher als Textfelder. */
    height: calc(var(--feld-zeile) * 1em + 2 * (var(--feld-polster) + var(--feld-rahmen)));
}
input[type=date]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit,
input[type=datetime-local]::-webkit-datetime-edit { padding: 0; }
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value,
input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; }

input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(26, 123, 192, .13);
}
textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .feld-reihe { grid-template-columns: 1fr; } }

.schalter { display: flex; align-items: flex-start; gap: 9px; }
.schalter input[type=checkbox] { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--blau); flex: none; }
.schalter label { margin: 0; }

/* Datumswahl am Knopf „Erneut übertragen“ — steht in derselben Zeile wie der Knopf,
   damit die Entscheidung vor dem Klick sichtbar ist und nicht darunter wegrutscht.

   Das Formular muss hier ein Flex-Kasten mit `align-items: center` sein. Als reines
   `form.inline` (display: inline) richten sich Haken, Text und Knopf an der
   **Schriftlinie** aus — und die Grundlinie eines inline-flex-Kästchens kommt vom
   Kontrollkästchen, nicht vom Text. Gemessen sass die Zeile dadurch 2,8 px zu hoch.

   Abstände deshalb über `gap` statt über Aussenabstände: `gap` überlebt eine
   Medienabfrage, die `margin` zurücksetzt — genau daran ging der Abstand zum
   Hilfeknopf am Telefon schon einmal verloren.

   Der Selektor nennt **beide** Klassen. `form.inline { display: inline }` steht weiter
   unten in dieser Datei und hätte bei gleicher Gewichtung gewonnen — die Zeile blieb
   dadurch schief, obwohl die Regel dastand. Mit zwei Klassen entscheidet die Gewichtung
   statt der Reihenfolge, und ein späteres Umsortieren der Datei kann es nicht kippen. */
form.inline.uebertragen { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.datum-zeile { display: inline-flex; align-items: center; gap: 8px; }
.datum-wahl { display: inline-flex; align-items: center; gap: 7px;
              font-size: 14px; color: var(--grau-600); white-space: nowrap; }
.datum-wahl input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--blau); flex: none; }
@media (max-width: 720px) {
    .datum-wahl { white-space: normal; }
}

/* --- Meldungen --- */
.meldung { padding: 11px 15px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; border: 1px solid; }
.meldung-ok { background: var(--gruen-hell); border-color: #b8dfc8; color: #146138; }
.meldung-error { background: var(--rot-hell); border-color: #f0cfcb; color: #96271b; }
.meldung-info { background: var(--blau-hell); border-color: #bcd9ee; color: var(--blau-auf-hell); }
.meldung-warnung { background: var(--gelb-hell); border-color: #ecd9a6; color: #8a6508; }

/* --- Chips --- */
.chip {
    display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px;
    font-weight: 600; letter-spacing: .2px;
}
.chip-entwurf { background: var(--gelb-hell); color: var(--gelb); }
.chip-live { background: var(--gruen-hell); color: var(--gruen); }
.chip-fehler { background: var(--rot-hell); color: var(--rot); }
.chip-grau { background: var(--grau-100); color: var(--grau-600); }
/* Geplant: eigener Ton, nicht der des Entwurfs. Ein geplanter Beitrag wartet nicht
   auf eine Freigabe, sondern auf seinen Termin — das ist ein anderer Zustand. */
.chip-geplant { background: var(--blau-hell); color: var(--blau-auf-hell); }

/* Terminfeld in der Aktionsleiste. Schmaler als ein Formularfeld, aber am Telefon
   mindestens 16px Schrift: Safari auf dem iPhone zoomt beim Antippen in jedes
   kleinere Eingabefeld und laesst die Seite vergroessert zurueck. */
/* Feld und Knopf stehen nebeneinander und muessen gleich hoch sein. Sie kommen aus
   verschiedenen Rechnungen: der Knopf aus Polster und Zeilenhoehe, das Datum-Zeit-Feld
   aus der festen Hoehe fuer Datumsfelder (die es braucht, weil ein LEERES Feld auf iOS
   sonst in sich zusammenfaellt). Gemessen waren das 39 gegen 42 px.
   Statt eine dritte Zahl zu erfinden, dehnt sich das Feld hier auf die Hoehe der Zeile —
   dann stimmt es auch, wenn eines von beiden spaeter anders gepolstert wird.
   Der Doppelselektor ist Absicht: `form.inline` ist `display: inline` und steht spaeter
   in dieser Datei; bei gleicher Gewichtung gewaenne die Reihenfolge (Fund vom 20.08.). */
/* `wrap` ist Pflicht, nicht Kosmetik: Gemessen braucht die Zeile aus Beschriftung, Feld,
   Hilfeknopf und Knopf 389 px Mindestbreite — mehr als ein iPhone hergibt (375). Ohne
   Umbruch ragt sie heraus und die ganze Seite laesst sich seitlich schieben, derselbe
   Fehler wie am 18.08. Mit `wrap` streckt `stretch` jede Zeile fuer sich: nebeneinander
   sind Feld und Knopf gleich hoch, untereinander hat jedes seine eigene Hoehe. */
form.inline.termin-form { display: inline-flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.termin-form .datum-zeile,
.termin-form .datum-wahl  { align-items: stretch; flex-wrap: wrap; }
/* Die Regeln fuer `termin-feld` standen hier bis zum 21.08.2026 und galten einem einzelnen
   `datetime-local`. Seit Datum und Uhrzeit getrennt sind, kommen Breite, Schriftgroesse
   und Zoomschutz aus den `.termin-paar`-Regeln weiter unten — dieselben, die auch das
   Themenformular benutzt. Die Regeln hier waren danach verwaist und wurden entfernt;
   `bin/test-termine.php` hat das gemeldet, bevor es jemandem aufgefallen waere. */
/* `gap`, weil der Hilfeknopf seit 21.08. IN der Beschriftung sitzt: Hinter den Feldern
   landete er am Telefon allein auf einer eigenen Zeile. */
.termin-beschriftung      { display: inline-flex; align-items: center; gap: 6px;
                            color: var(--grau-600); }
/* Der runde Hilfeknopf wird nicht mitgedehnt — er soll ein Kreis bleiben. */
.termin-form .hilfe-knopf { align-self: center; }

/* Hinweiskasten fuer einen eingeplanten Beitrag. */
/* Datum und Uhrzeit im Themenformular: eine Entscheidung, also eine Zeile. Bricht am
   Telefon um, statt herauszuragen — dieselbe Lehre wie bei der Terminzeile am Artikel. */
/* `center` statt `stretch`: Hier stehen drei verschieden hohe Dinge nebeneinander
   (Feld, Wort, Feld). Gestreckt wuerde das Woertchen „um" oben kleben. */
.termin-paar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* `width: auto` ist hier Pflicht: Die Grundregel für Eingabefelder setzt `width: 100%`,
   und in einem Flex-Behälter mit Umbruch belegt das Datumsfeld damit die ganze Zeile —
   die Uhrzeit rutschte darunter, statt daneben zu stehen. Im Screenshot sofort zu sehen,
   in keiner Messung. */
/* **Mindestbreite in em, nicht `min-width: 0`.** Ein LEERES Datums- oder Zeitfeld zeigt
   auf iOS gar nichts an (kein „tt.mm.jjjj" wie am Rechner) — mit `width: auto` fiel es
   dann auf Polsterbreite zusammen und war ein Kaestchen. Die Breite darf nicht vom Inhalt
   abhaengen; in `em` zieht sie mit der groesseren Schrift am Finger mit.
   Platz fuer „31.12.2026" bzw. „08:00" plus Polster und das native Symbol. */
/* **Keine Ausfuellhilfe vom Browser erwarten.** Auf iOS zeigt Safari ein LEERES Datums-
   oder Zeitfeld voellig blank an — kein „tt.mm.jjjj", kein Symbol (Wissensdatenbank
   17.08., von Holgers Screenshot am 20.08. bestaetigt). Ein Versuch mit
   `-webkit-appearance: auto` blieb wirkungslos: In echtem WebKit gemessen sah das Feld
   davor und danach gleich aus, und auf iOS haette es das alte Breitenproblem
   zurueckgebracht.
   Die Beschriftung steht deshalb NEBEN dem Feld und kommt aus dem eigenen Markup — sie
   ist in jedem Browser da, unabhaengig davon, was das Feld selbst anzeigt. Dieselbe
   Ueberlegung wie beim KI-Label (16.08.): Wo Lesbarkeit Pflicht ist, keine Loesung
   waehlen, deren Ergebnis von der Umgebung abhaengt. */
/* --- Eigene Ausfuellhilfe fuer Datums- und Zeitfelder ---
   Was im LEEREN Feld steht, entscheidet sonst der Browser und ist ueberall anders: iOS
   zeigt gar nichts, macOS-Safari das heutige Datum (sieht aus wie ein eingestellter
   Wert), Chromium „tt.mm.jjjj". Steuern laesst sich das nicht — `-webkit-appearance`
   aendert daran nichts, in echtem WebKit gemessen.
   Der Hinweis liegt deshalb als eigenes Element ueber dem Feld. Er verschwindet, sobald
   ein Wert drinsteht, und beim Hineintippen, damit man den nativen Editor sieht. */
.feld-mit-hilfe { position: relative; display: inline-flex; flex: 0 1 auto; min-width: 0; }
.feld-hilfe {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--grau-400); pointer-events: none; white-space: nowrap;
    font-size: 14.5px; font-family: inherit;
}
/* Steht ein Wert drin, ist der Hinweis weg — beides uebereinander waere unlesbar. */
.feld-mit-hilfe:not(.ist-leer) .feld-hilfe { display: none; }
/* Im leeren Feld den nativen Text ausblenden, sonst stuende er unter dem eigenen
   Hinweis. Beim Fokus kommt er zurueck: Dort tippt man hinein und braucht ihn. */
.feld-mit-hilfe.ist-leer input::-webkit-datetime-edit { opacity: 0; }
.feld-mit-hilfe.ist-leer input:focus::-webkit-datetime-edit { opacity: 1; }
.feld-mit-hilfe.ist-leer input:focus + .feld-hilfe { display: none; }
@media (pointer: coarse) {
    /* Mit der groesseren Schrift am Finger muss der Hinweis mitziehen, sonst sitzt er
       neben dem Wert statt darauf. */
    .feld-hilfe { font-size: 16px; }
}
.termin-paar .feld-mit-hilfe input[type=date] { width: auto; min-width: 9.5em; }
.termin-paar .feld-mit-hilfe input[type=time] { width: auto; min-width: 6.5em; }
@media (pointer: coarse) {
    /* Mindestens 16px, sonst zoomt Safari auf dem iPhone beim Antippen. */
    .termin-paar input[type=date], .termin-paar input[type=time] { font-size: 16px; }
}

/* Standardzeit-Formular in der Automatik-Karte. Bricht um statt herauszuragen. */
.standardzeit-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                     margin-top: 4px; }
.standardzeit-form input[type=time] { width: auto; min-width: 6.5em; }
@media (pointer: coarse) {
    .standardzeit-form input[type=time] { font-size: 16px; }
}

.hinweis-geplant {
    margin: 0 0 18px; padding: 12px 14px;
    background: var(--blau-hell); color: var(--blau-auf-hell);
    border-radius: 8px; font-size: 14px; line-height: 1.55;
    /* Ein langer Titel oder eine Adresse darf den Kasten nicht seitlich aufschieben. */
    overflow-wrap: anywhere;
}
.chip-blau { background: var(--blau-hell); color: var(--blau-auf-hell); }

/* Kachel mit Zeichen (LinkedIn): Das Zeichen sitzt auf der Schriftlinie, nicht
   auf der Unterkante — sonst „hängt" es unter dem Wort daneben. */
.chip-mit-zeichen { display: inline-flex; align-items: center; gap: 5px; }
.chip-zeichen { flex: none; }

/* Zwei Kennzeichen nebeneinander: Blog und LinkedIn. Auf schmalen Anzeigen
   dürfen sie untereinander rutschen. */
.statuskennzeichen { display: inline-flex; gap: 6px; flex-wrap: wrap; flex: none; }

/* Für Vorleseprogramme: „LinkedIn live" statt nur „live" — das Zeichen allein
   sagt einem Screenreader nichts. */
.visuell-versteckt {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Listen --- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
    display: flex; align-items: center; gap: 12px; padding: 13px 18px;
    border-bottom: 1px solid var(--grau-200);
}
.liste li:last-child { border-bottom: 0; }
.liste li:hover { background: var(--grau-50); }
.liste .haupt { flex: 1; min-width: 0; }
.liste .titel { font-weight: 600; display: block; margin-bottom: 2px; }
.liste .neben { font-size: 13px; color: var(--grau-600); }
.liste .aktionen { display: flex; gap: 6px; flex: none; }

/* --- Sammelauswahl in Listen (Quellen) --- */
.sammel-leiste {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 9px 18px; background: var(--grau-50);
    border-bottom: 1px solid var(--grau-200);
}
.sammel-leiste label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.sammel-leiste .anzahl { font-size: 13px; color: var(--grau-600); }
.sammel-leiste .knoepfe { display: flex; gap: 6px; margin-left: auto; }
.haken { width: 17px; height: 17px; flex: none; margin: 0; accent-color: var(--blau); cursor: pointer; }
.themen-erzeugen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.themen-erzeugen label { margin: 0; font-size: 13.5px; color: var(--grau-600); }
/* Das Auswahlfeld traegt nur eine Zahl — die volle Feldbreite waere hier sinnlos. */
.themen-erzeugen select { width: auto; min-width: 8em; }
.themen-erzeugen .knopf { margin-left: auto; }
.liste li > .haken { align-self: center; }

.leer { padding: 40px 24px; text-align: center; color: var(--grau-600); }
.leer strong { display: block; color: var(--ink); margin-bottom: 5px; font-size: 15px; }

/* --- SEO-Score --- */
.score-ring { display: flex; align-items: center; gap: 15px; }
.score-zahl { font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.score-gut { color: var(--gruen); }
.score-mittel { color: var(--gelb); }
.score-schlecht { color: var(--rot); }
.faktoren { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
/* `flex-wrap: wrap` ist Pflicht, nicht Geschmack: Das `.tipp` darunter ist mit
   `flex-basis: 100%` als eigene Zeile gedacht — ohne Umbruch kann das nicht
   wirken. Hinweis*texte* fielen nicht auf, weil Text schrumpft; ein Knopf
   darin kann das nicht und ragte aus der Seite heraus. */
.faktoren li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--grau-100); }
.faktoren li:last-child { border-bottom: 0; }
.faktoren .label { color: var(--grau-600); flex: 1; }
.faktoren .wert { font-weight: 600; }
.faktoren .punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.punkt-ok { background: var(--gruen); }
.punkt-nein { background: var(--gelb); }
.faktoren .tipp { flex-basis: 100%; font-size: 12.5px; color: var(--grau-600); padding-left: 15px; }

/* --- Artikelansicht --- */
.artikel-text { font-size: 16px; line-height: 1.7; }
.artikel-text h2 { font-size: 21px; margin: 30px 0 10px; letter-spacing: -.3px; }
.artikel-text h3 { font-size: 17.5px; margin: 24px 0 8px; }
.artikel-text p { margin: 0 0 15px; }
.artikel-text ul, .artikel-text ol { margin: 0 0 15px; padding-left: 22px; }
.artikel-text li { margin-bottom: 6px; }
/* Trennlinie vor der Handlungsaufforderung am Artikelende */
.artikel-text hr { border: 0; border-top: 1px solid var(--grau-200); margin: 28px 0 20px; }
.artikel-text hr + p { font-size: 17px; }
.artikel-text[contenteditable=true] { outline: none; }
.artikel-text[contenteditable=true]:focus-within { }
.titel-eingabe {
    font-size: 25px; font-weight: 700; letter-spacing: -.4px; border: 0; padding: 0;
    width: 100%; font-family: inherit; background: transparent; line-height: 1.3;
}
.titel-eingabe:focus { outline: none; box-shadow: none; border: 0; }

/* Bearbeitungsmodus sichtbar machen */
.bearbeiten .artikel-text, .bearbeiten .titel-eingabe {
    background: #fffdf7; border-radius: 8px;
}
.bearbeiten .artikel-text { padding: 14px; border: 1px dashed var(--gelb); }
.bearbeiten .titel-eingabe { padding: 6px 10px; border: 1px dashed var(--gelb); }

.speicher-status { font-size: 13px; color: var(--grau-600); }

/* --- Beitragsbild --- */
.beitragsbild {
    width: 100%; height: auto; display: block; border-radius: 8px;
    border: 1px solid var(--grau-200); background: var(--grau-100);
}
.bild-platzhalter {
    aspect-ratio: 16 / 9; border-radius: 8px; border: 1px dashed var(--grau-200);
    background: var(--grau-50); display: flex; align-items: center; justify-content: center;
    color: var(--grau-400); font-size: 13.5px;
}

/* --- Stilwahl im Marken-Profil --- */
.stilwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 9px; }
.stil {
    display: block; border: 1px solid var(--grau-200); border-radius: 8px;
    cursor: pointer; background: var(--flaeche); font-weight: 400; margin: 0;
    /* Das Beispielbild sitzt bündig in der Kachel — ohne dies ragen die Ecken heraus. */
    overflow: hidden;
}
.stil:hover { border-color: var(--blau); }
.stil.gewaehlt { border-color: var(--blau); background: var(--blau-hell); box-shadow: 0 0 0 1px var(--blau); }
.stil input { position: absolute; opacity: 0; pointer-events: none; }
/* Polster sitzt am Text, nicht an der Kachel: sonst steht das Bild nicht bündig. */
.stil-text { display: block; padding: 11px 13px; }
.stil-name { display: block; font-weight: 600; font-size: 14px; margin-bottom: 1px; }
.stil-beschreibung { display: block; font-size: 12.5px; color: var(--grau-600); }

/* Kachel mit Beispielbild: Bild oben, eine Zeile mit dem Namen darunter. */
.stil-vorschau {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    /* Bis das Bild geladen ist, steht hier eine ruhige Fläche statt eines Sprungs. */
    background: var(--grau-100);
}
.stil.mit-bild .stil-text { padding: 8px 11px; border-top: 1px solid var(--grau-200); }
.stil.mit-bild .stil-name { margin: 0; }
/* Gewählt: die Namenszeile trägt die Farbe, damit die Auswahl auch neben sechs
   Bildern noch ins Auge fällt. Weiß auf --blau liegt bei 4,8:1. */
.stil.mit-bild.gewaehlt .stil-text {
    background: var(--blau); border-top-color: var(--blau); color: var(--weiss);
}
/* Auf dem Telefon passt bei 160 px Mindestbreite nur eine Spalte — sechs Bilder
   untereinander sind über 1.200 px Scrollweg. Zwei feste Spalten statt automatischer. */
@media (max-width: 520px) {
    .stilwahl { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stil.mit-bild .stil-name { font-size: 13px; }
}

/* --- Themenvorschläge --- */
.vorschlagsliste li { display: block; }
.vorschlag {
    display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
    cursor: pointer; margin: 0; font-weight: 400;
}
/* Der Haken sitzt auf der Höhe der ersten Textzeile, nicht in der Mitte des Blocks. */
.vorschlag .vorschlag-haken { margin: 3px 0 0; width: 16px; height: 16px; flex: none; }
.vorschlag .haupt { display: block; min-width: 0; }
.vorschlag .titel { display: block; }
/* Die Begründung ist ein ganzer Satz — sie muss umbrechen dürfen. */
.vorschlag .neben { display: block; white-space: normal; }

/* --- Systemprüfung bei der Einrichtung --- */
.pruefliste { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.pruefliste li {
    display: grid; grid-template-columns: 9px 1fr auto; gap: 4px 9px; align-items: baseline;
    padding: 8px 0; border-bottom: 1px solid var(--grau-100);
}
.pruefliste li:last-child { border-bottom: 0; }
.pruefliste .punkt { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.pruefliste .titel { color: var(--grau-900); }
.pruefliste .wert { font-weight: 600; text-align: right; white-space: nowrap; }
.pruefliste .tipp {
    grid-column: 2 / -1; font-size: 12.5px; color: var(--grau-600); line-height: 1.5;
}
.pruefliste .tipp code {
    background: var(--grau-100); padding: 1px 5px; border-radius: 4px;
    font-size: 12px; word-break: break-all;
}

/* --- Anmeldung --- */
.anmelde-seite { max-width: 400px; margin: 70px auto; padding: 0 24px; }
/* Die Einrichtungsseite trägt mehr Inhalt als das Anmeldeformular. */
.anmelde-seite.breit { max-width: 620px; margin-top: 40px; }
/* Auf der Anmelde- und Einrichtungsseite steht die Marke mittig über der Karte und
   darf etwas größer sein — dort ist sie das einzige Erkennungszeichen. */
.anmelde-seite .marke { display: flex; justify-content: center; margin-bottom: 22px; }
.anmelde-seite .marke img { height: 64px; }

/* --- Kleinkram --- */
.trenner { height: 1px; background: var(--grau-200); margin: 22px 0; }
.text-klein { font-size: 13px; color: var(--grau-600); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.quelltext {
    background: var(--grau-100); border-radius: 8px; padding: 14px; font-size: 13.5px;
    white-space: pre-wrap; word-break: break-word; max-height: 460px; overflow-y: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.55;
}
form.inline { display: inline; }

/* --- Werkzeugleiste für Textauszeichnung ---
   Erscheint über der Markierung im Artikeltext. Position setzt das Skript. */
.text-leiste {
    position: absolute; z-index: 50; display: flex; align-items: center; gap: 2px;
    background: var(--leiste-grund); border-radius: 8px; padding: 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.text-leiste[hidden] { display: none; }
.text-leiste button {
    appearance: none; background: transparent; border: 0; color: #fff;
    min-width: 30px; height: 30px; padding: 0 7px; border-radius: 6px;
    font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
}
.text-leiste button:hover, .text-leiste button:focus-visible {
    background: rgba(255, 255, 255, .18); outline: none;
}
.text-leiste-trenner {
    width: 1px; height: 18px; margin: 0 3px; background: rgba(255, 255, 255, .25);
}

/* Im Bearbeitungsmodus sichtbar machen, was ein eigener Block ist. */
body.bearbeiten .artikel-text h2,
body.bearbeiten .artikel-text h3 { position: relative; }

/* ==========================================================================
   Mobil
   ==========================================================================
   Die Anwendung wird auch am Telefon bedient. Ausgangsproblem war die
   Kopfzeile: Marke, Navigation, Benutzername und „Abmelden" standen in einer
   Reihe und ergaben auf 375 px rund 186 px Überstand — die ganze Seite ließ
   sich seitlich schieben, auf jeder Unterseite. Der Inhalt selbst passte
   bereits, gemessen über alle neun Seiten.
   ========================================================================== */

@media (max-width: 720px) {
    /* Die Kopfzeile darf umbrechen. Dafür ist sie hier nicht mehr klebend —
       zwei Zeilen dauerhaft am oberen Rand kosten auf einem Telefon zu viel
       Platz, und gescrollt wird hier ohnehin im Inhalt. */
    .kopf { position: static; }
    .kopf-inner {
        height: auto; min-height: 52px; padding: 9px 16px;
        flex-wrap: wrap; gap: 8px 10px;
    }
    /* Am Telefon steht das Logo allein in der ersten Zeile und die Navigation darunter;
       etwas kleiner, damit daneben noch Luft bleibt. */
    .marke { flex: 1 0 auto; }
    .marke img { height: 32px; }

    /* Navigation in die zweite Zeile, volle Breite, darf selbst umbrechen.
       Bewusst umbrechen statt seitlich scrollen: Was man nicht sieht, sucht
       man nicht — und die Kopfzeile ist der einzige Weg zu „Einstellungen". */
    .kopf nav {
        order: 3; flex: 1 0 100%; margin-left: 0;
        flex-wrap: wrap; gap: 4px 6px;
    }
    .kopf nav a { padding: 7px 11px; }
    /* Der Benutzername ist Beiwerk und schiebt „Abmelden" aus der Zeile. */
    .kopf nav .text-klein { margin: 0 4px 0 auto !important; }

    main { padding: 20px 16px 48px; }
    .anmelde-seite { margin: 40px auto; padding: 0 16px; }

    .seitenkopf { gap: 12px; margin-bottom: 20px; }
    .seitenkopf h1 { font-size: 22px; }
    /* Ohne das klebt der Knopf rechts am Titel statt darunter zu stehen. */
    .seitenkopf .aktionen { margin-left: 0; flex: 1 0 100%; }

    .karte-inhalt { padding: 15px; }
    .karte-kopf { padding: 12px 15px; flex-wrap: wrap; }
    .karte-kopf .aktionen { margin-left: auto; }

    .liste li { padding: 12px 15px; flex-wrap: wrap; }
    .liste .haupt { flex: 1 0 100%; }
    /* Mit Auswahlhaken darf der Titel NICHT die volle Breite nehmen — sonst
       stünde der Haken allein in einer eigenen Zeile über dem Text. */
    .liste li.waehlbar .haupt { flex: 1 1 60%; }

    /* Am Telefon eine Segmentleiste statt Unterstrich-Reiter: hinterlegt, damit sie
       sich vom Rest abhebt, und in EINER Zeile.
       Vorgeschichte: Erst wurde seitlich gescrollt — dann lag der aktive Reiter
       regelmäßig außerhalb des Bildes. Danach umgebrochen — das ergab einen
       Zweizeiler, der nach Versehen aussah (Holger, 18.08.). Jetzt passt alles in
       eine Zeile, weil zwei Beschriftungen hier ihre Kurzform tragen.
       `flex: 1 1 auto` und NICHT `1 1 0`: Bei gleicher Breite für alle bekommt
       „Übersicht“ so viel Platz wie „Themen“ und wird abgeschnitten. Nach Textlänge
       geteilt passt alles. `min-width: 0` bleibt nötig, sonst ist jedes Feld
       mindestens so breit wie sein Wort und die Leiste läuft doch wieder über. */
    .reiter {
        overflow-x: visible; gap: 2px;
        background: var(--grau-100); border: 1px solid var(--grau-200);
        border-radius: 10px; padding: 3px; margin-bottom: 20px;
    }
    .reiter a {
        flex: 1 1 auto; min-width: 0; text-align: center;
        padding: 8px 4px; font-size: 13px; border-bottom: 0; border-radius: 7px;
        overflow: hidden; text-overflow: ellipsis;
    }
    .reiter a.aktiv {
        background: var(--flaeche); color: var(--blau);
        box-shadow: 0 1px 2px rgba(35, 31, 32, .12);
    }
    .reiter-lang { display: none; }
    .reiter-kurz { display: inline; }

    .kennzahl { padding: 13px 15px; }
    .kennzahl .wert { font-size: 24px; }

    /* Die Werkzeugleiste des Editors schwebt frei und kannte bisher keine
       Grenze — auf schmalen Anzeigen lief sie aus dem Bild. */
    .text-leiste { max-width: calc(100vw - 20px); flex-wrap: wrap; }

    .pruefliste li { grid-template-columns: 9px 1fr; }
    .pruefliste .wert { text-align: left; white-space: normal; grid-column: 2; }

    /* Mit dem vierten Knopf („Duplizieren", 18.08.) passte die Aktionsleiste
       nicht mehr neben den Titel: gemessen 34 px Überstand auf 375 px. Auf dem
       Telefon steht sie deshalb unter dem Titel und darf umbrechen. */
    .liste li { flex-wrap: wrap; }
    .liste .haupt { flex: 1 1 100%; }
    /* `flex: none` allein macht die Leiste so breit wie ihr Inhalt — sie bricht
       erst um, wenn sie auch eine Breite bekommt. Beides gehört zusammen. */
    .liste .aktionen { flex: 1 1 100%; flex-wrap: wrap; }
}

/* Safari auf dem iPhone zoomt beim Antippen in jedes Eingabefeld, dessen
   Schrift kleiner als 16 px ist — die Seite bleibt danach vergrößert und muss
   von Hand zurückgeschoben werden. Deshalb hier ausdrücklich 16 px.
   **Auch `time` und `datetime-local`** — sie fehlten hier, und damit hatte ein
   Zeitfeld neben einem Datumsfeld eine andere Schriftgröße und eine andere Höhe
   (Holgers Screenshot vom 20.08.). Der Wächter in `bin/test-termine.php` prüft
   jede globale Feldregel auf Vollständigkeit; genau diese hier hatte er anfangs
   nicht im Blick. */
@media (max-width: 720px) {
    input[type=text], input[type=email], input[type=password], input[type=url],
    input[type=number], input[type=date], input[type=time], input[type=datetime-local],
    input[type=file], textarea, select {
        font-size: 16px;
    }
    input[type=file] { max-width: 100%; }
    .titel-eingabe { font-size: 21px; }
}

/* Auf Geräten ohne Mauszeiger brauchen Schaltflächen eine antippbare Größe.
   An den Zeigertyp gebunden, nicht an die Breite: Ein Tablet in Seitenlage
   wird ebenso mit dem Finger bedient. */
@media (pointer: coarse) {
    .knopf { min-height: 42px; padding: 9px 16px; }
    .knopf-klein { min-height: 38px; padding: 7px 13px; }
    .kopf nav a, .reiter a { min-height: 40px; display: inline-flex; align-items: center; }
    /* `text-align` greift bei inline-flex nicht — die Segmente brauchen es selbst. */
    .reiter a { justify-content: center; }
    .schalter input[type=checkbox] { width: 21px; height: 21px; }
}

/* Vorschlagsknopf in der Faktorenliste: eigene Zeile, wie der Hinweistext
   eingerückt, und er darf schrumpfen statt überzuhängen. */
.faktoren .faktor-aktion {
    flex: 1 0 100%; padding-left: 15px; margin-top: 2px; min-width: 0;
}
.faktoren .faktor-aktion .knopf { max-width: 100%; }

/* --- Verbesserungsvorschläge zu SEO-Punkten ---
   Der eingesetzte Vorschlag wird gelb hervorgehoben wie mit einem Textmarker.
   Rein sichtbar: <mark> wird beim Übernehmen wieder herausgelöst und ist in der
   Bereinigungs-Allowlist bewusst NICHT enthalten. */
mark.vorschlag {
    background: #fff3bf;
    box-shadow: 0 0 0 3px #fff3bf;
    border-radius: 2px;
    color: inherit;
}
/* Bei einem Feldvorschlag (Titel, Meta) markiert derselbe Ton das Eingabefeld. */
.vorschlag-feld {
    background: #fffbea !important;
    border-color: #e0b400 !important;
    box-shadow: 0 0 0 3px rgba(224, 180, 0, .18) !important;
}

/* Entscheidungsleiste. Klebt unten, damit sie beim Lesen des markierten
   Absatzes sichtbar bleibt — sonst müsste man zum Entscheiden zurückscrollen. */
.vorschlag-leiste {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 18px; z-index: 60;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    max-width: calc(100vw - 24px);
    padding: 11px 15px; border-radius: 10px;
    background: var(--flaeche); border: 1px solid var(--grau-200);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    font-size: 14px;
}
.vorschlag-leiste[hidden] { display: none; }
.vorschlag-leiste .vorschlag-text { font-weight: 600; }

@media (max-width: 720px) {
    /* Am Telefon über die volle Breite und in zwei Reihen — nebeneinander
       passen Text und zwei Knöpfe nicht. */
    .vorschlag-leiste {
        left: 8px; right: 8px; transform: none; max-width: none; bottom: 8px;
    }
    .vorschlag-leiste .vorschlag-text { flex: 1 0 100%; }
}

/* --- Hilfe: rundes Fragezeichen und Erklärkasten --- */

.hilfe-knopf {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px; padding: 0;
    border: 1px solid var(--blau); border-radius: 50%;
    background: var(--blau); color: var(--weiss);
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1;
    cursor: pointer;
}
/* Sichtbar bleibt der Knopf klein — neben einer Überschrift wäre alles andere ein
   Klotz. Der Trefferbereich für den Daumen ist es nicht: unsichtbar auf 43px
   aufgezogen, sonst trifft man ihn am Telefon nur mit dem dritten Versuch. */
.hilfe-knopf { position: relative; }
.hilfe-knopf::before { content: ""; position: absolute; inset: -12px; }
.hilfe-knopf:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.hilfe-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
/* Der Abstand im Kartenkopf gehört zur Überschrift, nicht zur Knopfreihe daneben. */
.karte-kopf .hilfe-knopf { margin-left: -6px; }
/* **6px zwischen Text und Knopf — das Hausmass.** In `.karte-kopf` kommt es aus
   `gap: 12px` minus diesem `margin-left: -6px`, in `.termin-beschriftung` aus dem `gap`.
   Wo der Knopf dagegen direkt hinter einem Wort in einer Beschriftung steht, gibt es
   keinen Flex-Abstand — dort klebte er am Text (Holgers Screenshot vom 21.08., zuerst
   an der LinkedIn-Karte aufgefallen, dieselbe Enge stand auch in der Themen-Maske).
   Eine Regel fuer beide Stellen: zwei getrennt gepflegte Abstaende laufen auseinander. */
.feld label .hilfe-knopf,
.feld .feld-titel .hilfe-knopf { margin-left: 6px; }
/* Eigene Zeile für Überschrift plus Knopf. Vorher stand der Aufruf IM <h1> — dann
   liegt auch der Erklärkasten darin und erbt die Fettschrift der Überschrift. Ausserdem
   gehören Absätze nicht in eine Überschrift. Nebeneinander gestellt statt verschachtelt. */
.titelzeile { display: flex; align-items: center; gap: 8px; }
.seitenkopf .statuskennzeichen + .hilfe-knopf { vertical-align: middle; margin-left: 6px; }

/* Fest in der Bildmitte statt am Knopf angeheftet: Ein Kasten am Knopf braucht
   Ankerpositionierung, die noch nicht überall da ist — und am Telefon ist die
   Mitte ohnehin der bessere Platz. */
.hilfe-kasten {
    display: none;
    /* inset/margin/height wie im Browser-Standard für Popover — sonst steht der
       Kasten nicht mehr mittig, sobald wir die Breite selbst setzen. */
    position: fixed; inset: 0; margin: auto; height: fit-content;
    width: calc(100% - 32px); max-width: 380px;
    padding: 18px 20px;
    border: 1px solid var(--grau-200); border-radius: var(--radius);
    background: var(--flaeche); color: var(--grau-900);
    box-shadow: var(--schatten-gross);
    /* Vollständig gesetzt statt geerbt: Der Kasten soll überall gleich aussehen,
       auch wenn er einmal neben einer fetten oder mittigen Überschrift landet. */
    font-size: 14px; line-height: 1.55; font-weight: 400; font-style: normal;
    text-align: left; letter-spacing: normal;
    z-index: 60;
    /* Heute passt jeder Text auf jedes Telefon — geprüft bis 320px. Wächst ein Text
       später an die Obergrenze, soll der Kasten scrollen statt aus dem Bild zu laufen. */
    max-height: calc(100vh - 32px); overflow-y: auto;
}
/* Zwei getrennte Regeln, keine Liste mit Komma: Kennt ein älterer Browser
   :popover-open nicht, verwirft er sonst auch die Rückfall-Regel daneben. */
.hilfe-kasten:popover-open { display: block; }
.hilfe-kasten.offen { display: block; }
.hilfe-kasten::backdrop { background: rgba(35, 31, 32, .28); }
.hilfe-kasten h3 { margin: 0 0 8px; font-size: 15px; padding-right: 40px; }
.hilfe-kasten p { margin: 0 0 10px; }
.hilfe-kasten p:last-child { margin-bottom: 0; }
/* Blauer Ring statt grauem Kreuzchen: Der Weg hinaus soll wie ein Knopf aussehen
   und nicht wie eine Verzierung — und am Daumen mit 44px sicher zu treffen sein. */
.hilfe-zu {
    position: relative; float: right; margin: -4px -6px 0 0;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--blau); border-radius: 50%;
    background: var(--flaeche); color: var(--blau);
    cursor: pointer;
}
.hilfe-zu::before { content: ""; position: absolute; inset: -7px; }
.hilfe-zu:hover { background: var(--blau); color: var(--weiss); }
.hilfe-zu:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Sehr schmale Geräte (iPhone SE und Ähnliches): Mit sechs Reitern — die sieht nur der
   Verwalter — reicht der Platz bei 13 px nicht, dann würde abgeschnitten. Eine Stufe
   kleiner statt Auslassungspunkte: Ein halbes Wort im Menü sieht kaputt aus.
   Bewusst ein eigener Block am Dateiende und nicht in den 720er hineingeschnitten —
   beim ersten Versuch schloss das die dortige Abfrage zu früh, und alle Mobilregeln
   dahinter galten plötzlich erst ab 360 px (gemessen: 814 px Überstand bei 375 px). */
@media (max-width: 360px) {
    .reiter a { font-size: 12px; padding: 8px 2px; }
}

/* --- Statistik: Verlauf und Herkunft --- */

/* Der Verlauf bekommt mehr Platz als die Herkunftsliste: Eine Kurve ueber 30 Tage
   braucht Breite, um lesbar zu bleiben, eine Liste mit sechs Zeilen nicht. */
.statistik-raster {
    display: grid; grid-template-columns: 1fr 340px;
    gap: 20px; align-items: start; margin-bottom: 22px;
}
.statistik-raster > * { min-width: 0; margin-bottom: 0; }
@media (max-width: 900px) {
    .statistik-raster { grid-template-columns: 1fr; }
}

.stat-zahlen {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; margin-bottom: 18px;
}
.stat-wert {
    font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px;
}
/* Eine schwache Lesequote wird eingefaerbt, nicht wegerklaert. Sie ist das einzige
   Warnzeichen auf der Seite und darf nicht aussehen wie jede andere Zahl. */
.stat-wert.ist-schwach { color: var(--gelb); }
/* Bewusst `block` und kein Flex: Der Hilfeknopf soll im Textfluss stehen. Als
   Flexkind sass er am Telefon neben dem umgebrochenen Text und wirkte verrutscht. */
.stat-titel { font-size: 12.5px; color: var(--grau-600); font-weight: 600; }

/* --- Verlaufsdiagramm --- */
/* Feste Hoehe statt `height: auto`: Mit dem Seitenverhaeltnis des viewBox waere das
   Diagramm am Telefon auf 99 Pixel zusammengefallen. Das SVG streckt sich stattdessen
   waagerecht (preserveAspectRatio="none"). */
.verlauf { display: block; width: 100%; height: 175px; overflow: visible; }
@media (max-width: 640px) { .verlauf { height: 145px; } }
.verlauf-flaeche { fill: var(--blau); opacity: .10; }
/* `non-scaling-stroke` haelt die Striche gleich dick, obwohl das SVG waagerecht
   gedehnt wird - ohne das waeren sie je nach Fensterbreite unterschiedlich breit. */
.verlauf path, .verlauf line { vector-effect: non-scaling-stroke; }
.verlauf-linie {
    fill: none; stroke: var(--blau); stroke-width: 2;
    stroke-linejoin: round; stroke-linecap: round;
}
.verlauf-linie-engagiert {
    fill: none; stroke: var(--gruen); stroke-width: 2;
    stroke-linejoin: round; stroke-linecap: round;
}
.verlauf-achse { stroke: var(--grau-200); stroke-width: 1; }
.verlauf-marke { stroke: var(--grau-400); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.verlauf-marke-punkt { fill: var(--grau-400); }
.verlauf-datum {
    display: flex; justify-content: space-between;
    color: var(--grau-600); font-size: 11.5px; margin-top: 3px;
}

.verlauf-legende {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    margin-top: 10px; font-size: 12.5px; color: var(--grau-600);
}
.verlauf-legende span { display: inline-flex; align-items: center; gap: 6px; }
.verlauf-legende .verlauf-stand { margin-left: auto; opacity: .85; }
@media (max-width: 640px) {
    .verlauf-legende .verlauf-stand { margin-left: 0; flex-basis: 100%; }
}
.probe { width: 11px; height: 3px; border-radius: 2px; display: inline-block; }
.probe-aufrufe { background: var(--blau); }
.probe-engagiert { background: var(--gruen); }
.probe-marke { background: var(--grau-400); width: 2px; height: 11px; }

/* --- Herkunft als Balken --- */
.balken { list-style: none; margin: 0; padding: 0; }
.balken li {
    display: grid; grid-template-columns: minmax(72px, 104px) 1fr auto;
    align-items: center; gap: 10px; padding: 6px 0;
}
/* Am Telefon ist Platz fuer den ganzen Namen. Der Hinweistext beim Ueberfahren hilft
   dort nicht weiter - es gibt keinen Mauszeiger. */
@media (max-width: 640px) {
    .balken li { grid-template-columns: minmax(96px, 132px) 1fr auto; }
}
.balken-name {
    font-size: 13px; color: var(--grau-900); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.balken-spur { background: var(--grau-100); border-radius: 4px; height: 16px; overflow: hidden; }
/* Drei Toene, die sich sicher unterscheiden lassen: leere Spur (grau), Besuche
   (halbdurchsichtiges Blau), davon gelesen (volles Blau). Mit `--blau-hell` als
   mittlerem Ton war die Balkenlaenge nicht ablesbar - er lag zu dicht am Grau der
   Spur, und damit war die Besuchszahl als Laenge unsichtbar. */
.balken-wert { display: block; height: 100%; background: rgba(26, 123, 192, .3); border-radius: 4px; }
/* Der gelesene Anteil sitzt IM Balken. Danebengestellt waere er eine zweite Zahl,
   die niemand ins Verhaeltnis setzt; hier ist das Verhaeltnis die Darstellung. */
.balken-engagiert { display: block; height: 100%; background: var(--blau); border-radius: 4px; }
.balken-zahl {
    font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap;
    display: flex; align-items: baseline; gap: 6px; justify-content: flex-end;
}
.balken-quote { font-size: 11.5px; font-weight: 500; color: var(--grau-600); min-width: 34px; }

/* ==========================================================================
   Dunkelmodus
   ==========================================================================
   Bewusst am ENDE der Datei: Die Ueberschreibungen unten (Meldungen,
   Vorschlagsmarkierung, Bearbeitungsgrund) haben dieselbe Spezifitaet wie ihre
   hellen Vorlagen. Bei gleicher Spezifitaet entscheidet die Reihenfolge - weiter
   oben eingefuegt waeren sie wirkungslos geblieben.

   Die Farbwerte selbst stehen alle in Variablen. Darunter folgen nur die
   Stellen, an denen im hellen Entwurf feste Hexwerte stecken; die kann kein
   Variablentausch erreichen. */
@media (prefers-color-scheme: dark) {

    :root {
        /* Flaechen, von hinten nach vorn */
        --grau-50:  #16181a;   /* Seitengrund */
        --flaeche:  #1d2124;   /* Karten, Kopfzeile, Eingabefelder */
        --grau-100: #23272b;   /* dezente Fuellung */
        --grau-200: #343a3f;   /* Linien und Rahmen */

        /* Schrift */
        --ink:      #e6e9eb;
        --grau-900: #f0f2f4;
        --grau-600: #a7b0b7;
        --grau-400: #7c858c;

        /* Blau: Flaeche bleibt kraeftig genug fuer weisse Schrift darauf,
           die Textfassung wird heller, die Toenung wird dunkel. */
        --blau:          #3f9ad8;
        --blau-dunkel:   #2c7fb8;
        --blau-auf-hell: #7cc2ee;
        --blau-hell:     #14324a;

        /* Statusfarben: heller, damit sie auf dunklem Grund tragen;
           die -hell-Toene werden von Pastell zu dunkler Toenung. */
        --gruen:      #4cc281;  --gruen-hell: #14311f;
        --rot:        #f0796a;  --rot-hell:   #3a1c19;
        --gelb:       #e0a92a;  --gelb-hell:  #322715;

        /* Ein Schatten aus fast schwarzem Braun ist auf dunklem Grund unsichtbar. */
        --schatten:       0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .35);
        --schatten-gross: 0 4px 16px rgba(0, 0, 0, .55);

        /* Etwas heller als der Seitengrund, sonst verschwindet die schwebende
           Leiste im Artikeltext. */
        --leiste-grund: #2f3438;
    }

    /* Meldungen: Grund kommt aus den Variablen, Rahmen und Schrift standen fest. */
    .meldung-ok      { border-color: #255f3d; color: #7fd8a4; }
    .meldung-error   { border-color: #6b322b; color: #f5a49a; }
    .meldung-info    { border-color: #245878; }
    .meldung-warnung { border-color: #5c4a1e; color: #e5c377; }
    .knopf-gefahr    { border-color: #6b322b; }

    /* Bearbeitungsmodus: das warme Off-White wird ein warmes Dunkel. */
    .bearbeiten .artikel-text,
    .bearbeiten .titel-eingabe { background: #26221a; }

    /* Vorschlagsmarkierung. `color: inherit` bleibt richtig - die helle Schrift
       traegt auf dem gedeckten Bernstein. */
    mark.vorschlag  { background: #6a5410; box-shadow: 0 0 0 3px #6a5410; }
    .vorschlag-feld { background: #3a2f12 !important; border-color: #b08a1a !important; }

    .text-leiste { box-shadow: 0 6px 20px rgba(0, 0, 0, .6); }

    /* Logo-Umschalter. Bewusst ueber CSS statt <picture>: Ein <picture> waehlt
       seine Quelle beim Laden und wechselt NICHT mehr, wenn der Nutzer sein System
       bei offener Seite umstellt - gemessen am 31.08.2026 live, das Stylesheet hatte
       da laengst umgeschaltet und das dunkle Logo stand auf hellem Grund.
       Zwei Klassen, damit die Regel `.marke img` ueberstimmt wird. */
    .marke .logo-hell   { display: none; }
    .marke .logo-dunkel { display: block; }
}