/* MEEYO — Gestaltung aus der Marke (Icon: Nacht-Pflaume, Korall → Violett). Eine Schrift, selbst gehostet. */
@font-face { font-family: "Jakarta"; src: url("/static/fonts/PlusJakartaSans-400.ttf") format("truetype"); font-weight: 400; font-display: swap }
@font-face { font-family: "Jakarta"; src: url("/static/fonts/PlusJakartaSans-600.ttf") format("truetype"); font-weight: 600; font-display: swap }
@font-face { font-family: "Jakarta"; src: url("/static/fonts/PlusJakartaSans-800.ttf") format("truetype"); font-weight: 800; font-display: swap }
:root {
--nacht: #160a1c; --pflaume: #221230; --pflaume-hell: #2e1a40; --linie: #3a2750;
--milch: #f6effa; --nebel: #b9a7c9; --korall: #ff4f7a; --violett: #8b3dff; --minze: #6bffb0; --rot: #ff6b6b;
--verlauf: linear-gradient(100deg, var(--korall), var(--violett));
--gelb: #ffc857; /* Warnton: Hinweise in Raeumen, Rueckgaengig-Knopf */
--tinte: #1a0f24; /* Schrift auf hellem Grund (heller Modus) */
/* 26.09. gemessen: Korall und Minze sind fuer DUNKLEN Grund gemischt. Als SCHRIFT auf hellem Grund
kommen sie auf 3.16:1 und 3.46:1 — unter der Lesbarkeitsgrenze von 4.5:1. Darum ein eigenes Paar
nur fuer Schrift: im dunklen Modus identisch (es aendert sich nichts), im hellen dunkler gemischt.
Flaechen, Rahmen und der Verlauf behalten die Markenfarbe — sonst waere MEEYO im hellen Modus
eine andere Marke. Gemessen mit `python tools/kontrast_pruefen.py`. */
--korall-schrift: var(--korall); --minze-schrift: var(--minze);
--gelb-schrift: var(--gelb); /* 28.10.2026 (Pruefbefund 9): Gelb als SCHRIFT — im hellen Modus dunkler, sonst 1.6:1 auf Weiss */
--radius: 14px; --radius-klein: 9px;
color-scheme: dark;
}
/* Helles Thema (Owner 15.09.): dieselben Namen, andere Werte — der Nutzer waehlt oben rechts, gespeichert im Browser */
:root[data-theme="light"] {
--nacht: #faf7fc; --pflaume: #ffffff; --pflaume-hell: #f1ebf6; --linie: #e3dbea;
--milch: #1b1024; --nebel: #6b5d78; --minze: #1f9d63;
--korall-schrift: #c3103f; /* 6.06:1 auf Weiss, 5.03:1 auf dem getoenten Grund der Pillen */
--minze-schrift: #127848; /* 5.52:1 auf Weiss, 5.25:1 auf dem getoenten Grund */
--gelb-schrift: #8a5a00; /* 5.9:1 auf Weiss (vorher #ffc24f: 1.61:1) */
color-scheme: light;
}
:root[data-theme="light"] body { background: var(--nacht) }
:root[data-theme="light"] .karte, :root[data-theme="light"] .schritt, :root[data-theme="light"] .seitenleiste, :root[data-theme="light"] .chat-panel, :root[data-theme="light"] .mee-panel, :root[data-theme="light"] .rechner, :root[data-theme="light"] .satz, :root[data-theme="light"] .sicher, :root[data-theme="light"] .mat, :root[data-theme="light"] .paket, :root[data-theme="light"] .antrag, :root[data-theme="light"] .pr-schritte div { box-shadow: 0 8px 30px rgba(60,20,90,.08); border-color: var(--linie) }
:root[data-theme="light"] .hero-glut { opacity: .45 } :root[data-theme="light"] .telefon { background: #1a0f22 } :root[data-theme="light"] .kopf, :root[data-theme="light"] .schritte-nav { background: var(--nacht) }
:root[data-theme="light"] .score-pille, :root[data-theme="light"] .mpille { background: rgba(255,255,255,.85); color: #1b1024 } :root[data-theme="light"] .nachricht.du, :root[data-theme="light"] .mee-msg.mee { background: var(--pflaume-hell) }
:root[data-theme="light"] .mee-knopf-schwebend { background: #fff } :root[data-theme="light"] .zahlen.pr-zahlen div { background: var(--pflaume) }
.thema-knopf { background: transparent; border: 1px solid var(--linie); color: var(--nebel); border-radius: 999px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; font-size: 1rem; cursor: pointer; margin-left: 8px } .thema-knopf:hover { color: var(--milch) }
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; font: 400 16px/1.55 "Jakarta", system-ui, sans-serif; background: var(--nacht); color: var(--milch); }
/* Hindi: Devanagari braucht zusammenhaengende Zeichen und Platz fuer Vokalzeichen. */
html[lang="hi"] body { font-family: "Jakarta", "Nirmala UI", "Noto Sans Devanagari", "Mangal", system-ui, sans-serif }
html[lang="hi"] :is(h1, h2, h3, .buehne-claim, button, .knopf) { letter-spacing: normal; line-height: 1.4 }
a { color: inherit }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.015em; line-height: 1.12; margin: 0 0 .35em }
h1 { font-size: clamp(1.6rem, 3vw, 2rem) } h2 { font-size: 1.35rem; margin-top: 1.6em }
/* 26.09.: H3 stand auf 1.05rem — 16,8 px gegen 16 px Fliesstext. Eine Überschrift, die nicht
grösser ist als der Text darunter, ist keine Überschrift, sondern ein fett gesetzter Satz. */
h3 { font-size: 1.2rem }
p { margin: .4em 0 }
/* Kopf */
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; }
.marke { font-weight: 800; letter-spacing: .12em; font-size: 1.25rem; text-decoration: none; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent }
nav { display: flex; flex-wrap: wrap; gap: 4px 16px } nav a { color: var(--nebel); text-decoration: none; font-weight: 600; font-size: .95rem } nav a:hover, nav a:focus-visible { color: var(--milch) }
.inhalt { max-width: 720px; margin: 0 auto; padding: 24px 20px 60px }
.fuss { text-align: center; color: var(--nebel); padding: 28px 20px; font-size: .88rem }
/* Text-Hilfen */
.klein { color: var(--nebel); font-size: .9rem } .rechts { text-align: right } .fehler { color: var(--rot); font-weight: 600 } .gruen { color: var(--minze-schrift) } .rot { color: var(--rot) }
.held h1 { font-size: clamp(2.3rem, 7vw, 3.4rem) }
/* Formulare */
.formular { display: grid; gap: 16px } label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem } label.zeile { grid-template-columns: auto 1fr; align-items: center; font-weight: 400 } label.zeile input { width: auto; margin: 0 } label.zeile > span, label.zeile > a { display: inline }
input, select, textarea { font: inherit; padding: 12px 14px; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: var(--pflaume); color: var(--milch); width: 100% }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--korall); outline-offset: 2px }
button, .knopf { font: inherit; font-weight: 700; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--verlauf); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.2 }
button[type=button], .knopf.leise, .s-weg, .c-toggle { background: var(--pflaume-hell); color: var(--milch) }
button:disabled { opacity: .5; cursor: default }
.pw-huelle { position: relative; display: grid } .pw-huelle input { padding-right: 46px }
.pw-auge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; padding: 4px 8px; font-size: 1.05rem; line-height: 1; border: 0; cursor: pointer }
/* Flächen — nur dort, wo eine Gruppe wirklich zusammengehört */
.karte { background: var(--pflaume); border-radius: var(--radius); padding: 18px 20px; margin: 14px 0 }
.daten { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 6px 12px } .daten dt { color: var(--nebel) } .daten dd { margin: 0 }
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem } .tabelle td, .tabelle th { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--linie); vertical-align: top } .tabelle th { color: var(--nebel); font-weight: 600 }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums }
pre { white-space: pre-wrap; background: #0f0716; padding: 10px; border-radius: var(--radius-klein); font-size: .85rem }
/* Preise, Zähler */
.pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px }
.pakete .karte { margin: 0; display: grid; gap: 8px } .preis { font-size: 2rem; font-weight: 800; margin: 0; letter-spacing: -0.02em }
.zaehler { display: flex; gap: 28px; font-size: 1.1rem } .zaehler b { font-size: 1.7rem; font-weight: 800 }
/* Kennzahlen als Typografie, keine Kacheln */
.zahlen { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 8px 0 4px }
.zahlen div { display: grid } .zahlen b { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums } .zahlen span { color: var(--nebel); font-size: .9rem }
/* Promoter-Ticket: das eine laute Element der Seite */
.ticket { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 22px 24px; border-radius: 22px; background: var(--verlauf); color: #fff; margin: 12px 0 }
.ticket .code { font-size: clamp(2.2rem, 9vw, 3.6rem); font-weight: 800; letter-spacing: .12em; line-height: 1 }
.ticket .beschriftung { font-size: .95rem; opacity: .9 } .ticket .link { font-weight: 600; word-break: break-all; margin-top: 6px }
.ticket img { width: 118px; height: 118px; border-radius: 12px; background: #fff; padding: 6px }
.ticket .knopf { background: rgba(255,255,255,.18); color: #fff; padding: 8px 14px; font-size: .9rem; margin: 10px 8px 0 0 }
@media (max-width: 520px) { .ticket { grid-template-columns: 1fr } .ticket img { width: 96px; height: 96px } }
/* Baum: Linien nur, wo sie Struktur zeigen */
.baum { list-style: none; padding: 0; margin: 6px 0 }
.baum li { position: relative; padding: 6px 0 6px 22px; border-left: 2px solid var(--linie) }
.baum li::before { content: ""; position: absolute; left: -2px; top: 19px; width: 14px; border-top: 2px solid var(--linie) }
.baum ul { list-style: none; padding: 0 0 0 10px; margin: 4px 0 0 }
.baum .wer { font-weight: 600 } .baum .was { color: var(--nebel); font-size: .9rem }
.leer { color: var(--nebel); padding: 10px 0 }
/* Kopf mit Icon, breite Seiten */
.marke { display: inline-flex; align-items: center; gap: 10px } .marke img { border-radius: 9px }
nav .knopf.klein { padding: 8px 16px; font-size: .9rem; color: #fff } nav a.dev { opacity: .55 }
body.breit .inhalt { max-width: 1080px }
/* 27.09. (Owner: «der Satz muss in die Mitte noch»): `.mitte` zentrierte nur den TEXT, nicht den
Kasten. Auf der Startseite ist `.hero-text` 34em breit; in einem 1000px-Abschnitt stand er damit
links und der Text darin mittig — gemessen 20px links, 368px rechts. `margin-inline: auto` stellt
den Kasten selbst in die Mitte.
Die Regel stand vorher DREIMAL global im Haus (hier, bei .preis-teaser und bei #stimme-wahl); die
beiden anderen sind weg. Wirksam war ohnehin die Vereinigung — bei .preis-teaser .hero-text hatte
jemand schon einmal genau dieses Problem mit `margin: 0 auto` von Hand geflickt, an einer Stelle.
Das ist der Grund, warum es hier gehoert und nicht dort: derselbe Fehler, drei Orte, eine Ursache. */
.mitte { text-align: center; margin-top: 18px; margin-inline: auto }
.mitte-liste { max-width: 640px; margin: 20px auto 0 }
/* Bühne: Marke links, Formular rechts */
.buehne { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 460px); gap: 48px; align-items: start; margin-top: 12px }
.buehne-marke { position: sticky; top: 24px } .buehne-icon { width: 120px; height: 120px; border-radius: 26px; display: block; margin-bottom: 18px }
.buehne-claim { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 10px }
.buehne-wofuer { color: var(--nebel); font-size: 1rem; line-height: 1.45; margin: 0 0 22px; max-width: 26em }
.versprechen { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px } .versprechen li { padding-left: 22px; position: relative; color: var(--nebel) }
.versprechen li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--verlauf) }
.versprechen b { color: var(--milch) }
.buehne-form { background: var(--pflaume); border-radius: 22px; padding: 28px 28px 24px } .buehne-form h1 { font-size: 1.7rem }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px } .geburt { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 8px } .geburt input { text-align: center; font-weight: 700; letter-spacing: .04em } .formular label > .klein { display: block; margin: 2px 0 6px; color: var(--nebel) }
.code-feld { font-size: 1.8rem; letter-spacing: .5em; text-align: center; font-weight: 800 }
@media (max-width: 760px) { .buehne { grid-template-columns: 1fr; gap: 20px } .buehne-marke { position: static } .buehne-icon { width: 72px; height: 72px; border-radius: 16px } .zwei { grid-template-columns: 1fr } }
/* Hero der Startseite */
.hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; padding: 24px 0 36px }
/* 27.09. (Owner: «kannst du schauen, dass die zentriert ist — nur die Schrift, dass es aber
untereinander zentriert ist»): Der Titel stand linksbuendig und brach in drei Zeilen, wobei
«viert.» allein auf der mittleren hing — gemessen bei 1029, 1400 und 1920 px, in jeder Breite
dasselbe Bild.
`text-wrap: balance` ist die zweite Haelfte der Antwort und die wichtigere: Zentrieren allein
stellt die schiefen Zeilen nur mittig, es macht sie nicht gleich lang. Der Browser verteilt die
Woerter damit gleichmaessig auf die Zeilen, statt jede bis zum Anschlag zu fuellen und den Rest
fallen zu lassen. Genau dafuer gibt es die Eigenschaft — bei Titeln, nicht bei Fliesstext. */
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); letter-spacing: -0.025em;
text-align: center; text-wrap: balance } .glanz { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent }
.hero-text { font-size: 1.15rem; color: var(--nebel); max-width: 34em } .hero-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 }
.hero-icon { width: min(100%, 360px); justify-self: center; border-radius: 48px; box-shadow: 0 30px 80px rgba(139, 61, 255, .25) }
.zaehler-zeile { margin-top: 14px } .zaehler small { color: var(--nebel); font-size: .9rem; font-weight: 400 }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr } .hero-icon { width: 180px; order: -1; border-radius: 36px } }
.versprechen-block h2, .schritte h2 { margin-top: 1.2em }
.versprechen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 28px }
.versprechen-raster div { padding: 14px 0; border-top: 1px solid var(--linie) } .versprechen-raster b { display: block; margin-bottom: 4px } .versprechen-raster p { color: var(--nebel); margin: 0 }
.schritt-liste { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 14px; max-width: 720px }
.schritt-liste li { counter-increment: s; position: relative; padding-left: 58px; min-height: 44px; color: var(--nebel) } .schritt-liste b { color: var(--milch); display: block }
.schritt-liste li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--verlauf); color: #fff; font-weight: 800; display: grid; place-items: center }
/* Preise */
.wahl { display: inline-flex; gap: 6px; background: var(--pflaume); border-radius: 999px; padding: 6px; margin: 10px 0 6px }
.wahl-knopf { background: transparent; color: var(--nebel); padding: 10px 18px } .wahl-knopf.aktiv { background: var(--verlauf); color: #fff }
.pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 22px; max-width: 900px; margin-left: auto; margin-right: auto }
.paket { position: relative; background: var(--pflaume); border-radius: 22px; padding: 26px 22px; display: grid; gap: 6px; justify-items: center; text-align: center }
.paket.beliebt { outline: 2px solid var(--korall); outline-offset: -2px } .paket-dauer { font-weight: 600; color: var(--nebel) } .paket button { margin-top: 10px; min-width: 150px }
/* Owner 25.09.: «alle zahlen fett schwarz» — die Monatszahl stand grau da wie ein Hinweis, obwohl sie
die Zahl ist, nach der man vergleicht. Jetzt in der Textfarbe und fett, Ziffern auf gleicher Breite. */
.paket .klein { color: var(--milch); font-weight: 700; font-variant-numeric: tabular-nums }
.paket .preis { font-variant-numeric: tabular-nums }
.etikett { position: absolute; top: -12px; background: var(--verlauf); color: #fff; font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px }
/* Profil */
.profil-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap } .profil-kopf h1 { margin-bottom: 4px }
.fortschritt { min-width: 220px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline } .fortschritt b { font-size: 1.6rem } .fortschritt span { color: var(--nebel) }
.balken { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--pflaume-hell); overflow: hidden } .balken i { display: block; height: 100%; width: 0; background: var(--verlauf); transition: width .5s }
.schritte-nav { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; background: var(--nacht); padding: 12px 0; z-index: 2; border-bottom: 1px solid var(--linie) }
.schritte-nav a { color: var(--nebel); text-decoration: none; font-size: .9rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--pflaume) } .schritte-nav a.fertig { color: var(--milch) } .schritte-nav a.fertig::before { content: "✓ "; color: var(--minze-schrift) }
.schritt { background: var(--pflaume); border-radius: 22px; padding: 26px 28px; margin: 22px 0; scroll-margin-top: 70px } .schritt h2 { margin-top: 0 } .schritt h3 { margin: 22px 0 8px } .schritt .ok { margin-left: 10px; font-weight: 600 }
.schritt input, .schritt select, .schritt textarea { background: var(--nacht) }
.drei { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px } @media (max-width: 760px) { .drei { grid-template-columns: 1fr } .schritt { padding: 20px 18px } }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 14px 0 }
/* 17.10.2026 (Owner: «Profilfoto angepasst an die Seite, also klein, und die Knöpfe dürfen niemals über das Foto gehen»):
Kacheln höchstens 120 px breit, die Knöpfe stehen UNTER dem Bild (nicht mehr darüber), der Prüf-Hinweis ebenfalls. */
#fotos.fotos { grid-template-columns: repeat(auto-fill, minmax(112px, 120px)); justify-content: start; align-items: start }
#fotos .foto:not(.leer) { aspect-ratio: auto; overflow: visible; display: flex; flex-direction: column; gap: 6px; background: transparent; place-items: initial }
#fotos .foto:not(.leer) img { aspect-ratio: 4 / 5; height: auto; border-radius: 14px; background: var(--nacht) }
#fotos .foto.profilbild { outline: 0 } #fotos .foto.profilbild img { outline: 2px solid var(--korall); outline-offset: -2px }
#fotos .foto-knoepfe { position: static; justify-content: center; flex-wrap: wrap; gap: 3px } #fotos .foto-knoepfe button:first-child:has(+ button + button + button + button) { width: 100%; font-size: .75rem } /* «MEE fragen» (mee.js) eigene Zeile */
#fotos .foto-knoepfe button { min-width: 26px; width: 26px; height: 26px; line-height: 26px; padding: 0; font-size: .8rem }
#fotos .foto-hinweis { position: static; padding: 0 2px; background: none; color: var(--nebel) } #fotos .foto-hinweis[data-q=schlecht] { color: #ffb3b3 }
#fotos .foto-stand { top: 6px; left: 6px; right: 6px }
.foto { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--nacht); display: grid; place-items: center; color: var(--nebel); font-size: .85rem }
.foto img { width: 100%; height: 100%; object-fit: cover } .foto.profilbild { outline: 2px solid var(--korall); outline-offset: -2px } .foto.leer { border: 2px dashed var(--linie) }
.foto-stand { position: absolute; left: 8px; top: 8px; right: 8px; font-size: .75rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7) }
.foto-knoepfe { position: absolute; z-index: 2; bottom: 6px; right: 6px; left: 6px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px } .foto-knoepfe button { min-width: 30px; height: 30px; padding: 0 7px; font-size: .95rem; line-height: 30px; background: rgba(22,10,28,.85); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 10px } .foto-knoepfe button.weg { background: var(--korall); border-color: var(--korall) } .foto-knoepfe button:disabled { opacity: .35 } /* 18.09.: Owner fand den Loeschknopf nicht — 8px-Symbole */
.upload { display: inline-block; cursor: pointer }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px }
.chip { padding: 8px 14px; font-weight: 600; font-size: .9rem; background: var(--nacht); color: var(--nebel); border: 1px solid var(--linie) } .chip.an { background: var(--verlauf); color: #fff; border-color: transparent }
.regler-liste { display: grid; gap: 14px } .regler-liste label { grid-template-columns: 1fr 2fr 1fr; align-items: center; font-weight: 500; color: var(--nebel) } .regler-liste label :last-child { text-align: right }
input[type=range] { accent-color: var(--korall); padding: 0; background: transparent; border: 0 }
.alter-block { margin-bottom: 18px } #praeferenzen input, #praeferenzen select { padding: 8px 10px }
.geschuetzt-zeile { padding: 10px 0; border-bottom: 1px solid var(--linie) }
.sprachen-block { display: grid; gap: 6px } .feldname { font-weight: 600; font-size: .95rem } .sprachen-block .chips { margin: 4px 0 6px } .sprachen-block label { max-width: 320px }
.pref-liste { display: grid; gap: 4px } .pref-zeile { padding: 12px 0; border-bottom: 1px solid var(--linie) } .pref-zeile:last-child { border-bottom: 0 }
.pref-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px } .pref-kopf select { width: auto; padding: 6px 10px; font-size: .9rem }
.steuer .chips { margin: 4px 0 0 } .steuer input[type=range] { width: 100%; max-width: 420px } .regler-wert { display: block; color: var(--nebel); font-size: .9rem; margin-top: 2px }
/* MEE */
.mee-kopf { display: flex; gap: 16px; align-items: flex-start } .mee-kopf h2 { margin: 0 0 4px }
.mee-avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--verlauf); color: #fff; font-weight: 800; font-size: 1.3rem; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(255, 79, 122, .35) }
.ki-karte { background: var(--nacht); margin-top: 16px }
.chat { display: grid; gap: 10px; max-height: 420px; overflow-y: auto; padding: 16px; background: var(--nacht); border-radius: 18px; margin-top: 16px }
.blase { max-width: 78%; padding: 12px 16px; border-radius: 18px; line-height: 1.45 } .blase.mee { background: var(--pflaume-hell); border-bottom-left-radius: 6px; justify-self: start } .blase.du { background: var(--verlauf); color: #fff; border-bottom-right-radius: 6px; justify-self: end }
.pending { margin: 12px 0; padding: 14px 16px; border-radius: 16px; background: var(--nacht); border: 1px solid var(--linie) } .pending > b { display: block; margin-bottom: 8px }
.pending-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--linie) } .pending-zeile > span { flex: 1; min-width: 200px } .pending-zeile i { font-style: normal; color: var(--milch) } .pending-zeile b { color: var(--nebel); font-weight: 600 }
.klein-knopf { padding: 6px 14px; font-size: .85rem } .klein-knopf.leise { background: var(--pflaume-hell); color: var(--milch) }
.antwort-zeile { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: end; margin-top: 12px } .antwort-zeile textarea { background: var(--nacht); resize: none }
.mikro { width: 52px; height: 52px; padding: 0; border-radius: 50%; background: linear-gradient(135deg, var(--korall), var(--violett)); color: #fff; box-shadow: 0 4px 14px rgba(255,79,122,.35); display: inline-grid; place-items: center; border: 2px solid rgba(255,255,255,.35) } .mikro::before, .mee-mikro::before { content: ''; width: 26px; height: 26px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat } .mikro.an { background: var(--rot); color: #fff; animation: puls 1s infinite } .mikro.an::before, .mee-mikro.an::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,") } /* 18.09.: Mikrofon als klares Symbol statt Emoji (Owner: «damit man es auch wirklich erkennt») */
@keyframes puls { 50% { box-shadow: 0 0 0 8px rgba(255, 107, 107, .25) } } @media (prefers-reduced-motion: reduce) { .mikro.an { animation: none } }
.leise-link { background: transparent; color: var(--nebel); padding: 0; font-weight: 600; text-decoration: underline } .leise-link:hover { color: var(--milch) }
.ergebnis { margin-top: 18px } .ergebnis summary { cursor: pointer; font-weight: 700; color: var(--nebel); padding: 8px 0 } .ergebnis[open] summary { color: var(--milch) } .ergebnis .formular { margin-top: 12px }
.bio-werkzeuge { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin: 8px 0 14px } .bio-werkzeuge label { max-width: 180px }
.varianten { display: grid; gap: 12px; margin-bottom: 14px } .variante { background: var(--nacht); border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px } .variante p { margin: 0 } .variante button { justify-self: start; padding: 8px 16px; font-size: .9rem }
.befunde { background: var(--nacht); border-radius: 16px; padding: 12px 16px; margin-bottom: 14px } .befunde p { margin: 4px 0 }
.foto-hinweis { position: absolute; inset: auto 0 0 0; padding: 26px 8px 44px; font-size: .75rem; line-height: 1.3; color: #fff; background: linear-gradient(transparent, rgba(22, 10, 28, .92)) } .foto-hinweis[data-q=schlecht] { color: #ffb3b3 }
.foto.profilbild .foto-stand { top: 8px; left: 8px }
/* Schutz */
.badge { display: inline-block; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--minze); color: #0b2a1a; vertical-align: middle; margin-left: 8px }
.kamera { max-width: 420px; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: var(--nacht); margin: 10px 0 } .kamera video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1) }
.geste b { font-size: 1.2rem; color: var(--korall-schrift) }
.foto-rejected img { filter: grayscale(1) brightness(.6) } .foto-pending img, .foto-review img { filter: brightness(.7) }
.banner-warnung { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #3b2a12; border: 1px solid #8a6a2a; color: #ffe2a8; border-radius: 14px; padding: 12px 16px; margin: 0 0 16px } .banner-warnung button { padding: 8px 14px; font-size: .9rem; background: #8a6a2a; color: #fff }
.queue-bild { width: 96px; height: 120px; object-fit: cover; border-radius: 8px; background: var(--nacht) }
.queue-knoepfe { display: flex; gap: 6px; flex-wrap: wrap } .queue-knoepfe button { padding: 6px 10px; font-size: .8rem }
/* 10.10. Pruefqueue unterwegs (Owner: «auch mobil anschauen und akzeptieren oder verwarnen»): bis 600 px Karten statt Tabelle */
.queue-vertretung .zeile { margin: 6px 0 } .queue-vertretung select, .queue-vertretung input { max-width: 220px }
.queue-karten { display: none; gap: 14px }
.queue-karte { background: var(--nacht); border: 1px solid var(--linie); border-radius: 16px; padding: 12px; display: grid; gap: 8px; min-width: 0; transition: opacity .3s }
.queue-karte.erledigt { opacity: .35 }
.queue-karte p { margin: 0; overflow-wrap: anywhere }
.queue-karte-bild { width: 100%; max-height: 62vh; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; background: var(--pflaume) }
.queue-karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px } .queue-karte-kopf b { font-size: 1.05rem }
.queue-karte-wer { color: var(--nebel); font-size: .9rem }
.queue-karte-eingabe { width: 100%; box-sizing: border-box; min-height: 44px; font-size: 1rem }
.queue-karte-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.queue-karte-knoepfe .queue-gross { min-height: 52px; padding: 12px 10px; font-size: 1rem; border-radius: 14px; width: 100% }
.queue-karte-knoepfe .queue-gross.ja { grid-column: 1 / -1; background: var(--verlauf); color: #fff }
.queue-karte-knoepfe .queue-gross.warn { background: #8a6a2a; color: #fff }
/* 26.10.2026: Pruefqueue in Klartext — Satz, Empfehlung, Rohgrund klein; der empfohlene Knopf mit Ring */
.queue-was { margin: 0 0 4px } .queue-empfehlung { margin: 0 0 4px; color: var(--milch) } .queue-roh { margin: 0; opacity: .75 }
button.empfohlen { box-shadow: 0 0 0 3px var(--violett); font-weight: 700 }
.queue-karte-knoepfe .queue-gross.ja + .queue-gross.warn:last-child { grid-column: 1 / -1 }
.queue-karte-knoepfe .queue-gross.nein { background: var(--pflaume-hell); color: var(--milch) }
.queue-karte-mehr summary { cursor: pointer; padding: 10px 0; color: var(--nebel); font-weight: 600 } .queue-karte-mehr .queue-karte-knoepfe { margin-top: 4px }
@media (max-width: 600px) { #queue-tab { display: none } .queue-karten { display: grid } .queue-vertretung select, .queue-vertretung input { max-width: 100% } }
/* Entdecken */
.tabs { display: flex; gap: 6px; background: var(--pflaume); border-radius: 999px; padding: 6px; width: max-content; margin: 0 auto 18px }
.tab { background: transparent; color: var(--nebel); padding: 10px 22px } .tab.aktiv { background: var(--verlauf); color: #fff } .zahl-pille { background: #fff; color: var(--violett); border-radius: 999px; padding: 0 8px; font-size: .8rem; margin-left: 4px }
.stapel-huelle { max-width: 420px; margin: 0 auto } .stapel { position: relative; height: min(70vh, 620px) }
.wisch-karte { position: absolute; inset: 0; background: var(--pflaume); border-radius: 26px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); touch-action: none; user-select: none; transform: translateY(calc(var(--tiefe) * 10px)) scale(calc(1 - var(--tiefe) * .04)); transition: transform .3s; display: flex; flex-direction: column }
.fotos-rahmen { position: relative; flex: 1; min-height: 0; background: var(--nacht); cursor: pointer } .fotos-rahmen img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none }
.punkte { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 4px } .punkte i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35) } .punkte i.an { background: #fff }
.score-pille { position: absolute; top: 22px; left: 14px; background: rgba(22,10,28,.75); backdrop-filter: blur(6px); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: .85rem } .score-pille b { font-size: 1.05rem; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent }
.karte-unten { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 18px 16px; background: linear-gradient(transparent, rgba(22,10,28,.95)); color: #fff } .karte-unten h3 { margin: 0; font-size: 1.5rem } .karte-unten p { margin: 2px 0; color: #e8dcf0; font-size: .95rem }
.stempel { position: absolute; top: 60px; padding: 8px 16px; border: 4px solid; border-radius: 12px; font-weight: 800; font-size: 1.6rem; opacity: 0; transform: rotate(-12deg); pointer-events: none }
.stempel-nein { right: 20px; color: #ff6b6b; border-color: #ff6b6b } .stempel-ja { left: 20px; color: var(--minze-schrift); border-color: var(--minze); transform: rotate(12deg) } .stempel-sehr { left: 50%; top: 45%; translate: -50% -50%; color: var(--violett); border-color: var(--violett); transform: none; font-size: 2.4rem }
.details { max-height: 55%; overflow-y: auto; padding: 14px 18px; background: var(--pflaume) } .details h4 { margin: 14px 0 6px; color: var(--nebel); font-size: .9rem } .details .bio { margin: 0 } .details .chips { margin: 4px 0 } .details .chip { padding: 5px 11px; font-size: .82rem }
.fakten { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0; font-size: .9rem } .fakten dt { color: var(--nebel) } .fakten dd { margin: 0 }
.komponenten { display: grid; gap: 6px } .komp { display: grid; grid-template-columns: 130px 1fr 32px; gap: 8px; align-items: center; font-size: .85rem } .komp i { display: block; height: 8px; border-radius: 4px; background: var(--nacht); overflow: hidden } .komp b { display: block; height: 100%; background: var(--verlauf) } .komp em { font-style: normal; text-align: right; color: var(--nebel) }
.erklaerung { margin-top: 10px; padding: 10px 12px; background: var(--nacht); border-radius: 12px } .erklaerung p { margin: 4px 0 } .einstieg { color: var(--milch); font-weight: 600 }
.det-knoepfe { display: flex; gap: 8px; margin: 12px 0 0 } .det-knoepfe button { padding: 6px 12px; font-size: .85rem }
.aktionen { display: flex; justify-content: center; gap: 18px; margin: 18px 0 6px }
.akt { width: 68px; height: 68px; border-radius: 50%; padding: 0; font-size: 1.6rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .15s } .akt:hover { transform: scale(1.08) }
.akt.nein { background: var(--pflaume-hell); color: #ff6b6b } .akt.ja { background: var(--verlauf); color: #fff; width: 76px; height: 76px } .akt.sehr { background: var(--violett); color: #fff; font-size: 1.1rem; position: relative } .akt.sehr small { position: absolute; top: -4px; right: -4px; background: #fff; color: var(--violett); border-radius: 999px; font-size: .7rem; padding: 1px 6px }
.tasten { text-align: center } @media (pointer: coarse) { .tasten { display: none } }
.leer { text-align: center; padding: 60px 20px; background: var(--pflaume); border-radius: 26px }
.grund { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--pflaume-hell); border-radius: 999px; padding: 10px 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 5 } .grund button { padding: 6px 12px; font-size: .85rem; background: var(--nacht); color: var(--milch) } .grund span { font-size: .9rem; margin-right: 4px }
.dialog { position: fixed; inset: 0; background: rgba(22,10,28,.8); display: grid; place-items: center; z-index: 10; padding: 20px } .dialog-karte { background: var(--pflaume); border-radius: 22px; padding: 26px; max-width: 420px; width: 100% } .dialog-karte h3 { margin-top: 0 } .dialog-karte textarea { background: var(--nacht) }
.match-karte { text-align: center } .match-karte h3 { font-size: 2rem; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent } .match-fotos { display: flex; justify-content: center; gap: -10px; margin: 10px 0 } .match-fotos img { width: 120px; height: 150px; object-fit: cover; border-radius: 20px; border: 4px solid var(--pflaume); background: var(--nacht) } .match-fotos img:last-child { margin-left: -24px }
.sehr-liste { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 18px } .sehr-karte { flex: 0 0 300px; display: flex; gap: 12px; background: var(--pflaume); border-radius: 18px; padding: 12px; outline: 2px solid var(--violett) } .sehr-karte img { width: 84px; height: 108px; object-fit: cover; border-radius: 12px; background: var(--nacht) } .sehr-karte .nachricht { margin: 4px 0 } .sehr-knoepfe { display: flex; gap: 6px; margin: 4px 0 0 }
.matches { display: grid; gap: 10px } .match-zeile { display: flex; gap: 14px; align-items: center; background: var(--pflaume); border-radius: 18px; padding: 12px } .match-zeile img { width: 72px; height: 90px; object-fit: cover; border-radius: 12px; background: var(--nacht) } .mz-text { flex: 1 } .mz-text p { margin: 4px 0 0 }
/* Chat */
.matches .match-zeile { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 0; position: relative } .match-zeile.aktiv { outline: 2px solid var(--korall) } .match-zeile .letzte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px }
.ungelesen { position: absolute; right: 12px; top: 12px; background: var(--korall); color: #fff; border-radius: 999px; font-size: .75rem; font-weight: 700; padding: 2px 8px }
.chat-panel { display: flex; flex-direction: column; background: var(--pflaume); border-radius: 22px; overflow: hidden; min-height: 60vh; max-height: 80vh }
.chat-kopf { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linie) } .chat-kopf img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--nacht) } .chat-kopf > div:not(.chat-menu) { flex: 1 }
.chat-menu { display: flex; gap: 6px } .chat-menu button { padding: 6px 10px; font-size: .85rem } .chat-menu button.an { background: var(--verlauf); color: #fff } .zurueck { display: none; padding: 6px 12px; font-size: 1.3rem }
.chat-optionen { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--linie) } .chat-optionen button { padding: 6px 10px; font-size: .82rem }
.chat-hinweise { margin: 12px 16px 0; padding: 12px 14px; background: var(--nacht); border-radius: 14px; font-size: .9rem } .chat-hinweise p { margin: 2px 0; color: var(--nebel) }
.chat-nachrichten { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px }
.nachricht { max-width: 78%; padding: 10px 14px; border-radius: 18px; position: relative } .nachricht.ich { align-self: flex-end; background: var(--verlauf); color: #fff; border-bottom-right-radius: 6px } .nachricht.du { align-self: flex-start; background: var(--pflaume-hell); border-bottom-left-radius: 6px }
.nachricht .text { white-space: pre-wrap; word-break: break-word } .nachricht .zeit { font-size: .72rem; opacity: .7; margin-top: 4px } .nachricht .uebersetzung { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.3); font-style: italic; color: var(--nebel) } .nachricht .leise-link { font-size: .78rem; margin-top: 4px }
.sicherheits-hinweis { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #3b2a12; color: #ffe2a8; font-size: .82rem }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linie) } .chat-form textarea { resize: none; background: var(--nacht); min-height: 44px } .chat-form button { align-self: end }
#chat-sperre { padding: 12px 16px; margin: 0 } blockquote { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--korall); background: var(--nacht); border-radius: 0 10px 10px 0 }
/* Landingpage & Rechtliches */
/* 13.10.: Sprachauswahl als Dropdown (_sprachwahl.html) — Flagge + Name in der eigenen Sprache; nur Farb-Tokens */
.sprachwahl { position: relative; margin-left: 6px; flex: 0 0 auto }
.sprachwahl > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border: 1px solid var(--linie); border-radius: 999px; color: var(--nebel); font-size: .82rem; font-weight: 600; cursor: pointer; user-select: none }
.sprachwahl > summary::-webkit-details-marker { display: none }
.sprachwahl > summary:hover, .sprachwahl[open] > summary { color: var(--milch); border-color: var(--nebel) }
.sprachwahl > summary:focus-visible, .sprachwahl .sw-liste a:focus-visible { outline: 2px solid var(--korall); outline-offset: 2px }
.sprachwahl .sw-name { display: none }
.sprachwahl .sw-pfeil { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s }
.sprachwahl[open] .sw-pfeil { transform: rotate(180deg) }
.sw-flagge { flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--linie) }
.sprachwahl .sw-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; margin: 0; padding: 6px; list-style: none; min-width: 190px; max-height: min(70vh, 420px); overflow-y: auto; background: var(--nacht); border: 1px solid var(--linie); border-radius: var(--radius-klein); box-shadow: 0 12px 32px rgba(0,0,0,.35) }
.sprachwahl .sw-liste a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: 8px; color: var(--milch); text-decoration: none; font-size: .95rem; font-weight: 600 }
.sprachwahl .sw-liste a:hover { background: var(--pflaume-hell) }
.sprachwahl .sw-liste a.aktiv { background: var(--pflaume-hell); color: var(--korall-schrift) }
.sprachwahl .sw-liste a.aktiv::after { content: "\2713"; margin-left: auto }
.sprachwahl.gross { margin-left: 0 } .sprachwahl.gross > summary { font-size: .95rem; padding: 8px 14px } .sprachwahl.gross .sw-name { display: inline } .sprachwahl.gross .sw-code { display: none } .sprachwahl.gross .sw-liste { left: 0; right: auto }
.ki-block h2, .preis-teaser h2, .sicherheit-block h2, .zwei-karten h2 { margin-top: 1.4em }
.ki-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px } .ki-spalte { background: var(--pflaume); border-radius: 22px; padding: 22px 24px } .ki-spalte h3 { margin: 0 0 10px } .ki-spalte ul { margin: 0; padding-left: 1.2em; color: var(--nebel) } .ki-spalte li { margin: 6px 0 } .ki-spalte.macht h3 { color: var(--minze-schrift) } .ki-spalte.nicht h3 { color: var(--korall-schrift) }
.preis-teaser { text-align: center } .preis-teaser .hero-text { margin: 0 auto 10px } .paket-preis { font-size: 1.9rem }
.zwei-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px } .karte.gross { padding: 26px 28px; margin: 0 } .karte.gross h2 { margin-top: 0 }
.store-badges { display: flex; gap: 10px; flex-wrap: wrap } .store-badge { display: inline-block; padding: 10px 16px; border-radius: 12px; background: var(--nacht); color: var(--nebel); font-weight: 600; font-size: .9rem }
.recht { max-width: 760px; margin: 0 auto } .recht h1 { margin-top: 0 } .recht h2 { font-size: 1.15rem; margin: 1.6em 0 .4em } .recht li { margin: 6px 0 } .recht p, .recht li { color: var(--nebel) } .recht b { color: var(--milch) } .entwurf { background: #3b2a12; color: #ffe2a8; padding: 8px 12px; border-radius: 10px }
@media (max-width: 760px) { .ki-spalten, .zwei-karten { grid-template-columns: 1fr } }
.start-partner { margin-top: 30px; text-align: center } .start-partner p { max-width: 640px; margin-left: auto; margin-right: auto } /* 16.10.: «Du hast einen Betrieb?» -> /partner */
.frei-text { max-width: 36em; margin: 8px 0 6px } .frei-balken { display: grid; gap: 6px; max-width: 360px } .frei-balken div { height: 6px; border-radius: 3px; background: var(--pflaume-hell); overflow: hidden } .frei-balken i { display: block; height: 100%; background: var(--verlauf) }
.frei-zaehler { font-size: 1.3rem; margin: 10px 0 } .frei-zaehler b { font-size: 1.8rem; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent }
/* ===== Design-Durchgang 14.09.: Hero mit Telefon und Kartenstapel ===== */
.hero { position: relative; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 36px 0 56px; overflow: visible }
@media (min-width: 901px) {
.hero { grid-template-areas: "titel telefon" "text telefon"; grid-template-rows: auto auto; align-items: center; row-gap: 12px }
.hero > h1 { grid-area: titel; align-self: end } .hero-text-block { grid-area: text; align-self: start } .telefon-buehne { grid-area: telefon }
}
.hero-glut { position: absolute; inset: -120px -200px auto -200px; height: 620px; pointer-events: none; z-index: -1;
background: radial-gradient(600px 380px at 20% 30%, rgba(255,79,122,.28), transparent 70%), radial-gradient(520px 360px at 78% 45%, rgba(139,61,255,.32), transparent 70%); filter: blur(10px) }
.hero-text-block { max-width: 34em } .hero h1 { font-size: clamp(2.6rem, 5.8vw, 4.4rem); line-height: 1.02; margin: 0 0 18px }
.knopf.gross { padding: 15px 26px; font-size: 1.05rem } .knopf.gross:not(.leise) { box-shadow: 0 12px 30px rgba(255,79,122,.35) }
.telefon-buehne { position: relative; justify-self: center; width: 320px; height: 640px }
.telefon { position: relative; width: 320px; height: 640px; border-radius: 48px; background: #0d0512; border: 8px solid #2a1838; box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06); padding: 54px 14px 20px; display: flex; flex-direction: column; animation: schweben 7s ease-in-out infinite }
.telefon-kerbe { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 110px; height: 28px; border-radius: 16px; background: #000 }
.stapel { position: relative; flex: 1 }
.mkarte { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; background: var(--pflaume); box-shadow: 0 18px 40px rgba(0,0,0,.45) }
.mkarte.hinten1 { transform: translateY(12px) scale(.96) rotate(-2deg); opacity: .8 } .mkarte.hinten2 { transform: translateY(24px) scale(.92) rotate(2deg); opacity: .55 }
/* Durchlauf: jede Karte wandert vorne -> weggewischt -> versteckt -> hinten2 -> hinten1 -> vorne. Vier Karten, 16 s Runde,
je 4 s vorne; die Verzoegerung ist negativ, damit beim Laden schon der ganze Stapel steht (kein leerer erster Moment). */
.stapel.lauf .mkarte { animation: durchlauf-ja 16s cubic-bezier(.4,0,.2,1) infinite; will-change: transform, opacity }
/* Je Karte die Geste, die ihr Stempel zeigt — sonst stimmt das Bild nicht mit sich selbst überein. */
.stapel.lauf .k2 { animation-name: durchlauf-nein }
.stapel.lauf .k3 { animation-name: durchlauf-sehr }
.stapel.lauf .k1 { animation-delay: 0s } .stapel.lauf .k2 { animation-delay: -12s } .stapel.lauf .k3 { animation-delay: -8s } .stapel.lauf .k4 { animation-delay: -4s }
.stapel.lauf .mstempel { animation: stempel-lauf 16s ease-in-out infinite }
.stapel.lauf .k1 .mstempel { animation-delay: 0s } .stapel.lauf .k2 .mstempel { animation-delay: -12s } .stapel.lauf .k3 .mstempel { animation-delay: -8s } .stapel.lauf .k4 .mstempel { animation-delay: -4s }
/* Drei Gesten statt einer (Owner 27.09.: «das Wischen sollte auch mal nach rechts gehen oder nach
oben, und eben mit dem X oder ein Herz oder zwei Herzen, wie es dann richtig ist»).
Vorher flogen alle vier Karten nach LINKS und stempelten dabei ein HERZ. Links ist in jeder App die
Absage — die Attrappe zeigte also in jedem Durchlauf das Gegenteil von dem, was sie behauptete.
Die Richtungen sind die echten, aus `entdecken.js` nachgelesen (`geste()`), nicht ausgedacht:
dx > 110 -> ja = nach rechts, ein Herz
dx < -110 -> nein = nach links, ✕
dy < -130 -> sehr = nach oben, zwei Herzen
Wenn die Vorschau etwas anderes zeigt als die App tut, lernt der Besucher die falsche Geste — und
merkt es erst, wenn er sie zum ersten Mal wirklich braucht.
Nur der Weg HINAUS unterscheidet sich; der Rest des Durchlaufs (nach hinten, wieder nach vorn) ist
in allen drei gleich. Darum drei fast gleiche Sätze statt einer Variablen: CSS kann Keyframes nicht
teilweise überschreiben, und drei lesbare Sätze sind besser als ein Trick, den niemand mehr versteht. */
@keyframes durchlauf-nein {
0%, 20% { transform: translate(0,0) scale(1) rotate(0); opacity: 1; z-index: 3 }
24% { transform: translate(-130%, -30px) scale(.95) rotate(-16deg); opacity: 0; z-index: 4 }
24.5% { transform: translateY(34px) scale(.88) rotate(3deg); opacity: 0; z-index: 0 }
45% { transform: translateY(34px) scale(.88) rotate(3deg); opacity: 0; z-index: 0 }
50%, 70% { transform: translateY(24px) scale(.92) rotate(2deg); opacity: .55; z-index: 1 }
75%, 95% { transform: translateY(12px) scale(.96) rotate(-2deg); opacity: .8; z-index: 2 }
100% { transform: translate(0,0) scale(1) rotate(0); opacity: 1; z-index: 3 }
}
@keyframes durchlauf-ja {
0%, 20% { transform: translate(0,0) scale(1) rotate(0); opacity: 1; z-index: 3 }
24% { transform: translate(130%, -30px) scale(.95) rotate(16deg); opacity: 0; z-index: 4 }
24.5% { transform: translateY(34px) scale(.88) rotate(3deg); opacity: 0; z-index: 0 }
45% { transform: translateY(34px) scale(.88) rotate(3deg); opacity: 0; z-index: 0 }
50%, 70% { transform: translateY(24px) scale(.92) rotate(2deg); opacity: .55; z-index: 1 }
75%, 95% { transform: translateY(12px) scale(.96) rotate(-2deg); opacity: .8; z-index: 2 }
100% { transform: translate(0,0) scale(1) rotate(0); opacity: 1; z-index: 3 }
}
@keyframes durchlauf-sehr {
0%, 20% { transform: translate(0,0) scale(1) rotate(0); opacity: 1; z-index: 3 }
24% { transform: translate(0, -150%) scale(.95) rotate(0); opacity: 0; z-index: 4 }
24.5% { transform: translateY(34px) scale(.88) rotate(3deg); opacity: 0; z-index: 0 }
45% { transform: translateY(34px) scale(.88) rotate(3deg); opacity: 0; z-index: 0 }
50%, 70% { transform: translateY(24px) scale(.92) rotate(2deg); opacity: .55; z-index: 1 }
75%, 95% { transform: translateY(12px) scale(.96) rotate(-2deg); opacity: .8; z-index: 2 }
100% { transform: translate(0,0) scale(1) rotate(0); opacity: 1; z-index: 3 }
}
@keyframes stempel-lauf { 0%, 11% { opacity: 0 } 14%, 20% { opacity: 1 } 23%, 100% { opacity: 0 } }
/* MEE sagt zu jeder Karte etwas anderes — dieselbe Runde, dieselben Verzoegerungen */
.mee-saetze { display: grid } .mee-satz { grid-area: 1 / 1; margin: 2px 0 0; font-size: .86rem; line-height: 1.35; animation: satz-lauf 16s ease-in-out infinite }
.mee-satz.s1 { animation-delay: 0s } .mee-satz.s2 { animation-delay: -12s } .mee-satz.s3 { animation-delay: -8s } .mee-satz.s4 { animation-delay: -4s }
@keyframes satz-lauf { 0%, 20% { opacity: 1 } 23%, 97% { opacity: 0 } 100% { opacity: 1 } }
.mfoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block } .mfoto::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120px 140px at 50% 38%, rgba(255,255,255,.28), transparent 70%) }
.f1 { background: linear-gradient(160deg, #f6b19c 0%, #c86a8f 45%, #4a2a6e 100%) } .f2 { background: linear-gradient(160deg, #9fd8ff 0%, #6b7fe8 50%, #2a1a5e 100%) } .f3 { background: linear-gradient(160deg, #ffd68a 0%, #ff8a5c 50%, #5a2050 100%) } .f4 { background: linear-gradient(160deg, #bff3d8 0%, #4fb8a8 45%, #23324f 100%) }
.mpille { position: absolute; top: 14px; left: 14px; background: rgba(22,10,28,.62); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); color: #fff; font-size: .78rem; padding: 6px 11px; border-radius: 999px } .mpille b { font-size: 1rem; color: var(--korall-schrift) }
.mstempel { position: absolute; top: 60px; left: 18px; color: var(--minze-schrift); border: 4px solid var(--minze); border-radius: 12px; font-size: 1.6rem; font-weight: 800; padding: 2px 14px; transform: rotate(-12deg); opacity: 0; animation: stempel 7s ease-in-out infinite }
/* Der Stempel steht auf der Seite, von der die Karte wegfliegt — so, wie es jede App macht:
das Urteil erscheint dort, wo die Hand herkommt, nicht dort, wo die Karte hinwill. */
.mstempel.nein { left: auto; right: 18px; color: var(--korall-schrift); border-color: var(--korall); transform: rotate(12deg) }
.mstempel.sehr { left: 50%; right: auto; top: 40px; transform: translateX(-50%) rotate(0); color: var(--violett); border-color: var(--violett); letter-spacing: -.08em }
.munten { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 16px 16px; background: linear-gradient(transparent, rgba(22,10,28,.6) 40%, rgba(22,10,28,.96)); color: #fff; display: grid; gap: 2px } .munten b { font-size: 1.35rem } .munten i { font-style: normal; color: var(--minze-schrift); font-size: .9rem } .munten span { font-size: .82rem; color: #e8dcf0 }
.maktionen { display: flex; justify-content: center; gap: 16px; padding: 16px 0 6px } .ma { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 1.2rem }
.ma.nein { background: var(--pflaume-hell); color: #ff6b6b } .ma.sehr { background: var(--violett); font-size: .9rem; box-shadow: 0 8px 20px rgba(139,61,255,.45) } .ma.ja { background: var(--verlauf); width: 60px; height: 60px; box-shadow: 0 10px 24px rgba(255,79,122,.45) }
.mtabs { display: flex; justify-content: space-around; padding: 6px 30px 0 } .mtabs i { width: 22px; height: 4px; border-radius: 2px; background: #3a2750 } .mtabs i.an { background: var(--korall) }
.karten-hinweis { color: var(--nebel); font-size: .72rem; line-height: 1.35; text-align: center; max-width: 30em; margin: 12px auto 0 }
.mee-blase { position: absolute; right: -90px; top: 150px; width: 250px; display: flex; gap: 10px; background: var(--pflaume); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.5); animation: schweben 7s ease-in-out infinite reverse }
.mee-blase .mee-avatar { flex: 0 0 34px; width: 34px; height: 34px; font-size: 1rem } .mee-blase b { display: block; font-size: .8rem; color: var(--nebel) } .mee-blase p { margin: 2px 0 0; font-size: .86rem; line-height: 1.35 }
@keyframes schweben { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes stempel { 0%, 55% { opacity: 0 } 62%, 78% { opacity: 1 } 85%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
.telefon, .mee-blase, .mstempel { animation: none } .mstempel { opacity: 0 }
.stapel.lauf .mkarte, .mee-satz { animation: none }
.stapel.lauf .k1 { transform: none; opacity: 1; z-index: 3 } .stapel.lauf .k2 { transform: translateY(12px) scale(.96) rotate(-2deg); opacity: .8; z-index: 2 }
.stapel.lauf .k3 { transform: translateY(24px) scale(.92) rotate(2deg); opacity: .55; z-index: 1 } .stapel.lauf .k4 { opacity: 0 }
.mee-satz { opacity: 0 } .mee-satz.s1 { opacity: 1 }
}
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; gap: 14px; padding: 14px 0 30px }
.hero h1 { font-size: clamp(2rem, 8.4vw, 2.7rem); margin: 0 0 6px }
.telefon-buehne, .telefon { width: min(72vw, 300px); height: min(144vw, 600px) }
.telefon-buehne { margin-top: 0 } .telefon { border-radius: 42px; padding: 46px 11px 14px }
.mee-blase { position: static; width: auto; max-width: 340px; margin: 12px auto 0; animation: none }
.telefon-buehne { height: auto; display: grid; justify-items: center }
.telefon { flex: 0 0 auto }
.munten b { font-size: 1.15rem } .munten span { font-size: .78rem }
}
/* Versprechen als Liste, Sicherheit mit Icons */
.versprechen-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px }
.versprechen-liste li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linie) } .versprechen-liste b { display: block; margin-bottom: 3px } .versprechen-liste p { margin: 0; color: var(--nebel) }
.haken { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: rgba(107,255,176,.14); color: var(--minze-schrift); display: grid; place-items: center; font-weight: 800; margin-top: 2px }
.sicherheit-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px }
.sicher { background: var(--pflaume); border: 1px solid rgba(255,255,255,.05); border-radius: 18px; padding: 20px } .sicher-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,79,122,.14); color: var(--korall-schrift); font-size: 1.2rem; margin-bottom: 12px } .sicher b { display: block; margin-bottom: 4px } .sicher p { margin: 0; color: var(--nebel); font-size: .875rem }
@media (max-width: 760px) { .versprechen-liste { grid-template-columns: 1fr } }
h2 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); letter-spacing: -0.02em }
/* ===== Entdecken als App-Layout (14.09.): Matches links, Karte oder Chat rechts ===== */
#entdecken { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: start }
#entdecken .tabs { display: none }
.seitenleiste { background: var(--pflaume); border-radius: 24px; padding: 16px 12px; position: sticky; top: 84px; min-height: calc(100vh - 130px); max-height: calc(100vh - 110px); overflow-y: auto; border: 1px solid rgba(255,255,255,.05) }
.seite-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 8px 12px } .seite-kopf h2 { margin: 0; font-size: 1.25rem }
.leer-hinweis { padding: 8px 10px }
.matches { gap: 4px } .matches .match-zeile { background: transparent; border-radius: 16px; padding: 10px } .matches .match-zeile:hover { background: var(--pflaume-hell) } .match-zeile.aktiv { outline: 0; background: var(--pflaume-hell) }
.match-zeile img { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 56px } .match-zeile.neu img { outline: 3px solid transparent; box-shadow: 0 0 0 2px var(--nacht), 0 0 0 4px var(--korall) }
.match-zeile .mz-text b { font-size: .98rem } .match-zeile .letzte { max-width: 190px; margin-top: 2px }
.haupt { min-width: 0 }
.haupt-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px } .haupt-kopf h2 { margin: 0; font-size: 1.25rem }
#tab-fuer-dich .stapel-huelle { max-width: 440px } .stapel { height: min(68vh, 640px) }
#entdecken.chat-offen #tab-fuer-dich { display: none } #entdecken:not(.chat-offen) #tab-matches { display: none }
.chat-panel { min-height: calc(100vh - 130px); max-height: calc(100vh - 110px); border: 1px solid rgba(255,255,255,.05) }
.chat-kopf img { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--pflaume), 0 0 0 4px var(--korall) }
.mee-knopf { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(139,61,255,.45) !important } .mee-knopf i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--violett); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center }
.chat-form { grid-template-columns: 1fr 46px; align-items: end } .chat-form textarea { border-radius: 22px; padding: 11px 16px } .chat-form .senden { width: 46px; height: 46px; border-radius: 50%; padding: 0; display: grid; place-items: center; font-size: 1.05rem; background: var(--verlauf); color: #fff; box-shadow: 0 8px 20px rgba(255,79,122,.35) }
.nachricht.ich { box-shadow: 0 6px 18px rgba(255,79,122,.25) }
@media (max-width: 999px) {
#entdecken { display: block } #entdecken .tabs { display: flex }
.seitenleiste { position: static; max-height: none; background: transparent; border: 0; padding: 0 }
#entdecken[data-ansicht="fuer-dich"] .seitenleiste, #entdecken[data-ansicht="fuer-dich"] #tab-matches { display: none }
#entdecken[data-ansicht="matches"] #tab-fuer-dich { display: none }
#entdecken[data-ansicht="matches"].chat-offen .seitenleiste { display: none }
.zurueck { display: inline-block } .chat-panel { max-height: none; min-height: 70vh }
.seite-kopf { display: none } .matches .match-zeile { background: var(--pflaume) }
}
#sehr-block { max-width: 440px; margin: 0 auto 18px } #sehr-block h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--nebel); letter-spacing: 0 }
.sehr-liste { margin-bottom: 0 } .sehr-karte { flex: 0 0 100%; outline: 0; border: 1px solid rgba(139,61,255,.5); box-shadow: 0 10px 30px rgba(139,61,255,.15) } .sehr-karte b + span { margin-left: 6px; color: var(--nebel); font-weight: 400 } .sehr-karte img { width: 70px; height: 88px }
.seite-link { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-radius: 16px; padding: 10px; margin-bottom: 10px; cursor: pointer; line-height: 1.3 } .seite-link:hover { background: var(--pflaume-hell) } .seite-link.aktiv { background: var(--pflaume-hell) }
.sl-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--verlauf); color: #fff; display: grid; place-items: center; font-size: 1.4rem; flex: 0 0 56px; box-shadow: 0 8px 20px rgba(255,79,122,.3) }
.mz-text b + span.klein { margin-left: 6px }
@media (max-width: 999px) { .seite-link { display: none } }
/* Kopf auf dem Handy: eine Zeile, seitlich wischbar statt dreizeilig */
@media (max-width: 760px) { .kopf { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px 6px } nav { flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch } nav::-webkit-scrollbar { display: none } nav a { flex: 0 0 auto } nav a.dev { display: none } .sprachwahl { flex: 0 0 auto } }
.chat-kopf > div:not(.chat-menu) { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3 }
@media (max-width: 760px) { .chat-kopf { gap: 8px; padding: 10px 12px } .chat-menu button { padding: 6px 8px } .mee-knopf { padding: 6px 10px !important } }
/* ===== MEE Support-Widget (Baustein 12 Stufe 1) ===== */
.mee-knopf-schwebend { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--pflaume); border: 1px solid rgba(139,61,255,.5); color: var(--milch); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 0 rgba(139,61,255,.4); animation: mee-puls 3s ease-out infinite }
.mee-knopf-schwebend .mee-avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: .95rem }
@keyframes mee-puls { 0% { box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 0 rgba(139,61,255,.45) } 70% { box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 14px rgba(139,61,255,0) } 100% { box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 0 rgba(139,61,255,0) } }
@media (prefers-reduced-motion: reduce) { .mee-knopf-schwebend { animation: none } }
.mee-panel { position: fixed; right: 20px; bottom: 20px; z-index: 41; width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100vh - 40px)); display: flex; flex-direction: column; background: var(--pflaume); border-radius: 22px; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden }
.mee-panel-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--linie) } .mee-panel-kopf .mee-avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: 1rem } .mee-panel-kopf b { flex: 1; font-size: .95rem } .mee-zu { padding: 6px 10px }
.mee-verlauf { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px }
.mee-msg { max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: .95rem; line-height: 1.45; white-space: pre-wrap } .mee-msg.mee { align-self: flex-start; background: var(--nacht); border-bottom-left-radius: 6px } .mee-msg.du { align-self: flex-end; background: var(--verlauf); color: #fff; border-bottom-right-radius: 6px } .mee-msg.warte { color: var(--nebel); font-style: italic }
.mee-aktion { align-self: flex-start; padding: 8px 14px; font-size: .9rem; border-radius: 999px; background: transparent; color: var(--milch); border: 1px solid rgba(139,61,255,.6) } .mee-aktion:hover { background: var(--pflaume-hell) }
.mee-hinweis { margin: 0; padding: 6px 14px; color: var(--nebel) }
.mee-form { display: grid; grid-template-columns: 1fr 42px 42px; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--linie) } .mee-form input { background: var(--nacht); border-radius: 999px; padding: 10px 14px } .mee-form button { width: 42px; height: 42px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: var(--verlauf); color: #fff }
@media (max-width: 760px) { .mee-knopf-schwebend { right: 14px; bottom: 14px } .mee-panel { right: 12px; bottom: 12px } }
/* Profil-Abschnitte zum Aufklappen */
.schritt > .klapp { cursor: pointer; position: relative; padding-right: 36px; user-select: none } .schritt > .klapp::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--nebel); border-bottom: 2px solid var(--nebel); transform: translateY(-70%) rotate(45deg); transition: transform .2s }
.schritt.zu > .klapp::after { transform: translateY(-30%) rotate(-45deg) } .schritt.zu > *:not(.klapp) { display: none } .schritt.zu { padding: 18px 28px } .schritt.zu > h2 { margin: 0 } .schritt.zu > .mee-kopf { margin: 0 } .schritt.zu > .mee-kopf p { display: none }
@media (max-width: 760px) { .schritt.zu { padding: 16px 18px } }
.mee-mikro { width: 44px; height: 44px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--korall), var(--violett)) !important; color: #fff; border: 2px solid rgba(255,255,255,.35) } .mee-mikro::before { width: 22px; height: 22px } .mee-mikro.an { background: var(--rot) !important } .mee-ton { padding: 6px 8px } .mee-ton.an { background: var(--pflaume-hell) }
/* ===== Volle Breite, fliessend (Owner 15.09.): der Inhalt nutzt den Bildschirm, Textzeilen bleiben lesbar (max. ~70 Zeichen) ===== */
.inhalt, body.breit .inhalt { max-width: 1680px; padding: 24px clamp(16px, 3.5vw, 64px) 60px }
.kopf { padding: 14px clamp(16px, 3.5vw, 64px) }
/* Formularseiten: das Formular mittig und schmal, die Seite bleibt breit */
.formular { max-width: 640px } .inhalt > .formular, .inhalt > form.formular { margin-left: auto; margin-right: auto }
/* Landingpage: Hero fuellt die Breite, Telefon rechts, Fliesstext begrenzt */
.hero { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr); gap: clamp(24px, 4vw, 80px); min-height: min(78vh, 760px) }
.hero-text-block { max-width: 40em } .hero h1 { font-size: clamp(2.6rem, 5vw, 5.2rem) } /* 26.09.: Vorspann war 16,6 px gegen 16 px Fliesstext — kein Unterschied, den ein Auge als
Stufe liest, aber genug, damit die Seite unruhig wirkt. Jetzt eine echte Stufe. */
.hero-text { font-size: 1.125rem; max-width: 34em }
@media (min-width: 1400px) { .telefon-buehne, .telefon { width: 360px; height: 720px } .telefon { border-radius: 54px } }
.versprechen-liste { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px clamp(24px, 3vw, 64px) }
.sicherheit-raster { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(12px, 1.5vw, 24px) }
.pakete { max-width: none } .paket { padding: clamp(22px, 2.4vw, 36px) clamp(18px, 2vw, 30px) }
.zwei-karten, .zwei { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) }
/* Entdecken: Seitenleiste waechst mit, Buehne bleibt mittig, Karte darf groesser werden */
#entdecken { grid-template-columns: clamp(320px, 22vw, 420px) minmax(0, 1fr); gap: clamp(20px, 2.5vw, 40px) }
#tab-fuer-dich .stapel-huelle { max-width: clamp(420px, 30vw, 520px) } .stapel { height: min(72vh, 760px) }
.chat-panel { max-width: 1100px; margin: 0 auto; width: 100% }
/* Profil: Abschnitte zweispaltig auf breiten Schirmen */
@media (min-width: 1200px) { #profil .schritt .formular { max-width: none } #profil .formular { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); column-gap: 32px } #profil .formular > .zeile, #profil .formular > button, #profil .formular > .chips, #profil .formular > h3, #profil .formular > p { grid-column: 1 / -1 } }
h2 { font-size: clamp(1.2rem, 1.6vw, 1.45rem) } p, li { max-width: 72ch } /* 17.10.2026 (Owner: «grössere Schrift wegnehmen» — h2 war bis 36 px): Titel 19–23 px */
.fuss { padding: 30px clamp(16px, 3.5vw, 64px) }
.buehne { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 560px); gap: clamp(32px, 5vw, 96px); align-items: center; min-height: 70vh } .buehne-form { background: var(--pflaume); border-radius: 26px; padding: clamp(22px, 2.5vw, 40px) } .buehne-form .formular { max-width: none }
@media (max-width: 900px) { .buehne { grid-template-columns: 1fr; min-height: 0 } }
/* Tagesfrage, Match des Tages, Nachfasser, Quiz (15.09.) */
.tagesfrage { display: flex; gap: 12px; align-items: flex-start; background: var(--pflaume); border: 1px solid rgba(139,61,255,.35); border-radius: 18px; padding: 12px 14px; margin-bottom: 14px } .tagesfrage b { display: block; margin-bottom: 8px } .tf-optionen { display: flex; gap: 8px }
.tf-avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--verlauf); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .85rem }
.tages-pille { position: absolute; top: 22px; right: 14px; background: var(--verlauf); color: #fff; font-weight: 800; font-size: .78rem; padding: 6px 12px; border-radius: 999px; box-shadow: 0 8px 20px rgba(255,79,122,.35) }
.ktf { display: inline-block; background: rgba(139,61,255,.4); border-radius: 999px; padding: 4px 10px; font-size: .82rem; margin-top: 6px !important } .ktf b { color: #fff; margin-left: 4px }
.nachfassen { display: flex; gap: 10px; align-items: center; margin: 8px 16px 0; padding: 10px 12px; background: var(--pflaume-hell); border: 1px solid rgba(255,79,122,.35); border-radius: 14px; font-size: .9rem } .nachfassen span:not(.tf-avatar) { flex: 1 }
.quiz-leiste { margin: 10px 16px 0; text-align: left; background: var(--pflaume-hell); border: 1px solid rgba(139,61,255,.4); border-radius: 14px; padding: 10px 14px; color: var(--milch); font-weight: 700; width: calc(100% - 32px) }
.quiz-karte { max-width: 560px; max-height: 85vh; overflow-y: auto } .quiz-frage { margin: 14px 0 } .quiz-frage b { display: block; margin-bottom: 8px } .quiz-frage .chip { cursor: pointer; border: 1px solid var(--linie); background: var(--nacht); color: var(--milch); font: inherit; font-size: .9rem; padding: 7px 13px; border-radius: 999px } .quiz-frage .chip.an { background: var(--verlauf); color: #fff; border-color: transparent }
.quiz-ergebnis { text-align: center; background: var(--verlauf); border-radius: 18px; padding: 18px; margin-bottom: 12px } .quiz-ergebnis b { display: block; font-size: 2.6rem; color: #fff } .quiz-ergebnis span { color: rgba(255,255,255,.9) }
.quiz-paar { background: var(--nacht); border-radius: 12px; padding: 10px 12px; margin: 6px 0 } .quiz-paar p { margin: 0 0 4px } .quiz-paar div { display: flex; gap: 12px; font-weight: 600 } .quiz-paar.gleich div { color: var(--minze-schrift) }
/* ===== Promoter-Seite (15.09.) ===== */
.pr-eyebrow { color: var(--korall-schrift); font-weight: 800; font-size: .85rem; letter-spacing: .02em; margin: 0 0 8px }
/* 25.09.: die Beispiel-Tabelle brach um, weil diese Spalte auf 480 px gedeckelt war — «EUR 180 / CHF 180»
und daneben noch «Ebene 1 · Deine zahlenden Kunden» gehen darin nicht nebeneinander. 620 px reichen. */
.pr-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 620px); gap: clamp(28px, 4vw, 80px); align-items: center; padding: 20px 0 40px } .pr-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: 1.05 } .pr-vertrag { margin: 18px 0 8px }
.rechner { background: var(--pflaume); border-radius: 26px; padding: 24px; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 30px 80px rgba(0,0,0,.35) } .rechner h3 { margin: 0 0 14px } .rechner label { display: block; margin: 10px 0 14px; color: var(--nebel); font-weight: 600; font-size: .9rem } .rechner label b { float: right; color: var(--milch) }
.rechner input[type=range] { width: 100%; margin-top: 8px; accent-color: var(--korall) }
.rechner-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 12px } .rechner-zahlen div { background: var(--nacht); border-radius: 16px; padding: 14px; display: grid } .rechner-zahlen b { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent } .rechner-zahlen span { color: var(--nebel); font-size: .85rem }
.pr-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 10px 0 36px } .pr-schritte div { background: var(--pflaume); border-radius: 20px; padding: 20px; position: relative; padding-top: 22px } .pr-schritte i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--verlauf); color: #fff; font-style: normal; font-weight: 800; margin-bottom: 12px } .pr-schritte b { display: block; margin-bottom: 4px } .pr-schritte p { margin: 0; color: var(--nebel); font-size: .95rem }
.pr-saetze { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px } .satz { background: var(--pflaume); border-radius: 20px; padding: 20px; display: grid; gap: 4px; border: 1px solid rgba(255,255,255,.05) } .satz span { color: var(--nebel); font-size: .9rem; font-weight: 600 } .satz b { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em } .satz small { color: var(--korall-schrift); font-weight: 700 } .satz em { color: var(--nebel); font-style: normal; font-size: .85rem; margin-top: 6px }
.pr-kopf h1 { font-size: clamp(1.8rem, 3vw, 2.6rem) } .ticket-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px } .ticket-knoepfe .knopf { padding: 10px 16px; font-size: .92rem }
.pr-zahlen { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) } .guthaben .hervor { outline: 2px solid var(--korall) }
.material { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 12px 0 8px } .mat { display: grid; gap: 4px; background: var(--pflaume); border-radius: 20px; padding: 12px; text-decoration: none; color: var(--milch); border: 1px solid rgba(255,255,255,.05); transition: transform .15s } .mat:hover { transform: translateY(-3px) } .mat img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--nacht); margin-bottom: 6px } .mat.hoch img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top } .mat b { font-size: .98rem } .mat span { color: var(--nebel); font-size: .82rem } .mat em { font-style: normal; color: var(--korall-schrift); text-decoration: underline }
.pr-dsg { background: var(--pflaume); border-radius: 12px; padding: 8px 12px; display: inline-block }
.baum .wer small { color: var(--nebel); font-weight: 400; margin-left: 6px }
.pr-daten { margin-top: 30px } .pr-daten summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px } .pr-daten summary::-webkit-details-marker { display: none } .pr-daten summary h2 { margin: 0 } .pr-daten summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--nebel); border-bottom: 2px solid var(--nebel); transform: rotate(-45deg); transition: transform .2s } .pr-daten[open] summary::after { transform: rotate(45deg) } .pr-daten form { margin-top: 16px; max-width: 640px }
@media (max-width: 900px) { .pr-hero { grid-template-columns: 1fr } }
.zahlen.pr-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0 } .zahlen.pr-zahlen div { background: var(--pflaume); border-radius: 18px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.05) } .zahlen.pr-zahlen b { font-size: 1.9rem }
#portal .ticket { padding: 26px 28px; margin: 16px 0 } #portal .ticket img { width: 150px; height: 150px; border-radius: 16px }
.ticket .ticket-knoepfe .knopf { margin: 0 }
/* 11.10. (Owner: «farblich … mach diese Boxen so wie die anderen»): die Link-Boxen im Portal im selben Kartenstil wie alle
anderen Kaesten (cms-box) — keine knallige Verlaufsflaeche mehr; genau wie die Ansprechperson-Box. */
#portal .ticket { background: var(--pflaume); color: var(--milch); border: 1px solid var(--linie); border-radius: var(--radius);
padding: 15px 16px; position: relative; overflow: hidden }
#portal .ticket::before { content: none }
#portal .ticket .beschriftung { color: var(--nebel); opacity: 1; font-weight: 700; font-size: .98rem }
#portal .ticket .link { color: var(--milch) }
#portal .ticket .knopf { background: rgba(255,255,255,.06); color: var(--milch); border: 1px solid var(--linie) }
#portal .ticket .knopf:hover { background: rgba(255,255,255,.12) }
#portal .ticket .klein, #portal .ticket p { color: var(--nebel) }
#portal .ticket img { width: 96px; height: 96px; border-radius: 10px; padding: 4px }
.mat.quer img { aspect-ratio: 16 / 9; object-fit: cover }
/* Umkreis-Radar */
.umkreis-karte { max-width: 640px } .radar { position: relative; margin: 10px auto }
.radar .ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.14) } .radar .ring.r1 { border-color: rgba(255,79,122,.55) } .radar .ring.r2 { border-color: rgba(139,61,255,.5) } .radar .ring.r3 { background: rgba(139,61,255,.05) }
.radar .ring-label { position: absolute; transform: translate(-50%, -50%); font-size: .72rem; font-weight: 700; color: var(--nebel); background: var(--pflaume); padding: 0 6px; border-radius: 6px }
.radar-ich { position: absolute; width: 62px; height: 62px; border-radius: 50%; background: var(--verlauf); padding: 3px; box-shadow: 0 0 30px rgba(255,79,122,.5) } .radar-ich img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--nacht) }
.radar-person { position: absolute; width: 48px; padding: 0; background: transparent; border: 0; cursor: pointer; display: grid; justify-items: center; gap: 2px; transition: transform .15s } .radar-person:hover { transform: scale(1.1); z-index: 2 }
.radar-person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--pflaume); border: 2px solid var(--linie) } .radar-person.ring1 img { border-color: var(--korall) } .radar-person.ring2 img { border-color: var(--violett) }
.radar-person span { font-size: .66rem; font-weight: 700; color: var(--milch); background: rgba(22,10,28,.8); padding: 1px 6px; border-radius: 6px; white-space: nowrap }
#umkreis-knopf { background: none; border: 0; color: var(--korall-schrift); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: none }
.sehr-mee { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 } .sehr-vorschlaege { display: grid; gap: 6px; margin-bottom: 10px } .sehr-vorschlaege .vorschlag { text-align: left; background: var(--nacht); color: var(--milch); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; font: inherit; cursor: pointer; line-height: 1.4 } .sehr-vorschlaege .vorschlag:hover { border-color: var(--nebel) } .sehr-vorschlaege .vorschlag.an { border-color: var(--violett); box-shadow: 0 0 0 1px var(--violett) }
.ort-liste { display: grid; gap: 2px; background: var(--pflaume-hell); border-radius: 12px; padding: 6px; margin-top: 4px } .ort-liste button { text-align: left; background: transparent; color: var(--milch); border: 0; padding: 8px 10px; border-radius: 8px; font: inherit; cursor: pointer } .ort-liste button:hover { background: var(--nacht) }
.sozial { margin-top: 18px; display: grid; gap: 10px; justify-items: center } .sozial-oder { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--nebel); font-size: .85rem; margin: 0 } .sozial-oder::before, .sozial-oder::after { content: ""; flex: 1; height: 1px; background: var(--linie) }
.apple-knopf { width: 320px; max-width: 100%; background: #000; color: #fff; border: 1px solid #333; border-radius: 999px; padding: 11px 16px; font-weight: 700; font-size: .95rem } .apple-knopf:hover { background: #111 }
.sozial-blatt { width: 100%; text-align: left } .datum-felder { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px }
.antrag { margin-top: 36px; background: var(--pflaume); border-radius: 26px; padding: clamp(20px, 3vw, 40px); border: 1px solid rgba(255,255,255,.06) } .antrag-form { max-width: 820px } .antrag-form h3 { margin: 22px 0 6px; color: var(--korall-schrift); font-size: 1rem } .antrag-form .chips { display: flex; flex-wrap: wrap; gap: 8px } .antrag-form .chip { cursor: pointer; border: 1px solid var(--linie); background: var(--nacht); color: var(--milch); font: inherit; font-size: .9rem; padding: 8px 14px; border-radius: 999px } .antrag-form .chip.an { background: var(--verlauf); color: #fff; border-color: transparent }
.antrag-karte { background: var(--nacht); border-radius: 14px; padding: 12px 14px; margin: 10px 0 } .antrag-karte h3 { margin: 0 0 6px } .antrag-karte p { margin: 2px 0 }
/* ---- Handy (gemessen 16.09.2026 bei 375 px: Hero blieb zweispaltig, weil Zeile 334 die Media-Query von 262 ueberschrieb; hero-glut schob die Seite 184 px breiter) — steht am Ende, damit es die Desktop-Regeln oben sicher schlaegt */
html, body { overflow-x: clip }
.thema-knopf { flex: 0 0 34px }
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; min-height: 0; gap: 28px; padding: 16px 0 40px }
.hero-text-block, .hero-text { max-width: none }
.hero h1 { font-size: clamp(2.3rem, 11vw, 3.4rem) }
.hero-text { font-size: 1.05rem }
.hero-knoepfe { flex-direction: column } .hero-knoepfe .knopf { text-align: center }
.hero-glut { inset: -60px -20px auto -20px; height: 460px }
.buehne { grid-template-columns: 1fr; min-height: 0 }
.telefon-buehne { justify-self: center }
}
@media (max-width: 520px) {
.inhalt, body.breit .inhalt { padding: 16px 16px 48px }
.schritt, .karte, .buehne-form { padding: 18px 16px; border-radius: 18px }
.wahl { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; border-radius: 22px } .wahl-knopf { width: 100% }
.paket-preis { font-size: 1.7rem }
h2 { font-size: 1.45rem } h1 { font-size: 2rem }
table { display: block; overflow-x: auto; max-width: 100% }
.mee-knopf-schwebend { right: 10px; bottom: 10px; transform: scale(.9) }
}
/* Regler bis 500 Kunden / 50 Promoter (Owner 16.09.): sechsstellige Betraege muessen in die Kachel passen */
.rechner-zahlen b { font-size: clamp(1.25rem, 5.5vw, 1.9rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
@media (max-width: 400px) { .rechner-zahlen { grid-template-columns: 1fr } }
/* gemessen 16.09. bei 390 px: die Marken-Spalte auf Registrieren/Vormerken ragte 17 px ueber den Rand (minmax(280px,…) im Raster) */
@media (max-width: 760px) { .buehne { grid-template-columns: minmax(0, 1fr) } .buehne > * { min-width: 0; max-width: 100% } }
/* Hinweise «Neu: jetzt kannst du …» (16.09.) */
.dialog.hinweis { z-index: 63 } /* 24.10.2026: ueber Tinu (60-62) — vorher gleich hoch, auf dem Handy lag die Tinu-Blase ueber dem Knopf */ .hinweis-karte { position: relative; max-width: 460px; text-align: left }
.hinweis-x { position: absolute; top: 10px; right: 12px; background: transparent; border: 0; color: var(--nebel); font-size: 1.8rem; line-height: 1; padding: 6px 10px; cursor: pointer } .hinweis-x:hover { color: var(--milch) }
.hinweis-pille { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--verlauf); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .04em } .hinweis-pille.wichtig { background: var(--korall) }
.hinweis-bild { display: block; width: 100%; border-radius: 14px; margin: 14px 0 4px }
/* 29.10.2026: MEE-Frage bei Neuem (bio_neu.py) — Kachelbild quer zugeschnitten, Antwortknoepfe als Chips */
.hinweis-bild.hinweis-bio { aspect-ratio: 2 / 1; object-fit: cover; object-position: center 30% } .hinweis-auswahl { margin: 12px 0 0 }
.hinweis-karte:has(.hinweis-auswahl) { max-height: calc(100vh - 40px); overflow-y: auto }
.hinweis-karte:has(.hinweis-auswahl) .hinweis-knoepfe { display: flex; flex-wrap: wrap; gap: 10px }
.hinweis-karte h3 { margin: 12px 0 6px; font-size: 1.35rem } .hinweis-karte p { color: var(--nebel) } .hinweis-knoepfe { margin: 16px 0 0 }
/* 21.10.2026 Pflicht-Hinweis (hinweise.js pflichtZeigen): gross und gut lesbar, Hauptknopf leuchtet wie der Virus-Knopf (.vk-karte-knopf) */
.dialog.hinweis { overflow-y: auto } .dialog.hinweis-pflicht-dialog { z-index: 70 } /* ueber Tinu (60-62): erst lesen */
.hinweis-karte.hinweis-pflicht { max-width: 560px; padding: 30px 28px 24px; border: 2px solid var(--korall); max-height: calc(100vh - 40px); overflow-y: auto }
.hinweis-pflicht h3 { font-size: clamp(1.4rem, 5vw, 1.8rem); line-height: 1.2; color: var(--milch); padding-right: 34px }
.hinweis-pflicht .hinweis-pflicht-text { color: var(--milch); font-size: 1.08rem; line-height: 1.55 }
.hinweis-pflicht-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0 } .hinweis-pflicht-knoepfe .knopf { flex: 1 1 200px; font-size: 1.08rem; padding: 14px 18px }
.hinweis-pflicht-fuss { margin: 14px 0 0; font-size: .85rem }
.knopf.hinweis-leuchten { background: linear-gradient(135deg, #ff5a7a, #8b3dff); color: #fff; border: 0; font-weight: 800; box-shadow: 0 0 0 0 rgba(255, 90, 122, .7); animation: hinweis-puls 1.4s ease-in-out infinite }
.knopf.hinweis-leuchten:hover, .knopf.hinweis-leuchten:focus-visible { filter: brightness(1.1); outline: 3px solid #fff; outline-offset: 2px }
@keyframes hinweis-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 122, .75); transform: scale(1) } 50% { box-shadow: 0 0 0 12px rgba(255, 90, 122, 0); transform: scale(1.03) } }
@media (prefers-reduced-motion: reduce) { .knopf.hinweis-leuchten { animation: none; box-shadow: 0 0 0 3px rgba(255, 90, 122, .55) } }
/* Promoter: Pre-Launch-Kasten (16.09.) */
.pr-prelaunch { margin: 14px 0 6px; padding: 14px 18px; border-radius: 16px; background: var(--pflaume); border-left: 4px solid var(--korall) } .pr-prelaunch b { display: block; margin-bottom: 4px } .pr-prelaunch p { margin: 0; color: var(--nebel); font-size: .95rem }
/* Promoter: Antrag-Fortschritt + Wege (16.09.) */
.fortschritt { display: flex; margin: 6px 0 12px } .fortschritt div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .8rem; color: var(--nebel); text-align: center; position: relative } .fortschritt i { width: 14px; height: 14px; border-radius: 50%; background: var(--linie); display: block; position: relative; z-index: 1 } .fortschritt div.an i { background: var(--korall) } .fortschritt div.an { color: var(--milch) } .fortschritt div:not(:last-child)::after { content: ''; position: absolute; top: 6px; left: 50%; width: 100%; height: 2px; background: var(--linie) }
.pr-wege { margin: 26px 0 8px } .pr-wege .schritt b { display: block; margin-bottom: 4px }
/* Film auf der Startseite (16.09.) */
.film-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(24px, 4vw, 72px); align-items: center; padding: 36px 0 }
.film-rahmen { justify-self: center; width: min(100%, 320px); aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: var(--nacht); box-shadow: 0 30px 80px rgba(139, 61, 255, .25); border: 1px solid rgba(255,255,255,.08) }
.film-rahmen video { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--nacht) }
@media (max-width: 760px) { .film-block { grid-template-columns: 1fr } .film-rahmen { width: min(100%, 280px) } }
/* Promoter: Film + Download (17.09.) */
.pr-film { margin: 18px 0 6px; width: min(100%, 260px) }
.ansprech-karte.empfehlungsgeber { border: 1px solid rgba(255,79,122,.35) }
.rechner-ebene { background: rgba(255,255,255,.04); border-radius: 14px; padding: 10px 14px 4px; margin: 10px 0 } .rechner-ebene > b { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; color: var(--korall-schrift) } .rechner-ebene > b .klein { color: var(--nebel) }
.werbetexte-titel { margin: 22px 0 4px; color: var(--korall-schrift) } .werbetexte { display: grid; gap: 8px; margin: 10px 0 8px } .werbetext { background: var(--pflaume); border-radius: 16px; padding: 4px 16px; border: 1px solid rgba(255,255,255,.05) } .werbetext summary { cursor: pointer; padding: 10px 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; list-style: none } .werbetext summary::-webkit-details-marker { display: none } .werbetext summary::before { content: '▸'; color: var(--korall-schrift); font-size: .9rem } .werbetext[open] summary::before { content: '▾' } .werbetext summary span { color: var(--nebel); font-size: .88rem } .werbetext textarea { width: 100%; box-sizing: border-box; background: var(--nacht); color: var(--milch); border: 1px solid var(--linie); border-radius: 12px; padding: 12px; font: inherit; font-size: .92rem; line-height: 1.45; resize: vertical; margin: 6px 0 10px } .werbetext .werbetext-kopieren { margin: 0 0 12px }
.pr-video-laden { background: var(--pflaume); border-radius: 18px; padding: 16px 18px; margin: 8px 0 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center } .pr-video-laden b { width: 100% } .pr-video-laden p { width: 100%; margin: 4px 0 0 }
/* Abmelden-Knopf in der Kopfzeile (17.09.) */
nav button.knopf.klein.leise { padding: 8px 16px; font-size: .9rem; border-radius: 999px; background: transparent; color: var(--nebel); border: 1px solid var(--linie); cursor: pointer; font-weight: 600 } nav button.knopf.klein.leise:hover { color: var(--milch) }
/* Gespraechsseite /mee (17.09.): MEE fragt, der Nutzer tippt, spricht oder tippt an — MEE liest vor */
.mee-seite { max-width: 720px; margin: 0 auto } .mee-seite .mee-kopf { align-items: center; flex-wrap: wrap } .mee-seite .mee-kopf > div { flex: 1; min-width: 220px } .mee-seite h1 { margin: 0 0 4px; font-size: 1.6rem }
.mee-avatar.gross { flex-basis: 56px; width: 56px; height: 56px; font-size: 1.5rem; transition: box-shadow .3s } body.mee-spricht .mee-avatar.gross { box-shadow: 0 0 0 6px rgba(255, 79, 122, .25), 0 8px 24px rgba(255, 79, 122, .5); animation: puls 1.2s infinite }
.schalter { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--nacht); border: 1px solid var(--linie); font-size: .9rem; cursor: pointer; white-space: nowrap } .schalter input { accent-color: var(--korall) }
.chat.gross { max-height: 55vh; min-height: 36vh; align-content: start } body.seite-mee .mee-knopf-schwebend, body.seite-mee .mee-panel { display: none } .blase.denkt { color: var(--nebel); font-style: italic }
.chips.optionen { margin: 12px 0 4px } .chip.option { background: var(--pflaume-hell); color: var(--milch); border-color: rgba(139, 61, 255, .45); cursor: pointer } .chip.option:hover { background: var(--verlauf); color: #fff; border-color: transparent }
#stimme-wahl .chip { cursor: pointer }
@media (max-width: 640px) { .chat.gross { max-height: 48vh; min-height: 0 } .mee-seite .schalter { order: 3 } }
/* Reisemodus (17.09.): eigener Abschnitt, Statuszeile */
.reise-stand { padding: 10px 14px; border-radius: 12px; background: var(--nacht); color: var(--nebel); font-size: .92rem } .reise-stand.an { color: var(--milch); border: 1px solid rgba(139, 61, 255, .5) }
/* Bilder im Chat (17.09.) */
.chat-form { grid-template-columns: auto 1fr 46px } .chat-bild-knopf { width: 40px; height: 46px; display: grid; place-items: center; cursor: pointer; font-size: 1.25rem; border-radius: 50%; background: var(--pflaume-hell) }
.chat-bild { display: block; max-width: 260px; width: 100%; border-radius: 12px; margin-bottom: 4px; cursor: zoom-in; background: var(--nacht) } .chat-bild-stand { font-size: .82rem; opacity: .85; margin-bottom: 4px }
/* Foto ausrichten (17.09.) */
.zuschnitt { position: fixed; inset: 0; z-index: 2000; background: rgba(10, 4, 14, .85); display: grid; place-items: center; padding: 16px }
.zuschnitt-karte { background: var(--pflaume); border-radius: 22px; padding: 18px; max-width: 520px; width: 100%; text-align: center; max-height: calc(100dvh - 32px); overflow: auto } .zuschnitt-karte h3 { margin: 0 0 4px }
#zuschnitt-canvas { width: min(100%, 300px, calc((100dvh - 260px) * .8)); aspect-ratio: 4 / 5; height: auto; border-radius: 14px; touch-action: none; cursor: grab; background: var(--nacht); margin: 10px auto; display: block }
#zuschnitt-zoom { width: min(100%, 360px); margin: 6px auto 12px; display: block }
/* Regler: Beschriftung unter dem Balken (17.09.), Skalen mit Worten und Enden in voller Breite */
label.regler-unten { display: grid; gap: 4px } label.regler-unten input[type=range] { width: 100%; order: 0 } label.regler-unten span { order: 1; color: var(--nebel); font-size: .92rem }
.steuer input[type=range].skala { max-width: none; width: 100% } .skala-enden { display: flex; justify-content: space-between; font-size: .8rem; color: var(--nebel); margin-top: -2px } .steuer .regler-wert { font-weight: 600; color: var(--milch) }
/* App-Karte mit QR (17.09.) */
.app-karte { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; background: var(--pflaume); border-radius: 22px; padding: 18px; margin: 18px 0 } .app-karte img { width: 180px; height: 180px; border-radius: 14px; background: #fff; padding: 8px } .app-karte h2 { margin: 0 0 6px }
@media (max-width: 640px) { .app-karte { grid-template-columns: 1fr; text-align: center } .app-karte img { margin: 0 auto } }
.foto.leer { cursor: pointer; font-size: 1.6rem } .foto.leer:hover { border-color: var(--korall); color: var(--korall-schrift) }
.klar-box { background: var(--nacht); border: 1px solid rgba(139,61,255,.45); border-radius: 16px; padding: 14px 18px; margin: 14px 0 } .klar-box ul { margin: 8px 0 0; padding-left: 20px } .klar-box li { margin: 4px 0 }
.wohnort-zeile { position: relative; margin-bottom: 8px } .wohnort-zeile label { display: block }
/* MEE fuehrt (17.09.): Schritt-Karte im Panel, Hervorhebung der Ziel-Sektion */
.mee-schritt { margin: 12px 12px 0; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,79,122,.18), rgba(139,61,255,.18)); border: 1px solid rgba(255,79,122,.35) } .mee-schritt b { font-size: .72rem; letter-spacing: .04em; color: var(--korall-schrift) } .mee-schritt h4 { margin: 4px 0 2px; font-size: 1.05rem } .mee-schritt p { margin: 0 0 8px; font-size: .88rem; color: var(--nebel) }
.mee-schritt-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px } .mee-schritt .mee-aktion { margin: 0 }
.schritt.hervorgehoben { outline: 3px solid var(--korall); outline-offset: 2px; animation: mee-puls 1.3s ease-out 2 }
.ansprech-karte { display: flex; gap: 14px; align-items: center; background: var(--pflaume); border: 1px solid rgba(139,61,255,.4); border-radius: 18px; padding: 14px; margin: 14px 0 } .ansprech-karte img { width: 110px; height: 110px; border-radius: 12px; background: #fff; padding: 5px; flex: 0 0 110px } .ansprech-karte p { margin: 4px 0 } .ansprech-karte code { background: var(--nacht); padding: 2px 8px; border-radius: 6px }
@media (max-width: 640px) { .ansprech-karte { flex-direction: column; text-align: center } }
.admin-baum, .admin-baum ul { list-style: none; padding-left: 0 } .admin-baum ul { padding-left: 22px; border-left: 2px solid var(--linie); margin: 4px 0 6px 10px } .baum-zeile { padding: 6px 8px; border-radius: 8px } .baum-zeile:hover { background: var(--nacht) } .baum-zeile code { background: var(--nacht); padding: 1px 6px; border-radius: 5px } .hat-kinder > .baum-zeile::before { content: '▾ '; color: var(--korall-schrift) } .baum-kunden { list-style: none; margin: 4px 0 8px 18px; padding: 0 0 0 12px; border-left: 2px dashed var(--linie) } .baum-kunden li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px } .baum-kunden .wer { color: var(--milch) } .baum-zeile.kunde { padding-left: 14px } .baum-zeile.kunde b { font-weight: 500 } .baum-zeile.matt { opacity: .35 } .baum-gruppe { color: var(--nebel); margin: 6px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em } .baum-zeile select { font-size: 12px; padding: 2px 6px; margin-left: 4px; max-width: 220px }
.start-ansprech { margin-top: 14px; padding: 12px 14px; background: var(--nacht); border-radius: 14px; display: flex; gap: 14px; align-items: center } .start-ansprech img { border-radius: 10px; background: #fff; padding: 4px } .start-ansprech p { margin: 4px 0 0 }
/* Admin (17.09.): Bereichs-Reiter, Uebersicht, Raster */
.admin-kopf { position: sticky; top: 0; z-index: 5; background: var(--nacht); padding: 6px 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--linie) }
.admin-kopf h1 { margin: 0 0 8px }
.admin-reiter { display: flex; flex-wrap: wrap; gap: 6px }
.admin-reiter button { background: var(--pflaume); color: var(--nebel); border: 1px solid var(--linie); border-radius: 999px; padding: 7px 14px; font-weight: 600; cursor: pointer }
.admin-reiter button.aktiv { background: var(--korall); color: #fff; border-color: var(--korall) }
.admin-reiter .zahl-pille { margin-left: 6px }
.admin-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px } .admin-raster .karte { margin: 0 }
.admin-bereich > .admin-raster { margin: 14px 0 }
/* 14.10. Rollen + «Wer darf was»: je Bereich drei Knoepfe (Radiogruppe), am Handy untereinander; nur Farb-Tokens */
.rolle-wahl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center } .rolle-wahl input[maxlength] { min-width: 0; flex: 1 1 160px }
.rechte-liste { display: grid; gap: 8px }
.rechte-person { border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--pflaume); padding: 8px 12px }
.rechte-person > summary { cursor: pointer; color: var(--milch) } .rechte-person[open] > summary { margin-bottom: 8px }
.rechte-zeilen { display: grid; gap: 6px }
.rechte-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--linie) }
.rechte-zeile.ist-eigen { border-left: 3px solid var(--korall); padding-left: 8px }
.rechte-bereich { min-width: 11rem; font-weight: 600; color: var(--milch); padding: 0; float: left }
.stufen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border: 0; margin: 0; padding: 0; min-width: 0 }
.stufe-wahl { position: relative; display: inline-flex }
.stufe-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0 }
.stufe-wahl span { display: inline-block; padding: 5px 12px; border: 1px solid var(--linie); border-radius: 999px; background: var(--nacht); color: var(--nebel); cursor: pointer; font-size: .9rem }
.stufe-wahl input:checked + span { background: var(--pflaume-hell); border-color: var(--korall); color: var(--milch); font-weight: 700 }
.stufe-wahl input:checked + span::before { content: '\2713\00a0' }
.stufe-wahl input:focus-visible + span { outline: 2px solid var(--korall); outline-offset: 2px }
.rechte-herkunft { font-size: .85rem; color: var(--nebel) } .rechte-herkunft.eigen { color: var(--korall-schrift); font-weight: 600 }
@media (max-width: 520px) { .rechte-bereich { min-width: 0; width: 100% } .stufen { width: 100% } .stufe-wahl { flex: 1 1 auto } .stufe-wahl span { width: 100%; text-align: center } }
.ansteht { margin: 4px 0 0; padding-left: 18px } .ansteht li { margin: 4px 0 } .ansteht a { color: var(--korall-schrift); font-weight: 600 }
#admin .zahlen b { font-size: 1.6rem }
.seiten { flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 10px } .seiten button { min-width: 34px; padding: 4px 8px } .seiten button:disabled { background: var(--korall); color: #fff; opacity: 1 }
.erklaer { background: linear-gradient(135deg, rgba(139,61,255,.18), rgba(255,79,122,.12)); border: 1px solid rgba(139,61,255,.35); border-radius: 14px; padding: 10px 16px; margin: 12px 0 }
.erklaer summary { cursor: pointer; font-weight: 700; color: var(--milch); list-style: none } .erklaer summary::-webkit-details-marker { display: none } .erklaer summary::after { content: ' ▾'; color: var(--korall-schrift) } .erklaer[open] summary::after { content: ' ▴' }
.erklaer ul { margin: 8px 0 4px; padding-left: 18px } .erklaer li { margin: 6px 0; color: var(--nebel); line-height: 1.45 } .erklaer li b, .erklaer p b { color: var(--milch) } .erklaer p { color: var(--nebel); margin: 8px 0 } .erklaer a { color: var(--korall-schrift) }
:root[data-theme="light"] .erklaer summary, :root[data-theme="light"] .erklaer li b, :root[data-theme="light"] .erklaer p b { color: var(--tinte) }
/* Vertriebs-Cockpit (18.09.) */
.cockpit-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 28px; margin-bottom: 10px } .cockpit-raster h3 { margin: 4px 0 8px }
.trichter .stufe { display: grid; grid-template-columns: minmax(96px, auto) 1fr 52px 48px; gap: 8px; align-items: center; margin: 5px 0 } .trichter .stufe > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .stufe-name { color: var(--nebel); font-size: .9rem }
.stufe-balken { height: 16px; background: var(--nacht); border-radius: 8px; overflow: hidden } .stufe-balken div { height: 100%; background: linear-gradient(90deg, var(--korall), var(--violett)); border-radius: 8px } .stufe-balken .gold { background: linear-gradient(90deg, #ffc85c, #ff9f43) }
.trichter b { text-align: right; font-variant-numeric: tabular-nums }
#verlauf { width: 100%; height: 180px; background: var(--nacht); border-radius: 12px }
.tabelle-scroll { overflow-x: auto } .rang td, .rang th { white-space: nowrap } .rang .kontakt a { text-decoration: none; font-size: 1.05rem; margin-right: 4px } .rang th[data-sort] { cursor: pointer } .rang th[data-sort]:hover { color: var(--korall-schrift) }
.pille { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700 } .pille.aktiv { background: rgba(107,255,176,.18); color: var(--minze-schrift) } .pille.ruhig { background: rgba(255,107,107,.18); color: var(--rot) } .pille.neu { background: rgba(139,61,255,.22); color: #c9a8ff }
:root[data-theme="light"] .pille.neu { color: var(--violett) } :root[data-theme="light"] #verlauf, :root[data-theme="light"] .stufe-balken { background: #efe8f5 }
.material-gruppen h3 { margin: 14px 0 6px; color: var(--korall-schrift) } .material-eintraege { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 6px 18px } .material-eintraege li { padding: 8px 0; border-bottom: 1px solid var(--linie); line-height: 1.4 } .material-eintraege li > .klein { display: block; margin-top: 2px } .material-link { font-weight: 700 } .material-link.matt { opacity: .5 } .material-eintraege .pille { vertical-align: middle; margin-left: 4px }
/* Admin-Baum (18.09.): Schrift explizit — im Dunkelmodus blieben Name, Code und Auswahl schwer lesbar */
.admin-baum, .admin-baum b, .admin-baum code, .admin-baum .baum-zeile { color: var(--milch) }
.admin-baum .klein, .admin-baum .baum-gruppe { color: var(--nebel) }
.baum-zeile select, .admin-baum select { color: var(--milch); background: var(--nacht); border: 1px solid var(--linie); border-radius: 6px; color-scheme: inherit }
.baum-zeile select option { color: var(--milch); background: var(--nacht) }
.baum-zeile.matt { opacity: .45 }
.freunde-karte .ticket { margin-top: 10px } .freunde-karte .ticket img { width: 110px; height: 110px; background: #fff; border-radius: 12px; padding: 5px }
.preise-laender { max-width: 720px; margin: 14px auto 0 } .preise-laender .tabelle td.klein { font-size: .8rem } #land-wahl select { padding: 4px 8px; margin-left: 4px }
.fotos-admin { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 0 } .foto-admin { width: 180px } .foto-admin img { width: 180px; height: 225px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 6px; border: 3px solid transparent } .foto-admin.rejected img { border-color: var(--korall) } .foto-admin.approved img { border-color: var(--minze) } .foto-admin .klein { min-height: 2.4em }
.rechner-ebenen { margin: 4px 0 10px; font-size: .88rem } .rechner-ebenen td, .rechner-ebenen th { padding: 5px 6px }
/* 25.09.: «EUR 180 / CHF 180» brach in zwei Zeilen um — die Geldspalte bekommt Platz und bleibt zusammen.
Die erste Spalte darf dafuer schrumpfen; sie ist Text und vertraegt den Umbruch. */
.rechner-ebenen { table-layout: auto }
.rechner-ebenen th:last-child, .rechner-ebenen td:last-child { white-space: nowrap; width: 1%; padding-left: 12px }
.rechner-ebenen th:nth-child(2), .rechner-ebenen td:nth-child(2),
.rechner-ebenen th:nth-child(3), .rechner-ebenen td:nth-child(3) { white-space: nowrap; width: 1% }
@media (max-width: 420px) { .rechner-ebenen { font-size: .8rem } .rechner-ebenen td, .rechner-ebenen th { padding: 5px 4px } }
.rechner-breit { margin: 18px 0 } .rechner-breit .rechner-zahlen b { font-size: clamp(1.4rem, 3vw, 2.2rem) } .rechner-breit .rechner-ebenen { font-size: .95rem }
.rechner.beispiel .rechner-ebenen { margin-top: 10px }
.umkreis-wahl select { padding: 2px 6px; font-size: .85rem; margin-left: 2px }
.entdecken-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: .9rem; color: var(--nebel) }
.ansprech-karte img.ansprech-foto { width: 88px; height: 110px; border-radius: 14px; padding: 0; background: none; object-fit: cover; object-position: top; flex: 0 0 88px }
.tippgeber { background: var(--pflaume); border: 1px solid rgba(139,61,255,.4); border-radius: 14px; padding: 12px 14px } .tippgeber b { color: var(--korall-schrift) } .tippgeber p { margin: 4px 0 6px; font-weight: 600 }
/* 13.10. (Owner): Profilfoto des Tippgebers neben Name/Code — wie Andreas' Karte (.ansprech-foto), nur mit Einwilligung */
.tippgeber.mit-foto { display: flex; gap: 12px; align-items: center } .tippgeber img.ansprech-foto { width: 66px; height: 82px; border-radius: 12px; object-fit: cover; object-position: top; flex: 0 0 66px }
/* 20.10.: «Wer hat dich eingeladen?» (meeyo.js einladerFrage) */
.einlader-frage { background: var(--pflaume); border: 1px solid rgba(139,61,255,.4); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px } .einlader-frage input { width: 100% }
.ef-treffer { display: grid; gap: 6px } .ef-wahl { text-align: left; width: 100%; padding: 10px 12px; border-radius: 12px } .ef-gewaehlt { margin: 0; font-weight: 600; color: var(--korall-schrift) }
.tf-vorschau .ansprech-karte { margin: 10px 0 } .tf-schalter { display: flex; justify-content: flex-start; text-align: left; white-space: normal; border-radius: 14px; align-items: flex-start; max-width: 680px } .tf-schalter input { flex: 0 0 auto; width: auto; margin-top: 4px } .tf-hinweis { margin: 6px 0 0 }
/* Erststrang /start (20.09., U1): vier Bildschirme, ein Balken, grosse Knoepfe */
.strang { max-width: 560px; margin: 0 auto; padding: 8px 0 40px } .strang-kopf { margin: 6px 0 22px } .strang-kopf .balken { height: 8px; border-radius: 999px; background: var(--pflaume-hell); overflow: hidden } .strang-kopf .balken i { display: block; height: 100%; width: 0; background: var(--verlauf); transition: width .35s } .strang-kopf .klein { margin: 8px 0 0 }
.strang-schritt h1 { font-size: 1.7rem; line-height: 1.15; margin: 0 0 8px } .strang-schritt h2 { font-size: 1.05rem; margin: 22px 0 8px; color: var(--nebel) }
.strang-foto { display: flex; gap: 14px; align-items: center; margin: 14px 0 } .strang-foto img { width: 120px; height: 150px; object-fit: cover; border-radius: 16px; background: var(--nacht) }
.strang-weiter { margin-top: 22px; display: flex; gap: 16px; align-items: center } .strang-weiter a { color: var(--nebel) }
.strang-wahl { display: flex; flex-wrap: wrap; gap: 8px } .strang-wahl button { background: var(--pflaume); color: var(--milch); border: 1px solid var(--linie); border-radius: 999px; padding: 10px 16px; font: inherit; cursor: pointer } .strang-wahl button.an { background: var(--verlauf); border-color: transparent; font-weight: 700 }
.strang .wohnort-zeile { position: relative; margin: 8px 0 }
.vorschau-hinweis { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--pflaume); border: 1px solid rgba(255,79,122,.45); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px } .vorschau-hinweis.puls { animation: puls .6s ease } @keyframes puls { 0% { transform: scale(1) } 40% { transform: scale(1.03) } 100% { transform: scale(1) } }
.eisbrecher { text-align: left; margin: 10px 0 4px } .eisbrecher > b { display: block; font-size: .9rem; color: var(--nebel); margin-bottom: 8px } .eisbrecher-satz { display: block; width: 100%; text-align: left; background: var(--nacht); color: var(--milch); border: 1px solid var(--linie); border-radius: 14px; padding: 10px 14px; margin-bottom: 6px; font: inherit; cursor: pointer } .eisbrecher-satz.an { border-color: var(--korall); background: rgba(255,79,122,.12) }
.sehr-karte:not(.sehr) { border-color: var(--linie); box-shadow: none }
/* «Wir sind anders» (20.09.) */
.anders { margin: 34px 0 28px } .anders-titel { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 900; line-height: 1.05; margin: 0 0 10px; letter-spacing: -.02em; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent }
.anders-unter { font-size: 1.2rem; font-weight: 700; max-width: 62ch; margin: 0 0 18px } .anders-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px }
.anders-karte { background: var(--pflaume); border-radius: 18px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.05) } .anders-karte > b { display: block; font-size: 1.05rem; margin-bottom: 8px; color: var(--korall-schrift) } .anders-karte ol { padding-left: 20px; margin: 0 0 8px } .anders-karte li { margin-bottom: 6px }
.anders-geld .tabelle td { padding: 6px 4px } .anders-geld .zahl { font-weight: 800; font-size: 1.15rem }
.ruhend-hinweis { background: rgba(255,200,87,.12); border: 1px solid rgba(255,200,87,.5); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px } .ruhend-hinweis b { display: block; margin-bottom: 4px }
.akt.zurueck { background: var(--pflaume-hell); color: var(--gelb); width: 52px; height: 52px; font-size: 1.3rem }
.foto-mee { background: var(--pflaume); border-radius: 12px; padding: 10px 14px; margin: 8px 0 0; font-size: .92rem }
.foto-logo-tipp { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 196, 0, .1); color: #ffd98a; font-size: .9rem } /* 02.11. Logo als Foto abgelehnt -> zum Firmenlogo */
/* 02.11. Firmenlogo zuoberst im Profil (Firmenkonten): runde Vorschau wie das Profilbild + grosser Knopf */
.firmenlogo:not([hidden]) { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 16px }
.firmenlogo h2 { margin: 0 0 4px } .firmenlogo-text { flex: 1 1 260px; min-width: 0 }
.firmenlogo-rund { width: 104px; height: 104px; border-radius: 50%; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 3px solid rgba(160, 100, 220, .45); box-sizing: border-box }
.firmenlogo-bild { width: 100%; height: 100%; object-fit: contain; display: block } .firmenlogo-leer { font-size: 44px }
.firmenlogo-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0 4px } .firmenlogo-person { opacity: .75; margin: 6px 0 0 }
.prompts { display: grid; gap: 8px } .prompt-zeile { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 8px } .prompt-kachel { background: var(--nacht); border-radius: 12px; padding: 8px 12px; margin: 6px 0; display: grid } .prompt-kachel b { font-weight: 600 }
@media (max-width: 600px) { .prompt-zeile { grid-template-columns: 1fr } }
.det-ziel { font-weight: 700; margin: 4px 0 } .det-wichtig { margin: 0 0 8px }
.reaktionen { font-size: .95rem; margin-top: 2px } .reaktion-wahl { position: absolute; display: flex; gap: 4px; background: var(--pflaume); border: 1px solid var(--linie); border-radius: 999px; padding: 4px 6px; margin-top: 4px; z-index: 5 } .reaktion-wahl button { background: none; border: 0; font-size: 1.15rem; cursor: pointer; padding: 2px 4px } .nachricht { position: relative }
.treffen-form { background: var(--pflaume); border-radius: 14px; padding: 12px 16px; margin: 8px 0 } .treffen-form b { display: block; margin-bottom: 4px }
.themen { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px } .themen .chip { cursor: pointer }
.raeume { display: grid; gap: 10px; margin: 8px 0 } .raum { background: var(--nacht); border: 1px solid var(--linie); border-radius: 16px; padding: 12px 14px } .raum.an { border-color: rgba(255,79,122,.5) } .raum .zeile b { display: block } .raum-inhalt { margin-top: 10px; display: grid; gap: 10px } .raum-warn { background: rgba(255,200,87,.1); border: 1px solid rgba(255,200,87,.4); border-radius: 12px; padding: 10px 12px } .det-raum { color: var(--gelb); font-weight: 600; margin: 4px 0 } .raum-chips .chip { border-color: rgba(255,200,87,.5) }
/* «Dein Team» grafisch (Owner 22.09.): oben Du, darunter Reihen von Karten, die umbrechen — nichts scrollt seitlich. Zweig klappt unter der Reihe auf. */
.team-schalter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px }
.team-schalter .knopf.an { background: var(--verlauf); color: #fff }
.team-grafik { margin: 4px 0 10px }
.team-du { display: flex; justify-content: center; position: relative; padding-bottom: 22px }
.team-du::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 22px; background: var(--linie) }
.team-reihe { position: relative; padding-top: 14px }
.team-reihe::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; border-top: 2px solid var(--linie) }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px }
.tk { position: relative; display: block; width: 100%; text-align: left; background: var(--pflaume-hell); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 9px 10px 8px; color: var(--milch); cursor: pointer; font: inherit }
.tk:hover, .tk:focus-visible { border-color: var(--violett); outline: none }
.tk.an { border-color: var(--korall); box-shadow: 0 0 0 2px rgba(255, 79, 122, .35) }
.tk .eb { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--korall-schrift); margin-bottom: 3px }
.tk .n { display: block; font-weight: 800; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tk code { font-size: .7rem; color: var(--nebel); letter-spacing: .4px }
.tk .s { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: .74rem; color: var(--nebel); font-variant-numeric: tabular-nums }
.tk .z { display: inline-block; min-width: 14px; padding: 0 6px; border-radius: 999px; background: var(--linie); color: var(--milch); font-size: .7rem; font-weight: 700; text-align: center }
.tk .z.g { background: var(--minze); color: #062a1d } .tk .z.p { background: var(--violett); color: #fff }
.tk .kd { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 6px; align-items: center } .tk .kd small { color: var(--nebel); font-size: .68rem }
.tk .kd i, .team-legende .pk { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--linie) }
.tk .kd i.g, .team-legende .pk.g { background: var(--minze) }
.tk.du { width: min(100%, 300px); background: var(--verlauf); border: 0; box-shadow: 0 10px 28px rgba(139, 61, 255, .35); cursor: default; color: #fff }
.tk.du .eb, .tk.du code, .tk.du .s { color: #fff; opacity: .95 } .tk.du .n { font-size: 1.05rem } .tk.du .z { background: rgba(255, 255, 255, .25); color: #fff } .tk.du .z.g { background: var(--minze); color: #062a1d }
.tk.weit { opacity: .55; border-style: dashed } .tk.weit .eb { color: var(--nebel) }
.team-zweig { margin: 8px 0 4px; padding: 10px 12px 12px; border: 1px solid var(--linie); border-left: 3px solid var(--korall); border-radius: var(--radius-klein); background: color-mix(in srgb, var(--pflaume) 85%, var(--pflaume-hell)) }
.team-zweig-kopf { font-size: .92rem; margin-bottom: 6px } .team-zweig-kopf code { color: var(--nebel); font-size: .78rem }
.team-kunden { list-style: none; margin: 0 0 6px; padding: 0; font-size: .85rem } .team-kunden li { padding: 3px 0; border-top: 1px solid var(--linie) } .team-kunden small { color: var(--nebel) }
.team-zweig .team-reihe::before { left: 4%; right: 4% }
.team-legende { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px } .team-legende span { display: inline-flex; align-items: center; gap: 5px }
@media (max-width: 520px) { .team-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px } .tk { padding: 7px 8px } }
/* Unterknoepfe im Portal (Owner 22.09.): Sprungleiste, klebt oben; aktiver Abschnitt leuchtet */
.pr-unternav { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0; margin: 4px 0 14px; background: var(--nacht); border-bottom: 1px solid var(--linie) }
.pr-unternav a { padding: 7px 13px; border-radius: 999px; background: var(--pflaume-hell); color: var(--milch); font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap }
.pr-unternav a.an { background: var(--verlauf); color: #fff }
#portal .tab-weg { display: none !important }
#portal [id] { scroll-margin-top: 64px }
@media (max-width: 520px) { .pr-unternav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none } .pr-unternav::-webkit-scrollbar { display: none } .pr-unternav a { font-size: .84rem; padding: 6px 11px } }
/* Handy-Leiste unten (Owner 22.09.: «wie bei Tinder und co») — dieselben vier Bereiche wie in der App: Entdecken · Matches · MEE · Profil.
Nur fuer angemeldete Nutzer und nur auf dem Handy; auf dem Desktop bleibt die Zeile oben. */
.tab-leiste { display: none }
@media (max-width: 760px) {
.tab-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(4, 1fr);
background: color-mix(in srgb, var(--pflaume) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--linie);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) }
.tab-leiste a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; color: var(--nebel); text-decoration: none; font-size: .72rem; font-weight: 700 }
.tab-leiste a.an { color: var(--korall-schrift) }
.tab-sym { font-size: 1.3rem; line-height: 1 }
.tab-punkt { position: absolute; top: 3px; right: calc(50% - 20px); width: 9px; height: 9px; border-radius: 50%; background: var(--korall); border: 2px solid var(--pflaume) }
body.hat-tableiste { padding-bottom: 78px }
body.hat-tableiste .mee-knopf-schwebend { bottom: 84px }
body.hat-tableiste .kopf nav a[data-nav="an"]:not(#nav-admin) { display: none } /* die Bereiche stehen unten, oben bleibt Marke + Sprache */
}
/* Match-Moment mit ganzem Profil (Owner 22.09.): die Karte steht still — kein Wischen, keine Stempel — und die Details sind offen. */
.match-karte { max-height: 88vh; overflow-y: auto; width: min(460px, 94vw) }
.match-profil { margin: 10px 0 14px }
.match-profil .wisch-karte { position: static; transform: none !important; box-shadow: none; margin: 0 }
.match-profil .wisch-karte .stempel { display: none }
.match-profil .fotos-rahmen { aspect-ratio: 4 / 5 }
.match-profil .details { max-height: none }
/* 17.10.2026 («Ihr seid verbunden!»: das aufgeklappte Profil legte sich ueber den halben Dialog — Owner: nie etwas ueberlagert):
im Dialog klappt das Profil UNTER dem Foto auf, nie darueber (der Dialog rollt schon, .match-karte max-height). */
.match-profil .wisch-karte.profil-offen .details { position: static; inset: auto; animation: none; max-height: none }
/* Leere Flaechen bekommen Wege (Owner 22.09.) — vier Karten statt einer leeren Seite */
.leer-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; text-align: left }
.leer-karte { display: block; padding: 12px 13px; border-radius: var(--radius-klein); background: var(--pflaume-hell); border: 1px solid var(--linie); color: var(--milch); text-decoration: none }
.leer-karte b { display: block; margin-bottom: 3px } .leer-karte:hover { border-color: var(--violett) }
@media (max-width: 420px) { .leer-karten { grid-template-columns: 1fr } }
/* Raeume als Kacheln (Owner 22.09.: «wie bei Tinder, mit Boxen und coolen Icons») */
.raeume { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px }
.raum-kachel { background: var(--pflaume-hell); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden }
.raum-kachel.an { border-color: var(--korall); box-shadow: 0 0 0 1px rgba(255, 79, 122, .35) }
.raum-kopf { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; padding: 13px; color: var(--milch); font: inherit; cursor: pointer }
.raum-icon { font-size: 1.6rem; line-height: 1.1 }
.raum-titel { flex: 1; display: block }
.raum-titel b { display: block; font-size: 1rem; margin-bottom: 2px }
.raum-titel .klein { display: block; color: var(--nebel) }
.raum-haken { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--linie); color: var(--milch); font-weight: 800; flex: 0 0 auto }
.raum-kachel.an .raum-haken { background: var(--verlauf); color: #fff }
.raum-inhalt { padding: 0 13px 13px; border-top: 1px solid var(--linie) }
.raum-inhalt .chips { margin-top: 10px }
.raum-knoepfe { display: flex; gap: 8px; margin: 10px 0 0 }
.raum-warn { margin-top: 10px; padding: 10px 11px; border-radius: var(--radius-klein); background: color-mix(in srgb, var(--rot) 14%, transparent); border: 1px solid color-mix(in srgb, var(--rot) 45%, transparent) }
@media (max-width: 520px) { .raeume { grid-template-columns: 1fr } }
/* ── Leader-Bereich (24.09.): Aufbau wie bei structura-os.com, Farben aus MEEYO.
Vier Kennzahl-Karten oben, darunter Boxen mit EIGENEM Filter je Box — das ist der Grund,
warum deren Ansicht bedienbar wirkt statt überladen. Kein Zeus-Amber, nur die Tokens von oben. */
.unbekannt { color: var(--nebel); font-style: italic } /* 25.09.: die Kacheln kommen von .cms-kpi; das hier bleibt, weil es die Aussage traegt */
.lx-box { margin: 14px 0 }
.lx-box > header { flex-wrap: wrap }
.lx-box .filter { margin-left: auto }
.lx-box .filter { display: flex; gap: 6px; flex-wrap: wrap }
.lx-box .filter button { background: var(--pflaume-hell); color: var(--nebel); border: 1px solid var(--linie);
border-radius: 999px; padding: 4px 11px; font-size: .8rem; cursor: pointer }
.lx-box .filter button.an { background: var(--verlauf); color: #fff; border-color: transparent }
.lx-tab { width: 100%; border-collapse: collapse; font-size: .92rem }
.lx-tab th { text-align: left; color: var(--nebel); font-weight: 600; font-size: .8rem; padding: 6px 8px; border-bottom: 1px solid var(--linie) }
.lx-tab td { padding: 8px; border-bottom: 1px solid var(--linie); vertical-align: middle }
.lx-tab tr:last-child td { border-bottom: 0 }
.lx-tab .zahl { text-align: right; font-variant-numeric: tabular-nums }
.lx-tab .tief { color: var(--nebel) }
.lx-ampel { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; white-space: nowrap }
.lx-ampel i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto }
.lx-ampel.gruen i { background: var(--minze) } .lx-ampel.gruen { color: var(--minze-schrift) }
.lx-ampel.gelb i { background: #ffd166 } .lx-ampel.gelb { color: #ffd166 }
.lx-ampel.rot i { background: var(--rot) } .lx-ampel.rot { color: var(--rot) }
.lx-ampel.ruhend i { background: var(--nebel) } .lx-ampel.ruhend { color: var(--nebel) }
.lx-ampel.unbekannt i { background: transparent; border: 1px dashed var(--nebel) } .lx-ampel.unbekannt { color: var(--nebel) }
.lx-punkte { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.lx-punkte .stand { font-size: 2.1rem; font-weight: 800; background: var(--verlauf);
-webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums }
.lx-balken { height: 7px; background: var(--pflaume-hell); border-radius: 99px; overflow: hidden; margin-top: 5px }
.lx-balken > span { display: block; height: 100%; background: var(--verlauf) }
.lx-leer { color: var(--nebel); font-size: .9rem; padding: 10px 2px }
/* ══ Promoter-CMS (Owner 25.09.: «wie ein cms ... gliederung wie das von structura») ══════════════
Aufbau vom Structura-Dashboard uebernommen: Seitenleiste mit Gruppen links, Kopfzeile mit Titel
und Konto rechts, Arbeitsflaeche mit Kennzahlenkacheln und Boxen. Farben, Schrift und Verlauf
bleiben MEEYO. Die Seitenleiste ist auf dem Handy eine Schublade, kein zweiter Aufbau. */
body.cms-an .inhalt { max-width: none; padding: 0 }
body.cms-an .fuss { border-top: 1px solid var(--linie) }
.cms { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start }
/* ── Seitenleiste ── */
.cms-seite { position: sticky; top: 0; align-self: stretch; display: flex; flex-direction: column;
gap: 4px; padding: 18px 12px 16px; background: var(--pflaume); border-right: 1px solid var(--linie);
min-height: 100vh }
.cms-marke { display: flex; align-items: center; gap: 10px; padding: 2px 10px 16px }
.cms-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--verlauf); color: #fff;
display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; flex: none }
.cms-marke b { display: block; font-weight: 800; letter-spacing: .1em; font-size: .95rem; line-height: 1.1 }
.cms-marke small { display: block; color: var(--nebel); font-size: .72rem; letter-spacing: .06em }
.cms-nav { display: flex; flex-direction: column; gap: 2px; flex-wrap: nowrap }
.cms-gruppe { margin: 14px 0 4px; padding: 0 10px; color: var(--nebel); font-size: .68rem;
font-weight: 700; letter-spacing: .13em; text-transform: uppercase }
.cms-nav a, .cms-nav button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
color: var(--nebel); text-decoration: none; font-weight: 600; font-size: .93rem; position: relative }
.cms-nav a svg, .cms-nav button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.cms-nav a:hover, .cms-nav button:hover { background: var(--pflaume-hell); color: var(--milch) }
.cms-nav a.an, .cms-nav button.an { background: var(--pflaume-hell); color: var(--milch) }
.cms-nav a.an::before, .cms-nav button.an::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px;
border-radius: 0 3px 3px 0; background: var(--verlauf) }
.cms-nav a.an svg, .cms-nav button.an svg { stroke: var(--korall) }
.cms-zahl { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--nebel);
font-variant-numeric: tabular-nums }
.cms-nav a.an .cms-zahl, .cms-nav button.an .cms-zahl { color: var(--milch) }
.cms-pille { margin-left: auto; font-size: .6rem; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; padding: 3px 7px; border-radius: 99px; background: var(--verlauf); color: #fff }
.cms-aus::after { content: "\2197"; margin-left: auto; color: var(--nebel); font-size: .8rem }
/* 15.10. (Owner): Hauptkategorien zum Aufklappen. Der Kopf traegt die Schrift der alten Gruppen-Ueberschrift
(.cms-gruppe), ist aber ein Knopf mit Pfeil; Zaehler zugeklappter Eintraege stehen als Pille daneben.
Auf-/Zuklappen ueber grid-template-rows (0fr -> 1fr), ohne Hoehe zu messen; zu = visibility:hidden, damit
die Eintraege dann weder Tab-Stopp noch Vorleser-Ziel sind. Logik: cmsGruppen() in promoter.js. */
.cms-grp { display: flex; flex-direction: column }
.cms-nav .cms-grp-kopf { margin-top: 6px; padding: 10px; min-height: 44px; gap: 8px; border: 0; color: var(--milch);
font-size: .86rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase } /* 28.10. (Owner): Hauptkategorien groesser + fett */
.cms-nav .cms-grp-kopf:focus-visible { outline: 2px solid var(--korall); outline-offset: -2px }
.cms-grp-titel { flex: 1; min-width: 0 }
.cms-grp-zahl { font-size: .7rem; font-weight: 800; letter-spacing: 0; padding: 2px 7px; border-radius: 99px;
background: var(--verlauf); color: #fff; font-variant-numeric: tabular-nums }
.cms-grp-zahl:empty, .cms-grp.offen .cms-grp-zahl { display: none }
.cms-nav .cms-grp-kopf .cms-grp-pfeil { width: 16px; height: 16px; transition: transform .2s ease }
.cms-grp.offen > .cms-grp-kopf .cms-grp-pfeil { transform: rotate(180deg) }
.cms-grp-inhalt { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease, visibility 0s }
.cms-grp:not(.offen) > .cms-grp-inhalt { grid-template-rows: 0fr; visibility: hidden;
transition: grid-template-rows .2s ease, visibility 0s .2s }
/* Rand links: der Verlaufsstrich des aktiven Eintrags (.an::before, left -12px) soll nicht abgeschnitten werden */
.cms-grp-liste { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px;
margin: 0 -12px; padding: 0 12px }
.cms-grp + .cms-aus, .cms-grp + .cms-gruppe { margin-top: 12px }
@media (prefers-reduced-motion: reduce) {
.cms-grp-inhalt, .cms-grp:not(.offen) > .cms-grp-inhalt, .cms-nav .cms-grp-kopf .cms-grp-pfeil { transition: none }
}
.cms-fuss { margin-top: auto; background: var(--pflaume-hell); border: 1px solid var(--linie);
border-radius: var(--radius-klein); padding: 12px 13px }
.cms-fuss b { display: block; font-size: .85rem } .cms-fuss small { color: var(--nebel); font-size: .76rem }
.cms-balken { height: 6px; background: var(--nacht); border-radius: 99px; overflow: hidden; margin: 8px 0 6px }
.cms-balken > span { display: block; height: 100%; background: var(--verlauf) }
/* ── Kopfzeile der Arbeitsflaeche ── */
.cms-haupt { min-width: 0; align-self: stretch } /* 28.10.2026 (portal_pruefen, 1280 px): kurze Bereiche + lange Seitenleiste — ohne stretch endete
die Hauptspalte vor der Seite, und die klebende Kopfzeile (Glocke, «?») rollte mit ihr aus dem Bild */
.cms-kopf { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
padding: 14px clamp(16px, 2.4vw, 30px); background: var(--nacht);
border-bottom: 1px solid var(--linie) }
.cms-menue { display: none; background: transparent; border: 1px solid var(--linie); color: var(--milch);
border-radius: 9px; padding: 6px; line-height: 0 }
.cms-menue svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.cms-titel { min-width: 0 }
.cms-titel h1 { font-size: 1.32rem; margin: 0 } .cms-titel p { margin: 1px 0 0; color: var(--nebel); font-size: .85rem }
.cms-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px }
.cms-code { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px;
border: 1px solid var(--linie); background: var(--pflaume); font-size: .86rem; font-weight: 700; letter-spacing: .06em }
.cms-code i { width: 7px; height: 7px; border-radius: 99px; background: var(--minze) }
.cms-ich { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600 }
.cms-ich i { width: 32px; height: 32px; border-radius: 99px; background: var(--verlauf); color: #fff;
display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .8rem }
.cms-flaeche { padding: 20px clamp(16px, 2.4vw, 30px) 60px }
/* ── Kennzahlen ── */
.cms-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 16px }
.cms-kpi { position: relative; background: var(--pflaume); border: 1px solid var(--linie);
border-radius: var(--radius); padding: 15px 16px 14px; display: grid; gap: 2px }
.cms-kpi .sym { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px;
background: var(--pflaume-hell); display: grid; place-items: center }
.cms-kpi .sym svg { width: 17px; height: 17px; fill: none; stroke: var(--nebel); stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round }
.cms-kpi.gut .sym { background: color-mix(in srgb, var(--korall) 18%, transparent) }
.cms-kpi.gut .sym svg { stroke: var(--korall) }
.cms-kpi .wert { font-size: 1.85rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums;
letter-spacing: -.02em; padding-right: 42px }
.cms-kpi .bez { color: var(--nebel); font-size: .86rem; font-weight: 600 }
.cms-kpi .unten { color: var(--nebel); font-size: .78rem; margin-top: 4px; min-height: 1.1em }
.cms-kpi .unten b { color: var(--minze-schrift); font-weight: 700 }
/* ── Boxen ── */
.cms-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 16px }
.cms-box { background: var(--pflaume); border: 1px solid var(--linie); border-radius: var(--radius); padding: 15px 16px }
/* 28.10.2026 (Pruefbefund 8): ohne Umbruch ragten am Handy «Verlauf löschen» (MEE Pro, rechter Rand 452 px bei 390 px) und
«Exportieren» (Dashboard, 403 px) aus dem Bild — die Seite rollt nicht seitwaerts, also unerreichbar. Jetzt rutschen sie in eine zweite Zeile. */
.cms-box > header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; row-gap: 8px; margin-bottom: 12px }
.cms-box > header h3 { margin: 0; font-size: .98rem }
.cms-mehr { margin-left: auto; color: var(--nebel); font-size: .82rem; font-weight: 600; text-decoration: none }
.cms-mehr:hover { color: var(--milch) }
.cms-geld { display: grid; gap: 10px }
.cms-geld > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px;
padding-bottom: 9px; border-bottom: 1px solid var(--linie) }
.cms-geld > div:last-child { border: 0; padding-bottom: 0 }
.cms-geld span { color: var(--nebel); font-size: .88rem; font-weight: 600 }
.cms-geld b { font-size: 1.12rem; font-variant-numeric: tabular-nums; text-align: right }
.cms-geld small { grid-column: 1 / -1; color: var(--nebel); font-size: .76rem }
.cms-geld .hervor b { background: var(--verlauf); -webkit-background-clip: text; background-clip: text;
color: transparent; font-size: 1.32rem; font-weight: 800 }
.cms-lauf { display: grid; gap: 1px }
.cms-lauf .z { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 8px 0;
border-bottom: 1px solid var(--linie) }
.cms-lauf .z:last-child { border: 0 }
.cms-lauf .z i { width: 30px; height: 30px; border-radius: 99px; background: var(--pflaume-hell);
display: grid; place-items: center; font-style: normal; font-size: .82rem; color: var(--nebel) }
.cms-lauf .z.gut i { background: color-mix(in srgb, var(--minze) 20%, transparent); color: var(--minze-schrift) }
.cms-lauf .z b { font-weight: 600; font-size: .9rem } .cms-lauf .z small { display: block; color: var(--nebel); font-size: .78rem }
.cms-lauf .z em { font-style: normal; color: var(--nebel); font-size: .78rem; white-space: nowrap;
font-variant-numeric: tabular-nums }
/* Die uebrigen Abschnitte sitzen jetzt in der Arbeitsflaeche */
.cms-flaeche .ticket { margin-top: 0 }
.cms-flaeche > h2 { margin-top: 0 }
.cms-flaeche > h2 ~ h2, .cms-flaeche > h3 { margin-top: 1.4em }
@media (max-width: 980px) {
.cms { grid-template-columns: minmax(0, 1fr) }
.cms-menue { display: block }
.cms-seite { position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 40; transform: translateX(-100%);
transition: transform .22s ease; box-shadow: var(--cms-schatten); overflow-y: auto }
.cms-seite.offen { transform: none }
/* 15.10. (Owner-Bild: Text der Seite stand mitten in den Menueeintraegen): die Schublade liegt UEBER der Seite und darf
nie durchscheinen. --pflaume ist nicht immer deckend — saison_halloween.css setzt sie auf rgba(…, .80) («dunkles Glas»),
gemessen bg-alpha 0.8, und damit schien die ganze Flaeche durch. Darum: deckender Grund (--nacht) und --pflaume als
Schicht darueber — in Hell/Dunkel sieht das genau gleich aus wie vorher, in jedem Glas-Thema bleibt die Schublade dicht. */
.cms-seite { background-color: var(--nacht); background-image: linear-gradient(var(--pflaume), var(--pflaume)) }
body.hat-tableiste .cms-seite { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) } /* 15.10.: Tab-Leiste unten deckte das Schubladen-Ende (Weg zur Auszahlung) ab */
/* Tinu-Mini (z 60), sein Licht-Zeiger und der Ecken-Knopf (z 58) liegen sonst UEBER der offenen Schublade und fangen die
Tipps auf die Eintraege ab (elementFromPoint: p.tinu-text statt Menueeintrag). Solange sie offen ist: weg; zu = wieder da. */
body:has(.cms-seite.offen) :is(.tinu, .tinu-ecke, .tinu-zeiger) { visibility: hidden }
.cms-schatten { position: fixed; inset: 0; background: var(--cms-schleier); z-index: 30 }
.cms-zwei { grid-template-columns: minmax(0, 1fr) }
.cms-kopf-rechts .cms-code, .cms-kopf-rechts #kopieren-kopf { display: none }
.cms-titel h1 { font-size: 1.1rem } .cms-titel p { display: none }
}
@media (prefers-reduced-motion: reduce) { .cms-seite { transition: none } }
/* ══ Promoter-CMS, zweiter Durchgang (Owner 25.09., nach den vier Bildern von structura-os.com/funktionen)
Gemessen an Bild 1 (Dashboard), Bild 2 (Strukturbaum mit Detail-Panel), Bild 4 (Voice-Panel):
· die App ist DUNKEL, auch wenn die Website hell ist — eine Arbeitsflaeche, kein Prospekt
· Kopfzeile traegt eine zweite Navigationsebene, Suche, Glocke, Hilfe, Konto
· Kennzahlen: Symbol LINKS, Delta in Gruen neben der Zahl, darunter «vs. letzter Monat», rechts eine Kurve
· Diagramm mit Achsen und Zeitraumwahl, Aktivitaeten mit Fusszeile, Top-Liste, Ring nach Stand
· Struktur als gezeichneter Baum mit Verbindungslinien und einem Detail-Panel rechts
Farben bleiben MEEYO: Nacht, Pflaume, Korall→Violett, Minze. ═════════════════════════════════════════ */
/* 25.09., zweiter Anlauf: die App faerbte sich selbst dunkel — das war falsch. Owner: «hell und dunkel
muss auch über alle seiten gehen». Die Wahl oben rechts gilt ueberall, auch hier. Die Flaeche nimmt
darum nur noch eine Nuance dunkler bzw. heller als die Seite, aus denselben Tokens; eigene Farbwerte
stehen hier keine mehr. Der Schatten ist die einzige Ausnahme und wird je Thema gesetzt — ein schwarzer
Schlagschatten auf hellem Grund sieht aus wie Dreck, ein heller auf dunklem ist unsichtbar. */
body.cms-an { --cms-schatten: 0 18px 44px rgba(0,0,0,.5); --cms-schleier: rgba(6,2,10,.55) }
:root[data-theme="light"] body.cms-an { --cms-schatten: 0 14px 38px rgba(60,20,90,.16); --cms-schleier: rgba(40,16,60,.35) }
body.cms-an .kopf { background: var(--nacht); border-bottom: 1px solid var(--linie) }
body.cms-an .karte, body.cms-an .rechner, body.cms-an .satz, body.cms-an .mat,
body.cms-an .paket, body.cms-an .schritt, body.cms-an .pr-schritte div { box-shadow: none }
/* ── Kopfzeile ───────────────────────────────────────────────────────────────────────────────── */
/* 27.09. (Owner: «das ? und die Glocke müssen im ganzen Promoter-Bereich ersichtlich sein»):
`.cms-reiter` ist ein