/* atelio – Stylesheet */

/* Schriften lokal eingebunden (DSGVO: keine Verbindung zu Google Fonts) */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --espresso: #33261D;
  --espresso-soft: #6B5B4F;
  --amber: #F2994A;
  --amber-dark: #D97B2B;
  --sand: #F7EDE1;
  --white: #FFFFFF;
  --line: #E9DFD3;
  --error: #B3261E;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --max: 1440px;
  --gutter: clamp(20px, 4.5vw, 72px);
  --radius: 14px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anker (z. B. /quellen#q1) sollen nicht unter der festen Kopfzeile landen */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  font-variation-settings: "SOFT" 60;
}
h1 { font-size: clamp(38px, 5.6vw, 86px); }
h2 { font-size: clamp(30px, 3.8vw, 56px); }
h3 { font-size: 23px; letter-spacing: -0.01em; }

h1 em, h2 em {
  font-style: italic;
  color: var(--amber-dark);
}

p { margin: 0; }

.lead {
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--espresso-soft);
  max-width: 34em;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--espresso-soft);
  margin-bottom: 18px;
}

/* ---------- Tastatur: Fokus sichtbar, Navigation überspringbar ---------- */

/* Nur bei Tastaturfokus, Mausklicks bleiben ohne Ring. Eingabefelder haben
   ihren eigenen Rahmen (siehe Formulare), Chips ebenso. */
:focus-visible {
  outline: 3px solid var(--amber-dark);
  outline-offset: 3px;
}
.btn:focus-visible { outline-color: var(--espresso); }
/* Auf dunklem Grund wäre ein dunkler Ring unsichtbar */
.site-footer :focus-visible,
.split-card.dark :focus-visible,
.zoom-text :focus-visible,
.site-footer .btn:focus-visible,
.split-card.dark .btn:focus-visible { outline-color: var(--sand); }
.faq summary:focus-visible { outline-offset: 6px; border-radius: 6px; }
main:focus { outline: none; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--espresso);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Deckend statt durchscheinend: Beim Scrollen wächst auf der Startseite
     das Werkstattfoto zum Vollbild und läuft unter der Kopfzeile durch. Mit
     92 % Weiß und Unschärfe schimmerte es dunkel durch, Logo und Navigation
     standen dann auf einem grauen Schleier. */
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--line); }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { height: 30px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}
.nav a { text-decoration: none; }
.nav a:not(.btn) { padding: 10px 0; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
/* Anmelden für Anbieter:innen, auch auf dem Handy sichtbar; 44 px Zielfläche */
.nav a.nav-anmelden { padding: 12px 0; }

@media (max-width: 760px) {
  .nav { gap: 16px; font-size: 14px; }
}
@media (max-width: 560px) {
  .nav .hide-mobile { display: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 15px 26px;
  font: 600 16px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, background-color .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--amber); color: var(--espresso); }
.btn-primary:hover { background: #F5A862; box-shadow: 0 6px 18px -8px rgba(217,123,43,.7); }

.btn-dark { background: var(--espresso); color: var(--white); }
.btn-dark:hover { background: #4A3A2E; }

.btn-ghost {
  background: transparent;
  color: var(--espresso);
  box-shadow: inset 0 0 0 1.5px var(--espresso);
}
.btn-ghost:hover {
  background: var(--espresso);
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--espresso);
}

.btn-small { padding: 12px 18px; font-size: 14px; min-height: 44px; }

.btn[disabled] { opacity: .6; cursor: wait; }

.arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Bogen-Bilder (Motiv aus dem Logo) ---------- */

.arches {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
  padding: 0 clamp(14px, 2vw, 26px);
}
.arch {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 10px 10px;
  overflow: hidden;
  background: var(--sand);
}
.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.arch:hover img { transform: scale(1.04); }

/* ---------- Sections ---------- */

.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }
.section-sand { background: var(--sand); }

.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head h2 { margin-bottom: 18px; }

/* Raumtypen */

.spaces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.raeume-head { margin-bottom: 32px; }
.raeume-head h2 { margin-bottom: 0; }

.space-tag {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--espresso);
  background: var(--white);
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), border-color .2s, color .2s, background-color .2s;
}
.space-tag:hover {
  transform: scale(1.06);
  border-color: var(--amber);
  color: var(--amber-dark);
  background: #FFF8F0;
}
.space-tag.more {
  min-height: 44px;
  border-style: dashed;
  color: var(--espresso-soft);
  border-color: var(--espresso-soft);
}

/* Split-CTA (Home) */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.split-card {
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 320px;
}
.split-card p { max-width: 28em; }
.split-card .btn { margin-top: auto; align-self: flex-start; }
.split-card.light { background: var(--sand); }
.split-card.dark { background: var(--espresso); color: var(--white); }
.split-card.dark p { color: rgba(255,255,255,.75); }
.split-card .eyebrow { margin: 0; }
.split-card.dark .eyebrow { color: rgba(255,255,255,.6); }
.split-section { padding-top: 0; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* ---------- Landing-Page-Layout mit Formular ---------- */

.lp { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 110px); }

