/* feetpics – hell, weich, Farbwelt des feetpics-Logos: Mint und Dunkelgruen, Hellgelb als zweiter Akzent (Werte aus pantydeal/fpnew pdk_tokens.css). Mobil zuerst. */

/* Archivo, lokal ausgeliefert (assets/fonts, SIL Open Font License 1.1). Eine variable Datei je Zeichensatz mit zwei Achsen:
   Staerke 100 bis 900 und Breite 62 bis 125 %. Ueberschriften laufen etwas schmaler (font-stretch), Fliesstext normal:
   das gibt den urbanen Ton ohne zweite Schriftfamilie. "swap" zeigt den Text sofort in der Systemschrift. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #e9f3ec;
  --surface: #ffffff;
  --ink: #14231f;
  --muted: #4a5f57;
  --line: #d2e4d9;
  --field: #5d7168; /* rund 3:1 auf Weiss */
  --accent: #2c7762; /* Markengruen #2f7d67, einen Hauch dunkler: so traegt es als Text auch auf dem getoenten Grund (4,7:1) */
  --accent-deep: #1d4f41;
  --tint: #d3ecdf;
  --tint-deep: #bfe0cf;
  --pop: #e3e88f; /* Film-Gelb: nur klein, nie als Flaeche */
  /* Gefuellte Flaechen (Knoepfe, aktive Marken) tragen das Mint aus dem Logo. Mint ist hell: darauf steht dunkle
     Schrift, nie weisse. --accent ist dasselbe Gruen in dunkel und nur fuer Text, Linien und Umrisse da. */
  --fill: #81c4a9;
  --fill-deep: #6db59a;
  --on-fill: #10231d;
  --danger: #b3261e;
  --night: #10231d;

  --radius-s: 8px;
  --radius-m: 10px;
  --radius-l: 14px;
  --gutter: 16px;
  --topbar: 60px;
  --bottomnav: 66px;
  --shadow: 0 1px 2px rgba(20, 35, 31, 0.04), 0 8px 24px rgba(20, 35, 31, 0.05);

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar) + 12px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bottomnav) + env(safe-area-inset-bottom));
}
body.is-funnel { padding-bottom: 0; }

h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
fieldset { border: 0; min-width: 0; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
main:focus { outline: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-s); }
.skip:focus { top: 8px; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--fav { color: var(--accent); fill: var(--accent); margin-right: 6px; vertical-align: -0.2em; }

.spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid var(--tint-deep); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Kopf ---------- */

.topbar { position: sticky; top: 0; z-index: 20; background: rgba(233, 243, 236, 0.92); backdrop-filter: saturate(1.4) blur(10px); }
.topbar__in { height: var(--topbar); display: flex; align-items: center; gap: 16px; }

.logo { font-weight: 800; font-size: 1.6rem; letter-spacing: -0.045em; line-height: 1; }
.logo--sm { font-size: 1.1rem; margin-right: 8px; }

.topnav { display: none; gap: 32px; margin-left: 40px; font-weight: 500; }
.topnav a { padding: 8px 0; border-bottom: 2px solid transparent; }
.topnav a:hover { color: var(--accent); }
.topnav a.is-active { color: var(--accent); border-color: var(--accent); }

.topright { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.toplink { font-weight: 600; padding: 8px 4px; }
.toplink:hover { color: var(--accent); }
.topright .topcta { display: none; }

.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.pill .icon { color: var(--accent); }
.pill:hover { border-color: var(--accent); }
.pill--cta { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.pill--cta .icon { color: var(--on-fill); }

.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.avatar.is-active { background: var(--fill); }

.notice { width: calc(100% - 2 * var(--gutter)); margin-block: 8px; padding-block: 12px; background: #fff4e5; border: 1px solid #f2d6a8; border-radius: var(--radius-s); font-size: 0.9375rem; max-width: 1148px; }

/* ---------- Untere Navigation (mobil) ---------- */

.bottomnav {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--bottomnav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--line);
}
.bottomnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 0.78rem; color: var(--muted); }
.bottomnav .icon { width: 24px; height: 24px; }
.bottomnav a.is-active { color: var(--accent); font-weight: 600; }
/* Die Hauptaktion sitzt in der Mitte und hebt sich ab. */
.bottomnav a.is-primary .icon { width: 44px; height: 44px; padding: 10px; margin-top: -18px; border-radius: 50%; background: var(--fill); color: var(--on-fill); box-shadow: 0 6px 16px rgba(47, 125, 103, 0.3); }
.bottomnav a.is-primary { color: var(--ink); font-weight: 600; }
.is-funnel .bottomnav { display: none; }

.footer { display: none; margin-top: 72px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem; }
.footer__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; }
.footer__lang { display: flex; align-items: center; gap: 10px; }
.footer .logo { color: var(--ink); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 10px 22px;
  border: 0; border-radius: var(--radius-m);
  font-weight: 600; line-height: 1.2; text-align: center;
  transition: background-color 0.15s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--fill); color: var(--on-fill); }
.btn--primary:hover { background: var(--fill-deep); }
.btn--soft { background: var(--tint); color: var(--accent-deep); }
.btn--soft:hover { background: var(--tint-deep); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--field); }
.btn--ghost:hover { background: var(--line); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #8f1e18; }
.btn--lg { min-height: 58px; padding: 14px 28px; font-size: 1.0625rem; border-radius: var(--radius-m); gap: 12px; }
.btn--lg .icon { width: 1.4em; height: 1.4em; }
.btn--sm { min-height: 44px; padding: 8px 16px; font-size: 0.9375rem; border-radius: var(--radius-s); gap: 8px; }
.btn--block { display: flex; width: 100%; }

.iconbtn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; flex: none; }
.iconbtn:hover { background: rgba(255, 255, 255, 0.26); }
.iconbtn--light { width: 48px; height: 48px; }

.link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; }
.link:hover { color: var(--accent-deep); }
.link--back { color: var(--muted); font-weight: 500; margin-bottom: 12px; }

.linkbtn { border: 0; background: none; padding: 6px 0; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; }
.linkbtn:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.linkbtn--danger { color: var(--danger); }

/* ---------- Startseite ---------- */

.hero { position: relative; overflow: hidden; border-radius: var(--radius-l); background: #e3f1e6; }
.hero__body { position: relative; z-index: 2; padding: 30px 22px 26px; }
.hero__title { font-size: clamp(1.75rem, 8.8vw, 3.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; white-space: pre-line; }
.hero__lead { margin-top: 16px; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.45; max-width: 24em; }
.hero .btn--lg { margin-top: 24px; }
.hero__sub { margin-top: 10px; color: var(--muted); font-size: 0.9375rem; }
.hero__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 50%; }

.trust { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; font-size: 0.9375rem; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust .icon { width: 20px; height: 20px; color: var(--accent); }

.section { margin-top: 44px; }
.section--ruled { padding-top: 40px; border-top: 1px solid var(--line); }
.section__title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.section__lead { color: var(--muted); margin-top: 8px; max-width: 36em; }

.steps { display: grid; gap: 22px; margin-top: 24px; }
.step { display: flex; gap: 16px; align-items: flex-start; }
.step__num { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--tint); display: grid; place-items: center; font-size: 1.3rem; font-weight: 600; color: var(--accent-deep); }
.step__title { font-size: 1.0625rem; font-weight: 700; margin-top: 1px; }
.step__text { color: var(--muted); margin-top: 4px; max-width: 20em; }

/* Zwoelf Beispiel-Serien: jede eine Zeile aus vier Bildern, mobil seitlich wischbar. */
.shows { display: grid; gap: 40px; margin-top: 28px; }
.show__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.show__era { color: var(--accent); font-weight: 600; font-size: 0.875rem; }
.show__name { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.show__text { color: var(--muted); font-size: 0.9375rem; }
.show__row { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
.show__row::-webkit-scrollbar { display: none; }
.show__row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-m); scroll-snap-align: center; background: #dfeae3; }

.cta-band { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 36px 22px; border-radius: var(--radius-l); background: linear-gradient(120deg, #d3ecdf, #eef5b8); }
.cta-band__title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.cta-band p { max-width: 30em; }
.cta-band .btn { margin-top: 6px; }
.cta-band__note { color: var(--muted); font-size: 0.875rem; }
.cta-band--small { margin-top: 32px; padding: 28px 20px; }
.cta-band--small .cta-band__title { font-size: 1.3rem; }

.sticky-cta { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--bottomnav) + 22px + env(safe-area-inset-bottom)); z-index: 19; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 10px 18px; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 600; box-shadow: 0 10px 28px rgba(20, 35, 31, 0.3); }
.sticky-cta .icon { color: var(--pop); }
main:has(.sticky-cta) { padding-bottom: 88px; }

/* ---------- Seiten allgemein ---------- */

.page { padding-top: 18px; padding-bottom: 32px; }
.page--funnel { max-width: 600px; }
.page__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page__title { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.page__lead { color: var(--muted); margin-top: 6px; max-width: 34em; overflow-wrap: anywhere; }

.tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 20px; border-bottom: 1px solid var(--line); }
.tab { padding: 12px 8px; text-align: center; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.is-active { color: var(--accent); font-weight: 700; border-color: var(--accent); }

.empty { margin-top: 24px; padding: 44px 24px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); display: grid; gap: 14px; justify-items: center; }
.empty h2 { font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.empty p { color: var(--muted); max-width: 28em; }

.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 14px 16px; background: #fff4e5; border: 1px solid #f2d6a8; border-radius: var(--radius-s); font-size: 0.9375rem; }
.callout__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.progress { margin: 14px 0 6px; }
.progress__bar { height: 8px; background: var(--tint); border-radius: 99px; overflow: hidden; }
.progress__bar span { display: block; height: 100%; min-width: 8px; background: var(--fill); border-radius: 99px; transition: width 0.4s; }
.progress__text { margin-top: 8px; font-size: 0.875rem; color: var(--muted); }
.keep-open { color: var(--muted); font-size: 0.875rem; }

/* ---------- Trichter ---------- */

.stepper { display: flex; gap: 6px; margin-bottom: 20px; font-size: 0.875rem; color: var(--muted); }
.stepper li { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 3px solid var(--line); }
.stepper span { width: 24px; height: 24px; border-radius: 50%; background: var(--line); display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; flex: none; }
.stepper .icon { width: 14px; height: 14px; }
.stepper .is-active { color: var(--ink); font-weight: 700; border-color: var(--accent); }
.stepper .is-active span { background: var(--fill); color: var(--on-fill); }
.stepper .is-done { border-color: var(--tint-deep); }
.stepper .is-done span { background: var(--tint); color: var(--accent-deep); }

.funnel__head { display: flex; align-items: center; gap: 14px; }
.funnel__head--center { flex-direction: column; text-align: center; gap: 8px; margin-bottom: 20px; }
.funnel__shot { width: 64px; height: 80px; object-fit: cover; border-radius: var(--radius-s); background: #dfeae3; flex: none; }
.funnel__head--center .funnel__shot { width: 84px; height: 105px; }
.funnel__summary { font-weight: 600; overflow-wrap: anywhere; }
.funnel__busy { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 80px 0; color: var(--muted); }

/* Kamera: die einzige dunkle Flaeche der Seite, wie ein Sucher. */
.cam { display: grid; gap: 14px; }
.cam--message { justify-items: center; text-align: center; padding: 36px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.cam__bigicon { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--tint); color: var(--accent); }
.cam__title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; max-width: 18em; }
.cam__text { color: var(--muted); max-width: 26em; }
.cam__consent { color: var(--muted); font-size: 0.875rem; max-width: 26em; }
.cam__stage { position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--night); aspect-ratio: 3 / 4; max-height: 68dvh; width: 100%; margin-inline: auto; }
.cam__video, .cam__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam__video.is-mirrored { transform: scaleX(-1); }
.cam__guide { position: absolute; inset: 5% 9%; border: 2px dashed rgba(255, 255, 255, 0.55); border-radius: 24px; pointer-events: none; }
.cam__count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 7rem; font-weight: 800; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
.cam__hint { position: absolute; inset: auto 12px 12px; padding: 8px 12px; border-radius: var(--radius-s); background: rgba(16, 35, 29, 0.6); color: #fff; font-size: 0.875rem; text-align: center; }
.cam--live .cam__stage { max-height: calc(100dvh - 320px); min-height: 240px; }
.cam--review .cam__stage { max-height: calc(100dvh - 232px); }
.cam__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-l); background: var(--night); }
/* Timer als eigene Zeile ueber dem Ausloeser, damit der Ausloeser exakt in der Mitte sitzt. */
.cam__timers { grid-column: 1 / -1; display: flex; gap: 4px; justify-self: center; }
.cam__timer { border: 0; background: none; color: rgba(255, 255, 255, 0.7); min-height: 44px; padding: 0 16px; border-radius: 99px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.cam__timer.is-active { background: rgba(255, 255, 255, 0.18); color: #fff; }
.cam__shutter { grid-column: 2; width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: none; padding: 5px; }
.cam__shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--fill); transition: transform 0.1s; }
.cam__shutter:active span { transform: scale(0.9); }
.cam__bar .iconbtn { grid-column: 3; justify-self: end; }
.cam__actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.cam__actions .btn { padding-inline: 16px; }

/* ---------- Formular ---------- */

.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field__label { font-weight: 600; }
.field__label small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.field__hint { color: var(--muted); font-size: 0.875rem; }
.input { width: 100%; min-height: 48px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--field); border-radius: var(--radius-s); }
.input:focus-visible { outline-offset: 0; border-color: var(--accent); }
.input--lg { min-height: 56px; font-size: 1.0625rem; }
.input--sm { min-height: 36px; padding: 4px 10px; width: auto; }
textarea.input { min-height: 76px; resize: none; field-sizing: content; line-height: 1.45; }
.input::placeholder { color: var(--muted); opacity: 0.8; }
select.input { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c626b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }

/* Stil-Auswahl: seitlich wischbare Bildkarten. */
.looks-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 38%; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 6px; scrollbar-width: none; }
.looks-scroller::-webkit-scrollbar { display: none; }
.look-card { position: relative; display: block; cursor: pointer; scroll-snap-align: center; }
.look-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.look-card__body { position: relative; display: block; border-radius: var(--radius-m); overflow: hidden; background: var(--night); outline: 3px solid transparent; outline-offset: -3px; }
.look-card__body img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; opacity: 0.86; transition: opacity 0.15s; }
.look-card__name { position: absolute; inset: auto 0 0 0; padding: 26px 10px 9px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); color: #fff; font-size: 0.875rem; font-weight: 600; line-height: 1.2; }
.look-card__name small { display: block; font-weight: 400; font-size: 0.75rem; opacity: 0.85; }
.look-card input:checked + .look-card__body { outline-color: var(--accent); box-shadow: 0 0 0 3px var(--tint-deep); }
.look-card input:checked + .look-card__body img { opacity: 1; }
/* Drei Looks sind gewaehlt: die uebrigen treten zurueck, bis einer abgewaehlt wird. */
.look-card input:disabled { cursor: not-allowed; }
.look-card input:disabled + .look-card__body { opacity: 0.4; }
.look-card input:checked + .look-card__body::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--fill); color: var(--on-fill); display: grid; place-items: center; font-size: 0.875rem; font-weight: 700; }
.look-card input:focus-visible + .look-card__body { outline: 3px solid var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--field); border-radius: 99px; white-space: nowrap; }
.chip--sm span { min-height: 44px; padding: 6px 14px; font-size: 0.9375rem; }
.chip input:checked + span { background: var(--fill); border-color: var(--fill); color: var(--on-fill); font-weight: 600; }
.chip input:disabled + span { opacity: 0.4; }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip-btn { flex: none; min-height: 44px; padding: 6px 13px; border: 1px dashed var(--field); border-radius: 99px; background: none; color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }

.extras { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.extras summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font-weight: 600; cursor: pointer; }
.extras summary::-webkit-details-marker { display: none; }
.extras summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 4px 4px 0; flex: none; }
.extras[open] summary::after { transform: rotate(-135deg); margin: 4px 4px 0 0; }
.extras__count { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 0.875rem; }
.extras__body { display: grid; gap: 16px; padding: 4px 16px 18px; }
.extras__group legend { font-size: 0.875rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.extras--plain { background: none; }

.size-note { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.size-note .icon { color: var(--accent); }

/* Der Hauptknopf bleibt beim Scrollen durch das Formular erreichbar. */
.form__submit { position: sticky; bottom: calc(var(--bottomnav) + env(safe-area-inset-bottom)); z-index: 5; display: grid; gap: 8px; margin-inline: calc(var(--gutter) * -1); padding: 12px var(--gutter) 14px; background: linear-gradient(180deg, rgba(233, 243, 236, 0), var(--bg) 26%); }
.is-funnel .form__submit { bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.form__note { text-align: center; color: var(--muted); font-size: 0.875rem; }
.form__error { padding: 12px 16px; background: #fdecea; border: 1px solid #f3c2bd; border-radius: var(--radius-s); color: #7a1a14; }

/* Anmeldung */
.signin { display: grid; gap: 12px; }
.signin__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.signin__lead { color: var(--muted); overflow-wrap: anywhere; }
.signin__note { color: var(--muted); font-size: 0.875rem; text-align: center; }
.signin--inbox { justify-items: center; text-align: center; padding: 28px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.signin__bigicon { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--tint); color: var(--accent); }
.signin__code { padding: 12px 14px; border-radius: var(--radius-s); background: var(--bg); font-size: 0.9375rem; color: var(--muted); }
.signin__code strong { display: block; margin-top: 4px; font-size: 1.8rem; letter-spacing: 0.18em; color: var(--ink); font-variant-numeric: tabular-nums; }
.verify__code { max-width: 160px; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.signin__waiting { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.signin__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.signin__alt { margin-top: 24px; text-align: center; color: var(--muted); }
.devbox { width: 100%; display: grid; gap: 10px; padding: 14px; border: 1px dashed #e0b96a; border-radius: var(--radius-m); background: #fff9ec; font-size: 0.875rem; }

/* ---------- Meine Serien ---------- */

.scards { display: grid; gap: 18px; margin-top: 18px; }
.scard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px; box-shadow: var(--shadow); }
.scard__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.scard__title { font-size: 1.0625rem; font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; }
.scard__meta { color: var(--muted); font-size: 0.9375rem; margin-top: 2px; }
.scard .btn--block { margin-top: 16px; }

.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.thumbs img, .thumb-empty { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-s); background: #dfeae3; }
.thumb-empty.is-loading, .tile--pending { background: linear-gradient(100deg, #dfeae3 30%, #f4f9f5 50%, #dfeae3 70%); background-size: 300% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.menu { position: relative; flex: none; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: var(--tint); color: var(--accent-deep); }
.menu__list { position: absolute; right: 0; top: 48px; z-index: 5; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: 0 12px 32px rgba(20, 35, 31, 0.14); }
.menu__list button { display: block; width: 100%; padding: 11px 12px; border: 0; background: none; text-align: left; border-radius: 8px; }
.menu__list button:hover { background: var(--bg); }
.menu__list .is-danger { color: var(--danger); }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.tile { display: block; padding: 0; border: 0; background: #dfeae3; border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 4 / 5; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
button.tile:hover img { transform: scale(1.03); }

/* ---------- Abo und Konto ---------- */

.plan-card { display: grid; gap: 14px; margin-top: 20px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow); }
.plan-card--free { border: 1px solid var(--line); }
.plan-card__label { color: var(--accent); font-weight: 700; font-size: 0.875rem; }
.plan-card__price strong { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.plan-card__price span { color: var(--muted); }
.plan-card__list { display: grid; gap: 10px; }
.plan-card__list li { display: flex; gap: 10px; align-items: flex-start; }
.plan-card__list .icon { color: var(--accent); margin-top: 3px; }
.plan-card__note { text-align: center; color: var(--muted); font-size: 0.875rem; }
.plan-card__note--dev { color: #8a5a00; }
.plan-card + .btn { margin-top: 12px; }
.paywall__head { display: flex; align-items: center; gap: 16px; }
.paywall__look { width: 76px; height: 95px; object-fit: cover; border-radius: var(--radius-s); flex: none; }

.panel { display: grid; gap: 10px; justify-items: start; margin-top: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.panel__title { font-size: 1.0625rem; font-weight: 700; }
.panel p { color: var(--muted); }
.panel p.panel__stat { color: var(--ink); font-weight: 700; font-size: 1.1rem; }
.panel__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.panel__photo { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.panel__photo img { width: 96px; height: 120px; object-fit: cover; border-radius: var(--radius-s); background: #dfeae3; }
.panel__photo > div { display: grid; gap: 8px; justify-items: start; font-size: 0.9375rem; }
.panel--row { display: flex; align-items: center; justify-content: space-between; }

.panel, .plan-card, .empty, .extras, .cam--message, .signin--inbox { box-shadow: var(--shadow); }
.extras--plain { box-shadow: none; }
.field__hint strong { color: var(--ink); font-weight: 600; }

/* ---------- Dialoge ---------- */

dialog { border: 0; padding: 0; color: inherit; }
dialog::backdrop { background: rgba(20, 35, 31, 0.6); }

.dialog { width: min(440px, calc(100vw - 32px)); border-radius: var(--radius-m); background: var(--surface); }
.ask { display: grid; gap: 16px; padding: 24px; }
.ask__title { font-size: 1.2rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.ask__text { color: var(--muted); }
.ask__actions { display: flex; justify-content: flex-end; gap: 8px; }

.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(20, 35, 31, 0.94); color: #fff; }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.lightbox::backdrop { background: transparent; }
.lightbox__bar { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
.lightbox__bar [data-count] { margin-right: auto; font-variant-numeric: tabular-nums; }
.lightbox__stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 0 8px 16px; min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; margin: auto; border-radius: var(--radius-s); min-height: 0; object-fit: contain; }

.toast { position: fixed; left: 50%; bottom: calc(var(--bottomnav) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; margin: 0; padding: 12px 20px; background: var(--ink); color: #fff; border-radius: 99px; font-size: 0.9375rem; max-width: calc(100vw - 32px); text-align: center; }

@media (max-width: 719px) {
  .lightbox__bar [data-download] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lightbox__stage { position: relative; grid-template-columns: 1fr; padding: 0 0 16px; }
  .lightbox__stage .iconbtn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(20, 35, 31, 0.55); z-index: 1; }
  .lightbox__stage [data-prev] { left: 8px; }
  .lightbox__stage [data-next] { right: 8px; }
}

/* ---------- Ab Tablet ---------- */

@media (min-width: 720px) {
  :root { --gutter: 32px; --topbar: 80px; }
  body { padding-bottom: 0; }
  .bottomnav, .sticky-cta { display: none; }
  .footer { display: block; }
  .topnav { display: flex; }
  .topright .topcta { display: inline-flex; }
  .logo { font-size: 2.1rem; }
  .logo--sm { font-size: 1.1rem; }
  .toast { bottom: 28px; }

  .hero { display: grid; align-items: center; min-height: clamp(440px, 44vw, 560px); background: #e3f1e6; }
  /* Das Foto fuellt nur die rechten 64 %, links bleibt Platz fuer die Schrift. */
  .hero__img { position: absolute; inset: 0 0 0 auto; width: 64%; height: 100%; aspect-ratio: auto; object-position: 78% 50%; }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #e3f1e6 36%, rgba(227, 241, 230, 0.78) 45%, rgba(227, 241, 230, 0) 58%); }
  .hero__body { padding: 48px 0 48px clamp(32px, 5.5vw, 72px); max-width: 640px; }
  .hero__title { font-size: clamp(2.5rem, 4.2vw, 3.5rem); }
  .hero__lead { max-width: 22em; }

  .section { margin-top: 56px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .shows { gap: 52px; }
  .show__row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: 14px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .cta-band { padding: 56px 32px; }
  .cta-band__title { font-size: 2.1rem; }

  .page { padding-top: 28px; }
  .tabs { display: flex; gap: 8px; }
  .tab { padding-inline: 22px; }
  .scards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  .looks-scroller { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .chips--scroll { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; }
  .form__submit { position: static; margin-inline: 0; padding: 0; background: none; }
  .cam__stage { aspect-ratio: 4 / 3; }
}

@media (min-width: 720px) and (max-width: 959px) {
  .hero__body { max-width: 46%; }
}

@media (min-width: 1080px) {
  .scards { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Karte, Angebote, Bestellungen, Chat
   ============================================================ */

.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 99px; background: var(--fill); color: var(--on-fill); font-size: 0.75rem; font-weight: 700; font-style: normal; line-height: 1; }
.bottomnav .badge { position: absolute; top: 8px; left: calc(50% + 6px); margin: 0; }
.page__action { margin-top: 14px; }
.page--chat { max-width: 720px; padding-bottom: 0; }
.page--card { max-width: 1040px; }

/* ---------- Die 10 Farben: 5 hell, 5 dunkel ----------
   Jede setzt dieselben sieben Werte. Alles unter .bio, .sheet und dem Kunden-Chat rechnet nur mit ihnen.
   --p-on ist die Schriftfarbe auf --p-accent. */
[data-palette] { --p-bg: #f3f6f8; --p-surface: #ffffff; --p-ink: #0f1b2d; --p-muted: #56637a; --p-line: #c9d4e0; --p-accent: #2456e6; --p-on: #ffffff; }
[data-palette="sand"]     { --p-bg: #f2ece2; --p-surface: #fffdf9; --p-ink: #2a2420; --p-muted: #6b6257; --p-line: #d3c6b2; --p-accent: #7a4e2d; --p-on: #ffffff; }
[data-palette="sage"]     { --p-bg: #e8eee5; --p-surface: #fbfdf9; --p-ink: #1e2a21; --p-muted: #566458; --p-line: #bfcdba; --p-accent: #3c6e4f; --p-on: #ffffff; }
[data-palette="peach"]    { --p-bg: #fdece1; --p-surface: #fffaf6; --p-ink: #38211a; --p-muted: #7a5a4e; --p-line: #ecc3ab; --p-accent: #a84a2a; --p-on: #ffffff; }
[data-palette="lilac"]    { --p-bg: #ece9fa; --p-surface: #ffffff; --p-ink: #211a3b; --p-muted: #5d5680; --p-line: #c5bdec; --p-accent: #5b41c9; --p-on: #ffffff; }
[data-palette="ink"]      { --p-bg: #0d1830; --p-surface: #17233f; --p-ink: #f1f5fb; --p-muted: #9aa8bf; --p-line: #293a5c; --p-accent: #8fb2ff; --p-on: #0b1322; }
[data-palette="graphite"] { --p-bg: #141414; --p-surface: #212121; --p-ink: #f4f4f1; --p-muted: #a6a6a1; --p-line: #383838; --p-accent: #f0dc9a; --p-on: #1a1606; }
[data-palette="cocoa"]    { --p-bg: #261b14; --p-surface: #34261d; --p-ink: #f7eee7; --p-muted: #b8a698; --p-line: #4b382b; --p-accent: #f2b279; --p-on: #2a1a0c; }
[data-palette="forest"]   { --p-bg: #0d241c; --p-surface: #163428; --p-ink: #e9f5ef; --p-muted: #9dbbae; --p-line: #2a4d3f; --p-accent: #7bdcb0; --p-on: #06231a; }
[data-palette="plum"]     { --p-bg: #1f1a24; --p-surface: #2b2531; --p-ink: #f5f0f8; --p-muted: #b8adbf; --p-line: #413948; --p-accent: #cdb9f2; --p-on: #1c1230; }

/* ---------- Oeffentliche Karte ---------- */

body.is-card { padding-bottom: 0; }
.is-card .topbar, .is-card .bottomnav, .is-card .footer, .is-card .notice { display: none; }

/* Ein weicher Lichtschein aus der Akzentfarbe gibt der Flaeche Tiefe, ohne bunt zu werden. */
.bio { min-height: 100dvh; background: radial-gradient(120% 55% at 0% 0%, color-mix(in srgb, var(--p-accent) 13%, var(--p-bg)) 0%, var(--p-bg) 62%) no-repeat var(--p-bg); color: var(--p-ink); }
.bio__side, .bio__main { display: grid; gap: 18px; align-content: start; min-width: 0; }
.bio__in { --pad: var(--gutter); --bleed: var(--pad); width: 100%; max-width: 472px; margin-inline: auto; padding: 36px var(--pad) 40px; display: grid; gap: 18px; align-content: start; }
.bio__in--center { min-height: 100dvh; align-content: center; justify-items: start; }
.bio__in--center .bio__name { font-size: 2rem; }

.bio__owner { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding: 0 14px; border: 1px dashed var(--p-line); border-radius: var(--radius-s); color: var(--p-muted); font-size: 0.875rem; }
.bio__owner a { color: var(--p-accent); font-weight: 600; }
.bio__owner a, .bio__owner span, .bio__foot a, .link--back { display: inline-flex; align-items: center; min-height: 44px; }

/* Kopf der Karte: grosses Profilbild und Name. Wie beides zueinander steht, bestimmt das Layout. */
.bio__hero { position: relative; display: grid; gap: 16px; }
.bio__photo { position: relative; overflow: hidden; display: grid; place-items: center; background: var(--p-accent); color: var(--p-on); font-size: 4.5rem; font-weight: 800; letter-spacing: -0.04em; }
.bio__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.bio__id { position: relative; min-width: 0; }
.bio__name { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; overflow-wrap: break-word; hyphens: auto; }
.bio__handle { margin-top: 6px; color: var(--p-muted); font-weight: 500; }

/* Ohne Profilbild: eine ruhige getoente Flaeche mit den Initialen, keine vollflaechige Akzentfarbe. */
.bio__photo:not(:has(img)) { background: color-mix(in srgb, var(--p-accent) 16%, var(--p-surface)); color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-line); }
[data-layout="poster"] .bio__photo:not(:has(img)), [data-layout="frame"] .bio__photo:not(:has(img)), [data-layout="cover"] .bio__photo:not(:has(img)) { aspect-ratio: 4 / 3; }
[data-layout="poster"] .bio__photo:not(:has(img))::after { display: none; }
[data-layout="poster"] .bio__hero:not(:has(img)) .bio__id { color: var(--p-ink); }
[data-layout="poster"] .bio__hero:not(:has(img)) .bio__handle { color: var(--p-muted); }

/* --bleed: wie weit ein randloses Bild ueber den Seitenrand hinausgeht. In der Desktop-Spalte ist es 0. */
[data-layout="poster"] > .bio__in, [data-layout="banner"] > .bio__in { padding-top: 0; }
/* Die Leiste fuer die Inhaberin liegt auf dem Bild, damit sie den Kopf so sieht wie ihre Besucher. */
[data-layout="poster"] > .bio__in, [data-layout="banner"] > .bio__in { position: relative; }
[data-layout="poster"] .bio__owner, [data-layout="banner"] .bio__owner { position: absolute; z-index: 2; inset: 12px var(--pad) auto; margin: 0; border: 0; background: color-mix(in srgb, var(--p-bg) 80%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* 1 Poster: das Bild fuellt den Kopf randlos, der Name steht darauf. */
[data-layout="poster"] .bio__hero { margin-inline: calc(var(--bleed) * -1); }
[data-layout="poster"] .bio__photo { aspect-ratio: 4 / 5; }
[data-layout="poster"] .bio__photo::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); }
[data-layout="poster"] .bio__id { position: absolute; inset: auto var(--pad) 22px; color: #fff; }
[data-layout="poster"] .bio__name { font-size: 2.9rem; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35); }
[data-layout="poster"] .bio__handle { color: rgba(255, 255, 255, 0.86); }

/* 2 Verlauf: das Profilbild ist der Hintergrund der ganzen Seite. Es steht fest, der Inhalt laeuft auf
   halb durchsichtigen Flaechen darueber. --photo setzt card.js an der Karte; ohne Bild bleibt die Kartenfarbe. */
.bio[data-layout="fade"] { position: relative; isolation: isolate; background: var(--p-bg); }
.bio[data-layout="fade"]::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--photo, none) 50% 22% / cover no-repeat; }
.bio[data-layout="fade"]::after { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--p-bg) 8%, transparent), color-mix(in srgb, var(--p-bg) 52%, transparent) 44%, color-mix(in srgb, var(--p-bg) 90%, transparent) 76%); }
[data-layout="fade"] .bio__hero { min-height: 430px; align-content: end; text-align: center; }
[data-layout="fade"] .bio__hero:has(img) .bio__photo { display: none; }
[data-layout="fade"] .bio__hero:not(:has(img)) .bio__photo { width: 60%; justify-self: center; aspect-ratio: 1; border-radius: 50%; }
[data-layout="fade"] .bio__name { font-size: 3rem; }
[data-layout="fade"] .bio__handle { color: var(--p-ink); opacity: 0.82; }
[data-layout="fade"] .bio__text { text-align: center; }
[data-layout="fade"] .bio__section { color: var(--p-ink); }
[data-layout="fade"] .bio__facts li, [data-layout="fade"] .bio__links a, [data-layout="fade"] .deal { background: color-mix(in srgb, var(--p-surface) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* In Vorschau und Kachel haelt die Verschiebung das "fixed" im eigenen Kasten. */
.bio--preview { transform: translateZ(0); }
.bio--preview[data-layout="fade"]::before, .bio--preview[data-layout="fade"]::after { position: absolute; }

/* 3 Rahmen: grosses Hochformat mit weichen Ecken, Name darunter. */
[data-layout="frame"] .bio__photo { aspect-ratio: 4 / 5; border-radius: 28px; }
[data-layout="frame"] .bio__name { font-size: 2.6rem; }

/* 4 Titelblatt: der Name liegt wie ein Etikett ueber der Bildkante. */
[data-layout="cover"] .bio__hero { gap: 0; }
[data-layout="cover"] .bio__photo { width: 82%; margin-left: auto; aspect-ratio: 3 / 4; border-radius: 24px; }
[data-layout="cover"] .bio__id { margin-top: -40px; }
[data-layout="cover"] .bio__name { display: inline; padding: 2px 12px; font-size: 2.6rem; line-height: 1.32; background: var(--p-accent); color: var(--p-on); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-layout="cover"] .bio__handle { margin-top: 12px; }

/* 5 Geteilt: Bild links, Name gross daneben. */
[data-layout="split"] .bio__hero { grid-template-columns: 54% minmax(0, 1fr); align-items: end; }
[data-layout="split"] .bio__photo { aspect-ratio: 3 / 4; border-radius: 22px; }
[data-layout="split"] .bio__id { padding-bottom: 10px; border-bottom: 4px solid var(--p-accent); }
[data-layout="split"] .bio__name { font-size: 1.6rem; }

/* 6 Banner: breites Bild oben, darunter der Name in voller Groesse. */
[data-layout="banner"] .bio__hero { gap: 20px; }
[data-layout="banner"] .bio__photo { margin-inline: calc(var(--bleed) * -1); aspect-ratio: 5 / 4; border-radius: 0 0 32px 32px; }
[data-layout="banner"] .bio__id::before { content: ""; display: block; width: 44px; height: 5px; margin-bottom: 14px; border-radius: 99px; background: var(--p-accent); }
[data-layout="banner"] .bio__name { font-size: 3rem; }

/* 7 Bogen: das Bild im Torbogen, alles mittig. */
[data-layout="arch"] .bio__hero { justify-items: center; text-align: center; }
[data-layout="arch"] .bio__photo { width: 72%; aspect-ratio: 3 / 4; border-radius: 999px 999px 26px 26px; }
[data-layout="arch"] .bio__text { text-align: center; }

/* 8 Kreis: grosses rundes Bild mit Ring in der Akzentfarbe, alles mittig. */
[data-layout="circle"] .bio__hero { justify-items: center; text-align: center; gap: 22px; }
[data-layout="circle"] .bio__photo { width: min(66%, 260px); aspect-ratio: 1; margin-top: 10px; border-radius: 50%; overflow: visible; }
[data-layout="circle"] .bio__photo img { border-radius: 50%; }
[data-layout="circle"] .bio__photo::after { content: ""; position: absolute; inset: -9px; border: 3px solid var(--p-accent); border-radius: 50%; }
[data-layout="circle"] .bio__text { text-align: center; }

/* 9 Sofortbild: das Foto im weissen Rahmen, leicht gedreht, der Name auf dem Rand. */
[data-layout="polaroid"] .bio__hero { justify-self: center; width: 86%; margin-block: 10px 8px; padding: 14px 14px 20px; gap: 14px; background: #f8f6f1; color: #1c1c1c; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.18); transform: rotate(-2.5deg); }
[data-layout="polaroid"] .bio__photo { aspect-ratio: 1; border-radius: 2px; }
[data-layout="polaroid"] .bio__name { font-size: 1.8rem; }
[data-layout="polaroid"] .bio__handle { color: #6b6b6b; }

/* 10 Sticker: gekipptes Bild mit farbigem Versatz, Name gross darunter. */
[data-layout="sticker"] .bio__hero { gap: 30px; }
[data-layout="sticker"] .bio__photo { width: 70%; margin: 10px 0 0 6px; aspect-ratio: 1; border-radius: 26%; transform: rotate(3deg); box-shadow: 10px 10px 0 var(--p-accent); }
[data-layout="sticker"] .bio__name { font-size: 2.8rem; }
.bio__text { font-size: 1.0625rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }

.bio__links { display: grid; gap: 8px; }
.bio__links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 12px 18px; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--radius-m); font-weight: 600; overflow-wrap: anywhere; transition: border-color 0.15s; }
.bio__links a:hover { border-color: var(--p-accent); }
.bio__links .icon { color: var(--p-accent); transform: rotate(-45deg); }
.bio__links a small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--p-muted); }

.bio__section { margin-top: 10px; font-size: 1rem; font-weight: 700; color: var(--p-muted); }
.bio__empty { color: var(--p-muted); padding: 22px 18px; border: 1px dashed var(--p-line); border-radius: var(--radius-m); }
.bio__foot { grid-column: 1 / -1; margin-top: 12px; text-align: center; font-size: 0.875rem; color: var(--p-muted); }
.bio__foot a { text-decoration: underline; text-underline-offset: 3px; }
.bio :focus-visible, .sheet :focus-visible { outline-color: var(--p-accent); }

.bio__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 20px; border: 0; border-radius: var(--radius-m); background: var(--p-accent); color: var(--p-on); font-weight: 700; transition: filter 0.15s, transform 0.1s; }
.bio__btn:hover { filter: brightness(0.93); }
.bio__btn:active { transform: translateY(1px); }
.bio__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.bio__btn--lg { min-height: 58px; font-size: 1.0625rem; }
.bio__in--center .bio__btn { width: auto; }

/* Ein Angebot: grosses Titelbild, darunter Titel und Preis, die uebrigen Bilder als unkenntlicher Streifen. */
.deals { display: grid; gap: 20px; }
.deal { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--radius-l); overflow: hidden; }
.deal__media { position: relative; }
.deal__cover { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--p-line); }
.deal__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.deal__price { flex: none; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
/* Die uebrigen Bilder der Serie als Milchglas-Reihe: man sieht, dass es sie gibt, aber nicht, was darauf ist. */
.deal__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.deal__strip span { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--p-line); }
.deal__strip img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) saturate(1.15); transform: scale(1.15); }
.deal__strip span:not(.deal__more)::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--p-surface) 22%, transparent); }
.deal__strip .deal__more { display: grid; place-items: center; background: var(--p-bg); border: 1px solid var(--p-line); color: var(--p-ink); font-weight: 700; }
.deal__body { display: grid; gap: 6px; padding: 16px 16px 18px; }
.deal__title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: anywhere; }
.deal__meta { color: var(--p-muted); font-size: 0.9375rem; }
.deal__note { overflow-wrap: anywhere; }
.deal__body .bio__btn { margin-top: 10px; }
.deal__body .bio__btn + .bio__btn { margin-top: 0; } /* Kaufen und darunter "Erst schreiben" */

/* ---------- Bestell-Formular (unten angeschlagenes Blatt) ---------- */

.sheet { width: 100%; max-width: 472px; margin: auto auto 0; padding: 0; background: var(--p-surface); color: var(--p-ink); border-radius: var(--radius-l) var(--radius-l) 0 0; max-height: 92dvh; overflow-y: auto; }
.sheet::backdrop { background: rgba(8, 12, 20, 0.55); }
.sheet__form { display: grid; gap: 14px; padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom)); }
.sheet__head { display: flex; align-items: center; gap: 12px; }
.sheet__what { flex: 1; min-width: 0; }
.sheet__title { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.sheet__offer { margin-top: 4px; color: var(--p-muted); overflow-wrap: anywhere; }
.sheet__close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--p-bg); color: var(--p-ink); }
.sheet__field { display: grid; gap: 6px; font-weight: 600; }
.sheet__field small { font-weight: 400; color: var(--p-muted); }
.sheet .input { background: var(--p-bg); border-color: color-mix(in srgb, var(--p-muted) 55%, var(--p-surface)); color: var(--p-ink); font-weight: 400; }
.sheet .input:focus-visible { border-color: var(--p-accent); }
.sheet .input::placeholder { color: var(--p-muted); }
.sheet__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sheet__error { padding: 10px 14px; border-radius: var(--radius-s); border: 1px solid currentColor; color: #b3261e; }
[data-palette="ink"] .sheet__error, [data-palette="graphite"] .sheet__error, [data-palette="cocoa"] .sheet__error, [data-palette="forest"] .sheet__error, [data-palette="plum"] .sheet__error { color: #ffb4a9; }
.sheet__rule { color: var(--p-muted); font-size: 0.875rem; text-align: center; }

/* ---------- Chat ---------- */

/* Der Chat fuellt mindestens den Bildschirm, damit das Eingabefeld auch bei zwei Nachrichten unten sitzt. */
.chat { display: flex; flex-direction: column; gap: 12px; min-height: calc(100dvh - var(--topbar) - var(--bottomnav) - 50px - env(safe-area-inset-bottom)); }
.is-funnel .chat { min-height: calc(100dvh - var(--topbar) - 50px); }
.chat__head { position: sticky; top: var(--topbar); z-index: 5; display: flex; align-items: center; gap: 12px; padding-block: 8px; margin-top: -8px; background: var(--bg); }
.chat__peer { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat__back { width: 44px; height: 44px; margin-left: -10px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); flex: none; }
.chat__back:hover { background: var(--line); }
.chat__cover { width: 48px; height: 60px; border-radius: 10px; object-fit: cover; flex: none; background: var(--line); }
.chat__who { display: grid; min-width: 0; }
.chat__name { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.chat__offer { color: var(--muted); font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__rule { padding: 0 2px; text-align: center; color: var(--muted); font-size: 0.8125rem; }
.chat__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.chat__end { color: var(--muted); margin-left: auto; }

.chat__list { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.chat__msg { max-width: min(82%, 520px); align-self: flex-start; padding: 10px 14px 8px; border-radius: 18px 18px 18px 6px; background: var(--surface); border: 1px solid var(--line); }
.chat__msg p { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__msg time { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--muted); text-align: right; }
.chat__msg.is-mine { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.chat__msg.is-mine time { color: var(--on-fill); opacity: 0.72; }
.chat__day { align-self: center; margin: 10px 0 4px; font-size: 0.78rem; color: var(--muted); }
.chat__empty { margin: auto; max-width: 26em; text-align: center; color: var(--muted); }
.chat__closed { padding: 14px; text-align: center; color: var(--muted); border: 1px dashed var(--field); border-radius: var(--radius-m); }

.chat__unlocked { padding: 14px; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; }
.chat__unlocked-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.chat__unlocked-title .icon { color: var(--accent); }
.chat__images { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chat__images img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--line); }

/* Das Eingabefeld bleibt am unteren Rand stehen, die Nachrichten scrollen mit der Seite darunter durch. */
.chat__form { position: sticky; bottom: calc(var(--bottomnav) + env(safe-area-inset-bottom)); z-index: 4; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter) 12px; background: var(--bg); }
.is-funnel .chat__form { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.chat__form textarea.input { min-height: 50px; max-height: 140px; border-radius: 24px; padding: 12px 18px; }
.chat__form .btn { width: 50px; min-height: 50px; padding: 0; border-radius: 50%; }
.chat__form .btn .icon { transform: rotate(-90deg); }

.chat-saved { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--surface); border: 1px solid var(--line); font-size: 0.9375rem; }

/* Der Chat der Kundin traegt die Farben der Karte, ueber die sie bestellt hat: die Palette liegt dann
   auf <body> und ersetzt die Grundfarben der App fuer die ganze Seite. */
body.is-themed { --bg: var(--p-bg); --surface: var(--p-surface); --ink: var(--p-ink); --muted: var(--p-muted); --line: var(--p-line); --field: var(--p-muted); --accent: var(--p-accent); --accent-deep: var(--p-accent); --fill: var(--p-accent); --fill-deep: var(--p-accent); --on-fill: var(--p-on); --tint: var(--p-surface); --tint-deep: var(--p-line); }
.is-themed .topbar { background: var(--p-bg); backdrop-filter: none; }
.is-themed .chat__msg.is-mine time { color: inherit; opacity: 0.9; }
.is-themed .toast { background: var(--p-ink); color: var(--p-bg); }
.is-themed .avatar { background: var(--p-accent); color: var(--p-on); }
/* Mitten im Kaufgespraech wirbt die App nicht fuer sich selbst. */
.is-themed .topnav, .is-themed .topright { display: none; }
.is-themed .btn--soft { color: var(--p-ink); border: 1px solid var(--p-line); }
.is-themed .input { color: var(--p-ink); }

/* ---------- Bestellungen (Liste) ---------- */

.orows { display: grid; gap: 8px; margin-top: 18px; }
.orow { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 16px 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.orow:hover { border-color: var(--accent); }
.orow__dot { width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; }
.orow.is-unread .orow__dot { background: var(--fill); }
.orow__main { display: grid; gap: 2px; min-width: 0; }
.orow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.orow__last { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orow.is-unread .orow__last { color: var(--ink); font-weight: 600; }
.orow__meta, .orow__top time { color: var(--muted); font-size: 0.8125rem; }
.orow__top time { white-space: nowrap; flex: none; }

/* ---------- Meine Karte (Editor) ---------- */

.cardedit { display: grid; gap: 22px; margin-top: 18px; }
fieldset.field > legend { padding: 0; }
.offer { margin-top: 20px; }
.cardedit__label { font-weight: 600; color: var(--muted); font-size: 0.875rem; margin-bottom: 8px; }
.bio--preview { min-height: 0; border-radius: var(--radius-l); border: 1px solid var(--line); overflow: hidden; }
.bio--preview .bio__in { --pad: 16px; padding-bottom: 24px; }

/* Layout-Auswahl: jede Kachel ist die echte Karte, verkleinert (390 px breit gerechnet, auf 120 px skaliert). */
.laytiles { display: grid; grid-auto-flow: column; grid-auto-columns: 156px; gap: 10px; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 6px; scrollbar-width: none; }
.laytiles::-webkit-scrollbar { display: none; }
.laytile { position: relative; display: grid; gap: 6px; cursor: pointer; }
.laytile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.laytile__view { position: relative; width: 156px; height: 204px; background: var(--bg); overflow: hidden; border-radius: var(--radius-s); border: 1px solid var(--line); outline: 3px solid transparent; outline-offset: 2px; }
.bio--tile { position: absolute; left: 0; top: 0; width: 390px; min-height: 510px; border: 0; border-radius: 0; transform: scale(0.4); transform-origin: 0 0; pointer-events: none; }
/* Die Kachel zeigt, worin sich die Layouts unterscheiden: Bild und Name. Text, Angaben und Links waeren hier nur Gewimmel. */
.bio--tile .bio__text, .bio--tile .bio__facts, .bio--tile .bio__links { display: none; }
.bio--tile .bio__in { min-height: 510px; align-content: start; }
.laytile__name { font-size: 0.875rem; color: var(--muted); }
.laytile input:checked ~ .laytile__view { outline-color: var(--accent); }
.laytile input:checked ~ .laytile__name { color: var(--ink); font-weight: 600; }
.laytile input:focus-visible ~ .laytile__view { outline-color: var(--ink); }
.deals--mini { grid-template-columns: 1fr 1fr; gap: 10px; }
.deals--mini .deal { border-radius: var(--radius-m); }
.deals--mini .deal__body { padding: 10px 12px 12px; }
.deals--mini .deal__title { font-size: 0.9375rem; }
.deals--mini .deal__price { font-size: 0.9375rem; }

.share { display: grid; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow); }
.share__state { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.share__state .icon { color: var(--accent); }
.share__state--draft { font-weight: 400; color: var(--muted); }
.share__url { font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.share__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.avatarpick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.avatarpick label { cursor: pointer; }
.avatarpick label:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.handle { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--field); border-radius: var(--radius-s); padding-left: 14px; }
.handle span { color: var(--muted); white-space: nowrap; }
.handle .input { border: 0; background: none; padding-left: 2px; font-weight: 600; }
.handle:focus-within { border-color: var(--accent); outline: 3px solid var(--accent); outline-offset: 0; }
.handle .input:focus-visible { outline: none; }

.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.swatch { position: relative; display: grid; gap: 6px; cursor: pointer; }
.swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.swatch__chip { display: flex; align-items: flex-end; gap: 4px; height: 58px; padding: 8px; border-radius: var(--radius-s); background: linear-gradient(115deg, var(--p-bg) 0 62%, var(--p-accent) 62%); border: 1px solid var(--p-line); outline: 3px solid transparent; outline-offset: 2px; }
.swatch__chip i { display: block; height: 14px; border-radius: 99px; }
.swatch__chip i:nth-child(1) { width: 34%; background: var(--p-ink); }
.swatch__chip i:nth-child(2) { display: none; width: 22%; background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line); }
.swatch__chip i:nth-child(3) { display: none; }
.swatch__name { font-size: 0.8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.swatch input:checked ~ .swatch__chip { outline-color: var(--accent); }
.swatch input:checked ~ .swatch__name { color: var(--ink); font-weight: 600; }
.swatch input:focus-visible ~ .swatch__chip { outline-color: var(--ink); }

.linkrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 44px; gap: 6px; margin-bottom: 8px; }
.linkrow__del { border: 0; background: none; color: var(--muted); border-radius: 50%; display: grid; place-items: center; }
.linkrow__del:hover { background: var(--line); color: var(--ink); }

.srows { display: grid; gap: 8px; margin-top: 16px; }
.srow { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.srow img { width: 56px; height: 70px; object-fit: cover; border-radius: 10px; background: #dfeae3; }
.srow__main { display: grid; gap: 2px; min-width: 0; }
.srow__main strong { overflow-wrap: anywhere; }
.srow__main span { color: var(--muted); font-size: 0.9375rem; }

/* ---------- Angebot ---------- */

.covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pricefield { position: relative; max-width: 220px; }
.pricefield .input { padding-right: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pricefield span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.switch { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; }
.switch input { appearance: none; width: 48px; height: 28px; border-radius: 99px; background: var(--field); position: relative; flex: none; transition: background-color 0.15s; cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.switch input:checked { background: var(--fill); }
.switch input:checked::after { transform: translateX(20px); }
.offer__rule { padding: 12px 14px; border-radius: var(--radius-s); background: var(--tint); color: var(--accent-deep); font-size: 0.9375rem; }
.linkbtn--danger { color: var(--danger); justify-self: center; }
.form__error { margin: 0; }

/* ---------- Angaben zur Person, Regeln, Kamera-Dialog, Benachrichtigungen, Medien im Chat ---------- */

.bio__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.bio__facts li { padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--p-muted) 38%, transparent); border-radius: 99px; color: var(--p-muted); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
[data-layout="fade"] .bio__facts, [data-layout="arch"] .bio__facts, [data-layout="circle"] .bio__facts { justify-content: center; }

.factgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.factgrid label { display: grid; gap: 4px; font-size: 0.875rem; color: var(--muted); }
.factgrid .input { color: var(--ink); }

.rules { display: grid; gap: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow); }
.rules__title { font-weight: 700; }
.rules ul { display: grid; gap: 8px; }
.rules li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; }
.rules li .icon { color: var(--accent); margin-top: 2px; }
.rules__ok { display: flex; gap: 12px; align-items: flex-start; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 600; cursor: pointer; }
.rules__ok input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }

.camdialog { width: min(560px, 100vw); max-width: none; max-height: 100dvh; margin: auto; padding: 0; background: var(--bg); border-radius: var(--radius-l); overflow-y: auto; }
.camdialog__body { padding: 56px var(--gutter) var(--gutter); }
.camdialog__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.feetpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.feetpick__slot { display: grid; gap: 8px; justify-items: start; }
.feetpick__slot img, .feetpick__empty { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); background: #dfeae3; }
.feetpick__empty { display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--field); background: none; }
.panel__note { font-size: 0.875rem; }

.notifyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.notifyrow div { display: grid; gap: 2px; min-width: 0; }
.notifyrow span { color: var(--muted); font-size: 0.875rem; }
.notifyrow__mail { flex-direction: row-reverse; justify-content: space-between; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 600; }

.pushbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; padding: 12px 14px; border-radius: var(--radius-s); background: var(--surface); border: 1px solid var(--line); font-size: 0.9375rem; }

/* Bild oder Video in einer Nachricht. Empfangenes liegt hinter einem Schleier, bis man es antippt. */
.chat__msg.has-media { padding: 6px 6px 8px; }
.chat__msg.has-media p, .chat__msg.has-media time { padding-inline: 8px; }
.chat__msg.has-media p { margin-top: 6px; }
.chat__media { display: block; width: 240px; max-width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; background: var(--line); }
video.chat__media { object-fit: contain; background: #000; }
.chat__veil { display: grid; place-items: center; align-content: center; gap: 6px; width: 240px; max-width: 100%; aspect-ratio: 4 / 3; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--ink); font-weight: 600; text-align: center; }
.chat__veil small { font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
/* Eigene Bilder und Videos stehen auf ruhiger Flaeche, nicht in einer dicken Akzent-Platte. */
.chat__msg.has-media.is-mine { background: var(--surface); border-color: var(--line); color: var(--ink); }
.chat__msg.has-media.is-mine time { color: var(--muted); opacity: 1; }
.chat__veil .icon { width: 28px; height: 28px; color: var(--accent); }
.chat__form { grid-template-columns: auto 1fr auto; }
.chat__attach { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--field); background: var(--surface); color: var(--ink); cursor: pointer; }
.chat__attach:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.chat__attach.is-busy { opacity: 0.5; pointer-events: none; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
.chat__hint { margin-top: -6px; padding-bottom: 8px; text-align: center; font-size: 0.8125rem; color: var(--muted); }

/* ---------- Feinschliff nach dem UX-Review ---------- */
.ochip { padding: 2px 8px; border-radius: 99px; font-size: 0.75rem; font-style: normal; font-weight: 600; white-space: nowrap; background: var(--line); color: var(--muted); }
.ochip--waiting { background: var(--fill); color: var(--on-fill); }
.ochip--unlocked { background: var(--tint); color: var(--accent-deep); }
.orow__top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow__top time { margin-left: auto; }
.chat__banner { display: grid; gap: 8px; }
.chat__banner .chat-saved, .chat__banner .pushbar { margin: 0; }
.chat__banner:not(:has(> :not([hidden]))) { display: none; }
.chat__copy { width: 44px; height: 44px; margin-left: auto; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.chat__copy:hover { background: var(--line); color: var(--ink); }
.chat__closed { display: grid; gap: 10px; justify-items: center; }
.chat__msg { scroll-margin-top: calc(var(--topbar) + 84px); }
.sheet__steps { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--p-bg); font-size: 0.9375rem; counter-reset: step; }
.sheet__steps li { display: flex; gap: 10px; counter-increment: step; }
.sheet__steps li::before { content: counter(step); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--p-accent); color: var(--p-on); font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.bio__chat { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 16px; border-radius: var(--radius-m); background: var(--p-accent); color: var(--p-on); font-weight: 600; }
[data-layout="poster"] .bio__chat, [data-layout="banner"] .bio__chat { margin-top: 12px; }
.bio__owner-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--p-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.share__steps { display: grid; gap: 4px; padding-left: 20px; list-style: decimal; color: var(--muted); font-size: 0.9375rem; }
.share__todo { padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.offer__remove { justify-self: center; }
.offer .input, .cardedit__form .input { scroll-margin-bottom: 170px; }
.notifyrow__mail small { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }

.series__scene { margin-top: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); font-size: 0.9375rem; }
.series__scene strong { font-weight: 600; }
.series__scene small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.8125rem; overflow-wrap: anywhere; }

/* ---------- Fortschritt einer Serie ---------- */
/* Der Balken bewegt sich auch zwischen zwei Bildern: ein Lichtstreifen laeuft durch, damit nichts wie eingefroren wirkt. */
.progress__bar { height: 10px; }
.progress__bar span { position: relative; overflow: hidden; }
.progress__bar.is-busy span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%); background-size: 220% 100%; animation: sheen 1.4s linear infinite; }
@keyframes sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.progress__text strong { color: var(--ink); }
.progress--detail { display: grid; gap: 10px; justify-items: start; margin: 16px 0 6px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow); }
.progress--detail .progress__bar { width: 100%; }
.progress--detail .progress__text { margin: 0; font-size: 1rem; }
.progress__now { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.progress__bg { color: var(--muted); font-size: 0.9375rem; }
.tile--working, .tile--queued { display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); font-size: 0.8125rem; }
.tile--queued { background: none; border: 1px dashed var(--field); }
.tile--queued b { font-size: 1.4rem; font-weight: 700; color: var(--field); }
.tile--working .spinner { width: 26px; height: 26px; border-width: 3px; }

/* ---------- NSFW-Schalter und 18+-Kennzeichnung ---------- */
.nsfw { display: grid; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.tag18 { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 0.75rem; font-style: normal; font-weight: 700; vertical-align: 0.08em; }
.deal__cover.is-veiled { filter: blur(6px) saturate(1.1); transform: scale(1.06); }
.deal__media { overflow: hidden; }
.deal__adult { position: absolute; inset: auto 12px 12px; display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 99px; background: color-mix(in srgb, var(--p-surface) 88%, transparent); color: var(--p-ink); font-size: 0.875rem; font-weight: 600; }
.deal__adult .tag18 { margin: 0 6px 0 0; background: var(--p-ink); color: var(--p-surface); }
.sheet__adult { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.sheet__adult input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--p-accent); }

@media (max-width: 719px) {
  .cardedit__preview { display: none; } /* mobil zeigen die Layout-Kacheln die Karte */
  .laytiles { grid-template-rows: repeat(2, auto); } /* zwei Reihen: sechs Layouts auf einen Blick, der Rest wischt nach */
  .linkrow { grid-template-columns: minmax(0, 1fr) 44px; }
  .linkrow input[name="linkUrl"] { grid-column: 1; grid-row: 2; }
  .linkrow__del { grid-row: 1; grid-column: 2; }
}

@media (min-width: 960px) {
  /* Oeffentliche Karte: Profil links stehend, Angebote rechts im Raster – statt Handyspalte auf leerer Flaeche.
     Randlose Bilder bekommen in der Spalte Ecken, weil es dort keinen Seitenrand gibt, an den sie stossen. */
  .bio:not(.bio--preview) > .bio__in:not(.bio__in--center) { --bleed: 0px; max-width: 1080px; grid-template-columns: 440px minmax(0, 1fr); column-gap: 64px; padding-top: 64px; }
  .bio:not(.bio--preview) .bio__side { position: sticky; top: 64px; }
  .bio:not(.bio--preview) .deals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bio:not(.bio--preview) .bio__section { margin-top: 0; }
  .bio:not(.bio--preview) .bio__owner { margin-top: 0; }
  .bio:not(.bio--preview)[data-layout="poster"] .bio__photo, .bio:not(.bio--preview)[data-layout="banner"] .bio__photo { border-radius: 28px; }
  .bio:not(.bio--preview)[data-layout="poster"] .bio__owner, .bio:not(.bio--preview)[data-layout="banner"] .bio__owner { position: static; border: 1px dashed var(--p-line); background: none; }
  .bio:not(.bio--preview)[data-layout="banner"] .bio__photo { aspect-ratio: 4 / 3; }
  .bio:not(.bio--preview)[data-layout="circle"] .bio__photo { width: 280px; }
  .bio:not(.bio--preview)[data-layout="split"] .bio__hero { grid-template-columns: 1fr; }
  .bio:not(.bio--preview)[data-layout="split"] .bio__photo { aspect-ratio: 4 / 5; }
  .bio:not(.bio--preview)[data-layout="fade"] .bio__hero { min-height: 360px; }
}

@media (min-width: 720px) {
  .sheet { margin: auto; border-radius: var(--radius-l); }
  .chat, .is-funnel .chat { min-height: calc(100dvh - var(--topbar) - 60px); }
  .chat__form, .is-funnel .chat__form { bottom: 0; }
  .cardedit { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
  .cardedit__preview { position: sticky; top: calc(var(--topbar) + 16px); order: 2; }
  .laytiles { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 156px); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .covers { grid-template-columns: repeat(4, 1fr); }
  .cardedit__offers { max-width: 632px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   UX-Liste (docs/ux-100-punkte.md): alles, was mit den 100 Punkten dazukam
   ============================================================ */

/* ---------- Allgemeines ---------- */

.qr { display: block; width: 100%; height: auto; border-radius: var(--radius-s); }
.toast.is-link { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.chips--column { flex-direction: column; align-items: stretch; }
.chips--column .chip span, .chips--column .chip-btn { width: 100%; white-space: normal; justify-content: flex-start; text-align: left; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; }
.chip-btn .icon { width: 1em; height: 1em; }
.chip-btn--solid { border-style: solid; background: var(--surface); color: var(--ink); font-size: 1rem; padding: 10px 16px; }
.field__hint.is-good { color: var(--accent); font-weight: 600; }
.field__hint.is-bad { color: var(--danger); font-weight: 600; }
.empty--error { border-color: #f2d6a8; background: #fff9ee; }
.empty .linkbtn { min-height: 44px; }

/* Geruest beim Laden: die Seite steht sofort, die Flaechen fuellen sich. */
.skel { display: grid; gap: 16px; }
.skel__title { width: 46%; max-width: 240px; height: 30px; border-radius: 10px; }
.skel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skel__grid i { aspect-ratio: 4 / 5; border-radius: var(--radius-s); }
.skel__rows { display: grid; gap: 10px; }
.skel__rows i { height: 76px; border-radius: var(--radius-m); }
.skel__rows i.is-tall { height: 260px; }
.skel__title, .skel__grid i, .skel__rows i { display: block; background: linear-gradient(100deg, #dfeae3 30%, #f4f9f5 50%, #dfeae3 70%); background-size: 300% 100%; animation: shimmer 1.6s linear infinite; }

/* Ein Blatt ueber der Seite: unten angeschlagen, ab Tablet mittig. */
.pane { width: 100%; max-width: 520px; margin: auto auto 0; padding: 0; background: var(--surface); color: var(--ink); border-radius: var(--radius-l) var(--radius-l) 0 0; max-height: 92dvh; overflow-y: auto; }
.pane__in { display: grid; gap: 14px; padding: 24px var(--gutter) calc(22px + env(safe-area-inset-bottom)); }
.pane__in > .form { gap: 14px; }
.pane__title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.pane__text { color: var(--muted); }
.pane__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pane__actions .btn { flex: 1 1 auto; }
.pane--center .pane__in { justify-items: center; text-align: center; }
.pane--center .pane__actions { justify-content: center; }
.pane__badge { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--accent); }
.pane__badge .icon { width: 28px; height: 28px; }
.pane__qr { width: 168px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); }
.pane--center .pushbar { width: 100%; text-align: left; margin: 0; }
.pane--image { max-width: 720px; background: var(--night); color: #fff; }
.pane--image .pane__in { padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); }
.pane__image { width: 100%; max-height: 74dvh; object-fit: contain; border-radius: var(--radius-s); }
.pane--image .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.pane--preview { max-width: 472px; height: 94dvh; max-height: 94dvh; }
.pane--preview .pane__in { padding: 0 0 calc(76px + env(safe-area-inset-bottom)); gap: 0; }
.bio--full { border: 0; border-radius: 0; min-height: 60dvh; }
.pane__closebar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 3; box-shadow: 0 10px 28px rgba(20, 35, 31, 0.3); }

/* ---------- Fusszeile, Kopf, Startseite ---------- */

.footer__in { flex-wrap: wrap; }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.footer__links a:hover { color: var(--accent); }
.topright .topcta.is-always { display: inline-flex; }
.is-landing .bottomnav { display: none; }
body.is-landing { padding-bottom: 0; }
.is-landing .sticky-cta { bottom: calc(18px + env(safe-area-inset-bottom)); }

.proof { display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 8fr); align-items: center; gap: 10px; }
.proof figure { display: grid; gap: 8px; }
.proof img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-s); background: #dfeae3; }
.proof__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.proof figcaption { font-weight: 700; font-size: 0.9375rem; }
.proof__arrow { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--fill); color: var(--on-fill); }
.proof__note { margin-top: 10px; color: var(--muted); font-size: 0.875rem; }

.sell { display: grid; gap: 28px; }
.sell__text { display: grid; gap: 14px; justify-items: start; align-content: start; }
.sell__points { display: grid; gap: 8px; }
.sell__points li { display: flex; gap: 10px; align-items: flex-start; }
.sell__points .icon { color: var(--accent); margin-top: 3px; }
.sell__card { display: grid; gap: 8px; max-width: 360px; width: 100%; justify-self: center; }
.sell__card figcaption { color: var(--muted); font-size: 0.875rem; text-align: center; }
.sell__card .bio__name { font-size: 2rem; }

.looktiles__title { margin-top: 36px; font-size: 1.1rem; font-weight: 700; }
.looktiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.looktile { position: relative; display: block; border-radius: var(--radius-s); overflow: hidden; background: var(--night); }
.looktile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.looktile span { position: absolute; inset: auto 0 0 0; padding: 22px 8px 7px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); color: #fff; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.looktile small { display: block; font-weight: 400; font-size: 0.7rem; opacity: 0.85; }
.looktiles__all { margin-top: 16px; }
.shows[data-rest] { margin-top: 40px; }

.faq { display: grid; gap: 8px; margin-top: 16px; }
.faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; font-weight: 600; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 4px 4px 0; flex: none; }
.faq__item[open] summary::after { transform: rotate(-135deg); margin: 4px 4px 0 0; }
.faq__item p { padding: 0 16px 16px; color: var(--muted); max-width: 44em; }
.faq__more { margin-top: 14px; }

.prose { display: grid; gap: 14px; align-content: start; }
.prose h2 { margin-top: 14px; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.prose > p { max-width: 40em; }
.prose__list { display: grid; gap: 8px; }
.prose__list li { display: flex; gap: 10px; align-items: flex-start; }
.prose__list .icon { color: var(--accent); margin-top: 3px; }
.prose__steps { display: grid; gap: 8px; padding-left: 22px; list-style: decimal; }
.helplinks { display: grid; gap: 2px; }
.helplinks .link { min-height: 44px; overflow-wrap: anywhere; }

/* ---------- Kamera und Anmeldung ---------- */

.inapp { display: grid; gap: 12px; justify-items: start; text-align: left; padding: 16px; background: #fff4e5; border: 1px solid #f2d6a8; border-radius: var(--radius-m); }
.inapp--compact { margin-bottom: 14px; }
.inapp__title { font-weight: 700; font-size: 1.0625rem; }
.inapp__steps { display: grid; gap: 4px; padding-left: 22px; list-style: decimal; }
.cam__sketch { width: 200px; max-width: 70%; color: var(--accent); }
.cam__tips { display: grid; gap: 8px; text-align: left; }
.cam__tips li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.cam__tips .icon { color: var(--accent); margin-top: 3px; }
.cam__ok { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px 16px; border: 1px solid var(--field); border-radius: var(--radius-m); font-weight: 600; cursor: pointer; }
.cam__ok input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.cam__qr { display: grid; gap: 8px; justify-items: center; }
.cam__qr .qr { width: 168px; border: 1px solid var(--line); }
.cam__qr p { color: var(--muted); font-size: 0.875rem; }
.cam__msgactions { display: grid; gap: 4px; justify-items: center; }
.cam__warn { display: grid; gap: 6px; padding: 12px 14px; background: #fff4e5; border: 1px solid #f2d6a8; border-radius: var(--radius-s); font-size: 0.9375rem; }
.cam__warn p { display: flex; gap: 8px; align-items: flex-start; }
.cam__warn .icon { color: #8a5a00; margin-top: 2px; }
.cam__checklist { text-align: center; color: var(--muted); font-size: 0.9375rem; }
.cam__count { font-size: 9rem; }
.cam__stage.is-flash::after { content: ""; position: absolute; inset: 0; border: 10px solid #fff; border-radius: inherit; pointer-events: none; animation: camflash 0.5s ease-out forwards; }
@keyframes camflash { from { opacity: 0.95; } to { opacity: 0; } }

.signin__suggest { padding: 10px 14px; border-radius: var(--radius-s); background: var(--tint); color: var(--accent-deep); }
.signin__suggest .linkbtn { min-height: 0; padding: 0; overflow-wrap: anywhere; }
.signin__code { width: 100%; display: grid; gap: 8px; justify-items: center; }
.signin__digits { display: flex; gap: 8px; }
.signin__digits b { width: 52px; height: 64px; display: grid; place-items: center; border-radius: var(--radius-s); background: var(--surface); border: 1px solid var(--field); font-size: 2rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.signin__codewhy { font-size: 0.8125rem; }
.signin .btn .spinner { border-color: rgba(16, 35, 29, 0.25); border-top-color: var(--on-fill); }

/* ---------- Serien ---------- */

.thumb-more { position: relative; display: block; }
.thumb-more b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--radius-s); background: rgba(16, 35, 29, 0.62); color: #fff; font-size: 1.2rem; font-weight: 700; }
.meanwhile { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; padding: 14px 16px; background: var(--tint); color: var(--accent-deep); border-radius: var(--radius-m); }
.meanwhile > .icon:first-child { width: 28px; height: 28px; }
.meanwhile span { flex: 1; display: grid; font-size: 0.9375rem; }
.nextsteps { display: grid; gap: 10px; margin-top: 28px; }
.nextstep { display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow); text-align: left; }
.nextstep:hover { border-color: var(--accent); }
.nextstep .icon { grid-row: span 2; width: 26px; height: 26px; color: var(--accent); }
.nextstep strong { font-size: 1.0625rem; }
.nextstep span { color: var(--muted); font-size: 0.9375rem; }
.nextsteps__more { margin-top: 14px; }
.lightbox__bar .iconbtn { width: 44px; height: 44px; }

/* ---------- Abo und Konto ---------- */

.plan-card__fine { color: var(--muted); font-size: 0.875rem; }
.plan-card--pack { background: color-mix(in srgb, var(--pop) 22%, var(--surface)); }
.plan-manage { display: grid; gap: 4px; justify-items: start; margin-top: 16px; }
.paywall__own { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 16px; }
.paywall__own img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: #dfeae3; }
.account__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.snips { display: grid; gap: 12px; width: 100%; justify-items: start; }
.snips__row { display: grid; gap: 6px; width: 100%; }
.panel .share__url { color: var(--ink); }

/* ---------- Karte im Editor ---------- */

.form__submit--static { position: static; margin-inline: 0; padding: 0; background: none; }
.savestate { min-height: 1.4em; text-align: center; color: var(--muted); font-size: 0.875rem; }
.share__stats { color: var(--muted); font-size: 0.9375rem; }
.share__count { font-weight: 700; }
.share__steps--check { list-style: none; padding-left: 0; gap: 0; }
.share__steps--check button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: none; text-align: left; color: var(--ink); }
.share__steps--check i { width: 20px; height: 20px; flex: none; border: 2px solid var(--field); border-radius: 50%; }
.share__steps--check .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--fill); color: var(--on-fill); }
.share__steps--check .is-done span { color: var(--muted); text-decoration: line-through; }
.share__steps--check li:not(.is-done) span { text-decoration: underline; text-underline-offset: 3px; }
.customrow { display: grid; gap: 8px; }
.fab { position: fixed; right: var(--gutter); bottom: calc(var(--bottomnav) + 16px + env(safe-area-inset-bottom)); z-index: 18; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 600; box-shadow: 0 10px 28px rgba(20, 35, 31, 0.3); }
.offer__preview { max-width: 360px; }
.offer__preview .bio__in { padding: 16px; }
.offer__preview .deal__strip img { filter: blur(14px) saturate(1.15); transform: scale(1.4); }

/* ---------- Oeffentliche Karte ---------- */

.bio--brand { --p-bg: var(--bg); --p-surface: var(--surface); --p-ink: var(--ink); --p-muted: var(--muted); --p-line: var(--line); --p-accent: var(--fill); --p-on: var(--on-fill); }
.bio--brand .logo { margin-bottom: 8px; }
.bio--brand .bio__owner-link { color: var(--accent); }
.bio__trust { display: grid; gap: 4px; color: var(--p-muted); font-size: 0.9375rem; }
.bio__trust li { display: flex; align-items: center; gap: 8px; }
.bio__trust .icon { width: 18px; height: 18px; color: var(--p-accent); }
[data-layout="fade"] .bio__trust, [data-layout="arch"] .bio__trust, [data-layout="circle"] .bio__trust { justify-items: center; }
.bio__pay { display: flex; align-items: center; gap: 8px; color: var(--p-muted); font-size: 0.9375rem; }
.bio__pay .icon { color: var(--p-accent); }
.bio__btn--quiet { background: none; color: var(--p-ink); box-shadow: inset 0 0 0 1px var(--p-muted); }
.bio__follow { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--p-line); border-radius: var(--radius-m); background: color-mix(in srgb, var(--p-surface) 70%, transparent); }
.bio__follow label { font-weight: 600; }
.bio__follow small, .bio__followed { color: var(--p-muted); font-size: 0.875rem; }
.bio__followed { display: flex; align-items: center; gap: 8px; }
.bio__followrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.bio__followrow .input { background: var(--p-bg); border-color: color-mix(in srgb, var(--p-muted) 55%, var(--p-surface)); color: var(--p-ink); }
.bio__followrow .bio__btn { width: auto; min-height: 48px; }
.bio__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
.bio__foot button { border: 0; background: none; padding: 0; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.deal__ai { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 10px; border: 1px solid var(--p-line); border-radius: 99px; background: none; color: var(--p-muted); font-size: 0.8125rem; font-weight: 600; }
.deal__ai .icon { width: 14px; height: 14px; color: var(--p-accent); }
button.deal__strip { width: 100%; padding: 0; border: 0; background: none; }
.deal__strip span { display: block; }
.deal__strip span .icon { position: absolute; inset: 0; margin: auto; z-index: 1; width: 20px; height: 20px; color: var(--p-ink); opacity: 0.75; }
.deal--custom { border-style: dashed; }
.sheet fieldset.sheet__field legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.sheet .chip span { background: var(--p-bg); border-color: color-mix(in srgb, var(--p-muted) 55%, var(--p-surface)); color: var(--p-ink); font-weight: 400; }
.sheet .chip input:checked + span { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on); font-weight: 600; }
.sheet__rule a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Anfragen und Chat ---------- */

.ochip--paid { background: var(--pop); color: var(--ink); }
.pushbar p { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; }
.pushbar p .icon { color: var(--accent); flex: none; }
.pushbar__actions { display: flex; align-items: center; gap: 4px 14px; }

/* Der Chat ist eine Spalte in der Hoehe des sichtbaren Bereichs. Kopf, Status und Eingabe stehen fest; gescrollt wird
   nur die Nachrichtenliste. --vvh fuehrt chatbox.js nach, wenn die Bildschirmtastatur den sichtbaren Bereich verkleinert. */
body.is-chatview { padding-bottom: 0; overflow: hidden; }
.is-chatview .bottomnav, .is-chatview .footer { display: none; }
.is-chatview .page--chat { padding-top: 6px; padding-bottom: 0; }
.is-chatview .chat, .is-chatview.is-funnel .chat { height: calc(var(--vvh, 100dvh) - var(--topbar) - 6px); min-height: 0; gap: 8px; }
.is-chatview .chat__head { position: static; margin-top: 0; padding-block: 4px; }
.chat__status { display: grid; gap: 8px; }
.chat__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
.chat__scroll .chat__list { flex: 1 0 auto; }
.chat__foot { flex: none; }
.is-chatview .chat__form, .is-chatview.is-funnel .chat__form { position: static; margin-inline: 0; padding: 0 0 calc(8px + env(safe-area-inset-bottom)); }
.is-chatview .chat__hint { margin-top: 0; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.is-chatview .chat__form + .chat__hint { margin-top: -4px; }
.chat__hint a { text-decoration: underline; text-underline-offset: 3px; }

.chat__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; font-size: 0.78rem; color: var(--muted); }
.chat__steps li { display: flex; align-items: center; gap: 6px; min-width: 0; padding-bottom: 6px; border-bottom: 3px solid var(--line); line-height: 1.15; overflow-wrap: anywhere; }
.chat__steps span { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--line); font-size: 0.7rem; font-weight: 700; }
.chat__steps .icon { width: 12px; height: 12px; }
.chat__steps .is-now { color: var(--ink); font-weight: 700; border-color: var(--accent); }
.chat__steps .is-now span, .chat__steps .is-done span { background: var(--fill); color: var(--on-fill); }
.chat__steps .is-done { border-color: var(--fill); }
.chat__paid { justify-self: center; }
.chat__attachrow { display: grid; gap: 6px; font-size: 0.9375rem; font-weight: 600; }
.chat__attachrow .input { width: 100%; min-height: 44px; }
.chat__final { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); }
.chat__reply { color: var(--muted); font-size: 0.8125rem; }
.chat__menu { margin-left: auto; }
.chat__menu .menu__list button { display: flex; align-items: center; gap: 10px; }
.chat__menu .menu__list .icon { color: var(--muted); }
.chat__zoom { display: block; padding: 0; border: 0; background: none; border-radius: 14px; }
.chat__seen { align-self: flex-end; font-size: 0.75rem; color: var(--muted); margin-top: -2px; }
.chat__waiting { align-self: center; max-width: 30em; margin-top: 8px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--surface); border: 1px dashed var(--field); color: var(--muted); font-size: 0.875rem; text-align: center; }
.chat__upload { min-width: 220px; display: grid; gap: 6px; }
.chat__upload .progress__bar { background: rgba(16, 35, 29, 0.18); }
.chat__upload .progress__bar span { background: var(--on-fill); }
.chat__upload .linkbtn { min-height: 32px; padding: 0; color: inherit; justify-self: start; }
.chat__images button { padding: 0; border: 0; background: none; border-radius: 10px; }
.chat__unlocked .btn { justify-self: start; }
.chat__keep { color: var(--muted); font-size: 0.8125rem; }
.chat__more { display: grid; gap: 8px; }
.chat__more-title { font-weight: 700; }
.chat__more-row { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chat__more-row a { display: grid; gap: 2px; font-size: 0.875rem; }
.chat__more-row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--line); }
.chat__more-row img.is-veiled { filter: blur(6px); }
.chat__more-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__snips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.chat__snips .chip-btn { min-height: 36px; }

@media (max-width: 719px) {
  /* Fusszeile auch am Handy, wo sie gebraucht wird: Startseite, Preise, Anmeldung, Textseiten, Konto. */
  .has-footer .footer { display: block; margin-top: 40px; }
  .has-footer .footer__in { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .is-landing.has-footer .footer__in { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* Platz fuer die fixierte Leiste */
  /* Looks als Raster statt als seitlicher Streifen: alle auf einen Blick, nichts liegt versteckt rechts. */
  .looks-scroller { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; gap: 6px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .looks-scroller .look-card__name { padding: 20px 6px 6px; font-size: 0.75rem; }
  .looks-scroller .look-card__name small { font-size: 0.66rem; }
  .looks-scroller .look-card input:checked + .look-card__body::after { top: 5px; right: 5px; width: 22px; height: 22px; }
  .proof { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .proof__arrow { display: none; }
}

@media (min-width: 720px) {
  .pane { margin: auto; border-radius: var(--radius-l); }
  .pane__actions .btn { flex: 0 1 auto; }
  .fab { display: none; } /* am Desktop steht die Vorschau neben dem Formular */
  .sell { grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: 56px; }
  .looktiles { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .nextsteps { grid-template-columns: repeat(3, 1fr); }
  .skel__grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .proof { max-width: 860px; gap: 20px; }
  .proof__grid { grid-template-columns: repeat(4, 1fr); }
  .is-chatview .chat, .is-chatview.is-funnel .chat { height: calc(var(--vvh, 100dvh) - var(--topbar) - 16px); }
}

/* ---------- Startseite: Nachtbild im Titel (Inhaber 13.10.2026) ----------
   Das Titelbild ist ein dunkles Foto (Parkbank in der Morgendaemmerung). Der Titelbereich steht deshalb auf dem Dunkelton
   mit heller Schrift; der Rest der Seite bleibt hell. Die Frau sitzt rechts im Bild, links ist Platz fuer die Ueberschrift. */
.hero { background: var(--night); color: #f4f7f2; display: flex; flex-direction: column; }
.hero__img { order: -1; aspect-ratio: 4 / 5; object-position: 70% 50%; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
.hero__body { margin-top: -84px; padding-top: 0; }
.hero__lead { color: rgba(244, 247, 242, 0.84); }
.hero__sub { color: rgba(244, 247, 242, 0.72); }
.hero .trust { color: rgba(244, 247, 242, 0.84); padding-top: 16px; border-top: 1px solid #7d8a85; } /* Linie in mittlerem Grau, kein Weiss */
.hero .trust .icon { color: var(--fill); }
.hero .btn--lg { display: flex; width: 100%; }
.how { display: grid; gap: 22px; }
.how__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 28%; border-radius: var(--radius-m); background: var(--night); }
@media (min-width: 720px) {
  .hero { display: grid; background: var(--night); }
  .hero__img { order: 0; inset: 0; width: 100%; aspect-ratio: auto; object-position: 60% 50%; -webkit-mask-image: none; mask-image: none; }
  .hero::after { background: linear-gradient(90deg, rgba(16, 35, 29, 0.9) 0%, rgba(16, 35, 29, 0.64) 38%, rgba(16, 35, 29, 0) 62%); }
  .hero__body { margin-top: 0; padding-top: 48px; }
  .hero .btn--lg { display: inline-flex; width: auto; }
  .how { grid-template-columns: 340px minmax(0, 1fr); gap: 48px; align-items: center; }
  .how__img { aspect-ratio: 4 / 5; }
  .how .steps { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Typografie und Feinschliff (Art Director, 13.10.2026) ----------
   Eine Schrift, drei Staerken (400, 500, 700). Ueberschriften schmaler gesetzt, normale Gross-/Kleinschreibung, keine
   Versalien. Kleinere Radien stehen oben in :root. Nicht tun: zweite Schrift, Neon, Verlaeufe in der Schrift. */
.hero__title { font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem); font-weight: 700; font-stretch: 85%; letter-spacing: -0.015em; line-height: 1.04; }
.hero__lead { font-size: 1.0625rem; line-height: 1.45; }
.section__title, .cta-band__title { font-size: 1.5rem; font-weight: 700; font-stretch: 88%; letter-spacing: -0.01em; line-height: 1.15; }
.page__title, .signin__title, .cam__title, .pane__title, .sheet__title, .show__name, .chat__name { font-weight: 700; font-stretch: 88%; letter-spacing: -0.01em; }
.logo { font-weight: 700; font-stretch: 85%; letter-spacing: -0.02em; }
.btn { font-weight: 700; }
.hero__sub, .cta-band__note, .proof__note { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; }
.hero .trust { font-size: 0.8125rem; font-weight: 500; }
.sticky-cta { border-radius: 10px; }
/* Schritte: grosse schmale Ziffern "01" bis "04" statt Zahl im Kreis, je Schritt eine feine Linie darueber. */
.steps { gap: 16px; }
.step { padding-top: 16px; border-top: 1px solid var(--line); }
.step__num { width: 40px; height: auto; background: none; border-radius: 0; display: block; font: 700 1.75rem/1 var(--font); font-stretch: 75%; color: var(--accent); font-variant-numeric: tabular-nums; }
/* Schlussband auf dem Dunkelton statt Mint-Gelb-Verlauf: nimmt den Titelbereich wieder auf. */
.cta-band { background: var(--night); color: #f4f7f2; }
.cta-band__note { color: rgba(244, 247, 242, 0.72); }
.section { margin-top: 56px; }
.section--ruled { padding-top: 48px; }
@media (min-width: 720px) {
  .hero__title { font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem); letter-spacing: -0.02em; line-height: 1.02; }
  .logo { font-size: 2rem; }
}
@media (min-width: 900px) {
  .section__title, .cta-band__title { font-size: 1.875rem; }
}

/* Erklaerfenster "Warum muss mein Gesicht drauf sein?" */
.cam__why { margin-top: -6px; }
.why { display: grid; gap: 16px; }
.why h3 { font-size: 1rem; font-weight: 700; margin-bottom: 2px; }
.why p { color: var(--muted); }

/* Beispiele (nur angemeldet) */
.examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 18px 0 12px; }
.examples__item { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; background: var(--surface); aspect-ratio: 4 / 5; cursor: zoom-in; }
.examples__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.examples__note { color: var(--muted); font-size: 0.875rem; margin-bottom: 18px; }
@media (min-width: 720px) { .examples { grid-template-columns: repeat(3, 1fr); gap: 12px; } }

/* ---------- Startseite nach der Durchsicht (UX-Artdirector und Werbetexter, 13.10.2026) ----------
   Knoepfe: Mint nur auf dunklem Grund, Dunkelgruen auf hellem. Vorher war der Hauptknopf auf Hell blass (1,8:1). */
.btn--primary, .btn--dark { background: var(--night); color: #f4f7f2; }
.btn--primary:hover, .btn--dark:hover { background: #1d4f41; }
.hero .btn--primary, .cta-band .btn--primary, .pane--image .btn--primary { background: var(--fill); color: var(--on-fill); }
.hero .btn--primary:hover, .cta-band .btn--primary:hover, .pane--image .btn--primary:hover { background: var(--fill-deep); }
.toplink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
.toplang { height: 44px; padding: 0 6px; border: 1px solid var(--field); border-radius: var(--radius-s); background: transparent; color: inherit; font: inherit; font-weight: 600; }
/* Nie zwei gleiche Aufrufe zugleich (home.js setzt die Klasse, solange ein Hauptknopf im Bild ist). */
.cta-in-view .sticky-cta, .cta-in-view .topright .topcta { display: none; }
main:has(.sticky-cta) { padding-bottom: 0; }
.is-landing .footer { margin-top: 48px; }

/* Titel */
.hero picture { display: contents; }
.hero__lead strong { color: #fff; font-weight: 700; }
.hero__private { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.875rem; font-weight: 600; }
.hero__private .icon { width: 18px; height: 18px; color: var(--fill); }
.hero .btn--lg { margin-top: 10px; }
.hero__free { margin-top: 12px; font-size: 0.9375rem; font-weight: 700; color: #fff; }
.hero__sub { margin-top: 2px; }
.hero .trust { margin-top: 18px; }
@media (max-width: 719px) {
  /* randlos statt Karte: das Nachtbild traegt die ganze Breite */
  .hero { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .hero__img { aspect-ratio: 1 / 1; object-position: 50% 50%; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
  .hero__body { margin-top: -72px; padding-inline: 22px; }
  .cta-band .btn--lg { display: flex; width: 100%; }
}
@media (min-width: 720px) {
  .hero__title { font-size: clamp(2.125rem, 1.5rem + 1.8vw, 2.75rem); }
  .hero__lead { font-size: 1.125rem; max-width: 26em; }
  .hero__body { max-width: 640px; }
}

/* Gliederung nur ueber Abstand, keine Linien, die uebers Raster hinauslaufen */
.section--ruled { border-top: 0; padding-top: 0; }
@media (min-width: 720px) { .section { margin-top: 72px; } }

/* Vorher-Nachher: das Ergebnis ist gross, der Eingang klein */
.proof { grid-template-columns: 1fr; align-items: start; gap: 12px; margin-top: 18px; max-width: none; }
.proof__before { grid-template-columns: 88px 1fr; align-items: center; gap: 12px; }
.proof__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.proof__arrow { display: none; }
@media (min-width: 720px) {
  .proof { grid-template-columns: 220px auto minmax(0, 1fr); gap: 24px; max-width: none; }
  .proof__before { grid-template-columns: 1fr; gap: 8px; }
  .proof__arrow { display: grid; margin-top: 120px; }
  .proof__grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}

/* Schritte: Ueberschrift steht vor dem Bild; der Ausschnitt endet ueber den Fuessen */
.how { margin-top: 18px; }
.how__img { aspect-ratio: 3 / 2; object-position: 50% 30%; }
@media (min-width: 720px) {
  .how { align-items: start; }
  .how__img { aspect-ratio: 1 / 1; object-position: 50% 15%; }
}

/* Sedcard-Abschnitt: Text oben, Karte kurz genug, dass die Angebote mit Preis gleich zu sehen sind */
.sell__card .bio__photo { aspect-ratio: 1 / 1; max-height: 260px; }
.sell__card .bio__name { font-size: 1.5rem; }
.sell__card .deal__body { display: grid; gap: 4px; justify-items: start; }
.sell__card .deal__meta { color: var(--muted); font-size: 0.8125rem; }
.sell__card .deal__price { margin-top: 4px; padding: 4px 10px; border-radius: 99px; background: var(--night); color: #f4f7f2; font-size: 0.9375rem; }
@media (min-width: 720px) {
  .sell { align-items: start; }
  .sell__text { padding-top: 24px; position: sticky; top: 104px; }
}

/* Fragen: am Desktop zweispaltig statt 1100 px breiter Zeilen */
.faqwrap { display: grid; gap: 18px; }
.faqwrap .faq { margin-top: 0; }
@media (min-width: 900px) {
  .faqwrap { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; }
  .faqwrap .faq { max-width: 720px; }
}

/* Schlussband mit Nachtbild */
.cta-band--photo { position: relative; overflow: hidden; }
.cta-band--photo .hero__sub { color: rgba(244, 247, 242, 0.72); }
.cta-band__img { display: none; }
@media (min-width: 900px) {
  .cta-band--photo { justify-items: start; text-align: left; padding: 40px 48px; }
  .cta-band--photo > * { position: relative; z-index: 1; }
  .cta-band--photo .cta-band__img { display: block; position: absolute; z-index: 0; inset: 0 0 0 auto; width: 46%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
}

/* ---------- Startseite: Verdienen zuerst, Beispiel-Sedcard als Handy (Inhaber 13.10.2026) ----------
   Die Karte ist die echte Komponente im Layout "poster" mit der Palette "forest". Dunkles Geraet auf getoenter Buehne,
   leicht gedreht; darueber eine Benachrichtigung "Neue Anfrage" mit Preis. Keine erfundenen Verdienstzahlen. */
.sell--stage { padding: 28px 20px 30px; border-radius: var(--radius-l); background: var(--tint); gap: 34px; }
.mock { position: relative; justify-self: center; width: min(300px, 78vw); display: grid; gap: 40px; }
.mock__phone { padding: 9px; border-radius: 40px; background: #0a1512; box-shadow: 0 0 0 1px #2c423a, 0 34px 60px -20px rgba(16, 35, 29, 0.6); transform: rotate(-2.5deg); }
.mock__phone .bio--preview { border: 0; border-radius: 31px; }
.mock .bio__in { padding-bottom: 18px; gap: 14px; }
.mock .bio__photo { aspect-ratio: 1 / 1; }
.mock .bio__name { font-size: 2.1rem; }
.mock .bio__text { font-size: 0.9375rem; }
.mock .deal__body { display: grid; gap: 3px; justify-items: start; padding: 10px 10px 12px; }
.mock .deal__title { font-size: 0.875rem; }
.mock .deal__meta { color: var(--p-muted); font-size: 0.75rem; }
.mock .deal__price { margin-top: 5px; padding: 4px 11px; border-radius: 99px; background: var(--p-accent); color: var(--p-on); font-size: 0.9375rem; font-weight: 800; }
.mock__note, .mock__link { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: #fff; color: var(--ink); font-size: 0.8125rem; line-height: 1.3; box-shadow: 0 16px 30px -12px rgba(16, 35, 29, 0.5); }
.mock__note { top: -18px; right: -14px; transform: rotate(3deg); }
.mock__link { left: -14px; bottom: 33px; transform: rotate(-4deg); } /* an der Unterkante des Geraets: verdeckt keinen Preis */
.mock__note b, .mock__link b { display: block; font-size: 0.875rem; }
.mock__note .icon, .mock__link .icon { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--night); color: var(--fill); }
.mock__note em { font-style: normal; padding: 4px 10px; border-radius: 99px; background: var(--night); color: #f4f7f2; font-weight: 800; }
.mock figcaption { color: var(--muted); font-size: 0.8125rem; text-align: center; }
@media (min-width: 720px) {
  .sell--stage { grid-template-columns: minmax(0, 1fr) 380px; align-items: center; padding: 56px 64px; gap: 64px; }
  .sell--stage .sell__text { position: static; padding-top: 0; }
  .mock { width: 320px; }
  .mock__note { right: -40px; }
  .mock__link { left: -44px; }
  .section--first { margin-top: 32px; }
}
@media (max-width: 719px) { .section--first { margin-top: 28px; } }

/* ---------- Zweite Durchsicht, Artdirector (13.10.2026) ---------- */
/* Buehne und Handy: Text an der Oberkante, Geraet kuerzer, ein Winkel statt drei, der Preis als einziger gelber Punkt */
.mock__phone { position: relative; transform: rotate(-3deg); }
.mock__phone::before { content: ""; position: absolute; z-index: 3; top: 19px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 99px; background: #0a1512; }
.mock__note, .mock__link { transform: none; }
.mock__note em { background: var(--pop); color: var(--on-fill); }
.mock .bio__photo img { object-position: 50% 0; }
.mock .bio__name { font-size: 1.75rem; }
@media (max-width: 719px) {
  .sell--stage { gap: 56px; }
  .mock__note { right: -6px; }
  .mock__link { left: -6px; }
  .sell__text .btn--lg { display: flex; width: 100%; padding-inline: 16px; font-size: 0.9375rem; }
  .hero__img { transform: scale(1.22); transform-origin: 82% 22%; }
  .hero__lead { font-size: 1rem; }
}
@media (min-width: 720px) {
  .sell--stage { align-items: start; padding: 48px 64px; }
  .sell--stage .sell__text { padding-top: 40px; }
  .mock { width: 300px; }
  .mock .bio__photo { aspect-ratio: 5 / 4; }
  .mock .deal__cover { aspect-ratio: 1 / 1; object-position: 50% 30%; }
  /* Titel: Luft ueber dem Kopf, die Linie so lang wie der Text darunter */
  .hero__img { object-position: 60% 0; }
  .hero .trust { width: fit-content; }
  /* Vorher-Nachher: fuenf gleich grosse Bilder auf einer Linie */
  .proof { grid-template-columns: calc((100% - 126px) / 5) 36px minmax(0, 1fr); gap: 24px; }
  .proof__arrow { margin-top: 104px; }
  .how__img { aspect-ratio: 4 / 3; object-position: 50% 20%; }
  .logo { font-size: 1.625rem; }
}
.proof img { border-radius: var(--radius-m); }
.hero__lead strong { font-weight: 600; color: #f4f7f2; }

/* Fragen auf der Startseite als Zeilen mit Linie (wie die Schritte) statt weisser Kacheln; die Hilfeseite behaelt Kacheln */
.faqwrap .faq { gap: 0; }
.faqwrap .faq__item { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.faqwrap .faq__item summary { padding-inline: 0; min-height: 56px; }
.faqwrap .faq__item p { padding-inline: 0; }
@media (min-width: 900px) {
  .faqwrap { grid-template-columns: 340px minmax(0, 1fr); gap: 48px; }
  .faqwrap .faq { max-width: none; }
}

/* Kopf- und Fusszeile leiser */
.toplang { border: 0; padding: 0 2px; font-weight: 500; color: var(--muted); }
.topnav a { padding: 10px 0 6px; }
.footer { border-top: 0; }
.footer .logo, .footer .logo--sm { font-size: 1.125rem; }
.footer__in { align-items: baseline; }
.footer__links a { text-decoration: none; font-weight: 500; }
.footer__links a:hover { text-decoration: underline; }
.footer__lang select { border: 0; background-color: transparent; font-weight: 500; color: var(--muted); }

/* Schlussband: Preiszeilen wie im Titel; das Bild auch mobil */
.cta-band .hero__free { margin-top: 4px; }
.cta-band .hero__sub { margin-top: -10px; max-width: none; }
.hero__free, .hero__sub { font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .cta-band--photo .cta-band__img { display: block; width: calc(100% + 44px); max-width: none; margin: -36px -22px 0; aspect-ratio: 16 / 9; object-fit: cover; object-position: 70% 35%; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
}
@media (min-width: 900px) { .cta-band--photo .cta-band__img { object-position: 60% 35%; } }

/* Preisseite: kein Gelb als Flaeche, Preise in der schmalen Schrift, das Abo als einzige Karte mit Rahmen */
.plan-card--pack { background: var(--surface); }
.plan-card__price strong { font-weight: 700; font-stretch: 88%; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.plan-card__price span { margin-left: 6px; }
.plan-card--sub { border: 2px solid var(--accent); }

/* Gesperrter Hauptknopf: kraeftiger Umriss statt blassem Grau */
.btn--primary:disabled, .btn--dark:disabled { opacity: 1; background: transparent; color: var(--night); box-shadow: inset 0 0 0 2px var(--night); }

/* Foto-Schritt: eine Achse (links), nur die Zeichnung mittig; Seitentitel einheitlich */
.cam--message { justify-items: stretch; text-align: left; }
.cam--message .cam__sketch, .cam--message .cam__bigicon, .cam--message .cam__qr { justify-self: center; }
.cam--message .cam__why { justify-self: start; }
@media (max-width: 719px) { .cam--message .btn--lg { display: flex; width: 100%; } }
.page__title, .signin__title { font-size: 1.75rem; line-height: 1.15; }

/* ---------- Zweite Durchsicht, UX und Produkt (13.10.2026) ---------- */
/* Titel mobil: die Bildhoehe richtet sich nach der sichtbaren Hoehe, damit der Hauptknopf auch mit Browserleisten im Bild ist */
@media (max-width: 719px) {
  .hero__img { aspect-ratio: auto; height: min(100vw, 44vh); height: min(100vw, 44svh); object-position: 50% 35%; }
  .hero__title { font-size: clamp(1.75rem, 8.6vw, 2.125rem); }
  .sell__text .btn--lg { justify-content: space-between; text-align: left; padding-inline: 20px; }
}
.hero__sub a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Fokus auf dunklem Grund sichtbar */
.hero :focus-visible, .cta-band :focus-visible { outline-color: #fff; outline-offset: 3px; }
/* Tippflaechen */
.topbar .logo { display: inline-flex; align-items: center; min-height: 44px; }
.footer__lang .input--sm { min-height: 44px; font-size: 1rem; }
.signin__alt .link, .faq__more .link { min-height: 44px; }
.topcta { white-space: nowrap; }
@media (max-width: 379px) { .topright .topcta.is-always span { display: none; } }
/* Fragen mobil: der Link zu allen Antworten steht unter der Liste */
@media (max-width: 899px) {
  .faqwrap__head { display: contents; }
  .faqwrap .faq__more { order: 2; margin-top: 0; }
}
/* Beweisbilder lassen sich vergroessern */
.proof__zoom { display: block; padding: 0; border: 0; background: none; border-radius: var(--radius-m); cursor: zoom-in; }
/* Foto-Schritt: der Knopf rueckt nach oben; fehlt das Haekchen, sagt die Zeile warum */
.cam__sketch { width: 132px; }
.cam--message { padding: 20px 18px 24px; gap: 12px; }
.cam__why { margin-top: 0; }
.cam__ok.is-missing { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger); }
.nofacetoggle { margin-top: 4px; }
/* Seitliche Safe-Area (Querformat mit Kerbe) */
.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.sticky-cta { left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right)); }
/* Start: Platz halten, bis die erste Ansicht steht (die Fusszeile springt sonst unter die Kopfzeile) */
.boot { min-height: 100svh; }
body:not(.is-ready) .footer, body:not(.is-ready) .bottomnav { visibility: hidden; }
@media (max-width: 719px) { .is-landing.has-footer .footer__in { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } }
/* Bei reduzierter Bewegung steht der Ladekreis nicht still, er pulsiert */
@media (prefers-reduced-motion: reduce) { .spinner { animation: pulse 1.2s ease-in-out infinite !important; } }

/* ---------- Premium-Designs der Sedcard (Skins) ----------
   Gemeinsamer Grund fuer alle Designs; das Aussehen selbst steht in assets/css/skins/<gruppe>.css (Vertrag: docs/skins.md). */
.bio__photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.bio[data-skin] { position: relative; isolation: isolate; overflow-x: clip; --mx: 0.5; --my: 0.3; --sy: 0; }
.bio[data-skin] > .bio__in { position: relative; z-index: 1; }
.bio__fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bio__fx i { position: absolute; display: block; }
/* Verkleinerte echte Karte als Kachel (Galerie und Editor). --k = Massstab. Bewegung nur unter dem Zeiger / bei Auswahl. */
.skintiles { --k: 0.44; display: grid; grid-template-columns: repeat(auto-fill, calc(390px * var(--k))); gap: 14px 10px; justify-content: space-between; margin: 12px 0 28px; }
.skintile { position: relative; display: grid; gap: 6px; color: inherit; cursor: pointer; }
.skintile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.skintile__view { position: relative; display: block; width: calc(390px * var(--k)); height: calc(640px * var(--k)); overflow: hidden; border-radius: var(--radius-m); background: var(--night); outline: 3px solid transparent; outline-offset: 2px; box-shadow: 0 10px 24px -14px rgba(16, 35, 29, 0.55); }
.bio--mini { position: absolute; left: 0; top: 0; width: 390px; min-height: 640px; border: 0; border-radius: 0; transform: scale(var(--k)); transform-origin: 0 0; pointer-events: none; }
.skintile:not(:hover):not(:focus-within):not(:has(input:checked)) .bio, .skintile:not(:hover):not(:focus-within):not(:has(input:checked)) .bio *, .skintile:not(:hover):not(:focus-within):not(:has(input:checked)) .bio *::before, .skintile:not(:hover):not(:focus-within):not(:has(input:checked)) .bio *::after, .skintile:not(:hover):not(:focus-within):not(:has(input:checked)) .bio::before, .skintile:not(:hover):not(:focus-within):not(:has(input:checked)) .bio::after { animation-play-state: paused !important; }
.skintile__name { font-size: 0.875rem; font-weight: 600; }
.skintile:hover .skintile__view, .skintile:has(:focus-visible) .skintile__view { outline-color: var(--ink); }
.skintile__link { color: inherit; }
.skintile__link::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* die ganze Kachel ist der Link */
.skintile input:checked ~ .skintile__view { outline-color: var(--accent); }
.skingroup { margin-top: 26px; font-size: 1.125rem; font-weight: 700; font-stretch: 88%; }
@media (min-width: 720px) { .skintiles { --k: 0.5; justify-content: start; gap: 18px 16px; } }
/* Leiste unter der Vollbild-Vorschau eines Designs */
.skinbar { position: fixed; z-index: 30; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(460px, calc(100vw - 20px)); display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 16px; background: rgba(16, 35, 29, 0.92); color: #f4f7f2; box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.skinbar a:not(.btn) { display: grid; place-items: center; width: 40px; height: 44px; flex: none; color: inherit; }
.skinbar__name { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.skinbar__name small { font-size: 0.6875rem; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skinbar .btn--primary { background: var(--fill); color: var(--on-fill); white-space: nowrap; }
.skinbar__all { opacity: 0.7; }
.bio[data-skin]:has(+ .skinbar) { padding-bottom: 84px; } /* Platz fuer die Leiste der Vorschau */

/* Editor: Premium-Marke, Hinweis ohne Abo, Design-Auswahl als Streifen */
.tagpro { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--night); color: var(--pop); font-size: 0.6875rem; font-style: normal; font-weight: 700; letter-spacing: 0.02em; vertical-align: middle; }
.premiumnote { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; margin-bottom: 10px; border-radius: var(--radius-m); background: var(--tint); font-size: 0.9375rem; }
.premiumnote .icon { flex: none; color: var(--accent); }
.premiumnote span { flex: 1 1 200px; }
.skintiles--pick { --k: 0.36; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc(390px * var(--k)); justify-content: start; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 8px; scrollbar-width: none; }
.skintiles--pick::-webkit-scrollbar { display: none; }
.skintiles--pick .skintile__view { height: calc(520px * var(--k)); }
.skintiles--pick .bio--mini { min-height: 520px; }
.skintile__view--none { display: grid; place-items: center; background: var(--surface); border: 1px dashed var(--field); box-shadow: none; color: var(--muted); }
.skintile__name small { font-weight: 400; color: var(--muted); }
.btn.is-off { opacity: 1; background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--field); cursor: not-allowed; }
@media (min-width: 900px) { .skintiles--pick { grid-template-rows: repeat(2, auto); margin-inline: 0; padding-inline: 2px; } }

/* ---------- Meine Sedcards ---------- */
.mycards { --k: 0.38; display: grid; gap: 14px; margin-top: 20px; }
.mycard { display: grid; grid-template-columns: calc(390px * var(--k)) minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); }
.mycard__view { position: relative; display: block; width: calc(390px * var(--k)); height: calc(470px * var(--k)); overflow: hidden; border-radius: var(--radius-m); background: var(--night); }
.mycard__view .bio--mini { display: block; min-height: 470px; }
.mycard__view .bio__in { display: grid; }
.mycard__view .bio, .mycard__view .bio *, .mycard__view .bio *::before, .mycard__view .bio *::after { animation-play-state: paused !important; }
.mycard__body { display: grid; gap: 8px; min-width: 0; align-content: start; }
.mycard__state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.mycard__state--visible { color: var(--accent); }
.mycard__state .icon { width: 16px; height: 16px; }
.mycard__name { font-size: 1.25rem; font-weight: 700; font-stretch: 88%; line-height: 1.15; overflow-wrap: anywhere; }
.mycard__handle { color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }
.mycard__go { margin-top: 4px; min-height: 60px; font-size: 1.125rem; }
.mycard__row { display: flex; gap: 8px; margin-top: 4px; }
.mycard__links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.mycard--new { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 26px 16px; border-style: dashed; border-color: var(--field); background: transparent; box-shadow: none; color: var(--muted); cursor: pointer; font: inherit; }
.mycard--new strong { color: var(--ink); font-size: 1.0625rem; }
.mycard__plus { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--night); color: var(--fill); }
.paypoints { display: grid; gap: 8px; text-align: left; justify-self: stretch; }
.paypoints li { display: flex; gap: 10px; align-items: flex-start; }
.paypoints .icon { color: var(--accent); margin-top: 3px; flex: none; }
@media (min-width: 720px) { .mycards { --k: 0.42; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.mycard__row .btn--block { flex: 1 1 0; min-width: 0; width: auto; }
.mycard__row .btn--soft { flex: none; padding-inline: 14px; }
/* Anfrage-Formular auf einer Karte mit Premium-Design: die Fehlerfarbe richtet sich nach der Schriftfarbe des Designs
   (helles Rot auf dunklen, dunkles Rot auf hellen Flaechen), nicht nach dem Namen einer Farbpalette. */
.bio[data-skin] .sheet__error { color: var(--p-ink); border-color: color-mix(in srgb, #e5484d 72%, var(--p-ink)); background: color-mix(in srgb, #e5484d 16%, var(--p-surface)); }

/* ---------- Design-Galerie: /designs und /designs/<name> (views/designs.js, Konzept §36) ----------
   Die Seite ist Buehne, nicht Tapete: hell und still, eine Haarlinie und ein Radius fuer alle Designs, kein Schatten,
   keine Gruppenfarben. Farbe und Bewegung kommen nur aus den Designs selbst. Einziger inszenierter Moment: der Faecher. */
:root { --frame: rgba(16, 35, 29, 0.14); } /* Kante um jede Design-Kachel: traegt auf hellen wie dunklen Kartenraendern */

/* Server-HTML der Galerie: was Crawler und Besucher ohne JavaScript sehen. Die App ersetzt es beim Start. */
.gallery-ssr ul { padding-left: 1.2em; }
.gallery-ssr h2 { margin-top: 24px; }
.gallery-ssr a { color: var(--accent); font-weight: 600; }
.gallery-ssr .dposter { display: block; width: min(320px, 100%); height: auto; margin: 12px 0; border-radius: var(--radius-m); }
.gallery-ssr li .dposter { width: 96px; margin: 8px 0 4px; }
.gallery-ssr li { margin-bottom: 10px; }

.gal__head { display: grid; gap: 20px; padding-top: 18px; }
.gal__title { font-size: 2rem; font-weight: 700; font-stretch: 85%; line-height: 1.04; letter-spacing: -0.02em; }
.gal__lead { margin-top: 10px; color: var(--muted); max-width: 34em; }
.gal__missing { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--field); font-weight: 600; }

/* Faecher: dieselbe Sedcard in drei Designs, die mittlere gerade und lebendig, die seitlichen gedreht und still. */
.gal__stage { margin: 0 calc(var(--gutter) * -1); }
.gal__fan { position: relative; height: 340px; overflow: hidden; background: var(--tint); }
.gal__phone { --w: 214px; position: absolute; left: 50%; bottom: -96px; width: var(--w); padding: 7px; border-radius: 32px; background: #0a1512; box-shadow: 0 0 0 1px #2c423a, 0 30px 50px -24px rgba(16, 35, 29, 0.55); transform-origin: 50% 100%; }
.gal__phone--1 { z-index: 2; transform: translateX(-50%); }
.gal__phone--0 { transform: translateX(-96%) rotate(-8deg) scale(0.86); }
.gal__phone--2 { transform: translateX(-4%) rotate(8deg) scale(0.86); }
.gal__screen { position: relative; display: block; overflow: hidden; border-radius: 25px; aspect-ratio: 390 / 700; background: var(--night); }
.gal__screen .dposter, .dtile__view .dposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.gal__screen .bio--mini, .dtile__view .bio--mini { z-index: 1; }
.gal__caption { margin-top: 10px; padding-inline: var(--gutter); font-size: 0.8125rem; font-weight: 500; color: var(--muted); text-align: center; }
.gal__caption a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.is-opening .gal__phone--0 { animation: gal-fan-left 720ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both; }
.is-opening .gal__phone--2 { animation: gal-fan-right 720ms cubic-bezier(0.2, 0.8, 0.2, 1) 280ms both; }
@keyframes gal-fan-left { from { transform: translateX(-50%) rotate(0deg) scale(0.86); } }
@keyframes gal-fan-right { from { transform: translateX(-50%) rotate(0deg) scale(0.86); } }

/* Gruppen-Leiste: klebt unter der Kopfzeile, aktiver Eintrag folgt dem Regal im Bild (Form wie .tab.is-active). */
.gal__bar { position: sticky; top: var(--topbar); z-index: 15; margin-top: 20px; background: var(--bg); border-bottom: 1px solid var(--line); }
.gal__groups { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.gal__groups::-webkit-scrollbar { display: none; }
.gal__groups a { flex: none; padding: 12px 0 10px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 0.9375rem; font-weight: 600; }
.gal__groups a.is-active { color: var(--accent); border-color: var(--accent); }
.gal__groups.is-off a { color: var(--muted); border-color: transparent; }

/* Filter: zwei Reihen Wahlknoepfe, die Trefferzahl daneben. */
.gal__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 18px 0 6px; }
.dfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dfilter legend { float: left; margin-right: 4px; font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.dfilter__opt { position: relative; }
.dfilter__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.dfilter__opt span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--field); font-size: 0.875rem; font-weight: 600; }
.dfilter__opt input:checked + span { background: var(--night); color: #f4f7f2; box-shadow: none; }
.dfilter__opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.gal__count { margin: 0 0 0 auto; font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
@media (max-width: 599px) { .dfilter legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* am Handy nur fuer Vorleser: spart eine Zeile */

/* Regale: eine Gruppe je Regal. Handy: Aufmacher gross, darunter 2 x 2. Tablet: Aufmacher 2 x 2 daneben. Desktop: 5 in einer Reihe. */
.shelf { padding-top: 28px; scroll-margin-top: 24px; } /* html hat schon scroll-padding-top fuer die Kopfzeile */
.shelf + .shelf { margin-top: 28px; border-top: 1px solid var(--line); }
.shelf__head { margin-bottom: 14px; }
.shelf__title { font-size: 1.5rem; font-weight: 700; font-stretch: 88%; line-height: 1.15; letter-spacing: -0.01em; }
.shelf__line { margin-top: 2px; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.shelf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin: 0; padding: 0; list-style: none; }
.shelf__grid--flat { margin-top: 18px; }
.dtile--lead { grid-column: 1 / -1; }
.dtile[hidden] { display: none; }
.dtile__link { display: block; color: inherit; }
.dtile__view { position: relative; display: block; overflow: hidden; aspect-ratio: 390 / 640; border-radius: var(--radius-m); background: var(--night); outline: 1px solid var(--frame); outline-offset: -1px; }
.dtile--lead .dtile__view { aspect-ratio: 4 / 5; }
.dtile__link:hover .dtile__view, .dtile__link:focus-visible .dtile__view { outline: 2px solid var(--ink); outline-offset: 3px; }
.dtile__link:focus-visible { outline: none; }
.dtile__name { display: block; margin-top: 8px; font-weight: 700; font-stretch: 88%; line-height: 1.2; }
.dtile__short { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--muted); }
.gal__empty { display: grid; justify-items: start; gap: 12px; padding: 24px 0; color: var(--muted); }

.gal__faq { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.gal__qa { border-bottom: 1px solid var(--line); }
.gal__qa:first-of-type { margin-top: 12px; }
.gal__qa summary { padding: 14px 0; font-weight: 600; cursor: pointer; }
.gal__qa p { padding-bottom: 16px; color: var(--muted); max-width: 40em; }
.gal__end { display: grid; justify-items: start; gap: 12px; margin-top: 36px; padding: 0 0 40px; }
.gal__note { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }

@media (min-width: 600px) {
  .shelf__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shelf__grid:not(.shelf__grid--flat) .dtile--lead { grid-column: span 2; grid-row: span 2; }
  .shelf__grid:not(.shelf__grid--flat) .dtile--lead .dtile__view { aspect-ratio: auto; height: calc(100% - 52px); min-height: 0; }
}
@media (min-width: 900px) {
  .gal__head { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: center; gap: 56px; padding-top: 28px; }
  .gal__title { font-size: 2.5rem; }
  .gal__lead { font-size: 1.0625rem; }
  .gal__stage { margin: 0; }
  .gal__fan { height: 500px; border-radius: var(--radius-l); }
  .gal__phone { --w: 268px; bottom: -110px; }
  .gal__caption { text-align: right; padding: 0; }
  .gal__bar { margin-top: 32px; }
  .gal__groups { gap: 32px; }
  .shelf__head { display: flex; align-items: baseline; gap: 20px; }
  .shelf__title { font-size: 1.875rem; }
  .shelf__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 20px; }
  .shelf__grid:not(.shelf__grid--flat) .dtile--lead { grid-column: auto; grid-row: auto; }
  .shelf__grid:not(.shelf__grid--flat) .dtile--lead .dtile__view { aspect-ratio: 390 / 640; height: auto; }
}

/* Detailseite: Handy = Name, Kartenfenster (Ausschnitt, Antippen = Vollbild), Erklaerung.
   Desktop = links die Buehne mit der Karte im Handyrahmen (im Geraet scrollbar), rechts Name und Erklaerung. */
.dd { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 16px; padding-bottom: 40px; }
.dd__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dd__crumbs { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.dd__share { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 99px; background: none; box-shadow: inset 0 0 0 1px var(--field); color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.dd__share .icon { width: 16px; height: 16px; }
.dd__share:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* "Beispiel | Meine Sedcard": dieselben Pillen wie die Filter der Uebersicht */
.dd__view { display: flex; gap: 6px; margin-bottom: 12px; }
.dd__view[hidden] { display: none; }
.dd__view button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 0; border-radius: 99px; background: none; box-shadow: inset 0 0 0 1px var(--field); color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.dd__view button[aria-pressed="true"] { background: var(--night); color: #f4f7f2; box-shadow: none; }
.dd__view button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dd__view button:disabled { opacity: 0.6; cursor: progress; }
.dd__crumbs a { color: var(--accent); }
.dd__name { margin-top: 6px; font-size: 3rem; font-weight: 800; font-stretch: 75%; line-height: 0.95; letter-spacing: -0.02em; outline: none; }
.dd__lead { margin-top: 10px; font-size: 0.9375rem; color: var(--muted); max-width: 36em; }
.dd__lead b { color: var(--ink); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.dd__stage { margin-top: 18px; }
.dd__device { position: relative; display: flex; flex-direction: column; }
.dd__screen { position: relative; height: 440px; overflow: hidden; border-radius: var(--radius-l); outline: 1px solid var(--frame); outline-offset: -1px; background: var(--night); cursor: zoom-in; }
.dd__card > .bio { width: 390px; min-height: 0; border: 0; border-radius: 0; }
.dd__pill { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--field); color: var(--ink); font-size: 0.875rem; font-weight: 700; } /* unter dem Fenster, nie auf dem Karteninhalt */
.dd__note { margin-top: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.dd__actions { display: grid; gap: 10px; margin-top: 18px; }
.dd__actions .btn--primary { width: 100%; }
.dd__fullbtn { display: none; }
.dd__price { margin-top: 8px; font-size: 0.8125rem; color: var(--muted); }
.dd__use2 { width: 100%; margin-top: 24px; }
.dd__block { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.dd__block h2 { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.dd__block p, .dd__list { margin-top: 6px; color: var(--muted); max-width: 36em; }
.dd__list { padding-left: 1.1em; list-style: disc; }
.dd__list li + li { margin-top: 2px; }
.dd__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.dd__chips li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--field); font-size: 0.875rem; font-weight: 600; }
.dd__groupline { font-size: 0.875rem; }
.dd__sibgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.dd__sibgrid a { display: grid; gap: 6px; color: inherit; font-size: 0.8125rem; font-weight: 700; }
.dd__sibgrid img { width: 100%; height: auto; aspect-ratio: 390 / 640; object-fit: cover; object-position: 50% 0; border-radius: var(--radius-s); outline: 1px solid var(--frame); outline-offset: -1px; background: var(--night); }
.dd__sibgrid a:hover img, .dd__sibgrid a:focus-visible img { outline: 2px solid var(--ink); outline-offset: 2px; }
.dd__flip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.dd__flip a { display: grid; gap: 2px; min-height: 64px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); color: inherit; }
.dd__flip a + a { text-align: right; justify-items: end; }
.dd__flip small { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--muted); }
.dd__flip small .icon { width: 16px; height: 16px; }
.dd__flip b { font-weight: 700; font-stretch: 88%; }
.dd__keys { display: none; margin-top: 10px; font-size: 0.8125rem; color: var(--muted); }
.dd__all { margin-top: 18px; }
.dpick__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dpick__card { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; min-height: 56px; padding: 10px 14px; border-radius: var(--radius-m); border: 1px solid var(--line); color: inherit; }
.dpick__card small { grid-column: 1; color: var(--muted); font-size: 0.8125rem; }
.dpick__card .icon { grid-row: 1 / span 2; grid-column: 2; }

@media (hover: hover) and (pointer: fine) { .dd__keys { display: block; } }
@media (min-width: 900px) {
  .dd { grid-template-columns: 460px minmax(0, 560px); grid-template-rows: auto 1fr; grid-template-areas: "stage text" "stage more"; column-gap: 64px; align-items: start; padding-top: 28px; }
  .dd__text { grid-area: text; }
  .dd__more { grid-area: more; }
  .dd__stage { grid-area: stage; position: sticky; top: calc(var(--topbar) + 20px); margin: 0; display: grid; justify-items: center; padding: 36px 0 18px; border-radius: var(--radius-l); background: var(--tint); }
  .dd__name { font-size: 4.5rem; }
  .dd__device { width: 340px; padding: 7px; border-radius: 38px; background: #0a1512; box-shadow: 0 0 0 1px #2c423a, 0 34px 60px -24px rgba(16, 35, 29, 0.55); }
  .dd__screen { height: min(670px, calc(100vh - var(--topbar) - 150px)); border-radius: 31px; outline: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--field) transparent; cursor: auto; }
  .dd__pill { display: none; }
  .dd__actions { display: flex; flex-wrap: wrap; }
  .dd__actions .btn--primary { width: auto; }
  .dd__use2 { width: auto; }
  .dd__fullbtn { display: inline-flex; }
}

/* Vollbild-Leiste: der Name darf nie unter die Pfeile laufen. */
.skinbar__name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skinbar button.btn--primary { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .is-opening .gal__phone--0, .is-opening .gal__phone--2 { animation: none; }
}

/* ---------- Sedcard-Editor (UX und Art Director, 15.10.2026; docs/konzept.md §38) ----------
   Werkbank links, Buehne rechts. Fuenf aufklappbare Gruppen mit Haarlinie statt Kaesten, eine Auswahl-Grammatik fuer
   Layout, Farbe und Design (dunkler Ring + Mint-Haken, wie die Galerie), ein dunkler Knopf je Sichtbereich.
   Handy und Tablet (< 1080 px): eine Spalte, feste Leiste mit Speicherstand, Vorschau und Veroeffentlichen; Aussehen im Blatt.
   Desktop (>= 1080 px): Karte im Handyrahmen der Galerie, darunter Speicherstand und Veroeffentlichen. */
.page--card {
  max-width: 1180px;
  --edge: #80948a;                                   /* Feldkante 3,2:1 auf Weiss: weich, aber sichtbar */
  --focus-ring: 0 0 0 3px rgba(44, 119, 98, 0.22);
  --s-field: 20px;
  --look-k: 0.32;                                    /* Massstab der Layout- und Design-Kacheln */
  padding-bottom: calc(var(--bottomnav) + 96px);
}
@media (min-width: 720px) { .page--card { --s-field: 24px; } }

/* Kopf: Kartenname als Titel, Status als Pille */
.edithead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.edithead__id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.edithead__title { font-size: 1.75rem; font-weight: 700; font-stretch: 88%; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.statuspill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--field); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.statuspill--visible { background: var(--fill); color: var(--on-fill); box-shadow: none; }
.statuspill--paused { color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.page--card .page__lead { margin-top: 6px; }

/* Speicherstand: Punkt + kurzer Text, antippbar (Fehler: zum Feld; sonst: jetzt speichern) */
.savechip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 0 2px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.savechip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fill); }
.savechip[data-state="pending"]::before { background: var(--edge); }
.savechip[data-state="saving"]::before { background: var(--pop); box-shadow: 0 0 0 1px #c9cf63; }
.savechip[data-state="error"], .savechip[data-state="offline"] { color: var(--danger); font-weight: 600; }
.savechip[data-state="error"]::before, .savechip[data-state="offline"]::before { background: var(--danger); }
.savechip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }

/* Raster: eine Spalte bis 1079 px, die Vorschau steckt dann in Leiste und Blatt */
.page--card .cardedit { grid-template-columns: minmax(0, 1fr); max-width: 640px; gap: 0; margin-top: 16px; }
.page--card .cardedit__preview { display: none; }
.page--card .cardedit__form { gap: 0; }

/* Fortschritt (Entwurf): getoente Flaeche, Balken, naechster Schritt */
.editstart { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; margin-bottom: 8px; padding: 14px; border-radius: var(--radius-l); background: var(--tint); }
.editstart[hidden] { display: none; }
.editstart__mini { --k: 0.24; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-m); }
.editstart__mini:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.editstart__main { display: grid; gap: 8px; min-width: 0; }
.editstart__count { font-size: 0.9375rem; font-weight: 700; }
.editstart__bar { display: block; height: 6px; border-radius: 99px; background: var(--tint-deep); overflow: hidden; }
.editstart__bar i { display: block; height: 100%; border-radius: inherit; background: var(--night); }
.editstart__next { display: inline-flex; align-items: center; justify-self: start; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.editstart__next .icon { width: 18px; height: 18px; color: var(--accent); flex: none; }
.editstart__all summary { min-height: 32px; display: flex; align-items: center; color: var(--muted); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.editstart__all .share__steps--check li + li { border-top: 1px solid var(--tint-deep); }
.page--card .share__steps--check .is-done span { text-decoration: none; color: var(--muted); }
.page--card .share__steps--check li:not(.is-done) span { text-decoration: none; font-weight: 600; }
.page--card .share__steps--check i { border-width: 1.5px; }

/* Gruppen: Haarlinie + Titel, aufklappbar, Zusammenfassung rechts */
.egroup { border-top: 1px solid var(--line); }
.egroup__h { margin: 0; font: inherit; }
.egroup__head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 14px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.egroup__title { flex: none; font-size: 1.125rem; font-weight: 700; font-stretch: 88%; line-height: 1.25; }
.egroup__sum { flex: 1; min-width: 0; text-align: right; color: var(--muted); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.egroup__head::after { content: ""; flex: none; width: 9px; height: 9px; margin: -5px 4px 0 2px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform 0.15s; }
.egroup__head[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
.egroup__head[aria-expanded="true"] .egroup__sum { visibility: hidden; }
.egroup__head:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.egroup__body { display: grid; gap: var(--s-field); padding-bottom: 32px; min-width: 0; }
.egroup__body[hidden] { display: none; }
.egroup__lead { color: var(--muted); font-size: 0.9375rem; max-width: 52ch; }

/* Felder: weich in Ruhe, klar im Fokus und bei Fehlern */
.page--card .field { gap: 8px; }
.page--card .field__label { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.page--card .field__label small { font-size: 0.8125rem; font-weight: 500; }
.page--card .field__hint { font-size: 0.8125rem; line-height: 1.45; max-width: 52ch; }
.page--card .input, .page--card .handle { border-color: var(--edge); transition: border-color 0.12s, box-shadow 0.12s; }
.page--card .input:hover, .page--card .handle:hover { border-color: var(--field); }
.page--card .input:focus-visible { outline: none; border-color: var(--night); box-shadow: var(--focus-ring); }
.page--card .handle:focus-within { outline: none; border-color: var(--night); box-shadow: var(--focus-ring); }
.page--card .handle .input, .page--card .handle .input:focus-visible { box-shadow: none; }
.page--card .handle span + span { margin-left: 0; }
.field__error { color: var(--danger); font-size: 0.8125rem; font-weight: 600; }
.page--card .field:has(> .field__error) .input, .page--card label:has(> .field__error) .input, .page--card .field:has(> .field__error) .handle { border-color: var(--danger); }
.page--card .factgrid { gap: 16px 12px; }
.page--card .factgrid label { gap: 6px; font-size: 0.8125rem; font-weight: 500; }
.unitfield { position: relative; display: block; }
.unitfield .input { padding-right: 56px; }
.unitfield i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-style: normal; font-size: 0.875rem; pointer-events: none; }
@media (max-width: 719px) { .handle__host { display: none; } } /* am Handy nur "@": die volle Adresse steht beim Teilen */

/* Profilbild mit Vorschaubild */
.page--card .avatarpick { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; }
.avatarpick__thumb { flex: none; display: grid; place-items: center; width: 64px; height: 80px; overflow: hidden; border-radius: var(--radius-s); background: var(--tint); color: var(--accent); outline: 1px solid var(--frame); outline-offset: -1px; cursor: pointer; }
.avatarpick__thumb img { width: 100%; height: 100%; object-fit: cover; }
.avatarpick__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.page--card [data-video] .avatarpick { gap: 14px; }
.addrow { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 99px; background: none; box-shadow: inset 0 0 0 1px var(--field); color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; }
.addrow .icon { width: 16px; height: 16px; color: var(--accent); }
.addrow[hidden] { display: none; }

/* Aussehen: aktuelle Wahl als Kachel (Handy) bzw. Reiter mit Raster (Desktop) */
.look__current { display: flex; align-items: center; gap: 16px; }
.look__tile { --k: 0.3; flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-m); }
.look__tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.look__now { display: grid; gap: 10px; justify-items: start; }
.look__now p { font-weight: 600; }
:is(.look__tile, .editstart__mini) :is(.laytile__view, .skintile__view) { display: block; width: calc(390px * var(--k)); height: calc(510px * var(--k)); border: 0; border-radius: var(--radius-m); outline: 1px solid var(--frame); outline-offset: -1px; box-shadow: none; }
:is(.look__tile, .editstart__mini) .bio--tile, :is(.look__tile, .editstart__mini) .bio--mini { transform: scale(var(--k)); }
.look__slot { display: none; }
.look { display: grid; gap: 14px; min-width: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg__tab, .look__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 99px; background: none; box-shadow: inset 0 0 0 1px var(--field); color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.seg__tab small { font-size: 0.75rem; font-weight: 600; opacity: 0.7; }
.seg__tab[aria-selected="true"], .look__chip[aria-pressed="true"] { background: var(--night); color: #f4f7f2; box-shadow: none; }
:is(.seg__tab, .look__chip):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.look__chip { min-height: 36px; font-size: 0.8125rem; }
.look__groups { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.look__panel { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.look__panel[hidden] { display: none; }
.look__panel.is-locked :is(.laytiles, .swatches) { display: none; }
.look__lock { padding: 12px 14px; border-radius: var(--radius-m); background: var(--tint); font-size: 0.9375rem; }
.look__lock[hidden] { display: none; }
.look__more { justify-self: start; }

/* Eine Auswahl-Grammatik fuer Layout, Farbe und Design */
.look :is(.laytile__view, .skintile__view) { width: calc(390px * var(--look-k)); height: calc(510px * var(--look-k)); border: 0; border-radius: var(--radius-m); box-shadow: none; outline: 1px solid var(--frame); outline-offset: -1px; transition: outline-color 0.12s, outline-offset 0.12s; }
.look .bio--tile, .look .skintiles--pick .bio--mini { transform: scale(var(--look-k)); }
.look .skintiles--pick { --k: var(--look-k); margin: 0; }
.look .swatch__chip { height: 48px; border-radius: var(--radius-s); outline: 1px solid var(--frame); outline-offset: -1px; border: 0; }
.look .swatches { gap: 12px 10px; }
.look :is(.laytile, .skintile, .swatch):hover :is(.laytile__view, .skintile__view, .swatch__chip) { outline: 2px solid var(--field); outline-offset: 3px; }
.look .laytile input:checked ~ .laytile__view, .look .skintile input:checked ~ .skintile__view, .look .swatch input:checked ~ .swatch__chip { outline: 2px solid var(--night); outline-offset: 3px; }
.look .laytile input:focus-visible ~ .laytile__view, .look .skintile input:focus-visible ~ .skintile__view, .look .swatch input:focus-visible ~ .swatch__chip { outline: 3px solid var(--accent); outline-offset: 3px; }
.look :is(.laytile, .skintile, .swatch):has(input:checked)::after { content: ""; position: absolute; top: 6px; right: 6px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; pointer-events: none; background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310231d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 2px var(--surface); }
.look .swatch:has(input:checked)::after { top: 4px; right: 4px; width: 18px; height: 18px; background-size: 12px; }
.look :is(.laytile__name, .skintile__name, .swatch__name) { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.look :is(.laytile, .skintile, .swatch):has(input:checked) :is(.laytile__name, .skintile__name, .swatch__name) { color: var(--ink); font-weight: 700; }
.look .skintile__name small { display: block; font-weight: 500; color: var(--muted); }
.look .skintile[hidden] { display: none; }

/* Angebote, Pillen, Schalter, Regeln, Links */
.page--card .srows { margin-top: 4px; }
.empty--inline { display: grid; justify-items: start; gap: 12px; padding: 20px; border: 1px dashed var(--edge); border-radius: var(--radius-m); background: transparent; box-shadow: none; text-align: left; }
.page--card .chip span { min-height: 40px; padding: 0 14px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--field); font-size: 0.875rem; font-weight: 600; }
.page--card .chip input:checked + span { background: var(--night); color: #f4f7f2; box-shadow: none; }
.page--card .chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.page--card .chip-btn { min-height: 40px; padding: 0 14px; border: 0; box-shadow: inset 0 0 0 1px var(--field); color: var(--ink); font-size: 0.8125rem; font-weight: 700; }
.page--card .chip-btn .icon { color: var(--accent); }
.page--card .chip-btn:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.page--card .chip-btn[hidden] { display: none; }
@media (pointer: coarse) { .page--card :is(.chip span, .chip-btn, .seg__tab) { min-height: 44px; } }
.page--card .switch input { background: var(--edge); }
.page--card .switch input:checked { background: var(--night); }
.page--card .switch input:checked::after { background: var(--fill); }
.page--card .switch input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.page--card .rules, .rules--sheet { text-align: left; }
.page--card .rules, .rules--sheet { background: transparent; box-shadow: none; border: 0; padding: 0; }
.page--card .rules__ok, .rules--sheet .rules__ok { padding: 14px 16px; border: 0; border-radius: var(--radius-m); background: var(--tint); }
.page--card .rules__ok input, .rules--sheet .rules__ok input { accent-color: var(--night); }
.page--card .linkrow { align-items: center; }
.linkrow--platform { grid-template-columns: minmax(0, 1fr) 44px; }
.linkrow__plat { display: flex; align-items: center; min-height: 48px; border: 1px solid var(--edge); border-radius: var(--radius-s); background: var(--surface); overflow: hidden; }
.linkrow__plat:hover { border-color: var(--field); }
.linkrow__plat:focus-within { border-color: var(--night); box-shadow: var(--focus-ring); }
.linkrow__plat > span:first-child { align-self: stretch; display: flex; align-items: center; padding: 0 12px; border-right: 1px solid var(--line); background: var(--bg); font-size: 0.875rem; font-weight: 600; }
.linkrow__at { padding-left: 10px; color: var(--muted); }
.linkrow__plat .input { min-height: 46px; border: 0; padding-left: 2px; background: none; box-shadow: none; }
.linkrow__plat .input:focus-visible { box-shadow: none; }
@media (max-width: 719px) {
  .page--card .linkrow:not(.linkrow--platform) { padding: 10px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .page--card .linkrow:not(.linkrow--platform) .linkrow__del { grid-row: 1 / span 2; align-self: center; }
  .linkrow--platform .linkrow__plat { grid-column: 1; grid-row: 1; }
  .linkrow--platform .linkrow__del { grid-column: 2; grid-row: 1; }
}

/* Veroeffentlichen: Preis vor dem Knopf, Teilen-Block fuer sichtbare Karten */
.publishbox { display: grid; gap: 12px; }
.publishbox:empty { display: none; }
.publishnote { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 0.875rem; line-height: 1.45; }
.publishnote .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.page--card .share { background: var(--tint); border: 0; box-shadow: none; border-radius: var(--radius-l); padding: 16px 18px; }
.page--card .share[hidden] { display: none; }

/* Leiste unten (Handy, Tablet): Speicherstand, Vorschau, Veroeffentlichen */
.editbar { position: fixed; left: 0; right: 0; bottom: calc(var(--bottomnav) + env(safe-area-inset-bottom)); z-index: 19; display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 8px max(var(--gutter), env(safe-area-inset-left)); background: var(--surface); border-top: 1px solid var(--line); }
.editbar .savechip { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.editbar .btn { flex: none; min-height: 44px; }
.editbar [data-editbar-main] { display: contents; }

/* Aussehen-Blatt (Handy): grosse Live-Vorschau oben, Auswahl darunter in je einer wischbaren Reihe */
.pane--look { width: 100%; max-width: 560px; height: 100dvh; max-height: 100dvh; margin: auto auto 0; border-radius: 20px 20px 0 0; }
.pane--look .pane__in { display: flex; flex-direction: column; gap: 0; height: 100%; padding: 0; }
.lsheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gutter); border-bottom: 1px solid var(--line); }
.lsheet__title { font-size: 1.125rem; font-weight: 700; font-stretch: 88%; }
.lsheet__stage { flex: 1 1 auto; min-height: 180px; display: flex; justify-content: center; overflow: hidden; padding-top: 14px; background: var(--tint); }
.lsheet__stage .bio { width: 390px; min-height: 0; flex: none; zoom: 0.6; border-radius: 22px 22px 0 0; border: 0; box-shadow: 0 0 0 7px #0a1512; }
.lsheet__picks { flex: none; max-height: 52dvh; overflow-y: auto; padding: 14px var(--gutter) calc(16px + env(safe-area-inset-bottom)); }
.pane--look :is(.laytiles, .skintiles--pick) { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: none; grid-auto-columns: calc(390px * var(--look-k)); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 8px; scrollbar-width: none; justify-content: start; }
.pane--look :is(.laytiles, .skintiles--pick)::-webkit-scrollbar { display: none; }
.pane--look :is(.laytile, .skintile) { scroll-snap-align: start; }
.pane--look :is(.laytiles, .skintiles--pick, .look__groups) { scroll-padding-inline: var(--gutter); }
.pane--look .look__groups { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.pane--look .look__more { display: none; }
.pane--look .look { --look-k: 0.27; }

/* Vorschau-Blatt: Schliessen als feste Fussleiste statt schwebend auf der Karte */
.pane--preview .pane__in { padding-bottom: 0; }
.pane--preview .pane__closebar { position: sticky; left: auto; bottom: 0; transform: none; z-index: 3; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: none; }

/* Desktop: Werkbank links, Buehne mit Handyrahmen rechts */
@media (min-width: 1080px) {
  .page--card { --look-k: 0.285; padding-bottom: 64px; }
  .page--card .cardedit { grid-template-columns: minmax(0, 620px) minmax(340px, 400px); justify-content: space-between; column-gap: 56px; align-items: start; max-width: none; }
  .page--card .cardedit__preview { display: grid; gap: 14px; position: sticky; top: calc(var(--topbar) + 16px); order: 2; }
  .ce-stage { display: grid; justify-items: center; gap: 10px; padding: 24px 0 16px; border-radius: var(--radius-l); background: var(--tint); }
  .ce-device { width: 320px; padding: 7px; border-radius: 36px; background: #0a1512; box-shadow: 0 0 0 1px #2c423a, 0 34px 60px -24px rgba(16, 35, 29, 0.55); }
  .ce-screen { height: min(620px, calc(100vh - var(--topbar) - 350px)); overflow-y: auto; overscroll-behavior: contain; border-radius: 29px; scrollbar-width: thin; scrollbar-color: var(--field) transparent; }
  .ce-screen .bio--preview { width: 390px; min-height: 100%; border: 0; border-radius: 0; }
  .ce-stage__note { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
  .ce-aside { display: grid; gap: 10px; }
  .ce-aside .savechip { justify-self: start; }
  .ce-aside [data-aside] { display: grid; gap: 10px; }
  .ce-aside [data-aside]:empty { display: none; }
  .editbar { display: none; }
  .look__current { display: none; }
  .look__slot { display: block; }
  .page--card .look :is(.laytiles, .skintiles--pick) { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(5, calc(390px * var(--look-k))); justify-content: space-between; row-gap: 16px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .page--card .look .skintiles--pick.is-collapsed .skintile:nth-child(n+11):not(:has(input:checked)) { display: none; }
  .page--card .look .swatches { grid-template-columns: repeat(5, 1fr); }
  .page--card .look .look__groups { flex-wrap: wrap; overflow: visible; }
  .editstart { grid-template-columns: minmax(0, 1fr); }
  .editstart__mini { display: none; }
  .page--card [data-buttons] { display: none; } /* Veroeffentlichen steht unter dem Geraet */
}
@media (max-width: 1079px) { .look__more { display: none; } }

/* ---------- Kunden: Rundnachricht, Leads, Zahlen (§39) ---------- */
.page--crm .tabs { margin-bottom: 8px; }
.crm__block { margin-top: 28px; }
.crm__h { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.crm__sub { margin-top: 6px; color: var(--muted); font-size: 0.875rem; max-width: 40em; }
.crm__none { margin-top: 10px; color: var(--muted); }
.crm__card { display: grid; gap: 6px; margin-top: 16px; max-width: 320px; font-size: 0.875rem; font-weight: 600; }
.crm__controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; margin-top: 16px; }
.crm__controls .crm__card { margin-top: 0; flex: 1 1 200px; }

.crm__compose { display: grid; gap: 14px; margin-top: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.crm__compose textarea { min-height: 112px; }
.crm__reach { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--tint); }
.crm__reach span { color: var(--accent-deep); font-size: 0.875rem; }
.crm__rule { color: var(--muted); font-size: 0.875rem; }
.crm__compose .btn { justify-self: start; }
.crm__done { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.crm__done .icon { flex: none; color: var(--accent); margin-top: 2px; }
.crm__done p { display: grid; gap: 2px; }
.crm__done span { color: var(--muted); font-size: 0.875rem; }

.crm__leads { display: grid; margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.crm__leads li + li { border-top: 1px solid var(--line); }
.crm__lead { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; min-height: 56px; }
.crm__lead:hover { background: var(--bg); }
.crm__leadmain { display: grid; gap: 2px; min-width: 0; }
.crm__leadmain small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm__leadside { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; flex: none; max-width: 55%; }
.crm__leadside time { color: var(--muted); font-size: 0.8125rem; min-width: 3.5em; text-align: right; }
.crm__ways { display: flex; gap: 4px; }
.ochip--way { background: var(--tint); color: var(--accent-deep); }

.crm__history { display: grid; gap: 10px; margin-top: 12px; }
.crm__history li { display: grid; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.crm__histtop { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 0.8125rem; }
.crm__history p { white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.crm__history small { color: var(--muted); }

.crm__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 20px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.crm__kpi { display: grid; align-content: start; gap: 2px; padding: 14px 16px; background: var(--surface); }
.crm__kpi dt { color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.crm__kpi dd { margin: 0; font-size: 1.6rem; font-weight: 700; font-stretch: 88%; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.crm__kpi small { color: var(--muted); font-size: 0.8125rem; }
@media (min-width: 720px) { .crm__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.crm__chart { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: 2px; height: 160px; margin-top: 14px; padding: 0 2px; border-bottom: 1px solid var(--edge, var(--field)); }
.crm__bar { position: relative; height: calc(max(var(--v), 0.015) * 100%); min-height: 2px; background: var(--fill); border-radius: 3px 3px 0 0; }
.crm__bar i { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); font-style: normal; font-size: 0.6875rem; font-weight: 700; color: var(--accent-deep); }
.crm__axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 0.8125rem; }

.crm__table { width: 100%; margin-top: 12px; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.crm__table th, .crm__table td { padding: 10px 12px; text-align: right; border-top: 1px solid var(--line); }
.crm__table thead th { border-top: 0; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.crm__table th:first-child { text-align: left; font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 480px) { .crm__table th, .crm__table td { padding: 10px 8px; } .crm__table { font-size: 0.875rem; } }

.chat__tag { display: block; margin-bottom: 4px; font-size: 0.75rem; font-weight: 600; opacity: 0.75; }

/* Bezahl-Nachricht (Abschnitt B): gesperrt nur Art und Preis; die Anbieterin setzt den Preis ueber den Muenzknopf */
.chat__tag--ppv { display: flex; align-items: center; gap: 4px; }
.chat__tag--ppv .icon { width: 14px; height: 14px; }
.chat__ppv { display: grid; justify-items: center; gap: 8px; width: 240px; max-width: 100%; padding: 16px 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--ink); text-align: center; }
.chat__ppv p { display: grid; gap: 2px; margin: 0; }
.chat__ppv small { color: var(--muted); font-size: 0.8125rem; }
.chat__ppvlock { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--accent); }
.chat__form:has(.chat__setprice) { grid-template-columns: auto auto 1fr auto; }
.chat__setprice { padding: 0; font: inherit; }
.chat__setprice.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.chat__pricechip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-size: 0.875rem; font-weight: 600; }
.chat__pricechip .icon { width: 16px; height: 16px; color: var(--accent); }
.chat__pricechip .linkbtn { margin-left: auto; }

/* ---------- Feed (§40): auf der Sedcard in deren Farben, Creator-Seite und Fan-Bereich in den App-Farben ---------- */
.bio__tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 4px; border-radius: 99px; background: color-mix(in srgb, var(--p-ink) 7%, transparent); }
.bio__tabs button { flex: 1; min-height: 42px; border: 0; border-radius: 99px; background: none; color: var(--p-muted); font: inherit; font-weight: 700; cursor: pointer; }
.bio__tabs button small { font-weight: 600; opacity: 0.75; }
.bio__tabs button[aria-selected="true"] { background: var(--p-surface); color: var(--p-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.bio__panel { display: grid; gap: inherit; }
.bio__panel[hidden], [data-biopanel][hidden] { display: none; }

.feed { display: grid; gap: 14px; }
.fsub { display: grid; gap: 10px; padding: 18px; border-radius: var(--radius-l); background: var(--p-surface); border: 1px solid var(--p-line); }
.fsub__title { font-size: 1.125rem; font-weight: 700; }
.fsub__text, .fsub__test { color: var(--p-muted); }
.fsub__test { font-size: 0.8125rem; }
.fsub--member { display: flex; align-items: center; gap: 12px; }
.fsub--member > .icon { flex: none; color: var(--p-accent); }
.fsub--member p { display: grid; gap: 2px; flex: 1; min-width: 0; }
.fsub--member p span { color: var(--p-muted); font-size: 0.875rem; }
.fsub--member a { color: var(--p-accent); font-weight: 600; }
.fsub--member .bio__btn { width: auto; min-height: 44px; }

.fpost { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius-l); background: var(--p-surface); border: 1px solid var(--p-line); color: var(--p-ink); }
.fpost__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--p-muted); font-size: 0.8125rem; }
.fpost__tag { padding: 2px 8px; border-radius: 99px; font-style: normal; font-weight: 600; background: color-mix(in srgb, var(--p-ink) 8%, transparent); }
.fpost__tag--subs { background: color-mix(in srgb, var(--p-accent) 16%, transparent); color: var(--p-ink); }
.fpost__tag--ppv { background: color-mix(in srgb, var(--p-accent) 26%, transparent); color: var(--p-ink); }
.fpost__text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.fpost__media { display: grid; gap: 4px; margin-inline: -14px; }
.fpost__media.is-grid { grid-template-columns: 1fr 1fr; }
.fpost__item { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: cover; background: color-mix(in srgb, var(--p-ink) 8%, transparent); }
.fpost__media.is-grid .fpost__item { aspect-ratio: 1; height: 100%; }
.fpost__media:last-child { margin-bottom: -14px; border-radius: 0 0 var(--radius-l) var(--radius-l); overflow: hidden; }
.fpost__veil { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 240px; margin: 0 -14px -14px; padding: 28px 20px; text-align: center; border-radius: 0 0 var(--radius-l) var(--radius-l); background: color-mix(in srgb, var(--p-accent) 22%, var(--p-surface)); }
.fpost__veil::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: var(--blur, none) center / cover; filter: blur(28px) saturate(1.2); opacity: 0.85; }
.fpost__veil::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--p-surface) 45%, transparent); } /* Schrift bleibt auf jeder Vorschau lesbar */
.fpost__veil small { color: var(--p-ink); opacity: 0.8; }
.fpost__veil strong { font-size: 1rem; }
.fpost__veil small { color: var(--p-muted); }
.fpost__veil .bio__btn { width: auto; margin-top: 8px; }
.fpost__lock { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--p-surface); color: var(--p-ink); }
.feed__fan { color: var(--p-muted); font-size: 0.8125rem; text-align: center; }
.feed__fan a { color: var(--p-accent); font-weight: 600; }

.fanlogin { display: grid; gap: 14px; }
.fanlogin__code strong { font-size: 1.4rem; letter-spacing: 0.15em; margin-left: 6px; }

/* Creator-Seite: dieselben Posts, in den App-Farben */
.page--feed, .page--fan { --p-surface: var(--surface); --p-line: var(--line); --p-ink: var(--ink); --p-muted: var(--muted); --p-accent: var(--accent); }
.page--feed .backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.fblock { margin-top: 28px; display: grid; gap: 12px; }
.fblock__h { font-size: 1.05rem; font-weight: 700; }
.fblock__note { color: var(--muted); font-size: 0.875rem; max-width: 40em; }
.fblock__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fprice { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.fprice .field { flex: 0 1 220px; }
.fprice .unitfield .input { padding-right: 84px; }
.fcomp { display: grid; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.fcomp textarea { min-height: 92px; }
.fcomp__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.fcomp__pick { cursor: pointer; }
.fcomp__files { display: flex; flex-wrap: wrap; gap: 8px; }
.fcomp__files:empty { display: none; }
.fcomp__file { position: relative; width: 72px; height: 72px; border-radius: var(--radius-s); overflow: hidden; background: var(--bg); }
.fcomp__file img { width: 100%; height: 100%; object-fit: cover; }
.fcomp__vid { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); }
.fcomp__drop { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(16, 35, 29, 0.75); color: #fff; cursor: pointer; }
.fcomp__drop .icon { width: 14px; height: 14px; }
.fcomp__progress { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.fcomp__progress span { display: block; width: 0; height: 100%; background: var(--fill-deep); transition: width 0.2s; }
.fcomp .btn--primary { justify-self: start; }
.fcomp__ppv { display: grid; gap: 6px; }
.fcomp__ppv .field { max-width: 220px; }
.fcomp__ppv .unitfield .input { padding-right: 44px; }
.fpost--own { margin-top: 0; }
.fpost__tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); }
.fpost__tools .input { width: auto; flex: 0 1 190px; min-height: 40px; }
.fpost__tools .is-danger { margin-left: auto; }
.page--fan .fblock__h { margin-top: 24px; }
.fpost--own .fpost__media:last-child { margin-bottom: 0; border-radius: 0; }
.linkbtn.is-danger { color: var(--danger); }

.fansubs { display: grid; margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.fansub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 16px; }
.fansub + .fansub { border-top: 1px solid var(--line); }
.fansub__who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.fansub__who img, .fansub__init { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.fansub__init { display: grid; place-items: center; background: var(--tint); color: var(--accent-deep); font-weight: 700; }
.fansub__who span { display: grid; min-width: 0; }
.fansub__who small, .fansub__state { color: var(--muted); font-size: 0.875rem; }
.fansub__state { grid-column: 1; }
.fansub .linkbtn { grid-column: 2; grid-row: 1 / span 2; }
.fan__actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 28px; }