/* ==========================================================================
   KV Zeltinger Reisfresser — Stylesheet
   Handgeschrieben, kein Framework, kein Build-Schritt.
   Aufbau: Variablen, Grundlagen, Layout, Kopf, Navigation, Inhalt,
           Komponenten, Fuss, Hilfsklassen, Druck.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variablen
   Farbwelt vorlaeufig: Karnevalsrot mit Gold. Anzupassen, sobald das
   Vereinslogo vorliegt.
   -------------------------------------------------------------------------- */
:root {
    --rot:          #c8102e;
    --rot-dunkel:   #8f0b20;
    --rot-hell:     #fdecef;
    --gold:         #d4a017;
    --gold-hell:    #fbf3e0;

    --tinte:        #1c1a1b;
    --tinte-weich:  #4a4548;
    --grau:         #6f696c;
    --linie:        #e2dedf;
    --flaeche:      #f7f5f5;
    --weiss:        #ffffff;

    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

    --breite:   72rem;
    --schmal:   44rem;
    --radius:   6px;
    --schatten: 0 1px 3px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.05);

    --luft-xs: .5rem;
    --luft-s:  1rem;
    --luft-m:  2rem;
    --luft-l:  3.5rem;
    --luft-xl: 5.5rem;
}

/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
    line-height: 1.65;
    color: var(--tinte);
    background: var(--weiss);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    line-height: 1.2;
    margin: 0 0 var(--luft-s);
    font-weight: 700;
    letter-spacing: -.015em;
    text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.95rem); margin-top: var(--luft-m); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); margin-top: var(--luft-m); }

p, ul, ol, dl, table { margin: 0 0 var(--luft-s); }

p { text-wrap: pretty; }

a { color: var(--rot); text-underline-offset: .18em; }
a:hover { color: var(--rot-dunkel); }

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    border-radius: 2px;
}

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

hr {
    border: 0;
    border-top: 1px solid var(--linie);
    margin: var(--luft-m) 0;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.breit {
    width: min(100% - 2.5rem, var(--breite));
    margin-inline: auto;
}

.schmal {
    width: min(100%, var(--schmal));
}

main {
    display: block;
    padding-bottom: var(--luft-xl);
}

.abschnitt { padding-block: var(--luft-l); }
.abschnitt--flaeche { background: var(--flaeche); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--rot);
    color: #fff;
    padding: .75rem 1.25rem;
    z-index: 100;
}
.skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------------------------
   4. Kopf
   -------------------------------------------------------------------------- */
.entwicklungshinweis {
    background: #2b2b2b;
    color: #ffd7d7;
    font-size: .85rem;
    padding: .6rem 1.25rem;
    text-align: center;
}

.kopf {
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    position: sticky;
    top: 0;
    z-index: 40;
}

.kopf__innen {
    width: min(100% - 2.5rem, var(--breite));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--luft-s);
    min-height: 4.5rem;
    flex-wrap: wrap;
}

.marke {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: inherit;
    padding-block: .6rem;
}

.marke__logo { width: 3rem; height: 3rem; }

.marke__text { display: flex; flex-direction: column; line-height: 1.15; }

.marke__name {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    color: var(--rot);
}

