/* Startseite kiezcoins.de mit klickbarem Prototyp. Farben und Bewegung aus src/theme/tokens.ts. */
@font-face { font-family: Inter; font-weight: 300; font-display: swap; src: url(fonts/Inter_300Light.ttf) format('truetype'); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/Inter_400Regular.ttf) format('truetype'); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(fonts/Inter_500Medium.ttf) format('truetype'); }
@font-face { font-family: 'Inter Tight'; font-weight: 600; font-display: swap; src: url(fonts/InterTight_600SemiBold.ttf) format('truetype'); }

:root {
  /* Helle Seite „Lila-Bühne“: Kopf auf hellem Kater-Lila, darunter sehr helles Gelb-Grün. Das Telefon bleibt dunkel wie die App (.phone). */
  --bg: #FAFBEF; --surface: #FFFFFF; --glass: rgba(250,251,239,.85); --text: #26233A; --muted: #4A465E;
  --purple: #5260E0; --orange: #FFAD7E; --green: #93F4A7; --red: #D6334A; --pink: #FFB2E5;
  --line: rgba(38,35,58,.10); --on-accent: #FFFFFF;
  --buehne: #DCE1FF; --band: #F4F7E2; --flaeche-tief: #E9EBFA; --schatten: rgba(60,60,140,.25);
  --barrier: cubic-bezier(.55,-.3,.3,1.3);
  --display: 'Inter Tight', Inter, system-ui, sans-serif;
}
/* Dunkle App-Farben für das Telefon und den Kater-Dialog (wie src/theme/tokens.ts) */
.phone, .kater { --bg: #1F2123; --surface: #2B2D31; --glass: rgba(31,33,35,.82); --text: #F0F0F0; --muted: #A0A0A0;
  --purple: #7E94FF; --red: #FF7E8B; --line: rgba(240,240,240,.12); --on-accent: #1F2123; color: var(--text); }
* { box-sizing: border-box; }
/* Lila oben geht in gekrümmten, leicht gedrehten Bögen ins Grün über (Daria, 28.10.2026) */
html { background-color: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%;
  background-image:
    radial-gradient(ellipse 70% 32% at 88% 13%, rgba(233,229,255,.95) 0%, rgba(233,229,255,0) 70%),
    radial-gradient(ellipse 60% 30% at 8% 55%, rgba(226,242,200,.85) 0%, rgba(226,242,200,0) 72%),
    radial-gradient(ellipse 130% 50% at 25% -8%, var(--buehne) 0%, rgba(220,225,255,0) 78%),
    linear-gradient(168deg, var(--buehne) 0%, #E9E5FF 30%, rgba(250,251,239,0) 62%);
  /* Fläche hoch genug, damit alle Verläufe vor ihrem Ende ganz auslaufen: keine Kante beim Scrollen */
  background-size: 100% 1500px; background-repeat: no-repeat; }
body { margin: 0; font: 300 17px/1.55 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
a { color: var(--text); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Kopf */
.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-decoration: none; }
/* Marke unter dem Logo (Daria, 26.10.2026) */
.marke { font: italic 400 16px/1 Inter, system-ui, sans-serif; letter-spacing: .01em; color: var(--text); white-space: nowrap; }
@media (max-width: 420px) { .marke { font-size: 12px; letter-spacing: 0; } }
.brand svg { display: block; }
/* Logo deutlich größer (Daria, 2026-11-07): 52 statt 34 pt hoch, auf dem Handy 34 statt 27 */
/* Logo im Seitenkopf ganz in einer Farbe: Kater und Schriftzug in Tinte statt Lila (nur Website, im Telefon bleibt es lila; Daria, 2026-11-05) */
.brand svg [fill="#7E94FF"], .brand svg [fill="#8F90FA"] { fill: var(--text); }
.top-link { font-size: 15px; font-weight: 400; text-decoration: none; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.top-link:hover { border-color: var(--muted); }
.top-links { display: flex; gap: 8px; }
.top-link { white-space: nowrap; }
.sprachwahl { position: relative; }
.sprachwahl summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; height: 100%; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 500; line-height: 1; }
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); opacity: .6; }
.sprachwahl summary:hover { border-color: var(--muted); }
.sprachwahl ul { position: absolute; z-index: 950; inset-inline-end: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; min-width: 160px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 16px 32px -18px var(--schatten, rgba(0,0,0,.3)); }
.sprachwahl a { display: block; padding: 9px 12px; border-radius: 12px; font-size: 15px; text-decoration: none; color: var(--text); text-align: start; }
.sprachwahl a:hover { background: var(--bg); }
.sprachwahl a[aria-current] { background: var(--text); color: var(--bg); }
.kurz { display: none; }
@media (max-width: 480px) {
  .top-links { gap: 6px; }
  .top-links .top-link { padding: 8px 12px; font-size: 13px; }
  .top:has(.top-links) .brand svg { height: 34px; width: auto; }
  .top-links .lang { display: none; } .top-links .kurz { display: inline; }
  .sprachwahl summary { padding: 8px 10px; font-size: 12px; }
}
@media (max-width: 360px) { .top-links { gap: 4px; } .top-links .top-link { padding: 8px 10px; } .top:has(.top-links) .brand svg { height: 28px; } }

/* Erster Bildschirm: Text und Szenarien links, Telefon rechts */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: 'text phone' 'wahl phone';
  grid-template-rows: auto 1fr; column-gap: 72px; padding: 40px 0 72px; }
