/*
 * Die öffentliche Darstellung von atlantis-hamburg.de (Feature 003).
 *
 * Diese Datei ist außerdem das Verzeichnis der Stile, die der Editor anbietet:
 * src/styles.php liest sie und erkennt eine Regel, der unmittelbar ein
 * Kommentar der Form
 *
 *     / * @style Bezeichnung | ziel * /
 *
 * vorausgeht. Zwischen Kommentar und Regel darf nichts stehen, sonst
 * registriert sich der Stil nicht.
 *
 * Das Ziel ist der Name des Elements, auf dem der Stil sitzen darf, denn
 * sanitize_dom() vergleicht gegen $element->nodeName und wirft eine Klasse weg,
 * die auf dem falschen Element sitzt. Ein Pseudo-Ziel "block" gibt es nicht:
 * der Bereiniger kennt nur echte Elementnamen.
 *
 * Alle drei Stile stehen deshalb auf p. Der Bereiniger lässt als
 * Klassenträger nur p, h2, h3, ul, ol und a zu, kein div.
 *
 * Eine Regel ohne diesen Kommentar ist für den Editor unsichtbar, Hilfsklassen
 * tauchen also nie in einer Auswahlliste auf.
 *
 * Bezeichnung deutsch, Klassenname englisch.
 *
 * Farben stehen nur in :root (003/S01). Nichts wird von einem fremden Server
 * geladen, auch keine Schrift (003/D14); tools/tests/foreign.php prüft diese
 * Datei mit.
 */

/* ------- Schrift: Lato, selbst ausgeliefert (003/A9) */

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/lato-400.woff2) format("woff2");
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fonts/lato-700.woff2) format("woff2");
}

/* ------- Farben, Abstände, Größen */

:root {
    /* Tiefsee und Sand (003, RUN-LOG). Die Farben kommen aus dem, was der Laden
       selbst gemacht hat: das Wasser seiner Terminserie, das Blau der Spielfigur
       im Logo von Atlantis Spiele, das Holz und Papier im Laden. Die Palette der
       alten Seite war die Voreinstellung ihres Themes.

       Jede Variable mit einem Kommentar davor erscheint im Admin unter "Design"
       (src/admin/design.php liest diesen Block). */

    /* Tiefsee: Kopf, Fuß, Hero ohne Foto, dunkle Flächen. Ein Blau und kein Schwarz, damit es nach Wasser aussieht. */
    --deep: #0C3157;
    /* Meer: das hellere Wasser oben in den Verläufen auf dunklem Grund. */
    --sea: #144A7A;
    /* Text auf hellem Grund. */
    --text: #0B1B2B;
    /* Ruhiger Text: Untertitel, Hinweise, Bildunterschriften. */
    --text-quiet: #3D4B5C;
    /* Akzent: Punkte, Rahmen, Markierungen. Das Blau der Spielfigur im Logo. Nicht für Schrift auf Weiß (4,3:1). */
    --accent: #0F7EC8;
    /* Links auf hellem Grund: das Akzentblau eine Stufe dunkler (5,7:1 auf Weiß). */
    --link: #0B6BAA;
    /* Link unter dem Zeiger. */
    --link-hover: #08507F;
    /* Sand: helle Bänder und Kästen. Die Wärme der Ladenfotos. */
    --surface: #F5F1EA;
    /* Bernstein: warmer Akzent, sparsam und nur auf dunklem Grund (5,8:1 auf Tiefsee). */
    --amber: #E0A04A;
    /* Warnung: der Stil "Warnung" im Editor. */
    --warn: #A71212;
    /* Offen: der Punkt vor "Jetzt geöffnet". */
    --open: #22C55E;
    /* Rahmen und Fokus: der Stil "Rahmen", der Ring um ein fokussiertes Element. */
    --frame: var(--accent);

    --line: color-mix(in srgb, var(--text) 14%, transparent);
    --on-dark: #fff;
    --on-dark-quiet: color-mix(in srgb, #fff 72%, transparent);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;

    --step-0: 1rem;
    --step-1: clamp(1.15rem, 1rem + .6vw, 1.4rem);
    --step-2: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
    --step-3: clamp(2.4rem, 1.4rem + 4vw, 4.5rem);

    --radius: 6px;
    --font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ------- Grundlage */

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

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

/* Ein Sprung innerhalb der Seite (Status zu Öffnungszeiten, Straße zur Karte)
   gleitet, außer jemand hat reduzierte Bewegung eingestellt. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

:target { scroll-margin-top: var(--space-4); }

body {
    margin: 0;
    color: var(--text);
    background: #fff;
    font: var(--step-0)/1.6 var(--font);
}

.wrap {
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 var(--space-3);
}

h1, h2, h3 { line-height: 1.2; overflow-wrap: anywhere; }
h1 { font-size: var(--step-2); }
h2 { font-size: var(--step-2); margin: 0 0 var(--space-4); }
h3 { font-size: var(--step-1); }

a { color: var(--link); text-underline-offset: .15em; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--frame); outline-offset: 2px; border-radius: 2px; }

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

main { padding: var(--space-5) 0 var(--space-6); }
main.bands { padding: 0; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.icon-external { margin-left: .25em; vertical-align: -1px; }

/* Das Titelbild einer Seite: ein Band über die volle Breite, nicht so hoch wie
   die Datei. Wie in ../acp-i.org: das Bild behält sein Seitenverhältnis und wird
   um --hero-top nach oben geschoben, das der Admin im Editor durch Ziehen setzt.
   Ein Prozent-Rand rechnet gegen die Breite, die Höhe des Bilds ist diese Breite
   mal Seitenverhältnis, also skaliert beides zusammen und der gewählte
   Ausschnitt bleibt oben in jedem Fenster. */
.hero { margin: 0; line-height: 0; height: 21rem; overflow: hidden; }
.hero img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    margin-top: calc(-1 * var(--hero-top, 0%));
}

@media (max-width: 51.24rem) {
    .hero { height: 12rem; }
}

.draft-notice {
    border-left: 3px solid var(--warn);
    background: color-mix(in srgb, var(--warn) 8%, #fff);
    padding: var(--space-2) var(--space-3);
}

/* ------- Die Auswahlliste des Editors. Drei Stile, weil die alte Seite genau
   diese drei benutzt (siehe die Bestandsaufnahme in Feature 002). */

/* @style Infobox | p */
.infobox {
    border-left: 3px solid var(--accent);
    background: var(--surface);
    padding: .8rem 1rem;
}

/* @style Warnung | p */
.alertbox {
    border-left: 3px solid var(--warn);
    background: color-mix(in srgb, var(--warn) 8%, #fff);
    color: var(--warn);
    padding: .8rem 1rem;
}

/* @style Rahmen | p */
.blue-border {
    border: 2px solid var(--frame);
    padding: .8rem 1rem;
}

/* @style Dokumente | ul */
.documents {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
    padding: 0;
    list-style: none;
}

/* @style Bildergalerie | p */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-2);
}

/* Ab hier Hilfsklassen ohne @style: für den Editor unsichtbar. */

/* ------- Kopf (003/S02). Klebt nicht. Dunkel wie der Fuß, damit die Seite
   oben und unten einen Rahmen hat und das Menü sich vom Inhalt abhebt. */

.site-header {
    border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent);
    background: var(--deep);
    color: var(--on-dark);
}