.lp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.lp-copy h1 { font-size: clamp(38px, 5.2vw, 62px); margin-bottom: 22px; }
.lp-copy .lead { margin-bottom: 36px; }

.benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.benefits li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
}
.benefits svg { margin-top: 4px; }
.benefits strong { display: block; font-weight: 600; }
.benefits span { color: var(--espresso-soft); }

@media (max-width: 900px) {
  .lp-grid { grid-template-columns: 1fr; }
}

/* ---------- Formulare ---------- */

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(24px, 3.5vw, 40px);
  box-shadow: 0 30px 60px -40px rgba(51,38,29,.35);
  position: sticky;
  top: 96px;
  scroll-margin-top: 96px;
}
@media (max-width: 900px) { .form-card { position: static; } }

.form-card h2 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 6px; }
.form-card .sub { color: var(--espresso-soft); margin-bottom: 26px; font-size: 16px; }

.progress {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
}
.progress i {
  height: 4px;
  flex: 1;
  border-radius: 4px;
  background: var(--line);
}
.progress i.on { background: var(--amber); }
/* Schritt x von 3: steht als Text über dem Balken, der Balken ist nur Bild. */
.schritt { font-size: 13px; font-weight: 600; color: var(--espresso-soft); margin: 0 0 8px; }

.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

label, .label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 7px;
}
.optional { font-weight: 400; color: var(--espresso-soft); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  width: 100%;
  font: 400 16px/1.4 var(--sans);
  color: var(--espresso);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2333261D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
textarea { resize: vertical; min-height: 96px; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(242,153,74,.2);
}
input.invalid, select.invalid { border-color: var(--error); }
.chips.invalid .chip span { border-color: var(--error); }

/* Chips (Mehrfachauswahl) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* Zielfläche fürs Handy */
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.chip span:hover { border-color: var(--espresso-soft); }
.chip input:checked + span {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--white);
}
.chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(242,153,74,.3); }

.consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  font-weight: 400;
  color: var(--espresso-soft);
  /* Rahmen und Innenabstand sind immer da, nur unsichtbar: Wird das Feld
     markiert, ändert sich allein die Farbe, und nichts springt. */
  margin: -6px -14px 16px;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: background-color .15s, box-shadow .15s;
}
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--espresso); }
/* Fehlt der Haken: Fläche und Rand in Rot, Text dunkel, das Kästchen umrandet.
   Die Meldung darunter sagt, was zu tun ist; die Farbe ist nicht allein. */
.consent.invalid { background: #FBEDEC; box-shadow: inset 0 0 0 1.5px var(--error); color: var(--espresso); }
.consent.invalid input { outline: 2px solid var(--error); outline-offset: 2px; }
.consent-fehler { color: var(--error); font-size: 14px; font-weight: 600; margin: -10px 0 18px; }
.consent-fehler[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

.hp { position: absolute; left: -9999px; }

.form-error {
  color: var(--error);
  font-size: 14px;
  margin: -8px 0 16px;
  display: none;
}
.form-error.show { display: block; }

.form-card .btn { width: 100%; }

.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-actions .btn { flex: 1; }

.fine { font-size: 13px; color: var(--espresso-soft); margin-top: 14px; text-align: center; }

/* ---------- Listing-Service: der kurze Weg über einen vorhandenen Link ---------- */

.listing-service {
  background: var(--sand);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 24px);
  margin-bottom: 24px;
}
.listing-service h3 {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 8px;
}
.listing-service > p {
  font-size: 15px;
  color: var(--espresso-soft);
  margin-bottom: 18px;
}
/* Auf Sand braucht das Eingabefeld eine eigene Kante, sonst verschwimmt es.
   Die zweite Regel muss sein: sonst schlägt die erste den roten Fehlerrahmen. */
.listing-service input[type="url"] { border-color: #DFCFBC; }
.listing-service input[type="url"].invalid { border-color: var(--error); }
.listing-service .field:last-of-type { margin-bottom: 16px; }

.hilfe {
  font-size: 13px;
  color: var(--espresso-soft);
  margin-top: 7px;
}

/* Zwei Wege, nicht zwei Pflichten: die Trennung macht die Wahl sichtbar */
.oder {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--espresso-soft);
  margin: 0 0 20px;
}
.oder::before, .oder::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.details-titel {
  font-size: 20px;
  margin-bottom: 16px;
}

/* ---------- Fotos: auswählen, ziehen, wieder wegnehmen ---------- */

/* Die Fläche ist ein <label> um ein echtes Dateifeld: Klick und Tastatur
   funktionieren dadurch von selbst, das Ziehen kommt nur dazu (WCAG 2.2:
   Ziehen darf nie der einzige Weg sein). */
.upload {
  display: block;
  position: relative;
  margin-bottom: 0;
  font-weight: 400;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload:hover { border-color: var(--amber); background: rgba(247,237,225,.5); }
.upload:focus-within {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(242,153,74,.2);
}
.upload.zieht { border-color: var(--amber); background: var(--sand); }

.upload-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--espresso);
}
.upload-text { display: block; text-align: left; line-height: 1.35; }
.upload-text b { display: block; font-size: 15px; font-weight: 600; }
.upload-text span { font-size: 13px; color: var(--espresso-soft); }

.fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.fotos li { position: relative; }
.fotos img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: var(--sand);
}
.fotos .titelbild {
  position: absolute;
  left: 5px;
  bottom: 5px;
  background: rgba(255,255,255,.92);
  color: var(--espresso);
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
}
/* 26px Kreis über der Ecke, die 44px Zielfläche macht das Padding darum. */
.fotos .weg {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--white);
}
.fotos .weg::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(51,38,29,.85);
}
.fotos .weg svg { position: relative; }
.fotos .weg:hover::before { background: var(--espresso); }
.fotos .weg:focus-visible { outline: 2px solid var(--amber); outline-offset: -10px; border-radius: 999px; }
.fotos li.laedt img { opacity: .45; }

/* Fehler bei der Auswahl stehen am Feld, nicht unten am Formular. */
.upload-fehler { margin: 8px 0 0; }
.fotos-zahl { margin-top: 10px; }
.fotos-zahl:empty { display: none; }

/* Der Fortschritt steht dort, wo auch ein Fehler stünde: direkt am Formular. */
.upload-status {
  font-size: 13px;
  color: var(--espresso-soft);
  margin: 10px 0 0;
}

/* Ein Hinweis, keine Frage: was mit dem Raum passiert, ohne Bedienelement. */
.hinweis {
  background: var(--sand);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.hinweis p { font-size: 14px; line-height: 1.5; color: var(--espresso-soft); }

/* Dieselbe Trennlinie wie bei „oder“, nur als leise Zwischenüberschrift. */
.oder-still { margin-top: 4px; }

/* Ein Hilfetext, der zu zwei Feldern gehört und deshalb unter beiden steht. */
.hilfe-los { margin: -11px 0 18px; }

/* Schritte / Erfolg */
.step-panel[hidden] { display: none; }

.success { text-align: center; padding: 12px 0; }
.success-mark {
  width: 64px; height: 74px;
  margin: 0 auto 22px;
  border: 3px solid var(--amber);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  display: grid;
  place-items: center;
  padding-top: 8px;
}
.success h2 { margin-bottom: 10px; }
.success p { color: var(--espresso-soft); margin-bottom: 22px; }

/* Konto anlegen, unter der Danke-Meldung: eigener Block, wieder linksbündig */
.konto {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.konto h3 { font-size: 20px; margin-bottom: 8px; }
.konto > p { font-size: 15px; color: var(--espresso-soft); margin-bottom: 18px; }
.konto input[readonly] { color: var(--espresso-soft); background: var(--sand); }
.konto[hidden], .konto form[hidden], .konto-danke[hidden] { display: none; }
.konto-text { font-size: 15px; color: var(--espresso-soft); margin-bottom: 18px; }
.konto [data-konto-zwei][hidden] { display: none; }
.konto-neu {
  display: inline-flex; align-items: center; min-height: 44px; margin-left: 14px; padding: 0 2px;
  background: none; border: 0; font: 500 14px var(--sans); color: var(--espresso);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.konto-neu[hidden] { display: none; }
.konto-danke { font-family: var(--serif); font-size: 20px; text-align: center; padding: 6px 0; }
.konto-danke .btn { margin-top: 14px; }
.success .konto + .btn { margin-top: 22px; }

.copy-link {
  display: flex;
  gap: 8px;
  background: var(--sand);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  align-items: center;
  font-size: 14px;
  text-align: left;
}
.copy-link code {
  flex: 1;
  font-family: var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.faq { max-width: 780px; }
.faq details {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  /* 44 px Zielfläche, ohne den Abstand zwischen den Fragen zu ändern */
  padding-block: 6px;
  margin-block: -6px;
  font-family: var(--serif);
  font-size: 21px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 24px;
  line-height: 1;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--espresso-soft); margin-top: 12px; max-width: 40em; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--espresso);
  color: var(--sand);
  padding: 64px 0 36px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(247,237,225,.15);
}
.footer-top img { height: 34px; width: auto; margin-bottom: 14px; }
.footer-claim { font-family: var(--serif); font-style: italic; font-size: 20px; opacity: .85; }
/* Was atelio ist, in einem Satz auf jeder Seite: für Menschen, die unten
   ankommen, und für Suchmaschinen und Sprachmodelle, die eine Seite ohne
   den Rest lesen. */
.footer-ueber { max-width: 34em; margin-top: 10px; font-size: 14px; line-height: 1.5; opacity: .72; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; font-size: 15px; }
.footer-links a { text-decoration: none; opacity: .85; padding: 10px 0; margin: -10px 0; } /* 44 px hoch */
.footer-links a:hover { opacity: 1; text-decoration: underline; }
.footer-bottom {
  padding-top: 24px;
  font-size: 13px;
  opacity: .6;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

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

.legal { max-width: 760px; padding: 64px 0 100px; }
.legal h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 32px; }
.legal h2 { font-size: 24px; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--espresso-soft); }
.legal ul { margin: 10px 0; padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal p + p { margin-top: 10px; }
.todo { background: #FFF1D6; padding: 0 4px; border-radius: 4px; color: var(--espresso); }

/* ---------- Kleine Einblende-Animation ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Feinschliff für sehr große Bildschirme und für Handys
   ============================================================ */

/* Sehr breite Monitore: Inhalt darf etwas mehr Fläche nutzen */
@media (min-width: 1800px) {
  :root { --max: 1600px; --gutter: 80px; }
}

/* Handys */
@media (max-width: 640px) {
  body { font-size: 16px; }

  .site-header .wrap { height: 64px; }
  .logo img { height: 26px; }

  .arches { gap: 12px; margin-top: 8px; }
  .arch { aspect-ratio: 3 / 3.6; }

  .section-head { margin-bottom: 32px; }
  .space-tag { padding: 8px 16px; }

  .form-card { padding: 22px 18px; border-radius: 20px; }
  .field { margin-bottom: 16px; }
  .lp { padding: 24px 0 56px; }
  .lp-copy .lead { margin-bottom: 28px; }

  .split-card { min-height: 0; }
  .footer-top { padding-bottom: 28px; }
}

/* Sehr schmale Handys */
@media (max-width: 380px) {
  .chip span { font-size: 14px; padding: 7px 12px; }
  .btn { padding: 14px 20px; font-size: 15px; min-height: 44px; }
}

/* ============================================================
   Zahlen-Abschnitt mit animierten Balken
   Jeder Balken steht für sich (eigene Quelle, eigene Studie),
   deshalb bewusst keine gemeinsame Achse.
   ============================================================ */

.zahlen { border-top: 1px solid var(--line); }

.bars {
  display: grid;
  gap: clamp(32px, 3.4vw, 48px);
  max-width: 940px;
}

.bar-row { display: grid; gap: 16px; }

.bar-head {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
}

.bar-value {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--espresso);
  flex: none;
  min-width: 2.6em;
}

.bar-label {
  flex: 1 1 240px;
  max-width: 26em;
  font-size: clamp(17px, 1.5vw, 22px);
  color: var(--espresso);
}

/* Sternchen, führt zur Quellen-Seite */
/* Espresso-soft statt Amber-dark: bei 14px reichte der Kontrast (3,1:1) nicht.
   Padding/Margin vergrößern die Tipp-Fläche, ohne den Textfluss zu ändern. */
.fn {
  text-decoration: none;
  color: var(--espresso-soft);
  font-size: .8em;
  vertical-align: super;
  padding: 8px 6px 8px 4px;
  margin: -8px -4px -8px 0;
}
.fn:hover { text-decoration: underline; }

/* Abbinder unter den FAQ-Listen: der Weg zu fragen, was dort nicht steht. */
.faq-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--espresso-soft);
}
.faq-note a { color: inherit; }

