.col-span-1 {
    grid-column: span 1;
}

.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

.col-span-4 {
    grid-column: span 4;
}

.col-span-5 {
    grid-column: span 5;
}

.col-span-6 {
    grid-column: span 6;
}


/* Abstands-System: je enger etwas zusammengehört, desto kleiner der Abstand.
   Jede Stufe ist deutlich größer als die vorige, damit Gruppen klar lesbar bleiben. */
:root {
    --space-xs: 0.5rem;                  /* Bild ↔ Titel/Bildunterschrift */
    --space-s: 1rem;                     /* innerhalb einer Gruppe: Überschrift ↔ Text, Absätze */
    --space-m: 2.5rem;                   /* zwischen Gruppen: Karten, Events, Spalten */
    --space-l: clamp(4rem, 10vw, 9rem);  /* zwischen Kapiteln */
    --gutter: 20px;                      /* Spaltenabstand im Raster */
    --control-height: 44px;              /* Eingabefelder, Terminzeilen, Buttons */
    --radius: 16px;                      /* Eckenradius aller Bilder, Felder, Buttons, Meldungen und Pillen */
    --stroke: 3px;                       /* Rand der Pillen (Navigation, Buttons, Termine, Meldungen), wie die Linie im Logo */
    --blue-mappenkurse: rgb(30, 30, 113);   /* Farbe der Mappenkurse-Seite (Text und ihre Pillen) */
    --stroke-base: var(--stroke);        /* Rand der Navigation, auch dort gültig, wo --stroke lokal dünner ist (Buchungen-Tabelle) */
    --font-ui: "Arial-Rounded", Arial, Helvetica, sans-serif;   /* Schrift der Pillen und Überschriften (Datei ist bereits fett) */
    --nav-font: clamp(15px, 1.4vw, 20px);   /* Schrift der Navigationspillen (Desktop), läuft mit der Fensterbreite mit */
    /* Oberkante für klebende Pillen (Tabellenkopf, Event-Überschriften): sie liegen direkt unter dem Header, ohne Abstand
       (die Ränder überlappen um einen Rand). Am Desktop haben Logo und Navigationspillen dieselbe Unterkante (die Navigation
       ist unten im Header ausgerichtet), die Unterkante ist die des Headers: kein Logo ragt über eine klebende Pille.
       Tablet/Smartphone: Logo-Unterkante = Header-Höhe minus 5px Innenabstand (siehe Media Query unten) */
    --sticky-top: calc(var(--header-height) - var(--stroke));
    --header-height: 10vh;               /* fixierter Header; Werte für Tablet/Smartphone in den Media Queries */
    --logo-h: calc(var(--header-height) - 10px);   /* Höhe des Logos: am Desktop der Inhalt des Headers; Tablet/Smartphone setzen sie selbst (der Header folgt dann ihr) */
}

/* Sprungziele (#kontaktformular, Angebotszeilen …) nicht unter dem fixierten Header landen lassen */
html {
    scroll-padding-top: calc(var(--header-height) + var(--space-s));
}


@font-face {
    font-family: "Arial-Rounded";
    src: url("../fonts/Arial-Rounded-Bold.ttf");
}


/* das hidden-Attribut soll immer gewinnen, auch gegen display-Regeln wie form { display: grid } */
[hidden] {
    display: none !important;
}

/* Scrollbalken überall ausblenden (Seite, Galerie, Textfelder); gescrollt wird weiterhin mit Mausrad, Touch und Tastatur.
   scrollbar-width für Firefox und aktuelle Chrome/Safari, ::-webkit-scrollbar für ältere WebKit-Browser */
* {
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    /* background-color: rgb(155, 208, 253); */
}


p {
    font-size: 16px;
    margin: 0 0 var(--space-s);
}

/* Schrift-Hierarchie (jede Seite hat genau eine h1, Überschriften springen keine Ebene):
   h1 = Seitentitel · h2 = Abschnitt · h3 = Eintrag (Karte, Angebot, Event) · .lead = große Aussage · .intro = Einleitungstext.
   Große Sätze und Einleitungen sind Absätze (p), keine Überschriften: ihre Größe hängt nicht am Tag. */
h1 {
    font-size: 28px;
    margin: 0 0 var(--space-s);
    font-weight: 400;
    font-family: var(--font-ui);
    line-height: 1.2;
}

h2 {
    margin: 0 0 var(--space-s);
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
}

h3 {
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 var(--space-xs);
}

