/* KunstWerkstatt Sonja Kamber — Entwurf Lileos, Juli 2026
   Farbwelt aus ihren eigenen Arbeiten abgeleitet:
   Terracotta/Ocker (Verzückung, Krüge) + Petrol/Salbei (Zwiegespräch) auf Papierweiß */

:root {
  --papier:      #FBF8F4;
  --papier-warm: #F4EEE5;
  --tinte:       #2A2622;
  --tinte-weich: #6B625A;
  --terracotta:  #A94E2C;
  --terracotta-h:#8E3F22;
  --petrol:      #4F7F79;
  --linie:       #E5DCD0;
  --schatten:    0 1px 3px rgba(42,38,34,.06), 0 8px 24px rgba(42,38,34,.05);
  --breite:      1180px;
  --serif:       "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Stempel-Wasserzeichen viewport-fixiert mit langsamer Drift (--stempel-y
     kommt aus entwurf.js: 30 % der Scrollgeschwindigkeit). Ergebnis: die
     Tiefenwirkung des stehenden Hintergrunds bleibt, und die Stempel ziehen
     trotzdem sichtbar unter dem Milchglas-Menü durch. */
  background: var(--papier) url("img/stempel-muster-hell-v3.png") repeat fixed top left / 458px auto;
  background-position: 0 var(--stempel-y, 0px);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--terracotta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terracotta-h); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.4rem; }
/* Auf Unterseiten trägt die Abschnittsüberschrift das h1 — optisch wie ein h2 */
.abschnitt-kopf h1, .zweispalt h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.schmal { max-width: 720px; }

/* ---------- Kopfzeile: Kontaktdaten immer sichtbar ---------- */
.topbar {
  background: var(--tinte);
  color: #E9E2D8;
  font-size: .875rem;
  letter-spacing: .01em;
}
.topbar .wrap {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  align-items: center; justify-content: center;
  padding-top: 9px; padding-bottom: 9px;
}
.topbar a { color: #E9E2D8; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar svg { width: 15px; height: 15px; flex: none; opacity: .75; }
/* Das Anfrage-Symbol ist nur auf dem Handy sinnvoll — am Rechner steht das
   Formular ohnehin zwei Klicks entfernt und die Leiste bliebe sonst überladen. */
.topbar a.nur-handy { display: none; }

/* Kopfzeile als Milchglas (Feedback 03.08.): deutlich durchscheinender als
   vorher, kräftiger Blur — Inhalt und Stempelraster scrollen sichtbar
   weichgezeichnet darunter durch. Fallback ohne backdrop-filter: fast deckend. */
header.haupt {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,248,244,.92);
  border-bottom: 1px solid rgba(229, 220, 208, .75);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.haupt {
    background: rgba(251,248,244,.66);
    -webkit-backdrop-filter: blur(16px) saturate(1.45);
    backdrop-filter: blur(16px) saturate(1.45);
  }
}
header.haupt .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 15px; padding-bottom: 15px;
}
.marke { text-decoration: none; color: var(--tinte); line-height: 1.2; }
/* Markenzug wie auf ihrem Eingangsschild: pinkes "KunstWerkstatt" in geometrischer
   Sans (Century Gothic; Fallbacks für Systeme ohne die Schrift).
   Am Seitenanfang groß, schrumpft beim Scrollen in die Kopfzeile (Klasse .oben via entwurf.js). */