.bars-note {
  margin-top: 28px;
  font-size: 13px;
}
.bars-note a { color: var(--espresso-soft); text-decoration: none; }
.bars-note a:hover { text-decoration: underline; }

.bar-track {
  height: clamp(26px, 2.6vw, 38px);
  border-radius: 999px;
  background: var(--sand);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--c, var(--amber));
  transition: width 2.4s cubic-bezier(.16, .84, .28, 1);
  transition-delay: calc(var(--i, 0) * 320ms);
  will-change: width;
}

.bars.in .bar-fill { width: var(--w); }

@media (max-width: 640px) {
  .bar-head { gap: 12px; }
  .bar-value { min-width: 0; }
  .bar-label { flex-basis: 100%; }
  .bar-track { height: 22px; }
}

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


/* ============================================================
   Auftritt des Hero beim Laden
   ============================================================ */

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes archReveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.hs-copy .eyebrow,
.hs-copy h1,
.hs-copy .lead,
.hero-anmeldung,
.hero-note {
  animation: rise .9s cubic-bezier(.2, .7, .2, 1) backwards;
}
.hs-copy .eyebrow  { animation-delay: .05s; }
.hs-copy h1        { animation-delay: .15s; }
.hs-copy .lead     { animation-delay: .38s; }
.hero-anmeldung    { animation-delay: .52s; }
.hero-note         { animation-delay: .64s; }

/* Das große Fenster zieht sich über main.js auf, weil es clip-path auch beim Scrollen braucht. */
.arch-side {
  animation: archReveal 1.2s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: .45s;
}

/* ============================================================
   Hero mit Scroll-Zoom: aus dem linken Fenster wird der Hintergrund
   Kein Scroll-Jacking, die Seite läuft normal weiter.
   ============================================================ */

.hero-stage {
  height: 300vh;
  position: relative;
}

.hs-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* iOS: die Leiste unten deckt sonst den Rand der Bühne ab */
  display: flex;
  align-items: flex-start;
  padding-top: clamp(80px, 8.5vh, 130px);
  overflow: hidden;
}

