/* FFL-Entwürfe · Bereich Workshops & Events (Stufe „laut") · Teil 3 · Stand 15.10.2026
   Ergänzt basis.css, ändert dort nichts. Seiten: workshops, kimchi-kurs-berlin, team-events, events, catering.
   Bereichsregel: Pink ist die Farbe des Bereichs (Kopfzeile, Bereichszeile, Abschluss), jede Seite hat dazu
   höchstens zwei weitere laute Töne. Text steht immer auf freier Fläche, Fotos nie unter Grafiken. */

/* ---------- Kopfzeile im lauten Bereich: pinkes Glas auf allen fünf Seiten ---------- */
.kopf--laut { --kopf-grund: rgba(255, 105, 160, .97); }
.kopf__liste a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.kopf--laut .kopf__liste a[aria-current] { text-decoration-color: var(--color-navy); }
.kopf--laut :focus-visible { outline-color: var(--color-navy); }

/* Bereichszeile auf Pink: aktive Unterseite dunkelblau unterstrichen */
.bereich.ton-pink { border-bottom-color: rgba(36, 43, 82, .2); }
.bereich.ton-pink a[aria-current="page"] { border-bottom-color: var(--color-navy); }
@media (hover: hover) and (pointer: fine) { .bereich.ton-pink a:hover { border-bottom-color: rgba(36, 43, 82, .35); } }

/* Links auf lauten Flächen: Unterstreichung in Schriftfarbe statt Pink */
:is(.ton-pink, .ton-lime, .ton-gelb, .ton-orange, .ton-apricot, .ton-lila, .ton-aubergine, .ton-rot, .ton-blau, .ton-dunkel) .textlink { text-decoration-color: currentColor; }
.ton-dunkel .textlink, .ton-lila .textlink, .ton-aubergine .textlink { text-decoration-color: var(--color-pink); }

/* ---------- Einstieg einer Bereichsseite: liegt direkt unter Kopf- und Bereichszeile ---------- */
.einstieg { padding-top: var(--s32); }
.einstieg .pfad { margin-bottom: var(--s24); }
.einstieg h1 { font-size: clamp(2.375rem, 5.4vw, 5rem); max-width: 13em; }
.einstieg .einleitung { margin-top: var(--s24); }
@media (max-width: 47.99rem) {
  .einstieg { padding-top: var(--s16); }
  .einstieg .pfad { margin-bottom: var(--s16); }
}

/* Etikett „Nur auf Anfrage", „Ausverkauft": kleine Pille, Text immer ausgeschrieben */
.etikett { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--s12); border-radius: var(--radius-button); border: 2px solid currentColor; font-size: .9375rem; font-weight: 600; color: var(--titel); }
.etikett--voll { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

/* Punktlinie: Trenner aus Punkten statt Haarlinie (die Punkte sind Daniels Kultur) */
.punktlinie { height: 6px; border: 0; margin: 0; color: var(--titel); opacity: .55; background: radial-gradient(circle, currentColor 1.25px, transparent 1.75px) 0 50% / 9px 6px repeat-x; }

/* ---------- Termine aus Eventbrite als Liste ---------- */
.terminliste { list-style: none; margin: var(--s32) 0 0; padding: 0; display: grid; }
.terminzeile { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 20rem); gap: var(--s16) var(--s32); align-items: start; padding: var(--s32) 0; }
.terminzeile + .terminzeile { border-top: 1px solid var(--color-mist); }
.terminzeile__inhalt { display: grid; gap: var(--s12); }
.terminzeile__inhalt .termin__daten { margin-top: 0; }
.terminzeile__satz { max-width: 36rem; }
.terminzeile__unten { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s16) var(--s24); margin-top: var(--s8); }
.terminzeile__foto img { aspect-ratio: 4 / 3; }
.terminzeile .termin__status { display: none; }
.termin-leer { display: none; gap: var(--s16); max-width: 34rem; padding: var(--s32) 0; }
[data-termin="leer"] .termin-leer { display: grid; }
[data-termin="leer"] .terminliste { display: none; }
[data-termin="leer"] .termine-alt .terminliste { display: grid; }
@media (max-width: 63.99rem) { .terminzeile { grid-template-columns: auto minmax(0, 1fr); } .terminzeile__foto { display: none; } }
@media (max-width: 47.99rem) {
  .terminzeile { grid-template-columns: 1fr; padding: var(--s24) 0; }
  .terminzeile .termin__datum { justify-self: start; grid-template-columns: auto auto; align-items: baseline; gap: 0 var(--s12); min-width: 0; padding: var(--s12) var(--s16); }
  .terminzeile .termin__tag { font-size: 2.5rem; grid-row: span 2; }
  .terminzeile .termin__monat { margin-top: 0; }
  .terminzeile__unten .knopf { width: 100%; }
}