.site-header > .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-2);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--on-dark);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--step-1);
    letter-spacing: .02em;
}

/* Das Logo ist schwarz auf transparent: auf dem dunklen Kopf eine weiße
   Plakette, wie bei den Läden. */
.brand img { display: block; width: 48px; height: 48px; padding: 3px; border-radius: 50%; background: #fff; }
.brand:hover { color: var(--on-dark); }

/* ------- Navigation, zwei Ebenen */

.site-nav ul { margin: 0; padding: 0; list-style: none; }

.site-nav > ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); }

.site-nav a {
    display: block;
    padding: var(--space-2) var(--space-2);
    color: var(--on-dark);
    text-decoration: none;
    font-weight: 700;
    border-radius: var(--radius);
}

/* Bernstein auf Tiefsee, 5,8:1. Die aktuelle Seite bleibt weiß und ist
   unterstrichen: eine Farbe allein sagt es nicht. */
.site-nav a:hover { color: var(--amber); }
.site-nav a[aria-current="page"],
.site-nav .is-current-parent > a { color: var(--on-dark); box-shadow: inset 0 -3px 0 var(--amber); border-radius: 0; }

.site-nav li { position: relative; }

/* Der Pfeil am Elternteil, gezeichnet statt getippt. */
.site-nav .has-children > a::after {
    content: "";
    display: inline-block;
    width: .4em;
    height: .4em;
    margin-left: .45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.2em) rotate(45deg);
}

/* Das Klappmenü: beim Überfahren und beim Tastaturfokus. Nur Hover schlösse
   die Tastatur aus. Kein Skript. */
.site-nav .has-children > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 13rem;
    padding: var(--space-2);
    background: var(--sea);
    border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--deep) 50%, transparent);
}

.site-nav .has-children:hover > ul,
.site-nav .has-children:focus-within > ul { display: block; }

.site-nav .has-children > ul a { font-weight: 400; }
.site-nav .has-children > ul a:hover { background: var(--deep); color: var(--amber); }

.burger {
    display: none;
    padding: var(--space-1);
    border: 0;
    background: none;
    color: var(--on-dark);
    cursor: pointer;
}