/* Große Aussage unter dem Seitentitel (früher als h1 formatiert) */
/* mindestens 32px, damit sie auf Tablets nie kleiner wirkt als der Seitentitel (h1, 28px) */
.lead {
    font-size: max(3.4vw, 32px);
    margin: 0 0 var(--space-s);
    font-weight: 400;
    font-family: var(--font-ui);
    line-height: max(4vw, 38px);
}

/* Einleitungstext (früher als h2 formatiert) */
.intro {
    margin: 0 0 var(--space-s);
    font-size: 20px;
    max-width: 90%;
}

/* nur für Suchmaschinen und Screenreader (Gliederung ohne sichtbare Überschrift) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Das letzte Element einer Gruppe und direkte Rasterzellen bringen keinen eigenen Abstand mit –
   den Abstand regelt das Raster (gap) */
:where(h1, h2, h3, p):last-child,
.kapitel> :where(h1, h2, h3, p) {
    margin-bottom: 0;
}

/* Zwischenüberschriften im Fließtext (z. B. Datenschutz) */
:is(p, ul, ol)+ :is(h2, h3) {
    margin-top: var(--space-m);
}

/* Links sind gestrichelt unterstrichen (Gestaltungsprinzip der Seite) */
a {
    color: inherit;
    text-decoration: underline dashed 0.05em;
    text-underline-offset: 0.15em;
}

/* Logo und Navigation sind nicht unterstrichen; Hover und die aktuelle Seite füllen die Pille schwarz (siehe Pillen) */
.logo a,
.navbar a,
.navbar-mobile a {
    text-decoration-line: none;
}

a[href^="tel:"] {
    white-space: nowrap;
}

.mappenkurse {
    color: var(--blue-mappenkurse);
}

.pfeil {
    height: 3.4vw;
    width: 3.4vw;
    object-fit: cover;
}

.header {
    height: 10vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    /* background-color: rgb(155, 208, 253); */
    z-index: 1111;
}

/* Logo „Atelier Formhotel“: der Kasten ist CSS (Rand --stroke und dieselbe Linie wie die Navigationspillen, damit die
   Dicke auf jeder Bildschirmgröße stimmt), nur die Schrift ist ein Bild (logo-lettering.png, aus dem Original-Logo
   herausgelöst). Maße und Lage der Schrift stammen aus dem Original (733 × 318 px) und stehen hier als Variablen;
   bei einem neuen Logo diese Werte und die Datei neu bestimmen. Am Desktop so hoch wie der Inhalt des Headers, bündig mit
   dem linken Seitenrand und mit der Unterkante des Headers. */
.logo {
    --logo-ratio: 2.30503;        /* Breite : Höhe des Kastens */
    --logo-w: calc(var(--logo-h) * var(--logo-ratio));
    --logo-radius: 0.2186;        /* Eckenradius, Anteil an der Höhe (am Original gemessen) */
    --lettering-w: 0.87722;       /* Breite der Schrift, Anteil an der Breite */
    --lettering-x: 0.06548;       /* linker Abstand der Schrift, Anteil an der Breite */
    --lettering-y: 0.12579;       /* oberer Abstand der Schrift, Anteil an der Höhe */
    padding: 0;
    align-self: flex-start;
}

.logo a {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: var(--logo-w);
    height: var(--logo-h);
    border: var(--stroke) solid black;
    border-radius: calc(var(--logo-h) * var(--logo-radius));
    background-color: white;
}

/* absolut positioniert: die Ränder der Schrift beziehen sich auf die Innenkante des Rands, daher minus --stroke */
.logo img {
    position: absolute;
    left: calc(var(--logo-w) * var(--lettering-x) - var(--stroke));
    top: calc(var(--logo-h) * var(--lettering-y) - var(--stroke));
    width: calc(var(--logo-w) * var(--lettering-w));
    height: auto;
    max-width: none;
}

/* Pillen: Navigation, Buttons, Termine und Meldungen teilen sich einen Look, abgeleitet vom Logo „Atelier Formhotel“:
   weißer Grund, dicker schwarzer Rand (--stroke), runde Ecken, abgerundete Schrift. Was man drückt oder was
   ausgewählt ist, ist eine Pille; Fließtext-Links bleiben gestrichelt unterstrichen.
   Zustände: Hover = schwarz gefüllt (Buttons) bzw. unterstrichen (Navigation); aktuelle Seite und gewählter Termin
   = schwarz gefüllt. Die Eingabefelder bleiben bewusst leicht (gestrichelt), damit die Buttons hervortreten. */
