/* TripHar — gemeinsames Stylesheet für Startseite, /creator/ und /betriebe/.
   Farben 1:1 aus docs/BRAND.md (dark-first, Koralle × Indigo, kein Magenta).
   Regeln: Skill design-standard (my-brain). Kein Verlaufs-Text, keine Emojis
   als Symbole, Schrift nur vom System (keine fremden Server, Rechts-Vorprüfung
   L4: wer die Seite nur ansieht, verbindet sich mit niemandem außer uns).
   Die Rechtstexte (/terms, /privacy, /support, Impressum) haben eigene Styles
   und bleiben bewusst unberührt. */

:root{
  --grund:#0B0B12; --sektion:#13131C; --karte:#1C1C28; --karte-hoch:#26263A;
  --koralle:#FF4D6D; --koralle-warm:#FF6B5A; --indigo:#5B4BD6;
  --koralle-soft:rgba(255,77,109,.16); --indigo-soft:rgba(91,75,214,.22);
  --text:#F4F3F8; --text-2:rgba(244,243,248,.68); --text-3:rgba(244,243,248,.50);
  --linie:rgba(255,255,255,.08); --linie-stark:rgba(255,255,255,.16);
  --auf-koralle:#1A0B12; --gut:#4ADE80;
  --horizont:linear-gradient(90deg,#FF6B5A 0%,#FF4D6D 48%,#5B4BD6 100%);

  --schrift-display:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  --r-s:12px; --r-m:18px; --r-l:24px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:40px; --s-7:64px; --s-8:96px; --s-9:144px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-kurz:120ms; --t-mittel:220ms; --t-lang:420ms;

  --z-grund:0; --z-inhalt:1; --z-kopf:10; --z-hinweis:20;
  --breite:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; -webkit-text-size-adjust:100%; scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0; overflow-x:clip; background:var(--grund); color:var(--text);
  font:17px/1.6 var(--schrift); -webkit-font-smoothing:antialiased;
  caret-color:var(--koralle); scrollbar-color:var(--karte-hoch) var(--grund);
}
::selection{background:var(--koralle); color:var(--auf-koralle)}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-underline-offset:3px; text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--koralle); outline-offset:3px; border-radius:6px}
.tab{font-variant-numeric:tabular-nums}
.nur-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Aurora: Signatur-Hintergrund oben (BRAND.md §Hintergrund), nur Deko */
.aurora{position:absolute; top:0; left:0; right:0; height:820px; overflow:hidden; z-index:var(--z-grund); pointer-events:none;
  background:
    radial-gradient(40% 46% at 16% 18%, rgba(255,107,90,.26), transparent 70%),
    radial-gradient(40% 44% at 72% 6%, rgba(255,77,109,.26), transparent 70%),
    radial-gradient(46% 50% at 62% 48%, rgba(91,75,214,.24), transparent 72%);
  filter:blur(48px); -webkit-mask-image:linear-gradient(#000 60%,transparent); mask-image:linear-gradient(#000 60%,transparent)}

.wrap{position:relative; z-index:var(--z-inhalt); max-width:var(--breite); margin:0 auto; padding:0 var(--s-5)}
@media (max-width:520px){ .wrap{padding:0 var(--s-4)} }

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.kopf{position:sticky; top:0; z-index:var(--z-kopf);
  background:rgba(11,11,18,.72); -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid transparent}
.kopf.gescrollt{border-bottom-color:var(--linie)}
.kopf .wrap{display:flex; align-items:center; gap:var(--s-5); height:64px}
.marke{display:flex; align-items:center; gap:var(--s-2); text-decoration:none; font:700 20px/1 var(--schrift-display); letter-spacing:-.01em}
.marke img{width:28px; height:28px; border-radius:8px}
.navi{display:flex; gap:var(--s-5); margin-left:auto; align-items:center}
.navi a{color:var(--text-2); text-decoration:none; font-size:15px; font-weight:600}
.navi a:hover{color:var(--text)}
.navi a[aria-current="page"]{color:var(--text)}
.navi a.sprache{font-size:13px; letter-spacing:.04em; padding:6px 8px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--linie-stark)}
@media (max-width:760px){ .navi a:not(.knopf):not(.sprache){display:none} }

/* ── Knöpfe ───────────────────────────────────────────────────────────── */
.knopf{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); white-space:nowrap;
  min-height:48px; padding:0 var(--s-5); border-radius:var(--r-s); border:0; cursor:pointer;
  font:700 16px/1 var(--schrift); text-decoration:none;
  background:var(--koralle); color:var(--auf-koralle)}