/* Desktop: Text und Telefon rücken zusammen und stehen mittig, links und rechts bleibt Luft (Daria, 31.10.2026) */
@media (min-width: 901px) { .hero { grid-template-columns: minmax(0, 540px) 320px; justify-content: center; column-gap: 64px; } }
/* Logo und Knöpfe oben stehen bündig mit Text und Telefon (Daria, 31.10.2026) */
@media (min-width: 901px) { .top:has(~ main .hero) { max-width: 924px; margin-inline: auto; } }
.hero-text { grid-area: text; align-self: end; }
.steuerung { grid-area: wahl; display: grid; gap: 20px; justify-items: start; }
.rolle { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.rolle .szenario-mark { background: var(--text); border: 0; border-radius: 999px; }
.rolle button { position: relative; background: none; border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer;
  font: 500 15px/1 Inter, sans-serif; color: var(--muted); transition: color 300ms; }
.rolle button[aria-checked="true"] { color: var(--bg); }
.rolle button { white-space: nowrap; }
/* Vier Modi passen auch auf 360 px breite Handys (Daria, 29.10.2026) */
.rolle { max-width: 100%; }
@media (max-width: 480px) { .rolle button { padding: 10px 9px; font-size: 13px; letter-spacing: -.01em; } .szenarien button i { font-size: 12.5px; white-space: nowrap; } .szenarien { --sz-pad: 2px; } }
.szenarien { width: calc(100% + var(--sz-pad)); }
.phone-spalte { grid-area: phone; align-self: center; }
.hero h1 { font: 600 clamp(35px, 5.12vw, 64px)/1 var(--display); letter-spacing: -.035em; margin: 0 0 24px; max-width: 15ch; }
.lede { color: var(--muted); font-size: 19px; max-width: 44ch; margin: 0 0 40px; }
/* Text bündig links; Hover- und Auswahlfläche ragen nach links über den Rand (Daria, 28.10.2026) */
.szenarien { --sz-pad: 20px; position: relative; display: grid; gap: 6px; max-width: calc(420px + var(--sz-pad)); margin-inline-start: calc(-1 * var(--sz-pad)); }
.szenario-mark { position: absolute; left: 0; top: 0; border-radius: 22px; background: var(--surface); border: .5px solid var(--line); box-shadow: 0 10px 24px -16px var(--schatten);
  transition: transform 560ms var(--barrier), width 560ms var(--barrier), height 560ms var(--barrier); pointer-events: none; }
.szenarien button { position: relative; display: grid; gap: 2px; text-align: start; background: none; border: 0; border-radius: 22px; padding: 16px var(--sz-pad); cursor: pointer; }
.szenarien button b { font: 600 22px/1.15 var(--display); letter-spacing: -.01em; }
.szenarien button span { color: var(--muted); font-size: 15px; }
.szenarien button span.is-neu { animation: satz-neu 560ms var(--barrier); }
@keyframes satz-neu { from { opacity: 0; transform: translateY(8px); } }
.szenarien button i { display: none; }
/* Texte so breit wie der Umschalter darüber (Daria, 29.10.2026): Die Spalte richtet sich nach dem Umschalter,
   die Szenarien tragen nichts zur Breite bei (width 0, min-width 100 %) und brechen innerhalb um. */
@media (min-width: 901px) {
  .steuerung { width: fit-content; max-width: 100%; }
  .szenarien { width: 0; min-width: calc(100% + 2 * var(--sz-pad)); max-width: none; }
}
.szenarien button[aria-pressed="false"] b { color: var(--muted); }
.szenarien button:hover b { color: var(--text); }
/* Nicht gewählte Karten zeigen beim Darüberfahren eine helle Fläche, gleich für alle Szenarien */
.szenarien button { transition: background-color 200ms; }
@media (hover: hover) { .szenarien button[aria-pressed="false"]:hover { background: rgba(255,255,255,.55); } }
.hinweis { color: var(--muted); font-size: 13px; margin: 16px 0 0; text-align: center; }

/* Telefon */
.phone { width: 320px; height: 664px; padding: 10px; border-radius: 54px; background: #0F1011; position: relative;
  box-shadow: 0 0 0 1.5px #3A3C40, 0 40px 80px -24px rgba(40,40,120,.35), 0 24px 50px -30px rgba(40,30,20,.45); }
.p-screen { position: relative; width: 300px; height: 644px; border-radius: 44px; overflow: hidden; background: var(--bg);
  font-family: Inter, system-ui, sans-serif; font-size: 13px; line-height: 1.35; isolation: isolate; }
.p-screen button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.p-screen svg { display: block; flex: none; }
.p-status { position: absolute; z-index: 30; inset: 0 0 auto; height: 44px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; font: 600 13px/1 var(--display); pointer-events: none;
  background: linear-gradient(var(--bg) 78%, rgba(31,33,35,0)); }
.p-island { width: 92px; height: 26px; border-radius: 20px; background: #000; }
.p-battery { width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid var(--text); position: relative; }
.p-battery::after { content: ''; position: absolute; inset: 1.5px; right: 5px; background: var(--text); border-radius: 1px; }
.p-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 48px 0 96px; scrollbar-width: none; }
.p-scroll::-webkit-scrollbar { display: none; }
.p-head { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 6px 16px 2px; }
.p-greet { padding: 10px 16px 12px; }
.p-greet h3 { font: 600 23px/1.1 var(--display); letter-spacing: -.02em; margin: 0 0 4px; }
.p-greet p { margin: 0; color: var(--muted); font-size: 11px; }

.p-seg { position: relative; display: flex; margin: 0 12px 12px; padding: 3px; border-radius: 999px; background: var(--surface); }
.p-seg button { position: relative; z-index: 1; flex: 1; padding: 7px 0; font-size: 11.5px; color: var(--muted); transition: color 300ms; }
.p-seg button[aria-selected="true"] { color: var(--bg); font-weight: 500; }
/* Gewählter Reiter immer ganz lesbar, die anderen kürzen mit … (Daria, 29.10.2026; auf Englisch ist „Neighborhood“ lang) */
.p-seg button { flex: 1 1 auto; min-width: 0; padding: 7px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-seg button[aria-selected="true"] { flex: 1 0 auto; padding-inline: 10px; }
.p-seg-pill { position: absolute; z-index: 0; left: 0; top: 3px; bottom: 3px; border-radius: 999px; background: var(--text);
  transition: transform 620ms var(--barrier), width 620ms var(--barrier); }
.p-flip { animation: p-flip 620ms var(--barrier); }
@keyframes p-flip { from { opacity: .2; transform: scale(.96); } }
.p-eden { color: var(--green); }
.p-swap { animation: p-swap 620ms var(--barrier); }
@keyframes p-swap { from { opacity: 0; transform: translateX(28px); } }

/* Karten */
.p-list { display: grid; gap: 4px; }
.p-post { padding: 0 12px; }
.p-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 270px; border-radius: 22px;
  overflow: hidden; background: var(--surface); padding: 10px; text-align: start; transition: transform 200ms; }
.p-card:active { transform: scale(.985); }
/* .p-screen button setzt padding auf 0 und ist spezifischer als .p-card. Ohne diese Zeile klebt der Titelkasten am Rand. */
.p-screen .p-card { padding: 10px; }
.p-card-text { height: 128px; }
.p-body { margin: 0 0 8px; padding: 0 4px; color: var(--muted); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-img, .p-hero { position: absolute; inset: 0; }
.p-img img, .p-img svg, .p-hero img, .p-hero svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-bounty { position: absolute; top: 9px; inset-inline-end: 9px; display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 999px;
  background: rgba(31,33,35,.25); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.p-card-text .p-bounty { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-right: 0; }
/* Edenstein: groß, ragt über das Badge, schwebt unruhig, je Karte eigener Takt */
.p-bounty-eden { padding-left: 4px; gap: 9px; }
.p-crystal { display: block; width: 28px; height: 22px; position: relative; }
.p-crystal svg { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: var(--r); animation: p-schweben var(--d) ease-in-out var(--o) infinite; }
@keyframes p-schweben { 0%, 100% { transform: translateY(1px) rotate(-4deg); } 30% { transform: translateY(-3px) rotate(5deg); } 55% { transform: translateY(0) rotate(-1deg); } 75% { transform: translateY(-2px) rotate(7deg); } }
.p-eden.is-done { color: var(--muted); }
.p-bounty b { font: 600 15px/1 var(--display); }
.p-info { position: relative; display: grid; gap: 5px; padding: 10px 12px; border-radius: 16px; background: rgba(31,33,35,.3); border: .5px solid var(--line);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.p-card-text .p-info { background: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 4px; }
/* Wer hat gepostet: nach dem ersten Tippen oben links */
.p-who { position: absolute; z-index: 3; top: 10px; inset-inline-start: 10px; display: flex; align-items: center; gap: 7px; opacity: 0; transform: translateY(-8px);
  transition: opacity 250ms, transform 450ms var(--barrier); pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.p-who b { display: block; font: 600 14px/1.2 var(--display); }
.p-who i { display: block; font-style: normal; font-size: 11px; line-height: 1.3; opacity: .9; }
.p-card.is-who .p-who { opacity: 1; transform: none; }
.p-card.is-who .p-chip { opacity: 0; }
.p-info strong { font: 600 15.5px/1.15 var(--display); letter-spacing: -.01em; }
.p-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.p-avatar { flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c);
  color: var(--bg); font: 600 calc(var(--s) * .5)/1 var(--display); }
.p-chip { position: absolute; top: 9px; inset-inline-start: 9px; padding: 4px 10px; border-radius: 999px; font-size: 10px; background: var(--glass); border: .5px solid; }
.p-chip-accepted { color: var(--purple); }
.p-chip-requested { color: var(--muted); }
.p-chip-reported { color: var(--orange); }
.p-chip-confirmed { color: var(--pink); }
.p-chip-deadline { display: flex; align-items: center; gap: 4px; color: var(--text); border: 0; background: rgba(160,160,160,.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.p-actions { display: flex; align-items: center; gap: 2px; padding: 2px 0 8px; }
.p-actions button { display: flex; align-items: center; gap: 5px; min-width: 38px; height: 38px; padding: 0 4px; justify-content: center; color: var(--text); font-size: 12px; }
.p-like.is-on { color: var(--pink); }
.p-like.is-on .p-heart { animation: p-pop 560ms var(--barrier); }
@keyframes p-pop { 40% { transform: scale(.7); } 75% { transform: scale(1.25); } }
.p-actions .p-manage { margin-inline-start: auto; }
.p-new { animation: p-in 700ms var(--barrier); }
@keyframes p-in { from { opacity: 0; transform: translateY(-30px) scale(.92); } }
.p-pulse .p-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--purple); animation: p-ring 1.6s ease-out 2 600ms both; pointer-events: none; }
@keyframes p-ring { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
/* Ring: der Knopf, mit dem das gewählte Szenario weitergeht (links wählen, rechts tippen) */
.p-screen .p-ring { outline: 2px solid var(--purple); outline-offset: 3px; animation: p-ring-puls 1.6s ease-in-out infinite; }
.p-screen .p-card.p-ring, .p-screen .p-board.p-ring, .p-screen .p-photo-title.p-ring { outline-offset: -2px; }
@keyframes p-ring-puls { 50% { outline-color: rgba(126,148,255,.25); } }
@media (prefers-reduced-motion: reduce) { .p-screen .p-ring { animation: none; } }

/* Pleasure */
.p-pleasure { padding: 0 12px; }
.p-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.p-metrics div { background: var(--surface); border-radius: 16px; padding: 12px 10px; display: grid; gap: 2px; }
.p-metrics b { font: 600 19px/1.1 var(--display); display: flex; align-items: center; gap: 4px; }
.p-metrics span { color: var(--muted); font-size: 10.5px; }
.p-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.p-rows button { width: 100%; display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; text-align: start; padding: 6px; border-radius: 16px; background: var(--surface); }
.p-rows strong { display: block; font: 600 13px/1.2 var(--display); margin-bottom: 4px; }
.p-rows .p-chip { position: static; display: inline-block; }
.p-rows b { font: 600 15px/1 var(--display); padding-right: 6px; }
.p-thumb { position: relative; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: var(--bg); }
.p-thumb img, .p-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.p-empty { color: var(--muted); margin: 8px 4px 0; }

/* Gruppe */
.p-group { padding: 0 12px; }
.p-group-head { display: grid; gap: 2px; padding: 14px; border-radius: 18px; background: var(--surface); margin-bottom: 8px; }
.p-group-head strong { font: 600 17px/1.15 var(--display); }
.p-group-head span { color: var(--muted); font-size: 11px; }
.p-board { list-style: none; margin: 0 0 14px; padding: 4px 0; border-radius: 18px; background: var(--surface); }
.p-board li { display: flex; align-items: center; gap: 10px; padding: 7px 14px; transition: transform 560ms var(--barrier); }
.p-board li > span:nth-child(2) { flex: 1; display: flex; align-items: center; gap: 6px; }
.p-board li.is-me > span:nth-child(2) { font-weight: 500; }
.p-board b { display: flex; align-items: center; gap: 5px; font: 600 15px/1 var(--display); color: var(--green); }
.p-group h4 { font: 600 15px/1 var(--display); margin: 0 4px 8px; }
.p-task { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; margin-bottom: 6px; border-radius: 18px; background: var(--glass);
  border: .5px solid var(--line); transition: opacity 400ms; }
.p-task > div { flex: 1; display: grid; gap: 5px; }
.p-task strong { font: 600 13.5px/1.2 var(--display); }
.p-task > div span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10.5px; }
.p-task.is-done { opacity: .6; }
.p-task.is-done strong { text-decoration: line-through; text-decoration-color: var(--muted); }
.p-done { display: flex; align-items: center; gap: 4px; color: var(--green); font-size: 11px; }

/* Knöpfe */
.p-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; border-radius: 999px !important;
  background: var(--purple) !important; color: var(--bg) !important; font: 500 14px/1 Inter, sans-serif !important; transition: transform 200ms, opacity 200ms; }
.p-btn:active { transform: scale(.97); }
.p-btn:disabled { opacity: .35; cursor: default; }
.p-btn { transition: opacity 300ms; }
.p-btn.p-ready { animation: p-ready 700ms var(--barrier); }
@keyframes p-ready { 40% { transform: scale(1.04); } }
.p-btn-secondary { background: none !important; color: var(--text) !important; border: 1px solid var(--line) !important; margin-top: 12px; }
.p-btn-wait:disabled { opacity: 1; background: var(--surface) !important; color: var(--orange) !important; }
.p-btn-ok:disabled { opacity: 1; background: var(--green) !important; }
.p-btn-small { width: auto; height: 32px; padding: 0 14px !important; font-size: 12px !important; }

/* Tab-Leiste und Kamera */
.p-tabbar { position: absolute; z-index: 10; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: var(--glass); border: .5px solid var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.p-tabbar button { width: 52px; height: 40px; display: grid; place-items: center; border-radius: 999px; transition: background 300ms; }
.p-tabbar button.is-on { background: rgba(240,240,240,.1); }
.p-camera { position: absolute !important; z-index: 10; top: 52px; inset-inline-end: 12px; width: 52px; height: 34px; display: grid; place-items: center;
  border-radius: 999px !important; background: var(--purple) !important; }

/* Ebenen */
.p-scrim { position: absolute; inset: 0; z-index: 15; background: rgba(0,0,0,.5); opacity: 0; transition: opacity 400ms; }
.p-scrim.is-on { opacity: 1; }
.p-sheet, .p-create { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: 30px 30px 44px 44px;
  transform: translateY(105%); transition: transform 560ms var(--barrier); visibility: hidden; outline: none; }
.p-sheet.is-open, .p-create.is-open { transform: translateY(0); visibility: visible; }
.p-sheet:not(.is-open), .p-create:not(.is-open) { transition: transform 420ms cubic-bezier(.4,0,.6,1), visibility 0s 420ms; }
.p-sheet.is-drag { transition: none; }
.p-sheet { max-height: 590px; overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }
.p-grab { position: absolute; z-index: 2; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: rgba(240,240,240,.6); }
.p-close { position: absolute !important; z-index: 2; top: 14px; inset-inline-end: 14px; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50% !important; background: var(--glass) !important; border: .5px solid var(--line) !important; }
.p-hero { position: relative; height: 200px; border-radius: 30px 30px 0 0; overflow: hidden; }
.p-sheet-body { position: relative; padding: 16px 16px 22px; }
.p-sheet-body .p-chip { position: static; display: inline-block; margin-bottom: 8px; }
.p-sheet-body h3 { font: 600 21px/1.12 var(--display); letter-spacing: -.02em; margin: 0 0 8px; padding-inline-end: 40px; }
.p-author { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; }
.p-text { color: var(--muted); margin: 0 0 14px; font-size: 12.5px; }
.p-metrics-row { margin-bottom: 14px; }

.p-create { top: 140px; border-radius: 30px 30px 44px 44px; overflow-y: auto; scrollbar-width: none; box-shadow: 0 -12px 30px rgba(0,0,0,.35); }
.p-create::-webkit-scrollbar { display: none; }
/* Erstellen: Logo und Begrüßung klappen ein, schmaler Header mit X, die Pille bleibt */
.p-head, .p-greet { max-height: 80px; overflow: hidden; transition: max-height 560ms var(--barrier), opacity 300ms, padding 560ms var(--barrier); }
.p-compose-head { display: flex; align-items: center; gap: 4px; padding: 0 8px; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 560ms var(--barrier), opacity 300ms; }
.p-compose-head strong { font: 600 15px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-x { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.is-composing .p-head, .is-composing .p-greet { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.is-composing .p-compose-head { max-height: 52px; height: 52px; opacity: 1; }
.p-camera { transition: opacity 300ms; }
.is-composing .p-camera { opacity: 0; pointer-events: none; }
.p-create-head { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; padding: 14px 14px 6px; text-align: center; }
.p-create-head strong { font: 600 15px/1 var(--display); }
.p-close-inline { position: static !important; }
.p-create-body { padding: 16px 16px 96px; display: grid; gap: 14px; }
.p-photo { position: relative; height: 210px; border-radius: 20px; border: 1.5px dashed rgba(160,160,160,.6); overflow: hidden; }
.p-photo.has-photo { border-color: transparent; animation: p-in 560ms var(--barrier); }
.p-photo-hit { position: absolute !important; inset: 0; width: 100%; }
.p-photo-empty { position: absolute; inset: 0 0 64px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); font-size: 12px; }
.p-photo-title { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 14px; border-radius: 18px; background: var(--glass);
  border: .5px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.p-photo-title:focus-within { border-color: var(--purple); }
.p-photo-title textarea { display: block; width: 100%; resize: none; overflow: hidden; background: none; border: 0; padding: 0; color: var(--text); font: 600 15.5px/1.2 var(--display); letter-spacing: -.01em; }
.p-photo-title textarea:focus { outline: none; }
.p-photo-title textarea::placeholder, .p-field textarea::placeholder { color: var(--muted); }
.p-field { display: grid; gap: 6px; }
.p-tagbox { display: grid; gap: 2px; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: 14px; }
.p-tagbox:focus-within { border-color: var(--purple); }
.p-tagbox b { font: 500 12px/1.4 Inter, sans-serif; color: var(--purple); }
.p-tagbox textarea { border: 0 !important; padding: 0 !important; min-height: 36px !important; background: none; }
.p-steps { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.p-step { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.p-step i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); font: 500 9px/1 Inter, sans-serif; font-style: normal; }
.p-step.is-on, .p-step.is-done { color: var(--text); }
.p-step.is-on i { background: var(--purple); border-color: var(--purple); color: var(--on-accent); }
.p-step.is-done i { background: var(--surface); border-color: var(--surface); }
.p-step-bar { flex: 1; height: 1px; background: var(--line); }
.p-field > span { color: var(--muted); font-size: 11px; }
.p-field input { width: 100%; font: 400 15px/1.2 Inter, sans-serif; color: var(--text); background: var(--surface); border: 1px solid transparent; border-radius: 14px; padding: 12px; }
.p-field input:focus { outline: none; border-color: var(--purple); }
.p-field textarea { width: 100%; min-height: 64px; resize: none; overflow: hidden; font: 400 13px/1.4 Inter, sans-serif; color: var(--text); background: none;
  border: 1px solid var(--muted); border-radius: 14px; padding: 12px; }
.p-field textarea:focus { outline: none; border-color: var(--purple); }
.p-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.p-pill { padding: 6px 10px !important; border-radius: 999px !important; border: 1px solid var(--line) !important; color: var(--muted); font-size: 11px; }
.p-choice { display: flex; gap: 6px; }
.p-choice button { flex: 1; height: 36px; border-radius: 999px !important; background: var(--surface) !important; font-size: 12px; color: var(--muted);
  transition: background 300ms, color 300ms; }
.p-choice button[aria-checked="true"] { background: var(--text) !important; color: var(--bg); font-weight: 500; }

/* Kater-Hinweis */
.p-nudge { position: absolute; z-index: 40; right: calc(100% + 18px); top: 50%; width: max-content; max-width: 250px; pointer-events: none;
  opacity: 0; transform: translate(-12px, -50%) scale(.96); transform-origin: right center; transition: opacity 300ms, transform 300ms; }
.p-nudge.is-on { opacity: 1; transform: translate(0, -50%); transition: opacity 200ms, transform 560ms var(--barrier); }
.p-nudge p { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-size: 13px; line-height: 1.3; font-weight: 400; box-shadow: 0 10px 30px -8px rgba(0,0,0,.35); }
.p-nudge p::after { content: ""; position: absolute; left: 100%; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left-color: var(--text); }
.p-nudge-cat { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); }
.p-nudge-cat svg { display: block; }
/* Schmale Fenster: kein Platz neben dem Handy, die Pill sitzt unten im Screen */
.p-nudge.is-innen { right: 22px; left: 22px; top: auto; bottom: 82px; width: auto; transform: translateY(16px) scale(.96); transform-origin: center bottom; }
.p-nudge.is-innen.is-on { transform: none; }
.p-nudge.is-innen.is-top { bottom: auto; top: 56px; z-index: 60; }
.p-nudge.is-innen p { box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.p-nudge.is-innen p::after { display: none; }

/* Coins-Regen */
.p-burst { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.p-burst span { position: absolute; animation: p-coin 1100ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes p-coin {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 60px)) rotate(var(--r)) scale(1); opacity: 0; }
}

/* Leute */
.mehr { padding: 64px 0; background: var(--band) linear-gradient(135deg, #F4F7E2 0%, #EFECFF 50%, #FFEDE3 100%); }
.mehr > .wrap > p { color: var(--muted); margin: 0 0 32px; max-width: 46ch; }
.mehr-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mehr-karte { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; text-align: start; padding: 20px; border-radius: 28px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  box-shadow: 0 12px 30px -18px var(--schatten);
  transition: transform 560ms var(--barrier), border-color 200ms; }
.mehr-karte:hover, .mehr-karte:focus-visible { border-color: var(--c); }
.mehr-karte:active { transform: scale(.98); }
.mehr-karte > b { font: 600 22px/1.15 var(--display); letter-spacing: -.01em; }
.mehr-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c); transition: transform 560ms var(--barrier); }
.mehr-karte:hover .mehr-icon { transform: rotate(-8deg) scale(1.06); }
.mehr-buehne { position: relative; display: block; height: 150px; border-radius: 18px; background: var(--flaeche-tief); overflow: hidden; }
.mehr-status { color: var(--muted); font-size: 14px; min-height: 1.4em; }
.mehr-freunde { display: flex; align-items: center; justify-content: center; gap: 14px; }
.mehr-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px dashed rgba(38,35,58,.25);
  color: var(--muted); font: 600 20px/1 var(--display); position: relative;
  transition: background 200ms, color 200ms, border-color 200ms, transform 560ms var(--barrier); }
.mehr-avatar.is-freund { background: var(--a); color: #1F2123; border: 2px solid var(--a); transform: translateY(-6px); }
.mehr-avatar.is-freund::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--text); color: #1F2123; font: 700 12px/20px Inter, sans-serif; text-align: center; }
.mehr-chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px; }
.mehr-blase { align-self: flex-start; max-width: 85%; padding: 7px 12px; border-radius: 16px 16px 16px 4px; background: var(--bg);
  font-size: 13px; line-height: 1.3; animation: mehr-blase 400ms var(--barrier) both; }
.mehr-blase.is-mein { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--purple); color: var(--on-accent); }
@keyframes mehr-blase { from { transform: translateY(10px) scale(.9); opacity: 0; } }
.mehr-karte-fest { cursor: default; grid-template-rows: auto auto 1fr auto auto; }
.mehr-karte-fest:active { transform: none; }
.mehr-aktion { justify-self: start; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font: 500 15px/1 Inter, sans-serif; cursor: pointer;
  transition: transform 300ms var(--barrier); }
.mehr-aktion:active { transform: scale(.96); }
.mehr-rang { display: flex; flex-direction: column; justify-content: center; gap: 6px; margin: 0; padding: 10px 12px; list-style: none; }
.mehr-rang li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: var(--bg); font-size: 14px;
  transition: transform 560ms var(--barrier); }
.mehr-rang li > span:nth-child(2) { flex: 1; }
.mehr-rang li > b { font-variant-numeric: tabular-nums; }
.mehr-rang .mehr-avatar { width: 28px; height: 28px; font-size: 13px; border: 0; background: var(--a); color: #1F2123; }
.mehr-rang li.is-ich { outline: 1.5px solid var(--purple); }
@media (max-width: 760px) { .mehr-karten { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mehr-flug, .mehr-blase { animation: none; } }
.leute { padding: 64px 0 40px; background: linear-gradient(160deg, #FFF1EA 0%, #FBEFF7 100%); }
.mehr h2, .leute h2, .wechsel h2, .download h2 { font: 600 clamp(30px, 4vw, 44px)/1.05 var(--display); letter-spacing: -.025em; margin: 0 0 12px; max-width: 18ch; }
.leute > .wrap > p, .download > .wrap > p { color: var(--muted); margin: 0 0 40px; max-width: 46ch; }
.szene { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; row-gap: 48px; padding-top: 40px; }
/* Organisch: jede Person eigene Größe, Höhe und leichte Überlappung (Daria, 28.10.2026) */
.szene > .person { width: var(--w, 24%); margin: var(--m, 0); }
.szene > .person:nth-child(1) { --r: -2.5deg; --w: 25%; --m: 0 -1% 24px 2%; }
.szene > .person:nth-child(2) { --r: 1.8deg; --w: 21%; --m: 0 1% 0 0; }
.szene > .person:nth-child(3) { --r: -1.2deg; --w: 24%; --m: 0 -2% 48px 0; }
.szene > .person:nth-child(4) { --r: 2.6deg; --w: 20%; --m: 0 3% 8px 1%; }
.szene > .person:nth-child(5) { --r: 1.5deg; --w: 22%; --m: -24px 0 16px -1%; }
.szene > .person:nth-child(6) { --r: -2.2deg; --w: 24%; --m: -56px -2% 0 3%; }
.szene > .person:nth-child(7) { --r: 2deg; --w: 21%; --m: -8px 2% 40px 0; }
.szene > .person:nth-child(8) { --r: -1.6deg; --w: 23%; --m: -40px 0 4px -1%; }
.szene .figur { max-width: none; rotate: var(--r, 0deg); }
/* Alle Gesichter auf einen Bildschirm: Figuren richten sich nach der Fensterhöhe (Daria, 28.10.2026) */
@media (min-width: 641px) {
  .szene > .person { display: flex; justify-content: center; }
  /* Breite aus dem Seitenverhältnis: „.person .figur { width: 100% }“ weiter unten stauchte die Fotos (29.10.2026) */
  .szene .person .figur { width: auto; max-width: 100%; max-height: calc((100svh - 500px) / 2); min-height: 110px; margin-inline: auto; }
  /* Desktop: alle ein Viertel größer, Überschneidungen erlaubt (Daria, 29.10.2026). Unter dem Zeiger liegt die Person oben. */
  .szene .person .figur { max-width: none; max-height: calc((100svh - 500px) / 2 * 1.25); min-height: 140px; }
  .szene > .person:hover, .szene > .person.is-on { z-index: 4; }
}
.person { display: grid; justify-items: center; gap: 4px; }
.person:nth-child(2) { padding-bottom: 0; }
.person .figur { width: 100%; max-width: 240px; height: auto; display: block; margin-bottom: -2px; transform-origin: 50% 100%; cursor: pointer; }
.person .figur:hover, .person .figur.is-wave { animation: wackeln 700ms var(--barrier); }
@keyframes wackeln { 30% { transform: rotate(-3deg) translateY(-4px); } 65% { transform: rotate(2deg); } }
.blase { position: relative; margin: 0 0 18px; padding: 14px 20px; border-radius: 24px; background: var(--text); color: var(--bg);
  font: 600 clamp(19px, 2.2vw, 24px)/1.15 var(--display); letter-spacing: -.015em; text-align: center; max-width: 15ch; }
.blase::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 22px; height: 22px; margin-left: -11px; background: inherit;
  border-radius: 0 0 6px 0; transform: rotate(45deg); }
.person:nth-child(1) .blase { transform: rotate(-2deg); }
.person:nth-child(3) .blase { transform: rotate(2deg); }
.person:nth-child(4) .blase { transform: rotate(-1.5deg); }
.person:nth-child(5) .blase { transform: rotate(2deg); }
.person:nth-child(6) .blase { transform: rotate(-2deg); }
.person:nth-child(7) .blase { transform: rotate(1.5deg); }
.person:nth-child(8) .blase { transform: rotate(-1deg); }
.person { position: relative; cursor: pointer; outline-offset: 6px; }
/* Blase schwebt über dem Kopf und nimmt keinen Platz weg */
@media (min-width: 641px) { .szene .blase { position: absolute; z-index: 3; bottom: calc(100% - var(--kopf, 6%)); left: 0; right: 0; width: max-content; margin: 0 auto; } }
/* Sprechblase nur bei Hover, Fokus oder Tipp */
.leute .blase { opacity: 0; scale: .6; translate: 0 12px; transform-origin: 50% 100%; pointer-events: none;
  transition: opacity 160ms, scale 220ms ease-in, translate 220ms ease-in; }
.person:hover .blase, .person:focus-visible .blase, .person.is-on .blase, .person.is-mitte .blase { opacity: 1; scale: 1; translate: 0 0;
  transition: opacity 200ms, scale 520ms var(--barrier), translate 520ms var(--barrier); }
/* Ruf-Zeichen wie bei einer klingelnden Glocke: Bögen über dem Kopf, die Figur wackelt kurz */
.ruf { position: absolute; z-index: 2; left: 64%; top: -64px; width: 72px; height: 72px; margin-left: -36px; fill: none; stroke: var(--purple, #7E94FF);
  stroke-width: 3; stroke-linecap: round; opacity: 0; pointer-events: none; }
.ruf path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.ruf path:nth-child(n+3) { display: none; }
.person.is-ruft .ruf { animation: ruf-da 1.6s ease-out; }
.person.is-ruft .ruf path { animation: ruf-bogen 1.6s ease-out; }
.person.is-ruft .ruf path:nth-child(2) { animation-delay: 120ms; }
.person.is-ruft .figur { animation: klingeln 900ms ease-in-out; }
@keyframes ruf-da { 0% { opacity: 0; translate: 0 6px; } 15%, 70% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -6px; } }
@keyframes ruf-bogen { 0% { stroke-dashoffset: 30; } 35%, 100% { stroke-dashoffset: 0; } }
@keyframes klingeln { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-5deg); } 30% { transform: rotate(4deg); } 45% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } }
.person:hover .ruf, .person.is-on .ruf { display: none; }
@media (prefers-reduced-motion: reduce) { .leute .blase, .person:hover .blase { transition: none; } }

/* Download */
.download { padding: 80px 0 24px; background: linear-gradient(160deg, #ECEEFF 0%, #F6F4FF 60%, #FFFFFF 100%); }
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .karten { grid-template-columns: 1fr 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 28px; box-shadow: 0 12px 30px -18px var(--schatten); }
.card h3 { font: 600 24px/1.1 var(--display); margin: 0 0 8px; }
.card p { color: var(--muted); margin: 0 0 12px; font-size: 15px; }
.card label { display: block; font-size: 14px; color: var(--muted); margin: 16px 0 6px; }
.card input { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; }
.card .button, .card button { display: block; width: 100%; margin-top: 14px; text-align: center; text-decoration: none; font: 500 16px/1 Inter, sans-serif;
  color: var(--on-accent); background: var(--purple); border: 0; border-radius: 999px; padding: 17px; cursor: pointer; }
.card .button-zweit { background: none; color: var(--text); border: 1px solid var(--line); font-weight: 400; }
.card .button-zweit:hover { border-color: var(--muted); }
.card .button-zweit { background: none; color: var(--text); border: 1px solid var(--line); margin-top: 10px; }
.card .button-zweit:hover { border-color: var(--muted); }
.error { color: var(--red); font-size: 14px; margin: 8px 0 0; }
.steps { padding-inline-start: 20px; color: var(--muted); margin: 16px 0 0; font-size: 15px; }
.steps li { margin-bottom: 6px; }
.klein { font-size: 13px !important; margin-top: 12px !important; }
footer { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; margin-top: 56px; padding: 18px 0 40px; border-top: 1px solid var(--line); }
footer a { color: var(--muted); }

/* Telefon und Tablet */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; grid-template-areas: 'text' 'wahl' 'phone'; grid-template-rows: none; row-gap: 28px; justify-items: center; padding: 16px 0 72px; }
  .hero-text { justify-self: stretch; }
  .lede { margin-bottom: 0; }
  .steuerung { justify-items: center; width: 100%; max-width: 360px; gap: 12px; }
  .szenarien { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 4px; border-radius: 999px; background: var(--surface); max-width: 360px; width: 100%; }
  .szenario-mark { background: var(--text); border-radius: 999px; }
  .szenarien button { padding: 10px 4px; border-radius: 999px; text-align: center; transition: color 300ms; }
  .szenarien button b, .szenarien button span { display: none; }
  .szenarien button i { display: block; font: 500 14px/1 Inter, sans-serif; font-style: normal; color: var(--muted); transition: color 300ms; }
  .szenarien button[aria-pressed="true"] i { color: var(--bg); }
  .lede { font-size: 17px; }
  .hinweis { display: none; }
  .karten { grid-template-columns: 1fr; }
}
/* Telefon und Tablet: Ort und Szenario wählt man nur im Telefon-Prototyp, der hat dieselben Umschalter.
   Der Satz darunter (#szenario-text) beschreibt, was der Prototyp gerade zeigt (Daria, 29.10.2026). */
@media (max-width: 900px) {
  .rolle, .szenarien { display: none; }
}
@media (max-width: 640px) {
  .szene { display: grid; grid-template-columns: 1fr; gap: 0; border-bottom: 0; }
  .szene > .person { width: auto; margin: 0; }
  .person { grid-template-columns: 1fr 160px; align-items: end; justify-items: start; border-bottom: 2.5px solid var(--text); padding-top: 16px; }
  .person:nth-child(even) { grid-template-columns: 160px 1fr; }
  /* Telefon: Die Person in der Bildschirmmitte ist ein Viertel größer und sagt ihren Satz (Daria, 29.10.2026) */
  .szene .person .figur { transform-origin: 50% 100%; transition: scale 420ms cubic-bezier(.2, .7, .2, 1); }
  .szene > .person.is-mitte { z-index: 2; }
  .szene > .person.is-mitte .figur { scale: 1.25; }
  .person:nth-child(even) .blase { order: 2; justify-self: end; }
  .blase { margin-bottom: 40px; }
  .blase::after { left: auto; right: -6px; bottom: 18px; transform: rotate(-45deg); }
  .person:nth-child(even) .blase::after { right: auto; left: -6px; transform: rotate(135deg); }
  .card { padding: 22px; }
}
@media (max-width: 360px) {
  .phone { transform: scale(.92); transform-origin: top center; margin-bottom: -50px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* Lila Punkt statt Mauszeiger über klickbaren Flächen im Prototyp-Bereich (nur mit Maus) */
.mit-punkt button:not(:disabled) { cursor: none; }
.mit-punkt button[aria-pressed="true"], .mit-punkt button[aria-checked="true"], .mit-punkt button[aria-selected="true"] { cursor: default; }
.klick-punkt { position: fixed; z-index: 1000; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.klick-punkt span { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(126,148,255,.7);
  box-shadow: 0 0 0 0 rgba(126,148,255,.45); opacity: 0; transform: scale(.2); transition: opacity 160ms, transform 160ms; }
.klick-punkt span { --ring: 126,148,255; }
.klick-punkt.is-grau span { --ring: 200,200,200; background: rgba(160,160,160,.75); }
.klick-punkt.is-on span { opacity: 1; transform: scale(1);
  animation: punkt-wachsen 900ms cubic-bezier(.2,.7,.3,1) both, punkt-pulsieren 1400ms ease-in-out 900ms infinite; }
@keyframes punkt-wachsen { from { transform: scale(.2); } to { transform: scale(1); } }
@keyframes punkt-pulsieren {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--ring),.45); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 14px rgba(var(--ring),0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--ring),0); }
}

/* Kater: Kopf schaut schräg vom linken Rand herein */
.kater-kopf { position: fixed; z-index: 900; left: -26px; top: 60vh; width: 110px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: rotate(60deg); transition: transform 560ms var(--barrier), opacity 200ms; }
.kater-kopf img { display: block; width: 110px; height: auto; }
.kater-kopf:hover, .kater-kopf:focus-visible { transform: translateX(14px) rotate(50deg); }
.kater-kopf.is-weg { transform: translateX(-90px) rotate(60deg); opacity: 0; pointer-events: none; }
.js .kater-kopf { animation: kater-gucken 900ms var(--barrier) 1.2s both; }
@keyframes kater-gucken { from { transform: translateX(-90px) rotate(60deg); } }
.kater { position: fixed; z-index: 950; inset: 0; background: rgba(15,16,17,0); transition: background 300ms; }
.kater.is-open { background: rgba(15,16,17,.72); }
.kater-buehne { position: absolute; left: max(16px, 6vw); bottom: 32px; width: min(340px, 78vw); display: grid; justify-items: start;
  transform: translateY(calc(100% + 48px)); transition: transform 560ms var(--barrier); }
.kater.is-open .kater-buehne { transform: none; }
.kater-blase { justify-self: end; white-space: nowrap; max-width: none; margin: 0 0 -8px; font: 600 20px/1.2 var(--display); transform: rotate(-3deg); }
.kater-blase::after { left: 30%; z-index: -1; }
.kater-blase { isolation: isolate; }
.kater-bild { display: block; width: 100%; height: auto; }
.kater-wege { position: absolute; left: 100%; bottom: 40px; display: grid; gap: 10px; margin-left: 8px; }
.kater-wege button { white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px;
  padding: 12px 20px; font: 500 15px/1 Inter, sans-serif; cursor: pointer; }
.kater-wege button:last-of-type { background: var(--purple); color: var(--bg); border-color: transparent; }
.kater-wege .kater-hallo-link { white-space: nowrap; text-align: center; text-decoration: none; color: var(--text); padding: 10px 20px; font: 400 14px/1 Inter, sans-serif; }
@media (max-width: 640px) {
  .kater-kopf { width: 84px; left: -20px; top: 70vh; }
  .kater-kopf img { width: 84px; }
  .kater-buehne { left: 16px; width: min(260px, 68vw); }
  .kater-blase { justify-self: start; font-size: 17px; }
  .kater-wege { position: fixed; left: auto; right: 16px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .kater-kopf, .kater-buehne, .kater { transition: none; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { .p-crystal svg { animation: none; } }

/* Einladungsseite: nur der Download-Teil */
.einladung { padding-top: 32px; }
.einladung h2 { font: 600 clamp(34px, 5vw, 56px)/1.05 var(--display); letter-spacing: -.025em; margin: 0 0 12px; }
.einladung > p { color: var(--muted); margin: 0 0 32px; max-width: 46ch; }
.einladung .error { color: var(--red); }

/* Seite /kater: dem Kater Hallo sagen */
.kater-buehne-seite { display: grid; justify-items: center; gap: 8px; padding: 8px 0 64px; }
.kater-spruch { max-width: min(420px, 90vw); min-height: 1em; margin: 0; font: 600 clamp(18px, 2.4vw, 24px)/1.25 var(--display); transform: rotate(-2deg); }
.kater-spruch.is-neu { animation: spruch-neu 560ms var(--barrier); }
@keyframes spruch-neu { from { opacity: 0; transform: rotate(-2deg) scale(.7) translateY(12px); } }
.kater-figur { position: relative; display: block; width: min(420px, 86vw); padding: 0; border: 0; background: none; cursor: pointer;
  animation: atmen 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
.kater-svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes atmen { 50% { transform: scaleY(1.012); } }
.kater-svg #Besen, .kater-svg #Brille, .kater-svg #Stiefel { transform-box: fill-box; }
.kater-svg #Besen { transform-origin: 28% 30%; }
.kater-svg #Brille { transform-origin: 50% 50%; }
.kater-svg #Stiefel { transform-origin: 50% 100%; }
.fegen .kater-svg #Besen { animation: fegen 2.8s ease-in-out; }
@keyframes fegen { 0%, 100% { rotate: 0deg; translate: 0 0; } 14% { rotate: 172deg; translate: 0 250px; } 28% { rotate: 164deg; translate: -14px 250px; } 42% { rotate: 178deg; translate: 10px 250px; } 56% { rotate: 164deg; translate: -14px 250px; } 70% { rotate: 178deg; translate: 10px 250px; } 86% { rotate: 172deg; translate: 0 250px; } }
.winken .kater-svg #Besen { animation: winken 2.2s var(--barrier); }
@keyframes winken { 0%, 100% { translate: 0 0; rotate: 0deg; } 20% { translate: 0 -60px; rotate: 8deg; } 40% { translate: 0 -60px; rotate: -8deg; } 60% { translate: 0 -60px; rotate: 8deg; } 80% { translate: 0 -30px; rotate: 0deg; } }
.brille .kater-svg #Brille { animation: brille 2.4s var(--barrier); }
@keyframes brille { 0%, 100% { translate: 0 0; } 20%, 70% { translate: 0 34px; } }
.stampfen .kater-svg #Stiefel { animation: stampfen 1.6s ease-in-out; }
@keyframes stampfen { 0%, 100% { translate: 0 0; } 15% { translate: 0 -26px; } 30% { translate: 0 0; } 45% { translate: 0 -20px; } 60% { translate: 0 0; } }
.staub { position: absolute; left: 60%; bottom: 8%; width: 0; height: 0; pointer-events: none; }
.staub i { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(240,240,240,.35); opacity: 0;
  animation: staub 1.4s ease-out forwards; }
@keyframes staub { 0% { opacity: 0; transform: translate(0,0) scale(.3); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(var(--s)); } }
.kater-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.kater-knoepfe button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 14px 22px;
  font: 500 16px/1 Inter, sans-serif; cursor: pointer; }
.kater-knoepfe .kater-hallo { background: var(--purple); color: var(--bg); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .kater-figur { animation: none; } }

/* Spendenaktion der Testphase (Daria, 2026-10-23) */
/* Helles Papier, damit der helle Freistellrand der Blumen verschwindet */
.spenden { --papier: #FFFFFF; --text: #1F2123; --muted: #5C5D60; --gruen: #2E9E57;
  background: var(--papier); color: var(--text); border-radius: 28px; overflow: hidden; margin: 8px 0 48px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; }
.spenden-blumen { position: relative; width: 100%; aspect-ratio: 1200 / 669; }
.spenden-blumen img { position: absolute; height: auto; display: block; transform-origin: 50% 100%; }
.spenden-blumen.is-bereit img { opacity: 0; }
.spenden-blumen.is-da img { opacity: 1; animation: blume-schieben 1500ms cubic-bezier(.2,.7,.25,1) var(--verzug) both; }
@keyframes blume-schieben {
  0% { opacity: 0; transform: translate(var(--dx), 26%) rotate(var(--dreh)) scale(.94, .82); }
  25% { opacity: 1; }
  72% { transform: translate(calc(var(--dx) * -.08), -1.2%) rotate(calc(var(--dreh) * -.15)) scale(1, 1.015); }
  100% { opacity: 1; transform: none; }
}
.spenden-text { padding: 32px; }
.spenden h2 { font: 600 clamp(28px, 4vw, 42px)/1.05 var(--display); letter-spacing: -.025em; margin: 0 0 14px; }
.spenden-text > p { color: var(--muted); margin: 0 0 14px; max-width: 46ch; }
.spenden .spenden-claim { color: var(--text); font-size: 18px; }
.zaehler { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 12px; }
.zaehler b { font: 600 56px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.zaehler span { color: var(--muted); }
.balken { height: 10px; border-radius: 999px; background: rgba(31,33,35,.1); overflow: hidden; margin-bottom: 24px; }
.balken span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--gruen); transition: width 900ms var(--barrier); }
.spenden .button { display: inline-block; text-align: center; text-decoration: none; font: 500 16px/1 Inter, sans-serif; color: var(--papier); background: var(--text); border-radius: 999px; padding: 16px 24px; }
.spenden.is-geschafft h2::after { content: ' Geschafft!'; color: var(--gruen); }
@media (max-width: 760px) { .spenden { grid-template-columns: 1fr; } .spenden-text { padding: 22px; } .spenden .button { display: block; } }

/* Me-Challenge (Daria, 25.10.2026): Vorher-Nachher-Karte wie BeforeAfterPost in der App.
   Vorher oben 1/3, Nachher 2/3; ein Tipp vergrößert eine Hälfte auf 5/6, die Karte wächst um 25 %. */
.szenarien button[hidden] { display: none; }
.p-pair { position: relative; height: 270px; border-radius: 22px; overflow: hidden; background: var(--surface); transition: height 560ms var(--barrier); }
.p-pair:not([data-focus="none"]) { height: 338px; }
.p-half { position: absolute !important; left: 0; right: 0; overflow: hidden; display: block; width: 100%;
  transition: top 560ms var(--barrier), height 560ms var(--barrier); }
.p-half img, .p-half svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 300ms; }
.p-before { top: 0; height: 33.333%; }
.p-after { top: 33.333%; bottom: 0; border-top: 2px solid var(--bg) !important; }
.p-pair[data-focus="before"] .p-before { height: 83.333%; }
.p-pair[data-focus="before"] .p-after { top: 83.333%; }
.p-pair[data-focus="after"] .p-before { height: 16.667%; }
.p-pair[data-focus="after"] .p-after { top: 16.667%; }
.p-pair[data-focus="before"] .p-after img, .p-pair[data-focus="after"] .p-before img { opacity: .6; }
.p-tag { position: absolute; top: 9px; inset-inline-start: 9px; padding: 3px 8px; border-radius: 999px; font-size: 10px; line-height: 14px; letter-spacing: .02em;
  color: #F0F0F0; background: rgba(31,33,35,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.p-took { position: absolute; z-index: 2; inset-inline-end: 10px; top: 33.333%; margin-top: -12px; height: 24px; display: flex; align-items: center; gap: 5px;
  padding: 0 10px 0 8px; border-radius: 999px; background: var(--bg); font-size: 10.5px; font-variant-numeric: tabular-nums; pointer-events: none;
  transition: top 560ms var(--barrier); }
.p-pair[data-focus="before"] .p-took { top: 83.333%; }
.p-pair[data-focus="after"] .p-took { top: 16.667%; }
.p-ziel { display: grid; gap: 10px; padding: 14px; margin-bottom: 14px; border-radius: 22px; background: var(--surface); border: .5px solid var(--line); }
.p-ziel-kopf { display: grid; gap: 3px; }
.p-ziel-kopf strong { font: 600 15.5px/1.15 var(--display); letter-spacing: -.01em; }
.p-ziel-zahl { display: flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--muted); }
.p-ziel-zahl b { font: 600 26px/1 var(--display); color: var(--text); }
.p-ziel-serie { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.p-ziel-balken { display: block; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.p-ziel-balken span { display: block; height: 100%; border-radius: inherit; background: var(--purple); transition: width 560ms var(--barrier); }
.p-ziel-tage { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.p-ziel-tage i { aspect-ratio: 1; border-radius: 50%; background: var(--line); }
.p-ziel-tage i.is-on { background: var(--purple); }
.p-ziel .p-btn, .p-ziel .p-done { justify-self: start; }
.p-pair .p-info { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; pointer-events: none; transition: opacity 300ms; }
.p-pair[data-focus="before"] .p-info { opacity: 0; }

/* Erstellen: Art wählen, Me-Schritte */
.p-kind button { font-size: 11.5px; }
.p-photo .p-tag { z-index: 1; }
.p-help { margin: -4px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.p-mini { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; padding: 6px; border-radius: 16px; background: var(--surface); }
.p-mini strong { display: block; font: 600 13px/1.2 var(--display); margin-bottom: 3px; }
.p-mini i { font-style: normal; color: var(--muted); font-size: 10.5px; }
.p-timer { position: relative; width: 180px; height: 180px; margin: 6px auto 0; display: grid; place-items: center; }
.p-timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.p-timer circle { fill: none; stroke-width: 5; }
.p-timer-track { stroke: var(--surface); }
.p-timer-bar { stroke: var(--purple); stroke-linecap: round; transition: stroke-dashoffset 100ms linear; }
.p-timer div { display: grid; justify-items: center; gap: 2px; }
.p-timer b { font: 600 26px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.p-timer span { color: var(--muted); font-size: 11px; }
.p-btn svg { margin-right: 2px; }
.p-running { width: 100%; display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; text-align: start; padding: 6px !important;
  margin-bottom: 8px; border-radius: 16px; background: var(--surface) !important; border: .5px solid var(--line) !important; }
.p-running strong { display: block; font: 600 13px/1.2 var(--display); margin-bottom: 3px; }
.p-running i { font-style: normal; color: var(--purple); font-size: 10.5px; }
.szenario-text, .szenario-info { display: none; }
@media (max-width: 900px) {
  /* Überschrift und Satz zum Prototyp; ein Tipp fährt beides über das Telefon (prototyp.js, Daria, 31.10.2026) */
  .szenario-info { display: grid; justify-items: center; gap: 6px; cursor: pointer; }
  .hero-text, .steuerung { transition: translate 450ms var(--barrier); }
  .szenario-titel { margin: 0; max-width: 30ch; text-align: center; font: 600 18px/1.25 var(--display); letter-spacing: -.01em; color: var(--text); }
  .szenario-text { display: block; margin: 0; max-width: 34ch; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.45; min-height: 4.35em; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .hero-text, .steuerung { transition: none; } }
/* Herz-Animation nach dem Posten (wie src/components/HeartBurst.tsx) */
.p-burst { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 50; }
.p-burst-big { animation: p-burst-pop 1300ms var(--barrier) both; }
.p-burst-small { position: absolute; opacity: 0; animation: p-burst-rise 900ms ease-out both; }
.p-burst-still .p-burst-big { animation: p-burst-fade 1100ms linear both; }
@keyframes p-burst-pop {
  0% { opacity: 0; transform: scale(.3); }
  25% { opacity: 1; transform: scale(1.08); }
  40%, 66% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1); }
}
@keyframes p-burst-rise {
  0% { opacity: 0; transform: translate(var(--x), 20px) scale(.4); }
  15% { opacity: 1; }
  30% { transform: translate(var(--x), -30px) scale(1); }
  70% { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--x), -150px) scale(.9); }
}
@keyframes p-burst-fade { 0%, 100% { opacity: 0; } 15%, 75% { opacity: 1; } }

/* Scrolleffekte. Ohne JS oder bei „Bewegung reduzieren“ greift nichts davon. */
/* A: Abschnitte blenden ein */
.fx-a .fx-zeigen { opacity: 0; translate: 0 28px; transition: opacity 500ms ease-out, translate 700ms var(--barrier); transition-delay: calc(var(--i, 0) * 110ms); }
.fx-a .fx-zeigen.is-da { opacity: 1; translate: 0 0; }
/* B: Kater wandert mit und neigt den Kopf, das Telefon bleibt beim Scrollen etwas zurück */
.fx-b .kater-kopf { translate: 0 var(--ky, 0px); rotate: var(--kr, 0deg); transition: transform 560ms var(--barrier), opacity 200ms, translate 400ms ease-out; }
.fx-b .phone-spalte { translate: 0 var(--ty, 0px); }
/* C: Farbverlauf oben zeigt, wie weit man gescrollt hat */
.fx-spur { display: none; }
.fx-c .fx-spur { display: block; position: fixed; z-index: 800; inset: 0 0 auto 0; height: 4px; pointer-events: none; }
.fx-c .fx-spur::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--purple), var(--pink), var(--orange));
  transform: scaleX(var(--p, 0)); transform-origin: left; border-radius: 0 4px 4px 0; }
[dir="rtl"].fx-c .fx-spur::before { transform-origin: right; background: linear-gradient(-90deg, var(--purple), var(--pink), var(--orange)); }
/* D: Kartenstapel. Jeder Abschnitt scrollt ganz durch, bleibt dann stehen, und der nächste schiebt sich mit runden Ecken darüber. */
.fx-d body > .wrap, .fx-d .mehr, .fx-d .leute, .fx-d .wechsel { position: sticky; top: min(0px, calc(100vh - var(--h, 100vh))); }
.fx-d .mehr, .fx-d .leute, .fx-d .wechsel, .fx-d .download { border-radius: 36px 36px 0 0; box-shadow: 0 -18px 40px -24px var(--schatten); }
.fx-d .download { position: relative; }
/* Karten durchscheinend mit Unschärfe: Was darunter liegt, bleibt zu ahnen (Daria, 28.10.2026) */
/* Feste Deckkraft wie bisher im Ruhezustand; sie wechselt nicht mehr beim Scrollen (Daria, 29.10.2026) */
.fx-d .mehr, .fx-d .leute, .fx-d .wechsel, .fx-d .download { --a: .4; }
.fx-d .mehr { background: linear-gradient(135deg, rgba(244,247,226,var(--a,.6)) 0%, rgba(239,236,255,var(--a,.6)) 50%, rgba(255,237,227,var(--a,.6)) 100%); }
.fx-d .wechsel { background: linear-gradient(160deg, rgba(239,248,240,var(--a,.6)) 0%, rgba(244,247,226,var(--a,.6)) 100%); }
.fx-d .leute { background: linear-gradient(160deg, rgba(255,241,234,var(--a,.6)) 0%, rgba(251,239,247,var(--a,.6)) 100%); }
.fx-d .download { background: linear-gradient(160deg, rgba(236,238,255,var(--a,.6)) 0%, rgba(246,244,255,var(--a,.6)) 60%, rgba(255,255,255,var(--a,.6)) 100%); }
.fx-d .mehr, .fx-d .leute, .fx-d .wechsel, .fx-d .download { -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2); }
/* Telefon und Tablet: ohne Unschärfe und fast deckend, sonst stockt das Scrollen (Daria, 29.10.2026) */
@media (max-width: 900px), (pointer: coarse) {
  .fx-d .mehr, .fx-d .leute, .fx-d .wechsel, .fx-d .download { -webkit-backdrop-filter: none; backdrop-filter: none; will-change: auto; --a: 1; }
  /* Kein Kartenstapel per sticky: Safari verschiebt sticky-Abschnitte, wenn die Adressleiste ein- und ausfährt,
     dann springt die Seite (Daria, 29.10.2026). Die Abschnitte schieben sich nur noch mit runden Ecken leicht übereinander. */
  .fx-d body > .wrap, .fx-d .mehr, .fx-d .leute, .fx-d .wechsel { position: relative; top: auto; }
  .fx-d .mehr, .fx-d .leute, .fx-d .wechsel, .fx-d .download { margin-top: -36px; }
}

