/* ==========================================================================
   guelcin.y – Stylesheet
   Mobile first. Aufbau:
   01 Schriften · 02 Tokens · 03 Basis · 04 Typografie · 05 Buttons
   06 Kopf · 07 Kurven & Linien · 08 Hero · 09 Meine Welt · 10 Social
   11 Workshop-Teaser · 12 About · 13 Fuß · (14 Abschnittsleiste entfernt, 18.10.2026)
   15 Workshops-Seiten · 15b UGC für Marken · 16 Formulare · 17 Rechtstexte & Status · 18 Bewegung
   ========================================================================== */

/* 01 SCHRIFTEN – lokal gehostet, kein Abruf bei Google ===================== */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/fonts/bodoni-moda-latin-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-latin-var.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ephesis';
  src: url('/fonts/ephesis-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 02 TOKENS ================================================================ */
:root {
  --bg: #faf7f2;
  --beige: #f2e9e1;
  --creme: #fffcf8;
  --rosa-zart: #fae2e7;
  --rosa: #f7d0d9;
  --rosa-hover: #f2bcca;
  --rosa-dunkel: #a9707f;
  --ink: #1d191c;
  --ink-2: #6a6468;
  --gold: #b88958;
  --gold-dunkel: #8f6a43;
  --nacht: #211c24;
  --nacht-2: #2c2530;
  --label: #8e5a6a;
  --hell: #f6efe7;
  --hell-2: rgba(246, 239, 231, 0.74);
  --linie: rgba(29, 25, 28, 0.12);
  --fehler: #a3263f;
  --ok: #3f6b4a;

  --serif: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Überschriften seit 18.10.2026 in DM Sans statt Bodoni (Kundenwunsch: ohne Schnörkel, clean).
     Bodoni Moda bleibt nur im Logo. DM Sans wählt die optische Größe selbst (opsz 9–40). */
  --display: var(--sans);
  --hand: 'Ephesis', 'Snell Roundhand', 'Apple Chancery', cursive;
  /* Logo im Stil der Vogue (Wunsch 02.11.2026): Bodoni Moda in der größten optischen Größe –
     feine Haarstriche, starker Kontrast wie bei den Modemagazinen */
  --serif-opsz: 'opsz' 96;

  --wrap: 1360px;
  --gutter: clamp(20px, 6vw, 96px);
  --kopf-h: 64px;
  --kopf-h-klein: 60px;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 1024px) {
  :root {
    --kopf-h: 84px;
    --kopf-h-klein: 66px;
  }
}

/* 03 BASIS ================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-h-klein) + 12px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,
svg,
picture {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
}
p {
  margin: 0 0 1em;
}
ul[role='list'],
ol[role='list'] {
  list-style: none;
  margin: 0;
  padding: 0;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
.nowrap {
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--creme);
  border-radius: 999px;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
mark.todo {
  background: #fff1a8;
  color: #5b4500;
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font: 600 0.85em/1.4 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

/* 04 TYPOGRAFIE ============================================================ */
.label {
  margin: 0 0 1rem;
  font: 600 0.72rem/1.3 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--label);
}
.label--hell {
  color: #f0bccb;
}
.h1,
.h2,
.h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.h1 {
  font-size: clamp(2.6rem, 1.5rem + 4.2vw, 4.5rem);
  line-height: 0.98;
}
.h2 {
  font-size: clamp(2.25rem, 1.55rem + 2.2vw, 3.375rem);
  line-height: 1;
}
.h2--klein {
  font-size: clamp(2rem, 1.45rem + 1.6vw, 2.75rem);
}
.h3 {
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.8rem);
  line-height: 1.12;
}
.notiz {
  margin: 0;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 2.05rem;
  line-height: 0.95;
  color: var(--gold);
  transform: rotate(-9deg);
  pointer-events: none;
}
.herz {
  display: inline-block;
  width: 0.58em;
  height: 0.54em;
  color: var(--gold);
  flex: none;
}
.herz--titel {
  width: 0.52em;
  height: 0.5em;
  margin-left: 0.14em;
  vertical-align: -0.02em;
  transform: rotate(-5deg);
  stroke-width: 1.2;
}
.herz--h2 {
  width: 0.5em;
  height: 0.48em;
  margin-left: 0.16em;
  vertical-align: 0.02em;
  transform: rotate(-6deg);
}
.herz--klein {
  width: 14px;
  height: 13px;
  vertical-align: -1px;
}
.herz--notiz {
  width: 0.62em;
  height: 0.6em;
  vertical-align: -0.04em;
}
.herz path {
  vector-effect: non-scaling-stroke;
}

