/* BYLD app stylesheet. Tokens and components are the brand book's (docs/brand/brand-book-v2.html, sections 04–07, 11);
   the app shell (sidebar, tab bar, rows, tiles, states) is defined here because the book leaves it open. */

:root{
  --paper:#FAF8F5;--ink:#17171A;--white:#FFFFFF;
  --surface-page:#FAF8F5;--surface-raised:#FFFFFF;--surface-sunken:#F2EFE9;--surface-inverse:#17171A;
  --surface-signal-subtle:#EBF1FE;--surface-danger-subtle:#FBEEE8;--surface-success-subtle:#E9F4ED;--surface-warning-subtle:#F8F1DE;
  --scrim:rgba(23,23,26,.52);
  --text-primary:#17171A;--text-secondary:#6B6B74;--text-tertiary:#898991;--text-on-signal:#FFFFFF;--text-on-inverse:#FAF8F5;--text-disabled:#A9A9B0;
  --signal:#3E7BFA;--signal-fill:#2A6DF9;--signal-fill-hover:#1F5FE8;--signal-fill-active:#1A52C9;--signal-text:#145EF9;
  --success:#247C48;--success-fill:#27864D;--warning:#916300;--warning-fill:#8A5E00;--danger:#AE522D;--danger-fill:#B4552F;--danger-fill-hover:#9B4726;
  --border-subtle:#E4DFD6;--border-input:#988F81;--border-strong:#17171A;--focus-ring:#145EF9;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;
  --r-sm:12px;--r-md:18px;--r-lg:26px;--r-xl:44px;--r-pill:999px;
  --shadow-sm:0 1px 2px rgba(23,23,26,.05),0 1px 3px rgba(23,23,26,.06);
  --shadow-md:0 2px 6px rgba(23,23,26,.05),0 8px 20px rgba(23,23,26,.07);
  --shadow-lg:0 4px 12px rgba(23,23,26,.06),0 20px 48px rgba(23,23,26,.10);
  --dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;--ease-out:cubic-bezier(.2,.8,.3,1);--ease-in:cubic-bezier(.5,0,.9,.4);--breathe:5200ms;
  --font:"Space Grotesk","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --size-display:50px;--lh-display:1.06;--tr-display:-.022em;
  --size-title:28px;--lh-title:1.18;--tr-title:-.014em;
  --size-sub:19px;--lh-sub:1.35;--tr-sub:-.006em;
  --size-body:16px;--lh-body:1.6;--tr-body:0;
  --size-label:13px;--lh-label:1.4;--tr-label:.02em;
  --size-micro:12px;--lh-micro:1.35;--tr-micro:.09em;
  --measure:62ch;--control-h:48px;--nav-w:236px;--tab-h:64px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface-page:#131316;--surface-raised:#1F1F23;--surface-sunken:#0E0E10;--surface-inverse:#FAF8F5;
  --surface-signal-subtle:#16233D;--surface-danger-subtle:#2E1B12;--surface-success-subtle:#12251A;--surface-warning-subtle:#2A2007;--scrim:rgba(0,0,0,.66);
  --text-primary:#FAF8F5;--text-secondary:#A3A3AC;--text-tertiary:#82828C;--text-on-inverse:#17171A;--text-disabled:#5A5A63;
  --signal:#5C90FB;--signal-fill:#3E7BFA;--signal-fill-hover:#5C90FB;--signal-fill-active:#7BA6FC;--signal-text:#7BA6FC;--text-on-signal:#0B1424;
  --success:#4FBE7C;--success-fill:#2E9E5B;--warning:#E0A000;--warning-fill:#C98A00;--danger:#E08055;--danger-fill:#B4552F;--danger-fill-hover:#CE6B43;
  --border-subtle:#2C2C32;--border-input:#696975;--border-strong:#FAF8F5;--focus-ring:#7BA6FC;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow-md:0 2px 6px rgba(0,0,0,.45),0 8px 20px rgba(0,0,0,.4);--shadow-lg:0 4px 12px rgba(0,0,0,.5),0 20px 48px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --surface-page:#131316;--surface-raised:#1F1F23;--surface-sunken:#0E0E10;--surface-inverse:#FAF8F5;
  --surface-signal-subtle:#16233D;--surface-danger-subtle:#2E1B12;--surface-success-subtle:#12251A;--surface-warning-subtle:#2A2007;--scrim:rgba(0,0,0,.66);
  --text-primary:#FAF8F5;--text-secondary:#A3A3AC;--text-tertiary:#82828C;--text-on-inverse:#17171A;--text-disabled:#5A5A63;
  --signal:#5C90FB;--signal-fill:#3E7BFA;--signal-fill-hover:#5C90FB;--signal-fill-active:#7BA6FC;--signal-text:#7BA6FC;--text-on-signal:#0B1424;
  --success:#4FBE7C;--success-fill:#2E9E5B;--warning:#E0A000;--warning-fill:#C98A00;--danger:#E08055;--danger-fill:#B4552F;--danger-fill-hover:#CE6B43;
  --border-subtle:#2C2C32;--border-input:#696975;--border-strong:#FAF8F5;--focus-ring:#7BA6FC;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow-md:0 2px 6px rgba(0,0,0,.45),0 8px 20px rgba(0,0,0,.4);--shadow-lg:0 4px 12px rgba(0,0,0,.5),0 20px 48px rgba(0,0,0,.45);
}

