/**
 * Mascha und Markus — 29. Mai 2027
 *
 * Aus dem Stilfinder: aufrechte Serifenschrift, reinweißer Grund, Mandarine als
 * Hauptfarbe, Kirsche als zweite, sanfte Ecken, normale Abstände, alle
 * Spielereien, Pillenknöpfe, helle Kopfzeile.
 *
 * Dazu der Italo-Einschlag: Markise in Mandarine und Pink, Bougainvillea als
 * Linienzeichnung, Aperol-Glas mit Strohhalm, aufsteigende Kohlensäure in der
 * Kopfzeile und in den Knöpfen.
 *
 * Aufbau: Variablen, Grundlagen, dann von außen nach innen — Seitenrahmen,
 * Kopfbereich, Navigation, Inhalt, Formulare, Meldungen, Tabellen, Admin.
 * Mobil zuerst: alles ohne Media Query gilt für schmale Bildschirme.
 */

/* ---------------------------------------------------------------- Variablen */

:root {
    /* Flächen */
    --grund:   #ffffff;
    --grund-2: #fdf5ee;   /* zarte Fläche für Kästen, Navigation, Fußzeile */
    --grund-3: #f7e9dc;

    /* Schrift */
    --text:   #2f2a26;
    --text-2: #6d645c;
    --text-3: #a2988f;

    /* Hauptfarbe */
    --mandarine:    #f5883a;
    --mandarine-d:  #d96f22;
    --mandarine-dd: #b45a19;

    /* Zweite Farbe und Begleitung */
    --kirsche:   #d9456b;
    --pink:      #e5498a;   /* Bougainvillea */
    --pink-hell: #f7a8c4;
    --sonne:     #f7c948;
    --basilikum: #4f7f3f;
    --himmel:    #2f8fb0;
    --gold:      #c8a24a;

    --linie: #ede4da;

    /* Schriftarten */
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    /* Maße */
    --mass:   42rem;      /* Lesebreite */
    --mass-w: 60rem;      /* für Tabellen im Adminbereich */
    --luft:   clamp(2.5rem, 7vw, 4rem);
    --rand:   1.25rem;
    --radius: 8px;
    --radius-gross: 12px;
}

/* --------------------------------------------------------------- Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.68;
}

h1, h2, h3 { line-height: 1.2; }

h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    letter-spacing: -.01em;
    margin: 0 0 .9rem;
}

h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.8rem 0 .5rem;
}

p { margin: 0 0 1.05rem; }
p.fuehrung { font-size: 1.18rem; }

a { color: var(--mandarine-d); }
a:hover { color: var(--mandarine-dd); }

small { font-size: .87rem; color: var(--text-2); }

/* Sichtbarer Rahmen bei Tastaturbedienung. Nicht wegnehmen — ohne ihn weiß
   niemand, der ohne Maus arbeitet, wo er gerade ist. */