.pill,
.navbar a,
.navbar-mobile a,
.navbar-btn,
form button,
.booking-termin {
    box-sizing: border-box;
    border: var(--stroke) solid black;
    border-radius: var(--radius);
    background-color: white;
    color: black;
    font-family: var(--font-ui);
    line-height: 1.2;
}

.navbar a,
.navbar-mobile a {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar a.active,
.navbar li:hover>a,
.navbar-mobile a.active,
.navbar-mobile a:hover,
form button:hover:not(:disabled),
.booking-termin[aria-pressed="true"],
.pill.is-active {
    background-color: black;
    color: white;
}

/* Navigation (Desktop): Pillen so breit wie ihr Wort, ohne Abstand nebeneinander (der Rand überlappt, damit er nicht
   doppelt so dick wird), rechts im Header */
.navbar {
    display: flex;
    align-items: center;
    align-self: flex-end;   /* Unterkante wie die des Logos (siehe --sticky-top) */
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar li+li {
    margin-left: calc(var(--stroke) * -1);
}

.navbar a {
    display: flex;
    align-items: center;
    /* ab 1025px läuft die Leiste mit der Fensterbreite mit, damit sie neben dem Logo Platz hat (bei 1440px volle Größe) */
    padding: 8px clamp(8px, 1vw, 14px);
    font-size: var(--nav-font);
    white-space: nowrap;
}

/* Hover (nur Maus): die Pille (und das Logo) kippt um 2° (gegen den Uhrzeigersinn) wie ein Holzklotz, alle anderen werden von ihrer Drehbewegung zur Seite
   geschoben (die Pillen links nach links, die rechts nach rechts, wie eine Reihe sich berührender Klötze). Die Ecken
   einer um den Winkel w gedrehten Pille schwingen um (Höhe / 2) · sin(w) nach außen: um so viel rutschen die anderen.
   Nur das Gesicht (a) dreht und rutscht, das li bleibt stehen und hält den Hover: so springt die Pille nicht zurück,
   wenn ihre Ecken unter dem Mauszeiger wegdrehen. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .header {
        --tilt: 2deg;   /* Kippwinkel beim Hover, für Navigationspillen und Logo */
    }

    .navbar {
        --push: calc((16px + 2 * var(--stroke) + 1.2 * var(--nav-font)) / 2 * sin(var(--tilt)));
    }

    .navbar a {
        position: relative;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.25s ease;
    }

    .navbar li:hover>a {
        z-index: 1;
        transform: rotate(calc(var(--tilt) * -1));   /* gegen den Uhrzeigersinn; --push hängt nur vom Betrag des Winkels ab */
    }

    .navbar li:hover~li>a {
        transform: translateX(var(--push));
    }

    .navbar li:has(~ li:hover)>a {
        transform: translateX(calc(var(--push) * -1));
    }

    /* Das Logo kippt beim Hover genauso (gegen den Uhrzeigersinn); der Hover liegt am stehenden .logo, nicht am
       gekippten Kasten, damit es an den Ecken nicht flackert. Es hat keine Nachbarn, die es wegschieben müsste. */
    .logo a {
        transition: transform 0.25s ease;
    }

    .logo:hover>a {
        transform: rotate(calc(var(--tilt) * -1));
    }
}


.kapitel {
    padding-left: 50px;
    padding-right: 50px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-s) var(--gutter);
}

/* Erstes Kapitel: Abstand zum fixierten Header */
main>.kapitel:first-child,
main>.event-section:first-child {
    padding-top: max(var(--space-l), calc(10vh + var(--space-m)));
}

/* Abschnitts-Start: eigenständiges, visuell getrenntes Kapitel einer Seite (Intro, Team, Preise, ...) */
.kapitel-section {
    padding-top: var(--space-l);
}

/* Listenelement: wiederholte Einträge innerhalb eines Abschnitts (z.B. einzelne Events) — deutlich kompakterer Abstand */
.kapitel-item {
    padding-top: var(--space-m);
    row-gap: var(--space-xs);
}

/* Erster Eintrag direkt unter einer Kapitel-Überschrift gehört zu ihr: enger als die Einträge untereinander */
.kapitel-section+.kapitel-item {
    padding-top: var(--space-s);
}

/* Eventliste: jedes Event (Bilder, Titel, Beschreibung) ist eine Gruppe und braucht Luft zum nächsten Event;
   das erste steht dicht unter der Abschnittsüberschrift */