.knopf:hover{background:#FF6680}
.knopf:active{transform:translateY(1px)}
.knopf:disabled{opacity:.55; cursor:default; transform:none}
.knopf.klein{min-height:38px; padding:0 var(--s-4); font-size:14px}
.navi a.knopf{color:var(--auf-koralle)}
.knopf.leise{background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--linie-stark)}
.knopf.leise:hover{background:rgba(255,255,255,.05)}
@media (prefers-reduced-motion:no-preference){
  .knopf{transition:background-color var(--t-kurz) var(--ease-out), transform var(--t-kurz) var(--ease-out), box-shadow var(--t-kurz) var(--ease-out)}
}

/* ── Typo ─────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--schrift-display); font-weight:800; letter-spacing:-.025em; margin:0}
h1{font-size:clamp(44px,6.4vw,80px); line-height:1.02}
h2{font-size:clamp(32px,4.2vw,52px); line-height:1.06}
h3{font-size:clamp(22px,2.2vw,26px); line-height:1.2; letter-spacing:-.015em}
.k{color:var(--koralle)}
.lead{font-size:clamp(18px,1.7vw,21px); line-height:1.5; color:var(--text-2); max-width:40ch; margin:var(--s-5) 0 0}
.text{color:var(--text-2); max-width:62ch}
.text p{margin:0 0 var(--s-4)}
.text b,.text strong{color:var(--text); font-weight:650}
.klein-text{font-size:14px; color:var(--text-3)}

/* ── Abschnitte ───────────────────────────────────────────────────────── */
.abschnitt{padding:var(--s-8) 0}
.abschnitt + .abschnitt{border-top:1px solid var(--linie)}
.kopfzeile{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-6); align-items:end; margin-bottom:var(--s-7)}
.kopfzeile .text{margin:0}
@media (max-width:860px){ .kopfzeile{grid-template-columns:minmax(0,1fr); gap:var(--s-4); margin-bottom:var(--s-6)} }
.horizontlinie{height:2px; border:0; margin:0; background:var(--horizont); opacity:.9}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative; padding:var(--s-7) 0 var(--s-8)}
.hero-raster{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--s-7); align-items:center}
.hero-bild{position:relative; justify-self:end; width:min(100%,460px)}
.hero-bild::before{content:""; position:absolute; inset:8% -6% -6% 8%; border-radius:var(--r-l); background:var(--indigo-soft); filter:blur(40px); z-index:-1}
.hero-bild img{border-radius:var(--r-l); box-shadow:0 0 0 1px var(--linie)}
.fakten{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin:var(--s-6) 0 0; padding:0; list-style:none; color:var(--text-3); font-size:14px; font-weight:600}
.fakten li{display:flex; align-items:center; gap:var(--s-2)}
.fakten li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--koralle)}
@media (max-width:860px){
  .hero{padding:var(--s-6) 0 var(--s-7)}
  .hero-raster{grid-template-columns:minmax(0,1fr); gap:var(--s-6)}
  .hero-bild{justify-self:start; width:min(56%,240px)}
}
@media (max-width:520px){ .warteliste .knopf{flex:1 1 100%} }

/* ── Warteliste ───────────────────────────────────────────────────────── */
.warteliste{display:flex; gap:var(--s-2); flex-wrap:wrap; max-width:520px; margin:var(--s-6) 0 0}
.warteliste input[type=email]{flex:1 1 240px; min-width:0; min-height:52px; padding:0 var(--s-4);
  font:16px var(--schrift); color:var(--text); background:var(--karte-hoch);
  border:1px solid var(--linie-stark); border-radius:var(--r-s)}
.warteliste input[type=email]::placeholder{color:var(--text-3)}
.warteliste input[type=email]:hover{border-color:rgba(255,255,255,.26)}
.warteliste input[type=email]:focus{outline:none; border-color:var(--koralle); box-shadow:0 0 0 3px var(--koralle-soft)}
.warteliste .knopf{min-height:52px}
.hinweis{font-size:14px; color:var(--text-2); margin:var(--s-3) 0 0; min-height:1.5em}
.hinweis.fehler{color:var(--koralle)}
.hinweis.gut{color:var(--gut); font-weight:600}
.recht{font-size:14px; color:var(--text-3); margin:var(--s-1) 0 0}
.recht a{color:var(--text-2)}
.recht a:hover{color:var(--text)}

