/* ============================================================
   DESIGN 06 — KINETIC TYPOGRAPHY
   Kommod Events — get_ITconsulting Demo
   ============================================================ */

/* CSS Houdini @property — animierbare Custom Properties */
@property --font-wght {
  syntax: '<number>';
  inherits: true;
  initial-value: 300;
}
@property --font-wdth {
  syntax: '<number>';
  inherits: false;
  initial-value: 100;
}
@property --scroll-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --accent-mix {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* ============================================================
   BASE RESET & TOKENS
   ============================================================ */

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

:root {
  /* Palette — oklch */
  --ink:        oklch(8% 0.005 270);
  --paper:      oklch(97% 0.003 100);
  --orange:     oklch(62% 0.22 40);
  --orange-dim: oklch(52% 0.18 40);
  --grey-100:   oklch(93% 0.003 270);
  --grey-200:   oklch(85% 0.005 270);
  --grey-400:   oklch(60% 0.01 270);
  --grey-700:   oklch(35% 0.01 270);

  /* Typography scale */
  --fs-xs:    clamp(0.7rem, 1.5vw, 0.85rem);
  --fs-sm:    clamp(0.85rem, 1.8vw, 1rem);
  --fs-base:  clamp(1rem, 2vw, 1.125rem);
  --fs-md:    clamp(1.1rem, 2.5vw, 1.4rem);
  --fs-lg:    clamp(1.4rem, 3.5vw, 2rem);
  --fs-xl:    clamp(2rem, 5vw, 3.5rem);
  /* Untergrenze so gewaehlt, dass auch das laengste Wort einer Ueberschrift
     auf einem schmalen Telefon in eine Zeile passt und nicht mehr mitten im
     Wort umbrochen werden muss. (Erik 20.08.2026) */
  --fs-2xl:   clamp(2.6rem, 8vw, 6rem);
  --fs-3xl:   clamp(4rem, 12vw, 10rem);
  /* An Breite UND Hoehe gebunden: min() nimmt das jeweils knappere Mass.
     Bei flachen Fenstern zaehlt die Hoehe, sonst wie bisher die Breite. */
  --fs-hero:  clamp(2rem, min(14vw, 13svh), 13rem);

  /* Spacing */
  --gap-xs:  0.4rem;
  --gap-sm:  0.8rem;
  --gap-md:  1.5rem;
  --gap-lg:  3rem;
  --gap-xl:  6rem;
  --gap-2xl: 10rem;

  /* Borders & Shadows (Brutalist) */
  --border:      3px solid var(--ink);
  --border-fat:  6px solid var(--ink);
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-fat:  10px 10px 0 var(--ink);
  --shadow-orange: 6px 6px 0 var(--orange);

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-back:  cubic-bezier(0.36, 0, 0.66, -0.56);

  /* Layout */
  --max-w: 1440px;
  --header-h: 70px;
  /* Feste Hoehe des Laufbands. Nur wenn sie bekannt ist, laesst sich der
     Titelbereich so berechnen, dass das Band immer vollstaendig im ersten
     Bildschirm steht. (Erik 20.08.2026) */
  --band-h: 4.5rem;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  background-color: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  cursor: crosshair;
}

body.nav-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* ============================================================
   TYPOGRAPHY — BRICOLAGE GROTESQUE (Variable Font)
   ============================================================ */

.display,
h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  font-variation-settings: 'wght' var(--font-wght), 'opsz' 48;
  --font-wght: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  letter-spacing: 0.05em;
}

/* Scroll-driven Variable Font Animation */
@supports (animation-timeline: scroll()) {
  .scroll-kinetic {
    animation: morph-weight linear both;
    animation-timeline: scroll(root block);
    animation-range: 0vh 80vh;
  }
}
@keyframes morph-weight {
  from { --font-wght: 200; font-variation-settings: 'wght' 200, 'opsz' 48; }
  to   { --font-wght: 800; font-variation-settings: 'wght' 800, 'opsz' 96; }
}