.event-card {
    padding-top: var(--space-l);
}

.event-heading+.event-card {
    padding-top: var(--space-s);
}

/* Buchbare Events: die ganze Zeile ist ein Link. Der Titel-Link wird per ::after über die Karte gezogen (kein
   verschachtelter Link); Links in der Beschreibung liegen darüber und bleiben klickbar. */
.event-card.is-link {
    position: relative;
    cursor: pointer;
}

.event-card.is-link h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.event-card.is-link .col-span-3 p a {
    position: relative;
    z-index: 1;
}

/* Eventliste: Abschnitte (Aktuelle / Vergangene Veranstaltungen) mit einer Überschrift-Pille, die klebt, solange der
   Abschnitt zu sehen ist; der nächste Abschnitt schiebt sie weg. Abstand zwischen den Abschnitten oben am Abschnitt,
   nicht an der klebenden Pille. */
.event-section {
    padding-top: var(--space-l);
}

.event-heading {
    position: sticky;
    top: var(--sticky-top);
    z-index: 100;
}

.event-heading h2 {
    width: fit-content;
    justify-self: start;
    align-self: start;
    padding: 8px 20px;
    border: var(--stroke) solid black;
    border-radius: var(--radius);
    background-color: white;
    font-size: var(--nav-font);
    line-height: 1.2;
}

/* Kapitel, dessen Zellen eigenständige Gruppen sind (Karten, Spalten): größerer Zeilenabstand */
.kapitel-gruppen {
    row-gap: var(--space-m);
}

.img-m {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    filter: blur(10px);
    transition: filter 0.5s ease-in-out;
}

/* Bild und sein Titel/seine Bildunterschrift gehören eng zusammen */
.img-m+ :where(h3, p) {
    margin-top: var(--space-xs);
}

.gallery {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-height: 90vh;
}

.gallery-container {
    display: flex;
    transition: transform 0.3s ease-in-out;
    height: 100%;
}

.gallery-item {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Bildbox so groß wie das Foto (Seitenverhältnis bleibt): nur dann sitzt der Eckenradius am sichtbaren Foto;
   mit object-fit: contain in einer breiteren Box wäre er unsichtbar. 72vh = 80 % der Galeriehöhe (90vh) wie bisher. */
.gallery-item img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72vh;
}

.gallery-item p {
    padding: 10px;
    text-align: center;
    max-width: 80%;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    /* Remove background */
    color: black;
    /* Change color to black or any other color that fits your design */
    border: none;
    padding: 10px 15px;
    font-size: 24px;
    /* Increase font size for better visibility */
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease;
    /* Add transition for smooth color change on hover */
    height: 70vh;
    width: 50vw;
}

/* Zwei kleine Pillen („Vorheriges Bild“, „Nächstes Bild“) unter der Galerie (Foto und Beschreibung), mittig, wie in der Navigation ohne Abstand aneinander */
.gallery-controls {
    display: flex;
    justify-content: center;
}

.gallery-arrow {
    --pill-ink: black;
    border-color: var(--pill-ink);
    color: var(--pill-ink);
    padding: 4px 18px;
    font-size: 18px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.gallery-arrow+.gallery-arrow {
    margin-left: calc(var(--stroke) * -1);
}

/* auf der Mappenkurse-Seite blau wie der Rest der Seite */
.mappenkurse .gallery-arrow {
    --pill-ink: var(--blue-mappenkurse);
}

.gallery-arrow:hover {
    background-color: var(--pill-ink);
    color: white;
}

.gallery-arrow:focus-visible {
    outline: 2px solid var(--pill-ink);
    outline-offset: 2px;
}

.gallery-nav.prev {
    left: 10px;
}

.gallery-nav.prev:hover {
    cursor: url(../images/arrow_back_100dp_BLACK_FILL0_wght400_GRAD0_opsz48.svg), auto;
}

.gallery-nav.next:hover {
    cursor: url(../images/arrow_forward_100dp_BLACK_FILL0_wght400_GRAD0_opsz48.svg), auto;
}

.gallery-nav.next {
    right: 10px;
}

/* Preistabelle der Themenseiten (Mappenkurse, Kinderkurse): eine Zeile pro Angebot. Gruppen: Angebot (Titel,
   Beschreibung) und nächster Termin (Link, Zähler) mit Abstand s dazwischen, innerhalb xs; Preis rechts auf Titelhöhe.
   Trennlinien und gedämpfter Text leiten sich von der Textfarbe ab, damit sie auf jeder Seitenfarbe passen. */
.offer-prices {
    margin-top: var(--space-s);
}

.offer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-s) var(--gutter);
    padding: var(--space-s) 0;
    border-top: 1px dotted currentColor;
}