.marke__ort {
    font-size: .78rem;
    color: var(--grau);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Navigation
   Aufklappmenue ohne JavaScript: Checkbox auf Mobil, Hover auf Desktop.
   -------------------------------------------------------------------------- */
.nav-schalter { position: absolute; opacity: 0; pointer-events: none; }

.nav-knopf {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: .6rem;
    cursor: pointer;
    border-radius: var(--radius);
}
.nav-knopf span {
    display: block;
    height: 2px;
    background: var(--tinte);
    border-radius: 2px;
}
.nav-schalter:focus-visible + .nav-knopf {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.nav { width: 100%; }

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

.nav__punkt > a {
    display: block;
    padding: .7rem .25rem;
    text-decoration: none;
    font-weight: 600;
    color: var(--tinte);
}
.nav__punkt > a.aktiv { color: var(--rot); }

.nav__unter {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0 0 0 1rem;
    border-left: 2px solid var(--linie);
}
.nav__unter a {
    display: block;
    padding: .35rem 0;
    font-size: .95rem;
    color: var(--tinte-weich);
    text-decoration: none;
}
.nav__unter a:hover { color: var(--rot); }

/* Mobil: Menue eingeklappt */
@media (max-width: 61.99em) {
    .nav {
        display: none;
        padding-bottom: var(--luft-s);
        border-top: 1px solid var(--linie);
        padding-top: var(--luft-s);
    }
    .nav-schalter:checked ~ .nav { display: block; }
}

/* Desktop: waagerechte Leiste mit Aufklappmenue */
@media (min-width: 62em) {
    .nav-knopf { display: none; }
    .nav { width: auto; }

    .nav__liste { display: flex; gap: .35rem; }

    .nav__punkt { position: relative; }

    .nav__punkt > a {
        padding: 1.6rem .8rem;
        border-bottom: 3px solid transparent;
    }
    .nav__punkt > a.aktiv { border-bottom-color: var(--rot); }

    .nav__unter {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 14rem;
        background: var(--weiss);
        border: 1px solid var(--linie);
        border-left-width: 1px;
        border-radius: var(--radius);
        box-shadow: var(--schatten);
        padding: .4rem;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-.35rem);
        transition: opacity .15s, transform .15s, visibility .15s;
    }
    .nav__punkt:hover > .nav__unter,
    .nav__punkt:focus-within > .nav__unter {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .nav__unter a { padding: .5rem .75rem; border-radius: 4px; }
    .nav__unter a:hover { background: var(--rot-hell); }
}

/* --------------------------------------------------------------------------
   6. Seitenkopf und Inhalt
   -------------------------------------------------------------------------- */
.seitenkopf {
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    padding-block: var(--luft-m);
    margin-bottom: var(--luft-l);
}
.seitenkopf h1 { margin-bottom: .35rem; }

.vorspann {
    font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
    color: var(--tinte-weich);
    max-width: 48rem;
    margin: 0;
}

.inhalt { max-width: var(--schmal); }
.inhalt h2:first-child { margin-top: 0; }
.inhalt ul, .inhalt ol { padding-left: 1.35rem; }
.inhalt li { margin-bottom: .35rem; }

/* --------------------------------------------------------------------------
   7. Komponenten
   -------------------------------------------------------------------------- */

/* Aufmacher der Startseite */
.aufmacher {
    background: linear-gradient(135deg, var(--rot) 0%, var(--rot-dunkel) 100%);
    color: #fff;
    padding-block: var(--luft-xl);
    text-align: center;
}
.aufmacher h1 { color: #fff; margin-bottom: var(--luft-s); }
.aufmacher p {
    font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
    max-width: 42rem;
    margin-inline: auto;
    opacity: .95;
}
.aufmacher__ruf {
    display: block;
    font-size: .8rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    opacity: .8;
    margin-bottom: var(--luft-s);
}

/* Schaltflaechen */
.knopf {
    display: inline-block;
    padding: .8rem 1.6rem;
    border-radius: var(--radius);
    background: var(--rot);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--rot);
    transition: background .15s, color .15s;
}
.knopf:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: #fff; }

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

.knopf--rand {
    background: transparent;
    color: var(--rot);
}
.knopf--rand:hover { background: var(--rot); color: #fff; }

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--luft-s);
    justify-content: center;
    margin-top: var(--luft-m);
}

/* Kartenraster */
.karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--luft-s);
}

.karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: var(--luft-s);
    display: flex;
    flex-direction: column;
}
.karte h3 { margin-top: 0; }
.karte p { color: var(--tinte-weich); }
.karte__mehr { margin-top: auto; font-weight: 600; text-decoration: none; }
.karte__mehr::after { content: " →"; }

/* Terminliste */
.termine { list-style: none; padding: 0; margin: 0; }