/* ============================================================
   HEADER — STICKY QUERBALKEN
   ============================================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gap-md);
  gap: var(--gap-md);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-shrink: 0;
}

.site-logo {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 800, 'opsz' 32;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--paper);
  letter-spacing: -0.04em;
  line-height: 1;
  display: flex;
  align-items: center;
  text-decoration: none;
  /* Touch-Target Pflicht (Mobile-First, WCAG 2.1 AA) */
  min-height: 44px;
  min-width: 44px;
}
.site-logo img {
  display: block;
  /* Volle Hoehe der Leiste: Aussenhoehe minus der 3px-Linie an ihrer Unterkante.
     Den Abstand zum Motiv bringt die Datei selbst mit — sie hat unten 36 und
     oben 2 Bildpunkte weissen Rand. */
  height: calc(var(--header-h) - 3px);
  width: auto;
  max-width: 100%;
  /* Der weisse Grund der Datei ist ein sichtbares Feld — abgerundete Ecken
     nehmen ihm die Haerte gegen die dunkle Leiste. */
  border-radius: 6px;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 767px) {
  /* Schmaleres Band auf Telefonen: die Schrift darin ist dort kleiner. */
  :root { --band-h: 3.5rem; }
}
.site-logo span {
  font-variation-settings: 'wght' 200, 'opsz' 12;
  font-size: 0.6em;
  letter-spacing: 0.15em;
  color: var(--orange);
  text-transform: uppercase;
}

.header-phone {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-sm);
  color: var(--orange);
  text-decoration: none;
  letter-spacing: 0.05em;
  border: 1px solid var(--orange);
  padding: 0.5em 0.8em;
  transition: background 0.2s, color 0.2s;
  /* Touch-Target ≥ 44px (Mobile-First Pflicht) */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.header-phone:hover {
  background: var(--orange);
  color: var(--ink);
}

/* Navigation */
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.5vw, 1.5rem);
}

.main-nav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper);
  padding: 0.3em 0;
  text-decoration: none;
  position: relative;
  text-underline-offset: 4px;
  text-decoration-thickness: 0px;
  transition: text-decoration-thickness 0.3s var(--ease-out-expo),
              color 0.2s;
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out-expo);
}
.main-nav a:hover::after,
.main-nav a.active::after {
  transform: scaleX(1);
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--orange);
}

/* Burger */
.burger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  color: var(--paper);
}
.burger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--paper);
  transition: transform 0.3s, opacity 0.3s;
}
.burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; }
.burger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  background: var(--ink);
  z-index: 999;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--gap-xl) var(--gap-lg);
  gap: var(--gap-md);
}
.mobile-nav.open {
  display: flex;
}
.mobile-nav a {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 700, 'opsz' 48;
  font-size: clamp(2rem, 8vw, 4rem);
  color: var(--paper);
  line-height: 1;
  letter-spacing: -0.03em;
  transition: color 0.2s;
}
.mobile-nav a:hover { color: var(--orange); }

/* ============================================================
   MAIN CONTENT WRAPPER
   ============================================================ */

.site-main {
  margin-top: var(--header-h);
  min-height: calc(100svh - var(--header-h));
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gap-md);
}

/* Sehr schmale Telefone (320 Pixel): weniger Seitenrand, damit umrandete
   Textkaesten nicht breiter werden als der Bildschirm. (Erik 20.08.2026) */