:focus-visible {
    outline: 3px solid var(--himmel);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ------------------------------------------------------------ Seitenrahmen */

.huelle {
    max-width: var(--mass);
    margin-inline: auto;
    padding-inline: var(--rand);
}

/* Markise über der Bar: Mandarine und Pink im Wechsel */
.markise {
    height: 13px;
    background: repeating-linear-gradient(
        90deg,
        var(--mandarine) 0 20px,
        var(--grund)     20px 40px,
        var(--pink)      40px 60px,
        var(--grund)     60px 80px
    );
}

/* ------------------------------------------------------------- Bougainvillea

   Drei spitze Hochblätter um ein goldenes Herz, reine Kontur. Die Form wird
   einmal als SVG-Symbol im Layout definiert und hier eingefärbt.

   vector-effect: non-scaling-stroke steht im Symbol selbst und hält die Linie
   überall gleich dünn. Ohne das wäre die Blüte im Kopfbereich fett und in der
   Trennzeile unsichtbar — daran scheitern Linienzeichnungen sonst. */

.bluete {
    fill: none;
    stroke: var(--pink);
    stroke-width: 1.3;
    stroke-linejoin: round;
    overflow: visible;
    vertical-align: middle;
}

/* Der Zweig läuft asymmetrisch aus dem Bild heraus. Zwei gleich große Büschel
   links und rechts sähen aus wie aufgeklebt. */
.zweig {
    position: absolute;
    pointer-events: none;
    top: -1.5rem;
    right: -2rem;
    width: 15rem;
    height: 12rem;
}
@media (max-width: 30rem) {
    .zweig { width: 11rem; height: 9rem; right: -3rem; top: -2rem; opacity: .9; }
}

/* --------------------------------------------------------------- Kopfbereich */

.buehne {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(2.5rem, 9vw, 4rem) var(--rand) clamp(2rem, 6vw, 3rem);
    background:
        radial-gradient(75% 60% at 50% 0%, #fff2e4 0%, rgba(255, 242, 228, 0) 72%),
        var(--grund);
}

/* Orangenscheiben, reines CSS */
.zitrus {
    position: absolute;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        #f59331 0deg 22deg,
        #ffcf8d 22deg 44deg
    );
    box-shadow: 0 0 0 4px var(--grund), 0 0 0 7px #f0a94f;
    pointer-events: none;
}
.zitrus--eins { width: 4.6rem; height: 4.6rem; top: 12%; left: -1.4rem; transform: rotate(10deg); }
.zitrus--zwei { width: 2.4rem; height: 2.4rem; top: 68%; right: 5%; transform: rotate(-18deg); }

/* ---- Kohlensäure ----
   Die ganze Kopfzeile steht damit im Glas. Bewusst leise: kleine Perlen,
   niedrige Deckkraft, unterschiedliche Größen und Tempi. Gleich große Blasen im
   Gleichschritt sähen nach Bildschirmschoner aus.

   Bewegt wird nur transform und opacity — beides übernimmt die Grafikkarte,
   ohne dass der Browser das Seitenlayout neu berechnet. */
.perlen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.perlen i {
    position: absolute;
    bottom: -3rem;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95), rgba(245, 136, 58, .28));
    box-shadow: inset 0 0 0 1px rgba(217, 111, 34, .28);
    opacity: 0;
    animation: perlen-steigen var(--d) linear var(--v) infinite;
}
@keyframes perlen-steigen {
    0%   { transform: translate(0, 0)            scale(.85); opacity: 0; }
    8%   {                                                   opacity: var(--o); }
    35%  { transform: translate(.5rem, -9rem)    scale(1); }
    70%  { transform: translate(-.45rem, -19rem) scale(1.05); }
    92%  {                                                   opacity: var(--o); }
    100% { transform: translate(.25rem, -30rem)  scale(1.1); opacity: 0; }
}

.buehne__vorspann {
    position: relative;
    margin: 0 0 1.2rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--basilikum);
}

.buehne h1 {
    position: relative;
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.6rem, 12vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -.012em;
}
.buehne h1 a { color: inherit; text-decoration: none; }

.buehne h1 .und {
    display: block;
    font-family: var(--sans);
    font-weight: 700;
    font-size: .19em;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--mandarine);
    margin-block: .55rem;
}

.eckdaten {
    position: relative;
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.1rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-2);
}
.eckdaten li::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pink);
    margin-right: .5rem;
    vertical-align: .12em;
}