/* ── Warum es TripHar gibt + Stimmungsbilder (KI, Hinweis im Fuß) ────── */
.herkunft-raster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-7); align-items:center}
.brief{margin-top:var(--s-5); font-size:clamp(17px,1.4vw,19px)}
.unterschrift{display:flex; flex-direction:column; gap:2px; margin-top:var(--s-5) !important; padding-top:var(--s-4); border-top:1px solid var(--linie); max-width:28ch}
.unterschrift b{font-weight:700}
.unterschrift span{font-size:14px; color:var(--text-3)}
.stimmung{margin:0}
.stimmung img{width:100%; border-radius:var(--r-l); box-shadow:0 0 0 1px var(--linie), 0 24px 64px rgba(0,0,0,.35)}
.stimmung figcaption{margin-top:var(--s-2); font-size:12px; color:var(--text-3)}
@media (max-width:860px){ .herkunft-raster{grid-template-columns:minmax(0,1fr); gap:var(--s-6)} }

/* ── Ablauf (Vorher / Unterwegs / Danach) ─────────────────────────────── */
.etappe{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-7); padding:var(--s-7) 0; border-top:1px solid var(--linie); align-items:center}
.etappe:first-of-type{border-top:0; padding-top:0}
.etappe-name{display:block; font:700 15px/1 var(--schrift); color:var(--koralle); margin-bottom:var(--s-4)}
.etappe h3{margin-bottom:var(--s-4)}
.etappe-liste{margin:var(--s-4) 0 0; padding:0; list-style:none; color:var(--text-2)}
.etappe-liste li{padding:var(--s-2) 0 var(--s-2) var(--s-5); position:relative}
.etappe-liste li::before{content:""; position:absolute; left:2px; top:.95em; width:10px; height:2px; border-radius:2px; background:var(--koralle)}
@media (max-width:860px){ .etappe{grid-template-columns:minmax(0,1fr); gap:var(--s-6); padding:var(--s-6) 0} }
.vorher{padding:0 0 var(--s-7)}
.wege{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-6)}
.weg{display:flex; flex-direction:column; padding:var(--s-6) var(--s-5) var(--s-5); border-radius:var(--r-l); background:var(--sektion); border:1px solid var(--linie)}
.weg h3{margin-bottom:var(--s-4)}
.weg .text p{margin:0}
.weg .app-bild{margin-top:auto; padding-top:var(--s-6); width:min(100%,260px)}
@media (max-width:860px){ .wege{grid-template-columns:minmax(0,1fr)} }
.vorher + .etappe{border-top:1px solid var(--linie); padding-top:var(--s-7)}
@media (max-width:860px){ .vorher + .etappe{padding-top:var(--s-6)} }

/* App-Ausschnitte: nachgebaute Oberflächen der App, ohne Geräte-Rahmen.
   Inhalte sind Beispiele (Bildunterschrift sagt das), keine Nutzer, keine Zahlen. */
.ausschnitt{margin:0; padding:var(--s-5); border-radius:var(--r-l); background:var(--sektion); border:1px solid var(--linie)}
.ausschnitt figcaption{margin-top:var(--s-4); font-size:13px; color:var(--text-3)}
.ui{background:var(--karte); border:1px solid var(--linie); border-radius:var(--r-m); padding:var(--s-4)}
.ui + .ui{margin-top:var(--s-3)}
.blase{display:inline-block; max-width:85%; padding:var(--s-3) var(--s-4); border-radius:18px 18px 6px 18px; background:var(--indigo); color:#fff; font-size:15px; margin:0 0 var(--s-3) auto}
.blase-zeile{display:flex}
.ui-titel{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-3); font:700 17px/1.3 var(--schrift-display)}
.ui-titel span{font:600 13px/1 var(--schrift); color:var(--text-3)}
.tage{list-style:none; margin:var(--s-3) 0 0; padding:0}
.tage li{display:grid; grid-template-columns:80px minmax(0,1fr); gap:var(--s-3); padding:var(--s-2) 0; border-top:1px solid var(--linie); font-size:15px}
.tage li b{color:var(--text-3); font-weight:600; font-size:13px; padding-top:2px}
.ui-knopf{display:block; margin-top:var(--s-3); padding:var(--s-2) 0; text-align:center; border-radius:10px; background:var(--koralle); color:var(--auf-koralle); font:700 14px/1.4 var(--schrift)}
.schalter-zeile{display:flex; justify-content:space-between; align-items:center; gap:var(--s-4)}
.schalter-zeile p{margin:var(--s-1) 0 0; font-size:13px; color:var(--text-3)}
.schalter{flex:none; width:51px; height:31px; border-radius:999px; background:var(--karte-hoch); position:relative; box-shadow:inset 0 0 0 1px var(--linie-stark)}
.schalter::after{content:""; position:absolute; top:3px; left:3px; width:25px; height:25px; border-radius:50%; background:#E9E8EE}
.schalter.an{background:var(--koralle)}
.schalter.an::after{left:23px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:650; background:var(--koralle-soft); color:var(--text)}
.chip svg{width:14px; height:14px}
.noten{list-style:none; margin:var(--s-3) 0 0; padding:0}
.noten li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-3); align-items:center; padding:6px 0; font-size:14px; color:var(--text-2)}
.punkte{display:flex; gap:4px}
.punkte i{width:8px; height:8px; border-radius:50%; background:var(--karte-hoch)}
.punkte i.voll{background:var(--koralle)}