@media (max-width: 360px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
  position: relative;
  /* Innenabstaende laufen mit der Fensterhoehe mit: bei flachen Fenstern
     wird zuerst hier gespart, bevor die Schrift kleiner wird. */
  padding: clamp(1.5rem, 6svh, 6rem) var(--gap-md) clamp(1rem, 4svh, 3rem);
  overflow: hidden;
  border-bottom: var(--border-fat);
  /* Der erste Bildschirm gehoert Kopfleiste, Titelbereich UND Laufband.
     Der Titelbereich bekommt genau den Rest, damit das Band nie von der
     unteren Fensterkante angeschnitten wird. svh statt vh, weil vh auf
     Telefonen die ein- und ausfahrende Adressleiste nicht beruecksichtigt
     und das Band dort systematisch abschneiden wuerde. (Erik 20.08.2026) */
  min-height: calc(100svh - var(--header-h) - var(--band-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-bg-text {
  position: absolute;
  top: 0; left: -0.05em;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 800, 'opsz' 96;
  font-size: clamp(12rem, 28vw, 28rem);
  line-height: 0.85;
  color: color-mix(in oklch, var(--orange) 8%, transparent);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
}

.hero-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin-bottom: clamp(0.4rem, 1.8svh, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
.hero-kicker::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--orange);
}

.hero-headline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 800, 'opsz' 72;
  font-size: var(--fs-hero);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-wrap: balance;
  /* Abstand laeuft mit der Fensterhoehe mit (Erik 20.08.2026) */
  margin-bottom: clamp(0.75rem, 3.5svh, 3rem);
}

/* ============================================================
   Firmenzeichen als Wasserzeichen — nur auf der Startseite
   ============================================================
   Das Element steht am Fenster fest, nicht am Text. Dadurch bleibt es beim
   Scrollen an derselben Stelle stehen, waehrend der Inhalt daran vorbeilaeuft.

   Groesse gerechnet: das Motiv fuellt nur 57 % der Hoehe seines quadratischen
   Zeichenbereichs. min(64svh, 78vw) haelt es auf hohen Fenstern von der Hoehe
   und auf schmalen von der Breite abhaengig, damit es nie ueber den Rand tritt.

   z-index -1 legt es hinter den Inhalt, aber ueber die Grundflaeche der Seite.
   Wo ein Abschnitt einen eigenen deckenden Grund hat — der dunkle Zitatblock,
   die Karten — verschwindet es dahinter, wie ein Zeichen auf dem Papier.

   Das Element steht nur in index.html; die Regel greift auf keiner anderen
   Seite, weil es dort kein passendes Element gibt. */
.marken-schleier {
  position: fixed;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(64svh, 78vw);
  aspect-ratio: 1;
  background: url("kommod-events-logo.svg") center / contain no-repeat;
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

.hero-headline .line-orange {
  color: var(--orange);
  display: block;
}

/* Letter spans for GSAP */
.char {
  display: inline-block;
  will-change: transform, opacity;
}

/* Wort-Klammer um die Buchstaben der Animation.
   Ein .char ist ein Inline-Block; zwischen zwei Inline-Bloecken darf der
   Browser umbrechen. Ohne diese Klammer bricht eine Ueberschrift mitten im
   Wort um (einzelnes "n" in der naechsten Zeile). Mit nowrap bleibt ein Wort
   immer zusammen; umgebrochen wird nur zwischen Woertern und an einem
   bewusst gesetzten weichen Trennzeichen. (Erik 20.08.2026) */
.word {
  display: inline-block;
  white-space: nowrap;
}

/* Rueckfallebene, falls die Animationsbibliothek nicht laedt und der Text
   unzerlegt bleibt: dann trennt der Browser lange Woerter sauber mit
   sichtbarem Trennstrich statt sie ueberlaufen zu lassen. */
.hero-headline,
.page-hero-title,
.section-title {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.hero-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-md);
  font-weight: 400;
  letter-spacing: 0.05em;
  border-left: 6px solid var(--orange);
  padding-left: var(--gap-md);
  margin-bottom: clamp(0.75rem, 3.5svh, 3rem);
  color: var(--grey-700);
  text-wrap: pretty;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-wrap: wrap;
}

/* Sehr flache Fenster (etwa ein halbhoch gezogenes Browserfenster oder ein
   kleines Telefon im Querformat): Schrift und Abstaende werden noch enger
   gestellt, damit Kopfleiste, Titelbereich und das vollstaendige Laufband
   weiterhin gemeinsam in den ersten Bildschirm passen. (Erik 20.08.2026) */
@media (max-height: 700px) {
  :root { --fs-hero: clamp(1.75rem, min(12vw, 11svh), 6rem); }
  .hero-sub { font-size: var(--fs-sm); }
  .hero { padding-top: clamp(1rem, 3svh, 3rem); }
}

/* ============================================================
   MARQUEE
   ============================================================ */

.marquee-wrap {
  overflow: hidden;
  background: var(--orange);
  color: var(--ink);
  border-top: var(--border);
  border-bottom: var(--border);
  /* Feste Hoehe statt Innenabstand: damit ist die Hoehe des Bands bekannt
     und der Titelbereich darueber kann sie einrechnen. */
  height: var(--band-h);
  display: flex;
  align-items: center;
}

.marquee-track {
  display: flex;
  gap: 0;
  animation: marquee-scroll 28s linear infinite;
  width: max-content;
}

.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-item {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 700, 'opsz' 32;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 calc(var(--gap-lg) / 2);
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}

.marquee-sep {
  /* Die Sperrung des Laufbands (0.05em) zaehlt auch hinter dem letzten
     Buchstaben eines Wortes. Dadurch wird die Luecke HINTER einem Wort
     groesser als die davor. Der negative linke Aussenabstand nimmt genau
     diese Sperrung wieder heraus, damit die Abstaende auf allen Geraeten
     gleich sind. (Erik 20.08.2026) */
  margin-left: -0.05em;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */

.section {
  padding: var(--gap-xl) var(--gap-md);
  border-bottom: var(--border);
}

.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--grey-400);
  margin-bottom: var(--gap-md);
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}
.section-label::before {
  content: attr(data-index);
  display: inline-block;
  width: 2em;
  text-align: right;
  color: var(--orange);
}

