/*
 * Gemeinsame Gestaltung fuer alles, was die Module des Vereinsportals ausgeben.
 * Die Farben der Marke (Haupt-, Akzent-, Text-, Hintergrundfarbe) kommen aus
 * den Einstellungen (inc/design.php) als Variablen; die Werte hinter den
 * Kommas sind nur Rueckfall. Fest stehen nur neutrales Weiss und
 * Transparenz-Schwarz fuer Karten und Linien. Keine fremden Schriften oder
 * Bilder. Klassen beginnen mit sv-, damit sie sich mit keinem Theme beissen.
 */

/* ---- Gemeinsame Masse und Toene --------------------------------------------
 * Wirkung: ruhig und flach. Linien sind Haarlinien, Flaechen in den Farben der Marke
 * sind eine zarte Toenung statt voller Farbe; die volle Farbe bleibt dem einen
 * Hauptknopf je Kasten und kleinen Markierungen. Die Toenung wird aus den Variablen der
 * Marke berechnet (color-mix); Browser ohne color-mix zeigen ein neutrales Grau.
 * Theme und alle Module benutzen diese Werte, damit die Seite aus einem Guss wirkt. */
:root {
    --sv-linie: rgba(0, 0, 0, .08);
    --sv-radius: 12px;
    --sv-radius-klein: 8px;
    --sv-primaer-tint: rgba(0, 0, 0, .05);
    --sv-primaer-rand: rgba(0, 0, 0, .25);
    --sv-akzent-tint: rgba(0, 0, 0, .05);
    --sv-akzent-rand: rgba(0, 0, 0, .25);
}
@supports (color: color-mix(in srgb, red 10%, white)) {
    :root {
        --sv-primaer-tint: color-mix(in srgb, var(--sv-primaer-flaeche, #7a1b3c) 9%, #fff);
        --sv-primaer-rand: color-mix(in srgb, var(--sv-primaer-flaeche, #7a1b3c) 40%, #fff);
        --sv-akzent-tint: color-mix(in srgb, var(--sv-akzent-flaeche, #22b24c) 12%, #fff);
        --sv-akzent-rand: color-mix(in srgb, var(--sv-akzent-flaeche, #22b24c) 45%, #fff);
    }
}

/* ---- Raster aus Kacheln (Vereine) -------------------------------------- */
.sv-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
}
.sv-karte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.1rem .75rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--sv-linie);
    border-radius: var(--sv-radius);
}
.sv-karte-bild {
    display: grid;
    place-items: center;
    width: 100%;
    height: 90px;
}
.sv-karte-bild img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.sv-karte-initial {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sv-primaer-tint);
    color: var(--sv-primaer-text, #7a1b3c);
    font-size: 1.5rem;
    font-weight: 600;
}
.sv-karte-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}
.sv-karte-link {
    margin-top: auto;
    font-size: .875rem;
}

/* ---- Meldungen / Stoerer (Leiste oben auf der Startseite) ----------------- */
/* Zart getoent statt voll gefaerbt: Information in der Akzentfarbe, Wichtig in der Hauptfarbe (und etwas kraeftiger geschrieben). */
.sv-banner {
    margin: 1rem 0;
    padding: .7rem 1rem;
    color: var(--sv-text, #222);
    background: var(--sv-akzent-tint);
    border: 1px solid var(--sv-akzent-rand);
    border-radius: var(--sv-radius);
}
.sv-banner-wichtig {
    background: var(--sv-primaer-tint);
    border-color: var(--sv-primaer-rand);
}
.sv-banner a {
    color: var(--sv-primaer-text, #7a1b3c);
    text-decoration: underline;
}
.sv-banner-text {
    margin: 0;
    font-weight: 500;
}
.sv-banner-wichtig .sv-banner-text {
    font-weight: 600;
}
.sv-banner-stand {
    margin: .2rem 0 0;
    font-size: .8125rem;
    opacity: .7;
}

/* ---- Downloads --------------------------------------------------------- */
.sv-downloads h3 {
    margin: 1.5rem 0 .5rem;
    font-size: 1.1rem;
}
.sv-downloads ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sv-download {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--sv-linie);
}
.sv-download-titel {
    font-weight: 500;
}
.sv-download-info {
    display: block;
    font-size: .8125rem;
    opacity: .7;
}
/* Mehrere Knoepfe untereinander: in der Liste zart getoent, nicht jeder als volle Flaeche */
.sv-download .sv-knopf {
    color: var(--sv-primaer-text, #7a1b3c);
    background: var(--sv-primaer-tint, rgba(0, 0, 0, .05));
}
.sv-download .sv-knopf:hover,
.sv-download .sv-knopf:focus {
    color: var(--sv-primaer-text, #7a1b3c);
    filter: brightness(.95);
}
/* Knopf: der Hauptknopf ist gefuellt, der zweite nur umrandet. Beide gleich hoch (1 px Rand, beim gefuellten durchsichtig). */
.sv-knopf {
    display: inline-block;
    padding: .55rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--sv-primaer-flaeche, #7a1b3c);
    color: var(--sv-primaer-flaeche-kontrast, #fff);
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
}
.sv-knopf:hover,
.sv-knopf:focus {
    color: var(--sv-primaer-flaeche-kontrast, #fff);
    filter: brightness(.9);
}
.sv-knopf:focus-visible {
    outline: 2px solid var(--sv-primaer-text, #7a1b3c);
    outline-offset: 2px;
}
/* Zweiter Knopf neben dem ersten: nur feiner Rand */
.sv-knopf-zweit {
    color: var(--sv-primaer-text, #7a1b3c);
    background: transparent;
    border-color: var(--sv-primaer-rand);
}
.sv-knopf-zweit:hover,
.sv-knopf-zweit:focus {
    color: var(--sv-primaer-text, #7a1b3c);
    background: var(--sv-primaer-tint);
    filter: none;
}
/* Dasselbe als <button> (Formulare) und eine leise Variante als Textlink */
button.sv-knopf {
    font: inherit;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
}
.sv-knopf-gross {
    padding: .7rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 500;
}
.sv-knopf-leise {
    padding: .5rem 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--sv-primaer-text, #7a1b3c);
    text-decoration: underline;
    cursor: pointer;
}

/* ---- Hinweiskasten (Formulare, Statusmeldungen) ------------------------- */
/* Zart getoent mit Haarlinie; die Art steht im Text, die Farbe ist nur Beigabe. */
.sv-hinweis {
    margin: 0 0 1.25rem;
    padding: .7rem 1rem;
    background: var(--sv-akzent-tint);
    border: 1px solid var(--sv-akzent-rand);
    border-radius: var(--sv-radius-klein);
}
.sv-hinweis p {
    margin: 0;
}
.sv-hinweis-ok {
    background: rgba(47, 125, 58, .07);
    border-color: rgba(47, 125, 58, .4);
}
.sv-hinweis-fehler {
    background: rgba(179, 38, 30, .06);
    border-color: rgba(179, 38, 30, .4);
}

/* Nur fuer Hilfsmittel (Screenreader) sichtbar */
.sv-nur-leser {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Laufplan ---------------------------------------------------------- */
.sv-laufplan-kopf {
    margin: 0 0 .25rem;
}
.sv-laufplan-datum {
    margin: 0 0 1rem;
    opacity: .75;
}
.sv-laufplan {
    position: relative;
    list-style: none;
    margin: 1.25rem 0;
    padding: 0 0 0 1.75rem;
}
.sv-laufplan::before {
    content: "";
    position: absolute;
    left: calc(.55rem - 1px);   /* mittig unter den Punkten (Mitte der Punkte: .55rem) */
    top: .4rem;
    bottom: .4rem;
    width: 2px;
    border-radius: 2px;
    background: var(--sv-primaer, #1b5e7a);
    opacity: .3;
}
.sv-station {
    position: relative;
    padding: 0 0 1.1rem;
}
.sv-station::before {
    content: "";
    position: absolute;
    left: -1.75rem;
    top: .35rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--sv-primaer, #1b5e7a);
    border: 4px solid var(--sv-hintergrund, #f6f7f8);
    box-sizing: border-box;
}
.sv-station-zeit {
    display: block;
    font-weight: 600;
    color: var(--sv-primaer-text, #7a1b3c);
}
.sv-station-ort {
    font-weight: 500;
}
.sv-station-hinweis {
    display: block;
    font-size: .9rem;
    opacity: .75;
}
.sv-laufplan-plakat {
    max-width: 26rem;
    margin: 0 0 1.25rem;
}
.sv-laufplan-plakat a {
    display: block;
}
.sv-laufplan-plakat img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--sv-linie, rgba(0, 0, 0, .08));
    border-radius: var(--sv-radius, 12px);
}

/* ---- Betreiber-Angaben (Impressum) -------------------------------------- */
.sv-betreiber p {
    margin: 0 0 1rem;
}

/* ---- Allgemein --------------------------------------------------------- */
.sv-leer {
    padding: 1rem;
    border: 1px dashed rgba(0, 0, 0, .25);
    border-radius: var(--sv-radius);
    opacity: .75;
}

/* ---- App-Ansicht: keine WordPress-Verwaltungsleiste ----------------------------
   In der App-Ansicht soll die schwarze WordPress-Leiste nicht über der Seite stehen; sie gibt es nur für angemeldete Personen. Als App-Ansicht gilt
   die Handy-Darstellung mit der App-Leiste unten (bis 767 px, Grenze wie im Theme) und die installierte App (Manifest "display: standalone"),
   auch auf einem breiteren Tablet. Den Weg ins Backend zeigt "Mein Bereich" (Zum Backend), der Konto-Link bleibt in der Kopfzeile.
   Am Rechner im Browser bleibt die Leiste, wie sie ist.
   WordPress schiebt die Seite per !important nach unten (html { margin-top: 32px / 46px }), das nehmen wir mit gleicher Gewalt zurück. */
@media (display-mode: standalone), (max-width: 767px) {
    #wpadminbar {
        display: none !important;
    }
    html:root {
        margin-top: 0 !important;
    }
}

/* ---- Formulare und Angaben (gemeinsam: Standanmeldung, Konto) ------------------ */
.sv-form {
    max-width: 40rem;
}
.sv-gruppe {
    min-width: 0;   /* ein fieldset waechst sonst auf die Breite seines breitesten Inhalts und laeuft auf dem Handy ueber */
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--sv-linie, rgba(0, 0, 0, .08));
    border-radius: var(--sv-radius, 12px);
}
.sv-gruppe legend {
    padding: 0 .4rem;
    font-weight: 600;
}
.sv-feld {
    margin: 0 0 1rem;
}
.sv-feld label {
    display: block;
    margin-bottom: .25rem;
    font-weight: 500;
}
.sv-feld input[type="text"],
.sv-feld input[type="email"],
.sv-feld input[type="tel"],
.sv-feld input[type="search"],
.sv-feld input[type="password"],
.sv-feld select,
.sv-feld textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: .55rem .7rem;
    font: inherit;
    color: inherit;
    background: #fff;
    border: 1px solid #767676;
    border-radius: var(--sv-radius-klein, 8px);
}
.sv-feld textarea {
    min-height: 6rem;
}
.sv-feld input:focus,
.sv-feld select:focus,
.sv-feld textarea:focus {
    outline: 2px solid var(--sv-primaer-text, #7a1b3c);
    outline-offset: 1px;
}
.sv-feld-fehler input,
.sv-feld-fehler select,
.sv-feld-fehler textarea {
    border-color: #b3261e;
    border-width: 2px;
}
.sv-fehler {
    display: block;
    margin-top: .25rem;
    color: #b3261e;
    font-weight: 500;
}
.sv-hilfe {
    display: block;
    margin-top: .25rem;
    font-size: .875rem;
    opacity: .8;
}
.sv-zeile {
    display: flex;
    gap: 1rem;
}
.sv-zeile .sv-feld {
    flex: 1;
}
.sv-wahl {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    min-height: 44px;
    padding: .35rem 0;
    font-weight: 400;
}
.sv-wahl input {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .15rem;
}
.sv-einwilligung .sv-wahl {
    font-size: .9375rem;
}
/* Die Falle fuer Skripte: fuer Menschen unsichtbar und nicht erreichbar */
.sv-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sv-daten {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1rem;
    margin: 1rem 0;
}
.sv-daten dt {
    font-weight: 500;
}
.sv-daten dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 520px) {
    .sv-zeile {
        flex-direction: column;
        gap: 0;
    }
    .sv-daten {
        grid-template-columns: 1fr;
    }
}