.burger svg { display: block; }
.burger .burger-cross { display: none; }
.menu-open .burger .burger-bars { display: none; }
.menu-open .burger .burger-cross { display: inline; }

/* Unter 820px hinter dem Knopf. Nur mit Skript: ohne bleibt das Menü sichtbar,
   statt hinter einem Knopf zu liegen, der nichts täte. Die zweite Ebene steht
   im offenen Menü eingerückt da, ohne zweites Aufklappen. */
@media (max-width: 51.24rem) {
    .js .burger { display: block; }
    .js .site-header:not(.menu-open) .site-nav { display: none; }

    .site-nav { flex-basis: 100%; }
    .site-nav > ul { flex-direction: column; padding-bottom: var(--space-2); }
    .site-nav > ul > li + li { border-top: 1px solid color-mix(in srgb, var(--on-dark) 12%, transparent); }
    .site-nav a { padding: var(--space-3) var(--space-1); }

    .site-nav .has-children > a::after { display: none; }

    .site-nav .has-children > ul,
    .site-nav .has-children:hover > ul,
    .site-nav .has-children:focus-within > ul {
        display: block;
        position: static;
        min-width: 0;
        padding: 0 0 var(--space-2) var(--space-4);
        border: 0;
        background: none;
        box-shadow: none;
    }

    .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--amber); padding-left: var(--space-3); }
    /* Im offenen Menü steht die aktuelle Seite sichtbar unter ihrem Elternteil;
       ein zweiter Strich am Elternteil wäre doppelt. */
    .site-nav .is-current-parent > a { box-shadow: none; }

    .site-nav .has-children > ul a { padding: var(--space-2) var(--space-1); }
}

/* ------- Der Offen-Status (003/S03): das Wort immer, der Punkt dazu */

.open-status { margin: 0; }

.open-status .dot {
    display: inline-block;
    width: .7em;
    height: .7em;
    margin: 0 .35em;
    border-radius: 50%;
    background: var(--on-dark-quiet);
    vertical-align: .02em;
}

.open-status.is-open .dot {
    background: var(--open);
    box-shadow: 0 0 0 .25em color-mix(in srgb, var(--open) 25%, transparent);
}

.open-status .sep { margin: 0 .35em; opacity: .6; }

/* Als Link: sieht aus wie der Satz, verrät sich unter dem Zeiger. */
.open-status a { color: inherit; text-decoration: none; }
.open-status a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: .25em; }

/* ------- Startseite: der Hero (003/S05). Ohne Foto, Typografie und Farbe.
   Kommt ein Foto, wird es ein background-image hier, sonst ändert sich nichts. */

.hero-home {
    color: var(--on-dark);
    background:
        radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%),
        linear-gradient(180deg, var(--sea), var(--deep));
    padding: var(--space-5) 0 var(--space-5);
}

.hero-home { position: relative; overflow: hidden; }
.hero-home > .wrap { position: relative; z-index: 1; }

/* Das Foto hinter dem Hero. Die Kacheln der Läden tragen ihren eigenen dunklen
   Grund; direkt auf dem Foto stehen nur Name und Untertitel. Deshalb nur oben
   links eine Abdunklung, wo die stehen, und sonst fast keine: das Foto soll
   hell bleiben. Ein Schatten hält die Schrift auf hellen Stellen lesbar. */
.hero-home.has-image { background: var(--deep); }

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.08) saturate(1.1);
}

.hero-home.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--deep) 55%, transparent) 0%,
                                color-mix(in srgb, var(--deep) 10%, transparent) 40%,
                                color-mix(in srgb, var(--deep) 25%, transparent) 100%);
}

.hero-home.has-image h1 {
    text-shadow: 0 2px 12px color-mix(in srgb, var(--deep) 70%, transparent);
}

.hero-home.has-image .store-now { background: color-mix(in srgb, var(--deep) 68%, transparent); }

.hero-home h1 {
    font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -.01em;
    margin: 0 0 var(--space-4);
}

/* ------- Die zwei Läden im Hero (003/D17): gleichrangig nebeneinander, auf dem
   Telefon untereinander. Die Überschrift sagt, wofür man hingeht; darin
   unterscheiden sie sich. */

.stores-now { display: grid; gap: var(--space-3); }

.store-now {
    padding: var(--space-3);
    border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--deep) 55%, transparent);
    backdrop-filter: blur(6px);
}

.store-head { display: flex; align-items: center; gap: var(--space-3); }
.store-head > :last-child { min-width: 0; }

/* Das Logo des Ladens auf einer weißen Plakette: es ist schwarz auf
   transparent und verschwände sonst auf dunklem Grund. */
.store-logo {
    flex: none;
    width: 48px;
    height: 48px;
    padding: 3px;
    border-radius: 50%;
    background: #fff;
}

