/* ============================================================================
   Erdbeermund Singen — Design und Layout
   ----------------------------------------------------------------------------
   Die Flyer geben den Ton an: helles Holz, rot-weiß kariert, Schreibschrift,
   rotes Datums-Badge. Die Seite nimmt das auf, ohne es nachzubauen — heller
   Papiergrund für alles Lesbare, Holz nur als Band in Hero, Trennern und Fuß.

   Keine Inline-Styles. Die Content-Security-Policy fährt style-src 'self'
   ohne unsafe-inline; was aus der API kommt, wird als <img> oder textContent
   gesetzt, nie als style-Attribut.
   ========================================================================== */

/* ------------------------------------------------------------- Schriften -- */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;      /* variable Achse, ein Datei-Abruf für alle Stärken */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Yellowtail';
  src: url('../fonts/yellowtail.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------- Token -- */

:root {
  /* Flächen. „paper" ist der Grund, auf dem gelesen wird. */
  --paper:        #faf6f0;
  --paper-sunk:   #f2eade;
  --paper-card:   #ffffff;

  /* Schrift. Warmes Schwarz, kein reines #000 — das wirkt auf Creme hart. */
  --ink:          #231c17;
  --ink-soft:     #6b5f54;
  --ink-faint:    #9a8d80;

  /* Akzentfarbe der Marke, wie auf den Flyern. */
  --red:          #e61b20;
  --red-dark:     #bd1317;
  /* Aufgehellt für das dunkle Holzband — das Markenrot säuft dort ab. */
  --red-bright:   #ff4a3d;
  --red-ink:      #ffffff;

  /* Holz als Band — Originalbrett aus den Flyer-Designs. Der Wert ist die
     Mischfarbe hinter dem Cremeschleier, falls das Bild nicht lädt. */
  --wood:         #d6c4ae;
  --wood-dark:    #8a6a46;

  --line:         #e3d9cb;

  --radius:       14px;
  --radius-sm:    8px;

  --shadow-card:  0 2px 4px rgba(60, 40, 20, .06), 0 10px 24px rgba(60, 40, 20, .08);
  --shadow-lift:  0 6px 12px rgba(60, 40, 20, .10), 0 20px 40px rgba(60, 40, 20, .14);

  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-script:  'Yellowtail', 'Brush Script MT', cursive;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Seitenbreite und Außenabstand — der Rand gilt auch auf dem Handy. */
  --container:    1180px;
  --gutter:       clamp(16px, 4vw, 40px);
  --section-gap:  clamp(56px, 8vw, 104px);

  --header-h:     72px;
}

/* ----------------------------------------------------------------- Basis -- */

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

html {
  scroll-behavior: smooth;
  /* Anker nicht unter den festen Kopf schieben. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  /* Montserrat läuft breit; in Versalien braucht sie negative Laufweite,
     sonst zerfallen lange Überschriften in Einzelbuchstaben. */
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.8rem, 4.4vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 3.2vw, 2.1rem); }
h3 { font-size: clamp(1.05rem, 1.9vw, 1.22rem); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sprungmarke für die Tastaturbedienung. */
.skip-link {
  position: absolute; top: -100%; left: var(--gutter); z-index: 100;
  background: var(--red); color: var(--red-ink);
  padding: 10px 18px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------- Abschnittskopf -- */

.section { padding-block: var(--section-gap); }
.section--sunk { background: var(--paper-sunk); }

.section-head {
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.section-head--center { margin-inline: auto; text-align: center; }

/* Die Schreibschrift der Flyer — als Vorzeile, nie als Fließtext. */
.kicker {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1;
  color: var(--red);
  text-transform: none;
  margin-bottom: .15em;
}

.lead { font-size: 1.08rem; color: var(--ink-soft); }

/* Vorzeile auf dem dunklen Brett: rot, so gewollt. Ein helleres Rot als auf
   der Creme-Fläche — das Markenrot säuft auf dem Holz ab —, dazu ein weicher
   Schatten, damit die Schreibschrift nicht in der Maserung verschwindet. */
.wood .kicker, .page-head .kicker {
  color: var(--red-bright);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
}

/* ----------------------------------------------------------------- Knöpfe -- */

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-display);
  font-weight: 700; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .03em;
  text-decoration: none;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--red); color: var(--red-ink); }
