/* =====================================================================
   SKIBit Next · Design-System
   1. Tokens   2. Grundlagen   3. Layout   4. Komponenten   5. Seiten   6. Handy
   Regel: keine !important, Farben/Abstände nur über Tokens.
   ===================================================================== */

/* 1. Tokens ---------------------------------------------------------- */
:root {
  --c-ink: #151b26;
  --c-dark: #151b26;
  --c-ink-2: #344054;
  --c-muted: #667085;
  --c-line: rgba(21, 27, 38, .12);
  --c-bg: #f5f7f9;
  --c-surface: #ffffff;
  --c-soft: #f6f7f9;
  --c-accent: #ffc400;
  --c-accent-ink: #151b26;
  --c-accent-2: #ffd84d;
  --c-ok: #067647;
  --c-ok-bg: #ecfdf3;
  --c-warn: #b54708;
  --c-warn-bg: #fffaeb;
  --c-bad: #b42318;
  --c-bad-bg: #fef3f2;
  --c-info: #175cd3;
  --c-info-bg: #eff8ff;
  --radius: 14px;
  --radius-s: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
  --gap: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --topbar-h: 68px;
  --side-w: 248px;
}

/* 2. Grundlagen ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 var(--font); color: var(--c-ink); background: var(--c-bg); min-height: 100vh; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--c-info); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h2 { font-size: 1.35rem; }
.h3, h3 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: 18px 0; }
code, pre { font-family: var(--mono); font-size: .86em; }
small, .small { font-size: .86rem; }
.muted { color: var(--c-muted); }
.center { text-align: center; }
.block { display: block; }
.strong { font-weight: 700; }
.break { word-break: break-word; overflow-wrap: anywhere; }
.grow { flex: 1 1 auto; min-width: 0; }
.ic { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--c-accent); color: var(--c-ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 3. Layout ---------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--c-dark, #151b26); color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.topbar-in { max-width: 1240px; margin: 0 auto; padding: 0 16px; height: var(--topbar-h); display: flex; align-items: center; gap: 14px; }
.page-admin .topbar-in { max-width: none; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 52px; width: auto; display: block; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.topnav a, .navbtn { display: inline-flex; align-items: center; gap: 7px; color: #e4e7ec; padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: .95rem; border: 0; background: none; cursor: pointer; font-family: inherit; }
.topnav a:hover, .navbtn:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.topnav a.active { color: var(--c-accent); }
.topnav .btn { color: var(--c-accent-ink); }
.inline-form { display: inline; margin: 0; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; color: #fff; padding: 8px; border-radius: 10px; cursor: pointer; }
.admin-badge { background: var(--c-accent); color: var(--c-ink); font-weight: 800; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }

.main { max-width: 1240px; margin: 0 auto; padding: 24px 16px 48px; }
.footer { border-top: 1px solid var(--c-line); background: var(--c-surface); }
.footer-in { max-width: 1240px; margin: 0 auto; padding: 18px 16px; display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; color: var(--c-muted); font-size: .9rem; }
.langs { display: flex; gap: 10px; }
.langs a { color: var(--c-muted); }
.langs a.active { color: var(--c-ink); font-weight: 700; }

/* Admin-Rahmen */
.admin-shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - var(--topbar-h)); }
.admin-side { background: var(--c-surface); border-right: 1px solid var(--c-line); padding: 14px 10px 40px; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; }
.side-group { margin-bottom: 6px; }
.side-group[open] { margin-bottom: 12px; }
.side-head { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); padding: 7px 10px; display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; border-radius: 8px; user-select: none; }
.side-head::-webkit-details-marker { display: none; }
.side-head:hover { background: var(--c-soft); color: var(--c-ink); }
.side-head > span:first-child { flex: 1; min-width: 0; }
.side-n { font-size: .68rem; font-weight: 700; background: var(--c-soft); color: var(--c-muted); border-radius: 999px; padding: 1px 7px; letter-spacing: 0; }
.side-chev { display: inline-flex; transition: transform .15s; }
.side-chev svg { width: 14px; height: 14px; flex: none; overflow: visible; }
.side-chev { width: 16px; height: 16px; align-items: center; justify-content: center; }
.side-group[open] > .side-head .side-chev { transform: rotate(180deg); }
.side-group[open] > .side-head .side-n { display: none; }
.side-tools { display: flex; gap: 6px; margin: 0 2px 10px; position: sticky; top: -14px; background: var(--c-surface); padding: 4px 0 6px; z-index: 2; }
.side-tools[hidden], .side-link[hidden], .side-group[hidden], .side-empty[hidden] { display: none !important; }
.side-filter { flex: 1; min-width: 0; min-height: 34px; padding: 5px 10px; border: 1px solid var(--c-line); border-radius: 9px; font-size: .88rem; }
.side-tbtn { width: 34px; height: 34px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-surface); cursor: pointer; font-size: 1rem; line-height: 1; color: var(--c-muted); }
.side-tbtn:hover { color: var(--c-ink); border-color: var(--c-ink); }
.side-empty { padding: 6px 10px; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--c-ink-2); font-weight: 600; font-size: .94rem; }
.side-link:hover { background: var(--c-soft); text-decoration: none; }
.side-link.active { background: var(--c-ink); color: #fff; }
.side-link.active .ic { color: var(--c-accent); }
.side-scrim { display: none; }
.admin-main { padding: 22px clamp(16px, 2.5vw, 32px) 48px; min-width: 0; }

/* 4. Komponenten ----------------------------------------------------- */
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: var(--gap); min-width: 0; }
.card.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.card.narrow-l { max-width: 720px; }
.cards { align-items: start; }
.cards > .card, .cards > .stack > .card { margin-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid2.cards { margin-bottom: var(--gap); }
.span2 { grid-column: 1 / -1; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.page-head p { margin: 4px 0 0; }
.back { display: inline-block; font-size: .9rem; margin-bottom: 6px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 16px; border-radius: var(--radius-s); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink); font: 600 .95rem/1.2 var(--font); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .05s; }
.btn:hover { background: var(--c-soft); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.btn-accent:hover { background: var(--c-accent-2); }
.btn-danger { background: var(--c-bad); border-color: var(--c-bad); color: #fff; }
.btn-danger:hover { background: #912018; }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: .88rem; }
.btn-lg { min-height: 50px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn[disabled], fieldset[disabled] .btn { opacity: .55; cursor: not-allowed; }

.form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.form > *, fieldset > * { min-width: 0; max-width: 100%; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
fieldset > legend { font-weight: 700; font-size: .9rem; margin-bottom: 6px; padding: 0; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font-weight: 600; font-size: .9rem; color: var(--c-ink-2); }
.field small { color: var(--c-muted); }
input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #d0d5dd; border-radius: var(--radius-s); background: #fff; color: var(--c-ink); font: 1rem/1.3 var(--font); }
input:focus, select:focus, textarea:focus { border-color: var(--c-ink); outline: 3px solid rgba(255, 196, 0, .45); outline-offset: 0; }
input[type=color] { width: 64px; height: 42px; padding: 3px; border: 1px solid #d0d5dd; border-radius: var(--radius-s); background: #fff; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--c-ink); }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { margin-top: 3px; flex: none; }
.inline-row { flex-direction: row; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filters .field { min-width: 160px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 0; background: linear-gradient(to top, var(--c-surface) 70%, transparent); padding: 12px 0 2px; }

.flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-s); border: 1px solid; margin-bottom: 14px; }
.flash ul { margin: 0; padding-left: 18px; }
.flash-success { background: var(--c-ok-bg); border-color: #abefc6; color: #05603a; }
.flash-error { background: var(--c-bad-bg); border-color: #fecdca; color: #912018; }
.flash-warning { background: var(--c-warn-bg); border-color: #fedf89; color: #93370d; }
.flash-info { background: var(--c-info-bg); border-color: #b2ddff; color: #1849a9; }
.flash-stack { display: flex; flex-direction: column; }

.checklist { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius-s); background: var(--c-soft); }
.checklist li span { display: flex; flex-direction: column; }
.checklist li small { color: var(--c-muted); }
.checklist .ok .ic { color: var(--c-ok); }
.checklist .warn .ic { color: var(--c-warn); }
.checklist .bad { background: var(--c-bad-bg); }
.checklist .bad .ic { color: var(--c-bad); }
.checklist.compact li { background: none; padding: 3px 0; }

.table-card { padding: 0; overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.table th, .table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.table thead th { background: var(--c-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.table tbody tr:hover { background: #fafbfc; }
.kvtable th { width: 34%; font-weight: 600; color: var(--c-ink-2); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; }
.kv dt { color: var(--c-muted); }
.kv dd { margin: 0; }
pre.json { white-space: pre-wrap; background: var(--c-soft); padding: 8px; border-radius: 8px; max-height: 240px; overflow: auto; margin: 6px 0 0; }

.role-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: color-mix(in srgb, var(--c) 85%, #000); border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); }
.status { font-size: .8rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--c-soft); }
.status-active { background: var(--c-ok-bg); color: var(--c-ok); }
.status-disabled { background: var(--c-bad-bg); color: var(--c-bad); }
.state.ok { color: var(--c-ok); }
.state.warn { color: var(--c-warn); }
.tag { font-style: normal; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--c-soft); color: var(--c-muted); white-space: nowrap; }
.tag.own { background: var(--c-info-bg); color: var(--c-info); }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }
.dot.big { width: 18px; height: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { display: inline-flex; cursor: pointer; position: relative; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { border: 1px solid var(--c-line); border-radius: 999px; padding: 4px 11px; font-size: .84rem; background: #fff; }
.chip-check input:checked + span { background: var(--c, var(--c-ink)); border-color: var(--c, var(--c-ink)); color: #fff; }
.chip-check input:focus-visible + span { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.chip-check input:disabled + span { opacity: .6; cursor: not-allowed; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.stat { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.stat b { font-size: 1.9rem; line-height: 1.1; }
.stat span { color: var(--c-muted); font-size: .9rem; }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 40px; gap: 10px; align-items: center; font-size: .92rem; }
.bar { height: 10px; background: var(--c-soft); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--c); border-radius: 999px; }
.bar-row b { text-align: right; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--c-line); }
.list li:last-child { border-bottom: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--c-line); border-radius: var(--radius-s); color: var(--c-ink); background: var(--c-soft); }
.tile:hover { border-color: var(--c-ink); text-decoration: none; }
.tile span { font-weight: 700; }
.tile small { color: var(--c-muted); }
.pager { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.pager a, .pager span { min-width: 38px; text-align: center; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); }
.pager a.active { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.danger-zone { border-color: #fecdca; }
details > summary { cursor: pointer; }

/* 5. Seiten ---------------------------------------------------------- */
.page-bare { background: radial-gradient(ellipse at top, #fff7d6 0%, var(--c-bg) 55%); }
.bare-main { max-width: 760px; margin: 0 auto; padding: 28px 16px 60px; }
.bare-brand { text-align: center; margin-bottom: 16px; }
.bare-brand img { background: var(--c-ink); border-radius: 18px; padding: 10px 18px; }
.hero { background: var(--c-dark, #151b26); }
.page-public { background: radial-gradient(ellipse at 30% -10%, #fff3c4 0%, var(--c-bg) 50%); }
.hero { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--c-dark, #151b26) 85%, #fff 8%), var(--c-dark, #151b26)); color: #fff; border-radius: 22px; padding: clamp(18px, 4vw, 40px); margin-bottom: var(--gap); box-shadow: var(--shadow); }
.hero:not(:has(> .hero-logo)) { grid-template-columns: minmax(0, 1fr); }
.hero-logo { width: 100%; max-width: 340px; filter: drop-shadow(0 10px 30px rgba(255, 196, 0, .25)); }
.hero h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); margin-bottom: 10px; }
.hero p { color: #d0d5dd; font-size: 1.1rem; margin: 0; }
.build-note h2 { display: flex; gap: 8px; align-items: center; }
.error-page { text-align: center; }
.error-code { font-size: 4rem; font-weight: 900; color: var(--c-accent); text-shadow: 0 2px 0 var(--c-ink); line-height: 1; margin-bottom: 8px; }
.install h2 { margin-top: 18px; }

/* Rollen & Berechtigungen */
.roles-layout { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.roles-list nav { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.role-item { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--c-line); border-radius: var(--radius-s); color: var(--c-ink); }
.role-item span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.role-item small { color: var(--c-muted); }
.role-item:hover { text-decoration: none; border-color: var(--c-ink); }
.role-item.active { border-color: var(--c-accent); background: #fffbeb; box-shadow: 0 0 0 2px rgba(255, 196, 0, .3); }
.new-role { margin-bottom: 12px; }
.new-role summary { list-style: none; }
.new-role summary::-webkit-details-marker { display: none; }
.new-role[open] summary { margin-bottom: 10px; }
.role-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.role-head h2 { margin: 0; }
.matrix-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius-s); }
.matrix { width: 100%; border-collapse: collapse; font-size: .92rem; }
.matrix th, .matrix td { padding: 8px 10px; border-bottom: 1px solid var(--c-line); text-align: center; }
.matrix th[scope=row], .matrix thead th:first-child { text-align: left; font-weight: 600; }
.matrix thead th { background: var(--c-soft); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); position: sticky; top: 0; }
.matrix .mgroup th { background: #f2f4f7; text-align: left; font-weight: 800; }
.matrix td.extras { text-align: left; }
.matrix .extras .chip-check { margin: 2px 4px 2px 0; }
.matrix .na { color: #c0c5cf; }
.cb { display: inline-flex; padding: 4px; cursor: pointer; position: relative; }
.members { margin-top: 14px; }

/* 6. Handy & Tablet --------------------------------------------------- */
@media (max-width: 980px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-side { position: fixed; z-index: 50; top: var(--topbar-h); left: 0; bottom: 0; height: auto; width: min(86vw, 300px); transform: translateX(-105%); transition: transform .2s; box-shadow: 8px 0 30px rgba(0, 0, 0, .2); }
  .nav-toggle:checked ~ .admin-shell .admin-side { transform: none; }
  .nav-toggle:checked ~ .admin-shell .side-scrim { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(16, 24, 40, .35); z-index: 45; }
  .admin-burger { display: inline-flex; }
  .roles-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --topbar-h: 60px; }
  .brand img { height: 42px; }
  .page-public .nav-burger { display: inline-flex; margin-left: auto; }
  .page-public .topnav { position: absolute; top: var(--topbar-h); left: 0; right: 0; background: var(--c-ink); flex-direction: column; align-items: stretch; padding: 8px 12px 14px; display: none; border-top: 1px solid rgba(255, 255, 255, .08); }
  .page-public .nav-toggle:checked ~ .topnav { display: flex; }
  .page-public .topnav .btn { margin-top: 6px; }
  .topnav-admin span { display: none; }
  .topnav-admin a, .topnav-admin .navbtn { padding: 8px; }
  .admin-badge { display: none; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero-logo { max-width: 220px; margin: 0 auto; }
  .card { padding: 16px; }
  .table.responsive thead { display: none; }
  .table.responsive tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--c-line); }
  .table.responsive td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; text-align: right; }
  .table.responsive td::before { content: attr(data-label); font-weight: 600; color: var(--c-muted); text-align: left; flex: none; }
  .table.responsive td[colspan] { justify-content: center; }
  .table.responsive td[colspan]::before { content: none; }
  .bar-row { grid-template-columns: 90px 1fr 32px; }
  .inline-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none; animation: none; }
}

/* Anleitungen (öffentlich) */
.section { margin: 26px 0; }
.section > h2 { margin-bottom: 12px; }
.crumbs { font-size: .9rem; color: var(--c-muted); margin-bottom: 10px; overflow-wrap: anywhere; }
.hero-search { display: flex; gap: 8px; margin-top: 18px; }
.hero-search input { flex: 1; min-width: 0; font-size: 1.05rem; padding: 12px 14px; border-radius: 12px; border: 0; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; }
.hero-stats > * { display: flex; flex-direction: column; color: #fff; }
.hero-stats b { font-size: 1.35rem; color: var(--c-accent); }
.hero-stats span { color: #d0d5dd; font-size: .85rem; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cat { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-line); border-bottom: 4px solid var(--c, var(--c-accent)); color: var(--c-ink); box-shadow: var(--shadow); }
.cat:hover { text-decoration: none; transform: translateY(-2px); transition: transform .15s; }
.cat-icon { font-size: 1.8rem; line-height: 1; }
.cat-label { font-weight: 800; }
.cat small { color: var(--c-muted); }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.gcard { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink); box-shadow: var(--shadow); }
.gcard:hover { text-decoration: none; border-color: var(--c-ink); }
.gcard-icon { font-size: 1.7rem; line-height: 1; flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--c-soft); border-radius: 12px; }
.gcard-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gcard-title { font-weight: 800; line-height: 1.3; }
.gcard-desc { color: var(--c-muted); font-size: .9rem; line-height: 1.4; }
.gcard-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.gcard-meta .ic { width: 14px; height: 14px; vertical-align: -2px; }
.lvl { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; }
.lvl::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.search-big { display: flex; gap: 8px; }
.search-big input { flex: 1; min-width: 0; }
.guide-intro h1 { margin: 0; }
.guide-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.guide-icon { font-size: 2.4rem; width: 64px; height: 64px; display: grid; place-items: center; background: var(--c-soft); border-radius: 16px; flex: none; }
.lead { font-size: 1.08rem; }
.rich p { margin: 0 0 .7em; }
.rich ol, .rich ul { margin: 0 0 .8em; padding-left: 1.4em; }
.rich li { margin: .25em 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.facts > div { background: var(--c-soft); border-radius: var(--radius-s); padding: 10px 12px; }
.facts dt { font-size: .78rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.facts dd { margin: 2px 0 0; }
.step-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.step-guide { font-weight: 700; color: var(--c-ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-nr { font-size: .85rem; color: var(--c-muted); }
.step { max-width: 820px; margin: 0 auto; border-top: 6px solid #2563eb; }
.step h1 { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); margin: 6px 0 10px; }
.step-solution { border-top-color: #f5b700; }
.step-stop { border-top-color: #d92d20; background: #fffbfa; }
.step-stop.emergency { border-top-color: #7a271a; background: #fef3f2; }
.step-success { border-top-color: #12b76a; text-align: center; }
.step-kind { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.answers { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.answers.two { display: grid; grid-template-columns: 1fr 1fr; }
.answer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 14px 16px; border: 2px solid var(--c-line); border-radius: 14px; background: #fff; color: var(--c-ink); font-weight: 700; font-size: 1.05rem; }
.answer span { flex: 1; display: inline-flex; gap: 8px; align-items: center; }
.answer small { flex-basis: 100%; order: 3; font-weight: 400; color: var(--c-muted); font-size: .88rem; }
.answer:hover { text-decoration: none; border-color: var(--c-ink); }
.answer.primary { border-color: var(--c-accent); background: #fffbeb; }
.answer.yes { border-color: #12b76a; background: var(--c-ok-bg); }
.answer.no { border-color: #fda29b; background: var(--c-bad-bg); }
.tip { background: var(--c-info-bg); border-left: 4px solid var(--c-info); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.tip b { display: block; margin-bottom: 4px; color: var(--c-info); }
.step-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 12px 0; }
.step-media figure { margin: 0; }
.step-media img, .step-media video { width: 100%; border-radius: 12px; display: block; background: #000; max-height: 420px; object-fit: contain; }
.step-media figcaption { font-size: .85rem; color: var(--c-muted); margin-top: 4px; }
/* v1.11.0: Galerie, Markierungen, Vergrößern */
.step-media.is-single { grid-template-columns: 1fr; }
.step-media.is-single img { max-height: 520px; }
.mk-wrap { position: relative; display: block; width: 100%; max-height: 420px; border-radius: 12px; overflow: hidden; background: #000; cursor: zoom-in; }
.step-media.is-single .mk-wrap { max-height: 520px; }
.mk-wrap img { height: 100%; border-radius: 0; }
.mk-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; font-family: system-ui, sans-serif; }
.mk-badge { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.mk-lb { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 12px 16px; }
.mk-lb-stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; }
.mk-lb-stage .mk-wrap { max-height: calc(100vh - 110px); max-width: 100%; width: auto; height: calc(100vh - 110px); cursor: default; background: transparent; }
.mk-lb-stage .mk-wrap img { max-height: none; width: 100%; height: 100%; background: transparent; }
.mk-lb-cap { color: #fff; margin: 8px 0 0; text-align: center; }
.mk-lb button { position: absolute; background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 999px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.mk-lb-close { top: 8px; right: 8px; }
.mk-lb-prev { left: 8px; top: 50%; }
.mk-lb-next { right: 8px; top: 50%; }
.emg-box { background: #fff; border: 2px solid #d92d20; border-radius: 14px; padding: 14px; margin: 14px 0; }
.saving-box, .saving-total { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--c-ok-bg); border: 2px solid #abefc6; border-radius: 16px; padding: 18px; margin: 16px auto; max-width: 420px; }
.saving-box b, .saving-total b { font-size: 2.2rem; color: var(--c-ok); line-height: 1.1; }
.saving-box small, .saving-total small { color: var(--c-muted); }
.num { text-align: right; }
/* Admin Anleitungen */
.gstatus { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--c-soft); color: var(--c-ink-2); }
.gstatus-ready { background: var(--c-ok-bg); color: var(--c-ok); }
.gstatus-planned { background: var(--c-info-bg); color: var(--c-info); }
.gstatus-archived { background: #f2f4f7; color: var(--c-muted); }
.gstatus-draft { background: var(--c-warn-bg); color: var(--c-warn); }
.row-actions { white-space: nowrap; text-align: right; }
.edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: var(--gap); align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.actions.wrap { flex-wrap: wrap; }
.actions.pad { padding: 12px 16px; }
.cat-table input:not([type=checkbox]):not([type=color]) { min-width: 0; width: 100%; }
.in-icon { width: 64px; text-align: center; }
.in-num { width: 90px; }
.import-table select { max-width: 260px; }
.state.bad { color: var(--c-bad); }
@media (max-width: 980px) { .edit-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .hero-search, .search-big { flex-direction: column; }
  .answers.two { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
  .hero-stats { justify-content: center; }
  .in-icon, .in-num, .import-table select { width: 100%; max-width: none; }
}
.page-head .actions, .card .actions.wrap { position: static; background: none; padding: 0; }

/* Werkzeuge */
.tool-tree details.tl-main { border-bottom: 1px solid var(--c-line); padding: 8px 0; }
.tool-tree details.tl-main:last-of-type { border-bottom: 0; }
.tool-tree summary { padding: 4px 0; }
.tl-sub { margin: 6px 0 6px 18px; }
.tl-subhead { display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--c-ink-2); }
.tl-list { list-style: none; margin: 4px 0 0; padding: 0; }
.tl-tool { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--c-line); flex-wrap: wrap; }
.tl-tool.off { opacity: .55; }
.tl-img, .tb-img { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--c-soft); display: grid; place-items: center; overflow: hidden; font-size: 1.4rem; }
.tl-img img, .tb-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.tb-img { width: 56px; height: 56px; }
.tl-subrow td:first-child input { margin-left: 14px; width: calc(100% - 14px); }
.tool-image-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.tool-thumb { border-radius: 12px; border: 1px solid var(--c-line); object-fit: contain; background: #fff; }
.toolrows { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.toolrow { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--c-line); border-radius: 12px; background: #fff; flex-wrap: wrap; }
.toolrow.missing { border-color: #fecdca; }
.toolrow.has { border-color: #abefc6; }
.toolrow .tl-img { width: 56px; height: 56px; }
.toolrow-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 180px; }
.toolrow-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolrow-act { display: flex; align-items: center; }
.toolrow-act input { max-width: 190px; }
.badge { font-size: .72rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.badge.req { background: var(--c-warn-bg); color: var(--c-warn); }
.badge.opt { background: var(--c-info-bg); color: var(--c-info); }
.toolpanel { border: 1px solid var(--c-line); border-radius: 14px; padding: 12px 14px; margin: 14px 0; background: var(--c-soft); }
.toolpanel-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.toolchip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); font-size: .85rem; }
.toolchip img { border-radius: 4px; object-fit: contain; }
.toolchip.has { border-color: #abefc6; color: var(--c-ok); }
.toolchip.missing { border-color: #fecdca; color: var(--c-bad); }
.steptools { background: #fffbeb; border-left: 4px solid var(--c-accent); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.access { margin-top: 10px; }
/* Werkzeugkiste */
.tb-items, .tb-catalog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.tb-item, .tb-pick { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--c-line); border-radius: 12px; background: #fff; }
.tb-pick { cursor: pointer; }
.tb-pick.has { opacity: .65; cursor: default; }
.tb-pick input:checked ~ .tb-body .strong { color: var(--c-ok); }
.tb-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tb-check input { width: 20px; height: 20px; }
.tb-bulk { display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 8px; z-index: 5; box-shadow: 0 -4px 20px rgba(16, 24, 40, .1); }
.tb-bulk-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tb-bulk-row input, .tb-bulk-row select { flex: 1; min-width: 160px; }
.tb-groups .list li { flex-wrap: wrap; }
/* SKIBs */
.skib-balance { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.skib-balance b { font-size: 3rem; line-height: 1; color: var(--c-ink); }
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 18px; }
.shop-item { display: flex; flex-direction: column; gap: 6px; }
.shop-name { font-weight: 800; }
.num.neg { color: var(--c-bad); }
.num.pos { color: var(--c-ok); }
.skib-chip { background: rgba(255, 196, 0, .15); border-radius: 999px; }
@media (max-width: 760px) {
  .toolrow-act { width: 100%; }
  .toolrow-act form, .toolrow-act input { width: 100%; max-width: none; }
  .tb-items, .tb-catalog { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) { .tb-bulk { position: static; box-shadow: var(--shadow); } }
@media (min-width: 761px) and (max-width: 1180px) {
  .page-public .topnav a:not(.btn):not(.skib-chip) span, .page-public .topnav .navbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Design: Startbereich, Laufband, Admin */
.hero-home { position: relative; overflow: hidden; isolation: isolate; }
.hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero-home > *:not(.hero-particles):not(.hero-tools) { position: relative; }
.ticker { display: flex; align-items: center; overflow: hidden; background: var(--tk-bg, #0a0f17); color: var(--tk-color, #ffc400); border: var(--tk-bw, 1px) solid var(--tk-border, #ffc400); border-radius: var(--tk-radius, 9px); box-shadow: 0 0 var(--tk-glow, 0px) var(--tk-border, #ffc400);
  font-weight: var(--tk-weight, 800); font-size: var(--tk-fs, 16px); font-family: var(--tk-font, var(--font)); letter-spacing: var(--tk-ls, normal); text-transform: var(--tk-tr, none); text-shadow: var(--tk-shadow, none); line-height: 1.25; }
.ticker-header { width: var(--tk-w, 100%); height: var(--tk-h, 100%); min-height: 28px; margin-inline: auto; }
.ticker-strip { margin: 8px 16px 0; padding: 8px 0; }
.ticker-track { display: flex; width: max-content; animation: tk-run var(--tk-speed, 24s) linear infinite; animation-direction: var(--tk-dir, normal); }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-run { display: flex; gap: 0; }
.ticker-item { white-space: nowrap; padding: 0 14px 0 28px; position: relative; }
.ticker-item::before { content: "◆"; position: absolute; left: 5px; opacity: .45; font-size: .7em; top: 50%; transform: translateY(-50%); }
.ticker a { color: inherit; text-decoration: none; }
.ticker a:hover, .ticker a:focus-visible { text-decoration: underline; }
@keyframes tk-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker:not(.tk-always) .ticker-track { animation: none; width: 100%; }
  .ticker:not(.tk-always) .ticker-run[aria-hidden="true"] { display: none; }
  .ticker:not(.tk-always):not(.tk-rot) .ticker-run { flex-wrap: wrap; row-gap: 4px; }
}
.ticker.tk-rot .ticker-run { width: 100%; }
.ticker.tk-rot .ticker-item { display: none; padding: 0 14px; overflow: hidden; text-overflow: ellipsis; text-align: center; width: 100%; }
.ticker.tk-rot .ticker-item::before { content: none; }
.ticker.tk-rot .ticker-item.on { display: block; }
.ticker-preview { margin-bottom: var(--gap); background: var(--c-dark); padding: 12px; border-radius: var(--radius-s); height: 70px; display: flex; }
.ticker-preview .ticker { flex: 1; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.color-field input[type=color] { width: 100%; height: 42px; }
.logo-preview { border-radius: 12px; padding: 14px; display: grid; place-items: center; min-height: 110px; margin-bottom: 10px; }
.logo-preview.dark { background: var(--c-dark); }
.logo-preview img { max-width: 100%; max-height: 160px; object-fit: contain; }
.file-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.file-list figure { margin: 0; width: 120px; border: 1px solid var(--c-line); border-radius: 10px; padding: 6px; background: var(--c-dark); position: relative; }
.file-list img { width: 100%; height: 70px; object-fit: contain; }
.file-list figcaption { color: #fff; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list button { position: absolute; top: 2px; right: 2px; background: #fff; }
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.bg-pick { display: flex; flex-direction: column; gap: 4px; border: 2px solid var(--c-line); border-radius: 12px; padding: 6px; cursor: pointer; background: #fff; position: relative; }
.bg-pick input { position: absolute; top: 10px; left: 10px; }
.bg-pick img, .bg-none { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; }
.bg-none { display: grid; place-items: center; background: var(--c-soft); color: var(--c-muted); }
.bg-pick span { font-size: .82rem; }
.bg-pick:has(input:checked) { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 35%, transparent); }
.theme-form { margin-top: 12px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88rem; }
.legal-links a { color: var(--c-muted); }
.legal-page { max-width: 860px; margin: 0 auto; }
.rich h2 { font-size: 1.25rem; margin: 1.2em 0 .4em; }
.rich h3 { font-size: 1.08rem; margin: 1em 0 .3em; }
.rich h4 { font-size: 1rem; margin: .9em 0 .3em; }

/* Mitglieder & Avatare */
.avatar { border-radius: 50%; object-fit: cover; background: var(--c-soft); flex: none; }
.avatar-nav { width: 28px; height: 28px; border: 2px solid rgba(255, 255, 255, .7); }
.nav-me { display: inline-flex; align-items: center; gap: 8px; }
.avatar-lg { width: 72px; height: 72px; }
.avatar-xl { width: 112px; height: 112px; box-shadow: 0 0 0 4px var(--c-accent); }
.avatar-current { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.avatar-current .avatar-xl { width: 128px; height: 128px; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.avatar-pick { all: unset; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; text-align: center; }
.avatar-pick img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--c-soft); }
.avatar-pick span { font-size: .74rem; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; }
.avatar-pick:hover, .avatar-pick:focus-visible { border-color: var(--c-line); background: var(--c-soft); }
.avatar-pick.active { border-color: var(--c-accent); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); font-size: .85rem; }
.chip.active { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.chip small { opacity: .7; }
.profile-head { display: flex; gap: 14px; align-items: center; }
.avatar-link { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .74rem; color: var(--c-muted); }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.member-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); color: var(--c-ink); text-align: center; box-shadow: var(--shadow); }
.member-card:hover { text-decoration: none; border-color: var(--c-ink); }
.member-card .avatar { width: 64px; height: 64px; }
.member-name { font-weight: 800; overflow-wrap: anywhere; }
.badge-role { font-size: .72rem; font-weight: 800; padding: 1px 9px; border-radius: 999px; background: var(--c-soft); color: var(--c-ink-2); }
.badge-team { background: #fff4cc; color: #7a5b00; }
.badge-mod { background: var(--c-info-bg); color: var(--c-info); }
.badge-expert { background: var(--c-ok-bg); color: var(--c-ok); }
.member-profile { max-width: 860px; margin: 0 auto; }
.member-head { display: flex; gap: 18px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.member-head h1 { margin: 0 0 4px; }
.user-avatar-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.av-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.av-admin { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 8px; border: 1px solid var(--c-line); border-radius: 12px; position: relative; }
.av-admin.off { opacity: .5; }
.av-admin img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.av-admin input:not([type=checkbox]) { width: 100%; font-size: .8rem; padding: 4px 6px; }
.av-admin > button { position: absolute; top: 4px; right: 4px; }

/* Nachrichten, Glocke, Meldungen, E-Mail (v0.5.0) ----------------------------- */
.table-wrap { max-width: 100%; overflow-x: auto; }
.nowrap { white-space: nowrap; }
.tag-ok { background: #ecfdf3; color: var(--c-ok); }
.tag-bad { background: #fef3f2; color: var(--c-bad); }
.tag-accent { background: color-mix(in srgb, var(--c-accent) 22%, #fff); color: #7a5a00; }
.stat-bad b { color: var(--c-bad); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2, .card-head h3 { margin: 0; }
.nav-icon { position: relative; }
.nav-count { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-bad); color: #fff; font-size: .7rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--c-dark, #151b26); }
.page-public .topnav a.nav-icon span.nav-count, .page-public .topnav a.nav-icon .nav-count { position: absolute; width: auto; height: 18px; overflow: visible; clip: auto; }
.nav-count[hidden] { display: none; }
.topnav a.nav-icon { padding: 8px 10px; }
.topbar-icons { display: none; align-items: center; gap: 2px; }
.topbar-icons .nav-icon { display: inline-flex; color: #e4e7ec; padding: 8px; border-radius: 10px; }
.topbar-icons .nav-icon.active { color: var(--c-accent); }
.nav-icons-desk { display: contents; }
@media (max-width: 760px) {
  .page-public .topbar-icons { display: inline-flex; margin-left: auto; }
  .page-public .topbar-icons + .nav-burger { margin-left: 0; }
  .page-public .nav-icons-desk { display: none; }
}
/* Benachrichtigungen */
.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notif { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0; }
.notif.unread { border-left: 4px solid var(--c-accent); }
.notif.read { opacity: .78; }
.notif-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--c-ink); }
.notif-main:hover { text-decoration: none; }
.notif-main:hover strong { text-decoration: underline; }
.notif.unread strong::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); margin-right: 7px; vertical-align: middle; }
.notif-warning.unread { border-left-color: var(--c-bad); }
.notif-hint { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--c-ink); margin-bottom: 10px; }
.notif-hint:hover { text-decoration: none; border-color: var(--c-accent); }
.notif-hint > span:nth-child(2) { flex: 1; }
.notif-prefs { width: 100%; border-collapse: collapse; }
.notif-prefs th, .notif-prefs td { padding: 10px 8px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: middle; }
.notif-prefs thead th { font-size: .78rem; text-transform: uppercase; color: var(--c-muted); letter-spacing: .04em; }
.notif-prefs td:nth-child(2) { width: 70px; }
.notif-prefs select { min-width: 0; max-width: 100%; }
/* Unterhaltungen */
.conv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.conv { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0; color: var(--c-ink); }
.conv:hover { text-decoration: none; border-color: var(--c-accent); }
.conv .avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; }
.conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-top { display: flex; justify-content: space-between; gap: 8px; }
.conv-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.conv.unread .conv-last { color: var(--c-ink); font-weight: 600; }
.badge-count { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--c-accent); color: var(--c-accent-ink, #151b26); font-weight: 800; font-size: .78rem; line-height: 22px; text-align: center; }
.chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: calc(100vh - var(--topbar-h) - 90px); min-height: 420px; max-height: 900px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--c-line); }
.chat-head .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-head h1 { margin: 0; font-size: 1.05rem; }
.chat-head .grow { flex: 1; min-width: 0; }
.menu-pop { position: relative; }
.menu-pop summary { list-style: none; cursor: pointer; font-size: 1.3rem; line-height: 1; }
.menu-pop summary::-webkit-details-marker { display: none; }
.menu-pop-body { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: grid; gap: 2px; min-width: 220px; }
.menu-pop-body .btn { width: 100%; justify-content: flex-start; }
.msgs { list-style: none; margin: 0; padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; background: var(--c-soft); overscroll-behavior: contain; }
.msg { display: flex; align-items: flex-end; gap: 6px; max-width: 82%; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg.theirs { align-self: flex-start; }
.bubble { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 16px 16px 16px 4px; padding: 8px 12px 6px; min-width: 64px; overflow-wrap: anywhere; }
.msg.mine .bubble { background: color-mix(in srgb, var(--c-accent) 26%, #fff); border-color: transparent; border-radius: 16px 16px 4px 16px; }
.msg.removed .bubble { background: transparent; border-style: dashed; color: var(--c-muted); }
.msg.emoji .bubble { background: transparent; border: 0; font-size: 2.3rem; line-height: 1.15; padding: 0 4px; }
.msg-text { white-space: normal; line-height: 1.45; }
.msg-meta { display: block; text-align: right; font-size: .7rem; color: var(--c-muted); margin-top: 2px; }
.msg-tick { letter-spacing: -2px; }
.msg-tick.read { color: var(--c-info); }
.msg-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 4px; margin-bottom: 4px; }
.msg-images img { width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: 10px; display: block; background: #e4e7ec; }
.msg-report { color: var(--c-muted); opacity: 0; padding: 4px; border-radius: 8px; }
.msg:hover .msg-report, .msg-report:focus { opacity: 1; }
@media (hover: none) { .msg-report { opacity: .55; } }
.msg-report .ic { width: 15px; height: 15px; }
.msg-day { align-self: center; font-size: .75rem; color: var(--c-muted); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 999px; padding: 2px 10px; margin: 6px 0; }
.msg-more, .msg-empty { align-self: center; margin: 6px 0; }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--c-line); flex-wrap: wrap; background: var(--c-surface); }
.composer textarea { flex: 1 1 200px; min-width: 0; resize: none; max-height: 200px; min-height: 44px; }
.composer-file { cursor: pointer; position: relative; }
.composer-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.composer-files { flex-basis: 100%; margin: 0; }
.chat-closed { padding: 14px; text-align: center; border-top: 1px solid var(--c-line); margin: 0; }
@media (max-width: 760px) {
  .chat { height: calc(100vh - var(--topbar-h) - 40px); height: calc(100dvh - var(--topbar-h) - 40px); border-radius: 0; margin: -8px -16px 0; min-height: 320px; }
  .msg { max-width: 92%; }
  .hide-sm { display: none; }
}
/* Meldungen */
.quote { margin: 10px 0; padding: 10px 14px; border-left: 4px solid var(--c-line); background: var(--c-soft); border-radius: 0 10px 10px 0; overflow-wrap: anywhere; }
.report.open { border-left: 4px solid var(--c-bad); }
.report-list { margin: 8px 0; padding-left: 18px; display: grid; gap: 6px; }
.report-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; border-top: 1px solid var(--c-line); padding-top: 12px; }
.report-hide { flex: 1 1 280px; display: grid; gap: 8px; }
.report-actions .msg-images, .quote .msg-images { max-width: 420px; }
code.break { display: block; padding: 8px 10px; background: var(--c-soft); border-radius: 8px; font-size: .85rem; }
@media (max-width: 760px) {
  .page-admin .brand img { width: 96px !important; height: auto; }
  .page-admin .topbar-in { gap: 6px; padding: 0 10px; }
  .topnav-admin { gap: 0; }
  .topnav-admin a.nav-icon { padding: 8px 6px; }
}
.m-only { display: none; }
@media (max-width: 560px) {
  .m-only { display: inline; }
  .notif-prefs thead { display: none; }
  .notif-prefs tr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 16px; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
  .notif-prefs th[scope=row] { grid-column: 1 / -1; border: 0; padding: 0; }
  .notif-prefs td { border: 0; padding: 0; width: auto !important; display: flex; align-items: center; gap: 6px; }
  .notif-prefs select { flex: 1; }
}
.tpl-grid { align-items: start; }
.mail-preview { width: 100%; height: 560px; border: 1px solid var(--c-line); border-radius: 10px; background: #eef1f6; }
/* Konto & Sicherheit (v0.6.0) */
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.device-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.device { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 12px; flex-wrap: wrap; }
.device.current { border-color: var(--c-ok); background: #f6fef9; }
.device-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.verify-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.verify-bar > span { flex: 1; min-width: 200px; }
/* Zwei-Faktor & Passkeys (v0.7.0) */
.sec-status { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.sec-status.on { border-left: 4px solid var(--c-ok); }
.sec-status.off { border-left: 4px solid var(--c-accent); }
.qr-box { background: #fff; display: inline-block; padding: 10px; border-radius: 12px; border: 1px solid var(--c-line); margin: 10px 0; max-width: 100%; }
.qr-box svg { display: block; width: 220px; height: 220px; max-width: 100%; }
.setup-steps { padding-left: 20px; display: grid; gap: 14px; }
.secret { letter-spacing: .08em; font-size: 1rem; }
.codes { columns: 2; padding-left: 22px; font-size: 1.05rem; }
.codes code { letter-spacing: .06em; }
.codes-card { border: 2px dashed var(--c-accent); }
.or { display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-size: .85rem; margin: 14px 0 10px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--c-line); }
.input-sm { padding: 5px 8px; font-size: .85rem; max-width: 160px; }
.recovery { margin-top: 12px; }
@media (max-width: 560px) { .codes { columns: 1; } }
/* Community (v0.8.0) */
.community-nav { margin-bottom: 14px; }
.stats + .grid2 { margin-top: 4px; }
.qa-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.qa-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin: 0; }
.qa-item.solved { border-left: 4px solid var(--c-ok); }
.qa-item h2, .qa-item h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.qa-item p { margin: 2px 0; }
.qa-main { flex: 1; min-width: 0; }
.qa-stats { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 6px; border-radius: 10px; background: var(--c-soft); }
.qa-stats b { font-size: 1.3rem; line-height: 1.1; }
.qa-stats small, .vote small { font-size: .7rem; color: var(--c-muted); }
.qa-excerpt { color: var(--c-ink-2); overflow-wrap: anywhere; }
.qa-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.qa-head h1 { margin: 0; overflow-wrap: anywhere; }
.qa-body { overflow-wrap: anywhere; margin: 8px 0; }
.qa-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.qa-actions .count { font-weight: 800; margin-left: 2px; }
.qa-answer.accepted { border: 2px solid var(--c-ok); background: var(--c-ok-bg); }
.qa-answer.is-hidden { opacity: .65; border-style: dashed; }
.qa-solution { color: var(--c-ok); font-weight: 800; margin: 0 0 4px; }
.qa-edit { margin-top: 10px; }
.author { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.author .avatar { border-radius: 50%; flex: none; }
.vote-form { margin: 0; }
.vote { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); cursor: pointer; font: inherit; line-height: 1.1; }
.vote:hover { border-color: var(--c-ink); text-decoration: none; }
.vote b { font-size: 1.2rem; }
.vote.on { background: var(--c-accent); border-color: var(--c-accent); }
.vote.off { cursor: default; background: var(--c-soft); }
.sim-box ul { margin: 4px 0 8px; padding-left: 18px; }
.stars { color: #f5a300; letter-spacing: 1px; white-space: nowrap; }
.stars-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; border: 0; padding: 0; margin: 0; gap: 2px; }
.stars-input input { position: absolute; opacity: 0; pointer-events: none; }
.stars-input label { font-size: 2rem; line-height: 1; color: #d0d5dd; cursor: pointer; padding: 0 2px; }
.stars-input input:checked ~ label, .stars-input label:hover, .stars-input label:hover ~ label { color: #f5a300; }
.stars-input input:focus-visible + label { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 6px; }
.help-box { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.help-box h2 { margin: 0; }
.help-box p { margin: 2px 0 0; }
.gc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gc-rating { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gc-rating b { font-size: 1.8rem; }
.stories { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stories li { border-top: 1px solid var(--c-line); padding-top: 10px; overflow-wrap: anywhere; }
.stories p { margin: 0 0 4px; }
.rank { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.rank li span { display: block; }
.wish-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; align-items: end; border-top: 1px solid var(--c-line); padding-top: 12px; margin-top: 10px; }
.wish-form .field { margin: 0; min-width: 0; }
.wish-form .field.grow { grid-column: 1 / -1; }
.wish-form select, .wish-form input, .wish-form textarea { width: 100%; max-width: none; }
.wish-form .actions { grid-column: 1 / -1; padding: 0; }
.qa-question .msg-images, .qa-answer .msg-images { max-width: 520px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.rate-box .actions, .qa-edit .actions, .wish-form .actions { position: static; background: none; }
.warn-quote { border-left-color: var(--c-bad); background: var(--c-bad-bg); font-size: 1.05rem; }
@media (max-width: 560px) {
  .qa-item { gap: 10px; padding: 12px; }
  .qa-stats, .vote { min-width: 46px; }
}
/* angemeldet: mehr Menüpunkte → bei mittlerer Breite einfache Beschriftungen nur als Symbol */
@media (min-width: 1181px) and (max-width: 1500px) {
  .page-public .topnav-user .lbl-opt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page-public .topnav-user a, .page-public .topnav-user .navbtn { padding: 8px 10px; }
}
/* Phase 9: Experten, Assist, Aufgaben, Emoji, Sprachnachrichten (v0.9.0) */
.composer { position: relative; }
.emoji-bar { position: relative; margin-top: 4px; }
.emoji-pop { position: absolute; z-index: 60; bottom: calc(100% + 6px); left: 0; width: min(330px, calc(100vw - 32px)); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 0 10px 30px rgba(16, 24, 40, .18); padding: 6px; }
.emoji-bar .emoji-pop { top: calc(100% + 4px); bottom: auto; }
.composer .emoji-pop { left: 8px; }
.emoji-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--c-line); padding-bottom: 4px; margin-bottom: 4px; overflow-x: auto; }
.emoji-tabs button, .emoji-grid button { border: 0; background: none; font-size: 1.35rem; line-height: 1; padding: 5px; border-radius: 8px; cursor: pointer; }
.emoji-tabs button.on, .emoji-tabs button:hover, .emoji-grid button:hover, .emoji-grid button:focus-visible { background: var(--c-soft); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); max-height: 220px; overflow-y: auto; }
.composer-mic.rec-on { color: var(--c-bad); animation: recpulse 1s infinite; }
@keyframes recpulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .composer-mic.rec-on { animation: none; } }
.composer-rec { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.composer-rec audio, .msg-audio audio { max-width: 100%; height: 36px; }
.rec-time { color: var(--c-bad); font-weight: 700; font-variant-numeric: tabular-nums; }
.msg-audio { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; max-width: 100%; }
.msg-audio audio { width: 240px; }
.expert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-bottom: 16px; }
.expert-card { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.expert-card p { margin: 2px 0; }
.expert-card .btn-row { margin-top: auto; padding-top: 6px; }
.expert-head { display: flex; gap: 12px; align-items: center; }
.expert-head h1, .expert-head h2 { margin: 0; overflow-wrap: anywhere; }
.expert-head p { margin: 2px 0 0; }
.expert-head .avatar { border-radius: 50%; flex: none; }
.check-list { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--c-muted); }
.check-list li.ok { color: var(--c-ok); }
.trade-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 4px 14px; border: 1px solid var(--c-line); border-radius: 12px; padding: 10px 12px; }
.trade-pick legend { font-weight: 700; font-size: .9rem; padding: 0 4px; }
.trade-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.qual-form { flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.assist-box { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-left: 4px solid var(--c-accent); }
.assist-box h2 { margin: 0; }
.assist-box p { margin: 4px 0 0; }
.path-list { padding-left: 20px; margin: 6px 0; display: grid; gap: 2px; }
.assist-images { max-width: 520px; }
.task.is-done { opacity: .7; }
.task.prio-urgent { border-left: 4px solid var(--c-bad); }
.task.prio-high { border-left: 4px solid var(--c-accent); }
.task-assign { display: inline-block; }
.task-assign[open] form { margin-top: 6px; }
.solve-box[open] { flex-basis: 100%; }
/* Mehrsprachigkeit (v0.10.0) */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; margin-bottom: var(--gap); }
.lang-card { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--c-ink); }
.lang-card:hover { text-decoration: none; border-color: var(--c-ink); }
.lang-card.on { border: 2px solid var(--c-accent); }
.meter { display: inline-block; width: 100%; max-width: 160px; height: 8px; border-radius: 999px; background: var(--c-soft); overflow: hidden; vertical-align: middle; }
.meter i { display: block; height: 100%; background: var(--c-ok); }
.lang-chips { margin-bottom: 10px; }
.tr-group { margin: 18px 0 6px; }
.tr-row { padding: 12px 14px; margin-bottom: 8px; }
.tr-row.safety { border-left: 4px solid var(--c-bad); }
.tr-head { margin-bottom: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.tr-src { background: var(--c-soft); border-radius: 10px; padding: 8px 10px; overflow-wrap: anywhere; font-size: .95rem; }
.tr-cols .field { margin: 0; }
.tr-cols textarea { width: 100%; }
.lang-row.is-off { opacity: .8; }
.lang-form { margin-top: 8px; }
.danger-zone.inline-row { margin-top: 8px; }
.card-head.pad { padding: 14px 16px 0; }
[dir="rtl"] .tr-src, [dir="rtl"] .qa-body { text-align: right; }
@media (max-width: 760px) { .tr-cols { grid-template-columns: minmax(0, 1fr); } }
/* Übersetzungen zentral (v0.38.0) */
.tr-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--c-line); margin: 0 0 12px; }
.tr-tabs a { padding: 8px 14px; border-radius: 10px 10px 0 0; color: var(--c-ink); border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.tr-tabs a:hover { text-decoration: none; background: var(--c-soft); }
.tr-tabs a.active { background: var(--c-surface); border-color: var(--c-line); font-weight: 600; }
.tr-pick { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.tr-pick .field { margin: 0; }
.tr-pick select { width: 100%; }
.tr-pkg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--gap); align-items: start; }
.tr-hint { font-size: .9rem; }
@media (max-width: 760px) { .tr-pick { grid-template-columns: minmax(0, 1fr); } }

/* Sicherheit, Notruf, Suche, Statistik (v0.12.0) */
.safety-rules { display: grid; gap: 10px; margin: 14px 0; }
.safety-rule { border: 1px solid var(--c-line); border-left: 5px solid var(--c-info); background: var(--c-info-bg); border-radius: 12px; padding: 12px 14px; }
.safety-rule h2, .safety-rule .h4 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.safety-rule.sev-caution { border-left-color: #f5b700; background: var(--c-warn-bg); }
.safety-rule.sev-warning { border-left-color: #f79009; background: var(--c-warn-bg); }
.safety-rule.sev-stop { border-left-color: #d92d20; background: var(--c-bad-bg); }
.safety-rule .check { margin-top: 10px; font-weight: 600; }
.safety-stop { margin: 8px 0 0; }
.safety-ack .safety-rule { margin: 12px 0; }
.tag.sev-stop { background: var(--c-bad-bg); color: var(--c-bad); }
.tag.sev-warning, .tag.sev-caution { background: var(--c-warn-bg); color: var(--c-warn); }
.emg-call { width: 100%; justify-content: center; font-size: 1.15rem; }
.emg-desk { display: none; margin: 8px 0 0; }
.emg-more a { font-weight: 700; }
.emg-country select { margin-left: 4px; }
@media (hover: hover) and (pointer: fine) and (min-width: 700px) { .emg-desk { display: block; } .emg-call { width: auto; } }
.has-suggest { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid var(--c-line); border-radius: 12px; box-shadow: 0 12px 30px rgba(21, 27, 38, .16); overflow: hidden; text-align: left; }
.suggest a { display: grid; grid-template-columns: 28px 1fr; gap: 0 8px; padding: 9px 12px; color: var(--c-ink); text-decoration: none; }
.suggest a small { grid-column: 2; color: var(--c-muted); }
.suggest a:hover, .suggest a[aria-selected="true"] { background: var(--c-soft); }
.suggest-icon { grid-row: span 2; font-size: 1.2rem; }
.chart { margin: 0; }
.chart svg { width: 100%; height: 190px; display: block; }
.chart .axis { stroke: var(--c-line); }
.chart text { font-size: 10px; fill: var(--c-muted); }
.chart .b-views { fill: #d0d5dd; }
.chart .b-starts { fill: #84adff; }
.chart .b-ok { fill: #12b76a; }
.chart-legend { color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.chart-legend .lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
/* v1.7.0: Besucher */
.chart .b-h { fill: #12b76a; } .chart .b-bot { fill: #c4c9d1; } .chart .b-oth { fill: #f5b041; }
.chart-legend .lg-h { background: #12b76a; } .chart-legend .lg-bot { background: #c4c9d1; } .chart-legend .lg-oth { background: #f5b041; }
a.vb-stat { color: inherit; text-decoration: none; } a.vb-stat:hover { border-color: var(--c-accent); }
.vb-row { grid-template-columns: minmax(90px, 40%) 1fr 44px; } .vb-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-gap { height: 14px; }
.vb-table tr.vb-b td, .vb-table tr.vb-s td { color: var(--c-muted); }
.vb-path code { word-break: break-all; }
.vb-flag { display: inline-block; width: 20px; height: 15px; vertical-align: -3px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); object-fit: cover; }
.vb-noflag { background: var(--c-soft); color: var(--c-muted); font-size: 10px; line-height: 15px; text-align: center; font-style: normal; }
a.bar-row { color: inherit; text-decoration: none; } a.bar-row:hover span:first-child { text-decoration: underline; }
.vb-help ul { margin: 8px 0; padding-left: 18px; } .vb-help li { margin: 4px 0; }
.vb-help blockquote { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--c-line); background: var(--c-soft); }
.lg-views { background: #d0d5dd; } .lg-starts { background: #84adff; } .lg-ok { background: #12b76a; }
.funnel .bar-row { grid-template-columns: minmax(0, 1.4fr) 1fr 90px; }
.funnel .bar-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; }
.dz-lib { position: fixed; inset: 10% 50% auto 50%; transform: translateX(-50%); width: min(560px, 92vw); max-height: 75vh; overflow: auto; background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); padding: 16px; z-index: 60; }
.dz-lib ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.dz-lib li button { width: 100%; text-align: left; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-soft); cursor: pointer; }
.dz-lib li small { color: var(--c-muted); }

/* Ansicht als (v0.13.0) */
.viewas-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: #fec84b; color: #3d2e00; border: 1px solid #f79009; border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; font-weight: 600; }
.viewas-bar span { flex: 1 1 260px; }

/* Content-Hubs (v0.13.0) */
.hub-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.hub-card .gcard-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.hub-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--c-soft); }
.hub-hero { width: calc(100% + 2 * var(--pad, 20px)); max-height: 360px; object-fit: cover; display: block; margin: calc(-1 * var(--pad, 20px)) calc(-1 * var(--pad, 20px)) 16px; border-radius: var(--radius, 16px) var(--radius, 16px) 0 0; }
.chip-sub { font-size: .78rem; padding: 3px 9px; opacity: .9; }
.hub-materials { margin: 6px 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.hub-materials li { padding: 6px 10px; background: var(--c-soft); border-radius: 8px; }
.hub-materials li::before { content: "☐ "; color: var(--c-muted); }
.hub-tools { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 8px; }
.hub-tools li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
.hub-tools img, .hub-tools .tool-thumb { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--c-soft); display: grid; place-items: center; }
.hub-steps { counter-reset: hs; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.hub-steps > li { counter-increment: hs; position: relative; padding-left: 46px; }
.hub-steps > li::before { content: counter(hs); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--c-ink); color: #fff; display: grid; place-items: center; font-weight: 700; }
.hub-step-img { max-width: 100%; max-height: 420px; border-radius: 10px; margin: 8px 0; display: block; }
.hub-parts { display: grid; gap: 14px; margin: 14px 0; }
.safety-ack-inline { border: 2px solid var(--c-warn); margin: 14px 0; }
.hub-step-edit { padding-left: 1.4em; display: grid; gap: 14px; }
.hub-step-edit > li { border: 1px solid var(--c-line); border-radius: 12px; padding: 10px 12px; }
.grid-step { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
.hub-media { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.hub-media li { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; }
.hub-media img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.tool-group { margin: 4px 0; }
.tool-group summary { cursor: pointer; padding: 4px 0; }
.tool-group .chips { gap: 6px; margin: 6px 0 10px; }
.cat-row { border-bottom: 1px solid var(--c-line); padding: 8px 0; }
.cat-row summary { cursor: pointer; }
.cat-row.cat-sub { padding-left: 22px; }
.cat-new { margin-top: 14px; }
.hub-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 18px 0; }
.hub-tile { display: grid; grid-template-columns: 48px 1fr; gap: 4px 12px; align-items: center; padding: 16px; border-radius: 14px; background: var(--c-soft); color: var(--c-ink); text-decoration: none; border: 1px solid var(--c-line); }
.hub-tile:hover { border-color: var(--c-ink); }
.hub-tile .ht-icon { font-size: 2rem; grid-row: span 2; }
.hub-tile small { color: var(--c-muted); }
@media (max-width: 640px) { .grid-step { grid-template-columns: 1fr 80px; } .hub-steps > li { padding-left: 40px; } }
.search-sec { margin: 22px 0 10px; }
.hc-head { display: flex; align-items: center; gap: 12px; }
.hub-hero { max-width: none; }
.hub-card .gcard-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.safety-ack-inline .actions { position: static; background: none; }

/* Tutorial Studio (v0.14.0) */
.tour-bubble { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1001; width: min(380px, calc(100vw - 24px)); background: #fff; color: var(--c-ink); border-radius: 14px; box-shadow: 0 18px 48px rgba(16, 24, 40, .32); padding: 14px 16px; border: 2px solid var(--c-accent, #ffc400); }
.tour-bubble.tour-anchored { transform: none; bottom: auto; }
.tour-bubble.tour-anchored.tour-sheet, .tour-bubble.tour-floating { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; transform: none; }
.tour-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.tour-count { font-size: .78rem; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.tour-title { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.tour-bubble .rich { font-size: .95rem; }
.tour-hint, .tour-missing { color: var(--c-muted); margin: 6px 0 0; }
.tour-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: 10px; }
.tour-actions .tour-next { margin-left: auto; }
.tour-spot { position: fixed; z-index: 1000; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(15, 20, 30, .55); pointer-events: none; transition: all .2s ease; outline: 3px solid var(--c-accent, #ffc400); }
.tour-bar, .tour-picker-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: #eef4ff; border: 1px solid #b2ccff; color: #1d2b4f; border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; }
.tour-bar span, .tour-picker-bar span { flex: 1 1 240px; }
.tour-picker-bar { position: sticky; top: 70px; z-index: 1002; }
.tour-pick-box { position: fixed; z-index: 1001; pointer-events: none; outline: 3px dashed #f04438; background: rgba(240, 68, 56, .08); border-radius: 4px; }
.tour-picking, .tour-picking * { cursor: crosshair !important; }
.tour-offer { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; border: 2px solid var(--c-accent, #ffc400); }
.tour-offer-txt { flex: 1 1 260px; display: grid; gap: 2px; }
.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tut-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tut-card .tut-body { padding: 14px 16px; display: grid; gap: 6px; }
.tut-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--c-soft); border-radius: 10px; }
.tut-card .tut-cover { border-radius: 0; }
.tut-cover-empty { display: grid; place-items: center; font-size: 2.6rem; }
.tut-cover-mini { width: 80px; height: 45px; object-fit: cover; border-radius: 6px; vertical-align: middle; }
.tut-player { max-width: 960px; margin: 0 auto; display: grid; gap: 14px; }
.tut-progress { display: flex; gap: 4px; }
.tut-progress span { flex: 1; height: 6px; border-radius: 3px; background: var(--c-line); }
.tut-progress span.done { background: var(--c-ok, #12b76a); }
.tut-progress span.now { background: var(--c-accent, #ffc400); }
.tut-stage { background: var(--tut-bg, #fff); border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--c-line); overflow: hidden; display: grid; min-height: 320px; }
.tut-stage .tut-text { padding: 26px 28px; display: grid; gap: 10px; align-content: center; }
.tut-stage .tut-img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.tut-stage.layout-left, .tut-stage.layout-right { grid-template-columns: 1fr 1fr; }
.tut-stage.layout-right .tut-img { order: 2; }
.tut-player .tour-actions { justify-content: space-between; }
.tut-slides { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; counter-reset: ts; }
.tut-slides li { display: flex; gap: 8px; align-items: center; justify-content: space-between; border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 10px; }
.tut-slides li > a { flex: 1; min-width: 0; color: var(--c-ink); text-decoration: none; }
.tut-ops { display: flex; flex-wrap: wrap; gap: 2px; }
.tut-done-icon { font-size: 3rem; }
.tut-slide-form:has(select[name=kind] option[value=page]:checked) .only-guided { display: none; }
.tut-slide-form:has(select[name=kind] option[value=guided]:checked) .only-page { display: none; }
.tut-slide-form:not(:has(select[name=layout] option[value=free]:checked)) .only-free { display: none; }
.tut-slide-form:has(select[name=layout] option[value=free]:checked) .only-fixed { display: none; }
/* freie Gestaltung (Tutorial Studio) */
.ted-stage { position: relative; isolation: isolate; aspect-ratio: 16 / 9; width: 100%; container-type: inline-size; overflow: hidden; background: var(--tut-bg, #fff); border-radius: 14px; border: 1px solid var(--c-line); box-shadow: var(--shadow); }
.ted-el { position: absolute; box-sizing: border-box; transform-origin: 50% 50%; }
.ted-text { font-size: calc(var(--fs, 3.5) * 1cqw); line-height: 1.25; padding: calc(var(--pad, 1) * 1cqw); overflow: hidden; overflow-wrap: anywhere; }
.ted-text p { margin: 0 0 .4em; } .ted-text p:last-child { margin: 0; } .ted-text ul, .ted-text ol { margin: 0; padding-left: 1.2em; }
img.ted-image, .ted-imgwrap > img { display: block; width: 100%; height: 100%; }
.ted-imgwrap { overflow: hidden; }
.ted-arrow { height: calc(var(--at, .8) * 4cqw); display: flex; align-items: center; }
.ted-arrow > span { position: relative; display: block; width: 100%; height: calc(var(--at, .8) * 1cqw); background: var(--ac, #e5484d); border-radius: 99px; }
.ted-arrow.head-end > span::after, .ted-arrow.head-both > span::after, .ted-arrow.head-both > span::before { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-style: solid; border-color: transparent; }
.ted-arrow.head-end > span::after, .ted-arrow.head-both > span::after { right: calc(var(--at, .8) * -.6cqw); transform: translateY(-50%); border-width: calc(var(--at, .8) * 1.8cqw) 0 calc(var(--at, .8) * 1.8cqw) calc(var(--at, .8) * 3cqw); border-left-color: var(--ac, #e5484d); }
.ted-arrow.head-both > span::before { left: calc(var(--at, .8) * -.6cqw); transform: translateY(-50%); border-width: calc(var(--at, .8) * 1.8cqw) calc(var(--at, .8) * 3cqw) calc(var(--at, .8) * 1.8cqw) 0; border-right-color: var(--ac, #e5484d); }
.ted-shape { border: calc(var(--sw, .5) * 1cqw) solid var(--sc, #e5484d); }
.ted-shape.shape-ellipse { border-radius: 50%; }
.tut-free { display: grid; gap: 10px; }
.tut-free-body { background: var(--c-surface); border-radius: 14px; padding: 14px 18px; border: 1px solid var(--c-line); }
/* Editor */
.ted { display: grid; gap: 10px; margin: 6px 0 14px; }
.ted-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ted-edit .ted-el { cursor: move; touch-action: none; outline-offset: 2px; }
.ted-edit .ted-el:hover { outline: 1px dashed rgba(31, 111, 235, .6); }
.ted-edit .ted-el.ted-sel, .ted-edit .ted-el:focus-visible { outline: 2px solid #1f6feb; }
.ted-h { display: none; }
.ted-edit .ted-el.ted-sel > .ted-h { display: block; position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 4px; background: #1f6feb; border: 2px solid #fff; cursor: nwse-resize; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.ted-edit.ted-empty::after { content: attr(aria-label); position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--c-muted); font-size: 14px; }
.ted-panel { padding: 12px 14px; }
.ted-grid { display: grid; gap: 8px 12px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); align-items: end; }
.ted-grid .ted-wide { grid-column: 1 / -1; }
.ted-f input[type=number] { width: 100%; }
.ted-f input[type=color] { width: 44px; height: 32px; padding: 0; border: 0; background: none; }
.ted-row { display: flex; gap: 8px; align-items: center; }
.ted-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
@media (max-width: 700px) { .tut-stage.layout-left, .tut-stage.layout-right { grid-template-columns: 1fr; } .tut-stage.layout-right .tut-img { order: 0; } .tut-stage .tut-text { padding: 18px; } }
.tour-done-note { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tour-done-note[hidden] { display: none; }

/* Backup-Center (v0.15.0) */
.bk-modules { display: grid; gap: 6px; margin: 6px 0 10px; }
.bk-mod { align-items: flex-start; }
/* Benutzer-Umzug */
.tr-modules { display: grid; gap: 6px; margin: 6px 0 10px; }
@media (min-width: 900px) { .tr-modules { grid-template-columns: 1fr 1fr; } }
.tr-mod { align-items: flex-start; }
.tr-hints { margin: 10px 0 0; padding-left: 18px; }
.tr-sec { border: 0; padding: 0; margin: 0; }
.tr-result .table-card { margin: 10px 0; }
.tr-users li { padding: 4px 0; }
.bk-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.bk-actions .in-sm, .in-sm { width: 8.5em; padding: 4px 8px; font-size: .85rem; }
.bk-tables { margin: 4px 0 0; padding-left: 1.1em; }
.bk-run { display: block; margin: -6px 0 14px; }
.btn-row.bk-run { display: flex; flex-wrap: wrap; gap: 6px; }
fieldset.inline-row { display: flex; border: 0; padding: 0; margin: 0; min-width: 0; }
.rt-list li { padding: 6px 0; }
.rt-list .tag { margin-right: 4px; }
.sys-alert a { margin-left: 6px; }
.selftest .st-row { display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.selftest .st-row:last-child { border-bottom: 0; }
.selftest .st-icon { font-size: 1.1rem; line-height: 1.4; }
.selftest .st-hint { grid-column: 2; color: var(--c-muted); font-size: .9rem; }
.selftest .st-files { grid-column: 2; margin: 4px 0 0; padding-left: 1.1em; font-size: .85rem; }
.st-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }

/* Icon-Studio & Icon-Auswahl (v0.17.0) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
img.ic { width: 1em; height: 1em; object-fit: contain; vertical-align: -0.15em; display: inline-block; }
img.ic-nav { width: 20px; height: 20px; vertical-align: middle; }
.icon-field { display: grid; gap: 4px; }
.icon-field > label { font-weight: 600; font-size: .9rem; }
.icon-field-row { display: flex; gap: 6px; align-items: center; }
.icon-field-row input { flex: 1 1 auto; min-width: 0; }
.icon-field.compact .icon-field-row input { flex: 0 1 6.5em; width: 6.5em; }
.icon-prev { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); }
.icon-prev img.ic { width: 26px; height: 26px; vertical-align: middle; }
.iconpick-dlg { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 14px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); color: inherit; }
.iconpick-dlg::backdrop { background: rgba(0, 0, 0, .45); }
.iconpick-head, .iconpick-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.iconpick-foot { margin-top: 10px; }
.iconpick-ctl { display: grid; grid-template-columns: 1fr minmax(0, 14em); gap: 8px; margin: 10px 0; }
.iconpick-emoji[hidden] { display: none; }
.iconpick-emoji { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; }
.iconpick-emoji button { font-size: 1.3rem; background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 4px; cursor: pointer; }
.iconpick-emoji button:hover, .iconpick-emoji button:focus-visible { border-color: var(--c-line); }
.iconpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; max-height: 52vh; overflow: auto; }
.iconpick-item { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; background: none; border: 1px solid var(--c-line); border-radius: 10px; cursor: pointer; font-size: .72rem; color: inherit; }
.iconpick-item:hover, .iconpick-item:focus-visible { border-color: var(--c-accent, #ffc400); }
.iconpick-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ics { display: grid; gap: 14px; }
@media (min-width: 960px) { .ics { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } .ics-side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; } }
.ics-folders { display: grid; gap: 2px; margin-bottom: 10px; }
.ics-folders a { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 8px; text-decoration: none; color: inherit; }
.ics-folders a.active { background: var(--c-accent, #ffc400); color: #151b26; }
.ics-folders a.off { opacity: .6; }
.ics-newset input { min-width: 0; flex: 1; }
.ics-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ics-search { align-items: end; }
.ics-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.ics-grid { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ics-grid li { position: relative; border: 1px solid var(--c-line); border-radius: 10px; }
.ics-grid li > a { display: grid; justify-items: center; gap: 4px; padding: 12px 4px 8px; text-decoration: none; color: inherit; font-size: .75rem; }
.ics-grid li > a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ics-grid input[type=checkbox] { position: absolute; top: 4px; left: 4px; }
.ics-used { position: absolute; top: 4px; right: 6px; background: var(--c-accent, #ffc400); color: #151b26; border-radius: 9px; padding: 0 6px; font-size: .7rem; }
.ics-own { position: absolute; bottom: 4px; right: 6px; color: var(--c-muted); }
.ics-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; border-top: 1px solid var(--c-line); padding-top: 10px; }
.ics-bulk .field { margin: 0; }
.ics-detail { display: grid; gap: 14px; }
@media (min-width: 800px) { .ics-detail { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } }
.ics-sizes { display: flex; align-items: end; gap: 12px; padding: 12px; border-radius: 10px; }
.ics-sizes.dark { background: #151b26; margin-top: 8px; }
.ics-setchecks { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 10px; }
.ics-replace { align-items: end; margin-top: 10px; }
.ics-navgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ics-navrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) 28px; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--c-line, #e4e7ec); }
.ics-navpick { display: grid; gap: 6px; min-width: 0; }
.ics-navnow { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--c-accent, #ffc400); }
.ics-navnow img { width: 22px; height: 22px; }
.ics-navgroup { margin: 0 0 12px; }
.ics-navgroup > summary { cursor: pointer; padding: 8px 0; }
.ics-tint { border: 1px solid var(--c-line, #e4e7ec); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 6px; }
.ics-tint input[type=color] { width: 44px; height: 28px; padding: 0; border: 0; background: none; vertical-align: middle; }
.ics-navbuiltin { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; opacity: .7; }
.ics-stack { display: grid; gap: 8px; justify-items: start; }
fieldset.card { min-width: 0; }
.table-scroll { overflow-x: auto; max-width: 100%; }
[hidden] { display: none !important; }
@media (max-width: 959px) {
  .ics-folders { display: flex; flex-wrap: wrap; gap: 4px; }
  .ics-folders a { border: 1px solid var(--c-line); padding: 4px 10px; border-radius: 999px; font-size: .88rem; }
  .ics-sets { max-height: 132px; overflow: auto; }
  .ics-tags { max-height: 90px; overflow: auto; }
}

/* Rundmails & Newsletter (v0.18.0) */
.nl-progress { width: 100%; max-width: 180px; height: 8px; display: block; margin-top: 4px; accent-color: var(--c-accent, #ffc400); }
.nl-progress.big { max-width: none; height: 12px; }
.nl-version { border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.nl-version > summary { cursor: pointer; padding: 4px 0; }
.nl-aud { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 10px; }
.nl-box { border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; min-width: 0; display: grid; gap: 4px; align-content: start; }
.nl-box legend { font-weight: 600; padding: 0 4px; }
.nl-preview { background: var(--c-surface, #f7f8fb); border: 1px dashed var(--c-line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.nl-send { align-items: start; }
.nl-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.nl-foot { display: flex; gap: 8px; justify-content: center; }
.nl-profile { border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; margin: 12px 0; min-width: 0; }
.center-text { text-align: center; }
.nl-form .nl-box .actions { position: static; background: none; padding: 6px 0; }
.nl-scroll { max-height: 220px; overflow: auto; }

/* Buchhaltung & Kaufstatistik (v0.19.0) */
.acc-chart .b-a { fill: #12b76a; }
.acc-chart .b-b { fill: #f97066; }
.lg-a { background: #12b76a; } .lg-b { background: #f97066; }
.acc-filter { align-items: end; }
.acc-sync { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-exports { display: flex; gap: 4px; flex-wrap: wrap; }
.acc-cancelled td { opacity: .6; }
.acc-cancelled td .strong { text-decoration: line-through; }
.stat.neg b { color: #b42318; }
.acc-log li small { word-break: break-word; }
.acc-newcat { align-items: end; }
.acc-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.acc-stats .stat b { font-size: 1.35rem; white-space: nowrap; }
.acc-bars .bar-row { grid-template-columns: minmax(90px, 160px) 1fr auto; }
.acc-bars .bar-row b { white-space: nowrap; }

/* Mail-Center (v0.20.0) */
.mc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.mc-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.mc-main.card { display: block; }
.mc-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.mc-box { border-top: 1px solid var(--c-line); padding-top: 10px; }
.mc-box-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; min-width: 0; color: var(--c-ink); text-decoration: none; }
.mc-boxcount { margin-left: auto; }
.mc-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mc-folders { list-style: none; margin: 6px 0 0; padding: 0; }
.mc-folders a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: var(--radius-s); color: var(--c-ink); text-decoration: none; font-size: .93rem; }
.mc-folders a:hover { background: var(--c-soft); }
.mc-folders a.is-cur { background: var(--c-dark); color: #fff; }
.mc-count { background: var(--c-accent); color: var(--c-accent-ink, #151b26); border-radius: 999px; padding: 0 8px; font-size: .8rem; line-height: 1.6; }
.mc-side-links { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--c-line); padding-top: 10px; font-size: .92rem; }
.mc-side-links a { display: flex; gap: 6px; align-items: center; }
.mc-filter { align-items: end; }
.mc-more { flex-basis: 100%; order: 3; }
.mc-more summary { cursor: pointer; font-size: .92rem; }
.mc-moreinner { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; margin-top: 8px; }
.mc-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding-bottom: 10px; }
.mc-listcard { padding: 0; overflow: hidden; }
.mc-bulkbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--c-line); background: var(--c-soft); }
.mc-bulkact { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mc-bulkact select { width: auto; min-height: 34px; padding: 4px 8px; }
.mc-list { list-style: none; margin: 0; padding: 0; }
.mc-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--c-line); }
.mc-row:last-child { border-bottom: 0; }
.mc-row > input { margin-top: 4px; flex: none; }
.mc-row.is-unread { background: color-mix(in srgb, var(--c-accent) 8%, #fff); }
.mc-row.is-unread .mc-who, .mc-row.is-unread .mc-subj { font-weight: 700; }
.mc-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; flex: 1; min-width: 0; color: var(--c-ink); text-decoration: none; }
.mc-link:hover .mc-subj { text-decoration: underline; }
.mc-who, .mc-subj, .mc-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mc-date { color: var(--c-muted); font-size: .85rem; white-space: nowrap; }
.mc-subj { grid-column: 1 / -1; }
.mc-snip { grid-column: 1 / -1; color: var(--c-muted); font-size: .88rem; }
.mc-tags { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; }
.mc-tags:empty { display: none; }
.mc-star { color: #f79009; }
.mc-title { overflow-wrap: anywhere; }
.mc-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mc-toolbar form { display: inline-flex; }
.mc-mail { display: flex; flex-direction: column; gap: 10px; }
.mc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: .93rem; }
.mc-head dt { color: var(--c-muted); }
.mc-head dd { margin: 0; overflow-wrap: anywhere; }
.mc-imgbar { background: var(--c-info-bg); padding: 8px 12px; border-radius: var(--radius-s); margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mc-frame { width: 100%; min-height: 360px; height: 60vh; border: 1px solid var(--c-line); border-radius: var(--radius-s); background: #fff; resize: vertical; }
.mc-att { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mc-att li { overflow-wrap: anywhere; }
.mc-work { display: flex; flex-direction: column; gap: 10px; }
.mc-workrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mc-assign { align-items: end; }
.mc-notes li { display: block; }
.mc-block summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.mc-block .form { margin-top: 8px; }
.mc-thread { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.mc-thread li.is-cur > a { font-weight: 700; }
.mc-compose .actions { justify-content: flex-start; }
.mc-ccbcc summary { cursor: pointer; font-size: .92rem; }
.mc-ccbcc .field { margin-top: 8px; }
.mc-snipbar { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.mc-keep { border: 1px solid var(--c-line); border-radius: var(--radius-s); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.mc-err { color: var(--c-bad); }
.mc-grants td, .mc-grants th { padding: 6px 8px; }
.mc-boxform .grid2 { align-items: start; }
@media (max-width: 980px) {
  .mc-layout { grid-template-columns: minmax(0, 1fr); }
  .mc-side { position: static; }
  .mc-side.has-cur .mc-box:not(.is-cur) .mc-folders { display: none; }
  .mc-folders { display: flex; flex-wrap: wrap; gap: 4px; }
  .mc-folders a { padding: 4px 10px; border: 1px solid var(--c-line); }
  .mc-side-links { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
}

/* Design-Extras (v0.21.0): Startbereich-Effekte, Logo-Werkstatt, Zurück-Knopf, Konto-Menü */
.hero-tools { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-tool { position: absolute; left: 0; top: 0; height: auto; max-width: none; will-change: transform, opacity; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); }
.brand.has-logofx { position: relative; isolation: isolate; }
.smart-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--sb-size, 44px); min-width: var(--sb-size, 44px); padding: 0 14px; border-radius: var(--sb-radius, 14px); background: var(--sb-bg, #151b26); color: var(--sb-color, #fff); font-weight: 700; text-decoration: none; border: 2px solid transparent; }
.smart-back:hover { text-decoration: none; border-color: var(--sb-accent, #ffc400); color: var(--sb-color, #fff); }
.smart-back:focus-visible { outline: 3px solid var(--sb-accent, #ffc400); outline-offset: 2px; }
.smart-back svg { width: calc(var(--sb-size, 44px) * .5); height: calc(var(--sb-size, 44px) * .5); }
.smart-back.sb-icon { padding: 0; }
.smart-back.sb-shadow { box-shadow: 0 6px 18px rgba(16, 24, 40, .25); }
.smart-back.sb-floating-left, .smart-back.sb-floating-right { position: fixed; bottom: 18px; z-index: 35; }
.smart-back.sb-floating-left { left: 16px; }
.smart-back.sb-floating-right { right: 16px; }
.smart-back.sb-inline { margin: 0 0 12px; }
.smart-back.sb-pulse-intro { animation: sb-pulse 1.4s ease-out 2; }
.smart-back.sb-pulse-continuous { animation: sb-pulse 2.4s ease-out infinite; }
@keyframes sb-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-accent, #ffc400) 60%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .smart-back { animation: none !important; } }
.acct-menu { position: relative; }
.acct-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: #e4e7ec; padding: 6px 10px; border-radius: 10px; font-weight: 600; font-size: .95rem; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-menu > summary:hover, .acct-menu[open] > summary { background: rgba(255, 255, 255, .08); color: #fff; }
.acct-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(var(--am-width, 300px), calc(100vw - 24px)); background: var(--c-surface); color: var(--c-ink); border-radius: 14px; box-shadow: 0 18px 40px rgba(16, 24, 40, .28); padding: 10px; z-index: 60; border: 1px solid var(--c-line); }
.acct-head { display: flex; gap: 10px; align-items: center; padding: 6px 8px 10px; border-bottom: 1px solid var(--c-line); margin-bottom: 6px; }
.acct-head span { display: flex; flex-direction: column; min-width: 0; }
.acct-head small { color: var(--c-muted); }
.acct-pop ul { list-style: none; margin: 0; padding: 0; }
.acct-pop form { margin: 6px 0 0; border-top: 1px solid var(--c-line); padding-top: 6px; }
.acct-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; color: var(--c-ink); font: 600 var(--am-text, 15px)/1.3 var(--font); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.acct-item:hover, .acct-item:focus-visible { background: var(--c-soft); text-decoration: none; color: var(--c-ink); }
.acct-ic { width: var(--am-icon, 20px); height: var(--am-icon, 20px); display: inline-flex; align-items: center; justify-content: center; color: var(--am-accent, #ffc400); flex: none; font-size: calc(var(--am-icon, 20px) * .9); }
.acct-ic svg, .acct-ic img { width: 100%; height: 100%; }
.acct-admin .acct-ic { color: var(--c-bad); }
.acct-logout { color: var(--c-bad); }
@media (min-width: 761px) and (max-width: 1500px) { .page-public .topnav-user .acct-menu > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 760px) {
  .acct-menu > summary { width: 100%; }
  .acct-pop { position: static; width: auto; box-shadow: none; margin-top: 6px; }
  .smart-back.sb-floating-left, .smart-back.sb-floating-right { bottom: 12px; }
}
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fx-card { border: 1px solid var(--c-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.fx-swatches { display: flex; gap: 4px; }
.fx-swatches i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--c-line); }
.fx-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.fx-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tool-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.tool-pick label { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--c-line); border-radius: 12px; padding: 8px; background: var(--c-dark); color: #fff; }
.tool-pick img { width: 72px; height: 72px; object-fit: contain; }
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
.preset-row .btn i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.box-groups td, .box-groups th { padding: 6px 8px; vertical-align: middle; }
.box-groups input[type=range] { width: 100%; min-width: 120px; }
@media (max-width: 760px) { .fx-zones { grid-template-columns: minmax(0, 1fr); } }
/* Konto-Menü innerhalb der Kopfzeile: Kopfzeilen-Regeln für Links nicht übernehmen */
.topnav .acct-pop a.acct-item, .topnav .acct-pop .acct-item { color: var(--c-ink); padding: 8px 10px; font-size: var(--am-text, 15px); }
.topnav .acct-pop a.acct-item:hover, .topnav .acct-pop .acct-item:hover { background: var(--c-soft); color: var(--c-ink); }
.topnav .acct-pop .acct-logout, .topnav .acct-pop .acct-logout:hover { color: var(--c-bad); }
.page-public .topnav .acct-pop a.acct-item span, .page-public .topnav .acct-pop .acct-item span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }

/* Push & QR (v0.22.0) */
.checks { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.checks legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.wrap-any { overflow-wrap: anywhere; word-break: break-word; }
.text-bad { color: var(--c-bad); }
.push-card h2 .ic, .guide-qr summary .ic { vertical-align: -4px; }
.push-state { font-weight: 700; }
.push-hint { background: var(--c-warn-bg); color: var(--c-warn); border-radius: var(--radius-s); padding: 8px 12px; }
.push-hint .ic { vertical-align: -4px; }
.push-devices { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.push-devices li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--radius-s); flex-wrap: wrap; }
.push-devices .pd-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.push-devices .pd-this { background: var(--c-ok-bg); color: var(--c-ok); margin-left: 6px; }
.push-quiet { border: 1px solid var(--c-line); border-radius: var(--radius-s); padding: 10px 14px; margin: 12px 0; }
.push-lang { border-left: 3px solid var(--c-line); padding-left: 10px; }
.qr-list { display: grid; gap: 10px; }
.qr-item { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; padding: 10px 14px; margin: 0; }
.qr-item:hover { border-color: var(--c-accent); }
.qr-item img { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 6px; background: #fff; }
.qr-item.is-off img { opacity: .4; }
.qr-item-ic { width: 72px; height: 72px; flex: 0 0 auto; display: grid; place-items: center; background: var(--c-soft); border-radius: 6px; }
.qr-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qr-item-scans { text-align: right; white-space: nowrap; }
.qr-item-scans b { font-size: 1.3rem; }
.qr-edit { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
.qr-side { position: sticky; top: 12px; }
.qr-preview { background: repeating-conic-gradient(#eef1f6 0 25%, #fff 0 50%) 0 0/16px 16px; border-radius: var(--radius-s); padding: 10px; display: flex; justify-content: center; min-height: 200px; align-items: center; }
.qr-preview svg { width: 100%; max-width: 300px; height: auto; }
.qr-downloads { display: flex; gap: 8px; flex-wrap: wrap; }
.qr-look { border: 1px solid var(--c-line); border-radius: var(--radius-s); padding: 8px 14px; margin: 12px 0; }
.qr-look summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.qr-style .field input[type=color] { width: 100%; min-height: 40px; }
.qr-chart { display: flex; align-items: flex-end; gap: 2px; height: 70px; padding: 4px 0; border-bottom: 1px solid var(--c-line); }
.qr-chart span { flex: 1; background: var(--c-accent); min-height: 1px; height: var(--h); border-radius: 2px 2px 0 0; }
.guide-qr { margin-top: 12px; border-top: 1px solid var(--c-line); padding-top: 10px; }
.guide-qr summary { cursor: pointer; font-weight: 700; }
.guide-qr-in { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.guide-qr-in img { width: 180px; height: 180px; background: #fff; border-radius: 8px; border: 1px solid var(--c-line); }
.page-print { background: #fff; }
.page-print main { max-width: 210mm; margin: 0 auto; padding: 16px; }
.print-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.print-sheet { display: grid; gap: 8mm; }
.print-n2, .print-n4, .print-n6 { grid-template-columns: 1fr 1fr; }
.print-n2 { grid-template-columns: 1fr; }
.print-cell { text-align: center; border: 1px dashed #c8ccd4; padding: 6mm; break-inside: avoid; page-break-inside: avoid; }
.print-cell h1 { font-size: 1.6rem; margin: 0 0 4mm; }
.print-n4 .print-cell h1, .print-n6 .print-cell h1 { font-size: 1.05rem; margin-bottom: 2mm; }
.print-qr svg { width: 100%; height: auto; max-width: 150mm; }
.print-n2 .print-qr svg { max-width: 82mm; }
.print-n4 .print-qr svg { max-width: 70mm; }
.print-n6 .print-qr svg { max-width: 55mm; }
.print-url { font-family: var(--mono); font-size: .9rem; overflow-wrap: anywhere; margin: 3mm 0 0; }
@media print {
  .no-print { display: none !important; }
  .page-print main { padding: 0; max-width: none; }
  .print-cell { border-color: #e4e7ec; }
  .print-n1 .print-cell { border: 0; }
}
@media (max-width: 900px) {
  .qr-edit { grid-template-columns: 1fr; }
  .qr-side { position: static; order: -1; }
}
@media (max-width: 560px) {
  .qr-item img { width: 56px; height: 56px; }
  .print-n4, .print-n6 { grid-template-columns: 1fr; }
}

/* Community-Karte (v0.23.0) */
.map-page { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--gap); align-items: start; }
.map-box { position: relative; height: min(72vh, 680px); min-height: 380px; border-radius: var(--radius); overflow: hidden; background: radial-gradient(circle at 50% 45%, #10283d, #04101c 70%); box-shadow: var(--shadow); touch-action: none; }
.map-box[data-view="flat"] { background: #a9cbe0; }
.map-canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.map-canvas:active { cursor: grabbing; }
.map-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--c-accent); }
.map-box.is-picking .map-canvas, .map-page-pick .map-canvas { cursor: crosshair; }
.map-ctrl { position: absolute; z-index: 4; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; }
.map-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(10,20,30,.72); color: #fff; font-size: 1.4rem; font-weight: 800; line-height: 1; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); }
.map-btn:hover, .map-btn:focus-visible { background: rgba(10,20,30,.9); border-color: var(--c-accent); }
.map-btn .ic { width: 20px; height: 20px; }
.map-consent { position: absolute; left: 12px; bottom: 12px; max-width: 330px; background: rgba(255,255,255,.95); color: var(--c-ink); border-radius: var(--radius-s); padding: 10px 12px; box-shadow: var(--shadow); }
.map-consent p { margin: 0 0 8px; }
.map-attr { position: absolute; right: 6px; bottom: 4px; background: rgba(255,255,255,.8); color: #333; padding: 1px 6px; border-radius: 4px; font-size: .72rem; }
.map-pop { position: absolute; z-index: 3; width: min(270px, calc(100% - 70px)); background: var(--c-surface); color: var(--c-ink); border-radius: var(--radius-s); box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 12px 14px; display: grid; gap: 8px; }
.map-pop-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--c-muted); padding: 4px; }
.map-pop-head { display: flex; gap: 10px; align-items: center; padding-right: 18px; }
.map-pop-head div { display: flex; flex-direction: column; min-width: 0; }
.map-pop-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.map-pop-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.map-pop .badge, .map-list .badge { background: var(--c-soft); color: var(--c-ink-2); border: 1px solid var(--c-line); }
.map-pop .badge.map-ok, .map-list .badge.map-ok { background: var(--c-ok-bg); color: var(--c-ok); border-color: transparent; }
.map-side { display: grid; gap: 12px; }
.map-side h2 { font-size: 1.1rem; margin: 4px 0 0; }
.map-layers { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.map-layers legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.map-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #111; vertical-align: -1px; }
.map-dot-m { background: #58b7ff; }
.map-dot-e { background: #ffc400; }
.map-dot-b { background: #b197fc; }
.map-pop-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.map-search { display: grid; gap: 8px; }
.map-search-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.map-places { display: grid; gap: 4px; }
.map-place { text-align: left; border: 1px solid var(--c-line); background: var(--c-soft); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: .9rem; color: inherit; }
.map-place:hover, .map-place:focus-visible { border-color: var(--c-accent); }
.map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.map-hit { width: 100%; text-align: left; display: grid; gap: 3px; border: 1px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-surface); padding: 8px 10px; cursor: pointer; color: inherit; }
.map-hit:hover, .map-hit:focus-visible { border-color: var(--c-accent); }
.map-geo-row { display: flex; gap: 6px; }
.map-geo-row input { flex: 1; min-width: 0; }
.map-visible summary { cursor: pointer; font-weight: 700; }
.map-visible .map-list { margin-top: 8px; max-height: 260px; }
@media (pointer: coarse) {
  /* ein Finger: senkrecht scrollt die Seite, waagerecht dreht/verschiebt die Karte; zwei Finger zoomen und verschieben */
  .map-box, .map-canvas { touch-action: pan-y; }
}
@media (max-width: 960px) {
  .map-page { grid-template-columns: 1fr; }
  .map-box { height: 62vh; min-height: 320px; }
}
@media (max-width: 600px) {
  .map-box { height: 52vh; min-height: 300px; }
}
/* Sparstand-Chip */
.save-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 196, 0, .16); color: #fff; font-weight: 800; font-size: .9rem; white-space: nowrap; text-decoration: none; }
.save-chip:hover, .save-chip.active { background: rgba(255, 196, 0, .3); color: #fff; }
.topbar-icons .save-chip { margin-right: 4px; }
.page-public .topnav a.save-chip span.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hero-savings { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 16px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 196, 0, .45); color: #fff; text-decoration: none; }
.hero-savings:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.hero-savings .hs-pig { font-size: 1.8rem; line-height: 1; }
.hero-savings b { display: block; font-size: 1.35rem; color: var(--c-accent); }
.hero-savings small { color: #d0d5dd; }
/* Community-Stufen */
.lvl-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; color: color-mix(in srgb, var(--lvl, #12b76a) 55%, #101828); background: color-mix(in srgb, var(--lvl, #12b76a) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lvl, #12b76a) 40%, transparent); vertical-align: middle; }
.lvl-now { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.lvl-now .lvl-badge { font-size: .95rem; padding: 3px 12px; }
.lvl-bar { height: 10px; border-radius: 999px; background: var(--c-line, #e4e7ec); overflow: hidden; margin: 6px 0; }
.lvl-bar span { display: block; height: 100%; border-radius: 999px; background: var(--lvl, var(--c-accent)); }
.lvl-table input:not([type=color]) { max-width: 9em; }
.lvl-table input[name^=icon_] { max-width: 4em; text-align: center; }
/* KI-Avatare */
.ai-quota { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-presets { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.ai-presets legend { width: 100%; margin-bottom: 4px; }
.chip-radio { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--c-line, #d0d5dd); border-radius: 999px; cursor: pointer; font-size: .9rem; }
.chip-radio:has(input:checked) { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 16%, transparent); font-weight: 700; }
.chip-radio input { accent-color: var(--c-accent); }
.ai-form.busy { opacity: .75; }
.ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 8px; }
.ai-item { margin: 0; padding: 10px; border: 1px solid var(--c-line, #e4e7ec); border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ai-item.active { border-color: var(--c-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 35%, transparent); }
.ai-item img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.ai-item figcaption { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.ai-act { display: flex; gap: 6px; }
.check-grid { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.form .ai-presets .chip-radio, .ai-presets .chip-radio { display: inline-flex; flex-direction: row; width: auto; margin: 0; }
.form fieldset.ai-presets { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.ai-form .grid3 + .field { margin-top: 0; }
.ai-form + h3 { margin-top: 18px; }
@media (max-width: 760px) {
  .topbar-icons { min-width: 0; flex-shrink: 1; }
  .topbar-icons .save-chip { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; padding: 4px 9px; max-width: 42vw; display: inline-block; }
}
@media (max-width: 400px) { .page-public .brand img { height: 36px; width: auto; } }
@media (max-width: 400px) {
  .topbar-icons .save-chip { font-size: .78rem; padding: 4px 8px; max-width: none; overflow: visible; flex-shrink: 0; }
  .topbar-icons .save-chip .sc-pig { display: none; }
  .topbar-icons .nav-icon { padding: 6px; }
}
.page-public .topnav a.save-chip span.sc-pig { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
/* weitere Sprachen, Werkzeug-Baum, Übersetzungs-Arten */
.more-langs { margin: 2px 0 10px; }
.more-langs > summary { cursor: pointer; font-size: .9rem; color: var(--c-muted); padding: 4px 0; }
.more-langs[open] > summary { margin-bottom: 6px; }
.tool-filter { max-width: 320px; margin: 4px 0 6px; }
.dz-tool-tree { margin-top: 8px; border-top: 1px solid var(--c-line, #e4e7ec); padding-top: 6px; }
.dz-tool-tree .chips { gap: 4px; flex-wrap: wrap; }
.dz-tool-incat { display: grid; gap: 4px; margin-top: 6px; }
.tr-kinds { margin: 14px 0 6px; }
.tr-head a.small { margin-left: auto; }

/* v0.27: Rechnungen, Kontoauszüge, Mail-Center-Suche */
.inv-items td { vertical-align: top; }
.inv-items textarea { min-width: 220px; min-height: 2.4em; }
.inv-items .in-sm { width: 6.5em; }
.inv-totals { display: grid; gap: 4px; justify-content: end; margin: 10px 0 16px; }
.inv-totals > div { display: flex; gap: 24px; justify-content: space-between; min-width: 260px; }
.inv-totals .inv-sum { border-top: 2px solid var(--c-text, #151b26); padding-top: 4px; font-size: 1.1rem; }
.bank-list { list-style: none; margin: 0; padding: 0; }
.bank-tx { padding: 12px 0; border-bottom: 1px solid var(--c-line); display: grid; gap: 4px; }
.bank-tx:last-child { border-bottom: 0; }
.bank-head { display: flex; justify-content: space-between; gap: 10px; }
.bank-head .pos { color: #027a48; } .bank-head .neg { color: #b42318; }
.bank-purpose { overflow-wrap: anywhere; }
.bank-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.bank-actions select { max-width: 100%; }
.bank-book summary { list-style: none; cursor: pointer; }
.bank-book[open] { flex-basis: 100%; }
.nl-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 600px) { .inv-totals > div { min-width: 0; } .inv-items textarea { min-width: 160px; } }
/* Abzeichen + Rangliste (v0.28) */
.awards { display: inline-flex; gap: 2px; vertical-align: middle; }
.award { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--c-bg); border: 1px solid var(--c-line); font-size: .95em; }
.award-legend { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.award-legend li.open .award { filter: grayscale(1); opacity: .5; }
.lvl-awards { margin: 10px 0; }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--c-line); }
.rank-row.is-me { background: color-mix(in srgb, var(--c-accent) 14%, transparent); }
.rank-place { font-weight: 800; font-size: 1.1em; text-align: center; }
.rank-who { display: flex; gap: 10px; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.rank-who span { min-width: 0; overflow-wrap: anywhere; }
.rank-pts { font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) { .rank-row { grid-template-columns: 34px minmax(0, 1fr) auto; } .rank-row .awards { grid-column: 2; } }

/* ===== v0.29 · Kopfzeile & Menü wie im bisherigen SKIBit ===== */
.topbar { z-index: 300; }
.topbar:has(details.am[open]), .topbar:has(.bell-panel:not([hidden])), .topbar:has(details.acct-menu[open]) { z-index: 99990; }
.hdr-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand tk act"; align-items: center; column-gap: 16px; row-gap: 8px; min-height: 76px;
  padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
.hdr-in:not(.has-tk) { grid-template-areas: "brand . act"; }
.hdr-brand { grid-area: brand; position: relative; display: inline-flex; align-items: center; }
.page-public .hdr-brand img, .hdr-brand img { width: var(--hdr-logo-w, 250px); max-width: min(var(--hdr-logo-w, 250px), 46vw); height: auto; max-height: none; display: block; object-fit: contain; object-position: left center; transform-origin: left center; position: relative; z-index: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.hdr-tk { grid-area: tk; align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 0; }
.hdr-act { grid-area: act; display: flex; align-items: center; gap: 10px; justify-self: end; }
.topbar-in .brand img.brand-logo { width: var(--hdr-logo-w, 250px); max-width: min(var(--hdr-logo-w, 250px), 40vw); height: auto; max-height: 64px; object-fit: contain; object-position: left center; }
@media (max-width: 600px) {
  .page-public .hdr-brand img, .hdr-brand img { width: var(--hdr-logo-w-m, 190px); max-width: min(var(--hdr-logo-w-m, 190px), 45vw); }
  .hdr-act { gap: 6px; }
  .hdr-in { column-gap: 10px; }
}
@keyframes skib-logo-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(var(--lp-scale, 1.025)); } }
@media (prefers-reduced-motion: reduce) { .topbar .brand img { animation: none !important; } }

/* Logo-Werkstatt: Lichtschein HINTER dem Logo (Logo-Form ∩ wanderndes Lichtband) */
.skib-logofx { position: absolute; pointer-events: none; z-index: 0; overflow: visible; }
.skib-lfx-w { position: absolute; inset: 0; opacity: 0; filter: blur(var(--blur, 7px)); will-change: opacity; }
.skib-lfx-z { position: absolute; inset: 0; background: var(--c, #ffc400);
  -webkit-mask: var(--logo) center / 100% 100% no-repeat, var(--band, linear-gradient(#000, #000)); -webkit-mask-composite: source-in;
  mask: var(--logo) center / 100% 100% no-repeat, var(--band, linear-gradient(#000, #000)); mask-composite: intersect; }
.skib-lfx-sparks { position: absolute; inset: 0; overflow: visible; }
.skib-lfx-spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 6px 2px var(--sc, #ffc400); }
.skib-lfx-chip { position: absolute; width: 3px; height: 3px; border-radius: 1px; background: #c9a36a; }
.skib-lfx-glint { position: absolute; z-index: 1; opacity: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 220, .95) 50%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 120% 0;
  -webkit-mask: var(--logo) center / 100% 100% no-repeat; mask: var(--logo) center / 100% 100% no-repeat; }
.brand.has-logofx img { animation: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }

/* Tilt (Neigen mit der Maus) */
.tilt { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .16s ease-out; will-change: transform; }

/* runde Knöpfe in der Kopfzeile (Glocke, Nachrichten) */
.hdr-round { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bell-bg, #151b26); color: var(--bell-fg, #ffc400);
  border: 2px solid color-mix(in srgb, var(--bell-fg, #ffc400) 55%, transparent); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: transform .15s; }
.hdr-round:hover { transform: translateY(-1px); text-decoration: none; color: var(--bell-fg, #ffc400); }
.hdr-round .ic, .hdr-round img.ic { width: 26px; height: 26px; }
.hdr-round .nav-count { top: -4px; right: -4px; min-width: 21px; height: 21px; line-height: 21px; box-shadow: 0 0 0 2px var(--bell-bg, #151b26); background: #dc2626; }
.hdr-bell.ring .ic { animation: skib-bell-ring 2.4s ease-in-out 1; transform-origin: 50% 10%; }
@keyframes skib-bell-ring { 0%, 60%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(16deg); } 10%, 20%, 30% { transform: rotate(-14deg); } 40% { transform: rotate(6deg); } 50% { transform: rotate(-4deg); } }
@media (max-width: 700px) { .hdr-round { width: 40px; height: 40px; } .hdr-round .ic, .hdr-round img.ic { width: 22px; height: 22px; } }
.bell { position: relative; }
.bell-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--c-surface); color: var(--c-ink);
  border-radius: 16px; box-shadow: 0 18px 48px rgba(16, 24, 40, .32); border: 1px solid var(--c-line); overflow: hidden; z-index: 2; }
.bell-panel[hidden] { display: none; }
.bell-panel.loading { padding: 18px; }
.bp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--c-line); }
.bp-head strong { display: inline-flex; gap: 6px; align-items: center; }
.bp-tools { display: inline-flex; align-items: center; gap: 6px; }
.bp-link { border: 0; background: none; color: var(--c-info); font: 600 .86rem var(--font); cursor: pointer; padding: 4px 6px; }
.bp-gear { color: var(--c-muted); display: inline-flex; padding: 4px; }
.bp-body { overflow-y: auto; padding: 6px 8px; }
.bp-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin: 8px 6px 4px; }
.bp-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; color: var(--c-ink); text-decoration: none; }
.bp-item:hover { background: var(--c-soft); text-decoration: none; }
.bp-item.read { opacity: .65; }
.bp-item.unread .bp-txt b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #dc2626; margin-right: 6px; vertical-align: 2px; }
.bp-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--c-dark, #151b26); color: var(--c-accent); }
.bp-ic .ic { width: 17px; height: 17px; }
.bp-txt { display: flex; flex-direction: column; min-width: 0; }
.bp-txt b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; }
.bp-txt small { color: var(--c-muted); }
.bp-empty { color: var(--c-muted); text-align: center; padding: 16px; margin: 0; }
.bp-all { display: block; text-align: center; padding: 10px; border-top: 1px solid var(--c-line); font-weight: 700; }

/* Avatar-Knopf + Haupt-Menü */
.am { position: relative; }
.am > summary { list-style: none; cursor: pointer; }
.am > summary::-webkit-details-marker { display: none; }
.am-btn { position: relative; display: grid; place-items: center; width: var(--hdr-av, 68px); height: var(--hdr-av, 68px); border-radius: 50%; border: 1px solid #ffffff36; background: #ffffff12; box-shadow: 0 4px 14px #0003; transition: transform .15s, border-color .15s; }
.am-btn:hover, .am[open] > .am-btn, .am-btn:focus-visible { transform: scale(1.045); border-color: #ffc40088; }
.am-btn .am-av { width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 50%; object-fit: cover; border: 2px solid #ffffffcf; box-shadow: 0 0 0 2px #101722; }
.am-role { position: absolute; right: -2px; bottom: -2px; width: 34%; height: 34%; min-width: 20px; min-height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e6aa00; color: #151b26; font-size: 12px; box-shadow: 0 0 0 2px #151b26; }
.am-unread { position: absolute; top: 0; right: 0; }
.am-unread .nav-count { position: static; display: inline-block; }
.am-power { color: var(--c-accent); }
.am-power .ic { width: 58%; height: 58%; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-accent) 70%, transparent)); }
@media (max-width: 600px) { .am-btn { width: var(--hdr-av-m, 58px); height: var(--hdr-av-m, 58px); } }
.am-pop { position: absolute; right: 0; top: calc(100% + 10px); width: min(var(--am-width, 350px), calc(100vw - 20px)); max-height: calc(100dvh - 120px); overflow-y: auto; background: var(--c-surface); color: var(--am-color, #111827);
  border-radius: 18px; box-shadow: 0 22px 54px rgba(16, 24, 40, .32); border: 1px solid var(--c-line); padding: 8px; display: flex; flex-direction: column; gap: 2px; isolation: isolate; }
@media (max-width: 600px) { .am-pop { width: min(var(--am-width-m, 340px), calc(100vw - 10px)); right: -5px; } }
.am-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--c-line); color: inherit; text-decoration: none; margin-bottom: 4px; }
.am-head:hover { text-decoration: none; border-color: var(--am-accent, #ffc400); }
.am-head .avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.am-head b { font-size: 1.05rem; }
.am-title { font-weight: 800; padding: 8px 10px; font-size: var(--am-text, 13px); }
.am-row { display: grid; grid-template-columns: calc(var(--am-icon, 28px) + 4px) minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 43px; padding: 5px 8px; border-radius: 11px; color: var(--am-color, #111827); text-decoration: none;
  background: none; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; list-style: none; }
.am-row::-webkit-details-marker { display: none; }
.am-row:hover, .am-row:focus-visible { background: var(--c-soft); text-decoration: none; color: var(--am-color, #111827); }
.am-ic { width: var(--am-icon, 28px); height: var(--am-icon, 28px); border-radius: 9px; display: inline-grid; place-items: center; background: var(--c-dark, #151b26); color: var(--am-accent, #ffc400); flex: none; font-size: calc(var(--am-icon, 28px) * .6); }
.am-ic svg, .am-ic img { width: 60%; height: 60%; }
.am-flag { background: none; font-size: calc(var(--am-icon, 28px) * .8); }
.am-t { display: flex; flex-direction: column; min-width: 0; }
.am-t b { font-size: var(--am-text, 13px); font-weight: var(--am-weight, 700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-t small { font-size: 10px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.am-r { color: var(--c-muted); font-size: .78rem; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; }
.am-r .nav-count { position: static; display: inline-block; }
.am-r .nav-count[hidden] { display: none; }
.am-h { font-size: var(--am-h-size, 10px); color: var(--am-h-color, #667085); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: var(--am-gap, 7px) 6px 2px; }
.am-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 2px 0 var(--am-gap, 7px); }
.am-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.am-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.am-tiles-1 { grid-template-columns: minmax(0, 1fr); }
.am-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 10px 4px; border: 1px solid #e3e7ec; border-radius: 11px; color: var(--am-color, #111827); text-decoration: none; min-width: 0; }
.am-tile b { font-size: 10px; font-weight: var(--am-weight, 700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.am-tile:hover, .am-tile:focus-visible { border-color: var(--am-accent, #ffc400); box-shadow: inset 0 0 0 1px var(--am-accent, #ffc400); text-decoration: none; color: var(--am-color, #111827); }
.am-access .am-tile, .am-tiles:has(.am-admin) .am-tile { flex-direction: row; justify-content: flex-start; padding: 10px; }
.am-tile.am-admin .am-ic { background: var(--am-admin, #b42318); color: #fff; }
.am-tile.am-moderation .am-ic { background: var(--am-mod, #18864b); color: #fff; }
.am-tile.am-admin:hover { border-color: var(--am-admin, #b42318); box-shadow: inset 0 0 0 1px var(--am-admin, #b42318); }
.am-tile.am-moderation:hover { border-color: var(--am-mod, #18864b); box-shadow: inset 0 0 0 1px var(--am-mod, #18864b); }
.am-tiles:has(.am-admin) .am-tile b { font-size: var(--am-text, 13px); }
.am-lang > summary { cursor: pointer; }
.am-lang[open] .am-r svg { transform: rotate(180deg); }
.am-langs { list-style: none; margin: 2px 0 4px; padding: 0 0 0 42px; display: grid; gap: 2px; }
.am-langs a { display: block; padding: 6px 8px; border-radius: 8px; color: var(--am-color, #111827); font-weight: 600; font-size: var(--am-text, 13px); }
.am-langs a:hover { background: var(--c-soft); text-decoration: none; }
.am-langs a.active { color: var(--c-ink); background: color-mix(in srgb, var(--am-accent, #ffc400) 22%, transparent); }
.am-logout-f { margin: 2px 0 0; border-top: 1px solid var(--c-line); padding-top: 4px; }
.am-logout, .am-logout:hover { color: var(--c-bad); }
.am-logout .am-ic { background: color-mix(in srgb, var(--c-bad) 12%, #fff); color: var(--c-bad); }
.am-logout .am-t b { color: var(--c-bad); }

/* Sparstand-Chip wie bisher: Goldrand, Goldschrift; Standard nur auf dem Handy */
.hdr-act .save-chip { height: 36px; padding: 0 12px; border: 1px solid rgba(255, 196, 0, .55); background: rgba(255, 255, 255, .08); color: #ffc400; font-weight: 800; font-size: 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.hdr-act .save-chip:hover { background: rgba(255, 196, 0, .16); color: #ffc400; }
@media (min-width: 761px) { .hdr-act .save-chip.sc-mobile { display: none; } }
@media (max-width: 400px) { .hdr-act .save-chip { padding: 0 8px; font-size: 12px; } .hdr-act .save-chip .sc-pig { display: none; } }

/* Lupe */
.tz-pop { position: fixed; z-index: 100050; pointer-events: none; width: var(--tz-size, 340px); max-width: calc(100vw - 16px); background: var(--tz-bg, #fff); border: var(--tz-border-w, 3px) solid var(--tz-border, #ffc400); border-radius: var(--tz-radius, 18px);
  box-shadow: var(--tz-shadow, 0 18px 48px rgba(10, 16, 28, .35)); padding: 10px; opacity: 0; transform: scale(.92); transition: opacity .14s, transform .14s; left: -9999px; top: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; overflow: hidden; }
.tz-pop.on { opacity: 1; transform: none; }
.tz-pop img { width: 100%; height: auto; max-height: var(--tz-size, 340px); object-fit: contain; border-radius: calc(var(--tz-radius, 18px) * .6); }
.tz-cap { background: var(--tz-border, #ffc400); color: #151b26; font-weight: 800; font-size: .82rem; padding: 3px 10px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-cap[hidden] { display: none; }
.tz-viewer { border: 0; border-radius: 18px; padding: 14px; max-width: min(92vw, 720px); text-align: center; }
.tz-viewer::backdrop { background: rgba(10, 15, 23, .7); }
.tz-viewer figure { margin: 0 0 10px; }
.tz-viewer img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.tz-viewer figcaption { font-weight: 700; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .tz-pop { transition: none; } }

/* Zurück-Knopf: oben unter der Kopfzeile, Symbol wählbar */
.smart-back { padding: 0 var(--sb-pad, 15px); }
.smart-back svg, .smart-back .ic { width: var(--sb-icon, 22px); height: var(--sb-icon, 22px); }
.smart-back.sb-icon { padding: 0; }
.smart-back.sb-floating-left, .smart-back.sb-floating-right { position: fixed; top: calc(var(--hdr-h, 92px) + 14px); bottom: auto; z-index: 250; }
.smart-back.sb-floating-left { left: max(14px, env(safe-area-inset-left)); }
.smart-back.sb-floating-right { right: max(14px, env(safe-area-inset-right)); }
.main:has(> .smart-back.sb-floating-left), .main:has(> .smart-back.sb-floating-right) { padding-top: calc(var(--sb-size, 48px) + 36px); }
@media (max-width: 760px) {
  .smart-back.sb-floating-left, .smart-back.sb-floating-right { top: calc(var(--hdr-h, 92px) + 9px); }
  .smart-back.sb-floating-left { left: 9px; } .smart-back.sb-floating-right { right: 9px; }
  .main:has(> .smart-back.sb-floating-left), .main:has(> .smart-back.sb-floating-right) { padding-top: calc(var(--sb-size, 48px) + 22px); }
}
.smart-back.sb-pulse-intro { animation: sb-pulse2 var(--sb-pulse-t, 1.55s) ease-out 3; }
.smart-back.sb-pulse-continuous { animation: sb-pulse2 var(--sb-pulse-t, 1.55s) ease-out infinite; }
@keyframes sb-pulse2 { 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-accent, #ffc400) 60%, transparent); } 40% { transform: scale(var(--sb-pulse-s, 1.035)); } 100% { transform: scale(1); box-shadow: 0 0 0 var(--sb-pulse-r, 5px) transparent; } }

/* Startseite: drei Bereiche wie bisher */
.hub-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hub-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: 18px; background: var(--c-surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }
.hub-tile .ht-icon { font-size: 34px; line-height: 1; }
.hub-tile b { font-size: 1.1rem; margin-top: 4px; }
.hub-tile small { flex: 1; }
.hub-tile .ht-btn { margin-top: 6px; }
.ht-n { background: var(--c-accent); color: var(--c-accent-ink); border-radius: 999px; padding: 0 7px; font-size: .78rem; }
@media (max-width: 760px) { .hub-tiles { grid-template-columns: minmax(0, 1fr); } }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sec-head h2 { margin-bottom: .5em; }
.hero-logo.tilt { transform-origin: center; }
.hdr-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--c-dark, #151b26); border-radius: 12px; padding: 8px 10px; overflow: hidden; }
.hdr-preview img { max-width: 60%; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.hdr-preview-av { flex: none; border-radius: 50%; background: #ffffff22; border: 2px solid #ffffffcf; max-width: 110px; max-height: 110px; }
.am-preview .am-pop { position: static; width: auto; max-height: none; box-shadow: none; }
.am-adm-sec { margin: 14px 0 4px; }
.am-adm-item { border: 1px solid var(--c-line); border-radius: 10px; margin-bottom: 6px; background: var(--c-surface); }
.am-adm-item > summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; flex-wrap: wrap; }
.am-adm-item > summary small { flex: 1 1 auto; }
.am-adm-item .in-num { width: 80px; }
.am-adm-ic { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--c-dark, #151b26); color: var(--c-accent); flex: none; }
.am-adm-ic svg, .am-adm-ic img { width: 18px; height: 18px; }
.am-adm-on { margin: 0; }
.am-adm-body { padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.ticker-preview .hdr-tk { flex: 1; display: flex; }
@media (max-width: 600px) { .bell-panel { position: fixed; left: 8px; right: 8px; top: calc(var(--hdr-h, 130px) + 4px); width: auto; } }

/* ===== v0.30 · Startseite & Themen wie im bisherigen SKIBit ===== */
.hero-home { background: linear-gradient(135deg, color-mix(in srgb, var(--hero-bg, var(--c-dark, #151b26)) 85%, #fff 8%), var(--hero-bg, var(--c-dark, #151b26))); }
.hero-home .hero-search .btn-accent { background: var(--hero-accent, var(--c-accent)); border-color: var(--hero-accent, var(--c-accent)); color: #151b26; }
.hero-home .hero-stats b, .hero-home .hero-savings b { color: var(--hero-accent, var(--c-accent)); }
.hero-stats a { color: #fff; text-decoration: none; }
.hero-split .hero-brand { display: contents; }
.hero-stacked { display: block; text-align: left; }
.hero-stacked .hero-brand { display: flex; justify-content: center; margin: -4px 0 22px; }
.hero-stacked .hero-logo { width: min(390px, 44vw); max-width: 100%; max-height: 340px; object-fit: contain; }
.hero-copy-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.hero-text { min-width: 0; }
.hero-split .hero-copy-row { display: block; }
.hero-stacked .hero-savings { flex: none; min-width: 230px; margin: 0; background: rgba(255, 255, 255, .93); color: #151b26; border: 0; border-radius: 18px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); justify-content: space-between; }
.hero-stacked .hero-savings:hover { background: #fff; color: #151b26; }
.hero-stacked .hero-savings small { color: #475467; }
.hero-stacked .hero-savings b { color: #151b26; font-size: 1.6rem; }
.hero-split .hero-savings { margin-top: 14px; }
.hero-savings > span:first-child { display: flex; flex-direction: column; }
.hero-stacked .hero-search { width: 100%; }
.hero-stacked .hero-search input { font-size: 1.05rem; }
@media (max-width: 760px) {
  .hero-stacked { text-align: center; }
  .hero-stacked .hero-logo { width: min(320px, 78vw); max-height: 290px; }
  .hero-copy-row { justify-content: center; }
  .hero-stacked .hero-savings { display: none; }
}
@media (max-width: 430px) { .hero-stacked .hero-logo { width: min(290px, 82vw); max-height: 260px; } .hero-stacked .hero-brand { margin-bottom: 18px; } }
.hero-particles.fg { z-index: 5; }
.hero-tool { filter: blur(var(--fblur, 0px)) drop-shadow(0 4px 10px rgba(0, 0, 0, .3)) drop-shadow(0 0 calc(var(--react, 0) * 14px) var(--hero-accent, #ffd25d)); }
/* Werkstatt-Materialisierung */
.hero-home.has-ws .hero-brand { display: none; }
.hero-ws { --idle-a: none; --glow-a: none; position: relative; z-index: 3; width: 100%; margin: -6px auto 16px; padding: 4px 0; perspective: 900px; pointer-events: none; }
.wm-stage { --rx: 0deg; --ry: 0deg; --wm-shadow: drop-shadow(0 16px 22px rgba(0, 0, 0, .42)); position: relative; width: min(calc(clamp(150px, 28vw, 220px) * var(--wm-size, 1)), 86vw); max-height: calc(340px * var(--wm-size, 1)); aspect-ratio: 1254/1219; margin: 0 auto; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .16s ease-out; pointer-events: auto; filter: var(--wm-shadow); }
.hero-ws.glow-on .wm-stage { filter: var(--wm-shadow) drop-shadow(0 0 var(--lg-r, 18px) var(--lg-c, rgba(255, 196, 0, .55))); }
.wm-fragments, .wm-final-logo { position: absolute; inset: 0; width: 100%; height: 100%; }
.wm-final-logo { object-fit: contain; opacity: 0; transform: scale(.96); transition: opacity .22s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
.wm-fragment { position: absolute; display: block; background-repeat: no-repeat; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 0 5px rgba(255, 207, 70, .25)); }
.wm-stage.is-assembling .wm-fragment { animation: wmSnap var(--wm-snap, 920ms) cubic-bezier(.16, .78, .18, 1.12) both; animation-delay: var(--delay, 0ms); }
.wm-stage.is-assembling .wm-final-logo { animation: wmLogoReveal var(--wm-logo, 420ms) ease-out both; animation-delay: var(--wm-logo-delay, 930ms); }
.wm-stage.is-built .wm-final-logo { opacity: 1; transform: scale(1); }
.wm-stage.is-built .wm-fragment { opacity: 0; }
.wm-hardware { position: absolute; z-index: 3; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.wm-nut { width: 16px; height: 16px; border: 3px solid rgba(216, 226, 236, .82); clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%); left: calc(4% + (var(--n) * 17%)); top: calc(16% + (var(--m2) * 67%)); }
.wm-screw { width: 8px; height: 24px; border-radius: 4px; background: linear-gradient(90deg, #78818b, #e9f0f5 48%, #6d747c); left: calc(6% + (var(--n) * 14%)); top: calc(5% + (var(--m3) * 42%)); }
.wm-screw::before { content: ""; position: absolute; left: -4px; top: -5px; width: 16px; height: 8px; border-radius: 50%; background: linear-gradient(#e8eef2, #6e7780); }
.wm-rail { width: 38px; height: 5px; border-radius: 4px; background: linear-gradient(90deg, #707982, #f0f4f7, #6c747d); left: calc(11% + (var(--n) * 22%)); top: calc(28% + (var(--m2) * 45%)); }
.wm-stage.is-assembling .wm-hardware { animation: wmHardware var(--wm-hardware, 980ms) cubic-bezier(.16, .82, .2, 1.15) both; animation-delay: var(--hdelay, 130ms); }
.wm-stage.is-built .wm-hardware { opacity: 0; }
.wm-shockwave { position: absolute; inset: 46% auto auto 50%; width: 20px; height: 20px; border: 2px solid rgba(255, 207, 70, .9); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.2); pointer-events: none; }
.wm-stage.is-assembling .wm-shockwave { animation: wmShock var(--wm-shock, 650ms) ease-out both; animation-delay: var(--wm-shock-delay, 890ms); }
.wm-sweep { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  /* nur das Logo selbst hellt auf: Lichtband als Hintergrund, ausgeschnitten mit der Logo-Form; Farbe/Stärke/Breite/Richtung aus den Einstellungen (v0.43/v0.44) */
  background: linear-gradient(var(--wm-shine-angle, 105deg), transparent calc(50% - var(--wm-shine-hw, 6%)), var(--wm-shine-c2, rgba(255, 238, 190, .3)) calc(50% - var(--wm-shine-hw, 6%) / 2), var(--wm-shine-c, rgba(255, 251, 232, .85)) 50%, var(--wm-shine-c2, rgba(255, 238, 190, .3)) calc(50% + var(--wm-shine-hw, 6%) / 2), transparent calc(50% + var(--wm-shine-hw, 6%))) no-repeat;
  background-size: var(--wm-shine-size, 250% 100%); background-position: 100% 0;
  -webkit-mask: var(--wm-mask) center / contain no-repeat; mask: var(--wm-mask) center / contain no-repeat; }
@supports not ((mask-image: none) or (-webkit-mask-image: none)) { .wm-sweep { display: none; } }
.wm-stage.is-assembling .wm-sweep { animation: var(--wm-shine-anim, wmSweep) var(--wm-sweep-time, 900ms) ease-in-out both; animation-delay: var(--wm-sweep-delay, 1020ms); }
.wm-stage.is-built.is-shining .wm-sweep { animation: var(--wm-shine-anim, wmSweep) var(--wm-sweep-time, 900ms) ease-in-out both; }
.wm-stage.is-built { animation: var(--idle-a), var(--glow-a); }
.hero-ws.idle-float { --idle-a: wmFloat 5.4s ease-in-out infinite; }
.hero-ws.idle-breath { --idle-a: wmBreath 4.2s ease-in-out infinite; }
.hero-ws.idle-swing { --idle-a: wmSwing 5.6s ease-in-out infinite; }
.hero-ws.glow-pulse { --glow-a: wmGlow 2.8s ease-in-out infinite; }
/* Auftritte ohne Werkstatt-Teile (v0.47) */
.hero-ws:not(.intro-workshop) .wm-stage.is-assembling .wm-final-logo { animation: var(--wm-in-anim, wmInFade) var(--wm-in, 750ms) both; }
.hero-ws.intro-fade { --wm-in-anim: wmInFade; }
.hero-ws.intro-zoom { --wm-in-anim: wmInZoom; }
.hero-ws.intro-drop { --wm-in-anim: wmInDrop; }
.hero-ws.intro-spin { --wm-in-anim: wmInSpin; }
.hero-ws.intro-pop { --wm-in-anim: wmInPop; }
.hero-ws.intro-none .wm-final-logo, .hero-ws.intro-none .wm-stage .wm-final-logo { opacity: 1; transform: none; transition: none; }
.hero-ws.no-sparks .wm-shockwave, .hero-ws.no-shine .wm-sweep { display: none; }
@keyframes wmSnap { 0% { opacity: 0; transform: translate3d(var(--sx), var(--sy), 80px) rotate(var(--sr)) scale(.28); } 60% { opacity: 1; } 82% { transform: translate3d(-3px, 2px, 3px) rotate(-1.3deg) scale(1.025); } 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); } }
@keyframes wmLogoReveal { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes wmHardware { 0% { opacity: 0; transform: translate3d(calc((var(--n) - 3) * 80px), -230px, 60px) rotate(130deg) scale(.4); } 62% { opacity: .9; transform: translate3d(0, 0, 0) rotate(0) scale(1); } 100% { opacity: 0; transform: translate3d(0, 0, -20px) rotate(90deg) scale(.35); } }
@keyframes wmShock { 0% { opacity: .85; transform: translate(-50%, -50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(12); } }
@keyframes wmSweep { 0% { opacity: 0; background-position: 100% 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }
@keyframes wmSweepR { 0% { opacity: 0; background-position: 0 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; background-position: 100% 0; } }
@keyframes wmSweepT { 0% { opacity: 0; background-position: 0 100%; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }
@keyframes wmSweepB { 0% { opacity: 0; background-position: 0 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; background-position: 0 100%; } }
@keyframes wmFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes wmBreath { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
@keyframes wmSwing { 0%, 100% { rotate: 0deg; } 25% { rotate: 1.8deg; } 75% { rotate: -1.8deg; } }
@keyframes wmGlow { 0%, 100% { filter: var(--wm-shadow) drop-shadow(0 0 var(--lg-r, 18px) var(--lg-c, rgba(255, 196, 0, .55))); } 50% { filter: var(--wm-shadow) drop-shadow(0 0 calc(var(--lg-r, 18px) * 2.1) var(--lg-c, rgba(255, 196, 0, .55))); } }
@keyframes wmInFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wmInZoom { 0% { opacity: 0; transform: scale(2.1); filter: blur(6px); } 70% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1); filter: none; } }
@keyframes wmInDrop { 0% { opacity: 0; transform: translateY(-140%); animation-timing-function: cubic-bezier(.5, 0, .9, .5); } 15% { opacity: 1; } 58% { transform: translateY(0) scale(1.06, .9); animation-timing-function: ease-out; } 74% { transform: translateY(-9%) scale(.98, 1.03); animation-timing-function: ease-in; } 88% { transform: translateY(0) scale(1.02, .97); } 100% { opacity: 1; transform: none; } }
@keyframes wmInSpin { 0% { opacity: 0; transform: rotate(-200deg) scale(.25); } 80% { opacity: 1; transform: rotate(8deg) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes wmInPop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.14); } 80% { transform: scale(.96); } 100% { opacity: 1; transform: none; } }
@media (max-width: 700px) { .wm-stage { width: min(calc(150px * var(--wm-size, 1)), 82vw); } }
@media (prefers-reduced-motion: reduce) { .wm-stage, .wm-fragment, .wm-hardware, .wm-final-logo, .wm-shockwave, .wm-sweep { animation: none !important; transition: none !important; } .wm-stage.is-built .wm-final-logo { opacity: 1; } }
.hero-admin-preview .hero-preview { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 10px; }
.hero-admin-preview .hero-preview .hero-brand { margin: 0; }
.hero-admin-preview .hero-preview .hero-logo { width: 160px; max-height: 150px; }
.hpick-cat { border: 1px solid var(--c-line); border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; }
.hpick-cat > summary { cursor: pointer; }
.hpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.hpick-item { border: 1px solid var(--c-line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--c-soft); }
.hpick-item.on { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); background: #fff; }
.hpick-item label { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.hpick-item img { width: 64px; height: 64px; object-fit: contain; background: #151b26; border-radius: 8px; padding: 4px; }
.hpick-item .check small { font-size: .75rem; }
.hpick-nums { display: flex; gap: 4px; }
.hpick-nums .in-num { width: 50%; min-height: 30px; padding: 2px 6px; font-size: .85rem; }
.hpick-count { font-weight: 800; }
.lib-list { display: flex; flex-direction: column; gap: 8px; }
.lib-item { display: flex; align-items: center; gap: 10px; }
.lib-item img { width: 56px; height: 56px; object-fit: contain; background: #151b26; border-radius: 8px; padding: 4px; }
.lib-item select { max-width: 200px; }
.tag-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.theme-thumbs { display: inline-flex; gap: 2px; vertical-align: middle; }
.theme-thumbs img { width: 22px; height: 22px; object-fit: contain; background: #151b26; border-radius: 5px; padding: 1px; }

/* ===== v0.31 Profil & Abschluss ===== */
.profile-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 4px 2px 10px; border-bottom: 1px solid var(--c-line); }
.profile-tabs a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 12px; border-radius: 999px; color: var(--c-ink); background: var(--c-surface, #fff); border: 1px solid var(--c-line); font-size: .92rem; text-decoration: none; }
.profile-tabs a:hover { border-color: var(--c-accent); }
.profile-tabs a.on { background: var(--c-dark, #151b26); color: #fff; border-color: var(--c-dark, #151b26); }
.profile-tabs a .ic, .profile-tabs a svg { width: 16px; height: 16px; flex: none; }
.stat-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--c-surface, #fff); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; }
.stat-tile b { font-size: 1.7rem; line-height: 1.1; }
.stat-tile span { color: var(--c-muted); font-size: .9rem; }
.stat-tile.ok b { color: var(--c-ok); } .stat-tile.stop b { color: var(--c-bad); }
.stat-tile.save { border-color: #fde68a; background: #fffbeb; } .stat-tile.save:hover { border-color: var(--c-accent); }
@media (max-width: 900px) { .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-tile.save { grid-column: span 2; } }
.history-list { display: grid; gap: 10px; }
.history-card { border: 1px solid var(--c-line); border-left: 4px solid var(--c-ok); border-radius: 12px; padding: 10px 14px; }
.history-card.stop { border-left-color: var(--c-bad); }
.history-card p { margin: 4px 0; }
.hc-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hc-head small { margin-left: auto; }
.hc-saved { color: var(--c-ok); }
.hc-actions { margin-top: 6px; }
.tag-stop { background: #fef3f2; color: var(--c-bad); }
.check.remember small { display: block; font-size: .8rem; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.link-list a { display: inline-flex; gap: 8px; align-items: center; }
/* Abschluss 1/2 → 2/2 → fertig */
.stage-hint { background: var(--c-info-bg); border-radius: 12px; padding: 10px 14px; margin: 14px 0 6px; }
.stage-hint b { display: block; color: var(--c-info); }
.saving-form { align-items: stretch; max-width: 460px; }
.saving-form .sb-title { text-align: center; font-weight: 700; color: var(--c-ok); }
.sb-rows { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 8px 0; align-items: center; }
.sb-rows dt { color: var(--c-muted); } .sb-rows dd { margin: 0; text-align: right; font-weight: 600; }
.sb-rows .total { font-size: 1.15rem; color: var(--c-ok); padding-top: 6px; border-top: 1px dashed #abefc6; }
.sb-rows .total output { font-size: 1.6rem; font-weight: 800; }
.sb-input { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.sb-input input { width: 120px; text-align: right; }
.saving-form .btn-row { justify-content: center; }
.saving-box.done { opacity: .95; }
.finish-box { text-align: center; background: var(--c-ok-bg); border-radius: 16px; padding: 16px; margin: 16px 0 6px; }
.finish-box .btn-row { justify-content: center; }
.stop-xp .stories li p { margin: 2px 0; }
/* Fortschritt: fünf Balken */
.step-progress { display: flex; gap: 7px; margin: 0 0 12px; }
.step-progress i { height: 8px; flex: 1; border-radius: 99px; background: #dfe4ea; }
.step-progress i.done { background: #667386; }
.step-progress i.current { background: var(--c-accent); }
.step-progress.is-done i { background: var(--c-ok); }
.step-progress.is-stop i { background: var(--c-bad); }
.gcard-title mark { background: #fff3b0; color: inherit; border-radius: 3px; padding: 0 1px; }
.sb-rows dt { text-align: left; }
.stat-tile.save, .stat-tile.save b, .stat-tile.save span { text-decoration: none; }
@media (max-width: 480px) { .sb-rows { grid-template-columns: 1fr auto; gap: 6px 8px; } .sb-input input { width: 92px; } }

/* ===== v0.32 Mitglieder & Community ===== */
/* Abzeichen am Avatar */
.av-wrap { position: relative; display: inline-block; width: var(--av, 40px); height: var(--av, 40px); flex: none; line-height: 0; }
.av-wrap > img, .av-wrap > .avatar { width: 100%; height: 100%; }
.av-badge { position: absolute; right: -5%; bottom: -5%; width: max(14px, calc(var(--avb, 34) * 1%)); height: max(14px, calc(var(--avb, 34) * 1%)); border-radius: 50%; background: var(--badge, #64748b); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  display: grid; place-items: center; font-size: max(9px, calc(var(--av, 40px) * var(--avb, 34) / 170)); line-height: 1; font-weight: 700; }
.av-demo { display: flex; gap: 14px; flex-wrap: wrap; }
.av-demo-img { display: block; border-radius: 50%; background: #e5e7eb; }
.member-facts { display: inline-flex; gap: 8px; align-items: center; }
/* Profildaten */
.pd-form details { border-top: 1px solid var(--c-line); padding: 10px 0; }
.pd-form summary { cursor: pointer; padding: 4px 0; }
.pd-form .actions { position: static; background: none; }
/* Fotos in Nachrichten */
.composer-strip { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; order: 10; }
.cs-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--c-line); }
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cs-x { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.cs-add { width: 64px; height: 64px; border-radius: 10px; border: 2px dashed var(--c-line); background: none; font-size: 22px; cursor: pointer; color: var(--c-muted); }
.chat { position: relative; }
.chat-drop { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(255, 196, 0, .18); border: 3px dashed var(--c-accent); border-radius: inherit; font-weight: 700; font-size: 1.2rem; pointer-events: none; }
.msg-img { position: relative; display: block; }
.att-report { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; text-decoration: none; font-size: 14px; opacity: .85; }
.msg-audio .att-report { position: static; display: inline-grid; background: none; color: var(--c-muted); }
.att-report:hover { opacity: 1; }
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 14, 20, .92); display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: 8px; }
.lightbox button { position: absolute; border: 0; background: rgba(255,255,255,.15); color: #fff; border-radius: 50%; width: 48px; height: 48px; font-size: 28px; cursor: pointer; }
.lightbox button:hover { background: rgba(255,255,255,.3); }
.lb-close { top: 14px; right: 14px; } .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); } .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-save { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); }
body.lb-open { overflow: hidden; }
.report-att img { max-width: 100%; max-height: 360px; border-radius: 8px; }
/* Werkzeugkiste: Ziehen & Ablegen */
.tb-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.tb-head { display: flex; align-items: center; gap: 8px; }
.tb-toggle { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; display: inline-flex; gap: 6px; align-items: center; }
.tb-caret { transition: transform .15s; display: inline-block; }
.tb-closed .tb-caret { transform: rotate(-90deg); }
.tb-closed .tb-items, .tb-closed .tb-empty { display: none; }
.tb-ghandle, .tb-drag { cursor: grab; color: var(--c-muted); user-select: none; touch-action: none; padding: 0 4px; }
.tb-item { position: relative; }
.tb-item .tb-drag { align-self: center; touch-action: none; }
.tb-item { -webkit-touch-callout: none; }
@media (hover: hover) { .tb-item { cursor: grab; } }
.tb-dragging { opacity: .45; }
.tb-dropover { outline: 3px dashed var(--c-accent); outline-offset: 2px; background: #fffbeb; }
.tb-gdragging { opacity: .5; }
.tb-gline { height: 4px; border-radius: 4px; background: var(--c-accent); margin: 4px 0; }
.tb-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; background: var(--c-dark, #151b26); color: #fff; padding: 6px 12px; border-radius: 999px; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
body.tb-drag-on { user-select: none; cursor: grabbing; }
.tb-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1000; display: flex; gap: 12px; align-items: center; background: var(--c-dark, #151b26); color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.3); max-width: calc(100vw - 32px); }

/* ---------- v0.33: Admin & Schutz ---------- */
.turnstile-box { display: grid; gap: 6px; }
.risk { display: inline-block; min-width: 2.2em; padding: 1px 8px; border-radius: 999px; font-weight: 700; text-align: center; }
.risk-low { background: var(--c-ok-bg); color: var(--c-ok); }
.risk-mid { background: var(--c-warn-bg); color: var(--c-warn); }
.risk-high { background: var(--c-bad-bg); color: var(--c-bad); }
.reg-ev code { font-size: .85em; }
.users-stats, .user-figures .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.user-figures .stat small, .perf-estimate .stat small { display: block; margin-top: 2px; }
.users-table .num { text-align: right; white-space: nowrap; }
@media (max-width: 760px) { .users-table .num { text-align: left; } }
.map-legend { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.map-legend li { display: flex; align-items: center; gap: 6px; }
.map-legend .map-dot, .admin-usermap .map-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #111; }
.admin-usermap .map-admin-filter .field { margin-bottom: 6px; }
.perf-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.perf-checks li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; }
.perf-checks li p { margin: 4px 0 0; }
.perf-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; background: var(--c-ok); }
.perf-warn .perf-dot { background: #f59e0b; }
.perf-bad .perf-dot { background: var(--c-bad); }
.perf-info .perf-dot { background: #94a3b8; }
.perf-bad { background: var(--c-bad-bg); border-radius: 8px; padding: 6px; }
.kv > span { color: var(--c-muted); }
.av-admin { position: relative; }
.av-admin .av-ai { position: absolute; top: 4px; left: 4px; font-size: 11px; background: #7c3aed; color: #fff; border: 0; }
.chip-review { border-color: #7c3aed; }
.ai-batch-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-batch-grid figure { margin: 0; width: 96px; text-align: center; }
.ai-batch-grid img { border-radius: 50%; display: block; margin: 0 auto 4px; }
.kv > b { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .perf-group ~ .card .kv, section .kv { grid-template-columns: 1fr; } }

/* ---------- v0.34: Designer-Einstieg, Anleitungen gruppiert, Werkzeug-Baum, Schnellknöpfe ---------- */
.guides-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 12px; }
.guides-bar .seg { display: inline-flex; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: var(--c-surface); }
.guides-bar .seg .btn { border: 0; border-radius: 0; }
.guides-bar .seg .btn.active { background: var(--c-ink); color: #fff; }
.guides-recent { margin-left: auto; position: relative; }
.guides-recent summary { cursor: pointer; font-weight: 600; }
.guides-recent[open] .list { position: absolute; right: 0; z-index: 5; min-width: 300px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 12px; }
@media (max-width: 760px) { .guides-recent { margin-left: 0; } .guides-recent[open] .list { position: static; min-width: 0; } }
.guides-groups { display: flex; flex-direction: column; gap: 10px; }
.gg-cat > summary { cursor: pointer; font-size: 1.05rem; display: flex; gap: 8px; align-items: center; }
.gg-lvl { margin: 8px 0 0 10px; }
.gg-lvl > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--c-ink-2); }
.gg-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.gg-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.gg-list li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--c-soft); }
.gg-list .grow { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.dh-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dh-item { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 10px; }
.dh-main { display: flex; gap: 10px; align-items: center; flex: 1 1 260px; min-width: 0; text-decoration: none; color: inherit; }
.dh-main:hover strong { text-decoration: underline; }
.dh-ic { font-size: 1.4rem; }
.dh-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.dh-check { font-size: .82rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.dh-check.ok { background: var(--c-ok-bg); color: var(--c-ok); }
.dh-check.warn { background: var(--c-warn-bg); color: var(--c-warn); }
.dh-check.bad { background: var(--c-bad-bg); color: var(--c-bad); }
.tool-tree-bar { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 6px; }
.tl-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.tl-inline .inline-row { display: flex; gap: 6px; flex: 1 1 260px; }
.tl-inline input { flex: 1; min-width: 0; }
.notif-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* v0.35 – Leistung & Server wie im bisherigen SKIBit, Sicherheits-Karte */
.ss-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ss-overall { display: flex; align-items: center; gap: 8px; margin: 0; }
.ss-overall .perf-dot { margin-top: 0; }
.ss-warn .perf-dot { background: #f59e0b; } .ss-bad .perf-dot { background: var(--c-bad); }
.ss-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.ss-tile { border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 10px; background: var(--c-soft); min-width: 0; }
.ss-tile span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.ss-tile b { display: block; overflow-wrap: anywhere; line-height: 1.25; }
.ss-tile small { display: block; color: var(--c-muted); font-size: .78rem; overflow-wrap: anywhere; }
.ss-sys { margin: 4px 0 0; overflow-wrap: anywhere; }
.ss-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--c-line); margin: 14px 0 12px; overflow-x: auto; scrollbar-width: thin; }
.ss-tabs a { padding: 8px 12px; color: var(--c-muted); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; font-weight: 600; }
.ss-tabs a[aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.ss-tabs a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.ss-pane > * + * { margin-top: 12px; }
.ss-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-sum { font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ss-sum.is-ok { background: var(--c-ok-bg); color: var(--c-ok); } .ss-sum.is-warn { background: var(--c-warn-bg); color: var(--c-warn); }
.ss-sum.is-bad { background: var(--c-bad-bg); color: var(--c-bad); } .ss-sum.is-info { background: var(--c-info-bg); color: var(--c-info); }
.ss-gh { display: flex; align-items: center; gap: 6px; font-size: .95rem; margin: 14px 0 8px; }
.ss-gh svg { width: 18px; height: 18px; }
.perf-row { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.perf-row strong { flex: 1 1 220px; }
.perf-row .perf-val { text-align: right; flex: 0 1 auto; overflow-wrap: anywhere; }
.perf-row .perf-tip { flex-basis: 100%; background: var(--c-soft); border-radius: 6px; padding: 6px 8px; }
@media (max-width: 600px) { .perf-row .perf-val { text-align: left; } }
.security-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.security-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-ok-bg); color: inherit; text-decoration: none; min-width: 0; }
.security-check.bad { background: var(--c-warn-bg); }
.security-check .perf-dot { margin-top: 0; flex: 0 0 12px; }
.security-check.bad .perf-dot { background: #f59e0b; }
.security-check span { overflow-wrap: anywhere; }
a.security-check:hover { border-color: var(--c-accent); }
.ss-pane:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 6px; }

/* ===== v0.36: Sprachwahl mit wehenden Fahnen (wie im bisherigen SKIBit), Name erscheint beim Darüberfahren ===== */
.flag { display: block; width: 32px; height: 24px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .22)); }
.flag-none { width: auto; height: auto; font-size: 20px; line-height: 1; filter: none; }
.flag-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.flag-link { position: relative; display: grid; place-items: center; width: 46px; height: 40px; border-radius: 12px; border: 2px solid transparent; background: linear-gradient(145deg, #fff, #f5f6f8); box-shadow: 0 2px 6px rgba(16, 24, 40, .10); text-decoration: none; }
.flag-link:hover, .flag-link:focus-visible { text-decoration: none; border-color: color-mix(in srgb, var(--am-accent, #ffc400) 70%, transparent); }
.flag-link.active { border-color: var(--am-accent, #ffc400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--am-accent, #ffc400) 22%, transparent), 0 2px 6px rgba(16, 24, 40, .12); }
.flag-link::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); background: #17202d; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2;
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 40; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); display: none; }
.flag-link:hover::after, .flag-link:focus-visible::after { display: block; opacity: 1; animation: flag-tip .15s ease-out; }
@keyframes flag-tip { from { opacity: 0; } to { opacity: 1; } }
/* am Rand: Hinweis nicht über den Bildschirm hinaus */
.flag-pick li:first-child .flag-link::after { left: 0; transform: none; }
.flag-pick li:last-child .flag-link::after { left: auto; right: 0; transform: none; }
@keyframes flag-wave { 0%, 100% { transform: rotate(0) skewY(0); } 30% { transform: rotate(-4deg) skewY(3deg); } 65% { transform: rotate(3deg) skewY(-2deg); } }
.flag-link:hover .flag, .flag-link:focus-visible .flag, .lang-pick-btn:hover .flag { animation: flag-wave .9s ease-in-out; transform-origin: 10% 50%; }
@media (prefers-reduced-motion: reduce) { .flag-link:hover .flag, .flag-link:focus-visible .flag, .lang-pick-btn:hover .flag, .flag-link:hover::after, .flag-link:focus-visible::after { animation: none; } }
/* Avatar-Menü: Fahnen-Raster statt Namensliste (ältere Regeln für .am-langs a überschreiben) */
.am-langs.flag-pick { padding: 34px 6px 6px 42px; display: flex; gap: 6px; }
.am-langs.flag-pick .flag-link { display: grid; padding: 0; background: linear-gradient(145deg, #fff, #f5f6f8); color: inherit; }
.am-langs.flag-pick .flag-link:hover { background: linear-gradient(145deg, #fff, #f5f6f8); }
.am-langs.flag-pick .flag-link.active { background: color-mix(in srgb, var(--am-accent, #ffc400) 14%, #fff); }
.am-flag { background: none; }
.am-flag .flag { width: 100%; height: 100%; }
.am-ic.am-flag img.flag { width: 100%; height: 100%; }
/* Fußzeile */
.langs { align-items: center; }
.flag-pick-foot .flag-link { width: 38px; height: 32px; border-radius: 10px; }
.flag-pick-foot .flag { width: 26px; height: 20px; }
/* Navigationsleiste: Fahne mit Auswahl */
.lang-pick { position: relative; flex: none; }
@media (min-width: 761px) { .lang-pick { order: 2; } }
@media (max-width: 760px) {
  .page-public .lang-pick { margin-left: auto; }
  .page-public .topbar-icons ~ .lang-pick { margin-left: 0; }
  .page-public .lang-pick ~ .nav-burger { margin-left: 0; }
  .lang-pick > summary { width: 38px; height: 34px; }
  .lang-pick > summary .flag { width: 26px; height: 20px; }
}
.lang-pick > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 40px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-surface); }
.lang-pick > summary::-webkit-details-marker { display: none; }
.lang-pick > summary:hover, .lang-pick[open] > summary { border-color: var(--c-accent, #ffc400); }
.lang-pick-btn::after { content: attr(data-name); position: absolute; top: calc(100% + 6px); right: 0; background: #17202d; color: #fff; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 40; display: none; }
.lang-pick:not([open]) > .lang-pick-btn:hover::after, .lang-pick:not([open]) > .lang-pick-btn:focus-visible::after { display: block; }
.lang-pick-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(16, 24, 40, .25); padding: 34px 10px 10px; width: max-content; max-width: min(300px, calc(100vw - 20px)); }
.lang-pick-pop .flag-pick { justify-content: flex-start; }
/* Sprache als Fahne in Listen (Mitglieder, Admin) */
.flag-inline { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.flag-inline .flag { width: 22px; height: 17px; }
.flag-chip .flag { width: 20px; height: 15px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.lang-flag-preview { display: inline-grid; place-items: center; width: 50px; height: 42px; border-radius: 12px; border: 1px solid var(--c-line); background: #fff; }
/* v0.36: Notfall-Seite, Gast-Hinweise */
.emg-page .emg-box { margin: 0; }
.emg-tips { margin-top: 14px; }
.emg-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.foot-emg { color: #b42318 !important; font-weight: 700; }
.guest-note { display: flex; gap: 8px; align-items: flex-start; }
.guest-note svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.guest-lock { text-align: center; }
.guest-lock .actions { justify-content: center; }
.tag-guest { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.tag-members { background: #f1f3f6; color: #3b4656; }
/* v0.36: Tour über geöffneten Menüs (Kopfzeile mit offenem Menü liegt bei z-index 99990) */
.tour-spot { z-index: 100000; }
.tour-bubble { z-index: 100001; }
.tour-picker-bar { z-index: 100002; }
.tour-pick-box { z-index: 100001; }
/* v0.36: Navigationsleiste mit Fahnen-Auswahl – Platz schaffen (Schalter ohne Breite, Logo darf schrumpfen) */
.topbar-in > .nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.topbar-in > .brand { flex-shrink: 1; min-width: 110px; }
.topbar-in > .brand img.brand-logo { max-width: 100%; }
.topnav { min-width: 0; }
/* v0.37: Registrierung in zwei Schritten, Kontotyp, Experten-Startseite, erledigte Schritte */
.reg-step { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.reg-ok { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; background: var(--c-ok-bg); color: var(--c-ok); font-weight: 600; overflow-wrap: anywhere; }
.reg-sent { text-align: center; }
.reg-sent-ic { font-size: 40px; margin: 6px 0; line-height: 1; }
.reg-mail { overflow-wrap: anywhere; }
.reg-wait { font-weight: 400; opacity: .8; }
.type-cards { border: 0; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.type-cards legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.type-card { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 14px 12px; border: 2px solid var(--c-line); border-radius: 14px; cursor: pointer; background: var(--c-surface); min-width: 0; }
.type-card input { position: absolute; opacity: 0; pointer-events: none; }
.type-card:has(input:checked) { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(255, 196, 0, .25); }
.type-card:has(input:focus-visible) { outline: 3px solid #151b26; outline-offset: 2px; }
.type-card .tc-ic { font-size: 26px; line-height: 1; }
.type-card .tc-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.type-card .tc-t small { color: var(--c-muted); font-size: 13px; }
.type-hint { display: none; }
form[data-reg-complete]:has(input[name="account_type"][value="expert"]:checked) .type-hint[data-type-hint="expert"] { display: block; }
@media (max-width: 480px) { .type-cards { grid-template-columns: 1fr; } }
.exp-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.exp-tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.exp-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16, 24, 40, .1); }
.exp-tile .et-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-warn-bg); margin-bottom: 4px; }
.exp-tile small { color: var(--c-muted); }
.exp-tile-off { opacity: .6; }
.path-steps { padding-left: 1.4em; }
.path-steps li { margin: 0 0 8px; }
.path-steps .ps-ans { color: var(--c-ok); }
.path-steps .ps-stop b, .path-steps li.ps-stop > b { color: var(--c-bad); }
.tag-sm { font-size: 11px; padding: 1px 6px; }
.area-blocked .btn-row { justify-content: center; }

/* Haupt-Menü: Schnellzugriff + Rubriken (v0.39.0) */
.am-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 6px 0 8px; }
.am-quick-1 { grid-template-columns: minmax(0, 1fr); }
.am-quick-2, .am-quick-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.am-qt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 66px; padding: 8px 4px; border: 1px solid #e3e7ec; border-radius: 12px; color: var(--am-color, #111827); text-decoration: none; text-align: center; min-width: 0; }
.am-qt b { font-size: 11px; font-weight: var(--am-weight, 700); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-qt small { font-size: 10px; color: var(--c-muted); font-weight: 700; line-height: 1; }
.am-qt:hover, .am-qt:focus-visible { border-color: var(--am-accent, #ffc400); box-shadow: inset 0 0 0 1px var(--am-accent, #ffc400); text-decoration: none; color: var(--am-color, #111827); }
.am-qn { position: absolute; top: 4px; right: 4px; }
.am-qn .nav-count { position: static; display: inline-block; }
.am-qn .nav-count[hidden] { display: none; }
.am-groups { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--c-line); padding-top: 6px; }
.am-grp > summary { list-style: none; cursor: pointer; }
.am-grp > summary::-webkit-details-marker { display: none; }
.am-grp-h .am-r { gap: 6px; }
.am-grp-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--c-soft); color: var(--c-muted); font-size: 11px; display: inline-grid; place-items: center; }
.am-grp-chev { display: inline-grid; transition: transform .15s; }
.am-grp-chev svg { width: 16px; height: 16px; }
.am-grp[open] > summary { background: var(--c-soft); }
.am-grp[open] .am-grp-chev { transform: rotate(180deg); }
.am-grp-b { padding: 2px 0 6px 14px; margin-left: 12px; border-left: 2px solid color-mix(in srgb, var(--am-accent, #ffc400) 45%, transparent); }
.am-grp-b .am-row { min-height: 38px; }
@media (prefers-reduced-motion: reduce) { .am-grp-chev { transition: none; } }
.am-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-line); }
.am-foot-lang { flex: 1 1 auto; min-width: 0; }
.am-foot-lang > summary { list-style: none; }
.am-foot-lang > summary::-webkit-details-marker { display: none; }
.am-foot-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-surface); color: var(--am-color, #111827); font: inherit; font-size: var(--am-text, 13px); font-weight: 700; cursor: pointer; }
.am-foot-btn:hover, .am-foot-btn:focus-visible { background: var(--c-soft); }
.am-foot-btn svg { width: 16px; height: 16px; }
.am-foot-btn .am-flag { width: 22px; height: 16px; display: inline-grid; }
.am-foot-btn .am-flag img, .am-foot-btn .am-flag .flag { width: 100%; height: 100%; }
.am-foot-lang[open] > summary > svg { transform: rotate(180deg); }
.am-foot-lang .am-langs.flag-pick { padding: 30px 0 4px; }
.am-foot-out { margin: 0; margin-left: auto; }
.am-foot-btn.am-logout { color: var(--c-bad); border-color: color-mix(in srgb, var(--c-bad) 30%, transparent); }
.am-foot-btn.am-logout:hover { background: color-mix(in srgb, var(--c-bad) 8%, #fff); }
.am-adm-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.am-adm-bucket { min-height: 36px; border-radius: 10px; }
.am-adm-bucket[data-am-drop]:empty::after { content: "–"; display: block; padding: 8px 10px; color: var(--c-muted); }
.am-adm-bucket.is-over { outline: 2px dashed var(--c-accent); outline-offset: 2px; }
.am-adm-item.is-dragging { opacity: .5; }
.am-adm-grip { cursor: grab; color: var(--c-muted); font-size: 18px; line-height: 1; user-select: none; }
.am-preview .am-grp-b { margin-left: 8px; }
.am-qt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.am-access .am-tile b { overflow: hidden; text-overflow: ellipsis; }
/* Haupt-Menü: passt ohne Scrollen auch am Handy (Höhe unter der Kopfzeile) */
.am-pop:has(.am-groups) { max-height: calc(100dvh - var(--hdr-h, 100px) - 14px); }
@media (max-width: 600px) {
  .am-pop:has(.am-groups) .am-head { padding: 7px 10px; }
  .am-pop:has(.am-groups) .am-head .avatar { width: 38px; height: 38px; }
  .am-pop:has(.am-groups) .am-access .am-tile { padding: 7px 8px; }
  .am-qt { min-height: 54px; padding: 6px 3px; gap: 3px; }
  .am-grp-h { min-height: 38px; }
  .am-quick { margin: 4px 0 6px; }
}
.am-preview .am-pop:has(.am-groups) { max-height: none; }
.msgs { overflow-anchor: none; }

/* v0.40.0 – Kauf- und Affiliate-Links je Werkzeug */
.tool-links { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.tool-links-intro { font-weight: 600; }
.tool-links-list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tool-link { overflow-wrap: anywhere; }
.tool-link a { font-weight: 600; }
.tag.tag-ad { background: #fef0c7; color: #93370d; }
.hub-tools .tool-links { margin-top: 4px; }
.tool-links-edit { border: 1px solid var(--c-line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.link-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.link-row { border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 10px; background: var(--c-soft); }
.grid-link { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) minmax(110px, 1fr); gap: 8px; }
.link-row-opts { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 4px; }
.link-row-opts [data-repeat-remove] { margin-left: auto; }
.step-row-act { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; }
@media (max-width: 760px) { .grid-link { grid-template-columns: 1fr; } }

/* ===== v0.41 Abzeichen am Avatar bearbeiten ===== */
.av-badge img.ic { width: 70%; height: 70%; object-fit: contain; display: block; }
.av-wrap.av-off { opacity: .35; }
.badge-size { max-width: 420px; }
.badge-size-row { display: flex; align-items: center; gap: 12px; }
.badge-size-row input[type=range] { flex: 1; }
.badge-size-row output { min-width: 3.5em; font-weight: 600; }
.badge-list { display: grid; gap: 8px; }
.badge-edit { border: 1px solid var(--c-line, #e5e7eb); border-radius: 12px; background: var(--c-card, #fff); }
.badge-edit > summary { position: relative; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 40px 10px 14px; cursor: pointer; list-style: none; }
.badge-edit > summary::-webkit-details-marker { display: none; }
.badge-edit > summary::after { content: '▾'; position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--c-muted, #64748b); transition: transform .15s; }
.badge-edit[open] > summary::after { transform: rotate(180deg); }
.badge-edit .tag-off { background: #fee2e2; color: #991b1b; }
.badge-edit-body { display: grid; gap: 12px; padding: 4px 14px 14px; }
.badge-edit-body input[type=color] { width: 64px; height: 38px; padding: 2px; }
.badge-new > summary { color: var(--c-accent, #2563eb); }

/* ===== v0.45 SKIB-Pakete & Abos gestalten ===== */
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; align-items: stretch; margin: 12px 0 22px; padding-top: 10px; }
.pk-head { margin-top: 8px; }
.pk { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 320px; padding: 18px 18px 16px; border-radius: 20px;
  background: var(--pk-bg, linear-gradient(160deg, #cbd5e1, #475569)); box-shadow: 0 10px 26px rgba(15, 23, 42, .16); transition: transform .2s ease, box-shadow .2s ease; }
.pk::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .28)); pointer-events: none; }
.pk-dark::before { background: linear-gradient(180deg, transparent 45%, rgba(255, 255, 255, .18)); }
.pk-light { color: #fff; } .pk-dark { color: #1d1606; }
.pk-light .pk-amt, .pk-light .pk-price { text-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.pk.pk-hl { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(255, 170, 0, .35); outline: 3px solid #ffd25d; outline-offset: -1px; }
.pk:hover { box-shadow: 0 14px 32px rgba(15, 23, 42, .22); }
.pk-rib { position: absolute; top: 16px; right: -40px; z-index: 3; transform: rotate(35deg); width: 160px; text-align: center; padding: 5px 0; background: var(--pk-rib, #ffd25d); color: var(--pk-rib-ink, #14171f);
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-art { display: grid; place-items: center; height: 118px; margin: 2px 0 8px; pointer-events: none; }
.pk-art > * { width: calc(118px * var(--pk-art, 1)); height: calc(108px * var(--pk-art, 1)); max-width: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.pk-art .pk-art-ic { display: grid; place-items: center; font-size: calc(70px * var(--pk-art, 1)); line-height: 1; }
.pk-art .pk-art-ic img.ic { width: 100%; height: 100%; object-fit: contain; }
.pk-pos-corner .pk-art { position: absolute; top: 12px; right: 12px; height: auto; margin: 0; }
.pk-pos-corner .pk-art > * { width: calc(64px * var(--pk-art, 1)); height: calc(58px * var(--pk-art, 1)); }
.pk-pos-corner .pk-art .pk-art-ic { font-size: calc(40px * var(--pk-art, 1)); }
.pk-pos-corner .pk-body { margin-top: 64px; }
.pk-pos-back .pk-art { position: absolute; inset: auto -18% -6% auto; z-index: -1; height: auto; margin: 0; opacity: .38; transform: rotate(-12deg); }
.pk-pos-back .pk-art > * { width: calc(220px * var(--pk-art, 1)); height: calc(200px * var(--pk-art, 1)); filter: none; }
.pk-pos-back .pk-art .pk-art-ic { font-size: calc(150px * var(--pk-art, 1)); }
.pk-pos-back .pk-body { margin-top: 40px; }
.pk-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pk-amt { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.pk-amt b { font-size: 44px; font-weight: 900; letter-spacing: -.02em; }
.pk-amt small { font-size: 16px; font-weight: 800; opacity: .9; }
.pk-sub { font-weight: 700; font-size: 16px; margin-top: 4px; overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.pk-per { font-size: 13px; opacity: .88; margin-top: 4px; }
.pk-save { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, .22); }
.pk-dark .pk-save { background: rgba(255, 255, 255, .55); }
.pk-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.pk-foot form { margin: 0; } .pk-foot .pk-btn { width: 100%; }
.pk-price { font-size: 24px; font-weight: 900; white-space: nowrap; }
.pk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); white-space: nowrap; }
.pk-btn-light { background: #fff; color: #14171f; } .pk-btn-dark { background: #14171f; color: #fff; }
.pk-btn:hover { filter: brightness(1.06); } .pk-btn:focus-visible { outline: 3px solid #ffd25d; outline-offset: 2px; }
.pk-btn.is-soon { cursor: default; opacity: .85; font-size: 13px; }
span.pk-btn[aria-hidden] { cursor: default; }
.pk-off { opacity: .5; filter: grayscale(.4); }
/* Abos */
.pl-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pl { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--c-card, #fff); border: 1px solid var(--c-line, #e6e9ef); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.pl.pk-hl { transform: translateY(-6px); outline: 3px solid #ffd25d; outline-offset: -1px; box-shadow: 0 14px 30px rgba(255, 170, 0, .3); }
.pl-top { position: relative; isolation: isolate; overflow: hidden; min-height: 92px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--pk-bg); }
.pl-name { font-size: 19px; font-weight: 900; line-height: 1.15; padding-right: 54px; overflow-wrap: break-word; hyphens: auto; }
.pl-sub { font-size: 13px; font-weight: 700; opacity: .9; padding-right: 54px; }
.pl-art { position: absolute; top: 10px; right: 10px; width: calc(48px * var(--pk-art, 1)); height: calc(44px * var(--pk-art, 1)); display: grid; place-items: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.pl-art > * { width: 100%; height: 100%; } .pl-art .pk-art-ic { font-size: calc(32px * var(--pk-art, 1)); display: grid; place-items: center; } .pl-art img.ic { width: 100%; height: 100%; object-fit: contain; }
.pl .pk-rib { top: 12px; right: -46px; width: 150px; font-size: 10px; }
.pl .pk-rib ~ .pl-art { top: 34px; }
.pl-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.pl-price { font-size: 21px; font-weight: 900; } .pl-price small { font-size: 12px; font-weight: 600; color: var(--c-muted, #5b6472); }
.pl-feat { list-style: none; padding: 0; margin: 10px 0 14px; font-size: 13.5px; }
.pl-feat li { position: relative; padding-left: 21px; margin: 6px 0; }
.pl-feat li::before { content: "✓"; position: absolute; left: 0; color: #16a34a; font-weight: 900; }
.pl-body form, .pl-btn { margin-top: auto; } .pl-body form .pl-btn { width: 100%; } .pl-btn { width: 100%; }
/* Handy */
@media (max-width: 640px) {
  .pk-m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pk-m-grid .pk { min-height: 270px; padding: 14px 12px 12px; border-radius: 16px; }
  .pk-m-grid .pk-amt b { font-size: 34px; } .pk-m-grid .pk-price { font-size: 19px; } .pk-m-grid .pk-art { height: 86px; } .pk-m-grid .pk-art > * { width: calc(88px * var(--pk-art, 1)); height: calc(80px * var(--pk-art, 1)); }
  .pk-m-grid.pl-grid { grid-template-columns: 1fr 1fr; }
  .pl-name { font-size: 16px; padding-right: 44px; } .pl-top { min-height: 80px; padding: 10px 12px; } .pl-body { padding: 10px 12px 12px; } .pl-price { font-size: 18px; } .pl-feat { font-size: 12.5px; }
  .pk-m-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 12px 2px 14px; margin-inline: -4px; -webkit-overflow-scrolling: touch; }
  .pk-m-scroll > * { flex: 0 0 72%; scroll-snap-align: center; }
  .pk.pk-hl, .pl.pk-hl { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pk, .pl { transition: none; } }
/* Admin: Übersicht */
.pk-admin-grid { list-style: none; padding: 10px 0 0; margin: 10px 0 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.pk-admin { display: flex; flex-direction: column; gap: 8px; }
.pk-admin.is-drag { opacity: .45; }
.pk-admin-card { pointer-events: none; flex: 1; display: flex; }
.pk-admin-card > .pk, .pk-admin-card > .pl { flex: 1; }
.pk-admin-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pk-admin-bar > .btn:not(.btn-icon) { flex: 1 1 auto; justify-content: center; min-width: 0; }
.pk-admin-bar > .muted, .pk-admin-bar > .tag { flex-basis: 100%; }
.pk-admin-bar > .tag { flex-basis: auto; }
.pk-grip { cursor: grab; font-size: 18px; color: var(--c-muted, #64748b); padding: 0 4px; user-select: none; }
.pk-admin-bar .btn-icon { min-width: 32px; padding-inline: 6px; }
/* Admin: Bearbeiten */
.shop-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.shop-preview { position: sticky; top: 76px; }
.shop-preview-one .pk, .shop-preview-one .pl { min-height: 340px; }
.shop-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-preset { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--c-line, #e5e7eb); border-radius: 999px; background: var(--c-card, #fff); font: inherit; font-weight: 700; cursor: pointer; }
.shop-preset span { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(160deg, var(--a), var(--b)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.shop-preset.on { outline: 3px solid #ffd25d; }
.shop-form input[type=color] { width: 72px; height: 40px; padding: 2px; }
.shop-form input[type=range] { width: 100%; }
.shop-row { pointer-events: none; }
@media (max-width: 900px) { .shop-edit { grid-template-columns: 1fr; } .shop-preview { position: static; order: -1; max-width: 320px; } }
/* v0.46 Expert-Pläne */
.pl-mine { outline: 3px solid #16a34a; outline-offset: -1px; }
.pl-btn.is-mine { background: #16a34a; color: #fff; cursor: default; }
.pk-btn-light.pl-btn { border: 1px solid var(--c-line, #e5e7eb); box-shadow: none; }
/* v0.46.1 Farbe der Grundrollen */
.role-color { display: flex; align-items: flex-end; gap: 8px; margin-left: auto; }
.role-color input[type=color] { width: 64px; height: 38px; padding: 2px; }
@media (max-width: 640px) { .role-color { margin-left: 0; } }

/* ===== v0.47 · Look-Studio ===== */
.ls-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.ls-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 24px); overflow: auto; }
.ls-now { margin: 0; }
.ls-list { display: flex; flex-direction: column; gap: 6px; }
.ls-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 10px; color: inherit; text-decoration: none; background: var(--c-surface); }
.ls-item:hover { border-color: var(--c-accent); }
.ls-item.on { border-color: var(--c-accent); box-shadow: inset 3px 0 0 var(--c-accent); background: color-mix(in srgb, var(--c-accent) 7%, var(--c-surface)); }
.ls-item-name { font-weight: 700; overflow-wrap: anywhere; }
.ls-item .tag { align-self: flex-start; margin-top: 2px; }
.ls-new { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--c-line); padding-top: 10px; }
.ls-new .btn { align-self: flex-start; }
.ls-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ls-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ls-head h2 { margin: 0; }
.ls-head p { margin: 2px 0 0; }
.ls-head form { margin: 0; }
.ls-start { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ls-start select, .ls-start input { min-height: 34px; padding: 4px 8px; }
.ls-preview { padding: 10px; }
.ls-pv { border-radius: 14px; overflow: hidden; background: var(--c-bg, #f5f7f9) center / cover no-repeat; border: 1px solid var(--c-line); }
.ls-pv-top { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--c-dark, #151b26); min-height: 64px; }
.ls-brand { position: relative; }
.ls-brand img { height: 48px; width: auto; max-width: 240px; object-fit: contain; }
.ls-brand img.ls-breath { animation: skib-logo-breath 3.4s ease-in-out infinite; }
.ls-pv-tk { flex: 1; min-width: 0; color: var(--c-accent, #ffc400); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid currentColor; border-radius: 9px; padding: 4px 10px; font-size: .9rem; }
.ls-hero.hero-preview { min-height: clamp(300px, 42vw, 460px); margin: 0; border-radius: 0; }
.ls-hero .hero-copy { text-align: center; }
.ls-title { color: #fff; font-weight: 800; font-size: 1.25rem; margin: 6px 0 0; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.ls-pv-actions { margin-top: 8px; }
.ls-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--c-line); margin-bottom: 12px; }
.ls-tab { appearance: none; border: 1px solid transparent; border-bottom: 0; background: none; padding: 9px 13px; border-radius: 10px 10px 0 0; font: inherit; font-weight: 700; color: var(--c-muted); cursor: pointer; margin-bottom: -1px; }
.ls-tab:hover { color: var(--c-ink); }
.ls-tab.on { color: var(--c-ink); background: var(--c-surface); border-color: var(--c-line); box-shadow: inset 0 3px 0 var(--c-accent); }
.ls-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); vertical-align: middle; }
.ls-all { border: 0; padding: 0; margin: 0; min-width: 0; }
.ls-use { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ls-use-opt { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--c-line); border-radius: 10px; padding: 9px 11px; cursor: pointer; }
.ls-use-opt:has(input:checked) { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface)); }
.ls-use-opt span { display: flex; flex-direction: column; }
.ls-use-opt small { color: var(--c-muted); }
.ls-area { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ls-area[disabled] { opacity: .55; }
.ls-area h3 { margin: 10px 0 0; }
.ls-sub { border: 1px solid var(--c-line); border-radius: 10px; padding: 6px 10px 10px; }
.ls-fx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.ls-fx { display: flex; align-items: center; gap: 8px; border: 1px solid var(--c-line); border-radius: 10px; padding: 6px 8px; cursor: pointer; }
.ls-fx:has(input[type=checkbox]:checked) { border-color: var(--c-accent); }
.ls-fx .grow { display: flex; flex-direction: column; min-width: 0; }
.ls-fx small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-fx .in-num { width: 58px; }
.ls-save { position: sticky; bottom: 0; background: var(--c-surface); padding: 10px 0 4px; border-top: 1px solid var(--c-line); margin-top: 14px; z-index: 5; }
@media (max-width: 980px) {
  .ls-grid { grid-template-columns: minmax(0, 1fr); }
  .ls-side { position: static; max-height: none; }
  .ls-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .ls-item { min-width: 190px; }
}
@media (max-width: 560px) { .ls-use { grid-template-columns: minmax(0, 1fr); } .ls-tab { padding: 8px 9px; font-size: .9rem; } }
.ls-fx input.in-num { width: 62px; flex: none; min-height: 32px; padding: 3px 6px; }
.ls-form [hidden], .ls-pv [hidden], .ls-head [hidden] { display: none !important; }
.hero-home { touch-action: manipulation; }

/* ---------- 3D-Druck & Arduino (v0.49) ---------- */
.mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.mk-stats .stat { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-s); padding: 10px 12px; display: flex; flex-direction: column; }
.mk-stats .stat b { font-size: 1.4rem; }
.mk-stats .stat span { color: var(--c-muted); font-size: .85rem; }
.mk-arow { display: flex; gap: 10px; align-items: center; color: var(--c-ink); }
.mk-arow img, .mk-athumb { width: 48px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; }
.mk-athumb { display: grid; place-items: center; background: var(--c-soft); font-size: 1.2rem; }
.mk-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0 0 16px; }
.mk-cat { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow); }
.mk-cat:hover, .mk-cat.active { border-color: var(--c-ink); text-decoration: none; }
.mk-cat-ic { font-size: 1.8rem; width: 48px; height: 48px; display: grid; place-items: center; background: var(--c-soft); border-radius: 12px; flex: none; }
.mk-cat-t { display: flex; flex-direction: column; min-width: 0; }
.mk-card .mk-cover { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--c-soft); }
.mk-card .mk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-cover-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; }
.mk-price { position: absolute; right: 10px; bottom: 10px; background: var(--c-accent); color: var(--c-accent-ink, #111); font-weight: 700; padding: 5px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25); font-size: .95rem; display: inline-flex; gap: 4px; align-items: center; }
.mk-price b { font-size: 1.15rem; }
.mk-price.mk-free { background: var(--c-ok); color: #fff; }
.mk-price.mk-owned { background: var(--c-dark, #222); color: #fff; }
.mk-price .ic { width: 16px; height: 16px; }
.mk-flag { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: .8rem; padding: 3px 8px; border-radius: 999px; }
.mk-stars { color: #f5a623; white-space: nowrap; }
.mk-star-off { color: var(--c-line); }
.mk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--gap, 16px); align-items: start; }
.mk-side { display: flex; flex-direction: column; gap: var(--gap, 16px); position: sticky; top: 80px; }
.mk-buy { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mk-buy-price { font-size: 1.3rem; margin: 0; }
.mk-buy-price b { font-size: 2rem; }
.mk-buy-state { margin: 0; color: var(--c-ok); display: flex; gap: 6px; align-items: center; }
.mk-buy-list { margin: 0; padding-left: 18px; }
.mk-update { background: var(--c-info-bg); color: var(--c-ink); padding: 4px 10px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.mk-lock { margin-top: 16px; padding: 16px; border: 2px dashed var(--c-line); border-radius: var(--radius-s); background: var(--c-soft); }
.mk-lock .mk-buy { margin-top: 8px; }
.mk-specs dd { margin-bottom: 6px; }
.mk-libs { list-style: none; padding: 0; margin: 0; }
.mk-schematic { max-width: 100%; border-radius: 6px; border: 1px solid var(--c-line); }
.mk-video { position: relative; aspect-ratio: 16 / 9; background: #111; border-radius: var(--radius-s); overflow: hidden; margin: 12px 0; display: grid; place-items: center; }
.mk-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.mk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mk-play { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(0,0,0,.7); color: #fff; border: 2px solid #fff; border-radius: 14px; padding: 12px 20px; font-weight: 700; cursor: pointer; }
.mk-play span { font-size: 1.8rem; line-height: 1; }
.mk-play small { font-weight: 400; opacity: .8; }
.mk-play-link:hover { text-decoration: none; color: #fff; }
.mk-own-video { width: 100%; border-radius: var(--radius-s); margin: 12px 0; background: #000; }
.mk-viewer { display: flex; flex-direction: column; gap: 8px; }
.mk-stage { position: relative; aspect-ratio: 4 / 3; max-height: 520px; background: radial-gradient(circle at 50% 40%, var(--c-surface), var(--c-soft)); border: 1px solid var(--c-line); border-radius: var(--radius-s); overflow: hidden; }
.mk-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.mk-stage canvas:active { cursor: grabbing; }
.mk-stage canvas:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.mk-stage-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--c-muted); text-align: center; padding: 12px; }
.mk-viewer-sm .mk-stage { aspect-ratio: 4 / 3; }
.mk-viewer .chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-surface); }
.mk-bom { display: flex; flex-direction: column; }
.mk-bom-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.mk-bom-row:last-child { border-bottom: 0; }
.mk-bom-row img, .mk-bom-ph { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--c-soft); display: grid; place-items: center; }
.mk-bom-p { font-weight: 700; white-space: nowrap; }
.mk-bom-l { text-align: right; }
.mk-qty { color: var(--c-muted); font-weight: 600; }
.mk-bom-sum { text-align: right; font-weight: 700; margin: 10px 0 4px; }
.mk-files { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.mk-files > li { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--c-line); border-radius: var(--radius-s); }
.mk-files-pub > li { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
.mk-file-head { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.mk-file-head > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.mk-ext { flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .03em; background: var(--c-ink); color: var(--c-surface); padding: 4px 6px; border-radius: 6px; }
.mk-files li.mk-new { border-color: var(--c-ok); }
.mk-code { position: relative; }
.mk-code pre { max-height: 520px; overflow: auto; background: #1e1e1e; color: #e6e6e6; padding: 14px; border-radius: var(--radius-s); font-size: .85rem; line-height: 1.45; margin: 0; }
.mk-copy { position: absolute; right: 10px; top: 10px; z-index: 1; }
.mk-vthumb { width: 64px; height: 48px; display: grid; place-items: center; background: var(--c-soft); border-radius: 6px; font-size: 1.3rem; }
.mk-bom-edit, .mk-builds, .mk-builds-admin, .mk-buys, .mk-mine { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-bom-edit > li { border: 1px solid var(--c-line); border-radius: var(--radius-s); padding: 10px; }
.mk-bomgrid { display: grid; grid-template-columns: 90px minmax(0, 1fr) 110px 90px; gap: 10px; }
.mk-bomgrid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.mk-span3 { grid-column: 1 / -1; }
.mk-bomgrid3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.edit-layout .stack .mk-files .actions, .edit-layout .stack form[data-mk-upload] .actions, #medien .actions, #dateien .actions { position: static; background: none; }
.mk-buys li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.mk-builds li { border-top: 1px solid var(--c-line); padding-top: 10px; }
.mk-build-head { display: flex; gap: 10px; align-items: center; }
.mk-build-head .avatar { border-radius: 50%; }
.mk-bphotos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mk-bphotos img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; display: block; }
.mk-bphoto { display: flex; flex-direction: column; gap: 4px; }
.mk-build-form { margin-bottom: 14px; }
.mk-build-form summary { cursor: pointer; }
.mk-rate { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.mk-rate legend { float: left; width: 100%; margin-bottom: 4px; font-weight: 600; }
.mk-rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mk-rate label { font-size: 2rem; color: var(--c-line); cursor: pointer; line-height: 1; padding: 0 2px; }
.mk-rate input:checked ~ label, .mk-rate label:hover, .mk-rate label:hover ~ label { color: #f5a623; }
.mk-rate input:focus-visible + label { outline: 2px solid var(--c-accent); border-radius: 4px; }
.mk-mine li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; }
.mk-mine-link { display: flex; gap: 12px; align-items: center; color: var(--c-ink); min-width: 0; }
.mk-mine-link:hover { text-decoration: none; }
.mk-mine-link img, .mk-mine-link .mk-athumb { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.mk-form progress, form[data-mk-upload] progress { width: 100%; }
[data-model-viewer] [hidden], .mk-video [hidden], .mk-code [hidden] { display: none !important; }
@media (max-width: 980px) { .mk-top { grid-template-columns: minmax(0, 1fr); } .mk-side { position: static; } }
@media (max-width: 640px) {
  .mk-bom-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .mk-bom-row img, .mk-bom-ph { width: 48px; height: 48px; }
  .mk-bom-l { grid-column: 2 / -1; text-align: left; }
  .mk-bomgrid { grid-template-columns: 70px minmax(0, 1fr); }
  .mk-bomgrid2, .mk-bomgrid3 { grid-template-columns: minmax(0, 1fr); }
  .mk-files-pub > li { flex-direction: column; align-items: stretch; }
  .mk-mine li { flex-direction: column; align-items: stretch; }
  .mk-bphotos img { width: 88px; height: 88px; }
}
/* Aussehen der 3D-Vorschau (v0.50) */
.mk-look { margin-top: 2px; }
.mk-look summary { cursor: pointer; }
.mk-look-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.mk-look-form input[type=color] { width: 100%; min-height: 38px; padding: 2px; }
.mk-look-form [hidden] { display: none !important; }
.mk-stage { transition: background .25s; }
.mk-stage-msg { text-shadow: 0 1px 2px rgba(255,255,255,.6); }
/* Sichtbarkeit der 3D-Ansicht (v0.51) */
.mk-show { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; }
.mk-show select { min-height: 32px; padding: 3px 8px; font-size: .85rem; border-radius: 8px; }
.mk-show-public select { border-color: var(--c-ok); }
.mk-show-buyers select { border-color: var(--c-warn); }
.mk-show-off select { border-color: var(--c-bad); }
/* Großansicht mit Blättern (v0.51.1) */
.tz-viewer .tz-nav { display: flex; gap: 8px; justify-content: center; align-items: center; }
.tz-viewer .tz-prev, .tz-viewer .tz-next { min-width: 44px; font-size: 1.3rem; line-height: 1; }
.tz-viewer [hidden] { display: none !important; }
.mk-bphotos img[data-zoom-open] { cursor: zoom-in; transition: transform .15s; }
.mk-bphotos img[data-zoom-open]:hover { transform: scale(1.03); }
/* Code-Hervorhebung + Zeilennummern (v0.52) */
.mk-pre code.hl { counter-reset: ln; display: block; }
.mk-pre .ln { counter-increment: ln; }
.mk-pre .ln::before { content: counter(ln); display: inline-block; width: 2.6em; margin-right: 1em; padding-right: .6em; text-align: right; color: #6e7681; border-right: 1px solid #333; user-select: none; -webkit-user-select: none; }
.hl-c { color: #6a9955; font-style: italic; }
.hl-s { color: #ce9178; }
.hl-p { color: #c586c0; }
.hl-n { color: #b5cea8; }
.hl-k { color: #569cd6; }
.hl-t { color: #4ec9b0; }
.hl-a { color: #4fc1ff; }
.hl-f { color: #dcdcaa; }

/* iPhone/iPad: fliegende Bilder ohne CSS-Filter (WebKit zeichnet sonst graue Kästen) – v0.53.1 */
.hero-nofx .hero-tool { filter: none !important; will-change: auto; }

/* Profil-Navigation am Handy: aktueller Bereich + aufklappbares Icon-Raster (v0.53.1) */
.ptabs-m { display: none; margin: 0 0 14px; }
.ptabs-cur { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; padding: 10px 14px; border-radius: 16px; background: var(--c-surface, #fff); border: 1px solid var(--c-line); box-shadow: var(--shadow); }
.ptabs-cur::-webkit-details-marker { display: none; }
.ptabs-t { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
.ptabs-t small { color: var(--c-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ptabs-t b { font-size: 1.02rem; }
.ptabs-ic { width: 38px; height: 38px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--c-dark, #151b26); color: var(--c-accent, #ffc400); flex: none; }
.ptabs-ic svg { width: 20px; height: 20px; }
.ptabs-chev { display: inline-flex; transition: transform .15s; color: var(--c-muted); }
.ptabs-chev svg { width: 18px; height: 18px; }
.ptabs-m[open] .ptabs-chev { transform: rotate(180deg); }
.ptabs-m[open] .ptabs-cur { border-color: var(--c-accent); }
.ptabs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; padding: 10px; border-radius: 16px; background: var(--c-surface, #fff); border: 1px solid var(--c-line); box-shadow: var(--shadow); }
.ptabs-grid a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; color: var(--c-ink); text-decoration: none; text-align: center; font-size: .78rem; font-weight: 700; line-height: 1.2; border: 1px solid transparent; }
.ptabs-grid a:hover, .ptabs-grid a:focus-visible { background: var(--c-soft); text-decoration: none; }
.ptabs-grid a.on { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 14%, transparent); }
.ptabs-grid a span:last-child { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; max-width: 100%; }
@media (max-width: 760px) {
  .profile-tabs { display: none; }
  .ptabs-m { display: block; }
}
/* iOS: Datums-/Zeitfelder so breit wie alle anderen Felder, Text links (v0.53.1) */
.field input[type=date], .field input[type=time], .field input[type=datetime-local], .field input[type=month] { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; text-align: left; display: block; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value, input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; }
/* Nachrichten am Handy: Eingabe + Knöpfe in einer Zeile, Senden rechts (v0.53.1) */
@media (max-width: 760px) {
  .composer { flex-wrap: wrap; gap: 6px; padding: 8px; align-items: flex-end; }
  .composer textarea { flex: 1 1 120px; order: 1; min-height: 44px; }
  .composer > .emoji-btn, .composer > .composer-file, .composer > .composer-mic { order: 2; flex: none; width: 40px; height: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; }
  .composer > button[type=submit] { order: 3; flex: none; width: 48px; height: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; }
  .composer > .composer-rec, .composer > .composer-strip { order: 10; }
}
/* v0.53.1: Community-Karte unter der Adresse (Profildaten) */
.pd-map { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--radius-s, 10px); background: rgba(255, 196, 0, .07); }
.pd-map .inline-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0; }
.pd-map p { margin: 6px 0; }
.notice-soft { padding: 8px 10px; border-radius: var(--radius-s, 10px); background: rgba(255, 196, 0, .12); }
/* v0.55.0: Pfad (Breadcrumbs) im gleichen Stil wie die Menü-Pillen */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crumbs > a, .crumbs > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); font-size: .85rem; line-height: 1.35; text-decoration: none; max-width: 100%; }
.crumbs > a:hover { border-color: var(--c-ink); text-decoration: none; }
.crumbs > span:last-child { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.crumbs .icon, .crumbs svg { width: 1em; height: 1em; }
/* v0.55.0: Untertitel unter Seitentiteln immer gut lesbar – auch auf Hintergrundbildern */
.page-head > div > p.muted, .page-head > div > p.lead { display: inline-block; color: #344054; background: rgba(255, 255, 255, .78); padding: 4px 10px; border-radius: 8px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
nav.chips { margin-bottom: 14px; }
/* v0.55.0: Experten-Profil als ein Formular */
.xp-form h2.h3 { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.xp-form h2.h3:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.xp-identity { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.xp-identity .grow { flex: 1 1 320px; min-width: 0; }
.xp-logo { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 150px; text-align: center; }
.xp-logo-box { width: 120px; height: 120px; border: 2px dashed var(--c-line); border-radius: 16px; display: grid; place-items: center; overflow: hidden; background: #fff; }
.xp-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.xp-file { position: relative; overflow: hidden; cursor: pointer; }
.xp-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 6px 0 4px; }
.tp-chip { position: relative; display: flex; align-items: stretch; border: 1.5px solid var(--c-line); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s, background .15s; }
.tp-chip:hover { border-color: #98a2b3; }
.tp-chip.on { border-color: var(--c-ink); background: #f8fafc; box-shadow: 0 1px 0 rgba(16, 24, 40, .06); }
.tp-chip.tp-primary { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 30%, transparent); }
.tp-main { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; min-width: 0; }
.tp-main input { position: absolute; opacity: 0; pointer-events: none; }
.tp-main input:focus-visible ~ .tp-label { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
.tp-ic { font-size: 1.25rem; width: 28px; text-align: center; flex: none; }
.tp-ic img, .tp-ic svg { width: 24px; height: 24px; }
.tp-label { flex: 1; font-weight: 600; font-size: .93rem; line-height: 1.25; }
.tp-tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; border: 1.5px solid var(--c-line); color: transparent; flex: none; }
.tp-chip.on .tp-tick { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.tp-main input:disabled ~ * { opacity: .45; }
.tp-star { display: grid; place-items: center; width: 40px; border-left: 1px solid var(--c-line); cursor: pointer; font-size: 1.15rem; color: #d0d5dd; }
.tp-star input { position: absolute; opacity: 0; pointer-events: none; }
.tp-chip:not(.on) .tp-star { visibility: hidden; }
.tp-star input:checked + span { color: var(--c-accent); text-shadow: 0 0 1px #b7791f; }
.tp-star input:focus-visible + span { outline: 3px solid var(--c-accent); border-radius: 4px; }
.xp-quals { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.xp-qual { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; }
.xp-qual .grow { flex: 1 1 260px; }
.xp-newquals { display: grid; gap: 8px; }
.xp-newqual { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; padding: 10px 12px; border: 1px dashed var(--c-line); border-radius: 10px; }
.xp-newqual .field { margin: 0; }
.xp-newqual .grow { flex: 2 1 220px; }
.xp-newqual .xp-year { width: 100px; }
.xp-actions { align-items: center; gap: 12px; flex-wrap: wrap; }
.xp-actions .btn-accent:not(.xp-ready) { filter: saturate(.6); }
.expert-logo { object-fit: contain; background: #fff; border-radius: 14px !important; border: 1px solid var(--c-line); }
.xp-hybrid { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; }
.seg-tabs .chip { padding: 7px 14px; font-weight: 600; } .seg-tabs .chip svg { width: 16px; height: 16px; }
/* v0.55.0: „Meine Fotos“ (eigene Avatare) */
.own-photo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.own-photo .avatar-pick[disabled] { cursor: default; opacity: 1; }
.own-photo .own-del { padding: 2px 8px; }
.reg-more { border: 1px solid var(--c-line); border-radius: 12px; padding: 10px 14px; margin: 6px 0 12px; background: rgba(255, 196, 0, .06); }
.reg-more > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.reg-more[open] > summary { margin-bottom: 8px; }
.pk-resume { outline: 3px solid var(--c-accent); outline-offset: 6px; border-radius: 10px; }
.dl-checks { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.dl-checks li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--c-line); background: #fff; }
.dl-checks li div { display: flex; flex-direction: column; gap: 2px; }
.dl-checks small { color: var(--c-muted); overflow-wrap: anywhere; }
.dl-dot { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #98a2b3; }
.dl-checks .ok .dl-dot { background: #16a34a; } .dl-checks .bad .dl-dot { background: #dc2626; } .dl-checks .warn .dl-dot { background: #d97706; }
@media (max-width: 520px) { .tp-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .tp-main { padding: 8px 6px 8px 8px; gap: 6px; } .tp-label { font-size: .84rem; } .tp-ic { width: 22px; font-size: 1.05rem; } .tp-star { width: 30px; } .tp-tick { display: none; } .tp-chip.on .tp-label { text-decoration: underline 2px var(--c-accent); text-underline-offset: 3px; } }
/* v0.55.1: Look-Studio – Hintergrundbilder als Vorschaubilder */
.ls-bgpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 4px 0 14px; }
.ls-bgt { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 2px solid var(--c-line); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.ls-bgt:hover { border-color: #98a2b3; }
.ls-bgt.on { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 30%, transparent); }
.ls-bgt:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.ls-bgt-img { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 6px; background: #f2f4f7 center / cover no-repeat; color: #98a2b3; font-size: 1.4rem; }
.ls-bgt-l { font-size: .75rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#export .h4 { font-size: 1rem; margin: 16px 0 2px; }
/* v1.1 Update-Center */
.upd-now { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.upd-ver { display: flex; flex-direction: column; }
.upd-ver b { font-size: 1.6rem; }
.upd-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.upd-stats > div { background: rgba(0,0,0,.04); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.upd-stats b { font-size: 1.15rem; }
.upd-files { margin: 6px 0 10px; padding-left: 18px; max-height: 260px; overflow: auto; font-size: .85rem; }
.upd-files code { word-break: break-all; }
.upd-discard { margin-top: 12px; }
#pruefung details { margin: 6px 0; }
#pruefung summary { cursor: pointer; font-weight: 600; }
.upd-rb summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.upd-rb .form { margin-top: 10px; display: grid; gap: 8px; }
.upd-mods { display: none; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin: 0 0 4px 28px; }
.upd-rb form:has(input[name=scope][value=parts]:checked) .upd-mods { display: grid; }
.upd-dbwarn { display: none; }
.upd-rb form:has(input[name=scope][value=all]:checked) .upd-dbwarn, .upd-rb form:has(input[name=scope][value=parts]:checked) .upd-dbwarn { display: flex; }
.upd-rb label.upd-dbwarn { flex-direction: column; gap: 4px; }
.upd-hist { overflow-x: auto; } .upd-rb { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; }
/* v1.2 Wartungsmodus */
.maint-card { max-width: 560px; margin: 0 auto; text-align: center; padding: 28px 22px; }
.maint-card h1 { font-size: 1.5rem; margin: 6px 0 10px; }
.maint-ico { font-size: 2.6rem; }
.maint-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.maint-bar { background: #b45309; color: #fff; text-align: center; padding: 6px 12px; font-size: .9rem; position: relative; z-index: 60; }
.maint-bar a { color: #fff; text-decoration: underline; }
/* v1.2 Fehlerprotokoll */
.err-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.err-stat { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 12px; background: rgba(0,0,0,.04); text-decoration: none; color: inherit; border: 2px solid transparent; }
.err-stat b { font-size: 1.4rem; }
.err-stat.on { border-color: currentColor; }
.err-fatal { --err: #b91c1c; } .err-error { --err: #dc2626; } .err-warn { --err: #b45309; } .err-notice { --err: #64748b; }
.err-stat b, .err-badge { color: var(--err); }
.err-filter input[type=search] { flex: 1; min-width: 160px; }
.err-list { display: grid; gap: 6px; }
.err-item { border-left: 4px solid var(--err); background: rgba(0,0,0,.025); border-radius: 8px; padding: 6px 10px; }
.err-item summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.err-badge { font-weight: 700; font-size: .8rem; text-transform: uppercase; }
.err-text { flex: 1; min-width: 0; word-break: break-word; font-size: .9rem; }
.err-meta { font-size: .8rem; color: #64748b; white-space: nowrap; }
.err-pre { white-space: pre-wrap; word-break: break-all; font-size: .78rem; max-height: 320px; overflow: auto; background: rgba(0,0,0,.05); padding: 8px; border-radius: 8px; }
.cron-url { word-break: break-all; }
@media (max-width: 520px) { .err-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.err-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .err-filter select { width: auto; flex: 0 0 auto; }
.maint-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.ls-fx-list .ls-fx input.in-num[type="number"] { width: 62px; flex: none; } /* v1.2.1: schlägt input:not(…) {width:100%} */

/* v1.3.0 Familienprofile ---------------------------------------------- */
.fam-tabs { flex-wrap: wrap; margin-bottom: 16px; }
.fam-tabs .badge-count { margin-left: 4px; height: 18px; line-height: 18px; min-width: 18px; font-size: .7rem; }
.fam-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.fam-member { display: flex; flex-direction: column; gap: 10px; }
.fam-member.is-me { border-color: var(--c-accent); }
.fam-mh { display: flex; gap: 12px; align-items: center; }
.fam-mh .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.fam-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fam-facts li { display: flex; gap: 6px; align-items: flex-start; }
.fam-facts svg, .fam-mark svg, .av-fam svg, .fam-log-ic svg { width: 16px; height: 16px; flex: none; }
.fam-points { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; }
.fam-requests { display: grid; gap: 12px; }
.fam-req-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fam-req-pending, .fam-req-upgrade { border-left: 4px solid var(--c-accent); }
.fam-req-declined, .fam-req-expired, .fam-req-cancelled { opacity: .75; }
.fam-decline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fam-decline input { width: auto; min-width: 0; flex: 1 1 180px; }
.fam-hold blockquote, .fam-req blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--c-line); background: var(--c-soft); border-radius: 6px; white-space: normal; }
.fam-log { list-style: none; margin: 0; padding: 6px 14px; }
.fam-log-day { font-weight: 700; font-size: .85rem; color: var(--c-muted); padding: 10px 0 4px; border-bottom: 1px solid var(--c-line); }
.fam-log-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; padding: 7px 0; border-bottom: 1px solid var(--c-line); }
.fam-log-row:last-child { border-bottom: 0; }
.fam-log-ic { color: var(--c-muted); padding-top: 2px; }
.fam-log-t { min-width: 0; overflow-wrap: anywhere; }
.fam-mark { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: var(--c-info-bg); color: var(--c-info); font-size: .78rem; font-weight: 600; line-height: 1.3; vertical-align: middle; }
.fam-mark img.ic { width: 16px; height: 16px; }
.fam-mark-lg { font-size: .85rem; padding: 3px 10px; }
.cat, .mk-cat { position: relative; }
.cat-fam { position: absolute; top: 8px; right: 8px; padding: 3px; }
.fam-chip { display: inline-flex; align-items: center; gap: 6px; }
.fam-chip .fam-mark { padding: 1px; background: transparent; }
.fam-buyhint { margin: 8px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--c-ink-2); }
.fam-buyhint svg { width: 16px; height: 16px; }
.av-fam { position: absolute; left: -6%; top: -6%; width: max(16px, 36%); height: max(16px, 36%); border-radius: 50%; background: var(--c-info); color: #fff; border: 2px solid #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.av-fam svg { width: 70%; height: 70%; }
.fam-cats { border: 0; padding: 0; margin: 10px 0 0; }
.fam-subcat { padding-left: 18px; }
.fam-switch { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; max-width: 760px; margin: 10px auto 24px; }
.fam-profile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: var(--radius); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow); color: var(--c-ink); text-align: center; }
.fam-profile:hover { text-decoration: none; border-color: var(--c-accent); }
.fam-profile .avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.fam-profile.is-cur { border-color: var(--c-accent); border-width: 2px; }
.fam-profile.no-pin { opacity: .8; }
.fam-profile small svg { width: 14px; height: 14px; vertical-align: -2px; }
.fam-pin { max-width: 380px; margin: 16px auto; display: grid; gap: 12px; }
.fam-pin .avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.fam-pin-in { font-size: 1.6rem; letter-spacing: .5em; text-align: center; }
.page-head.center { justify-content: center; text-align: center; }
p.big { font-size: 1.6rem; margin: 6px 0; }
@media (max-width: 520px) { .fam-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .fam-profile .avatar { width: 72px; height: 72px; } }

/* v1.3.1 Registrierung: Schnellschalter, Einladungen */
.reg-switch { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-left: 5px solid var(--c-ok); }
.reg-switch.is-closed { border-left-color: var(--c-bad); }
.reg-switch-h { display: flex; gap: 12px; align-items: center; }
.reg-switch-h h2 { margin: 0; }
.reg-switch-h p { margin: 2px 0 0; }
.reg-switch-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c-ok); flex: none; box-shadow: 0 0 0 4px var(--c-ok-bg); }
.reg-switch.is-closed .reg-switch-dot { background: var(--c-bad); box-shadow: 0 0 0 4px var(--c-bad-bg); }
.reg-invites li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.reg-invites li.is-off { opacity: .6; }
.reg-invites li.is-new { background: var(--c-warn-bg); border-radius: var(--radius-s); padding: 8px; }
.reg-inv-main { min-width: 0; flex: 1 1 260px; }
.reg-inv-link { display: block; margin-top: 4px; font-size: .8rem; overflow-wrap: anywhere; user-select: all; }
.reg-closed { font-size: 1.05rem; }

/* v1.4.0 Aktionen & Rabattcodes */
.pk-rib-promo { background: #e11d48; color: #fff; font-size: 10px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 26px; padding-right: 26px; }
.pk-old { font-size: .62em; font-weight: 700; opacity: .75; text-decoration-thickness: 2px; margin-right: 2px; }
.pk-new { color: inherit; }
.pk-price .pk-cd { display: block; font-size: 11px; font-weight: 700; opacity: .9; }
.pk-cd:empty { display: none !important; }
.pk-bonus { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #e11d48; color: #fff; }
.pk-offer { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 4px 0 0; font-size: 12px; }
.pk-offer .pk-bonus { margin-top: 0; }
.pk-offer .pk-cd { font-weight: 700; color: #e11d48; }
.promo-box { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.promo-sale { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: 12px; background: #fff1f2; color: #881337; border: 1px solid #fecdd3; }
.promo-sale .pk-cd { font-weight: 800; }
.promo-code { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.promo-code .field { flex: 1 1 220px; max-width: 340px; margin: 0; }
.promo-code input[name=code] { text-transform: uppercase; font-family: ui-monospace, monospace; letter-spacing: .06em; }
.promo-code-on { flex: 1 1 260px; padding: 8px 12px; border-radius: 10px; background: #ecfdf5; color: #065f46; font-weight: 700; }
.promo-code-tag { font-size: 13px; letter-spacing: .05em; }
.promo-st-running { background: #dcfce7; color: #166534; } .promo-st-planned { background: #e0f2fe; color: #075985; } .promo-st-ended, .promo-st-used { background: #f1f5f9; color: #475569; } .promo-st-off { background: #fee2e2; color: #991b1b; }
.promo-form .subset { border: 1px solid var(--c-line, #e5e7eb); border-radius: 12px; padding: 12px 14px; }
.promo-form .field-error { color: #b91c1c; font-weight: 700; }
.promo-targets > div { display: flex; flex-direction: column; gap: 4px; }
.promo-banner { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 16px 0; padding: 14px 18px; border-radius: 16px; background: linear-gradient(120deg, #e11d48, #9f1239); color: #fff; }
.promo-banner b { font-size: 1.05rem; } .promo-banner .pk-cd { display: inline-block; margin-left: 6px; font-weight: 800; opacity: .9; }
.promo-banner .btn { background: #fff; color: #9f1239; border-color: #fff; }
tr.is-new { background: #fefce8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .promo-sale { background: #4c0519; color: #fecdd3; border-color: #881337; } :root:not([data-theme="light"]) .promo-code-on { background: #064e3b; color: #a7f3d0; } }
:root[data-theme="dark"] .promo-sale { background: #4c0519; color: #fecdd3; border-color: #881337; } :root[data-theme="dark"] .promo-code-on { background: #064e3b; color: #a7f3d0; }

/* ===== v1.5.0 SKIBit-Kids ===== */
.kids-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 18px; padding: 26px 26px; border-radius: 24px; color: #fff;
  background: radial-gradient(circle at 15% 20%, #fde047 0 8%, transparent 9%), radial-gradient(circle at 85% 80%, #22d3ee 0 10%, transparent 11%), linear-gradient(120deg, #7c3aed, #db2777 55%, #f59e0b); }
.kids-hero p { margin: 6px 0 0; font-size: 1.05rem; max-width: 560px; }
.kids-logo { margin: 0; font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,.18); }
.kids-logo .kl-a { color: #fff; } .kids-logo .kl-b { margin-left: .2em; padding: 0 .25em; border-radius: .25em; background: #fde047; color: #7c2d12; transform: rotate(-4deg); display: inline-block; }
.kids-hero-links .btn { background: rgba(255,255,255,.95); color: #6d28d9; border-color: transparent; }
.kids-hero-art { display: flex; gap: 10px; font-size: 2.4rem; }
.kids-hero-art span { display: inline-block; animation: kidsBob 3s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.kids-hero-art span:nth-child(2) { animation-delay: .4s; } .kids-hero-art span:nth-child(3) { animation-delay: .8s; } .kids-hero-art span:nth-child(4) { animation-delay: 1.2s; } .kids-hero-art span:nth-child(5) { animation-delay: 1.6s; }
@keyframes kidsBob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .kids-hero-art span { animation: none; } }
.kids-note { margin-bottom: 16px; }
.kids-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.kids-game { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--c-card, #fff); border: 3px solid var(--kg); box-shadow: 0 6px 0 color-mix(in srgb, var(--kg) 70%, #000); }
.kids-game .kg-art { display: grid; place-items: center; height: 120px; font-size: 4.2rem; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 50%), var(--kg); }
.kids-game .kg-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.kids-game h2 { margin: 0; font-size: 1.25rem; font-weight: 900; }
.kids-game p { margin: 0; }
.kids-game .kg-me { font-weight: 700; color: var(--kg); }
.kids-game .kg-top { font-size: .95rem; } .kids-game .kg-top small { color: var(--c-muted, #6b7280); }
.kids-game .kg-play { margin-top: auto; align-self: flex-start; font-size: 1.05rem; padding: 10px 22px; border-radius: 999px; }
.kids-game.is-soon { opacity: .7; } .kids-game.is-soon .kg-art { filter: grayscale(.6); }
.kids-badges-sec h2 { margin-top: 24px; }
.kids-license { font-size: 1.05rem; }
.kids-license.lic-bronze b { color: #b45309; } .kids-license.lic-silber b { color: #64748b; } .kids-license.lic-gold b { color: #ca8a04; }
.kids-badges { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.kids-badges li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px; border-radius: 16px; background: var(--c-soft, #f3f4f6); opacity: .55; }
.kids-badges li.has { opacity: 1; background: linear-gradient(160deg, #fef9c3, #fde68a); color: #713f12; box-shadow: 0 4px 0 #f59e0b; }
.kids-badges .kbd-i { font-size: 2.2rem; } .kids-badges small { font-size: .78rem; }
/* Highscores – Spielautomaten-Look */
.kids-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 16px 0; }
.kids-arcade { padding: 18px 20px; border-radius: 18px; background: #0b1020; color: #e5e7eb; box-shadow: inset 0 0 0 3px #312e81, 0 8px 24px rgba(15,23,42,.25); font-family: ui-monospace, 'Courier New', monospace; }
.kids-arcade h2 { margin: 0 0 10px; font-size: 1.05rem; color: #fde047; text-transform: uppercase; letter-spacing: .08em; }
.kids-arcade h2 small { color: #94a3b8; font-size: .8rem; }
.kids-board, .kids-year { list-style: none; margin: 0; padding: 0; font-size: 1.15rem; }
.kids-board li, .kids-year li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; border-bottom: 1px dashed rgba(148,163,184,.18); }
.kids-board .kb-p, .kids-year .ky-m { color: #22d3ee; min-width: 2ch; }
.kids-board .kb-n, .kids-year .ky-n { font-weight: 800; letter-spacing: .15em; min-width: 3.4ch; }
.kids-board .kb-s, .kids-year .ky-s { margin-left: auto; color: #a3e635; }
.kids-board li.top1 .kb-n { color: #fde047; } .kids-board li.top2 .kb-n { color: #e5e7eb; } .kids-board li.top3 .kb-n { color: #fdba74; }
.kids-board li.is-me { background: rgba(250,204,21,.12); }
.kids-year .ky-d { color: #64748b; } .kids-year li.is-future { opacity: .45; }
.kids-year .ky-live { color: #f472b6; font-size: .7rem; text-transform: uppercase; animation: kidsBlink 1.2s steps(2) infinite; }
@keyframes kidsBlink { 50% { opacity: .2; } }
/* Spielseite */
.kids-play .kp-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kids-play .kp-title { margin: 0 auto 0 4px; font-size: clamp(1.1rem, 3.5vw, 1.6rem); font-weight: 900; }
.kp-stage { position: relative; height: min(calc(100svh - 250px), 720px); min-height: 440px; border-radius: 20px; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, #fef3c7, #fde68a 35%, #f59e0b 120%); box-shadow: inset 0 0 0 3px rgba(0,0,0,.06); touch-action: none; user-select: none; -webkit-user-select: none; }
.kp-stage:fullscreen { height: 100vh; border-radius: 0; }
.kp-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.kp-canvas[hidden] { display: none; }
/* v1.6.0: Finde den Fehler */
.kf-game .kp-stage { background: radial-gradient(ellipse at 50% 0%, #475569, #1e293b 70%); }
.kf-hud { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; pointer-events: none; }
.kf-hud > * { pointer-events: auto; }
.kf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; align-self: flex-start; max-width: calc(100% - 140px); padding: 6px 10px; border-radius: 14px; background: rgba(255,255,255,.94); color: #111827; box-shadow: 0 4px 14px rgba(0,0,0,.18); font-size: .92rem; }
.kf-bar .kp-time { margin-right: 4px; min-width: 3.2em; }
.kf-bar .kp-ic { width: 34px; height: 34px; font-size: 1rem; }
.kf-dots { display: inline-flex; align-items: center; gap: 3px; }
.kf-dots i { width: 11px; height: 11px; border-radius: 50%; background: #e5e7eb; box-shadow: inset 0 0 0 2px #cbd5e1; }
.kf-dots i.on { background: #22c55e; box-shadow: none; }
.kf-dots b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.kf-wrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 10px; touch-action: none; }
.kf-wrap.col { flex-direction: column; }
.kf-pic { position: relative; flex: none; overflow: hidden; border-radius: 10px; background: #0f172a; box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(0,0,0,.4); cursor: crosshair; touch-action: none; }
.kf-in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.kf-in canvas { display: block; width: 100%; height: 100%; }
.kf-marks { position: absolute; inset: 0; pointer-events: none; }
.kf-mark { position: absolute; box-sizing: border-box; border: 3px solid #22c55e; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 14px rgba(34,197,94,.85); animation: kfPop .35s ease-out both; }
.kf-hint { position: absolute; box-sizing: border-box; border: 3px dashed #fde047; border-radius: 50%; box-shadow: 0 0 18px #fde047; animation: kfPulse .55s ease-in-out infinite alternate; }
.kf-x { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; color: #ef4444; font: 900 30px/34px system-ui, sans-serif; text-align: center; text-shadow: 0 0 4px #fff, 0 0 2px #fff; animation: kfX .8s ease-out forwards; }
.kf-side { position: absolute; left: 6px; top: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; font-weight: 700; pointer-events: none; }
.kf-prog { height: 12px; margin: 14px 0 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.kf-prog i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); transition: width .3s; }
@keyframes kfPop { from { transform: scale(1.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes kfPulse { from { transform: scale(.92); opacity: .75; } to { transform: scale(1.06); opacity: 1; } }
@keyframes kfX { 0% { transform: scale(.4); opacity: 1; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@media (max-width: 640px) { .kf-bar { max-width: 100%; margin-top: 46px; font-size: .82rem; } .kf-lv { flex-basis: 100%; } }
.kp-hud { position: absolute; inset: 0; pointer-events: none; }
.kp-hud > * { pointer-events: auto; }
.kp-panel { position: absolute; top: 10px; left: 10px; max-width: min(360px, calc(100% - 120px)); padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.92); color: #111827; box-shadow: 0 4px 14px rgba(0,0,0,.12); font-size: .92rem; }
.kp-lv { font-size: 1rem; } .kp-task { margin: 4px 0 6px; }
.kp-goals { list-style: none; margin: 0 0 6px; padding: 0; font-size: .85rem; } .kp-goals li.ok { color: #15803d; font-weight: 700; }
.kp-row { display: flex; align-items: center; gap: 6px; }
.kp-time { font-weight: 800; font-variant-numeric: tabular-nums; margin-right: auto; }
.kp-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 0; background: #fff; color: #111827; font-size: 1.15rem; box-shadow: 0 2px 0 rgba(0,0,0,.15); cursor: pointer; }
.kp-ic:active { transform: translateY(2px); box-shadow: none; }
.kp-sys { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 4; }
.kp-inv { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 8px; max-width: calc(100% - 20px); overflow-x: auto; padding: 8px; border-radius: 18px; background: rgba(17,24,39,.78); }
.kp-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 74px; padding: 8px 8px 6px; border-radius: 14px; border: 2px solid transparent; background: #fff; color: #111827; cursor: pointer; font: inherit; }
.kp-item span { font-size: 1.6rem; line-height: 1; } .kp-item b { font-size: .72rem; }
.kp-item i { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; border-radius: 999px; background: #ef4444; color: #fff; font-style: normal; font-weight: 800; font-size: .78rem; display: grid; place-items: center; }
.kp-item.sel { border-color: #fde047; box-shadow: 0 0 0 3px #f59e0b; transform: translateY(-3px); }
.kp-item:disabled { opacity: .4; }
.kp-inv-empty { color: #e5e7eb; padding: 6px 10px; font-size: .9rem; }
.kp-pop { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: #111827; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.kp-pop[hidden] { display: none; }
.kp-pop button { border: 0; border-radius: 10px; padding: 9px 12px; background: #fff; color: #111827; font: inherit; font-weight: 700; text-align: left; cursor: pointer; white-space: nowrap; }
.kp-overlay { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 14px; background: rgba(15,23,42,.35); backdrop-filter: blur(2px); }
.kp-overlay[hidden] { display: none; }
.kp-card { width: min(560px, 100%); max-height: 100%; overflow: auto; padding: 22px; border-radius: 22px; background: #fff; color: #111827; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.kp-card h2 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 900; }
.kp-big { font-size: 1.15rem; padding: 12px 26px; border-radius: 999px; }
.kp-load { font-weight: 700; }
.kn-row { display: flex; justify-content: center; gap: 12px; margin: 14px 0; }
.kn-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kn-col button { width: 56px; height: 40px; border: 0; border-radius: 12px; background: #ede9fe; color: #6d28d9; font-size: 1.1rem; cursor: pointer; }
.kn-ch { width: 56px; height: 66px; border: 3px solid #7c3aed; border-radius: 14px; text-align: center; font: 900 2.2rem ui-monospace, monospace; text-transform: uppercase; color: #111827; background: #fff; }
.kn-err { color: #b91c1c; font-weight: 700; }
.kl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 14px 0; }
.kl-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; border: 0; background: #fef3c7; color: #78350f; cursor: pointer; font: inherit; box-shadow: 0 4px 0 #f59e0b; }
.kl-btn b { font-size: 1.4rem; } .kl-btn small { font-size: .72rem; line-height: 1.15; min-height: 2.3em; }
.kl-btn.done { background: #dcfce7; color: #14532d; box-shadow: 0 4px 0 #22c55e; }
.kl-btn:disabled { background: #e5e7eb; color: #9ca3af; box-shadow: 0 4px 0 #cbd5e1; cursor: default; }
.kl-st i, .kr-stars span { font-style: normal; color: #d1d5db; } .kl-st i.on { color: #f59e0b; }
.kr-stars { font-size: 3rem; letter-spacing: .1em; }
.kr-stars span.on { color: #f59e0b; display: inline-block; animation: kidsStar .5s ease-out both; text-shadow: 0 3px 0 #b45309; }
@keyframes kidsStar { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }
.kr-score { font-size: 1.2rem; } .kr-score b { font-size: 2rem; color: #7c3aed; }
.kr-line { margin: 2px 0; color: #4b5563; }
.kr-save { margin: 10px 0; font-weight: 700; color: #6d28d9; min-height: 1.2em; }
.kr-badge { margin: 8px auto; padding: 10px 14px; max-width: 360px; border-radius: 14px; background: linear-gradient(160deg, #fef9c3, #fde68a); color: #713f12; animation: kidsStar .5s ease-out both; }
.kr-badge span { font-size: 1.8rem; display: block; } .kr-badge small { display: block; }
.kr-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.kp-who { margin: 6px 0 0; }
.kp-toast { position: absolute; left: 50%; top: 18%; z-index: 7; transform: translateX(-50%); max-width: min(480px, 90%); padding: 12px 18px; border-radius: 16px; background: #111827; color: #fff; font-weight: 700; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,.3); transition: opacity .5s, transform .5s; }
.kp-toast.bad { background: #b91c1c; } .kp-toast.hint { background: #6d28d9; } .kp-toast.good { background: #15803d; }
.kp-toast.out { opacity: 0; transform: translate(-50%, -12px); }
.kp-conf { position: absolute; top: -12px; width: 10px; height: 16px; border-radius: 3px; z-index: 8; pointer-events: none; animation: kidsConf 2s ease-in forwards; }
@keyframes kidsConf { to { top: 105%; transform: rotate(720deg) translateX(40px); } }
.kp-label { position: absolute; z-index: 3; transform: translate(-50%, 0); padding: 4px 10px; border: 0; border-radius: 999px; background: rgba(17,24,39,.82); color: #fff; font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.kp-label:hover, .kp-label:focus-visible { background: #7c3aed; outline: 2px solid #fde047; }
.kp-note { margin-top: 8px; }
.kp-meter { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); width: min(420px, 86%); }
@media (max-width: 640px) {
  .kp-stage { height: calc(100svh - 150px); min-height: 420px; border-radius: 14px; }
  .kp-panel { font-size: .82rem; max-width: calc(100% - 20px); top: 56px; padding: 8px 10px; }
  .kp-task { display: none; }
  .kp-item { min-width: 62px; padding: 6px 6px 4px; } .kp-item span { font-size: 1.3rem; }
}
.kp-meter { display: flex; flex-direction: column; align-items: center; gap: 8px; bottom: 14px; padding: 0; }
.kp-meter:empty { display: none; }
.km-bar { position: relative; width: 100%; height: 26px; border-radius: 999px; background: rgba(17,24,39,.75); overflow: hidden; box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); }
.km-zone { position: absolute; top: 0; bottom: 0; background: #22c55e; }
.km-mark { position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; border-radius: 3px; background: #fde047; box-shadow: 0 0 8px #fde047; }
.km-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #f59e0b, #ef4444); opacity: .85; }
.km-torque .km-fill { background: linear-gradient(90deg, #60a5fa, #a855f7); }
.km-btn { min-width: 220px; }
.km-two { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.km-two .btn { min-width: 84px; }
.km-info { margin: 0; padding: 4px 10px; border-radius: 10px; background: rgba(255,255,255,.9); color: #111827; font-size: .88rem; text-align: center; }
.kp-safety .ks-badge { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px; background: #fde047; color: #713f12; font-weight: 800; }
.ks-opts { display: grid; gap: 10px; margin-top: 12px; }
.ks-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 3px solid #e5e7eb; background: #fff; color: #111827; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.ks-opt span { font-size: 1.8rem; }
.ks-opt.ok { border-color: #22c55e; background: #dcfce7; } .ks-opt.bad { border-color: #ef4444; background: #fee2e2; }
.ks-list { list-style: none; padding: 0; margin: 10px auto; max-width: 380px; text-align: left; display: grid; gap: 4px; }
.fam-kids-b { display: block; font-size: 1.2rem; letter-spacing: .1em; }
/* v1.5.1 SKIBit-Kids: Detektiv & Bauen */
.kd-bubble { position: absolute; z-index: 4; transform: translate(-50%, -120%); max-width: 260px; padding: 8px 12px; border-radius: 14px; background: #fff; color: #111827; font-weight: 700; font-size: .85rem; box-shadow: 0 6px 16px rgba(0,0,0,.2); pointer-events: none; }
.kd-bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
.kd-bubble.bad { background: #fee2e2; color: #991b1b; } .kd-bubble.bad::after { border-top-color: #fee2e2; }
.kd-bubble.good { background: #dcfce7; color: #14532d; } .kd-bubble.good::after { border-top-color: #dcfce7; }
.kd-fix { display: grid; gap: 8px; width: 100%; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.95); color: #111827; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.kd-fix b { font-size: 1rem; }
.kb-plan { list-style: none; margin: 4px 0 6px; padding: 0; max-height: 9.5em; overflow: auto; font-size: .82rem; }
.kb-plan li { padding: 1px 0; } .kb-plan li.ok { color: #15803d; } .kb-plan li.now { font-weight: 800; color: #6d28d9; }
.kb-plan small { color: #6b7280; }
.kb-opts .btn { background: #fff; color: #111827; }
.kb-opts .btn.bad { opacity: .45; text-decoration: line-through; }
@media (max-width: 640px) { .kb-plan { max-height: 5.2em; } .kd-bubble { max-width: 200px; font-size: .8rem; } }

/* Stromkreis-Labor: Erklär-Karten und Lexikon (v1.8.0) */
.kp-card.ks-card { width: min(640px, 100%); }
.ks-intro h2 { margin: 2px 0 10px; }
.ks-step { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.ks-pics { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 10px; }
.ks-pics figure { flex: 1 1 130px; max-width: 290px; margin: 0; padding: 8px; border-radius: 14px; background: linear-gradient(180deg, #f8fafc, #e2e8f0); text-align: center; }
.ks-pics img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.ks-pics figcaption { margin-top: 4px; font-size: .75rem; color: #475569; }
.ks-sym { --sym-bg: #f1f5f9; display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; color: #0f172a; }
.ks-sym text { stroke: none; }
.ks-sym text:not([fill]) { fill: currentColor; }
.ks-txt p { margin: 0 0 8px; line-height: 1.45; text-align: left; }
.ks-tip { padding: 8px 10px; border-radius: 10px; background: #fef9c3; color: #713f12; }
.ks-part { margin: 14px 0 6px; font-size: .95rem; text-align: left; }
.ks-lex .kl-btn b { font-size: 1.5rem; }
.ks-envrow { justify-content: flex-start; }
.ks-env { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ks-env.on, .ks-env:active { background: #fde047; color: #111827; }
.ks-poti { display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: #fff; font-weight: 700; white-space: nowrap; }
.ks-poti input { width: 120px; }

/* Admin: Level-Editor Stromkreis-Labor (v1.9.0) */
.kl-table .kl-group td { background: var(--c-surface-2, #f1f5f9); }
.kl-table .kl-types { font-size: .75rem; }
.kl-table .kl-act { white-space: nowrap; }
.kl-table .kl-act .inline-form { display: inline; }
.kl-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.le { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .le { grid-template-columns: 1fr; } }
.le-board { position: sticky; top: 12px; }
@media (max-width: 1100px) { .le-board { position: static; } }
.le-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; margin-bottom: 8px; }
.le-size { display: inline-flex; align-items: center; gap: 4px; }
.le-size select { width: auto; }
.le-modes { display: flex; flex-wrap: wrap; gap: 4px 14px; border: 0; padding: 0; margin: 0; }
.le-modes legend { font-size: .8rem; color: var(--c-muted, #64748b); padding: 0; }
.le-mode { display: inline-flex; gap: 4px; align-items: center; font-size: .88rem; }
.le-pal { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.le-type { display: inline-flex; flex-direction: column; align-items: center; min-width: 58px; padding: 4px 4px 3px; border: 1px solid var(--c-border, #cbd5e1); border-radius: 10px; background: var(--c-surface, #fff); color: inherit; cursor: pointer; font: inherit; }
.le-type span { font-size: 1.15rem; line-height: 1.2; }
.le-type small { font-size: .62rem; line-height: 1.1; text-align: center; }
.le-type.on { border-color: #f59e0b; background: #fef3c7; color: #111827; box-shadow: 0 0 0 2px #f59e0b; }
.le-svg { overflow-x: auto; }
.le-grid { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; user-select: none; }
.le-plate { fill: #0f766e; }
.le-node { fill: #e2e8f0; stroke: #94a3b8; stroke-width: 1.5; pointer-events: none; }
.le-slot { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.35); stroke-dasharray: 4 3; cursor: pointer; }
.le-slot:hover, .le-slot:focus { fill: rgba(253,224,71,.45); stroke: #fde047; outline: none; }
.le-slot.occ { pointer-events: none; opacity: 0; }
.le-part { cursor: pointer; }
.le-part rect { fill: var(--c); stroke: #0f172a; stroke-width: 2; }
.le-part.l-loose rect { stroke: #f97316; stroke-width: 3; stroke-dasharray: 6 3; }
.le-part.l-sol rect { stroke: #4ade80; stroke-width: 3; stroke-dasharray: 6 3; opacity: .85; }
.le-part.ghost { opacity: .25; }
.le-part.removed { opacity: .35; }
.le-part.on rect { filter: drop-shadow(0 0 6px #fde047); stroke: #fde047; }
.le-part.burnt rect { fill: #3f3f46; }
.le-part.sel rect { stroke: #fff; stroke-width: 4; }
.le-part:focus { outline: none; }
.le-part:focus rect { stroke: #fff; stroke-width: 4; }
.le-ico { font-size: 17px; pointer-events: none; }
.le-lbl { font-size: 11px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: #0f172a; stroke-width: 3px; pointer-events: none; }
.le-plus { font-size: 15px; font-weight: 900; fill: #fecaca; paint-order: stroke; stroke: #7f1d1d; stroke-width: 3px; pointer-events: none; }
.le-amp { font-size: 10.5px; font-weight: 700; fill: #fde047; paint-order: stroke; stroke: #0f172a; stroke-width: 3px; pointer-events: none; }
.le-x { font-size: 22px; fill: #ef4444; pointer-events: none; }
.le-arrow { fill: #ccfbf1; stroke: #134e4a; stroke-width: 1.5; pointer-events: none; }
.le-base { stroke: #cbd5e1; stroke-width: 3; stroke-dasharray: 5 3; pointer-events: none; }
.le-prop { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--c-surface-2, #f1f5f9); }
.le-prow { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 6px; }
.le-prow select { width: auto; }
.le-sim { margin-top: 8px; }
.le-env { display: inline-block; margin: 4px 0; }
.le-goals { list-style: none; margin: 6px 0; padding: 0; font-size: .88rem; }
.le-goals li.ok { color: #15803d; font-weight: 700; }
.le-goals li.bad { color: #b91c1c; font-weight: 700; }
.le-goals li.int { color: var(--c-muted, #64748b); }
.le-form { display: grid; gap: 12px; }
.le-form fieldset.card { margin: 0; }
.le-goal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 3px 0; border-bottom: 1px dashed var(--c-border, #e2e8f0); }
.le-goal small { display: block; }
.le-param { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; margin-left: 26px; }
.le-param input { width: 72px; }
.le-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 10px; }
.le-invi { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .86rem; }
.le-invi input { width: 64px; }
.le-row { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.le-row .field { flex: 1 1 130px; }
.le-row .le-icon { flex: 0 0 80px; }
.le-intro { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 10px; }
.le-lang { margin: 6px 0; }
.le-lang summary { cursor: pointer; font-size: .88rem; }
.le-msg.ok { color: #15803d; } .le-msg.bad { color: #b91c1c; } .le-msg.warn { color: #a16207; }
.le-msg ul { margin: 4px 0 0 18px; padding: 0; }
.le-tested { font-size: .9rem; }
.le .actions { position: static; background: none; padding: 4px 0 0; }
.le .le-invi { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; margin: 0; }
.le .le-invi span { flex: 1; min-width: 0; }
.le .le-param { flex-direction: row; }
.kl-act details { display: inline-block; position: relative; }
.kl-act summary { list-style: none; cursor: pointer; }
.kl-act summary::-webkit-details-marker { display: none; }
.kl-act .kl-more { position: absolute; right: 0; z-index: 5; display: flex; flex-direction: column; gap: 4px; min-width: 170px; padding: 8px; border-radius: 12px; background: var(--c-surface, #fff); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.kl-act .kl-more .btn { width: 100%; justify-content: flex-start; }
.kl-act .kl-more .inline-form { display: block; }
.kl-tools .actions { position: static; background: none; padding: 0; }
.le .le-invi input[type="number"] { width: 70px; min-width: 70px; flex: 0 0 70px; }
.le .le-invi span { flex: 1 1 auto; white-space: normal; }
.le-relay { stroke: #c4b5fd; stroke-width: 3; stroke-dasharray: 7 5; fill: none; pointer-events: none; }

/* Admin: Fotopaare „Finde den Fehler“ (v1.10.0) */
.kph-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kph-top .actions, .kph .actions { position: static; background: none; padding: 4px 0 0; }
.kph-thumb { display: block; width: 96px; height: auto; border-radius: 8px; background: #e2e8f0; }
.kph { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .kph { grid-template-columns: 1fr; } }
.kph-side { display: grid; gap: 12px; }
.kph-side fieldset.card { margin: 0; }
.kph-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 10px; }
.kph-sens { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; }
.kph-sens input { width: 110px; }
.kph-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .kph-wrap { grid-template-columns: 1fr; } }
.kph-pic { margin: 0; }
.kph-pic figcaption { margin-top: 4px; font-size: .8rem; color: var(--c-muted, #64748b); text-align: center; }
.kph-in { position: relative; width: 100%; overflow: hidden; border-radius: 10px; background: #0f172a; touch-action: none; cursor: crosshair; user-select: none; }
.kph-in img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.kph-heat { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; }
.kph-boxes { position: absolute; inset: 0; }
.kph-box { position: absolute; box-sizing: border-box; border: 2px solid #22c55e; border-radius: 8px; background: rgba(34,197,94,.12); cursor: move; }
.kph-box.sel { border-color: #f59e0b; background: rgba(245,158,11,.18); box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.kph-box b { position: absolute; left: -2px; top: -2px; min-width: 20px; padding: 0 4px; border-radius: 6px 0 6px 0; background: #22c55e; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.kph-box.sel b { background: #f59e0b; }
.kph-rs { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; border-radius: 4px; background: #fff; border: 2px solid currentColor; color: #f59e0b; cursor: nwse-resize; }
.kph-list { margin: 0; padding-left: 26px; display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.kph-list li { display: flex; gap: 6px; align-items: center; }
.kph-list li input { flex: 1; min-width: 0; }
.kph-list li.sel input { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.3); }
.kph-list .kph-empty { list-style: none; margin-left: -26px; font-size: .88rem; }
/* v1.11.0: STOP – Ersparnis für Eigendiagnose, „Passt zu“ */
.stop-good { display: flex; gap: 8px; align-items: flex-start; background: var(--c-ok-bg); border-radius: 12px; padding: 10px 12px; margin: 12px 0; }
.stop-good svg { flex: 0 0 auto; color: var(--c-ok); margin-top: 2px; }
.diag-box { max-width: 560px; text-align: center; }
.diag-box > span { font-weight: 800; font-size: 1.15rem; }
.diag-box p { margin: 6px 0; }
.diag-form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.diag-form .actions { justify-content: center; }
.diag-amount { max-width: 260px; text-align: left; }
.diag-amount input { font-size: 1.3rem; font-weight: 700; text-align: center; }
.tag-diag { background: #e0f2fe; color: #075985; }
.guide-fits { background: var(--c-ok-bg); border: 2px solid #abefc6; border-radius: 14px; padding: 12px 16px; margin: 12px 0; }
.guide-fits h2 { margin: 0 0 6px; }
.guide-fits .rich > :last-child { margin-bottom: 0; }
.diag-cell { white-space: nowrap; }
.diag-cell .in-num { width: 5.5em; }
.diag-set .inline-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.diag-set .inline-row .field { max-width: 150px; margin: 0; }
.diag-set .inline-row p { margin: 0 0 10px; }
/* v1.11.1: Bilder zu „Passt zu“ – kleine Bildchen, Lupe beim Darüberfahren / Antippen */
.fits-pics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.fits-pics figure { margin: 0; width: 110px; position: relative; }
.fits-pics img { width: 110px; height: 82px; object-fit: cover; border-radius: 10px; border: 2px solid #abefc6; background: #fff; cursor: zoom-in; display: block; }
.fits-pics figcaption { font-size: .78rem; color: var(--c-muted); margin-top: 3px; line-height: 1.2; overflow-wrap: anywhere; }
.fits-admin { display: grid; gap: 6px; margin: -4px 0 14px; padding: 10px 12px; border: 1px dashed var(--c-line); border-radius: 12px; }
.fits-admin .fits-pics { margin-top: 0; }
.fits-admin .fits-pics button { position: absolute; top: 2px; right: 2px; background: rgba(255,255,255,.9); padding: 0 6px; }
.fits-admin .inline-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* v1.11.2: Scanner-Sperre */
.fw-card form { margin: 0 0 12px; }
.fw-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.fw-row .field { margin: 0; max-width: 230px; }
/* v1.11.3: Hinweis „Kein Passkey auf diesem Gerät?“ */
.mfa-device-hint { align-items: flex-start; text-align: left; }
.mfa-device-hint p { margin: 4px 0 0; }
/* v1.12.0: Gerät koppeln */
.pair-show { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.pair-qr svg { width: 220px; height: 220px; display: block; background: #fff; border-radius: 12px; padding: 6px; }
.pair-show.is-done .pair-qr, .pair-show.is-gone .pair-qr { opacity: .15; }
.pair-show.is-done .pair-state { color: var(--c-ok); font-weight: 700; }
.pair-state { font-weight: 600; }
.pair-form { align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.pair-phone .form { margin-top: 10px; }
.pair-code { font-size: 2rem; font-weight: 800; letter-spacing: .15em; font-variant-numeric: tabular-nums; text-align: center; margin: 8px 0; }
.pair-ask { border: 2px solid var(--c-accent, #ffc400); border-radius: 12px; padding: 10px 14px; margin: 8px 0; }
.pair-ask .pair-code { display: inline; font-size: 1.4rem; }