/* Schmale Variante für die Unterseiten */
.kopfleiste {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 1.4rem var(--rand) 1.1rem;
}
.kopfleiste a {
    position: relative;
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--text);
    text-decoration: none;
}
.kopfleiste span {
    position: relative;
    display: block;
    margin-top: .2rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* --------------------------------------------------------------- Navigation */

.hauptnav {
    background: var(--grund-2);
    border-block: 2px solid var(--mandarine);
}
.hauptnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .1rem .2rem;
    font-size: .82rem;
    font-weight: 600;
}
.hauptnav a {
    display: block;
    padding: .75rem .8rem;
    color: var(--text-2);
    text-decoration: none;
    border-radius: var(--radius);
}
.hauptnav a:hover { color: var(--mandarine-d); }
.hauptnav a[aria-current="page"] { background: var(--mandarine); color: #fff; }

/* ---- Klappmenü für schmale Bildschirme ----
   Die Klasse hauptnav--klappbar setzt erst das Skript. Ohne JavaScript greift
   nichts davon und die Liste bleibt sichtbar. */

.hauptnav__schalter[hidden] { display: none; }

.hauptnav__schalter:not([hidden]) {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    margin: 0;
    padding: .8rem .2rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    overflow: visible;
}
.hauptnav__schalter::before,
.hauptnav__schalter::after { content: none; }
.hauptnav__schalter:hover:not(:disabled) {
    background: none;
    color: var(--mandarine-d);
    box-shadow: none;
}
.hauptnav__schalter:active:not(:disabled) { transform: none; }

/* Drei Striche, die sich beim Öffnen zum Kreuz legen */
.burger {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
    flex: none;
}
.burger i {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2.5px;
    border-radius: 2px;
    background: var(--mandarine);
    transition: transform .18s ease, opacity .18s ease;
}
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 6.75px; }
.burger i:nth-child(3) { top: 13.5px; }

.ist-offen .burger i:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
.ist-offen .burger i:nth-child(2) { opacity: 0; }
.ist-offen .burger i:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

.hauptnav--klappbar .hauptnav__liste { display: none; }
.hauptnav--klappbar.ist-offen .hauptnav__liste {
    display: block;
    padding-bottom: .6rem;
}
.hauptnav--klappbar.ist-offen .hauptnav__liste a {
    padding: .7rem .8rem;
    font-size: .95rem;
}

@media (min-width: 40rem) {
    .hauptnav__schalter:not([hidden]) { display: none; }
    .hauptnav--klappbar .hauptnav__liste { display: flex; }
}

/* ------------------------------------------------------------------ Inhalt */

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

main > h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2rem, 7vw, 2.8rem);
    letter-spacing: -.01em;
    margin: 0 0 1.2rem;
}

section + section,
main > h2 { margin-top: var(--luft); }

/* Farbschnur als Trenner, mit einer Blüte in der Mitte */
.schnur {
    display: flex;
    align-items: center;
    gap: .55rem;
    justify-content: center;
    margin: var(--luft) 0;
    padding: 0;
    list-style: none;
}
.schnur li { width: 10px; height: 10px; border-radius: 50%; }
.schnur li:nth-child(1) { background: var(--mandarine); }
.schnur li:nth-child(2) { background: var(--sonne); }
.schnur li:nth-child(3) { background: var(--basilikum); }
.schnur li:nth-child(4) { background: var(--himmel); }
.schnur li:nth-child(5) { background: var(--kirsche); }
.schnur li.bluete-halter {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    display: flex;
}