.section-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: var(--fs-2xl);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: var(--gap-lg);
  text-wrap: balance;
}

/* ============================================================
   EVENT CARDS (Brutalist)
   ============================================================ */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: var(--border-fat);
}

.event-card {
  /* Die senkrechte Trennlinie wird als ueberlagerte Linie gezeichnet, nicht
     als Rahmen. Ein Rahmen zaehlt zur Kastenbreite: die letzte Karte hatte
     keinen und war innen 3 Pixel breiter, wodurch ihr Bild wegen
     aspect-ratio 4/3 gut 2 Pixel hoeher wurde — die waagerechte Linie
     zwischen Bild und Text sass dort tiefer als bei den beiden Karten davor.
     (Erik 20.08.2026) */
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out-expo);
}
@media (min-width: 768px) {
  .event-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3px;
    background: var(--ink);
    z-index: 2;
    pointer-events: none;
  }
}

.event-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-fat);
  z-index: 2;
}

.card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: var(--border);
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo), filter 0.3s;
  filter: grayscale(30%);
}

.event-card:hover .card-img-wrap img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.card-todo {
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--orange);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.6em;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(2deg);
}

.card-body {
  padding: var(--gap-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.card-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--orange);
  letter-spacing: 0.1em;
  margin-bottom: var(--gap-xs);
}

.card-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 800, 'opsz' 48;
  font-size: var(--fs-xl);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-bottom: var(--gap-sm);
  transition: --font-wght 0.3s;
}

.event-card:hover .card-title {
  --font-wght: 300;
  font-variation-settings: 'wght' 300, 'opsz' 48;
}

.card-desc {
  font-size: var(--fs-sm);
  color: var(--grey-700);
  line-height: 1.6;
  flex: 1;
  text-wrap: pretty;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-top: var(--gap-md);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.card-link:hover {
  color: var(--orange);
  border-color: var(--orange);
}
.card-link::after {
  content: '→';
  transition: transform 0.3s var(--ease-out-expo);
}
.card-link:hover::after { transform: translateX(4px); }

/* ============================================================
   TAGLINE SECTION
   ============================================================ */

.tagline-block {
  padding: var(--gap-xl) var(--gap-md);
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--border-fat);
  text-align: center;
}

.tagline-big {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 800, 'opsz' 96;
  font-size: clamp(2.5rem, 7vw, 7rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--paper);
  margin-bottom: var(--gap-md);
}

.tagline-sub-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-md);
  color: var(--orange);
  letter-spacing: 0.05em;
  border: 2px solid var(--orange);
  padding: 0.6em 1.2em;
  box-shadow: var(--shadow-orange);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.tagline-sub-link:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--orange);
  background: var(--orange);
  color: var(--ink);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.8em 1.6em;
  cursor: pointer;
  border: var(--border);
  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s var(--ease-out-expo);
}

.btn-primary {
  background: var(--orange);
  color: var(--ink);
  box-shadow: var(--shadow-hard);
}
.btn-primary:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-fat);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  box-shadow: var(--shadow-hard);
}
.btn-outline:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-fat);
  background: var(--ink);
  color: var(--paper);
}

/* ============================================================
   TEXT SECTIONS (Über uns, Pop-Up-Event, etc.)
   ============================================================ */

.text-section {
  padding: var(--gap-xl) var(--gap-md);
  border-bottom: var(--border);
}

.text-section .inner {
  max-width: 860px;
}

.text-section p {
  font-size: var(--fs-base);
  line-height: 1.8;
  margin-bottom: var(--gap-md);
  text-wrap: pretty;
  color: var(--grey-700);
}

.text-section h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 800, 'opsz' 48;
  font-size: var(--fs-xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: var(--gap-lg);
  text-wrap: balance;
}

.text-section h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 700, 'opsz' 32;
  font-size: var(--fs-lg);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--gap-md);
  margin-top: var(--gap-lg);
  color: var(--orange);
}

/* Pull Quote (Brutalist) */
.pullquote {
  margin: var(--gap-xl) 0;
  padding: var(--gap-lg);
  border: var(--border-fat);
  border-left: 12px solid var(--orange);
  box-shadow: var(--shadow-fat);
  background: var(--ink);
  color: var(--paper);
  position: relative;
}