.site-footer .store-logo { width: 40px; height: 40px; }

/* In der Spalte bei der Karte groß: hier stehen die beiden Logos nebeneinander,
   und man soll sie vergleichen können. */
.store-visit .store-logo { width: 96px; height: 96px; padding: 4px; }

@media (max-width: 47.99rem) {
    .store-visit .store-logo { width: 72px; height: 72px; }
}

/* In der Kachel im Hero als Wasserzeichen: groß, weiß, blass, über den Rand
   hinaus angeschnitten, und hinter dem Text. Das Logo ist schwarz; auf dem
   dunklen Grund wird es weiß gefärbt, die Spielfigur erkennt man an der Form. */
.store-now { position: relative; overflow: hidden; }
.store-now > :not(.store-logo) { position: relative; }

.store-now .store-logo {
    position: absolute;
    top: 50%;
    right: -1.5rem;
    width: 180px;
    height: 180px;
    padding: 0;
    background: none;
    filter: brightness(0) invert(1);
    opacity: .12;
    transform: translateY(-50%);
    pointer-events: none;
}

@media (max-width: 47.99rem) {
    .store-now .store-logo { width: 140px; height: 140px; }
}

.site-footer .store-head { margin-bottom: var(--space-2); }
.site-footer .store-head .footer-heading { margin: 0; }

.store-kind {
    margin: 0 0 .1rem;
    color: var(--amber);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.store-now h2 { margin: 0; font-size: var(--step-1); line-height: 1.2; }
.store-now h2 a { color: var(--on-dark); text-decoration: none; }
.store-now h2 a:hover { text-decoration: underline; }

.store-now .store-name { margin: var(--space-1) 0 0; font-size: .9rem; color: var(--on-dark-quiet); }

.hero-home .focus {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .5em;
    margin: var(--space-2) 0;
    padding: 0;
    list-style: none;
    font-weight: 700;
}

.hero-home .focus li + li::before {
    content: "·";
    margin-right: .5em;
    color: var(--amber);
}

.hero-home .contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
    margin: var(--space-1) 0 0;
}

.hero-home .contact a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: var(--on-dark);
    text-decoration: none;
}

.hero-home .contact a span { border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 35%, transparent); }
.hero-home .contact a:hover span { border-bottom-color: var(--on-dark); }
.hero-home .contact .icon { flex: none; stroke: var(--amber); }

/* Auf dem Telefon zwei Knöpfe statt Anschrift und Nummer, damit beide Läden
   über dem Falz stehen. */
.hero-home .contact .short { display: none; }

@media (max-width: 47.99rem) {
    .hero-home { padding: var(--space-4) 0 var(--space-5); }
    .hero-home h1 { margin-bottom: var(--space-3); }
    .hero-home .focus { margin: var(--space-1) 0; }

    .hero-home .contact { gap: var(--space-2); margin-top: var(--space-2); }
    .hero-home .contact .long { display: none; }
    .hero-home .contact .short { display: inline; border: 0; }
    .hero-home .contact a {
        min-height: 40px;
        padding: 0 var(--space-3);
        border: 1px solid color-mix(in srgb, var(--on-dark) 30%, transparent);
        border-radius: 999px;
        font-weight: 700;
    }
}

@media (min-width: 48rem) {
    .hero-home { padding: var(--space-6) 0; }
    .stores-now { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
    .store-now { padding: var(--space-4); }
    .store-now h2 { font-size: 1.6rem; }
}

/* ------- Startseite: die Bänder */

.band { padding: var(--space-6) 0; }
.band-tint { background: var(--surface); }

.more { margin: var(--space-4) 0 0; text-align: right; font-weight: 700; }
.more a::after { content: " \203A"; }

/* ------- Termine: eine Zeile je Termin auf dem Telefon, Kacheln ab Tablet */

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

.event {
    display: grid;
    grid-template-columns: 7rem 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--line);
}

.event:last-child { border-bottom: 1px solid var(--line); }

/* Auf dem Telefon die Grafik klein links, Datum und Titel rechts daneben. */
.event-img, .event-mark {
    grid-row: 1 / span 2;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    object-fit: cover;
}
.event-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    background:
        radial-gradient(90% 70% at 50% -15%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
        linear-gradient(180deg, var(--sea), var(--deep));
    color: var(--on-dark);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
}
/* Auf der kleinen Fläche nur die Spielreihe; der Titel steht daneben. */
@media (max-width: 47.99rem) {
    .events:not(.series-grid) .event-mark > span { display: none; }
    .events:not(.series-grid) .event-mark small { font-size: inherit; }
}

.event p { margin: 0; }
.event-when { font-weight: 700; }
.event-time { margin-left: var(--space-1); font-weight: 400; color: var(--text-quiet); }
.event-line { font-weight: 700; }

