/* ==========================================================================
   components.css – wiederverwendbare Bausteine
   Karten, Einsatzlisten, Buttons, Formulare, Meldungen, Tabellen
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */

.button {
    display: inline-block;
    /* 11 statt 10: Mit 10 war der Knopf 43 Pixel hoch und blieb damit einen
       Pixel unter den 44, die Apple und Google empfehlen. */
    padding: 11px 22px;
    border: 1px solid var(--farbe-primaer);
    border-radius: var(--radius);
    background-color: var(--farbe-primaer);
    color: var(--farbe-hell);
    font-family: var(--schrift-text);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.button:hover,
.button:focus {
    background-color: var(--farbe-primaer-hell);
    border-color: var(--farbe-primaer-hell);
    color: var(--farbe-hell);
    text-decoration: none;
}

.button--sekundaer {
    background-color: transparent;
    color: var(--farbe-primaer);
}

.button--sekundaer:hover,
.button--sekundaer:focus {
    background-color: var(--farbe-primaer);
    color: var(--farbe-hell);
}

.button--gefahr {
    background-color: var(--farbe-fehler);
    border-color: var(--farbe-fehler);
}

.button--gefahr:hover,
.button--gefahr:focus {
    background-color: #a01d1d;
    border-color: #a01d1d;
}

.button--klein {
    padding: 6px 14px;
    font-size: 13px;
}

/* Knopf, der allein ein Symbol traegt: quadratisch statt breit, das Symbol
   mittig. Wofuer er da ist, sagt sein aria-label - sichtbaren Text hat er
   nicht. Die Strichfarbe des Symbols kommt ueber currentColor vom Knopf, so
   folgt es dem Farbwechsel beim Ueberfahren. Groesse und Farbe stehen im SVG
   selbst nicht fest, damit sie hier zentral bleiben. */
.button--symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
}

.button--symbol svg {
    width: 17px;
    height: 17px;
}

.button-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-s);
    align-items: center;
}

/* --- Karten -------------------------------------------------------------- */

.karte {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--farbe-hell);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

.karte:hover {
    box-shadow: var(--schatten-hoch);
    transform: translateY(-2px);
}

.karte__bild {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: var(--farbe-flaeche-alt);
}

.karte__inhalt {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--abstand-m);
}

.karte__titel {
    margin-bottom: var(--abstand-s);
    font-size: 19px;
}

.karte__text {
    flex: 1;
    color: var(--farbe-text-leise);
    font-size: 15px;
}

.karte__fuss {
    margin-top: var(--abstand-m);
}

/* --- Abschnittsüberschrift ----------------------------------------------- */

.abschnitt__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--abstand-s);
    margin-bottom: var(--abstand-l);
    padding-bottom: var(--abstand-s);
    border-bottom: 2px solid var(--farbe-flaeche-alt);
}

.abschnitt__kopf h2 {
    margin: 0;
}

/* --- Einsätze ------------------------------------------------------------ */

.einsatz-liste {
    display: grid;
    gap: var(--abstand-m);
}

.einsatz-karte {
    /* Bezug fuer den aufgespannten Verweis des Titels - siehe unten. */
    position: relative;
    display: flex;
    gap: var(--abstand-m);
    padding: var(--abstand-m);
    background-color: var(--farbe-hell);
    border: 1px solid var(--farbe-linie);
    border-left: 5px solid var(--farbe-sonstiges);
    border-radius: var(--radius);
    transition: box-shadow var(--transition);
}

.einsatz-karte:hover {
    box-shadow: var(--schatten-hoch);
}

.einsatz-karte--brand    { border-left-color: var(--farbe-brand); }
.einsatz-karte--hilfe    { border-left-color: var(--farbe-hilfe); }
.einsatz-karte--sonstiges{ border-left-color: var(--farbe-sonstiges); }
.einsatz-karte--neutral  { border-left-color: var(--farbe-neutral); }

.einsatz-karte__symbol {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--farbe-flaeche);
}

.einsatz-karte__symbol img,
.einsatz-karte__symbol svg {
    width: 28px;
    height: 28px;
}

.einsatz-karte__inhalt {
    flex: 1;
    min-width: 0;
}

.einsatz-karte__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-s);
    margin-bottom: var(--abstand-xs);
}

.einsatz-karte__nummer {
    font-family: var(--schrift-headline);
    font-weight: 700;
    color: var(--farbe-primaer);
}