.hs-sticky .hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.hs-copy {
  opacity: var(--copy, 1);
  transform: translateY(calc(-40px * (1 - var(--copy, 1))));
}
.hs-copy h1 { margin-bottom: 26px; }
.hs-copy .lead { margin-bottom: 26px; }

/* Platzhalter für das wachsende Fenster */
.arch-slot {
  height: min(58vh, 620px);
  border-radius: 999px 999px 10px 10px;
  margin-bottom: clamp(32px, 6vh, 72px);
}

/* Die Bilder wachsen mit der Fensterhöhe mit, dadurch bleibt oben
   und unten weniger leere Fläche stehen. */
.hs-sticky .arch-side { height: min(50vh, 540px); aspect-ratio: auto; }

.arch-side { opacity: var(--seite, 1); }

/* Das wachsende Fenster liegt fest über dem ganzen Bildschirm. Welcher Teil
   zu sehen ist (clip-path) und wo das Foto liegt (transform), setzt main.js;
   bis dahin ist nichts zu sehen. */
.zoom-arch {
  /* Klebend statt fest: Auf dem Handy fährt die Adressleiste beim Scrollen
     stufenlos ein und aus. Ein festes Element hängt dabei am sichtbaren
     Ausschnitt, der Rest der Seite am Layout. Beide laufen dann für eine
     halbe Sekunde auseinander, und genau das war das Flackern. Klebend
     hängt das Fenster am selben Bezug wie der Platzhalter darunter. */
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  /* Höhe und Ränder setzt main.js in festen Pixeln. Der negative obere Rand
     hebt das Fenster auf den Anfang der Bühne, der untere nimmt ihm seine
     Höhe wieder, damit es im Fluss keinen Platz braucht. */
  height: 100vh;
  height: 100lvh;
  margin: -100vh 0 -100vh;
  margin: -100svh 0 -100lvh;
  overflow: hidden;
  z-index: 2;
  background: var(--sand);
  pointer-events: none;
  clip-path: inset(50%);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.zoom-arch img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none; /* main.js bemaßt das Foto größer als den Bildschirm */
  transform-origin: 0 0;
  will-change: transform;
  /* Sobald der Text erscheint, wird das Bild leicht unscharf.
     Das macht die Schrift lesbar und kaschiert die grobe Auflösung. */
  filter: blur(calc(2px * var(--t, 0)));
}

.zoom-schleier {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(75% 55% at 50% 48%, rgba(26, 18, 11, .5), rgba(26, 18, 11, .22) 75%),
    linear-gradient(180deg, rgba(26, 18, 11, .38), rgba(26, 18, 11, .64));
  opacity: var(--t, 0);
  pointer-events: none;
}

.zoom-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 16px * (1 - var(--t, 0))));
  width: min(1180px, 88vw);
  color: var(--white);
  opacity: var(--t, 0);
  padding: 0 24px;
  text-shadow: 0 2px 24px rgba(30, 20, 12, .5);
}

.zoom-text .stage-eyebrow,
.zoom-text h2,
.zoom-text .stage-sub { text-align: center; }

.zoom-text .stage-sub {
  max-width: 44em;
  margin: 0 auto;
}

/* Die drei Punkte erscheinen etwas später als die Überschrift */
.zoom-punkte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 4vh, 54px);
  padding-top: clamp(20px, 3vh, 34px);
  border-top: 1px solid rgba(255, 255, 255, .28);
  opacity: var(--t2, 0);
  transform: translateY(calc(14px * (1 - var(--t2, 0))));
  transition: none;
}

.zoom-punkt { text-align: left; }

.zoom-punkt h3 {
  font-size: clamp(18px, 1.5vw, 23px);
  margin-bottom: 6px;
  color: var(--white);
}

.zoom-punkt p {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .84);
}

@media (max-width: 860px) {
  /* Die Kopfzeile bleibt über dem Zoom-Fenster, deshalb sitzt der Text
     etwas unter der Mitte statt genau darin. */
  .zoom-text { top: calc(50% + 32px); }
  .zoom-text h2 { font-size: clamp(26px, 6.4vw, 38px); }
  .zoom-text .stage-sub { font-size: 15px; }
  .zoom-punkte {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 20px;
    padding-top: 16px;
  }
  .zoom-punkt h3 { font-size: 16px; margin-bottom: 2px; }
  .zoom-punkt p { font-size: 13.5px; }
}

.stage-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
  margin-bottom: 14px;
}
.zoom-text h2 {
  font-size: clamp(34px, 5.5vw, 76px);
  margin-bottom: 14px;
}
.stage-sub {
  font-size: clamp(17px, 1.6vw, 22px);
  color: rgba(255, 255, 255, .85);
}

/* Kurze Handys (iPhone SE): ohne den Untertitel passt der Problem-Text ins Bild */
@media (max-width: 860px) and (max-height: 700px) {
  .zoom-text .stage-sub { display: none; }
  .zoom-punkte { margin-top: 14px; }
}

