/**
 * TEV Template 2026 - neue Regeln.
 *
 * Wird NACH template.css geladen und ueberschreibt sie gezielt.
 * Vorteil: template.css bleibt vorerst unveraendert, jede Aenderung
 * ist hier ablesbar und laesst sich einzeln zurueckdrehen.
 * Im Laufe des Umbaus wandern Regeln von template.css hierher.
 */

/* --- Sprungmarke zum Inhalt ------------------------------------- */
.tev-skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--tev-weiss);
    color: var(--tev-text);
    font-size: var(--tev-groesse-gross);
    text-decoration: underline;
}

.tev-skiplink:focus {
    left: 0;
    outline: 3px solid var(--tev-tageseltern);
    outline-offset: 2px;
}

/* --- Sichtbarer Tastaturfokus ----------------------------------- */
:focus-visible {
    outline: 3px solid var(--tev-tageseltern);
    outline-offset: 2px;
}

/* --- Kontaktkarte per Tastatur bedienbar ------------------------ */
.mapclick {
    cursor: pointer;
}

/* ==================================================================
   Typografie 2026
   Ueberschreibt gezielt die Werte aus template.css.
   Zum Vergleichen: diesen Block auskommentieren -> alter Zustand.
   ================================================================== */

/* --- Fliesstext -------------------------------------------------- */
#content,
#content p,
#content li,
#content td,
#content th,
#content dd,
#content dt {
    font-size: var(--tev-text);
    line-height: var(--tev-zeile-normal);
    font-weight: var(--tev-gewicht-normal);
}

#content li {
    line-height: var(--tev-zeile-kompakt);
    margin-bottom: 0.4em;
}

/* --- Ueberschriften ---------------------------------------------- */
#content h1 {
    font-size: var(--tev-text-h1);
    line-height: var(--tev-zeile-eng);
    font-weight: var(--tev-gewicht-fett);
    margin: 0 0 0.6em;
}

#content h2 {
    font-size: var(--tev-text-h2);
    line-height: var(--tev-zeile-eng);
    font-weight: var(--tev-gewicht-fett);
    margin: 1.6em 0 0.5em;
}

#content h3 {
    font-size: var(--tev-text-h3);
    line-height: var(--tev-zeile-eng);
    font-weight: var(--tev-gewicht-halb);
    margin: 1.5em 0 0.4em;
}

#content h4,
#content h5,
#content h6 {
    font-size: var(--tev-text-gross);
    line-height: var(--tev-zeile-eng);
    font-weight: var(--tev-gewicht-halb);
    margin: 1.4em 0 0.4em;
}

/* erste Ueberschrift ohne Abstand nach oben */
#content > h1:first-child,
#content > h2:first-child,
#content > h3:first-child {
    margin-top: 0;
}

/* --- Links im Fliesstext ----------------------------------------- */
#content a {
    color: var(--tev-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#content a:hover,
#content a:focus {
    color: var(--tev-link-hover);
}

/* --- Hauptmenue --------------------------------------------------- */
/* 14px statt 15px: bei 15px fuellen die sechs Punkte die 720px exakt
   aus, ohne Abstand dazwischen. Sobald die Seite breiter wird, kann
   das wieder auf --tev-text-klein hoch. */
#main-navigation .nav > li > a {
    font-size: var(--tev-text-mini);
    font-weight: var(--tev-gewicht-halb);
}

/* --- Meldungsspalte ---------------------------------------------- */
#sidebar,
#sidebar p,
#sidebar div,
#sidebar li {
    font-size: var(--tev-text-klein);
    line-height: var(--tev-zeile-kompakt);
}

/* Bereichsmenue in der linken Spalte */
#sidebar a {
    font-size: var(--tev-text-klein);
    line-height: var(--tev-zeile-kompakt);
}

#sidebar h5,
#sidebar .newsflash-title {
    font-size: var(--tev-text-klein);
    line-height: var(--tev-zeile-kompakt);
    font-weight: var(--tev-gewicht-fett);
}

/* --- Fusszeile ---------------------------------------------------- */
footer,
footer p {
    font-size: var(--tev-text-mini);
    line-height: var(--tev-zeile-kompakt);
    font-weight: var(--tev-gewicht-normal);
}

footer a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Adressblock der Startseite ----------------------------------- */
/* Die Anschrift stand als <h1>/<h2>-Kaskade im Artikel (inkl. einer
   leeren Ueberschrift und dir="rtl" auf der Strasse). Korrigiert in
   Artikel 65; Sicherung unter inhalte-backup/. */
#content .tev-vereinsname {
    font-size: var(--tev-text-gross);
    font-weight: var(--tev-gewicht-halb);
    line-height: var(--tev-zeile-eng);
    margin: 0 0 1em;
}

#content .tev-anschrift {
    line-height: var(--tev-zeile-normal);
    margin: 0 0 1em;
}

