/* WeeMeetly – weemeetly.com. Designsystem „Armband“ (docs/DESIGN.md): Sonnengelb auf Aubergine. Keine externen Quellen. */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/BricolageGrotesque_700Bold.ttf") format("truetype"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/BricolageGrotesque_800ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Figtree_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Figtree_600SemiBold.ttf") format("truetype"); }

:root {
  color-scheme: light dark;
  --bg: #F2EEF3; --surface: #FBF8FB; --surface-alt: #E7E1EA; --text: #241B2C; --muted: #5E5368; --border: #CEC4D3;
  --primary: #FFC531; --on-primary: #1F1200; --ink: #7A5200; --primary-soft: #FFD866;
  --sun: #FFC93C; --on-sun: #1F1200;
  --signal: #EC4D78; --signal-soft: #FFDCE5; --signal-text: #B0194A;
  --brand-a: #2B1F36; --brand-b: #3D2B4A; --on-brand: #FFFFFF; --on-brand-muted: #DCCFE6;
  --focus: #241B2C;
  --shadow: 0 1px 2px rgba(36, 27, 44, .06), 0 12px 32px -12px rgba(36, 27, 44, .22);
  /* Garne (personPalette, Hell): Faden / weich / Tinte */
  --kirsche: #AB4046; --kirsche-soft: #FED6D5; --kirsche-ink: #8C3439;
  --himmel: #0070B0; --himmel-soft: #C7E6FD; --himmel-ink: #005B90;
  --bernstein: #995700; --bernstein-soft: #F5DDC1; --bernstein-ink: #7D4700;
  --veilchen: #7951AB; --veilchen-soft: #E6DBFB; --veilchen-ink: #62428C;
  --gras: #267D30; --gras-soft: #D0EACF; --gras-ink: #1E6626;
  --beere: #A4406B; --beere-soft: #FBD6E2; --beere-ink: #863357;
  --petrol: #007E8F; --petrol-soft: #BFEBF0; --petrol-ink: #006675;
  --koralle: #A8471B; --koralle-soft: #FDD8CA; --koralle-ink: #8A3915;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --text-font: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1B1521; --surface: #261E2D; --surface-alt: #322839; --text: #F4EEF6; --muted: #B6AABF; --border: #4A3E54;
    --primary: #FFB84D; --on-primary: #2B1700; --ink: #FFC670; --primary-soft: #4A3412;
    --sun: #FFD25E; --on-sun: #2B1700;
    --signal: #FF86C0; --signal-soft: #4A2438; --signal-text: #FFA3CF;
    --brand-a: #2B1F36; --brand-b: #3D2B4A;
    --focus: #F4EEF6;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -14px rgba(0, 0, 0, .6);
    --kirsche: #FB9797; --kirsche-soft: #55292A; --kirsche-ink: #FB9797;
    --himmel: #69C1FC; --himmel-soft: #113C56; --himmel-ink: #69C1FC;
    --bernstein: #E7AA5B; --bernstein-soft: #4C320A; --bernstein-ink: #E7AA5B;
    --veilchen: #C6A5F7; --veilchen-soft: #3E2F54; --veilchen-ink: #C6A5F7;
    --gras: #85CC87; --gras-soft: #204122; --gras-ink: #85CC87;
    --beere: #F496BA; --beere-soft: #522939; --beere-ink: #F496BA;
    --petrol: #3BCDDC; --petrol-soft: #004148; --petrol-ink: #3BCDDC;
    --koralle: #F89D79; --koralle-soft: #542B1C; --koralle-ink: #F89D79;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--text-font); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sun); color: var(--on-sun); }

/* Sprachumschaltung: Inhalte beider Sprachen im Dokument, die inaktive ist ausgeblendet */
html[data-lang="de"] body [lang="en"], html[data-lang="en"] body [lang="de"] { display: none !important; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem); }
h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }

/* ---------- Kopf ---------- */
.site-header { position: relative; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); border-radius: 12px; }
.brand img { width: 40px; height: 40px; border-radius: 11px; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; }
.lang-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-alt); }
.lang-switch button {
  min-width: 48px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font: 600 .9375rem/1 var(--text-font); cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.lang-switch button:not([aria-pressed="true"]):hover { color: var(--text); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: 24px 0; overflow: hidden; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; padding-block: 32px 24px; } }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: var(--primary-soft); color: var(--ink); font-weight: 600; font-size: .9375rem;
}
.pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.hero h1 { font-size: clamp(3rem, 1.4rem + 8vw, 6rem); margin-top: 20px; }
.hero h1 em { font-style: normal; color: var(--ink); }
.lead { margin-top: 24px; max-width: 34rem; font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.4rem); line-height: 1.5; color: var(--text); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); font: 600 1.0625rem/1 var(--text-font); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px var(--primary); }
.btn-soft { background: var(--primary-soft); color: var(--ink); }
.soon { color: var(--muted); font-size: 1rem; }
.soon strong { color: var(--text); font-weight: 600; }

/* Signal-Karte: Mini-UI-Attrappe (Illustration) */
.mock { position: relative; margin: 0; padding: 8px 0 0; }
.sun-disc {
  position: absolute; right: -8%; top: -6%; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: var(--sun); opacity: .95;
}
@media (prefers-color-scheme: dark) { .sun-disc { background: var(--primary-soft); opacity: 1; } }
.signal-card {
  position: relative; max-width: 440px; margin-inline: auto; padding: 22px 22px 20px; border-radius: 28px;
  background: var(--surface); box-shadow: var(--shadow); transform: rotate(1.4deg);
}
.signal-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.signal-card h2 { font-size: 1.65rem; letter-spacing: -.015em; }
.live { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--signal-soft); color: var(--signal-text); font-weight: 600; font-size: .875rem; }
.lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); animation: lamp 2.4s ease-in-out infinite; }
@keyframes lamp { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: .55; } }
.thread-line { display: flex; gap: 4px; margin-top: 14px; height: 6px; }
.thread-line i { flex: 1; border-radius: 3px; }
.rows { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; }
.rows li:first-child { background: var(--primary-soft); }
.rows .what { font-weight: 600; }
.rows .who { display: block; font-size: .875rem; color: var(--muted); line-height: 1.3; }
.rows li:first-child .who { color: var(--text); }
.stack { display: flex; flex-shrink: 0; }
.av {
  display: grid; place-items: center; width: 38px; height: 38px; margin-left: -9px; border-radius: 50%;
  font: 700 .9375rem/1 var(--display); border: 2.5px solid var(--c); box-shadow: 0 0 0 3px var(--surface);
  background: var(--s); color: var(--k);
}
.rows li:first-child .av { box-shadow: 0 0 0 3px var(--primary-soft); }
.stack .av:first-child { margin-left: 0; }
.av.kirsche { --c: var(--kirsche); --s: var(--kirsche-soft); --k: var(--kirsche-ink); }
.av.himmel { --c: var(--himmel); --s: var(--himmel-soft); --k: var(--himmel-ink); }
.av.bernstein { --c: var(--bernstein); --s: var(--bernstein-soft); --k: var(--bernstein-ink); }
.av.veilchen { --c: var(--veilchen); --s: var(--veilchen-soft); --k: var(--veilchen-ink); }
.av.gras { --c: var(--gras); --s: var(--gras-soft); --k: var(--gras-ink); }
.av.beere { --c: var(--beere); --s: var(--beere-soft); --k: var(--beere-ink); }
.av.petrol { --c: var(--petrol); --s: var(--petrol-soft); --k: var(--petrol-ink); }
.av.koralle { --c: var(--koralle); --s: var(--koralle-soft); --k: var(--koralle-ink); }
.t-kirsche { background: var(--kirsche); } .t-himmel { background: var(--himmel); } .t-bernstein { background: var(--bernstein); }
.t-veilchen { background: var(--veilchen); } .t-gras { background: var(--gras); } .t-beere { background: var(--beere); }
.t-petrol { background: var(--petrol); } .t-koralle { background: var(--koralle); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { padding: 8px 14px; border-radius: 999px; background: var(--surface-alt); color: var(--text); font-size: .9375rem; font-weight: 600; }
.chip.on { background: var(--primary); color: var(--on-primary); }
.mock figcaption { margin: 22px auto 0; max-width: 440px; font-size: .875rem; color: var(--muted); text-align: center; }

/* ---------- Armband ---------- */
.band-strip { position: relative; margin-top: 48px; transform: rotate(-1.6deg); width: 108%; margin-left: -4%; }
.band { width: 100%; height: clamp(84px, 14vw, 150px); }
.band-weave { animation: weave 70s linear infinite; }
.band-fringe { transform-origin: 1080px 75px; animation: sway 7s ease-in-out infinite alternate; }
@keyframes weave { to { transform: translateX(-288px); } }
@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.8deg); } }
.band .y0 { stroke: #FB9797; } .band .y1 { stroke: #69C1FC; } .band .y2 { stroke: #E7AA5B; } .band .y3 { stroke: #C6A5F7; }
.band .y4 { stroke: #85CC87; } .band .y5 { stroke: #F496BA; } .band .y6 { stroke: #3BCDDC; } .band .y7 { stroke: #F89D79; }
.band .y8 { stroke: #A1B1FF; } .band .y9 { stroke: #B9BF5F; } .band .y10 { stroke: #E39BDC; } .band .y11 { stroke: #56D0AF; }

/* ---------- Abschnitte ---------- */
section { padding-block: 72px; }
@media (min-width: 720px) { section { padding-block: 104px; } }
.kicker { color: var(--ink); font-weight: 600; margin-bottom: 12px; }
.section-lead { margin-top: 16px; max-width: 38rem; color: var(--muted); font-size: 1.1875rem; line-height: 1.55; }

.brand-block {
  position: relative; isolation: isolate; overflow: clip;
  margin-inline: 0; padding: 48px 24px; border-radius: 28px; color: var(--on-brand);
  background: linear-gradient(160deg, var(--brand-b), var(--brand-a));
}
/* sehr dezente Garnpunkte und ein Sonnenschimmer; die Ebene ist groesser als der Block und driftet nur bei erlaubter Bewegung */
.brand-block::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -8%; opacity: .26; pointer-events: none;
  background:
    radial-gradient(circle, #FB9797 0 3px, transparent 3.5px) 12% 18% / 340px 280px,
    radial-gradient(circle, #69C1FC 0 2.5px, transparent 3px) 70% 40% / 300px 340px,
    radial-gradient(circle, #E7AA5B 0 3px, transparent 3.5px) 40% 80% / 380px 300px,
    radial-gradient(circle, #85CC87 0 2.5px, transparent 3px) 85% 10% / 320px 360px,
    radial-gradient(circle, #C6A5F7 0 3px, transparent 3.5px) 25% 55% / 360px 320px,
    radial-gradient(circle, #F496BA 0 2.5px, transparent 3px) 60% 90% / 300px 300px,
    radial-gradient(circle, #3BCDDC 0 3px, transparent 3.5px) 5% 85% / 400px 340px,
    radial-gradient(60% 50% at 85% 8%, rgba(255, 201, 60, .22), transparent 70%);
}
@media (min-width: 720px) { .brand-block { padding: 72px 64px; border-radius: 40px; } }
.brand-block .kicker { color: var(--sun); }
.brand-block h2 { color: var(--on-brand); max-width: 16ch; }
.brand-block p { color: var(--on-brand-muted); max-width: 36rem; margin-top: 20px; font-size: 1.1875rem; }
.yarn-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 0; }
.yarn-list li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--on-brand); font-size: .9375rem; }
.yarn-list li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--yc); }
.brand-split { display: grid; gap: 40px; }
.brand-block .band-strip { margin-top: 8px; transform: rotate(0); width: 100%; margin-left: 0; }

.yl-kirsche { --yc: #FB9797; } .yl-koralle { --yc: #F89D79; } .yl-bernstein { --yc: #E7AA5B; } .yl-olive { --yc: #B9BF5F; }
.yl-gras { --yc: #85CC87; } .yl-jade { --yc: #56D0AF; } .yl-petrol { --yc: #3BCDDC; } .yl-himmel { --yc: #69C1FC; }
.yl-indigo { --yc: #A1B1FF; } .yl-veilchen { --yc: #C6A5F7; } .yl-orchidee { --yc: #E39BDC; } .yl-beere { --yc: #F496BA; }
.yl-pistazie { --yc: #BAE089; } .yl-fuchsie { --yc: #FFB1E6; } .yl-schiefer { --yc: #98BCDC; } .yl-pflaume { --yc: #E8C3E4; }
.yl-kornblume { --yc: #72E0FF; } .yl-rosenholz { --yc: #DAA8B0; } .yl-karamell { --yc: #FBC77E; } .yl-flieder { --yc: #CDC6FF; }
.yl-moos { --yc: #ABC097; } .yl-mohn { --yc: #FFB39F; } .yl-lagune { --yc: #5CE8F4; } .yl-zimt { --yc: #CFB199; }
.yl-lavendel { --yc: #AFD2FF; } .yl-senf { --yc: #EAD070; } .yl-tanne { --yc: #9DE1D1; } .yl-rubin { --yc: #FFAFCB; }
.yl-farn { --yc: #8CE9B0; } .yl-graphit { --yc: #B8B6BB; }
.brand-art { display: none; }
@media (min-width: 900px) {
  .brand-split { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 56px; }
  .brand-art { display: block; width: 280px; height: 280px; border-radius: 56px; transform: rotate(4deg); box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .55); }
}

.features { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 720px) { .features { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.feature { position: relative; padding: 32px 28px 32px; border-radius: 28px; background: var(--surface); }
.feature::before { content: ""; position: absolute; left: 28px; top: 0; width: 64px; height: 8px; border-radius: 0 0 8px 8px; background: var(--c); }
.feature:nth-child(1) { --c: var(--signal); }
.feature:nth-child(2) { --c: var(--himmel); }
.feature:nth-child(3) { --c: var(--gras); }
.feature:nth-child(4) { --c: var(--bernstein); }
.feature h3 { margin-top: 12px; }
.feature p { margin-top: 12px; color: var(--muted); }
.feature .more { margin-top: 16px; font-weight: 600; color: var(--text); font-size: .9375rem; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 48px 0 0; display: grid; gap: 32px; }
@media (min-width: 840px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.steps li { counter-increment: step; position: relative; padding-top: 80px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--sun); color: var(--on-sun); font: 800 1.9rem/1 var(--display);
}
.steps li:nth-child(2)::before { background: var(--primary); color: var(--on-primary); }
.steps li:nth-child(3)::before { background: var(--signal); color: #33091A; }
@media (prefers-color-scheme: dark) { .steps li:nth-child(3)::before { color: #33091A; } }
.steps p { margin-top: 10px; color: var(--muted); }

.tinted { background: var(--surface-alt); }
.faq { margin-top: 40px; display: grid; gap: 8px; max-width: 46rem; }
.faq details { border-radius: 20px; background: var(--surface); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative; font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; border-radius: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq .answer { padding: 0 24px 22px; color: var(--muted); }
.faq .answer p + p { margin-top: 10px; }

.notify { text-align: center; }
.notify .inner { max-width: 40rem; margin-inline: auto; }
.notify h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3rem); }
.notify p { margin-top: 16px; color: var(--muted); font-size: 1.1875rem; }
.notify .cta-row { justify-content: center; }
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.store-btn { background: var(--brand-a); color: var(--on-brand); }
@media (prefers-color-scheme: dark) { .store-btn { background: var(--surface-alt); } }

/* ---------- Fuss ---------- */
.site-footer { padding-block: 40px 56px; border-top: 1px solid var(--border); color: var(--muted); font-size: .9375rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.site-footer nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; }
.site-footer a { color: var(--text); padding: 10px 0; display: inline-block; }
/* Schalter "Animationen: an/aus" (fx.js blendet ihn ein; Zustand per aria-pressed und html.no-motion) */
.motion-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; background: transparent;
  color: var(--muted); font: 500 .9375rem/1 var(--text-font); cursor: pointer; border-radius: 999px;
}
.motion-toggle:hover { color: var(--text); }
.mt-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--border); transition: background-color .2s ease; }
.mt-track::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}
.motion-toggle[aria-pressed="true"] .mt-track { background: var(--primary); box-shadow: none; }
.motion-toggle[aria-pressed="true"] .mt-track::after { transform: translateX(14px); background: var(--on-primary); }
.mt-off, .no-motion .mt-on { display: none; }
.no-motion .mt-off { display: inline; }

/* ---------- Rechtsseiten ---------- */
.legal { padding-block: 32px 80px; }
.legal .wrap { max-width: 800px; }
.legal h1 { font-size: clamp(1.75rem, .9rem + 4.2vw, 3.8rem); overflow-wrap: anywhere; }
.legal h2 { font-size: 1.6rem; margin-top: 48px; letter-spacing: -.01em; }
.legal h3 { font-size: 1.2rem; margin-top: 24px; }
.legal p, .legal ul { margin-top: 12px; }
.legal ul { padding-left: 1.3em; }
.legal li + li { margin-top: 6px; }
.notice { margin-top: 24px; padding: 18px 20px; border-radius: 20px; background: var(--primary-soft); color: var(--text); border-left: 6px solid var(--primary); }
.notice strong { color: var(--ink); }
.gap-mark { padding: 1px 8px; border-radius: 8px; background: var(--sun); color: var(--on-sun); font-weight: 600; overflow-wrap: anywhere; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.back { display: inline-block; margin-top: 8px; padding: 10px 0; font-weight: 600; }

.err { min-height: 60vh; display: grid; align-content: center; padding-block: 48px; }
.err h1 { font-size: clamp(4rem, 2rem + 14vw, 9rem); color: var(--ink); }

/* ---------- Bewegung (Standard: an, unabhaengig von prefers-reduced-motion; Schalter im Fuss setzt html.no-motion) ----------
   Skript fx.js ergaenzt Klassen: js, r/in/done, go, off, hid. Versteckte Startzustaende nur mit .js (ohne JS bleibt alles sichtbar). */

:root {
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  interpolate-size: allow-keywords;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .22 5%, .62 11%, .97 19%, 1.09 27%, 1.07 36%, 1.01 46%, .99 56%, 1 70%, 1); }
}
@keyframes rise { from { opacity: 0; translate: 0 16px; } }
@keyframes pop-in { from { opacity: 0; scale: .85; } }

/* Hero-Auftritt: reines CSS beim Seitenaufbau, kein Warten auf Skripte */
.hero .pill { animation: rise .6s var(--ease) both; }
.hero h1 .ln { display: inline-block; animation: rise .8s var(--ease) .1s both; }
.hero h1 em.ln { animation-delay: .24s; }
.hero .lead { animation: rise .7s var(--ease) .4s both; }
.hero .cta-row { animation: rise .7s var(--ease) .55s both; }
.sun-disc { animation: pop-in 1.1s var(--ease) .25s both; }
.signal-card { animation: rise .8s var(--ease) .35s both; }
.mock figcaption { animation: rise .6s var(--ease) 1s both; }

/* Armband: Faeden werden nacheinander eingewebt (Skript setzt --i und go), danach atmen die Franzen */
@keyframes weave-in {
  from { opacity: 0; stroke-dasharray: 270; stroke-dashoffset: 270; }
  to { opacity: 1; stroke-dasharray: 270; stroke-dashoffset: 0; }
}
@keyframes fringe-in { from { opacity: 0; translate: -18px 0; } }
@keyframes breathe { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
.js .band-strip:not(.go) :is(.band-weave, .band-fringe) path { opacity: 0; }
.go .band-weave path { animation: weave-in .8s var(--ease) calc(var(--i, 0) * 12ms) both; }
.go .band-fringe path {
  transform-box: fill-box; transform-origin: 0 50%;
  animation: fringe-in .9s var(--ease) calc(1s + var(--i, 0) * 60ms) both, breathe calc(8s + var(--i, 0) * .7s) ease-in-out calc(2.4s + var(--i, 0) * .3s) infinite alternate;
}

/* Signal-Karte: Faeden laufen ein, Zeilen fuellen sich, "genug Leute" poppt (fx.js setzt go und streut danach Konfetti) */
.rows li { position: relative; isolation: isolate; }
.thread-line i:nth-child(2), .chip:nth-child(2) { --k: 1; } .thread-line i:nth-child(3), .chip:nth-child(3) { --k: 2; }
.thread-line i:nth-child(4) { --k: 3; } .thread-line i:nth-child(5) { --k: 4; } .thread-line i:nth-child(6) { --k: 5; }
.rows li:nth-child(2) { --row: 1; } .rows li:nth-child(3) { --row: 2; } .rows li:nth-child(4) { --row: 3; }
.stack .av:nth-child(2) { --a: 1; } .stack .av:nth-child(3) { --a: 2; }
@keyframes thread-in { from { scale: 0 1; } }
@keyframes row-in { from { opacity: 0; translate: -14px 0; } }
@keyframes av-in { from { opacity: 0; scale: .2; } }
@keyframes fill { from { scale: 0 1; } }
@keyframes pop {
  0% { scale: 1; animation-timing-function: cubic-bezier(.2, .9, .3, 1.5); }
  40% { scale: 1.05; animation-timing-function: var(--ease); }
  100% { scale: 1; }
}
.js .rows li:first-child { background: transparent; }
.js .rows li:first-child::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 16px; background: var(--primary-soft); transform-origin: 0 50%;
}
.js .signal-card:not(.go) .thread-line i { scale: 0 1; }
.js .signal-card:not(.go) :is(.av, .rows li, .chip) { opacity: 0; }
.js .signal-card:not(.go) .rows li:first-child::before { scale: 0 1; }
.thread-line i { transform-origin: 0 50%; }
.go .thread-line i { animation: thread-in .5s var(--ease) calc(.2s + var(--k, 0) * 70ms) both; }
.go .rows li { animation: row-in .5s var(--ease) calc(.35s + var(--row, 0) * .3s) both; }
.go .rows li:first-child { animation: row-in .5s var(--ease) .35s both, pop .7s linear 1.6s both; }
.go .rows li:first-child::before { animation: fill .7s var(--ease) .45s both; }
.go .av { animation: av-in .55s var(--spring) calc(.55s + var(--row, 0) * .3s + var(--a, 0) * .13s) both; }
.go .chip { animation: rise .5s var(--ease) calc(1.1s + var(--k, 0) * 80ms) both; }

/* Konfetti: wenige Elemente, entstehen und verschwinden per Skript */
.cf-wrap { position: absolute; right: 54px; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.cf {
  position: absolute; left: 0; top: 0; width: var(--s); height: calc(var(--s) * 1.6); border-radius: 2px; background: var(--c);
  animation: cf 1.1s cubic-bezier(.15, .75, .3, 1) var(--d) both;
}
.cf.round { height: var(--s); border-radius: 50%; }
@keyframes cf {
  0% { opacity: 1; translate: 0 0; rotate: 0deg; scale: .5; }
  70% { opacity: 1; }
  100% { opacity: 0; translate: var(--dx) var(--dy); rotate: var(--rot); scale: 1; }
}

/* Scroll-Reveal (nur transform-nahe Eigenschaften: opacity, translate, scale) */
.js .r:not(.in) { opacity: 0; translate: 0 22px; }
.r:not(.done) { transition: opacity .7s var(--ease) calc(var(--i, 0) * 90ms), translate .7s var(--ease) calc(var(--i, 0) * 90ms); }
.feature::before { transform-origin: 0 50%; transition: scale .35s var(--ease); }
.js .feature.r:not(.in)::before { scale: 0 1; }
.feature.r:not(.done)::before { transition: scale .6s var(--ease) calc(.25s + var(--i, 0) * 90ms); }
.steps li::before { transition: scale .6s var(--spring) calc(.2s + var(--i, 0) * 90ms); }
.js .steps li.r:not(.in)::before { scale: .5; }

/* Mikro-Interaktionen */
a { transition: text-decoration-thickness .2s var(--ease), text-underline-offset .2s var(--ease), color .2s ease; }
a:hover { text-underline-offset: .3em; }
.btn { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn:active { transform: scale(.97); box-shadow: none; }
.lang-switch button { transition: background-color .2s ease, color .2s ease, scale .15s var(--ease); }
.lang-switch button:active { scale: .93; }
.brand img { transition: rotate .35s var(--spring); }
.brand:hover img { rotate: -8deg; }
.feature { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.faq summary { transition: color .2s ease; }
.faq summary:active { scale: .99; }
.faq summary:hover { color: var(--ink); }
.faq summary::after { transition: transform .3s var(--ease), margin-top .3s var(--ease); }
@media (hover: hover) {
  .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .feature:hover::before { scale: 1.6 1; }
}
/* FAQ: sanftes Auf- und Zuklappen; ohne ::details-content oder interpolate-size klappt es einfach sofort */
@supports selector(::details-content) {
  .faq details::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size .35s var(--ease), opacity .25s ease, content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* Markenblock: Garnpunkte driften sehr langsam */
.brand-block::before { will-change: transform; animation: drift 60s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-36px, 28px); } }

/* Lesefaden: duenner Armband-Faden oben (scroll-driven; sonst setzt fx.js transform per rAF) */
.scroll-thread {
  display: block; position: fixed; inset: 0 0 auto 0; z-index: 90; height: 3px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #FB9797, #F89D79, #E7AA5B, #B9BF5F, #85CC87, #56D0AF, #3BCDDC, #69C1FC, #A1B1FF, #C6A5F7, #E39BDC, #F496BA);
}
@keyframes progress { to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  .scroll-thread { animation: progress linear both; animation-timeline: scroll(root block); }
}

/* Nur laufen, wenn sichtbar: ausserhalb des Viewports und bei verborgenem Tab pausieren */
.off, .off *, .off::before, .hid *, .hid *::before { animation-play-state: paused !important; }

/* ---------- Bewegung aus (Schalter "Animationen: aus", Klasse no-motion am <html>): statischer Endzustand ---------- */
html.no-motion { scroll-behavior: auto; }
.no-motion *, .no-motion *::before, .no-motion *::after { animation: none !important; transition: none !important; }
@supports selector(::details-content) { .no-motion .faq details::details-content { transition: none !important; } }
.no-motion .scroll-thread, .no-motion .cf-wrap { display: none; }
.no-motion :is(.btn, .feature, .lang-switch button, .faq summary, .motion-toggle):is(:hover, :active),
.no-motion .brand:hover img, .no-motion .feature:hover::before { transform: none; scale: none; rotate: none; }

/* Feature-Wuensche: Kopfzeilen-Link und eigener Abschnitt */
.site-header .wrap { gap: .75rem; }
.site-header .lang-switch { margin-inline-start: auto; }
.wish { text-align: center; }
.wish .inner { max-width: 40rem; margin-inline: auto; }
.wish .cta-row { justify-content: center; }

/* Rechtstexte aus dem Backend (legal.js): die statische Seite bleibt Rueckfall und wird nur ersetzt, wenn der veroeffentlichte Text geladen ist */
[data-legal-live] { display: none; }
[data-legal-mode="live"] > [data-legal-live] { display: block; }
[data-legal-mode="live"] > [data-legal-static] { display: none; }
.legal-stand { margin-top: 8px; color: var(--muted, inherit); font-size: .95rem; }
.legal [data-legal-live] h2 { scroll-margin-top: 16px; }