.offer-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.offer-row:last-child {
    padding-bottom: 0;
}

.offer-info {
    grid-column: 1;
}

.offer-title {
    margin: 0;
    font-family: "Arial-Rounded";
    font-size: 16px;
    font-weight: 400;
}

/* Abstand zum Titel nur, wenn es eine Beschreibung gibt */
.offer-text {
    margin-top: var(--space-xs);
}

.offer-text p:last-child {
    margin-bottom: 0;
}

.offer-price {
    grid-column: 2;
    grid-row: 1;
    max-width: 14em;
    margin: 0;
    text-align: right;
}

.offer-next {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.offer-next p {
    margin: 0;
}

.offer-muted {
    color: color-mix(in srgb, currentColor 70%, transparent);
    font-size: 14px;
}

.side-elements+.side-elements {
    margin-top: var(--space-m);
}

.event-photos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
    width: 100%;
}

.event-photos>div {
    flex: 1 1 auto;
    min-width: 0;
}

.event-photos img {
    display: block;
    width: auto;
    max-width: 100%;
    height: fit-content;
    max-height: 70vh;
    object-fit: contain;
}

/* Startseite: die letzten Events als Teaser-Reihe über dem Motto */
.event-teasers {
    align-items: start;
}

.event-teaser {
    display: block;
}

.event-teaser img {
    height: auto;
}

/* Fußzeile: Pillen im Look der Navigation (weiß, dicker Rand, abgerundete fette Schrift in derselben Größe wie vorher).
   Links: Adresse und Kontaktdaten (eine Pille); rechts: Impressum und Datenschutz (je eine Pille). Innerhalb einer Gruppe
   berühren sich die Pillen, der Rand überlappt (wie in der Navigation). Die Links in der Kontakt-Pille bleiben
   gestrichelt unterstrichen, die Pillen Impressum/Datenschutz sind selbst die Links (Hover = Farben umkehren). */
.footer {
    margin-top: var(--space-l);
    padding-bottom: var(--space-m);
}

.footer-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-s) var(--gutter);
}

.footer-group {
    display: flex;
    align-items: flex-start;
}

.footer-pill {
    margin: 0;
    padding: 10px 18px;
    font-size: 16px;
    font-style: normal;
}

.footer-group>*+* {
    margin-left: calc(var(--stroke) * -1);
}

.footer-link {
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-link:hover {
    background-color: black;
    color: white;
}

/* Kontakt: Adresse und Erreichbarkeit nebeneinander unter dem Foto */
.kontakt-adresse {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-s) var(--gutter);
    margin-top: var(--space-s);
    font-style: normal;
}

.kontakt-adresse p {
    margin: 0;
    font-size: 20px;
}

/* Formulare (Kontakt, Buchung, Stornierung): Felder als .form-field – Beschriftung, darunter (xs) das
   Bedienelement; den Abstand zwischen Feldern regelt das Raster */
form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-s) var(--gutter);
    width: 100%;
    align-self: start;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.form-field-wide {
    grid-column: 1 / -1;
}

.form-field-action {
    justify-content: flex-end;
}

form label {
    font-size: 16px;
}

form input,
form textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    border: var(--stroke) solid black;
    border-radius: var(--radius);
    font-size: 16px;
}

form input:not([type="radio"], [type="checkbox"]),
form button {
    height: var(--control-height);
}