.pullquote blockquote {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 600, 'opsz' 48;
  font-size: clamp(1.2rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-style: italic;
  color: var(--paper);
}

.pullquote cite {
  display: block;
  margin-top: var(--gap-md);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}

/* SVG Text on Path (Siemens) */
.circular-text-wrap {
  width: min(300px, 60vw);
  float: right;
  margin: 0 0 var(--gap-md) var(--gap-lg);
  shape-outside: circle(50%);
}
.circular-text-wrap svg {
  width: 100%;
  height: auto;
  animation: spin-slow 20s linear infinite;
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

/* SVG Distortion Filter */
.distort-on-hover {
  transition: filter 0.4s;
}
.distort-on-hover:hover {
  filter: url(#distort);
}

/* ============================================================
   GALLERY SECTION
   ============================================================ */

.gallery-section {
  padding: var(--gap-xl) var(--gap-md);
  border-bottom: var(--border);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: var(--border-fat);
}

.gallery-item {
  position: relative;
  margin: 0;                 /* figure bringt eigenen Rand mit */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-right: var(--border);
  border-bottom: var(--border);
  cursor: zoom-in;
}
/* picture ist von Haus aus inline und wuerde das Feld nicht ausfuellen. */
.gallery-item picture {
  display: block;
  width: 100%;
  height: 100%;
}


.gallery-item:nth-child(3n) { border-right: none; }
.gallery-item:nth-last-child(-n+3) { border-bottom: none; }

.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out-expo), filter 0.3s;
  filter: grayscale(40%);
}
.gallery-item:hover img {
  transform: scale(1.06);
  filter: grayscale(0%);
}

.gallery-todo {
  position: absolute;
  top: 0.8rem; left: 0.8rem;
  background: var(--orange);
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.25em 0.5em;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-1.5deg);
}

.gallery-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  padding: 0.4em 0.8em;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out-expo);
}
.gallery-item:hover .gallery-caption { transform: translateY(0); }

/* Weicher Fuellrand statt Beschnitt (Erik 23.08.2026)
   Das Foto behaelt sein eigenes Seitenverhaeltnis und ist vollstaendig zu
   sehen (object-fit: contain). Der Rest des Quadrats wird nicht schwarz
   gelassen, sondern mit einer winzigen, stark verschwommenen Fassung
   DESSELBEN Fotos gefuellt — es sieht aus, als liefe das Bild weiter.
   Die Fuellfassung ist 64 Bildpunkte breit und rund ein Kilobyte gross;
   die Unschaerfe verschluckt jedes Detail, groesser braucht sie nicht zu
   sein. Das Hochskalieren um ein Viertel zieht die weichen Aussenkanten,
   die blur() erzeugt, aus dem sichtbaren Feld heraus. */
.gallery-item img.gallery-fuellung {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(28px) saturate(1.25) grayscale(40%);
  transform: scale(1.25);
}
.gallery-item picture.gallery-motiv {
  position: relative;   /* liegt ueber der Fuellung */
}
.gallery-item .gallery-motiv img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
}
/* Beim Ueberfahren wird das Motiv NICHT vergroessert — das wuerde genau den
   Beschnitt zurueckholen, den diese Ansicht vermeidet. Stattdessen kommt die
   Farbe zurueck, und die Fuellung faehrt sanft heran. */
.gallery-item:hover .gallery-motiv img { transform: none; }
.gallery-item:hover img.gallery-fuellung { transform: scale(1.32); }

/* ============================================================
   KONTAKT SECTION
   ============================================================ */

.contact-section {
  padding: var(--gap-xl) var(--gap-md);
  border-bottom: var(--border);
}

.contact-form {
  display: grid;
  min-width: 0;
  gap: 0;
  border: var(--border-fat);
  box-shadow: var(--shadow-fat);
  max-width: 720px;
}

.form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-bottom: var(--border);
  padding: var(--gap-md);
}
.form-field:last-of-type { border-bottom: none; }

.form-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 700, 'opsz' 48;
  font-size: var(--fs-xl);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--grey-400);
  margin-bottom: var(--gap-sm);
  transition: color 0.2s;
  pointer-events: none;
}

.form-field:focus-within .form-label {
  color: var(--orange);
}

