/* ---------------------------------------------------------------------------
   GZV Kleve - Impfverwaltung

   Farben und Aufteilung wie auf www.gzv-kleve.de: dunkelblaue Kopfleiste mit
   dem Vereinslogo, blauer Seitenhintergrund, weiße Inhaltsflächen, 1220 px
   Satzbreite.

   Mobil zuerst: die Erfassung passiert am Impftag auf dem Handy.
   --------------------------------------------------------------------------- */

:root {
    /* Vereinsfarben von der Webseite */
    --blau-dunkel:  #2E445A;   /* Kopfleiste, Navigation, Hauptknöpfe */
    --blau-tief:    #223549;   /* dieselbe Farbe, eine Spur dunkler (Hover)   */
    --blau:         #5B88B2;   /* Seitenhintergrund                          */
    --blau-hell:    #e9f0f7;   /* helle Flächen, erfasste Zeilen             */
    --blau-rand:    #b3c8dc;

    --gruen:        #2e6b3e;   /* nur für "erledigt"-Meldungen               */
    --gruen-hell:   #eaf3ec;
    --rot:          #a3302a;
    --rot-hell:     #fbecea;
    --gelb-hell:    #fdf6e3;
    --gelb-rand:    #e0c886;

    /* Mitgliedstypen - je Typ eine eigene Farbe, damit die Ausnahmen in
       einer langen Liste sofort ins Auge fallen. */
    --ehren:        #8a6100;   /* Gold - Ehrenmitglieder                    */
    --ehren-hell:   #fdf3dd;
    --ehren-rand:   #e3cb92;
    --jugend:       #1f5c8b;   /* Blau - Jugend                            */
    --jugend-hell:  #e6f0f8;
    --jugend-rand:  #a9c8de;
    --ruhend:       #62686f;   /* Grau - Verstorbene                       */
    --ruhend-hell:  #f0f1f2;
    --ruhend-rand:  #cfd3d7;

    --text:         #222222;
    --text-leise:   #5a6672;
    --rand:         #dbe1e8;
    --flaeche:      #ffffff;
    --hintergrund:  #5B88B2;
    --breite:       1220px;
    --radius:       6px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--hintergrund);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--blau-dunkel); }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
h1 + .unterzeile { margin-top: -.75rem; }

.unterzeile { color: var(--text-leise); margin-bottom: 1.25rem; }

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
    background: var(--blau-dunkel);
    color: #fff;
    max-width: var(--breite);
    margin: 0 auto;
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Obere Reihe: Vereinslogo links, angemeldeter Benutzer rechts. */
.kopf-oben {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .7rem 1rem .4rem;
}
.kopf-oben .kopf-rechts { margin-left: auto; }

.marke { display: block; line-height: 0; }
/* Jeder Verein laedt sein eigenes Logo hoch, und keines hat die Proportionen
   des naechsten. Darum eine Schachtel mit Hoechstmassen statt einer festen
   Breite: ein breites Logo begrenzt die Breite, ein hohes die Hoehe, und die
   Kopfleiste bleibt in beiden Faellen gleich hoch. 74 px sind genau die Hoehe,
   die das GZV-Logo bei 170 px Breite hatte - fuer den GZV aendert sich also
   nichts. */