/* ---------- Formate als Karte (Team-Events): Name, Punkte bis zum Preis, wie auf einer Speisekarte ---------- */
.karte { background: #fff; color: var(--color-ink); border-radius: var(--radius-image); padding: var(--s32) var(--s32) var(--s24); --titel: var(--color-navy); --nebentext: var(--color-leise); }
.karte__titel { font-size: var(--font-size-title-2); line-height: 1.2; }
.karte__liste { list-style: none; margin: var(--s16) 0 0; padding: 0; }
.karte__zeile { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto; column-gap: var(--s12); align-items: baseline; padding: var(--s16) 0; }
.karte__zeile + .karte__zeile { border-top: 1px solid var(--color-mist); }
.karte__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.15; color: var(--color-navy); }
.karte__zeile::before { content: ""; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .35em; height: 4px; color: var(--color-navy); opacity: .5; background: radial-gradient(circle, currentColor 1.1px, transparent 1.5px) 0 50% / 7px 4px repeat-x; }
.karte__name { grid-column: 1; grid-row: 1; }
.karte__preis { grid-column: 3; grid-row: 1; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; color: var(--color-navy); white-space: nowrap; text-align: right; }
.karte__preis small { display: block; font-family: var(--font-body); font-size: .875rem; color: var(--color-leise); margin-top: var(--s4); }
.karte__dauer { grid-column: 1 / -1; font-size: var(--font-size-small); font-weight: 600; color: var(--color-leise); margin-top: var(--s4); }
.karte__text { grid-column: 1 / -1; font-size: var(--font-size-small); margin-top: var(--s8); max-width: 34rem; }
.karte__fuss { margin-top: var(--s16); padding-top: var(--s16); border-top: 1px solid var(--color-mist); font-size: var(--font-size-small); color: var(--color-leise); }
@media (max-width: 47.99rem) {
  .karte { padding: var(--s16) var(--s16) var(--s12); margin: 0 calc(var(--s8) * -1); }
  .karte__zeile { padding: var(--s12) 0; }
  .karte__name { font-size: 1.1875rem; }
  .karte__preis { font-size: 1.375rem; }
  .karte__text { font-size: .9375rem; line-height: 1.45; }
  /* Handy: keine Punktlinie, Name und Preis in zwei klaren Spalten */
  .karte__zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .karte__zeile::before { display: none; }
  .karte__preis { grid-column: 2; }
}

/* ---------- Ablauf über den Tag (Foraging): Uhrzeiten an einer Punktlinie ---------- */
.zeitstrahl { list-style: none; margin: var(--s24) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--schritte, 3), minmax(0, 1fr)); gap: var(--s24); position: relative; }
.zeitstrahl::before { content: ""; position: absolute; left: 0; right: 0; top: .95rem; height: 6px; color: var(--titel); opacity: .45; background: radial-gradient(circle, currentColor 1.25px, transparent 1.75px) 0 50% / 9px 6px repeat-x; }
.zeitstrahl li { position: relative; padding-top: var(--s32); }
.zeitstrahl li::before { content: ""; position: absolute; top: .55rem; left: 0; width: .875rem; height: .875rem; border-radius: 50%; background: var(--color-pink); box-shadow: 0 0 0 4px var(--grund); }
.zeitstrahl strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--font-size-title-2); line-height: 1.1; color: var(--titel); }
@media (max-width: 47.99rem) {
  .zeitstrahl { grid-template-columns: 1fr; gap: var(--s16); padding-left: var(--s32); }
  .zeitstrahl::before { left: .35rem; right: auto; top: .5rem; bottom: .5rem; width: 6px; height: auto; background: radial-gradient(circle, currentColor 1.25px, transparent 1.75px) 50% 0 / 6px 9px repeat-y; }
  .zeitstrahl li { padding-top: 0; }
  .zeitstrahl li::before { left: calc(var(--s32) * -1); top: .3rem; }
}

