/*
 * Layout-Bausteine, mobile-first: Grundstile gelten fürs Handy,
 * größere Bildschirme werden per min-width ergänzt.
 */

/* Sprunglink für Tastatur- und Screenreader-Nutzer */
.sprunglink {
    position: absolute;
    left: var(--abstand-m);
    top: -10rem;
    padding: var(--abstand-s) var(--abstand-m);
    background: var(--farbe-weiss);
    color: var(--farbe-gruen-dunkel);
    z-index: 10;
}

.sprunglink:focus {
    top: var(--abstand-m);
}

/* Kopfbereich */
.kopf {
    background: var(--farbe-gruen);
    color: var(--farbe-weiss);
}

.kopf__innen {
    max-width: var(--inhaltsbreite);
    margin: 0 auto;
    padding: var(--abstand-s) var(--rand-seite);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-s);
}

.kopf__marke {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    color: inherit;
    text-decoration: none;
}

.kopf__wappen {
    width: 2.5rem;
    height: auto;
}

.kopf__name {
    font-size: var(--schriftgroesse-gross);
    font-weight: 700;
}

.kopf :focus-visible {
    outline-color: var(--farbe-weiss);
}

.kopf__menueknopf {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-s);
    min-height: 2.75rem;
    padding: var(--abstand-s) var(--abstand-m);
    font: inherit;
    font-weight: 700;
    color: var(--farbe-weiss);
    background: transparent;
    border: 2px solid var(--farbe-weiss);
    border-radius: var(--radius);
    cursor: pointer;
}

/* Hamburger-Symbol aus drei Strichen, rein per CSS */
.kopf__menuesymbol,
.kopf__menuesymbol::before,
.kopf__menuesymbol::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
}

.kopf__menuesymbol {
    position: relative;
}

.kopf__menuesymbol::before,
.kopf__menuesymbol::after {
    content: "";
    position: absolute;
    left: 0;
}

.kopf__menuesymbol::before {
    top: -6px;
}

.kopf__menuesymbol::after {
    top: 6px;
}

/* Navigation: auf dem Handy volle Breite unter dem Kopf */
.navigation {
    flex-basis: 100%;
}

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

.navigation__link {
    display: block;
    padding: var(--abstand-s) 0;
    color: var(--farbe-weiss);
    font-weight: 600;
    text-decoration: none;
}

.navigation__link:hover {
    text-decoration: underline;
}

/* Mit JavaScript ist das Menü eingeklappt, bis der Knopf es öffnet (ohne JS immer sichtbar). */
.js .navigation:not(.navigation--offen) {
    display: none;
}

/* Inhalt */
.inhalt {
    flex: 1;
    width: 100%;
    max-width: var(--inhaltsbreite);
    margin: 0 auto;
    padding: var(--abstand-l) var(--rand-seite);
}

.hinweis {
    background: var(--farbe-weiss);
    border-top: 4px solid var(--farbe-gruen);
    border-radius: var(--radius);
    padding: var(--abstand-l);
}

.knopf {
    /* Flex zentriert den Text auch senkrecht in der Mindesthöhe (Tippfläche 44px) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 2.75rem;
    padding: var(--abstand-s) var(--abstand-l);
    border-radius: var(--radius);
    background: var(--farbe-gruen-dunkel);
    color: var(--farbe-weiss);
    font-weight: 700;
    text-decoration: none;
}

.knopf:hover {
    background: var(--farbe-gruen);
}

.fehlerdetails {
    margin-top: var(--abstand-l);
    padding: var(--abstand-m);
    background: var(--farbe-gruen-hell);
    border-radius: var(--radius);
}

/* Fußbereich */
.fuss {
    background: var(--farbe-text);
    color: var(--farbe-weiss);
}

.fuss__innen {
    max-width: var(--inhaltsbreite);
    margin: 0 auto;
    padding: var(--abstand-l) var(--rand-seite);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--abstand-m);
}

.fuss p {
    margin: 0;
}

.fuss__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--abstand-m);
}

.fuss a {
    color: var(--farbe-weiss);
}

.fuss__besucher {
    font-size: calc(0.9 * var(--schriftgroesse-basis));
    opacity: 0.85;
}

/* Facebook/Instagram (partials/social-links.html.twig), in Fußzeile und Seitenspalte */
.social-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-m);
}

.social-links__link {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-s);
    min-height: 2.75rem;
    font-weight: 600;
}

.social-links__logo {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
}

/* Tablet und größer */
@media (min-width: 48em) {
    :root {
        --rand-seite: 1.5rem;
    }

    .kopf__wappen {
        width: 3.5rem;
    }

    .inhalt {
        padding-block: var(--abstand-xl);
    }

    .hinweis {
        padding: var(--abstand-xl);
    }
}

/* Desktop: Navigation dauerhaft sichtbar in einer Zeile, kein Menüknopf */
@media (min-width: 64em) {
    .kopf__menueknopf {
        display: none;
    }

    .navigation,
    .js .navigation:not(.navigation--offen) {
        display: block;
        flex-basis: auto;
    }

    .navigation__liste {
        display: flex;
        gap: var(--abstand-l);
    }
}

/* Textseiten wie Impressum und Datenschutz: angenehme Zeilenlänge */
.textseite {
    background: var(--farbe-weiss);
    border-radius: var(--radius);
    padding: var(--abstand-l);
    max-width: 48rem;
}

.textseite h2 {
    font-size: var(--schriftgroesse-gross);
    margin-top: var(--abstand-l);
}

.textseite__stand {
    color: var(--farbe-text-leise);
    font-size: calc(0.9 * var(--schriftgroesse-basis));
}

.liste-schlicht {
    list-style: none;
    padding: 0;
}

.liste-schlicht li {
    margin-bottom: var(--abstand-s);
}

/* Noch ungeklärte Angabe (siehe app/config/verein.php) – soll auffallen */
.offen {
    background: #fff3b0;
    color: var(--farbe-text);
    padding: 0 var(--abstand-xs);
    border-radius: 0.25rem;
    font-weight: 600;
}

@media (min-width: 48em) {
    .textseite {
        padding: var(--abstand-xl);
    }
}