/* Bilder der App (Nachbau aus dem App-Code, `marketing/screens/`, bis echte
   Simulator-Screenshots sie ersetzen). Kein Geräte-Rahmen, nur die Bildschirmfläche. */
.app-bild{margin:0; justify-self:center; width:min(100%,300px)}
.app-bild img{width:100%; border-radius:36px; box-shadow:0 0 0 1px var(--linie-stark), 0 24px 64px rgba(0,0,0,.45)}
.app-bild figcaption{margin-top:var(--s-3); font-size:13px; color:var(--text-3); text-align:center}
.hero-bild.app-hero{width:min(100%,300px)}
.hero-bild.foto{width:min(100%,440px)}
.hero-bild.foto img{border-radius:var(--r-l); box-shadow:0 0 0 1px var(--linie), 0 30px 90px rgba(0,0,0,.45)}
.hero-bild.foto figcaption{margin-top:var(--s-2); font-size:12px; color:var(--text-3)}
.hero-bild.app-hero img{border-radius:36px; box-shadow:0 0 0 1px var(--linie-stark), 0 30px 90px rgba(0,0,0,.5)}
@media (max-width:860px){ .hero-bild.app-hero{width:min(64%,260px)} }

/* ── Alles, was eine Reise braucht (Katalog statt Kacheln) ───────────── */
.alles-liste{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--s-6)}
.alles-liste li{padding:var(--s-5) 0; border-top:1px solid var(--linie); color:var(--text-2)}
.alles-liste b{display:block; color:var(--text); font-weight:650; margin-bottom:var(--s-2)}
.alles-liste li:nth-child(-n+3){border-top-color:var(--linie-stark)}
.bald{display:block; margin-top:var(--s-2); font-style:normal; font-size:14px; color:var(--text-3)}
@media (max-width:960px){ .alles-liste{grid-template-columns:repeat(2,minmax(0,1fr))} .alles-liste li:nth-child(3){border-top-color:var(--linie)} }
@media (max-width:620px){ .alles-liste{grid-template-columns:minmax(0,1fr)} .alles-liste li:nth-child(2){border-top-color:var(--linie)} }

/* ── Nicht nur auf Reisen (Startseite #zuhause) ───────────────────────── */
.zuhause{border-radius:var(--r-l); padding:var(--s-7) var(--s-6); background:var(--sektion); border:1px solid var(--linie)}
.zuhause .kopfzeile{margin-bottom:var(--s-6)}
.woche{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-6) var(--s-5)}
.woche li{position:relative; padding-top:var(--s-6); color:var(--text-2)}
.woche li::before{content:""; position:absolute; top:4px; left:0; right:calc(-1 * var(--s-5)); height:1px; background:var(--linie-stark)}
.woche li:last-child::before{right:0}
.woche li::after{content:""; position:absolute; top:0; left:0; width:9px; height:9px; border-radius:50%; background:var(--koralle)}
.woche .zeit{display:block; font-size:14px; font-weight:650; color:var(--koralle); margin-bottom:var(--s-2)}
.woche b{display:block; color:var(--text); font-weight:650; margin-bottom:var(--s-2)}
.zuhause .notiz{margin:var(--s-6) 0 0}
@media (max-width:960px){ .woche{grid-template-columns:repeat(2,minmax(0,1fr))} .woche li::before{right:0} }
@media (max-width:520px){ .woche{grid-template-columns:minmax(0,1fr)} .zuhause{padding:var(--s-6) var(--s-4)} }

