/* MatchMyChat — Gestaltung
   Leitbild: die Schnittmenge. Zwei Kreise (du in Aprikose, die andere Person in Salbei) und das, was sich überschneidet.
   Dunkles Tannengrün ist der Raum, helles Papier ist immer ein Mensch (die Karte). Alles andere bleibt ruhig. */
@font-face { font-family: "Jakarta"; src: url("schrift/jakarta-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("schrift/jakarta-600.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("schrift/jakarta-800.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("schrift/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --tanne: #0E211B; --tanne-hell: #143026; --moos: #17382C; --moos-hoch: #1E4637; --rand: rgba(246, 240, 228, .10); --rand-stark: rgba(246, 240, 228, .2);
  --creme: #F4EEE1; --creme-leise: rgba(244, 238, 225, .68); --creme-zart: rgba(244, 238, 225, .08);
  --papier: #F6F0E4; --papier-tief: #EBE3D2; --tinte: #14261F; --tinte-leise: #56665C; --tinte-linie: rgba(20, 38, 31, .12);
  --du: #F2A065; --sie: #9AD0B0; --mitte: #FFE7C2;
  --akzent: #F2A065; --akzent-text: #2B1606; --bordeaux: #8A2B42; --gut: #8FE0B2; --warn: #E5574D;
  --schrift: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titel: "Bricolage", "Jakarta", system-ui, sans-serif;
  --r-gross: 28px; --r: 20px; --r-klein: 14px;
  --weich: cubic-bezier(.2, .8, .2, 1);
  /* Farben der Felder und Texte innerhalb einer Fläche; Papier-Flächen überschreiben sie */
  --text: var(--creme); --leise: var(--creme-leise); --feld: rgba(244, 238, 225, .07); --linie: var(--rand-stark); --liste-bg: #17382C; --liste-text: #F4EEE1;
  color-scheme: dark;
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; min-height: 100vh; color: var(--creme); background: var(--tanne); font: 16px/1.55 var(--schrift); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(60% 38% at 0% 0%, rgba(154, 208, 176, .20), transparent 70%), radial-gradient(50% 34% at 100% 22%, rgba(242, 160, 101, .15), transparent 70%), linear-gradient(170deg, var(--tanne-hell), var(--tanne) 60%); }
a { color: inherit; text-underline-offset: 3px; }
h1, h2 { font-family: var(--titel); text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 7.4vw, 2.3rem); line-height: 1.08; font-weight: 700; letter-spacing: -.025em; margin: 6px 0 8px; }
h2 { font-size: 1.25rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; margin: 30px 0 10px; }
main { max-width: 560px; margin: 0 auto; padding: 8px max(18px, env(safe-area-inset-right)) 150px max(18px, env(safe-area-inset-left)); }
main > p { color: var(--creme-leise); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }

/* Die Kreise */
.k-du, .k-sie { fill: none; stroke-width: var(--strich, 3px); vector-effect: non-scaling-stroke; }
.k-du { stroke: var(--du); } .k-sie { stroke: var(--sie); } .k-mitte { fill: var(--mitte); }
.k-sie.strich { stroke-dasharray: 5 7; }
.zeichen { --strich: 2.4px; } .held-bild, .feier svg { --strich: 5px; } .bild-leer { --strich: 3px; }
.weg-linie { stroke: var(--creme-leise); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }

/* Kopf und Tab-Leiste */
.top { display: flex; align-items: center; justify-content: space-between; max-width: 560px; margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left)); }
.marke { font-family: var(--titel); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; color: var(--creme); text-decoration: none; display: flex; align-items: center; gap: 9px; }
.zeichen { width: 30px; height: 30px; }
.tabs { position: fixed; z-index: 6; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 500px; margin: 0 auto; height: 68px;
  display: flex; padding: 7px; border-radius: 26px; background: rgba(14, 33, 27, .82); border: 1px solid var(--rand-stark);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 14px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  view-transition-name: tabs; }
.tabs a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 20px;
  color: var(--creme-leise); text-decoration: none; font-size: .68rem; font-weight: 600; transition: color .2s, background .2s, transform .15s var(--weich); }