.karte {
    background: var(--grund-2);
    border: 2px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 1.5rem;
    box-shadow: 0 3px 0 var(--linie);
}
.karte > :last-child { margin-bottom: 0; }
.karte--sonne { border-color: var(--sonne); box-shadow: 0 3px 0 var(--sonne); background: #fffbef; }
.karte--pink  { border-color: var(--pink-hell); box-shadow: 0 3px 0 var(--pink-hell); background: #fff4f8; }

/* Beschreibungslisten, etwa der Ablauf */
dl { margin: 0 0 1.2rem; }
dl dt {
    font-weight: 700;
    color: var(--mandarine-d);
    font-size: .92rem;
    margin-top: .9rem;
}
dl dd {
    margin: 0;
    padding-bottom: .7rem;
    border-bottom: 1px dashed var(--linie);
}
dl dd:last-child { border-bottom: 0; }

/* Farbmuster für den Dresscode */
.farbtupfer {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}
.farbtupfer li {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55);
}

/* ------------------------------------------------------- Aperol mit Strohhalm */

/* Das Glas ist ein Knopf: Klick oder Eingabetaste trinkt es leer, danach füllt
   es sich von selbst wieder. Deshalb hier die Rücksetzer gegen die allgemeine
   Knopfgestaltung — es soll aussehen wie ein Glas, nicht wie ein Knopf. */
.glas {
    position: relative;
    display: block;
    width: 5.2rem;
    height: 7.4rem;
    margin: 0 auto var(--luft);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    cursor: pointer;
    transform-origin: 50% 100%;
    transition: transform .5s ease;

    /* Ohne appearance: none zeichnet der Browser weiter seinen eigenen
       Knopfrahmen darum — ein Viereck ums Glas. Hintergrund und Rahmen
       zurückzusetzen reicht dafür nicht. */
    appearance: none;
    -webkit-appearance: none;
}
.glas::before, .glas::after { content: none; }
.glas:hover:not(:disabled) { background: none; box-shadow: none; }
.glas:active:not(:disabled) { transform: none; box-shadow: none; }

/* Beim Trinken kippt das Glas zur Seite des Strohhalms — der sitzt rechts,
   also nach rechts. Andersherum würde man am Halm vorbeitrinken.
   Die :active-Variante muss mit aufgeführt werden, sonst gewinnt der
   allgemeine Knopf-Effekt beim Gedrückthalten und das Glas ruckt zurück. */
.glas.ist-leer,
.glas.ist-leer:active { transform: rotate(8deg); }

.glas__kelch {
    position: absolute;
    left: 0;
    top: 1.1rem;
    width: 5.2rem;
    height: 4.6rem;
    border-radius: .5rem .5rem 1.8rem 1.8rem;
    background: rgba(255, 255, 255, .35);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55);
    overflow: hidden;
}

/* Die Füllung liegt als eigene Schicht im Kelch und wird beim Trinken nach
   unten geschoben. Verschieben statt Höhe ändern: dadurch bleibt der
   Farbverlauf unverzerrt, es sinkt einfach der Pegel. */
.glas__fuellung {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #ff9d4d 0%, var(--mandarine) 45%, #e4661d 100%);
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);   /* Nachfüllen */
}
.glas.ist-leer .glas__fuellung {
    transform: translateY(100%);
    transition: transform 1.4s cubic-bezier(.55, .06, .68, .19); /* Austrinken */
}

/* Die Eiswürfel liegen in der Füllung und sinken deshalb mit ab. */
.glas__eis {
    position: absolute;
    width: 1.35rem;
    height: 1.25rem;
    background: rgba(255, 255, 255, .42);
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}
.glas__eis--eins { top: .5rem;  left: .5rem;  transform: rotate(-12deg); }
.glas__eis--zwei { top: 1.5rem; left: 2.2rem; transform: rotate(16deg); }

.glas__blase {
    position: absolute;
    bottom: -.5rem;
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    animation: glas-steigen 3.4s linear infinite;
}
.glas__blase:nth-of-type(1) { left: 18%; animation-delay: 0s; }
.glas__blase:nth-of-type(2) { left: 42%; animation-delay: .9s;  width: .28rem; height: .28rem; }
.glas__blase:nth-of-type(3) { left: 66%; animation-delay: 1.7s; }
.glas__blase:nth-of-type(4) { left: 82%; animation-delay: 2.4s; width: .24rem; height: .24rem; }

/* Im leeren Glas perlt nichts mehr. */
.glas.ist-leer .glas__blase {
    opacity: 0;
    animation-play-state: paused;
    transition: opacity .4s ease;
}
@keyframes glas-steigen {
    0%   { transform: translateY(0);       opacity: 0; }
    12%  {                                 opacity: .9; }
    100% { transform: translateY(-4.6rem); opacity: 0; }
}