@media (min-width: 48rem) {
    .events {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .event,
    .event:last-child {
        display: flex;
        flex-direction: column;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        overflow: hidden;
    }

    /* Die Grafik des Ladens zur Reihe, im Format der Serie (3:2). */
    .event-img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

    /* Ohne Grafik die Tiefsee der Serie: Licht von oben, dunkel nach unten,
       und der Name des Termins darauf wie in den Grafiken des Ladens. */
    .event-mark {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
        aspect-ratio: 3 / 2;
        padding: var(--space-3);
        background:
            radial-gradient(90% 70% at 50% -15%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
            linear-gradient(180deg, var(--sea), var(--deep));
        color: var(--on-dark);
        text-align: center;
        text-shadow: 0 2px 8px color-mix(in srgb, var(--deep) 80%, transparent);
    }

    .event-mark small {
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--on-dark-quiet);
    }

    .event-mark span {
        font-size: var(--step-1);
        font-weight: 700;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .event-when { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-3) 0; }
    .event-time { display: inline; }
    .event-title { padding: var(--space-1) var(--space-3) var(--space-3); }
    .event-line { display: none; }
}

/* Drei je Reihe auf dem Bildschirm, zwei auf dem Tablet: die Grafiken tragen
   Schrift und brauchen die Breite. */
@media (min-width: 64rem) {
    .events { grid-template-columns: repeat(3, 1fr); }
}

/* ------- So findest du uns: je Laden eine Spalte (003/S06, D17) */

.visit { display: grid; gap: var(--space-6); }

.store-visit h3 { margin: 0 0 var(--space-2); font-size: var(--step-2); }
.store-visit h3 .store-name { display: block; font-size: var(--step-0); font-weight: 400; color: var(--text-quiet); }
.store-note { margin: 0 0 var(--space-3); }

.map { margin: 0 0 var(--space-5); }
.map-frame { position: relative; }
.map img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }

/* Die Läden auf der Karte: HTML über dem Bild, damit die Beschriftung auf dem
   Telefon lesbar bleibt. Der Punkt sitzt genau auf der Lage (--x, --y aus
   home_map_point()), das Schild daneben. */
.map-pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transform: translate(-.75rem, -50%);
    color: var(--text);
    text-decoration: none;
}

.map-pin::before {
    content: "";
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--text) 45%, transparent);
}

.map-pin span {
    padding: .2rem .6rem;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 1px 6px color-mix(in srgb, var(--text) 35%, transparent);
    font-weight: 700;
    font-size: .95rem;
    white-space: nowrap;
}

.map-pin:hover span { color: var(--link); }

@media (max-width: 47.99rem) {
    .map-pin span { font-size: .8rem; padding: .1rem .45rem; }
    .map-pin::before { width: 1.1rem; height: 1.1rem; border-width: 2px; }
}
.map figcaption { margin-top: var(--space-2); font-size: .875rem; color: var(--text-quiet); }
.map figcaption a { color: inherit; }

.week { border-collapse: collapse; width: 100%; }
.week caption { text-align: left; font-weight: 700; padding-bottom: var(--space-2); }
.week th, .week td { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); text-align: left; }
.week th { font-weight: 700; padding-right: var(--space-4); }
.week td { text-align: right; font-variant-numeric: tabular-nums; }