/* ---------- Fotoband „Einblicke": läuft nur auf Klick (Knöpfe) oder Wischen weiter, nie von selbst ---------- */
.fotoband__kopf { display: flex; justify-content: space-between; align-items: end; gap: var(--s24); }
.fotoband__knoepfe { display: flex; gap: var(--s12); }
.rundknopf { width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--color-navy); background: transparent; color: var(--color-navy); cursor: pointer; display: inline-grid; place-items: center; transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.rundknopf::before { content: ""; width: .625rem; height: .625rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-2px) rotate(45deg); }
.rundknopf[data-richtung="-1"]::before { transform: translateX(2px) rotate(-135deg); }
.rundknopf:active { transform: scale(.94); }
.rundknopf:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .rundknopf:not(:disabled):hover { background: var(--color-navy); color: #fff; } }
.fotoband { list-style: none; margin: var(--s32) 0 0; padding: 0 var(--rand) var(--s8); display: flex; gap: var(--s16); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--rand); scrollbar-width: none; }
.fotoband::-webkit-scrollbar { display: none; }
.fotoband:focus-visible { outline-offset: -3px; }
.fotoband li { flex: none; scroll-snap-align: start; }
.fotoband img { height: clamp(18rem, 34vw, 30rem); width: auto; aspect-ratio: 2 / 3; }
.fotoband li:nth-child(3n + 2) img { aspect-ratio: 4 / 5; }
@media (min-width: 75rem) { .fotoband { padding-left: calc((100vw - var(--size-container)) / 2); scroll-padding-left: calc((100vw - var(--size-container)) / 2); } }
@media (max-width: 47.99rem) { .fotoband img { height: 22rem; } }

/* ---------- Nachbarseiten am Ende jeder Unterseite ---------- */
.nachbarn__titel { font-family: var(--font-body); font-weight: 600; font-size: var(--font-size-small); line-height: 1.4; color: var(--nebentext); }
.nachbarn ul { list-style: none; margin: var(--s16) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--anzahl, 3), minmax(0, 1fr)); gap: 0 var(--s32); }
.nachbarn a { display: grid; gap: var(--s4); padding: var(--s16) 0; text-decoration: none; color: inherit; border-top: 1px solid var(--color-mist); height: 100%; align-content: start; }
.nachbarn__name { font-family: var(--font-display); font-size: var(--font-size-title-2); line-height: 1.2; color: var(--titel); display: flex; justify-content: space-between; gap: var(--s16); align-items: baseline; }
.nachbarn__name::after { content: ""; flex: none; width: .625rem; height: .625rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform 150ms var(--ease-out); }
.nachbarn__text { font-size: var(--font-size-small); max-width: 26rem; }
@media (hover: hover) and (pointer: fine) {
  .nachbarn a:hover .nachbarn__name { text-decoration: underline; text-decoration-color: var(--color-pink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .nachbarn a:hover .nachbarn__name::after { transform: translateX(4px) rotate(45deg); }
}
@media (max-width: 47.99rem) { .nachbarn ul { grid-template-columns: 1fr; } }

/* ---------- Große Angaben (Details): Belanosima statt Aufzählungszeichen ---------- */
.angaben { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24) var(--s48); }
.angaben li { font-family: var(--font-display); font-size: var(--font-size-title-2); line-height: 1.25; color: var(--titel); }
@media (max-width: 47.99rem) { .angaben { grid-template-columns: 1fr; gap: var(--s16); } .angaben li { font-size: 1.25rem; } }

/* Zweispaltiger Abschnittskopf links, Inhalt rechts (Details, Fragen) */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s32) var(--s64); }
@media (max-width: 63.99rem) { .zweispaltig { grid-template-columns: minmax(0, 1fr); } }

/* Lebende Wolke am Rand: canvas.wolke mit den Lagen der Kleckse (pulsiert leise, Standbild bei „Bewegung reduzieren") */
.wolke.klecks { width: var(--klecks-breite, 64rem); height: auto; }
/* Der dichte Kern der Wolke liegt in der Mitte der Fläche: weniger weit hinausschieben als Daniels Bild-Kleckse */
.wolke.klecks--rechts { right: calc(var(--klecks-breite, 64rem) * -.32); }
.wolke.klecks--links-unten { left: calc(var(--klecks-breite, 64rem) * -.32); bottom: calc(var(--klecks-breite, 64rem) * -.3); }
.wolke.klecks--rechts-unten { right: calc(var(--klecks-breite, 64rem) * -.32); bottom: calc(var(--klecks-breite, 64rem) * -.3); }
@media (max-width: 47.99rem) {
  .wolke.klecks, .wolke.klecks--rechts, .wolke.klecks--rechts-unten { --klecks-breite: 150vw; right: -46vw; left: auto; top: auto; bottom: -62vw; transform: none; }
  .wolke.klecks--links-unten { --klecks-breite: 150vw; left: -46vw; right: auto; top: auto; bottom: -62vw; }
}