.termin {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: var(--luft-s);
    align-items: start;
    padding: var(--luft-s) 0;
    border-bottom: 1px solid var(--linie);
}
.termin:first-child { border-top: 1px solid var(--linie); }

.termin__datum {
    background: var(--rot-hell);
    border-radius: var(--radius);
    text-align: center;
    padding: .5rem .25rem;
    line-height: 1.1;
}
.termin__tag { display: block; font-size: 1.6rem; font-weight: 800; color: var(--rot); }
.termin__monat { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rot-dunkel); }
.termin__jahr { display: block; font-size: .7rem; color: var(--grau); }

.termin__text-block { min-width: 0; }
.termin__titel { font-weight: 700; margin: 0 0 .2rem; }
.termin__titel a { text-decoration: none; }
.termin__titel a:hover { text-decoration: underline; }
.termin__meta { font-size: .9rem; color: var(--grau); margin: 0 0 .35rem; }
.termin__text { margin: 0; color: var(--tinte-weich); }

/* Definitionsliste fuer Stammdaten (Impressum) */
.daten {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: .6rem var(--luft-s);
    margin: 0 0 var(--luft-m);
}
.daten dt { font-weight: 600; color: var(--tinte-weich); }
.daten dd { margin: 0; }

@media (max-width: 34em) {
    .daten { grid-template-columns: 1fr; gap: .1rem var(--luft-s); }
    .daten dd { margin-bottom: .7rem; }
}

/* Hinweiskasten */
.hinweis {
    background: var(--gold-hell);
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: var(--luft-s);
    margin-bottom: var(--luft-m);
}
.hinweis > :last-child { margin-bottom: 0; }

/* Hervorgehobener Einzelwert, z. B. naechster Umzugstermin */
.hervorhebung {
    background: var(--rot-hell);
    border: 1px solid #f3c9d1;
    border-radius: var(--radius);
    padding: var(--luft-s) var(--luft-m);
    margin-bottom: var(--luft-m);
    text-align: center;
}
.hervorhebung__label {
    margin: 0 0 .3rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--rot-dunkel);
}
.hervorhebung__wert {
    margin: 0;
    font-size: clamp(1.25rem, 1.1rem + .8vw, 1.7rem);
    font-weight: 800;
    color: var(--rot);
    line-height: 1.2;
}
.hervorhebung__zusatz { margin: .3rem 0 0; color: var(--tinte-weich); }

/* Prinzenpaar */
.tollitaeten {
    background: linear-gradient(135deg, var(--rot) 0%, var(--rot-dunkel) 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: var(--luft-m);
    margin-bottom: var(--luft-l);
    text-align: center;
}
.tollitaeten__session {
    margin: 0 0 .5rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    opacity: .85;
}
.tollitaeten__namen { margin: 0; color: #fff; }
.tollitaeten__motto {
    margin: .6rem 0 0;
    font-size: 1.15rem;
    color: var(--gold-hell);
}
.tollitaeten__text {
    margin: var(--luft-s) auto 0;
    max-width: 38rem;
    opacity: .95;
}

/* Archiv */
.archiv__session { margin-bottom: var(--luft-l); }
.archiv__session h2 { margin-top: 0; }
.archiv__tollitaeten {
    color: var(--rot-dunkel);
    font-weight: 600;
    margin-bottom: var(--luft-s);
}

/* Tabelle */
.tabelle {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--luft-m);
}
.tabelle th,
.tabelle td {
    text-align: left;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}
.tabelle th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--grau);
    border-bottom-width: 2px;
}
.tabelle tbody tr:hover { background: var(--flaeche); }