/* --- Zeilenlaenge begrenzen --------------------------------------- */
/* Der Inhaltsbereich ist bei 1360px Seitenbreite 979px breit. Fliess-
   text ueber die volle Breite ergibt rund 120 Zeichen pro Zeile - das
   Auge verliert beim Zeilenwechsel die Spur. 42em sind rund 80 Zeichen.
   Tabellen, Bilder, Karte und Formulare bleiben absichtlich voll breit. */
#content p,
#content ul,
#content ol,
#content dl,
#content h1,
#content h2,
#content h3 {
    max-width: 42em;
}

/* volle Breite dort, wo sie gebraucht wird */
#content table,
#content img,
#content svg,
#content form,
#content .divTable,
#content iframe {
    max-width: 100%;
}

/* --- Startseiten-Kacheln ------------------------------------------ */
/* Vorher: .startseite #main-header hatte eine feste Hoehe von 400px,
   daraus ergaben sich Zellen von 181px. Die Bilder sind bei 305px
   Breite aber 233px hoch - 52px Ueberstand, sichtbar als Bildstreifen
   unter dem Farbbalken (overflow:hidden war "removed because IE").
   Jetzt ein Raster mit festem Seitenverhaeltnis: die Kacheln passen
   sich jeder Seitenbreite an, der Balken sitzt immer buendig unten. */

.startseite #main-header {
    height: auto;
    padding-bottom: 20px;
}

/* Jede Tabellenzeile wird ihr eigenes Raster. Frueher loeste ich die
   Zeilen mit display:contents auf - das ist in aelteren Safari-
   Versionen fehlerhaft, dort rutschen die Kacheln dann uebereinander
   und die Bilder scheinen hintereinander durch. Diese Variante kommt
   ohne display:contents aus. */
.startseite .divTable {
    display: block;
    height: auto;
    border-spacing: 0;
}

.startseite .divTableRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

/* Regelfall: tev.js hat die Tabellenzeilen aufgeloest, alle sechs
   Kacheln liegen direkt in der Tabelle - ein durchgehendes Raster. */
.startseite .divTable.tev-kachelraster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.startseite .divTableCell {
    position: relative;
    aspect-ratio: 330 / 252;   /* Seitenverhaeltnis der Kachelbilder */
    overflow: hidden;
}

.startseite .imgCell {
    overflow: hidden;
}

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

.startseite .captionCell {
    left: 0;
}

/* --- Kopfbild auf Unterseiten -------------------------------------- */
/* #main-header ist 310px hoch, das Kopfbild bei 979px Breite aber
   496px. Ohne overflow ragte es 186px in den Inhalt und lag ueber der
   Ueberschrift. Der Fehler bestand schon vorher (bei 720px waren es
   55px), faellt bei groesserer Breite nur staerker aus.
   Jetzt fuellt das Bild den Streifen formatfuellend statt ihn zu
   ueberlaufen. Hoehe ueber --tev-hoehe-kopfbild einstellbar. */
#main-header {
    height: var(--tev-hoehe-kopfbild);
    overflow: hidden;
}

#headerbild,
#headerbild .moduletable,
#headerbild .custom {
    height: 100%;
}

#headerbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Auf der Startseite steht in diesem Bereich das Kachelraster,
   dort gilt die Hoehe aus dem Kachel-Block weiter oben. */
.startseite #main-header {
    height: auto;
    overflow: visible;
}

/* ==================================================================
   Mobil: Meldungsspalte und Startseiten-Kacheln waren abgeschaltet
   ------------------------------------------------------------------
   Bisher galt unter 876px:
     #sidebar-container { display: none }
     .startseite #main-header .mod-custom { display: none !important }
   Damit sahen Besucher auf dem Smartphone von der Startseite nur Logo,
   Kopfbild und Fusszeile - weder die sechs Bereichskacheln (faktisch
   die Hauptnavigation) noch eine einzige Meldung. Das betrifft rund
   18 Prozent der Aufrufe.
   ================================================================== */