form input[type="radio"],
form input[type="checkbox"] {
    flex: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* Der Rand ist schon schwarz und dick: der Fokus zeigt sich als zweiter Ring außen herum */
form input:focus,
form textarea:focus {
    outline: 2px solid black;
    outline-offset: 2px;
}

/* Buttons: Pille (siehe oben), auch die sekundären (Abbrechen, Ändern) */
form button {
    margin: 0;
    padding: 0 20px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

form button:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
}

form button:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* Rückmeldung nach dem Absenden (Fehler, Danke) */
.form-message {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 14px;
    border: var(--stroke) solid black;
    border-radius: var(--radius);
}

/* Spamschutz: für Menschen unsichtbar, Bots füllen es aus */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.navbar-mobile {
    display: none;
}

.navbar-btn {
    display: none;
}

/* Workshops: alle Angebote als Tabelle – Bild | Angebot | Termine | Preis. Jede Zeile ist mind. 20vh hoch,
   die Spalten liegen auf dem 6-Spalten-Raster der Seite. Die Zellen stehen auf der Grundlinie ihrer ersten
   Zeile (Titel, erster Termin, Preis), unabhängig von Schriftgröße und Button-Höhe.
   Jedes Angebot ist eine große Pille; Navigation, Tabellenkopf und alle Pillen sind direkt gestapelt (der Rand
   überlappt, damit er nicht doppelt so dick wird). Der Innenabstand liegt auf allen Seiten gleich, damit der Tabellenkopf dieselben Spalten bekommt. */
.workshop-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-s) var(--gutter);
    align-items: baseline;
    min-height: 20vh;
    padding: var(--space-m);
    border: var(--stroke-base) solid black;   /* so dick wie die Navigationspillen (die Tabelle hat sonst --stroke: 2px) */
    border-radius: var(--radius);
    background-color: white;
}

.workshop-row:not(.workshop-head)+.workshop-row {
    margin-top: calc(var(--stroke-base) * -1);
}

/* Die Buchungen-Tabelle (Terminbuttons, Buchungsformular, Tabellenkopf) hat einen dünneren Rand als der Rest der Seite */
.workshop-table {
    --stroke: 2px;
}

/* Tabellenkopf: eine Pille über die ganze Tabelle, so dick wie die Navigationspillen (der Rahmen sitzt auf ::before,
   damit die Spalten auf den Spalten der Angebots-Pillen darunter bleiben: die Zeile hat denselben seitlichen
   Innenabstand wie sie, Rand der Zeile + Abstand). Beim Scrollen klebt sie direkt unter der Navigation (die Ränder
   überlappen); sie hat weißen Grund und deckt die Angebote ab, die darunter durchlaufen. Auf Tablet/Smartphone gibt es
   keinen Kopf (siehe Media Query). */
.workshop-head {
    position: sticky;
    top: calc(var(--sticky-top) + 10px);   /* + 10px, weil ::before so weit nach oben übersteht */
    z-index: 100;
    min-height: 0;
    margin-bottom: calc(10px - var(--stroke-base));   /* ::before steht 10px nach unten über: der Rand der Pille liegt auf dem Rand der ersten Zeile (kein Abstand) */
    padding: 0 calc(var(--stroke-base) + var(--space-m));
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.2;
    color: black;
}

.workshop-head::before {
    content: "";
    position: absolute;
    inset: -10px 0;
    z-index: -1;
    border: var(--stroke-base) solid black;
    border-radius: var(--radius);
    background-color: white;
}

/* Text in der Termin-Spalte beginnt bündig mit dem Text in den Terminbuttons (Rahmen --stroke + Innenabstand 10px) */
.workshop-head .workshop-cell-dates {
    padding-left: calc(var(--stroke) + 10px);
}

.workshop-cell-image {
    grid-column: 1 / span 1;
    align-self: start;
}

.workshop-cell-text {
    grid-column: 2 / span 2;
}

.workshop-cell-dates {
    grid-column: 4 / span 2;
    display: grid;
    gap: var(--space-xs);
}

/* Text in der Termin-Spalte („Termine auf Anfrage“) beginnt bündig mit dem Text in den Terminbuttons
   (Rahmen --stroke + Innenabstand 10px) */
.workshop-cell-dates>p {
    padding-left: calc(var(--stroke) + 10px);
}

.workshop-cell-price {
    grid-column: 6 / span 1;
}

/* Buchungsformular unter der Zeile, bündig mit der Angebots-Spalte. Klappt weich auf: die Grid-Zeile wächst
   von 0fr auf 1fr (Höhe 0 → Inhalt); der negative Abstand hebt den Zeilenabstand auf, solange es zu ist */
.workshop-booking {
    grid-column: 2 / -1;
    align-self: start;
    display: grid;
    grid-template-rows: 0fr;
    margin-top: calc(var(--space-s) * -1);
    transition: grid-template-rows 0.35s ease;
}

.workshop-booking.is-open {
    grid-template-rows: 1fr;
}

/* nach dem Aufklappen nicht mehr beschneiden, damit Fokusrahmen sichtbar bleiben */
.workshop-booking.is-expanded>.booking {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .workshop-booking {
        transition: none;
    }
}

.workshop-booking:empty {
    display: none;
}