.btn--primary:hover { background: var(--red-dark); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--paper-sunk); }

.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .5; pointer-events: none;
}

/* ------------------------------------------------------------------ Kopf -- */

.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.header__logo img { height: 42px; width: auto; display: block; }

.nav ul {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav a:hover, .nav a[aria-current='page'] {
  color: var(--red); border-bottom-color: var(--red);
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: ''; position: absolute; left: 11px; right: 11px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle::before { top: 15px; }
.nav-toggle span    { top: 21px; }
.nav-toggle::after  { top: 27px; }
.nav-toggle[aria-expanded='true']::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span    { opacity: 0; }
.nav-toggle[aria-expanded='true']::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transform: translateY(-110%);
    /* visibility statt nur Verschieben: translateY(-110%) reicht nicht, weil
       die Leiste bei var(--header-h) beginnt — ihr unterer Rand stünde sonst
       weiter im Bild und schnitte das Logo an. */
    visibility: hidden;
    transition: transform .25s ease, visibility 0s .25s;
    box-shadow: var(--shadow-card);
  }
  .nav[data-open='true'] {
    transform: translateY(0);
    visibility: visible;
    transition: transform .25s ease;
  }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; }
  .nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav a:hover, .nav a[aria-current='page'] { border-bottom-color: var(--line); }
}

/* ------------------------------------------------------------------ Hero -- */

.hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
/* Feste Höhen statt aspect-ratio plus max-height: Chrome zieht bei dieser
   Kombination die Breite mit, statt nur die Höhe zu kappen — auf einem
   breiten, flachen Fenster stand das Bild dann nur über drei Viertel der
   Seite und rechts blieb eine dunkle Fläche. Keine vh-Einheiten, damit die
   Höhe auf dem Telefon nicht springt, wenn die Adressleiste ein- und
   ausfährt. */
.hero__stage {
  position: relative;
  height: clamp(480px, 116vw, 700px);
}
@media (min-width: 760px) {
  .hero__stage { height: clamp(440px, 45vw, 660px); }
}

.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.hero__slide[data-active] { opacity: 1; pointer-events: auto; }

.hero__media, .hero__media video, .hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Verlauf, damit die Schrift auf jedem Bild steht. */
.hero__slide::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20, 14, 10, .82) 0%, rgba(20, 14, 10, .25) 45%, rgba(20, 14, 10, .35) 100%);
}