/* Zeitleiste (Chronik) */
.zeitleiste {
    list-style: none;
    margin: 0 0 var(--luft-m);
    padding: 0 0 0 1.75rem;
    border-left: 2px solid var(--linie);
}
.zeitleiste__punkt {
    position: relative;
    padding-bottom: var(--luft-m);
}
.zeitleiste__punkt::before {
    content: "";
    position: absolute;
    left: calc(-1.75rem - 7px);
    top: .45rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--weiss);
    border: 3px solid var(--rot);
}
.zeitleiste__punkt--jetzt::before { background: var(--gold); border-color: var(--gold); }
.zeitleiste__jahr {
    margin: 0 0 .2rem;
    font-weight: 700;
    color: var(--rot);
}
.zeitleiste__text { margin: 0; color: var(--tinte-weich); }

/* Zitat */
.zitat {
    border-left: 4px solid var(--rot);
    padding: .4rem 0 .4rem var(--luft-s);
    margin: 0 0 var(--luft-s);
    font-style: italic;
    color: var(--tinte);
}

/* Karten mit Bild und Zusatzdaten */
.karte__bild {
    border-radius: 4px;
    margin-bottom: var(--luft-xs);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
}
.karte__daten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .6rem;
    margin: 0 0 var(--luft-xs);
    font-size: .9rem;
}
.karte__daten dt { font-weight: 600; color: var(--grau); }
.karte__daten dd { margin: 0; }

/* Beitraege */
.beitragsliste {
    display: grid;
    gap: var(--luft-m);
}
.beitragsliste--kompakt {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.beitrag {
    display: grid;
    gap: var(--luft-s);
}
.beitragsliste:not(.beitragsliste--kompakt) .beitrag {
    grid-template-columns: minmax(0, 18rem) 1fr;
    align-items: start;
    padding-bottom: var(--luft-m);
    border-bottom: 1px solid var(--linie);
}
@media (max-width: 40em) {
    .beitragsliste:not(.beitragsliste--kompakt) .beitrag {
        grid-template-columns: 1fr;
    }
}
.beitrag__bild img {
    border-radius: var(--radius);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
}
.beitrag__datum {
    margin: 0 0 .2rem;
    font-size: .85rem;
    color: var(--grau);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.beitrag__titel { margin: 0 0 .4rem; font-size: 1.2rem; }
.beitrag__titel a { text-decoration: none; color: var(--tinte); }
.beitrag__titel a:hover { color: var(--rot); }
.beitrag__text > :last-child { margin-bottom: 0; }
.beitrag__grossbild {
    border-radius: var(--radius);
    margin-bottom: var(--luft-m);
    width: 100%;
    height: auto;
}

/* Galerie */
.galerie__serie { margin-bottom: var(--luft-l); }
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--luft-xs);
}
.galerie__bild { margin: 0; }
.galerie__bild img {
    border-radius: 4px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    transition: transform .2s;
}
.galerie__bild img:hover { transform: scale(1.02); }

/* Sponsoren */
.sponsoren {
    list-style: none;
    margin: 0 0 var(--luft-l);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--luft-s);
}
.sponsor {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: var(--luft-s);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 7rem;
}
.sponsor img { max-height: 4rem; width: auto; object-fit: contain; }
.sponsor__name { font-weight: 600; }
.sponsor__ort { font-size: .85rem; color: var(--grau); }

/* --------------------------------------------------------------------------
   Kontaktseite und Formulare
   -------------------------------------------------------------------------- */
.kontakt__raster {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--luft-l);
    align-items: start;
}
@media (max-width: 52em) {
    .kontakt__raster { grid-template-columns: 1fr; }
}

.kontakt__daten {
    background: var(--flaeche);
    border-radius: var(--radius);
    padding: var(--luft-s) var(--luft-m);
}
.kontakt__daten h2:first-child { margin-top: 0; }
.kontakt__formular h2:first-child { margin-top: 0; }

.daten--schmal { grid-template-columns: 1fr; gap: .1rem; }
.daten--schmal dd { margin-bottom: .8rem; }

.formular { max-width: 34rem; }

.feld { margin-bottom: var(--luft-s); }
.feld label {
    display: block;
    font-weight: 600;
    margin-bottom: .3rem;
}
.pflicht { color: var(--rot); }