.marke b { display: block; font-family: 'Century Gothic', 'CenturyGothic', 'Avant Garde', 'Futura', var(--serif); font-size: clamp(1.5rem, 4.5vw, 1.7rem); font-weight: 600; letter-spacing: .01em; color: #c04a86; }
/* Fliegende Logo-Kopie für die Startseiten-Bühne (Position kommt aus entwurf.js).
   Kinder skalieren mit dem Container-Schriftgrad (em statt rem). */
.marke-flug { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.marke-flug b { font-size: 1em; }
.marke-flug span { font-size: .41em; letter-spacing: .19em; }
.marke span { display: block; font-size: .7rem; letter-spacing: .19em; text-transform: uppercase; color: var(--tinte-weich); margin-top: 3px; }

nav.haupt { display: flex; align-items: center; gap: 30px; }
nav.haupt a {
  color: var(--tinte); text-decoration: none; font-size: .95rem;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .18s, color .18s;
}
nav.haupt a:hover { border-bottom-color: var(--linie); }
nav.haupt a[aria-current="page"] { border-bottom-color: var(--terracotta); }

.knopf {
  display: inline-block; background: var(--terracotta); color: #fff !important;
  padding: 12px 24px; border-radius: 2px; text-decoration: none !important;
  font-size: .95rem; letter-spacing: .015em; border: 0; cursor: pointer;
  font-family: var(--sans);
  box-shadow: 0 1px 2px rgba(42,38,34,.10);
  transition: background .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.knopf:hover { background: var(--terracotta-h); transform: translateY(-2px); box-shadow: 0 9px 22px rgba(142,63,34,.30); }
.knopf:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(142,63,34,.22); transition-duration: .08s; }
.knopf.hell { background: transparent; color: var(--tinte) !important; border: 1px solid var(--tinte); box-shadow: none; }
.knopf.hell:hover { background: var(--tinte); color: var(--papier) !important; box-shadow: 0 9px 22px rgba(42,38,34,.22); }

/* Header-CTA: nav.haupt a würde sonst padding (6px 0) und den Unterstrich-Hover
   der Textlinks erben — der Button bekommt seine eigene, vollwertige Form. */
nav.haupt a.knopf {
  padding: 11px 22px;
  border-bottom: 0;
  color: #fff;
  transition: background .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
nav.haupt a.knopf:hover { border-bottom-color: transparent; color: #fff; }

/* ---------- Kontakt-Blasen (ersetzen die dunkle Kontaktleiste, 03.08.) ----------
   Eine Glas-Pille in der Kopfzeile; beim Öffnen ploppen Seifenblasen-Pillen
   mit Telefon, Mail und Adresse heraus, dazu steigen kleine Glasbläschen auf. */
.kontakt-blasen { position: relative; }
.blasen-knopf {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: .92rem; letter-spacing: .015em;
  color: var(--tinte);
  background: rgba(251,248,244,.55);
  border: 1px solid rgba(42,38,34,.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 14px rgba(42,38,34,.08);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blasen-knopf svg { width: 16px; height: 16px; }
.blasen-knopf > svg, .blasen-knopf > span:not(.pille-schimmer) { position: relative; z-index: 2; }

/* Weicher Regenbogen-Sheen, der langsam durch die Pille wandert */
.pille-schimmer {
  position: absolute; inset: 0; border-radius: 999px; overflow: hidden;
  pointer-events: none; opacity: .45;
}
.pille-schimmer::before {
  content: ''; position: absolute; inset: -160% -40%;
  background: conic-gradient(from 0deg,
    rgba(255,150,200,.55), rgba(165,200,255,.5), rgba(165,255,215,.45),
    rgba(255,235,155,.5), rgba(255,165,165,.5), rgba(195,165,255,.5), rgba(255,150,200,.55));
  filter: blur(10px);
  animation: blase-schillern 9s linear infinite;
}

/* Der Pustering bläst beim Öffnen: kurzes Kippen und Aufblähen */
.pusterring { transform-origin: 50% 50%; }
.kontakt-blasen.offen .pusterring { animation: ring-pusten .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes ring-pusten {
  0% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-22deg) scale(1.25); }
  65% { transform: rotate(8deg) scale(.92); }
  100% { transform: rotate(0) scale(1); }
}
.blasen-knopf:hover { transform: translateY(-1px); background: rgba(251,248,244,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 20px rgba(42,38,34,.14); }
.kontakt-blasen.offen .blasen-knopf { background: rgba(251,248,244,.82); }

.blasen-wolke {
  position: absolute; top: calc(100% + 16px); right: 4px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 16px;
  pointer-events: none;
}
.kontakt-blasen.offen .blasen-wolke { pointer-events: auto; }
/* Seifenblase: rundes Glas mit Regenbogen-Schimmer am Rand (dünnschicht-artig),
   Glanzpunkt oben links, Symbol in der Mitte. Der Kontakt-Text erscheint als
   Glas-Schildchen daneben, sobald man auf die Blase zeigt. */
.blase {
  position: relative;
  width: 58px; height: 58px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tinte); text-decoration: none;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 44%),
    linear-gradient(135deg, rgba(255,190,225,.14), rgba(180,215,255,.15) 45%, rgba(190,255,225,.14) 72%, rgba(255,240,190,.16)),
    rgba(251,248,244,.36);
  border: 1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -8px 14px rgba(255,255,255,.18), 0 10px 26px rgba(42,38,34,.18);
  /* Startzustand: winzig am Pustering (oben rechts beim Knopf), leicht gedreht —
     beim Öffnen federn die Blasen von dort an ihre Plätze, wie herausgepustet. */
  opacity: 0; transform: translate(26px, -54px) scale(.08) rotate(-14deg);
  transform-origin: top right;
  transition: transform .62s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.blase svg { width: 20px; height: 20px; color: var(--terracotta); flex: none; position: relative; z-index: 2; }
.blase:nth-of-type(2) { margin-right: 26px; transform: translate(2px, -128px) scale(.08) rotate(-14deg); }
.blase:nth-of-type(3) { margin-right: 8px; transform: translate(20px, -202px) scale(.08) rotate(-10deg); }
.kontakt-blasen.offen .blase { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
.kontakt-blasen.offen .blase:nth-of-type(1) { transition-delay: 0s; }
.kontakt-blasen.offen .blase:nth-of-type(2) { transition-delay: .16s; }
.kontakt-blasen.offen .blase:nth-of-type(3) { transition-delay: .32s; }

/* Regenbogen-Ring: rotierender Pastell-Verlauf, per Maske auf den Rand begrenzt */
.blase-schimmer {
  position: absolute; inset: -1px; border-radius: 50%; overflow: hidden;
  pointer-events: none; opacity: .85;
  -webkit-mask-image: radial-gradient(circle, transparent 46%, #000 64%);
  mask-image: radial-gradient(circle, transparent 46%, #000 64%);
}
.blase-schimmer::before {
  content: ''; position: absolute; inset: -45%;
  background: conic-gradient(from 0deg,
    rgba(255,150,200,.6), rgba(165,200,255,.55), rgba(165,255,215,.5),
    rgba(255,235,155,.55), rgba(255,165,165,.55), rgba(195,165,255,.55), rgba(255,150,200,.6));
  animation: blase-schillern 8s linear infinite;
}
@keyframes blase-schillern { to { transform: rotate(1turn); } }

/* Sanftes Umherschweben, je Blase ein eigener Kurs (beginnt nach dem Aufploppen) */
.kontakt-blasen.offen .blase:nth-of-type(1) { animation: blase-flug-a 6.5s ease-in-out 1.1s infinite; }
.kontakt-blasen.offen .blase:nth-of-type(2) { animation: blase-flug-b 7.6s ease-in-out 1.3s infinite; }
.kontakt-blasen.offen .blase:nth-of-type(3) { animation: blase-flug-c 7s ease-in-out 1.5s infinite; }
/* Seifenblasen-Kurse: weite, unregelmäßige Bahnen mit leichtem Drehen und
   „Atmen" — jede Blase treibt anders, wie echte Seifenblasen im Luftzug. */
@keyframes blase-flug-a {
  0%, 100% { transform: translate(0,0) rotate(0) scale(1); }
  22% { transform: translate(-16px,-12px) rotate(-5deg) scale(1.03); }
  48% { transform: translate(9px,-20px) rotate(3deg) scale(.98); }
  74% { transform: translate(-7px,9px) rotate(-2deg) scale(1.01); }
}
@keyframes blase-flug-b {
  0%, 100% { transform: translate(0,0) rotate(0) scale(1); }
  26% { transform: translate(13px,-15px) rotate(4deg) scale(.97); }
  52% { transform: translate(-15px,-6px) rotate(-4deg) scale(1.04); }
  78% { transform: translate(6px,11px) rotate(2deg) scale(1); }
}
@keyframes blase-flug-c {
  0%, 100% { transform: translate(0,0) rotate(0) scale(1); }
  24% { transform: translate(-11px,10px) rotate(-3deg) scale(1.02); }
  50% { transform: translate(14px,-9px) rotate(5deg) scale(.97); }
  76% { transform: translate(-9px,-14px) rotate(-2deg) scale(1.02); }
}

/* Glas-Schildchen mit dem eigentlichen Kontakt-Text */
.blase-tipp {
  position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) scale(.88);
  opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 9px 15px; border-radius: 999px;
  font-family: var(--sans); font-size: .87rem; color: var(--tinte);
  background: rgba(251,248,244,.88);
  border: 1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 20px rgba(42,38,34,.15);
  transition: opacity .2s ease, transform .2s ease;
}
.blase:hover .blase-tipp, .blase:focus-visible .blase-tipp { opacity: 1; transform: translateY(-50%) scale(1); }

/* Kleine Seifenblasen, die beim Öffnen hinter der Pille aufsteigen */
.miniblase {
  position: absolute; top: 2px; width: 13px; height: 13px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(251,248,244,.18) 62%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 2px 8px rgba(42,38,34,.10);
}
.miniblase.eins { right: 34px; }
.miniblase.zwei { right: 66px; width: 9px; height: 9px; }
.miniblase.drei { right: 12px; width: 7px; height: 7px; }
.kontakt-blasen.offen .miniblase.eins { animation: seifenblase 2.6s ease-out infinite; }
.kontakt-blasen.offen .miniblase.zwei { animation: seifenblase 3.1s ease-out .9s infinite; }
.kontakt-blasen.offen .miniblase.drei { animation: seifenblase 2.8s ease-out 1.6s infinite; }
@keyframes seifenblase {
  0% { transform: translateY(4px) scale(.4); opacity: 0; }
  16% { opacity: .95; }
  70% { opacity: .65; }
  100% { transform: translateY(-46px) scale(1.08); opacity: 0; }
}

/* Über dem dunklen Aufmacher: Pille als dunkles Glas mit heller Schrift */
body.cine-oben .blasen-knopf {
  color: var(--papier);
  background: rgba(251,248,244,.14);
  border-color: rgba(251,248,244,.5);
}
body.cine-oben .blasen-knopf:hover { background: rgba(251,248,244,.28); }
body.cine-oben .kontakt-blasen.offen .blasen-knopf { background: rgba(251,248,244,.32); }

@media (prefers-reduced-motion: reduce) {
  .kontakt-blasen .miniblase,
  .kontakt-blasen.offen .blase,
  .kontakt-blasen.offen .pusterring,
  .pille-schimmer::before,
  nav.haupt.offen a,
  .blase-schimmer::before { animation: none !important; }
  .blase { transition-duration: .01s; }
}

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--tinte); margin: 5px 0; transition: .2s; }

/* ---------- Aufmacher ---------- */
.hero { position: relative; }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 0; align-items: stretch;
  min-height: min(78vh, 660px);
}
.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 72px clamp(24px, 5vw, 76px) 72px max(24px, calc((100vw - var(--breite)) / 2 + 24px));
  /* transparent statt papier: das Stempel-Wasserzeichen des body soll durchscheinen */
}
/* Bei aktiver Logo-Bühne beginnt der Text direkt unter dem Logo statt vertikal zentriert —
   sonst klafft zwischen Logo und Überschrift viel Leerraum. */
body.logo-buehne .hero-text { justify-content: flex-start; }
/* Feedback 03.08. abends: wieder etwas größer (Mittelweg zwischen Ur-Fassung und der kleinen Stufe) */
.hero-text h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
.hero-text .kicker {
  font-size: .74rem; letter-spacing: .21em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 22px; font-weight: 500;
}
.hero-text p.lead { font-size: 1.04rem; color: var(--tinte-weich); margin: 20px 0 30px; max-width: 48ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; }
.hero-bild { position: relative; overflow: hidden; background: var(--papier-warm); }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }
.bildlegende {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 34px 26px 18px;
  background: linear-gradient(to top, rgba(20,17,15,.62), transparent);
  color: #fff; font-size: .82rem; letter-spacing: .02em;
}
.bildlegende em { font-family: var(--serif); font-style: italic; font-size: 1.05rem; }

/* ---------- Cineastischer Aufmacher (03.08.) ----------
   Cosmos vollflächig als Bühne, langsamer Ken-Burns-Zoom, dunkler Schleier
   für Lesbarkeit, großes Logo das beim Scrollen in den Header fliegt. */
.hero-cine {
  position: relative; overflow: hidden;
  height: 100svh; min-height: 560px;
  display: flex; align-items: flex-end;
  background: #141110;
}
/* Zwei Bildebenen übereinander: die aktive zeigt das Werk und zoomt langsam,
   die zweite hält das nächste Bild bereit und wird eingeblendet. So wechselt
   der Aufmacher, ohne dass der Zoom abreißt. */
.cine-buehne { position: absolute; inset: 0; overflow: hidden; }
.cine-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  opacity: 0; transform: scale(1.12);
  will-change: transform, opacity;
  /* Der Zoom läuft als Übergang, nicht als Keyframe-Animation: Eine Animation
     springt beim Entfernen der Klasse auf ihren Anfangswert zurück — genau das
     war das Rucken beim Bildwechsel. Als Übergang bleibt der erreichte
     Zoomstand stehen, während das Bild ausblendet. */
  transition: opacity 2.4s ease, transform 22s linear;
}
.cine-bild.aktiv { opacity: 1; transform: scale(1.02); }
.cine-schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(18,14,12,.82) 0%, rgba(18,14,12,.42) 34%, rgba(18,14,12,.10) 58%, rgba(18,14,12,.30) 100%),
    linear-gradient(to right, rgba(18,14,12,.50) 0%, rgba(18,14,12,.10) 52%, rgba(18,14,12,0) 75%);
}
.cine-inhalt { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(48px, 8vh, 90px); }
.cine-marke { line-height: 1.1; margin-bottom: clamp(22px, 4vh, 44px); }
.cine-marke b {
  display: block;
  font-family: 'Century Gothic', 'CenturyGothic', 'Avant Garde', 'Futura', var(--serif);
  font-weight: 600; letter-spacing: .01em; color: #c04a86;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  text-shadow: 0 2px 26px rgba(18,14,12,.45);
}
/* Nur für die schmalsten Geräte: Der untere Anschlag von 2,4 rem ließ
   „KunstWerkstatt" bei 320 px bis x 348 laufen, also 28 px über den Rand
   (gemessen 04.08.). Ab 356 px passt die große Fassung mit Luft, dort bleibt
   alles unverändert — auch auf dem verbreiteten 360er- und 375er-Schirm. */