/* Zeigt in der Liste, dass zum Einsatz ein Bericht oder Bilder gehoeren. */
/* Die drei Hinweissymbole eines Einsatzes - ein eigener Block, weil sie in
   der Einsatzkarte und in der Kurzliste der Startseite stehen (siehe
   ansicht/teile/einsatz-hinweise.php).

   flex: 0 0 auto haelt sie in der Kurzliste zusammen: Dort ist die Zeile eine
   Flex-Reihe, der Text dazwischen nimmt den Platz ein, und die Symbole
   stehen damit von sich aus rechts. */
.einsatz-hinweise {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--abstand-xs);
}

.hinweis-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--farbe-flaeche);
    color: var(--farbe-primaer);
}

.hinweis-symbol svg {
    width: 15px;
    height: 15px;
}

/* Der Titel ist der Weg in den Einsatz - und zwar von der ganzen Karte aus:
   Sein Verweis spannt sich mit einem leeren ::after unsichtbar ueber die
   Kachel. Ein <a> um die ganze Karte zu legen ginge nicht, im angemeldeten
   Zustand stehen Knoepfe und Formulare darin - ein Verweis um einen Knopf
   ist ungueltiges HTML. So bleibt es bei genau einem Verweis: Tastatur und
   Bildschirmleser sehen unveraendert den Titel als sein Name, nur die
   Trefferflaeche ist die Kachel.

   Der Titel behaelt seine Mindesthoehe: Wer mit der Tastatur navigiert,
   sieht den Fokusrahmen am Titel und nicht um die halbe Karte. */
.einsatz-karte__titel a {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
}

.einsatz-karte__titel a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
}

.einsatz-karte__titel {
    margin: 0 0 var(--abstand-xs);
    font-family: var(--schrift-text);
    font-size: 17px;
    font-weight: 400;
    color: var(--farbe-text);
}

.einsatz-karte__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-m);
    font-size: 14px;
    color: var(--farbe-text-leise);
}

/* Eine Ebene ueber dem aufgespannten Verweis - sonst waeren Bearbeiten,
   Zurueckziehen und Loeschen nicht mehr zu treffen. */
.einsatz-karte__aktionen {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xs);
    justify-content: center;
}

/* Kompakte Darstellung für die Startseite */
.einsatz-kurzliste {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--farbe-linie);
}

.einsatz-kurzliste li {
    margin: 0;
    border-bottom: 1px solid var(--farbe-linie);
}

.einsatz-kurzliste a {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    padding: 14px var(--abstand-s);
    color: var(--farbe-text);
    text-decoration: none;
}

.einsatz-kurzliste a:hover {
    background-color: var(--farbe-flaeche);
    color: var(--farbe-primaer);
}

/* Das Stichwort bekommt eine feste Mindestbreite, damit die Einsatznummern
   daneben in einer Flucht beginnen.

   Ohne sie richtet sich der Textanfang jeder Zeile nach der Laenge ihres
   Stichworts: "S" ist 28 Pixel breit, "H-09Y" 56 - die Nummern staffeln sich
   dann treppenartig und die Liste verliert ihre senkrechte Kante.

   9ch fasst fuenf Zeichen, also jedes vorkommende Stichwort. Gemessen wird in
   der Schrift des Etiketts selbst, sodass der Wert bei einer Schriftaenderung
   nicht nachgezogen werden muss. Ein laengeres Stichwort - freier Text ist
   erlaubt - schiebt seine Zeile weiter nach rechts, statt abgeschnitten zu
   werden: Ein unleserliches Stichwort waere der schlechtere Tausch. */
.einsatz-kurzliste .etikett {
    flex: 0 0 auto;
    min-width: 9ch;
    text-align: center;
}

.einsatz-kurzliste__text {
    flex: 1;
    min-width: 0;
}

/* --- Etiketten (Stichwort / Kategorie) ----------------------------------- */