/* ── Sicherheit ───────────────────────────────────────────────────────── */
.sicher{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s-7)}
.sicher-liste{list-style:none; margin:0; padding:0; border-top:1px solid var(--linie)}
.sicher-liste li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:var(--s-4); padding:var(--s-5) 0; border-bottom:1px solid var(--linie)}
.sicher-liste svg{width:24px; height:24px; color:var(--koralle); margin-top:2px}
.sicher-liste b{display:block; color:var(--text); font-weight:650; margin-bottom:var(--s-1)}
.sicher-liste span{color:var(--text-2)}
@media (max-width:860px){ .sicher{grid-template-columns:minmax(0,1fr); gap:var(--s-6)} }

/* ── Bento ────────────────────────────────────────────────────────────── */
.bento{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--s-3)}
.kachel{border-radius:var(--r-l); background:var(--sektion); border:1px solid var(--linie); padding:var(--s-6) var(--s-5)}
.kachel h3{margin-bottom:var(--s-3)}
.kachel p{margin:0; color:var(--text-2)}
.kachel .klein-text{margin-top:var(--s-4)}
.b-4{grid-column:span 4} .b-2{grid-column:span 2} .b-3{grid-column:span 3}
.kachel.betont{background:linear-gradient(160deg,rgba(91,75,214,.30),rgba(19,19,28,0) 70%), var(--sektion)}
.preis{font:800 clamp(36px,4vw,48px)/1 var(--schrift-display); letter-spacing:-.02em; margin:var(--s-4) 0 var(--s-1)}
.preis small{font:600 16px var(--schrift); color:var(--text-2); letter-spacing:0}
.vorteile{list-style:none; margin:var(--s-4) 0 0; padding:0; color:var(--text-2); font-size:15px}
.vorteile li{padding:6px 0; border-top:1px solid var(--linie)}
@media (max-width:960px){ .b-4,.b-2,.b-3{grid-column:span 6} }

/* ── Für wen noch ─────────────────────────────────────────────────────── */
.zielgruppen{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s-3)}
.ziel{position:relative; overflow:hidden; border-radius:var(--r-l); padding:var(--s-6); background:var(--sektion); border:1px solid var(--linie); display:flex; flex-direction:column; gap:var(--s-4); min-height:340px}
.ziel p{margin:0; color:var(--text-2); max-width:44ch}
.ziel .knopf{align-self:flex-start; margin-top:auto}
.ziel.creator{background:radial-gradient(80% 90% at 100% 0%, rgba(255,77,109,.22), transparent 60%), var(--sektion)}
@media (max-width:860px){ .zielgruppen{grid-template-columns:minmax(0,1fr)} .ziel{min-height:0} }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--linie); max-width:820px}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  padding:var(--s-5) 0; font:700 19px/1.35 var(--schrift-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none; width:20px; height:20px; color:var(--text-3)}
.faq summary:hover svg{color:var(--text)}
.faq details[open] summary svg{transform:rotate(45deg); color:var(--koralle)}
.faq .antwort{padding:0 0 var(--s-5); color:var(--text-2); max-width:62ch}
.faq .antwort p{margin:0 0 var(--s-3)}
@media (prefers-reduced-motion:no-preference){ .faq summary svg{transition:transform var(--t-mittel) var(--ease-out), color var(--t-kurz)} }

/* ── Schluss ──────────────────────────────────────────────────────────── */
.schluss{position:relative; overflow:hidden; border-radius:var(--r-l); padding:var(--s-8) var(--s-6); text-align:center; background:var(--sektion); border:1px solid var(--linie)}
.schluss::before{content:""; position:absolute; left:-10%; right:-10%; bottom:-60%; height:100%;
  background:radial-gradient(50% 60% at 30% 40%, rgba(255,107,90,.28), transparent 70%), radial-gradient(50% 60% at 70% 40%, rgba(91,75,214,.30), transparent 70%); filter:blur(40px); pointer-events:none}