@media (max-width: 875px) {

    /* Spalten untereinander statt nebeneinander */
    #wrapper {
        flex-direction: column;
    }

    #main-container {
        order: 1;
        width: 100%;
    }

    /* Die Seitenspalte bleibt mobil ausgeblendet.
       Auf Unterseiten steht dort das Bereichsmenue - das wiederholt
       nur, was das Burger-Menue oben schon bietet, und schob sich als
       langer farbiger Block zwischen Inhalt und Fusszeile.
       Auf der Startseite stehen dort die Meldungen; die bleiben
       vorerst ebenfalls aus.
       (Die sechs Bereichskacheln sind davon nicht betroffen - die
       stehen im Kopfbereich und sind weiterhin sichtbar.) */
    #sidebar-container {
        display: none;
    }

    /* Kacheln wieder einblenden, zweispaltig */
    .startseite #main-header .mod-custom {
        display: block !important;
    }

    /* Auf der Startseite steht im Kopfbereich das Kachelraster.
       template.css legt dort eine Kette fester bzw. prozentualer
       Hoehen uebereinander: #main-header (400/250/200px je Media
       Query), #headerbild {height:100%} und
       #main-header .custom {height:100%}. Solange ein Glied dieser
       Kette eine feste Hoehe behaelt, ragt das Raster unten heraus
       und legt sich ueber den Adressblock. Deshalb hier die ganze
       Kette auf auto - !important, weil sonst je nach Fensterbreite
       eine andere der vier Altregeln gewinnt. */
    .startseite #main-header,
    .startseite #headerbild,
    .startseite #main-header .moduletable,
    .startseite #main-header .custom,
    .startseite #main-header .mod-custom {
        height: auto !important;
    }

    /* Mobil ein gleichmaessiges Raster aus zwei Spalten, drei Reihen */
    .startseite .divTable.tev-kachelraster {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Rueckfall ohne JavaScript: die Zeilenstruktur bleibt bestehen,
       drei Kacheln passen dann nicht in zwei Spalten - die dritte
       jeder Zeile nimmt deshalb die volle Breite. */
    .startseite .divTable:not(.tev-kachelraster) .divTableRow {
        grid-template-columns: repeat(2, 1fr);
    }

    .startseite .divTable:not(.tev-kachelraster) .divTableRow .divTableCell:nth-child(3) {
        grid-column: 1 / -1;
        aspect-ratio: 8 / 3;
    }

    /* kleinere Beschriftung, damit KINDERBETREUER:IN in die
       schmalere Kachel passt */
    .startseite .captionCell {
        height: 34px;
    }

    .startseite .captionCell a {
        font-size: var(--tev-text-mini);
        line-height: 34px;
    }

    /* Kopfbild-Streifen auf Unterseiten kuerzen: 310px sind auf einem
       Telefon rund 38 Prozent der Bildschirmhoehe */
    #main-header {
        height: 190px;
    }
}

@media (max-width: 600px) {
    .startseite #main-header,
    .startseite #headerbild,
    .startseite #main-header .moduletable,
    .startseite #main-header .custom,
    .startseite #main-header .mod-custom {
        height: auto !important;
    }

    /* Auf kleinen Bildschirmen lag hinter dem Kopfbereich bisher ein
       einzelnes Vereinsfoto als Hintergrundbild - der alte Ersatz
       dafuer, dass die Kacheln dort ausgeblendet waren. Jetzt sind die
       Kacheln sichtbar, und das Foto schaute nur noch durch die
       Fugen zwischen ihnen hindurch. */
    .startseite #headerbild {
        background-image: none;
    }

    /* das Modul wurde hier zusaetzlich ueber .moduletable abgeschaltet */
    .startseite #main-header .moduletable {
        display: block !important;
    }

    #main-header {
        height: 170px;
    }
}

/* --- Fusszeile --------------------------------------------------- */
/* Sie liegt seit dem Umbau eine Ebene hoeher (nicht mehr in der
   Inhaltsspalte) und muss deshalb selbst auf Seitenbreite ausgerichtet
   werden - sonst klebt sie am Fensterrand. */
footer {
    /* float:left stammt aus der Zeit, als die Fusszeile in der
       Inhaltsspalte lag. Bei einem gefloateten Element wirkt
       margin:auto nicht - die Zentrierung schlug deshalb fehl. */
    float: none;
    clear: both;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--tev-rand-seite));
    max-width: var(--tev-breite-seite);
    margin-left: auto;
    margin-right: auto;

}

/* Die Fusszeile liegt seit dem Umbau neben statt in der Inhaltsspalte.
   Damit sie trotzdem unter dem weissen Block beginnt und nicht unter
   der Seitenspalte, bekommt ihr Inhalt die Breite der Inhaltsspalte
   und wird nach rechts geschoben.
   (Ein padding-left in Prozent taugt hier nicht: Prozentwerte beim
   Innenabstand beziehen sich auf die Breite des Elternelements, nicht
   auf die der Fusszeile selbst - das ergab 403 statt 381px.) */
footer p {
    /* border-box, damit der eigene Innenabstand nicht zur Breite
       addiert wird - sonst rutscht der Text 20px nach links */
    box-sizing: border-box;
    width: var(--tev-spalte-inhalt);
    margin-left: auto;
    margin-right: 0;
}

@media (max-width: 875px) {
    /* mobil gibt es keine Seitenspalte, also auch keine Einrueckung.
       Der eigene Innenabstand entfaellt ebenfalls, sonst steht die
       Fusszeile 20px weiter rechts als der Inhalt darueber. */
    footer p {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
}