.etikett {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: var(--farbe-flaeche-alt);
    color: var(--farbe-text);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.etikett--brand     { background-color: var(--farbe-brand);     color: #fff; }
.etikett--hilfe     { background-color: var(--farbe-hilfe);     color: #fff; }
.etikett--sonstiges { background-color: var(--farbe-sonstiges); color: #fff; }
.etikett--neutral   { background-color: var(--farbe-neutral);   color: #fff; }

/* --- Jahresfilter -------------------------------------------------------- */

.jahr-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-s);
    margin: 0 0 var(--abstand-l);
    padding: 0;
    list-style: none;
}

.jahr-filter a {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    color: var(--farbe-text);
    font-size: 15px;
}

.jahr-filter a:hover,
.jahr-filter .ist-aktiv a {
    background-color: var(--farbe-primaer);
    border-color: var(--farbe-primaer);
    color: var(--farbe-hell);
    text-decoration: none;
}

/* --- Kennzahlen ---------------------------------------------------------- */

.kennzahlen {
    display: grid;
    /* Passt sich der Anzahl der Kacheln an, ohne Lücke am Zeilenende. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--abstand-m);
}

.kennzahl {
    /* Waagerecht mittig, senkrecht am oberen Rand: Die Kacheln tragen
       unterschiedlich viel unter ihrer Zahl. Wuerde der Inhalt mittig sitzen,
       stuenden die Zahlen auf verschiedenen Hoehen und die Reihe verlore ihre
       Linie. So beginnen alle drei gleich weit oben. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--abstand-xs);
    padding: var(--abstand-m);
    background-color: var(--farbe-flaeche);
    border-radius: var(--radius);
    text-align: center;

    /* Jede Kachel ist als Ganzes ein Verweis: auf die Einsaetze, auf die
       Gruppen, auf die Fahrzeuge. Nicht nur die Beschriftung, denn am Handy
       trifft der Finger die Zahl und nicht die kleine Zeile darunter. Die
       Textfarben stehen an den Teilen selbst - der Verweis darf sie nicht
       ueberschreiben. */
    color: inherit;
    transition: box-shadow var(--transition), transform var(--transition);
}

/* Dasselbe Anheben wie bei den Karten - so ist ohne Ausprobieren zu sehen,
   dass es hier weitergeht. Der Unterstrich, den Verweise sonst bekommen,
   liefe quer durch die ganze Kachel. */
.kennzahl:hover,
.kennzahl:focus {
    box-shadow: var(--schatten-hoch);
    transform: translateY(-2px);
    text-decoration: none;
}

.kennzahl__wert {
    display: block;
    font-family: var(--schrift-headline);
    font-size: 34px;
    font-weight: 700;
    color: var(--farbe-primaer);
    line-height: 1.1;
}

.kennzahl__text {
    font-size: 14px;
    color: var(--farbe-text-leise);
}

/* --- Kuchendiagramm der Einsatzarten (Startseite) ------------------------- */

/* Etwas mehr Luft ueber dem Bild als zwischen Zahl und Beschriftung - aber
   nur dort. Als Abstand der ganzen Kachel wuerde er auch die Beschriftung
   nach unten schieben, und die stuende dann tiefer als bei den Nachbarn. */
.einsatzarten {
    margin-top: var(--abstand-xs);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-m);
}

.einsatzarten__bild {
    display: block;
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
}

/* Der Strich in der Farbe der Kachelflaeche setzt die Stuecke voneinander ab.
   Eine dunkle Trennlinie waere ein eigener Strich im Bild; so entsteht nur
   eine Luecke. */
.einsatzarten__stueck {
    stroke: var(--farbe-flaeche);
    stroke-width: 2;
}

.einsatzarten__stueck--brand     { fill: var(--farbe-brand); }
.einsatzarten__stueck--hilfe     { fill: var(--farbe-hilfe); }
.einsatzarten__stueck--sonstiges { fill: var(--farbe-sonstiges); }

/* Bezeichnung links, Zahl rechts - die Aufschluesselung unter einer Kennzahl.
   Beim Diagramm ist es die Legende, die zugleich die Zahlen traegt: Damit
   haengt die Zuordnung nicht allein an der Farbe. Bei den Fahrzeugen ist es
   die Liste der Ausrueckungen. */
.kachel-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.kachel-liste li {
    display: flex;
    align-items: center;
    gap: var(--abstand-xs);
    font-size: 13px;
    line-height: 1.9;
}

/* Wenige Eintraege unter der Kennzahl: eine Spalte, in der Breite begrenzt,
   damit Bezeichnung und Zahl nicht ueber die ganze Kachel auseinanderklaffen. */
.kachel-liste--schmal {
    align-self: stretch;
    max-width: 200px;
    margin: var(--abstand-xs) auto 0;
}

/* Viele Eintraege unter der Kennzahl: zwei Spalten ueber die Kachelbreite -
   fuenf Fahrzeuge untereinander machten die Kachel deutlich hoeher als ihre
   Nachbarn.

   Zeilenweise gefuellt, nicht spaltenweise: So bleibt beim Lesen von links
   nach rechts die Reihenfolge der Fahrzeugseite erhalten. */
.kachel-liste--zweispaltig {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--abstand-m);
    align-self: stretch;
    margin-top: var(--abstand-xs);
}

.einsatzarten__punkt {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.einsatzarten__punkt--brand     { background-color: var(--farbe-brand); }
.einsatzarten__punkt--hilfe     { background-color: var(--farbe-hilfe); }
.einsatzarten__punkt--sonstiges { background-color: var(--farbe-sonstiges); }

.kachel-liste__name {
    color: var(--farbe-text-leise);
}

/* Die Zahl traegt Textfarbe, nicht die Farbe ihres Stuecks: Farbiger Text
   neben einem farbigen Punkt liest sich schlechter, nicht besser. */
.kachel-liste__zahl {
    margin-left: auto;
    padding-left: var(--abstand-s);
    font-weight: 400;
    color: var(--farbe-text);
    font-variant-numeric: tabular-nums;
}

/* Sagt, was die Zahlen der Liste darueber bedeuten. Kleiner als die
   Beschriftung der Kennzahl - es ist eine Erlaeuterung, keine zweite
   Ueberschrift. */
.kennzahl__fussnote {
    font-size: 12px;
    color: var(--farbe-text-leise);
}

/* --- Formulare ----------------------------------------------------------- */

.formular {
    max-width: 720px;
}

.formular--breit {
    max-width: none;
}

.feld {
    margin-bottom: var(--abstand-m);
}

.feld__label {
    display: block;
    margin-bottom: var(--abstand-xs);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--farbe-text);
}

.feld__pflicht {
    color: var(--farbe-fehler);
}

.feld__hinweis {
    display: block;
    margin-top: var(--abstand-xs);
    font-size: 13px;
    color: var(--farbe-text-leise);
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="number"],
.feld input[type="url"],
.feld input[type="date"],
.feld input[type="time"],
.feld input[type="datetime-local"],
.feld select,
.feld textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background-color: var(--farbe-hell);
    color: var(--farbe-text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    transition: border-color var(--transition);
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
    border-color: var(--farbe-primaer-hell);
    outline: none;
}

.feld textarea {
    min-height: 160px;
    resize: vertical;
}

.feld--fehler input,
.feld--fehler select,
.feld--fehler textarea {
    border-color: var(--farbe-fehler);
}

.feld__fehler {
    display: block;
    margin-top: var(--abstand-xs);
    font-size: 13px;
    color: var(--farbe-fehler);
}

.feld-gruppe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--abstand-m);
}