.glas__stiel {
    position: absolute;
    left: 2.35rem;
    top: 5.6rem;
    width: .5rem;
    height: 1.2rem;
    background: rgba(0, 0, 0, .09);
    border-radius: 2px;
}
.glas__fuss {
    position: absolute;
    left: 1.15rem;
    bottom: 0;
    width: 2.9rem;
    height: .45rem;
    background: rgba(0, 0, 0, .09);
    border-radius: 50%;
}
/* Papierstrohhalm, pink gestreift */
.glas__halm {
    position: absolute;
    left: 3.3rem;
    top: -.6rem;
    width: .48rem;
    height: 4.6rem;
    border-radius: 3px;
    transform: rotate(13deg);
    transform-origin: bottom center;
    background: repeating-linear-gradient(135deg, var(--pink) 0 .3rem, #ffffff .3rem .6rem);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
}
.glas__scheibe {
    position: absolute;
    left: -.5rem;
    top: .5rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, #f59331 0deg 22deg, #ffcf8d 22deg 44deg);
    box-shadow: 0 0 0 3px var(--grund), 0 0 0 5px #f0a94f;
    transform: rotate(-14deg);
}

/* ------------------------------------------------------------------ Bilder */

.foto,
.zeitstrahl__bild {
    margin: 0 0 1.2rem;
}
.foto img,
.zeitstrahl__bild img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-gross);
    border: 3px solid var(--grund);
    box-shadow: 0 4px 0 var(--linie);
}
.foto figcaption,
.zeitstrahl__bild figcaption {
    margin-top: .5rem;
    font-size: .87rem;
    color: var(--text-2);
    font-style: italic;
}

/* -------------------------------------------------------------- Trauzeugen */

.trauzeugen {
    list-style: none;
    margin: 1.4rem 0 1.8rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.4rem;
}

.trauzeuge {
    text-align: center;
}

.trauzeuge__bild {
    display: block;
    width: 100%;
    max-width: 11rem;
    margin: 0 auto .8rem;
    aspect-ratio: 1;
    object-fit: cover;
    /* Hochformat-Portraits: die Mitte des Bildes trifft selten das Gesicht.
       Pro Person übersteuerbar über 'fokus' im Array in public/ablauf.php. */
    object-position: center 25%;
    border-radius: 50%;
    border: 3px solid var(--grund);
    box-shadow: 0 4px 0 var(--linie);
}

.trauzeuge__platzhalter {
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--grund-2);
    border: 2px dashed var(--grund-3);
    box-shadow: none;
    color: var(--text-2);
    line-height: 1.35;
}
.trauzeuge__platzhalter code {
    font-size: .8em;
    background: var(--grund);
    padding: .1rem .3rem;
    border-radius: 4px;
    word-break: break-all;
}

.trauzeuge__name {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.15rem;
}
.trauzeuge__rolle {
    margin: .1rem 0 0;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-2);
}
.trauzeuge__telefon {
    margin: .5rem 0 0;
    font-weight: 600;
}
.trauzeuge__telefon a {
    color: var(--mandarine-d);
}

/* -------------------------------------------------------------- Zeitstrahl */

.zeitstrahl {
    list-style: none;
    margin: 1.8rem 0 0;
    padding: 0 0 0 1.9rem;
    position: relative;
}
.zeitstrahl::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .5rem;
    bottom: 1.5rem;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--mandarine) 0%, var(--pink) 55%, var(--sonne) 100%);
}

.zeitstrahl__station {
    position: relative;
    padding-bottom: 2.6rem;
}
.zeitstrahl__station:last-child { padding-bottom: 0; }

.zeitstrahl__station::before {
    content: "";
    position: absolute;
    left: -1.9rem;
    top: .35rem;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--mandarine);
    box-shadow: 0 0 0 4px var(--grund);
}
.zeitstrahl__station--aperol::before,
.zeitstrahl__station--mandarine::before { background: var(--mandarine); }
.zeitstrahl__station--sonne::before      { background: var(--sonne); }
.zeitstrahl__station--basilikum::before  { background: var(--basilikum); }
.zeitstrahl__station--himmel::before     { background: var(--himmel); }
.zeitstrahl__station--kirsche::before    { background: var(--kirsche); }
.zeitstrahl__station--pink::before       { background: var(--pink); }

.zeitstrahl__datum {
    margin: 0 0 .15rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
}
.zeitstrahl__titel {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.3rem, 4.5vw, 1.7rem);
    margin: 0 0 .8rem;
}