/* 05 BUTTONS =============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 0.95rem/1 var(--sans);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.icon {
  width: 20px;
  height: 20px;
  flex: none;
}
.icon--pfeil {
  width: 18px;
  height: 18px;
  transition: transform 0.35s var(--ease);
}
.btn:hover .icon--pfeil,
.btn:focus-visible .icon--pfeil {
  transform: translateX(4px);
}
.btn--rosa {
  background: var(--rosa);
  color: var(--ink);
}
.btn--rosa:hover {
  background: var(--rosa-hover);
}
.btn--dunkel {
  background: var(--ink);
  color: var(--creme);
}
.btn--dunkel:hover {
  background: #000;
}
.btn--hell {
  background: var(--creme);
  color: var(--ink);
}
.btn--hell:hover {
  background: #fff;
}
.btn--linie {
  border-color: rgba(29, 25, 28, 0.22);
  color: var(--ink);
  background: transparent;
}
.btn--linie:hover {
  border-color: var(--ink);
}
.btn--breit {
  width: 100%;
}
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--rosa);
  color: var(--ink);
  font: 600 0.875rem/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease);
}
.pill:hover {
  background: var(--rosa-hover);
}
.pill--linie {
  background: transparent;
  border: 1px solid rgba(29, 25, 28, 0.22);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pill--linie:hover,
.pill--linie[aria-current] {
  background: rgba(255, 252, 248, 0.6);
  border-color: var(--ink);
}
.textlink {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(184, 137, 88, 0.6);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s;
}
.textlink:hover {
  text-decoration-color: var(--gold);
}

/* 06 KOPF ================================================================== */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--kopf-h);
  background: rgba(250, 247, 242, 0.9);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  transition: height 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.kopf--overlay {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.kopf.ist-gescrollt {
  height: var(--kopf-h-klein);
  background: rgba(250, 247, 242, 0.84);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(29, 25, 28, 0.06);
}
.kopf__innen {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-size: 1.62rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}
/* Wortmarke als SVG (seit 03.11.2026 DM Sans wie die Hero-Zeile, weit gesperrt): Breite aus dem Seitenverhältnis */
.logo__wort {
  display: block;
  /* Versalhöhe gut 0,5 em plus der schmale Rand der Grafik (tools/logo-wort.py) */
  height: 0.6em;
  width: auto;
  flex: none;
  overflow: visible;
}
/* schmale Handys: die gesperrte Marke ist breiter als die alte, sonst klebt sie an „Kontakt“ */
@media (max-width: 429px) {
  .logo__wort {
    height: 0.53em;
  }
}
.logo__herz {
  width: 0.5em;
  height: 0.47em;
  transform: translateY(-0.02em) rotate(-8deg);
}
.logo--hell {
  color: var(--hell);
}
.kopf__aktionen {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kopf__icon {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.kopf__icon:hover {
  background: rgba(247, 208, 217, 0.55);
}
.kopf__icon .icon {
  width: 21px;
  height: 21px;
}
.kopf__kontakt {
  min-height: 42px;
  /* heller Milchglas-Grund: lesbar auch über dem Hero-Foto (Haare) */
  background: rgba(255, 252, 248, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.kopf__kontakt:hover,
.kopf__kontakt[aria-current] {
  background: var(--creme);
}
.kopf__folgen {
  min-height: 42px;
  padding: 0 15px 0 13px;
}
.kopf__folgen-ig {
  width: 17px;
  height: 17px;
}

/* Menü-Knopf (unter 1024 px): zwei Striche, offen ein X */
.kopf__menu {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(29, 25, 28, 0.22);
  border-radius: 50%;
  background: rgba(255, 252, 248, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.kopf__menu:hover {
  border-color: var(--ink);
}
.kopf__menu-striche {
  position: relative;
  width: 18px;
  height: 10px;
}
.kopf__menu-striche::before,
.kopf__menu-striche::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.kopf__menu-striche::before {
  top: 0;
}
.kopf__menu-striche::after {
  top: 8.4px;
}
.menu-offen .kopf__menu-striche::before {
  top: 4.2px;
  transform: rotate(45deg);
}
.menu-offen .kopf__menu-striche::after {
  top: 4.2px;
  transform: rotate(-45deg);
}

/* Hauptmenü unter 1024 px: Dropdown, das unter dem Kopf herunterrollt – große
   Serifen-Links, darunter der nächste Termin. Liegt im Kopf hinter Logo und Knöpfen
   (z-index -1), damit die oben bleiben. Die Seite dahinter wird abgedunkelt. */
.hauptnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  max-height: 100dvh;
  padding: calc(var(--kopf-h) + 4px) var(--gutter) 22px;
  border-radius: 0 0 26px 26px;
  background:
    radial-gradient(70% 40% at 0% 0%, rgba(244, 196, 208, 0.4), rgba(244, 196, 208, 0) 70%),
    var(--bg);
  box-shadow: 0 34px 60px -30px rgba(45, 30, 55, 0.5);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform 0.38s var(--ease), visibility 0s linear 0.38s;
}
.menu-offen .hauptnav {
  visibility: visible;
  transform: none;
  transition: transform 0.38s var(--ease);
}
/* offenes Menü: Kopf ohne Unschärfe (sonst hängt das feste Menü am Kopf statt am Bildschirm) */
.menu-offen .kopf {
  background: var(--bg);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Abdunklung der Seite unter dem Dropdown; Tippen darauf schließt das Menü (site.js) */
@media (max-width: 1023px) {
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(29, 25, 28, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }
  .menu-offen body::after {
    opacity: 1;
    pointer-events: auto;
  }
}
html.menu-offen,
html.menu-offen body {
  overflow: hidden;
}
.hauptnav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie);
}
.hauptnav__liste li {
  border-bottom: 1px solid var(--linie);
}
.hauptnav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Tippfläche bleibt groß, die Schrift ist ruhiger (Gülçins Wunsch 22.10.2026, Vorbild yulesy.de) */
  min-height: 50px;
  padding: 10px 2px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.hauptnav__link[aria-current] {
  color: var(--label);
}
.hauptnav__extra {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
/* Termin schmaler (Wunsch 02.11.2026): Datum und Uhrzeit enger, kleinere Knöpfe */
.hauptnav__termin .label {
  margin-bottom: 6px;
}
.hauptnav__datum {
  margin: 0;
  font: 500 1rem/1.25 var(--display);
}
.hauptnav__info {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 0.86rem;
}
.hauptnav__termin .btn {
  margin-top: 12px;
}
.hauptnav__extra .btn {
  min-height: 44px;
  font-size: 0.9rem;
}
.hauptnav__extra .btn .icon:not(.icon--pfeil) {
  width: 19px;
  height: 19px;
}
@media (prefers-reduced-motion: reduce) {
  .hauptnav,
  .menu-offen .hauptnav,
  body::after,
  .kopf__menu-striche::before,
  .kopf__menu-striche::after {
    transition: none;
  }
}

/* Handy: „Folge mir“ als runder Instagram-Knopf neben Kontakt und Menü */
@media (max-width: 767px) {
  .kopf__folgen > span,
  .kopf__folgen .herz {
    display: none;
  }
  .kopf__folgen {
    width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }
  .kopf__folgen-ig {
    width: 19px;
    height: 19px;
  }
}
@media (max-width: 389px) {
  .logo {
    font-size: 1.5rem;
    gap: 0.16em;
  }
  .logo__herz {
    width: 0.46em;
    height: 0.43em;
  }
  .kopf__kontakt {
    padding: 0 11px;
  }
}
/* ganz schmal: Instagram steckt im Menü, oben nur Kontakt und Menü */
@media (max-width: 359px) {
  .logo {
    font-size: 1.42rem;
  }
  .kopf__folgen {
    display: none;
  }
}
@media (min-width: 768px) {
  .kopf__icon {
    display: grid;
  }
  /* wie mobil: Instagram-Zeichen in der Pille statt eigenem Icon daneben */
  .kopf__folgen {
    padding: 0 20px 0 17px;
    justify-content: center;
  }
}

/* Ab 1024 px: Navileiste in der Kopfmitte, Menü-Knopf weg */
@media (min-width: 1024px) {
  .logo {
    font-size: 2rem;
  }
  .kopf__innen {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .logo {
    justify-self: start;
  }
  .kopf__aktionen {
    justify-self: end;
  }
  .kopf__menu,
  .hauptnav__nur-mobil,
  .hauptnav__extra {
    display: none;
  }
  .hauptnav {
    position: static;
    z-index: auto;
    display: block;
    max-height: none;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .hauptnav__liste {
    display: flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(29, 25, 28, 0.1);
    border-radius: 999px;
    /* Milchglas wie die Kontakt-Pille: lesbar auch über dem Hero-Foto */
    background: rgba(255, 252, 248, 0.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .hauptnav__liste li {
    border: 0;
  }
  .hauptnav__link {
    align-items: center;
    min-height: 38px;
    padding: 0 17px;
    border-radius: 999px;
    font: 500 0.9rem/1 var(--sans);
    letter-spacing: 0;
    white-space: nowrap;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
  }
  /* aktive Seite im hellen Rosa wie die Knöpfe mobil (Gülçin 06.11.2026: „ganz helles Rosa“, vorher Altrosa),
     Hover noch zarter */
  .hauptnav__link:hover {
    background: var(--rosa-zart);
  }
  .hauptnav__link[aria-current] {
    background: var(--rosa);
    color: var(--ink);
  }
}

/* 07 KURVEN & LINIEN ======================================================= */
.kurve {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(40px, 7vw, 104px);
  pointer-events: none;
}
.kurve svg {
  width: 100%;
  height: 100%;
}
.kurve path {
  fill: currentColor;
}
.kurve__d {
  display: none !important;
}
@media (min-width: 768px) {
  .kurve__d {
    display: block !important;
  }
  .kurve__m {
    display: none !important;
  }
}
.linie {
  position: absolute;
  color: var(--gold);
  opacity: 0.55;
  pointer-events: none;
  display: none;
}
@media (min-width: 1200px) {
  .linie {
    display: block;
  }
}

/* 08 HERO ================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--bg);
}
.hero__bild {
  position: relative;
  height: min(122vw, 600px);
  /* Kleine Handys: Bild kürzer, damit Headline und Text in den ersten Bildschirm passen */
  height: min(122vw, 600px, 64svh);
}
.hero__bild picture,
.hero__bild img {
  width: 100%;
  height: 100%;
}
.hero__bild img {
  object-fit: cover;
  object-position: 50% 30%;
}
/* Mobil: Bild läuft weich in den Creme-Grund aus, darauf liegt der Text.
   Unten 2 px über die Bildkante hinaus: Die Bildhöhe (svh) ist krumm, Safari
   rundet Foto und Verlauf sonst verschieden und eine Pixelreihe Foto bleibt als
   Haarlinie unter „Spots mit mir“ stehen. */
.hero__bild::after {
  content: '';
  position: absolute;
  inset: 0 0 -2px;
  background:
    linear-gradient(180deg, rgba(250, 247, 242, 0) 60%, rgba(250, 247, 242, 0.84) 84%, var(--bg) 98%),
    /* oben heller, damit das Logo auf dem dunklen Fensterrahmen lesbar bleibt */
    linear-gradient(180deg, rgba(250, 247, 242, 0.86) 0%, rgba(250, 247, 242, 0.62) 12%, rgba(250, 247, 242, 0) 24%);
}
.hero__schleier {
  display: none;
}
.hero__inhalt {
  position: relative;
  z-index: 2;
  margin-top: -84px;
  padding-bottom: calc(clamp(40px, 7vw, 104px) + 40px);
}
.hero__titel {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.7rem, 1.4rem + 4.4vw, 4.3rem);
  line-height: 1;
  letter-spacing: -0.022em;
  margin: 0 0 1.1rem;
  animation: hero-in 0.45s var(--ease) both;
}
/* Feinschliff statt Schnörkel: fein gesetzt, die letzte Zeile trägt das Gewicht */
.hero__akzent {
  font-weight: 500;
}
.hero__titel .herz--titel path {
  stroke-width: 1.15;
}
.hero__lead {
  max-width: 23rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #4e474c;
  margin-bottom: 0;
  /* gleich lange Zeilen statt „Spots“ allein in Zeile zwei */
  text-wrap: balance;
}
/* Kontakt direkt unter dem Hero-Text (Wunsch 18.10.2026), Instagram steht oben in „Folge mir“ */
.hero__cta {
  margin-top: 1.6rem;
}
@media (max-width: 374px) {
  .label {
    letter-spacing: 0.2em;
  }
}

@keyframes hero-in {
  from {
    opacity: 0.7;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 560px) and (max-width: 1023px) {
  .hero__bild {
    height: min(86vw, 720px);
  }
  .hero__bild img {
    object-position: 50% 28%;
  }
  .hero__inhalt {
    margin-top: -104px;
  }
  .hero__text {
    max-width: 560px;
  }
}

/* Ab 1024 px: vollflächiges Porträt, Text links auf der hellen Wand */
@media (min-width: 1024px) {
  .hero {
    min-height: clamp(600px, 40vw + 180px, 820px);
    display: flex;
    flex-direction: column;
  }
  .hero__bild {
    position: absolute;
    inset: 0;
    height: auto;
    z-index: -2;
  }
  .hero__bild img {
    object-position: 100% 45%;
  }
  .hero__bild::after {
    display: none;
  }
  .hero__schleier {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Aufhellung nur unter der Textspalte – das Gesicht bleibt frei */
    background:
      linear-gradient(90deg, rgba(250, 247, 242, 0.9) 0%, rgba(250, 247, 242, 0.72) 30%, rgba(250, 247, 242, 0) 48%),
      linear-gradient(180deg, rgba(250, 247, 242, 0.42) 0%, rgba(250, 247, 242, 0) 18%);
  }
  .hero__inhalt {
    flex: 1;
    display: flex;
    align-items: center;
    margin-top: 0;
    padding-top: var(--kopf-h);
    padding-bottom: clamp(70px, 9vw, 130px);
  }
  .hero__lead {
    font-size: 1.06rem;
    max-width: 22.5rem;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .hero__titel {
    font-size: 3.4rem;
  }
  .hero__text {
    width: 400px;
  }
}

@media (min-width: 1200px) {
  .hero__text {
    width: 470px;
  }
  .hero__titel {
    font-size: clamp(3.6rem, 1.6rem + 2.6vw, 4.3rem);
  }
}

.kurve--hero {
  bottom: -1px;
  z-index: 3;
  color: var(--creme);
}

/* 09 MEINE WELT ============================================================ */
.welt {
  position: relative;
  background: var(--creme);
  padding: 20px 0 56px;
}
.welt__grid {
  display: grid;
  gap: 28px;
}
.welt__text .h2 {
  margin-bottom: 0.9rem;
  font-size: clamp(2.25rem, 1.6rem + 1.7vw, 3rem);
}
.welt__lead {
  color: var(--ink-2);
  font-size: 1.02rem;
  max-width: 21rem;
  margin: 0;
}
@media (min-width: 1024px) {
  .welt {
    padding: 6px 0 84px;
  }
}

/* Reels in „Meine Welt“ (Wunsch 02.11.2026): mobil zum Wischen, ab 1024 px in einer Reihe */
.welt ul.arbeiten--welt {
  display: flex;
  gap: 12px;
  margin: 26px calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter) 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.arbeiten--welt::-webkit-scrollbar {
  display: none;
}
.arbeiten--welt > li {
  flex: 0 0 44%;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .arbeiten--welt > li {
    flex-basis: 30%;
  }
}
@media (min-width: 1024px) {
  .welt ul.arbeiten--welt {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 236px));
    gap: 18px;
    margin: 34px 0 0;
    padding: 0;
    overflow: visible;
  }
}

/* Marken am Ende von „Meine Welt“ und auf /ugc – nur mit Freigabe (site.ts → partners) */
.marken {
  display: grid;
  gap: 16px;
  margin-top: 34px;
}
.marken__titel {
  margin: 0;
}
.marken__todo {
  margin: 0;
}
/* Laufband: zwei gleiche Reihen nebeneinander, die Spur wandert um eine Reihe
   nach links und beginnt nahtlos von vorn. Ränder laufen weich aus. */
.marken__band {
  overflow: hidden;
  margin-inline: calc(-1 * var(--gutter));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marken__spur {
  display: flex;
  width: max-content;
  /* ca. 30 px pro Sekunde – bei mehr Logos die Dauer mitverlängern */
  animation: marken-lauf 58s linear infinite;
}
@keyframes marken-lauf {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* wenige Logos (Startseite seit 03.11.2026): vier gleiche Reihen, die Spur wandert um eine Reihe */
.marken__spur--kurz {
  animation: marken-lauf-kurz 26s linear infinite;
}
@keyframes marken-lauf-kurz {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}
.marken__liste {
  list-style: none;
  margin: 0;
  display: flex;
  flex: none;
  align-items: center;
  gap: 48px;
  /* mobil etwas kleiner; die Logogröße selbst kommt aus width/height (optisch ausgeglichen) */
  zoom: 0.84;
}
/* Abstand rechts = Abstand zwischen den Logos, sonst klebt die Naht zwischen den Reihen.
   Doppelte Klasse, weil die allgemeine Listen-Rücksetzung ul[role=list] sonst gewinnt. */
.marken__spur .marken__liste {
  padding: 6px 48px 6px 0;
}
.marken__liste li {
  flex: none;
}
.marken__liste img {
  display: block;
  max-width: none;
  height: auto;
  object-fit: contain;
}
/* Wenige Logos: stehende Reihe statt Laufband (site.ts → partners, referenzen.ts) */
.marken__band--fest {
  margin-inline: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.marken__band--fest .marken__liste {
  flex-wrap: wrap;
  gap: 18px 44px;
  padding: 6px 0;
  zoom: 1.15;
}
/* mobil: ruhiges Zweierraster statt versetzter Umbrüche (5 Logos seit 03.11.2026) */
@media (max-width: 1023px) {
  .marken__band--fest .marken__liste {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
    align-items: center;
    gap: 22px 40px;
  }
}
/* „Bewegung reduzieren“: kein Laufband, eine stehende Reihe, die umbricht */
@media (prefers-reduced-motion: reduce) {
  .marken__band {
    margin-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marken__spur {
    animation: none;
    width: auto;
  }
  .marken__spur .marken__liste {
    flex-wrap: wrap;
    flex: 1;
    gap: 18px 36px;
    padding: 0;
  }
  .marken__liste[aria-hidden] {
    display: none;
  }
}
/* gut sichtbar, aber nicht wuchtig: kompakte rosa Pille wie „Folge mir“ */
.marken__cta {
  justify-self: start;
  min-height: 46px;
  padding: 0 22px;
  font-size: 0.92rem;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .marken {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px 40px;
    margin-top: 40px;
  }
  .marken--ohne-knopf {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .marken__band {
    margin-inline: 0;
  }
  .marken__liste {
    zoom: 1;
  }
}

/* 10 SOCIAL ================================================================ */
.social {
  position: relative;
  background: var(--creme);
  padding: 8px 0 calc(clamp(40px, 7vw, 104px) + 64px);
  overflow: clip;
}
.social__grid {
  position: relative;
  display: grid;
  gap: 22px;
}
.social__text p {
  margin: 0.7rem 0 0;
  color: var(--ink-2);
  max-width: 26rem;
}
.social__links {
  display: grid;
  gap: 10px;
}
.social__link {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 0 24px 0 20px;
  border: 1px solid rgba(29, 25, 28, 0.16);
  border-radius: 999px;
  background: var(--creme);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.social__icon .icon {
  width: 22px;
  height: 22px;
  transition: transform 0.4s var(--ease);
}
.social__netz {
  font: 500 1.4rem/1 var(--display);
  letter-spacing: -0.01em;
}
.social__handle {
  color: var(--ink-2);
  font-size: 0.94rem;
}
.social__link:hover {
  background: rgba(250, 226, 231, 0.6);
  border-color: var(--rosa);
}
.social__link:hover .social__icon .icon {
  transform: scale(1.08);
}
.social__link:hover .icon--pfeil {
  transform: translateX(4px);
}
@media (min-width: 768px) {
  .social__grid {
    grid-template-columns: 1fr minmax(320px, 440px);
    align-items: center;
    gap: 48px;
  }
}
@media (min-width: 1024px) {
  .social {
    padding-top: 0;
  }
  .linie--social {
    left: 40%;
    top: 4px;
    width: 22%;
    height: 110px;
  }
}

/* 11 WORKSHOP-TEASER ======================================================= */
.ws {
  --ws-wrap: 1180px;
  --welle: clamp(40px, 7vw, 104px);
  position: relative;
  z-index: 1;
  background: var(--nacht);
  color: var(--hell);
  isolation: isolate;
  /* reicht bis an die Welle hoch, so beginnt das Bild genau am Übergang */
  margin-top: calc(-1 * var(--welle));
  /* Ober- und Unterkante als Welle ausgeschnitten (03.11.2026) statt heller Kappen: darüber scheint der
     Social-Bereich durch, darunter das About-Foto – keine Kante, an der Dunkles als Haarlinie durchblitzt.
     Die mittlere Fläche überlappt die Wellen um je 1 px. */
  -webkit-mask:
    url('/img/welle/ws-oben-m.svg') top / 100% var(--welle) no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--welle) + 2px) no-repeat,
    url('/img/welle/ws-unten-m.svg') bottom / 100% var(--welle) no-repeat;
  mask:
    url('/img/welle/ws-oben-m.svg') top / 100% var(--welle) no-repeat,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--welle) + 2px) no-repeat,
    url('/img/welle/ws-unten-m.svg') bottom / 100% var(--welle) no-repeat;
}
@media (min-width: 768px) {
  .ws {
    -webkit-mask-image: url('/img/welle/ws-oben-d.svg'), linear-gradient(#000 0 0), url('/img/welle/ws-unten-d.svg');
    mask-image: url('/img/welle/ws-oben-d.svg'), linear-gradient(#000 0 0), url('/img/welle/ws-unten-d.svg');
  }
}
.ws__buehne {
  position: relative;
}
.ws__bild {
  position: relative;
  /* Bühnenbild (tools/tanzen-breit.mjs): Gülçin ganz von Kopf bis Heels, ringsum weich ins Dunkel */
  aspect-ratio: 4 / 5;
}
.ws__bild picture,
.ws__bild img {
  width: 100%;
  height: 100%;
}
.ws__bild img {
  object-fit: cover;
  /* Gülçin mittig im Ausschnitt (sie steht im Bühnenbild bei 51 % der Breite) */
  object-position: 52% 50%;
}
/* Handy/Tablet: unten länger ins Dunkel, damit der hochgezogene Text auf dem Boden gut lesbar ist */
.ws__bild::after {
  content: '';
  position: absolute;
  inset: 0 0 -1px;
  background: linear-gradient(180deg, rgba(33, 28, 36, 0) 74%, rgba(33, 28, 36, 0.75) 90%, var(--nacht) 100%);
}
.ws__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 32px;
  /* Text rutscht ins Bild auf den dunklen Boden unter den Heels (Wunsch 22.10.2026) */
  margin-top: -96px;
  padding-bottom: calc(clamp(40px, 7vw, 104px) + 48px);
}
.ws__titel {
  color: var(--hell);
  font-size: clamp(2.6rem, 1.6rem + 3vw, 3.75rem);
  line-height: 0.98;
}
.ws__claim {
  margin: 0.55rem 0 1.1rem;
  font: 400 1.25rem/1.2 var(--display);
  letter-spacing: 0.12em;
  color: #f6d5de;
}
.ws__lead {
  color: var(--hell-2);
  max-width: 25rem;
  margin: 0;
}
/* ohne Claim-Zeile (Gülçins Feedback) direkt unter der Überschrift */
.ws__titel + .ws__lead {
  margin-top: 1rem;
}
.ws-karte {
  background: var(--creme);
  color: var(--ink);
  border-radius: 16px;
  padding: 26px 24px 24px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.ws-karte__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font: 600 0.7rem/1.2 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
}
.ws-karte__label .icon {
  width: 18px;
  height: 18px;
  color: var(--ink);
}
.ws-karte__datum {
  font: 500 1.6rem/1.1 var(--display);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.ws-karte__fakten {
  display: grid;
  gap: 9px;
  margin-bottom: 22px !important;
  font-size: 0.95rem;
}
.ws-karte__fakten li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ws-karte__fakten .icon {
  width: 18px;
  height: 18px;
  color: var(--ink-2);
}
.ws-karte__fakten .ist-voll {
  color: var(--fehler);
  font-weight: 600;
}
.ws-karte__leer {
  font: 500 1.65rem/1.1 var(--display);
  margin: 0 0 8px;
}
.ws-karte__leer .herz {
  width: 20px;
  height: 18px;
  margin-left: 6px;
}
.ws-karte__info {
  color: var(--ink-2);
  font-size: 0.94rem;
  margin: 0 0 22px;
}
.ws > .kurve--ws-unten {
  bottom: -1px;
  z-index: 3;
  color: var(--bg);
}
@media (min-width: 640px) and (max-width: 1199px) {
  .ws__grid {
    grid-template-columns: 1fr minmax(300px, 340px);
    align-items: end;
  }
}
/* Tablet: die ganze Bühne in voller Breite */
@media (min-width: 560px) and (max-width: 1199px) {
  .ws__bild {
    aspect-ratio: 3 / 2;
  }
  .ws__bild img {
    object-position: 60% 50%;
  }
}
/* Ab 1200 px: Tänzerin links auf eigener Bühne, Text und Karte rechts daneben */
@media (min-width: 1200px) {
  .ws__buehne {
    min-height: calc(clamp(580px, 40vw, 720px) + clamp(40px, 7vw, 104px));
    display: flex;
    align-items: center;
  }
  /* Bühnenbild (tools/tanzen-breit.mjs) über die ganze Höhe, Breite aus dem Seitenverhältnis:
     reicht vom linken Rand bis unter den Text, der Boden liegt unter der hellen Welle,
     die Heels bleiben darüber. Rechts lang und weich ins Dunkel. */
  .ws__bild {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* reicht etwa 140 px unter den Text (Textspalte beginnt bei Rasterbreite − 360 − 304 − 2 × 44 px)
       und läuft dort ins Dunkel aus – die helle Bodenspiegelung bleibt links vom Text */
    width: calc(100% - max(var(--gutter), (100% - var(--ws-wrap)) / 2) - 488px);
    height: auto;
    aspect-ratio: auto;
    margin: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 60%, rgba(0, 0, 0, 0.45) 80%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, #000 60%, rgba(0, 0, 0, 0.45) 80%, rgba(0, 0, 0, 0) 100%);
  }
  /* rechts ausrichten: das lange Auslaufen bleibt ganz sichtbar, Gülçin steht links neben dem Text */
  .ws__bild img {
    object-position: 100% 50%;
  }
  .ws__bild::after {
    display: none;
  }
  .ws::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(30% 50% at 20% 50%, rgba(215, 120, 150, 0.16), rgba(215, 120, 150, 0) 70%),
      radial-gradient(36% 60% at 84% 46%, rgba(205, 115, 145, 0.14), rgba(205, 115, 145, 0) 70%);
    pointer-events: none;
    z-index: 0;
  }
  .ws__grid {
    /* schmaler als das übrige Raster: Text und Karte stehen mittig statt am rechten Rand */
    width: min(100% - 2 * var(--gutter), var(--ws-wrap));
    grid-template-columns: 1fr minmax(0, 360px) 304px;
    align-items: center;
    gap: 44px;
    margin-top: 0;
    /* oben zusätzlich die Höhe der Wellenkappe */
    padding: calc(clamp(80px, 7vw, 110px) + clamp(40px, 7vw, 104px)) 0 clamp(120px, 11vw, 160px);
  }
  .ws__text {
    grid-column: 2;
  }
  .ws__karte {
    grid-column: 3;
  }
}

/* 12 ABOUT ================================================================= */
/* Seit 03.11.2026 das Selfie mit Original-Hintergrund (IMG_6574) statt freigestellt – randlos wie
   vor dem 01.11.: mobil über dem Text, oben und unten weich in den Seitengrund; ab 1024 px links,
   nach rechts zum Text hin ausgeblendet. */
.about {
  --welle: clamp(40px, 7vw, 104px);
  position: relative;
  z-index: 0;
  /* liegt um die Wellenhöhe unter dem Tanz-Bereich, dessen Unterkante ausgeschnitten ist */
  margin-top: calc(-1 * var(--welle));
  background: var(--bg);
  overflow: clip;
}
.about__bild {
  position: relative;
  height: calc(min(112vw, 560px) + var(--welle));
}
.about__bild picture,
.about__bild img {
  display: block;
  width: 100%;
  height: 100%;
}
.about__bild img {
  object-fit: cover;
  /* Gesicht und Strickjacke im Ausschnitt */
  object-position: 50% 30%;
}
.about__bild::after {
  content: '';
  position: absolute;
  /* oben beginnt das Foto klar an der Welle, unten kurz in den Text. 2 px über die Bildkante (Safari-Rundung). */
  inset: 0 0 -2px;
  background: linear-gradient(
    180deg,
    rgba(250, 247, 242, 0) 0%,
    rgba(250, 247, 242, 0) 84%,
    rgba(250, 247, 242, 0.7) 94%,
    var(--bg) 100%
  );
}
.about__grid {
  position: relative;
  z-index: 2;
  /* Text direkt unter dem Foto auf dem hellen Grund */
  margin-top: -8px;
  padding-bottom: 76px;
}
@media (min-width: 1024px) {
  .nur-mobil {
    display: none;
  }
}
.about__text .h2 {
  margin-bottom: 1.1rem;
}
.about__lead {
  color: #4e474c;
  font-size: 1.12rem;
  line-height: 1.62;
  max-width: 30rem;
  margin: 0;
}
.about__lead p {
  margin: 0 0 0.85em;
}
.about__lead p:last-child,
.about__lead .nur-gross,
.about__lead .nur-klein {
  margin-bottom: 0;
}
.about__btn {
  margin-top: 26px;
}
.about__presse {
  margin: 16px 0 0;
  font-size: 0.95rem;
}
/* Notiz unter dem Text auf hellem Grund – nicht mehr auf dem Foto (dort brauchte sie
   einen hellen Schein, der wie ein weißer Rand wirkte; Wunsch 22.10.2026) */
.about__notiz {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 30px;
  font-size: 1.9rem;
  line-height: 1;
  transform: rotate(-4deg);
  transform-origin: left center;
}
@media (min-width: 1024px) {
  .about {
    min-height: calc(clamp(560px, 44vw, 720px) + var(--welle));
    display: flex;
    align-items: center;
  }
  /* Foto links, Text rechts (Wunsch 02.11.2026) */
  .about__bild {
    position: absolute;
    inset: 0 auto 0 0;
    width: 52%;
    height: 100%;
    -webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 26%);
    mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 26%);
  }
  .about__bild img {
    object-position: 50% 32%;
  }
  .about__bild::after {
    inset: 0;
    background: linear-gradient(180deg, rgba(250, 247, 242, 0) 0%, rgba(250, 247, 242, 0) 92%, var(--bg) 100%);
  }
  .about__grid {
    margin-top: 0;
    padding: calc(clamp(84px, 7vw, 116px) + var(--welle)) 0 clamp(96px, 8vw, 128px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .about__text {
    width: 580px;
  }
  .about__notiz {
    font-size: 2.1rem;
  }
  /* feine Goldlinie über „About me“, seit dem Seitenwechsel von rechts */
  .linie--about {
    left: auto;
    right: 0;
    top: calc(var(--welle) + 6px);
    width: 36%;
    height: 84px;
    transform: scaleX(-1);
  }
}
/* kleinere Desktops: Text schmaler, damit er nicht ins Foto läuft */
@media (min-width: 1024px) and (max-width: 1279px) {
  .about__text {
    width: min(480px, 40vw);
  }
}

/* 12b ÜBER MICH ========================================================== */
.story-intro {
  position: relative;
  padding: calc(var(--kopf-h) + 24px) 0 calc(clamp(40px, 7vw, 104px) + 30px);
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(244, 196, 208, 0.42), rgba(244, 196, 208, 0) 70%),
    radial-gradient(40% 50% at 100% 30%, rgba(250, 226, 231, 0.7), rgba(250, 226, 231, 0) 70%),
    var(--bg);
  overflow: clip;
}
.story-intro__grid {
  display: grid;
  gap: 30px;
}
.story-intro .krume {
  margin-bottom: 22px;
  color: var(--ink-2);
}
.story-intro__lead {
  margin: 0.8rem 0 0;
  max-width: 30rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #4e474c;
}
/* Zitat in der Handschrift, seit 03.11.2026 unter dem Text und etwas kleiner (Gülçins Wunsch) */
.story-intro__quote {
  margin: 1.5rem 0 0;
  transform: rotate(-4deg);
  transform-origin: left top;
  font-size: clamp(1.8rem, 1.35rem + 2.4vw, 3.4rem);
  line-height: 1.05;
}
.story-intro__titel {
  margin: 0;
  font: 500 clamp(1.5rem, 1.3rem + 0.7vw, 1.9rem)/1.2 var(--display);
  letter-spacing: -0.015em;
}
.story-intro__bild {
  position: relative;
  aspect-ratio: 4 / 4.4;
  border-radius: 48% 48% 18px 18px / 34% 34% 18px 18px;
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(60, 40, 70, 0.55);
}
.story-intro__bild picture,
.story-intro__bild img {
  width: 100%;
  height: 100%;
}
.story-intro__bild img {
  object-fit: cover;
  object-position: 50% 30%;
}
.story-intro__kurve {
  bottom: -1px;
  color: var(--creme);
}
.abschnitt.story-why {
  background: var(--creme);
  /* Platz für die Welle des Zahlen-Bands, danach noch Luft zum Text */
  padding-bottom: calc(clamp(40px, 7vw, 104px) + clamp(64px, 6vw, 96px));
}
.story-why__grid {
  display: grid;
  gap: 22px;
}
.story-why__text {
  max-width: 40rem;
  color: #4e474c;
  font-size: 1.1rem;
  line-height: 1.65;
}
.story-why__text p {
  margin: 0 0 1em;
}
.story-why__text .story-why__schluss {
  margin: 1.5rem 0 0;
  color: var(--ink);
  font: 500 1.35rem/1.3 var(--display);
  letter-spacing: -0.01em;
}
/* Zahlen als rosa Band zwischen den Wellen, groß und ohne Kästen (Beispiel von Gülçin, 01.11.2026) */
.story-zahlen {
  --zahlen-welle: clamp(40px, 7vw, 104px);
  position: relative;
  padding: 26px 0 calc(var(--zahlen-welle) + 44px);
  background: var(--rosa-zart);
}
.story-zahlen > .kurve--ws-oben {
  top: calc(-1 * var(--zahlen-welle) + 1px);
  color: var(--rosa-zart);
}
.story-zahlen > .kurve--ws-unten {
  bottom: -1px;
  color: var(--bg);
}
.story-zahlen__titel {
  margin: 0 0 34px;
  text-align: center;
  font: 400 clamp(1.5rem, 1.25rem + 1vw, 2.1rem)/1.2 var(--display);
  letter-spacing: -0.02em;
}
.zahlen {
  display: grid;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.zahlen div {
  display: flex;
  flex-direction: column-reverse;
  /* oben bündig, damit die Zahlen auf einer Linie stehen, auch wenn eine Spalte Kleingedrucktes hat */
  justify-content: flex-end;
  gap: 10px;
  padding: 24px 12px;
}
.zahlen div + div {
  border-top: 1px solid rgba(169, 112, 127, 0.32);
}
.zahlen dd {
  margin: 0;
  color: var(--rosa-dunkel);
  font: 300 clamp(3.6rem, 2.9rem + 3vw, 5.6rem)/1 var(--display);
  letter-spacing: -0.015em;
}
/* das Zeichen ∞ ist in der Schrift klein, optisch an die Zahlen angleichen */
.zahlen div:last-child dd {
  font-size: clamp(5rem, 4rem + 4.2vw, 7.8rem);
  line-height: 0.715;
}
.zahlen dt {
  color: var(--ink);
  font-size: 1rem;
}
/* Zeitraum zur Zahl (Wunsch 03.11.2026): klein und blass direkt unter der Beschriftung */
.zahlen .zahlen__stand {
  order: -1;
  margin: -6px 0 0;
  color: var(--ink-2);
  font: 400 0.62rem/1.35 var(--sans);
  letter-spacing: 0;
  opacity: 0.6;
}
@media (min-width: 720px) {
  .zahlen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .zahlen div {
    padding: 10px 20px;
  }
  .zahlen div + div {
    border-top: 0;
    border-left: 1px solid rgba(169, 112, 127, 0.32);
  }
}
.story-ende {
  padding: 30px 0 clamp(44px, 4.5vw, 64px);
}
.story-ende__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 26px clamp(36px, 5vw, 72px);
}
.story-ende .notiz {
  font-size: clamp(1.9rem, 1.45rem + 2.4vw, 3.5rem);
  line-height: 1.05;
  text-align: center;
  transform: rotate(-4deg);
}
.story-ende .notiz .herz {
  width: 0.62em;
  height: 0.58em;
  margin-left: 0.1em;
}
.story-ende .btn {
  min-height: 60px;
  padding: 0 36px;
  font-size: 1.08rem;
}
@media (min-width: 900px) {
  .story-intro__grid {
    grid-template-columns: 1fr minmax(320px, 44%);
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
  }
  .story-why__grid {
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
}

/* 13 FUSS ================================================================== */
.fuss {
  position: relative;
  background: var(--ink);
  color: var(--hell-2);
  /* iPhone-Homebar: viewport-fit=cover, deshalb Abstand für den sicheren Bereich */
  padding: 46px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  margin-top: clamp(40px, 6vw, 90px);
}
.fuss > .kurve--fuss {
  top: calc(-1 * clamp(40px, 7vw, 104px) + 1px);
  color: var(--ink);
}
.fuss__innen {
  display: grid;
  gap: 26px;
}
.fuss__zeile {
  margin: 10px 0 0;
  font-size: 0.9rem;
}
.fuss__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
}
.fuss__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  margin-left: -10px;
  margin-right: 8px;
  color: var(--hell);
  font-size: 0.94rem;
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.3s;
}
.fuss__nav a:hover {
  color: var(--rosa);
}
.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(246, 239, 231, 0.12);
  font-size: 0.82rem;
}
.fuss__unten p {
  margin: 0;
}
.fuss__unten a {
  color: var(--hell);
  text-decoration-color: rgba(244, 196, 208, 0.6);
  text-underline-offset: 3px;
  display: inline-block;
  padding: 10px 0;
}
.fuss .logo {
  font-size: 1.8rem;
}
@media (min-width: 768px) {
  .fuss__innen {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .fuss__nav ul {
    justify-content: flex-end;
  }
  .fuss__nav a {
    margin: 0;
  }
}
/* Startseite: About-Hintergrund läuft bis zur Fußkurve */
.start .fuss {
  margin-top: 0;
}

/* 15 WORKSHOPS-SEITEN ====================================================== */
.ws-intro {
  position: relative;
  background: var(--nacht);
  color: var(--hell);
  overflow: clip;
  isolation: isolate;
  padding-top: var(--kopf-h);
}
/* bewusst niedrig: die Termine sind das Wichtigste auf dieser Seite */
.ws-intro__bild {
  position: relative;
  height: min(40vw, 190px);
}
.ws-intro__bild picture,
.ws-intro__bild img {
  width: 100%;
  height: 100%;
}
.ws-intro__bild img {
  object-fit: cover;
  object-position: 50% 62%;
}
.ws-intro__bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33, 28, 36, 0.2) 0%, rgba(33, 28, 36, 0) 30%, rgba(33, 28, 36, 0) 50%, var(--nacht) 98%);
}
.ws-intro__text {
  position: relative;
  z-index: 2;
  margin-top: -44px;
  padding-bottom: calc(clamp(40px, 7vw, 104px) + 14px);
}
.ws-intro__text .h1 {
  color: var(--hell);
  margin-bottom: 0.7rem;
  font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.4rem);
}
.ws-intro__text p:not(.label) {
  color: var(--hell-2);
  max-width: 30rem;
  font-size: 1rem;
  margin: 0;
}
.ws-intro .krume {
  margin-bottom: 14px;
}
.ws-intro > .kurve {
  bottom: -1px;
  color: var(--bg);
}
@media (min-width: 900px) {
  .ws-intro {
    min-height: clamp(300px, 24vw, 380px);
    display: flex;
    align-items: center;
  }
  .ws-intro__bild {
    position: absolute;
    inset: 0 max(0px, calc((100% - var(--wrap)) / 2 - 40px)) 0 auto;
    width: min(44%, 620px);
    height: 100%;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 38%, #000 86%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 38%, #000 86%, rgba(0, 0, 0, 0) 100%);
  }
  .ws-intro__bild img {
    object-position: 50% 74%;
  }
  .ws-intro__bild::after {
    background: linear-gradient(180deg, var(--nacht) 0%, rgba(33, 28, 36, 0) 22%, rgba(33, 28, 36, 0) 88%, var(--nacht) 100%);
  }
  .ws-intro__text {
    margin-top: 0;
    padding: 34px 0 clamp(78px, 8vw, 118px);
  }
  .ws-intro__text > * {
    max-width: 520px;
  }
}

.krume ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}
.krume li + li::before {
  content: '/';
  margin: 0 9px;
  opacity: 0.45;
}
.krume a {
  color: inherit;
  text-decoration: none;
  opacity: 0.8;
}
.krume a:hover {
  opacity: 1;
  text-decoration: underline;
}
.krume [aria-current] {
  opacity: 0.6;
}

.abschnitt {
  padding: 64px 0;
}
.abschnitt__kopf {
  margin-bottom: 30px;
}
.abschnitt__kopf p:not(.label) {
  color: var(--ink-2);
  max-width: 34rem;
  margin: 0.8rem 0 0;
}
/* Workshops: Termine früh ins Bild, wenig Luft darüber */
.abschnitt--termine {
  padding-top: 28px;
}
@media (min-width: 1024px) {
  .abschnitt {
    padding: 92px 0;
  }
  .abschnitt__kopf {
    margin-bottom: 44px;
  }
  .abschnitt--termine {
    padding-top: 40px;
  }
  .abschnitt--termine .abschnitt__kopf {
    margin-bottom: 26px;
  }
}

/* Terminliste: jede Zeile vollständig klickbar */
.termine {
  border-top: 1px solid var(--linie);
}
/* Terminzeile: großes Datum, Titel + Kurztext, Infospalte, Preis + Platz sichern.
   Ganze Zeile klickbar (Titel-Link spannt sich darüber), keine Kästen. */
.termin {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--linie);
  transition: background-color 0.35s var(--ease);
}
.termin__haupt {
  min-width: 0;
}
.termin__text {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 34rem;
}
.termin__datum {
  grid-row: span 2;
  text-align: center;
  line-height: 1;
}
.termin__tag {
  display: block;
  font: 500 2.6rem/0.9 var(--display);
  letter-spacing: -0.03em;
}
.termin__monat {
  display: block;
  margin-top: 6px;
  font: 600 0.7rem/1 var(--sans);
  letter-spacing: 0.14em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--label);
}
.termin__titel {
  margin: 0 0 6px;
}
.termin__titel a {
  color: var(--ink);
  text-decoration: none;
}
.termin__titel a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.termin__fakten {
  grid-column: 2;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.4;
}
.termin__fakten li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 10px;
}
.termin__fakten .icon {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--gold-dunkel);
}
.termin__aktion {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 4px;
}
.termin__preis {
  font: 600 1.2rem/1 var(--sans);
  letter-spacing: -0.01em;
}
.termin__knopf {
  width: 100%;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font: 600 0.78rem/1 var(--sans);
  background: rgba(244, 196, 208, 0.35);
  color: #6e3a4b;
}
.status--voll,
.status--abgesagt {
  background: rgba(163, 38, 63, 0.1);
  color: var(--fehler);
}
.status--wenig {
  background: rgba(184, 137, 88, 0.18);
  color: #6f4d2b;
}
.status--ok {
  background: rgba(63, 107, 74, 0.12);
  color: var(--ok);
}
.termin:hover {
  background: rgba(250, 226, 231, 0.4);
}
.termin:hover .termin__knopf.btn--rosa {
  background: var(--rosa-hover);
}
.termin--aus .termin__tag,
.termin--aus .termin__titel a {
  color: var(--ink-2);
}
@media (min-width: 900px) {
  .termin {
    grid-template-columns: 96px minmax(0, 1.5fr) minmax(190px, 1fr) 200px;
    align-items: start;
    gap: 10px 28px;
    padding: 28px 18px;
    margin: 0 -18px;
    border-radius: 12px;
    border-bottom: 0;
  }
  .termin__fakten {
    grid-column: 3;
    padding-top: 4px;
  }
  .termin + .termin {
    border-top: 1px solid var(--linie);
  }
  .termine {
    border-bottom: 1px solid var(--linie);
  }
  .termin__datum {
    grid-row: auto;
  }
  .termin__tag {
    font-size: 3.2rem;
  }
  .termin__aktion {
    grid-column: 4;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 0;
    padding-top: 2px;
  }
  .termin__aktion .status {
    align-self: flex-start;
  }
}