.directions { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.directions li { padding: var(--space-1) 0; }

.band-lead { margin: calc(-1 * var(--space-3)) 0 var(--space-4); color: var(--text-quiet); }

@media (min-width: 48rem) {
    .visit { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}

/* ------- Fuß: beide Läden, dann die Pflichtseiten */

.site-footer {
    color: var(--on-dark-quiet);
    background: var(--deep);
    padding: var(--space-6) 0 var(--space-5);
    font-size: .95rem;
}

.site-footer a { color: var(--on-dark); }

.footer-grid { display: grid; gap: var(--space-5); }

.footer-heading { margin: 0 0 var(--space-2); color: var(--on-dark); font-weight: 700; }
.footer-store-name { display: block; font-weight: 400; color: var(--on-dark-quiet); }
.site-footer p { margin: 0 0 var(--space-2); }
.site-footer ul { margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.site-footer li { padding: var(--space-1) 0; }

.footer-store .open-status { margin-bottom: var(--space-2); color: var(--on-dark); }

.footer-store dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--space-4);
    margin: 0;
}

.footer-store dd { margin: 0; font-variant-numeric: tabular-nums; }

.footer-copy { margin-top: var(--space-4); font-size: .85rem; }

@media (min-width: 48rem) {
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ------- Veranstaltungen (005): die Liste eines Monats und die Seite einer Reihe */

.events-page h1, .series-page h1 { font-size: var(--step-2); margin: 0 0 var(--space-4); }

/* Filter nach Spiel: Links, umbrechend, der aktive gefüllt. */
.game-filter ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.game-filter a {
    display: inline-block;
    padding: .35rem .85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: .9rem;
}
.game-filter a:hover { border-color: var(--link); color: var(--link); }
.game-filter a[aria-current="page"] { background: var(--deep); border-color: var(--deep); color: var(--on-dark); }

.agenda-month { margin: var(--space-5) 0 var(--space-2); }
.game-filter + .agenda-month { margin-top: var(--space-3); }

/* Liste oder Kalender: zwei Knöpfe als ein Schalter. */
.view-switch { display: inline-flex; margin: 0 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.view-switch a { padding: .35rem .9rem; color: var(--text); text-decoration: none; font-weight: 700; font-size: .9rem; }
.view-switch a + a { border-left: 1px solid var(--line); }
.view-switch a[aria-current="page"] { background: var(--surface); color: var(--deep); }
.view-switch a:hover { color: var(--link); }

/* Der Kalender: ein Monat als Raster. Auf dem Bildschirm Zeilen je Termin, auf
   dem Telefon Punkte; die Zahl eines Tages mit Terminen springt in die Liste. */
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: var(--space-4); }
.cal th { padding: var(--space-1) 0; font-size: .8rem; color: var(--text-quiet); text-align: left; }
.cal td { padding: 3px; border: 1px solid var(--line); vertical-align: top; }
.cal-cell { display: flex; flex-direction: column; height: 7.5rem; }
.cal .cal-number { display: inline-block; min-width: 1.6em; padding: 0 2px; font-weight: 700; font-size: .85rem; text-decoration: none; color: var(--text); }
.cal a.cal-number:hover { color: var(--link); }

/* Die Termine füllen den Tag; zwei teilen ihn sich zur Hälfte. */
.cal ul { flex: 1; display: flex; flex-direction: column; gap: 3px; min-height: 0; margin: 2px 0 0; padding: 0; list-style: none; }
.cal li { flex: 1 1 0; min-height: 0; }

/* Eine Kachel: die Grafik der Reihe abgedunkelt dahinter, ohne Grafik die Tiefsee. */
.cal-event {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    background:
        radial-gradient(90% 70% at 50% -15%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
        linear-gradient(180deg, var(--sea), var(--deep));
    color: var(--on-dark);
    text-decoration: none;
}
.cal-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cal-event::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--deep) 85%, transparent));
}
.cal-text {
    position: relative;
    z-index: 1;
    padding: 3px 5px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 3px color-mix(in srgb, var(--deep) 90%, transparent);
}
.cal-time { color: var(--amber); }
.is-split .cal-event::after { background: color-mix(in srgb, var(--deep) 72%, transparent); }
.is-split .cal-bg { filter: blur(1px); }
a.cal-event:hover .cal-text { text-decoration: underline; }
a.cal-event:focus-visible { outline-offset: -3px; }