.checkbox-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--abstand-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkbox-liste label {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    font-size: 15px;
}

.formular__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-s);
    align-items: center;
    margin-top: var(--abstand-l);
    padding-top: var(--abstand-m);
    border-top: 1px solid var(--farbe-linie);
}

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

.meldung {
    margin-bottom: var(--abstand-m);
    padding: 12px var(--abstand-m);
    border-left: 4px solid var(--farbe-primaer);
    border-radius: var(--radius);
    background-color: var(--farbe-flaeche);
    font-size: 15px;
}

.meldung--erfolg {
    border-left-color: var(--farbe-erfolg);
    background-color: #eaf4ea;
    color: #1e5620;
}

.meldung--fehler {
    border-left-color: var(--farbe-fehler);
    background-color: #fbeaea;
    color: #8c1f1f;
}

/* --- Fehleruebersicht am Formularanfang ---------------------------------- */

/* Sie steht als .meldung--fehler, bringt aber eine Liste mit. Der Kasten
   bekommt den Fokus (siehe teile/fehler-uebersicht.php) - der Rahmen zeigt
   dann, wohin er gesprungen ist. */
.fehler-uebersicht {
    margin-bottom: var(--abstand-l);
}

.fehler-uebersicht__kopf {
    margin-bottom: var(--abstand-xs);
    font-weight: 700;
}

.fehler-uebersicht__liste {
    margin: 0;
    padding-left: 20px;
}

.fehler-uebersicht__liste li {
    margin-bottom: 0;
}

/* Die Verweise tragen die Farbe der Meldung, nicht das Blau der Seite: Ein
   blauer Verweis auf rotem Grund liest sich schlechter, und dass es Verweise
   sind, sagt hier die Unterstreichung. */