.form-input,
.form-textarea,
.form-select {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-base);
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  padding: var(--gap-sm) 0;
  resize: vertical;
  border-bottom: 2px solid var(--grey-200);
  transition: border-color 0.2s;
  /* Eingabefelder bringen eine eigene Wunschbreite mit (rund 20 Zeichen).
     Ohne diese beiden Zeilen zwingen sie die Spalte auf diese Breite und
     die Seite laesst sich auf dem Telefon seitlich schieben.
     (Erik 20.08.2026) */
  width: 100%;
  min-width: 0;
  /* Touch-Target ≥ 44px (Mobile-First Pflicht) */
  min-height: 44px;
}
.form-select {
  /* Native Select-Indikator, harmonisch zum Brutalist-Look */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%,
                       calc(100% - 12px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-bottom-color: var(--orange);
}

.form-textarea { min-height: 150px; }

.form-hint {
  font-size: var(--fs-xs);
  color: var(--grey-400);
  margin-top: var(--gap-xs);
  font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   AGB / IMPRESSUM SECTIONS
   ============================================================ */

.legal-section {
  padding: var(--gap-xl) var(--gap-md);
}

/* Lange Ueberschriften in den Rechtstexten (etwa "Schlussbestimmungen")
   werden auf sehr schmalen Telefonen sauber getrennt statt ueberzulaufen. */
.legal-section h2,
.legal-section h3,
.agb-section h2 {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Lange Adressen (etwa die Streitschlichtungs-Plattform) brechen um, statt
   die Seite auf schmalen Geraeten breiter zu machen. (Erik 20.08.2026) */
.legal-section a,
.legal-body a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.legal-section h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 800, 'opsz' 72;
  font-size: var(--fs-2xl);
  letter-spacing: -0.04em;
  margin-bottom: var(--gap-xl);
  line-height: 0.9;
}

.legal-section h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 700, 'opsz' 32;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  margin-top: var(--gap-xl);
  margin-bottom: var(--gap-md);
  padding-bottom: var(--gap-sm);
  border-bottom: var(--border);
}

.legal-section p,
.legal-section li {
  font-size: var(--fs-base);
  line-height: 1.8;
  margin-bottom: var(--gap-sm);
  color: var(--grey-700);
  max-width: 760px;
  text-wrap: pretty;
}

.legal-section ul,
.legal-section ol {
  padding-left: 1.5rem;
  margin-bottom: var(--gap-md);
}

.legal-section .meta-badge {
  display: inline-flex;
  gap: var(--gap-md);
  flex-wrap: wrap;
  /* Abstand verkleinert: der frueher hier stehende Hinweiskasten ist
     entfernt worden, sonst klafft darunter eine Luecke. (Erik 20.08.2026) */
  margin-bottom: var(--gap-lg);
}
.legal-section .meta-badge span {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--grey-100);
  border: 1px solid var(--grey-200);
  padding: 0.3em 0.8em;
  color: var(--grey-700);
}

/* ============================================================
   PAGE HERO (Sub-Pages)
   ============================================================ */

.page-hero {
  padding: var(--gap-2xl) var(--gap-md) var(--gap-xl);
  border-bottom: var(--border-fat);
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  /* Gleiche Rechnung wie auf der Startseite, damit auch hier das Laufband
     vollstaendig im ersten Bildschirm steht. */
  min-height: min(50svh, calc(100svh - var(--header-h) - var(--band-h)));
  max-height: calc(100svh - var(--header-h) - var(--band-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.25;
  filter: grayscale(70%);
}

.page-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
}

.page-hero-kicker {
  font-family: 'JetBrains Mono', monospace;
  /* Erik 12.05.2026: groesser fuer iPadPro-Lesbarkeit */
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin-bottom: var(--gap-md);
  font-weight: 700;
}

.page-hero-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 800, 'opsz' 96;
  /* Untergrenze abgesenkt, damit lange Titelwoerter auf schmalen Geraeten
     ganz in eine Zeile passen (Erik 20.08.2026) */
  font-size: clamp(2.6rem, 10vw, 10rem);
  line-height: 0.95;
  /* Sanfteres Letter-Spacing damit Buchstaben nicht aneinander kleben (Erik 12.05.2026) */
  letter-spacing: -0.02em;
  color: var(--paper);
  text-wrap: balance;
}
/* Spezialfall: Pop-Up-Event H1 — P klebt am n, daher etwas mehr Luft */
.page-hero-title.gsap-split,
.page-hero-title {
  word-spacing: 0.06em;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

/* No-JS-Fallback: alles sichtbar. JS aktiviert dann die Animation. (Issue #16) */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.js-enabled .reveal:not(.visible) {
  opacity: 0;
  transform: translateY(40px);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  border-top: var(--border-fat);
  padding: var(--gap-lg) var(--gap-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap-lg);
  align-items: end;
}

.footer-links {
  display: flex;
  gap: var(--gap-md);
  flex-wrap: wrap;
}

.footer-links a {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--orange); }

.footer-copy {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--grey-700);
  text-align: right;
  line-height: 1.6;
}