/* ---- base (book) ---- */
*{box-sizing:border-box}
html{color-scheme:light dark;scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font);font-size:var(--size-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;min-height:100dvh}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:700}
p{margin:0}
a{color:var(--signal-text);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
main:focus{outline:none}
button,input,textarea,select{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
.nowrap{white-space:nowrap}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;background:var(--surface-inverse);color:var(--text-on-inverse);border-radius:var(--r-sm);z-index:9;text-decoration:none;font-weight:500}
.skip:focus-visible{width:auto;height:auto;clip-path:none;overflow:visible;left:var(--sp-4);top:var(--sp-4);padding:var(--sp-3) var(--sp-4)}
.num{font-variant-numeric:tabular-nums}
h1{font-size:var(--size-title);line-height:var(--lh-title);letter-spacing:var(--tr-title)}
h2{font-size:var(--size-sub);line-height:var(--lh-sub);letter-spacing:var(--tr-sub);font-weight:500}
h3{font-size:var(--size-label);line-height:var(--lh-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary);font-weight:500}
.eyebrow{font-size:var(--size-micro);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--text-secondary);font-weight:500;display:flex;gap:var(--sp-3);align-items:baseline}
.eyebrow b{color:var(--signal-text);font-weight:700}
.lede{font-size:var(--size-sub);line-height:1.5;letter-spacing:var(--tr-sub);max-width:var(--measure);color:var(--text-secondary)}
.cap{font-size:var(--size-micro);color:var(--text-secondary);letter-spacing:var(--tr-micro);text-transform:uppercase}
.t{font-weight:500}
.s{font-size:var(--size-label);color:var(--text-secondary);line-height:var(--lh-label)}
.link{font-size:var(--size-label);font-weight:500}