.marke img {
    max-width: 170px;
    max-height: 74px;
    width: auto;
    height: auto;
    display: block;
}
/* Ohne Logo: der Kurzname als Schriftzug. */
.marke-schrift {
    display: block;
    line-height: 1.2;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.anwendungsname {
    color: rgba(255, 255, 255, .75);
    font-size: .95rem;
    border-left: 1px solid rgba(255, 255, 255, .3);
    padding-left: .9rem;
    margin-left: .3rem;
    align-self: center;
}

.menue {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    padding: .35rem .75rem .5rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin: 0 .3rem;
}

.menue-punkt {
    color: #fff;
    text-decoration: none;
    padding: .4rem .7rem;
    border-radius: var(--radius);
    font-size: .95rem;
    white-space: nowrap;
}
.menue-punkt:hover { background: rgba(255, 255, 255, .14); }
.menue-punkt.aktiv { background: #fff; color: var(--blau-dunkel); font-weight: 600; }

.kopf-rechts { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.benutzername { opacity: .9; color: #fff; text-decoration: none; }
.benutzername:hover { text-decoration: underline; }

/* --- Menueknopf fuers Handy ---------------------------------------------
   Auf grossen Bildschirmen unsichtbar; die Regeln, die ihn einblenden und
   das Menue einklappen, stehen unten bei den kleinen Bildschirmen und
   greifen nur, wenn JavaScript die Klasse .js-menue gesetzt hat. */

.menue-schalter {
    display: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--radius);
    padding: .55rem .6rem;
    margin-left: .5rem;
    cursor: pointer;
    /* Fingerkuppengerecht - die Seite wird am Impftag am Handy bedient. */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}
.menue-schalter:hover { background: rgba(255, 255, 255, .14); }
.menue-schalter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Die drei Striche: einer als Element, die anderen beiden davor und dahinter. */
.menue-striche,
.menue-striche::before,
.menue-striche::after {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
}
.menue-striche::before,
.menue-striche::after {
    content: '';
    position: relative;
}
.menue-striche::before { top: -6px; }
.menue-striche::after  { top: 4px; }

/* Aufgeklappt wird daraus ein Kreuz. */
.menue-schalter[aria-expanded="true"] .menue-striche { background: transparent; }
.menue-schalter[aria-expanded="true"] .menue-striche::before { top: -2px; transform: rotate(45deg); }
.menue-schalter[aria-expanded="true"] .menue-striche::after  { top: -4px; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .menue-striche,
    .menue-striche::before,
    .menue-striche::after { transition: none; }
}

/* --- Grundgeruest ------------------------------------------------------- */

.inhalt {
    max-width: var(--breite);
    margin: 0 auto;
    background: var(--flaeche);
    padding: 1.5rem 1.25rem 2rem;
    min-height: 60vh;
}

/* Anmeldung und Ersteinrichtung: kein weißer Kasten, blauer Grund bleibt sichtbar. */
.inhalt-offen { background: transparent; min-height: 0; padding-top: 2rem; }

.fuss {
    max-width: var(--breite);
    margin: 0 auto;
    padding: .9rem 1.25rem 2.5rem;
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
}
.fuss a { color: #fff; }

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.karten-reihe { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.kennzahl { font-size: 2rem; font-weight: 700; color: var(--blau-dunkel); line-height: 1.1; }
.kennzahl-titel { color: var(--text-leise); font-size: .9rem; }

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

.meldung {
    padding: .7rem .9rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border: 1px solid;
}
.meldung-ok      { background: var(--gruen-hell); border-color: #b9d6c1; color: var(--gruen); }
.meldung-fehler  { background: var(--rot-hell);   border-color: #e5b4b0; color: var(--rot); }
.meldung-hinweis { background: var(--gelb-hell);  border-color: var(--gelb-rand); color: #6b5119; }

.fehlerliste { margin: 0 0 1rem; padding: .7rem .9rem .7rem 2rem; background: var(--rot-hell); border: 1px solid #e5b4b0; border-radius: var(--radius); color: var(--rot); }
.fehlerliste li { margin: .15rem 0; }

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

.feld { margin-bottom: .9rem; }
.feld label { display: block; font-size: .88rem; color: var(--text-leise); margin-bottom: .2rem; }

input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], input[type=search], input[type=tel], select, textarea {
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 16px;             /* verhindert das Zoomen auf iPhones */
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blau-dunkel); outline-offset: 1px; border-color: var(--blau-dunkel); }

textarea { min-height: 4.5rem; resize: vertical; }

.feld-reihe { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.hinweis { color: var(--text-leise); font-size: .85rem; margin-top: .2rem; }

.ankreuz { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.ankreuz input { width: 1.1rem; height: 1.1rem; }
.ankreuz label { margin: 0; color: var(--text); font-size: 1rem; }

/* --- Schaltflaechen ----------------------------------------------------- */

.knopf {
    display: inline-block;
    padding: .55rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--blau-dunkel);
    background: var(--blau-dunkel);
    color: #fff;
    text-decoration: none;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.knopf:hover { background: var(--blau-tief); border-color: var(--blau-tief); }

.knopf-zweit   { background: #fff; color: var(--blau-dunkel); }
.knopf-zweit:hover { background: var(--blau-hell); }

.knopf-schlicht { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; padding: .3rem .7rem; font-size: .9rem; }
.knopf-schlicht:hover { background: rgba(255, 255, 255, .15); }

.knopf-gefahr { background: #fff; color: var(--rot); border-color: #e5b4b0; }
.knopf-gefahr:hover { background: var(--rot-hell); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }

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

.tabelle-rahmen { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); }

table { border-collapse: collapse; width: 100%; }

th, td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--rand); white-space: nowrap; }
th { background: #eef2f7; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-leise); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f6f9fc; }
td.breit, th.breit { white-space: normal; }

.leer { padding: 2rem 1rem; text-align: center; color: var(--text-leise); }

/* --- Werkzeugleiste (Suche + Filter) ------------------------------------ */

.werkzeuge { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.werkzeuge .suchfeld { flex: 1 1 240px; }
.werkzeuge form { display: contents; }

/* --- Erfassungsliste ---------------------------------------------------- */

.termin-kopf {
    background: var(--blau-dunkel);
    color: #fff;
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}
.termin-kopf .datum { font-size: 1.25rem; font-weight: 700; }
.termin-kopf .details { opacity: .9; font-size: .9rem; }
.termin-kopf a { color: #fff; }
/* Knoepfe im dunklen Terminkopf behalten ihre eigene Schriftfarbe. */
.termin-kopf a.knopf-zweit { color: var(--blau-dunkel); }

.zaehler { font-size: 1.6rem; font-weight: 700; }
.zaehler-titel { font-size: .8rem; opacity: .9; text-align: right; }

.erfassungsliste { list-style: none; margin: 0; padding: 0; }

.erfassungsliste li {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: .6rem .75rem;
    margin-bottom: .4rem;
}
.erfassungsliste li.da { background: var(--blau-hell); border-color: var(--blau-rand); }

.person { flex: 1; min-width: 0; }
.person .name { font-weight: 600; }
.person .anschrift { color: var(--text-leise); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; }
.person .beziehung { color: var(--blau-dunkel); font-size: .8rem; font-style: italic; }

.schalter {
    border: 1px solid var(--blau-dunkel);
    background: #fff;
    color: var(--blau-dunkel);
    border-radius: var(--radius);
    padding: .55rem 1rem;
    min-width: 6.5rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.schalter[aria-pressed="true"] { background: var(--blau-dunkel); color: #fff; }
.schalter:disabled { opacity: .5; cursor: default; }

.marke-erfasst { font-size: .8rem; color: var(--blau-dunkel); }

/* --- Etiketten ---------------------------------------------------------- */

.etikett {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 99px;
    font-size: .78rem;
    background: #eef1ef;
    color: var(--text-leise);
    border: 1px solid var(--rand);
}
.etikett-gruen { background: var(--gruen-hell); color: var(--gruen); border-color: #b9d6c1; }
.etikett-rot   { background: var(--rot-hell);   color: var(--rot);   border-color: #e5b4b0; }

/* Mitgliedstypen. Grün ist der Normalfall, alles andere hebt sich davon ab. */
.etikett-ehren  { background: var(--ehren-hell);  color: var(--ehren);  border-color: var(--ehren-rand); font-weight: 600; }
.etikett-jugend { background: var(--jugend-hell); color: var(--jugend); border-color: var(--jugend-rand); }
.etikett-grau   { background: var(--ruhend-hell); color: var(--ruhend); border-color: var(--ruhend-rand); }

/* --- Anmeldung ---------------------------------------------------------- */

.anmelde-seite { max-width: 400px; margin: 2.5rem auto; padding: 0 1rem; }
.anmelde-seite .karte { padding: 1.5rem; }
.anmelde-logo {
    display: block;
    max-width: min(230px, 70%);
    max-height: 110px;
    width: auto;
    height: auto;
    margin: 0 auto 1.25rem;
}
.anmelde-titel { text-align: center; margin-bottom: 1.5rem; color: #fff; }
.anmelde-titel h1 { color: #fff; }
.anmelde-titel .verein { color: rgba(255, 255, 255, .85); font-size: .9rem; }

/* --- Impfzeugnis: Vorschau und Druck ------------------------------------ */

.zeugnis-blatt {
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 2rem;
}
.zeugnis-blatt h2.zeugnis-titel { text-align: center; font-size: 1.4rem; margin: 0 0 1.5rem; }
.zeugnis-blatt table { font-size: .9rem; }
.zeugnis-blatt th, .zeugnis-blatt td { border: 1px solid #ccc; white-space: normal; }

/* Bei vielen Terminspalten darf die Tabelle seitlich scrollen, die Seite nicht. */
.zeugnis-tabelle-rahmen { overflow-x: auto; }

/* Eine Spalte je Impftermin: schmal, zentriert. */
.zeugnis-tabelle .termin-spalte { text-align: center; width: 4.5rem; white-space: nowrap; }
.zeugnis-tabelle th.termin-spalte { font-size: .72rem; letter-spacing: 0; }
.zeugnis-tabelle td.termin-spalte { font-weight: 700; }

@media print {
    .kopf, .fuss, .nicht-drucken { display: none !important; }
    body { background: #fff; font-size: 11pt; }
    .inhalt { max-width: none; padding: 0; background: #fff; }
    .zeugnis-blatt { border: none; padding: 0; border-radius: 0; }
    .zeugnis-tabelle-rahmen { overflow: visible; }
    table { page-break-inside: auto; }
    tr { page-break-inside: avoid; }
    thead { display: table-header-group; }
}

/* --- Kleine Bildschirme ------------------------------------------------- */

@media (max-width: 640px) {
    .kopf-oben { padding: .5rem .6rem .3rem; }
    .marke img { max-width: 130px; max-height: 56px; }
    .marke-schrift { font-size: 1rem; }
    .anwendungsname { display: none; }
    .menue { flex-wrap: nowrap; overflow-x: auto; padding: .3rem .5rem .45rem; }
    .menue-punkt { padding: .4rem .55rem; }
    .benutzername { display: none; }

    /* Mit JavaScript: Knopf statt Menueleiste. Ohne JavaScript bleibt es bei
       der scrollbaren Leiste von oben - dann fehlt der Knopf ganz. */
    .js-menue .menue-schalter { display: inline-flex; }

    .js-menue .menue {
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: visible;
        gap: .1rem;
        padding: .4rem .5rem .6rem;
    }
    .js-menue .menue.offen { display: flex; }

    /* Aufgeklappt sind die Punkte volle Zeilen - leichter zu treffen. */
    .js-menue .menue.offen .menue-punkt {
        padding: .7rem .8rem;
        font-size: 1rem;
        border-radius: var(--radius);
    }
    .inhalt { padding: 1rem .75rem 1.5rem; }
    .schalter { min-width: 5.5rem; padding: .6rem .75rem; }
    h1 { font-size: 1.3rem; }
}

/* --- Formulare: Beschriftung und Hinweis stehen auf eigenen Zeilen ------
 *
 * Vorher war nur `.feld label` ein Blockelement, und `small` hatte gar keine
 * Regel - also inline. Wer den Umschlag `.feld` vergass, bekam die
 * Beschriftung des naechsten Feldes hinter den Hinweis des vorherigen
 * geschoben. Das galt fuer jedes neue Formular aufs Neue, darum steht die
 * Regel jetzt am Formular selbst und nicht am Umschlag.
 */
form label { display: block; }

form small,
.hinweis-klein {
    display: block;
    margin-top: .25rem;
    color: var(--text-leise);
    font-size: .85rem;
    line-height: 1.45;
}

/* Nach einem Hinweis braucht das naechste Feld Luft. */
form input + small,
form select + small,
form textarea + small { margin-bottom: .9rem; }

/* Ankreuzfelder sind die Ausnahme: dort gehoert die Beschriftung daneben. */
.ankreuz label,
.feld-schalter label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--text);
    font-size: 1rem;
}

.feld-schalter { margin-bottom: .45rem; }
.feld-schalter input[type=checkbox] { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.feld-schalter label small,
.feld-schalter label .anschrift { display: inline; margin: 0; }

/* --- Kleinigkeiten in Tabellen ------------------------------------------ */
th.zahl, td.zahl { text-align: right; }
tr.stillgelegt td { opacity: .55; }

/* Schmale Karte fuer Anmelde- und Einrichtungsformulare. */
.karte-schmal { max-width: 32rem; margin-left: auto; margin-right: auto; }

/* --- Vorlagen-Editor ----------------------------------------------------- */
/* Die Mailtexte werden hier im Browser bearbeitet. Nichtproportionale
   Schrift, weil die Texte als reiner Text verschickt werden: was im Feld
   untereinander steht, steht auch in der Mail untereinander. */

textarea.quelltext {
    width: 100%;
    min-height: 20rem;
    font-family: Consolas, "DejaVu Sans Mono", Menlo, monospace;
    font-size: .9rem;
    line-height: 1.5;
    tab-size: 4;
    resize: vertical;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

textarea.quelltext-klein { min-height: 8rem; }

/* Die Platzhalter als anklickbare Marken: ein Klick setzt sie an die Stelle,
   an der die Schreibmarke steht. Ohne JavaScript bleibt die Liste als
   Nachschlagewerk brauchbar - darum sind es Knoepfe mit Titel und nicht
   bloss Verzierung. */
.platzhalter {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .25rem 0 .9rem;
}

.platzhalter button {
    font-family: Consolas, "DejaVu Sans Mono", Menlo, monospace;
    font-size: .8rem;
    padding: .15rem .45rem;
    border: 1px solid var(--rand);
    border-radius: 3px;
    background: var(--blau-hell);
    color: var(--text);
    cursor: pointer;
}

.platzhalter button:hover {
    border-color: var(--blau);
    color: var(--blau);
}

/* Kopfzeilen der Vorlage erklaeren - schmal und ruhig, es ist Hintergrund. */
.vorlage-hilfe {
    background: var(--blau-hell);
    border-left: 3px solid var(--rand);
    padding: .6rem .8rem;
    margin: 0 0 1rem;
    font-size: .85rem;
    line-height: 1.5;
}

.vorlage-hilfe code { font-size: .85rem; }

/* Vorschau des Logos und der uebrigen Bilder in den Einstellungen. */
.bild-vorschau {
    display: inline-block;
    max-width: 100%;
    padding: .6rem;
    border: 1px solid var(--rand);
    border-radius: 4px;
    /* Schachbrett, damit man bei einem PNG sieht, was durchsichtig ist. */
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eceff1 25%, transparent 25%, transparent 75%, #eceff1 75%),
        linear-gradient(45deg, #eceff1 25%, transparent 25%, transparent 75%, #eceff1 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.bild-vorschau img { display: block; max-width: 100%; max-height: 140px; height: auto; }

/* Zweispaltige Angabentabelle (Beschriftung links, Wert rechts) - etwa der
   Probemail-Kasten in den Einstellungen. */
th.angabe { width: 14rem; vertical-align: top; }

/* Kleingedrucktes neben einer Angabe. Bisher stand das nur innerhalb von
   .person; gebraucht wird es ueberall, wo etwas nicht gesetzt ist. */
.anschrift { color: var(--text-leise); font-size: .85rem; }

/* Betreffzeile einer Vorlage: dieselbe Schrift wie der Text darunter, damit
   Platzhalter in beiden Feldern gleich aussehen. */
input.quelltext-zeile {
    font-family: Consolas, "DejaVu Sans Mono", Menlo, monospace;
    font-size: .9rem;
}

/* --- Betreiberbereich: gefaehrliche Karten ------------------------------- */
/* Eine Karte, deren Inhalt etwas Unwiderrufliches tut. Der gelbe Rahmen ist
   kein Schmuck: er soll beim Scrollen auffallen, bevor jemand den Knopf
   darin findet. */
.karte-warnung {
    border-left: 4px solid var(--gelb-rand);
    background: var(--gelb-hell);
}

/* Fehlermeldung unter einem einzelnen Feld. */
small.fehlertext { color: var(--rot); font-weight: 600; }

/* --- Handbuch ----------------------------------------------------------- */
/* Fliesstext, nicht Formular: etwas mehr Zeilenabstand, Listen mit Luft,
   und eine begrenzte Zeilenlaenge. Ueber 80 Zeichen findet das Auge beim
   Umbruch die naechste Zeile nicht mehr zuverlaessig. */

/* Dieselbe Trennung wie auf der oeffentlichen Seite: die Karte ist breit,
   der Fliesstext nicht. Vorher war die ganze Karte auf 44 rem begrenzt -
   dann steht der Text richtig, aber die Tabellen sind eingequetscht. */
.handbuch { max-width: 58rem; }
.handbuch p,
.handbuch ul,
.handbuch ol { max-width: 40rem; }
.handbuch p { line-height: 1.65; }
.handbuch h3 { margin: 1.5rem 0 .4rem; font-size: 1.05rem; }
.handbuch ul, .handbuch ol { line-height: 1.65; padding-left: 1.4rem; }
.handbuch li { margin-bottom: .4rem; }
.handbuch table { margin: .8rem 0 1.2rem; }
.handbuch code { background: var(--blau-hell); padding: .05rem .3rem; border-radius: 3px; }

/* Der Hinweiskasten im Handbuch ist eine Randbemerkung, kein Alarm. */
.handbuch .hinweis {
    border-left: 3px solid var(--blau-rand);
    background: var(--blau-hell);
    padding: .7rem .9rem;
    margin: 1rem 0;
    line-height: 1.6;
}

.inhalt-liste { line-height: 1.9; }

@media print {
    /* Gedruckt soll es ein Heft sein: jedes Kapitel auf einer neuen Seite,
       kein Kartenrahmen, und die Sprungmarken-Liste faellt weg. */
    .handbuch {
        max-width: none;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0 0 1.5rem;
        break-before: page;
    }
    .handbuch:first-of-type { break-before: auto; }
    .handbuch h2 { break-after: avoid; }
    .handbuch h3 { break-after: avoid; }
    .handbuch .hinweis { background: none; border-left: 2px solid #999; }
    .handbuch code { background: none; }
}

/* --- Öffentliche Startseite --------------------------------------------- */
/*
 * Eigene Breite, NICHT die von .anmelde-seite.
 *
 * Die Seite hing zuerst an .anmelde-seite (400 px) und ueberschrieb die
 * Breite - das Ergebnis war ein schmaler Streifen in der Mitte eines breiten
 * Bildschirms. Ein Anmeldeformular will schmal sein, eine Seite mit Text und
 * Tabellen nicht.
 *
 * Dabei wollen die beiden Inhalte verschiedene Breiten, und genau das ist der
 * Trick: die SEITE ist breit, der FLIESSTEXT ist es nicht. Ueber etwa 75
 * Zeichen je Zeile findet das Auge beim Umbruch die naechste Zeile nicht mehr
 * zuverlaessig - Tabellen dagegen werden mit Platz besser lesbar, nicht
 * schlechter.
 */
.willkommen {
    max-width: 64rem;
    margin: 2.5rem auto;
    padding: 0 1rem;
}

.willkommen .karte { text-align: left; }
.willkommen .karte { padding: 1.5rem; }

/* Fliesstext auf Lesebreite, Tabellen auf ganze Kartenbreite. */
.willkommen p,
.willkommen ol,
.willkommen ul { max-width: 40rem; }

.willkommen p, .willkommen li { line-height: 1.65; }
.willkommen ol { padding-left: 1.4rem; }
.willkommen li { margin-bottom: .55rem; }
.willkommen h3 { margin: 1.4rem 0 .5rem; font-size: 1.05rem; }

/* In den zwei Toren oben steht nur ein Satz - der darf die Karte ausfuellen. */
.tore p { max-width: none; }

/* Die zwei Wege hinein, nebeneinander auf dem Rechner und untereinander auf
   dem Handy. Gleiche Hoehe, damit keiner wichtiger aussieht als er ist. */
.tore {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tore .tor { margin: 0; display: flex; flex-direction: column; }
.tore .tor p:last-child { margin-top: auto; margin-bottom: 0; }

@media (max-width: 640px) {
    .tore { grid-template-columns: 1fr; }
}

/* Zurueck zur Erklaerung, von den Anmeldeseiten aus. Leise - wer sich
   anmelden will, soll davon nicht abgelenkt werden. */
.anmelde-zurueck {
    text-align: center;
    margin-top: 1.25rem;
    font-size: .9rem;
}
.anmelde-zurueck a { color: rgba(255, 255, 255, .85); }

/* --- Vertragsdokumente (AV-Vertrag, TOM-Anlage) ------------------------- */
/* Sie werden gedruckt und unterschrieben, nicht am Bildschirm gelesen.
   Darum durchnummerierte Absätze, Lesebreite und saubere Seitenumbrüche. */

.vertrag { max-width: 50rem; }
.vertrag ol { padding-left: 1.5rem; }
.vertrag ol > li { margin-bottom: .6rem; }
.vertrag h3 { margin-top: 1.8rem; }

/* Eine Leerstelle, die noch auszufüllen ist. Auf dem Bildschirm gelb
   hinterlegt, gedruckt nur unterstrichen - auf Papier gibt es kein Gelb,
   und eine Lücke muss man auch dort sehen. */
.luecke {
    background: var(--gelb-hell);
    border-bottom: 1px solid var(--gelb-rand);
    padding: 0 .2rem;
    font-style: italic;
    color: var(--text-leise);
}

/* Zwei Unterschriftsfelder nebeneinander. */
.unterschriften {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 2.5rem;
    font-size: .9rem;
    break-inside: avoid;
}

.unterschriften .linie {
    border-bottom: 1px solid var(--text);
    margin: 2.5rem 0 .4rem;
}

@media (max-width: 640px) {
    .unterschriften { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media print {
    .vertrag {
        max-width: none;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0 0 1.5rem;
        break-before: page;
    }
    .vertrag:first-of-type { break-before: auto; }
    .vertrag h2, .vertrag h3 { break-after: avoid; }
    .luecke { background: none; font-style: normal; color: inherit; }
}

/* --- Marke der Installation --------------------------------------------- */
/* Das Logo hat keinen Alphakanal - sein Weiss ist deckend. Statt es muehsam
   freizustellen (was den weissen Huehnerkopf mitnehmen wuerde) bekommt es
   eine eigene weisse Flaeche. Rund, mit etwas Schatten: dann sieht es auf dem
   blauen Grund aus wie ein Zeichen und nicht wie ein vergessenes Rechteck. */

.markenbild {
    text-align: center;
    margin: 0 auto 1.25rem;
}

.markenbild img {
    width: 128px;
    height: 128px;
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    padding: .6rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.markenbild-klein img { width: 96px; height: 96px; }

@media (max-width: 640px) {
    .markenbild img { width: 96px; height: 96px; }
}

/* In der dunklen Leiste des Betreiberbereichs: klein und rund, damit das
   weisse Quadrat nicht auffaellt. */
.marke-leiste {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.marke-leiste img {
    background: #fff;
    border-radius: 50%;
    padding: 2px;
}