/* Überschrift: Wörter steigen nacheinander auf, „Gemeinschaft“ schwingt zuletzt nach */
.h-wort { display: inline-block; animation: wort-auf 720ms var(--barrier) both; animation-delay: calc(var(--i) * 90ms + 150ms); }
.h-wort:last-child { animation: wort-auf 720ms var(--barrier) both, wort-schwung 1.2s ease-in-out both; animation-delay: calc(var(--i) * 90ms + 150ms), calc(var(--i) * 90ms + 800ms); transform-origin: 0 100%; }
@keyframes wort-auf { from { opacity: 0; transform: translateY(.45em) rotate(3deg); filter: blur(6px); } }
@keyframes wort-schwung { 30% { transform: rotate(-2.5deg); } 60% { transform: rotate(1.2deg); } }
@media (prefers-reduced-motion: reduce) { .h-wort, .h-wort:last-child { animation: none; } }

/* H2: Wörter steigen nacheinander auf, ruhiger als die Seitenüberschrift */
.fx-a h2.fx-zeigen { opacity: 1; translate: none; }
.h2-wort { display: inline-block; }
.fx-a h2.fx-zeigen .h2-wort { opacity: 0; transform: translateY(.3em); filter: blur(3px); }
.fx-a h2.fx-zeigen.is-da .h2-wort { opacity: 1; transform: none; filter: none;
  transition: opacity 500ms ease-out, transform 640ms var(--barrier), filter 500ms ease-out; transition-delay: calc(var(--i) * 60ms); }