.zeitstrahl__platzhalter {
    background: var(--grund-2);
    border: 2px dashed var(--grund-3);
    border-radius: var(--radius-gross);
    padding: 2rem 1.2rem;
    text-align: center;
    color: var(--text-2);
}
.zeitstrahl__platzhalter code {
    font-size: .85em;
    background: var(--grund);
    padding: .1rem .35rem;
    border-radius: 4px;
}

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

label {
    display: block;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: .35rem;
}

label input[type="checkbox"],
label input[type="radio"] {
    margin-right: .5rem;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--mandarine);
    vertical-align: -.15em;
}
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
    font-weight: 400;
    font-size: 1rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: .78rem .9rem;
    border: 2px solid var(--linie);
    border-radius: var(--radius);
    background: var(--grund);
    color: var(--text);
    font: inherit;
}
input:hover, select:hover, textarea:hover { border-color: var(--grund-3); }
textarea { resize: vertical; min-height: 6rem; }

input:disabled, button:disabled { opacity: .55; cursor: not-allowed; }

form p { margin-bottom: 1.15rem; }

fieldset {
    border: 2px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    margin: 0 0 1.2rem;
    background: var(--grund);
}
legend {
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mandarine-d);
    padding-inline: .4rem;
}

/* ---- Knöpfe mit Kohlensäure ----
   Die Bläschen entstehen aus zwei Schichten hinter dem Text, jede mit eigenem
   Tempo. Dadurch braucht kein Knopf zusätzliches HTML. */

button, .knopf, .btn {
    position: relative;
    overflow: hidden;
    display: inline-block;
    font: inherit;
    font-weight: 700;
    letter-spacing: .03em;
    background: var(--mandarine);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .9rem 1.9rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 3px 0 var(--mandarine-d);
}
button:hover:not(:disabled), .knopf:hover, .btn:hover {
    background: var(--mandarine-d);
    color: #fff;
    box-shadow: 0 3px 0 var(--mandarine-dd);
}
button:active:not(:disabled), .knopf:active, .btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--mandarine-dd);
}

button[type="submit"]::before, .knopf::before, .btn::before,
button[type="submit"]::after,  .knopf::after,  .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    animation: knopf-perlen 3.6s linear infinite;
}
button[type="submit"]::before, .knopf::before, .btn::before {
    background-image:
        radial-gradient(circle 3px at 18% 92%, rgba(255,255,255,.55) 98%, transparent 100%),
        radial-gradient(circle 2px at 47% 96%, rgba(255,255,255,.45) 98%, transparent 100%),
        radial-gradient(circle 3px at 78% 94%, rgba(255,255,255,.5)  98%, transparent 100%);
}
button[type="submit"]::after, .knopf::after, .btn::after {
    background-image:
        radial-gradient(circle 2px at 32% 95%, rgba(255,255,255,.45) 98%, transparent 100%),
        radial-gradient(circle 3px at 62% 93%, rgba(255,255,255,.5)  98%, transparent 100%),
        radial-gradient(circle 2px at 89% 97%, rgba(255,255,255,.4)  98%, transparent 100%);
    animation-duration: 4.7s;
    animation-delay: 1.8s;
}
@keyframes knopf-perlen {
    0%   { transform: translateY(0);      opacity: 0; }
    18%  {                                opacity: 1; }
    82%  {                                opacity: 1; }
    100% { transform: translateY(-3.4rem); opacity: 0; }
}

/* Zweitrangige Knöpfe bleiben ruhig und hell.
 *
 * Das Aperol-Glas und der Menü-Schalter sind ebenfalls type="button", sollen
 * aber nicht wie Knöpfe aussehen — deshalb hier ausdrücklich ausgenommen.
 * Ohne das gewinnt diese Regel: button[type="button"] ist spezifischer als
 * eine einzelne Klasse, und daran ändert auch die Reihenfolge nichts. */
button[type="button"]:not(.glas):not(.hauptnav__schalter) {
    background: var(--grund);
    color: var(--mandarine-d);
    box-shadow: 0 3px 0 var(--grund-3);
    border: 2px solid var(--grund-3);
}
button[type="button"]:not(.glas):not(.hauptnav__schalter):hover:not(:disabled) {
    background: var(--grund-2);
    color: var(--mandarine-dd);
    box-shadow: 0 3px 0 var(--grund-3);
}
button[type="button"]::before,
button[type="button"]::after { content: none; }

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