.schluss > *{position:relative}
.schluss h2{max-width:16ch; margin:0 auto}
.schluss p{color:var(--text-2); margin:var(--s-4) auto var(--s-6); max-width:44ch}
/* Warteliste im Schluss: mittig, Hinweis und Datenschutz-Zeile direkt darunter */
.schluss .warteliste{margin:0 auto; justify-content:center}
.schluss p.hinweis{margin:var(--s-3) auto 0}
.schluss p.recht{margin:var(--s-1) auto 0}
/* Zwei Wege am Ende einer Seite (Creator, Betriebe): Einladung und Warteliste */
.ziel h2{font-size:clamp(26px,2.8vw,34px); line-height:1.12}
.ziel .warteliste{margin:0}
.ziel p.hinweis{margin:calc(-1 * var(--s-2)) 0 0}
.ziel p.recht{margin:calc(-1 * var(--s-3)) 0 0}

/* Vorabzugang (Betriebe und Guides, /betriebe/; Creator, /creator/): Rolle, Name, Stadt, Mail,
   Link, bei Creatorn „Was du machst“. Gleiche Felder wie die Warteliste, nur untereinander. */
.vorab-form{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-4); max-width:none; margin:0}
.vorab-form .rolle, .vorab-form .knopf, .vorab-form .breit{grid-column:1 / -1}
.vorab-form .feld{display:flex; flex-direction:column; gap:var(--s-2); min-width:0}
.vorab-form label, .vorab-form legend{font-size:14px; font-weight:600; color:var(--text-2)}
.vorab-form input[type=text], .vorab-form input[type=email], .vorab-form textarea{flex:none; width:100%; min-width:0; min-height:52px; padding:0 var(--s-4);
  font:16px var(--schrift); color:var(--text); background:var(--karte-hoch);
  border:1px solid var(--linie-stark); border-radius:var(--r-s)}
.vorab-form textarea{min-height:96px; padding:var(--s-3) var(--s-4); line-height:1.5; resize:vertical}
.vorab-form input[type=text]::placeholder, .vorab-form textarea::placeholder{color:var(--text-3)}
.vorab-form input[type=text]:hover, .vorab-form textarea:hover{border-color:rgba(255,255,255,.26)}
.vorab-form input[type=text]:focus, .vorab-form textarea:focus{outline:none; border-color:var(--koralle); box-shadow:0 0 0 3px var(--koralle-soft)}
.rolle{display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0; padding:0; border:0}
.rolle legend{width:100%; padding:0; margin:0 0 var(--s-2)}
.rolle label{flex:1 1 140px; position:relative; color:var(--text)}
.rolle input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.rolle span{display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:var(--r-s);
  font-size:16px; font-weight:650; box-shadow:inset 0 0 0 1px var(--linie-stark)}
.rolle label:hover span{box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.rolle input:checked + span{background:var(--koralle-soft); box-shadow:inset 0 0 0 1px var(--koralle)}
.rolle input:focus-visible + span{outline:2px solid var(--koralle); outline-offset:2px}
@media (prefers-reduced-motion:no-preference){ .rolle span{transition:background-color var(--t-kurz) var(--ease-out), box-shadow var(--t-kurz) var(--ease-out)} }
@media (max-width:520px){ .vorab-form{grid-template-columns:minmax(0,1fr)} }

/* ── Fuß ──────────────────────────────────────────────────────────────── */
.fuss{margin-top:var(--s-8); padding:var(--s-7) 0 var(--s-7); border-top:1px solid var(--linie); color:var(--text-2); font-size:15px}
.fuss-raster{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:var(--s-6)}
.fuss h2{font:700 14px/1 var(--schrift); letter-spacing:0; color:var(--text); margin:0 0 var(--s-4)}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li{padding:5px 0}
.fuss a{color:var(--text-2); text-decoration:none}
.fuss a:hover{color:var(--text); text-decoration:underline}
.fuss .claim{max-width:30ch; margin:var(--s-4) 0 0}
.fuss .unten{margin-top:var(--s-7); font-size:13px; color:var(--text-3)}
@media (max-width:860px){ .fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))} .fuss-raster > :first-child{grid-column:1/-1} }

/* ── Hinweis nach Stripe (/?stripe=fertig|erneuern) ───────────────────── */
.stripe-hinweis{position:relative; z-index:var(--z-hinweis); background:var(--karte); border-bottom:1px solid var(--linie)}
.stripe-hinweis .wrap{display:flex; gap:var(--s-3); align-items:center; padding-top:var(--s-3); padding-bottom:var(--s-3); font-size:15px}
.stripe-hinweis svg{flex:none; width:20px; height:20px; color:var(--gut)}
.stripe-hinweis.erneuern svg{color:var(--koralle)}