.leer {
  padding: 44px 0 10px;
  max-width: 34rem;
}
.leer__titel {
  font: 500 clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem)/1.05 var(--display);
  margin: 0 0 12px;
}
.leer__titel .herz {
  margin-left: 8px;
}
.leer p {
  color: var(--ink-2);
}

/* Ablauf in vier Schritten */
.schritte {
  display: grid;
  gap: 26px;
  counter-reset: schritt;
}
.schritt {
  position: relative;
  padding-left: 58px;
}
.schritt::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -4px;
  font: 500 2rem/1 var(--display);
  color: var(--gold);
}
.schritt h3 {
  margin: 0 0 6px;
  font: 600 1.02rem/1.35 var(--sans);
}
.schritt p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.96rem;
}
@media (min-width: 900px) {
  .schritte {
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
  }
  .schritt {
    padding: 52px 0 0;
    border-top: 1px solid var(--linie);
  }
  .schritt::before {
    top: 14px;
  }
}

/* Häufige Fragen */
.faq {
  border-top: 1px solid var(--linie);
  max-width: 820px;
}
.faq details {
  border-bottom: 1px solid var(--linie);
}
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 16px 0;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary h3 {
  margin: 0;
  font: 500 1.2rem/1.3 var(--display);
  letter-spacing: -0.005em;
}
.faq summary .icon {
  transition: transform 0.35s var(--ease);
  color: var(--gold);
}
.faq details[open] summary .icon {
  transform: rotate(45deg);
}
.faq__antwort {
  padding: 0 0 22px;
  color: #4e474c;
  max-width: 44rem;
}
.faq__antwort p {
  margin: 0;
}
@media (min-width: 900px) {
  .faq-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 64px;
    align-items: start;
  }
}