.hero__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding-bottom: clamp(32px, 6vw, 68px);
  color: #fff;
}
.hero__body .kicker { color: #fff; }
.hero__title { color: #fff; margin-bottom: .35em; }
.hero__meta {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .03em;
  font-weight: 600; font-size: .85rem; color: rgba(255, 255, 255, .85);
  margin-bottom: 1.1em;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------- Eventfolien -- */

/* Auf dem Brett statt auf einem Clubfoto: Flyer und Foto haben vorher um
   dieselbe Fläche gekämpft, der Flyer wirkte wie ein Aufkleber und ging
   unter. Jetzt ist der Flyer das Bild der Folie, das Holz nur der Grund. */
.hero__slide--event {
  background-color: var(--wood-dark);
  background-image:
    linear-gradient(rgba(28, 17, 9, .66), rgba(28, 17, 9, .66)),
    url('../img/holz.webp');
  background-size: cover;
  background-position: center;
}
.hero__slide--event::after { display: none; }

/* Wie auf den übrigen Holzflächen: die Vorzeile rot, nicht weiß. */
.hero__slide--event .kicker {
  color: var(--red-bright);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
}

/* Die Folie füllt die ganze Höhe: Text und Flyer stehen nebeneinander. */
.hero__slide--event .hero__body {
  inset: 0;
  display: grid;
  align-items: center;
  padding-block: clamp(28px, 4vw, 48px);
}
.hero__split {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
@media (min-width: 760px) {
  .hero__split { grid-template-columns: 1fr 1fr; }
  /* Der Titel darf hier größer stehen als auf der Stimmungsfolie — er ist
     auf dem ruhigen Brett das Einzige neben dem Flyer. */
  .hero__slide--event .hero__title { font-size: clamp(1.7rem, 2.7vw, 2.6rem); }
}

.hero__flyer {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  rotate: -1.2deg;
  justify-self: center;
}
@media (min-width: 760px) { .hero__flyer { justify-self: end; } }

/* Auf dem Telefon steht der Flyer über dem Text, nicht daneben. */
@media (max-width: 759px) {
  .hero__split { justify-items: center; text-align: center; }
  .hero__split .hero__actions { justify-content: center; }
  .hero__flyer { max-width: 86%; order: -1; }
  .hero__slide--event .hero__title { font-size: clamp(1.5rem, 6.5vw, 2.1rem); }
}

.hero__dots {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 8px;
}
.hero__dots button {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background-color .2s, width .2s;
}
.hero__dots button[aria-current='true'] { background: #fff; width: 26px; border-radius: 5px; }

.hero__arrow {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(0, 0, 0, .3); border: 0; border-radius: 50%;
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  transition: background-color .2s;
}
.hero__arrow:hover { background: rgba(0, 0, 0, .55); }
.hero__arrow--prev { left: 12px; }
.hero__arrow--next { right: 12px; }
@media (max-width: 759px) { .hero__arrow { display: none; } }

/* -------------------------------------------------------- Veranstaltungen -- */

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}

.event-card {
  display: flex; flex-direction: column;
  background: var(--paper-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.event-card__media { position: relative; background: var(--paper-sunk); }
/* Clubinio liefert Flyer als 1280 × 720 — also 16:9 und nicht quadratisch.
   Ein quadratischer Beschnitt schneidet genau den Titel weg. */
.event-card__media img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}

/* Das rote Datums-Badge — dieselbe Ecke wie auf dem Flyer.
   Mit hellem Rand und kräftigem Schatten: Mehrere Flyer tragen selbst rote
   Störer, teils unmittelbar daneben. Ohne die Trennung stehen dort zwei rote
   Flecken nebeneinander und das Badge wirkt wie ein Teil der Grafik. */
.date-badge {
  position: absolute; top: 0; right: 14px;
  min-width: 56px;
  background: var(--red); color: var(--red-ink);
  font-family: var(--font-display);
  text-align: center;
  padding: 8px 10px 10px;
  border: 3px solid var(--paper-card);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .35);
}
.date-badge__day   { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1; }
.date-badge__month { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.event-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.event-card__title { font-size: 1.22rem; margin-bottom: .25em; }
.event-card__when {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .8em;
}
.event-card__foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line);
}
.event-card__price { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.event-card__price span { font-size: .78rem; font-weight: 500; color: var(--ink-soft); }

.section-foot { margin-top: clamp(28px, 4vw, 44px); text-align: center; }

/* ----------------------------------------------------------- Zustände -- */

.state {
  padding: 32px 0; text-align: center;
  color: var(--ink-faint); font-size: .95rem;
}

/* ------------------------------------------------------------- Textblock -- */

.split {
  display: grid; gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split__media { order: -1; }
}
/* Für Spalten sehr verschiedener Länge: oben bündig statt mittig. */
.split--top { align-items: start; }

/* Einzelbild im Textblock. Die Collage bringt ihre eigenen Maße mit —
   sonst zöge diese Regel beide Bilder auf volle Breite. */
.split__media:not(.collage) img {
  width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3; object-fit: cover;
}

/* ---------------------------------------------------------- Impressionen -- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}
.photo-grid button {
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-sm); overflow: hidden;
  aspect-ratio: 3 / 2;
}
.photo-grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s, filter .3s;
}
.photo-grid button:hover img { transform: scale(1.04); filter: brightness(1.06); }

/* Lightbox. display nur im geöffneten Zustand — sonst überschreibt es das
   display:none, das der Browser einem geschlossenen <dialog> gibt. */
.lightbox { display: none; }
.lightbox[open] {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(20, 14, 10, .92);
  border: 0; padding: 0;
  max-width: 100%; max-height: 100%; width: 100%; height: 100%;
}
.lightbox::backdrop { background: rgba(20, 14, 10, .92); }
.lightbox img { max-width: 94vw; max-height: 88vh; width: auto; border-radius: var(--radius-sm); }
.lightbox__close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #fff; font-size: 22px; cursor: pointer;
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #fff; font-size: 22px; cursor: pointer;
}
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }

/* ------------------------------------------------------------ Praxisblock -- */

/* Holzband.
   Die Textur ist das Originalbrett aus den Flyer-Designs. Sie ist NICHT
   nahtlos — deshalb `cover` und nicht gekachelt, sonst stehen harte Kanten
   im Bild. Auf schmalen Geräten das Hochformat, sonst wäre der Ausschnitt
   ein schmaler Streifen quer durchs Brett.

   Dunkel gelasert statt cremefarben überblendet: Auf den Flyern steht weiße
   Schrift auf Holz, nicht dunkle auf Milchglas. Die Inhalte liegen als helle
   Karten darauf — wie die Kreidetafel und das Tischtuch auf dem Flyer. */
.wood {
  background-color: var(--wood-dark);
  background-image:
    linear-gradient(rgba(38, 23, 12, .50), rgba(38, 23, 12, .50)),
    url('../img/holz.webp');
  background-size: cover;
  background-position: center;
  color: var(--paper);
}
@media (max-width: 760px) {
  .wood {
    background-image:
      linear-gradient(rgba(38, 23, 12, .50), rgba(38, 23, 12, .50)),
      url('../img/holz-hoch.webp');
  }
}

/* Schrift auf dem Holz: hell. Rot käme dort nur auf 1,6:1 — es lebt auf den
   Karten und Knöpfen weiter, nicht auf dem Brett. */
.wood h1, .wood h2, .wood h3 { color: #fff; }
.wood .lead, .wood p { color: rgba(255, 252, 247, .88); }

/* Die Karten auf dem Brett sind hell — dort gilt wieder die dunkle Schrift,
   sonst steht weißer Text auf weißem Grund. */
.wood .fact, .wood .fact h3 { color: var(--ink); }
.wood .fact p { color: var(--ink); }
.wood .fact__note { color: var(--ink-soft); }
.wood .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
.wood .btn--ghost:hover { background: #fff; color: var(--ink); }

.fact-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.fact {
  background: var(--paper-card);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-card);
}
.fact__icon {
  width: 34px; height: 34px; margin-bottom: 12px;
  color: var(--red);
}
.fact h3 { font-size: 1.05rem; margin-bottom: .4em; }
.fact__lines { margin: 0 0 .5em; font-weight: 600; }
.fact__lines span { display: block; }
.fact__note { font-size: .88rem; color: var(--ink-soft); margin: 0; }

.map-teaser {
  margin-top: clamp(24px, 3vw, 36px);
  display: grid; gap: 18px; align-items: center;
}
@media (min-width: 760px) { .map-teaser { grid-template-columns: 1.4fr 1fr; } }
.map-teaser img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-card); }

/* --------------------------------------------------------------- Kontakt -- */

.form-grid { display: grid; gap: 16px; }
@media (min-width: 680px) { .form-grid--two { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field textarea, .field select {
  font: inherit; color: inherit;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--red); }
.field textarea { min-height: 150px; resize: vertical; }

/* Der Einwilligungstext ist Fließtext, kein Feldetikett — die Versalien aus
   `.field label` dürfen hier nicht greifen. */
.field > label.consent, .consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: var(--font-body);
  font-size: .92rem; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Knopfzeile: waagerecht, damit der Knopf nicht über die ganze Breite zieht. */
.field--actions {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px;
}
.consent input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--red); }