@media (max-width: 860px) {
  .hero-stage { height: 280vh; }
  .hs-sticky { align-items: flex-start; padding-top: 74px; }
  .hs-sticky .hero-grid { grid-template-columns: 1fr; gap: 18px; align-content: start; }
  .hs-copy h1 { font-size: clamp(32px, 8.6vw, 44px); margin-bottom: 16px; }
  .hs-copy .lead { font-size: 16px; margin-bottom: 20px; }
  .hero-note { font-size: 13px; margin-top: 10px; }
  .arches { gap: 18px; padding: 0 10px; }
  .arch-slot { height: min(32vh, 260px); margin-bottom: 22px; }
  .hs-sticky .arch-side { height: min(28vh, 230px); }
}

/* Bei reduzierter Bewegung gibt es keinen Zoom. Dann darf der Problem-Abschnitt
   aber nicht verschwinden: Foto und Text stehen ganz normal unter dem Hero. */
@media (prefers-reduced-motion: reduce) {
  .hero-stage { height: auto; }
  .hs-sticky {
    position: static;
    display: block;
    height: auto;
    padding: 48px 0 0;
    overflow: visible;
  }
  .hs-copy .eyebrow, .hs-copy h1, .hs-copy .lead, .hero-anmeldung, .hero-note,
  .arch-side, .zoom-arch { animation: none; }

  /* Ohne wachsendes Fenster bleibt vom Platzhalter nur ein Loch */
  .arch-slot { display: none; }
  .arches { grid-template-columns: 1fr; justify-items: center; }
  .hs-sticky .arch-side { width: min(100%, 420px); }

  .zoom-arch {
    position: static;
    inset: auto;
    height: auto;
    width: auto;
    clip-path: none;
    transform: none;
    will-change: auto;
    width: auto;
    max-width: var(--max);
    margin: clamp(56px, 8vw, 96px) auto 0;
    padding: 0 var(--gutter) clamp(64px, 9vw, 120px);
    background: none;
    pointer-events: auto;
  }
  .zoom-arch img {
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    will-change: auto;
    aspect-ratio: 3 / 2;
    max-height: 70vh;
    border-radius: 24px;
    transform: none;
    filter: none;
  }
  .zoom-schleier { display: none; }
  .zoom-text {
    position: static;
    transform: none;
    opacity: 1;
    width: auto;
    padding: clamp(32px, 4vw, 48px) 0 0;
    color: var(--espresso);
    text-shadow: none;
  }
  .zoom-text .stage-eyebrow,
  .zoom-text .stage-sub,
  .zoom-punkt p { color: var(--espresso-soft); }
  .zoom-punkt h3 { color: var(--espresso); }
  .zoom-punkte {
    opacity: 1;
    transform: none;
    border-top-color: var(--line);
  }
}

/* Feines Korn über der ganzen Seite, nimmt der Fläche das Sterile */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ============================================================
   Wunsch-Kachel bei den Raumtypen
   ============================================================ */

button.raeume-head { margin-bottom: 32px; }
.raeume-head h2 { margin-bottom: 0; }

.space-tag {
  font-family: var(--serif);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
button.space-tag:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--espresso);
}
button.space-tag[aria-expanded="true"] {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--espresso);
  border-style: solid;
}

.wunsch {
  margin: 28px auto 0;
  max-width: 640px;
  background: var(--sand);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 30px);
}
.wunsch[hidden] { display: none; }

.wunsch-frage {
  font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 18px;
}

.wunsch-felder {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .wunsch-felder { grid-template-columns: 1fr; }
}

.wunsch .btn { width: 100%; margin-top: 4px; }

.wunsch-danke {
  font-family: var(--serif);
  font-size: 22px;
  text-align: center;
  padding: 10px 0;
}
.wunsch-danke[hidden] { display: none; }

/* ============================================================
   Anmeldung direkt im Hero
   ============================================================ */

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

.hero-anmeldung { max-width: 30em; }

.hero-form {
  display: flex;
  gap: 10px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 6px 6px 6px 8px;
  transition: border-color .15s, box-shadow .15s;
}
/* kurzes Aufleuchten, wenn man über "Warteliste" hierher kommt */
@keyframes blinken {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 153, 74, 0); }
  35% { box-shadow: 0 0 0 6px rgba(242, 153, 74, .35); }
}
.hero-form.blinkt { animation: blinken 1.2s ease; border-color: var(--amber); }

.hero-form:focus-within {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(242, 153, 74, .2);
}
.hero-anmelde-form[hidden] { display: none; }

/* Die Fehlerzeile gehört ins Formular, sonst findet main.js sie nicht.
   Das Eingabefeld hat keinen eigenen Rand, also färbt sich die ganze Box. */
.hero-anmelde-form .form-error { margin: 10px 6px 0; }
.hero-form:has(input.invalid) { border-color: var(--error); }
.hero-form:has(input.invalid):focus-within { box-shadow: 0 0 0 4px rgba(179, 38, 30, .15); }

.hero-form input[type="email"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 10px;
  font-size: 16px;
}
.hero-form input[type="email"]:focus { outline: none; box-shadow: none; }
.hero-form input.invalid { box-shadow: none; }
.hero-form .btn { flex: none; padding: 14px 22px; }