/* Eine Verweisliste, kein Satz - also je Eintrag ein eigenes Ziel. */
.fehler-uebersicht__liste a {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    color: inherit;
    text-decoration: underline;
}

.fehler-uebersicht__liste a:hover,
.fehler-uebersicht__liste a:focus {
    color: inherit;
    text-decoration: none;
}

/* --- Tabellen ------------------------------------------------------------ */

.tabelle-wrapper {
    overflow-x: auto;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.tabelle th,
.tabelle td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--farbe-linie);
    text-align: left;
    vertical-align: top;
}

.tabelle th {
    width: 38%;
    font-weight: 400;
    color: var(--farbe-text-leise);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 13px;
}

.tabelle tr:last-child th,
.tabelle tr:last-child td {
    border-bottom: 0;
}

/* --- Textseiten ---------------------------------------------------------- */

.textseite {
    max-width: 780px;
    margin: 0 auto;
}

.textseite h2 {
    margin-top: var(--abstand-l);
}

.textseite__bild {
    width: 100%;
    margin-bottom: var(--abstand-l);
    border-radius: var(--radius);
}

.bild-unterschrift {
    margin-top: var(--abstand-xs);
    font-size: 13px;
    color: var(--farbe-text-leise);
    text-align: center;
}

/* --- Einbettungen (Kalender, Karte) -------------------------------------- */

.einbettung {
    position: relative;
    width: 100%;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--farbe-flaeche);
}

.einbettung iframe {
    display: block;
    width: 100%;
    border: 0;
}

.einbettung--kalender iframe { height: 620px; }
.einbettung--karte iframe    { height: 380px; }

/* --- Kontaktblock -------------------------------------------------------- */

.kontakt-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--abstand-l);
    align-items: start;
}

.kontakt-daten {
    padding: var(--abstand-m);
    background-color: var(--farbe-flaeche);
    border-radius: var(--radius);
}

/* --- Anpassung an kleinere Bildschirme ----------------------------------- */

/* Die Kennzahlen brauchen keine eigene Regel mehr: auto-fit ordnet sie
   selbstständig um. */

@media (max-width: 767px) {
    .feld-gruppe    { grid-template-columns: minmax(0, 1fr); }
    .kontakt-block  { grid-template-columns: minmax(0, 1fr); }

    /* In der Kurzliste der Startseite konkurrieren Etikett, Text und bis zu
       drei Hinweissymbole um 343 Pixel. Der engere Abstand gibt dem Text
       gut 16 Pixel zurueck. */
    .einsatz-kurzliste a {
        gap: var(--abstand-s);
    }

    /* Und die Symbole stehen untereinander statt nebeneinander: So sind sie
       22 statt 82 Pixel breit, die Textspalte waechst von 176 auf 228 Pixel,
       und der Stapel (drei mal 22 plus zwei Abstaende) passt in die Hoehe,
       die die Zeile ohnehin braucht.

       Gemessen bei 375 Pixeln: 156 statt 182 Pixel Zeilenhoehe bei langer
       Bezeichnung, 102 statt 105 bei kurzer, unveraendert bei einem Symbol.
       In der Einsatzkarte bleiben sie nebeneinander - dort ist Platz. */
    .einsatz-kurzliste .einsatz-hinweise {
        flex-direction: column;
    }

    .einsatz-karte {
        flex-wrap: wrap;
    }

    /* Auf dem Handy stehen die drei Knoepfe nebeneinander unter dem Inhalt,
       nicht als schmale Spalte daneben - dafuer bricht .einsatz-karte um.

       Sie muessen dabei selbst umbrechen duerfen: Bearbeiten, Veroeffentlichen
       und Loeschen brauchen zusammen 388 Pixel, bei 375 Pixeln Fensterbreite
       stehen aber nur 343 zur Verfuegung. Ohne flex-wrap blieben sie in einer
       Zeile und schoben die Karte auf 418 Pixel - die ganze Seite liess sich
       dann seitwaerts schieben, Kopf und Fuss mit. Schrumpfen hilft hier
       nicht: "Veroeffentlichen" ist so lang, wie es ist. */
    .einsatz-karte__aktionen {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .einbettung--kalender iframe { height: 520px; }
}

/* --- Hinweis vor dem Laden externer Einbettungen ------------------------- */

.einbettung__hinweis {
    padding: var(--abstand-l) var(--abstand-m);
    text-align: center;
}

.einbettung__hinweis p {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.einbettung__hinweis .button-zeile {
    justify-content: center;
}

/* --- Honigtopf gegen Spam-Bots (für Menschen unsichtbar) ----------------- */

.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Bildvorschau im Redaktionsformular --------------------------------- */

.bild-vorschau {
    max-width: 320px;
    width: 100%;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background-color: var(--farbe-flaeche-alt);
}

/* --- Schalter (Checkbox mit Beschriftung) -------------------------------- */

.schalter {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-s);
    font-size: 15px;
    cursor: pointer;
}

/* --- Zusammengehörige Felder (z. B. Upload + Auswahl) -------------------- */

.feldgruppe {
    margin: 0 0 var(--abstand-m);
    padding: var(--abstand-m);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
}

.feldgruppe__titel {
    padding: 0 var(--abstand-s);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--farbe-primaer);
}