@media (max-width: 355px) {
  .cine-marke b { font-size: 1.85rem; }
}
.cine-marke span {
  display: block; margin-top: 6px;
  font-size: clamp(.72rem, 1.4vw, .95rem); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(251,248,244,.92);
}
.cine-kicker {
  font-size: .74rem; letter-spacing: .21em; text-transform: uppercase;
  color: #E8B296; margin-bottom: 16px; font-weight: 500;
}
.hero-cine h1 {
  color: var(--papier); font-size: clamp(2rem, 4.6vw, 3.4rem);
  max-width: 17ch; text-shadow: 0 2px 20px rgba(18,14,12,.5);
}
.cine-lead {
  color: rgba(251,248,244,.88); font-size: 1.02rem; max-width: 52ch;
  margin: 18px 0 28px; text-shadow: 0 1px 12px rgba(18,14,12,.5);
}
.knopf.glas {
  background: rgba(251,248,244,.14); color: var(--papier) !important;
  border: 1px solid rgba(251,248,244,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: none;
}
.knopf.glas:hover { background: rgba(251,248,244,.28); border-color: rgba(251,248,244,.85); box-shadow: 0 9px 22px rgba(18,14,12,.35); }
.cine-legende {
  position: absolute; right: 22px; bottom: 18px; z-index: 2;
  color: rgba(251,248,244,.75); font-size: .8rem; letter-spacing: .02em;
}
.cine-legende em { font-family: var(--serif); font-style: italic; font-size: 1rem; }
.cine-legende { transition: opacity .5s ease; }
.cine-legende.wechselt { opacity: 0; }
.cine-scrollhinweis {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2;
  width: 24px; height: 40px; border: 2px solid rgba(251,248,244,.55); border-radius: 13px;
}
.cine-scrollhinweis span {
  position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: rgba(251,248,244,.85);
  animation: cine-rollen 2.1s ease-in-out infinite;
}
@keyframes cine-rollen {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  62% { transform: translateY(14px); opacity: .9; }
  100% { transform: translateY(18px); opacity: 0; }
}

/* Kontakt-Seifenblasen schweben frei im Aufmacher (rechter, ruhiger Bildbereich).
   Aufploppen nacheinander nach dem Laden, danach eigene Schwebekurse — die
   Blasen-Optik selbst kommt aus den .blase-Regeln weiter oben. */
.hero-blasen {
  /* fixed statt absolute: die Blasen schweben beim Scrollen mit (Mario 03.08.) */
  position: fixed; right: clamp(18px, 4.5vw, 76px); top: 23%; z-index: 45;
  display: flex; flex-direction: column; align-items: flex-end; gap: 22px;
}
.hero-blasen .blase {
  transition: none;
  opacity: 0;
  animation:
    blase-auf .7s cubic-bezier(.34,1.56,.64,1) .9s forwards,
    blase-flug-a 10s ease-in-out 2.2s infinite;
}
.hero-blasen .blase:nth-of-type(2) {
  animation:
    blase-auf .7s cubic-bezier(.34,1.56,.64,1) 1.15s forwards,
    blase-flug-b 12s ease-in-out 2.5s infinite;
}
.hero-blasen .blase:nth-of-type(3) {
  animation:
    blase-auf .7s cubic-bezier(.34,1.56,.64,1) 1.4s forwards,
    blase-flug-c 11s ease-in-out 2.8s infinite;
}
@keyframes blase-auf {
  from { opacity: 0; transform: scale(.1) rotate(-14deg); }
  70% { opacity: 1; }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
/* Handy: ruhigere Blasen-Kurse — die weiten Desktop-Bahnen springen auf
   kleinen Schirmen zu sehr (Mario 03.08.). */
@keyframes blase-treiben-a {
  0%, 100% { transform: translate(0,0); }
  35% { transform: translate(-5px,-4px); }
  70% { transform: translate(3px,4px); }
}
@keyframes blase-treiben-b {
  0%, 100% { transform: translate(0,0); }
  40% { transform: translate(4px,-5px); }
  75% { transform: translate(-4px,3px); }
}
@keyframes blase-treiben-c {
  0%, 100% { transform: translate(0,0); }
  30% { transform: translate(-4px,4px); }
  65% { transform: translate(5px,-3px); }
}
@media (max-width: 700px) {
  /* Am Handy schweben alle drei Blasen im hellen, freien Bildstreifen zwischen
     Kopfzeile und Markenzug — versetzt als lockere Gruppe, nicht in Reihe
     (drei gleiche Kreise auf einer Linie lesen sich als Werkzeugleiste).
     Grund für oben: dort liegen nur ~24 % Schleier über dem Bild, unten am
     Rand rund 80 % — erst hier hat das Glas überhaupt Licht zu brechen.
     Sie gehören zur Bühne, nicht zur ganzen Seite: absolut im Aufmacher statt
     fixiert, beim Scrollen wandern sie mit dem Bild weg. (Stand 03.08.) */
  /* Ab 03.08. viewport-fixiert statt im Aufmacher verankert: nur so können die
     Blasen beim Scrollen in die Kontakt-Pille der Kopfzeile hineinfliegen
     (Flugbahn kommt aus entwurf.js). Bei scrollY = 0 ist die Lage identisch. */
  .hero-blasen {
    position: fixed; z-index: 45;
    top: 86px; right: 14px; bottom: auto; left: auto;
    display: block; width: 171px; height: 78px;
    gap: 0; transition: none;
    transform-origin: 100% 0;
    will-change: transform, opacity;
  }
  .hero-blasen .blase {
    position: absolute; margin: 0;
    width: 44px; height: 44px;
  }
  .hero-blasen .blase svg { width: 16px; height: 16px; }
  /* Flache Diagonale statt Reihe, von links oben nach rechts unten. Die
     Staffelung hält die Gruppe aus der Ohrenspitze heraus (x≈225–250 unterhalb
     y≈140) und lässt Telefon als unterste, rechte Blase am nächsten am Daumen. */
  .hero-blasen .blase:nth-of-type(1) { right: 0;     top: 34px; } /* Telefon  */
  .hero-blasen .blase:nth-of-type(2) { right: 127px; top: 0; }    /* E-Mail   */
  .hero-blasen .blase:nth-of-type(3) { right: 57px;  top: 14px; } /* Standort */
  /* Trefferfläche 56 px, sichtbar bleiben 44 px — die Blasen driften leicht,
     das Ziel darf nicht mitwandern. */
  .hero-blasen .blase::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
  }
  /* Am Handy keine Hover-Schildchen — Tippen führt die Aktion direkt aus */
  .hero-blasen .blase-tipp { display: none; }
  /* Aufploppen nacheinander, danach ruhige Schwebekurse */
  .hero-blasen .blase {
    animation: blase-auf .7s cubic-bezier(.34,1.56,.64,1) .9s forwards,
               blase-treiben-a 12s ease-in-out 2.2s infinite;
  }
  .hero-blasen .blase:nth-of-type(2) {
    animation: blase-auf .7s cubic-bezier(.34,1.56,.64,1) 1.15s forwards,
               blase-treiben-b 14s ease-in-out 2.5s infinite;
  }
  .hero-blasen .blase:nth-of-type(3) {
    animation: blase-auf .7s cubic-bezier(.34,1.56,.64,1) 1.4s forwards,
               blase-treiben-c 13s ease-in-out 2.8s infinite;
  }
}
/* Flache Geräte (iPhone SE & Co., unter ~780 px Höhe): oben ist kein freier
   Bildstreifen mehr da — der Markenzug rückt bis unter die Kopfzeile. Dann
   wandert die Gruppe unter die Knöpfe und bindet sich an die 24-px-Kante der
   Textspalte, mit leichtem Versatz statt starrer Reihe. Der Abstand nach unten
   hält sie aus dem Systemgesten-Streifen und von der Bildlegende weg. Auf dem
   dunklen Schleier bekommt das Glas etwas mehr Fülle, sonst verschwindet es. */
@media (max-width: 700px) and (max-height: 779px) {
  /* Auf flachen Schirmen übernimmt die Kontakt-Pille von Anfang an (siehe
     entwurf.js); die Blasen erscheinen nur auf Tipp unter ihr. Diese Lage
     greift daher nur noch als Rückfall, wenn kein JavaScript läuft. */
  .hero-blasen {
    top: auto; right: auto;
    left: 24px; bottom: clamp(40px, 7vh, 52px);
    width: 172px; height: 48px;
  }
  /* Markenzug und Kicker kleben hier sonst aneinander */
  .cine-kicker { margin-top: 12px; }
  .hero-blasen .blase { width: 40px; height: 40px; }
  .hero-blasen .blase svg { width: 15px; height: 15px; }
  .hero-blasen .blase:nth-of-type(1) { left: 0;     right: auto; top: auto; bottom: 0; }
  .hero-blasen .blase:nth-of-type(2) { left: 54px;  right: auto; top: auto; bottom: 8px; }
  .hero-blasen .blase:nth-of-type(3) { left: 108px; right: auto; top: auto; bottom: 2px; }
  .hero-blasen .blase {
    background:
      radial-gradient(circle at 30% 26%, rgba(255,255,255,.98), rgba(255,255,255,0) 46%),
      linear-gradient(135deg, rgba(255,190,225,.22), rgba(180,215,255,.24) 45%, rgba(190,255,225,.22) 72%, rgba(255,240,190,.26)),
      rgba(251,248,244,.50);
    border-color: rgba(255,255,255,.92);
  }
}
/* ---------- Kontakt-Pille in der Kopfzeile (Handy, 03.08.) ----------
   Beim Scrollen fliegen die drei Blasen in diese Pille hinein; ein Tipp
   lässt sie darunter wieder herausploppen. Fortschritt --pille (0…1) und
   der Flug der Blasen kommen aus entwurf.js. */
.kontakt-pille { display: none; }
@media (max-width: 700px) {
  /* Die Pille wächst beim Scrollen in die Kopfzeile hinein: Breite und
     Deckkraft folgen dem Flug-Fortschritt --pille, damit sie oben keinen
     Platz belegt und der Markenzug dort seine volle Größe behält. */
  .kontakt-pille {
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
    position: relative; overflow: hidden; flex: none;
    margin-left: auto;
    height: 38px; border-radius: 999px; cursor: pointer;
    font-family: var(--sans); font-size: .8rem; letter-spacing: .015em;
    white-space: nowrap;
    color: var(--tinte);
    background: rgba(251,248,244,.58);
    border: 1px solid rgba(42,38,34,.16);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(42,38,34,.10);
    opacity: var(--pille, 0);
    width: calc(97px * var(--pille, 0));
    padding: 0 calc(12px * var(--pille, 0));
    margin-right: calc(8px * var(--pille, 0));
    border-width: calc(1px * var(--pille, 0));
    pointer-events: none;
    transition: background .24s ease, box-shadow .24s ease,
                width .52s cubic-bezier(.65,0,.35,1),
                padding .52s cubic-bezier(.65,0,.35,1),
                transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  body.pille-da .kontakt-pille { pointer-events: auto; }
  /* Sobald die Pille steht, wird der Kopf kompakt — sonst reicht die Breite
     auf 375 px nicht für Markenzug, Pille und Menüknopf zusammen. */
  header.haupt .wrap { gap: 8px; }
  .marke b, .marke span { transition: font-size .3s ease, opacity .25s ease; }
  body.pille-da .marke b { font-size: 1.25rem; }
  /* display:none statt Höhe 0 — die gesperrte Unterzeile bestimmt sonst
     weiterhin die Breite des Markenzugs (Buchstabenabstand .19em). */
  body.pille-da .marke span { display: none; }
  .kontakt-pille > svg { width: 15px; height: 15px; position: relative; z-index: 2; }
  .kontakt-pille .pille-text { position: relative; z-index: 2; }
  .kontakt-pille:active { background: rgba(251,248,244,.86); }
  /* Sehr schmale Geräte (iPhone SE der ersten Reihe, ältere Androids, 320 px):
     Markenzug 169 px + Pille 97 px + Menüknopf 40 px + Abstände + Polsterung
     ergeben 370 px — gemessen am 04.08. stand der MENÜKNOPF DESHALB 34 PX
     AUSSERHALB DES BILDSCHIRMS und war nicht erreichbar, dazu ließ sich die
     Seite seitwärts schieben. Unter 380 px rückt der Markenzug eine Stufe
     kleiner und die Pille zeigt nur noch ihr Symbol. */
  @media (max-width: 374px) {
    body.pille-da .marke b { font-size: 1.05rem; }
    header.haupt .wrap { padding-left: 16px; padding-right: 16px; gap: 6px; }
    /* Die Pille behält ihr Wort — sie hat kein Symbol, ohne Text wäre sie ein
       leerer Kreis. Stattdessen eine Stufe kleiner und enger gesetzt. */
    .kontakt-pille {
      font-size: .72rem;
      width: calc(74px * var(--pille, 0));
      padding: 0 calc(8px * var(--pille, 0));
      margin-right: calc(6px * var(--pille, 0));
    }
  }
  /* Über dem dunklen Aufmacher hell, nach dem Umschlag dunkel */
  body.cine-oben .kontakt-pille {
    color: var(--papier);
    background: rgba(251,248,244,.16);
    border-color: rgba(251,248,244,.5);
  }
  /* Am Handy liegen die Blasen nie im Bild — sie gehören zur Pille. Ohne diese
     Sperre blitzen sie beim Laden kurz auf, weil ihre Aufplopp-Animation läuft,
     bevor das Skript greift. */
  .hero-blasen { opacity: 0; pointer-events: none; }
  .hero-blasen .blase { animation: none; }

  /* Pille geöffnet: die Blasen sitzen wieder unter ihr und ploppen heraus */
  body.pille-offen .hero-blasen {
    top: 84px; right: 14px; bottom: auto; left: auto;
    width: 171px; height: 78px;
    opacity: 1 !important; transform: none !important; pointer-events: auto !important;
  }
  body.pille-offen .hero-blasen .blase:nth-of-type(1) { right: 0;     top: 34px; left: auto; bottom: auto; }
  body.pille-offen .hero-blasen .blase:nth-of-type(2) { right: 127px; top: 0;    left: auto; bottom: auto; }
  body.pille-offen .hero-blasen .blase:nth-of-type(3) { right: 57px;  top: 14px; left: auto; bottom: auto; }
  /* Sichtbarkeit steht fest im CSS, die Animation ist nur die Zugabe: sonst
     fällt die Blase nach dem Ausfahren auf ihren winzigen Startwert zurück
     (`backwards`) oder bleibt bei abgeschalteten Animationen unsichtbar. */
  body.pille-offen .hero-blasen .blase {
    width: 44px; height: 44px;
    opacity: 1; transform: none;
    animation: blase-aus-pille .7s cubic-bezier(.3,1.65,.45,1) both;
  }

  /* ---------- Verwandlung: Die Pille SELBST wird der Pustering (03.08. v2) ----
     Ablauf beim Antippen: Text weicht, die Pillenkontur zieht sich zum Ring
     zusammen (die Pille IST der Ring — kein Icon darin), ein Stiel wächst,
     die Seifenhaut im Ring bläht sich oval auf und PLATZT — in dem Moment
     ploppen die Kontaktblasen und ein Schwarm Mini-Bläschen heraus. Danach
     dehnt sich der Ring zurück zur Pille. */
  .kontakt-pille { overflow: visible; }
  .pille-schimmer { border-radius: 999px; overflow: hidden; }

  /* Der Ring: ein echter Pustering ist ein flacher, ovaler Reif — nicht
     kreisrund. Leicht gekippt, damit man ihn räumlich liest. */
  .kontakt-pille.pustet {
    width: 46px; height: 38px; padding: 0;
    border-width: 3.5px;
    border-color: rgba(42, 38, 34, .82);
    border-radius: 50%;
    background: rgba(251, 248, 244, .18);
    box-shadow: 0 5px 18px rgba(42, 38, 34, .18),
                inset 0 1px 2px rgba(255, 255, 255, .5);
    transform: rotate(-14deg) scale(1.04);
  }
  body.cine-oben .kontakt-pille.pustet { border-color: rgba(251, 248, 244, .95); }
  .kontakt-pille.pustet .pille-schimmer { opacity: 0; }

  .pille-text { transition: opacity .14s ease, transform .26s ease; }
  .kontakt-pille.pustet .pille-text { opacity: 0; transform: scale(.6); }

  /* Griff: kein dünner Strich, sondern ein Stiel, der am Ring ansetzt und
     zum Ende hin schlanker wird — mit Halsstück wie beim Spielzeug. */
  .kontakt-pille::after {
    content: ''; position: absolute; top: 88%; left: 50%;
    width: 7px; height: 26px; margin-left: 4px;
    background: linear-gradient(to bottom,
      rgba(42,38,34,.86) 0%, rgba(42,38,34,.86) 18%,
      rgba(42,38,34,.7) 22%, rgba(42,38,34,.7) 100%);
    border-radius: 2px 2px 5px 5px / 2px 2px 8px 8px;
    transform-origin: top center;
    transform: rotate(34deg) scaleY(0);
    transition: transform .34s cubic-bezier(.34,1.56,.64,1) .1s;
    pointer-events: none;
  }
  body.cine-oben .kontakt-pille::after {
    background: linear-gradient(to bottom,
      rgba(251,248,244,.95) 0%, rgba(251,248,244,.95) 18%,
      rgba(251,248,244,.8) 22%, rgba(251,248,244,.8) 100%);
  }
  .kontakt-pille.pustet::after { transform: rotate(34deg) scaleY(1); }

  /* Seifenhaut: schillernde Membran im Ring — bläht sich oval und platzt */
  .pille-haut {
    position: absolute; inset: 3px; border-radius: 50%;
    background:
      radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.08) 58%),
      linear-gradient(130deg, rgba(255,190,225,.55), rgba(180,215,255,.55) 45%, rgba(190,255,225,.5) 75%, rgba(255,240,190,.55));
    opacity: 0; pointer-events: none;
    transform-origin: 42% 60%;   /* wölbt sich zur Pust-Richtung, nicht mittig */
  }
  .kontakt-pille.pustet .pille-haut { animation: haut-pusten 1.25s cubic-bezier(.4,.05,.35,1) .4s both; }
  @keyframes haut-pusten {
    0%   { opacity: 0;   transform: scale(.3, .3); }
    16%  { opacity: .95; transform: scale(.72, .68); }                          /* Haut spannt sich */
    38%  { opacity: 1;   transform: scale(1.12, .9)  translate(-2px, 2px); }    /* erster Atemzug: oval */
    56%  { opacity: 1;   transform: scale(1.02, 1.0) translate(-1px, 1px); }    /* federt kurz zurück */
    76%  { opacity: 1;   transform: scale(1.32, .95) translate(-4px, 4px); }    /* tiefer Puster, stark oval */
    88%  { opacity: .9;  transform: scale(1.24, 1.12) translate(-3px, 3px); }   /* schnürt die Blase ab */
    100% { opacity: 0;   transform: scale(1.7, 1.5)  translate(-7px, 7px); }    /* Rest zerplatzt */
  }

  /* Mini-Bläschen: spritzen im Platz-Moment in alle Richtungen und verpuffen */
  .mini-blase {
    position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border-radius: 50%; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(251,248,244,.2) 62%);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 1px 5px rgba(42, 38, 34, .14);
  }
  .kontakt-pille.pustet .mini-blase { animation: mini-platzen .85s cubic-bezier(.2,.6,.35,1) both; }
  .kontakt-pille.pustet .m1 { animation-delay: 1.52s; --mx: -30px; --my:  22px; }
  .kontakt-pille.pustet .m2 { animation-delay: 1.60s; --mx: -44px; --my:  -4px; width: 6px; height: 6px; }
  .kontakt-pille.pustet .m3 { animation-delay: 1.56s; --mx: -18px; --my:  40px; width: 5px; height: 5px; }
  .kontakt-pille.pustet .m4 { animation-delay: 1.64s; --mx:  -8px; --my: -26px; width: 6px; height: 6px; }
  .kontakt-pille.pustet .m5 { animation-delay: 1.58s; --mx:  16px; --my:  30px; width: 5px; height: 5px; }
  @keyframes mini-platzen {
    0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
    18%  { opacity: 1; }
    75%  { opacity: .85; }
    100% { opacity: 0; transform: translate(var(--mx), var(--my)) scale(1.15); }
  }

  /* Kontaktblasen: warten den Plopp ab und federn dann kräftig heraus */
  body.pille-offen .hero-blasen .blase:nth-of-type(1) {
    --sx: -64px; --sy: -104px;
    animation: blase-gepustet 1.15s cubic-bezier(.35,1.25,.5,1) .85s both,
               blase-treiben-a 6.5s ease-in-out 2.2s infinite;
  }
  body.pille-offen .hero-blasen .blase:nth-of-type(2) {
    --sx: 63px; --sy: -70px;
    animation: blase-aus-pille .7s cubic-bezier(.3,1.65,.45,1) 1.65s both,
               blase-treiben-b 7.4s ease-in-out 2.5s infinite;
  }
  body.pille-offen .hero-blasen .blase:nth-of-type(3) {
    --sx: -7px; --sy: -84px;
    animation: blase-aus-pille .7s cubic-bezier(.3,1.65,.45,1) 1.80s both,
               blase-treiben-c 6.9s ease-in-out 2.7s infinite;
  }

  /* Zerplatzen: kurz spannen, zusammenziehen — dann REISST die Haut schlagartig
     auf und ist weg. Kein weiches Ausblenden: Eine Seifenblase verschwindet in
     einem Wimpernschlag, das Auge sieht nur noch den Sprühnebel. */
  /* Eine echte Seifenblase verschwindet in einem Wimpernschlag: kurze letzte
     Spannung, dann reißt die Haut in ~40 ms — kein weiches Ausblenden. Was
     das Auge danach sieht, sind nur die wegstiebenden Tröpfchen. */
  @keyframes blase-zerplatzt {
    0%   { opacity: 1;  transform: scale(1); }
    55%  { opacity: 1;  transform: scale(1.05); }   /* letzte Spannung */
    70%  { opacity: 1;  transform: scale(.95); }    /* zieht sich zusammen */
    78%  { opacity: .9; transform: scale(1.2); }    /* Riss läuft über die Haut */
    86%  { opacity: 0;  transform: scale(1.32); }   /* WEG */
    100% { opacity: 0;  transform: scale(1.32); }
  }
  /* Schockwelle exakt im Riss-Moment: der Regenbogenrand schießt auf und verpufft */
  @keyframes rand-nachhall {
    0%   { opacity: .95; transform: scale(1); }
    100% { opacity: 0;   transform: scale(2.2); }
  }
  .hero-blasen .blase.zerplatzt { pointer-events: none; }
  .hero-blasen .blase.zerplatzt .blase-schimmer { animation: rand-nachhall .26s cubic-bezier(.1,.8,.25,1) .37s both; }

  /* Tröpfchen: entstehen auf der Blasenkontur und stieben radial weg,
     mit leichtem Fall — Startpunkt, Ziel und Größe rechnet das Skript. */
  .tropfen {
    position: absolute; z-index: 2; pointer-events: none;
    left: var(--zx); top: var(--zy);
    width: var(--tg, 3px); height: var(--tg, 3px);
    margin: calc(var(--tg, 3px) / -2) 0 0 calc(var(--tg, 3px) / -2);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.98), rgba(224,238,252,.5) 70%);
    box-shadow: 0 1px 3px rgba(42, 38, 34, .18);
    animation: tropfen-spritzen var(--td, .55s) cubic-bezier(.1,.65,.3,1) var(--tv, .37s) both;
  }
  @keyframes tropfen-spritzen {
    0%   { opacity: 0;  transform: translate(var(--x0), var(--y0)) scale(.6); }
    6%   { opacity: 1;  transform: translate(var(--x0), var(--y0)) scale(1); }
    75%  { opacity: .85; }
    100% { opacity: 0;  transform: translate(var(--x1), var(--y1)) scale(.35); }
  }

  /* Die erste Blase entsteht in der Haut: wächst langsam dicht an der
     Ringöffnung mit, löst sich beim Abschnüren und segelt an ihren Platz. */
  @keyframes blase-gepustet {
    0%   { opacity: 0;  transform: translate(var(--sx), var(--sy)) scale(.05); }
    14%  { opacity: .9; transform: translate(calc(var(--sx) - 4px),  calc(var(--sy) + 4px))  scale(.22); }
    42%  { opacity: 1;  transform: translate(calc(var(--sx) - 12px), calc(var(--sy) + 10px)) scale(.5); }  /* hängt noch an der Haut */
    60%  { opacity: 1;  transform: translate(calc(var(--sx) - 16px), calc(var(--sy) + 14px)) scale(.62); } /* schnürt sich ab */
    100% { opacity: 1;  transform: translate(0, 0) scale(1); }                                             /* segelt an den Platz */
  }

  @media (prefers-reduced-motion: reduce) {
    .kontakt-pille.pustet { width: calc(97px * var(--pille, 0)); height: 38px; padding: 0 12px; border-width: 1px; }
    .kontakt-pille.pustet .pille-text { opacity: 1; transform: none; }
    .kontakt-pille::after, .pille-haut, .mini-blase { display: none; }
    body.pille-offen .hero-blasen .blase { animation-delay: 0s !important; }
  }

  /* Aus der Pille heraus: winzig an deren Position starten, dann an den Platz federn */
  /* Start exakt im Ringzentrum — die Offsets sind je Blase gemessen
     (Panel-Kalibrierung 03.08.) und stehen als --sx/--sy an den Blasen. */
  @keyframes blase-aus-pille {
    0%   { opacity: 0; transform: translate(var(--sx, 0px), var(--sy, -80px)) scale(.04); }
    26%  { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-blasen .blase { animation: none; opacity: 1; transform: none; }
  .hero-blasen { transform: none !important; }
  .kontakt-pille { transform: none !important; }
}

/* Kopfzeile über dem Aufmacher: durchsichtig mit hellen Links, ab dem ersten
   Scrollstück wieder Milchglas-Papier (Klasse cine-oben via entwurf.js). */
body.cine-oben header.haupt {
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Über dem Aufmacherbild braucht die Navigation denselben Schatten wie
   Überschrift und Markenzug (Zeilen 386/399/403). Ohne ihn standen die hellen
   Links auf dem hellen Pferdebild bei gemessen 2,6–3,0 : 1 — unter der Grenze
   von 4,5 : 1 und je nach Bildausschnitt kaum zu lesen (04.08.). */
body.cine-oben nav.haupt a { color: var(--papier); text-shadow: 0 1px 10px rgba(18,14,12,.75), 0 1px 3px rgba(18,14,12,.55); }
body.cine-oben nav.haupt a.knopf { text-shadow: none; }
body.cine-oben nav.haupt a:hover { border-bottom-color: rgba(251,248,244,.5); }
body.cine-oben nav.haupt a[aria-current="page"] { border-bottom-color: #E8B296; }
body.cine-oben .burger span { background: var(--papier); }
/* Solange der große Markenzug in der Bühne steht, bleibt der Header-Platz leer */
body.cine-oben header.haupt .marke { opacity: 0; pointer-events: none; }
header.haupt .marke { transition: opacity .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .cine-bild img { animation: none; }
  .cine-scrollhinweis span { animation: none; }
}
@media (max-width: 700px) {
  .hero-cine { height: 100svh; min-height: 480px; align-items: stretch; }
  /* Schriftzug höher (Mario 03.08.): Logo wandert in den oberen Bildbereich,
     Kicker/Überschrift/Knöpfe bleiben unten. */
  .cine-inhalt { display: flex; padding-top: calc(96px + 4svh); }
  .cine-inhalt > .wrap {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  }
  .cine-marke { margin-bottom: auto; }
  .cine-bild { object-position: 52% 40%; }
  .cine-legende { right: 16px; bottom: 14px; }
  .cine-scrollhinweis { display: none; }
}

/* ---------- Werke-Slider (Startseite) ---------- */
.werke-slider { position: relative; }
.werke-slider .werke {
  display: flex; gap: 28px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px 4px 10px;
}
.werke-slider .werke::-webkit-scrollbar { display: none; }
.werke-slider .werk { flex: 0 0 296px; scroll-snap-align: start; }
.slider-pfeil {
  position: absolute; top: 148px; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--linie);
  background: rgba(251,248,244,.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--tinte); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(42,38,34,.14);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.slider-pfeil svg { width: 22px; height: 22px; }
.slider-pfeil:hover { background: var(--terracotta); border-color: var(--terracotta); color: #fff; transform: scale(1.07); }
.slider-pfeil.zurueck { left: -14px; }
.slider-pfeil.weiter { right: -14px; }
@media (max-width: 620px) {
  .werke-slider .werk { flex-basis: min(76vw, 296px); }
  .slider-pfeil { display: none; } /* am Handy wischt man */
}

/* ---------- Abschnitte ---------- */
section { padding: clamp(56px, 8vw, 104px) 0; }
/* Warme Sektionen tragen dasselbe viewport-fixierte Stempelraster wie der
   body — gleiche Position, gleiche Größe → das Muster steht still, während
   der Inhalt darüberzieht, und läuft nahtlos über die Sektionsgrenzen. */
section.warm {
  background: var(--papier-warm) url("img/stempel-muster-hell-v3.png") repeat fixed top left / 458px auto;
  background-position: 0 var(--stempel-y, 0px);
}
/* iOS Safari kann kein background-attachment: fixed. Dort: Muster nur einmal
   auf dem body (ohne Drift), warme Sektionen als halbtransparente Tönung —
   rgba(237,228,214,.5) über Papier ergibt exakt #F4EEE5, keine Schnittkanten. */
@supports (-webkit-touch-callout: none) {
  body { background-attachment: scroll; background-position: 0 0; }
  section.warm { background: rgba(237, 228, 214, .5); }
}
/* Über-mich-Teaser: erster Satz als Serif-Auftakt in ihrer Stimme — schafft
   Hierarchie im Textblock, der Rest bleibt ruhiger Fließtext. */
.vorstellung-lead {
  font-family: var(--serif); font-style: italic;
  font-size: 1.34rem; line-height: 1.5; color: var(--tinte);
  margin: 0 0 18px; max-width: 44ch;
}

.abschnitt-kopf { max-width: 640px; margin-bottom: 46px; }
.abschnitt-kopf .kicker {
  font-size: .74rem; letter-spacing: .21em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 14px; font-weight: 500;
}
.abschnitt-kopf p { color: var(--tinte-weich); margin: 16px 0 0; }
.mitte { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Werke ---------- */
.werke { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 34px 28px; }
.werk { }
.werk-bild {
  position: relative; overflow: hidden; background: var(--papier-warm);
  border: 1px solid var(--linie); aspect-ratio: 1 / 1;
}
.werk-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.werk:hover .werk-bild img { transform: scale(1.035); }
.werk-info { padding-top: 15px; }
.werk-info h3 { font-size: 1.22rem; margin-bottom: 3px; }
.werk-info .meta { font-size: .87rem; color: var(--tinte-weich); }
.werk-info .preis {
  margin-top: 9px; font-size: .95rem; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.werk-info .preis b { font-weight: 600; }
.werk-info .anfragen {
  font-size: .84rem; color: var(--terracotta); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.verkauft {
  display: inline-block; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinte-weich); border: 1px solid var(--linie); padding: 3px 9px; border-radius: 2px;
}
.merkmal { position: absolute; top: 12px; left: 12px; background: rgba(251,248,244,.93); color: var(--tinte); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; }

/* Preis-Schalter (nur Demo für den Termin) */
.preis-schalter {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  background: var(--tinte); color: #F2ECE3; border: 0;
  padding: 11px 17px; border-radius: 100px; font-size: .82rem; cursor: pointer;
  font-family: var(--sans); box-shadow: 0 6px 22px rgba(0,0,0,.22); display: flex; align-items: center; gap: 9px;
}
.preis-schalter:hover { background: #3d3630; }
.preis-schalter .punkt { width: 7px; height: 7px; border-radius: 50%; background: #7BC9A6; }
body.preise-aus .preis-schalter .punkt { background: #C97B7B; }
body.preise-aus .preis { display: none !important; }
body.preise-aus .preis-ersatz { display: flex !important; }
.preis-ersatz { display: none; margin-top: 9px; font-size: .84rem; }

/* ---------- Filter ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 40px; }
.filter button {
  background: transparent; border: 1px solid var(--linie); color: var(--tinte-weich);
  padding: 8px 17px; border-radius: 100px; cursor: pointer; font-size: .89rem;
  font-family: var(--sans); transition: .18s;
}
.filter button:hover { border-color: var(--tinte-weich); color: var(--tinte); }
.filter button.aktiv { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }


/* minmax(0,…) statt 1fr: sonst kann eine Spalte nicht unter die kleinste
   Breite ihres Inhalts schrumpfen. Die <option>-Texte im Auswahlfeld sind
   nicht umbrechbar und schoben die Spalte sonst über den Bildschirmrand. */
.zweispalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 66px); align-items: center; }
.zweispalt.schmal-links { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

/* ---------- Zeitleiste ---------- */
.zeit { list-style: none; padding: 0; margin: 0; }
.zeit li { display: grid; grid-template-columns: 92px 1fr; gap: 26px; padding: 15px 0; border-bottom: 1px solid var(--linie); }
.zeit li:last-child { border-bottom: 0; }
.zeit .jahr { font-family: var(--serif); font-size: 1.28rem; color: var(--terracotta); }

/* ---------- Formular ---------- */
.formular { display: grid; gap: 17px; }
/* Formularfelder dürfen ihre Spalte nicht aufblähen */
.formular input, .formular select, .formular textarea { max-width: 100%; min-width: 0; }
.feld { display: grid; gap: 7px; }
.feld label { font-size: .89rem; color: var(--tinte-weich); }
.feld input, .feld textarea, .feld select {
  font-family: var(--sans); font-size: 1rem; padding: 12px 14px;
  border: 1px solid var(--linie); background: var(--papier); color: var(--tinte); border-radius: 2px;
}
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: 2px solid var(--petrol); outline-offset: -1px; border-color: transparent; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }

/* Honigtopf gegen Bots: aus dem Bild geschoben statt display:none — manche
   Bots überspringen versteckte Felder, aus der Ansicht geschobene füllen sie. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rückmeldung des Formulars */
.formular-meldung { margin: 4px 0 0; padding: 14px 16px; font-size: .93rem; border: 1px solid var(--linie); background: var(--papier); }
.formular-meldung.gut { border-color: var(--petrol); background: color-mix(in srgb, var(--petrol) 8%, var(--papier)); }
.formular-meldung.schlecht { border-color: var(--terracotta); background: color-mix(in srgb, var(--terracotta) 8%, var(--papier)); }
.feld input.fehler, .feld textarea.fehler { border-color: var(--terracotta); }
.formular button[disabled] { opacity: .6; cursor: progress; }

/* ---------- Kontaktblock ---------- */
.kontakt-karte { background: var(--papier-warm); padding: clamp(26px, 4vw, 40px); border: 1px solid var(--linie); }
.kontakt-zeile { display: flex; gap: 15px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--linie); }
.kontakt-zeile:last-of-type { border-bottom: 0; }
.kontakt-zeile svg { width: 21px; height: 21px; flex: none; color: var(--terracotta); margin-top: 3px; }
.kontakt-zeile a { text-decoration: none; }
.kontakt-zeile a:hover { text-decoration: underline; }
.kontakt-zeile .klein { font-size: .84rem; color: var(--tinte-weich); }

/* ---------- Fußzeile ---------- */
/* Ihr Atelier-Stempel als dezentes Wasserzeichen-Muster im Fußbereich —
   weiße Linien mit ~8 % Deckkraft auf dunklem Grund, stört den Textkontrast nicht. */
footer.haupt { background: #191512 url("img/stempel-muster-v3.png") repeat top left / 458px auto; color: #CFC6BA; padding: 62px 0 28px; font-size: .93rem; }
footer.haupt h4 { font-family: var(--serif); color: #F4EEE5; font-size: 1.28rem; font-weight: 500; margin: 0 0 15px; }
footer.haupt a { color: #CFC6BA; text-decoration: none; }
footer.haupt a:hover { color: #fff; text-decoration: underline; }
.fuss-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; padding-bottom: 40px; }
.fuss-unten { border-top: 1px solid rgba(255,255,255,.13); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; font-size: .84rem; color: #968D82; }
.fuss-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- Lichtbox: Werke in voller Proportion ---------- */
.lichtbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,17,15,.93);
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
}
.lichtbox[hidden] { display: none; }
.lichtbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 94vw; }
.lichtbox img { max-width: 94vw; max-height: 84vh; width: auto; height: auto; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.lichtbox figcaption { color: #E9E2D8; font-size: .95rem; text-align: center; font-family: var(--sans); }
/* Schließknopf als Glaskreis — dieselbe Sprache wie die Blätterpfeile weiter
   unten, damit er als Bedienelement der Lichtbox lesbar ist und nicht als
   loser Buchstabe über dem Bild. */
/* Solange ein Werk groß steht, tritt die Kopfzeile ab (Klasse aus entwurf.js).
   Vorher schien sie als Geisterbild durch den Schleier, und ihre rechte Ecke
   war für den Schließknopf gesperrt: am Handy lag das × deckungsgleich auf dem
   Menüknopf (gemessen 04.08.: × x 312–358, Burger x 311–351), am Rechner 2 px
   neben „Atelier besuchen". Ein Ausweichen nach unten half nicht — bei flachen
   Schirmen saß der Knopf dann mitten auf dem Werk (812 × 375, „Pink Panther"
   im Querformat). Ohne Kopfzeile gehört die Ecke wieder dem Bild. */
body.lichtbox-offen header.haupt { opacity: 0; pointer-events: none; }
header.haupt { transition: opacity .2s ease; }
.lichtbox-zu {
  position: fixed; top: 18px; right: 18px; z-index: 210;
  width: 54px; height: 54px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,248,244,.12); border: 1px solid rgba(251,248,244,.38);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #FBF8F4; font-size: 1.9rem; line-height: 1; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.lichtbox-zu:hover { background: rgba(251,248,244,.28); transform: scale(1.08); color: #fff; }

/* ---------- Entwurfs-Banner ---------- */
.entwurf-banner {
  background: #19C7BF; color: #06322F; text-align: center;
  padding: 8px 16px; font-size: .82rem; letter-spacing: .02em;
}
.entwurf-banner b { font-weight: 600; }

/* Notiz aus dem Gespraech vom 28.07.: was am Entwurf noch nicht stimmt.
   Nur auf der Startseite, damit sie nicht beim Durchklicken stoert. */
.gespraechs-notiz {
  background: #FFF8ED; border-bottom: 1px solid #E8D9BE;
  padding: 16px 24px; font-size: .88rem; line-height: 1.55; color: #4A3B22;
}
.gespraechs-notiz .wrap { max-width: 1180px; margin: 0 auto; }
.gespraechs-notiz b { font-weight: 600; color: #33280F; }
.gespraechs-notiz ul { margin: 8px 0 0; padding-left: 20px; }
.gespraechs-notiz li { margin-bottom: 3px; }
@media (max-width: 620px) {
  .gespraechs-notiz { padding: 12px 20px; font-size: .8rem; line-height: 1.45; }
}

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-text { padding: 52px 24px 44px; order: 2; }
  .hero-bild { order: 1; aspect-ratio: 4 / 3; }
  .zweispalt, .zweispalt.schmal-links { grid-template-columns: minmax(0, 1fr); }
  .fuss-grid { grid-template-columns: 1fr; gap: 34px; }
  /* Geöffnetes Menü als Vollbild-Milchglas (03.08.). Bewusst `fixed` über den
     ganzen Schirm statt als Dropdown im klebenden Kopf: dort brach der
     backdrop-filter auf iOS beim Scrollen zusammen und der Inhalt schien durch.
     Fallback ohne backdrop-filter-Unterstützung: nahezu deckendes Papier. */
  nav.haupt {
    display: none; position: fixed; inset: 0; z-index: 60;
    background: rgba(251, 248, 244, .99);
    flex-direction: column; align-items: stretch; gap: 0;
    /* `safe center` für flache Schirme im Querformat: Reicht die Höhe nicht,
       schiebt gewöhnliches `center` die oberen Menüpunkte über die Kante
       hinaus, wo sie nicht mehr erreichbar sind. Ältere Browser behalten die
       erste Zeile. */
    justify-content: center;
    justify-content: safe center;
    padding: 104px 28px 48px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    nav.haupt {
      /* Deckkraft am 04.08. von .86 auf .965 angehoben: Das Milchglas war über
         der Galerie so hell, dass die Menüpunkte im Bildrauschen untergingen.
         Der Blur bleibt als Handschrift, die Lesbarkeit geht vor. */
      background: rgba(251, 248, 244, .965);
      -webkit-backdrop-filter: blur(30px) saturate(1.5);
      backdrop-filter: blur(30px) saturate(1.5);
    }
  }
  /* ⛔ FALLE (04.08. gefunden, Ursache aller drei Menü-Fehler): `backdrop-filter`
     macht ein Element zum Bezugsrahmen für seine `position: fixed`-Kinder. Die
     Kopfzeile trägt Milchglas, also war nicht mehr der Bildschirm der Bezug für
     `nav.haupt { inset: 0 }`, sondern die Kopfzeile selbst — das Vollbild-Menü
     schrumpfte auf 375 × 152 px zusammen: Hintergrund nur im Kopfstreifen, die
     oberen Menüpunkte oberhalb des sichtbaren Bereichs, die unteren als
     unsichtbare Klickfänger über dem Seiteninhalt. Auf der Startseite fiel es
     nicht auf, weil `body.cine-oben` den Filter dort ohnehin abschaltet.
     Solange das Menü offen ist, liegt es ohnehin über der Kopfzeile — der
     Filter dort wird also nicht gebraucht und muss weg.
     Wer hier später etwas ändert: KEIN `filter`, `transform`, `perspective`,
     `contain` oder `backdrop-filter` auf `header.haupt` oder `.wrap`, solange
     das Menü ein Kind der Kopfzeile ist. */
  body.menue-offen header.haupt {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  nav.haupt.offen { display: flex; animation: menue-auf .28s ease; }
  /* Markenzug und Burger bleiben über dem Overlay bedienbar */
  header.haupt .marke, .burger { position: relative; z-index: 70; }
  /* Solange das Menü offen ist: Seite nicht scrollen, Blasen zurücknehmen */
  body.menue-offen { overflow: hidden; }
  body.menue-offen .hero-blasen { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  /* Über dem hellen Overlay gelten wieder die dunklen Kopfzeilen-Farben —
     auch auf der Startseite, wo der Kopf sonst im Über-dem-Bild-Modus steht. */
  body.menue-offen header.haupt .marke { opacity: 1; }
  body.cine-oben.menue-offen .burger span { background: var(--tinte); }
  nav.haupt a {
    font-family: var(--serif); font-size: 1.35rem; letter-spacing: .01em;
    padding: 16px 2px; border-bottom: 1px solid rgba(229, 220, 208, .45);
  }
  nav.haupt a[aria-current="page"] { color: var(--terracotta); }
  nav.haupt.offen a { animation: menue-zeile .4s cubic-bezier(.22,.61,.36,1) backwards; }
  nav.haupt.offen a:nth-child(1) { animation-delay: .04s; }
  nav.haupt.offen a:nth-child(2) { animation-delay: .09s; }
  nav.haupt.offen a:nth-child(3) { animation-delay: .14s; }
  nav.haupt.offen a:nth-child(4) { animation-delay: .19s; }
  nav.haupt.offen a:nth-child(5) { animation-delay: .26s; }
  /* Im offenen Milchglas-Menü immer dunkle Schrift — auch wenn die Kopfzeile
     gerade im hellen Über-dem-Bild-Modus (cine-oben) steht. */
  /* Der Schatten aus Zeile 847 gilt nur über dem Aufmacherbild. Im offenen
     Milchglas-Menü steht dunkle Schrift auf hellem Grund — dort ließ er die
     Menüpunkte verschmiert aussehen (04.08. beim Nachprüfen gefunden). */
  body.cine-oben nav.haupt.offen a { color: var(--tinte); text-shadow: none; }
  body.cine-oben nav.haupt.offen a[aria-current="page"] { color: var(--terracotta); }
  body.cine-oben nav.haupt.offen a.knopf { color: #fff; }
  nav.haupt a:last-of-type { border-bottom: 0; }
  nav.haupt .knopf {
    margin-top: 18px; text-align: center;
    font-family: var(--sans); font-size: 1rem;
    padding: 15px 24px; border-radius: 12px;
  }
  /* Burger wird zum X */
  .burger span { transition: transform .25s ease, opacity .2s ease; }
  .burger.offen span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger.offen span:nth-child(2) { opacity: 0; }
  .burger.offen span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .burger { display: block; order: 3; }
  /* Kontakt-Pille am Handy: nur Symbol, zwischen Logo und Burger */
  .kontakt-blasen { order: 2; margin-left: auto; margin-right: 4px; }
  .blasen-knopf { padding: 10px 12px; }
  .blasen-knopf > span { display: none; }
  header.haupt .wrap { position: relative; }
  .topbar { font-size: .8rem; }
  .topbar .wrap { gap: 6px 18px; }
  .feld-paar { grid-template-columns: 1fr; }
  .zeit li { grid-template-columns: 66px 1fr; gap: 16px; }
  body { font-size: 16px; }
}

@keyframes menue-zeile { from { opacity: 0; transform: translateY(-10px); } }
@keyframes menue-auf { from { opacity: 0; } }

/* Sprungziele nicht unter die klebende Kopfzeile rutschen lassen */
section[id] { scroll-margin-top: 92px; }

/* Handy: Kontaktleiste auf eine Zeile statt drei gestapelte.
   Die Rufnummer bleibt als Text stehen — sie sofort sichtbar zu haben ist der
   ganze Zweck der Leiste. Mail, Anfahrt und Anfrage werden zu Symbolen, die
   Beschriftung bleibt für Vorleseprogramme erhalten. */
@media (max-width: 620px) {
  .topbar .wrap {
    flex-wrap: nowrap; gap: 10px; justify-content: center;
    padding: 3px 12px;
  }
  .topbar a {
    padding: 10px 16px; border-radius: 10px;
    min-height: 44px; box-sizing: border-box;
  }
  .topbar a:active { background: rgba(255,255,255,.14); }
  .topbar svg { width: 21px; height: 21px; opacity: .92; }
  .topbar a.nur-handy { display: inline-flex; }
  /* Alle Beschriftungen verschwinden optisch, bleiben aber für
     Vorleseprogramme und als aria-label erhalten. */
  .topbar a .beschriftung {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

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

/* ---------- Lichtbox: Blättern (03.08.) ---------- */
.lichtbox-pfeil {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 210;
  width: 54px; height: 54px; border-radius: 50%; padding: 0;
  background: rgba(251,248,244,.12); border: 1px solid rgba(251,248,244,.38);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #FBF8F4; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
/* `display: flex` oben schlägt das hidden-Attribut — ohne diese Zeile blieben
   die Pfeile stehen, obwohl das Skript sie ausblendet (nur ein Werk in der
   gewählten Rubrik). */
.lichtbox-pfeil[hidden] { display: none; }
.lichtbox-pfeil svg { width: 26px; height: 26px; }
.lichtbox-pfeil:hover { background: rgba(251,248,244,.28); transform: translateY(-50%) scale(1.08); }
.lichtbox-pfeil.zurueck { left: 18px; }
.lichtbox-pfeil.weiter { right: 18px; }
@media (max-width: 620px) {
  .lichtbox-pfeil { width: 44px; height: 44px; }
  .lichtbox-pfeil.zurueck { left: 8px; }
  .lichtbox-pfeil.weiter { right: 8px; }
  .lichtbox-zu { width: 44px; height: 44px; font-size: 1.6rem; right: 8px; }
}

/* Fliegender Markenzug über dem dunklen Aufmacher: Unterzeile hell */
body.cine-oben .marke-flug span { color: rgba(251,248,244,.9); }

/* ---------- Besuchs-Sektion: Karte, Daten und Formular (03.08.) ----------
   Ersetzt die frühere schmale Kontaktbox auf der Startseite. Zwei Spalten:
   links Anfahrt und Daten, rechts das Formular — beides ohne Umweg über die
   Kontaktseite. Die Karte ist ein statisches Bild aus OpenStreetMap-Kacheln
   (lokal gespeichert, warm getönt): kein Nachladen bei Dritten, kein Consent
   nötig, und sie passt farblich zur Seite. */
.besuch-raster {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.5vw, 44px); align-items: start;
}
.besuch-spalte { min-width: 0; }

.karte-feld {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--linie); border-radius: 3px;
  box-shadow: var(--schatten);
  line-height: 0; text-decoration: none;
}
.karte-feld img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.karte-feld:hover img { transform: scale(1.04); }
.karte-marke {
  position: absolute; right: 12px; top: 12px;
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--sans); font-size: .8rem; line-height: 1; color: var(--tinte);
  background: rgba(251,248,244,.86);
  border: 1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(42,38,34,.16);
  transition: background .2s ease, transform .2s ease;
}
.karte-feld:hover .karte-marke { background: var(--terracotta); color: #fff; transform: translateY(-1px); }

.besuch-daten {
  margin-top: 20px; padding: 22px 24px;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 3px;
}
.besuch-daten .kontakt-zeile:last-of-type { border-bottom: 0; padding-bottom: 0; }

.formular-feld {
  padding: clamp(24px, 3vw, 34px);
  background: var(--papier); border: 1px solid var(--linie); border-radius: 3px;
  box-shadow: var(--schatten);
}
.formular-titel { font-size: 1.5rem; margin: 0 0 6px; }
.formular-feld .knopf { width: 100%; text-align: center; }
.klein { font-size: .85rem; color: var(--tinte-weich); }

@media (max-width: 860px) {
  .besuch-raster { grid-template-columns: 1fr; gap: 26px; }
}

/* Urheberzeile im Fuß */
.fuss-credit { display: inline-flex; align-items: center; gap: 5px; opacity: .75; transition: opacity .2s ease; }
.fuss-credit:hover { opacity: 1; }
.fuss-credit svg { width: 12px; height: 12px; color: var(--terracotta); }

/* ---------- Anfrage-Fenster (03.08.) ----------
   Öffnet sich über jedem „Nachricht schreiben“-Knopf, statt auf die
   Kontaktseite zu springen. Bleibt ohne Skript wirkungslos — die Verweise
   führen dann wie bisher zur Kontaktseite. */
.anfrage-fenster {
  position: fixed; inset: 0; z-index: 220;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(24, 20, 17, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fenster-auf .22s ease;
}
.anfrage-fenster[hidden] { display: none; }
@keyframes fenster-auf { from { opacity: 0; } }
.anfrage-blatt {
  position: relative; width: min(560px, 100%);
  display: flex; flex-direction: column;
  max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: clamp(20px, 3vw, 32px) clamp(26px, 4vw, 40px) clamp(26px, 4vw, 40px);
  background: var(--papier); border-radius: 4px;
  box-shadow: 0 30px 80px rgba(24, 20, 17, .38);
  animation: blatt-auf .34s cubic-bezier(.22,.61,.36,1);
}
@keyframes blatt-auf { from { opacity: 0; transform: translateY(16px) scale(.98); } }
/* Bleibt beim Scrollen im Fenster erreichbar — auf flachen Schirmen ist das
   Formular länger als das Blatt. */
.anfrage-zu {
  position: sticky; top: 0; align-self: flex-end; flex: none;
  margin: -6px -8px 0 0;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--papier); color: var(--tinte-weich);
  font-size: 1.9rem; line-height: 1; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.anfrage-zu:hover { background: var(--papier-warm); color: var(--tinte); }
.anfrage-blatt .knopf { width: 100%; text-align: center; }
body.fenster-offen { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .anfrage-fenster, .anfrage-blatt { animation: none; }
}

/* Zweiter Weg unter dem Formular: anrufen statt schreiben */
.anruf-knopf {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-top: 10px;
  font-size: .92rem;
}
.anruf-knopf svg { width: 16px; height: 16px; flex: none; }

/* ---------- Karte: Google-Karte hinter Einwilligung ----------
   Solange keine Zustimmung vorliegt, bleibt unsere eigene Bildkarte stehen
   (lädt nichts bei Dritten). Nach Zustimmung ersetzt die bewegliche
   Google-Karte sie an derselben Stelle. */
.karte-feld { position: relative; overflow: hidden; border: 1px solid var(--linie); border-radius: 3px; box-shadow: var(--schatten); }
.karte-rahmen { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }
.karte-vorschau { position: relative; display: block; line-height: 0; text-decoration: none; }
.karte-vorschau img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.karte-vorschau:hover img { transform: scale(1.04); }
/* Ist die Google-Karte freigegeben, verschwindet die Bildvorschau */
.karte-feld:has(iframe[src]) .karte-vorschau { display: none; }
/* Der Hinweiskasten des Cookie-Werkzeugs steht im selben Rahmen */
.karte-feld .cc-iframe-placeholder { border: 0; border-radius: 0; }

/* ---------- Mitgliedschaft und Presse ---------- */
.verbund-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.verbund-karte {
  background: rgba(251,248,244,.72); border: 1px solid var(--linie); border-radius: 3px;
  padding: 30px 32px; display: flex; flex-direction: column; gap: 16px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.verbund-karte:hover { border-color: #D6C4AE; box-shadow: 0 12px 30px rgba(42,38,34,.07); transform: translateY(-2px); }
.verbund-marke { display: flex; align-items: center; min-height: 66px; }
.verbund-marke img { width: 132px; height: auto; display: block; }
.verbund-wort {
  font-family: var(--serif); font-size: 2.1rem; letter-spacing: -.01em;
  color: var(--terracotta); line-height: 1;
}
.verbund-wort small {
  display: block; font-family: var(--sans); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinte-weich); margin-top: 7px; font-weight: 500;
}
.verbund-karte h3 { font-size: 1.12rem; margin: 0; }
.verbund-karte p { margin: 0; color: var(--tinte-weich); font-size: .94rem; line-height: 1.72; }
.verbund-karte .verbund-fuss { margin-top: auto; padding-top: 4px; }
.verbund-karte .verbund-fuss a { font-size: .93rem; font-weight: 500; }
.verbund-karte .verbund-fuss a svg {
  width: 13px; height: 13px; vertical-align: -1px; margin-left: 5px;
  transition: transform .25s ease;
}
.verbund-karte .verbund-fuss a:hover svg { transform: translate(2px,-2px); }
@media (max-width: 720px) {
  .verbund-raster { grid-template-columns: 1fr; gap: 16px; }
  .verbund-karte { padding: 26px 24px; }
}

/* ---------- Presseecho: Schiene mit Zeitungsberichten ----------
   Gewischt wird nativ (scroll-snap), die Pfeile blenden sich nur ein, wenn
   es in die jeweilige Richtung noch etwas zu sehen gibt. Berichte mit
   Online-Original verlinken hinaus, die übrigen öffnen das Pressefenster. */
.presse-schiene { position: relative; margin-top: 34px; }
.presse-lauf {
  list-style: none; margin: 0; padding: 4px 4px 22px;
  /* Feste Spurbreite, damit die Schiene überläuft statt die Karten zu quetschen */
  display: grid; grid-auto-flow: column; grid-auto-columns: 340px;
  gap: 22px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: 4px;
  scrollbar-width: thin; scrollbar-color: #D6C4AE transparent;
}
.presse-lauf::-webkit-scrollbar { height: 5px; }
.presse-lauf::-webkit-scrollbar-track { background: var(--linie); border-radius: 3px; }
.presse-lauf::-webkit-scrollbar-thumb { background: #D6C4AE; border-radius: 3px; }

.presse-karte {
  scroll-snap-align: start;
  background: rgba(251,248,244,.72); border: 1px solid var(--linie); border-radius: 3px;
  padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.presse-karte:hover { border-color: #D6C4AE; box-shadow: 0 12px 30px rgba(42,38,34,.07); transform: translateY(-2px); }
.presse-blatt {
  font-family: var(--serif); font-size: 1.32rem; color: var(--terracotta);
  line-height: 1.1; letter-spacing: -.01em;
}
.presse-datum {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinte-weich); font-weight: 500; margin-top: -6px;
}
.presse-karte h3 { font-size: 1.12rem; margin: 0; }
.presse-karte blockquote {
  margin: 0; padding-left: 15px; border-left: 2px solid var(--linie);
  color: var(--tinte-weich); font-size: .94rem; line-height: 1.72;
  font-family: var(--serif); font-style: italic; font-size: 1.04rem;
}
/* Autor und Aktion stehen untereinander — nebeneinander bricht die Zeile je
   nach Namenslänge unterschiedlich um und die Karten sehen ungleich aus. */
.presse-fuss {
  margin-top: auto; padding-top: 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.presse-autor { font-size: .84rem; color: var(--tinte-weich); }
.presse-tuer {
  font-size: .93rem; font-weight: 500; color: var(--terracotta);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap;
}
.presse-tuer:hover { color: var(--terracotta-h); }
.presse-tuer svg {
  width: 13px; height: 13px; vertical-align: -1px; margin-left: 5px;
  transition: transform .25s ease;
}
.presse-tuer:hover svg { transform: translate(2px,-2px); }
/* Das Fenster-Symbol der Modal-Knöpfe soll nicht wegwandern wie der Außenpfeil */
.presse-tuer[data-presse-bild]:hover svg { transform: none; opacity: .7; }

.presse-pfeil {
  position: absolute; top: calc(50% - 11px); transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--papier); border: 1px solid var(--linie); color: var(--tinte);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(42,38,34,.1);
  transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.presse-pfeil:hover { border-color: #D6C4AE; box-shadow: 0 8px 22px rgba(42,38,34,.14); }
.presse-pfeil svg { width: 19px; height: 19px; }
.presse-pfeil.zurueck { left: -20px; }
.presse-pfeil.weiter { right: -20px; }
.presse-pfeil[hidden] { display: none; }

/* ---------- Pressefenster: Zeitungsseite groß ---------- */
.pressefenster {
  position: fixed; inset: 0; z-index: 120; padding: 4vh 20px;
  background: rgba(28,25,22,.86); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.pressefenster[hidden] { display: none; }
.pressefenster figure {
  margin: 0; max-width: 1100px; max-height: 92vh;
  display: flex; flex-direction: column; gap: 0;
}
.pressefenster img {
  max-width: 100%; max-height: calc(92vh - 76px); width: auto; object-fit: contain;
  background: var(--papier); border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.pressefenster figcaption {
  color: #E9E2D8; font-size: .82rem; line-height: 1.6; padding: 14px 2px 0; max-width: 70ch;
}
.pressefenster figcaption b { display: block; font-weight: 500; font-size: .95rem; margin-bottom: 3px; color: #FBF8F4; }
.pressefenster-zu {
  position: absolute; top: 18px; right: 20px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.6rem; line-height: 1;
  background: rgba(251,248,244,.12); border: 1px solid rgba(251,248,244,.28); color: #FBF8F4;
  transition: background .25s ease;
}
.pressefenster-zu:hover { background: rgba(251,248,244,.24); }

@media (max-width: 900px) {
  .presse-pfeil { display: none; }
}
@media (max-width: 720px) {
  .presse-lauf { grid-auto-columns: 84vw; gap: 14px; }
  .presse-karte { padding: 24px 22px 20px; }
  .pressefenster { padding: 0; }
  .pressefenster figure { max-height: 100vh; width: 100%; }
  .pressefenster img { max-height: 74vh; }
  .pressefenster figcaption { padding: 14px 20px 20px; }
}