/* Leute fallen von oben (über den Titel) an ihren Platz, jede Person eigenes Tempo, mit Federn (Daria, 28.10.2026) */
.leute .szene { position: relative; z-index: 2; }
.szene > .person:nth-child(1) { --y0: -240px; --d: 1150ms; --v: 0ms; }
.szene > .person:nth-child(2) { --y0: -300px; --d: 1500ms; --v: 120ms; }
.szene > .person:nth-child(3) { --y0: -200px; --d: 950ms; --v: 60ms; }
.szene > .person:nth-child(4) { --y0: -340px; --d: 1700ms; --v: 200ms; }
.szene > .person:nth-child(5) { --y0: -380px; --d: 1350ms; --v: 260ms; }
.szene > .person:nth-child(6) { --y0: -440px; --d: 1800ms; --v: 140ms; }
.szene > .person:nth-child(7) { --y0: -360px; --d: 1250ms; --v: 320ms; }
.szene > .person:nth-child(8) { --y0: -420px; --d: 1600ms; --v: 220ms; }
.js .leute .szene > .person { translate: 0 var(--y0); }
.js .leute.is-seen .szene > .person { translate: 0 0; animation: leute-fallen var(--d) linear var(--v) both; }
@keyframes leute-fallen {
  0% { translate: 0 var(--y0); opacity: 0; animation-timing-function: cubic-bezier(.45,0,.9,.6); }
  20% { opacity: 1; }
  55% { translate: 0 0; animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  70% { translate: 0 calc(var(--y0) * 0.08); animation-timing-function: cubic-bezier(.5,0,.8,.5); }
  82% { translate: 0 0; animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  91% { translate: 0 calc(var(--y0) * 0.025); animation-timing-function: cubic-bezier(.5,0,.8,.5); }
  100% { translate: 0 0; }
}
@media (max-width: 640px) { .js .leute .szene > .person, .js .leute.is-seen .szene > .person { translate: none; animation: none; } }
@media (prefers-reduced-motion: reduce) { .js .leute .szene > .person, .js .leute.is-seen .szene > .person { translate: none; animation: none; } }

/* Wieso wechseln (Daria, 29.10.2026) */
.wechsel { padding: 72px 0 64px; background: linear-gradient(160deg, #EFF8F0 0%, #F4F7E2 100%); }
.wechsel h2 { margin-bottom: 28px; }
.wechsel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 46rem; }
/* Karten wie ein Wiesental von oben (Daria, 29.10.2026): Sie überdecken einander ein wenig, leicht versetzt und gedreht.
   Die Karte in der Mitte des Bildschirms steht vorn: größer, deckend, mit Schatten (Klasse is-vorn, Skript unten). */
.wechsel-liste li { position: relative; z-index: 1; padding: 16px 20px 16px 52px; border-radius: 20px; background: rgba(255,255,255,.72); font-size: 17px; line-height: 1.45;
  box-shadow: 0 6px 18px -10px rgba(20, 16, 50, .28); transform-origin: 50% 50%; will-change: transform, opacity;
  /* Nur Verschiebung und Deckkraft animieren, ohne Nachfedern: das läuft flüssig (Daria, 29.10.2026: stockte) */
  transition: transform 360ms cubic-bezier(.2, .7, .2, 1), opacity 260ms ease-out; }
/* Schatten der vorderen Karte als eigene Ebene, die nur ein- und ausblendet */
.wechsel-liste li::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff;
  box-shadow: 0 16px 36px -14px rgba(20, 16, 50, .35); opacity: 0; transition: opacity 260ms ease-out; }
.wechsel-liste li + li { margin-top: -10px; }
.wechsel-liste li:nth-child(odd) { transform: translateX(-6px) rotate(-.6deg); }
.wechsel-liste li:nth-child(even) { transform: translateX(6px) rotate(.6deg); }
.wechsel-liste li.is-vorn { z-index: 3; transform: scale(1.06); }
.wechsel-liste li.is-vorn::after { opacity: 1; }
.wechsel-liste li.is-vorn + li, .wechsel-liste li:has(+ li.is-vorn) { z-index: 2; }
/* Steht eine Karte vorn, blassen die anderen aus, je weiter weg, desto mehr (--d: Abstand in Karten) */
.wechsel-liste.hat-vorn li:not(.is-vorn) { opacity: calc(.82 - min(var(--d, 1), 4) * .12); }
.wechsel-liste li::before { content: ''; position: absolute; left: 20px; top: 21px; width: 16px; height: 16px; border-radius: 50%; background: var(--green, #93F4A7); box-shadow: inset 0 0 0 4px rgba(255,255,255,.7); }
@media (max-width: 640px) {
  .wechsel-liste li { font-size: 16px; padding: 14px 16px 14px 44px; } .wechsel-liste li::before { left: 16px; top: 18px; }
  /* Unten Platz, damit die letzte Karte über dem schwebenden „Testen“ steht */
  .wechsel { padding-bottom: 120px; }
}
@media (prefers-reduced-motion: reduce) { .wechsel-liste li { transition: none; } }

/* Sehr schmale Handys: vier Modi in einer Zeile */
@media (max-width: 359px) { .rolle button { padding: 9px 6px; font-size: 12px; } }

/* Schwebender Knopf „Testen“ ab „Kann die App noch mehr?“ (Daria, 29.10.2026): unten rechts, wackelt alle 7 s kurz */
.testen-schwebend { position: fixed; z-index: 800; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); padding: 14px 24px; border-radius: 999px;
  background: var(--purple); color: var(--bg); font: 500 16px/1 Inter, sans-serif; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(20, 16, 50, .25); opacity: 0; translate: 0 24px; pointer-events: none;
  transition: opacity 300ms, translate 400ms var(--barrier); }
.testen-schwebend .kurz { display: none; }
.testen-schwebend.is-da { opacity: 1; translate: 0 0; pointer-events: auto; animation: testen-wackeln 7s ease-in-out 1.5s infinite; }
@media (max-width: 640px) { .testen-schwebend .lang { display: none; } .testen-schwebend .kurz { display: inline; } }
@keyframes testen-wackeln {
  0%, 84%, 100% { rotate: 0deg; scale: 1; }
  87% { rotate: -6deg; scale: 1.06; }
  90% { rotate: 5deg; scale: 1.06; }
  93% { rotate: -3deg; scale: 1.03; }
  96% { rotate: 1deg; scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .testen-schwebend { transition: opacity 200ms; translate: none; } .testen-schwebend.is-da { animation: none; } }

/* Große Abschnitte und Karten unten mit doppeltem Abstand (Daria, 29.10.2026) */
.hero { padding-bottom: 144px; }
.mehr { padding-bottom: 128px; }
.mehr-karte { padding-bottom: 40px; }
.leute { padding-bottom: 80px; }
/* Desktop: unter den Leuten doppelt so viel Luft (Daria, 31.10.2026) */
@media (min-width: 901px) { .leute { padding-bottom: 160px; } }
.wechsel { padding-bottom: 128px; }
/* Desktop: unter den Gründen gut ein Drittel mehr Luft (Daria, 31.10.2026) */
@media (min-width: 901px) { .wechsel { padding-bottom: 176px; } }
.download { padding-bottom: 48px; }
.card { padding-bottom: 56px; }
.spenden-text { padding-bottom: 64px; }
@media (max-width: 900px) { .hero { padding-bottom: 144px; } .wechsel { padding-bottom: 128px; } }
@media (max-width: 760px) { .spenden-text { padding-bottom: 44px; } }

/* Finanzierung kurz im Download-Abschnitt, Link auf /finanzierung (Daria, 08.11.2026) */
.finanzierung-kurz { margin: 40px 0 8px; padding: 24px 28px; max-width: 640px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 30px -18px var(--schatten); }
.finanzierung-kurz h3 { font: 600 24px/1.15 var(--display); letter-spacing: -.01em; margin: 0 0 8px; }
.finanzierung-kurz p { color: var(--muted); margin: 0 0 16px; }
.finanzierung-kurz a { font-weight: 500; }
.fk-balken { display: flex; gap: 3px; height: 10px; margin: 0 0 16px; }
.fk-balken span { border-radius: 999px; }
.fk-balken span:first-child { flex: 3; background: var(--text); }
.fk-balken span:last-child { flex: 7; background: #5B5CD6; }
@media (max-width: 480px) { .finanzierung-kurz { padding: 20px; border-radius: 22px; } }