/* Bereich direkt unter dem Titel (Abstand xs über die Titel-Unterkante) */
.workshop-category {
    margin: 0 0 var(--space-s);
    font-size: 14px;
    color: #555;
}

/* Terminbuttons: Pillen (siehe oben) so hoch wie Eingabefelder; gewählt = schwarz gefüllt */
.booking-termin {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--control-height);
    box-sizing: border-box;
    margin: 0;
    /* dezente Kontur: 1px gestrichelt in Grau; der Innenabstand gleicht die dünnere Linie aus, damit der Text da bleibt */
    padding: 6px calc(10px + var(--stroke) - 1px);
    border: 1px dashed #aaa;
    font-size: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover und gewählt: durchgezogener Rand, schwarz gefüllt */
.booking-termin:hover:not(:disabled),
.booking-termin[aria-pressed="true"] {
    border-style: solid;
    border-color: black;
    background-color: black;
    color: white;
}

/* Auf dem schwarzen Termin müssen auch Hinweis und Zähler hell sein (sie haben sonst eigene dunkle Farben) */
.booking-termin:hover:not(:disabled) .booking-termin-note,
.booking-termin:hover:not(:disabled) .min-counter,
.booking-termin[aria-pressed="true"] .booking-termin-note,
.booking-termin[aria-pressed="true"] .min-counter {
    color: white;
}

.booking-termin:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.booking-termin:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
}

.booking-termin-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.booking-termin-note {
    font-size: 14px;
    color: #555;
}

/* Zähler für die Mindestteilnehmerzahl: nur Text, z. B. „1 von mind. 3 angemeldet“ */
.min-counter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    font-size: 14px;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.booking-termin-seats {
    margin-left: auto;
    font-size: 14px;
    white-space: nowrap;
}

/* Buchung in der Zeile: gewählter Termin, Angaben (eine Reihe), Übersicht */
.booking {
    min-height: 0;
    overflow: hidden;
}

.booking-inner {
    display: grid;
    gap: var(--space-s);
    margin-top: var(--space-s);
    padding-top: var(--space-s);
    border-top: 1px dotted rgb(186, 186, 186);
}

.booking-form {
    grid-template-columns: 1fr;
}

.booking-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s) var(--gutter);
}

.booking-selected {
    margin: 0;
    font-family: "Arial-Rounded";
    font-size: 20px;
}

.booking-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.booking-form legend {
    padding: 0;
    margin-bottom: var(--space-xs);
    font-size: 14px;
    color: #555;
}

.booking-fields {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 2fr;
    gap: var(--space-s) var(--gutter);
}

/* per Skript fokussierte Überschriften/Bereiche (Screenreader) ohne Fokusrahmen */
.booking-summary [tabindex="-1"]:focus,
.booking-success:focus {
    outline: none;
}

.booking-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-xs) var(--space-s);
    margin: 0 0 var(--space-s);
}

.booking-details dt {
    color: #555;
}

.booking-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.booking-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--space-s);
}

.booking-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.storno-form {
    grid-template-columns: 1fr;
}

/* Responsive */

/* Tablet und Smartphone: keine Navigationsleiste, klebende Pillen sitzen direkt unter dem Logo (Unterkante = Header-Höhe
   minus 5px Innenabstand des Headers, minus einen Rand: die Ränder überlappen) */
@media (max-width: 1024px) {
    :root {
        --sticky-top: calc(var(--header-height) - 5px - var(--stroke));
    }
}