/* ---- shell ---- */
.side{position:fixed;inset:0 auto 0 0;width:var(--nav-w);padding:var(--sp-6) var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-5);background:var(--surface-page);border-right:1px solid var(--border-subtle);z-index:2}
.mark{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);text-decoration:none;padding:0 var(--sp-3);line-height:1}
.mark i{font-style:normal;color:var(--signal)}
.side-firm{font-size:var(--size-label);font-weight:500;padding:0 var(--sp-3);color:var(--text-secondary);text-wrap:balance}
.side-nav{display:flex;flex-direction:column;gap:2px;font-size:var(--size-label)}
.side-nav a,.tabs a{display:flex;align-items:center;gap:var(--sp-3);padding:10px var(--sp-3);border-radius:var(--r-sm);color:var(--text-secondary);text-decoration:none;font-weight:500;min-height:44px;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.side-nav a:hover{background:var(--surface-sunken);color:var(--text-primary)}
.side-nav a[aria-current],.tabs a[aria-current]{color:var(--signal-text)}
.side-nav a[aria-current]{background:var(--surface-signal-subtle)}
.side-nav svg,.tabs svg{flex:none}
.badge{margin-left:auto;font-size:var(--size-micro);font-weight:500;font-variant-numeric:tabular-nums;background:var(--surface-warning-subtle);color:var(--warning);border-radius:var(--r-pill);padding:1px 8px;line-height:1.6}
.side-foot{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}
.lang-sel{font:inherit;font-size:var(--size-label);color:var(--text-secondary);background:var(--surface-raised);border:1.5px solid var(--border-input);border-radius:var(--r-sm);min-height:36px;padding:0 var(--sp-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.side-foot .cap{font-size:var(--size-label);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.main{margin-left:var(--nav-w);padding:var(--sp-6) var(--sp-6) var(--sp-9);max-width:1180px;display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
.main.in>*{animation:rise var(--dur-slow) var(--ease-out) both}
.main.in>*:nth-child(2){animation-delay:40ms}.main.in>*:nth-child(3){animation-delay:80ms}.main.in>*:nth-child(4){animation-delay:120ms}.main.in>*:nth-child(n+5){animation-delay:160ms}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tabs{display:none}
@media (max-width:1000px){
  .side{display:none}
  .main{margin-left:0;padding:var(--sp-5) var(--sp-5) calc(var(--tab-h) + var(--sp-8) + env(safe-area-inset-bottom))}
  .tabs{display:flex;position:fixed;inset:auto 0 0 0;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding:var(--sp-2) var(--sp-2) env(safe-area-inset-bottom);background:var(--surface-raised);border-top:1px solid var(--border-subtle);z-index:2}
  .tabs a{flex:1;flex-direction:column;gap:2px;padding:6px 2px;font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;justify-content:center;min-height:48px;position:relative}
  .tabs .badge{position:absolute;top:0;right:calc(50% - 22px);margin:0;font-size:10px;padding:0 6px}
  h1{font-size:24px}
}
@media (max-width:620px){.main{padding-left:var(--sp-4);padding-right:var(--sp-4)}.row{grid-template-columns:1fr}.row-end{grid-column:1;grid-row:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--sp-3);margin-top:4px}.brain-head{align-items:flex-start}.brain-head .brain{width:48px;height:48px;margin-top:2px}.brain-head h2{font-size:24px}}

/* ---- page head ---- */
.page-head{display:flex;flex-direction:column;gap:var(--sp-3);padding-bottom:var(--sp-2)}
.page-head-row{display:flex;justify-content:space-between;gap:var(--sp-5);align-items:flex-start;flex-wrap:wrap}
.page-head-row>div:first-child{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.back{font-size:var(--size-label);font-weight:500;text-decoration:none;color:var(--text-secondary);align-self:flex-start;padding:4px 0}
.back:hover{color:var(--signal-text)}
.actions{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}

/* ---- cards, rows, tiles, kv ---- */
.card{background:var(--surface-raised);border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.rows{display:flex;flex-direction:column;gap:var(--sp-2)}
.rows.plain{gap:var(--sp-1)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--sp-4);align-items:center;background:var(--surface-sunken);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);text-decoration:none;color:inherit;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.row:hover{background:var(--surface-signal-subtle)}
.row:active{transform:scale(.995)}
.row>*:not(.row-end){grid-column:1;min-width:0}
.row-end{grid-column:2;grid-row:1/span 3;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.card .rows .row{background:var(--surface-sunken)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;gap:2px;background:var(--surface-raised);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.tile:hover{box-shadow:var(--shadow-md)}.tile:active{transform:scale(.99)}
.tile-n{font-size:32px;font-weight:700;letter-spacing:-.014em;line-height:1.1}
.tile-warn .tile-n{color:var(--signal-text)}
.tile-l{font-weight:500}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4)}
.kv>div{display:flex;flex-direction:column;gap:2px;background:var(--surface-sunken);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4)}
.kv strong{font-size:var(--size-sub);font-weight:500;letter-spacing:var(--tr-sub);line-height:1.3;word-break:break-word}
.bars{display:flex;flex-direction:column;gap:var(--sp-2)}
.bars a{display:grid;grid-template-columns:200px 1fr 56px;align-items:center;gap:var(--sp-3);text-decoration:none;color:inherit;font-size:var(--size-label);padding:4px 0}
.bars i{display:block;height:10px;border-radius:var(--r-pill);background:var(--signal);opacity:.85}
.bars b{text-align:right;font-weight:500}
@media (max-width:620px){.bars a{grid-template-columns:120px 1fr 48px}}

/* ---- pills, chips, callouts, states ---- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--size-micro);font-weight:500;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:var(--surface-sunken);color:var(--text-secondary)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.ok,.pill.pass{background:var(--surface-success-subtle);color:var(--success)}
.pill.fail{background:var(--surface-danger-subtle);color:var(--danger)}
.pill.warn{background:var(--surface-warning-subtle);color:var(--warning)}
.pill.info{background:var(--surface-signal-subtle);color:var(--signal-text)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{min-height:36px;padding:6px 14px;border-radius:var(--r-pill);border:0;background:var(--surface-sunken);color:var(--text-primary);font-size:14px;font-weight:400;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.chip:hover{background:var(--surface-signal-subtle);color:var(--signal-text)}
.chip.on{background:var(--surface-inverse);color:var(--text-on-inverse)}
.chip .num{color:inherit;opacity:.7}
.callout{border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);background:var(--surface-signal-subtle);font-size:var(--size-label)}
.callout.warn{background:var(--surface-warning-subtle)}
.err{background:var(--surface-danger-subtle);color:var(--danger);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);font-size:var(--size-label)}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);padding:var(--sp-8) var(--sp-5);background:var(--surface-raised);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.empty .brain{width:72px;height:72px;opacity:.32}
.empty p{color:var(--text-secondary);max-width:48ch}
.skeleton{display:flex;flex-direction:column;gap:var(--sp-3)}
.skeleton div{height:56px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-sunken) 0%,var(--surface-raised) 50%,var(--surface-sunken) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skeleton div:first-child{height:88px;width:60%}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.thinking{display:flex;align-items:center;gap:var(--sp-3);color:var(--text-secondary);font-size:var(--size-label)}
.thinking .brain{width:40px;height:40px}

/* ---- brain ---- */
.brain{width:120px;height:120px;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--signal) 62%,transparent) 0%,color-mix(in srgb,var(--signal) 26%,transparent) 34%,color-mix(in srgb,var(--signal) 6%,transparent) 62%,transparent 74%)}
.brain.think{animation:breathe var(--breathe) var(--ease-out) infinite}
.brain.rest{opacity:.32}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.09);opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.brain-card{gap:var(--sp-4)}
.brain-head{display:flex;align-items:center;gap:var(--sp-4)}
.brain-head .brain{width:64px;height:64px}
.brain-head h2{font-size:var(--size-title);line-height:var(--lh-title);letter-spacing:var(--tr-title);font-weight:700}
.ask-row{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap}
.hist{display:flex;flex-direction:column;gap:var(--sp-4)}
.qa{display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--border-subtle)}
.q{font-size:var(--size-body);font-weight:500;color:var(--text-primary);line-height:1.4}
.answer{display:flex;flex-direction:column;gap:var(--sp-3);max-width:var(--measure);font-size:17px;line-height:1.65;letter-spacing:-.003em;color:var(--text-primary);font-variant-numeric:tabular-nums;text-wrap:pretty}
.answer:lang(de){hyphens:auto}
.answer p{margin:0}
.answer p:first-child{font-size:var(--size-sub);line-height:var(--lh-sub);letter-spacing:var(--tr-sub);font-weight:500}
.cite{display:inline-block;box-sizing:border-box;min-width:19px;height:19px;padding:0 5px;margin:0 1px 0 3px;text-align:center;border-radius:var(--r-pill);background:var(--surface-signal-subtle);color:var(--signal-text);font-size:11px;font-weight:600;line-height:19px;text-decoration:none;vertical-align:2px;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.cite:hover{background:var(--signal-fill);color:var(--text-on-signal)}
.sources{display:flex;flex-direction:column;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.src{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--sp-4);font-size:var(--size-label);scroll-margin-top:var(--sp-5);transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.src:hover{box-shadow:var(--shadow-sm)}
.src:target{border-color:var(--signal);box-shadow:0 0 0 3px var(--surface-signal-subtle)}
.src .n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-pill);background:var(--surface-signal-subtle);color:var(--signal-text);font-size:12px;font-weight:600}
.src>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.src .t{font-size:15px;font-weight:600;text-decoration:none;color:var(--text-primary);letter-spacing:-.005em}
.src .t:hover{color:var(--signal-text)}
.src .s{color:var(--text-secondary)}
.src details{margin-top:4px}.src summary,.more>summary{cursor:pointer;color:var(--signal-text);font-size:var(--size-label);font-weight:500;width:fit-content}.src summary:hover,.more>summary:hover{text-decoration:underline}
.src pre,.text{white-space:pre-wrap;word-break:break-word;font:14px/1.55 var(--font);margin:var(--sp-2) 0 0;color:var(--text-secondary);background:var(--surface-sunken);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4)}
.text{color:var(--text-primary);max-height:60vh;overflow:auto;background:var(--surface-sunken);border-radius:var(--r-sm);padding:var(--sp-4);margin:0}
.original{display:block;width:100%;border:0;border-radius:var(--r-sm);background:var(--surface-sunken)}
iframe.original{height:75vh}
img.original{height:auto;max-height:75vh;object-fit:contain}
.snippet{color:var(--text-primary);margin-top:4px}
mark{background:var(--surface-signal-subtle);color:var(--signal-text);border-radius:3px;padding:0;font-weight:500}
.more{display:flex;flex-direction:column;gap:var(--sp-3)}