/* ============================================================
   SVG DISTORTION FILTER (hidden)
   ============================================================ */

.svg-filters {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ============================================================
   KINETIC STRIPE (decorative vertical text)
   ============================================================ */

.kinetic-stripe {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-200);
  position: fixed;
  right: var(--gap-sm);
  bottom: var(--gap-lg);
  z-index: 10;
  pointer-events: none;
  display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (min-width: 1024px) {
  .kinetic-stripe { display: block; }
}

@media (max-width: 1023px) {
  .cards-grid {
    grid-template-columns: 1fr;
    border-right: var(--border-fat);
    border-left: var(--border-fat);
  }
  .event-card {
    border-bottom: var(--border);
  }
  .event-card:last-child { border-bottom: none; }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-item:nth-child(3n) { border-right: var(--border); }
  .gallery-item:nth-child(2n) { border-right: none; }
  .site-footer {
    grid-template-columns: 1fr;
  }
  .footer-copy { text-align: left; }
  .circular-text-wrap {
    float: none;
    margin: 0 auto var(--gap-lg);
  }
}

/* Die waagerechte Navigationsleiste wird erst gezeigt, wenn alle acht
   Menuepunkte nebeneinander in EINE Zeile passen. Gemessen: ab 1348px.
   Darunter uebernimmt das Menue hinter dem Burger-Knopf. Vorher brach die
   Leiste in drei Zeilen um und schnitt rechts ab, und einzelne Punkte wurden
   mitten im Wort getrennt. (Erik 20.08.2026) */
@media (max-width: 1359px) {
  .main-nav { display: none; }
  .burger-btn { display: flex; }
}

/* Menuepunkte der waagerechten Leiste brechen nie um. Das Menue hinter dem
   Burger-Knopf darf zwischen Woertern umbrechen, aber nie im Wort. */
.main-nav a {
  white-space: nowrap;
}
.mobile-nav a {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media (max-width: 767px) {
  .header-phone {
    font-size: 0.7rem;
    padding: 0.4em 0.6em;
    min-height: 44px;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item:nth-child(n) { border-right: none; }
  .gallery-item { border-bottom: var(--border); }
  .gallery-item:last-child { border-bottom: none; }
  /* Auf Telefonen bleibt die Rechnung gleich, nur mit schmalerem Band. */
  .hero { min-height: calc(100svh - var(--header-h) - var(--band-h)); }
  .contact-form { box-shadow: 4px 4px 0 var(--ink); }
}

/* ============================================================
   CARD HOVER — :has() selector
   ============================================================ */

.cards-grid:has(.event-card:hover) .event-card:not(:hover) {
  opacity: 0.6;
  filter: grayscale(40%);
}

/* ============================================================
   UTILITY
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.text-orange { color: var(--orange); }
.text-muted  { color: var(--grey-400); }
.mt-lg { margin-top: var(--gap-lg); }
.mb-lg { margin-bottom: var(--gap-lg); }

.divider {
  border: none;
  border-top: var(--border);
  margin: 0;
}

/* ============================================================
   LOADING OVERLAY (optional page-in effect)
   ============================================================ */

.page-loader {
  position: fixed;
  inset: 0;
  background: var(--orange);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.page-loader.done {
  transform: translateY(-100%);
  transition: transform 0.7s var(--ease-out-expo);
}
.page-loader-text {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-variation-settings: 'wght' 800, 'opsz' 72;
  font-size: clamp(3rem, 10vw, 8rem);
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 0.9;
}

/* ============================================================
   Mock-Annotationen — fuer Kunden-Demo ausgeblendet
   (HTML bleibt fuer interne Doku, visuell unsichtbar)
   Issue #14 — Erik-Pruefung 13.05.2026
   ============================================================ */
.card-todo,
.gallery-todo,
.todo-inline,
[class*="todo-"] {
  display: none !important;
}

/* ============================================================
   Sticky-Header darf section-titles nicht ueberlappen
   Issue #17 — Erik-Pruefung 13.05.2026
   ============================================================ */
section,
.section,
h1, h2, h3 {
  scroll-margin-top: clamp(80px, 10vh, 120px);
}

/* ============================================================
   GALERIE-LUPE (Lightbox)
   Der Mauszeiger ueber einem Galeriebild zeigt seit jeher eine Lupe an
   (cursor: zoom-in), ohne dass ein Klick etwas bewirkt hat. Diese Ansicht
   loest das Versprechen ein: Klick oeffnet das Bild gross, Escape oder ein
   Klick daneben schliesst es wieder.
   ============================================================ */
.lupe {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gap-md);
  background: rgba(13, 13, 13, 0.94);
  cursor: zoom-out;
}
.lupe.offen { display: flex; }
body.lupe-offen { overflow: hidden; }

.lupe-rahmen {
  position: relative;
  max-width: min(92vw, 1000px);
  max-height: 88vh;
  border: var(--border-fat);
  box-shadow: var(--shadow-fat);
  background: var(--ink);
  cursor: default;
}
.lupe-rahmen img {
  display: block;
  max-width: 100%;
  max-height: calc(88vh - 2.5rem);
  width: auto; height: auto;
}
.lupe-text {
  background: var(--ink);
  color: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  padding: 0.6em 0.9em;
  border-top: var(--border);
}
.lupe-zu {
  position: absolute;
  top: -1px; right: -1px;
  min-width: 44px; min-height: 44px;   /* Fingergroesse, WCAG 2.1 AA */
  background: var(--orange);
  color: var(--ink);
  border: var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.lupe-zu:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }

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

/* ============================================================
   WEITERE POP-UP-WELTEN
   Zwei feste Spalten statt auto-fit. Grund: seit der Jahrmarkt dort nicht
   mehr als Beispiel steht, bleibt auf zwei Seiten nur EINE Karte uebrig —
   auto-fit hat sie ueber die volle Breite gezogen, was sie groesser machte
   als die Karten auf der Startseite. (Erik 23.08.2026)
   ============================================================ */
.weitere-welten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md);
  margin-top: var(--gap-lg);
}
@media (max-width: 767px) {
  .weitere-welten { grid-template-columns: 1fr; }
}

/* ============================================================
   FILM AUF DEN EVENTSEITEN (Erik 23.08.2026)
   Mobile-First: ausgeliefert wird zunaechst die 720er Fassung. Die grosse
   Fassung wird erst auf breiten Schirmen nachgereicht (siehe main.js), und
   auch dann laedt vor dem Antippen nichts — preload="none" im Markup.
   ============================================================ */
.event-video {
  margin: 0;
  max-width: 860px;
  border: var(--border-fat);
  box-shadow: var(--shadow-fat);
  background: var(--ink);
}
.event-video-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.event-video-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--paper);
  background: var(--ink);
  padding: 0.7em 0.9em;
  border-top: var(--border);
}
@media (max-width: 767px) {
  /* Auf Telefonen laeuft der Film ueber die volle Breite; der fette Rahmen
     wuerde sonst wertvolle Bildbreite kosten. */
  .event-video { border-width: 3px; box-shadow: var(--shadow-hard); }
}

