/* ═══════════════════════════════════════════════════════════════════════
   SPINE CE — Design

   WOERTLICH uebernommen aus prototype/spine_prototype.html. Die Uebergabe
   sagt: „Design wie im Prototyp. Nicht neu erfinden.“ Deshalb steht hier
   keine Neuinterpretation, sondern der Originalblock.

   Aenderungen bitte im Prototyp nachziehen, damit beide nicht auseinander
   laufen. Ergaenzungen fuer die Serverfassung stehen am Ende unter
   „SERVERFASSUNG“.
   ═══════════════════════════════════════════════════════════════════════ */

  :root {
    --accent: #E6197F;          /* Backbone pink */
    --accent-soft: rgba(230,25,127,0.10);
    --ink: #1A1612;             /* dark cards */
    --surface: #FDFBF8;
    --surface-low: #F7F4EF;
    --surface-mid: #F0EDE7;
    --surface-high: #E8E4DC;
    --on-surface: #1A1612;
    --on-surface-var: #6B6258;
    --outline-var: #D8D2C8;
    --bg: #FDFBF8;
    --panel: #FFFFFF;

    --st-draft: #E6197F;
    --st-sent: #1E5F8E;
    --st-approved: #3A5C2F;
    --st-lost: #8B2A1C;

    --motion: cubic-bezier(0.2, 0, 0, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --decel: cubic-bezier(0.05, 0.7, 0.1, 1);
    --dur-s: 200ms; --dur-m: 400ms; --dur-l: 600ms;
  }
  [data-theme="dark"] {
    --ink: #221D24;
    --surface: #18151A;
    --surface-low: #1D1A20;
    --surface-mid: #242027;
    --surface-high: #2F2A32;
    --on-surface: #F3EEF1;
    --on-surface-var: #A89DA5;
    --outline-var: #37313A;
    --bg: #131015;
    --panel: #1D1A20;
  }

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    font-family: 'Barlow', 'Helvetica Neue', sans-serif;
    background: var(--bg); color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh; overflow-x: hidden; letter-spacing: -0.01em;
  }
  button, input, select, textarea { font-family: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .ms {
    font-family: 'Material Symbols Rounded';
    font-weight: normal; font-style: normal; font-size: 22px; line-height: 1;
    display: inline-block; white-space: nowrap; direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
  }
  .ms.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

  /* BACKGROUND */
  .shape-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

  /* APP BAR */
  .app-bar {
    height: 88px; display: flex; align-items: center; padding: 0 36px;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
    position: sticky; top: 0; z-index: 200;
    border-bottom: 1px solid color-mix(in srgb, var(--outline-var) 60%, transparent);
    animation: slideDown var(--dur-l) var(--decel) both;
  }
  @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
  .brand-lockup { display: flex; align-items: center; gap: 18px; cursor: pointer; text-decoration: none; color: inherit; }
  /* Replace .brand-mark content with the real Backbone logo (e.g. <img src="backbone-logo.svg">) */
  /* Logo: the white logo.webp from backbone.rocks, rendered black on light, white on dark */
  .brand-mark { height: 44px; display: flex; align-items: center; flex-shrink: 0; }
  .brand-mark img { height: 30px; width: auto; display: block; filter: brightness(0); }
  [data-theme="dark"] .brand-mark img { filter: none; }
  .brand-mark span { display: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 28px; color: var(--on-surface); line-height: 1; }
  .brand-mark span i { color: var(--accent); font-style: normal; }
  .brand-mark.noimg span { display: block; }

  /* MASCOT (Funker figure from backbone.rocks) */
  .pl-mascot { position: absolute !important; right: 26px; bottom: -6px; height: 158px; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
  .pipeline { padding-right: 190px; }
  .share-hero { display: flex; align-items: flex-end; gap: 24px; }
  .share-hero > div { flex: 1; min-width: 0; }
  .share-hero img { height: 170px; flex-shrink: 0; margin-bottom: -6px; }
  .gate-mascot { height: 150px; display: block; margin: 0 auto 18px; }
  .dr-empty img { height: 90px; display: block; margin: 0 auto 10px; opacity: .9; }
  .brand-lockup:hover .brand-mark { border-radius: 22px; }
  .brand-divider { width: 1px; height: 44px; background: var(--outline-var); }
  .brand-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 34px; line-height: .9; letter-spacing: .01em; display: flex; align-items: flex-start; }
  .brand-name sup { font-size: 11px; font-weight: 700; color: var(--accent); margin: 2px 0 0 3px; letter-spacing: .04em; }
  .brand-name .b2 { position: relative; }
  .brand-name .b2::after {
    content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 3px; background: var(--accent);
    border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-l) var(--motion);
  }
  .brand-lockup:hover .b2::after { transform: scaleX(1); }
  .brand-sub { font-size: 12px; font-weight: 500; color: var(--on-surface-var); margin-top: 3px; }
  .bar-spacer { flex: 1; }
  .bar-actions { display: flex; align-items: center; gap: 6px; }
  .icon-btn {
    width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent; cursor: pointer;
    display: grid; place-items: center; color: var(--on-surface-var); transition: background var(--dur-s) var(--motion);
  }
  .icon-btn:hover { background: color-mix(in srgb, var(--on-surface) 7%, transparent); }
  .icon-btn.sm { width: 32px; height: 32px; }
  .icon-btn.sm .ms { font-size: 18px; }
  .avatar {
    width: 42px; height: 42px; border-radius: 50%; margin-left: 10px;
    background: linear-gradient(135deg, #1A1612 0%, #3A3430 100%); color: #fff;
    display: grid; place-items: center; font: 700 15px 'Barlow Condensed', sans-serif; cursor: pointer;
    transition: border-radius var(--dur-m) var(--spring); border: none;
  }
  .avatar:hover { border-radius: 14px; }

  /* USER MENU */
  .user-menu { position: relative; }
  .um-panel {
    position: absolute; top: calc(100% + 10px); right: 0; width: 270px; background: var(--panel);
    border: 1px solid var(--outline-var); border-radius: 16px; padding: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.06);
    opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right; pointer-events: none;
    transition: opacity 180ms var(--motion), transform 180ms var(--motion); z-index: 300;
  }
  .um-panel.open { opacity: 1; transform: none; pointer-events: auto; }
  .um-head { padding: 10px 12px 14px; border-bottom: 1px solid var(--outline-var); margin-bottom: 6px; }
  .um-head-name { font-weight: 700; font-size: 14px; }
  .um-head-mail { font-size: 11px; color: var(--on-surface-var); margin-top: 1px; }
  .um-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
    font-size: 13px; font-weight: 500; background: transparent; border: none; width: 100%; text-align: left;
  }
  .um-item:hover { background: var(--surface-mid); }
  .um-item .ms { font-size: 18px; color: var(--on-surface-var); }
  .um-divider { height: 1px; background: var(--outline-var); margin: 6px 4px; }
  .um-theme-row { display: flex; gap: 4px; padding: 4px; }
  .um-theme-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px; border-radius: 8px;
    background: transparent; border: 1px solid transparent; cursor: pointer; font: 600 11px 'Barlow', sans-serif; color: var(--on-surface-var);
  }
  .um-theme-btn .ms { font-size: 14px; }
  .um-theme-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

  /* MAIN */
  main { max-width: 1240px; margin: 0 auto; padding: 52px 36px 140px; position: relative; z-index: 1; }
  .in { animation: heroIn 700ms var(--decel) both; }
  @keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

  .greeting { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(44px, 6vw, 72px); line-height: 1; letter-spacing: -.02em; margin: 0 0 12px; }
  .hero { margin-bottom: 36px; }
  .hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
  .chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px;
    background: color-mix(in srgb, var(--surface-mid) 70%, transparent); border: 1px solid color-mix(in srgb, var(--outline-var) 60%, transparent);
    font-size: 13px; color: var(--on-surface-var); font-weight: 500;
  }
  .chip .ms { font-size: 17px; color: var(--accent); font-variation-settings: 'FILL' 1; }

  /* DARK CARD */
  .dark-card {
    background: var(--ink); color: #fff; border-radius: 24px; padding: 28px 32px; position: relative; overflow: hidden;
  }
  .dark-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, rgba(230,25,127,.18) 0%, transparent 55%, rgba(30,95,142,.10) 100%);
  }
  .dark-card > * { position: relative; }
  .dc-label { font: 600 11px 'Barlow Condensed', sans-serif; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 6px; }
  .dc-big { font: 800 44px 'Barlow Condensed', sans-serif; line-height: 1; letter-spacing: -.02em; }
  .dc-big.pink { color: var(--accent); }
  .dc-sub { font-size: 13px; color: rgba(255,255,255,.5); }
  .dc-div { width: 1px; align-self: stretch; background: rgba(255,255,255,.12); flex-shrink: 0; }
  .pipeline { display: flex; align-items: center; gap: 32px; margin-bottom: 44px; flex-wrap: wrap; }
  .pipeline::after {
    content: 'BACKBONE'; position: absolute; right: -20px; top: -30px; font: 900 160px 'Barlow Condensed', sans-serif;
    color: rgba(255,255,255,.04); line-height: 1; letter-spacing: -4px; pointer-events: none;
  }
  .pl-stats { display: flex; gap: 24px; flex: 1; flex-wrap: wrap; }
  .pl-stat .v { font: 800 32px 'Barlow Condensed', sans-serif; line-height: 1; }
  .pl-stat .l { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-top: 4px; }

  /* SEARCH */
  .search-zone { margin: 0 0 44px; }
  .search-bar {
    max-width: 720px; height: 58px; border-radius: 29px; display: flex; align-items: center; padding: 0 28px; gap: 16px;
    background: color-mix(in srgb, var(--surface-mid) 70%, transparent); border: 1px solid var(--outline-var);
    transition: all var(--dur-m) var(--motion);
  }
  .search-bar:focus-within { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .search-bar .ms { color: var(--on-surface-var); }
  .search-bar:focus-within .ms { color: var(--accent); }
  .search-bar input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; }
  .suggest-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
  .suggest {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 16px;
    background: var(--surface-low); border: 1px solid var(--outline-var); font-size: 12px; font-weight: 500;
    color: var(--on-surface-var); cursor: pointer; transition: all var(--dur-s) var(--motion);
  }
  .suggest:hover { border-color: var(--accent); color: var(--on-surface); transform: translateY(-1px); }
  .suggest .ms { font-size: 15px; }

  .sec-label { font-weight: 600; font-size: 12px; color: var(--on-surface-var); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
  .sec-line { flex: 1; height: 1px; background: linear-gradient(to right, var(--outline-var), transparent); }

  /* ESTIMATE TILES */
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
  .tile {
    background: var(--surface); border-radius: 24px; padding: 24px; cursor: pointer; position: relative;
    display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--outline-var);
    transition: all var(--dur-m) var(--motion); overflow: hidden; text-align: left;
  }
  .tile::before { content: ''; position: absolute; inset: 0; background: var(--tile-accent); opacity: 0; transition: opacity var(--dur-m) var(--motion); }
  .tile:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -8px rgba(0,0,0,.14); border-color: transparent; }
  .tile:hover::before { opacity: .04; }
  .tile > * { position: relative; }
  .tile-row { display: flex; align-items: center; justify-content: space-between; }
  .tile-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--tile-accent); }
  .tile-icon .ms { font-size: 26px; color: #fff; font-variation-settings: 'FILL' 1; }
  .badge { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 10px; background: color-mix(in srgb, var(--tile-accent) 12%, transparent); color: var(--tile-accent); }
  .tile-name { font: 800 22px 'Barlow Condensed', sans-serif; line-height: 1.05; }
  .tile-desc { font-size: 13px; color: var(--on-surface-var); line-height: 1.5; margin: 0; }
  .tile-meta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--outline-var); font-size: 12px; font-weight: 500; color: var(--on-surface-var); }
  .tile-meta b { font: 800 18px 'Barlow Condensed', sans-serif; color: var(--on-surface); margin-left: auto; }
  .tile.new { border-style: dashed; align-items: center; justify-content: center; min-height: 220px; color: var(--on-surface-var); --tile-accent: var(--accent); }
  .tile.new .ms { font-size: 40px; color: var(--accent); }
  .tile.new .tile-name { color: var(--on-surface); }
  .empty { padding: 40px; text-align: center; color: var(--on-surface-var); border: 1px dashed var(--outline-var); border-radius: 24px; }

  /* EDITOR HEADER */
  .ed-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
  .back-btn { margin-top: 10px; }
  .ed-title-wrap { flex: 1; min-width: 260px; }
  .ed-title {
    font: 700 clamp(34px, 4.5vw, 54px) 'Barlow Condensed', sans-serif; letter-spacing: -.02em; line-height: 1;
    border: none; background: transparent; width: 100%; padding: 4px 0; border-bottom: 2px solid transparent; outline: none;
  }
  .ed-title:focus { border-bottom-color: var(--accent); }
  .ed-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
  .status-select {
    appearance: none; border: 1px solid var(--outline-var); background: var(--surface-low); border-radius: 16px;
    height: 32px; padding: 0 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  .ed-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 21px; cursor: pointer;
    font-size: 14px; font-weight: 600; border: 1px solid var(--outline-var); background: var(--surface); transition: all var(--dur-s) var(--motion);
  }
  .btn:hover { border-color: var(--accent); }
  .btn .ms { font-size: 18px; }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  .btn.primary:hover { filter: brightness(1.08); }
  .btn.sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: 16px; }

  .tabs { display: flex; gap: 4px; margin-bottom: 28px; border-bottom: 1px solid var(--outline-var); overflow-x: auto; }
  .tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: none; background: transparent; cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--on-surface-var); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap;
  }
  .tab .ms { font-size: 19px; }
  .tab.active { color: var(--on-surface); border-bottom-color: var(--accent); }
  .tab.active .ms { color: var(--accent); font-variation-settings: 'FILL' 1; }

  /* ESTIMATE LAYOUT */
  .ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
  .side { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 16px; }
  .tot-row { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.6); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .tot-row b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
  .tot-grand { margin-top: 16px; }
  .gnav { background: var(--surface); border: 1px solid var(--outline-var); border-radius: 24px; padding: 14px; }
  .gnav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: var(--on-surface); font-size: 13px; }
  .gnav a:hover { background: var(--surface-mid); }
  .gnav .no { font: 700 12px 'Barlow Condensed', sans-serif; color: var(--on-surface-var); width: 18px; }
  .gnav .amt { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--on-surface-var); font-size: 12px; }
  .gnav a.has .amt { color: var(--on-surface); font-weight: 600; }
  .gbar { height: 3px; border-radius: 2px; background: var(--surface-high); margin: 0 10px 4px 38px; overflow: hidden; }
  .gbar i { display: block; height: 100%; background: var(--accent); transition: width 500ms var(--decel); }

  /* GROUP CARDS */
  .group { background: var(--surface); border: 1px solid var(--outline-var); border-radius: 20px; margin-bottom: 12px; overflow: hidden; scroll-margin-top: 110px; }
  .g-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; user-select: none; }
  .g-no {
    width: 40px; height: 40px; border-radius: 12px; background: var(--surface-mid); display: grid; place-items: center;
    font: 800 17px 'Barlow Condensed', sans-serif; color: var(--on-surface-var); flex-shrink: 0;
  }
  .group.has .g-no { background: var(--accent); color: #fff; }
  .g-name { font: 700 21px 'Barlow Condensed', sans-serif; line-height: 1.1; }
  .g-sub { font-size: 12px; color: var(--on-surface-var); }
  .g-total { margin-left: auto; text-align: right; }
  .g-total b { font: 800 20px 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; }
  .g-total div { font-size: 11px; color: var(--on-surface-var); }
  .g-chev { transition: transform var(--dur-s) var(--motion); color: var(--on-surface-var); }
  .group.open .g-chev { transform: rotate(180deg); }
  .g-body { display: none; border-top: 1px solid var(--outline-var); overflow-x: auto; }
  .group.open .g-body { display: block; }
  .g-inner { min-width: 820px; padding: 6px 12px 14px; }

  .sub-head { display: flex; align-items: center; gap: 10px; padding: 14px 8px 6px; font-size: 13px; font-weight: 700; }
  .sub-head .letter { font: 800 13px 'Barlow Condensed', sans-serif; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-high); display: grid; place-items: center; }
  .sub-head .mk { font-size: 11px; font-weight: 500; color: var(--on-surface-var); }
  .sub-head .btn { margin-left: auto; }

  .lrow, .lhead {
    display: grid; grid-template-columns: 28px 44px minmax(150px, 1fr) 52px 50px 50px 50px 86px 142px 32px 32px;
    gap: 6px; align-items: center; padding: 3px 4px;
  }
  .lhead { font-size: 11px; font-weight: 600; color: var(--on-surface-var); padding-top: 2px; }
  .lhead span:nth-child(n+4) { text-align: right; padding-right: 8px; }
  .lhead span:nth-child(2) { text-align: left; }
  .lrow { border-radius: 10px; }
  .lrow:hover { background: var(--surface-low); }
  .lrow input, .ldet input, .ldet select, .field input, .field select, .field textarea {
    width: 100%; height: 34px; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 0 8px;
    font-size: 13px; outline: none; transition: border-color var(--dur-s), background var(--dur-s);
  }
  .lrow input:hover { border-color: var(--outline-var); }
  .lrow input:focus, .ldet input:focus, .ldet select:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: var(--surface); }
  .lrow input.num { text-align: right; font-variant-numeric: tabular-nums; }
  .lrow .out { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; padding-right: 8px; font-size: 13px; }
  .lrow .flags { display: flex; gap: 3px; justify-content: flex-end; }
  .flag { font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
  .exp { transition: transform var(--dur-s); }
  .lrow.x .exp { transform: rotate(90deg); color: var(--accent); }
  .ldet {
    display: none; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 12px;
    margin: 2px 4px 10px 38px; padding: 14px; background: var(--surface-low); border-radius: 12px; border: 1px solid var(--outline-var);
  }
  .ldet.open { display: grid; }
  .ldet label, .field label { display: block; font-size: 11px; font-weight: 600; color: var(--on-surface-var); margin-bottom: 4px; }
  .ldet input, .ldet select { border-color: var(--outline-var); background: var(--surface); }
  .ldet .wide { grid-column: 1 / -1; }
  .ldet .calc-note { grid-column: 1 / -1; font-size: 12px; color: var(--on-surface-var); font-family: 'Roboto Mono', monospace; }

  /* PANELS (summary, project, settings) */
  .panel { background: var(--surface); border: 1px solid var(--outline-var); border-radius: 24px; padding: 24px; margin-bottom: 16px; }
  .panel h3 { font: 700 22px 'Barlow Condensed', sans-serif; margin: 0 0 4px; }
  .panel .hint { font-size: 13px; color: var(--on-surface-var); margin: 0 0 18px; }
  .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; }
  .field input, .field select, .field textarea { border-color: var(--outline-var); background: var(--surface-low); height: 40px; }
  .field textarea { height: 200px; padding: 10px; resize: vertical; line-height: 1.5; }
  .field.wide { grid-column: 1 / -1; }
  .field .suffix { position: relative; }
  .field .suffix input { padding-right: 34px; }
  .field .suffix span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--on-surface-var); }

  table.sum { width: 100%; border-collapse: collapse; font-size: 14px; }
  table.sum th { text-align: right; font-size: 11px; font-weight: 600; color: var(--on-surface-var); padding: 8px 10px; border-bottom: 1px solid var(--outline-var); }
  table.sum th:first-child, table.sum td:first-child { text-align: left; }
  table.sum td { padding: 10px; border-bottom: 1px solid var(--outline-var); text-align: right; font-variant-numeric: tabular-nums; }
  table.sum td.no { width: 40px; font: 700 14px 'Barlow Condensed', sans-serif; color: var(--on-surface-var); }
  table.sum tr.zero td { color: var(--on-surface-var); }
  table.sum tr.sub td { font-weight: 700; border-top: 2px solid var(--on-surface); }
  table.sum tr.grand td { font: 800 22px 'Barlow Condensed', sans-serif; border-bottom: none; color: var(--accent); }
  .tbl-wrap { overflow-x: auto; }

  /* TOAST */
  .toast {
    position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: #fff;
    padding: 12px 20px; border-radius: 14px; font-size: 14px; font-weight: 500; z-index: 500; transition: all 300ms var(--decel);
    display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.2);
  }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }
  .toast .ms { color: var(--accent); font-size: 18px; }

  @media (max-width: 980px) {
    .ed-grid { grid-template-columns: 1fr; }
    .side { position: static; order: -1; }
    .gnav { display: none; }
  }
  @media (max-width: 768px) {
    .app-bar { height: 72px; padding: 0 16px; }
    .brand-divider, .brand-sub { display: none; }
    .brand-name { font-size: 28px; }
    main { padding: 32px 16px 100px; }
    .pipeline { gap: 18px; }
    .dc-div { display: none; }
    .g-head { padding: 14px; gap: 10px; }
  }

  /* COMMENT BUTTON */
  .cbtn { position: relative; }
  .cbtn .cnt {
    position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
    background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; pointer-events: none;
  }
  .cbtn.has .ms { color: var(--accent); font-variation-settings: 'FILL' 1; }

  /* SCRIM / MODAL / DRAWER */
  .scrim { position: fixed; inset: 0; background: rgba(12,8,14,.45); z-index: 400; opacity: 0; pointer-events: none; transition: opacity 250ms var(--motion); }
  .scrim.open { opacity: 1; pointer-events: auto; }
  .modal {
    position: fixed; left: 50%; top: 50%; width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
    transform: translate(-50%, -46%) scale(.98); opacity: 0; pointer-events: none; z-index: 410;
    background: var(--panel); border: 1px solid var(--outline-var); border-radius: 24px; padding: 24px;
    box-shadow: 0 24px 64px rgba(0,0,0,.25); transition: all 250ms var(--decel);
  }
  .modal.open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
  .m-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
  .m-icon { width: 48px; height: 48px; border-radius: 16px; background: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
  .m-icon .ms { color: #fff; font-variation-settings: 'FILL' 1; }
  .m-title { font: 700 26px 'Barlow Condensed', sans-serif; line-height: 1; }
  .m-sub { font-size: 13px; color: var(--on-surface-var); margin-top: 4px; }
  .m-head .icon-btn { margin-left: auto; }
  .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--outline-var); }
  .toggle-row .t { font-size: 14px; font-weight: 600; }
  .toggle-row .d { font-size: 12px; color: var(--on-surface-var); margin-top: 2px; }
  .sw { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 13px; background: var(--surface-high); position: relative; cursor: pointer; flex-shrink: 0; margin: 0; transition: background 200ms; }
  .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform 220ms var(--spring); }
  .sw:checked { background: var(--accent); }
  .sw:checked::after { transform: translateX(18px); }
  .link-box { display: flex; gap: 6px; align-items: center; background: var(--surface-low); border: 1px solid var(--outline-var); border-radius: 14px; padding: 6px 6px 6px 14px; margin: 4px 0 14px; }
  .link-box span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px 'Roboto Mono', monospace; color: var(--on-surface-var); }
  .pw-row { display: flex; gap: 8px; margin-top: 10px; }
  .pw-row input { flex: 1; height: 40px; border: 1px solid var(--outline-var); background: var(--surface-low); border-radius: 12px; padding: 0 12px; font-size: 14px; outline: none; }
  .pw-row input:focus { border-color: var(--accent); }
  .pw-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--st-approved); margin-top: 8px; }
  .pw-state .ms { font-size: 16px; font-variation-settings: 'FILL' 1; }

  .drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100vw); z-index: 410; display: flex; flex-direction: column;
    background: var(--panel); border-left: 1px solid var(--outline-var); box-shadow: -24px 0 64px rgba(0,0,0,.18);
    transform: translateX(105%); transition: transform 320ms var(--decel);
  }
  .drawer.open { transform: none; }
  .dr-head { padding: 22px 20px 16px; border-bottom: 1px solid var(--outline-var); display: flex; gap: 12px; align-items: flex-start; }
  .dr-title { font: 700 24px 'Barlow Condensed', sans-serif; line-height: 1.05; }
  .dr-sub { font-size: 12px; color: var(--on-surface-var); margin-top: 4px; }
  .dr-head .icon-btn { margin-left: auto; flex-shrink: 0; }
  .dr-list { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
  .dr-empty { text-align: center; color: var(--on-surface-var); font-size: 13px; padding: 30px 10px; }
  .dr-empty .ms { font-size: 36px; color: var(--outline-var); display: block; margin: 0 auto 8px; }
  .dr-sec { font-size: 12px; font-weight: 700; color: var(--on-surface-var); margin-top: 6px; }
  .cmt { display: flex; gap: 10px; }
  .cmt-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 12px 'Barlow Condensed', sans-serif; color: #fff; background: var(--accent); flex-shrink: 0; }
  .cmt.guest .cmt-av { background: var(--st-sent); }
  .cmt-b { flex: 1; min-width: 0; background: var(--surface-low); border: 1px solid var(--outline-var); border-radius: 4px 14px 14px 14px; padding: 10px 12px; }
  .cmt-meta { font-size: 11px; color: var(--on-surface-var); display: flex; gap: 6px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
  .cmt-meta b { color: var(--on-surface); font-size: 12px; }
  .cmt-role { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
  .cmt.guest .cmt-role { background: color-mix(in srgb, var(--st-sent) 12%, transparent); color: var(--st-sent); }
  .cmt-del { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--on-surface-var); padding: 0; display: grid; }
  .cmt-del .ms { font-size: 16px; }
  .cmt-text { font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
  .cmt-ref { font-size: 11px; font-weight: 600; color: var(--accent); cursor: pointer; margin-top: 6px; display: inline-flex; gap: 4px; align-items: center; border: none; background: none; padding: 0; }
  .cmt-ref .ms { font-size: 14px; }
  .dr-form { padding: 14px 20px 20px; border-top: 1px solid var(--outline-var); display: flex; flex-direction: column; gap: 8px; }
  .dr-form input, .dr-form textarea { width: 100%; border: 1px solid var(--outline-var); background: var(--surface-low); border-radius: 12px; padding: 10px 12px; font-size: 13px; outline: none; }
  .dr-form textarea { height: 84px; resize: vertical; line-height: 1.45; }
  .dr-form input:focus, .dr-form textarea:focus { border-color: var(--accent); background: var(--surface); }
  .dr-form .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .dr-form .as { font-size: 12px; color: var(--on-surface-var); }
  .dr-off { font-size: 12px; color: var(--on-surface-var); background: var(--surface-mid); border-radius: 10px; padding: 8px 12px; display: flex; gap: 8px; align-items: center; }
  .dr-off .ms { font-size: 16px; }

  /* SHARE PAGE */
  body.guest .bar-actions { display: none; }
  .preview-bar {
    position: sticky; top: 88px; z-index: 150; background: var(--ink); color: rgba(255,255,255,.75); font-size: 12px;
    display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; flex-wrap: wrap;
  }
  .preview-bar button { background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 12px; height: 26px; padding: 0 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
  .kd { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px 20px; }
  .kd .k { font-size: 11px; font-weight: 600; color: var(--on-surface-var); margin-bottom: 3px; }
  .kd .v { font-size: 15px; font-weight: 500; }
  .gate { max-width: 440px; margin: 40px auto; text-align: center; }
  .gate .m-icon { margin: 0 auto 18px; width: 64px; height: 64px; border-radius: 20px; }
  .gate .gate-mascot + .m-icon { display: none; }
  .gate .m-icon .ms { font-size: 30px; }
  .gate .pw-row input { height: 48px; }
  .gate .err { color: var(--st-lost); font-size: 13px; margin-top: 10px; min-height: 18px; }
  .lrow.ro span.c { padding: 0 8px; font-size: 13px; }
  .lrow.ro span.n { text-align: right; font-variant-numeric: tabular-nums; }
  .lrow.ro .note { grid-column: 2 / -1; font-size: 12px; color: var(--on-surface-var); padding: 0 8px 6px; margin-top: -4px; }
  .side .btn { width: 100%; justify-content: center; }

  @media (max-width: 768px) {
    .preview-bar { top: 72px; }
    .pipeline { padding-right: 32px; }
    .pl-mascot { display: none; }
    .share-hero img { height: 110px; }
    .brand-mark img { height: 24px; }
  }

  /* PRINT */
  #print-root { display: none; }
  @media print {
    @page { size: A4; margin: 16mm 14mm; }
    body { background: #fff; color: #111; }
    .app-bar, main, .shape-bg, .toast, #preview-root, .scrim, .modal, .drawer { display: none !important; }
    #print-root { display: block; font-family: 'Barlow', sans-serif; font-size: 10pt; color: #111; }
    .p-page { page-break-after: always; }
    .p-page:last-child { page-break-after: auto; }
    .p-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid #E6197F; padding-bottom: 8px; margin-bottom: 14px; }
    .p-logo { background: #1A1612; padding: 7px 14px; border-radius: 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; font: 900 18pt 'Barlow Condensed', sans-serif; color: #fff; line-height: 1; }
    .p-logo img { height: 24px; display: block; }
    .p-logo span { color: #E6197F; }
    .p-addr { font-size: 7.5pt; text-align: right; color: #555; line-height: 1.4; }
    .p-kicker { font: 700 9pt 'Barlow Condensed', sans-serif; color: #E6197F; letter-spacing: .08em; text-transform: uppercase; }
    .p-title { font: 800 20pt 'Barlow Condensed', sans-serif; margin: 0 0 10px; line-height: 1.05; }
    .p-kd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid #ccc; margin-bottom: 12px; }
    .p-kd div { padding: 4px 7px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
    .p-kd div:nth-child(3n) { border-right: none; }
    .p-kd b { display: block; font-size: 6.5pt; color: #777; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
    .p-kd span { font-size: 9pt; }
    .p-letter { white-space: pre-wrap; line-height: 1.45; font-size: 9pt; margin-bottom: 12px; }
    .p-cols { display: grid; grid-template-columns: 1fr 62mm; gap: 8mm; align-items: start; }
    .p-tbl { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 8.5pt; }
    .p-tbl.cmp td, .p-tbl.cmp th { padding: 2px 4px; }
    .p-tbl th { text-align: right; font-size: 7.5pt; color: #555; border-bottom: 1px solid #999; padding: 4px; }
    .p-tbl th:first-child, .p-tbl th:nth-child(2), .p-tbl td:first-child, .p-tbl td:nth-child(2) { text-align: left; }
    .p-tbl td { text-align: right; padding: 3px 4px; border-bottom: 1px solid #e5e5e5; font-variant-numeric: tabular-nums; }
    .p-tbl tr.z td { color: #999; }
    .p-tbl tr.g td { font-weight: 700; background: #f3f3f3; }
    .p-tbl tr.s td { font-weight: 700; border-top: 1.5px solid #111; }
    .p-tbl tr.gr td { font-weight: 800; font-size: 11pt; color: #E6197F; }
    .p-box { border: 1px solid #ccc; padding: 8px 10px; font-size: 8pt; }
    .p-box .big { font: 800 18pt 'Barlow Condensed', sans-serif; color: #E6197F; line-height: 1; margin: 2px 0 6px; }
    .p-box .r { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid #eee; }
    .p-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-top: 14mm; font-size: 7.5pt; color: #555; }
    .p-sign div { border-top: 1px solid #111; padding-top: 3px; }
    .p-foot { margin-top: 10px; font-size: 7.5pt; color: #777; }
  }

/* ═══════════════════════════════════════════════════════════════════════
   SERVERFASSUNG

   Alles darueber stammt woertlich aus dem Prototyp. Hier unten steht nur,
   was die Serverfassung zusaetzlich braucht — Anmeldung, Speicheranzeige,
   Passworthuerde. Bewusst in derselben Formensprache.
   ═══════════════════════════════════════════════════════════════════════ */

/* Speicheranzeige in der Kopfzeile: still, solange alles gesichert ist */
.save-state { display: grid; place-items: center; width: 34px; height: 34px; color: var(--on-surface-var); opacity: .45; transition: opacity var(--dur-s) var(--motion), color var(--dur-s) var(--motion); }
.save-state .ms { font-size: 19px; }
.save-state.busy { opacity: 1; color: var(--accent); }
.save-state.busy .ms { animation: saveSpin 1.1s ease-in-out infinite; }
@keyframes saveSpin { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

/* Anmeldung und Passworthuerde */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px; position: relative; z-index: 1; }
.auth-card { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--outline-var); border-radius: 22px; padding: 34px 30px 28px; box-shadow: 0 18px 44px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.04); }
.auth-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.auth-brand img { height: 26px; filter: brightness(0); }
[data-theme="dark"] .auth-brand img { filter: none; }
.auth-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 30px; line-height: .95; }
.auth-title sup { font-size: 10px; color: var(--accent); margin-left: 3px; }
.auth-sub { font-size: 12px; color: var(--on-surface-var); margin-top: 2px; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-var); margin-bottom: 6px; }
.auth-field input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--outline-var); border-radius: 12px; background: var(--surface-low); font-size: 15px; }
.auth-field input:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.auth-btn { width: 100%; height: 48px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font: 700 15px 'Barlow', sans-serif; cursor: pointer; margin-top: 6px; transition: filter var(--dur-s) var(--motion); }
.auth-btn:hover { filter: brightness(1.08); }
.auth-err { background: color-mix(in srgb, var(--st-lost) 12%, transparent); color: var(--st-lost); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px; }
.auth-note { font-size: 12px; color: var(--on-surface-var); text-align: center; margin-top: 18px; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════
   SERVERFASSUNG — Katalogansicht (Rebrief 01)

   Der Prototyp kannte nur frei angelegte Zeilen. Mit dem vollstaendigen
   SCoPE-Katalog kommen Nummern, berechnete Zeilen, Haekchen fuer die
   Abgabenbasis, Anhaenge und der Fassungsvergleich dazu. Alles hier folgt
   dem Formenvorrat des Prototyps — gleiche Radien, Farben und Abstaende.
   ═══════════════════════════════════════════════════════════════════════ */

/* Positionsnummer aus der Excel */
.lno {
  font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 500;
  color: var(--on-surface-var); text-align: left; padding-left: 2px;
  white-space: nowrap; overflow: hidden;
}

/* Der Katalogname steht im Platzhalter, ist aber kein Platzhaltertext —
   er ist der Name der Position. Deshalb liest er sich wie normaler Text,
   und was der Nutzer eintippt, ersetzt ihn sichtbar. */
/* Reihenfolge und Spezifitaet zaehlen: die Zahlenfelder bekommen eine
   blasse Null als Platzhalter, der Positionsname dagegen volle Farbe.
   Die Namensregel muss deshalb spezifischer sein als die allgemeine. */
.lrow input::placeholder { color: var(--on-surface-var); opacity: .4; }
.lrow .desc-cell input::placeholder { color: var(--on-surface); opacity: 1; }
.lrow .desc-cell input:focus::placeholder { opacity: .35; }

/* Leere Positionen bleiben sichtbar, treten aber zurueck */
.out.zero { color: var(--on-surface-var); opacity: .45; }

/* Beschreibung: eigener Text im Feld, Katalogtext der anderen Sprache darunter */
.desc-cell { display: block; min-width: 0; }
.desc-cell input { width: 100%; }
.desc-cell i, .calc-name i, .lrow.ro .c i {
  display: block; font-style: normal; font-size: 10.5px; line-height: 1.25;
  color: var(--on-surface-var); padding: 0 8px 2px; opacity: .8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Berechnete Zeilen sind nicht frei editierbar — das soll man sehen */
.lrow.calcrow { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.lrow.calcrow:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.calc-name { font-size: 13px; padding: 0 8px; min-width: 0; }
.ro-cell {
  font-size: 13px; color: var(--on-surface-var); text-align: right;
  padding-right: 8px; font-variant-numeric: tabular-nums;
}
.calc-expl {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--on-surface-var); background: var(--surface-low);
  border-radius: 10px; padding: 8px 12px;
}
.calc-expl .ms { font-size: 16px; color: var(--accent); }

/* Haekchen fuer die Abgabenbasis */
.flagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.flagrow label:first-child { flex: 0 0 100%; }
.cb {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--on-surface); cursor: pointer; user-select: none;
}
.cb input { width: 16px !important; height: 16px !important; accent-color: var(--accent); margin: 0; }

/* Leiste ueber der Positionsliste: Suche und Schalter */
.lst-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
}
.find {
  display: flex; align-items: center; gap: 6px; flex: 1 1 260px; min-width: 220px;
  background: var(--surface-low); border: 1px solid var(--outline-var);
  border-radius: 12px; padding: 0 10px; height: 38px;
}
.find .ms { font-size: 18px; color: var(--on-surface-var); }
.find input {
  flex: 1; border: 0; background: none; outline: none; font-size: 13px;
  color: var(--on-surface); height: 100%;
}

/* Anhaenge */
.atts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.att-group { background: var(--surface-low); border-radius: 14px; padding: 12px 14px; }
.att-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-var);
  margin-bottom: 8px;
}
.att { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; min-width: 0; }
.att .ms { font-size: 18px; color: var(--accent); flex-shrink: 0; }
.att a { color: var(--on-surface); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att a:hover { text-decoration: underline; }
.att-size { margin-left: auto; font-size: 11px; color: var(--on-surface-var); white-space: nowrap; }
.att-empty { font-size: 12px; color: var(--on-surface-var); padding: 4px 0; }

/* Fassungsvergleich */
table.dv td:nth-child(3) { font-size: 11.5px; color: var(--on-surface-var); }
.dv-added  td:first-child { box-shadow: inset 3px 0 0 var(--st-approved); }
.dv-removed td:first-child { box-shadow: inset 3px 0 0 var(--st-lost); }
.dv-changed td:first-child { box-shadow: inset 3px 0 0 var(--st-sent); }
.dv .up { color: var(--st-lost); font-weight: 600; }
.dv .down { color: var(--st-approved); font-weight: 600; }

/* Freie Zeilen lassen sich innerhalb ihrer Untergruppe umsortieren */
.lrow[draggable="true"] { cursor: grab; }
.lrow[draggable="true"]:active { cursor: grabbing; }

/* Drucken: Untergruppen-Zwischenzeile */
@media print {
  .p-tbl tr.sg td {
    background: #f4f4f4; font-size: 7.5pt; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; padding-top: 4px;
  }
}

@media (max-width: 900px) {
  .lrow, .lhead { grid-template-columns: 28px 38px minmax(104px, 1fr) 44px 42px 42px 42px 66px 124px 28px 28px; }
}

/* ── Gastseite: Marke, Formelzeilen, Abgaben, Dokumente ───────────────── */

/* Das Logo steht ueber dem Angebot — die Seite geht an Kunden. */
.share-brand { margin: 0 0 26px; }
.share-brand .brand-mark { height: 38px; }
.share-brand .brand-mark img { height: 26px; }

/* Formelzeile: statt einer Null ein Strich in der Akzentfarbe. So ist zu
   sehen, dass der Betrag aus anderen Positionen entsteht. */
.formel {
  color: var(--accent); opacity: .65; font-weight: 700;
  text-align: right; padding-right: 8px; letter-spacing: .04em;
}

/* Was auf eine Position an Abgaben entfaellt */
.lev {
  grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11px; color: var(--on-surface-var);
  padding: 0 8px 6px; margin-top: -2px;
}
.lev b { font-weight: 600; color: var(--on-surface); }
.lev.calc { align-items: center; gap: 6px; }
.lev.calc .ms { font-size: 14px; color: var(--accent); }

/* Dokumente als Kalkulationsbasis */
.gal { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gal-item { margin: 0; cursor: pointer; }
.gal-img {
  position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  background: var(--surface-low); border: 1px solid var(--outline-var);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-s), transform var(--dur-s);
}
.gal-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.gal-img > .ms { font-size: 48px; color: var(--on-surface-var); opacity: .5; }
.gal-item:hover .gal-img { border-color: var(--accent); transform: translateY(-2px); }
.gal-zoom {
  position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--dur-s);
}
.gal-zoom .ms { font-size: 18px; }
.gal-item:hover .gal-zoom { opacity: 1; }
.gal-item figcaption { padding: 8px 2px 0; font-size: 12px; line-height: 1.35; }
.gal-item figcaption b {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.gal-item figcaption span {
  display: block; color: var(--on-surface-var);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Grosse Ansicht eines Dokuments */
.doc-view {
  border-radius: 14px; overflow: auto; max-height: 62vh;
  background: var(--surface-low); border: 1px solid var(--outline-var);
}
.doc-view img { width: 100%; display: block; }

@media print { .lev, .gal, .share-brand { display: none !important; } }

/* ── Kundenlogos ──────────────────────────────────────────────────────── */

/* Auf der Gastseite neben dem Backbone-Zeichen, durch einen feinen Strich
   getrennt — wie die Trennung in der Kopfleiste des Editors. */
.share-brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.client-logos { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.share-brand .client-logos { padding-left: 18px; border-left: 1px solid var(--outline-var); }
.client-logos img { height: 30px; width: auto; max-width: 180px; object-fit: contain; display: block; }

/* Im Editor: Streifen mit Entfernen-Knopf */
.logo-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.logo-chip {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--outline-var);
  border-radius: 12px; padding: 10px 14px; min-width: 90px; min-height: 56px;
}
.logo-chip img { max-height: 36px; max-width: 150px; object-fit: contain; display: block; }
.logo-chip .icon-btn {
  position: absolute; top: -8px; right: -8px; background: var(--surface);
  border: 1px solid var(--outline-var); border-radius: 50%;
}

/* Im PDF: rechts vom Backbone-Zeichen, vor der Absenderzeile */
@media print {
  .p-head .p-clogos { display: flex; gap: 10px; align-items: center; margin-left: 14px; }
  .p-head .p-clogos img { height: 22px; max-width: 120px; object-fit: contain; }
}

/* ── Abgabenschalter in der Zeile ─────────────────────────────────────── */

/* Vier kleine Knöpfe unter der Summe: AGA, KSK, 50a, AP. Ein Klick schaltet
   um. Aktiv steht in der Akzentfarbe, inaktiv nur angedeutet — so sieht man
   auf einen Blick, worauf Abgaben anfallen, ohne etwas aufzuklappen. */
.chips { display: flex; gap: 2px; justify-content: flex-end; margin-top: 3px; flex-wrap: nowrap; }
.fchip {
  border: 1px solid var(--outline-var); background: transparent;
  color: var(--on-surface-var); opacity: .38;
  font-family: 'Roboto Mono', monospace; font-size: 9px; font-weight: 500;
  letter-spacing: .02em; line-height: 1;
  padding: 2px 3px; border-radius: 5px; cursor: pointer;
  transition: opacity var(--dur-s), background var(--dur-s), color var(--dur-s), border-color var(--dur-s);
}
.fchip:hover { opacity: .75; border-color: var(--on-surface-var); }
.fchip.on {
  opacity: 1; background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 700;
}
.fchip.on:hover { opacity: .85; }

/* Der Block unter der Summe darf die Zeilenhöhe nicht sprengen und nicht
   in die Satzspalte hineinragen. */
.lrow .out { display: flex; flex-direction: column; align-items: flex-end; gap: 0; min-width: 0; overflow: hidden; }
.lrow .out > span:first-child { white-space: nowrap; }