.tabs a:active { transform: scale(.94); }
.tabs a.an { background: var(--creme); color: var(--tanne); }
.tabs .punkt-neu { position: absolute; top: 5px; left: calc(50% + 6px); }
.punkt-neu { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: inline-grid; place-items: center; flex: 0 0 auto;
  background: var(--akzent); color: var(--akzent-text); font-size: .68rem; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--tanne); }
.ico { width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico-entdecken { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }
.ico-matches { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ico-gruppen { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='8' cy='9' r='3'/%3E%3Ccircle cx='16' cy='9' r='3'/%3E%3Cpath d='M2 20c.6-3 3-5 6-5s5.4 2 6 5M12.5 15.5c1-.3 2.2-.5 3.5-.5 3 0 5.4 2 6 5'/%3E%3C/svg%3E"); }
.ico-kollege { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.ico-profil { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4.5-6 8-6s7 2 8 6'/%3E%3C/svg%3E"); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tabs { background: var(--tanne); } }

/* Flächen: dunkel und ruhig */
.treffen, .formular, .zeile, .mitglied, .kennzahlen div, .sicherheit, .tief, .hinweis, .dazu div, .start, .heute {
  background: linear-gradient(180deg, var(--moos-hoch), var(--moos)); color: var(--creme); border: 1px solid var(--rand); border-radius: var(--r-gross);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 10px 30px rgba(0, 0, 0, .22); }
.leise { color: var(--leise); font-weight: 400; }
.klein { font-size: .84rem; margin: 6px 0 0; }
.dehnen { flex: 1; min-width: 0; display: grid; gap: 1px; }

/* Papier: immer ein Mensch */
.karte { --text: var(--tinte); --leise: var(--tinte-leise); --feld: rgba(20, 38, 31, .05); --linie: var(--tinte-linie); --du: #EE975A; --sie: #86C7A4; --mitte: #1B4233;
  position: relative; margin: 14px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px; border-radius: var(--r-gross); color: var(--tinte);
  background: linear-gradient(180deg, var(--papier), var(--papier-tief)); box-shadow: 0 1px 0 #fff inset, 0 18px 50px rgba(0, 0, 0, .38); color-scheme: light; }
.karte p { margin: 0; }
.karte-kopf { display: flex; align-items: center; gap: 14px; }
.karte-kopf div { display: grid; flex: 1; min-width: 0; }
.karte-kopf b { font-family: var(--titel); font-size: 1.35rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.avatar { width: 54px; height: 54px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; font-family: var(--titel); font-weight: 700; font-size: 1.25rem;
  color: var(--tinte); background: var(--sie); }
.ton-0 { background: linear-gradient(140deg, #F6B98A, #EE8F52); } .ton-1 { background: linear-gradient(140deg, #B5E0C6, #7DBE9B); } .ton-2 { background: linear-gradient(140deg, #F4D58D, #E6B34A); }
.ton-3 { background: linear-gradient(140deg, #E9B7C0, #D9879A); } .ton-4 { background: linear-gradient(140deg, #BFD8E6, #8FB6CC); }
img.avatar { object-fit: cover; padding: 0; background: var(--papier-tief); }
.avatar.gross { width: 96px; height: 96px; font-size: 2rem; }
.schnitt { display: grid; justify-items: center; gap: 0; flex: 0 0 auto; min-width: 76px; }
.schnitt-wort { font-size: .66rem; font-weight: 600; color: var(--leise); margin-top: 2px; letter-spacing: .01em; }
.zeile .prozent { flex: 0 0 auto; display: grid; justify-items: end; line-height: 1.1; }
.zeile .prozent b { font-family: var(--titel); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.zeile .prozent span { font-size: .66rem; color: var(--leise); } .zeile .prozent small { font-size: .7em; opacity: .7; margin-left: 1px; }
.schnitt svg { width: 76px; height: 48px; overflow: visible; }
.schnitt b { font-family: var(--titel); font-size: 1.15rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.schnitt small { font-size: .7em; font-weight: 600; opacity: .7; margin-left: 1px; }
.art { justify-self: start; font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: #D5E8DA; color: #1B4233; }
.art-freundschaft { background: #FBDFC6; color: #7A3E12; }
.art-beziehung { background: var(--bordeaux); color: #FBEFF1; }
.art-ziel { background: #F4DFA0; color: #5A4206; } .art-projekt { background: #E2D8F2; color: #3E2A66; }
.idee small { display: block; font-weight: 500; font-size: .86rem; color: var(--leise); margin-top: 2px; }
.ziel-felder { display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--feld); border: 1px solid var(--linie); }
.ziel-felder > b { font-family: var(--titel); font-size: 1.05rem; }
.warum { font-family: var(--titel); font-size: 1.32rem; font-weight: 600; line-height: 1.28; letter-spacing: -.012em; text-wrap: pretty; }
.idee { display: grid; gap: 1px; padding: 12px 14px; border-radius: var(--r-klein); background: var(--feld); font-weight: 700; }
.idee .leise { font-size: .8rem; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: color-mix(in srgb, currentColor 9%, transparent); border-radius: 999px; padding: 5px 12px; font-size: .84rem; font-weight: 600; }
.siegel { justify-self: start; width: fit-content; display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: .72rem; font-weight: 700; padding: 4px 10px 4px 8px; border-radius: 999px; background: #1B4233; color: var(--papier); }
.siegel::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Der Vorschlag: der eine Moment, der sich bewegen darf */
.buehne { margin: 18px 0 26px; }
.entscheiden { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin: 14px 0 10px; }
.entscheiden .knopf { min-height: 58px; font-size: 1.02rem; }
.knopf.ja::before { content: ""; width: 26px; height: 16px; flex: 0 0 auto; background:
  radial-gradient(circle at 8px 8px, transparent 0 5.4px, var(--akzent-text) 5.6px 7px, transparent 7.4px), radial-gradient(circle at 18px 8px, transparent 0 5.4px, rgba(43, 22, 6, .55) 5.6px 7px, transparent 7.4px); }
.weitere { text-align: center; color: var(--creme-leise); font-size: .88rem; margin: 0; }
.nachsehen { text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .buehne .karte { animation: aufgehen .7s var(--weich) both; }
  .buehne .schnitt .k-du { animation: von-links .9s .25s var(--weich) both; }
  .buehne .schnitt .k-sie { animation: von-rechts .9s .25s var(--weich) both; }
  .buehne .schnitt .k-mitte { animation: einblenden .5s .95s ease both; }
  .buehne .warum { animation: einblenden .6s .5s ease both; }
  .buehne .entscheiden { animation: einblenden .5s .8s ease both; }
  .feier .k-du { animation: von-links-weit 1.1s .2s var(--weich) both; }
  .feier .k-sie { animation: von-rechts-weit 1.1s .2s var(--weich) both; }
  .feier .k-mitte { animation: einblenden .6s 1.1s ease both; }
  .feier h1, .feier p, .feier .knopf { animation: einblenden .7s 1.2s ease both; }
  .held-du { animation: von-links-weit 1.3s .15s var(--weich) both; }
  .held-sie { animation: von-rechts-weit 1.3s .15s var(--weich) both; }
  .held-mitte { animation: einblenden .7s 1.2s ease both; }
  .toast { animation: toast .5s var(--weich) both; }
  .punkt-neu { animation: plopp .4s var(--weich) both; }
}
@keyframes aufgehen { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes einblenden { from { opacity: 0; } }
@keyframes von-links { from { transform: translateX(-9px); } }
@keyframes von-rechts { from { transform: translateX(9px); } }
@keyframes von-links-weit { from { transform: translateX(-26px); opacity: 0; } }
@keyframes von-rechts-weit { from { transform: translateX(26px); opacity: 0; } }
@keyframes toast { from { opacity: 0; transform: translateY(-10px); } }
@keyframes plopp { from { transform: scale(0); } }

/* Begrüßung, Heute, Start */
.gruss { margin: 12px 0 20px; }
.gruss p { margin: 0; color: var(--creme-leise); font-size: 1.05rem; }
.heute { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; margin: 10px 0; text-decoration: none; border-radius: var(--r); }
.heute b { font-weight: 700; } .heute .dehnen span { color: var(--creme-leise); font-size: .9rem; }
.heute-zeichen { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; background: var(--creme-zart); position: relative; }
.heute-zeichen::after { content: ""; position: absolute; inset: 10px; background: var(--akzent); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.heute-termin { border-color: color-mix(in srgb, var(--akzent) 55%, transparent); }
.heute-termin .heute-zeichen { background: var(--akzent); }
.heute-termin .heute-zeichen::after { background: var(--akzent-text); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.heute-frage .heute-zeichen::after { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-9.5A4 4 0 0 1 12 8a4 4 0 0 1 7 2.5C19 15.600 12 20 12 20z'/%3E%3C/svg%3E"); }
.heute-knopf { flex: 0 0 auto; font-size: .84rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--creme); color: var(--tanne); }
.start { padding: 18px; margin: 26px 0 10px; display: grid; gap: 12px; }
.start-kopf { display: flex; justify-content: space-between; align-items: baseline; }
.start-kopf b { font-family: var(--titel); font-size: 1.1rem; } .start-kopf span { font-size: .84rem; color: var(--creme-leise); }
.start-leiste { display: flex; gap: 5px; }
.start-leiste i { flex: 1; height: 6px; border-radius: 3px; background: var(--creme-zart); }
.start-leiste i.voll { background: var(--sie); }
.start-naechster { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-klein); background: var(--creme-zart); text-decoration: none; }
.start-naechster .dehnen span { color: var(--creme-leise); font-size: .88rem; }
.pfeil, .zurueck::before { width: 18px; height: 18px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.zurueck { display: inline-flex; align-items: center; gap: 4px; color: var(--creme-leise); text-decoration: none; font-weight: 600; font-size: .92rem; }
.zurueck::before { content: ""; transform: rotate(180deg); }
.start-alle { margin: 0; font-size: .9rem; } .start-alle summary { color: var(--creme-leise); font-weight: 600; }
.start-alle ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.start-alle li { display: flex; gap: 10px; align-items: center; }
.start-alle li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rand-stark); flex: 0 0 auto; }
.start-alle li.fertig::before { background: var(--sie); border-color: var(--sie); }
.start-alle li.fertig a { color: var(--creme-leise); text-decoration: line-through; }

/* Leere Zustände */
.leer-buehne { text-align: center; padding: 26px 12px 8px; display: grid; justify-items: center; gap: 10px; }
.leer-buehne h2 { margin: 6px 0 0; } .leer-buehne p { margin: 0; color: var(--creme-leise); max-width: 30em; }
.bild-leer { width: 200px; height: 90px; }
.leer { color: var(--creme-leise); padding: 28px 8px; text-align: center; }

/* Der Moment, in dem beide Ja gesagt haben */
.feier { text-align: center; padding: 18px 8px 26px; display: grid; justify-items: center; gap: 10px; }
.feier svg { width: min(250px, 70vw); overflow: visible; filter: drop-shadow(0 0 34px rgba(255, 231, 194, .28)); }
.feier h1 { font-size: clamp(1.7rem, 6.6vw, 2.1rem); max-width: 14em; margin: 4px 0 0; } .feier p { margin: 0; color: var(--creme-leise); max-width: 26em; }

/* Startseite */
.held { padding: 6px 0 10px; }
.held-bild { display: block; width: min(100%, 420px); margin: 0 auto 14px; overflow: visible; }
.held-bild text { font: 600 13px var(--schrift); fill: var(--creme); }
.held-mitte text { fill: var(--tinte); }
.held-mitte text { font: 700 15px var(--titel); }
.held h1 { font-size: clamp(2.3rem, 10vw, 3.1rem); line-height: 1.02; letter-spacing: -.035em; }
.gross { font-size: 1.1rem; color: var(--creme-leise); max-width: 32em; margin: 12px 0 0; }
.ablauf { list-style: none; counter-reset: a; padding: 0; margin: 34px 0 0; display: grid; gap: 22px; }
.ablauf li { counter-increment: a; display: grid; grid-template-columns: 52px 1fr; column-gap: 8px; }
.ablauf li::before { content: counter(a); grid-row: span 2; font: 700 2.9rem/0.9 var(--titel); color: var(--sie); letter-spacing: -.04em; }
.ablauf li:nth-child(2)::before { color: var(--mitte); } .ablauf li:nth-child(3)::before { color: var(--du); }
.ablauf b { font-family: var(--titel); font-size: 1.2rem; line-height: 1.2; } .ablauf p { margin: 4px 0 0; color: var(--creme-leise); }
.dazu { display: grid; gap: 12px; margin-top: 34px; } .dazu div { padding: 18px 20px; border-radius: var(--r); }
.dazu b { font-family: var(--titel); font-size: 1.1rem; } .dazu p { margin: 4px 0 0; color: var(--creme-leise); }
.schluss { text-align: center; margin: 30px 0 0; }

/* Knöpfe */
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 12px 24px; border-radius: 999px; border: 0;
  background: var(--akzent); color: var(--akzent-text); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 18px rgba(242, 160, 101, .22); transition: transform .15s var(--weich), filter .15s; }
.knopf:active { transform: scale(.96); }
.knopf:hover { filter: brightness(1.06); }
.knopf.zweit { background: color-mix(in srgb, currentColor 11%, transparent); color: inherit; box-shadow: none; }
.knopf.warn { background: var(--warn); color: #fff; box-shadow: none; }
.knopf.voll { width: 100%; margin-top: 12px; }
.knopf:disabled { opacity: .55; }
.link { background: none; border: 0; color: inherit; opacity: .75; text-decoration: underline; text-underline-offset: 3px; font: inherit; padding: 10px 0; cursor: pointer; }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .drei .knopf { padding: 12px 8px; font-size: .92rem; }
@media (max-width: 400px) { .drei { grid-template-columns: 1fr; } }

/* Formulare */
.formular { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
label .leise { font-weight: 400; }
input, select, textarea { width: 100%; font: inherit; color: var(--text); background: var(--feld); border: 1px solid var(--linie); border-radius: var(--r-klein); padding: 13px 14px; min-width: 0; transition: border-color .15s, background .15s; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 7%, var(--feld)); }
textarea { resize: vertical; }
::placeholder { color: var(--leise); opacity: .8; }
select option, select optgroup { background-color: var(--liste-bg); color: var(--liste-text); }
.haken { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.haken input { width: 22px; height: 22px; margin-top: 1px; padding: 0; flex: 0 0 auto; accent-color: var(--akzent); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.paket span, .paket small { min-width: 0; overflow-wrap: anywhere; }
legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
fieldset .haken { padding: 12px 14px; border-radius: var(--r-klein); background: var(--feld); border: 1px solid var(--linie); align-items: center; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .zwei { grid-template-columns: 1fr; } }
.schritt { display: grid; gap: 10px; padding: 16px; border-radius: var(--r); background: var(--feld); border: 1px solid var(--linie); }
.schritt > b { display: flex; align-items: center; gap: 10px; }
.schritt p { margin: 0; }
.schritt.echt { border: 2px solid var(--akzent); }
.schritt.echt b .siegel { margin: 0; background: var(--akzent); color: var(--akzent-text); }
.schritt details p { margin-top: 8px; }
#prompt { font-size: .82rem; line-height: 1.45; }

/* Meldungen */
.hinweis { padding: 14px 18px; font-weight: 600; border-radius: var(--r); margin: 10px 0; }
.toast { border-color: color-mix(in srgb, var(--sie) 50%, transparent); }
.fehler { background: #FDE8E6; color: #8C1D18; border-radius: var(--r); padding: 14px 18px; font-weight: 600; }
.wartet { margin: 0; padding: 12px 14px; border-radius: var(--r-klein); background: color-mix(in srgb, var(--akzent) 18%, transparent); color: #F9D2B3; font-weight: 600; }
.push-karte, .meldung-an { padding: 18px; }
.push-karte b, .meldung-an b { display: block; font-family: var(--titel); font-size: 1.08rem; }
.push-karte .leise, .meldung-an .leise { margin: 6px 0 12px; font-weight: 400; }
.upgrade { display: grid; gap: 4px; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--r); text-decoration: none; background: color-mix(in srgb, var(--akzent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 50%, transparent); }
.upgrade span { font-size: .88rem; color: var(--creme-leise); }

/* Listen */
.zeile { display: flex; align-items: center; gap: 14px; padding: 13px 16px 13px 13px; margin: 10px 0; text-decoration: none; border-radius: var(--r); transition: transform .15s var(--weich); }
a.zeile:active { transform: scale(.985); }
.zeile .avatar { width: 48px; height: 48px; }
.zeile b { font-weight: 700; } .zeile .leise { font-size: .9rem; }
.zeile.ungelesen { border-color: color-mix(in srgb, var(--akzent) 55%, transparent); }
.zeile .punkt-neu { box-shadow: none; }
.zeile form { margin: 0; }

/* Treffen, Zeiten */
.treffen { display: grid; gap: 12px; margin: 16px 0; padding: 22px; }
.treffen h2 { margin: 0; } .treffen p { margin: 0; }
.fest { font-family: var(--titel); font-size: 1.3rem; font-weight: 700; color: var(--mitte); }
.zeiten { display: grid; gap: 8px; }
.slot { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-klein); border: 1px solid var(--linie); background: var(--feld); font-weight: 600; cursor: pointer; transition: background .15s, transform .15s var(--weich); }
.slot:active { transform: scale(.985); }
.slot::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; opacity: .45; flex: 0 0 auto; }
.slot:has(input:checked) { background: var(--akzent); color: var(--akzent-text); border-color: transparent; }
.slot:has(input:checked)::before { opacity: 1; background: radial-gradient(circle, currentColor 0 4px, transparent 5px); }
.slot:has(input:focus-visible) { outline: 2px solid var(--creme); outline-offset: 2px; }
.slot .chip { margin-left: auto; white-space: nowrap; }
.slot .leise { color: inherit; opacity: .75; font-weight: 400; }
.orte { display: grid; gap: 8px; }
.orte .ort { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-klein); background: var(--feld); border: 1px solid var(--linie); color: inherit; text-decoration: none; }
.orte .ort:hover { border-color: var(--akzent); }

/* Chat */
.chat { display: flex; flex-direction: column; gap: 6px; margin: 20px 0; }
.blase { max-width: 84%; margin: 0; padding: 10px 15px; border-radius: 22px 22px 22px 7px; background: var(--moos-hoch); border: 1px solid var(--rand); color: var(--creme); overflow-wrap: anywhere; }
.blase.ich { align-self: flex-end; background: var(--akzent); color: var(--akzent-text); border-color: transparent; border-radius: 22px 22px 7px 22px; }
.blase.system { align-self: center; background: none; border: 0; color: var(--creme-leise); font-size: .86rem; text-align: center; max-width: 30em; }
.blase.krise { align-self: stretch; max-width: none; border: 2px solid var(--akzent); border-radius: var(--r); }
.zeit { display: block; font-size: .68rem; opacity: .6; margin-top: 2px; }
.absender { display: block; font-size: .78rem; margin-bottom: 2px; color: var(--sie); }
.schreiben { position: sticky; z-index: 4; bottom: calc(90px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: flex-end; padding: 7px; border-radius: 28px;
  background: rgba(30, 70, 55, .92); border: 1px solid var(--rand-stark); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.schreiben textarea { flex: 1; border: 0; background: transparent; padding: 10px 12px; }
.schreiben textarea:focus { background: transparent; }
.schreiben .knopf { min-height: 44px; padding: 10px 18px; box-shadow: none; }
.krisenzeile { font-size: .84rem; color: var(--creme-leise); }
@media (prefers-reduced-motion: no-preference) { .chat .blase:last-of-type { animation: aufgehen .35s var(--weich) both; } }

/* Gruppen */
.mitglieder { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 14px 0; }
.mitglied { display: flex; gap: 10px; align-items: center; padding: 10px; min-width: 0; font-size: .9rem; border-radius: var(--r); box-shadow: none; }
.mitglied .avatar { width: 40px; height: 40px; font-size: 1rem; }

/* Sonstiges */
details { margin: 16px 0; }
.sicherheit, .tief { padding: 16px 18px; border-radius: var(--r); box-shadow: none; }
summary { cursor: pointer; font-weight: 600; }
.tief pre { white-space: pre-wrap; font: .88rem/1.55 var(--schrift); overflow-x: auto; }
.sicherheit form { margin-top: 12px; display: grid; gap: 10px; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.kennzahlen div { padding: 14px; display: grid; border-radius: var(--r); }
.kennzahlen b { font-family: var(--titel); font-size: 1.7rem; } .kennzahlen span { color: var(--creme-leise); font-size: .85rem; }
.fuss { text-align: center; color: var(--creme-leise); font-size: .82rem; padding: 0 16px 112px; }
.fuss a { color: var(--creme-leise); }
.zeilen { display: grid; gap: 6px; margin-top: 10px; } .zeilen .haken { font-size: .9rem; }
.anleitung summary, .weg summary { font-weight: 700; }
.pfad { counter-reset: s; list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.pfad li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: var(--r-klein); background: var(--feld); border: 1px solid var(--linie); }
.pfad li::before { content: counter(s); height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--sie); color: var(--tinte); }
.pfad li > div { min-width: 0; display: grid; gap: 10px; }
.pfad img { display: block; width: 100%; max-width: 420px; height: auto; border-radius: 12px; border: 1px solid var(--linie); }
.weg { margin: 8px 0; border-radius: var(--r); background: var(--feld); border: 1px solid var(--linie); padding: 12px 14px; }
.weg .pfad li { background: transparent; }
.chipwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.chipwahl legend { width: 100%; font-size: .84rem; font-weight: 700; color: var(--leise); }
.chipwahl label { position: relative; display: inline-flex; font-weight: 600; font-size: .9rem; cursor: pointer; }
.chipwahl span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--feld); transition: background .15s, color .15s, transform .15s var(--weich); }
.chipwahl label:active span { transform: scale(.94); }
.chipwahl label:has(input:checked) span { background: var(--akzent); color: var(--akzent-text); border-color: transparent; }
.chipwahl label:has(input:checked) span::before { content: "✓ "; }
.chipwahl label:has(input:focus-visible) span { outline: 2px solid var(--creme); outline-offset: 2px; }
.chipwahl.klein span { padding: 7px 12px; font-size: .85rem; }
.chipwahl.klein legend { color: var(--text); margin-bottom: 6px; }
/* Versteckte Auswahlfelder dürfen die Seite nicht breiter machen */
.chipwahl input, .slot input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.zaehler { color: var(--text); }
.ueber-helfer { display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--feld); border: 1px solid var(--linie); }
.ueber-helfer p { margin: 0; }
.foto-zeile { display: flex; gap: 16px; align-items: center; } .foto-zeile p { margin: 0; }
.foto-form { display: grid; gap: 10px; }
.foto-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 420px) { .foto-raster { grid-template-columns: repeat(2, 1fr); } }
.foto-platz { display: grid; gap: 4px; align-content: start; min-width: 0; }
.foto-wahl { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; border: 2px dashed var(--linie); background: var(--feld); cursor: pointer; }
.foto-platz.haupt .foto-wahl { border-color: var(--akzent); }
.foto-wahl img { width: 100%; height: 100%; object-fit: cover; }
.foto-wahl .plus { font-size: 2rem; font-weight: 300; color: var(--leise); }
.foto-wahl input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.foto-titel { font-size: .78rem; font-weight: 600; line-height: 1.3; }
.foto-platz .link.klein { padding: 0; font-size: .78rem; }
.foto-platz.laedt .foto-wahl { opacity: .5; }
.galerie { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: -2px 0 8px; }
.galerie figure { margin: 0; flex: 0 0 72%; max-width: 320px; scroll-snap-align: start; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-gross); display: block; }
.galerie figcaption { font-size: .82rem; font-weight: 600; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } @view-transition { navigation: none; } }

/* Partner-Empfehlung: gehört zur Planung, ist aber klar als Anzeige erkennbar */
.partner { display: grid; gap: 3px; padding: 14px 16px; border-radius: var(--r-klein); text-decoration: none; color: var(--creme);
  background: color-mix(in srgb, var(--mitte) 9%, transparent); border: 1px solid color-mix(in srgb, var(--mitte) 35%, transparent); }
.partner b { font-family: var(--titel); font-size: 1.1rem; }
.partner-kopf { display: flex; gap: 8px; align-items: center; font-size: .78rem; }
.anzeige { padding: 2px 8px; border-radius: 999px; background: var(--creme-zart); border: 1px solid var(--rand-stark); font-weight: 700; font-size: .7rem; }
.partner-angebot { color: var(--mitte); font-weight: 600; font-size: .92rem; }
.partner .leise { font-size: .85rem; }

.partner-code { display: grid; gap: 1px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--mitte) 55%, transparent); font-size: .82rem; color: var(--creme-leise); }
.partner-code b { font-family: var(--titel); font-size: 1.35rem; letter-spacing: .06em; color: var(--mitte); }
.partner-code small { font-size: .78rem; }
.held-partner { padding-top: 18px; }
.pakete { gap: 10px; }
.paket { position: relative; display: block; cursor: pointer; }
.paket input { position: absolute; opacity: 0; width: 1px; height: 1px; clip-path: inset(50%); }
.paket span { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-klein); border: 1px solid var(--linie); background: var(--feld); font-weight: 400; transition: border-color .15s, background .15s; }
.paket em { font-style: normal; font-family: var(--titel); font-weight: 700; color: var(--mitte); }
.paket small { color: var(--leise); font-size: .86rem; }
.paket:has(input:checked) span { border: 2px solid var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.paket:has(input:focus-visible) span { outline: 2px solid var(--creme); outline-offset: 2px; }
.code-form { display: grid; grid-template-columns: 1fr 96px; gap: 10px; align-items: end; }
.code-form .knopf { grid-column: 1 / -1; }
.code-form input[name=code] { font-family: var(--titel); font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; }
.liste { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--creme-leise); }

/* Logo-Animation: zwei Kreise docken aneinander, die gemeinsame Mitte leuchtet auf */
.zeichen { overflow: visible; }
.zeichen .k-mitte { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .seite- .zeichen .k-du { animation: dock-links 1s .15s var(--weich) both; }
  .seite- .zeichen .k-sie { animation: dock-rechts 1s .15s var(--weich) both; }
  .seite- .zeichen .k-mitte { animation: mitte-auf .7s 1s var(--weich) both; }
  .marke:hover .k-du, .marke:focus-visible .k-du { animation: dock-links .8s var(--weich) both; }
  .marke:hover .k-sie, .marke:focus-visible .k-sie { animation: dock-rechts .8s var(--weich) both; }
  .marke:hover .k-mitte, .marke:focus-visible .k-mitte { animation: mitte-auf .6s .7s var(--weich) both; }
}
@keyframes dock-links { 0% { transform: translateX(-9px); opacity: 0; } 30% { opacity: 1; } 72% { transform: translateX(1.2px); } 100% { transform: none; } }
@keyframes dock-rechts { 0% { transform: translateX(9px); opacity: 0; } 30% { opacity: 1; } 72% { transform: translateX(-1.2px); } 100% { transform: none; } }
@keyframes mitte-auf { 0% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.22); filter: drop-shadow(0 0 5px var(--mitte)); } 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: no-preference) { .seite- .marke-name { animation: name-auf .7s 1.5s var(--weich) both; } .marke:hover .marke-name { animation: none; } }
@keyframes name-auf { from { opacity: 0; transform: translateX(-8px); } }