/* Detailseite eines Workshops */
.detail {
  padding: calc(var(--kopf-h) + 30px) 0 80px;
  background:
    radial-gradient(50% 40% at 0% 0%, rgba(244, 196, 208, 0.35), rgba(244, 196, 208, 0) 70%),
    var(--bg);
}
.detail__grid {
  display: grid;
  gap: 40px;
}
.detail .krume {
  margin-bottom: 26px;
  color: var(--ink-2);
}
.detail__titel {
  margin: 0 0 14px;
}
.detail__level {
  display: inline-flex;
  margin: 4px 0 10px;
}
/* Kontaktseite: gleicher Aufbau wie die Detailseite */
.kontakt__lead {
  margin: 0;
  max-width: 30rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #4e474c;
}
.fakten {
  display: grid;
  gap: 0;
  margin: 26px 0 30px;
  border-top: 1px solid var(--linie);
}
.fakten div {
  display: grid;
  grid-template-columns: 28px 110px 1fr;
  align-items: start;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linie);
}
.fakten dt {
  color: var(--ink-2);
  font-size: 0.92rem;
}
.fakten dd {
  margin: 0;
  font-weight: 500;
}
.fakten__hinweis {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.fakten .icon {
  width: 19px;
  height: 19px;
  color: var(--gold-dunkel);
  margin-top: 2px;
}
.beschreibung {
  color: #4e474c;
  max-width: 38rem;
}
.beschreibung p {
  margin-bottom: 1em;
}
@media (min-width: 1024px) {
  .detail {
    padding-top: calc(var(--kopf-h) + 44px);
  }
  .detail__grid {
    grid-template-columns: 1fr minmax(380px, 460px);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .buchung {
    position: sticky;
    top: calc(var(--kopf-h-klein) + 24px);
  }
}

/* 15b UGC FÜR MARKEN (/ugc) ================================================ */
/* Kein zweiter Hero: kurzer Einstieg, dann die Referenzen, am Ende das
   Formular auf Pastellrosa, damit es nicht zu übersehen ist. */
.ugc-intro {
  position: relative;
  padding: calc(var(--kopf-h) + 24px) 0 34px;
  background:
    radial-gradient(60% 70% at 0% 0%, rgba(244, 196, 208, 0.38), rgba(244, 196, 208, 0) 70%),
    radial-gradient(36% 70% at 100% 20%, rgba(250, 226, 231, 0.75), rgba(250, 226, 231, 0) 70%),
    var(--bg);
}
.ugc-intro__grid {
  display: grid;
  gap: 26px;
}
.ugc-intro .krume {
  margin-bottom: 22px;
  color: var(--ink-2);
}
.ugc-intro__lead {
  margin: 1.1rem 0 26px;
  max-width: 30rem;
  /* kein einzelnes Wort in der letzten Zeile („hören!“) */
  text-wrap: pretty;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #4e474c;
}
@media (min-width: 1024px) {
  .ugc-intro {
    padding: calc(var(--kopf-h) + 44px) 0 52px;
  }
  .ugc-intro__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    align-items: center;
  }
}

/* Logo-Wand: Marken, mit denen Gülçin gearbeitet hat (28.10.2026) – ruhiges Raster ohne Kästen */
.markenwand {
  display: grid;
  gap: 18px;
}
.markenwand__titel {
  margin: 0;
}
.ugc-intro .markenwand__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 18px 12px;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--linie);
}
.markenwand__liste li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}
.markenwand__liste img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
/* letzte Kachel: Platz für die nächste Marke, führt direkt zum Formular */
.markenwand__deins a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 2px 4px;
  color: var(--rosa-dunkel);
  text-align: center;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.markenwand__symbol {
  width: 38px;
  height: 38px;
  overflow: visible;
}
.markenwand__kreis {
  transform-origin: 20px 24px;
  transition: fill 0.3s var(--ease);
}
.markenwand__funke {
  color: var(--gold);
  transform-origin: 37px 6.7px;
  transition: transform 0.4s var(--ease);
}
.markenwand__zeile {
  color: var(--gold-dunkel);
  font: 400 1.34rem/1 var(--hand);
  white-space: nowrap;
}
.markenwand__deins a:hover,
.markenwand__deins a:focus-visible {
  color: var(--ink);
}
.markenwand__deins a:hover .markenwand__kreis,
.markenwand__deins a:focus-visible .markenwand__kreis {
  fill: var(--rosa);
}
.markenwand__deins a:hover .markenwand__funke,
.markenwand__deins a:focus-visible .markenwand__funke {
  transform: rotate(45deg) scale(1.15);
}
/* Handy (Wunsch 06.11.2026): drei Spalten mit etwas kleineren Logos statt zwei – 4 statt 6 Reihen.
   Die Größe kommt aus width/height (referenzen.ts); hier nur gedeckelt, object-fit hält die Form. */