.cal .is-other { background: color-mix(in srgb, var(--surface) 40%, #fff); }
.cal .is-past { opacity: .45; }
.cal .is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal .is-today .cal-number { color: var(--accent); }
.cal .is-closed { background: color-mix(in srgb, var(--warn) 6%, #fff); }
.cal-closed { display: block; padding: 0 2px; font-size: .72rem; font-weight: 700; color: var(--warn); }

@media (max-width: 47.99rem) {
    .cal-cell { height: 3.25rem; }
    .cal .cal-number { font-size: .8rem; }
    .cal-closed { font-size: 0; }
    .cal-closed::before { content: "zu"; font-size: .65rem; }
    /* Punkte statt Kacheln: auf 360 px lesbar ist nur die Liste. */
    .cal ul { flex: 0; flex-direction: row; flex-wrap: wrap; }
    .cal li { flex: none; }
    .cal-event { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
    .cal-event::after, .cal-bg, .cal-text { display: none; }
    .cal .has-events .cal-number { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
}

/* Die Tage und ihre Termine. */
.agenda, .agenda ul { margin: 0; padding: 0; list-style: none; }
.agenda-day { padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.agenda-day h3 { margin: 0 0 var(--space-2); font-size: var(--step-0); }

.agenda-item > a, .agenda-item > div {
    display: grid;
    grid-template-columns: 3.5rem 4.5rem 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--text);
    text-decoration: none;
}
.agenda-item > a:hover .agenda-title { color: var(--link); text-decoration: underline; }
.agenda-time { font-variant-numeric: tabular-nums; color: var(--text-quiet); }
.agenda-thumb { display: block; width: 4.5rem; height: 3rem; object-fit: cover; border-radius: 3px; }
span.agenda-thumb {
    background:
        radial-gradient(90% 70% at 50% -15%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
        linear-gradient(180deg, var(--sea), var(--deep));
}
.agenda-title { font-weight: 700; }
.agenda-store { margin-left: var(--space-1); font-weight: 400; font-size: .85rem; color: var(--text-quiet); }
.agenda-game { display: none; font-size: .85rem; color: var(--text-quiet); }
.agenda-item.is-closed { padding: var(--space-2) 0 var(--space-2) calc(8rem + 2 * var(--space-3)); color: var(--warn); }
.agenda-reason { color: var(--text-quiet); }
.agenda-empty { padding: var(--space-4) 0; color: var(--text-quiet); }

@media (min-width: 48rem) {
    .agenda-item > a, .agenda-item > div { grid-template-columns: 3.5rem 6rem 1fr auto; }
    .agenda-thumb { display: block; width: 6rem; height: 4rem; object-fit: cover; border-radius: 4px; }
    span.agenda-thumb {
        background:
            radial-gradient(90% 70% at 50% -15%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%),
            linear-gradient(180deg, var(--sea), var(--deep));
    }
    .agenda-item.is-closed { padding-left: calc(9.5rem + 2 * var(--space-3)); }
    .agenda-game { display: inline; }
}

.calendar-subscribe { margin: var(--space-5) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.calendar-subscribe a { font-weight: 700; }
.calendar-subscribe span { color: var(--text-quiet); }

/* Eine Kachel als Link, auf der Startseite wie unter "Unsere Reihen": die
   ganze Kachel führt zur Reihe. */
.events .event-link { display: flex; flex-direction: column; height: 100%; color: var(--text); text-decoration: none; }
.events .event-link:hover .event-title, .events .event-link:hover strong { color: var(--link); }
/* Auf dem Telefon ist eine Terminkachel eine Zeile aus zwei Spalten; der Link
   spannt beide und ist selbst das Raster. Nicht display: contents: ein Link
   ohne eigenen Kasten ist in manchen Browsern nicht per Tastatur erreichbar. */
@media (max-width: 47.99rem) {
    .events:not(.series-grid) .event-link {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        grid-template-columns: 7rem 1fr;
        grid-template-rows: auto 1fr;
        align-items: start;
        gap: var(--space-1) var(--space-3);
    }
}
.series-grid .event { background: #fff; }
@media (max-width: 47.99rem) {
    .series-grid { display: grid; gap: var(--space-3); }
    .series-grid .event, .series-grid .event:last-child { display: block; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
    .series-grid .event-img, .series-grid .event-mark { display: flex; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
    .series-grid .event-mark { align-items: center; justify-content: center; background: linear-gradient(180deg, var(--sea), var(--deep)); color: var(--on-dark); font-weight: 700; }
    .series-grid .event-title { padding: var(--space-2) var(--space-3) var(--space-3); margin: 0; }
}

/* Die Seite einer Reihe. */
.series-back { margin: 0 0 var(--space-4); }
.series-back a { font-weight: 700; text-decoration: none; }
.series-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.series-head h1 { margin: 0 0 var(--space-2); }
.series-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.series-where { margin: 0; color: var(--text-quiet); }
.series-schedule { margin: var(--space-2) 0 0; font-size: var(--step-1); font-weight: 700; }

.series-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); max-width: 44rem; }
.series-facts dt { font-weight: 700; }
.series-facts dd { margin: 0; }

.series-text { max-width: 44rem; margin-bottom: var(--space-5); }
.series-page h2 { font-size: var(--step-1); margin: var(--space-5) 0 var(--space-3); }

.series-dates { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.series-dates li { padding: .35rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); font-variant-numeric: tabular-nums; }

.series-contact a { font-weight: 700; }
.series-consent { display: flex; gap: var(--space-4); align-items: flex-start; max-width: 44rem; margin-top: var(--space-5); }
.series-consent h2 { margin-top: 0; }
/* Die erste Seite des PDFs als Blatt: Rahmen und Schatten, leicht angehoben unter dem Zeiger. */
.consent-thumb { flex: none; display: block; }
.consent-thumb img {
    display: block;
    width: 165px;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 18%, transparent);
    transition: transform .15s;
}
.consent-thumb:hover img { transform: translateY(-2px); }
@media (max-width: 29.99rem) {
    .consent-thumb img { width: 120px; }
}

@media (min-width: 48rem) {
    .series-head { grid-template-columns: minmax(0, 24rem) 1fr; align-items: center; }
}

/* ------- Der Stil "Dokumente": je Eintrag die erste Seite als Blatt, der Name darunter. */
.documents a { display: flex; flex-direction: column; gap: var(--space-2); font-weight: 700; text-decoration: none; }
.documents img {
    width: 100%;
    height: auto;
    /* Alle als A4-Blatt, auch wo ein PDF etwas anders geschnitten ist: sonst
       stehen die Namen darunter nicht auf einer Linie. */
    aspect-ratio: 210 / 297;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 18%, transparent);
    transition: transform .15s;
}
.documents a:hover img { transform: translateY(-2px); }
.documents a:hover { text-decoration: underline; }

/* ------- Die Bilder im Stil "Bildergalerie": gleich groß, beschnitten auf 4:3. */
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.js .gallery img { cursor: zoom-in; transition: opacity .15s; }
.js .gallery img:hover { opacity: .85; }

/* Die Bildansicht (gallery.js): das Bild so groß, wie das Fenster erlaubt,
   darunter Unterschrift und Zähler, Knöpfe an den Rändern. */
.lightbox {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--on-dark);
}
.lightbox::backdrop { background: color-mix(in srgb, var(--deep) 94%, transparent); }
.lightbox figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    height: 100%;
    margin: 0;
    padding: var(--space-5) var(--space-7);
}
.lightbox img { max-width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; border-radius: 4px; cursor: pointer; }
.lightbox figcaption { display: flex; gap: var(--space-4); font-size: .95rem; }
.lightbox-counter { color: var(--on-dark-quiet); font-variant-numeric: tabular-nums; }
.lightbox button {
    position: fixed;
    margin: 0;
    padding: 0;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--on-dark) 12%, transparent);
    color: var(--on-dark);
    font: 700 2rem/1 var(--font);
    cursor: pointer;
}
.lightbox button[hidden] { display: none; }
.lightbox button:hover { background: color-mix(in srgb, var(--on-dark) 24%, transparent); }
.lightbox-prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox-close { right: var(--space-3); top: var(--space-3); }

@media (max-width: 47.99rem) {
    .lightbox figure { padding: var(--space-6) var(--space-2) var(--space-4); }
    .lightbox-prev, .lightbox-next { top: auto; bottom: var(--space-3); transform: none; }
}

/* ------- Das Team (005): eine Zeile je Person, rundes Porträt links, wie das
   Committee in ../acp-i.org. Ohne Porträt bleibt die linke Spalte leer. */
.team { margin-top: var(--space-6); }
.team ul { margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.team li {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0 var(--space-5);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--line);
}
.team img { width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; }
.team-person { grid-column: 2; max-width: 40rem; }
.team-person h3 { margin: 0; }
.team-role { margin: .1rem 0 var(--space-2); color: var(--text-quiet); font-weight: 700; }
.team-person p { margin: var(--space-2) 0 0; }

@media (max-width: 40rem) {
    .team li { grid-template-columns: 5rem 1fr; gap: 0 var(--space-3); }
    .team img { width: 5rem; height: 5rem; }
}

/* ------- Neuheiten (006): Kacheln, Übersicht, Beitrag */

.post-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    text-decoration: none;
}
.post-card:hover .post-card-title { color: var(--link); text-decoration: underline; }
.post-card-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-card-blank { background: linear-gradient(180deg, var(--sea), var(--deep)); }
.post-card-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); }
.post-kind { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--link); }
.post-kind a { text-decoration: none; }
.post-card-title { font-size: var(--step-1); font-weight: 700; line-height: 1.25; }
.post-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: .85rem; color: var(--text-quiet); }
.post-card-teaser { font-size: .95rem; color: var(--text-quiet); }