.form-note { font-size: .88rem; color: var(--ink-soft); }
.form-feedback { font-weight: 600; }
.form-feedback[data-state='ok']  { color: #1c7a3c; }
.form-feedback[data-state='err'] { color: var(--red-dark); }

/* Honigtopf: aus dem Sichtfeld schieben, nicht display:none — das erkennen
   Bots. Siehe clubinio-api.md, Regel 3. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

.footer {
  background: var(--ink);
  color: #d8cec4;
  padding-block: clamp(44px, 6vw, 72px) 28px;
}
.footer a { color: #fff; }
.footer__grid {
  display: grid; gap: clamp(28px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.footer h3 {
  color: #fff; font-size: .85rem; letter-spacing: .05em; margin-bottom: 1.2em;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .55em; }
/* Eigene helle Fassung statt eines Filters: invert(1) hätte aus dem roten
   MUND-Balken Türkis gemacht. */
.footer__logo img { height: 52px; width: auto; margin-bottom: 18px; }
.footer__blurb { font-size: .93rem; max-width: 42ch; }

.social { display: flex; gap: 12px; margin-top: 16px; }
.social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
  transition: background-color .2s, border-color .2s;
}
.social a:hover { background: var(--red); border-color: var(--red); }
.social svg { width: 19px; height: 19px; }

