/* Chatly (owner 2026-10-25): our own fan platform in ChatMate's light theme - warm light neutrals, dark ink, Outfit for text,
   Sofia Sans for headings and numbers, calm cards with a thin line, 12px corners - with the logo and the actions in pink
   ("mach das design doch einfach wie chatmate light theme aber logo dieses pink"). Always light, no background animation.
   Layout after the big fan platforms: side bar + feed + suggestions on the desktop, tab bar on the phone. Gold only for coins. */

@font-face { font-family: "Chatly Text"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/outfit-latin.woff2) format("woff2"); }
@font-face { font-family: "Chatly Display"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/sofia-sans-latin.woff2) format("woff2"); }

/* ChatMate light (assets/p/maske.css) + pink instead of orange */
:root {
  --ground: #faf8f5; --frame: #fbf1f5; --frame-strong: #f3d3e2; --surface: #ffffff; --surface-2: #f4f2ee; --surface-3: #ece8e1;
  --ink: #141413; --ink-2: #52525b; --ink-3: #6b6b74; --line: #e7e3dc; --line-2: #d9d4cb;
  --accent: #c93f80; --accent-hover: #b3326f; --accent-ink: #ffffff; --accent-text: #a8296a; --accent-soft: rgba(201, 63, 128, .1);
  --gold: #8f6312; --gold-face: #e2b24c; --gold-edge: #b9862a; --gold-soft: #fbf0d9;
  --ok: #12633f; --ok-soft: rgba(22, 122, 78, .1); --warn: #7d5304; --warn-soft: rgba(196, 132, 12, .13); --bad: #b03a2e; --bad-soft: rgba(176, 58, 46, .07);
  --shadow: 0 1px 2px rgba(20, 18, 15, .05), 0 10px 30px rgba(20, 18, 15, .05);
  --shadow-lg: 0 1px 2px rgba(20, 18, 15, .06), 0 18px 50px rgba(20, 18, 15, .12);
  --ring: 0 0 0 3px rgba(201, 63, 128, .25);
  --glass: rgba(250, 248, 245, .88);
  --display: "Chatly Display", "Sofia Sans", "Outfit", system-ui, sans-serif;
  --text: "Chatly Text", "Outfit", system-ui, -apple-system, sans-serif;
  --r: 18px; --r-sm: 12px;
  /* the knobs of a mirror site (all 1 here): corners, spacing inside, between sections, in grids, heading size; width, side gap, header */
  --rk: 1; --sk: 1; --sec: 1; --gap: 1; --hk: 1; --wrap: 1180px; --gut: clamp(16px, 4vw, 40px); --top-h: 64px;
  /* chart colours: pink first, then violet, teal, blue, amber, stone - gold stays the coin's */
  --c0: #c93f80; --c1: #7357c9; --c2: #1f8a78; --c3: #3a72c4; --c4: #c9822a; --c5: #8b847a;
  color-scheme: light;
}

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.cl { margin: 0; min-height: 100vh; background: var(--ground); color: var(--ink); font: 400 15px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
.cl img { max-width: 100%; display: block; }
.cl a { color: inherit; }
.cl p, .cl li, .cl dd, .cl small { text-wrap: pretty; }
.cl h1, .cl h2, .cl h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
:where(.cl) p { margin: 0; } /* no weight: a class with its own margin wins (".cl-alt" stuck to its button before) */
.cl :focus-visible:not(dialog) { outline: none; box-shadow: var(--ring); border-radius: calc(12px * var(--rk)); }
.cl dialog:focus-visible { outline: none; }
.cl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: calc(12px * var(--rk)); background: var(--accent); color: var(--accent-ink) !important; font-weight: 600; text-decoration: none; }
.cl-skip:focus { top: 12px; }
.cl-muted { color: var(--ink-3); font-size: 14px; }
.cl-sub { color: var(--ink-2); font-size: 15.5px; }

/* the wordmark: built like ChatMate's logo (Outfit 900, two gradients, a soft glow) - "chat" pink, "ly" deep berry, no dot */
.cl-mark { display: inline-flex; align-items: baseline; font: 900 27px/1 "Chatly Text", "Outfit", system-ui, sans-serif; letter-spacing: -.04em;
  white-space: nowrap; text-decoration: none; filter: drop-shadow(0 .06em .14em rgba(176, 42, 104, .16)); }