.hero-danke {
  font-family: var(--serif);
  font-size: 22px;
  padding: 14px 4px;
}
.hero-danke[hidden] { display: none; }
.hero-danke a { text-underline-offset: 4px; }

.hero-note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--espresso-soft);
  line-height: 1.5;
}
.hero-note strong { color: var(--espresso); }
.hero-note a { color: inherit; }

.hero-anbieter {
  margin-top: 18px;
  width: 100%;
  border-radius: 999px;
}

@media (max-width: 520px) {
  .hero-form { flex-direction: column; border-radius: 20px; padding: 8px; }
  .hero-form .btn { width: 100%; }
}

/* ============================================================
   Überschriften bauen sich wortweise auf
   ============================================================ */

.kinetik .wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Die Maske ist nur zeilenhoch und schnitte sonst Unterlängen ab (j, g, p).
     Das Padding senkt die Kante, die negative Margin hält das Layout gleich. */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.kinetik .wort > span {
  display: inline-block;
  /* 120 statt 105 Prozent: die Startposition muss unter der tieferen Kante liegen */
  transform: translateY(120%);
  transition: transform .75s cubic-bezier(.19, .84, .26, 1);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.kinetik.in .wort > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .kinetik .wort > span { transform: none; transition: none; }
}

/* ============================================================
   So geht's: der Abschnitt bleibt stehen, die Schritte wechseln
   ============================================================ */

.ablauf {
  height: 260vh;
  position: relative;
  border-top: 1px solid var(--line);
}
/* Direkt nach dem Hero trennt schon die Bildkante. Die Linie läge sonst
   über dem Foto, das beim Rausscrollen ein Stück in den Abschnitt ragt. */
.hero-stage + .ablauf { border-top: 0; }

.ablauf-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
}

.ablauf-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}

.ablauf-kopf h2 { margin-bottom: 28px; }

.ablauf-punkte { display: flex; gap: 8px; }
.ablauf-punkte i {
  width: 34px;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  transition: background-color .35s;
}
.ablauf-punkte i.an { background: var(--amber); }

.ablauf-liste {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}

/* Die orange Box zeigt, wo man gerade ist, und rutscht beim Scrollen weiter */
.ablauf-marker {
  position: absolute;
  left: -18px;
  right: -18px;
  top: 0;
  height: 0;
  border-radius: 18px;
  background: rgba(242, 153, 74, .14);
  border-left: 4px solid var(--amber);
  transition: top .45s cubic-bezier(.2, .75, .2, 1), height .45s cubic-bezier(.2, .75, .2, 1);
  pointer-events: none;
}

.ablauf-schritt {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  opacity: .32;
  transition: opacity .4s ease, transform .4s ease;
}
.ablauf-schritt.aktiv { opacity: 1; }

.ablauf-nr {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--espresso-soft);
  transition: color .4s;
}
.ablauf-schritt.aktiv .ablauf-nr { color: var(--amber-dark); }

.ablauf-schritt h3 { margin-bottom: 8px; grid-column: 2; }
.ablauf-schritt p { grid-column: 2; color: var(--espresso-soft); max-width: 34em; }
.ablauf-nr { grid-row: span 2; }

@media (max-width: 860px) {
  .ablauf { height: 230vh; }
  .ablauf-grid { grid-template-columns: 1fr; gap: 24px; }
  .ablauf-sticky { align-items: flex-start; padding-top: 96px; }
  .ablauf-kopf h2 { margin-bottom: 18px; }
  .ablauf-schritt { grid-template-columns: 46px 1fr; gap: 12px; padding: 14px 0; }
  .ablauf-marker { left: -10px; right: -10px; border-radius: 14px; }
  .ablauf-nr { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ablauf { height: auto; }
  .ablauf-sticky { position: static; height: auto; padding: 72px 0; }
  .ablauf-schritt { opacity: 1; }
}

/* Flache Bildschirme: Hero etwas kompakter, damit beide Knöpfe sichtbar bleiben */
@media (min-width: 861px) and (max-height: 980px) {
  .hs-copy h1 { font-size: clamp(34px, 3.7vw, 58px); margin-bottom: 18px; }
  .hs-copy .lead { font-size: 17px; margin-bottom: 20px; }
  .hero-note { font-size: 13px; margin-top: 10px; }
  .hero-anbieter { margin-top: 14px; }
  .arch-slot { height: min(52vh, 520px); margin-bottom: 36px; }
  .hs-sticky .arch-side { height: min(46vh, 460px); }
}

/* ============================================================
   So geht's: Schritte links, Handy rechts
   ============================================================ */

.ablauf-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 7vw, 120px);
}

.ablauf-kopf { margin-bottom: clamp(20px, 3vh, 36px); }
.ablauf-kopf h2 { margin-bottom: 20px; }

.ablauf-handy { display: flex; justify-content: center; }