/* ---------- Kurze Einblendung für Fotos und Formen (nie für Text), nur mit Skript und ohne „Bewegung reduzieren" ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-events .einblenden { opacity: 0; transform: translateY(1.5rem) scale(.98); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
  .js-events .einblenden.da { opacity: 1; transform: none; }
}

/* Entwurfs-Schalter: am Handy am Ende des Inhalts statt schwebend (verdeckt sonst den ersten Bildschirm) */
@media (max-width: 47.99rem) { .entwurf { position: static; margin: var(--s24) var(--rand); max-width: none; } }

/* Fester Knopf unten: Text in zwei Zeilen, auch für Anfrageseiten */
.leiste__text { color: #fff; }

/* ---------- 15.10. abends: Kopf mit vier Wörtern (Konzept Abschnitt 2), Fußzeile mit fünf Spalten ----------
   Gilt auch für die Wissensseiten (sie laden events.css für Nachbarn, Kopf und Fußzeile mit). */
.kopf:not(.kopf--laut) .kopf__liste a[aria-current="true"] { text-decoration-color: var(--color-pink); }
@media (min-width: 64rem) { .fuss__spalten--fuenf { grid-template-columns: minmax(0, 1.25fr) repeat(5, minmax(0, 1fr)); gap: var(--s48) var(--s24); } }

/* Kursdetails auf einen Blick: alles, was man vor Eventbrite wissen muss, als Steckbrief (dl) */
.blick { list-style: none; margin: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: var(--s32) var(--s32); }
.blick > div { display: grid; align-content: start; gap: var(--s8); padding-top: var(--s16); border-top: 2px solid var(--color-navy); }
.blick dt { font-size: var(--font-size-small); font-weight: 600; color: var(--nebentext); }
.blick dd { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.22; color: var(--titel); }
.blick dd small { display: block; margin-top: var(--s8); font-family: var(--font-body); font-size: var(--font-size-small); line-height: 1.5; color: var(--text); }
.blick__leitung { grid-row: span 2; }
.blick__leitung img { width: 100%; max-width: 15rem; aspect-ratio: 4 / 5; margin-bottom: var(--s8); }
.blick__storno { grid-column: 2 / -1; }
.blick__storno dd { font-family: var(--font-body); font-size: var(--font-size-body); line-height: 1.55; color: var(--text); max-width: 46rem; }
@media (max-width: 63.99rem) {
  .blick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blick__leitung { grid-row: auto; grid-column: 1 / -1; display: grid; grid-template-columns: 8rem minmax(0, 1fr); column-gap: var(--s24); align-items: start; }
  .blick__leitung dt { grid-column: 2; }
  .blick__leitung dd { grid-column: 2; }
  .blick__leitung img { grid-column: 1; grid-row: 1 / span 2; max-width: none; margin: 0; }
  .blick__storno { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
  .blick { grid-template-columns: minmax(0, 1fr); gap: var(--s24); }
  .blick__leitung { grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--s16); }
}

/* Leerer Termin: Satz in Belanosima wie eine kleine Überschrift */
.termin-leer .titel-2 { font-family: var(--font-display); color: var(--titel); }

/* Fußzeile: Ziele ohne Adresse (Instagram, Substack …) als Text statt Link auf „#“ */
.fuss__ohne-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-mist); }

/* ---------- Terminzustände (Workshops, Wissen Kimchi): data-termin am html-Wurzelelement: offen|ausverkauft|naechster|vorbei ----------
   Im Bau kommt der Zustand aus Eventbrite; im Entwurf per ?termin=… */
[data-termin] .zustand { display: none; }
[data-termin="offen"] .zustand--offen, [data-termin="ausverkauft"] .zustand--ausverkauft,
[data-termin="naechster"] .zustand--naechster, [data-termin="vorbei"] .zustand--vorbei { display: grid; gap: var(--s12); justify-items: start; }
.zustand .knopfreihe { margin-top: var(--s4); }