/* ── Unterseiten ──────────────────────────────────────────────────────── */
.seiten-hero{position:relative; padding:var(--s-7) 0 var(--s-7)}
.seiten-hero h1{font-size:clamp(40px,5.6vw,68px); max-width:16ch}
.schritte{list-style:none; margin:0; padding:0; counter-reset:schritt; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-5)}
.schritte li{counter-increment:schritt; padding-top:var(--s-5); border-top:2px solid var(--linie-stark); color:var(--text-2)}
.schritte li:first-child{border-top-color:var(--koralle)}
.schritte li::before{content:counter(schritt); display:block; font:800 32px/1 var(--schrift-display); color:var(--text); margin-bottom:var(--s-3)}
.schritte b{display:block; color:var(--text); margin-bottom:var(--s-1)}
.schritte.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){ .schritte,.schritte.drei{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .schritte,.schritte.drei{grid-template-columns:minmax(0,1fr)} }
.zwei-spalten{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-7)}
@media (max-width:860px){ .zwei-spalten{grid-template-columns:minmax(0,1fr); gap:var(--s-6)} }
.liste-strich{list-style:none; margin:0; padding:0; border-top:1px solid var(--linie)}
.liste-strich li{padding:var(--s-4) 0; border-bottom:1px solid var(--linie); color:var(--text-2)}
.liste-strich li b{display:block; color:var(--text); font-weight:650}
.notiz{border-left:2px solid var(--koralle); padding:var(--s-1) 0 var(--s-1) var(--s-4); color:var(--text-2); max-width:62ch}

/* ── Creator: Kriterien als Vergleich (wird unter 760 px zu Blöcken) ─── */
.vergleich{width:100%; border-collapse:collapse; font-size:16px}
.vergleich th,.vergleich td{text-align:left; vertical-align:top; padding:var(--s-4) var(--s-4) var(--s-4) 0; border-bottom:1px solid var(--linie)}
.vergleich thead th{font:700 18px/1.3 var(--schrift-display); color:var(--text); border-bottom-color:var(--linie-stark); padding-top:0}
.vergleich thead th:nth-child(2){color:var(--koralle)}
.vergleich tbody th{width:22%; color:var(--text); font-weight:650}
.vergleich td{width:39%; color:var(--text-2)}
.vergleich td ul{margin:var(--s-2) 0 0; padding-left:1.1em}
.vergleich td li + li{margin-top:var(--s-1)}
.vergleich .klein-text{display:block; margin-top:var(--s-2); font-size:14px; color:var(--text-3)}
.vergleich-fuss{margin:var(--s-5) 0 0; color:var(--text-2); max-width:72ch}
@media (max-width:760px){
  .vergleich thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .vergleich,.vergleich tbody,.vergleich tr,.vergleich th,.vergleich td{display:block; width:auto}
  .vergleich tr{padding:var(--s-4) 0; border-bottom:1px solid var(--linie)}
  .vergleich th,.vergleich td{border:0; padding:0}
  .vergleich tbody th{margin-bottom:var(--s-2)}
  .vergleich td + td{margin-top:var(--s-3)}
  .vergleich td::before{content:attr(data-art); display:block; font-size:14px; font-weight:650; color:var(--text)}
  .vergleich td:first-of-type::before{color:var(--koralle)}
}

/* ── Creator: was eine Reise vollständig macht ────────────────────────── */
.haken{list-style:none; margin:0; padding:0; border-top:1px solid var(--linie)}
.haken li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:var(--s-3); padding:var(--s-3) 0; border-bottom:1px solid var(--linie); color:var(--text-2)}
.haken svg{width:20px; height:20px; color:var(--koralle); margin-top:2px}
.liste-titel{margin:0 0 var(--s-4)}
.liste-fuss{margin:var(--s-4) 0 0}

/* ── Einblenden beim Scrollen (nur Deko, nur ohne reduzierte Bewegung) ── */
@media (prefers-reduced-motion:no-preference){
  .js .zeigen{opacity:0; transform:translateY(16px); transition:opacity var(--t-lang) var(--ease-out), transform var(--t-lang) var(--ease-out)}
  .js .zeigen.da{opacity:1; transform:none}
}