/* ---------------------------------------------------------------------------
   Kontaktformular: Honigtopf und Rueckmeldung
   ---------------------------------------------------------------------------
   Der Honigtopf wird NICHT ueber display:none versteckt — manche Automaten
   erkennen das und lassen das Feld dann leer. Er wird aus dem sichtbaren Feld
   herausgeschoben und zusaetzlich vom Vorleseprogramm ausgenommen
   (aria-hidden im Markup) sowie aus der Tabreihenfolge genommen
   (tabindex="-1" im Markup).
--------------------------------------------------------------------------- */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-rueckmeldung {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-top: var(--gap-sm);
  padding: var(--gap-sm) var(--gap-md);
  border-left: 3px solid var(--grey-700);
  color: var(--grey-400);
}
.form-rueckmeldung[data-art="gut"]     { border-left-color: #3fb950; color: #7ee787; }
.form-rueckmeldung[data-art="fehler"]  { border-left-color: #f85149; color: #ff9492; }
.form-rueckmeldung[data-art="neutral"] { border-left-color: var(--orange); color: var(--grey-400); }

/* Das Bot-Schutz-Feld ist fest 300 x 65 Bildpunkte gross — die Groesse kommt
   von Cloudflare und laesst sich nicht ueber CSS im Inneren aendern. Auf dem
   Telefon steht aber nur rund 255 Bildpunkte Platz zur Verfuegung.
   Abschneiden waere falsch: der Datenschutzhinweis am rechten Rand des Feldes
   verschwaende dabei. Deshalb wird das ganze Feld verkleinert; die Hoehe wird
   mitgezogen, damit darunter keine Luecke entsteht (65 x 0,8 = 52). */
.contact-form .cf-turnstile { max-width: 100%; }
@media (max-width: 767px) {
  .contact-form .cf-turnstile {
    transform: scale(0.8);
    transform-origin: left top;
    height: 52px;
  }
}