@media (max-width: 639px) {
  .markenwand__liste li {
    min-height: 42px;
  }
  .markenwand__liste img {
    max-width: 90%;
    max-height: 36px;
  }
  .markenwand__symbol {
    width: 30px;
    height: 30px;
  }
  .markenwand__zeile {
    font-size: 1.06rem;
  }
}
@media (min-width: 640px) {
  .ugc-intro .markenwand__liste {
    gap: 26px 28px;
  }
}
@media (min-width: 1024px) {
  .ugc-intro .markenwand__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px 32px;
  }
}

.ugc-arbeiten {
  padding: 22px 0 64px;
}
.ugc-arbeiten .h2 {
  margin-bottom: 28px;
}
/* Referenzen: mobil zwei Spalten (alles auf einen Blick, kein Wischen),
   Tablet drei, ab 1024 px alle hochkant in einer Reihe wie im Mockup */
.arbeiten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 12px;
}
.arbeit__link {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}
.arbeit__medien {
  position: relative;
  display: block;
  margin-bottom: 9px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--beige);
  box-shadow: 0 24px 44px -34px rgba(60, 40, 70, 0.55);
}
.arbeit__medien img,
.arbeit__medien video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.arbeit__play {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 252, 248, 0.92);
  color: var(--ink);
  transition: transform 0.4s var(--ease);
}
.arbeit__play .icon {
  width: 15px;
  height: 15px;
  margin-left: 2px;
}
.arbeit__marke {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
}
.arbeit__format {
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.35;
}
@media (hover: hover) {
  .arbeit__link:hover .arbeit__medien img,
  .arbeit__link:hover .arbeit__medien video {
    transform: scale(1.03);
  }
  .arbeit__link:hover .arbeit__play {
    transform: scale(1.08);
  }
}
/* doppelte Klasse, weil die allgemeine Listen-Rücksetzung ul[role=list] sonst gewinnt */
.ugc-arbeiten .ugc-punkte {
  display: grid;
  gap: 14px;
  margin-top: 44px;
  padding: 20px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.ugc-punkte li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ugc-punkte svg {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--gold);
}
@media (min-width: 640px) {
  .arbeiten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .ugc-arbeiten .ugc-punkte {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
  }
}
@media (min-width: 1024px) {
  .ugc-arbeiten {
    padding: 30px 0 84px;
  }
  /* fünf gleich breite Spalten; mehr Arbeiten laufen in die nächste Reihe */
  .arbeiten {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px 16px;
  }
}
/* Reels, Videosequenzen, Fotos untereinander zum Vergleich (Wunsch vom 21.10.2026) */
.arbeiten-gruppe + .arbeiten-gruppe {
  margin-top: 36px;
}
.arbeiten-gruppe__titel {
  margin: 0 0 14px;
  font: 500 1.25rem/1.2 var(--display);
  letter-spacing: -0.01em;
}