.footer__bottom {
  margin-top: clamp(32px, 4vw, 48px); padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  justify-content: space-between;
  font-size: .86rem; color: #a2978c;
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }

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

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

/* ============================================================================
   Unterseiten
   ========================================================================== */

/* Schmaler Textkörper für Formulare, FAQ und Rechtstexte. */
.container--narrow { max-width: 760px; }

/* --------------------------------------------------------- Seitenkopf -- */

/* Statt eines zweiten Heros: ein Holzband mit Titel. */
/* Feste Höhe, damit die Köpfe über alle Unterseiten gleich hoch stehen —
   sonst richtet sich jeder nach der Länge seines Einleitungssatzes. */
.page-head {
  display: grid;
  align-items: center;
  min-height: clamp(220px, 24vw, 310px);
  padding-block: clamp(32px, 4vw, 48px);
  background-color: var(--wood-dark);
  background-image:
    linear-gradient(rgba(38, 23, 12, .55), rgba(38, 23, 12, .55)),
    url('../img/holz.webp');
  background-size: cover;
  background-position: center;
  color: var(--paper);
}
@media (max-width: 760px) {
  .page-head { background-image:
    linear-gradient(rgba(38, 23, 12, .55), rgba(38, 23, 12, .55)),
    url('../img/holz-hoch.webp'); }
}
.page-head h1 { color: #fff; }
.page-head .lead { color: rgba(255, 252, 247, .88); }
.page-head .lead a { color: #fff; }
.page-head .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
.page-head .btn--ghost:hover { background: #fff; color: var(--ink); }
.page-head h1 { margin-bottom: .2em; }
.page-head .lead { max-width: 60ch; }
.page-head--center { text-align: center; }
.page-head--center .lead { margin-inline: auto; }
.page-head__actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 1.5em;
}

.crumb {
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 1.5em;
}
.crumb a { text-decoration: none; color: var(--ink-soft); }
.crumb a:hover { color: var(--red); }

/* Monatstrenner in der Terminliste. */
.month-head {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color: var(--ink-soft);
  margin: clamp(32px, 4vw, 52px) 0 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.month-head:first-child { margin-top: 0; }

/* ------------------------------------------------------- Eventdetail -- */

/* Eine schmale Spalte, alles untereinander: Flyer, Handlungsknöpfe,
   Datumszeile, Titel, Beschreibung, Informationen. Der Flyer ist das, was
   man zuerst sehen will, und die Beschreibungen aus Clubinio sind lang —
   eine zweite Spalte hinterließe nur ein Loch. */
.event-page {
  max-width: 44rem;
  margin-inline: auto;
}

.event-page__fig { margin: 0 0 18px; }
.event-page__fig img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: var(--paper-sunk);
}

/* Knöpfe gestapelt über die volle Spaltenbreite. */
.event-page__actions { display: grid; gap: 10px; margin-bottom: 28px; }
.event-page__actions .btn {
  justify-content: center;
  width: 100%;
  min-height: 56px;
  font-size: .95rem;
}
.event-page__actions .state { padding: 14px 0; text-align: left; }

.event-page__date {
  display: flex; align-items: center; gap: .5em; flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: .85rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: .45em;
}
.event-page__date .sep { color: var(--ink-faint); }
.event-page__date .time { color: var(--ink-soft); white-space: nowrap; }

.event-page__title {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin-bottom: .8em;
}

/* `description` ist reiner Text mit Zeilenumbrüchen. */
.event-page__body {
  white-space: pre-line;
  color: var(--ink-soft);
}

/* Zurück-Link ganz unten, nach dem Newsletter. */
.event-page__back {
  margin: 0;
  padding-block: clamp(28px, 4vw, 44px);
  text-align: center;
}
.event-page__back a {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}
.event-page__back a:hover { color: var(--red); }

/* Informationen: Beschriftung über dem Wert, zwei Spalten, auf dem Telefon
   untereinander. */
.event-info {
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(24px, 3vw, 32px);
  background: var(--paper-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.event-info h2 { font-size: 1.05rem; margin-bottom: 1.2em; }
.event-info__grid {
  display: grid; gap: 22px 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin: 0;
}
.event-info__grid > div { display: flex; flex-direction: column; gap: 4px; }
.event-info dt {
  font-family: var(--font-display);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint);
}
.event-info dd { margin: 0; white-space: pre-line; font-weight: 600; }

/* Ticketarten — nur, wenn es mehr als eine gibt. */
.ticket-list {
  list-style: none; margin: 24px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--line);
}
.ticket {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 11px 0;
}
.ticket + .ticket { border-top: 1px solid var(--line); }
.ticket__name { font-weight: 600; display: block; }
.ticket__note { display: block; font-size: .86rem; color: var(--ink-soft); }
.ticket__price {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  white-space: nowrap;
}

/* ------------------------------------------------- Newsletter-Band -- */

.newsletter-band__inner {
  max-width: 44rem; margin-inline: auto; text-align: center;
}
.newsletter-band__inner p { max-width: 46ch; margin-inline: auto; }

.newsletter-inline { margin-top: clamp(20px, 3vw, 28px); }
.newsletter-inline__row {
  display: grid; gap: 10px;
  max-width: 480px; margin-inline: auto;
}
.newsletter-inline input[type='email'] {
  font: inherit; color: var(--ink);
  background: var(--paper-card);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  width: 100%;
  min-width: 0;
}
/* Knopf über die volle Breite, wie die Handlungsknöpfe über dem Flyer. */
.newsletter-inline .btn {
  width: 100%;
  justify-content: center;
  min-height: 54px;
}
.newsletter-inline .consent {
  max-width: 480px; margin: 14px auto 0;
  color: rgba(255, 252, 247, .82);
  text-align: left;
}
.newsletter-inline .form-feedback { margin-top: 12px; }
.newsletter-inline .form-feedback[data-state='ok'] { color: #8fe3a8; }
.newsletter-inline .form-feedback[data-state='err'] { color: #ffb3ab; }

/* ------------------------------------------------------------- Alben -- */

.album-grid {
  display: grid; gap: clamp(18px, 2.5vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.album-card {
  display: block; text-decoration: none;
  background: var(--paper-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.album-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.album-card__media { background: var(--paper-sunk); aspect-ratio: 3 / 2; }
.album-card__media img { width: 100%; height: 100%; object-fit: cover; }
.album-card__body { padding: 16px 18px 18px; }
.album-card__body h3 { font-size: 1.1rem; margin-bottom: .2em; }
.album-card__meta {
  margin: 0; font-size: .88rem; color: var(--ink-soft);
}

/* -------------------------------------------------------------- Jobs -- */

.job-list { display: grid; gap: 18px; }
.job {
  background: var(--paper-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px 26px;
}
.job h3 { margin-bottom: .35em; }
/* `description` ist reiner Text mit Umbrüchen. */
.job__text { white-space: pre-line; color: var(--ink-soft); margin: 0; }

.field__legend {
  font-family: var(--font-display);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
}
.choices { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 4px; }
.choice {
  display: flex; align-items: center; gap: 9px;
  font-size: .95rem;
}
.choice input { width: 18px; height: 18px; accent-color: var(--red); }

/* --------------------------------------------------------------- FAQ -- */

.faq-list { display: grid; gap: 10px; }
.faq {
  background: var(--paper-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 54px 18px 22px;
  position: relative;
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: -.005em;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute; right: 22px; top: 50%; translate: 0 -50%;
  font-size: 1.5rem; line-height: 1; color: var(--red);
  transition: rotate .2s;
}
.faq[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--red); }
/* `answer` ist reiner Text mit Umbrüchen. */
.faq__answer {
  padding: 0 22px 20px;
  color: var(--ink-soft);
  white-space: pre-line;
}

/* -------------------------------------------------------- Rechtstexte -- */

.legal { max-width: 68ch; }
.legal h2 {
  font-size: 1.15rem;
  margin-top: 2em; margin-bottom: .6em;
}
.legal h2:first-child { margin-top: 0; }
/* Zweiter Block auf derselben Seite: Der zurueckgesetzte Abstand der ersten
   Ueberschrift wuerde ihn sonst an den vorigen kleben. */
.legal + .legal { margin-top: 2.4em; }
.legal p { margin-bottom: .6em; }
.legal__name { font-weight: 600; }
.legal__row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.legal__label {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 3px;
}
.legal__row:has(.legal__label:empty) { display: block; }
.legal--prose p { color: var(--ink-soft); }
.legal--prose a { color: var(--ink); }

@media (max-width: 560px) {
  .legal__row { grid-template-columns: 1fr; gap: 0; }
  .event-meta > div { grid-template-columns: 1fr; gap: 2px; }
}

/* -------------------------------------------------------- Vermietung -- */

.h3-like { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
.tag-list {
  list-style: none; margin: 0 0 1.5em; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tag-list li {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: .92rem;
}
.rent-b2b { margin-top: 1.5em; }

/* ============================================================================
   Bildblöcke
   ========================================================================== */

/* Collage: ein großes Bild, ein kleineres darüber gelegt — wie zwei Fotos,
   die jemand auf das Brett gepinnt hat. Die Drehung ist leicht und
   gegenläufig, damit es nach Hand aussieht und nicht nach Raster. */
.collage {
  position: relative;
  padding-bottom: clamp(44px, 7vw, 76px);
  padding-right: clamp(28px, 5vw, 56px);
}
.collage img {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  background: var(--paper-card);
}
.collage__a {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  rotate: -1.5deg;
}
.collage__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  rotate: 3deg;
  border: 7px solid var(--paper-card);
}
@media (max-width: 560px) {
  .collage__b { width: 62%; }
}

/* Claim-Band: volle Breite, Foto mit dunklem Verlauf, Schreibschrift darauf.
   Der eine Moment auf der Seite, der nichts erklärt. */
.band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 42vw, 480px);
  overflow: hidden;
  background: var(--ink);
}
.band__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 12, 6, .55) 0%,
    rgba(20, 12, 6, .35) 50%,
    rgba(20, 12, 6, .65) 100%);
}
.band__body {
  position: relative; z-index: 2;
  text-align: center;
  color: #fff;
  padding-block: clamp(40px, 6vw, 72px);
}
.band__claim {
  font-family: var(--font-script);
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.15;
  margin: 0 0 .25em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .45);
}
.band__sub {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .06em;
  font-size: clamp(.78rem, 1.4vw, .92rem);
  margin: 0;
  color: rgba(255, 255, 255, .88);
}

/* Impressionen: die erste Kachel doppelt so groß — ein gleichmäßiges Raster
   aus dreizehn Nachtaufnahmen liest sich wie ein Kontaktbogen.

   Dreizehn Bilder sind kein Zufall: Die große Kachel belegt vier Felder, die
   zwölf übrigen je eines — zusammen sechzehn, also genau vier Reihen à vier.
   Eine zweite große Kachel mittendrin reißt Löcher, weil die automatische
   Platzierung sie nicht mehr unterbringt. */
@media (min-width: 700px) {
  .photo-grid--feature {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
  }
  .photo-grid--feature > button:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
}

/* ---------------------------------------------------- Kontakt mit FAQ -- */

/* Fragen links, Formular rechts. Fällt die FAQ weg, weil nichts gepflegt
   ist, rückt das Formular über die ganze Breite (`kontakt--single`). */
.kontakt {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .kontakt { grid-template-columns: 1fr 1fr; }
  .kontakt--single { grid-template-columns: minmax(0, 720px); justify-content: center; }
}
.kontakt__head { margin-bottom: clamp(20px, 3vw, 32px); }
.kontakt__head h2 { margin-bottom: .25em; }

/* --------------------------------------------------------- Handlungsband -- */

/* Abschluss einer Seite: dunkles Brett, eine Aussage, ein Knopf. */
.cta {
  text-align: center;
}
.cta h2 { color: #fff; }
.cta p { max-width: 54ch; margin-inline: auto; }
.cta__actions {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: clamp(22px, 3vw, 34px);
}
.cta .btn--primary { padding-inline: 34px; }

/* --------------------------------------------------------- Vermietung -- */

/* Einleitung: ein Absatz über die Seitenbreite, nicht als schmale Spalte
   neben einer kurzen Liste — so stand vorher eine Textwand links und rechts
   gähnte die halbe Seite. */
.rent-intro .lead--big {
  max-width: 62ch;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.6;
  color: var(--ink);
}

/* Anlässe und Leistungen nebeneinander. */
.rent-tags {
  display: grid; gap: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(32px, 5vw, 56px);
}
@media (min-width: 760px) { .rent-tags { grid-template-columns: 1fr 1fr; } }
.rent-tags h2 { margin-bottom: .7em; }
.rent-tags .tag-list { margin-bottom: 0; }

/* Die beiden mittleren Absätze zweispaltig — gleich lang, kein Loch. */
.rent-cols {
  display: grid; gap: clamp(20px, 3vw, 40px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
@media (min-width: 760px) { .rent-cols { grid-template-columns: 1fr 1fr; } }
.rent-cols p { margin: 0; }

/* „powered by Clubinio" im Fuß — weißes Logo, passt auf den dunklen Grund.
   Gedämpft, bis man darüberfährt: es ist ein Hinweis, keine Werbefläche. */
.powered-by {
  display: inline-flex;
  opacity: .55;
  transition: opacity .2s;
}
.powered-by:hover { opacity: 1; }
.powered-by img { width: 119px; height: auto; }

/* Eckdaten der Vermietung: die Zahl trägt, die Beschriftung erklärt. */
.spec-grid {
  list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0;
  display: grid; gap: clamp(16px, 2.5vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.spec {
  padding: 22px 24px;
  background: var(--paper-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.spec__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--red);
  margin-bottom: .2em;
}
.spec__label { display: block; font-size: .92rem; color: var(--ink-soft); }

/* Stimme aus dem Buchungsportal. */
.rent-quote {
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.rent-quote p {
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 40ch;
  margin-inline: auto;
}

/* Lounges auf der Eventseite. Gebucht wird im Shop — hier steht, was es
   gibt: Ein Knopf allein sagt nicht, ob eine Lounge für zwölf Leute und
   150 € Mindestumsatz überhaupt infrage kommt. */
.lounge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lounge {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 12px;
}
.lounge + .lounge { border-top: 1px solid var(--line); padding-top: 12px; }
.lounge__img {
  width: 84px; height: 62px; flex: none;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--paper-sunk);
}
.lounge__body { min-width: 0; }
.lounge__name { display: block; font-weight: 600; }
.lounge__note { display: block; font-size: .88rem; color: var(--ink-soft); }
/* `bookingNote` ist reiner Text mit Umbrüchen. */
.lounge__hinweis {
  white-space: pre-line;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-soft);
}