.handy {
  position: relative;
  width: min(24vw, 320px, 36vh);
  aspect-ratio: 9 / 19.2;
  padding: 9px;
  border-radius: 48px;
  background: #1D1612;
  box-shadow:
    0 0 0 2px #3A2E26,
    0 40px 80px -30px rgba(51, 38, 29, .55);
}

.handy-insel {
  position: absolute;
  top: 4.2%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 4.4%;
  border-radius: 999px;
  background: #1D1612;
  z-index: 2;
}

/* Bildschirm: oben weißer Streifen für die Kamera-Insel, darunter die App */
.handy-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 39px;
  overflow: hidden;
  background: var(--white);
}

/* Die drei Bildschirme liegen übereinander und blenden weich ineinander */
.app-bild {
  position: absolute;
  left: 0;
  right: 0;
  top: 10%;
  width: 100%;
  height: 84%;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2, .75, .2, 1);
}
.app-bild.aktiv { opacity: 1; transform: none; }

/* Home-Balken unten, wie bei einem echten Handy */
.handy-screen::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2.2%;
  transform: translateX(-50%);
  width: 34%;
  height: 4px;
  border-radius: 4px;
  background: #1D1612;
  z-index: 2;
}

@media (max-width: 1100px) and (min-width: 861px) {
  .handy { width: min(28vw, 280px, 34vh); }
}

/* Handy: oben Überschrift, dann Handy, darunter nur der gerade aktive Schritt */
@media (max-width: 860px) {
  .ablauf-grid { grid-template-columns: 1fr; gap: 18px; }
  .ablauf-text { display: contents; }
  .ablauf-kopf { order: 1; margin-bottom: 0; }
  .ablauf-kopf h2 { font-size: clamp(26px, 7.4vw, 34px); margin-bottom: 12px; }
  .ablauf-handy { order: 2; }
  .ablauf-liste { order: 3; }
  .handy { width: auto; height: min(42vh, 380px); padding: 7px; border-radius: 36px; }
  .handy-screen { border-radius: 30px; }
  .ablauf-marker { display: none; }
  .ablauf-schritt { display: none; border-top: 0; padding: 0; opacity: 1; }
  .ablauf-schritt.aktiv { display: grid; }
}

/* ============================================================
   Anmeldebox etwas größer + Plakette "Nur 50 Plätze"
   ============================================================ */

.hero-anmeldung {
  position: relative;
  max-width: 34em;
  padding-top: 18px;
}

.hero-form { padding: 8px 8px 8px 12px; }
.hero-form input[type="email"] { font-size: 17px; padding: 15px 12px; }
.hero-form .btn { padding: 17px 26px; font-size: 16.5px; }

/* Plakette sitzt oben auf dem Rand der Box, wie ein kleines Etikett */
.plakette {
  position: absolute;
  top: 0;
  left: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 12px;
  background: var(--espresso);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px -10px rgba(51, 38, 29, .6);
  animation: plaketteRein .6s cubic-bezier(.2, 1.3, .4, 1) .8s backwards;
}

.plakette-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(242, 153, 74, .7);
  animation: puls 2s ease-out infinite;
}

@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(242, 153, 74, .7); }
  70%  { box-shadow: 0 0 0 8px rgba(242, 153, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 153, 74, 0); }
}
@keyframes plaketteRein {
  from { opacity: 0; transform: translateY(6px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .hero-form .btn { padding: 15px 22px; }
  .plakette { left: 16px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .plakette, .plakette-punkt { animation: none; }
}


/* ============================================================
   Laufband oben auf jeder Seite
   ============================================================ */

.laufband {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 40px;
  padding: 0 var(--gutter);
  background: var(--amber);
  color: var(--espresso);
  user-select: none;
  touch-action: pan-y;
}

.laufband-fenster {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.laufband-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .75, .2, 1);
}
.laufband-text.aktiv { opacity: 1; transform: none; }
.laufband-text.raus { opacity: 0; transform: translateX(-28px); }
.laufband.rueckwaerts .laufband-text { transform: translateX(-28px); }
.laufband.rueckwaerts .laufband-text.aktiv { transform: none; }
.laufband.rueckwaerts .laufband-text.raus { transform: translateX(28px); }

.laufband-pfeil {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--espresso);
  cursor: pointer;
  transition: background-color .15s;
}
.laufband-pfeil:hover { background: rgba(51, 38, 29, .1); }
/* Pfeile: eine Zielfläche von 44 px, der Kreis bleibt 28 px. */
.laufband-pfeil { position: relative; }
.laufband-pfeil::after { content: ""; position: absolute; inset: -8px -4px; } /* 44 px hoch, seitlich nicht in den Nachbarn */
.laufband-pfeil svg[hidden] { display: none; }

@media (max-width: 520px) {
  .laufband { height: 36px; gap: 8px; }
  .laufband-text { font-size: 12px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .laufband-text { transition: opacity .2s; transform: none !important; }
}

/* ============================================================
   404: kurz sagen, was los ist, und die zwei Wege anbieten
   ============================================================ */

.nicht-gefunden .eyebrow { margin-bottom: 14px; }
.nicht-gefunden > p { max-width: 34em; }
.nicht-gefunden-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}