.feldgruppe .feld:last-of-type {
    margin-bottom: 0;
}

.feldgruppe.feld--fehler {
    border-color: var(--farbe-fehler);
}

/* Dateiauswahl */

.feld input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--farbe-linie);
    border-radius: var(--radius);
    background-color: var(--farbe-flaeche);
    font-family: inherit;
    font-size: 15px;
}

.feld input[type="file"]::file-selector-button {
    margin-right: var(--abstand-m);
    padding: 6px 14px;
    border: 1px solid var(--farbe-primaer);
    border-radius: var(--radius);
    background-color: var(--farbe-hell);
    color: var(--farbe-primaer);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.feld input[type="file"]::file-selector-button:hover {
    background-color: var(--farbe-primaer);
    color: var(--farbe-hell);
}

/* --- Berichtsabschnitte im Redaktionsformular ---------------------------- */

.abschnitt-block {
    margin-bottom: var(--abstand-m);
    padding: var(--abstand-m);
    border: 1px solid var(--farbe-linie);
    border-left: 4px solid var(--farbe-primaer-hell);
    border-radius: var(--radius);
    background-color: var(--farbe-flaeche);
}

.abschnitt-block.feld--fehler {
    border-color: var(--farbe-fehler);
}

.abschnitt-block__kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-s);
    margin-bottom: var(--abstand-m);
}

.abschnitt-block__marke {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--farbe-primaer);
}

.abschnitt-block__werkzeuge {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-xs);
}

.abschnitt-block__werkzeuge button[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

/* Der Griff zum Ziehen. Er steht als `hidden` im Markup und wird erst von
   js/seite.js eingeblendet - ohne JavaScript gaebe es nichts zu ziehen.
   Deshalb hier auch keine Regel fuer [hidden]: Das erledigt der Browser. */
.abschnitt-block__griff {
    cursor: grab;
    padding: 0 6px 0 0;
    margin-right: auto;
    color: var(--farbe-text-leise);
    font-size: 20px;
    line-height: 1;
    user-select: none;
}

.abschnitt-block__griff:hover {
    color: var(--farbe-primaer);
}

.abschnitt-block__griff:active {
    cursor: grabbing;
}

/* Der Block, der gerade hängt - blass, damit die Luecke sichtbar wird. */
.abschnitt-block--zieht {
    opacity: .5;
}

/* Der Block, auf dem er landen wuerde. */
.abschnitt-block--ziel {
    border-color: var(--farbe-primaer);
    box-shadow: 0 0 0 2px var(--farbe-primaer-hell);
}

/* --- Bilder innerhalb eines Berichts ------------------------------------- */

/* Eine Reihe aufeinanderfolgender Bilder. Jedes Bild beansprucht seine
   Originalbreite; passen zwei nebeneinander, stehen sie nebeneinander,
   sonst bricht die Reihe um. Breitere Bilder werden auf die Textbreite
   verkleinert, aber nie vergrößert. */
.bericht-bilder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--abstand-m);
    margin: var(--abstand-l) 0;
}

.bericht-bild {
    margin: 0;
    /* Grundbreite ist die Originalbreite; bei Bedarf darf das Bild schrumpfen. */
    flex: 0 1 var(--bild-breite, auto);
    max-width: 100%;
}