.feld input,
.feld select,
.feld textarea {
    width: 100%;
    padding: .65rem .8rem;
    font: inherit;
    color: inherit;
    background: var(--weiss);
    border: 1px solid #c9c3c5;
    border-radius: var(--radius);
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
    border-color: var(--rot);
    outline: 3px solid var(--gold);
    outline-offset: 1px;
}
.feld textarea { resize: vertical; min-height: 9rem; }

.formular__hinweis {
    font-size: .88rem;
    color: var(--tinte-weich);
}

button.knopf { cursor: pointer; font: inherit; }

/* Honigtopf — muss fuer Menschen unsichtbar, fuer Bots aber vorhanden sein.
   Deshalb kein display:none, das manche Bots erkennen. */
.honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.fehlerkasten {
    background: #fdecef;
    border-left: 4px solid var(--rot);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: var(--luft-s);
    margin-bottom: var(--luft-s);
}
.fehlerkasten p { margin: 0 0 .4rem; }
.fehlerkasten ul { margin: 0; padding-left: 1.2rem; }

.erfolg {
    background: #eef7ee;
    border-left: 4px solid #3f8f42;
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: var(--luft-s) var(--luft-m);
}
.erfolg h2 { margin-top: 0; }
.erfolg > :last-child { margin-bottom: 0; }

.stand {
    margin-top: var(--luft-m);
    font-size: .88rem;
    color: var(--grau);
}

/* Inhaltsluecke — erscheint nur im Entwicklungsmodus */
.platzhalter {
    background: repeating-linear-gradient(
        45deg, #fff8f8, #fff8f8 10px, #fff1f1 10px, #fff1f1 20px);
    border: 2px dashed #d98a8a;
    border-radius: var(--radius);
    padding: var(--luft-s);
    margin-bottom: var(--luft-m);
}
.platzhalter__titel {
    margin: 0 0 .35rem;
    font-weight: 700;
    color: #a10000;
    font-size: .95rem;
}
.platzhalter__text {
    margin: 0;
    font-size: .92rem;
    color: var(--tinte-weich);
}

/* Markierung fuer ungefuellte Pflichtfelder (nur Entwicklungsmodus) */
mark.fehlt {
    background: #ffe0e0;
    color: #a10000;
    border: 1px dashed #a10000;
    border-radius: 3px;
    padding: 0 .35em;
    font-size: .9em;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   8. Fuss
   -------------------------------------------------------------------------- */
.fuss {
    background: var(--tinte);
    color: #d8d3d5;
    padding-top: var(--luft-l);
    margin-top: var(--luft-xl);
    font-size: .94rem;
}

.fuss__raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--luft-m);
    padding-bottom: var(--luft-m);
}

.fuss__block { min-width: 0; }

.fuss__titel {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gold);
    margin: 0 0 .8rem;
}

.fuss__adresse { margin: 0; line-height: 1.7; }
.fuss__adresse strong { color: #fff; font-weight: 600; }

.fuss__liste { list-style: none; margin: 0; padding: 0; line-height: 1.9; }

.fuss a { color: #d8d3d5; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }

.fuss__unten {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-block: var(--luft-s);
    font-size: .85rem;
    color: var(--grau);
}
.fuss__unten p { margin: 0; }

/* --------------------------------------------------------------------------
   9. Hilfsklassen
   -------------------------------------------------------------------------- */
.mitte { text-align: center; }
.abstand-oben { margin-top: var(--luft-m); }

/* Inline-style-Attribute werden bewusst vermieden — die Content-Security-Policy
   erlaubt kein 'unsafe-inline'. Abstaende und Ausrichtung laufen ueber Klassen. */

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 3px;
    padding: .1em .35em;
}
.nur-lesegeraet {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   10. Druck
   -------------------------------------------------------------------------- */
@media print {
    .kopf, .fuss__raster, .nav, .skip-link, .entwicklungshinweis { display: none; }
    body { font-size: 11pt; color: #000; }
    a { color: #000; text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
    main { padding-bottom: 0; }
}