/* ---- fields, buttons ---- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.grow{flex:1 1 260px}
.field>span{font-size:var(--size-label);font-weight:500}
.field input,.field textarea,.field select{font:inherit;font-size:var(--size-body);min-height:var(--control-h);padding:0 var(--sp-3);border-radius:var(--r-sm);border:1.5px solid var(--border-input);background:var(--surface-raised);color:var(--text-primary);width:100%}
.field textarea{padding:var(--sp-3);line-height:1.5;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-secondary)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:var(--focus-ring)}
.form{display:flex;flex-direction:column;gap:var(--sp-4)}
.form-card{max-width:720px}
.btn{font:inherit;font-size:var(--size-body);font-weight:500;border:0;cursor:pointer;min-height:var(--control-h);padding:0 var(--sp-5);border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:var(--sp-2);text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--signal-fill);color:var(--text-on-signal)}
.btn-primary:hover{background:var(--signal-fill-hover)}.btn-primary:active{background:var(--signal-fill-active)}
.btn-secondary{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--border-input)}
.btn-secondary:hover{background:var(--surface-sunken)}
.btn-danger{background:var(--danger-fill);color:#FFFFFF}.btn-danger:hover{background:var(--danger-fill-hover)}
.btn:disabled{background:var(--surface-sunken);color:var(--text-disabled);cursor:not-allowed;box-shadow:none;transform:none}
.toggle{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--size-label);font-weight:500;min-height:var(--control-h);cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--signal-fill)}

/* ---- tables ---- */
.wrap{overflow-x:auto;min-width:0;background:linear-gradient(to right,var(--surface-raised) 30%,transparent) left/40px 100% no-repeat local,linear-gradient(to left,var(--surface-raised) 30%,transparent) right/40px 100% no-repeat local,linear-gradient(to right,rgba(23,23,26,.10),transparent) left/12px 100% no-repeat scroll,linear-gradient(to left,rgba(23,23,26,.10),transparent) right/12px 100% no-repeat scroll}
.doc .wrap{background:linear-gradient(to right,#FFFFFF 30%,transparent) left/40px 100% no-repeat local,linear-gradient(to left,#FFFFFF 30%,transparent) right/40px 100% no-repeat local,linear-gradient(to right,rgba(23,23,26,.10),transparent) left/12px 100% no-repeat scroll,linear-gradient(to left,rgba(23,23,26,.10),transparent) right/12px 100% no-repeat scroll}
table{border-collapse:collapse;width:100%;font-size:var(--size-label);font-variant-numeric:tabular-nums;min-width:520px}
table.tight{min-width:0}
th{text-align:left;font-weight:500;color:var(--text-secondary);text-transform:uppercase;font-size:var(--size-micro);letter-spacing:var(--tr-micro);padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--border-subtle);white-space:nowrap}
td{padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--border-subtle);vertical-align:top}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td .t{display:block}td .s{display:block}
td a.t{color:var(--text-primary);text-decoration:none}td a.t:hover{color:var(--signal-text)}
table.edit td{vertical-align:middle}
td input{width:96px;min-height:40px;padding:0 10px;border-radius:10px;border:1.5px solid var(--border-input);background:var(--surface-raised);text-align:right;font-size:var(--size-body)}
.unit-in{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.tot{display:grid;grid-template-columns:1fr auto;gap:4px var(--sp-5);font-size:15px;padding:var(--sp-3) var(--sp-4);background:var(--surface-sunken);border-radius:var(--r-sm)}
.tot .big{font-size:24px;font-weight:700;letter-spacing:-.014em;margin-top:4px}
.tot .num{text-align:right}

/* ---- the Angebot document: the firm's paper, never BYLD's, always light ---- */
.doc{background:#FFFFFF;color:#17171A;border-radius:var(--r-sm);box-shadow:var(--shadow-md);padding:var(--sp-6);font-size:13px;line-height:1.55;display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
.doc-head{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;border-bottom:2px solid #17171A;padding-bottom:var(--sp-3)}
.doc-head>div{display:flex;flex-direction:column;gap:2px}
.doc-firm{font-size:17px;font-weight:700;letter-spacing:-.01em}
.doc .s,.doc .cap{color:#6B6B74}
.doc-meta{text-align:right}.doc-meta strong{font-size:15px}
.doc-to{display:flex;flex-direction:column;gap:2px;max-width:60ch}
.doc-title{font-size:15px;font-weight:700;letter-spacing:-.006em}
.doc table{min-width:0;font-size:12px}
.doc th,.doc td{border-bottom:1px solid #E4DFD6;padding:7px 8px;color:#17171A}
.doc th{color:#6B6B74}
.doc td .s{color:#6B6B74;font-size:11px}
.doc-tot{background:transparent;padding:0;justify-self:end;width:auto;min-width:280px;margin-left:auto;font-size:13px;grid-template-columns:auto auto}
.doc-tot .big{font-size:15px;font-weight:700;border-top:2px solid #17171A;padding-top:6px;margin-top:2px}
.doc-foot{border-top:1px solid #E4DFD6;padding-top:var(--sp-3);color:#6B6B74;font-size:11px}
.intern,.intern-only,td .s.intern{display:none}
.show-intern th.intern,.show-intern td.intern{display:table-cell}
.show-intern td .s.intern{display:block}
.show-intern .intern-only{display:flex}
@media (max-width:620px){.doc{padding:var(--sp-4)}.doc-tot{min-width:0;width:100%;margin:0}.doc-meta{text-align:left}.doc-head{flex-direction:column}}

/* ---- print: only the Angebot, on the firm's paper ---- */
@media print{
  @page{margin:16mm}
  html,body{background:#FFFFFF}
  .side,.tabs,.skip,.page-head,.intern-only,#quoteErr,.brain{display:none!important}
  .main{margin:0;padding:0;max-width:none}
  .doc{box-shadow:none;padding:0;border-radius:0;font-size:11pt}
  .doc table{font-size:10pt}
  .wrap{overflow:visible}
  a{color:inherit;text-decoration:none}
}