/* Touch-Geräte bis Tablet-Hochformat (iPad Pro 12.9" = 1024px): Menü-Button statt Navigationsleiste, Galerie per Wischen */
@media (max-width: 1024px) {
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: fit-content;
        padding: 5px;
        box-sizing: border-box;
        display: block;
        z-index: 1111;
    }

    .navbar {
        display: none;
    }

    .show {
        display: flex !important;
    }

    /* Menü-Button oben rechts, auf Höhe der Oberkante des Logos (5px Innenabstand des Headers); die Seiten hängen direkt
       darunter, ohne Abstand (der Rand überlappt, wie in der Desktop-Navigation). Beide liegen über dem Header (z-index
       1111, durchsichtig über die ganze Breite), sonst finge der Header die Klicks auf die Einträge ab. */
    .navbar-btn {
        display: block;
        position: fixed;
        top: 5px;
        right: 5px;
        height: var(--control-height);
        padding: 0 20px;
        z-index: 1112;
        background-color: white;
        font-size: 20px;
    }

    .navbar-mobile {
        display: none;
        flex-direction: column;
        align-items: flex-end;   /* jede Pille nur so breit wie ihr Text, alle bündig am rechten Rand */
        position: fixed;
        top: calc(5px + var(--control-height) - var(--stroke));
        right: 5px;
        z-index: 1112;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navbar-mobile li+li {
        margin-top: calc(var(--stroke) * -1);
    }

    .navbar-mobile a {
        display: block;
        text-align: right;
        white-space: nowrap;
        font-size: 20px;
        padding: 10px;
    }

    .gallery-nav {
        display: none;
        /* Hide nav buttons */
    }

    /* Das Wischen übernimmt das Skript der Seite (Pointer-Events, Verschieben per transform), genau wie die Pillen und die
       Klickflächen. Der Container darf deshalb KEIN Scroll-Container sein (overflow-y: scroll machte auch overflow-x zu
       „auto“): er würde seinen Inhalt auf die eigene Box beschneiden, und die wandert beim Verschieben mit weg, die
       Bilder nach dem ersten wären unsichtbar. touch-action: pan-y lässt vertikales Scrollen der Seite zu, horizontale
       Wischgesten kommen beim Skript an. */
    .gallery-container {
        touch-action: pan-y;
        height: auto;
        display: flex;
    }

    .workshop-head {
        display: none;
    }

    /* schmalerer seitlicher Innenabstand in der Angebots-Pille, damit die Spalten genug Platz behalten */
    .workshop-row {
        padding: var(--space-m) var(--space-s);
    }

    /* ohne Kopfzeile beginnt die Termin-Spalte an der Titelkante: Text dort bündig, Buttons mit ihrem Rahmen */
    .workshop-cell-dates>p {
        padding-left: 0;
    }

    .booking-fields {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tablet-Hochformat (iPad mini 744px bis iPad Pro 1024px): 6-Spalten-Raster bleibt, kompaktere Abstände */
@media (min-width: 744px) and (max-width: 1024px) {
    /* Logo 18vw breit (Höhe = Breite / Seitenverhältnis 2,305), die Header-Höhe folgt (plus 10px Innenabstand) */
    :root {
        --logo-h: 7.81vw;
        --header-height: calc(var(--logo-h) + 10px);
    }

    .kapitel {
        padding-left: 30px;
        padding-right: 30px;
    }

    main>.kapitel:first-child,
    main>.event-section:first-child {
        padding-top: max(var(--space-l), 120px);
    }

    /* Workshop-Zeilen: Bild links über zwei Reihen, rechts Angebot, darunter Termine und Preis */
    .workshop-cell-image {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }

    .workshop-cell-text {
        grid-column: 3 / span 4;
    }

    .workshop-cell-dates {
        grid-column: 3 / span 3;
    }

    .workshop-cell-price {
        grid-column: 6 / span 1;
    }

    .workshop-booking {
        grid-column: 1 / -1;
    }
}

/* Smartphone: einspaltig */
@media (max-width: 743px) {
    /* Logo 36vw breit (Höhe = Breite / Seitenverhältnis 2,305), die Header-Höhe folgt (plus 10px Innenabstand) */
    :root {
        --logo-h: 15.62vw;
        --header-height: calc(var(--logo-h) + 10px);
    }

    main>.kapitel:first-child,
    main>.event-section:first-child {
        padding-top: 80px;
    }

    /* Fußzeile: die Gruppen untereinander, die Pillen darin ebenfalls gestapelt (der Rand überlappt) */
    .footer-group {
        flex-direction: column;
    }

    .footer-group>*+* {
        margin-left: 0;
        margin-top: calc(var(--stroke) * -1);
    }

    /* einspaltig, aber mit denselben Abständen (gap) wie im Raster */
    .kapitel {
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
    }

    h1 {
        font-size: 22px;
    }

    .lead {
        font-size: 25px;
        line-height: 30px;
        word-wrap: break-word;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }

    .intro {
        font-size: 18px;
    }

    .kontakt-adresse p {
        font-size: 18px;
    }

    .pfeil {
        display: none;
    }

    .icon {
        height: 20px;
        width: 20px;
        object-fit: cover;
    }

    /* Workshop-Zeilen untereinander: Bild (halbe Breite), Angebot, Termine, Preis */
    .workshop-row:not(.workshop-head) {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .workshop-cell-image {
        width: 50%;
    }

    .booking-fields {
        grid-template-columns: 1fr 2fr;
    }

    .booking-field-person {
        grid-column: 1 / -1;
    }
}