.post-author { display: inline-flex; align-items: center; gap: var(--space-2); }
.post-author img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.post-author-role { color: var(--text-quiet); }

.post-pager { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); color: var(--text-quiet); }
.post-pager a { font-weight: 700; text-decoration: none; }
.post-pager-older { margin-left: auto; }

.post { max-width: 44rem; }
.post h1 { margin: var(--space-2) 0; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); color: var(--text-quiet); }
.post-meta .post-author img { width: 40px; height: 40px; }
.post-content img { border-radius: 4px; }
.post-more { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }

/* ------- Die Passwortseite vor der Vorschau (src/demo_gate.php) */
.demo-gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background:
        radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%),
        linear-gradient(180deg, var(--sea), var(--deep));
}
.demo-card {
    width: 100%;
    max-width: 25rem;
    padding: var(--space-6) var(--space-5);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 40px color-mix(in srgb, var(--deep) 60%, transparent);
    text-align: center;
}
.demo-card h1 { margin: 0; }
.demo-card p { margin: 0; color: var(--text-quiet); }
.demo-card form { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.demo-card input {
    flex: 1;
    min-width: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
}
.demo-card button {
    padding: .6rem 1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--deep);
    color: var(--on-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.demo-card button:hover { background: var(--link); }
.demo-wrong { margin-top: var(--space-3) !important; color: var(--warn) !important; font-weight: 700; }