/* Creator- und UGC-Kooperation: zwei randlose Farbfelder in zwei Rosatönen untereinander, mit einer
   Welle dazwischen – seit 04.11.2026 auch am Desktop (Gülçins Wunsch), dort zusätzlich mit den Logos der
   passenden Marken. Oben als Welle ausgeschnitten (Maske), unten legt sich die Welle der Anfrage darüber.
   Mobil bleibt alles wie es war (ohne Logos). Keine Kästen, Typografie wie im Zahlen-Band. */
.koop-arten {
  --welle: clamp(40px, 7vw, 104px);
  --aussen: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  padding-top: 34px;
}
.koop-arten__kopf {
  padding-bottom: 10px;
}
.koop-duo {
  /* ein Goldbraun für „Für …“ und die Namen in beiden Feldern – das hellere wie in der Handschrift sonst (Wunsch 03.11.2026) */
  --koop-gold: var(--gold-dunkel);
  display: grid;
  -webkit-mask:
    url('/img/welle/ws-oben-m.svg') top / 100% var(--welle) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--welle) + 1px) no-repeat;
  mask:
    url('/img/welle/ws-oben-m.svg') top / 100% var(--welle) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--welle) + 1px) no-repeat;
}
.koop-feld {
  position: relative;
  padding-inline: var(--aussen);
}
.koop-feld--creator {
  /* kräftiger als die Anfrage darunter (rosa-zart), sonst liefe das Feld ohne Kante hinein */
  --feld: var(--rosa);
  background: var(--feld);
  padding-top: calc(var(--welle) + 20px);
  padding-bottom: calc(var(--welle) + 40px);
}
.koop-feld--ugc {
  --feld: #eebdca;
  background: var(--feld);
  padding-top: 8px;
  /* unten liegt die Welle der Anfrage */
  padding-bottom: calc(var(--welle) + 64px);
}
/* Welle zwischen den beiden Feldern, in der Farbe des zweiten */
.koop-feld__welle.kurve {
  top: calc(-1 * var(--welle) + 1px);
  bottom: auto;
  z-index: 1;
  color: var(--feld);
}
.koop-feld__innen {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 30px;
}
.koop-feld__titel {
  margin: 0 0 10px;
  font: 400 clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem)/1.05 var(--display);
  letter-spacing: -0.02em;
}
.koop-feld__fuer {
  margin: 0 0 14px;
  color: var(--koop-gold);
  font-weight: 600;
  font-size: 0.98rem;
}
.koop-feld__lead {
  max-width: 26rem;
  margin: 0 0 26px;
  color: #4e474c;
  font-size: 1.06rem;
  line-height: 1.62;
}
.koop-feld--ugc .koop-feld__lead {
  color: #46373d;
}
.koop-feld__beispiel {
  justify-self: center;
  width: min(210px, 60%);
  margin: 0;
}
.koop-feld__beispiel .arbeit__medien {
  margin-bottom: 0;
}
/* Handschrift in einer Zeile, mittig unter dem Video (darf seitlich über das Video hinausgehen) */
.koop-feld__notiz {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  color: var(--koop-gold);
  font-size: 1.5rem;
  white-space: nowrap;
  transform: rotate(-4deg);
}
/* Logos der passenden Marken: nur am Desktop (mobil wäre es zu viel, Gülçin 04.11.2026) */
.koop-feld__logos {
  display: none;
}
/* Tablet: Text und Video nebeneinander, das zweite Feld gespiegelt */
@media (min-width: 768px) {
  .koop-feld__innen {
    grid-template-columns: minmax(0, 1fr) 200px;
    align-items: center;
    gap: 80px;
  }
  .koop-feld--ugc .koop-feld__innen {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .koop-feld--ugc .koop-feld__beispiel {
    order: -1;
  }
  .koop-feld__beispiel {
    width: 100%;
  }
  .koop-duo {
    -webkit-mask-image: url('/img/welle/ws-oben-d.svg'), linear-gradient(#000 0 0);
    mask-image: url('/img/welle/ws-oben-d.svg'), linear-gradient(#000 0 0);
  }
}
/* Desktop: beide Felder untereinander, Inhalt mittig gebündelt, dazu die Logos */
@media (min-width: 1024px) {
  .koop-feld--creator {
    padding-top: calc(var(--welle) + 48px);
    padding-bottom: calc(var(--welle) + 56px);
  }
  .koop-feld--ugc {
    padding-top: 24px;
    padding-bottom: calc(var(--welle) + 80px);
  }
  .koop-feld__innen {
    grid-template-columns: minmax(0, 540px) 230px;
    justify-content: center;
    gap: clamp(80px, 9vw, 150px);
  }
  .koop-feld--ugc .koop-feld__innen {
    grid-template-columns: 230px minmax(0, 540px);
  }
  .koop-feld__lead {
    font-size: 1.1rem;
  }
  /* Dreier-Raster mit gleich breiten Spalten, Logos mittig (wie die Logo-Wand): Creator 3 + 3, UGC 3 + 2 */
  .koop-arten .koop-feld__logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    gap: 26px 24px;
    margin: 38px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid rgba(29, 25, 28, 0.12);
  }
  /* Größe aus width/height (logoGroesse, optisch ausgeglichen) – SVGs ohne eigene Maße brauchen sie */
  .koop-feld__logos img {
    display: block;
    object-fit: contain;
  }
}

/* Reel-Stapel in den Kooperations-Feldern (03.11.2026): vorne das aktuelle Video, dahinter links und
   rechts aufgefächert die nächsten – man sieht sofort, dass es mehr gibt. Ohne JavaScript eine
   waagerechte Wischleiste (site.js setzt .ist-bereit). */
.reelstapel {
  position: relative;
}
.reelstapel__liste {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reelstapel__liste::-webkit-scrollbar {
  display: none;
}
.reelstapel__karte {
  flex: 0 0 86%;
  scroll-snap-align: center;
}
.reelstapel__steuer {
  display: none;
}
.reelstapel.ist-bereit .reelstapel__liste {
  display: grid;
  overflow: visible;
  /* waagerechtes Wischen gehört dem Stapel, senkrecht scrollt die Seite */
  touch-action: pan-y;
}
.reelstapel.ist-bereit .reelstapel__karte {
  grid-area: 1 / 1;
  transform-origin: 50% 92%;
  transition:
    transform 0.7s var(--ease),
    opacity 0.7s var(--ease);
}
.reelstapel.ist-bereit .reelstapel__karte[data-pos='0'] {
  z-index: 3;
}
.reelstapel.ist-bereit .reelstapel__karte[data-pos='1'] {
  z-index: 2;
  transform: translateX(18%) scale(0.86) rotate(5deg);
}
.reelstapel.ist-bereit .reelstapel__karte[data-pos='2'] {
  z-index: 1;
  transform: translateX(-18%) scale(0.86) rotate(-5deg);
}
.reelstapel.ist-bereit .reelstapel__karte[data-pos='aus'] {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.78);
}
/* hintere Karten etwas zurückgenommen, ohne Abspielknopf; ein Tipp holt sie nach vorne */
.reelstapel.ist-bereit .reelstapel__karte:not([data-pos='0']) .arbeit__medien {
  box-shadow: 0 18px 30px -24px rgba(60, 40, 70, 0.5);
}
.reelstapel.ist-bereit .reelstapel__karte:not([data-pos='0']) .arbeit__medien::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 246, 248, 0.28);
}
.reelstapel.ist-bereit .reelstapel__karte:not([data-pos='0']) .arbeit__play {
  opacity: 0;
}
/* unter dem Stapel: Logo der Marke (04.11.2026), ohne Logo der Name in Handschrift; feste Höhe gegen Springen */
.reelstapel__marke {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  margin-top: 10px;
}
.reelstapel__marke .koop-feld__notiz {
  margin-top: 0;
}
/* Größe aus width/height (ugc.ts → LOGO_UNTER_VIDEO); sehr breite Logos passt object-fit ein */
.reelstapel__logo {
  display: block;
  max-width: 140px;
  object-fit: contain;
}
.reelstapel.ist-bereit .reelstapel__steuer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}
.reelstapel__pfeil {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(29, 25, 28, 0.16);
  border-radius: 50%;
  background: rgba(255, 252, 248, 0.55);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.reelstapel__pfeil:hover {
  background: var(--creme);
  border-color: rgba(29, 25, 28, 0.32);
}
.reelstapel__pfeil .icon {
  width: 16px;
  height: 16px;
}
.reelstapel__pfeil--zurueck .icon {
  transform: rotate(180deg);
}
.reelstapel__punkte {
  display: flex;
  align-items: center;
}
.reelstapel__punkt {
  display: grid;
  place-items: center;
  width: 22px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.reelstapel__punkt span {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(29, 25, 28, 0.26);
  transition: width 0.35s var(--ease), background-color 0.35s var(--ease);
}
.reelstapel__punkt[aria-current='true'] span {
  width: 16px;
  background: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .reelstapel.ist-bereit .reelstapel__karte {
    transition: none;
  }
}

/* die Anfrage schließt mit ihrer eigenen Welle direkt an das zweite Band an */
.koop-arten + .ugc-anfrage {
  margin-top: 0;
}

.ugc-anfrage {
  position: relative;
  margin-top: clamp(40px, 7vw, 104px);
  padding: 26px 0 calc(clamp(40px, 7vw, 104px) + 48px);
  background: var(--rosa-zart);
}
.ugc-anfrage > .kurve--ws-oben {
  top: calc(-1 * clamp(40px, 7vw, 104px) + 1px);
  color: var(--rosa-zart);
}
.ugc-anfrage__grid {
  display: grid;
  gap: 30px;
}
.ugc-anfrage__frage {
  margin: 1rem 0 0;
  font: 500 1.2rem/1.4 var(--display);
}
.ugc-anfrage__frage + .ugc-anfrage__lead {
  margin-top: 0.5rem;
}
.ugc-anfrage__lead {
  margin: 1rem 0 0;
  max-width: 28rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: #4e474c;
}
.ugc-anfrage__mail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  font-weight: 500;
}
.ugc-anfrage__mail .icon {
  color: var(--gold-dunkel);
}
/* Fuß schließt direkt an das Rosa an, seine Kurve liegt im unteren Abstand */
.ugc-seite .fuss {
  margin-top: 0;
}
@media (min-width: 1024px) {
  .ugc-anfrage {
    padding-top: 36px;
  }
  .ugc-anfrage__grid {
    grid-template-columns: 1fr minmax(380px, 470px);
    align-items: start;
    gap: clamp(48px, 6vw, 96px);
  }
  .ugc-anfrage__text {
    padding-top: 48px;
  }
}

/* Video mit Ton im Fenster (site.js). Seit 06.11.2026 nur das Video selbst – kein schwarzer Rahmen,
   keine Titelzeile, keine Steuerleiste des Browsers. Breite so, dass das Hochformat auch auf
   flachen Bildschirmen ganz hineinpasst. */
.player {
  width: min(92vw, 420px, calc(90vh * 0.5625));
  width: min(92vw, 420px, calc(90dvh * 0.5625));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.player::backdrop {
  background: rgba(29, 25, 28, 0.78);
}
.player__rahmen {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.player__video,
.player__bild {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--nacht);
}
.player__video {
  cursor: pointer;
}
.player [hidden] {
  display: none;
}
/* angehalten: Play-Zeichen in der Mitte, Tippen spielt weiter */
.player__pause {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.player__pause .icon {
  box-sizing: content-box;
  width: 30px;
  height: 30px;
  padding: 17px;
  border-radius: 50%;
  background: rgba(255, 252, 248, 0.9);
  color: var(--ink);
}
.player.ist-pausiert .player__pause {
  opacity: 1;
}
/* runde Knöpfe auf dem Video: oben rechts Schließen, unten rechts Ton */
.player__knopf {
  position: absolute;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(29, 25, 28, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.player__knopf:hover {
  background: rgba(29, 25, 28, 0.62);
}
.player__knopf .icon {
  width: 22px;
  height: 22px;
}
.player__zu {
  top: 10px;
}
.player__ton {
  bottom: 12px;
}
.player__ton-aus,
.player.ist-stumm .player__ton-an {
  display: none;
}
.player.ist-stumm .player__ton-aus {
  display: block;
}

/* 16 FORMULARE ============================================================= */
.buchung {
  background: var(--creme);
  border: 1px solid rgba(29, 25, 28, 0.08);
  border-radius: 20px;
  padding: 26px 20px;
  box-shadow: 0 30px 70px -48px rgba(60, 40, 70, 0.45);
}
@media (min-width: 560px) {
  .buchung {
    padding: 32px 30px;
  }
}
.buchung__titel {
  font: 500 1.75rem/1.1 var(--display);
  margin: 0 0 6px;
}
.buchung__sub {
  color: var(--ink-2);
  font-size: 0.94rem;
  margin: 0 0 22px;
}
.feld {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}
.feld label,
.feld legend {
  font: 600 0.86rem/1.3 var(--sans);
}
.feld .optional {
  font-weight: 400;
  color: var(--ink-2);
}
.feld input,
.feld textarea,
.feld select {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(29, 25, 28, 0.2);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 400 1rem/1.4 var(--sans);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.feld textarea {
  min-height: 92px;
  resize: vertical;
}
.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  outline: none;
  border-color: var(--label);
  box-shadow: 0 0 0 4px rgba(247, 208, 217, 0.7);
}
.feld [aria-invalid='true'] {
  border-color: var(--fehler);
}
.feld__fehler {
  color: var(--fehler);
  font-size: 0.86rem;
  margin: 0;
}
.feld-paar {
  display: grid;
  gap: 0 14px;
}
@media (min-width: 480px) {
  .feld-paar {
    grid-template-columns: 1fr 1fr;
  }
}
fieldset.feld {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}
/* Formular ohne Unterzeile (UGC-Kooperation): Abstand zum ersten Feld */
.buchung__titel:not(:has(+ .buchung__sub)) {
  margin-bottom: 1.2rem;
}
.zahlart {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.zahlart label {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 16px;
  border: 1px solid rgba(29, 25, 28, 0.18);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font-weight: 400;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.zahlart input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  accent-color: var(--ink);
}
.zahlart strong {
  display: block;
  font: 600 0.96rem/1.3 var(--sans);
}
.zahlart small {
  display: block;
  color: var(--ink-2);
  font-size: 0.84rem;
  line-height: 1.4;
}
.zahlart .icon {
  width: 22px;
  height: 22px;
  color: var(--ink-2);
}
.zahlart label:has(input:checked) {
  border-color: var(--ink);
  background: rgba(250, 226, 231, 0.45);
  box-shadow: 0 0 0 1px var(--ink);
}
.zahlart label:has(input:focus-visible) {
  box-shadow: 0 0 0 4px rgba(247, 208, 217, 0.8);
}
.zahlart label:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
.zahlart__aus {
  color: var(--ink-2);
  font-size: 0.86rem;
  margin: 6px 0 0;
}
.summe {
  margin: 20px 0 16px;
  padding: 16px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.summe__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.summe__zeile strong {
  font: 600 1.45rem/1 var(--sans);
  letter-spacing: -0.02em;
}
.summe__hinweis {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 0.84rem;
}
.check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
}
.check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--ink);
}
.buchung__klein {
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: 0.82rem;
  line-height: 1.5;
}
.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.meldung {
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 18px;
  font-size: 0.94rem;
}
.meldung--fehler {
  background: rgba(163, 38, 63, 0.08);
  color: var(--fehler);
  border: 1px solid rgba(163, 38, 63, 0.25);
}
.meldung--info {
  background: rgba(250, 226, 231, 0.5);
  color: #5c3140;
}
.meldung--ok {
  background: rgba(63, 107, 74, 0.1);
  color: var(--ok);
}
.meldung p:last-child {
  margin: 0;
}

/* 17 RECHTSTEXTE & STATUSSEITEN ============================================ */
.text-seite {
  padding: calc(var(--kopf-h) + 40px) 0 80px;
  background:
    radial-gradient(45% 30% at 100% 0%, rgba(244, 196, 208, 0.32), rgba(244, 196, 208, 0) 70%),
    var(--bg);
}
.prosa {
  max-width: 46rem;
}
.prosa h1 {
  margin-bottom: 26px;
  hyphens: manual;
  font-size: clamp(2.3rem, 1.4rem + 3vw, 3.6rem);
}
.prosa h2 {
  font: 500 1.6rem/1.2 var(--display);
  margin: 2.2em 0 0.6em;
  letter-spacing: -0.01em;
}
.prosa h3 {
  font: 600 1.05rem/1.4 var(--sans);
  margin: 1.6em 0 0.4em;
}
.prosa p,
.prosa li {
  color: #3f393d;
}
.prosa ul {
  padding-left: 1.2em;
}
.prosa address {
  font-style: normal;
}
.prosa a {
  color: var(--ink);
  text-decoration-color: rgba(184, 137, 88, 0.7);
  text-underline-offset: 3px;
  word-break: break-word;
}
.hinweis-rechtlich {
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  background: rgba(242, 233, 225, 0.6);
  border-radius: 0 10px 10px 0;
  font-size: 0.92rem;
}

.status-seite {
  padding: calc(var(--kopf-h) + 40px) 0 90px;
  background:
    radial-gradient(50% 40% at 0% 0%, rgba(244, 196, 208, 0.4), rgba(244, 196, 208, 0) 70%),
    var(--bg);
}
.status-karte {
  max-width: 640px;
  background: var(--creme);
  border: 1px solid rgba(29, 25, 28, 0.08);
  border-radius: 20px;
  padding: 30px 22px;
  box-shadow: 0 30px 70px -48px rgba(60, 40, 70, 0.45);
}
@media (min-width: 560px) {
  .status-karte {
    padding: 40px 38px;
  }
}
.status-karte .h2 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem);
  margin-bottom: 14px;
}
.tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 22px;
  font-size: 0.95rem;
}
.tabelle th,
.tabelle td {
  text-align: left;
  vertical-align: top;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
}
.tabelle th {
  width: 40%;
  color: var(--ink-2);
  font-weight: 400;
  padding-right: 12px;
}
.tabelle td {
  font-weight: 500;
  word-break: break-word;
}
.bankbox {
  background: rgba(250, 226, 231, 0.45);
  border-radius: 14px;
  padding: 6px 18px 2px;
  margin: 10px 0 22px;
}
.bankbox .tabelle {
  margin: 8px 0;
}
.bankbox .tabelle tr:last-child th,
.bankbox .tabelle tr:last-child td {
  border-bottom: 0;
}

.fehlerseite {
  min-height: 78vh;
  display: grid;
  align-items: center;
  padding: calc(var(--kopf-h) + 40px) 0 60px;
  background:
    radial-gradient(45% 40% at 100% 0%, rgba(244, 196, 208, 0.45), rgba(244, 196, 208, 0) 70%),
    radial-gradient(40% 40% at 0% 100%, rgba(242, 233, 225, 0.9), rgba(242, 233, 225, 0) 70%),
    var(--bg);
}
.fehlerseite .notiz {
  margin-bottom: 18px;
  display: inline-block;
}
.fehlerseite p:not(.notiz):not(.label) {
  color: var(--ink-2);
  max-width: 28rem;
  margin: 16px 0 28px;
}

/* Einverständniserklärung (/einverstaendniserklaerung): nur ein großer Druckknopf.
   Doppelte Klasse, weil .prosa a sonst Farbe und Unterstreichung überschreibt. */
.prosa .formblatt__knopf {
  color: var(--creme);
  text-decoration: none;
  margin-top: 1.4rem;
  min-height: 56px;
  padding-inline: 34px;
  font-size: 1.02rem;
}

/* 18 BEWEGUNG ============================================================== */
.js-reveal [data-reveal] {
  opacity: 0.85;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.js-reveal [data-reveal].ist-sichtbar {
  opacity: 1;
  transform: none;
}
.js-reveal .welt__eintrag:nth-child(2) {
  transition-delay: 0.06s;
}
.js-reveal .welt__eintrag:nth-child(3) {
  transition-delay: 0.12s;
}
.js-reveal .welt__eintrag:nth-child(4) {
  transition-delay: 0.18s;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* nur auf dem Handy sichtbar (kurze Fassungen, Wunsch 04.11.2026) */
@media (min-width: 768px) {
  .nur-klein {
    display: none;
  }
}
/* nur auf dem Handy ausgeblendet (Gülçins Wunsch 02.11.2026: mobil sonst zu lang) */
@media (max-width: 767px) {
  .nur-gross,
  .kontakt__fakten {
    display: none;
  }
}