[role="alert"] {
    background: #fdecf1;
    border-left: 4px solid var(--kirsche);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: .9rem 1.1rem;
    margin-bottom: 1.2rem;
    color: #8d2540;
}
[role="alert"] > :last-child { margin-bottom: 0; }
[role="alert"] ul { margin: .5rem 0 0; padding-left: 1.2rem; }

span[role="alert"] {
    display: inline-block;
    background: none;
    border: 0;
    padding: 0;
    margin: .3rem 0 0;
    font-size: .9rem;
    font-weight: 600;
}

[role="status"] {
    background: #edf6ea;
    border-left: 4px solid var(--basilikum);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: .9rem 1.1rem;
    margin-bottom: 1.2rem;
    color: #2f5426;
}

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

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.2rem;
    font-size: .95rem;
    background: var(--grund);
    border-radius: var(--radius);
    overflow: hidden;
}
caption { text-align: left; font-weight: 700; padding-bottom: .5rem; }
th, td {
    text-align: left;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--linie);
}
th { background: var(--grund-2); font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }

.tabellenrahmen { overflow-x: auto; }

/* ----------------------------------------------------------------- Fußzeile */

.seitenfuss {
    margin-top: var(--luft);
    background: var(--grund-2);
    border-top: 2px solid var(--linie);
    padding-block: 1.6rem 2rem;
    text-align: center;
    font-size: .9rem;
}
.seitenfuss ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem 1.2rem;
}

/* ------------------------------------------------------------ Adminbereich */

.admin { background: var(--grund); }

.admin .adminkopf {
    background: var(--text);
    color: #fff;
    padding: 1rem var(--rand);
}
.admin .adminkopf a { color: var(--sonne); text-decoration: none; font-weight: 700; }

.admin .hauptnav { background: #4d382a; border-block-color: var(--text); }
.admin .hauptnav a { color: #e5d8c9; }
.admin .hauptnav a:hover { color: #fff; }
.admin .hauptnav a[aria-current="page"] { background: var(--sonne); color: var(--text); }

.admin main { max-width: var(--mass-w); margin-inline: auto; }

.admin details {
    background: var(--grund);
    border: 2px solid var(--linie);
    border-radius: var(--radius);
    padding: .9rem 1.1rem;
    margin-bottom: .7rem;
}
.admin details[open] { border-color: var(--grund-3); }
.admin summary { cursor: pointer; font-weight: 600; }
.admin summary:hover { color: var(--mandarine-d); }

.admin .seitenfuss { background: var(--text); color: #e5d8c9; border-top-color: var(--text); }
.admin .seitenfuss a { color: var(--sonne); }

/* ------------------------------------------------------------ Größere Schirme */

@media (min-width: 40rem) {
    dl.zweispaltig {
        display: grid;
        grid-template-columns: 8rem 1fr;
        column-gap: 1.5rem;
    }
    dl.zweispaltig dt { margin-top: 0; padding-block: .7rem; }
    dl.zweispaltig dd { padding-block: .7rem; }
}

/* -------------------------------------------------------------- Bewegung aus

   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine.
   Eingefrorene Blasen mitten in der Luft sähen aus wie ein Fehler, deshalb
   verschwindet die Kohlensäure ganz. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .perlen { display: none; }
    button::before, button::after,
    .knopf::before, .knopf::after,
    .btn::before, .btn::after { content: none; }
    .glas__blase { opacity: .5; }
    button:active:not(:disabled) { transform: none; }
}

/* ------------------------------------------------------------------ Drucken */

@media print {
    .markise, .hauptnav, .seitenfuss, .zitrus, .perlen, .zweig, .glas { display: none; }
    body { background: #fff; }
    .karte { box-shadow: none; }
    button, .knopf, .btn { box-shadow: none; }
}