.cl-mark span { -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-mark .a { background-image: linear-gradient(135deg, #b02a68, #cf4b8a); }
.cl-mark .b { background-image: linear-gradient(135deg, #5a0b30, #8a1a4f); }
.cl-mark.sm { font-size: 20px; }

/* the coin: a small gold disc with a rim - the only gold on the page */
.cl-coin { display: inline-block; flex: none; width: 1em; height: 1em; border-radius: 50%; vertical-align: -.14em;
  background: radial-gradient(circle at 35% 30%, #fff3cf 0 14%, var(--gold-face) 38%, var(--gold-edge) 100%);
  box-shadow: inset 0 0 0 1.5px var(--gold-edge), inset 0 0 0 3px color-mix(in srgb, var(--gold-face) 70%, #fff); }

/* ---------- frame */
.cl-shell { min-height: 100vh; }
.cl-col { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.cl-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--glass); border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
.cl-top-in { display: flex; align-items: center; gap: 16px; max-width: var(--wrap); height: var(--top-h); margin: 0 auto; padding: 0 var(--gut); }
.cl-top-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cl-link { padding: 9px 10px; border-radius: calc(10px * var(--rk)); color: var(--ink-2) !important; font-size: 15px; font-weight: 600; text-decoration: none; }
.cl-link:hover { color: var(--ink) !important; background: var(--surface-2); }
.cl-coins { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 9px; border: 1px solid var(--line-2);
  border-radius: calc(12px * var(--rk)); background: var(--surface); color: var(--ink) !important; font: 650 15px/1 var(--text); font-variant-numeric: tabular-nums; text-decoration: none; }
.cl-coins .cl-coin { font-size: 19px; }
.cl-main { flex: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: calc(24px * var(--sk)) var(--gut) calc(56px * var(--sk)); }
.cl-foot { border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.cl-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; max-width: var(--wrap); margin: 0 auto; padding: calc(20px * var(--sk)) var(--gut) calc(26px * var(--sk)); }
.cl-foot a { color: var(--ink-3); text-decoration: none; }
.cl-foot a:hover { color: var(--ink); text-decoration: underline; }
.cl-foot .cl-foot-end { margin-left: auto; }

/* signed in: side bar on the desktop, tab bar on the phone */
.cl-side, .cl-tabbar { display: none; }
@media (max-width: 999.98px) {
  .cl-in .cl-main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .cl-in .cl-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--glass); border-top: 1px solid var(--line);
    backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
  .cl-tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 4px; border-radius: calc(14px * var(--rk)); color: var(--ink-3); font-size: 11.5px; font-weight: 600; text-decoration: none; }
  .cl-tabbar a .ic { width: 24px; height: 24px; }
  .cl-tabbar a[aria-current="page"] { color: var(--accent-text); }
  .cl-tabbar a[aria-current="page"] .ic { stroke-width: 2.2; }
  .cl-in .cl-foot { display: none; }
}
@media (min-width: 1000px) {
  /* the whole width like ChatMate: the side bar at the left edge, the page next to it without a cap */
  .cl-in .cl-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
  .cl-in .cl-top { display: none; }
  .cl-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 22px; height: 100vh; padding: 26px 18px 20px; border-right: 1px solid var(--line); }
  .cl-side .cl-mark { padding: 0 12px; font-size: 32px; }
  .cl-side-nav { display: grid; gap: 4px; }
  .cl-side-nav a { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: calc(12px * var(--rk)); color: var(--ink-2); font: 500 15.5px/1.2 var(--text); text-decoration: none; transition: background-color .15s, color .15s; }
  .cl-side-nav a .ic { width: 23px; height: 23px; }
  .cl-side-nav a:hover { background: var(--surface-2); color: var(--ink); }
  .cl-side-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
  .cl-side-nav a[aria-current="page"] .ic { color: var(--accent); }
  .cl-side-nav a[aria-current="page"] .ic { stroke-width: 2.2; }
  .cl-wallet { display: grid; gap: 6px; margin-top: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
  .cl-wallet-n { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ink-2); font-size: 14px; }
  .cl-wallet-n b { color: var(--ink); font: 700 24px/1 var(--display); font-variant-numeric: tabular-nums; }
  .cl-wallet-n .cl-coin { font-size: 22px; }
  .cl-me-row { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
  .cl-me-name { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
  .cl-me-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
  .cl-me-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 12.5px; }
  .cl-in .cl-main { max-width: none; padding: 32px 40px 64px; }
  .cl-in .cl-foot-in { max-width: none; padding-inline: 40px; }
}

/* ---------- messages */
.cl-flash { display: flex; gap: 10px; align-items: center; margin: 0 0 20px; padding: 12px 16px; border-radius: var(--r-sm); font-size: 15px; font-weight: 500; }
.cl-flash .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.cl-flash.ok { background: var(--ok-soft); color: var(--ok); }
.cl-flash.err { background: var(--bad-soft); color: var(--bad); }
.cl-note { padding: 12px 16px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: 14.5px; }
.cl-note.gold { background: var(--gold-soft); color: var(--ink); }
.cl-note b { color: var(--ink); }

/* ---------- buttons */
.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: calc(12px * var(--rk));
  background: var(--accent); color: var(--accent-ink) !important; font: 600 15px/1 var(--text); text-decoration: none;
  cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
.cl-btn:hover { background: var(--accent-hover); }
.cl-btn:active { transform: scale(.985); }
.cl-btn.sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.cl-btn.lg { min-height: 50px; padding: 0 26px; font-size: 16px; }
.cl-btn.block { width: 100%; }
.cl-btn.ghost { background: var(--surface); color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 500; }
.cl-btn.ghost:hover { background: var(--surface-2); }
.cl-btn.soft { background: var(--accent-soft); color: var(--accent-text) !important; }
.cl-btn.soft:hover { background: rgba(201, 63, 128, .16); }
.cl-btn .ic { width: 19px; height: 19px; stroke-width: 2.1; }
.cl-btn[disabled], .cl-btn[aria-disabled="true"] { background: var(--surface-3); color: var(--ink-3) !important; box-shadow: none; cursor: not-allowed; transform: none; }
.cl-icon-btn { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: calc(12px * var(--rk));
  background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.cl-icon-btn:hover { background: var(--surface-2); color: var(--accent-text); border-color: var(--accent); }
.cl-icon-btn[disabled] { opacity: .55; cursor: not-allowed; background: var(--surface); color: var(--ink-3); border-color: var(--line); }
.cl-me-row .cl-icon-btn { width: 38px; height: 38px; border: 0; background: none; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-inline { display: inline; margin: 0; }

/* ---------- pictures, badges, pills */
.cl-ava { position: relative; display: grid; place-items: center; overflow: hidden; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--frame), var(--frame-strong)); color: var(--accent-text); font: 700 18px/1 var(--display); }
.cl-ava img { width: 100%; height: 100%; object-fit: cover; }
.cl-ava.xs { width: 36px; height: 36px; font-size: 15px; }
.cl-verified { display: inline-grid; place-items: center; flex: none; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--accent); color: var(--accent-ink); vertical-align: -.12em; }
.cl-verified .ic { width: 70%; height: 70%; stroke-width: 3.2; }
.cl-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: calc(8px * var(--rk)); background: var(--surface-2); color: var(--ink-2);
  font-size: 13px; font-weight: 600; white-space: nowrap; }
.cl-pill .cl-coin { font-size: 13px; }
.cl-pill .ic { width: 15px; height: 15px; }
.cl-pill.accent { background: var(--accent-soft); color: var(--accent-text); }
.cl-pill.ok { background: var(--ok-soft); color: var(--ok); }
.cl-pill.new { background: var(--gold-soft); color: var(--gold); }

/* ---------- cards and forms */
.cl-card { padding: calc(24px * var(--sk)); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.cl-card + .cl-card, .cl-card + .cl-section, .cl-section + .cl-card, .cl-balance + .cl-card { margin-top: 18px; }
.cl-balance + .cl-section { margin-top: 32px; }
/* the side bar has its own sign-out on the desktop */
@media (min-width: 1000px) { .cl-in .cl-phone-only { display: none; } }
.cl-card h2 { font-size: 20px; }
.cl-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cl-card-h a { flex: none; color: var(--accent-text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cl-narrow { max-width: 460px; margin: 0 auto; }
.cl-mid { max-width: 720px; margin: 0 auto; }
.cl-in .cl-mid { margin: 0; }

.cl-auth { padding-top: 20px; }
.cl-auth h1 { font-size: 32px; }
.cl-auth .cl-sub { margin: 8px 0 22px; }
.cl-form { display: grid; gap: 16px; }
.cl-field { display: grid; gap: 6px; }
.cl-field > span { font-size: 14px; font-weight: 650; }
.cl-field small { color: var(--ink-3); font-size: 13px; }
.cl-input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font: 400 16px/1.3 var(--text); transition: border-color .15s, box-shadow .15s; appearance: none; }
.cl-input::placeholder { color: var(--ink-3); }
.cl-input:hover { border-color: color-mix(in srgb, var(--line-2) 55%, var(--accent)); }
.cl-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.cl-input[type="date"] { padding-right: 12px; }
.cl-input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
.cl-check { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 14.5px; cursor: pointer; }
.cl-check input { appearance: none; display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1px solid var(--line-2);
  border-radius: calc(7px * var(--rk)); background: var(--surface); cursor: pointer; }
.cl-check input:checked { border-color: var(--accent); background: var(--accent); }
.cl-check input:checked::after { content: ""; width: 10px; height: 6px; margin-top: -2px; border: solid var(--accent-ink); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.cl-check input:focus-visible { box-shadow: var(--ring); }
.cl-form-err { padding: 11px 14px; border-radius: var(--r-sm); background: var(--bad-soft); color: var(--bad); font-size: 14.5px; }
.cl-alt { margin-top: 18px; color: var(--ink-2); font-size: 15px; text-align: center; }
.cl-alt a { color: var(--accent-text); font-weight: 650; text-decoration: none; }
.cl-alt a:hover { text-decoration: underline; }
.cl-pw { position: relative; display: block; }
.cl-pw .cl-input { padding-right: 96px; }
.cl-pw button { position: absolute; top: 7px; right: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: calc(10px * var(--rk)); background: none;
  color: var(--ink-2); font: 600 13px/1 var(--text); cursor: pointer; }
.cl-pw button:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- start page for visitors: what Chatly is, a glimpse of it, the creators */
.cl-hero { display: grid; gap: 18px; padding: 40px 24px; border-radius: calc(24px * var(--rk)); border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--frame) 0%, var(--surface) 60%); }
.cl-hero h1 { max-width: 14ch; font-size: clamp(36px, 7.4vw, 62px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }
.cl-hero h1 em { font-style: normal; color: var(--accent); }
.cl-hero > p { max-width: 44ch; color: var(--ink-2); font-size: clamp(16px, 2.2vw, 18.5px); }
.cl-hero .cl-actions { margin-top: 4px; }
.cl-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: 14px; }
.cl-facts span { display: inline-flex; align-items: center; gap: 7px; }
.cl-facts .ic { width: 17px; height: 17px; color: var(--accent); stroke-width: 2.4; }
.cl-facts b { color: var(--ink); font-weight: 650; }
.cl-hero-show { display: none; }
@media (min-width: 960px) {
  .cl-hero { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 56px; align-items: center; padding: 64px 56px; }
  .cl-hero > :not(.cl-hero-show) { grid-column: 1; }
  .cl-hero-show { display: grid; gap: 10px; grid-column: 2; grid-row: 1 / span 4; align-self: center; padding: 18px; border: 1px solid var(--line);
    border-radius: calc(24px * var(--rk)); background: var(--surface); box-shadow: var(--shadow-lg); }
}
.cl-hero-show .who { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-weight: 650; font-size: 15px; }
.cl-hero-show .who .cl-ava { width: 42px; height: 42px; font-size: 15px; }
.cl-hero-show .who small { display: flex; align-items: center; gap: 5px; color: var(--ok); font-weight: 500; font-size: 12.5px; }
.cl-hero-show .who small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.cl-bub { justify-self: start; width: fit-content; max-width: 84%; padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: var(--surface-2);
  color: var(--ink); font-size: 14.5px; line-height: 1.4; }
.cl-bub.me { justify-self: end; border-radius: 20px 20px 6px 20px; background: var(--accent); color: var(--accent-ink); }
.cl-locked { position: relative; display: grid; place-content: center; justify-items: center; gap: 10px; height: 160px; overflow: hidden; border-radius: calc(18px * var(--rk));
  color: #fff; font-size: 14px; font-weight: 650;
  background: radial-gradient(60% 80% at 30% 30%, #f6b3cd, transparent 70%), radial-gradient(70% 90% at 80% 70%, #d8a35a, transparent 70%), #7a2a50; }
.cl-locked::before { content: ""; position: absolute; inset: 0; background: rgba(42, 14, 27, .28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cl-locked > * { position: relative; }
.cl-locked .ic { width: 28px; height: 28px; stroke-width: 2; }
.cl-locked .cl-pill { background: rgba(255, 255, 255, .94); color: #2a0e1b; }

.cl-section { margin-top: calc(40px * var(--sk)); }
.cl-section:first-child { margin-top: 0; }
.cl-section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cl-section-h h1, .cl-section-h h2 { font-size: 26px; }
.cl-page-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: calc(22px * var(--sk)); }
.cl-page-h h1 { font-size: calc(clamp(28px, 5vw, 36px) * var(--hk)); }
.cl-page-h .cl-sub { margin-top: 4px; }

/* creator cards (discover) */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: calc(18px * var(--gap)); }
.cl-cover { aspect-ratio: 3 / 1; overflow: hidden; background: linear-gradient(120deg, var(--frame-strong), var(--frame) 50%, var(--surface-2)); }
.cl-cover img { width: 100%; height: 100%; object-fit: cover; }
.cl-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cl-name h3, .cl-name h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-handle { color: var(--ink-3); font-size: 14px; }

.cl-empty { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--ink-2); text-align: center; }
.cl-empty b { color: var(--ink); font: 650 19px/1.25 var(--display); }
.cl-empty-i { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.cl-empty-i .ic { width: 26px; height: 26px; }

/* ---------- a creator's profile */
.cl-prof-wrap { display: grid; gap: 24px; }
@media (min-width: 1240px) { .cl-prof-wrap { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.cl-prof { overflow: hidden; border: 1px solid var(--line); border-radius: calc(22px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); }
.cl-prof .cl-cover { aspect-ratio: 3 / 1; }
.cl-prof-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 22px; margin-top: -62px; }
.cl-prof-head .cl-ava { width: 124px; height: 124px; font-size: 42px; box-shadow: 0 0 0 5px var(--surface); }
@media (max-width: 599.98px) { .cl-prof-head { padding: 0 16px; margin-top: -46px; } .cl-prof-head .cl-ava { width: 96px; height: 96px; font-size: 32px; box-shadow: 0 0 0 4px var(--surface); }
  .cl-prof-id, .cl-prof-bio { padding-inline: 16px; } .cl-sub-box { margin-inline: 16px; } .cl-prof-feed { padding: 16px; }
  .cl-prof-feed:has(.cl-post) { padding: 0; }
  .cl-prof-feed .cl-post { padding: 16px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  .cl-prof-feed .cl-post > :not(.cl-post-media):not(.cl-post-locked) { margin-inline: 16px; }
  .cl-prof-feed .cl-post-media, .cl-prof-feed .cl-post-locked { border-radius: 0; } }
.cl-prof-tools { display: flex; gap: 8px; padding-bottom: 6px; }
.cl-prof-id { padding: 14px 22px 0; }
.cl-prof-id h1 { font-size: clamp(25px, 4.4vw, 32px); }
.cl-prof-id .cl-verified { font-size: 22px; }
.cl-prof-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; }
.cl-prof-bio { padding: 14px 22px 0; color: var(--ink-2); font-size: 15.5px; white-space: pre-line; }
.cl-sub-box { display: grid; gap: 12px; margin: 20px 22px 0; }
.cl-sub-box > span { color: var(--ink-3); font-size: 13px; font-weight: 650; }
.cl-sub-marks { display: flex; flex-wrap: wrap; gap: 8px; }
/* her picture/video request switches in the studio (2026-10-29): a label with a short note, the toggle on the right */
.cl-req-rows { display: grid; gap: 4px; }
.cl-req-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; }
.cl-req-row:first-child { padding-top: 4px; border-top: 0; }
.cl-req-row > span:first-child { display: grid; gap: 2px; min-width: 0; }
.cl-req-row b { font-size: 15px; font-weight: 650; }
.cl-req-row small { color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.cl-req-row .cl-switch { flex: none; }
/* discovery location map (2026-10-30): a calm Chatly-toned map to drop a pin on (not a real place); soft water + a few land blobs */
/* real map (2026-10-30): Leaflet + OpenStreetMap, self-hosted; styled in Chatly colours */
.cl-mapwrap { display: grid; gap: 7px; }
.cl-map { height: 300px; border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-2); z-index: 0; }
.cl-map.cl-map-off { display: grid; place-items: center; padding: 16px; text-align: center; color: var(--ink-3); font-size: 13px; }
.cl-map.cl-map-off::after { content: "Karte konnte nicht geladen werden – lade die Seite neu."; }
.cl-map-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12.5px; }
.cl-map-hint .ic { width: 15px; height: 15px; fill: var(--accent); }
.cl-pin { display: block; line-height: 0; background: none; border: 0; cursor: grab; }
.cl-pin:active { cursor: grabbing; }
.cl-pin svg { display: block; width: 34px; height: 34px; fill: var(--accent); stroke: #fff; stroke-width: 1.3; filter: drop-shadow(0 2px 3px rgba(20, 18, 15, .35)); }
.cl-pin svg circle { fill: #fff; stroke: none; }
/* MapLibre controls kept light so the dark +/- icons stay readable (the positron basemap is light in both themes) */
.maplibregl-map { font: inherit; }
.maplibregl-ctrl-group { background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 4px rgba(20, 18, 15, .18); }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
.maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(255, 255, 255, .9); }
.maplibregl-ctrl-attrib a { color: #4a4a4a; }
.cl-map-anon { display: inline-flex; align-items: center; gap: 8px; width: max-content; cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.cl-map-anon input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.cl-mapwrap.is-anon .cl-map { opacity: .5; }
.cl-mapwrap.is-anon .cl-map-hint { opacity: .45; }
/* fan profiles + friends (package social, 2026-10-30) */
.cl-cols { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 760px) { .cl-cols { grid-template-columns: 1fr; } }
.cl-ava.lg { width: 84px; height: 84px; font-size: 30px; }
.cl-form-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.cl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.cl-gallery-item { position: relative; margin: 0; aspect-ratio: 1; border-radius: calc(12px * var(--rk)); overflow: hidden; background: var(--surface-2); }
.cl-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px; background: linear-gradient(to top, rgba(20, 18, 15, .6), transparent); }
.cl-gallery-item.is-avatar { outline: 2px solid var(--accent); outline-offset: -2px; }
.cl-gallery-item form { display: inline; }
.cl-chip-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #2a0e1b; cursor: pointer; }
.cl-chip-btn .ic { width: 16px; height: 16px; }
.cl-chip-btn.danger { color: #c02a4d; }
.cl-file span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px dashed var(--line); border-radius: calc(12px * var(--rk)); color: var(--ink-2); font-weight: 600; font-size: 14px; }
.cl-file span .ic { width: 18px; height: 18px; }
.cl-member-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cl-member-id { flex: 1; min-width: 0; }
.cl-member-id h1 { font-size: 24px; margin: 0; }
.cl-member-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-member-bio { margin: 16px 0 0; white-space: pre-wrap; color: var(--ink-2); line-height: 1.6; }
.cl-friendslock { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 28px 16px; margin-top: 16px; border-radius: calc(14px * var(--rk)); background: var(--surface-2); color: var(--ink-2); }
.cl-friendslock-i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); }
.cl-friendslock-i .ic { width: 20px; height: 20px; }
.cl-friendslock b { color: var(--ink); }
.cl-friendslock p { font-size: 13.5px; }
.cl-mates { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.cl-mates li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--line); }
.cl-mates li:first-child { border-top: 0; }
.cl-mate { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; font-weight: 600; }
.cl-mate .cl-ava { width: 40px; height: 40px; font-size: 15px; }
.cl-mate-act { display: flex; align-items: center; gap: 6px; flex: none; }
.cl-mate-act form { display: inline; }
.cl-place { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.cl-place .ic { width: 15px; height: 15px; fill: var(--accent); }
.cl-prof-friend { margin-top: 8px; }
.cl-prof-friend form { display: flex; }
.cl-prof-friend .cl-btn { width: 100%; justify-content: center; }
@media (min-width: 600px) { .cl-prof-friend { display: inline-flex; } .cl-prof-friend .cl-btn { width: auto; } }
/* discovery filter bar (2026-10-30): gender, age, "in der Nähe", on one calm row */
.cl-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.cl-filterbar select.cl-input { width: auto; min-width: 0; height: 38px; padding-block: 0; }
.cl-filterbar .cl-btn.sm.is-on { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent); }
.cl-filter-clear { margin-left: 2px; }
/* onboarding wizard (2026-10-30): a short questionnaire after sign-up, skippable */
.cl-onb { text-align: center; padding-bottom: 40px; }
.cl-onb-i { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.cl-onb-i .ic { width: 30px; height: 30px; }
.cl-onb-form { display: grid; gap: 24px; margin-top: 26px; text-align: left; }
.cl-onb-q { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.cl-onb-q legend { float: left; width: 100%; padding: 0; font-size: 16px; font-weight: 650; color: var(--ink); }
.cl-onb-q .cl-muted { margin: -4px 0 2px; }
.cl-onb-f { margin-top: 4px; }
.cl-onb-skip { margin-top: 16px; text-align: center; }
/* chat composer "+" extras (feinschliff 10): gift, tip and the request as a small menu, so the text field keeps room at 390 px */
.cl-extras .cl-pop-in { width: max-content; min-width: 186px; padding: 8px; }
.cl-extras-menu { display: grid; gap: 2px; }
.cl-extras-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: calc(10px * var(--rk));
  background: none; color: var(--ink); font: 600 15px/1.2 var(--text); text-align: left; cursor: pointer; }
.cl-extras-menu button:hover { background: var(--surface-2); }
.cl-extras-menu button .ic { width: 20px; height: 20px; color: var(--accent); flex: none; }
.cl-composer .cl-extras > summary.is-off { opacity: .5; pointer-events: none; }
/* admin mailbox (2026-10-30): replies to Chatly mails, list + reading pane like /admin/mails */
.cl-mails-list a.is-unread b { font-weight: 700; }
.cl-mails-list a.is-unread b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.cl-mailbox-view { display: grid; gap: 10px; align-content: start; }
.cl-mailbox-view h2 { font-size: 20px; }
.cl-mailbox-body { margin: 4px 0 0; padding: 14px 16px; border-radius: calc(12px * var(--rk)); background: var(--surface-2); color: var(--ink);
  font: 400 14.5px/1.6 var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.cl-back-sm { display: inline-flex; align-items: center; gap: 5px; width: max-content; color: var(--ink-3); font-size: 13px; font-weight: 600; text-decoration: none; }
.cl-back-sm .ic { width: 16px; height: 16px; }
.cl-sub-box .cl-btn:has(b) { justify-content: space-between; }
.cl-sub-box .cl-btn b { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.cl-sub-box small { color: var(--ink-3); font-size: 13px; text-align: center; }
.cl-prices { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 22px; border-top: 1px solid var(--line); }
.cl-tabs span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; border-bottom: 2px solid transparent;
  color: var(--ink-3); font-size: 14.5px; font-weight: 600; }
.cl-tabs span .ic { width: 18px; height: 18px; }
.cl-tabs span[aria-current="page"] { border-color: var(--accent); color: var(--ink); }
.cl-prof-feed { padding: 22px; }
.cl-prof-feed .cl-empty { border-style: solid; border-color: var(--line); border-width: 1px; background: var(--ground); }
.cl-draft { margin-bottom: 18px; }

/* the right rail: more creators */
.cl-rail { display: grid; gap: 12px; align-content: start; }
@media (min-width: 1240px) { .cl-rail { position: sticky; top: calc(var(--top-h, 64px) + 20px); } }

/* ---------- account and coins */
.cl-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.cl-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.cl-steps li:first-child { border-top: 0; padding-top: 4px; }
.cl-steps li:last-child { padding-bottom: 0; }
.cl-step-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); }
.cl-steps li.done .cl-step-i { background: var(--ok-soft); color: var(--ok); }
.cl-steps li.done .cl-step-i .ic { stroke-width: 2.6; }
.cl-steps b { display: block; font-size: 15.5px; }
.cl-steps p { color: var(--ink-3); font-size: 14px; }
@media (max-width: 520px) { .cl-steps li { grid-template-columns: 40px minmax(0, 1fr); } .cl-steps li > :nth-child(3) { grid-column: 2; justify-self: start; } }

.cl-balance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cl-balance-n { display: flex; align-items: center; gap: 12px; margin-top: 4px; font: 700 clamp(36px, 7vw, 48px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cl-balance-n .cl-coin { font-size: .74em; }
.cl-balance-n small { color: var(--ink-3); font: 600 16px/1 var(--text); letter-spacing: 0; }

.cl-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.cl-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.cl-rows li:first-child { border-top: 0; padding-top: 0; }
.cl-rows li:last-child { padding-bottom: 0; }
.cl-rows .when { color: var(--ink-3); font-size: 13px; }
.cl-rows .amt { grid-row: span 2; align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-rows .amt.plus { color: var(--ok); }

.cl-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin-top: 14px; }
.cl-packs > .cl-pack:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) { .cl-packs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .cl-packs > .cl-pack:last-child:nth-child(odd) { grid-column: auto; } }
.cl-pack { position: relative; display: grid; gap: 4px; align-content: start; padding: 22px 16px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-pack:has(.cl-pack-bonus) { border-color: color-mix(in srgb, var(--gold-edge) 55%, var(--line)); }
.cl-pack-n { display: flex; align-items: center; gap: 8px; font: 700 clamp(24px, 6vw, 30px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cl-pack-n .cl-coin { font-size: .8em; }
.cl-pack-bonus { position: absolute; top: -11px; right: 12px; padding: 3px 8px; border-radius: calc(8px * var(--rk)); background: var(--gold-face); color: #2a1a00; font-size: 12px; font-weight: 700; }
.cl-pack-price { margin: 6px 0 14px; color: var(--ink-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.cl-section > .cl-note + .cl-note { margin-top: 10px; }

.cl-sum { display: grid; margin: 0 0 20px; }
.cl-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cl-sum div:first-child { border-top: 0; padding-top: 0; }
.cl-sum dt { color: var(--ink-2); }
.cl-sum dd { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; }

/* ---------- soon (not open yet) and errors */
.cl-err { display: grid; justify-items: center; gap: 10px; padding: 48px 0; text-align: center; }
.cl-err-code { color: var(--accent); font: 750 68px/1 var(--display); letter-spacing: -.04em; }
.cl-err p { max-width: 46ch; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { .cl-btn, .cl-side-nav a { transition: none; } }

/* =====================================================================================================================
   Chatly as its own program (2026-10-25): posts, chat, studio, admin. Same tokens, same calm.
   ===================================================================================================================== */

/* small things */
.cl-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font: 700 11.5px/1 var(--text); font-variant-numeric: tabular-nums; }
.cl-tabbar a { position: relative; }
.cl-dot { position: absolute; top: 6px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.cl-state { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 8px; font-weight: 650; color: var(--ink-2); }
.cl-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.cl-state.on { color: var(--ok); }
.cl-state.on::before { background: var(--ok); }
.cl-link-btn { padding: 0; border: 0; background: none; color: var(--accent-text); font: 600 14px/1.4 var(--text); cursor: pointer; }
.cl-link-btn:hover { text-decoration: underline; }
@media (max-width: 520px) { .cl-hide-phone { display: none; } }
.cl-stat { color: var(--ink-3); font-size: 14px; }
.cl-stat b { color: var(--ink); font-weight: 650; }
.cl-kicker { color: var(--accent-text); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* forms: selects, textareas, grids */
textarea.cl-input { min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
select.cl-input { padding-right: 38px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b74' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; cursor: pointer; }
.cl-input.sm { min-height: 38px; padding: 0 10px; font-size: 14px; }
select.cl-input.sm { padding-right: 30px; background-position: right 8px center; }
.cl-input.num { width: 96px; }
.cl-form-2, .cl-form-3 { display: grid; gap: 14px 16px; }
@media (min-width: 640px) { .cl-form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-form-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-form-2 .wide { grid-column: 1 / -1; } }
.cl-form-2 > .cl-btn, .cl-form-3 > .cl-btn { justify-self: start; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-chips label { position: relative; }
.cl-chips input { position: absolute; opacity: 0; }
.cl-chips span { display: inline-grid; place-items: center; min-width: 54px; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: calc(10px * var(--rk));
  background: var(--surface); font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer; }
.cl-chips input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.cl-chips input:focus-visible + span { box-shadow: var(--ring); }
.cl-search { display: flex; gap: 10px; margin-bottom: 16px; max-width: 520px; }

/* popovers (details/summary): a small panel next to its button, closes on a click outside (chatly.js) */
.cl-pop { position: relative; }
.cl-pop > summary { list-style: none; }
.cl-pop > summary::-webkit-details-marker { display: none; }
.cl-pop-in { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: 280px; padding: 16px; border: 1px solid var(--line); border-radius: calc(16px * var(--rk));
  background: var(--surface); box-shadow: var(--shadow-lg); }
.cl-pop.end .cl-pop-in { left: auto; right: 0; }
.cl-pop.up .cl-pop-in { top: auto; bottom: calc(100% + 8px); }
.cl-pop-in.wide { width: min(360px, calc(100vw - 32px)); }
.cl-pop-in.cl-form { gap: 12px; }
.cl-menu { display: grid; gap: 2px; width: 220px; padding: 6px; }
.cl-menu button { width: 100%; padding: 10px 12px; border: 0; border-radius: calc(10px * var(--rk)); background: none; color: var(--ink); font: 500 14.5px/1.3 var(--text); text-align: left; cursor: pointer; }
.cl-menu button:hover { background: var(--surface-2); }

/* the band for creators on the start page */
.cl-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; padding: 18px 22px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-band > div { display: grid; gap: 2px; }

/* ---------- posts */
.cl-feed { max-width: 680px; }
.cl-post { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-post + .cl-post, .cl-empty + .cl-post { margin-top: 16px; }
.cl-post-h { display: flex; align-items: center; gap: 10px; }
.cl-post-h .cl-ava { text-decoration: none; }
.cl-post-who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.cl-post-who a { color: var(--ink); text-decoration: none; }
.cl-post-who .cl-muted { font-size: 13px; }
.cl-post-body { white-space: pre-line; }
.cl-post-media { display: grid; gap: 4px; overflow: hidden; border-radius: calc(14px * var(--rk)); }
.cl-post-media.many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-media { display: block; width: 100%; background: var(--surface-2); }
.cl-post-media.one .cl-media img, .cl-post-media.one video.cl-media { width: 100%; max-height: 720px; object-fit: contain; background: #111; }
.cl-post-media.many .cl-media img, .cl-post-media.many video.cl-media { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cl-locked-age { display: grid; place-content: center; justify-items: center; gap: 8px; aspect-ratio: 4 / 5; border-radius: calc(10px * var(--rk)); background: var(--surface-2); color: var(--ink-2); }
.cl-post-locked { position: relative; display: grid; place-items: center; min-height: 260px; overflow: hidden; border-radius: calc(14px * var(--rk));
  background: linear-gradient(135deg, #3a2030, #6d2a4c); }
.cl-post-locked > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-post-locked::after { content: ""; position: absolute; inset: 0; background: rgba(20, 10, 16, .35); }
.cl-post-locked-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; padding: 24px; color: #fff; text-align: center; }
.cl-post-locked-in > .ic { width: 30px; height: 30px; stroke-width: 2; }
.cl-muted-on { color: rgba(255, 255, 255, .88); font-weight: 600; }
.cl-sub-on { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; }

/* ---------- lists (chats, subscribers, posts, settings) */
.cl-list { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-list.flat { border: 0; border-radius: 0; background: none; }
.cl-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cl-row:first-child { border-top: 0; }
.cl-list.flat .cl-row { padding-inline: 0; }
a.cl-row:hover { background: var(--ground); }
.cl-row-main { display: grid; flex: 1; min-width: 0; gap: 2px; }
.cl-row-text { overflow: hidden; color: var(--ink-3); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cl-row.unread .cl-row-text { color: var(--ink-2); font-weight: 600; }
.cl-row-end { display: grid; justify-items: end; gap: 4px; flex: none; }
.cl-row-end .cl-badge { margin: 0; }
.cl-row-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; }
.cl-setting { align-items: flex-start; }
.cl-setting .cl-row-text { white-space: normal; }
@media (max-width: 640px) { .cl-setting, .cl-row:has(.cl-row-form) { flex-wrap: wrap; } }
.cl-ava.sq { border-radius: calc(10px * var(--rk)); }
.cl-ava .ic { width: 18px; height: 18px; }

/* ---------- chat */
.cl-chat { display: flex; flex-direction: column; max-width: 760px; min-height: calc(100vh - 140px); }
.cl-chat-h { position: sticky; top: 64px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; background: var(--ground); border-bottom: 1px solid var(--line); }
@media (min-width: 1000px) { .cl-chat-h { top: 0; } }
.cl-chat-who { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
.cl-chat-who > span:last-child { display: grid; min-width: 0; }
.cl-chat-who b { display: inline; font-size: 16px; }
.cl-chat-who .cl-verified { font-size: 15px; margin-left: 4px; }
.cl-msgs { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 0; }
.cl-msgs-start { margin: auto; color: var(--ink-3); }
.cl-msg { display: grid; justify-items: start; gap: 4px; max-width: 78%; }
.cl-msg.mine { justify-items: end; margin-left: auto; }
.cl-bubble { display: grid; gap: 4px; padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: var(--surface); border: 1px solid var(--line); white-space: pre-line; overflow-wrap: anywhere; }
.cl-msg.mine .cl-bubble { border: 0; border-radius: 20px 20px 6px 20px; background: var(--accent); color: var(--accent-ink); }
.cl-tipline, .cl-paidline { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; }
.cl-paidline { color: var(--gold); }
.cl-msg.mine .cl-paidline { color: rgba(255, 255, 255, .85); }
.cl-msg-media { position: relative; overflow: hidden; border-radius: calc(16px * var(--rk)); max-width: 320px; }
.cl-msg-media img, .cl-msg-media video { display: block; width: 100%; max-height: 420px; object-fit: cover; background: var(--surface-2); }
.cl-msg-media .cl-pill { position: absolute; top: 8px; right: 8px; }
.cl-ppv { position: relative; display: grid; place-items: center; min-width: 240px; min-height: 220px; background: linear-gradient(135deg, #3a2030, #6d2a4c); }
.cl-ppv > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-ppv::after { content: ""; position: absolute; inset: 0; background: rgba(20, 10, 16, .35); }
.cl-ppv-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; color: #fff; }
.cl-ppv-in .ic { width: 28px; height: 28px; }
/* a fan's video while his marked copy is being made (chatly.js "videos"): the box of a locked one, a line that says so */
.cl-vbox { position: relative; display: block; }
:where(.cl-vbox.is-wait) video { aspect-ratio: 16 / 9; min-height: 180px; }
.cl-vbox.is-wait video { background: linear-gradient(135deg, #3a2030, #6d2a4c); }
.cl-vstate { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 16px; text-align: center; color: #fff; background: rgba(20, 10, 16, .35); }
.cl-vstate b { font-size: 15px; font-weight: 700; }
.cl-vstate small { max-width: 30ch; color: rgba(255, 255, 255, .8); font-size: 13px; }
.cl-vstate .ic { width: 28px; height: 28px; }
.cl-vspin { width: 26px; height: 26px; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: cl-vspin .9s linear infinite; }
@keyframes cl-vspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cl-vspin { animation-duration: 2.4s; } }
.cl-msg-at { color: var(--ink-3); font-size: 12px; }
/* a line of the chat itself, not somebody's message (his heart from "Kennenlernen"): in the middle, quiet, the same on both sides */
.cl-msg.cl-sys { justify-items: center; max-width: 100%; margin: 4px auto; text-align: center; }
/* as wide as its words (one line where there is room); when it has to wrap, the lines fill the box (no early break that left
   an empty strip on the right - owner 2026-10-29) */
.cl-sys-in { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 9px 15px; border-radius: calc(16px * var(--rk));
  background: var(--accent-soft); color: var(--accent-text); font-size: 13.5px; font-weight: 600; line-height: 1.4; text-align: start; }
.cl-sys-in .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
/* her answer buttons under an open picture request (2026-10-29): accept / decline / report, centred below the line */
.cl-sys-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 9px; }
.cl-team { padding: 1px 7px; border-radius: calc(6px * var(--rk)); background: var(--surface-2); color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cl-mvideo { display: grid; place-items: center; width: 100%; height: 100%; min-height: 80px; background: var(--surface-2); color: var(--ink-3); }
.cl-composer { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 8px; padding: 12px 0; background: var(--ground); border-top: 1px solid var(--line); }
@media (max-width: 999.98px) {
  .cl-in .cl-composer { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .cl-in:has(.cl-chat[data-chat]) .cl-tabbar { display: none; }
  .cl-in:has(.cl-chat[data-chat]) .cl-composer { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .cl-in:has(.cl-chat[data-chat]) .cl-main { padding-bottom: 0; }
}
@media (max-width: 599.98px) { .cl-chat-hint > span:first-child { display: none; } .cl-chat-hint { justify-content: flex-end; } }
.cl-composer textarea { flex: 1; min-height: 46px; max-height: 160px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: calc(14px * var(--rk)); background: var(--surface);
  color: var(--ink); font: 400 15.5px/1.4 var(--text); resize: none; }
.cl-composer textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.cl-send { flex: none; min-height: 46px; padding: 0 16px; }
.cl-send-price { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; }
.cl-send-price .cl-coin { font-size: 13px; }
.cl-chat-hint { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding-bottom: 6px; color: var(--ink-3); font-size: 13px; }
.cl-chat-hint b { color: var(--ink-2); font-weight: 650; }
.cl-chat-hint a { margin-left: 4px; font-weight: 600; }
.cl-chat-hint a { color: var(--accent-text); }

/* ---------- creators' page */
.cl-join-hero { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .cl-join-hero { grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; padding-top: 24px; } }
.cl-join-hero h1 { margin: 10px 0 14px; font-size: clamp(34px, 6vw, 54px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.cl-join-hero h1 em { font-style: normal; color: var(--accent); }
.cl-ticks { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.cl-ticks li { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.cl-ticks .ic { color: var(--accent); stroke-width: 2.4; }
.cl-join-hero .cl-card h2 { margin-bottom: 4px; }
.cl-join-hero .cl-card .cl-muted { margin-bottom: 16px; }

/* ---------- studio */
.cl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (min-width: 900px) { .cl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cl-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cl-tile { display: grid; align-content: start; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-tile > span { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.cl-tile b { display: flex; align-items: center; gap: 8px; font: 700 26px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.cl-tile b .cl-coin { font-size: 20px; }
.cl-tile small { color: var(--ink-3); font-size: 13px; }
.cl-tile small a { color: var(--accent-text); text-decoration: none; }
.cl-two { display: grid; gap: 18px; }
@media (min-width: 1000px) { .cl-two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .cl-two .cl-card + .cl-card { margin-top: 0; } }
.cl-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-top: 12px; }
.cl-doc { display: grid; justify-items: start; gap: 6px; padding: 14px; border: 1px dashed var(--line-2); border-radius: calc(14px * var(--rk)); color: var(--ink); text-decoration: none; }
.cl-doc.done { border-style: solid; border-color: var(--line); }
.cl-doc.done .cl-step-i { background: var(--ok-soft); color: var(--ok); }
.cl-file { position: relative; overflow: hidden; }
.cl-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cl-upload { display: grid; gap: 16px; }
.cl-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border: 1.5px dashed var(--line-2); border-radius: calc(16px * var(--rk));
  background: var(--ground); text-align: center; cursor: pointer; }
.cl-drop:hover, .cl-drop:focus-within { border-color: var(--accent); }
.cl-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cl-drop .ic { width: 28px; height: 28px; color: var(--accent); }
.cl-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.cl-mitem { display: grid; gap: 8px; }
.cl-mthumb { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: calc(14px * var(--rk)); background: var(--surface-2); }
.cl-mthumb img { width: 100%; height: 100%; object-fit: cover; }
.cl-fsk { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: calc(6px * var(--rk)); background: rgba(20, 20, 19, .7); color: #fff; font-size: 11.5px; font-weight: 700; }
.cl-mform { display: flex; gap: 6px; }
.cl-mform .cl-input:first-of-type { flex: 1; min-width: 0; }
.cl-mform .cl-icon-btn { width: 38px; height: 38px; }
.cl-mdel { justify-self: start; }
.cl-pick { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cl-pick legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 650; }
.cl-pick-l { font-size: 14px; font-weight: 650; }
.cl-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); grid-auto-rows: max-content; gap: 8px; max-height: 280px; overflow-y: auto; padding: 3px; }
.cl-buy-sum .short { color: var(--bad); font-weight: 650; }
.cl-pics.wide { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.cl-pics.small { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); max-height: 220px; }
.cl-pic { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: calc(10px * var(--rk)); background: var(--surface-2); cursor: pointer; }
.cl-pics.wide .cl-pic { aspect-ratio: 16 / 9; }
.cl-pic input { position: absolute; opacity: 0; pointer-events: none; }
.cl-pic img { width: 100%; height: 100%; object-fit: cover; }
.cl-pic.none { display: grid; place-items: center; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.cl-pic:has(input:checked) { box-shadow: 0 0 0 2.5px var(--accent); }
.cl-pic:has(input:checked)::after { content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cl-pic:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-keybox { display: grid; gap: 8px; justify-items: start; margin: 16px 0; padding: 16px; border: 1px solid var(--gold-edge); border-radius: calc(14px * var(--rk)); background: var(--gold-soft); }
.cl-keybox code { padding: 8px 10px; border-radius: calc(8px * var(--rk)); background: var(--surface); font: 600 14px/1.3 ui-monospace, Consolas, monospace; word-break: break-all; }
.cl-card .cl-actions { margin-top: 16px; }

/* ---------- admin tables */
.cl-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cl-table th { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 13px; font-weight: 650; text-align: left; white-space: nowrap; }
.cl-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.cl-table tbody tr:first-child td { border-top: 0; }
.cl-table td small { display: block; color: var(--ink-3); font-size: 13px; }
.cl-table .r { text-align: right; }
.cl-table td .cl-pill + .cl-pill { margin-left: 4px; }

/* fixes after the first screenshots (2026-10-25) */
.cl-name-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cl-name-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-chat-who .cl-name-row .cl-verified { margin-left: 0; }
@media (min-width: 1000px) { .cl-side-nav + .cl-me-row { margin-top: auto; } }
.cl-msg-media { max-width: 280px; }
.cl-msg-media img, .cl-msg-media video { max-height: 340px; }

/* ---------- payout statements (2026-10-25) */
.cl-stmt-head { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.cl-stmt-head > div { display: grid; gap: 2px; }
.cl-stmt-head small { color: var(--ink-3); font-size: 13px; }
.cl-label { font-size: 13px; font-weight: 650; color: var(--ink-3); }
.cl-stmt-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px 0; padding: 14px 16px; border-radius: calc(12px * var(--rk)); background: var(--accent-soft); }
.cl-stmt-total b { font-size: 22px; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.cl-muted.small { font-size: 12px; }
@media print {
  .cl-side, .cl-tabbar, .cl-topbar, .cl-foot, .cl-noprint { display: none !important; }
  .cl-main, .cl-col { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  body { background: #fff !important; }
  .cl-card { box-shadow: none !important; border: 0 !important; }
}
.cl-table tfoot td { border-top: 1px solid var(--line); font-weight: 700; }
.cl-table td.r, .cl-table th.r { font-variant-numeric: tabular-nums; }

/* hidden always wins over component display rules */
[hidden] { display: none !important; }
.cl-muted-on { color: rgba(255, 255, 255, .75); font-size: 14px; }

/* ---------- landing page for visitors (2026-10-25: "das chatly design und die landing muss perfekt sein") */
.cl-out .cl-main:has(.cl-land) { max-width: none; padding: 0 0 24px; }
.cl-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.cl-land-sec { padding-block: calc(56px * var(--sec) * var(--bp, 1)) calc(8px * var(--sec) * var(--bp, 1)); }
.cl-land-band { margin-top: calc(56px * var(--sec)); background: var(--surface); border-block: 1px solid var(--line); }
.cl-land-band .cl-land-sec { padding-block: calc(56px * var(--sec) * var(--bp, 1)); }
.cl-land-h { display: grid; gap: 8px; max-width: 640px; margin-bottom: calc(28px * var(--sk)); }
.cl-land-h h2, .cl-land-sec > .cl-section-h h2 { font-size: calc(clamp(26px, 4.4vw, 38px) * var(--hk)); letter-spacing: -.03em; }
.cl-eyebrow { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.cl-eyebrow.plain { padding: 0; background: none; box-shadow: none; color: var(--accent-text); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.cl-eyebrow.light { color: rgba(255, 255, 255, .85); }

/* hero: text left, the slide show right */
.cl-land-hero { position: relative; overflow: hidden; padding-block: calc(40px * var(--sec) * var(--bp, 1)) calc(24px * var(--sec) * var(--bp, 1));
  background: radial-gradient(70% 60% at 85% 20%, rgba(201, 63, 128, .14), transparent 70%), radial-gradient(60% 50% at 10% 90%, rgba(226, 178, 76, .12), transparent 70%); }
.cl-land-hero-in { display: grid; gap: 36px; align-items: center; }
.cl-land-copy { display: grid; gap: 18px; justify-items: start; }
.cl-land-copy h1 { font-size: calc(clamp(42px, 9vw, 76px) * var(--hk)); letter-spacing: -.045em; line-height: .98; }
.cl-land-copy h1 em { font-style: normal; background: linear-gradient(135deg, #b02a68, #e0679f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-lead { max-width: 46ch; color: var(--ink-2); font-size: clamp(16.5px, 2.3vw, 19px); line-height: 1.55; }
.cl-land-copy .cl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-land-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.cl-land-facts li { display: inline-flex; align-items: center; gap: 7px; }
.cl-land-facts .ic { width: 17px; height: 17px; color: var(--ok); stroke-width: 2.4; }
@media (min-width: 960px) {
  .cl-land-hero { padding-block: calc(72px * var(--sec) * var(--bp, 1)) calc(40px * var(--sec) * var(--bp, 1)); }
  .cl-land-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; }
}

.cl-show { position: relative; width: 100%; max-width: 440px; justify-self: center; }
.cl-show-stack span { position: absolute; inset: 0 0 46px; border-radius: calc(28px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); }
.cl-show-stack span:first-child { transform: rotate(-6deg) translate(-18px, 10px); background: linear-gradient(160deg, #f6c3da, #f4d9b7); }
.cl-show-stack span:last-child { transform: rotate(4deg) translate(14px, 6px); background: linear-gradient(160deg, #d8c6f0, #f3c1d6); }
.cl-show-frame { position: relative; aspect-ratio: 4 / 5; border-radius: calc(28px * var(--rk)); overflow: hidden; background: var(--surface-3); box-shadow: var(--shadow-lg); }
.cl-slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .8s ease; text-decoration: none; }
.cl-slide.is-on { opacity: 1; z-index: 1; }
.cl-slide > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s ease-out; }
.cl-slide.is-on > img { transform: scale(1); }
.cl-slide-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px;
  border-radius: calc(18px * var(--rk)); background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 24px rgba(20, 18, 15, .18); }
.cl-slide-cap .cl-ava { width: 46px; height: 46px; }
.cl-slide-who { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.cl-slide-who b { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; }
.cl-slide-who small { color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-slide-go { flex: none; padding: 8px 13px; border-radius: calc(11px * var(--rk)); background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; }
.cl-show-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.cl-show-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: width .3s ease, background .3s ease; }
.cl-show-dots button.is-on { width: 26px; background: var(--accent); }
.cl-show-dots button:focus-visible { box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) { .cl-slide, .cl-slide > img { transition: none; } }

.cl-cover { position: relative; }
.cl-land-more { display: flex; justify-content: center; margin-top: calc(24px * var(--sk)); }

/* steps */
.cl-how { display: grid; gap: calc(14px * var(--gap)); margin: 0; padding: 0; list-style: none; counter-reset: s; }
.cl-how li { display: grid; gap: 6px; padding: calc(20px * var(--sk)); border-radius: var(--r); background: var(--ground); border: 1px solid var(--line); }
.cl-how b { font-family: var(--display); font-size: 18px; }
.cl-how p { color: var(--ink-2); font-size: 14.5px; }
.cl-how-n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: calc(11px * var(--rk)); background: var(--accent); color: #fff; font: 700 16px var(--display); }
@media (min-width: 720px) { .cl-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cl-how { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* features */
.cl-features { display: grid; gap: calc(14px * var(--gap)); }
.cl-feature { display: grid; align-content: start; gap: 10px; padding: calc(22px * var(--sk)); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cl-feature h3 { font-size: 19px; }
.cl-feature p { color: var(--ink-2); font-size: 14.5px; }
.cl-feature-i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: calc(13px * var(--rk)); background: var(--accent-soft); color: var(--accent-text); }
.cl-feature-i .ic { width: 21px; height: 21px; }
.cl-feature-demo { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.cl-feature-demo .cl-bub { max-width: 90%; }
@media (min-width: 720px) { .cl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cl-features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* coin packages */
.cl-lpacks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cl-lpack { position: relative; display: grid; justify-items: center; gap: 2px; padding: 22px 12px 18px; border-radius: var(--r); background: var(--ground); border: 1px solid var(--line); text-align: center; }
.cl-lpack b { display: inline-flex; align-items: center; gap: 7px; font: 700 26px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cl-lpack b .cl-coin { font-size: 22px; }
.cl-lpack small { color: var(--ink-3); font-size: 13px; }
.cl-lpack-price { margin-top: 8px; padding: 6px 14px; border-radius: calc(10px * var(--rk)); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.cl-lpack.is-top { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cl-lpack.is-top .cl-lpack-price { background: var(--accent); color: #fff; box-shadow: none; }
.cl-lpack-flag { position: absolute; top: -11px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.cl-land-note { margin-top: 16px; text-align: center; }
@media (min-width: 720px) { .cl-lpacks { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* safety */
.cl-trust { display: grid; gap: calc(14px * var(--gap)); }
.cl-trust > div { display: grid; gap: 8px; align-content: start; padding: calc(20px * var(--sk)); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.cl-trust b { font-family: var(--display); font-size: 17.5px; }
.cl-trust p { color: var(--ink-2); font-size: 14.5px; }
@media (min-width: 720px) { .cl-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cl-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* for creators: a dark band */
.cl-land-creator { display: grid; gap: 22px; align-items: center; padding: 34px 26px; border-radius: calc(26px * var(--rk)); color: #fff;
  background: radial-gradient(80% 120% at 100% 0%, rgba(224, 103, 159, .55), transparent 60%), linear-gradient(135deg, #2a0f20, #4a1534); }
.cl-land-creator h2 { margin-top: 8px; font-size: clamp(26px, 4.4vw, 40px); letter-spacing: -.03em; color: #fff; }
.cl-land-creator h2 em { font-style: normal; color: #ffb3d1; }
.cl-land-creator p { max-width: 56ch; margin-top: 10px; color: rgba(255, 255, 255, .8); }
.cl-btn.light { background: #fff; color: #2a0f20 !important; }
.cl-btn.light:hover { background: #ffe3ef; }
@media (min-width: 900px) { .cl-land-creator { grid-template-columns: minmax(0, 1fr) auto; padding: 48px 52px; } }

/* questions */
.cl-land-faq details { max-width: 860px; }
.cl-land-faq details { border-bottom: 1px solid var(--line); }
.cl-land-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; font-weight: 600; font-size: 16.5px; cursor: pointer; list-style: none; }
.cl-land-faq summary::-webkit-details-marker { display: none; }
.cl-land-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: calc(9px * var(--rk)); background: var(--surface-2); color: var(--ink-2); font-size: 18px; font-weight: 500; transition: transform .2s ease; }
.cl-land-faq details[open] summary::after { content: "×"; }
.cl-land-faq details p { padding: 0 2px 18px; color: var(--ink-2); max-width: 70ch; }
.cl-land-end { display: grid; justify-items: center; gap: 18px; padding-block: calc(56px * var(--sec) * var(--bp, 1)) calc(32px * var(--sec) * var(--bp, 1)); text-align: center; }
.cl-land-end h2 { font-size: calc(clamp(24px, 4vw, 34px) * var(--hk)); letter-spacing: -.03em; }

/* signed in: who is live now */
.cl-ava.ring { width: 72px; height: 72px; padding: 3px; background: linear-gradient(135deg, #e5484d, #c93f80); }
.cl-ava.ring img { border-radius: 50%; border: 3px solid var(--ground); }
.cl-feature-demo .cl-bub.me { margin-left: auto; }
/* phone: the creator wall of the landing page as a row to swipe through instead of twelve cards under each other */
@media (max-width: 599.98px) {
  .cl-land .cl-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; gap: 12px; margin-inline: -16px; padding: 2px 16px 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .cl-land .cl-grid::-webkit-scrollbar { display: none; }
  .cl-land .cl-grid > .cl-cc { scroll-snap-align: start; }
}
/* visitors, post above the public FSK: only a soft veil made of her cover picture */
.cl-post-locked > img.is-veil { filter: blur(26px) saturate(1.15); transform: scale(1.3); }
/* media card: title over the whole width, FSK + save below (the select showed only its arrow next to the title) */
.cl-mform { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 6px; }
.cl-mform .cl-input[name="title"] { grid-column: 1 / -1; }
/* phone: the four steps compact - number left, text right */
@media (max-width: 719.98px) {
  .cl-how li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px; }
  .cl-how-n { grid-row: span 2; margin: 0; }
}
/* lines that must be read in full (renewal date + price) wrap instead of being cut */
.cl-row-text.wrap { white-space: normal; }
/* picture pickers: the tile alone sets the size (the 4:5 pictures made rows overlap on the phone); media library two columns on the phone */
.cl-pics { align-content: start; grid-auto-rows: max-content; }
.cl-pic img { position: absolute; inset: 0; }
.cl-mgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
/* phone: rows with a form (settings, reports) put the text above and the form below over the full width
   (the text had flex-basis 0 and shrank under the form) */
@media (max-width: 640px) {
  .cl-setting > .cl-row-main, .cl-row:has(.cl-row-form) > .cl-row-main { flex: 1 1 100%; }
  .cl-setting > .cl-row-form, .cl-row:has(.cl-row-form) > .cl-row-form { flex: 1 1 100%; flex-wrap: nowrap; }
  .cl-row-form > .cl-input { flex: 1; min-width: 0; }
}
/* phone: tables become one card per row, every value with its column name (set from the head by chatly.js) */
@media (max-width: 599.98px) {
  .cl-table:not([data-table]) thead { display: none; }
  .cl-table:not([data-table]) table, .cl-table:not([data-table]) tbody, .cl-table tfoot { display: block; }
  .cl-table:not([data-table]) tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .cl-table:not([data-table]) tbody tr:first-child { border-top: 0; }
  .cl-table:not([data-table]) td { display: block; padding: 0; border: 0; text-align: left !important; }
  .cl-table:not([data-table]) td:first-child { flex-basis: 100%; }
  .cl-table:not([data-table]) td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; color: var(--ink-3); font-size: 11px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; }
  .cl-table:not([data-table]) td:last-child:not([data-label]) { margin-left: auto; }
}

/* =====================================================================================================================
   Portal (owner 2026-10-25: "die selects usw haben immernoch kein design generell viel zu viel auf die mitte fokussiert
   ... orientiere dich an chatmate nutze auch eigene selects usw."): the whole width in a 12-column grid, own controls,
   own dialogs and a picture viewer - built like ChatMate's portal, in Chatly's colours.
   ===================================================================================================================== */
:root { accent-color: var(--accent); --scroll-thumb: color-mix(in srgb, var(--ink-3) 38%, transparent); --ease: cubic-bezier(.2, .7, .2, 1); }
::selection { background: rgba(201, 63, 128, .18); }
/* no scrollbar anywhere - the page, every list, dialog and side bar, phone and desktop (owner 2026-10-29: "es gibt immernoch eine
   scrollbar angezeigt sie soll komplett insisible sein für mobile sowie pc"). Scrolling stays: wheel, touch, keys, trackpad. */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }

/* ---------- the grid: twelve columns from 1200 px, two halves from 760 px, one column below */
.cl-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cl-g > * { grid-column: span 12; min-width: 0; margin: 0 !important; }
@media (min-width: 760px) { .cl-g > .t6 { grid-column: span 6; } }
@media (min-width: 1200px) {
  .cl-g > .w3 { grid-column: span 3; } .cl-g > .w4 { grid-column: span 4; } .cl-g > .w5 { grid-column: span 5; }
  .cl-g > .w6 { grid-column: span 6; } .cl-g > .w7 { grid-column: span 7; } .cl-g > .w8 { grid-column: span 8; } .cl-g > .w9 { grid-column: span 9; }
  .cl-sticky { position: sticky; top: 24px; }
}
.cl-g + .cl-g, .cl-tiles + .cl-g, .cl-g + .cl-section { margin-top: 20px; }
.cl-stack { display: grid; gap: 20px; align-content: start; min-width: 0; }
.cl-stack > * { margin: 0 !important; }
.cl-card.fill { height: 100%; }
.cl-card .cl-sub + .cl-actions, .cl-card .cl-sub + .cl-rows, .cl-card .cl-sub + .cl-sum { margin-top: 16px; }
.cl-page-h .cl-actions { align-items: center; }
.cl-lead { max-width: 72ch; }

/* ---------- selects: one look for every dropdown; the open list in Chatly's style where the browser can (customizable select) */
select.cl-input, select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  select:not([multiple]):not([size]) { display: flex; align-items: center; gap: 8px; padding-right: 12px; background-image: none; text-align: left; }
  select:not([multiple]):not([size]):hover { border-color: color-mix(in srgb, var(--line-2) 55%, var(--accent)); }
  select::picker-icon {
    content: ""; width: 16px; height: 16px; margin-left: auto; background-color: var(--ink-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate .2s var(--ease);
  }
  select:open::picker-icon { rotate: 180deg; background-color: var(--accent-text); }
  select:open { border-color: var(--accent); box-shadow: var(--ring); }
  ::picker(select) {
    margin-block: 6px; padding: 6px; max-height: min(340px, 60vh); overflow-y: auto; border: 1px solid var(--line); border-radius: calc(14px * var(--rk));
    background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
    opacity: 1; translate: 0 0; transition: opacity .16s var(--ease), translate .16s var(--ease), overlay .16s allow-discrete, display .16s allow-discrete;
  }
  @starting-style { ::picker(select):popover-open { opacity: 0; translate: 0 -4px; } }
  select option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 11px; border-radius: calc(10px * var(--rk)); font: 500 14.5px/1.35 var(--text); cursor: pointer; }
  select option:hover, select option:focus-visible { background: var(--surface-2); outline: none; }
  select option:checked { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
  select option::checkmark { order: 1; margin-left: auto; color: var(--accent-text); font-weight: 700; }
  select option:disabled { color: var(--ink-3); cursor: default; }
  @media (prefers-reduced-motion: reduce) { ::picker(select), select::picker-icon { transition: none; } }
}
select.cl-input.sm { padding-right: 32px; background-position: right 9px center; }

/* ---------- checkboxes and radios: own boxes and dots (hidden ones in picture and chip pickers stay hidden) */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--line-2); border-radius: calc(6px * var(--rk)); background: var(--surface); cursor: pointer; vertical-align: -4px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked { border-color: var(--accent); background: var(--accent); }
input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; margin-top: -2px; border: solid var(--accent-ink); border-width: 0 0 2.4px 2.4px; transform: rotate(-45deg); }
input[type="radio"]:checked { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 45%, var(--surface) 48%); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: var(--ring); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }

/* a switch for on/off settings */
.cl-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.cl-switch input { width: 44px; height: 26px; border: 0; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.cl-switch input::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 18, 15, .25);
  transform: translateX(-9px); transition: transform .2s var(--ease); margin: 0; border: 0; }
.cl-switch input:checked { background: var(--accent); box-shadow: none; }
.cl-switch input:checked::after { width: 20px; height: 20px; margin: 0; border: 0; transform: translateX(9px); }

/* ---------- numbers: no browser spinner, our own − and + (chatly.js wraps the field) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cl-num { position: relative; display: flex; align-items: stretch; min-width: 0; }
.cl-num > .cl-input { padding-inline: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.cl-num > .cl-input.sm { padding-inline: 36px; }
.cl-num > button { position: absolute; top: 4px; bottom: 4px; display: grid; place-items: center; width: 36px; padding: 0; border: 0; border-radius: calc(9px * var(--rk));
  background: var(--surface-2); color: var(--ink-2); font: 600 18px/1 var(--text); cursor: pointer; transition: background-color .15s, color .15s; }
.cl-num > button:hover { background: var(--accent-soft); color: var(--accent-text); }
.cl-num > button:disabled { opacity: .4; cursor: default; background: var(--surface-2); color: var(--ink-3); }
.cl-num > button.minus { left: 4px; } .cl-num > button.plus { right: 4px; }
.cl-num:has(.cl-input.sm) > button { width: 28px; font-size: 16px; }
.cl-input.num + .cl-num, .cl-num:has(.num) { width: 150px; }

/* ---------- files, dates, search */
input[type="file"] { max-width: 100%; color: var(--ink-2); font: 500 14px var(--text); }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: calc(10px * var(--rk)); background: var(--surface);
  color: var(--ink); font: 600 14px var(--text); cursor: pointer; transition: background-color .15s, border-color .15s; }
input[type="file"]::file-selector-button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
input[type="date"]::-webkit-calendar-picker-indicator { padding: 4px; border-radius: calc(7px * var(--rk)); opacity: .55; cursor: pointer; transition: opacity .15s, background-color .15s; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: var(--surface-2); }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; width: 16px; height: 16px; cursor: pointer; background-color: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.cl-searchbox { position: relative; display: flex; align-items: center; min-width: 0; }
.cl-searchbox > .ic { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.cl-searchbox > .cl-input { padding-left: 40px; }

/* ---------- segmented tabs (filters) */
.cl-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: calc(14px * var(--rk)); background: var(--surface-2); }
.cl-seg a, .cl-seg button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: calc(10px * var(--rk)); background: none;
  color: var(--ink-2); font: 600 14px/1 var(--text); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.cl-seg a:hover, .cl-seg button:hover { color: var(--ink); }
.cl-seg [aria-current="page"], .cl-seg [aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 18, 15, .06), 0 0 0 1px var(--line); }
.cl-seg .n { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.cl-toolbar .cl-searchbox { flex: 1 1 260px; max-width: 420px; margin-left: auto; }
@media (max-width: 600px) { .cl-toolbar .cl-searchbox { flex-basis: 100%; max-width: none; margin-left: 0; } }
.cl-seg.scroll { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }

/* ---------- dialogs (own, never the browser's): head, body, foot; on the phone a sheet from the bottom.
   Every way out (X, Abbrechen, Esc, a click on the dimmed page) plays the same soft exit, box and dimming together (owner
   2026-10-27: "wenn man die popups und modals weg klickt ist es verbuggt"). Nothing of the layout hangs on [open]: while the exit
   plays the dialog is already closed and has to look exactly as before - it used to fall apart for a moment. */
.cl-dlg { --dlg-w: 540px; flex-direction: column; width: min(var(--dlg-w), calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: calc(22px * var(--rk)); background: var(--surface); color: var(--ink); text-align: start; box-shadow: 0 30px 80px rgba(20, 18, 15, .28);
  overflow: auto; opacity: 0; translate: 0 8px; scale: .985;
  transition: opacity .16s var(--ease), translate .16s var(--ease), scale .16s var(--ease), overlay .16s allow-discrete, display .16s allow-discrete; }
.cl-dlg[open] { display: flex; opacity: 1; translate: 0 0; scale: 1; transition-duration: .22s; }
@starting-style { .cl-dlg[open] { opacity: 0; translate: 0 8px; scale: .985; } }
.cl-dlg:modal { overscroll-behavior: contain; }
.cl-dlg::backdrop { background: rgba(28, 16, 22, .46); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; overflow: hidden; overscroll-behavior: contain;
  transition: opacity .16s var(--ease), overlay .16s allow-discrete, display .16s allow-discrete; }
.cl-dlg[open]::backdrop { opacity: 1; transition-duration: .22s; }
@starting-style { .cl-dlg[open]::backdrop { opacity: 0; } }
/* browsers that drop a closed dialog at once (no "overlay" transition): chatly.js marks it, lets the fade play, then closes it */
.cl-dlg[data-closing] { opacity: 0; translate: 0 8px; scale: .985; transition-duration: .16s; }
.cl-dlg[data-closing]::backdrop { opacity: 0; transition-duration: .16s; }
.cl-dlg.wide { --dlg-w: 760px; }
.cl-dlg > form { display: contents; }
/* a form that is itself the foot (sign-out in the menu sheet) keeps its spacing */
.cl-dlg > form.cl-dlg-f { display: flex; }
.cl-dlg > form.cl-dlg-b { display: grid; }
.cl-dlg:focus { outline: none; }
.cl-dlg-h { flex: none; display: flex; align-items: flex-start; gap: 14px; padding: 24px 24px 2px; }
.cl-dlg-h > div { flex: 1; min-width: 0; padding-top: 1px; }
.cl-dlg-h h2 { font-size: 21px; line-height: 1.25; }
.cl-dlg-h p { margin-top: 6px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; text-wrap: pretty; }
.cl-dlg-i { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: calc(13px * var(--rk)); background: var(--accent-soft); color: var(--accent-text); }
.cl-dlg-i.bad { background: var(--bad-soft); color: var(--bad); }
.cl-dlg-x { flex: none; width: 36px; height: 36px; margin: -5px -8px 0 0; border: 0; border-radius: calc(10px * var(--rk)); background: none; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.cl-dlg-x:hover { background: var(--surface-2); color: var(--ink); }
.cl-dlg-b { display: grid; align-content: start; gap: 18px; min-height: 0; padding: 20px 24px 8px; overflow-y: auto; overscroll-behavior: contain; }
.cl-dlg-h + .cl-dlg-f { padding-top: 22px; }
.cl-dlg-f { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 18px 24px 24px; }
/* the body scrolls: a line keeps the buttons apart from what passes under them */
.cl-dlg[data-scroll] .cl-dlg-b { padding-bottom: 20px; }
.cl-dlg[data-scroll] .cl-dlg-f { border-top: 1px solid var(--line); padding-top: 16px; }
.cl-btn.danger { background: var(--bad); }
.cl-btn.danger:hover { background: color-mix(in srgb, var(--bad) 85%, #000); }
@media (max-width: 599.98px) {
  /* the sheet slides up from the bottom edge and back down - full width (wide dialogs used to stop 32 px short on the right) */
  .cl-dlg { width: 100%; max-width: 100%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); margin: auto 0 0; border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); opacity: 1; translate: 0 100%; scale: 1; transition-duration: .2s; }
  .cl-dlg[open] { translate: 0 0; transition-duration: .3s; }
  @starting-style { .cl-dlg[open] { opacity: 1; translate: 0 100%; scale: 1; } }
  .cl-dlg[data-closing] { opacity: 1; translate: 0 100%; scale: 1; transition-duration: .2s; }
  .cl-dlg-h { padding: 20px 20px 2px; }
  .cl-dlg-b { padding: 16px 20px 8px; }
  .cl-dlg-f { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding: 16px 20px 20px; }
  .cl-dlg-f > .cl-btn { width: 100%; }
  .cl-dlg-f > .cl-dlg-gap { display: none; }
  .cl-dlg-f > .cl-link-btn { align-self: center; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  /* only a fade, nothing moves */
  .cl-dlg { opacity: 0; translate: none; scale: none; }
  .cl-dlg[open] { opacity: 1; translate: none; scale: none; }
  @starting-style { .cl-dlg[open] { opacity: 0; translate: none; scale: none; } }
  .cl-dlg[data-closing] { opacity: 0; translate: none; scale: none; }
}

/* ---------- picture viewer: dark, the picture as large as it fits, arrows, counter; no right-click saving */
.cl-lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(12, 8, 10, .92); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.cl-lb.open { opacity: 1; pointer-events: auto; }
.cl-lb img { max-width: min(1400px, 94vw); max-height: 88vh; border-radius: calc(12px * var(--rk)); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); user-select: none; -webkit-user-drag: none; }
.cl-lb button { position: absolute; display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .15s; }
.cl-lb button:hover { background: rgba(255, 255, 255, .24); }
.cl-lb .x { top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 999px; }
.cl-lb .prev, .cl-lb .next { top: 50%; width: 50px; height: 66px; border-radius: calc(14px * var(--rk)); transform: translateY(-50%); }
.cl-lb .prev { left: 18px; } .cl-lb .next { right: 18px; }
.cl-lb .ic { width: 24px; height: 24px; stroke-width: 2.4; }
.cl-lb .count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12);
  color: #fff; font: 600 13px var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 599.98px) { .cl-lb .prev, .cl-lb .next { display: none; } .cl-lb img { max-width: 100vw; border-radius: 0; } }
.cl-media img, .cl-msg-media img, .cl-post-locked img { user-select: none; -webkit-user-drag: none; }
a.cl-media, .cl-msg-media a { cursor: zoom-in; }

/* ---------- two panes: list left, the open chat right (chats, inbox) - one calm card (owner 2026-10-27: "komischer schwarzer Rand",
   "nicht zentriert"). From 1000 px it fills the window exactly (no page scroll, no footer under it); both head rows have one height
   and one line; the thread scrolls inside; the field sits on the card's own surface (it used to carry the page colour - a dark band
   in dark mode). 1000-1199 px shows one pane at a time (the list, or the chat with its back arrow), from 1200 px both. */
@media (min-width: 1000px) {
  .cl-in .cl-main:has(.cl-split) { padding-block: 24px; }
  .cl-in .cl-col:has(.cl-split) > .cl-foot { display: none; }
  .cl-split { --split-head: 76px; display: grid; grid-template-columns: minmax(0, 1fr); height: calc(100vh - 48px); height: calc(100dvh - 48px); min-height: 520px;
    overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
  .cl-split-list, .cl-split-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .cl-split-list > header { flex: none; min-height: var(--split-head); margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--line); }
  .cl-split-list > header h1 { font-size: 22px; }
  .cl-split-list > header .cl-sub { margin-top: 1px; overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
  .cl-split-list .cl-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0; box-shadow: none; align-content: start; }
  .cl-split-list .cl-list > .cl-row { padding-inline: 18px; }
  .cl-split-list .cl-list > .cl-row:first-child { border-top: 0; }
  .cl-split-list .cl-row[aria-current="page"] { background: var(--accent-soft); }
  .cl-split-list .cl-row[aria-current="page"] b { color: var(--accent-text); }
  .cl-split-list > .cl-empty { margin: 18px; }
  .cl-split-pane .cl-chat { flex: 1; max-width: none; min-height: 0; padding: 0; }
  .cl-split-pane .cl-chat-h { position: static; flex: none; min-height: var(--split-head); padding: 12px 18px; background: none; }
  .cl-split-pane .cl-msgs { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; }
  .cl-split-pane .cl-composer { position: relative; flex: none; padding: 12px 18px 8px; background: none; }
  .cl-split-pane .cl-chat-hint { flex: none; padding: 0 18px 12px; }
  .cl-split-pane .cl-chat > .cl-note { flex: none; margin: 0 18px 12px; }
  .cl-split-empty { display: grid; place-content: center; justify-items: center; gap: 10px; height: 100%; padding: 24px; color: var(--ink-3); text-align: center; }
  .cl-split-empty b { color: var(--ink); font: 650 19px/1.25 var(--display); }
  .cl-split .cl-page-h.cl-phone-head { display: none; }
  
}
@media (min-width: 1200px) {
  .cl-split { grid-template-columns: 340px minmax(0, 1fr); }
  .cl-split-list { border-right: 1px solid var(--line); }
  .cl-split-pane .cl-chat-h > .cl-icon-btn:first-child { display: none; }
}
@media (max-width: 1199.98px) {
  .cl-split.has-open .cl-split-list { display: none; }
  .cl-split:not(.has-open) .cl-split-pane { display: none; }
}
/* below 1000 px the chat takes the full width; its head and field run edge to edge (before: 760 px wide and left, a strip empty
   on the right on tablets, and bubbles peeking out beside the sticky head) */
@media (max-width: 999.98px) {
  .cl-chat { max-width: none; }
  .cl-chat-h, .cl-composer { margin-inline: -16px; padding-inline: 16px; }
}
/* a bubble stops at a readable width, also in the wide chat pane */
.cl-msg { max-width: min(78%, 620px); }
/* in a button the coin sits close to its number: "Für ◉ 30 Coins" */
.cl-btn > .cl-coin { margin-inline: -2px -4px; }
/* the list's head: title left, its one button on the same line at the right (it used to drop below, left - "An viele") */
.cl-split-list > header { flex-wrap: nowrap; align-items: center; }
.cl-split-list > header > div { flex: 1; min-width: 0; }
.cl-split-list > header > .cl-btn { flex: none; }

/* ---------- the feed with a rail on the right */
.cl-feedwrap { display: grid; gap: 24px; }
@media (min-width: 1200px) { .cl-feedwrap { grid-template-columns: minmax(0, 680px) minmax(280px, 340px); gap: 40px; justify-content: start; } }
.cl-feedwrap .cl-feed { max-width: none; }


/* ---------- content cards (top content): picture, what is inside, price, creator, time, likes */
.cl-ctgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); gap: calc(16px * var(--gap)); }
.cl-ct { position: relative; display: grid; gap: 10px; align-content: start; min-width: 0; color: var(--ink); text-decoration: none; }
.cl-ct-pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: calc(16px * var(--rk)); background: linear-gradient(135deg, #3a2030, #6d2a4c); }
.cl-ct-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.cl-ct:hover .cl-ct-pic img { transform: scale(1.04); }
.cl-ct-pic img.veil { filter: blur(22px) saturate(1.15); transform: scale(1.3); }
.cl-ct:hover .cl-ct-pic img.veil { transform: scale(1.32); }
.cl-ct-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 30%, transparent 62%, rgba(0, 0, 0, .45)); }
.cl-ct-kind, .cl-ct-price { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.cl-ct-kind { top: 10px; left: 10px; background: rgba(18, 12, 16, .66); color: #fff; }
.cl-ct-kind .ic { width: 14px; height: 14px; }
.cl-ct-price { bottom: 10px; right: 10px; background: var(--accent); color: #fff; }
.cl-ct-price.free { background: var(--ok); }
.cl-ct-price.sub { background: rgba(255, 255, 255, .92); color: #2a0e1b; }
.cl-ct-lock { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff; }
.cl-ct-lock .ic { width: 30px; height: 30px; stroke-width: 2; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4)); }
.cl-ct b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.cl-ct-meta { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-3); font-size: 13px; }
.cl-ct-meta .cl-ava { width: 22px; height: 22px; font-size: 10px; }
.cl-ct-meta .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 600; }
.cl-ct-meta .likes { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.cl-ct-meta .likes .ic { width: 14px; height: 14px; }
.cl-tabpanel[hidden] { display: none !important; }

/* ---------- likes on posts */
.cl-post-f { display: flex; align-items: center; gap: 6px; margin-top: -2px; }
.cl-like { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 10px; border: 0; border-radius: calc(10px * var(--rk)); background: none;
  color: var(--ink-2); font: 600 14px/1 var(--text); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.cl-like:hover { background: var(--accent-soft); color: var(--accent-text); }
.cl-like .ic { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.cl-like[aria-pressed="true"] { color: var(--accent); }
.cl-like[aria-pressed="true"] .ic { fill: currentColor; }
.cl-like.pop .ic { transform: scale(1.25); }

/* ---------- the age question for visitors (own dialog, once per browser) */
.cl-agegate { --dlg-w: 460px; text-align: center; }
.cl-agegate .cl-dlg-b { justify-items: center; padding-top: 30px; }
.cl-agegate .cl-mark { font-size: 34px; }
.cl-agegate h2 { font-size: 23px; }
.cl-agegate p { color: var(--ink-2); max-width: 36ch; }
.cl-agegate .cl-dlg-f { display: grid; justify-content: stretch; }
.cl-agegate .cl-dlg-f a { color: var(--ink-3); font-size: 13.5px; text-align: center; }

/* ---------- Wartungsarbeiten: "Kommt demnächst" instead of the sign-up (owner 2026-10-30) - the dialog of every page */
.cl-soon { --dlg-w: 460px; }
.cl-soon .cl-soon-note { margin-top: 10px; color: var(--ink-3); font-size: 13.5px; }
/* without JavaScript the sign-up pages show it all the same: where the modal would be, the page dimmed behind it */
html:not(.cl-js) .cl-soon[data-soon-page] { display: flex; position: fixed; inset: 0; z-index: 200; height: fit-content; margin: auto; opacity: 1; translate: none; scale: none;
  box-shadow: 0 0 0 100vmax rgba(28, 16, 22, .46), 0 30px 80px rgba(20, 18, 15, .28); }
@media (max-width: 599.98px) { html:not(.cl-js) .cl-soon[data-soon-page] { margin: auto 0 0; } }

/* ---------- the creators passing by (start page) */
.cl-marquee { position: relative; overflow: hidden; padding-block: 6px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cl-marquee-in { display: flex; gap: 14px; width: max-content; animation: cl-marquee 60s linear infinite; }
.cl-marquee:hover .cl-marquee-in, .cl-marquee:focus-within .cl-marquee-in { animation-play-state: paused; }
.cl-marquee + .cl-marquee .cl-marquee-in { animation-direction: reverse; animation-duration: 70s; }
@keyframes cl-marquee { to { transform: translateX(-50%); } }
.cl-chip-cr { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink); font-weight: 650; font-size: 14.5px; text-decoration: none; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.cl-chip-cr:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.cl-chip-cr .cl-ava { width: 38px; height: 38px; }
@media (prefers-reduced-motion: reduce) { .cl-marquee-in { animation: none; flex-wrap: wrap; width: auto; } .cl-marquee { -webkit-mask: none; mask: none; } }

/* ---------- studio: posts as cards, the profile preview */
.cl-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.cl-pcard { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-pcard-pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.cl-pcard-pic img { width: 100%; height: 100%; object-fit: cover; }
.cl-pcard-pic .cl-ct-kind { top: 10px; left: 10px; }
.cl-pcard-pic .cl-ct-price { bottom: 10px; right: 10px; }
.cl-pcard-empty { display: grid; place-items: center; height: 100%; padding: 18px; color: var(--ink-2); font-size: 14px; text-align: center; }
.cl-pcard-b { display: grid; gap: 6px; padding: 14px 16px 16px; }
.cl-pcard-b b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 650; font-size: 14.5px; }
.cl-pcard-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-3); font-size: 13px; }
.cl-pcard-f .stats { display: inline-flex; gap: 10px; }
.cl-pcard-f .stats span { display: inline-flex; align-items: center; gap: 4px; }
.cl-pcard-f .ic { width: 14px; height: 14px; }
.cl-preview-card { overflow: hidden; padding: 0 !important; }
.cl-preview-card .cl-cc { border: 0; border-radius: 0; box-shadow: none; }
.cl-preview-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cl-preview-h b { color: var(--ink-2); font: 650 14px/1.2 var(--text); }

/* small key/value list for side cards */
.cl-kv { display: grid; gap: 0; margin: 0; }
.cl-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.cl-kv > div:first-child { border-top: 0; padding-top: 0; }
.cl-kv dt { color: var(--ink-2); }
.cl-kv dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }

/* setting cards (admin) */
.cl-setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.cl-set { display: grid; gap: 12px; align-content: space-between; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-set b { font-size: 15.5px; }
.cl-set p { color: var(--ink-3); font-size: 13.5px; }
.cl-set form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-set .cl-pill { margin-left: auto; }

/* help page */
.cl-help { display: grid; gap: 28px; }
@media (min-width: 1100px) { .cl-help { grid-template-columns: 240px minmax(0, 820px); gap: 48px; } .cl-help nav { position: sticky; top: 24px; align-self: start; } }
.cl-help nav { display: grid; gap: 4px; }
.cl-help nav a { padding: 9px 12px; border-radius: calc(10px * var(--rk)); color: var(--ink-2); font-weight: 600; text-decoration: none; }
.cl-help nav a:hover { background: var(--surface-2); color: var(--ink); }
.cl-help section { scroll-margin-top: 24px; }
.cl-help section + section { margin-top: 30px; }
.cl-help h2 { margin-bottom: 8px; font-size: 22px; }
.cl-out .cl-main:has(.cl-help) { max-width: var(--wrap); }

/* =====================================================================================================================
   Dark mode (owner 2026-10-25: "baue bitte auch direkt einen darkmode ein"): follows the system, or what the viewer picked
   with the sun/moon button (localStorage "cl-theme", set before the first paint). Warm near-black, pink stays the accent.
   ===================================================================================================================== */
:root {
  --mark-a1: #b02a68; --mark-a2: #cf4b8a; --mark-b1: #5a0b30; --mark-b2: #8a1a4f;
  --cap: rgba(255, 255, 255, .88);
  --stack-a: linear-gradient(160deg, #f6c3da, #f4d9b7); --stack-b: linear-gradient(160deg, #d8c6f0, #f3c1d6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121012; --frame: #22161d; --frame-strong: #4a2638; --surface: #1b181b; --surface-2: #252125; --surface-3: #302b30;
    --ink: #f4eff2; --ink-2: #cdc5ca; --ink-3: #9d949b; --line: #2f2a2e; --line-2: #3f393e;
    --accent: #c8417f; --accent-hover: #b9387a; --accent-ink: #ffffff; --accent-text: #f291c0; --accent-soft: rgba(226, 88, 156, .16);
    --gold: #e8bd62; --gold-soft: rgba(226, 178, 76, .14);
    --ok: #5cd39a; --ok-soft: rgba(92, 211, 154, .14); --warn: #f2c063; --warn-soft: rgba(242, 192, 99, .14); --bad: #f47c70; --bad-soft: rgba(244, 124, 112, .12);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .3);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 50px rgba(0, 0, 0, .5);
    --ring: 0 0 0 3px rgba(226, 88, 156, .38);
    --glass: rgba(18, 16, 18, .86);
    --mark-a1: #e0579a; --mark-a2: #f08abb; --mark-b1: #f7c2da; --mark-b2: #e98fbb;
    --cap: rgba(27, 24, 27, .86);
    --stack-a: linear-gradient(160deg, #4a2638, #3d2c22); --stack-b: linear-gradient(160deg, #33284a, #4a2638);
    --scroll-thumb: rgba(255, 255, 255, .16);
    --c0: #e2589c; --c1: #a58ef2; --c2: #4cc7ae; --c3: #72a6f0; --c4: #e8a55a; --c5: #9d949b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #121012; --frame: #22161d; --frame-strong: #4a2638; --surface: #1b181b; --surface-2: #252125; --surface-3: #302b30;
  --ink: #f4eff2; --ink-2: #cdc5ca; --ink-3: #9d949b; --line: #2f2a2e; --line-2: #3f393e;
  --accent: #c8417f; --accent-hover: #b9387a; --accent-ink: #ffffff; --accent-text: #f291c0; --accent-soft: rgba(226, 88, 156, .16);
  --gold: #e8bd62; --gold-soft: rgba(226, 178, 76, .14);
  --ok: #5cd39a; --ok-soft: rgba(92, 211, 154, .14); --warn: #f2c063; --warn-soft: rgba(242, 192, 99, .14); --bad: #f47c70; --bad-soft: rgba(244, 124, 112, .12);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .3);
  --shadow-lg: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 50px rgba(0, 0, 0, .5);
  --ring: 0 0 0 3px rgba(226, 88, 156, .38);
  --glass: rgba(18, 16, 18, .86);
  --mark-a1: #e0579a; --mark-a2: #f08abb; --mark-b1: #f7c2da; --mark-b2: #e98fbb;
  --cap: rgba(27, 24, 27, .86);
  --stack-a: linear-gradient(160deg, #4a2638, #3d2c22); --stack-b: linear-gradient(160deg, #33284a, #4a2638);
  --scroll-thumb: rgba(255, 255, 255, .16);
  --c0: #e2589c; --c1: #a58ef2; --c2: #4cc7ae; --c3: #72a6f0; --c4: #e8a55a; --c5: #9d949b;
  color-scheme: dark;
}
.cl-mark .a { background-image: linear-gradient(135deg, var(--mark-a1), var(--mark-a2)); }
.cl-mark .b { background-image: linear-gradient(135deg, var(--mark-b1), var(--mark-b2)); }
.cl-slide-cap { background: var(--cap); }
.cl-show-stack span:first-child { background: var(--stack-a); }
.cl-show-stack span:last-child { background: var(--stack-b); }
.cl-land-copy h1 em { background-image: linear-gradient(135deg, var(--mark-a1), var(--mark-a2)); }

/* the sun/moon button: shows what a click switches to */
.cl-theme-btn .sun, [data-theme-toggle] .sun { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .sun { display: block; }
:root[data-theme="dark"] [data-theme-toggle] .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-theme-toggle] .sun { display: block; }
  :root:not([data-theme="light"]) [data-theme-toggle] .moon { display: none; }
}
.cl-icon-btn.plain { border-color: transparent; background: none; }
.cl-icon-btn.plain:hover { background: var(--surface-2); border-color: transparent; }
@media (max-width: 899.98px) { .cl-hide-tab { display: none; } }
.cl-menu-btn { margin-right: -6px; }
@media (min-width: 900px) { .cl-menu-btn { display: none; } }
@media (max-width: 374.98px) { .cl-out .cl-top-r .cl-link[href="/login"] { display: none; } }

/* side bar foot: help and light/dark */
.cl-side-foot { display: flex; gap: 4px; margin: -8px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.cl-side-foot a, .cl-side-foot button { display: inline-flex; align-items: center; gap: 8px; flex: 1; justify-content: center; height: 36px; padding: 0 10px; border: 0;
  border-radius: calc(10px * var(--rk)); background: none; color: var(--ink-3); font: 600 13px/1 var(--text); text-decoration: none; cursor: pointer; }
.cl-side-foot a:hover, .cl-side-foot button:hover, .cl-side-foot a[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
.cl-side-foot .ic { width: 17px; height: 17px; }

/* footer: brand on the left, three columns of links */
.cl-foot-in { display: grid; gap: 24px; padding-block: 32px 36px; }
@media (min-width: 760px) { .cl-foot-in { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.cl-foot-brand { display: grid; gap: 10px; max-width: 42ch; }
.cl-foot-brand > span { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }
.cl-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 18px 48px; }
.cl-foot-cols div { display: grid; gap: 8px; align-content: start; }
.cl-foot-cols b { color: var(--ink); font-size: 14px; font-weight: 650; }
.cl-foot-cols a { color: var(--ink-3); font-size: 14px; }
@media (max-width: 520px) { .cl-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* phone tab bar: buttons look like the links */
.cl-tabbar button { display: grid; justify-items: center; gap: 3px; padding: 6px 4px; border: 0; border-radius: calc(14px * var(--rk)); background: none; color: var(--ink-3);
  font: 600 11.5px/1.2 var(--text); cursor: pointer; }
.cl-tabbar button .ic { width: 24px; height: 24px; }
.cl-tabbar button[aria-current="page"] { color: var(--accent-text); }

/* the "Mehr" sheet */
.cl-more-nav { display: grid; gap: 2px; padding: 8px 14px; }
.cl-more-nav a, .cl-more-nav button { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 12px; border: 0; border-radius: calc(12px * var(--rk)); background: none;
  color: var(--ink); font: 500 16px/1.2 var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.cl-more-nav a:hover, .cl-more-nav button:hover { background: var(--surface-2); }
.cl-more-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
.cl-more-nav a[aria-current="page"] .ic { color: var(--accent-text); }
.cl-more-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 6px 26px 4px; }
.cl-more-legal a { color: var(--ink-3); font-size: 13px; text-decoration: none; }
.cl-more-legal a:hover { color: var(--ink); text-decoration: underline; }
.cl-more-nav .ic { width: 22px; height: 22px; color: var(--ink-3); }
.cl-more-nav .cl-pill { margin-left: auto; }
.cl-agegate-links { color: var(--ink-3); font-size: 13px; text-align: center; }
.cl-agegate-links a { color: var(--ink-3); }

/* legal page */

/* ---------- pieces of the new pages (2026-10-25) */
.cl-land-pass { display: grid; gap: 10px; padding-block: calc(34px * var(--sec) * var(--bp, 1)) calc(6px * var(--sec) * var(--bp, 1)); }
.cl-land-pass .cl-eyebrow { margin-bottom: 6px; }
.cl-h-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 10px; vertical-align: -5px; border-radius: calc(11px * var(--rk)); background: var(--accent-soft); color: var(--accent-text); }
.cl-h-ic .ic { width: 19px; height: 19px; }
.cl-section-h-tabs { flex-wrap: wrap; align-items: center; }
.cl-land-faq-more { margin-top: 18px; }
.cl-land-faq-more a { color: var(--accent-text); font-weight: 650; }
.cl-empty.sm { padding: 26px 18px; gap: 6px; }
.cl-empty.sm b { font-size: 16px; }
.cl-card-note { margin-top: 12px; font-size: 13px; }
.cl-coin-info h2 { margin-bottom: 14px; font-size: 18px; }
.cl-uses { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .cl-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-uses li { display: flex; gap: 12px; align-items: flex-start; }
.cl-uses .ic { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: calc(11px * var(--rk)); background: var(--accent-soft); color: var(--accent-text); }
.cl-uses b { display: block; font-size: 15px; }
.cl-uses span { color: var(--ink-3); font-size: 13.5px; }
.cl-pack.is-top { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cl-pack-flag { position: absolute; top: -11px; left: 14px; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.cl-table.flat { border: 0; border-radius: 0; background: none; }
.cl-table.flat th:first-child, .cl-table.flat td:first-child { padding-left: 0; }
.cl-table.flat th:last-child, .cl-table.flat td:last-child { padding-right: 0; }
.cl-table .amt.plus { color: var(--ok); }
.cl-nowrap { white-space: nowrap; }
.cl-cell-who { display: inline-flex; align-items: center; gap: 10px; }
.cl-meter { height: 8px; margin: 2px 0 14px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.cl-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mark-a1), var(--mark-a2)); }
.cl-checks { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cl-checks li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.cl-checks li.done { color: var(--ink-3); }
.cl-checks a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.cl-checks a:hover { text-decoration: underline; }
.cl-check-i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); }
.cl-checks li.done .cl-check-i { background: var(--ok-soft); color: var(--ok); }
.cl-check-i .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.cl-form-end { display: flex; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--line); }
.cl-card-actions { margin-top: 18px; }
.cl-input[type="date"] { position: relative; min-height: 44px; padding-right: 44px; font-variant-numeric: tabular-nums;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.cl-input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0 0 0 auto; width: 44px; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* the native button only catches the click - the general hover rule above (opacity 1) blew it up to 44 px x full height */
.cl-input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 0; background: none; }
.cl-input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.cl-input[type="date"]:invalid:not(:focus)::-webkit-datetime-edit { color: var(--ink-3); }
.cl-mt { margin-top: 12px; }
.cl-kv-two { display: grid; justify-items: end; gap: 1px; }
.cl-kv-two b { font-weight: 650; white-space: nowrap; }
.cl-kv-two small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.cl-actions-col { display: grid; gap: 10px; }
.cl-link-btn.danger { color: var(--bad); }
.cl-ava.ring.sm { width: 52px; height: 52px; padding: 2.5px; }
.cl-ava.ring.sm img { border-width: 2.5px; }
.cl-rail-coins { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--ink-2); }
.cl-rail-coins b { color: var(--ink); font: 700 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.cl-rail-coins .cl-coin { font-size: 24px; }
.cl-seg-time { margin-left: 0; }
.cl-section-h .cl-link { padding: 6px 10px; font-size: 14px; color: var(--accent-text) !important; }
.cl-dlg .cl-pics.small { max-height: 200px; }
.cl-pic .cl-fsk { top: 5px; left: 5px; padding: 1px 6px; font-size: 10.5px; }
.cl-dlg-b > b { font-size: 15px; }
.cl-dlg-b + .cl-dlg-b { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 18px; }
.cl-dlg .cl-dlg-f .cl-link-btn { margin-right: auto; }
.cl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
@media (min-width: 900px) { .cl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* inputs in dark mode keep their surface */
.cl-input { background-color: var(--surface); }
textarea.cl-input { background-color: var(--surface); }
/* signed in: four creator cards next to each other from 1200 px (the side bar takes its share) */
.cl-in .cl-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 226px), 1fr)); }
/* fields side by side keep their own height (a hint under one never stretches its neighbour) */
.cl-form-2, .cl-form-3 { align-items: start; }
/* a small number field: the stepper takes the field's place */
.cl-num .cl-input.num { width: 100%; }
/* phone: section heads wrap, content cards two per row */
.cl-section-h { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 599.98px) {
  .cl-section-h h2 { font-size: 23px; }
  .cl-ctgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .cl-ct { gap: 7px; }
  .cl-ct b { font-size: 13.5px; }
  .cl-ct-meta { font-size: 12px; gap: 6px; }
  .cl-ct-meta .who { display: none; }
  .cl-ct-pic { border-radius: calc(14px * var(--rk)); }
  .cl-ct-kind, .cl-ct-price { padding: 3px 7px; font-size: 11px; }
}
@media (max-width: 599.98px) {
  .cl-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cl-pcard-b { padding: 10px 12px 12px; }
  .cl-pcard-b b { font-size: 13.5px; }
  .cl-pcard-f { font-size: 12px; }
}
.cl-side-h { margin-bottom: 8px; font: 650 16px/1.3 var(--text); }
.cl-link-more { display: inline-block; margin-top: 12px; color: var(--accent-text); font-weight: 650; font-size: 14px; }
/* the recommendation in the studio (ChatMate for her fan chats) */
.cl-reco { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 20px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--r); background: linear-gradient(120deg, var(--accent-soft), var(--surface) 70%); }
.cl-reco > div { flex: 1 1 320px; min-width: 0; }
.cl-reco b { font-size: 16px; }
.cl-reco p { margin-top: 2px; color: var(--ink-2); font-size: 14.5px; }
.cl-reco-i { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: calc(14px * var(--rk)); background: var(--accent); color: #fff; }

/* ---------- gifts in the chat (2026-10-25): choosing one, the gift in the list, the big moment over the chat */
.cl-gifts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cl-gift-pick { position: relative; display: block; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.cl-gift-pick input { position: absolute; opacity: 0; pointer-events: none; }
.cl-gift-pick > span { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 9px; border: 1px solid var(--line); border-radius: calc(14px * var(--rk)); background: var(--surface);
  transition: border-color .15s, background-color .15s, transform .15s var(--ease); }
.cl-gift-pick:hover > span { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.cl-gift-pick:active > span { transform: scale(.96); }
.cl-gift-pick input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); transform: none; }
.cl-gift-pick input:focus-visible + span, .cl-gift-pick:focus-visible > span { box-shadow: var(--ring); }
.cl-gift-pick[aria-disabled="true"] > span { opacity: .55; }
.cl-gift-pick b { color: var(--ink); font-size: 12.5px; font-weight: 650; }
.cl-gift-pick small { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-gift-pick .cl-coin { font-size: 11px; }
.cl-gift-svg { display: block; width: 44px; height: 44px; flex: none; }
.cl-gift-pick:hover .cl-gift-svg { animation: cl-wiggle .5s var(--ease); }
.cl-giftpop .cl-pop-in { width: min(380px, calc(100vw - 32px)); }
.cl-giftpop-h { display: block; margin-bottom: 10px; font-size: 15px; }
.cl-gift-btn { color: var(--accent-text); }
.cl-giftmsg { display: inline-flex; align-items: center; gap: 12px; width: fit-content; padding: 10px 16px 10px 10px; border-radius: calc(20px * var(--rk));
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--gold-soft) 70%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.cl-msg.mine .cl-giftmsg { margin-left: auto; }
.cl-giftmsg .cl-gift-svg { width: 56px; height: 56px; animation: cl-float 3s ease-in-out infinite; }
.cl-giftmsg span { display: grid; gap: 2px; }
.cl-giftmsg b { font-size: 15.5px; }
.cl-giftmsg small { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.cl-feature-gifts { gap: 10px !important; }
.cl-feature-gifts .cl-gift-svg { width: 40px; height: 40px; animation: cl-float 3.2s ease-in-out infinite; }
.cl-feature-gifts .cl-gift-svg:nth-child(2) { animation-delay: .4s; } .cl-feature-gifts .cl-gift-svg:nth-child(3) { animation-delay: .8s; } .cl-feature-gifts .cl-gift-svg:nth-child(4) { animation-delay: 1.2s; }
.cl-chat, .cl-split-pane { position: relative; }
.cl-giftshow { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; align-content: center; gap: 14px; pointer-events: none; overflow: hidden;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%); animation: cl-fade-in .25s ease-out both; }
.cl-giftshow.out { animation: cl-fade-out .55s ease-in both; }
.cl-gift-svg.big { width: 170px; height: 170px; filter: drop-shadow(0 18px 30px rgba(120, 20, 70, .35)); animation: cl-giftpop 1.4s cubic-bezier(.2, 1.4, .4, 1) both, cl-float 2.4s 1.4s ease-in-out infinite; }
.cl-giftshow-l { padding: 8px 16px; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); font: 700 16px var(--display); animation: cl-rise .5s .45s var(--ease) both; }
.cl-giftbit { position: absolute; left: 50%; top: 46%; width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 0; animation: cl-burst 1.3s var(--d, 0s) cubic-bezier(.15, .8, .3, 1) forwards; }
.cl-giftbit.heart { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8.5-5.2-8.5-11.4A4.6 4.6 0 0 1 12 6.6a4.6 4.6 0 0 1 8.5 3c0 6.2-8.5 11.4-8.5 11.4z' fill='%23e2589c'/%3E%3C/svg%3E") center / contain no-repeat; }
.cl-giftbit.spark { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 7.8L22 12l-7.8 2.2L12 22l-2.2-7.8L2 12l7.8-2.2z' fill='%23f2b93b'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes cl-giftpop { 0% { transform: scale(.2) rotate(-18deg); opacity: 0; } 45% { transform: scale(1.18) rotate(6deg); opacity: 1; } 62% { transform: scale(.94) rotate(-4deg); } 78% { transform: scale(1.04) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes cl-burst { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1.1) rotate(40deg); opacity: 0; } }
@keyframes cl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes cl-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg) scale(1.08); } 60% { transform: rotate(7deg) scale(1.08); } }
@keyframes cl-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cl-fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cl-gift-svg.big, .cl-giftmsg .cl-gift-svg, .cl-feature-gifts .cl-gift-svg, .cl-gift-pick:hover .cl-gift-svg { animation: none; }
  .cl-giftbit { display: none; }
}
@media (max-width: 420px) { .cl-gifts { gap: 6px; } .cl-gift-svg { width: 38px; height: 38px; } }

/* profile: follow, message, gift in one row */
.cl-sub-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-sub-row > * { flex: 1 1 auto; }
.cl-sub-row .cl-btn { width: 100%; }
.cl-sub-row form { display: flex; }

/* the consent above the coin packages */
.cl-consent { margin: 4px 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.cl-consent a { color: var(--accent-text); }
.cl-consent.cl-shake { border-color: var(--accent); box-shadow: var(--ring); }
.cl-shake { animation: cl-shake .5s; border-color: var(--accent); }
@keyframes cl-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------- the landing page: everything but the hero in the middle (owner 2026-10-25), no orange glow in the hero */
.cl-land-hero { background: radial-gradient(70% 60% at 85% 20%, rgba(201, 63, 128, .14), transparent 70%); }
.cl-land .cl-land-h { justify-items: center; margin-inline: auto; text-align: center; }
.cl-land .cl-land-h .cl-sub { max-width: 56ch; }
.cl-land .cl-land-sec > .cl-section-h { flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; margin-bottom: 22px; }
.cl-land .cl-land-sec > .cl-section-h .cl-seg { margin-top: 6px; }
.cl-land-pass .cl-wrap { text-align: center; }
.cl-land-faq { display: grid; justify-items: center; }
.cl-land-faq details { width: min(860px, 100%); text-align: left; }
.cl-land-faq-more { text-align: center; }
.cl-land-creator { justify-items: center; text-align: center; }
.cl-land-creator p { margin-inline: auto; }
@media (min-width: 900px) { .cl-land-creator { grid-template-columns: none; } }
.cl-land .cl-land-note { text-align: center; }
.cl-check a { color: var(--accent-text); }

/* ---------- blog */
.cl-blog-h { display: grid; justify-items: center; gap: 10px; max-width: 760px; margin: 8px auto 30px; text-align: center; }
.cl-blog-h h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -.03em; }
.cl-blog-h .cl-seg { margin-top: 8px; }
.cl-blog-pic { display: block; overflow: hidden; border-radius: calc(16px * var(--rk)); background: var(--surface-2); aspect-ratio: 1200 / 630; }
.cl-blog-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
a:hover > .cl-blog-pic img, a:hover .cl-blog-pic img { transform: scale(1.03); }
.cl-blog-top { display: grid; gap: 22px; align-items: center; margin-bottom: 30px; padding: 16px; border: 1px solid var(--line); border-radius: calc(22px * var(--rk)); background: var(--surface);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
@media (min-width: 900px) { .cl-blog-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 18px 26px 18px 18px; } }
.cl-blog-top-b { display: grid; gap: 10px; justify-items: start; }
.cl-blog-top-b b { font: 700 clamp(22px, 3vw, 30px)/1.2 var(--display); letter-spacing: -.02em; }
.cl-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: calc(22px * var(--gap)); }
.cl-blog-grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cl-blog-card { display: grid; gap: 10px; align-content: start; justify-items: start; color: var(--ink); text-decoration: none; }
.cl-blog-card b { font: 700 19px/1.3 var(--display); letter-spacing: -.01em; }
.cl-blog-card:hover b { color: var(--accent-text); }
.cl-blog-teaser { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.cl-article { display: grid; gap: 22px; max-width: 760px; margin: 0 auto; }
.cl-article header { display: grid; gap: 12px; justify-items: start; }
.cl-article h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.03em; line-height: 1.1; }
.cl-back { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding-left: 4px !important; }
.cl-back .ic { width: 18px; height: 18px; }
.cl-article-pic { overflow: hidden; border-radius: calc(20px * var(--rk)); box-shadow: var(--shadow); }
.cl-article-pic img { width: 100%; }
.cl-article-body { color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.cl-article-body p + p, .cl-article-body ul + p, .cl-article-body p + ul { margin-top: 16px; }
.cl-article-body h2 { margin: 30px 0 10px; color: var(--ink); font-size: 24px; }
.cl-article-body ul { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 22px; }
.cl-article-body strong { color: var(--ink); }
.cl-article-cta { margin-top: 10px; }
.cl-center-h { justify-content: center; }

/* landing cards centred too (owner 2026-10-25: "alles außer hero zentrierter") */
.cl-land .cl-how li, .cl-land .cl-feature, .cl-land .cl-trust > div { justify-items: center; text-align: center; }
.cl-land .cl-how-n { margin-inline: auto; }
.cl-land .cl-feature-demo { justify-content: center; align-self: end; width: 100%; }
.cl-land .cl-feature-demo .cl-bub.me { margin-left: 0; }
.cl-land .cl-feature-demo:has(.cl-bub) { flex-direction: column; align-items: center; }
.cl-land .cl-blog-card { justify-items: center; text-align: center; }
.cl-land-faq-more { margin-top: 18px; }

/* the profile actions in one row (phone: message on top, follow + gift side by side) */
.cl-sub-row > * { flex: 1 1 0; min-width: max-content; }
.cl-sub-row > .cl-sub-main { flex: 2 1 0; }
.cl-follow.is-on { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); }
@media (max-width: 520px) { .cl-sub-row > .cl-sub-main { flex-basis: 100%; } }
/* the composer is sticky (its own layer): lift it above the thread so its gift popover covers locked pictures */
.cl-composer { z-index: 6; }
/* the live cam button stays on one line on phones */
@media (max-width: 440px) { .cl-wide-only { display: none; } }

/* landing heads (owner 2026-10-25): one look everywhere - heading + grey line, the tabs of "Neue Inhalte" below */
.cl-land .cl-land-h { margin-bottom: calc(26px * var(--sk)); }
.cl-land .cl-land-h .cl-seg { justify-self: center; margin-top: 10px; }
.cl-land .cl-land-h h2 { text-wrap: balance; }
.cl-land .cl-land-h .cl-sub { text-wrap: balance; }
/* the logo sits in the middle of the sidebar, like ChatMate's (owner 2026-10-26: "zentriere chatly in der navbar") */
@media (min-width: 1000px) { .cl-side > .cl-mark { align-self: center; padding: 2px 0 0; } }

/* ---------- fans' and creators' start pages apart (owner 2026-10-26: "splitte auch creator und kunden startseite getrennt") */
.cl-aud a { height: 32px; padding: 0 14px; font-size: 13.5px; }
.cl-join .cl-land-copy h1 { font-size: clamp(40px, 7.6vw, 68px); }
.cl-join-card { width: 100%; max-width: 440px; justify-self: center; scroll-margin-top: 24px; }
@media (min-width: 960px) { .cl-join-card { justify-self: end; } }
.cl-join .cl-land-hero-in { align-items: start; }
@media (min-width: 960px) { .cl-join .cl-land-copy { padding-top: 28px; } }

/* the example of what she earns: three sliders, the sum next to them */
.cl-calc { display: grid; gap: 18px; max-width: 980px; margin-inline: auto; }
@media (min-width: 860px) { .cl-calc { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; } }
.cl-calc-in { display: grid; gap: 22px; padding: 24px; border-radius: var(--r); border: 1px solid var(--line); background: var(--ground); }
.cl-calc-row { display: grid; gap: 12px; }
.cl-calc-row > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cl-calc-row b { font-weight: 600; }
.cl-calc-row output { font: 700 20px var(--display); font-variant-numeric: tabular-nums; }
.cl-calc-sum { display: grid; align-content: start; gap: 6px; padding: 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cl-calc-sum > b { font: 800 clamp(40px, 6vw, 54px) / 1.05 var(--display); letter-spacing: -.03em; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.cl-calc-sum dl { display: grid; gap: 8px; margin: 12px 0 6px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.cl-calc-sum dl > div { display: flex; justify-content: space-between; gap: 12px; }
.cl-calc-sum dt { color: var(--ink-2); }
.cl-calc-sum dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.cl-calc-sum p { font-size: 13.5px; line-height: 1.5; }

/* our own slider: a pink filled track and a round knob (never the browser's look) */
.cl-range { --fill: 20%; width: 100%; height: 26px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cl-range:focus { outline: none; }
.cl-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--fill), var(--surface-3) var(--fill)); }
.cl-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-3); }
.cl-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.cl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(20, 18, 15, .18); transition: transform .15s var(--ease); }
.cl-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 2px 6px rgba(20, 18, 15, .18); }
.cl-range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.cl-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft), 0 2px 6px rgba(20, 18, 15, .18); }
.cl-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }

/* help: section titles at the left like the questions; on phones the topics as a row of chips */
.cl-help .cl-land-faq { justify-items: stretch; }
.cl-help .cl-land-faq details { width: 100%; }
@media (max-width: 1099px) {
  .cl-help nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .cl-help nav a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14px; }
}

/* the time filter on phones: four equal parts instead of a cut-off row */
@media (max-width: 560px) {
  .cl-seg.cl-seg-time { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .cl-seg.cl-seg-time a { justify-content: center; padding: 0 6px; }
}

/* her pictures in the studio profile: the chosen one with a button, the choice in a dialog (not three long grids) */
.cl-pick-row { display: flex; align-items: center; gap: 16px; }
.cl-pick-now { flex: none; display: grid; place-items: center; overflow: hidden; background: var(--surface-2); color: var(--ink-3); font-size: 12px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line); }
.cl-pick-now img { width: 100%; height: 100%; object-fit: cover; }
.cl-pick-now.round { width: 72px; height: 72px; border-radius: 50%; }
.cl-pick-now.wide { width: 168px; aspect-ratio: 16 / 9; border-radius: calc(12px * var(--rk)); }
.cl-pick-now.tall { width: 72px; aspect-ratio: 4 / 5; border-radius: calc(12px * var(--rk)); }
.cl-pick-side { display: grid; gap: 8px; justify-items: start; min-width: 0; }
@media (max-width: 420px) { .cl-pick-now.wide { width: 128px; } }
.cl-pick-dlg { --dlg-w: 720px; }
.cl-pick-dlg .cl-pics { max-height: min(56vh, 520px); }

/* phone tables with an amount at the end: title and amount in one line, the rest small below (no column names) */
@media (max-width: 599.98px) {
  .cl-table:not([data-table]) tr:has(> td.r:last-child) { gap: 2px 12px; }
  .cl-table:not([data-table]) tr:has(> td.r:last-child)::after { content: ""; order: 1; flex-basis: 100%; }
  .cl-table:not([data-table]) tr:has(> td.r:last-child) > td:first-child { flex: 1 1 0; min-width: 0; font-weight: 600; }
  .cl-table:not([data-table]) tr:has(> td.r:last-child) > td.r:last-child { order: 1; flex: none; margin-left: auto; font-weight: 700; }
  .cl-table:not([data-table]) tr:has(> td.r:last-child) > td:not(:first-child):not(:last-child) { order: 2; color: var(--ink-3); font-size: 13px; }
  .cl-table:not([data-table]) tr:has(> td.r:last-child) > td:not(:first-child):not(:last-child)::before { content: none; }
  .cl-table:not([data-table]) tr:has(> td.r:last-child) > td.r:not(:first-child):not(:last-child)::before { content: attr(data-label) " "; display: inline; font: inherit; letter-spacing: 0; text-transform: none; }
}

/* the sign-up card: title, line, then the form */
.cl-join-card h2 { margin-bottom: 4px; }
.cl-join-card > .cl-muted { margin-bottom: 18px; }

/* ---------- motion on the start pages, like ChatMate's (owner 2026-10-26: "coole animationen wie bei chatmate");
   chatly.js sets .cl-anim on <html> only without "reduce motion" - without it everything simply stands there */
@keyframes cl-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes cl-in-right { from { opacity: 0; transform: translateX(34px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cl-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cl-out { to { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes cl-ticker { to { transform: translateX(-50%); } }
@keyframes cl-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 70% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }

/* the hero comes in line by line, the sign-up card from the right */
.cl-anim .cl-land-hero .cl-land-copy > * { animation: cl-up .8s var(--ease) both; }
.cl-anim .cl-land-hero .cl-land-copy > :nth-child(2) { animation-delay: .08s; }
.cl-anim .cl-land-hero .cl-land-copy > :nth-child(3) { animation-delay: .16s; }
.cl-anim .cl-land-hero .cl-land-copy > :nth-child(4) { animation-delay: .24s; }
.cl-anim .cl-land-hero .cl-land-copy > :nth-child(n+5) { animation-delay: .32s; }
.cl-anim .cl-join-card, .cl-anim .cl-land-hero .cl-show { animation: cl-in-right .9s .15s var(--ease) both; }

/* everything further down rises when it scrolls into view, neighbours one after the other */
.cl-anim [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.cl-anim [data-reveal].is-in { opacity: 1; transform: none; }

/* what lands with her: up to three notes, the newest on top */
.cl-earn { display: none; }
@media (min-width: 960px) {
  .cl-earn { display: grid; gap: 10px; width: min(400px, 100%); margin-top: 18px; }
  .cl-earn-cap { color: var(--ink-3); font-size: 12.5px; font-weight: 650; }
  .cl-earn-list { display: grid; align-content: start; gap: 8px; height: 222px; }
}
.cl-earn-n { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: calc(16px * var(--rk)); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); animation: cl-pop .55s var(--ease) both; }
.cl-earn-n.is-out { animation: cl-out .45s var(--ease) both; }
.cl-earn-i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: calc(12px * var(--rk)); background: var(--accent-soft); color: var(--accent-text); }
.cl-earn-i .ic { width: 19px; height: 19px; }
.cl-earn-i .cl-gift-svg { width: 28px; height: 28px; }
.cl-earn-n > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.cl-earn-n b { font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-earn-n small { color: var(--ink-3); font-size: 12.5px; }
.cl-earn-n > em { flex: none; font-style: normal; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }

/* fans writing, passing by */
.cl-ticker { overflow: hidden; padding-block: 26px 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cl-ticker-track { display: flex; gap: 12px; width: max-content; padding-inline: 16px; }
.cl-anim .cl-ticker-track { animation: cl-ticker 70s linear infinite; }
.cl-ticker:hover .cl-ticker-track { animation-play-state: paused; }
.cl-tb { flex: none; padding: 11px 16px; border-radius: 18px 18px 18px 6px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 14.5px; white-space: nowrap; }
.cl-tb.me { border-color: transparent; border-radius: 18px 18px 6px 18px; background: linear-gradient(135deg, #d24d8c, #b02a68); color: #fff; }

/* phones: the amount at the end needs no column name; head buttons share the row; a filter of four becomes two by two */
@media (max-width: 599.98px) {
  .cl-table:not([data-table]) tr:has(> td.r:last-child) > td.r:last-child::before { content: none; }
  .cl-page-h > .cl-actions { width: 100%; flex-wrap: nowrap; }
  .cl-page-h > .cl-actions > .cl-btn, .cl-page-h > .cl-actions > form > .cl-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 12px; }
  .cl-page-h > .cl-actions > form { display: flex; flex: 1 1 0; min-width: 0; }
  .cl-page-h > .cl-actions > form > .cl-btn { width: 100%; }
  .cl-seg.scroll { width: 100%; }
  .cl-seg.scroll > * { flex: none; }
  .cl-seg.scroll.cl-seg-time { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* every picture still to be bought: as strongly blurred as the veil over FSK 18 (owner 2026-10-26) - the server already sends
   only colour, the page softens it once more and scales it so no blurred edge shows */
img[src$="/vorschau"] { filter: blur(24px) saturate(1.2); transform: scale(1.3); }
.cl-ct:hover .cl-ct-pic img[src$="/vorschau"] { transform: scale(1.34); }
.cl-ppv { overflow: hidden; }

/* the imprint's provider lines are painted, not text (owner 2026-10-26: "nicht scanbar") */
.cl-imprint-pic { display: block; max-width: 100%; }
[data-v] .cl-imprint-pic { display: inline-block; vertical-align: middle; }
.cl-legal-provider { font-weight: 400; color: var(--ink); }

/* the age question: a strong blur behind it, and a slower, softer exit after "Ja" (owner 2026-10-26: "geht nicht smooth weg") */
.cl-agegate::backdrop { background: rgba(20, 12, 16, .62); backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1); }
.cl-agegate, .cl-agegate::backdrop, .cl-agegate[data-closing], .cl-agegate[data-closing]::backdrop { transition-duration: .34s; }
/* the start page plays its entry only once the question is answered */
.cl-gated .cl-land-hero .cl-land-copy > *, .cl-gated .cl-join-card, .cl-gated .cl-land-hero .cl-show { animation-play-state: paused; }

/* ---------- /jugendschutz: not for you yet, help, parents, how we protect */
.cl-youth { display: grid; gap: 36px; max-width: 980px; margin: 0 auto; padding-block: 12px 8px; }
.cl-youth-hero { display: grid; justify-items: center; gap: 14px; text-align: center; padding-top: 18px; }
.cl-youth-badge { display: grid; place-items: center; width: 84px; height: 84px; border-radius: calc(26px * var(--rk)); color: #fff; font: 800 30px var(--display);
  letter-spacing: -.03em; background: linear-gradient(135deg, #d24d8c, #8f2156); box-shadow: 0 18px 40px rgba(176, 42, 104, .28); }
.cl-youth-hero h1 { font-size: clamp(32px, 6vw, 48px); letter-spacing: -.03em; }
.cl-youth-hero .cl-lead { max-width: 52ch; margin-inline: auto; }
.cl-youth-sec { display: grid; gap: 8px; }
.cl-youth-sec h2, .cl-youth-two h2 { font-size: clamp(21px, 3vw, 26px); letter-spacing: -.02em; }
.cl-youth-grid { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 720px) { .cl-youth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-youth-card { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.cl-youth-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
.cl-youth-card b { font: 700 17.5px var(--display); }
.cl-youth-card > span:not(.cl-feature-i) { color: var(--ink-2); font-size: 14.5px; }
.cl-youth-card strong { color: var(--ink); white-space: nowrap; }
.cl-youth-card small { color: var(--accent-text); font-weight: 650; font-size: 13.5px; }
.cl-youth-two { display: grid; gap: 14px; }
@media (min-width: 860px) { .cl-youth-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-youth-two .cl-card { display: grid; align-content: start; gap: 10px; }
.cl-youth-two p { color: var(--ink-2); }
.cl-youth-two a { color: var(--accent-text); }
.cl-youth-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.cl-youth-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); }
.cl-youth-list .ic { flex: none; margin-top: 3px; width: 17px; height: 17px; color: var(--ok); stroke-width: 2.4; }
.cl-youth-back { text-align: center; }
.cl-youth-back a { color: var(--ink-3); font-size: 14px; }

/* ---------- legal pages and help: the topics go along while reading, the current one marked (owner 2026-10-26: "bei agbs usw
   geht die selectbar mit den oberbegriffen nicht mit" - it was sticky at 24 px, i.e. hidden under the 64 px top bar) */
html:has(.cl-help) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.cl-help) { scroll-behavior: auto; } }
.cl-help nav a.is-on { background: var(--accent-soft); color: var(--accent-text); }
@media (min-width: 1100px) {
  .cl-out .cl-help nav { top: 88px; }
  .cl-help nav { max-height: calc(100vh - 112px); overflow-y: auto; }
  .cl-out .cl-help section, .cl-out .cl-help [id^="p"] { scroll-margin-top: 92px; }
}
@media (max-width: 1099.98px) {
  .cl-help nav { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 12; flex-wrap: nowrap; gap: 6px; overflow-x: auto;
    margin: 0 -16px; padding: 10px 16px; background: var(--glass); border-bottom: 1px solid var(--line); scrollbar-width: none;
    backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
  .cl-help nav::-webkit-scrollbar { display: none; }
  .cl-help nav a { flex: none; white-space: nowrap; }
  .cl-help nav a.is-on { background: var(--accent); border-color: transparent; color: #fff; }
  .cl-help section, .cl-help [id^="p"] { scroll-margin-top: 136px; }
}
.cl-youth-two > .cl-card { margin: 0; }

/* ---------- chat 2026-10-26: gift dialog, voice messages, recorder, attachment chip, "new message" pill */
.cl-composer { align-items: flex-end; }
.cl-composer .cl-icon-btn { flex: none; width: 46px; height: 46px; border-radius: calc(14px * var(--rk)); }
.cl-composer.is-off textarea, .cl-composer.is-off .cl-btn, .cl-composer.is-off .cl-icon-btn { opacity: .5; cursor: not-allowed; }
.cl-composer.is-rec > :not(.cl-rec):not(input[type=hidden]) { display: none; }
.cl-mic.is-busy, .cl-mic[aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* the recording bar */
.cl-rec { display: flex; flex: 1; align-items: center; gap: 10px; min-height: 46px; padding: 0 4px 0 2px; }
.cl-rec[hidden] { display: none; }
.cl-rec-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: #e5484d; animation: cl-pulse 1.4s infinite; }
.cl-rec-t { flex: none; min-width: 42px; font: 700 15px var(--display); font-variant-numeric: tabular-nums; }
.cl-rec-bars { display: flex; flex: 1; align-items: center; gap: 3px; height: 34px; min-width: 0; overflow: hidden; }
.cl-rec-bars i { flex: 1; min-width: 2px; max-width: 5px; height: 12%; border-radius: 3px; background: var(--accent); opacity: .85; transition: height .1s linear; }
.cl-rec-send { flex: none; min-height: 46px; padding: 0 16px; white-space: nowrap; }

/* a voice message */
.cl-msg-voice { display: grid; justify-items: start; gap: 8px; overflow: visible; max-width: 320px; }
.cl-msg.mine .cl-msg-voice { justify-items: end; }
.cl-msg-voice .cl-pill { position: static; }
.cl-voice { display: flex; align-items: center; gap: 10px; width: min(300px, 72vw); padding: 8px 14px 8px 8px; border-radius: 22px 22px 22px 8px;
  background: var(--surface); border: 1px solid var(--line); }
.cl-msg.mine .cl-voice { border: 0; border-radius: 22px 22px 8px 22px; background: var(--accent); color: var(--accent-ink); }
.cl-voice-play { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer;
  transition: transform .15s var(--ease), background-color .15s; }
.cl-voice-play:hover:not(:disabled) { transform: scale(1.06); }
.cl-voice-play .ic { width: 18px; height: 18px; }
.cl-msg.mine .cl-voice-play { background: #fff; color: var(--accent-text); }
.cl-voice-play:disabled { background: var(--surface-3); color: var(--ink-3); cursor: default; }
.cl-voice-wave { display: flex; flex: 1; align-items: center; gap: 2px; height: 30px; min-width: 0; cursor: pointer; }
.cl-voice-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: currentColor; opacity: .3; transition: opacity .15s; }
.cl-voice-wave i.on { opacity: .95; }
.cl-msg:not(.mine) .cl-voice-wave i.on { background: var(--accent); opacity: 1; }
.cl-msg.mine .cl-voice-wave i.on { background: #fff; }
.cl-voice-t { flex: none; min-width: 34px; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.cl-voice.is-locked { filter: saturate(.6); }
.cl-voice.is-locked .cl-voice-wave { cursor: default; }
.cl-voice.is-locked .cl-voice-wave i { opacity: .22; }

/* the gift dialog */
.cl-giftdlg { --dlg-w: 760px; }
.cl-giftdlg .cl-dlg-b { gap: 14px; }
.cl-gift-tabs { justify-self: start; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.cl-gift-tabs::-webkit-scrollbar { display: none; }
.cl-gift-tabs button { flex: none; }
.cl-giftdlg .cl-gifts { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; max-height: min(52vh, 460px); overflow-y: auto; padding: 4px 2px 6px; }
.cl-gift-pick[hidden] { display: none; }
.cl-giftdlg .cl-gift-pick > span { padding: 12px 6px 10px; }
.cl-giftdlg .cl-gift-pick .cl-gift-svg { width: 54px; height: 54px; }
.cl-gift-pick b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.cl-gift-f { align-items: center; justify-content: space-between; }
.cl-gift-bal { color: var(--ink-2); font-size: 14px; }
.cl-gift-bal a { color: var(--accent-text); font-weight: 650; }
.cl-gift-f .cl-btn[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 520px) {
  .cl-giftdlg .cl-gifts { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 46vh; }
  .cl-gift-f { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .cl-gift-f .cl-btn { width: 100%; }
  .cl-gift-bal { text-align: center; }
}

/* her attachment, visible after the picker closes */
.cl-attach { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 4px 6px 4px 4px; border-radius: calc(14px * var(--rk)); background: var(--accent-soft);
  color: var(--accent-text); font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.cl-attach[hidden] { display: none; }
.cl-attach img { width: 38px; height: 38px; border-radius: calc(10px * var(--rk)); object-fit: cover; }
.cl-attach button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: calc(8px * var(--rk)); background: none; color: inherit; cursor: pointer; }
.cl-attach button:hover { background: rgba(201, 63, 128, .14); }
.cl-attach .ic { width: 16px; height: 16px; }
@media (max-width: 520px) { .cl-attach [data-attach-label] { display: none; } }

/* someone reading further up: a pill instead of a jump */
.cl-chat { position: relative; }
.cl-newpill { position: absolute; left: 50%; bottom: 96px; z-index: 8; translate: -50% 0; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--ground);
  font: 650 13.5px var(--text); box-shadow: var(--shadow-lg); cursor: pointer; animation: cl-pop .3s var(--ease) both; }
.cl-newpill[hidden] { display: none; }
/* phones: the recording bar shrinks its level bars (never the send button), the composer keeps room for typing */
.cl-rec { min-width: 0; }
@media (max-width: 520px) {
  .cl-composer { gap: 6px; }
  .cl-composer .cl-icon-btn { width: 40px; height: 46px; }
  .cl-composer textarea { padding-inline: 12px; }
  .cl-rec { gap: 8px; }
  .cl-rec-send { padding: 0 12px; }
  .cl-gift-tabs button { padding: 0 10px; font-size: 13.5px; }
}

/* ---------- content protection for fans (owner 2026-10-26) - see chatly.js: no saving, dragging, printing, a shield on
   print screen and while away; the studio and the admin are left alone (no data-guard there) */
[data-guard] .cl-post-media, [data-guard] .cl-msg-media, [data-guard] .cl-ct-pic, [data-guard] .cl-lb, [data-guard] a.cl-media {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
[data-guard] .cl-post-media img, [data-guard] .cl-msg-media img, [data-guard] .cl-ct-pic img, [data-guard] .cl-lb img, [data-guard] video { -webkit-user-drag: none; }
/* a clear layer over every picture: a long press or "save image" only ever finds the layer */
[data-guard] a.cl-media, [data-guard] .cl-msg-media > a { position: relative; display: block; }
[data-guard] a.cl-media::after, [data-guard] .cl-msg-media > a::after { content: ""; position: absolute; inset: 0; }
[data-guard] .cl-lb img { pointer-events: none; }
.cl-shield [data-guard] .cl-post-media img, .cl-shield [data-guard] .cl-msg-media img, .cl-shield [data-guard] .cl-lb img,
.cl-shield [data-guard] .cl-post-media video, .cl-shield [data-guard] .cl-msg-media video, .cl-shield [data-guard] .cl-ct-pic img {
  filter: blur(30px) !important; transition: none !important; }
@media print {
  [data-guard] .cl-post-media, [data-guard] .cl-msg-media, [data-guard] .cl-ct-pic, [data-guard] .cl-lb, [data-guard] a.cl-media,
  [data-guard] .cl-show, [data-guard] .cl-ppv, [data-guard] video { visibility: hidden !important; }
}

/* ---------- the leak finder (admin) */
.cl-leaks { display: grid; gap: 18px; }
.cl-leaks .cl-card + .cl-card { margin-top: 0; }
.cl-leak-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.cl-leak-head p { color: var(--ink-2); flex: 1; min-width: 220px; }
.cl-leak-verdict { padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--surface-2); color: var(--ink-2); }
.cl-leak-verdict.sicher { background: var(--ok-soft); color: var(--ok); }
.cl-leak-verdict.wahrscheinlich { background: var(--gold-soft); color: var(--gold); }
.cl-leak-orig { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 12px; border-radius: calc(14px * var(--rk)); background: var(--surface-2); }
.cl-leak-orig img { width: 72px; height: 72px; border-radius: calc(12px * var(--rk)); object-fit: cover; }
.cl-leak-orig div { display: grid; gap: 2px; }
.cl-leak-result tr.is-hit td { background: var(--accent-soft); }
.cl-leak-how { margin-top: 12px; font-size: 13.5px; }
.cl-leak-info h2 { margin-bottom: 10px; }

/* ---------- popovers (menus behind "..." and the like) open with a short drop (owner 2026-10-27: "popups ... verbuggt") */
@keyframes cl-popin { from { opacity: 0; translate: 0 -4px; scale: .98; } }
.cl-pop[open] > .cl-pop-in { animation: cl-popin .14s var(--ease) both; transform-origin: top left; }
.cl-pop.end[open] > .cl-pop-in { transform-origin: top right; }
.cl-pop.up[open] > .cl-pop-in { transform-origin: bottom left; animation-name: cl-popin-up; }
@keyframes cl-popin-up { from { opacity: 0; translate: 0 4px; scale: .98; } }
@media (prefers-reduced-motion: reduce) { .cl-pop[open] > .cl-pop-in { animation: none; } }

/* ---------- one rule for page heads (owner 2026-10-27: "nicht zentriert"): title and line on the left, the page's buttons on the
   right of the same row - with a long line they used to drop below and sit on the left; on the phone they take a full row under
   the text (before: once left, once right, once full width) */
@media (min-width: 600px) {
  .cl-page-h { flex-wrap: nowrap; }
  .cl-page-h > :first-child { flex: 1 1 auto; min-width: 0; }
  .cl-page-h > :not(:first-child) { flex: none; }
}
@media (max-width: 599.98px) {
  .cl-page-h > .cl-btn { flex: 1 1 100%; }
  /* filter bars of two or three take the full width in equal parts, like the four-part ones */
  .cl-seg.scroll:not(:has(> :nth-child(4))) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .cl-seg.scroll:not(:has(> :nth-child(4))) > * { justify-content: center; }
  /* coin packages as calm rows: amount, price, button - five no longer leave one alone and stretched */
  .cl-packs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cl-packs > .cl-pack:last-child:nth-child(odd) { grid-column: auto; }
  .cl-pack { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 14px; row-gap: 2px; padding: 14px 14px 14px 16px; }
  .cl-pack-n { grid-column: 1; grid-row: 1; font-size: 24px; }
  .cl-pack > .cl-muted { display: none; }
  .cl-pack-price { grid-column: 1; grid-row: 2; margin: 0; font-size: 14px; }
  .cl-pack > .cl-btn { grid-column: 2; grid-row: 1 / span 2; width: auto; min-width: 104px; }
  .cl-pack-flag, .cl-pack-bonus { top: -9px; }
}
/* under a tile: name shortens, the time stays on one line, likes at the end */
.cl-ct-meta > span:not(.who):not(.likes):not(.cl-ava) { flex: none; white-space: nowrap; }
.cl-ct-meta .who { min-width: 0; }

/* ---------- notices after a form (owner 2026-10-27: "bis zum rand der cards"): a floating bubble at the top of the page column with
   room to the sides - it no longer pushes the page down or runs the width of the cards; it fades in, a confirmation goes after 5 s,
   a problem after 10 s (not while the pointer or focus is on it), the cross closes it at once */
body:has(.cl-auth) .cl-toasts { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
.cl-toasts { position: fixed; inset-inline: 0; top: calc(env(safe-area-inset-top, 0px) + 76px); z-index: 40; display: grid; justify-items: center; gap: 8px; padding-inline: 16px; pointer-events: none; }
@media (min-width: 1000px) { .cl-in .cl-toasts { left: 264px; top: 24px; padding-inline: 40px; } }
.cl-toast { pointer-events: auto; align-items: flex-start; width: min(560px, 100%); margin: 0; padding: 12px 8px 12px 16px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: calc(16px * var(--rk));
  box-shadow: 0 16px 40px rgba(20, 18, 15, .16), 0 2px 6px rgba(20, 18, 15, .06); line-height: 1.45; animation: cl-toast-in .28s var(--ease) both;
  transition: opacity .2s var(--ease), translate .2s var(--ease); }
.cl-toast.ok { background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--surface); }
.cl-toast.err { background: linear-gradient(var(--bad-soft), var(--bad-soft)), var(--surface); }
.cl-toast > .ic { margin-top: 1px; }
.cl-toast > span { flex: 1; min-width: 0; padding-top: 1px; }
.cl-toast a, .cl-chat-err a { margin-left: 6px; color: inherit; font-weight: 600; white-space: nowrap; }
.cl-toast-x { display: grid; flex: none; place-items: center; width: 30px; height: 30px; margin: -5px 0 -5px 4px; padding: 0; border: 0; border-radius: calc(10px * var(--rk)); background: none; color: inherit; cursor: pointer; opacity: .7; }
.cl-toast-x:hover { background: color-mix(in srgb, currentColor 10%, transparent); opacity: 1; }
.cl-toast-x .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.cl-toast[data-leaving] { opacity: 0; translate: 0 -8px; }
@keyframes cl-toast-in { from { opacity: 0; translate: 0 -10px; scale: .98; } }
/* the chat's notice: same side room as the field under it, one running line with its link */
.cl-chat-err { display: block; margin: 0 0 10px; border-radius: calc(14px * var(--rk)); animation: cl-toast-in .24s var(--ease) both; }
@media (min-width: 1000px) { .cl-split-pane .cl-chat-err { margin: 0 18px 10px; } }
@media (prefers-reduced-motion: reduce) {
  .cl-toast, .cl-chat-err { animation-name: cl-fade-in; }
  .cl-toast[data-leaving] { translate: 0 0; }
}
@keyframes cl-fade-in { from { opacity: 0; } }

/* ---------- charts and data tables (owner 2026-10-27: "datentable usw und charts usw. alles mit schönen animationen"):
   chatly-data.js draws them; series colours s0..s5, everything from the theme tokens */
.s0 { --s: var(--c0); } .s1 { --s: var(--c1); } .s2 { --s: var(--c2); } .s3 { --s: var(--c3); } .s4 { --s: var(--c4); } .s5 { --s: var(--c5); }
i.dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--s, var(--c0)); }
.cl-chart { position: relative; container-type: inline-size; }
/* reserve the chart's height so the card keeps its size while the SVG is drawn in (2026-10-30): no layout jump on load */
.cl-chart[data-chart="line"], .cl-chart[data-chart="bars"] { min-height: 190px; }
@media (min-width: 560px) { .cl-chart[data-chart="line"], .cl-chart[data-chart="bars"] { min-height: 230px; } }
.cl-chart[data-chart="donut"], .cl-chart[data-chart="rank"] { min-height: 180px; }
.cl-chart-plot { position: relative; border-radius: calc(12px * var(--rk)); outline: none; }
.cl-chart-plot:focus-visible { box-shadow: var(--ring); }
.cl-chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.cl-chart .grid line { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.cl-chart .grid line.base { stroke: var(--line-2); }
.cl-chart .grid text { fill: var(--ink-3); font: 500 11.5px/1 var(--text); font-variant-numeric: tabular-nums; }
.cl-chart .line { fill: none; stroke: var(--s); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cl-chart .stop { stop-color: var(--s); }
.cl-chart .end { fill: var(--s); stroke: var(--surface); stroke-width: 2; }
.cl-chart circle.dot { fill: var(--surface); stroke: var(--s); stroke-width: 2.4; opacity: 0; transition: opacity .12s; pointer-events: none; }
.cl-chart circle.dot.on { opacity: 1; }
.cl-chart .guide { stroke: var(--line-2); stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.cl-chart .guide.on { opacity: 1; }
.cl-chart .bar { fill: var(--s); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .15s; }
.cl-chart .bar.dim { opacity: .32; }
.cl-chart svg.pre .bar { transform: scaleY(0); }
.cl-chart svg.grow .bar { transition: transform .65s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 16ms), opacity .15s; }
.cl-chart-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -4px 0 10px; color: var(--ink-2); font-size: 13px; }
.cl-chart-key span { display: inline-flex; align-items: center; gap: 7px; }
.cl-chart.is-empty .cl-chart-plot::after { content: "Noch keine Zahlen in diesem Zeitraum."; position: absolute; inset: 0 0 26px 48px; display: grid; place-items: center; color: var(--ink-3); font-size: 14px; }
.cl-chart-tip { position: absolute; z-index: 3; top: 0; left: 0; display: grid; gap: 5px; min-width: 150px; padding: 9px 12px; border: 1px solid var(--line); border-radius: calc(12px * var(--rk));
  background: var(--surface); box-shadow: var(--shadow-lg); color: var(--ink); font-size: 13px; line-height: 1.3; white-space: nowrap; pointer-events: none;
  opacity: 0; translate: calc(-50% + var(--shift, 0px)) calc(-100% + 4px); transition: opacity .12s, translate .12s; }
.cl-chart-tip.on { opacity: 1; translate: calc(-50% + var(--shift, 0px)) -100%; }
.cl-chart-tip b { font-weight: 650; }
.cl-chart-tip .row { display: flex; align-items: center; gap: 7px; color: var(--ink-2); }
.cl-chart-tip .row strong { margin-left: auto; padding-left: 14px; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
/* donut with its key */
.cl-donut { display: grid; grid-template-columns: minmax(118px, 160px) minmax(0, 1fr); align-items: center; gap: 22px; }
@container (max-width: 360px) { .cl-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; } .cl-donut .cl-legend { width: 100%; } }
.cl-donut-fig { position: relative; width: 100%; max-width: 160px; aspect-ratio: 1; }
.cl-donut-fig svg { width: 100%; height: 100%; }
.cl-donut .track { fill: none; stroke: var(--surface-2); stroke-width: 5.2; }
.cl-donut .seg { fill: none; stroke: var(--s); stroke-width: 5.2; transition: stroke-dasharray .9s cubic-bezier(.3, .7, .2, 1) calc(var(--i) * 90ms), opacity .15s; }
.cl-donut .seg.dim { opacity: .28; }
.cl-donut-mid { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; text-align: center; pointer-events: none; }
.cl-donut-mid b { font: 700 22px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.cl-donut-mid span { color: var(--ink-3); font-size: 12.5px; }
.cl-legend { display: grid; margin: 0; padding: 0; list-style: none; }
.cl-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; transition: opacity .15s; }
.cl-legend li:first-child { border-top: 0; }
.cl-legend .name { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.cl-legend b { font-weight: 650; font-variant-numeric: tabular-nums; }
.cl-legend small { min-width: 40px; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.cl-legend li.dim { opacity: .42; }
.cl-legend li.cl-muted { display: block; color: var(--ink-3); }
.cl-donut.pre .cl-legend li { opacity: 0; }
.cl-donut.in .cl-legend li { animation: cl-rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.25s + var(--i) * 70ms); }
@keyframes cl-rise { from { opacity: 0; translate: 0 6px; } }
/* ranking */
.cl-rank { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cl-rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; font-size: 14.5px; }
.cl-rank .name { overflow: hidden; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.cl-rank a.name:hover { color: var(--accent-text); }
.cl-rank b { font-weight: 650; font-variant-numeric: tabular-nums; }
.cl-rank .bar { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.cl-rank .bar i { display: block; width: calc(var(--w) * 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c0), color-mix(in srgb, var(--c0) 55%, var(--c1)));
  transition: width .85s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 80ms); }
.cl-rank.pre .bar i { width: 0; }
.cl-rank li.cl-muted { display: block; color: var(--ink-3); }

/* data tables: the bar above (search, chips, how many), sortable heads, pages under it */
.cl-dt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.cl-dt-search { flex: 1 1 220px; max-width: 360px; }
.cl-dt-count { margin-left: auto; color: var(--ink-3); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-seg.sm { padding: 3px; border-radius: calc(12px * var(--rk)); }
.cl-seg.sm button, .cl-seg.sm a { height: 30px; padding: 0 11px; border-radius: calc(9px * var(--rk)); font-size: 13.5px; }
.cl-seg [aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 18, 15, .06), 0 0 0 1px var(--line); }
.cl-dt-sort { display: inline-flex; align-items: center; gap: 4px; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: calc(8px * var(--rk)); background: none; color: inherit; font: inherit; cursor: pointer; }
.cl-dt-sort:hover { background: var(--surface-2); color: var(--ink); }
.cl-dt-sort .ic { width: 14px; height: 14px; stroke-width: 2.2; opacity: 0; transition: opacity .15s; }
.cl-dt-sort:hover .ic, .cl-dt-sort:focus-visible .ic { opacity: .5; }
th.r .cl-dt-sort { flex-direction: row-reverse; }
th[aria-sort="ascending"] .cl-dt-sort, th[aria-sort="descending"] .cl-dt-sort { color: var(--ink); }
th[aria-sort="ascending"] .cl-dt-sort .ic, th[aria-sort="descending"] .cl-dt-sort .ic { opacity: 1; }
th[aria-sort="ascending"] .cl-dt-sort .d, th[aria-sort="descending"] .cl-dt-sort .u { opacity: .22; }
.cl-dt-pages { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; color: var(--ink-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cl-dt-pages[hidden] { display: none; }
.cl-icon-btn.sm { width: 34px; height: 34px; border-radius: calc(10px * var(--rk)); }
.cl-icon-btn.sm .ic { width: 18px; height: 18px; }
.cl-dt-empty td { padding: 30px 14px; color: var(--ink-3); text-align: center; }
.cl-table[data-table] { container-type: inline-size; }
.cl-table[data-table] tbody tr { transition: background-color .15s; }
.cl-table[data-table] tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
/* narrow: every row a small card - its main cell on top, then "column: value" lines */
@container (max-width: 560px) {
  .cl-table[data-table] thead { display: none; }
  .cl-table[data-table] table, .cl-table[data-table] tbody, .cl-table[data-table] tr { display: block; }
  .cl-table[data-table] tbody tr { padding: 12px 14px; border-top: 1px solid var(--line); }
  .cl-table[data-table] tbody tr:first-child { border-top: 0; }
  .cl-table[data-table] td { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 8px; padding: 3px 0; border: 0; text-align: right; }
  .cl-table[data-table] td::before { content: attr(data-label); margin-right: auto; padding-right: 10px; color: var(--ink-3); font-size: 13px; text-align: left; }
  .cl-table[data-table] td:first-child { display: block; padding: 0 0 6px; text-align: left; }
  .cl-table[data-table] td:first-child::before, .cl-table[data-table] td:not([data-label])::before { content: none; }
  .cl-table[data-table] td:not([data-label]) { display: flex; justify-content: flex-end; padding-top: 8px; }
  .cl-table[data-table] .cl-dt-empty td { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-chart .bar, .cl-donut .seg, .cl-rank .bar i, .cl-chart-tip { transition: none; }
  .cl-donut.in .cl-legend li { animation: none; }
}
/* a row of charts at one height: the line or bars fill what the donut or ranking next to them needs */
.cl-g.eq { align-items: stretch; }
.cl-g.eq > .cl-card { display: flex; flex-direction: column; }
.cl-g.eq > .cl-card > .cl-chart { flex: 1 1 auto; }
.cl-dt-filter.scroll { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cl-dt-filter.scroll::-webkit-scrollbar { display: none; }
.cl-dt-filter > button { flex: none; white-space: nowrap; }
@media (max-width: 599.98px) { .cl-dt-search { flex-basis: 100%; max-width: none; } }
/* data-table="compact" (booking lists): narrow, the first line is what + amount, the rest small below it */
@container (max-width: 560px) {
  .cl-table[data-table="compact"] tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
  .cl-table[data-table="compact"] tbody tr::after { content: ""; order: 1; flex-basis: 100%; }
  .cl-table[data-table="compact"] tbody td { display: block; padding: 0; text-align: left; }
  .cl-table[data-table="compact"] tbody td::before { content: none; }
  .cl-table[data-table="compact"] tbody td:first-child { flex: 1 1 0; min-width: 0; padding: 0; font-weight: 600; }
  .cl-table[data-table="compact"] tbody td:last-child { order: 1; flex: none; margin-left: auto; font-weight: 700; text-align: right; }
  .cl-table[data-table="compact"] tbody td:not(:first-child):not(:last-child) { order: 2; color: var(--ink-3); font-size: 13px; }
  .cl-table[data-table="compact"] tbody td.r:not(:first-child):not(:last-child)::before { content: attr(data-label) " "; }
  .cl-table[data-table="compact"] tbody td:first-child small { display: inline; margin-left: 6px; font-weight: 500; }
  .cl-table[data-table="compact"] .cl-dt-empty td { flex: 1; text-align: center; font-weight: 400; }
}

/* ---------- AI profiles (owner 2026-10-27): admins see "KI" next to the name; fans see no mark since 2026-10-28 */
.cl-ai { display: inline-grid; place-items: center; flex: none; height: 1.25em; margin-left: .35em; padding: 0 .42em; border-radius: calc(6px * var(--rk));
  background: color-mix(in srgb, var(--c1) 14%, transparent); color: var(--c1); font: 750 .64em/1 var(--text); letter-spacing: .03em; vertical-align: .14em; }

/* the admin's "KI-Profile anlegen": drop zone, how they are grouped, progress, the made ones */
.cl-drop.big { gap: 8px; padding: 34px 18px; text-align: center; transition: border-color .15s, background-color .15s; }
.cl-drop.big.over { border-color: var(--accent); background: var(--accent-soft); }
.cl-drop.sm { padding: 16px; }
.cl-drop-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.cl-drop-btns .cl-btn { cursor: pointer; }
.cl-seg.pick { flex-wrap: wrap; }
.cl-seg.pick label { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: calc(10px * var(--rk)); color: var(--ink-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.cl-seg.pick label:hover { color: var(--ink); }
.cl-seg.pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cl-seg.pick label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 18, 15, .06), 0 0 0 1px var(--line); }
.cl-seg.pick label:has(input:focus-visible) { box-shadow: var(--ring); }
.cl-ai-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; padding: 2px; } /* no inner scroll: in the dialog body (a grid) it would collapse to 0 */
.cl-ai-group { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: calc(12px * var(--rk)); background: var(--surface); }
.cl-ai-group .pics { display: flex; align-items: center; flex: none; }
.cl-ai-group img { width: 34px; height: 34px; margin-left: -10px; border: 2px solid var(--surface); border-radius: calc(8px * var(--rk)); object-fit: cover; }
.cl-ai-group img.first { width: 42px; height: 42px; margin-left: 0; border-radius: 50%; }
.cl-ai-group .more { margin-left: 4px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.cl-ai-group .t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.cl-ai-group .t b { white-space: nowrap; }
.cl-ai-opts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 28px; }
.cl-ai-opts .cl-seg.pick { flex-wrap: nowrap; }
.cl-ai-group .t small { overflow: hidden; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.cl-ai-progress { display: grid; gap: 8px; }
.cl-ai-bar { height: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.cl-ai-bar i { display: block; width: calc(var(--p, 0) * 100%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c0), var(--c1)); transition: width .35s var(--ease); }
.cl-ai-progress p { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.cl-ai-made { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cl-ai-made li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: calc(12px * var(--rk)); animation: cl-rise .35s var(--ease) both; }
.cl-ai-made li .t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.cl-ai-made li .t a { color: var(--ink-3); font-size: 13px; text-decoration: none; }
.cl-ai-made li.bad { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); background: var(--bad-soft); color: var(--bad); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .cl-ai-made li { animation: none; } .cl-ai-bar i { transition: none; } }

/* ---------- the shop (owner 2026-10-27): cards like the content cards, an item page with its photos, orders, what to ship */
.cl-tabs a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; border-bottom: 2px solid transparent; color: var(--ink-3);
  font-weight: 600; text-decoration: none; }
.cl-tabs a .ic { width: 18px; height: 18px; }
.cl-tabs a:hover { color: var(--ink); }
.cl-tabs a[aria-current="page"] { border-color: var(--accent); color: var(--ink); }
.cl-tabs .n { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-shopgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.cl-shopgrid.sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
@media (max-width: 520px) {
  .cl-shopgrid, .cl-shopgrid.sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-shopgrid .cl-ct-meta .who { display: block; }
}
.cl-sc .cl-ct-pic { aspect-ratio: 1; }
.cl-sc-left { position: absolute; z-index: 1; bottom: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #2a0e1b; font-size: 12px; font-weight: 700; }
.cl-shop-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.cl-shop-how > div { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-shop-how .ic { width: 22px; height: 22px; color: var(--accent); }
.cl-shop-how p { color: var(--ink-2); font-size: 14px; }
@media (max-width: 760px) { .cl-shop-how { grid-template-columns: minmax(0, 1fr); } }
.cl-shop-how + .cl-note { margin-top: 14px; }
.cl-backlink { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; color: var(--ink-2); font-weight: 600; text-decoration: none; }
.cl-backlink:hover { color: var(--accent-text); }
.cl-backlink .ic { width: 18px; height: 18px; }
.cl-item { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .cl-item { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.cl-item-pics { display: grid; gap: 10px; }
.cl-item-main { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: linear-gradient(135deg, #3a2030, #6d2a4c); }
.cl-item-main img { width: 100%; height: 100%; object-fit: cover; }
.cl-item-main img.veil, .cl-item-thumbs img.veil, .cl-order-pic img.veil { filter: blur(22px) saturate(1.15); transform: scale(1.3); }
.cl-item-left { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #2a0e1b; font-size: 12.5px; font-weight: 700; }
.cl-item-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cl-item-thumbs button { aspect-ratio: 1; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: calc(12px * var(--rk)); background: var(--surface-2); cursor: pointer; }
.cl-item-thumbs button[aria-pressed="true"] { border-color: var(--accent); }
.cl-item-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.cl-item-info { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.cl-item-info h1 { font-size: 28px; }
.cl-item-who { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.cl-item-who small { display: block; color: var(--ink-3); font-size: 13px; }
.cl-item-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-item-price { display: grid; gap: 2px; }
.cl-item-price b { display: flex; align-items: baseline; gap: 8px; font: 700 34px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.cl-item-price b .cl-coin { align-self: center; font-size: 26px; }
.cl-item-price b small { color: var(--ink-3); font: 600 15px var(--text); }
.cl-item-price > span { color: var(--ink-3); font-size: 14px; }
.cl-item-body { color: var(--ink-2); white-space: pre-line; }
.cl-item-facts { display: grid; gap: 10px; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--ink-2); font-size: 14px; }
.cl-item-facts li { display: flex; gap: 10px; align-items: flex-start; }
.cl-item-facts .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.cl-btn.block { width: 100%; justify-content: center; }
.cl-buy-sum { display: grid; gap: 0; margin: 4px 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 14.5px; }
.cl-buy-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.cl-buy-sum dt { min-width: 0; overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.cl-buy-sum dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-buy-sum .t { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-2); font-weight: 700; }
.cl-buy-sum .t dt { color: var(--ink); }
.cl-buy-sum .b { color: var(--ink-3); font-size: 13px; }
.cl-addr { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 599.98px) { .cl-addr { grid-template-columns: 100px minmax(0, 1fr); } .cl-addr > :last-child { grid-column: 1 / -1; } }
/* orders (fan) and what she has to ship */
.cl-orders { display: grid; gap: 10px; }
.cl-order { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-order-pic { display: block; flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: calc(12px * var(--rk)); background: var(--surface-2); }
.cl-order-pic.xs { width: 40px; height: 40px; border-radius: calc(9px * var(--rk)); }
.cl-order-pic img { width: 100%; height: 100%; object-fit: cover; }
.cl-order-t { display: grid; flex: 1; gap: 4px; min-width: 0; }
.cl-order-t > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-order-t .cl-muted a { color: inherit; }
.cl-order-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cl-order-state small { color: var(--ink-3); font-size: 13px; }
.cl-order.cancelled { opacity: .72; }
@media (max-width: 599.98px) { .cl-order { flex-wrap: wrap; } .cl-order > form { width: 100%; } .cl-order > form .cl-btn { width: 100%; justify-content: center; } }
.cl-ship-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.cl-ship { display: grid; gap: 12px; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.cl-ship-top { display: flex; align-items: center; gap: 12px; }
.cl-ship-top > div { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.cl-ship-top .cl-order-pic { width: 48px; height: 48px; }
.cl-ship-addr { display: grid; gap: 1px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); font-style: normal; font-size: 14.5px; line-height: 1.45; }
.cl-ship-addr small { margin-top: 4px; color: var(--ink-3); }
.cl-ship-btns { display: flex; gap: 8px; }
.cl-item-states { align-items: center; justify-content: flex-start; gap: 18px; }
.cl-item-save { display: flex; gap: 10px; margin-left: auto; }
@media (max-width: 599.98px) {
  .cl-dlg-f.cl-item-states { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .cl-item-save { grid-column: 1 / -1; order: -1; display: flex; flex-direction: column-reverse; gap: 10px; margin: 0 0 4px; }
  .cl-item-save .cl-btn { width: 100%; }
  .cl-item-states > form { display: flex; justify-content: center; }
  .cl-dlg .cl-item-states .cl-link-btn { margin: 0; padding: 8px; }
}
.cl-cell-who a { color: inherit; text-decoration: none; }
.cl-cell-who a:hover { color: var(--accent-text); }

/* ---------- mirror sites (owner 2026-10-27): the start page's two other heroes - a wall of pictures, one big picture */
.cl-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 10px; }
.cl-mosaic a { position: relative; overflow: hidden; border-radius: var(--r); background: var(--surface-2); color: #fff; text-decoration: none; }
.cl-mosaic a.m0 { grid-row: span 2; }
.cl-mosaic a.m3, .cl-mosaic a.m5 { grid-column: span 2; }
.cl-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cl-mosaic a:hover img { transform: scale(1.04); }
.cl-mosaic a > span { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px;
  background: rgba(18, 12, 16, .6); font-size: 13px; backdrop-filter: blur(6px); }
.cl-land-hero.is-grid .cl-land-hero-in { align-items: center; }
@media (max-width: 860px) { .cl-mosaic { grid-auto-rows: 110px; } }
.cl-land-hero.is-spot { position: relative; overflow: hidden; background: #140d12; }
.cl-spot-bg { position: absolute; inset: 0; }
.cl-spot-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(1.1); }
.cl-spot-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 13, 18, .92) 0%, rgba(20, 13, 18, .6) 45%, rgba(20, 13, 18, .15) 100%); }
.cl-land-hero.is-spot .cl-land-hero-in { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr); min-height: min(76vh, 680px); align-content: center; }
.cl-land-hero.is-spot .cl-land-copy { max-width: 620px; color: #fff; }
.cl-land-hero.is-spot .cl-land-copy .cl-lead, .cl-land-hero.is-spot .cl-land-facts { color: rgba(255, 255, 255, .82); }
.cl-land-hero.is-spot .cl-aud { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.cl-land-hero.is-spot .cl-aud a { color: rgba(255, 255, 255, .8); }
.cl-land-hero.is-spot .cl-aud a[aria-current="page"] { color: var(--ink); }

/* colour pickers (the new mirror site dialog) */
.cl-colorpick { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px 0 6px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); }
.cl-colorpick:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.cl-colorpick input[type="color"] { width: 34px; height: 34px; padding: 0; border: 0; border-radius: calc(9px * var(--rk)); background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.cl-colorpick input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cl-colorpick input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(9px * var(--rk)); }
.cl-colorpick input[type="color"]::-moz-color-swatch { border: 0; border-radius: calc(9px * var(--rk)); }
.cl-colorpick input[type="color"]:focus { outline: none; }
.cl-colorpick code { color: var(--ink-2); font: 600 13.5px var(--text); letter-spacing: .03em; }
.cl-dlg-gap { flex: 1; }
.cl-land .cl-land-hero.is-spot .cl-actions .cl-btn.ghost { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.cl-land .cl-land-hero.is-spot .cl-actions .cl-btn.ghost:hover { background: rgba(255, 255, 255, .18); }
.cl-land-hero.is-spot .cl-land-facts .ic { color: #fff; }

/* ---------- mirror sites as a website builder (owner 2026-10-27): the shared look of every block - spacing, background,
   alignment, width, where it shows - and the blocks the main page does not have. Nothing here changes the main site's page. */
.cl-blk.pad-s { --bp: .5; }
.cl-blk.pad-l { --bp: 1.5; }
.cl-blk.pad-xl { --bp: 2.1; }
.cl-blk:is(.bg-tint, .bg-accent, .bg-dark, .bg-image) { margin-top: calc(56px * var(--sec)); }
.cl-blk:is(.bg-tint, .bg-accent, .bg-dark, .bg-image) > .cl-land-sec { padding-block: calc(56px * var(--sec) * var(--bp, 1)); }
.cl-blk.bg-tint { background: color-mix(in srgb, var(--brand) 7%, var(--ground)); }
.cl-blk.bg-accent { background: linear-gradient(135deg, var(--accent), var(--brand2)); color: var(--accent-ink); }
.cl-blk.bg-dark { background: color-mix(in srgb, var(--brand) 9%, #0e0d10); color: #f4f0f3; }
.cl-blk.bg-image { background: linear-gradient(rgba(0, 0, 0, var(--blk-dim, .45)), rgba(0, 0, 0, var(--blk-dim, .45))), var(--blk-img) center / cover no-repeat; color: #fff; }
.cl-blk:is(.bg-accent, .on-dark) :is(h2, h3, .cl-land-h h2) { color: inherit; }
.cl-blk:is(.bg-accent, .on-dark) :is(.cl-sub, .cl-rich, .cl-land-faq details p, .cl-land-faq summary) { color: color-mix(in srgb, currentColor 84%, transparent); }
.cl-blk:is(.bg-accent, .on-dark) .cl-land-faq details { border-color: color-mix(in srgb, currentColor 22%, transparent); }
.cl-blk:is(.bg-accent, .on-dark) :is(.cl-cc, .cl-feature, .cl-trust > div, .cl-how li, .cl-fig) { color: var(--ink); }
.cl-blk:is(.bg-accent, .on-dark) .cl-ct { color: inherit; }
.cl-blk.bg-accent .cl-btn:not(.ghost) { background: var(--accent-ink); color: var(--accent) !important; box-shadow: none; }
.cl-blk:is(.bg-accent, .on-dark) .cl-btn.ghost { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }
.cl-blk:is(.bg-accent, .on-dark) .cl-rich :is(a, b) { color: inherit; }

.cl-land .cl-blk.al-left .cl-land-h { justify-items: start; margin-inline: 0; text-align: left; }
.cl-land .cl-blk.al-left .cl-land-h .cl-seg { justify-self: start; }
.cl-land .cl-blk.al-left :is(.cl-how li, .cl-feature, .cl-trust > div, .cl-blog-card) { justify-items: start; text-align: left; }
.cl-land .cl-blk.al-left .cl-how-n { margin-inline: 0; }
.cl-land .cl-blk.al-left .cl-feature-demo { justify-content: flex-start; }
.cl-land .cl-blk.al-left .cl-land-more { justify-content: flex-start; }
.cl-land .cl-blk.al-left .cl-land-end { justify-items: start; text-align: left; }
.cl-land .cl-blk.al-left.cl-land-hero .cl-land-copy { justify-items: start; }
.cl-land .cl-blk.al-left .cl-land-faq { justify-items: start; }
.cl-land .cl-blk.al-left .cl-land-faq-more { text-align: left; }

.cl-blk.w-narrow > .cl-wrap { max-width: min(var(--wrap), 780px); }
.cl-blk.w-wide > .cl-wrap { max-width: calc(var(--wrap) + 240px); }
.cl-blk.w-full > .cl-wrap { max-width: none; padding-inline: max(var(--gut), 3vw); }
@media (max-width: 719.98px) { .cl-blk.show-desktop { display: none !important; } }
@media (min-width: 720px) { .cl-blk.show-phone { display: none !important; } }

/* columns of a creator grid */
@media (min-width: 720px) and (max-width: 999.98px) {
  .cl-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-grid:is(.cols-3, .cols-4, .cols-5, .cols-6) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .cl-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cl-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cl-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* card rows that do not fill four columns */
@media (min-width: 1040px) {
  :is(.cl-how, .cl-features, .cl-trust):is(.n3, .n5, .n6) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(.cl-how, .cl-features, .cl-trust).n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.cl-how, .cl-features, .cl-trust).n1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
}

/* the start picture: heights and the two new kinds */
.cl-land-hero.h-tall { display: grid; align-content: center; min-height: 78vh; }
.cl-land-hero.h-screen { display: grid; align-content: center; min-height: 100svh; }
.cl-land-hero.is-center .cl-land-hero-in { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; }
.cl-land .cl-land-hero.is-center .cl-land-copy { justify-items: center; max-width: 880px; margin-inline: auto; text-align: center; }
.cl-land-hero.is-center .cl-lead { margin-inline: auto; }
.cl-land-hero.is-center :is(.cl-actions, .cl-land-facts) { justify-content: center; }
.cl-hero-pic { width: 100%; max-width: 480px; margin: 0; justify-self: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: calc(28px * var(--rk));
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 22%, var(--surface)), color-mix(in srgb, var(--brand2) 18%, var(--surface))); box-shadow: var(--shadow-lg); }
.cl-hero-pic img { width: 100%; height: 100%; object-fit: cover; }
.cl-land-pass.sp-slow .cl-marquee-in { animation-duration: 110s; }
.cl-land-pass.sp-slow .cl-marquee + .cl-marquee .cl-marquee-in { animation-duration: 125s; }
.cl-land-pass.sp-fast .cl-marquee-in { animation-duration: 32s; }
.cl-land-pass.sp-fast .cl-marquee + .cl-marquee .cl-marquee-in { animation-duration: 38s; }

/* the header over the start picture (until the page scrolls) */
.cl-overlay .cl-top { position: fixed; inset: 0 0 auto; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .25s ease, border-color .25s ease; }
.cl-overlay .cl-top.is-scrolled { background: var(--glass); border-bottom-color: var(--line); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); }
.cl-overlay .cl-land > .cl-land-hero:first-child { padding-top: calc(var(--top-h) + 40px * var(--sec) * var(--bp, 1)); }
@media (min-width: 960px) { .cl-overlay .cl-land > .cl-land-hero:first-child { padding-top: calc(var(--top-h) + 72px * var(--sec) * var(--bp, 1)); } }
.cl-overlay.hero-dark .cl-top:not(.is-scrolled) :is(.cl-link, .cl-icon-btn) { color: #fff !important; }
.cl-overlay.hero-dark .cl-top:not(.is-scrolled) .cl-mark span { background: none !important; color: #fff; -webkit-text-fill-color: #fff; }
.cl-overlay.hero-dark .cl-top:not(.is-scrolled) .cl-mark { filter: none; }

/* the logo as a picture, light and dark */
.cl-mark.has-img { align-items: center; filter: none; }
.cl-logo-img { display: block; width: auto; max-width: 240px; object-fit: contain; }
.cl-logo-img.d { display: none; }
:root[data-theme="dark"] .cl-logo-img.l { display: none; }
:root[data-theme="dark"] .cl-logo-img.d { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cl-logo-img.l { display: none; }
  :root:not([data-theme="light"]) .cl-logo-img.d { display: block; }
}
.no-theme-toggle [data-theme-toggle] { display: none !important; }
.cl-foot-copy { flex-basis: 100%; margin: 4px 0 0; color: var(--ink-3); font-size: 12.5px; }

/* numbers, text, picture and text, banner, pictures, room */
.cl-figs { display: grid; gap: calc(14px * var(--gap)); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.cl-fig { display: grid; gap: 6px; justify-items: center; padding: calc(24px * var(--sk)) calc(16px * var(--sk)); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.cl-fig b { color: var(--accent-text); font: 800 calc(42px * var(--hk))/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cl-fig span { color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.cl-rich { display: grid; gap: 14px; max-width: 68ch; color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
.cl-rich.lead { gap: 18px; font-size: clamp(18px, 2.3vw, 21px); line-height: 1.55; }
.cl-rich a { color: var(--accent-text); font-weight: 600; text-underline-offset: 3px; }
.cl-rich b { color: var(--ink); font-weight: 650; }
.cl-blk.al-center .cl-rich { margin-inline: auto; }
.cl-it { display: grid; gap: calc(28px * var(--sk)); align-items: center; }
@media (min-width: 860px) {
  .cl-it { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(56px * var(--sk)); }
  .cl-it.side-right .cl-it-pic { order: 2; }
}
.cl-it-pic { width: 100%; max-width: 560px; margin: 0 auto; overflow: hidden; border-radius: calc(28px * var(--rk)); background: var(--surface-3); }
.cl-it-pic.r-portrait { aspect-ratio: 4 / 5; }
.cl-it-pic.r-square { aspect-ratio: 1; }
.cl-it-pic.r-landscape { aspect-ratio: 4 / 3; }
.cl-it-pic.s-circle { aspect-ratio: 1; border-radius: 50%; }
.cl-it-pic.s-arch { border-radius: 999px 999px calc(22px * var(--rk)) calc(22px * var(--rk)); }
.cl-it-pic img { width: 100%; height: 100%; object-fit: cover; }
.cl-it-ph { display: grid; place-items: center; height: 100%; min-height: 220px; color: var(--ink-3); }
.cl-it-ph .ic { width: 40px; height: 40px; }
.cl-it-copy { display: grid; gap: 16px; justify-items: start; }
.cl-it-copy h2 { font-size: calc(clamp(26px, 4vw, 38px) * var(--hk)); letter-spacing: -.03em; }
.cl-banner { position: relative; display: grid; place-items: center; overflow: hidden; padding: calc(44px * var(--sk)) calc(24px * var(--sk)); border-radius: calc(28px * var(--rk));
  background: linear-gradient(rgba(0, 0, 0, var(--bn-dim, .45)), rgba(0, 0, 0, var(--bn-dim, .45))), var(--bn-img, linear-gradient(135deg, var(--brand), var(--brand2))) center / cover no-repeat;
  color: #fff; text-align: center; }
.cl-banner.h-s { min-height: 220px; }
.cl-banner.h-m { min-height: 340px; }
.cl-banner.h-l { min-height: 500px; }
.cl-banner-in { display: grid; justify-items: center; gap: 14px; max-width: 720px; }
.cl-banner h2 { color: #fff; font-size: calc(clamp(28px, 5vw, 50px) * var(--hk)); letter-spacing: -.03em; }
.cl-banner p { color: rgba(255, 255, 255, .88); font-size: clamp(16px, 2vw, 18.5px); }
.cl-blk-banner.w-full > .cl-wrap { padding-inline: 0; }
.cl-blk-banner.w-full .cl-banner { border-radius: 0; }
.cl-gal { display: grid; gap: calc(10px * var(--gap)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .cl-gal.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cl-gal.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cl-gal img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-3); }
.cl-gal.r-square img { aspect-ratio: 1; }
.cl-gal.r-portrait img { aspect-ratio: 4 / 5; }
.cl-gal.r-landscape img { aspect-ratio: 4 / 3; }
.cl-spacer { display: block; height: calc(var(--sp-h, 48px) * var(--sec)); }
.cl-spacer > .cl-wrap { display: flex; align-items: center; height: 100%; }
.cl-spacer i { display: none; }
.cl-spacer.line i { display: block; flex: 1; height: 1px; background: var(--line); }
.cl-blk-empty { padding: 20px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); color: var(--ink-3); text-align: center; }

/* the admin's list of mirror sites: each a card in its own colours and fonts; the ready looks of a new one */
.cl-sitecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.cl-sitecard { --pi: #141413; --pi2: #5b5b63; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow); }
.cl-sitecard.dark { --pi: #f4f0f3; --pi2: #c9c1c7; }
.cl-sitecard .cl-sitecard-pv { position: relative; display: grid; align-content: start; gap: 12px; min-height: 168px; padding: 16px 18px 18px; overflow: hidden;
  background: radial-gradient(80% 70% at 90% 10%, color-mix(in srgb, var(--pa) 26%, transparent), transparent 70%), var(--pg); color: var(--pi); text-decoration: none;
  border-bottom: 1px solid var(--line); }
.cl-sitecard-pv .pv-logo { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.cl-sitecard-pv .pv-logo .a { color: var(--pa); }
.cl-sitecard-pv .pv-logo .b { color: color-mix(in srgb, var(--pb) 70%, var(--pi)); }
.cl-sitecard-pv .pv-h { max-width: 15ch; font-size: 25px; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cl-sitecard-pv .pv-btn { justify-self: start; padding: 7px 13px; border-radius: 10px; background: var(--pa); color: #fff; font-size: 12.5px; font-weight: 700; }
.cl-sitecard-pv:hover .pv-h { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cl-sitecard-b { display: grid; align-content: start; gap: 4px; padding: 14px 18px 4px; min-width: 0; }
.cl-sitecard-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cl-sitecard-t b { margin-right: 2px; font: 700 17px/1.2 var(--display); }
.cl-sitecard-host { overflow: hidden; color: var(--accent-text); font-size: 14px; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.cl-sitecard-host:hover { text-decoration: underline; }
.cl-sitecard .cl-muted { font-size: 13px; }
.cl-sitecard-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px 16px; }
.cl-sitecard-del { margin-left: auto; color: var(--ink-3); }
.cl-sitecard-del:hover { color: var(--bad) !important; background: var(--bad-soft) !important; }
.cl-pill.warn { background: var(--warn-soft); color: var(--warn); }
.cl-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.cl-preset { position: relative; display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.cl-preset input { position: absolute; opacity: 0; pointer-events: none; }
.cl-preset:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cl-preset:has(input:focus-visible) { box-shadow: var(--ring); }
.cl-preset-pv { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 5px; height: 46px; margin-bottom: 6px; padding: 6px; border-radius: calc(9px * var(--rk)); background: var(--pg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 8%, transparent); }
.cl-preset-pv i { border-radius: 5px; background: var(--pa); }
.cl-preset-pv i:nth-child(2) { background: var(--pb); }
.cl-preset-pv i:nth-child(3) { background: color-mix(in srgb, var(--pa) 30%, var(--pg)); }
.cl-preset b { font-size: 14px; }
.cl-preset small { color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.cl-main-domains { display: grid; gap: 12px; }
.cl-main-domains-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cl-fw-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cl-fw-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-weight: 600; }
.cl-fw-list li form { margin-left: auto; }

/* small phones: the header keeps its side gap on every site - tighter spacing, the logo a touch smaller */
@media (max-width: 419.98px) {
  .cl-top-in { gap: 8px; }
  .cl-top-r { gap: 2px; min-width: 0; }
  .cl-top-r .cl-link { padding-inline: 6px; }
  .cl-top-r .cl-btn.sm { padding-inline: 13px; }
  .cl-top .cl-mark:not(.has-img) { font-size: min(var(--logo-fs, 27px), 6.2vw); }
  .cl-top .cl-logo-img { max-width: 40vw; }
}
@media (max-width: 374.98px) { .cl-out .cl-top [data-theme-toggle] { display: none; } }

/* ---------- website builder, part 2 (owner 2026-10-27: "wirklich einen richtigen website baukasten ... text font anpassungen"):
   the text styles as variables (a single text can take another style), the layout choices of a mirror site as classes on <body>
   (none of them is set on the main site), the notice bar, social links, sections that fade in, own section colours and spacing. */
:root {
  --h1-ff: var(--display); --h1-fw: 700; --h1-fs: calc(clamp(42px, 9vw, 76px) * var(--hk)); --h1-lh: .98; --h1-ls: -.045em;
  --h2-ff: var(--display); --h2-fw: 700; --h2-fs: calc(clamp(26px, 4.4vw, 38px) * var(--hk)); --h2-lh: 1.15; --h2-ls: -.03em;
  --h3-ff: var(--display); --h3-fw: 700; --h3-fs: 18px; --h3-lh: 1.25; --h3-ls: -.01em;
  --lead-ff: var(--text); --lead-fw: 400; --lead-fs: clamp(16.5px, 2.3vw, 19px); --lead-lh: 1.55; --lead-ls: 0em;
  --body-ff: var(--text); --body-fw: 400; --body-fs: 15px; --body-lh: 1.55; --body-ls: 0em;
  --small-ff: var(--text); --small-fw: 500; --small-fs: 14px; --small-lh: 1.5; --small-ls: 0em;
}

/* the header: four layouts, five looks; the menu box adds nothing unless a layout needs it */
.cl-top-nav { display: contents; }
.cl-top-cta.outline { background: transparent; color: var(--accent-text) !important; box-shadow: inset 0 0 0 1.5px var(--accent); }
.cl-top-cta.outline:hover { background: var(--accent-soft); }
@media (min-width: 640px) {
  .hd-center .cl-top-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  /* the logo sits alone in the middle; the right box runs the whole width under it: menu on the left, actions on the right */
  .hd-center .cl-top-in > .cl-mark { position: relative; z-index: 1; grid-column: 2; grid-row: 1; }
  .hd-center .cl-top-r { grid-column: 1 / -1; grid-row: 1; justify-content: flex-end; margin-left: 0; }
  .hd-center .cl-top-nav { display: flex; align-items: center; gap: 4px; max-width: calc(50% - 110px); min-width: 0; margin-right: auto; overflow: hidden; }
  .hd-center .cl-top-nav > a { white-space: nowrap; }
}
@media (min-width: 1000px) {
  .hd-split .cl-top-in { position: relative; }
  .hd-split .cl-top-nav { position: absolute; left: 50%; display: flex; align-items: center; gap: 4px; transform: translateX(-50%); }
}
.hd-stacked .cl-top-in { flex-wrap: wrap; justify-content: center; height: auto; min-height: var(--top-h); row-gap: 4px; padding-block: 12px; }
.hd-stacked .cl-top-in > .cl-mark { flex-basis: 100%; justify-content: center; }
.hd-stacked .cl-top-r { margin-inline: auto; flex-wrap: wrap; justify-content: center; }
.hs-solid .cl-top { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hs-line .cl-top { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hs-shadow .cl-top { background: var(--surface); border-bottom-color: transparent; box-shadow: 0 8px 28px -14px rgba(20, 18, 15, .35); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hs-none .cl-top { background: var(--ground); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* the footer: columns (the main design), centred, or one slim line */
.ft-center .cl-foot-in { justify-items: center; text-align: center; }
.ft-center .cl-foot-brand { justify-items: center; }
.ft-center .cl-foot-cols { justify-content: center; text-align: center; }
.ft-center .cl-foot-cols div { justify-items: center; }
.ft-minimal .cl-foot-in { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 28px; padding-block: 22px; }
.ft-minimal .cl-foot-brand > span { display: none; }
.ft-minimal .cl-foot-cols { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }
.ft-minimal .cl-foot-cols div { display: contents; }
.ft-minimal .cl-foot-cols b { display: none; }
.ft-minimal .cl-foot-copy { grid-column: 1 / -1; }
@media (max-width: 640px) { .ft-minimal .cl-foot-in { grid-template-columns: minmax(0, 1fr); } .ft-minimal .cl-foot-cols { justify-content: flex-start; } }
.cl-social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ft-center .cl-social { justify-content: center; }
.cl-social a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2) !important; }
.cl-social a:hover { border-color: var(--accent); color: var(--accent-text) !important; text-decoration: none !important; }
.cl-social .ic { width: 18px; height: 18px; }

/* buttons: size, shadow, what happens on hover, and the second kind */
.bs-s .cl-btn { min-height: 38px; padding-inline: 16px; }
.bs-s .cl-btn.lg { min-height: 44px; padding-inline: 20px; }
.bs-s .cl-btn.sm { min-height: 34px; padding-inline: 13px; }
.bs-l .cl-btn { min-height: 50px; padding-inline: 24px; }
.bs-l .cl-btn.lg { min-height: 58px; padding-inline: 32px; }
.bs-l .cl-btn.sm { min-height: 42px; padding-inline: 18px; }
.bsh-soft .cl-btn:not(.ghost):not(.soft):not([disabled]) { box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 65%, transparent); }
.bsh-glow .cl-btn:not(.ghost):not(.soft):not([disabled]) { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), 0 12px 28px -10px color-mix(in srgb, var(--accent) 75%, transparent); }
.bh-lift .cl-btn:hover:not([disabled]) { transform: translateY(-2px); }
.bh-lift .cl-btn:not(.ghost):not(.soft):not([disabled]):hover { background: var(--accent); box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.bh-glow .cl-btn:not(.ghost):not(.soft):not([disabled]):hover { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.bh-none .cl-btn:not(.ghost):not(.soft):not([disabled]):hover { background: var(--accent); }
.b2-plain .cl-btn.ghost { background: var(--surface-2); box-shadow: none; }
.b2-plain .cl-btn.ghost:hover { background: var(--surface-3); }
.b2-soft .cl-btn.ghost { background: var(--accent-soft); color: var(--accent-text) !important; box-shadow: none; }
.b2-soft .cl-btn.ghost:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.b2-text .cl-btn.ghost { background: none; box-shadow: none; color: var(--accent-text) !important; padding-inline: 8px; text-decoration: underline; text-underline-offset: 4px; }
.b2-text .cl-btn.ghost:hover { background: none; text-decoration-thickness: 2px; }

/* links in texts */
.lk-ink .cl-rich a, .lk-ink .cl-land-faq-more a { color: var(--ink); }
.lu-always .cl-rich a, .lu-always .cl-land-faq-more a { text-decoration: underline; }
.lu-never .cl-rich a, .lu-never .cl-land-faq-more a, .lu-never .cl-rich a:hover { text-decoration: none; }
.lu-hover .cl-rich a { text-decoration: none; }
.lu-hover .cl-rich a:hover { text-decoration: underline; }

/* the notice bar */
.cl-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 9px 48px; font-size: 13.5px; font-weight: 600;
  line-height: 1.35; text-align: center; }
.cl-bar.accent { background: var(--accent); color: var(--accent-ink); }
.cl-bar.dark { background: color-mix(in srgb, var(--brand) 12%, #121014); color: #f4f0f3; }
.cl-bar.tint { background: color-mix(in srgb, var(--brand) 12%, var(--ground)); color: var(--ink); }
.cl-bar a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cl-bar-x { position: absolute; top: 50%; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: inherit; opacity: .75; cursor: pointer; }
.cl-bar-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.cl-bar-x .ic { width: 16px; height: 16px; }
.cl-bar[hidden] { display: none; }

/* sections: own colour, own spacing, minimum height */
.cl-blk.bg-custom { margin-top: calc(56px * var(--sec)); background: var(--blk-bg); color: var(--blk-fg); }
.cl-blk.bg-custom > .cl-land-sec { padding-block: calc(56px * var(--sec) * var(--bp, 1)); }
.cl-blk.bg-custom:not(.on-dark) :is(.cl-sub, .cl-rich) { color: color-mix(in srgb, currentColor 78%, transparent); }
.cl-blk.on-dark :is(h2, h3, .cl-land-h h2) { color: inherit; }
.cl-blk.on-dark :is(.cl-sub, .cl-rich, .cl-land-faq details p, .cl-land-faq summary) { color: color-mix(in srgb, currentColor 84%, transparent); }
.cl-blk.on-dark .cl-land-faq details { border-color: color-mix(in srgb, currentColor 22%, transparent); }
.cl-blk.on-dark :is(.cl-cc, .cl-feature, .cl-trust > div, .cl-how li, .cl-fig) { color: var(--ink); }
.cl-blk.on-dark .cl-ct { color: inherit; }
.cl-blk.on-dark .cl-btn.ghost { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }
.cl-blk.on-dark .cl-rich :is(a, b) { color: inherit; }
.cl-blk.pad-custom > .cl-land-sec, .cl-land-hero.pad-custom { padding-top: var(--pt-c); padding-bottom: var(--pb-c); }
.cl-blk.has-minh { display: grid; align-content: center; min-height: var(--minh); }
.cl-land-hero.has-minh { display: grid; align-content: center; }

/* the start picture: dimming and which part of the picture stays */
.cl-spot-bg img { object-position: center var(--spot-pos, center); }
.cl-land-hero .cl-spot-bg img { opacity: calc(1 - var(--spot-dim, .45)); }
.cl-hero-pic img { object-position: center var(--pic-pos, center); }

/* sections that appear while scrolling (only when scripts run; reduced motion: there at once) */
.cl-js .rv { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.cl-js .rv-fade:not(.is-in) { opacity: 0; }
.cl-js .rv-up:not(.is-in) { opacity: 0; transform: translateY(28px); }
.cl-js .rv-zoom:not(.is-in) { opacity: 0; transform: scale(.965); }
@media (prefers-reduced-motion: reduce) { .cl-js .rv:not(.is-in) { opacity: 1; transform: none; } .cl-js .rv { transition: none; } }

/* ---------- design round 28.10. (owner "mach das bitte weiter mit chatly design"): long lists, counts, the open row, quiet bins,
   own error lines in forms, dialogs with one scroll area, the slim footer in studio and admin */

/* "Mehr laden" under content, "Für dich" and her posts - the next ones come in below (chatly.js data-more) */
/* "Mehr laden" under lists - its own name: .cl-more is the phone menu dialog, and the shared name showed it closed below every page (2026-10-28) */
.cl-loadmore { display: flex; justify-content: center; margin-top: calc(24px * var(--sk)); }
.cl-loadmore .cl-btn { min-width: 220px; }
.cl-loadmore .cl-btn[aria-busy="true"] { pointer-events: none; color: var(--ink-3); }
.cl-loadmore .cl-btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cl-spin .7s linear infinite; }
@keyframes cl-spin { to { rotate: 360deg; } }
.cl-prof-feed > .cl-loadmore { margin-top: 18px; }
@media (max-width: 899.98px) { .cl-prof-feed:has(.cl-post) > .cl-loadmore { padding: 0 16px 20px; } }

/* counts in tabs and filters: a small round number next to the word, the current one in the accent */
.cl-seg .n, .cl-tabs .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); font-size: 12px; font-weight: 650; line-height: 1; }
.cl-seg [aria-current="page"] .n, .cl-tabs [aria-current="page"] .n { background: var(--accent-soft); color: var(--accent-text); }
.cl-tabs a { gap: 8px; }

/* discover: the last tile takes the room the creator cards leave open in their row */
.cl-fill { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 24px; padding: 26px; border-radius: var(--r);
  background: var(--surface-2); color: var(--ink); text-decoration: none; transition: background .15s var(--ease); }
.cl-fill:hover { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-2)); }
.cl-fill:not(:has(.cl-fill-pics)) { grid-template-columns: minmax(0, 1fr); }
.cl-fill-t { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.cl-fill-i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: var(--surface); color: var(--accent-text); }
.cl-fill-i .ic { width: 21px; height: 21px; }
.cl-fill-t b { font: 650 19px/1.25 var(--display); text-wrap: balance; }
.cl-fill-t > span:not(.cl-fill-i):not(.cl-btn) { color: var(--ink-2); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.cl-fill-t .cl-btn { margin-top: 8px; background: var(--surface); }
.cl-fill-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cl-fill-pics > span { aspect-ratio: 1; overflow: hidden; border-radius: calc(12px * var(--rk)); background: var(--surface-3); }
.cl-fill-pics img { width: 100%; height: 100%; object-fit: cover; transition: scale .3s var(--ease); }
.cl-fill-pics img.veil { filter: blur(16px) saturate(1.15); scale: 1.3; }
.cl-fill:hover .cl-fill-pics img:not(.veil) { scale: 1.04; }
.cl-fill[data-span="1"] { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 18px; padding: 22px; }
.cl-fill[data-span="1"] .cl-fill-pics > span:nth-child(n+3) { display: none; }
.cl-fill[data-span="3"] .cl-fill-pics, .cl-fill[data-span="4"] .cl-fill-pics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cl-fill[data-span="3"], .cl-fill[data-span="4"] { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }

/* his account: two columns that each stack (narrow: one column, the cards in their order). Only inside .cl-g: the layout's own
   .cl-col (the page column next to the side bar) is a flex column - as a grid it took the width of the widest content, and the
   creator page's ticker (max-content) made every page part 5090 px wide (2026-10-28) */
.cl-g > .cl-col { display: grid; gap: 20px; align-content: start; min-width: 0; }
@media (max-width: 1199.98px) {
  .cl-g > .cl-col { display: contents; }
  .cl-g > .cl-col > * { grid-column: span 12; min-width: 0; }
  .cl-g > .cl-col:first-child > :nth-child(1) { order: 1; } .cl-g > .cl-col + .cl-col > :nth-child(1) { order: 2; }
  .cl-g > .cl-col:first-child > :nth-child(2) { order: 3; } .cl-g > .cl-col + .cl-col > :nth-child(2) { order: 4; }
}

/* her posts in the studio: date, numbers, and removing as a quiet bin at the end of the line */
.cl-pcard-f { justify-content: flex-start; min-height: 30px; }
.cl-pcard-f .stats { margin-left: auto; }
.cl-pcard-f form { display: flex; margin-right: -6px; }
.cl-pcard-f .cl-icon-btn { width: 30px; height: 30px; color: var(--ink-3); }
.cl-pcard-f .cl-icon-btn .ic { width: 16px; height: 16px; }
.cl-icon-btn.danger:hover { color: var(--bad); background: var(--bad-soft); border-color: transparent; }

/* shop cards: her name keeps its room, the postage stays short */
.cl-sc .cl-ct-meta > .ship { margin-left: auto; color: var(--ink-3); white-space: nowrap; }

/* forms: what is missing in our own words under the field (never the browser's grey bubble, chatly.js) */
.cl-err-msg { display: flex; align-items: flex-start; gap: 6px; color: var(--bad); font-size: 13px; font-weight: 600; line-height: 1.4; }
.cl-err-msg::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.cl-err-msg.after { margin-top: 6px; }
.cl-input[aria-invalid="true"], [aria-invalid="true"] + .cl-input, .cl-num:has([aria-invalid="true"]) { border-color: var(--bad) !important; }
.cl-input[aria-invalid="true"]:focus, .cl-num:has([aria-invalid="true"]:focus) { box-shadow: 0 0 0 3px var(--bad-soft) !important; }

/* a dialog with a picture or gift grid: only the grid scrolls, the fields above and the buttons stay in view (no box scrolling inside a box) */
.cl-dlg .cl-dlg-b:has(.cl-pics, > .cl-gifts) { display: flex; flex-direction: column; }
.cl-dlg .cl-dlg-b:has(.cl-pics, > .cl-gifts) > * { flex: none; }
.cl-dlg .cl-dlg-b:has(.cl-pics, > .cl-gifts) > :has(.cl-pics), .cl-dlg .cl-dlg-b > .cl-gifts { flex: 0 1 auto; min-height: 160px; }
.cl-dlg .cl-dlg-b > :has(.cl-pics) { display: flex; flex-direction: column; }
.cl-dlg .cl-dlg-b > :has(.cl-pics) > .cl-pics { flex: 0 1 auto; min-height: 0; max-height: min(52vh, 480px); }
.cl-dlg .cl-dlg-b > .cl-pics { flex: 0 1 auto; min-height: 160px; }
.cl-dlg .cl-dlg-b > .cl-gift-tabs { align-self: flex-start; }

/* admin settings: "Speichern" shows once a number was changed */
.cl-set form[data-watch] .cl-btn[type="submit"] { transition: opacity .15s var(--ease), translate .15s var(--ease); }
.cl-set form[data-watch]:not(.is-dirty) .cl-btn[type="submit"] { opacity: 0; translate: -6px 0; pointer-events: none; }

/* studio and admin: one quiet line with the legal links instead of the big footer */
.cl-foot.slim .cl-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-block: 18px 24px; font-size: 13px; }
.cl-foot.slim .cl-foot-in > span { margin-right: 4px; color: var(--ink-2); font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .cl-loadmore .cl-btn[aria-busy="true"]::before { animation-duration: 2s; } }

/* ---------- side bar and admin back office (owner 2026-10-28: "räume generell das admin auf und mache auch die navbar scroll bar
   weg"). Quiet chrome like the big dashboards: hierarchy from type and spacing, colour only for state, tables first. */
@media (min-width: 1000px) {
  /* the side bar always fits: on a short screen it scrolls by itself - never with a visible bar */
  .cl-side { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .cl-side::-webkit-scrollbar { display: none; }
}
@media (min-width: 1000px) and (max-height: 860px) {
  .cl-side { gap: 14px; padding-block: 18px 14px; }
  .cl-side .cl-mark { font-size: 28px; }
  .cl-side-nav a { padding-block: 8px; }
  .cl-side-nav a .ic { width: 20px; height: 20px; }
}
.cl-side-group { margin: 14px 10px 4px; color: var(--ink-3); font: 600 12px/1.2 var(--text); letter-spacing: .01em; }
.cl-side-nav .n, .cl-more-nav .n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent);
  color: var(--accent-ink); font: 700 11.5px/20px var(--text); text-align: center; font-variant-numeric: tabular-nums; }
.cl-more-nav .cl-side-group { margin: 12px 12px 2px; }
.cl-more-nav .cl-side-group:first-child { margin-top: 4px; }

@media (min-width: 1000px) {
  .cl-admin.cl-in .cl-shell { grid-template-columns: 236px minmax(0, 1fr); }
  .cl-admin .cl-side { gap: 12px; padding: 18px 12px 12px; }
  .cl-admin .cl-side > .cl-mark { align-self: flex-start; padding: 2px 10px 4px; font-size: 26px; }
  .cl-admin .cl-side-nav { gap: 1px; }
  .cl-admin .cl-side-nav a { gap: 11px; padding: 7px 10px; border-radius: calc(9px * var(--rk)); font-size: 14.5px; }
  .cl-admin .cl-side-nav a .ic { width: 18px; height: 18px; color: var(--ink-3); }
  .cl-admin .cl-side-nav a:hover .ic { color: var(--ink-2); }
  .cl-admin .cl-side-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
  .cl-admin .cl-side-nav a[aria-current="page"] .ic { color: var(--accent-text); }
  .cl-admin .cl-side-group:first-of-type { margin-top: 12px; }
  .cl-admin .cl-me-row { padding: 0 6px; }
  .cl-admin .cl-side-foot { margin-top: -4px; padding-top: 8px; }
  .cl-admin .cl-side-foot a, .cl-admin .cl-side-foot button { height: 32px; font-size: 13px; }
  .cl-admin .cl-main { max-width: 1480px; padding: 28px clamp(24px, 3vw, 44px) 56px; }
}
/* page heads: a working title, not a poster */
.cl-admin .cl-page-h { margin-bottom: 20px; }
.cl-admin .cl-page-h h1 { font-size: calc(clamp(24px, 3.2vw, 28px) * var(--hk)); letter-spacing: -.01em; }
.cl-admin .cl-page-h .cl-sub { font-size: 14.5px; }
/* surfaces: one hairline, no lift - the content carries the page */
.cl-admin .cl-card, .cl-admin .cl-table, .cl-admin .cl-tile { box-shadow: none; }
.cl-admin .cl-card { padding: calc(20px * var(--sk)) calc(22px * var(--sk)); }
.cl-admin .cl-card-h h2 { font-size: 16px; }
.cl-admin .cl-tile { gap: 2px; padding: 14px 16px; }
.cl-admin .cl-tile > span { font-size: 12.5px; }
.cl-admin .cl-tile b { font-size: 24px; }
/* tables: the head stays while the list scrolls, rows answer the pointer, numbers line up */
.cl-admin .cl-table th { padding: 10px 14px; background: var(--surface); font-size: 12.5px; }
.cl-admin .cl-table td { padding: 10px 14px; }
.cl-admin .cl-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.cl-admin .cl-table td { font-variant-numeric: tabular-nums; }

/* the overview's first line: what waits for him today, or that nothing does */
.cl-todo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -6px 0 20px; }
.cl-todo-h { margin-right: 4px; color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
.cl-todo a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--line);
  border-radius: 99px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 550; text-decoration: none; }
.cl-todo a:hover { border-color: var(--line-2); background: var(--surface-2); }
.cl-todo a b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--accent-ink);
  font: 700 12px/22px var(--text); text-align: center; font-variant-numeric: tabular-nums; }
.cl-todo .ok { display: inline-flex; align-items: center; gap: 8px; color: var(--ok, #1f7a4d); font-size: 14px; font-weight: 600; }
.cl-todo .ok .ic { width: 18px; height: 18px; }
/* a laptop with a short window (1366 x 680 and less): the admin bar still fits whole */
@media (min-width: 1000px) and (max-height: 780px) {
  .cl-admin .cl-side { gap: 6px; padding-block: 14px 10px; }
  .cl-admin .cl-side > .cl-mark { font-size: 24px; padding-bottom: 2px; }
  .cl-admin .cl-side-nav a { padding-block: 4px; }
  .cl-admin .cl-side-group { margin: 7px 10px 2px; }
  .cl-admin .cl-side-foot a, .cl-admin .cl-side-foot button { height: 28px; }
}
/* one quiet way into each row instead of a framed button per line */
.cl-admin .cl-table td .cl-btn.ghost.sm { border-color: transparent; background: var(--surface-2); box-shadow: none; }
.cl-admin .cl-table tr:hover td .cl-btn.ghost.sm { background: var(--accent-soft); color: var(--accent-text); }
/* the phone sheet of the admin: shorter rows, the groups carry the order */
.cl-admin .cl-more-nav a, .cl-admin .cl-more-nav button { min-height: 44px; }

/* ---------- design round 2 (28.10., owner: the pages look "sehr hässlich" - four reviews of every page as visitor, fan, creator and
   admin). One frame for every width, one look per component, nothing shown that tells nothing. Parts: frame, visitor, fan,
   studio, admin. */

/* --- frame: 1000-1279 px (small laptops, tablets across) - a narrower side bar, so the page keeps room for two columns; the
   12-column split starts there too (it waited for 1200 px, and studio and admin fell into one 680 px column) */
@media (min-width: 1000px) and (max-width: 1279.98px) {
  .cl-in:not(.cl-admin) .cl-shell { grid-template-columns: 224px minmax(0, 1fr); }
  .cl-in:not(.cl-admin) .cl-side { padding-inline: 14px; }
  .cl-in:not(.cl-admin) .cl-side-nav a { gap: 11px; padding-inline: 11px; font-size: 15px; }
  .cl-in:not(.cl-admin) .cl-main { padding-inline: 28px; }
  .cl-in:not(.cl-admin) .cl-toasts { left: 224px; padding-inline: 28px; }
}
@media (min-width: 1000px) and (max-width: 1199.98px) {
  .cl-in .cl-g > :is(.w3, .w4, .w5) { grid-column: span 5; }
  .cl-in .cl-g > .w6 { grid-column: span 6; }
  .cl-in .cl-g > :is(.w7, .w8, .w9) { grid-column: span 7; }
  .cl-in .cl-sticky { position: sticky; top: 24px; }
}
/* the page column of the layout is a full-height flex column - inside a page grid a ".cl-col" never takes the window's height, and
   its cards keep the grid's gap (their own margins added 18 px: 38 px between cards, 20 px between columns) */
.cl-g > .cl-col { min-height: 0; }
.cl-g > .cl-col > * { margin: 0 !important; }
/* page heads: the line under the title stays readable, the buttons sit at the title's height */
.cl-page-h { align-items: flex-start; }
.cl-page-h .cl-sub { max-width: 68ch; }
.cl-page-h > .cl-actions, .cl-page-h > .cl-btn, .cl-page-h > a.cl-btn, .cl-page-h > form { margin-top: 4px; }
/* the visitor's header: the page he is on */
.cl-top-nav .cl-link[aria-current="page"] { color: var(--ink) !important; text-decoration: underline 2px var(--accent); text-underline-offset: 9px; }
/* chips that scroll sideways fade out at the edge, so the cut-off one reads as "more" */
@media (max-width: 599.98px) {
  .cl-seg.scroll, .cl-dt-filter.scroll { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); scroll-padding-inline: 16px; }
  .cl-seg.scroll > :last-child, .cl-dt-filter.scroll > :last-child { margin-right: 28px; }
}
/* edge-to-edge parts follow the gutter (it grows with the window now, it was a fixed 16 px) */
@media (max-width: 599.98px) { .cl-land .cl-grid { margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); } }
@media (max-width: 999.98px) { .cl-chat-h, .cl-composer { margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); } }
@media (max-width: 1099.98px) { .cl-help nav { margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); } }
/* avatars on covers keep an edge in dark mode (a dark photo melted into the dark card) */
.cl-prof-head .cl-ava { box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--line); }
.cl-ct-meta .cl-ava { box-shadow: 0 0 0 1px var(--line); }
/* a cover that is only her profile picture (or none): a soft colour field instead of a blown-up face */
.cl-cover.is-plain { background: radial-gradient(90% 130% at 12% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
  radial-gradient(80% 120% at 100% 100%, color-mix(in srgb, var(--gold-face) 26%, transparent), transparent 66%), var(--frame); }

/* the start page: five across on a wide screen (ten creators fill two rows); a last row that would stay half empty is left out
   (the "Alle Creator" link sits below) - only where the block chose no own column count */
@media (min-width: 1240px) {
  .cl-land .cl-grid:not([class*="cols-"]):has(> .cl-cc:nth-child(5):last-child, > .cl-cc:nth-child(10):last-child, > .cl-cc:nth-child(15):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 759.98px) { .cl-land .cl-grid:not([class*="cols-"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 999.98px) {
  .cl-land .cl-grid:not([class*="cols-"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-land .cl-grid:not([class*="cols-"]) > .cl-cc:nth-child(3n+4):nth-last-child(-n+2), .cl-land .cl-grid:not([class*="cols-"]) > .cl-cc:nth-child(3n+4):nth-last-child(-n+2) ~ .cl-cc { display: none; }
}
@media (min-width: 1000px) and (max-width: 1239.98px) {
  .cl-land .cl-grid:not([class*="cols-"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cl-land .cl-grid:not([class*="cols-"]) > .cl-cc:nth-child(4n+5):nth-last-child(-n+3), .cl-land .cl-grid:not([class*="cols-"]) > .cl-cc:nth-child(4n+5):nth-last-child(-n+3) ~ .cl-cc { display: none; }
}
/* the tile next to the cards: framed like a card, the pictures she has not opened yet carry a lock instead of looking broken */
.cl-fill { border: 1px solid var(--line); background: var(--surface); }
.cl-fill:hover { background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); border-color: var(--line-2); }
.cl-fill-i { background: var(--accent-soft); }
.cl-fill-t .cl-btn { background: var(--surface); }
.cl-fill-pics > span { position: relative; }
.cl-fill-pics > span > .ic { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }

/* --- content cards: likes from 1, no "1 Bild" on every tile, a post he bought shows a quiet "Deins" instead of its price */
.cl-ct-mine { background: rgba(255, 255, 255, .94); color: #2a0e1b; }
.cl-ct-mine .ic { width: 13px; height: 13px; stroke-width: 3; color: var(--ok); }
.cl-ct-kind { max-width: calc(100% - 20px); }
.cl-ct-kind > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- her profile: one surface - the posts as rows with a line between them at every width (no card inside the card), single
   pictures in a light frame instead of black bars, locked ones like in "Für dich": the way in at their bottom */
.cl-prof-feed { padding: 0 22px 22px; }
.cl-prof-feed > .cl-empty { margin-top: 22px; }
.cl-prof-feed .cl-post { padding: 20px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.cl-prof-feed .cl-post + .cl-post { margin-top: 0; }
.cl-prof-feed .cl-post-media.one .cl-media img, .cl-prof-feed .cl-post-media.one video.cl-media { max-height: min(640px, 75vh); background: var(--surface-2); }
.cl-prof-feed .cl-post-locked { width: 100%; aspect-ratio: 4 / 3; max-height: 70vh; min-height: 0; place-items: end center; }
.cl-prof-feed .cl-post-locked::after { background: linear-gradient(180deg, rgba(20, 10, 16, .08) 0%, rgba(20, 10, 16, .24) 45%, rgba(20, 10, 16, .72) 100%); }
.cl-prof-feed .cl-post-locked-in { gap: 10px; padding: 0 24px 26px; }
.cl-prof-feed .cl-post-locked-in > .ic { box-sizing: content-box; width: 24px; height: 24px; padding: 13px; border-radius: 50%; background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cl-prof-feed .cl-post-locked-in .cl-btn { min-height: 46px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.cl-prof .cl-tabs { margin-top: 24px; }
.cl-prof-sec { display: flex; align-items: center; gap: 8px; margin: 26px 22px 0; padding-bottom: 14px; }
.cl-prof-sec h2 { font-size: 17px; letter-spacing: -.01em; }
.cl-prof-sec .n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-2); font-size: 12.5px; font-weight: 650; }
.cl-prof-sec + .cl-prof-feed > .cl-ptiles-wrap { margin-top: 0; }
/* the actions: message (with its price) first, then follow, gift, share - one height, one row from the tablet on */
.cl-sub-box { margin-top: 18px; }
.cl-sub-row { align-items: stretch; }
.cl-sub-row > .cl-sub-share { flex: none; width: 44px; height: 44px; min-width: 0; }
.cl-sub-main small { margin-left: 2px; font-size: 13.5px; font-weight: 500; opacity: .85; }
.cl-sub-main small::before { content: "·"; margin-right: 6px; }
.cl-btn.ghost.cl-follow.is-on { background: var(--surface); color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line-2); }
.cl-follow.is-on .ic { color: var(--accent-text); stroke-width: 2.6; }
@media (max-width: 520px) { .cl-sub-row > .cl-sub-main { flex-basis: calc(100% - 52px); } }
.cl-prof-meta .cl-stat[hidden] { display: none; }
/* visitors: her posts as a grid of locked tiles, the last row fading into the one way in */
.cl-ptiles-wrap { position: relative; margin-top: 0; }
.cl-ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cl-ptile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: calc(12px * var(--rk)); background: linear-gradient(135deg, #3a2030, #6d2a4c); }
.cl-ptile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-ptile > img.is-veil { filter: blur(26px) saturate(1.15); transform: scale(1.3); }
.cl-ptile::after { content: ""; position: absolute; inset: 0; background: rgba(20, 10, 16, .16); transition: background-color .2s var(--ease); }
.cl-ptile:hover::after { background: rgba(20, 10, 16, .3); }
.cl-ptile .cl-ct-lock .ic { width: 26px; height: 26px; }
.cl-ptile-text { position: absolute; inset: 0; z-index: 1; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; padding: 16px; color: #fff;
  font-size: 14px; line-height: 1.45; }
.cl-ptiles-cta { position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; margin-top: -150px; padding: 120px 20px 10px; text-align: center;
  background: linear-gradient(180deg, transparent 0, var(--surface) 112px); }
.cl-ptiles-cta b { font: 700 21px/1.25 var(--display); letter-spacing: -.01em; }
.cl-ptiles-cta > span { max-width: 44ch; color: var(--ink-2); }
.cl-ptiles-cta .cl-btn { margin-top: 8px; }
.cl-alt-link { color: var(--ink-3); font-size: 14px; text-decoration: none; }
.cl-alt-link:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 599.98px) {
  .cl-prof-feed:has(.cl-ptiles-wrap) { padding: 0 0 16px; }
  .cl-ptiles { gap: 3px; }
  .cl-ptile { border-radius: 0; }
  .cl-prof-sec { margin-inline: 16px; }
}

/* --- start page and the creators' page */
@media (max-width: 719.98px) {
  .cl-land .cl-how li { justify-items: start; text-align: left; }
  .cl-land .cl-how-n { margin-inline: 0; }
}
.cl-land .cl-feature-demo:has(.cl-bub) { align-items: stretch; }
.cl-land .cl-feature-demo .cl-bub { align-self: flex-start; max-width: 82%; text-align: left; }
.cl-land .cl-feature-demo .cl-bub.me { align-self: flex-end; }
.cl-blog-card b { text-wrap: balance; }
.cl-calc { max-width: none; }
.cl-calc-in { background: var(--surface); box-shadow: var(--shadow); }
.cl-youth { max-width: none; }
.cl-spot-bg img { object-position: 50% 28%; }
/* sign-in pages: the card in the middle of the first screen, the footer below it (it hung under a 460 px card in a big void) */
.cl-out .cl-auth { display: grid; align-content: center; min-height: calc(100svh - var(--top-h) - 64px); padding-block: 24px 40px; }
@media (max-width: 559.98px) { .cl-auth > .cl-card { padding: 18px; } .cl-out .cl-auth { align-content: start; min-height: 0; } }

/* --- the age question: its own focus, its own corner */
.cl-agegate { border-radius: calc(22px * var(--rk)); }

/* --- fan pages */
/* coins: the balance in the head next to the title, the packages right below */
.cl-coin-now { display: grid; justify-items: end; gap: 2px; margin: 4px 0 0; text-align: right; }
.cl-coin-now b { display: flex; align-items: baseline; gap: 8px; font: 700 30px/1.05 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cl-coin-now b .cl-coin { align-self: center; font-size: 24px; }
.cl-coin-now b small { color: var(--ink-3); font: 600 14px var(--text); letter-spacing: 0; }
.cl-coin-now .cl-muted { font-size: 13px; }
@media (max-width: 599.98px) {
  .cl-page-h:has(> .cl-coin-now) { flex-wrap: wrap; }
  .cl-coin-now { justify-items: start; grid-auto-flow: column; align-items: baseline; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); text-align: left; }
  .cl-coin-now > .cl-muted:first-child { display: none; }
  .cl-coin-now b { font-size: 24px; }
}
.cl-coin-buy .cl-consent { margin-top: 0; }
@media (max-width: 999.98px) { .cl-coin-now { display: none; } } /* the top bar shows the balance there */
@media (min-width: 1000px) { .cl-pgrid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cl-coin-buy + .cl-coin-info { margin-top: 28px; }
.cl-coin-info { box-shadow: none; }
@media (min-width: 1000px) { .cl-uses { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the bonus is a line inside the package (as a badge it covered the "Beliebt" flag on narrow packages) */
@media (min-width: 600px) {
  .cl-pack-bonus { position: static; justify-self: start; margin: 0 0 6px; }
  .cl-pack { padding-top: 20px; }
}
/* the shop item: price and "Kaufen" stay at the bottom of the phone screen, the photo leaves room for them */
.cl-item-buy { display: grid; gap: 14px; }
@media (max-width: 860px) {
  .cl-item-main { aspect-ratio: 4 / 5; max-height: 56vh; width: 100%; }
  .cl-in .cl-item-buy { position: sticky; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 4; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    margin-inline: -10px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); }
  .cl-in .cl-item-buy .cl-item-price b { font-size: 26px; }
  .cl-in .cl-item-buy .cl-item-price b .cl-coin { font-size: 20px; }
  .cl-in .cl-item-buy .cl-item-price > span { font-size: 12.5px; }
  .cl-in .cl-item-buy > .cl-btn { width: auto; min-width: 132px; }
}
/* the shop: on the phone "Bestellungen" sits in the head's corner, the three promises as one quiet list */
@media (max-width: 599.98px) {
  .cl-page-h:has(> .cl-shop-orders) { position: relative; padding-right: 0; }
  .cl-page-h > .cl-shop-orders { position: absolute; top: 2px; right: 0; width: auto; min-height: 38px; padding-inline: 12px; font-size: 14px; }
  .cl-shop-how { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
  .cl-shop-how > div { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 14px 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  .cl-shop-how > div:first-child { border-top: 0; }
  .cl-shop-how > div .ic { grid-row: span 2; margin-top: 1px; }
  .cl-shop-how p { font-size: 13.5px; }
}
/* orders: one readable column, the state as one pill */
.cl-orders { max-width: 820px; }
.cl-order-title { overflow: hidden; color: var(--ink); font-weight: 650; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.cl-order-title:hover { text-decoration: underline; }
/* the chat on the phone: her head is the top bar (the site's bar above it cost 90 px), the thread fills the screen */
@media (max-width: 999.98px) {
  .cl-in:has(.cl-chat[data-chat]) .cl-top { display: none; }
  .cl-in:has(.cl-chat[data-chat]) .cl-main { padding-top: 0; }
  .cl-in .cl-chat-h { top: env(safe-area-inset-top, 0px); padding-top: 10px; }
  .cl-in .cl-chat { min-height: 100vh; min-height: 100dvh; }
  .cl-in:has(.cl-chat[data-chat]) .cl-chat-hint { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}
/* an empty chat: she, her price, a few first words to pick */
.cl-chat-start { display: grid; justify-items: center; gap: 6px; max-width: 420px; padding: 24px 16px; text-align: center; color: var(--ink-2); }
.cl-chat-start > .cl-ava { width: 76px; height: 76px; margin-bottom: 6px; font-size: 26px; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line); }
.cl-chat-start > b { color: var(--ink); font: 650 19px/1.3 var(--display); }
.cl-chat-start a.cl-link-more { margin-top: 6px; color: var(--accent-text); text-decoration: none; }
.cl-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.cl-starters button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 500 14px/1 var(--text); cursor: pointer; transition: border-color .15s, background-color .15s; }
.cl-starters button:hover { border-color: var(--accent); background: var(--accent-soft); }
/* the gift grid ends in a soft edge, so the cut row reads as "scroll for more" */
.cl-dlg .cl-dlg-b > .cl-gifts { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); padding-bottom: 20px; }

/* --- fixes after the first look */
.cl-tabs + .cl-prof-feed > .cl-ptiles-wrap { margin-top: 18px; }
.cl-sub-box .cl-sub-main small { color: inherit; text-align: left; }
@media (max-width: 520px) {
  .cl-sub-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .cl-sub-row > .cl-sub-main { grid-column: 1 / 3; grid-row: 1; }
  .cl-sub-row > .cl-sub-share { grid-column: 3; grid-row: 1; height: auto; min-height: 44px; }
  .cl-sub-row:not(:has([data-open="dlg-gift"])) > form { grid-column: 1 / 3; }
  .cl-sub-row > * { min-width: 0; }
  .cl-sub-row .cl-btn { padding-inline: 12px; white-space: nowrap; }
  .cl-sub-row > .cl-sub-main { white-space: normal; text-align: center; line-height: 1.25; }
}
/* only rows that really scroll get the fading edge */
@media (max-width: 599.98px) {
  .cl-seg.scroll:not(:has(> :nth-child(4))), .cl-dt-filter.scroll:not(:has(> :nth-child(5))) { -webkit-mask-image: none; mask-image: none; }
  .cl-seg.scroll:not(:has(> :nth-child(4))) > :last-child { margin-right: 0; }
}

/* --- studio */
/* numbers in tables never break ("190 / Coins"), the tiles keep the grid's gap */
.cl-table td.r, .cl-table th.r { white-space: nowrap; }
.cl-tiles { gap: 20px; }
@media (max-width: 599.98px) { .cl-tiles { gap: 10px; } }
.cl-section-h .cl-link { margin-right: -10px; }
/* her posts: three across from a small laptop on (minimum 200 px), the kind only where it tells something, "…" for the rest */
.cl-pgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 18px; }
@media (max-width: 599.98px) { .cl-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.cl-pcard-more { margin: -4px -8px -4px 0; }
.cl-pgrid .cl-pcard { overflow: visible; }
.cl-pgrid .cl-pcard-pic { border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0; }
.cl-pcard-more > summary { width: 32px; height: 32px; color: var(--ink-3); }
.cl-pcard-more > summary .ic { width: 18px; height: 18px; }
.cl-pcard-more .cl-pop-in { width: 210px; }
.cl-menu a { display: block; padding: 10px 12px; border-radius: calc(10px * var(--rk)); color: var(--ink); font: 500 14.5px/1.3 var(--text); text-decoration: none; }
.cl-menu a:hover { background: var(--surface-2); }
.cl-menu form { margin: 0; }
.cl-menu button.danger { color: var(--bad); }
.cl-menu button.danger:hover { background: var(--bad-soft); }
/* the price of a new post: always in its place, quiet while the post is free */
[data-price].is-off { opacity: .5; }
[data-price].is-off .cl-num, [data-price].is-off input { pointer-events: none; }
/* number fields stay as wide as their number (a lone "25" between − and + over 600 px) */
.cl-num { max-width: 220px; }
.cl-form-3 .cl-num, .cl-num:has(.num) { max-width: 180px; }
/* media: a calm grid of pictures; a click opens the one edit dialog */
.cl-mgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; }
button.cl-mitem { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
button.cl-mitem .cl-mthumb { transition: border-color .15s, box-shadow .15s; }
button.cl-mitem:hover .cl-mthumb { border-color: var(--line-2); box-shadow: var(--shadow); }
button.cl-mitem:focus-visible { box-shadow: none; }
button.cl-mitem:focus-visible .cl-mthumb { box-shadow: var(--ring); }
.cl-mitem-t { overflow: hidden; color: var(--ink-2); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cl-mthumb .cl-fsk, .cl-pic .cl-fsk { top: auto; bottom: 6px; left: 6px; padding: 1px 6px; background: rgba(20, 20, 19, .5); font-size: 10.5px; font-weight: 650;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cl-medit-pic { display: grid; place-items: center; overflow: hidden; height: 240px; border-radius: var(--r-sm); background: var(--surface-2); }
.cl-medit-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-medit-pic .cl-mvideo { width: 100%; height: 100%; }
@media (max-width: 599.98px) { .cl-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .cl-mitem-t { display: none; } .cl-medit-pic { height: 200px; } }
/* every picture picker: one tile size, a clear choice (a thicker ring) */
.cl-pics { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.cl-pic:has(input:checked) { box-shadow: 0 0 0 3px var(--accent); }
/* home and earnings: what to act on first on the phone, the IBAN note as a note with its button */
@media (max-width: 999.98px) { .cl-earn-side { order: -1; } }
.cl-iban-note { display: grid; gap: 10px; justify-items: start; margin-top: 12px; }
.cl-table td small.cl-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: calc(6px * var(--rk)); background: var(--surface-2); color: var(--ink-3);
  font-size: 12px; font-weight: 600; vertical-align: 1px; }
.cl-follow-table { max-width: 880px; }
/* settings: one column, the cards stacked */
.cl-settings { max-width: 760px; }
a.cl-addr-link { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.cl-addr-link:hover { text-decoration: underline; }
.cl-preview-h .cl-link { color: var(--accent-text) !important; }
/* sign-up papers: the e-mail step has its padding again, the three ID tiles line their buttons up */
.cl-steps.cl-card { padding: 16px 20px; }
.cl-doc { grid-template-rows: auto auto 1fr auto; border: 0; background: var(--surface-2); }
.cl-doc .cl-file { align-self: end; }
.cl-doc.done { border: 0; background: var(--ok-soft); }
/* to ship: one row per order on a wide screen - item, address, buttons - with a plain line, the date as a pill */
.cl-ship-list { grid-template-columns: minmax(0, 1fr); }
.cl-ship { border-color: var(--line); box-shadow: none; }
@media (min-width: 900px) { .cl-ship { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 18px; } .cl-ship > .cl-dlg { display: none; } .cl-ship > .cl-dlg[open] { display: flex; } }
/* her chat on the phone: his line under his name stays on one line */
.cl-chat-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- admin */
/* the phone: list rows keep their compact padding (the admin's 10/14 px won over the card rule and every line was 42 px) */
@container (max-width: 560px) {
  .cl-admin .cl-table[data-table]:not([data-table="compact"]) td { padding: 3px 0; }
  .cl-admin .cl-table[data-table]:not([data-table="compact"]) td:first-child { padding: 0 0 6px; }
  .cl-admin .cl-table[data-table="compact"] tbody tr { padding: 10px 14px; }
  .cl-admin .cl-table[data-table="compact"] tbody td { padding: 0; }
  .cl-admin .cl-table[data-table="compact"] td .cl-cell-who .cl-ava { width: 32px; height: 32px; }
}
/* a middle step: columns that can go, go before the action at the end is pushed out of view */
@container (max-width: 900px) { .cl-table[data-table] .cl-hide-md { display: none; } }
.cl-table td:has(> .cl-pill) { white-space: nowrap; }
/* toolbars: the search on the left with its count, like every other list */
.cl-admin .cl-toolbar .cl-searchbox { margin-left: 0; max-width: 360px; }
/* the overview: revenue first and a little larger, every number opens its page, charts of one height */
a.cl-tile-link { color: var(--ink); text-decoration: none; transition: border-color .15s, background-color .15s; }
a.cl-tile-link:hover { border-color: var(--line-2); background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.cl-admin .cl-tile small { color: var(--ink-3); }
.cl-admin .cl-tile.is-lead b { color: var(--accent-text); }
.cl-admin-charts .cl-legend li { padding-block: 6px; font-size: 13.5px; }
.cl-admin-charts .cl-donut { gap: 14px; }
.cl-rows .amt.off { color: var(--ink-3); font-weight: 500; text-decoration: line-through; }
.cl-todo a.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); color: var(--ink); }
.cl-todo a.warn .ic { width: 17px; height: 17px; color: var(--warn); }
/* settings: one list, the unit next to the number, the default as plain text */
.cl-setlist { display: grid; max-width: 900px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-setlist > .cl-set { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; padding: 16px 20px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.cl-setlist > .cl-set:first-child { border-top: 0; }
.cl-setlist > .cl-set.is-warn { background: var(--warn-soft); }
.cl-setlist .cl-set form { justify-content: flex-end; flex-wrap: nowrap; }
.cl-set-unit { min-width: 56px; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.cl-set-def { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
@media (max-width: 640px) { .cl-setlist > .cl-set { grid-template-columns: minmax(0, 1fr); } .cl-setlist .cl-set form { justify-content: flex-start; flex-wrap: wrap; } }
/* a dialog made of several forms (KI profile): the dialog scrolls as one - two small scroll areas hid "Speichern" */
.cl-dlg:has(> .cl-dlg-b ~ .cl-dlg-b) > .cl-dlg-b { flex: none; min-height: auto; overflow: visible; }
/* the side bar: the one entry that leaves the back office says so */
.cl-side-ext .ic.x { width: 14px !important; height: 14px !important; margin-left: auto; opacity: .7; }
.cl-tabbar button { position: relative; }
/* the admin bar's groups breathe a little more where the screen is tall enough (it still fits 680 px without a bar) */
@media (min-width: 1000px) and (min-height: 861px) { .cl-admin .cl-side-group { margin: 16px 10px 5px; } }
/* headings in the back office on one scale */
.cl-admin .cl-section-h h2 { font-size: 18px; }
.cl-admin .cl-empty b { font-size: 17px; }
.cl-admin .cl-ai { font-size: max(11px, .75em); }

/* her detail page: picture and name in the head, missing values quiet, blocking in red */
.cl-head-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cl-head-who > .cl-ava { width: 56px; height: 56px; font-size: 20px; }
.cl-kv dd.is-missing { color: var(--ink-3); font-weight: 400; }
.cl-btn.ghost.cl-danger-ghost { color: var(--bad) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 35%, var(--line)); }
.cl-btn.ghost.cl-danger-ghost:hover { background: var(--bad-soft); }
.cl-admin .cl-table td .cl-btn.ghost.sm.cl-danger-ghost { color: var(--bad) !important; }
/* empty pages of the back office: a calm card with what happens next, not a dashed box */
.cl-admin .cl-empty { border-style: solid; border-color: var(--line); background: var(--surface); }
.cl-admin .cl-empty p { max-width: 56ch; }
/* links in tables show they are links on hover only */
.cl-admin .cl-table td a:not(.cl-btn) { text-decoration: none; }
.cl-admin .cl-table td a:not(.cl-btn):hover { text-decoration: underline; }
/* the leak search: the limits carry a warning sign, not a tick */
.cl-leak-info h2 { font-size: 16px; }
.cl-youth-list li.warn .ic { color: var(--warn); }
.cl-leaks > .cl-g { margin: 0; }
/* mirror sites: the address says it opens outside; templates four across (seven left one alone) */
.cl-sitecard-host { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.cl-sitecard-host span { overflow: hidden; text-overflow: ellipsis; }
.cl-sitecard-host .ic { flex: none; width: 13px; height: 13px; }
@media (min-width: 720px) { .cl-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pv-h { text-wrap: balance; }

/* ---------- "Für dich" as one calm stream (owner 2026-10-28: "Für dich ist noch sehr hässlich"): no box per post, the column and
   the rail centred as a pair, previews stand in portrait like the picture behind them, the way in sits at their bottom */
@media (min-width: 1200px) { .cl-feedwrap { grid-template-columns: minmax(0, 600px) 320px; gap: 56px; justify-content: center; } }
.cl-feed .cl-page-h { margin-bottom: 6px; }
.cl-feed .cl-post { gap: 12px; padding: 22px 0 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.cl-feed .cl-post + .cl-post { margin-top: 0; }
.cl-feed .cl-post-h .cl-ava { width: 42px; height: 42px; }
.cl-post-who a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.cl-post-who a b { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.cl-post-who .cl-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-feed .cl-post-body { font-size: 15.5px; line-height: 1.55; }
.cl-feed .cl-post-media, .cl-feed .cl-post-locked { border-radius: calc(16px * var(--rk)); }
.cl-feed .cl-post-media.one .cl-media img, .cl-feed .cl-post-media.one video.cl-media { max-height: 78vh; background: var(--surface-2); }
.cl-feed .cl-post-locked { width: 100%; aspect-ratio: 4 / 5; max-height: 74vh; min-height: 0; place-items: end center; } /* width: else the height cap narrows it */
.cl-feed .cl-post-locked::after { background: linear-gradient(180deg, rgba(20, 10, 16, .08) 0%, rgba(20, 10, 16, .22) 45%, rgba(20, 10, 16, .72) 100%); }
.cl-feed .cl-post-locked-in { gap: 10px; padding: 0 24px 30px; }
.cl-feed .cl-post-locked-in > .ic { box-sizing: content-box; width: 24px; height: 24px; padding: 13px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cl-feed .cl-post-locked-in .cl-muted-on { color: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 600; }
.cl-feed .cl-post-locked-in .cl-btn { min-height: 46px; padding-inline: 22px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.cl-post-f { gap: 2px; margin: -4px 0 0 -10px; }
.cl-like span:empty { display: none; }
.cl-post-chat { margin-left: auto; color: var(--ink-2); font-weight: 600; }
.cl-feedwrap .cl-rail .cl-card { box-shadow: none; }
/* the phone: pictures from edge to edge, like the platforms people know */
@media (max-width: 599.98px) {
  .cl-feed .cl-post { padding-top: 16px; }
  .cl-feed .cl-post-media, .cl-feed .cl-post-locked { margin-inline: calc(-1 * var(--gut)); border-radius: 0; }
  /* its width is fixed (the height cap would narrow it) - so it takes the two gutters too, or it sat flush left with a strip on the
     right while open pictures ran edge to edge (owner 2026-10-29: "nicht zentriert die bilder") */
  .cl-feed .cl-post-locked { width: calc(100% + 2 * var(--gut)); max-height: 78vh; }
}

/* ---------- "Creator für dich" beside the stream (owner 2026-10-28): one quiet list with a follow button per row, then the way to
   Kennenlernen as the one warm element of the rail */
.cl-rail-box { padding: 16px 16px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-rail-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cl-rail-h h3 { font: 650 15px/1.25 var(--display); }
.cl-rail-h a { color: var(--accent-text); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.cl-rail-h a:hover { text-decoration: underline; }
.cl-meet { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 18px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--r); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--surface)), var(--surface) 70%); color: var(--ink); text-decoration: none; }
.cl-meet:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cl-meet-pics { display: flex; flex: none; padding-left: 10px; }
.cl-meet-pics img { width: 36px; height: 48px; margin-left: -12px; border: 2px solid var(--surface); border-radius: calc(9px * var(--rk)); object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
.cl-meet-pics img:nth-child(1) { rotate: -8deg; } .cl-meet-pics img:nth-child(2) { rotate: 0deg; translate: 0 -3px; } .cl-meet-pics img:nth-child(3) { rotate: 8deg; }
.cl-meet-t { display: grid; flex: 1; gap: 2px; min-width: 0; line-height: 1.3; }
.cl-meet-t b { font: 650 15px/1.25 var(--display); }
.cl-meet-t small { color: var(--ink-2); font-size: 13px; }
.cl-meet > .ic { flex: none; width: 18px; height: 18px; color: var(--accent-text); }

/* =====================================================================================================================
   Design round 3 (28.10. evening, owner: "das design ist immernoch nicht perfekt, der bestell verlauf usw auch nicht, mehr
   creator sieht auf jeder seite unterschiedlich aus"): one component per job, the same on every page - the creator banner and
   the box of creator cards, the grid card in the same language, one history row, one status pill, one flat surface.
   ===================================================================================================================== */

/* --- a creator as a banner (fragments :: creatorBanner): her picture across, a dark fade, face + name + tick + one line on it */
.cl-cbanner { position: relative; display: block; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 62%, #2a1420), color-mix(in srgb, var(--accent) 22%, #140a10)); }
.cl-cbanner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 9, 0) 30%, rgba(10, 6, 9, .68) 100%); pointer-events: none; }
.cl-cbanner-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: scale .35s var(--ease); }
.cl-cbanner-free { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .92);
  color: #1d1a1c; font: 650 11.5px/1.4 var(--text); }
.cl-cbanner-who { position: absolute; right: 12px; bottom: 10px; left: 12px; z-index: 1; display: flex; align-items: flex-end; gap: 11px; min-width: 0; }
.cl-cbanner-who .cl-ava { flex: none; width: 58px; height: 58px; border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); font-size: 18px; }
.cl-cbanner-t { display: grid; min-width: 0; padding-bottom: 3px; line-height: 1.25; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.cl-cbanner-t b { display: flex; align-items: center; gap: 5px; min-width: 0; color: #fff; font-size: 15.5px; font-weight: 700; } /* b is ink-coloured globally */
.cl-cbanner-t b > span:not(.cl-verified), .cl-cbanner-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-cbanner-t small { color: rgba(255, 255, 255, .88); font-size: 12.5px; font-weight: 500; }
:is(.cl-scard, .cl-cc):hover .cl-cbanner-cover { scale: 1.04; }

/* --- the box of creator cards (fragments :: suggestions): in a rail or as a card of the page column, three at a time */
.cl-sugs.cl-rail-box { padding: 14px 14px 4px; }
.cl-sugs.cl-card { padding: 20px 20px 10px; }
.cl-sugs-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; margin-bottom: 10px; }
.cl-sugs-h h3 { font: 650 15px/1.25 var(--display); }
.cl-sugs.cl-card .cl-sugs-h { margin-bottom: 14px; }
.cl-pager { display: flex; gap: 6px; }
.cl-pager-b { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  color: var(--ink-2); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.cl-pager-b:hover { border-color: var(--line-2); background: var(--surface-2); color: var(--ink); }
.cl-pager-b .ic { width: 16px; height: 16px; }
.cl-scard { position: relative; margin-bottom: 10px; overflow: hidden; border-radius: calc(14px * var(--rk)); }
.cl-scard:has(.cl-scard-link:focus-visible) { box-shadow: var(--ring); }
.cl-scard-link { display: block; color: #fff; text-decoration: none; }
.cl-scard-link:focus-visible { box-shadow: none; }
.cl-scard .cl-cbanner { height: 118px; }
.cl-scard:has(.cl-scard-f) .cl-cbanner-who { right: 52px; }
.cl-scard-f { position: absolute; right: 10px; bottom: 12px; z-index: 2; margin: 0; }
.cl-scard-follow { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .2); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .15s, color .15s; }
.cl-scard-follow .ic { width: 17px; height: 17px; stroke-width: 2.4; }
.cl-scard-follow:hover { background: var(--accent); }
.cl-scard-follow.is-on { background: #fff; color: var(--accent-text); }
.cl-scard-follow.is-on:hover { background: rgba(255, 255, 255, .86); }
/* rails: as wide as the one beside "Für dich", in view while the page scrolls, lined up with the top of the column next to it */
@media (min-width: 1200px) { .cl-feedwrap > .cl-rail { position: sticky; top: 32px; align-self: start; } }
@media (min-width: 1240px) { .cl-prof-wrap { grid-template-columns: minmax(0, 1fr) 320px; } .cl-in .cl-rail { top: 32px; } }

/* --- the creator card of grids (fragments :: creatorCard): the same banner on top, then a few words, numbers, price, Chat */
.cl-cc { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line);
  border-radius: calc(18px * var(--rk)); background: var(--surface); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.cl-cc:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.cl-cc > .cl-cc-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.cl-cc > .cl-cc-link:focus-visible { box-shadow: var(--ring); }
.cl-cc .cl-cbanner { aspect-ratio: 16 / 11; }
.cl-cc .cl-cbanner-who { right: 14px; bottom: 12px; left: 14px; }
.cl-cc .cl-cbanner-who .cl-ava { width: 62px; height: 62px; font-size: 21px; }
.cl-cc .cl-cbanner-t b { font: 700 18px/1.2 var(--display); letter-spacing: -.01em; }
.cl-cc .cl-cbanner-t small { font-size: 13px; }
.cl-cc-body { flex: 1; display: flex; flex-direction: column; padding: 14px calc(16px * var(--sk)) calc(16px * var(--sk)); }
.cl-cc p.cl-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.cl-cc-end { display: grid; gap: 10px; margin-top: auto; padding-top: 12px; }
.cl-cc-body > .cl-cc-end:first-child { padding-top: 0; }
.cl-cc-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-3); font-size: 13px; }
.cl-cc-stats span { display: inline-flex; align-items: center; gap: 5px; }
.cl-cc-stats .ic { width: 14px; height: 14px; }
.cl-cc-price { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.cl-cc-price .cl-coin { font-size: 15px; }
.cl-cc-btns { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr); }
.cl-cc-btns .cl-btn { min-height: 42px; font-size: 14px; }
/* discover on the phone: two cards side by side, only what decides - her picture with her name, the price, Chat */
@media (max-width: 599.98px) {
  .cl-in .cl-grid:has(> .cl-cc) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cl-in .cl-cc .cl-cbanner { aspect-ratio: 1; }
  .cl-in .cl-cc .cl-cbanner-who { right: 10px; bottom: 10px; left: 10px; display: grid; gap: 6px; }
  .cl-in .cl-cc .cl-cbanner-who .cl-ava { width: 44px; height: 44px; font-size: 16px; }
  .cl-in .cl-cc .cl-cbanner-t b { font-size: 15.5px; }
  .cl-in .cl-cc .cl-cbanner-t small { font-size: 12px; }
  .cl-in .cl-cc-body { padding: 10px; }
  .cl-in .cl-cc p.cl-bio, .cl-in .cl-cc-stats { display: none; }
  .cl-in .cl-cc-end { gap: 8px; padding-top: 0; }
  .cl-in .cl-cc-price { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .cl-cbanner-cover, .cl-scard-follow, .cl-cc { transition: none; } :is(.cl-scard, .cl-cc):hover .cl-cbanner-cover { scale: none; } }

/* ---------- Rechtliches as one document family (owner 2026-10-28: "das design von agb und impressum aktuell sehr schlecht"):
   Nutzungsbedingungen, Creator-Bedingungen, Datenschutz and Impressum share one head (what kind of text, title, date), one
   row of quiet tabs for the family, a short "in Kürze" panel, numbered sections whose number hangs in the margin, a contents
   rail that follows the reading position, and one reading width. Nothing of the help page's FAQ chrome. */
.cl-lex { max-width: 1040px; margin: 0 auto; }
.cl-lex-head { padding: 6px 0 18px; }
.cl-lex-kicker { margin: 0 0 8px; color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.cl-lex-head h1 { margin: 0; font-size: calc(clamp(30px, 4vw, 40px) * var(--hk)); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.cl-lex-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; color: var(--ink-3); font-size: 14px; }
.cl-lex-meta b { color: var(--ink-2); font-weight: 600; }
/* the family: the five texts as tabs, the one being read underlined */
.cl-lex-tabs { display: flex; gap: 2px; margin: 0 0 30px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cl-lex-tabs::-webkit-scrollbar { display: none; }
.cl-lex-tabs a { position: relative; flex: none; padding: 10px 12px 12px; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cl-lex-tabs a:first-child { padding-left: 2px; }
.cl-lex-tabs a:hover { color: var(--ink); }
.cl-lex-tabs a[aria-current="page"] { color: var(--accent-text); }
.cl-lex-tabs a[aria-current="page"]::after { content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; border-radius: 2px; background: var(--accent); }
.cl-lex-tabs a:first-child[aria-current="page"]::after { left: 2px; }
@media (max-width: 599.98px) { .cl-lex-tabs { margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); } .cl-lex-tabs a:first-child { padding-left: 12px; } .cl-lex-tabs a:first-child[aria-current="page"]::after { left: 12px; } }

/* contents rail + text */
.cl-lex-body { display: grid; gap: 22px; }
@media (min-width: 1100px) { .cl-lex-body { grid-template-columns: 212px minmax(0, 1fr); gap: 60px; align-items: start; } }
.cl-lex-side { min-width: 0; }
.cl-lex-toc > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 2px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 650; }
.cl-lex-toc > summary::-webkit-details-marker { display: none; }
.cl-lex-toc > summary b { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-3); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cl-lex-toc > summary b:not(:empty)::before { content: "· "; }
.cl-lex-toc > summary .ic { flex: none; width: 18px; height: 18px; color: var(--ink-3); rotate: 90deg; transition: rotate .2s var(--ease); }
.cl-lex-toc[open] > summary .ic { rotate: -90deg; }
.cl-lex-toc nav { display: grid; gap: 1px; padding: 2px 0 10px; }
.cl-lex-toc nav a { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px 7px 12px; border-left: 2px solid transparent; color: var(--ink-2); font-size: 14px; line-height: 1.3; text-decoration: none; }
.cl-lex-toc nav a .n { flex: none; min-width: 18px; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cl-lex-toc nav a:hover { color: var(--ink); }
.cl-lex-toc nav a.is-on { border-left-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.cl-lex-toc nav a.is-on .n { color: var(--accent-text); }
@media (min-width: 1100px) {
  .cl-lex-side { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: none; }
  .cl-lex-side::-webkit-scrollbar { display: none; }
  .cl-out .cl-lex-side { top: 88px; max-height: calc(100vh - 112px); }
  .cl-lex-toc > summary { display: none; }
  .cl-lex-toc nav { padding: 0; }
  .cl-lex-text section { scroll-margin-top: 24px; }
  .cl-out .cl-lex-text section { scroll-margin-top: 92px; }
}
/* phones and tablets: one slim sticky line - "Inhalt · the section being read" - that opens the list */
@media (max-width: 1099.98px) {
  .cl-lex-side { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 12; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
    border-bottom: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); }
  .cl-lex-toc nav { max-height: min(60vh, 420px); overflow-y: auto; }
  .cl-lex-text section { scroll-margin-top: 124px; }
}

/* the short version at the top: a reading aid, never the contract */
.cl-lex-brief { margin: 0 0 34px; padding: 18px 22px 16px 20px; border-left: 3px solid var(--accent); border-radius: 0 calc(12px * var(--rk)) calc(12px * var(--rk)) 0; background: var(--surface-2); }
.cl-lex-brief h2 { margin: 0 0 10px; font: 650 15px/1.3 var(--text); }
.cl-lex-brief ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cl-lex-brief li::marker { color: var(--accent); }
.cl-lex-brief p { margin: 12px 0 0; color: var(--ink-3); font-size: 13px; }

/* sections: the number hangs left of the title, the text under the title in one measure */
.cl-lex-text { min-width: 0; }
.cl-lex-text section + section { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.cl-lex-text h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 10px; font: 650 19px/1.3 var(--display); letter-spacing: -.005em; }
.cl-lex-text h2 .n { flex: none; min-width: 28px; color: var(--accent-text); font: 600 14px/1 var(--text); font-variant-numeric: tabular-nums; }
.cl-lex-text p, .cl-lex-text li { max-width: 68ch; color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.cl-lex-text p + p { margin-top: 12px; }
.cl-lex-text ul { display: grid; gap: 8px; margin-block: 12px 0; padding-left: 20px; }
.cl-lex-text ul + p { margin-top: 14px; }
.cl-lex-text li::marker { color: var(--accent); }
.cl-lex-text b { color: var(--ink); font-weight: 650; }
.cl-lex-text a { color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; }
.cl-lex-text a:hover { text-decoration-color: currentColor; }
@media (min-width: 720px) { .cl-lex-text section > :not(h2) { margin-inline-start: 42px; } }

/* the imprint: label and value in rows, no cards */
.cl-lex.one .cl-lex-text { max-width: 760px; }
/* no contents rail on the imprint: its text takes the whole body, not the rail column */
@media (min-width: 1100px) { .cl-lex.one .cl-lex-body { grid-template-columns: minmax(0, 1fr); } }
.cl-lex-dl { margin: 0 0 8px; }
.cl-lex-dl > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.cl-lex-dl > div:first-child { padding-top: 0; border-top: 0; }
.cl-lex-dl dt { margin: 0; color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.cl-lex-dl dd { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.55; }
.cl-lex-dl dd a { color: var(--accent-text); }
.cl-lex-dl dd .cl-muted { font-size: 14px; }
@media (min-width: 720px) { .cl-lex-dl > div { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 16px 0; } .cl-lex-dl dt { padding-top: 2px; } }
.cl-lex.one .cl-lex-text section > :not(h2) { margin-inline-start: 0; }
.cl-lex.one .cl-lex-text h2 { font-size: 17px; }
.cl-lex.one .cl-lex-text section + section { margin-top: 26px; padding-top: 22px; }

/* the end of every text: where to ask, and a print */
.cl-lex-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.cl-lex-foot a { color: var(--accent-text); }
@media print {
  .cl-lex-side, .cl-lex-tabs, .cl-lex-foot [data-print] { display: none !important; }
  .cl-lex-body { display: block; }
  .cl-lex-text section > :not(h2) { margin-inline-start: 0; }
  .cl-lex-brief { border-left-color: #999; background: none; }
}
/* ---------- mails (2026-10-29): e-mail switches in /konto and the studio settings, the unsubscribe page, the admin's mail preview */
.cl-mailprefs { display: grid; }
.cl-mailpref { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.cl-mailpref:first-child { padding-top: 0; border-top: 0; }
.cl-mailpref b { display: block; font-size: 15px; font-weight: 650; }
.cl-mailpref p { margin-top: 3px; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }
.cl-mailpref .cl-mailpref-team { margin-top: 8px; color: var(--accent-text); }
.cl-mailpref .cl-switch { margin-top: -2px; }
.cl-mailpref .cl-switch span { min-width: 26px; color: var(--ink-2); }
.cl-mailprefs-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: calc(12px * var(--rk));
  background: var(--surface-2); color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.cl-mailprefs-note .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--ok); }

.cl-unsub { text-align: center; }
/* the welcome gate (mandatory e-mail verification, 2026-10-30) */
.cl-welcome { text-align: center; }
.cl-welcome-i { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.cl-welcome-i .ic { width: 30px; height: 30px; stroke-width: 2; }
.cl-welcome .cl-card { display: grid; gap: 12px; margin-top: 22px; text-align: left; }
.cl-welcome .cl-alt { margin: 22px 0 6px; color: var(--ink-3); }
.cl-unsub-i { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 18px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.cl-unsub-i .ic { width: 30px; height: 30px; stroke-width: 2.2; }
.cl-unsub-i.on { background: var(--accent-soft); color: var(--accent-text); }
.cl-unsub-i.bad { background: var(--bad-soft); color: var(--bad); }
.cl-unsub .cl-card { display: grid; gap: 16px; text-align: left; }
.cl-unsub-still { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

/* the preview: the list left, the chosen mail right; on the phone two steps (list, then the mail with a way back) */
.cl-mails { display: grid; gap: 20px; align-items: start; }
.cl-mails > .cl-card { margin: 0; }
.cl-mails-list { display: grid; gap: 2px; padding: 14px; }
.cl-mails-group { margin: 14px 10px 4px; color: var(--ink-3); font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.cl-mails-group:first-child { margin-top: 2px; }
.cl-mails-list a { display: grid; gap: 1px; min-width: 0; padding: 9px 10px; border-radius: calc(10px * var(--rk)); color: var(--ink); text-decoration: none; }
.cl-mails-list a b { font-size: 14.5px; font-weight: 600; }
.cl-mails-list a small { overflow: hidden; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.cl-mails-list a:hover { background: var(--surface-2); }
.cl-mails-list a[aria-current="page"] { background: var(--accent-soft); }
.cl-mails-list a[aria-current="page"] b { color: var(--accent-text); }
@media (min-width: 1000px) { .cl-mails-list a.is-shown { background: var(--accent-soft); } .cl-mails-list a.is-shown b { color: var(--accent-text); } }
.cl-mails-warn { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 18px; padding: 12px 14px; border-radius: calc(12px * var(--rk));
  background: var(--warn-soft); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.cl-mails-warn .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--warn); }
.cl-mails-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--accent-text); font-size: 14px; font-weight: 600; text-decoration: none; }
.cl-mails-back .ic { width: 18px; height: 18px; }
.cl-mails-head { display: grid; justify-items: start; gap: 6px; }
.cl-mails-head h2 { font-size: 21px; }
.cl-mails-meta { margin: 16px 0 18px; }
.cl-mails-meta dd { overflow-wrap: anywhere; }
.cl-mails-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cl-mails-frame { overflow: hidden; border: 1px solid var(--line); border-radius: calc(14px * var(--rk)); background: #f5f1ec; }
.cl-mails-frame.is-dark { background: #121012; }
.cl-mails-frame iframe { display: block; width: 100%; height: 900px; margin: 0 auto; border: 0; background: transparent; }
.cl-mails-frame.is-phone iframe { width: 390px; max-width: 100%; border-inline: 1px solid var(--line); }
.cl-mails-text { margin: 0; padding: 18px 20px; overflow: auto; border: 1px solid var(--line); border-radius: calc(14px * var(--rk)); background: var(--surface-2);
  color: var(--ink); font: 13.5px/1.6 ui-monospace, "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 1000px) {
  .cl-mails { grid-template-columns: 300px minmax(0, 1fr); }
  .cl-mails-back { display: none; }
  .cl-mails-list { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; }
}
@media (max-width: 999.98px) {
  .cl-mails.has-sel .cl-mails-list, .cl-mails:not(.has-sel) .cl-mails-view, .cl-mails-width { display: none; }
  .cl-mails-view.cl-card { padding: 18px 16px; }
}

/* ---------- geld (2026-10-29): euro next to coins, price fields with their euro value, the tip dialog, team corrections */
/* a price field's line: "25 Coins = 2,50 €" first, then the suggestion */
.cl-field small [data-worth], .cl-field small[data-worth] { color: var(--ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.cl-field small b[data-worth] { display: block; margin-bottom: 1px; }
/* the tip in the chat: four amounts like the gifts, his own amount, a line; the footer like the gift dialog */
.cl-tipdlg .cl-dlg-b { gap: 14px; }
.cl-dlg .cl-dlg-b > .cl-tipamts { min-height: 0; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; } /* four amounts, not a scrolling list like the gifts */
.cl-tipamts .cl-gift-pick > span { padding: 12px 4px 10px; }
.cl-tipamts .cl-gift-pick b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cl-tipamts .cl-gift-svg { width: 46px; height: 46px; }
.cl-tipdlg [data-tiperr] { margin: 0; }
.cl-tipdlg [data-tiperr][hidden] { display: none; }
@media (max-width: 420px) {
  .cl-tipamts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-tipamts .cl-gift-pick > span { grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; column-gap: 10px; padding: 10px 8px; }
  .cl-tipamts .cl-gift-svg { grid-row: span 2; width: 36px; height: 36px; }
  .cl-tipamts .cl-gift-pick b, .cl-tipamts .cl-gift-pick small { justify-self: start; }
}
/* the big moment (gift and tip) over what he sees: below 1000 px the chat scrolls with the page, so the stage stood centred in the
   whole (long) pane, off the screen - it takes the window there */
@media (max-width: 999.98px) { .cl-giftshow { position: fixed; } }
/* the shop item's price in euro, under the coins */
.cl-item-price > .cl-item-eur { color: var(--ink-2); font-weight: 600; }
/* her bookings: a team share moved after a payout statement - a calm minus, the reason in one line */
.cl-table .amt.minus, .cl-rows .amt.minus { color: var(--ink-2); }
.cl-earn-adj { display: block; margin-top: 2px; font-size: 12.5px; }

/* ---------- fanwege (2026-10-29): coins in the chat without leaving it, the way back after the sign-up and the age check, "Gekauft",
   his data and deleting his account. Only tokens, so light and dark come along by themselves. */
/* the top-up sheet over the chat: the packages as calm rows (the smallest that close the gap), the consent, the way to pay */
.cl-topup-i { background: var(--gold-soft); }
.cl-topup-i .cl-coin { font-size: 22px; }
.cl-topup-packs { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cl-topup-pack { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  min-height: 56px; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease); }
.cl-topup-pack[hidden] { display: none; }
.cl-topup-pack:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
.cl-topup-pack:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.cl-topup-pack input { appearance: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--line-2);
  border-radius: 50%; background: var(--surface); }
.cl-topup-pack input:checked { border-color: var(--accent); }
.cl-topup-pack input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.cl-topup-pack input:focus-visible { box-shadow: var(--ring); }
.cl-topup-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: var(--ink-2); font-size: 14.5px; }
.cl-topup-n b { color: var(--ink); font: 700 19px/1.1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cl-topup-n .cl-coin { font-size: 17px; }
.cl-topup-bonus { grid-column: 2; justify-self: start; padding: 2px 8px; border-radius: calc(8px * var(--rk)); background: var(--gold-soft); color: var(--gold);
  font-size: 12px; font-weight: 700; }
.cl-topup-price { grid-column: 3; grid-row: 1 / span 2; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-topup-pack:not(:has(.cl-topup-bonus)) .cl-topup-price { grid-row: 1; }
.cl-topup-consent { margin: 0; }
.cl-topup .cl-dlg-f > a.cl-link-btn { color: var(--accent-text); text-decoration: none; }
.cl-topup .cl-dlg-f > a.cl-link-btn:hover { text-decoration: underline; }
@media (max-width: 599.98px) { .cl-topup .cl-dlg-f > a.cl-link-btn { align-self: center; margin: 0 auto; padding: 8px; } }
.cl-topup-back { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 18px; }
.cl-topup-back a { color: var(--accent-text); font-weight: 650; text-decoration: none; white-space: nowrap; }
.cl-topup-back a:hover { text-decoration: underline; }

/* back from paying (or from the age check): what he wanted to do, offered again above the composer - his draft is in the field */
.cl-offer { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 10px 10px 14px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow); }
.cl-offer-i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.cl-offer-i .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.cl-offer-i.short { background: var(--gold-soft); color: var(--gold); }
.cl-offer-t { flex: 1; min-width: 0; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.cl-offer-t b { display: block; color: var(--ink); font-size: 14.5px; }
.cl-offer .cl-btn { flex: none; }
.cl-offer-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: calc(10px * var(--rk));
  background: none; color: var(--ink-3); cursor: pointer; }
.cl-offer-x:hover { background: var(--surface-2); color: var(--ink); }
@media (min-width: 1000px) { .cl-split-pane .cl-offer { margin: 0 18px 10px; } }
@media (max-width: 520px) {
  .cl-offer { flex-wrap: wrap; }
  .cl-offer-t { flex-basis: calc(100% - 92px); }
  .cl-offer .cl-btn { order: 3; flex: 1 1 100%; }
}

/* the creator he came for: on the sign-up (small) and on his account before the e-mail is confirmed (with the way to her) */
.cl-camefor { display: flex; align-items: center; gap: 12px; margin: -8px 0 18px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--accent-soft); }
.cl-camefor .cl-ava { width: 40px; height: 40px; font-size: 14px; }
.cl-camefor > span:not(.cl-ava) { display: grid; gap: 1px; min-width: 0; }
.cl-camefor b { color: var(--ink); font-size: 15px; }
.cl-camefor small { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.cl-camefor.is-big { gap: 16px; margin: 0 0 20px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--r); }
.cl-camefor.is-big .cl-ava { width: 52px; height: 52px; }
.cl-camefor.is-big b { font: 700 18px/1.25 var(--display); }
.cl-camefor.is-big > span:not(.cl-ava) { flex: 1; }
.cl-camefor .cl-btn { flex: none; }
@media (max-width: 599.98px) {
  .cl-camefor.is-big { flex-wrap: wrap; }
  .cl-camefor.is-big > span:not(.cl-ava) { flex-basis: calc(100% - 68px); }
  .cl-camefor.is-big .cl-btn { flex: 1 1 100%; }
}

/* the age check: a locked post from 18 says so under its button; the page itself */
.cl-agefirst-n { margin-top: -4px; font-size: 13px; }
.cl-post-locked-in > .cl-btn .ic { width: 18px; height: 18px; }
.cl-age-why { margin-top: 14px; font-size: 13px; text-align: center; }
.cl-age-go { margin-top: 14px; }

/* "Gekauft": content cards with what he bought - the picture opens big, a video and a voice message play in the card */
.cl-bought-card .cl-ct-pic { background: var(--surface-2); }
.cl-bought-card .cl-ct-pic::after { pointer-events: none; }
.cl-bought-open { position: absolute; inset: 0; display: block; }
.cl-bought-open img { width: 100%; height: 100%; object-fit: cover; }
.cl-bought-card .cl-ct-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #120c10; }
.cl-bought-card .cl-ct-pic:has(video)::after, .cl-bought-card .cl-ct-pic:has(.cl-bought-voice)::after, .cl-bought-card .cl-ct-pic:has(.cl-bought-age)::after { display: none; }
.cl-bought-card .cl-ct-pic:has(video) .cl-ct-kind { pointer-events: none; }
.cl-bought-glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-text); background: linear-gradient(160deg, var(--frame), var(--surface-2)); }
.cl-bought-glyph .ic { width: 34px; height: 34px; stroke-width: 1.6; }
.cl-bought-voice { position: absolute; inset: 0; }
.cl-bought-voice .cl-bought-glyph { padding-bottom: 56px; }
.cl-bought-voice .cl-voice { position: absolute; left: 10px; right: 10px; bottom: 10px; width: auto; padding: 6px 10px 6px 6px; border-radius: 999px; }
.cl-bought-voice .cl-voice-wave { gap: 1.5px; height: 24px; }
.cl-bought-voice .cl-voice-wave i.on { background: var(--accent); opacity: 1; }
.cl-bought-voice .cl-voice-play { width: 34px; height: 34px; }
.cl-bought-age { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 12px; color: var(--ink-2) !important;
  text-align: center; text-decoration: none; background: var(--surface-2); }
.cl-bought-age .ic { width: 28px; height: 28px; color: var(--accent-text); }
.cl-bought-age b { color: var(--ink); font-size: 15px; }
.cl-bought-age span { color: var(--accent-text); font-size: 13.5px; font-weight: 650; }
.cl-bought-card .cl-ct-meta .who { flex: 0 1 auto; min-width: 0; text-decoration: none; }
.cl-bought-card .cl-ct-meta .who:hover { text-decoration: underline; }
.cl-bought-at { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .cl-bought-card .cl-ct-meta .who { display: block; } }
.cl-bought-note { margin-bottom: 18px; }
.cl-bought-note a { color: var(--accent-text); font-weight: 650; }
/* the way there from his account */
.cl-bought-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--ink); text-decoration: none; transition: border-color .15s var(--ease); }
.cl-bought-link:hover { border-color: var(--line-2); }
.cl-bought-link > span:not(.cl-dlg-i) { display: grid; flex: 1; gap: 1px; min-width: 0; }
.cl-bought-link b { font-size: 16px; }
.cl-bought-link small { color: var(--ink-3); font-size: 13.5px; }
.cl-bought-link > .ic { color: var(--ink-3); }
.cl-balance + .cl-bought-link { margin-top: 18px; }

/* one post on its own page */
.cl-solo { max-width: 680px; }
.cl-solo-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px -4px; padding: 6px 8px 6px 4px; border-radius: calc(10px * var(--rk));
  color: var(--ink-2) !important; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.cl-solo-back:hover { background: var(--surface-2); color: var(--ink) !important; }
.cl-solo-back .ic { width: 18px; height: 18px; }
.cl-solo > .cl-note { margin-bottom: 16px; }
.cl-solo-more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* his data and deleting the account */
.cl-leave-btn { color: var(--bad) !important; }
.cl-leave-btn:hover { background: var(--bad-soft); }
.cl-leave-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cl-leave-list li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.cl-leave-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); opacity: .7; }
.cl-leave-list b { color: var(--ink); }
.cl-leave-list a, .cl-leave .cl-muted a { color: var(--accent-text); }
.cl-leave .cl-btn.danger[disabled] { background: var(--surface-3); color: var(--ink-3) !important; }
.cl-leave-creator { margin-top: 16px; font-size: 13.5px; }
.cl-leave-creator a { color: var(--accent-text); }
/* his account on narrow screens: the two columns keep interleaving below their second card ("Gekauft", "Deine Daten" are third)
   - without an order they jumped to the top */
@media (max-width: 1199.98px) {
  .cl-g > .cl-col:first-child > :nth-child(3) { order: 5; } .cl-g > .cl-col + .cl-col > :nth-child(3) { order: 6; }
  .cl-g > .cl-col:first-child > :nth-child(4) { order: 7; } .cl-g > .cl-col + .cl-col > :nth-child(4) { order: 8; }
}

/* ---------- versand (2026-10-29): the history row (orders - the reference for every history list), the order pages with their
   timeline, the carrier's events, labels through Chatly (parcel sizes, sender), returns, the shop's state for the admin */

/* the history row: photo, what + from whom and when, where it is, what it cost, a chevron - one calm line per entry */
.cl-hlist { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-hrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto 18px; grid-template-areas: "pic main state amt go"; align-items: center;
  gap: 4px 18px; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .15s; }
.cl-hrow:first-child { border-top: 0; }
a.cl-hrow:hover { background: var(--ground); }
.cl a.cl-hrow:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 2px var(--accent); }
.cl-hrow-pic { grid-area: pic; display: block; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: calc(12px * var(--rk)); background: var(--surface-2); }
.cl-hrow-pic img { width: 100%; height: 100%; object-fit: cover; }
.cl-hrow-pic img.veil { filter: blur(14px) saturate(1.15); transform: scale(1.3); }
.cl-hrow-pic.lg { width: 72px; height: 72px; border-radius: calc(14px * var(--rk)); }
.cl-hrow-main { grid-area: main; display: grid; gap: 2px; min-width: 0; }
.cl-hrow-t { overflow: hidden; font-size: 15.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.cl-hrow-sub { overflow: hidden; color: var(--ink-3); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.cl-hrow-state { grid-area: state; display: grid; justify-items: end; gap: 3px; min-width: 0; max-width: 260px; }
.cl-hrow-state small { max-width: 100%; overflow: hidden; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.cl-hrow-amt { grid-area: amt; display: grid; justify-items: end; gap: 2px; min-width: 72px; font-variant-numeric: tabular-nums; }
.cl-hrow-amt b { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.cl-hrow-amt small { color: var(--ink-3); font-size: 12.5px; }
.cl-hrow-go { grid-area: go; width: 18px; height: 18px; color: var(--ink-3); }
a.cl-hrow:hover .cl-hrow-go { color: var(--accent-text); }
.cl-hrow.is-off .cl-hrow-pic, .cl-hrow.is-off .cl-hrow-t, .cl-hrow.is-off .cl-hrow-amt { opacity: .6; }
@media (max-width: 699.98px) {
  .cl-hrow { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "pic main amt" "pic state amt"; gap: 6px 12px; padding: 12px 14px; }
  .cl-hrow-pic { width: 48px; height: 48px; align-self: start; }
  .cl-hrow-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: none; }
  .cl-hrow-amt { align-self: start; min-width: 0; }
  .cl-hrow-go { display: none; }
}

/* an order page: photo, title, number and state; the timeline and the return on the left, money, address, help on the right */
.cl-vs-head { display: flex; align-items: center; gap: 16px; margin-bottom: calc(22px * var(--sk)); }
.cl-vs-head > div { flex: 1; min-width: 0; }
.cl-vs-head h1 { font-size: calc(clamp(24px, 4.4vw, 32px) * var(--hk)); overflow-wrap: anywhere; }
.cl-vs-head .cl-sub { margin-top: 4px; font-size: 14.5px; }
.cl-vs-head .cl-sub a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.cl-vs-head .cl-sub a:hover { text-decoration: underline; }
.cl-vs-head > .cl-pill { flex: none; }
@media (max-width: 599.98px) {
  .cl-vs-head { flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; }
  .cl-vs-head .cl-hrow-pic.lg { width: 56px; height: 56px; }
  .cl-vs-head > div { flex-basis: calc(100% - 70px); }
  .cl-vs-head > .cl-pill { margin-left: 70px; }
}
.cl-vs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 350px); gap: 18px; align-items: start; }
.cl-vs-main, .cl-vs-side { display: grid; gap: 18px; min-width: 0; }
.cl-vs-main > .cl-card + .cl-card, .cl-vs-side > .cl-card + .cl-card { margin-top: 0; }
.cl-vs-side .cl-card { padding: calc(20px * var(--sk)); }
.cl-vs-side .cl-card-h { margin-bottom: 12px; }
.cl-vs-side .cl-card-h h2 { font-size: 17px; }
@media (max-width: 899.98px) { .cl-vs-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599.98px) { .cl-vs-grid .cl-card { padding: 18px; } }
.cl-vs-grid .cl-card-h a { display: inline-flex; align-items: center; gap: 5px; }
.cl-vs-grid .cl-card-h a .ic { width: 15px; height: 15px; }
.cl-vs-grid .cl-card > .cl-note { margin-top: 14px; }
.cl-vs-grid .cl-ship-addr { margin: 0; }
.cl-vs-lead { color: var(--ink-2); }
.cl-vs-small { margin-top: 10px; font-size: 13px; }
.cl-vs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.cl-vs-acts form { display: contents; }
.cl-vs-acts small { color: var(--ink-3); font-size: 13px; }
.cl-vs-label { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cl-vs-label:empty { display: none; }
.cl-vs-label form { display: contents; }
@media (max-width: 599.98px) { .cl-vs-label .cl-btn, .cl-vs-acts > .cl-btn { flex: 1 1 100%; } }
.cl-vs-plain { color: inherit; text-decoration: none; }
.cl-vs-plain:hover { color: var(--accent-text); }

/* the timeline: a dot per step on a line - done (filled), now (a ring), todo (empty), bad */
.cl-tl { display: grid; margin: 0; padding: 0; list-style: none; }
.cl-tl-s { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.cl-tl-s:last-child { padding-bottom: 0; }
.cl-tl-s::before { content: ""; position: absolute; left: 12px; top: 28px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--line-2); }
.cl-tl-s:last-child::before { display: none; }
.cl-tl-s.done::before { background: var(--accent); }
.cl-tl-dot { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--line-2); border-radius: 50%; background: var(--surface); color: #fff; }
.cl-tl-dot .ic { width: 14px; height: 14px; stroke-width: 3; }
.cl-tl-s.done .cl-tl-dot { border-color: var(--accent); background: var(--accent); }
.cl-tl-s.now .cl-tl-dot { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cl-tl-s.now .cl-tl-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cl-tl-s.bad .cl-tl-dot { border-color: var(--bad); background: var(--bad); }
.cl-tl-t { display: grid; gap: 1px; min-width: 0; padding-top: 2px; }
.cl-tl-t b { font-weight: 650; }
.cl-tl-t small { color: var(--ink-3); font-size: 13px; }
.cl-tl-t small.note { color: var(--ink-2); }
.cl-tl-s.todo .cl-tl-t b { color: var(--ink-3); font-weight: 500; }
.cl-tl-s.bad .cl-tl-t b { color: var(--bad); }
@media (prefers-reduced-motion: no-preference) { .cl-tl-s.now .cl-tl-dot { animation: cl-tl-pulse 2.4s ease-in-out infinite; } }
@keyframes cl-tl-pulse { 50% { box-shadow: 0 0 0 7px var(--accent-soft); } }

/* the carrier's events, folded under the timeline */
.cl-tl-ev { margin-top: 16px; border-top: 1px solid var(--line); }
.cl-tl-ev summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 0; color: var(--ink-2); font-size: 14px; font-weight: 600;
  cursor: pointer; list-style: none; }
.cl-tl-ev summary::-webkit-details-marker { display: none; }
.cl-tl-ev summary:hover { color: var(--ink); }
.cl-tl-ev summary .ic { width: 16px; height: 16px; transition: rotate .2s; }
.cl-tl-ev[open] summary .ic { rotate: 90deg; }
.cl-tl-ev ol { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.cl-tl-ev li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.cl-tl-ev time { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-tl-ev li > span { display: grid; color: var(--ink-2); }
.cl-tl-ev li small { color: var(--ink-3); font-size: 12.5px; }
.cl-tl-ev li.bad > span { color: var(--bad); }

/* the number and the carrier */
.cl-vs-track { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.cl-vs-track .ic { width: 19px; height: 19px; margin-top: 1px; color: var(--accent-text); }
.cl-vs-track > span { min-width: 0; overflow-wrap: anywhere; }
.cl-vs-track b { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cl-vs-track small { display: block; color: var(--ink-3); font-size: 12.5px; }
.cl-tl + .cl-vs-track { margin-top: 20px; }

/* no return, a message sent, the three steps of a return */
.cl-vs-no, .cl-vs-done { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: 14.5px; }
.cl-vs-no .ic, .cl-vs-done .ic { width: 19px; height: 19px; margin-top: 1px; }
.cl-vs-no .ic { color: var(--ink-3); }
.cl-vs-done { color: var(--ok); font-size: 14px; font-weight: 500; }
.cl-vs-howto { display: grid; gap: 6px; margin: 0; padding: 14px 16px 14px 34px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.cl-vs-from { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--ok-soft); color: var(--ink-2); font-size: 14px; }
.cl-vs-from .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--ok); }
.cl-vs-from b { display: block; color: var(--ink); }
.cl-vs-from p > span { display: block; }

/* the parcel size of a label: three cards (a list on the phone) */
.cl-vs-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cl-vs-sizes legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 650; }
.cl-vs-size { position: relative; display: grid; align-content: start; justify-items: start; gap: 2px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.cl-vs-size input { position: absolute; opacity: 0; pointer-events: none; }
.cl-vs-size .ic { width: 22px; height: 22px; margin-bottom: 6px; color: var(--ink-3); }
.cl-vs-size b { font-size: 15px; }
.cl-vs-size span { color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.cl-vs-size small { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; }
.cl-vs-size:hover { border-color: color-mix(in srgb, var(--line-2) 55%, var(--accent)); }
.cl-vs-size:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cl-vs-size:has(input:checked) .ic { color: var(--accent-text); }
.cl-vs-size:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--accent), var(--ring); }
@media (max-width: 599.98px) {
  .cl-vs-sizes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cl-vs-size { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 14px; }
  .cl-vs-size .ic { grid-row: span 2; margin: 0; }
  .cl-vs-size small { grid-column: 2 / -1; }
}

/* her two ways to ship an open order, side by side */
.cl-vs-todo { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.cl-vs-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 16px; }
.cl-vs-way { display: grid; align-content: start; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.cl-vs-way > b { display: flex; align-items: center; gap: 8px; font-size: 15.5px; }
.cl-vs-way > b .ic { color: var(--accent-text); }
.cl-vs-way p { color: var(--ink-2); font-size: 14px; }
.cl-vs-share { font-weight: 650; font-variant-numeric: tabular-nums; }
.cl-vs-way .cl-btn { justify-self: start; margin-top: 4px; }
@media (max-width: 599.98px) { .cl-vs-way .cl-btn { justify-self: stretch; } }
.cl-ship-btns { flex-wrap: wrap; align-items: center; }
.cl-ship-btns .cl-link-btn { margin-left: auto; padding: 8px 4px; }

/* the admin: which parcel service works, the returns queue, problems */
.cl-vs-status { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-vs-status > .ic { width: 22px; height: 22px; color: var(--ok); }
.cl-vs-status.test > .ic { color: var(--warn); }
.cl-vs-status.off > .ic { color: var(--ink-3); }
.cl-vs-status > div { display: grid; flex: 1; gap: 2px; min-width: 0; font-size: 14.5px; }
.cl-vs-status .cl-muted { font-size: 13px; }
@media (max-width: 599.98px) { .cl-vs-status { flex-wrap: wrap; align-items: flex-start; } .cl-vs-status > div { flex-basis: calc(100% - 40px); } .cl-vs-status > .cl-btn { width: 100%; } }
.cl-vs-rowacts { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.cl-vs-rowacts form { display: contents; }
.cl-vs-quote { display: block; margin-top: 6px; padding: 6px 12px; border-left: 3px solid var(--line-2); color: var(--ink-2); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.cl-hrow.cl-vs-problem { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main act"; align-items: start; }
.cl-hrow.cl-vs-problem .cl-hrow-t { white-space: normal; }
.cl-vs-problem > form { grid-area: act; }
@media (max-width: 599.98px) { .cl-hrow.cl-vs-problem { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "act"; } .cl-vs-problem > form .cl-btn { width: 100%; } }
.cl-vs-alert { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.cl-vs-setinfo { grid-column: 1 / -1; display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: 13.5px; }
.cl-set .cl-vs-setinfo p { color: var(--ink-2); font-size: 13.5px; }
.cl-vs-setinfo b { color: var(--ink); font-size: 13.5px; }
.cl-vs-main > *, .cl-vs-side > * { min-width: 0; }
/* the returns queue on the phone: the buttons on their own line under the order */
@container (max-width: 560px) {
  .cl-vs-rettable[data-table="compact"] tbody td:last-child { order: 3; flex: 1 1 100%; margin: 8px 0 0; text-align: left; }
  .cl-vs-rettable .cl-vs-rowacts { display: flex; flex-wrap: wrap; justify-content: flex-start; }
}
.cl-set form select.cl-input.sm { flex: 0 1 220px; width: auto; min-width: 150px; }

/* ---------- the imprint, clean (owner 2026-10-29: "Impressum seite ist auch nicht wirklich clean"): the facts as one calm card over
   the whole width of the legal family (not a 760 px column with an empty right half), legal references small under their label,
   the three short sections side by side from 1000 px */
.cl-lex.one .cl-lex-text { max-width: none; }
.cl-ifacts { margin: 0 0 34px; padding: 6px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-ifacts > div { padding: 16px 0; }
.cl-ifacts > div:first-child { padding-top: 16px; border-top: 0; }
.cl-ifacts dt { display: grid; gap: 2px; color: var(--ink-2); font-size: 14px; font-weight: 650; }
.cl-iref { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.cl-ifacts dd { font-size: 16px; }
@media (min-width: 720px) { .cl-ifacts > div { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 18px 0; } .cl-ifacts > div:first-child { padding-top: 18px; } }
.cl-inotes { display: grid; gap: 26px; }
.cl-inotes section { margin: 0; padding: 0; border: 0; }
.cl-lex.one .cl-inotes section + section { margin-top: 0; padding-top: 26px; border-top: 1px solid var(--line); }
.cl-inotes h2 { font-size: 17px; }
.cl-inotes p { font-size: 15.5px; text-wrap: wrap; }
/* three equal columns: the lines between them are drawn in the gap, so they take nothing from the second and third column */
@media (min-width: 1000px) {
  .cl-inotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 56px; }
  .cl-lex.one .cl-inotes section + section { position: relative; padding-top: 0; border-top: 0; }
  .cl-lex.one .cl-inotes section + section::before { content: ""; position: absolute; top: 0; bottom: 0; left: -28px; border-left: 1px solid var(--line); }
}
@media print { .cl-ifacts { padding: 0; border: 0; } .cl-inotes { display: block; } .cl-lex.one .cl-inotes section + section { margin: 18px 0 0; padding: 0; border: 0; } }

/* ---------- pwa (2026-10-29): the sheet "Zum Startbildschirm" (phones, assets/pwa.js) and the offline page of the service worker.
   The sheet is a normal dialog (bottom sheet on the phone): the site's icon as on the start screen, the steps as small rows with the
   real symbol of the share menu, an arrow towards the share button (bottom bar on the iPhone, top right on the iPad). */
.cl-pwa { --dlg-w: 440px; }
.cl-pwa-ic { flex: none; width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 4px 14px rgba(20, 18, 15, .1); }
.cl-pwa .cl-dlg-h h2 { font-size: 19px; }
.cl-pwa .cl-dlg-b { padding-top: 16px; }
.cl-pwa-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: pwa; }
.cl-pwa-steps li { counter-increment: pwa; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); }
.cl-pwa-key { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: calc(12px * var(--rk));
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.cl-pwa-key .ic { width: 24px; height: 24px; stroke-width: 1.7; }
.cl-pwa-key::before { content: counter(pwa); position: absolute; top: -6px; left: -6px; display: grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 11px/1 var(--text); box-shadow: 0 0 0 2px var(--surface-2); }
.cl-pwa-say { display: grid; gap: 3px; min-width: 0; }
.cl-pwa-say b { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.cl-pwa-say small { color: var(--ink-3); font-size: 13.5px; line-height: 1.4; }
.cl-pwa-point { display: flex; justify-content: center; padding: 0 0 10px; color: var(--accent-text); pointer-events: none; }
.cl-pwa-point .ic { width: 26px; height: 26px; stroke-width: 2.2; rotate: -90deg; animation: cl-pwa-nudge 1.6s var(--ease) infinite; }
.cl-pwa-point.up { justify-content: flex-end; padding: 8px 22px 0 0; margin-bottom: -14px; }
.cl-pwa-point.up .ic { rotate: 90deg; animation-name: cl-pwa-nudge-up; }
@keyframes cl-pwa-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
@keyframes cl-pwa-nudge-up { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .cl-pwa-point .ic { animation: none; } }
@media (orientation: landscape) and (max-height: 500px) { .cl-pwa-point { display: none; } }
@media (min-width: 600px) {
  /* the iPad's share button sits top right: the sheet stands under it */
  .cl-pwa.is-top { margin: calc(env(safe-area-inset-top, 0px) + 12px) 16px auto auto; }
}
@media (max-width: 599.98px) {
  .cl-pwa .cl-dlg-f { padding-bottom: 12px; }
  .cl-pwa .cl-dlg-f > .cl-link-btn { margin: 0 auto; padding: 8px; }
}

/* the page the service worker shows without a connection (templates/offline.html) */
.cl-offline-page { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; }
.cl-offline { display: grid; justify-items: center; gap: 28px; width: 100%; padding: calc(32px + env(safe-area-inset-top, 0px)) 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
.cl-offline-card { display: grid; justify-items: center; gap: 12px; width: min(420px, 100%); padding: 32px 24px 28px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.cl-offline-card h1 { font-size: 24px; }
.cl-offline-card p { max-width: 34ch; margin-bottom: 8px; color: var(--ink-2); }

/* ---------- like an app (owner 2026-10-29: "einfach als wäre es eine richtige app auch beim anklicken von dingen darf nicht diese blaue
   link farbe kommen sondern alles wirklich auch app optimiert smooth"): no coloured tap flash anywhere, taps act at once (no double-tap
   zoom wait), controls are not selected like text and give no long-press menu, a short pressed feedback, iOS does not zoom into fields,
   the installed app does not rubber-band as a whole, page changes cross-fade with the bars standing still */
html, .cl * { -webkit-tap-highlight-color: transparent; }
.cl a, .cl button, .cl summary, .cl label, .cl [role="button"], .cl input, .cl select, .cl textarea { touch-action: manipulation; }
.cl button, .cl .cl-btn, .cl summary, .cl-tabbar, .cl-side-nav, .cl-top-nav, .cl-lex-tabs, .cl-seg, .cl-chips, .cl-gift-pick {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (hover: none) and (pointer: coarse) {
  .cl a:active, .cl summary:active, .cl [role="button"]:active, .cl-tabbar a:active, .cl-side-nav a:active { opacity: .7; transition: opacity 0s; }
  .cl a, .cl summary, .cl [role="button"] { transition: opacity .18s ease-out; }
  /* fields at least 16 px: iOS zooms into anything smaller when it gets the focus */
  .cl input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .cl select, .cl textarea { font-size: max(16px, 1em); }
}
@media (display-mode: standalone) { html, body { overscroll-behavior-y: none; } }
/* No cross-document view transition on navigation (2026-10-30): it cross-faded to a page whose charts were still empty/animating,
   which read as a jerk when opening the dashboard. Clean instant navigation plus reserved chart height (below) is calmer. */

/* offline like an app (owner 2026-10-29: "auch anzeigen wenn man offline ist"): a pill at the top while the connection is gone,
   "Wieder online" for two seconds when it is back (chatly.js) */
.cl-netbar { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; z-index: 120; display: inline-flex; align-items: center;
  gap: 9px; max-width: calc(100vw - 32px); padding: 9px 16px 9px 13px; border-radius: 999px; background: var(--ink); color: var(--surface);
  box-shadow: var(--shadow-lg); font: 600 14px/1.3 var(--text); white-space: nowrap; pointer-events: none;
  transform: translate(-50%, calc(-100% - 24px)); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.cl-netbar.is-in { transform: translate(-50%, 0); }
.cl-netbar::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3fbf7f; }
.cl-netbar.is-off::before { background: #f0a23b; animation: cl-netpulse 1.6s ease-in-out infinite; }
@keyframes cl-netpulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cl-netbar { transition: none; } .cl-netbar.is-off::before { animation: none; } }

/* ---------- ads (2026-10-29): the family-safe start page for ads - the conversation in the hero, our picks, the dark finale, the phone's
   sign-up bar - and our own cookie question with its settings, the footer's "Cookie-Einstellungen", the admin's tag fields */
:root { --brand: #c93f80; --brand2: #8a1a4f; }

/* the conversation: Chatly's chat in a frame, two soft cards behind it; it plays once (ads.js), every row has its place from the start */
.cl-hc { position: relative; width: 100%; max-width: 430px; margin: 8px 0 0; justify-self: center; }
.cl-hc-stack span { position: absolute; inset: 22px 6px 14px; border-radius: calc(28px * var(--rk)); }
.cl-hc-stack span:first-child { transform: rotate(-5deg) translate(-16px, 8px); background: var(--stack-a); }
.cl-hc-stack span:last-child { transform: rotate(4deg) translate(14px, 4px); background: var(--stack-b); }
.cl-hc-frame { position: relative; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: calc(28px * var(--rk)); background: var(--surface); box-shadow: var(--shadow-lg); }
.cl-hc-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cl-hc-ava { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--frame), var(--frame-strong)); color: var(--accent-text); }
.cl-hc-ava .ic { width: 22px; height: 22px; }
.cl-hc-who { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.cl-hc-who b { overflow: hidden; font-size: 15.5px; text-overflow: ellipsis; white-space: nowrap; }
.cl-hc-who small { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; }
.cl-hc-who small i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.cl-hc-more { display: grid; place-items: center; color: var(--ink-3); }
.cl-hc-log { display: grid; align-content: start; gap: 10px; padding: 18px 16px 20px; background: var(--ground); }
.cl-hc-row { position: relative; display: flex; margin: 0; }
.cl-hc-row.me { justify-content: flex-end; }
.cl-hc-b { max-width: 82%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 20px 20px 20px 6px; background: var(--surface); font-size: 15px; line-height: 1.45;
  overflow-wrap: anywhere; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.cl-hc-row.me .cl-hc-b { border-color: transparent; border-radius: 20px 20px 6px 20px; background: var(--accent); color: var(--accent-ink); }
.cl-hc-typing { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 15px; border: 1px solid var(--line);
  border-radius: 20px 20px 20px 6px; background: var(--surface); opacity: 0; transition: opacity .2s var(--ease); pointer-events: none; }
.cl-hc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: cl-hc-dot 1s ease-in-out infinite; }
.cl-hc-typing i:nth-child(2) { animation-delay: .15s; }
.cl-hc-typing i:nth-child(3) { animation-delay: .3s; }
.cl-hc-row.is-typing .cl-hc-typing { opacity: 1; }
@keyframes cl-hc-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
/* before it plays: the bubbles wait in their place (with JS only - and if ads.js never runs, they come after a moment by themselves) */
.cl-js .cl-hc [data-hc]:not(.is-in) > .cl-hc-b { opacity: 0; transform: translateY(6px) scale(.98); }
.cl-js .cl-hc:not(.is-playing):not(.is-done) [data-hc] > .cl-hc-b { animation: cl-hc-late .01s 2.5s both; }
@keyframes cl-hc-late { to { opacity: 1; transform: none; } }
.cl-hc-voice { display: inline-flex; align-items: center; gap: 10px; width: 236px; }
.cl-hc-play { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.cl-hc-play .ic { width: 14px; height: 14px; margin-left: 2px; }
.cl-hc-wave { display: flex; flex: 1; align-items: center; gap: 2px; height: 26px; }
.cl-hc-wave i { flex: 1; height: var(--h); min-height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink-3) 60%, transparent); }
.cl-hc-t { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.cl-hc-set { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; }
.cl-hc-set-pic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: calc(14px * var(--rk));
  background: radial-gradient(70% 70% at 30% 25%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(135deg, #f3a7c8, #c9a8ef 55%, #f4c9a0); color: #fff; }
.cl-hc-set-pic .ic { width: 20px; height: 20px; stroke-width: 2.2; filter: drop-shadow(0 1px 2px rgba(60, 20, 40, .35)); }
.cl-hc-set-t { display: grid; line-height: 1.3; }
.cl-hc-set-t b { font-size: 14.5px; }
.cl-hc-set-t small { color: var(--ink-3); font-size: 13px; }
.cl-hc-compose { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14.5px; }
.cl-hc-compose > span:first-child { flex: 1; padding: 10px 14px; border-radius: 999px; background: var(--surface-2); }
.cl-hc-send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.cl-hc-send .ic { width: 18px; height: 18px; }
@media (min-width: 960px) { .cl-land-hero.is-chat .cl-hc { justify-self: end; margin-right: 12px; } }
@media (max-width: 380px) { .cl-hc-voice { width: 200px; } .cl-hc-b { font-size: 14.5px; } }
@media (max-width: 599.98px) {
  .cl-hc-stack span:first-child { transform: rotate(-3deg) translate(-6px, 8px); }
  .cl-hc-stack span:last-child { transform: rotate(3deg) translate(6px, 4px); }
  /* the start picture's two buttons as one even column on phones */
  .cl-land-hero .cl-land-copy { justify-items: stretch; }
  .cl-land-hero .cl-land-copy > .cl-aud { justify-self: start; }
  .cl-land-hero .cl-actions { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .cl-hc-b, .cl-hc-typing { transition: none; } .cl-hc-typing i { animation: none; } }

/* tablets: three steps, three articles in one row (two columns left the third one alone) */
@media (min-width: 720px) and (max-width: 1039.98px) {
  :is(.cl-how, .cl-trust, .cl-features).n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-land .cl-blog-grid.three:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* our picks on the start page: few cards stand in the middle instead of at the left edge */
@media (min-width: 600px) { .cl-land .cl-blk-featured .cl-grid:not([class*="cols-"]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 290px)); justify-content: center; } }

/* the dark finale: a soft glow from above, the two buttons side by side, the line for creators */
.cl-land .cl-blk-cta.bg-dark { background: radial-gradient(60% 90% at 50% 0%, color-mix(in srgb, var(--brand) 32%, transparent), transparent 72%), color-mix(in srgb, var(--brand) 9%, #0e0d10); }
.cl-land .cl-blk-cta.bg-dark .cl-land-end h2 { font-size: calc(clamp(28px, 5vw, 42px) * var(--hk)); }
.cl-out .cl-main:has(.cl-land > .cl-blk-cta.bg-dark:last-child) { padding-bottom: 0; }
.cl-land-end-btns { justify-content: center; }
.cl-land-end-creator { color: var(--ink-2); font-size: 15px; }
.cl-land-end-creator a { color: var(--accent-text); font-weight: 650; }
.cl-blk.on-dark .cl-land-end-creator { color: color-mix(in srgb, currentColor 78%, transparent); }
.cl-blk.on-dark .cl-land-end-creator a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 519.98px) { .cl-land-end-btns { display: grid; width: 100%; } }

/* phones: the sign-up bar at the bottom while no other button to it is in view */
.cl-mbar { display: none; }
@media (max-width: 719.98px) {
  .cl-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: block; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line); background: var(--glass); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
    transform: translateY(110%); transition: transform .25s var(--ease); }
  .cl-mbar.is-on { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cl-mbar { transition: none; } }

/* the cookie question: a calm card at the bottom, three equal choices */
.cl-ck { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 760px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-lg); }
.cl-ck[hidden] { display: none; }
.cl-ck-in { display: grid; gap: 16px; padding: 20px 22px; }
.cl-ck-copy { display: grid; gap: 6px; }
.cl-ck-copy h2 { font-size: 18px; }
.cl-ck-copy p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.cl-ck-copy a { color: var(--accent-text); }
.cl-ck-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cl-ck-btns .cl-btn { padding: 0 12px; }
@media (max-width: 559.98px) {
  .cl-ck { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .cl-ck-in { gap: 14px; padding: 16px; }
  .cl-ck-copy p { font-size: 14px; }
  .cl-ck-btns { grid-template-columns: 1fr 1fr; }
  .cl-ck-btns [data-ck-open] { grid-column: 1 / -1; }
}
.cl-ck-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cl-ck-row:last-child { padding-bottom: 0; border-bottom: 0; }
.cl-ck-row b { font-size: 15.5px; }
.cl-ck-row p { margin-top: 3px; color: var(--ink-2); font-size: 14px; }
.cl-ck-row .cl-switch input:disabled { opacity: .55; cursor: not-allowed; }
.cl-ckdlg .cl-dlg-f .cl-btn { flex: 1 1 auto; }
.cl-foot-ck { justify-self: start; padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.cl-foot.slim .cl-foot-ck { font-size: 13px; }
.cl-foot-ck:hover { color: var(--ink); text-decoration: underline; }

/* the admin: the tag ID and labels as one line; where a fan came from */
.cl-set form .cl-input.cl-set-text { flex: 0 1 260px; width: 260px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; }
@media (max-width: 599.98px) { .cl-set form .cl-input.cl-set-text { flex: 1 1 auto; width: auto; min-width: 0; } }
.cl-camp-dl { display: grid; gap: 6px; margin: 0; }
.cl-camp-dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.cl-camp-dl dt { color: var(--ink-3); }
.cl-camp-dl dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- push (2026-10-29): notices on the device - our own question (#cl-push, a normal dialog: a bottom sheet on the phone)
   with a small picture of the notice as it will look (the site's app icon, its name, "Lara hat dir geschrieben"), and the card
   "Hinweise" on /konto and in the studio settings: the switch for this device, the kinds (the e-mail switches' rows), the devices. */
.cl-push { --dlg-w: 440px; }
.cl-push .cl-dlg-h h2 { font-size: 19px; }
.cl-push .cl-dlg-b { gap: 12px; padding-top: 18px; }
.cl-push-demo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line); }
.cl-push-demo img { flex: none; width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.cl-push-demo-t { display: grid; gap: 2px; min-width: 0; }
.cl-push-demo-t > span:first-child { display: flex; align-items: baseline; gap: 8px; }
.cl-push-demo-t b { font-size: 14px; font-weight: 650; }
.cl-push-demo-t small { color: var(--ink-3); font-size: 12.5px; }
.cl-push-demo-t [data-push-demo] { overflow: hidden; color: var(--ink); font-size: 14.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.cl-push-fine { color: var(--ink-3); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 599.98px) {
  .cl-push .cl-dlg-f { padding-bottom: 12px; }
}

/* the jump to #hinweise (the toast after a switch, a link) stops below the top bar */
.cl-pushcard { scroll-margin-top: 24px; }
@media (max-width: 999.98px) { .cl-pushcard { scroll-margin-top: calc(80px + env(safe-area-inset-top, 0px)); } }
.cl-pushhere { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 4px 14px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line); }
.cl-pushhere b { display: block; padding-top: 1px; font-size: 15px; font-weight: 650; }
.cl-pushhere p { margin-top: 3px; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.cl-pushhere p[data-push-say^="denied"], .cl-pushhere p[data-push-say="error"] { color: var(--ink-2); }
.cl-pushhere .cl-switch { margin-top: -2px; }
.cl-pushhere .cl-switch span { min-width: 26px; color: var(--ink-2); }
/* on the phone the words need the room more than the bell */
@media (max-width: 599.98px) {
  .cl-pushhere { grid-template-columns: minmax(0, 1fr) auto; }
  .cl-pushhere > .cl-dlg-i { display: none; }
}
.cl-pushcard .cl-pushhead { margin: 18px 0 12px; color: var(--ink-2); font-size: 13px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; }
.cl-pushdevs { display: grid; margin: 0; padding: 0; list-style: none; }
.cl-pushdevs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.cl-pushdevs li:first-child { padding-top: 0; border-top: 0; }
.cl-pushdev-t { display: grid; gap: 3px; min-width: 0; }
.cl-pushdev-t b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; font-weight: 600; }
.cl-pushdev-t b .cl-pill { padding: 2px 8px; font-size: 12px; font-weight: 650; }
.cl-pushdev-t small { color: var(--ink-3); font-size: 13px; }

/* ---------- verlauf (2026-10-29): every history list in the row of /bestellungen (owner: "der bestell verlauf usw ... sieht auf jeder
   seite unterschiedlich aus") - his coins, her earnings and statements, our purchases and payouts, the order lists (templates/history.html) */

/* the row follows the width of its list, not of the window: in a narrow card it is the two-line row of the phone */
.cl-hlist { container: cl-hlist / inline-size; }
@container cl-hlist (max-width: 640px) {
  .cl-hrow { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "pic main amt" "pic state amt"; gap: 6px 12px; padding: 12px 14px; }
  .cl-hrow-pic { width: 48px; height: 48px; align-self: start; }
  .cl-hrow-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: none; }
  .cl-hrow-amt { align-self: start; min-width: 0; }
  .cl-hrow-go { display: none; }
}
/* inside a card: the card is the frame */
.cl-hlist.flat { overflow: visible; border: 0; border-radius: 0; background: none; }
.cl-hlist.flat > .cl-hrow { padding-right: 0; padding-left: 0; }
.cl-hlist.flat > .cl-hrow:first-child { padding-top: 2px; }
.cl-hlist.flat > .cl-hrow:last-child { padding-bottom: 0; }
.cl-hlist.flat > a.cl-hrow:hover { background: none; }
.cl-hlist.flat > a.cl-hrow:hover .cl-hrow-t { color: var(--accent-text); }
.cl .cl-hlist.flat > a.cl-hrow:focus-visible { border-radius: calc(10px * var(--rk)); box-shadow: var(--ring); }

/* no picture: an icon (or her initials) on a soft tile */
.cl-hrow-ic { display: grid; place-items: center; color: var(--ink-2); font: 650 16px/1 var(--display); letter-spacing: .02em; }
.cl-hrow-ic .ic { width: 23px; height: 23px; }
.cl-hrow-ic.accent { background: var(--accent-soft); color: var(--accent-text); }
.cl-hrow-ic.ok { background: var(--ok-soft); color: var(--ok); }
.cl-hrow-ic.gold { background: var(--gold-soft); color: var(--gold); }
.cl-hrow-ic.bad { background: var(--bad-soft); color: var(--bad); }
@container cl-hlist (max-width: 640px) { .cl-hrow-ic .ic { width: 21px; height: 21px; } }

/* a small word after the title (Team), a second line that may wrap, money in and out */
.cl-hrow-t .cl-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: calc(6px * var(--rk)); background: var(--surface-2); color: var(--ink-3);
  font-size: 11.5px; font-weight: 650; letter-spacing: .02em; vertical-align: 2px; }
.cl-hrow-note { color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.cl-hrow-amt.plus b { color: var(--ok); }
.cl-pill.bad { background: var(--bad-soft); color: var(--bad); }
.cl-hrow-act { display: flex; }
.cl-hrow-act .cl-btn { white-space: nowrap; }

/* above the list: search, filter, how many - the bar of the data tables; below it "Mehr laden" */
.cl-hbar .cl-dt-count { display: inline-flex; align-items: baseline; gap: 12px; }
.cl-hbar .cl-dt-count a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.cl-hbar .cl-dt-count a:hover { text-decoration: underline; }
.cl-hsec .cl-loadmore { margin-top: 16px; }
.cl-hsec > .cl-empty.sm, .cl-hsec > .cl-hbar + .cl-empty { margin-top: 4px; }
.cl-card > .cl-hlist.flat, .cl-card > .cl-hbar + .cl-hlist.flat { margin-top: 2px; }
.cl-card .cl-sub + .cl-hlist.flat { margin-top: 14px; }
.cl-card .cl-hlist.flat + .cl-iban-note { margin-top: 16px; }
/* a list without a single link (her earnings, a card of bookings): no empty column for the arrow */
.cl-hlist:not(:has(> a.cl-hrow)) > .cl-hrow { grid-template-columns: 56px minmax(0, 1fr) auto auto; }
@container cl-hlist (max-width: 640px) { .cl-hlist:not(:has(> a.cl-hrow)) > .cl-hrow { grid-template-columns: 48px minmax(0, 1fr) auto; } }
/* the state on a statement's own page: the pill of her list and when */
.cl-stmt-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 8px; color: var(--ink-2); font-size: 14px; }
/* our payouts head on the phone: the two buttons one under the other instead of one of them wrapping */
@media (max-width: 599.98px) {
  .cl-page-h > .cl-actions.cl-hacts { flex-direction: column; align-items: stretch; width: 100%; }
  .cl-page-h > .cl-actions.cl-hacts > form { flex: none; }
  .cl-page-h > .cl-actions.cl-hacts .cl-btn { flex: none; width: 100%; }
}
.cl-stmt-total b { white-space: nowrap; }

/* ---------- startklar (2026-10-29): what is still missing before the start (/admin/startklar, the overview's line), the admin's
   own sign-in with the code from an authenticator app (/admin/sicherheit, the code step of /login) */
.cl-sk code, .cl-sec-warn code, .cl-sec-lost code { padding: 1px 6px; border-radius: calc(6px * var(--rk)); background: var(--surface-2); color: var(--ink);
  font: 500 .9em/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.cl-sk-grid { display: grid; gap: 20px; align-items: start; }
.cl-sk-side { display: grid; gap: 14px; min-width: 0; }
.cl-sk-groups { display: grid; gap: 16px; min-width: 0; }
.cl-sk-groups > .cl-card { margin: 0; scroll-margin-top: 20px; }
@media (min-width: 1100px) {
  .cl-sk-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
  .cl-sk-side { position: sticky; top: 24px; grid-column: 2; grid-row: 1; }
  .cl-sk-groups { grid-column: 1; grid-row: 1; }
}

/* the summary: the number, the bar, the counts, where the keys live */
.cl-sk-sum { display: grid; gap: 10px; }
.cl-sk-sum-n { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.cl-sk-sum-n b { font: 700 40px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cl-sk-sum-n span { color: var(--ink-2); font-size: 15px; font-weight: 600; }
.cl-sk-sum.is-ready .cl-sk-sum-n { align-items: center; color: var(--ok); }
.cl-sk-sum.is-ready .cl-sk-sum-n span:last-child { color: var(--ok); font: 700 22px/1.2 var(--display); }
.cl-sk-sum .cl-meter { margin: 2px 0 0; }
.cl-sk-sum-sub { color: var(--ink-3); font-size: 13.5px; }
.cl-sk-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-sk-where { padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; line-height: 1.6; }

/* the groups beside it (desktop): a quiet jump list with what is open */
.cl-sk-nav { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cl-sk-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: calc(9px * var(--rk)); color: var(--ink-2); font-size: 14px; font-weight: 550; text-decoration: none; }
.cl-sk-nav a:hover { background: var(--surface-2); color: var(--ink); }
.cl-sk-nav a span { flex: 1; min-width: 0; }
.cl-sk-nav small { color: var(--bad); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.cl-sk-nav .ic { width: 17px; height: 17px; color: var(--ok); stroke-width: 2.4; }
@media (max-width: 1099.98px) { .cl-sk-nav { display: none; } }

/* a group: its points as calm rows with a status mark, the pill, why, what we found, what to do */
.cl-sk-gstate { flex: none; color: var(--ok); font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.cl-sk-gstate.is-open { color: var(--ink-3); }
.cl-sk-list { display: grid; margin: 0; padding: 0; list-style: none; }
.cl-sk-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.cl-sk-item:first-child { padding-top: 2px; border-top: 0; }
.cl-sk-item:last-child { padding-bottom: 0; }
.cl-sk-i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); }
.cl-sk-i .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.cl-sk-item.is-done .cl-sk-i, .cl-sk-sum .cl-sk-i { background: var(--ok-soft); color: var(--ok); }
.cl-sk-item.is-missing .cl-sk-i { background: var(--bad-soft); color: var(--bad); }
.cl-sk-item.is-test .cl-sk-i { background: var(--warn-soft); color: var(--warn); }
.cl-sk-main { display: grid; gap: 6px; min-width: 0; }
.cl-sk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.cl-sk-head b { padding-top: 4px; font-size: 15.5px; font-weight: 650; line-height: 1.4; }
.cl-sk-head .cl-sk-pill { margin-top: 3px; }
.cl-sk-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: calc(8px * var(--rk)); background: var(--surface-2); color: var(--ink-2);
  font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.cl-sk-pill.is-done { background: var(--ok-soft); color: var(--ok); }
.cl-sk-pill.is-missing { background: var(--bad-soft); color: var(--bad); }
.cl-sk-pill.is-test { background: var(--warn-soft); color: var(--warn); }
.cl-sk-why { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.cl-sk-facts { display: grid; gap: 3px; margin: 2px 0 0; padding: 0; list-style: none; color: var(--ink); font-size: 14px; line-height: 1.5; }
.cl-sk-facts li { position: relative; padding-left: 14px; overflow-wrap: anywhere; }
.cl-sk-facts li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
.cl-sk-item.is-missing .cl-sk-facts li::before { background: var(--bad); }
.cl-sk-item.is-test .cl-sk-facts li::before { background: var(--warn); }
.cl-sk-item.is-done .cl-sk-facts { color: var(--ink-2); }
.cl-sk-todo { display: grid; gap: 3px; margin-top: 4px; padding: 10px 12px; border-radius: calc(10px * var(--rk)); background: var(--ground); color: var(--ink-2);
  font-size: 13.5px; line-height: 1.6; }
.cl-sk-todo b { color: var(--ink); font-size: 12.5px; font-weight: 650; }
.cl-sk-todo code { background: var(--surface-3); }
.cl-sk-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cl-sk-item.is-done .cl-sk-head b { color: var(--ink-2); }
/* the phone: the mark beside the title only, the rest of the point uses the whole width */
@media (max-width: 599.98px) {
  .cl-sk-item { column-gap: 12px; row-gap: 8px; }
  .cl-sk-main { display: contents; }
  .cl-sk-main > * { grid-column: 1 / -1; }
  .cl-sk-main > .cl-sk-head { grid-column: 2; }
  .cl-sk-item.is-done .cl-sk-why { display: none; }
}

/* the legal passages and the confirmation */
.cl-sk-passages { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: sk; }
.cl-sk-passages li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "n where go" "n text go"; column-gap: 10px; row-gap: 2px;
  padding: 12px 0; border-top: 1px solid var(--line); counter-increment: sk; }
.cl-sk-passages li:first-child { padding-top: 0; border-top: 0; }
.cl-sk-passages li::before { content: counter(sk); grid-area: n; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2);
  color: var(--ink-2); font-size: 12px; font-weight: 700; }
.cl-sk-passages small { grid-area: where; color: var(--ink-3); font-size: 12.5px; font-weight: 650; }
.cl-sk-passages span { grid-area: text; color: var(--ink); font-size: 14px; line-height: 1.5; }
.cl-sk-passages a { grid-area: go; align-self: center; display: inline-flex; align-items: center; gap: 5px; color: var(--accent-text); font-size: 13.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap; }
.cl-sk-passages a:hover { text-decoration: underline; }
.cl-sk-passages a .ic { width: 15px; height: 15px; }
@media (max-width: 599.98px) {
  .cl-sk-passages li { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "n where" "n text" "n go"; }
  .cl-sk-passages a { justify-self: start; margin-top: 4px; }
}
.cl-sk-reviewed { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: calc(12px * var(--rk)); background: var(--ok-soft); color: var(--ok);
  font-size: 14px; font-weight: 550; line-height: 1.5; }
.cl-sk-reviewed .ic { width: 18px; height: 18px; margin-top: 1px; stroke-width: 2.4; }
/* the list scrolls, the two fields and the buttons stay (the form is display: contents like every form of a dialog) */
.cl-sk-fields { flex: none; display: grid; gap: 14px; padding: 16px 24px 2px; border-top: 1px solid var(--line); }
@media (min-width: 600px) { .cl-sk-fields { grid-template-columns: minmax(0, 1fr) 200px; } }
@media (max-width: 599.98px) { .cl-sk-fields { padding: 14px 20px 2px; } }
.cl-sk-dlg[data-scroll]:has(.cl-sk-fields) .cl-dlg-f { border-top: 0; padding-top: 18px; }
.cl-sk-dlg .cl-dlg-f .cl-inline { margin-right: auto; }

/* the overview's line: as long as anything is open, gone once everything is done */
.cl-sk-banner { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 20px; align-items: center; gap: 4px 16px; margin: 0 0 20px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, background-color .15s; }
.cl-sk-banner:hover { border-color: var(--line-2); background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.cl-sk-banner-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: calc(12px * var(--rk)); background: var(--accent-soft); color: var(--accent-text); }
.cl-sk-banner-i .ic { width: 21px; height: 21px; }
.cl-sk-banner-t { display: grid; gap: 2px; min-width: 0; }
.cl-sk-banner-t b { font-size: 15.5px; font-weight: 650; }
.cl-sk-banner-t small { color: var(--ink-3); font-size: 13.5px; line-height: 1.45; }
.cl-sk-banner-m { display: grid; justify-items: end; gap: 6px; width: 160px; }
.cl-sk-banner-m .cl-meter { width: 100%; height: 6px; margin: 0; }
.cl-sk-banner-m small { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cl-sk-banner-go { width: 20px; height: 20px; color: var(--ink-3); }
.cl-sk-banner:hover .cl-sk-banner-go { color: var(--accent-text); }
@media (max-width: 699.98px) {
  .cl-sk-banner { grid-template-columns: 40px minmax(0, 1fr) 20px; padding: 12px 14px; gap: 10px 12px; }
  .cl-sk-banner-m { grid-column: 2 / 4; grid-row: 2; justify-items: start; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .cl-sk-banner-go { grid-column: 3; grid-row: 1; }
}

/* the admin's sign-in: setting up the authenticator app in three steps, the code at sign-in */
.cl-sec-steps { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: sec; }
.cl-sec-steps > li { position: relative; display: grid; gap: 4px; padding: 16px 0 16px 40px; border-top: 1px solid var(--line); counter-increment: sec; }
.cl-sec-steps > li:first-child { padding-top: 4px; border-top: 0; }
.cl-sec-steps > li::before { content: counter(sec); position: absolute; left: 0; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 700; }
.cl-sec-steps > li:first-child::before { top: 2px; }
.cl-sec-steps b { font-size: 15px; font-weight: 650; }
.cl-sec-steps > li > span { color: var(--ink-2); font-size: 14px; }
.cl-sec-qr { width: 200px; max-width: 100%; margin-top: 8px; padding: 6px; border: 1px solid var(--line); border-radius: calc(14px * var(--rk)); background: #fff; }
.cl-sec-qr svg { display: block; width: 100%; height: auto; }
.cl-sec-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.cl-sec-key code { padding: 8px 12px; border-radius: calc(10px * var(--rk)); background: var(--surface-2); color: var(--ink); font: 600 15px/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .06em; word-break: break-all; }
.cl-sec-code { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.cl-sec-code .cl-input { flex: 0 1 180px; width: 180px; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.cl-sec-cancel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.cl-sec-cancel .cl-muted { font-size: 13px; }
.cl-sec-lost { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; }
.cl-sec-warn { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; padding: 12px 14px; border-radius: calc(12px * var(--rk)); background: var(--warn-soft);
  color: var(--ink); font-size: 14px; line-height: 1.55; }
.cl-sec-warn .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--warn); }
.cl-login-code { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: .2em; text-align: center; }
.cl a.cl-me-name { margin: -4px -6px; padding: 4px 6px; border-radius: calc(9px * var(--rk)); text-decoration: none; transition: background-color .15s; }
.cl a.cl-me-name:hover, .cl a.cl-me-name[aria-current="page"] { background: var(--surface-2); }
.cl a.cl-me-name[aria-current="page"] b { color: var(--accent-text); }