.bericht-bild img {
    display: block;
    /* Originalbreite, aber nie breiter als der Textbereich – also nie
       vergrößert, nur bei Bedarf verkleinert. */
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

/* --- Bildslider ---------------------------------------------------------- */

/* Aufbau: eine waagrecht scrollende Buehne mit scroll-snap, Pfeile in jedem
   Bild, Vorschaubilder darunter, und je Bild eine Grossansicht, die nur als
   :target erscheint.

   Warum scroll-snap und nicht ein Schieberegister aus transform: So gleitet
   der Slider ohne eine Zeile JavaScript - ein Verweis auf ein Bild laesst den
   Browser die Buehne scrollen, und am Telefon wischt man ohnehin. js/seite.js
   hebt danach nur noch das aktive Vorschaubild hervor, faengt die Pfeile ab
   (damit die Seite nicht springt) und hoert auf Escape. */

.slider {
    margin: var(--abstand-l) 0;
}

.slider__buehne {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: var(--radius);
    background-color: var(--farbe-flaeche-alt);

    /* Die Rollbalken verstecken: Gescrollt wird ueber Pfeile, Vorschau und
       Wischen. Ein Balken unter dem Bild sieht nach Versehen aus. */
    scrollbar-width: none;
}

.slider__buehne::-webkit-scrollbar {
    display: none;
}

.slider__bild {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin: 0;
}

/* Alle Bilder teilen sich einen Platz gleicher Hoehe, und jedes passt sich
   hinein (object-fit braucht es dafuer nicht - max-width und max-height
   genuegen, und das Seitenverhaeltnis bleibt unangetastet).

   Warum ueberhaupt eine feste Hoehe: Die Buehne ist eine Flex-Reihe, alle
   Bilder sind so hoch wie das hoechste. Ein einziges Hochkantbild aus dem
   Telefon zog damit die ganze Buehne in die Laenge und liess neben den
   Querformaten graue Flaechen. Jetzt ist der Platz vorgegeben, das Hochkantbild
   steht mittig darin. */
.slider__lupe {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(220px, 46vw, 420px);
    cursor: zoom-in;
}

.slider__bild img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.slider__pfeil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;

    /* 44 Pixel, damit der Pfeil auch mit dem Finger zu treffen ist. */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--transition);
}

.slider__pfeil:hover,
.slider__pfeil:focus-visible {
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
}

.slider__pfeil--zurueck { left: var(--abstand-s); }
.slider__pfeil--vor     { right: var(--abstand-s); }

/* Sie steht am unteren Rand des Bildplatzes, damit sie bei verschieden
   langen Texten nicht auf halber Hoehe haengt - alle Bilder der Buehne sind
   gleich hoch. Ohne Unterschrift entfaellt sie ganz. */
.slider__unterschrift {
    margin-top: auto;
    padding: var(--abstand-xs) var(--abstand-s);
    font-size: 13px;
    color: var(--farbe-text-leise);
    text-align: center;
}

/* --- Vorschau unter der Buehne --- */

.slider__vorschau {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-xs);
    margin: var(--abstand-s) 0 0;
    padding: 0;
    list-style: none;
}

.slider__vorschau-platz {
    margin: 0;
}

.slider__vorschau-bild {
    display: block;
    width: 64px;
    height: 48px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--radius);
    opacity: .6;
    transition: opacity var(--transition), border-color var(--transition);
}

.slider__vorschau-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider__vorschau-bild:hover,
.slider__vorschau-bild:focus-visible {
    opacity: 1;
}

/* Das Vorschaubild des sichtbaren Bildes. Die Klasse setzt js/seite.js;
   ohne JavaScript ist keines hervorgehoben, und alle bleiben gleich gut
   anklickbar. */
.slider__vorschau-bild.ist-aktiv {
    border-color: var(--farbe-primaer);
    opacity: 1;
}

/* --- Grossansicht ------------------------------------------------------- */

/* Nur sichtbar, solange die Adresse auf sie zeigt. Ohne :target steht sie
   nicht im Weg - display: none nimmt sie auch aus der Tastaturreihenfolge. */
.slider-gross {
    display: none;
}

.slider-gross:target {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--abstand-m);
    background-color: rgba(0, 0, 0, .88);
}

/* Der Grund schliesst mit: ein Klick daneben fuehrt zurueck auf das Bild in
   der Buehne. Er liegt hinter dem Rahmen, deshalb kein z-index. */
.slider-gross__grund {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
}

.slider-gross__rahmen {
    position: relative;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
}

.slider-gross__rahmen img {
    display: block;
    max-width: 100%;

    /* Platz fuer die Unterschrift darunter lassen. */
    max-height: 82vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius);
}

.slider-gross__unterschrift {
    margin-top: var(--abstand-s);
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.slider-gross__schliessen {
    position: absolute;
    top: var(--abstand-m);
    right: var(--abstand-m);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    text-decoration: none;
}

.slider-gross__schliessen:hover,
.slider-gross__schliessen:focus-visible {
    background-color: rgba(255, 255, 255, .3);
    color: #fff;
}

@media (max-width: 767px) {
    .slider__pfeil {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }

    .slider__vorschau-bild {
        width: 52px;
        height: 40px;
    }
}

/* Wer weniger Bewegung wuenscht, bekommt den Sprung ohne Gleiten. */
@media (prefers-reduced-motion: reduce) {
    .slider__buehne { scroll-behavior: auto; }
}

/* --- Bildergalerie (z. B. Einblick in die Festschrift) ------------------- */

.bildergalerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--abstand-m);
    margin: var(--abstand-l) 0;
}

.bildergalerie__bild {
    display: block;
    overflow: hidden;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background-color: var(--farbe-flaeche-alt);
    transition: box-shadow var(--transition), transform var(--transition);
}

.bildergalerie__bild:hover {
    box-shadow: var(--schatten-hoch);
    transform: translateY(-2px);
}

.bildergalerie__bild img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* --- Zurueck-Verweis unter einem Beitrag --------------------------------- */

/* Steht allein in seinem Absatz und ist damit ein Ziel fuer sich, nicht ein
   Verweis im Fliesstext - siehe den Block darunter. */
.zurueck {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
}


/* --- Tippziele auf Geraeten mit Finger ----------------------------------- */

/*
   WCAG 2.2 verlangt in 2.5.8 (Stufe AA) mindestens 24x24 Pixel je Ziel und
   nimmt Verweise innerhalb eines Satzes aus - deren Groesse bestimmt die
   Zeilenhoehe des Textes um sie herum. Die 44x44, die meist zitiert werden,
   sind Stufe AAA (2.5.5) und die Empfehlung von Apple und Google.

   Die 24 stehen ueberall, siehe die min-height: 26px an den einzelnen
   Bausteinen. Die 44 nur hier: Sie sind gegen den Finger gedacht, und auf dem
   Schreibtisch waeren sie Gedraenge - eine Verwaltungstabelle mit 44 Pixel
   hohen Knoepfen in jeder Zeile liest sich schlechter, nicht besser.

   (pointer: coarse) trifft Telefone und Tablets. Ein Notebook mit Touchscreen
   meldet meist (pointer: fine) und faellt damit nicht darunter; wo es doch
   greift, sind groessere Ziele kein Schaden.
*/

@media (pointer: coarse) {
    /* 12 statt 6: 13 Pixel Schrift mal 1.4 Zeilenhoehe plus 24 plus Rahmen. */
    .button--klein {
        padding: 12px 14px;
    }

    .button--symbol {
        width: 44px;
        height: 44px;
    }

    .jahr-filter a {
        padding: 9px 16px;
    }

    /* Die drei Werkzeuge eines Abschnitts tragen nur ein Zeichen und waren
       38 Pixel breit - dazu 4 Pixel Abstand, und eines davon entfernt den
       Abschnitt. Beim Verschieben eines Berichts am Telefon war das zu eng. */
    .abschnitt-block__werkzeuge {
        gap: var(--abstand-s);
    }

    .abschnitt-block__werkzeuge .button {
        min-width: 44px;
    }

    /* Das Kaestchen selbst ist 13 Pixel gross; angeklickt wird das Label. */
    .checkbox-liste label,
    .schalter {
        min-height: 44px;
    }

    .einsatz-karte__titel a {
        min-height: 44px;
    }

    .zurueck,
    .fehler-uebersicht__liste a {
        min-height: 44px;
    }

    /* "Alle Einsaetze ansehen", "Alle Meldungen" - der Verweis neben einer
       Abschnittsueberschrift steht fuer sich, nicht in einem Satz. */
    .abschnitt__kopf > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Eingabefelder und Auswahllisten lagen bei 43 Pixeln - ein Pixel darunter. */
    .feld input,
    .feld select,
    .feld textarea {
        min-height: 44px;
    }
}

/* --- Wege heraus auf der Fehlerseite ------------------------------------- */

/* Waagerecht und mittig unter der Meldung - vier Ziele, keine Aufzaehlung. */
.fehler-wege {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--abstand-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fehler-wege a {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
}

@media (pointer: coarse) {
    .fehler-wege a {
        min-height: 44px;
    }
}