/* Digital Builder Lab, Lernplattform: alle Stile. Gehört zu index.html.
   Farben, Schriften, Abstände und Radien kommen aus dem Design System "Digital Builder Lab" (tokens.json).
   Vier Farbrollen: accent (hier, anklickbar), ok (vorhanden, erledigt, gewählt), offen (zu tun, geplant, nicht nachgeschaut), fremd (gehört uns nicht, fehlt).
   Hell ist Standard; dunkel folgt dem System oder dem Schalter im Menü (data-theme auf <html>). */
  :root {
    color-scheme: light;
    --paper: #EEF0F4; --surface: #FFFFFF; --surface-sunken: #F7F8FA; --line: #E1E5EC; --line-soft: #EEF0F4;
    --ink: #14161C; --ink-body: #2B2F3A; --ink-muted: #737A8A; --ink-faint: #9AA1AF; --ink-inverse: #FFFFFF;
    --accent: #3D5AE0; --accent-strong: #2C44BC; --accent-soft: #ECEFFE;
    --ok: #1F8A55; --ok-strong: #166E45; --ok-soft: #E4F3EB;
    --offen: #D97706; --offen-strong: #8A5206; --offen-soft: #FDF0DF;
    --fremd: #5A6472; --fremd-soft: #EDEFF3;
    --warn: #C0392B; --warn-soft: #FBE9E7;
    --wiese: #CBE3B0; --rasen: #DCECC6; --rasen-frei: #E9F2DE; --zaun: #9DBE7B;
    --asphalt: #8C93A1; --asphalt-linie: #EEF1F5;
    --dach-miete: #C25A3C; --dach-eigen: #3D5AE0; --dach-nachbar: #5A6472; --grund-nachbar: #D8E3F0;
    --himmel: #DDE8F5; --erde: #8A6B52; --erde-ink: #F1E7DC; --erde-linie: #C7B39E; --gras: #7FA94F;
    --mauer: #1E2430; --hauslinie: #1E2430; --linie-luft: #6D8FB8; --rohr: #7C8899; --kapsel: #F0B45F;
    --parkett: #E9DCC6; --parkett-linie: #C0AE8C; --tuer: #F5EEE1; --gegenstand: #FFFFFF; --gegenstand-linie: #D3C4A8;
    --schleier: rgba(20, 22, 28, .45);
    --shadow-raised: 0 1px 2px rgba(20, 22, 28, .07);
    --shadow-card: 0 1px 2px rgba(20, 22, 28, .04), 0 10px 28px rgba(20, 22, 28, .05);
    --shadow-panel: 0 8px 24px rgba(20, 22, 28, .14);
    --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 20px; --radius-pill: 999px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper: #14171D; --surface: #1C2029; --surface-sunken: #232833; --line: #333A46; --line-soft: #272D38;
      --ink: #EDF1F6; --ink-body: #C9D1DC; --ink-muted: #98A2B2; --ink-faint: #7C8697; --ink-inverse: #14171D;
      --accent: #6C87F2; --accent-strong: #A8BCFF; --accent-soft: #242C4C;
      --ok: #46B980; --ok-strong: #7EDCAE; --ok-soft: #16301F;
      --offen: #E8A34A; --offen-strong: #FFD49A; --offen-soft: #3A2A12;
      --fremd: #8893A3; --fremd-soft: #272D38;
      --warn: #F07A6A; --warn-soft: #3A1E1B;
      --wiese: #27402E; --rasen: #31513A; --rasen-frei: #2A4231; --zaun: #5C7A5A;
      --asphalt: #3C4552; --asphalt-linie: #6C7788;
      --dach-miete: #C25A3C; --dach-eigen: #5C77E8; --dach-nachbar: #4A5464; --grund-nachbar: #24303D;
      --himmel: #1B2633; --erde: #3A2C22; --erde-ink: #E9DCCB; --erde-linie: #6B5240; --gras: #4C6B33;
      --mauer: #0B0E14; --hauslinie: #8893A3; --linie-luft: #6F8DB5; --rohr: #59636F; --kapsel: #F0B45F;
      --parkett: #372F25; --parkett-linie: #54483A; --tuer: #463E33; --gegenstand: #262019; --gegenstand-linie: #5A4E3E;
      --schleier: rgba(0, 0, 0, .55);
      --shadow-raised: 0 1px 2px rgba(0, 0, 0, .35);
      --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .3);
      --shadow-panel: 0 8px 24px rgba(0, 0, 0, .5);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #14171D; --surface: #1C2029; --surface-sunken: #232833; --line: #333A46; --line-soft: #272D38;
    --ink: #EDF1F6; --ink-body: #C9D1DC; --ink-muted: #98A2B2; --ink-faint: #7C8697; --ink-inverse: #14171D;
    --accent: #6C87F2; --accent-strong: #A8BCFF; --accent-soft: #242C4C;
    --ok: #46B980; --ok-strong: #7EDCAE; --ok-soft: #16301F;
    --offen: #E8A34A; --offen-strong: #FFD49A; --offen-soft: #3A2A12;
    --fremd: #8893A3; --fremd-soft: #272D38;
    --warn: #F07A6A; --warn-soft: #3A1E1B;
    --wiese: #27402E; --rasen: #31513A; --rasen-frei: #2A4231; --zaun: #5C7A5A;
    --asphalt: #3C4552; --asphalt-linie: #6C7788;
    --dach-miete: #C25A3C; --dach-eigen: #5C77E8; --dach-nachbar: #4A5464; --grund-nachbar: #24303D;
    --himmel: #1B2633; --erde: #3A2C22; --erde-ink: #E9DCCB; --erde-linie: #6B5240; --gras: #4C6B33;
    --mauer: #0B0E14; --hauslinie: #8893A3; --linie-luft: #6F8DB5; --rohr: #59636F; --kapsel: #F0B45F;
    --parkett: #372F25; --parkett-linie: #54483A; --tuer: #463E33; --gegenstand: #262019; --gegenstand-linie: #5A4E3E;
    --schleier: rgba(0, 0, 0, .55);
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .3);
    --shadow-panel: 0 8px 24px rgba(0, 0, 0, .5);
  }

  /* ---------- Grundlagen ---------- */
  html, body { height: 100%; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.45; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: var(--accent-strong); }
  h2 { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.15; margin: 0 0 4px; letter-spacing: -.02em; text-wrap: balance; }
  h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; }
  code { font-family: var(--font-mono); }
  .ico { flex-shrink: 0; display: block; }
  .ico-wrap { display: inline-flex; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fueller { flex-grow: 1; }
  .hint { color: var(--ink-muted); font-size: 14px; margin: 0 0 12px; }
  .kicker, .eyebrow { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--ink-faint); font-weight: 800; }
  .leer { color: var(--ink-muted); font-size: 14px; font-style: italic; }
  .btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); color: var(--ink-body); cursor: pointer; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .12s, border-color .12s; }
  .btn:hover { background: var(--surface-sunken); }
  .btn:focus-visible, .icon-knopf:focus-visible, .link-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .btn.primaer { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
  .btn.primaer:hover { background: var(--ink-body); border-color: var(--ink-body); }
  .btn.zeigen { background: var(--accent); color: var(--ink-inverse); border-color: var(--accent); }
  .btn.zeigen:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
  .btn.klein { min-height: 32px; padding: 0 11px; font-size: 13px; border-radius: var(--radius-md); gap: 6px; }
  .btn.gross { min-height: 48px; padding: 0 22px; font-size: 15px; }
  .btn.aktiv { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
  .btn[disabled] { opacity: .4; cursor: default; }
  .btn[disabled]:hover { background: var(--surface); }
  .icon-knopf { width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .icon-knopf:hover { background: var(--surface-sunken); color: var(--ink-body); }
  .link-knopf { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; color: var(--accent-strong); font-size: 13px; font-weight: 700; cursor: pointer; }
  .zurueck-link { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--ink-muted); cursor: pointer; }
  .zurueck-link:hover { color: var(--ink); }
  .feld { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); font-size: 15px; transition: border-color .12s, background .12s; }
  .feld::placeholder { color: var(--ink-faint); }
  .feld:hover { border-color: color-mix(in srgb, var(--line) 50%, var(--ink-faint)); }
  .feld:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
  textarea.feld { resize: vertical; min-height: 84px; line-height: 1.5; }
  select.feld { width: auto; }
  .zaehler { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-strong); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
  .zaehler[hidden] { display: none; }
  .chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-xs); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: var(--fremd-soft); color: var(--ink-muted); }
  .chip-ok { background: var(--ok-soft); color: var(--ok-strong); }
  .chip-offen { background: var(--offen-soft); color: var(--offen-strong); }
  .chip-fremd { background: var(--fremd-soft); color: var(--ink-muted); }
  .chip-hier { background: var(--accent); color: var(--ink-inverse); }
  .chip-accent { background: var(--accent-soft); color: var(--accent-strong); }
  .spur { flex-grow: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .spur i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .3s ease; }
  /* Ein Gegenstand in drei Zeilen: Emoji, Bildbegriff, Fachbegriff */
  .ding-kopf { display: flex; align-items: center; gap: 12px; }
  .ding-emoji { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--surface-sunken); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
  .ding-emoji.gross { width: 46px; height: 46px; border-radius: var(--radius-xl); font-size: 23px; }
  .ding-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .ding-bild { font-size: 13px; font-weight: 700; color: var(--ink); }
  .ding-bild.gross { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
  .ding-fach { font-size: 11.5px; color: var(--ink-muted); }

  /* ---------- Kopfzeile ---------- */
  header { flex-shrink: 0; min-height: 60px; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: relative; z-index: 30; }
  .brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
  .brand-mark { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--accent); color: var(--ink-inverse); display: inline-flex; align-items: center; justify-content: center; }
  .brand-text { font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
  .kopf-trenner { width: 1px; height: 22px; background: var(--line); }
  .crumbs { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 120px; font-size: 13px; color: var(--ink-muted); overflow: hidden; }
  .crumbs button { background: none; border: 0; padding: 4px 6px; border-radius: var(--radius-xs); cursor: pointer; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
  .crumbs button:hover, .crumbs button:focus-visible { color: var(--ink); background: var(--surface-sunken); outline: none; }
  .crumbs button[aria-current="page"] { color: var(--ink); font-weight: 700; cursor: default; background: none; }
  .crumbs .sep { color: var(--ink-faint); display: inline-flex; }
  .tools { display: flex; gap: 10px; align-items: center; margin-left: auto; }
  .pause-wrap, .chip-leiste { display: inline-flex; align-items: stretch; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
  .pause-wrap .pause { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0 10px 0 12px; cursor: pointer; color: var(--ink-muted); }
  #pause-zeit { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 38px; text-align: left; }
  .pause-reset { display: inline-flex; align-items: center; padding: 0 10px; border: 0; border-left: 1px solid var(--line-soft); background: transparent; cursor: pointer; color: var(--ink-muted); }
  .pause-reset:hover, .pause-wrap .pause:hover { background: var(--surface-sunken); color: var(--ink); }
  .pause-wrap:has(.pause.laeuft) { border-color: var(--ok); }
  .pause-wrap .pause.laeuft { color: var(--ok); }
  .pause-wrap:has(.pause.bald) { border-color: var(--offen); }
  .pause-wrap .pause.bald { background: var(--offen-soft); color: var(--offen-strong); }
  .pause-wrap:has(.pause.um) { border-color: var(--offen); }
  .pause-wrap .pause.um { background: var(--offen); color: var(--ink-inverse); animation: pausepuls 1.2s ease-in-out infinite; }
  .pause-wrap .pause.um #pause-zeit { color: var(--ink-inverse); }
  @keyframes pausepuls { 50% { opacity: .75; } }
  @media (prefers-reduced-motion: reduce) { .pause-wrap .pause.um { animation: none; } }
  .chip-leiste > button { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-body); cursor: pointer; }
  .chip-leiste > button + button { border-left: 1px solid var(--line-soft); }
  .chip-leiste > button .ico { color: var(--ink-muted); }
  .chip-leiste > button:hover { background: var(--surface-sunken); }
  .chip-leiste > button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
  .chip-leiste > button[aria-pressed="true"] .ico { color: var(--accent-strong); }
  .menue-wrap { position: relative; }
  .avatar-btn { position: relative; display: inline-flex; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
  .avatar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .avatar-mini { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; overflow: hidden; }
  .avatar-mini .ini { font-size: 12px; font-weight: 800; letter-spacing: .02em; }
  .avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
  .avatar-btn .punkt { position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--offen); border: 2px solid var(--surface); }
  .menue { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-panel); padding: 6px; display: grid; }
  .menue[hidden] { display: none; }
  .menue-kopf { padding: 6px 10px 8px; }
  .menue > button, .menue > label, .menue-zeile { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: none; border-radius: var(--radius-md); background: transparent; cursor: pointer; color: var(--ink); text-align: left; font-size: 14px; font-weight: 600; }
  .menue > button > span:not(.ico-wrap):not(.schalter), .menue > label > span:not(.ico-wrap) { display: flex; flex-direction: column; flex-grow: 1; }
  .menue .ico-wrap { color: var(--ink-muted); }
  .menue > button:hover, .menue > label:hover { background: var(--surface-sunken); }
  .menue small { color: var(--ink-muted); font-size: 12px; font-weight: 400; }
  .menue .gefaehrlich, .menue .gefaehrlich .ico-wrap { color: var(--warn); }
  .menue input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .menue-strich { height: 1px; background: var(--line-soft); margin: 4px 6px; }
  .menue-version { padding: 8px 10px 4px; font-size: 11.5px; color: var(--ink-faint); text-align: center; }
  .versions-warnung { margin: 0; padding: 10px 12px; border-radius: var(--radius-lg); background: var(--offen-soft); color: var(--offen-strong); font-size: 14px; line-height: 1.45; }
  .menue-zeile { cursor: default; }
  .menue-zeile > span:nth-child(2) { flex-grow: 1; }
  .segment { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
  .segment button { border: 0; background: transparent; padding: 3px 8px; border-radius: var(--radius-xs); font-size: 12px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
  .segment button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-raised); }
  .status { display: flex; align-items: flex-start; gap: 9px; width: 100%; box-sizing: border-box; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--offen-strong); background: var(--offen-soft); border-radius: var(--radius-sm); padding: 8px 10px; }
  .status small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
  .status .status-punkt { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--offen); }
  .status.ok { color: var(--ok-strong); background: var(--ok-soft); align-items: center; }
  .status.ok .status-punkt { margin-top: 0; background: var(--ok); }
  .modus { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-sunken); }
  .modus button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
  .modus button:hover { color: var(--ink); }
  .modus button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-raised); }
  .schalter-zeile { display: flex; align-items: center; gap: 10px; width: 100%; }
  .schalter { margin-left: auto; width: 34px; height: 20px; border-radius: var(--radius-pill); background: var(--line); position: relative; transition: background .15s; flex: none; }
  .schalter .knauf { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-raised); transition: left .15s; }
  #fach-toggle.an .schalter { background: var(--accent); }
  #fach-toggle.an .schalter .knauf { left: 16px; }
  @media (max-width: 1180px) { .chip-leiste .lbl, .modus .lbl { display: none; } .kopf-trenner { display: none; } }
  @media (max-width: 760px) { .brand-text { display: none; } header { gap: 10px; padding: 8px 12px; } .crumbs button:not([aria-current]), .crumbs .sep { display: none; } }

  /* ---------- Rumpf ---------- */
  #app { flex: 1; display: grid; grid-template-columns: 296px minmax(0, 1fr); min-height: 0; }
  #app.breit { grid-template-columns: minmax(0, 1fr); }
  #app.breit #seite { display: none; }
  #seite { border-right: 1px solid var(--line); background: var(--surface); overflow: auto; padding: 22px 18px 28px; display: flex; flex-direction: column; gap: 18px; }
  .seite-kopf { display: grid; gap: 8px; }
  .seite-kopf h3 { margin: 0; font-size: 20px; line-height: 1.2; }
  .seite-kopf .spur i { background: var(--ok); }
  .seite-stand { font-size: 12px; color: var(--ink-muted); }
  .lk-liste { display: grid; gap: 2px; }
  .lk-item { display: flex; gap: 12px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: var(--radius-lg); cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink-body); }
  .lk-item:hover, .lk-item:focus-visible { background: var(--surface-sunken); outline: none; }
  .lk-item .st { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; border: 1.5px solid var(--line); color: var(--ink-muted); background: var(--surface); }
  .lk-item .lk-titel { flex-grow: 1; min-width: 0; }
  .lk-item.fertig .st { background: var(--ok-soft); border-color: var(--ok-soft); color: var(--ok-strong); }
  .lk-item.begonnen .st { border-color: var(--offen); color: var(--offen-strong); }
  .lk-item[aria-current="true"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
  .lk-item[aria-current="true"] .st { background: var(--accent); border-color: var(--accent); color: var(--ink-inverse); }
  .lk-item .lk-zahl { font-size: 11px; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
  #stage { position: relative; overflow: hidden; min-height: 0; }
  /* Der Auto- oder Fuß-Cursor gilt nur auf den Zeichenflächen: Stadtplan, Querschnitt, Zimmer. Daneben bleibt der Mauszeiger normal. */
  .view { position: absolute; inset: 0; overflow: auto; padding: 24px 32px 48px; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease; transform-origin: 50% 50%; }
  .view.zoom-out { transform: scale(.35); opacity: 0; }
  .view.zoom-in { transform: scale(3.2); opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) { .view { transition: none; } }

  /* ---------- Statuszeile ---------- */
  .statuszeile { display: flex; align-items: center; gap: 16px; }
  .statuszeile .zahl { font-size: 13px; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
  .statuszeile .neben { font-size: 13px; color: var(--ink-muted); flex-shrink: 0; }
  .bestand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .bestand .eyebrow { margin-right: 4px; }
  .bestand .wert { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-body); }
  .bestand .wert b { font-weight: 800; color: var(--ink); }
  .bestand .punkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .bestand .punkt.ok { background: var(--ok); } .bestand .punkt.fremd { background: var(--fremd); opacity: .6; } .bestand .punkt.offen { background: transparent; border: 2px dashed var(--offen); }
  .bestand .linie { flex-grow: 1; height: 1px; background: var(--line); min-width: 20px; }
  .bestand .neben { font-size: 13px; color: var(--ink-muted); }

  /* ---------- Übersicht: der Weg durch das Lab ---------- */
  /* Übersicht: auf großen Schirmen alle fünf Spalten nebeneinander (bis 1900 px), darunter gleiten die Spalten mit 280 px Mindestbreite seitlich */
  .ueb { max-width: 1900px; margin: 0 auto; display: grid; gap: 22px; }
  .ueb .kopf-u { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .ueb h2 { font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -.025em; margin: 6px 0 8px; }
  .ueb .unter { color: var(--ink-body); max-width: 60ch; margin: 0; font-size: 16px; line-height: 1.6; }
  /* Die Tage laufen nebeneinander und scrollen waagrecht; die Karten behalten ihre Breite. */
  .tage { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 20px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 6px; padding: 6px 6px 18px; margin: -6px -6px 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .tage > .tag-spalte { scroll-snap-align: start; }
  .tage-nav { display: inline-flex; gap: 6px; margin-left: 4px; }
  .tage-nav[hidden] { display: none; }
  .tage-nav .btn { padding: 0 8px; }
  .tage-nav .btn:disabled { opacity: .4; cursor: default; }
  .tage::-webkit-scrollbar { height: 10px; }
  .tage::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
  .tage::-webkit-scrollbar-track { background: transparent; }
  @media (max-width: 700px) { .tage { grid-auto-columns: min(300px, 82vw); } .tage-nav { display: none; } } /* am Handy wischt man */
  .tag-spalte { display: grid; gap: 12px; }
  .tag-marke { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); }
  .tag-marke::after { content: ""; flex-grow: 1; height: 1px; background: var(--line); }
  .station { display: grid; gap: 10px; width: 100%; text-align: left; padding: 16px 16px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); cursor: pointer; color: inherit; transition: border-color .12s, box-shadow .12s; }
  .station:hover, .station:focus-visible { border-color: var(--accent); outline: none; }
  .station.aktiv { border: 2px solid var(--accent); padding: 15px 15px 13px; box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-card); }
  .station.bald { background: transparent; box-shadow: none; border-style: dashed; cursor: default; padding: 12px 16px; }
  .station-kopf { display: flex; align-items: center; gap: 10px; }
  .station .nr { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
  .station.aktiv .nr { background: var(--accent); color: var(--ink-inverse); }
  .station.fertig .nr { background: var(--ok-soft); color: var(--ok-strong); }
  .station.bald .nr { background: transparent; border: 1px solid var(--line); color: var(--ink-faint); width: 24px; height: 24px; font-size: 11px; }
  .station .t { flex-grow: 1; font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
  .station.bald .t { color: var(--ink-faint); font-size: 14px; }
  .station .folgt { font-size: 11px; font-weight: 700; color: var(--ink-faint); }
  .station .w { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
  .station .fort { display: flex; align-items: center; gap: 10px; }
  .station .fort .spur { height: 4px; }
  .station.fertig .spur i { background: var(--ok); }
  .station-fach { margin-top: -4px; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--accent-strong); }
  .station .dauer { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; font-size: 11px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .tag-marke .tag-dauer { order: 2; letter-spacing: .02em; text-transform: none; font-weight: 700; color: var(--ink-faint); }
  .tag-marke::after { order: 1; }
  .station .zahl { font-size: 11px; font-weight: 800; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

  /* ---------- Lektion: Statuszeile und Inhaltskarte ---------- */
  .lek { max-width: 1400px; margin: 0 auto; display: grid; gap: 14px; }
  .schritt { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); overflow: hidden; min-height: 460px; }
  /* Rolle des Schritts: Lesen ist blau (accent), Tun ist orange (offen), der Abschluss grün (ok) */
  .schritt { --typ: var(--offen); --typ-soft: var(--offen-soft); --typ-strong: var(--offen-strong); }
  .schritt.typ-text, .schritt.typ-begriff, .schritt.typ-willkommen { --typ: var(--accent); --typ-soft: var(--accent-soft); --typ-strong: var(--accent-strong); }
  .schritt.typ-abschluss { --typ: var(--ok); --typ-soft: var(--ok-soft); --typ-strong: var(--ok-strong); }
  .schritt::before { content: ""; height: 3px; flex-shrink: 0; background: var(--typ); }
  /* Innehalten: Lektionen, in denen nicht weitergearbeitet, sondern entschieden wird */
  .schritt.innehalten::before { height: 6px; background: repeating-linear-gradient(90deg, var(--kapsel) 0 28px, transparent 28px 40px); }
  .eyebrow-zeile .marke.innehalten-marke { background: var(--surface); color: var(--ink); border: 1.5px solid var(--kapsel); }
  .schritt .innen { flex-grow: 1; padding: 34px 44px 36px; display: flex; flex-direction: column; gap: 18px; }
  .schritt .fuss { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 44px; border-top: 1px solid var(--line-soft); }
  .schritt .fuss .btn { min-height: 44px; }
  .eyebrow-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .eyebrow-zeile .marke { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-xs); background: var(--typ-soft); color: var(--typ-strong); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .eyebrow-zeile .meta { font-size: 12px; color: var(--ink-faint); }
  /* Wer macht die Aufgabe: Gemeinsam, Reihum, Jede:r für sich, Eine:r für alle */
  .wer-marke { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-xs); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  /* Um welches Haus es geht (ab Kapitel 4): Name und Phase des Traumhauses, Klick öffnet es in der Stadt */
  .traum-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--accent-strong); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; max-width: 100%; }
  .traum-chip:hover { border-style: solid; }
  .traum-chip .tc-phase { font-weight: 500; opacity: .85; }
  .wer-marke.wer-jede { border-color: var(--offen); background: var(--offen-soft); color: var(--offen-strong); }
  .stelle-karte > .wer-marke { align-self: flex-start; }
  /* Markengalerie (Kapitel 0) */
  .markengalerie { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); }
  .mg-zeile { --typ: var(--offen); --typ-soft: var(--offen-soft); --typ-strong: var(--offen-strong); display: grid; gap: 5px; }
  .mg-zeile.typ-text, .mg-zeile.typ-begriff { --typ: var(--accent); --typ-soft: var(--accent-soft); --typ-strong: var(--accent-strong); }
  .mg-zeile + .mg-zeile { padding-top: 14px; border-top: 1px solid var(--line-soft); }
  .mg-satz { font-size: 14px; line-height: 1.45; color: var(--ink-body); }
  /* Rundgang: Startkarte mit kleiner Oberfläche, darüber im Rundgang Loch und Sprechblase */
  .rg-start { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface-sunken); }
  .rg-start-titel { font-family: var(--font-display); font-size: 18px; }
  .rg-start-info { font-size: 13px; color: var(--ink-muted); margin-top: -6px; }
  .rg-mini { position: relative; width: 220px; height: 138px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-raised); overflow: hidden; margin-bottom: 6px; }
  .rg-mini-kopf { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
  .rg-mini-kopf i { width: 22px; height: 10px; border-radius: 3px; background: var(--line); }
  .rg-mini-kopf i:first-child { margin-right: auto; width: 40px; background: var(--accent-soft); }
  .rg-mini-leib { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 8px 10px; }
  .rg-mini-seite, .rg-mini-karte { display: grid; gap: 6px; align-content: start; }
  .rg-mini-seite i { height: 8px; border-radius: 3px; background: var(--line-soft); }
  .rg-mini-karte { position: relative; height: 92px; padding: 8px; border-radius: 8px; border: 1px solid var(--line-soft); }
  .rg-mini-karte i { height: 7px; border-radius: 3px; background: var(--line-soft); }
  .rg-mini-karte i:first-child { width: 60%; height: 10px; background: var(--line); }
  .rg-mini-karte b { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 12px; border-radius: 4px; background: var(--ink); }
  .rg-mini-ring { position: absolute; border: 2px solid var(--accent); border-radius: 6px; box-shadow: 0 0 0 4px var(--accent-soft); animation: rg-mini 7s ease-in-out infinite; }
  @keyframes rg-mini {
    0%, 12% { left: 98px; top: 123px; width: 42px; height: 22px; }
    16%, 28% { left: 176px; top: 111px; width: 38px; height: 20px; }
    32%, 44% { left: 6px; top: 34px; width: 58px; height: 42px; }
    48%, 60% { left: 118px; top: 3px; width: 32px; height: 20px; }
    64%, 76% { left: 146px; top: 3px; width: 32px; height: 20px; }
    80%, 100% { left: 202px; top: 3px; width: 16px; height: 20px; }
  }
  @media (prefers-reduced-motion: reduce) { .rg-mini-ring { animation: none; left: 176px; top: 111px; width: 38px; height: 20px; } }
  .rundgang { position: fixed; inset: 0; z-index: 400; opacity: 0; transition: opacity .2s ease; }
  .rundgang.an { opacity: 1; }
  .rg-loch { position: fixed; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(12, 16, 30, .62); outline: 2px solid var(--accent); outline-offset: 2px; transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease; pointer-events: none; animation: rg-puls 1.8s ease-in-out infinite; }
  .rg-loch.ohne { outline: 0; animation: none; }
  @keyframes rg-puls { 0%, 100% { outline-offset: 2px; } 50% { outline-offset: 6px; } }
  .rg-blase { position: fixed; width: min(340px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-panel); padding: 14px 16px 16px; display: grid; gap: 8px; transition: left .35s ease, top .35s ease; }
  @media (prefers-reduced-motion: reduce) { .rg-loch, .rg-blase { transition: none; animation: none; } }
  .rg-kopf { display: flex; align-items: center; justify-content: space-between; margin: -4px -6px -4px 0; }
  .rg-zaehler { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-strong); }
  .rg-titel { font-family: var(--font-display); font-size: 17px; line-height: 1.25; }
  .rg-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-body); }
  .rg-punkte { display: flex; gap: 5px; margin-top: 2px; }
  .rg-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
  .rg-punkte i.war { background: var(--accent-soft); }
  .rg-punkte i.an { background: var(--accent); width: 16px; border-radius: 3px; }
  .rg-knoepfe { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
  .eyebrow-zeile .wer-satz { font-size: 12.5px; color: var(--ink-muted); }
  .schritt h2 { font-size: clamp(27px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -.025em; margin: 0; max-width: 24ch; }
  .schritt > .innen > .sticker, .schritt .links > .sticker { font-size: 56px; line-height: 1; }
  .schritt .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 20px 56px; align-items: start; }
  .schritt .zwei .links { display: grid; gap: 18px; align-content: start; }
  .schritt .zwei .links.md { display: block; }
  .schritt .zwei .rechts { display: grid; gap: 14px; position: sticky; top: 16px; }
  .schritt .unten { display: grid; gap: 14px; margin-top: 6px; }
  .schritt .unten > .so, .schritt .unten > details.so { margin-top: 6px; }
  @media (max-width: 1100px) { .schritt .zwei { grid-template-columns: 1fr; } .schritt .zwei .rechts { position: static; } }
  @media (max-width: 900px) { #app { grid-template-columns: 1fr; } #seite { display: none; } .view { padding: 16px; } .schritt .innen { padding: 22px 20px 24px; } .schritt .fuss { padding: 12px 20px; } .schritt { min-height: 0; } .schritt .md { font-size: 16.5px; } }

  /* Lesetext: Buchbreite (rund 62 Zeichen je Zeile), luftige Zeilen, eine Leerzeile zwischen Absätzen, Fett nur als leichte Betonung */
  .schritt .md { font-size: 18px; line-height: 1.65; max-width: 62ch; color: var(--ink-body); }
  .schritt .md b { font-weight: 700; color: var(--ink); }
  .schritt .md blockquote { margin: 0 0 1em; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--surface-sunken); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-size: 1.02em; line-height: 1.5; color: var(--ink); }
  .schritt .md blockquote b { font-weight: 800; }
  .schritt .md p { margin: 0 0 1em; } .schritt .md ul, .schritt .md ol { margin: 0 0 1em; padding-left: 24px; } .schritt .md li { margin: 6px 0; } .schritt .md li::marker { color: var(--ink-faint); }
  .schritt .md > :last-child { margin-bottom: 0; }
  .md a { color: var(--accent-strong); text-underline-offset: 2px; }
  .md table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 6px 0 12px; font-size: 15px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
  .md th, .md td { border-bottom: 1px solid var(--line-soft); padding: 9px 12px; text-align: left; vertical-align: top; }
  .md tr:last-child td { border-bottom: 0; }
  .md th { background: var(--surface-sunken); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
  .md-wrap { overflow-x: auto; }
  .tabelle-breit { margin-top: 22px; } .schritt .md.tabelle-breit { max-width: none; } .tabelle-breit table { width: 100%; margin: 0; } .tabelle-breit th a, .tabelle-breit th .begriff-ref { text-transform: none; } .nach-tabelle { max-width: 720px; margin-top: 18px; }
  .rechts .md table { table-layout: fixed; font-size: 13.5px; margin-top: 0; } .rechts .md th, .rechts .md td { padding: 8px 9px; line-height: 1.4; overflow-wrap: break-word; hyphens: auto; } .rechts .md th:first-child, .rechts .md td:first-child { width: 34%; }
  .md pre.code { position: relative; margin: 14px 0; padding: 14px 16px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; font-size: 13.5px; line-height: 1.55; }
  .md pre.code code { background: none; border: 0; padding: 0; font-size: inherit; white-space: pre; }
  .md pre.code[data-sprache]::before { content: attr(data-sprache); position: absolute; top: 6px; right: 10px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--font-sans, inherit); }
  .md pre.code .plus { color: var(--ok); } .md pre.code .minus { color: var(--warn); }
  .md code { background: var(--surface-sunken); border: 1px solid var(--line-soft); padding: 1px 5px; border-radius: 5px; font-size: .88em; }
  .begriff-ref { border-bottom: 2px dotted var(--accent); cursor: help; color: inherit; }
  .begriff-ref:hover { background: var(--accent-soft); border-bottom-style: solid; }
  .fach-inline { font-size: .74em; color: var(--ink-muted); margin-left: 3px; white-space: nowrap; }
  .fach-inline::before { content: "("; } .fach-inline::after { content: ")"; }

  /* Rechte Spalte: Merksatz, Bild-Karte, Sticker */
  .schritt .zitat { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.3; letter-spacing: -.015em; padding: 26px 28px; background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-2xl); text-wrap: balance; color: var(--ink); position: relative; }
  .schritt .zitat::before { content: "Merksatz"; display: block; font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 10px; }
  .schritt .zitat small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--ink-muted); margin-top: 12px; letter-spacing: 0; }
  .schritt .sticker-tafel { display: grid; place-items: center; min-height: 220px; background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-2xl); }
  .schritt .sticker-tafel .sticker { font-size: 104px; line-height: 1; }
  .begriff-karte { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-2xl); padding: 18px 22px; max-width: 66ch; }
  .begriff-karte .e { grid-row: 1 / span 2; font-size: 44px; line-height: 1; }
  .begriff-karte .bild { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.015em; grid-column: 2; }
  .begriff-karte .fach { grid-column: 2; font-size: 14px; color: var(--ink-muted); }
  .begriff-karte .fach b { color: var(--ink-body); }
  .schritt .begriff-karte.gross { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 34px 26px 30px; max-width: none; gap: 8px; }
  .schritt .begriff-karte.gross .e { grid-column: 1; grid-row: auto; font-size: 44px; width: 88px; height: 88px; border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-raised); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
  .schritt .begriff-karte.gross .bild { grid-column: 1; font-size: 28px; }
  .schritt .begriff-karte.gross .fach { grid-column: 1; font-size: 15px; }
  .schritt .begriff-karte.gross .fach b { display: block; margin-top: 4px; color: var(--accent-strong); font-weight: 700; }

  /* Chip-Leiste über der Leitungstabelle: Häuser anklicken, um das Traumhaus zu verbinden */
  .leitung-chips { display: grid; gap: 14px; margin-bottom: 16px; padding: 16px 18px; background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); }
  .leitung-chips .lc-gruppe { display: grid; gap: 8px; }
  .leitung-chips .lc-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .leitung-chips .lc-kopf small { font-size: 12px; color: var(--ink-muted); }
  .leitung-chips .lc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .lc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 7px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .lc-chip:hover { border-color: var(--accent); }
  .lc-chip.an { border: 2px solid var(--accent); padding: 4px 11px 4px 6px; background: var(--accent-soft); color: var(--accent-strong); }
  .lc-chip small { font-size: 11.5px; font-weight: 700; }
  .leitungen-ed .leit-knoepfe { white-space: nowrap; }
  .leitungen-ed .umdrehen { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; padding: 2px 8px; margin-right: 6px; }
  .leitungen-ed .umdrehen:hover { border-color: var(--accent); }

  /* Vorhaben-Karte: das Vorhaben aus Kapitel 1 als angepinnter Zettel */
  .vorhaben-karte { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-2xl); box-shadow: var(--shadow-raised); padding: 20px 24px 22px; }
  .links .vorhaben-karte { margin-top: 18px; }
  .vorhaben-karte .vk-kopf { display: flex; align-items: center; gap: 8px; }
  .vorhaben-karte .vk-pin { font-size: 20px; line-height: 1; }
  .vorhaben-karte .vk-teil { display: grid; gap: 4px; }
  .vorhaben-karte .vk-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
  .vorhaben-karte .vk-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-body); white-space: pre-line; }
  .vorhaben-karte .vk-gut { background: var(--accent-soft); border-radius: var(--radius-lg); padding: 12px 14px; margin: 2px -8px 0; }
  .vorhaben-karte .vk-gut .vk-label { color: var(--accent-strong); }
  .vorhaben-karte .vk-gut .vk-text { color: var(--ink); font-weight: 500; }
  .vorhaben-karte .vk-leer { margin: 0; color: var(--ink-muted); font-style: italic; }
  .vorhaben-karte .vk-haeuser { display: grid; gap: 8px; border-top: 1px dashed var(--line); padding-top: 12px; }
  .vorhaben-karte .vk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .vorhaben-karte .vk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--line-soft); font-size: 13px; font-weight: 600; }

  /* Hilfe, Klappen, Haken, Optionen */
  .so { background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); padding: 16px 18px; max-width: 66ch; }
  .so > .kicker { margin-bottom: 8px; }
  .so .md { font-size: 15px; line-height: 1.6; }
  .so .md ol, .so .md ul { padding-left: 20px; }
  details.so { padding: 0; }
  details.so summary { cursor: pointer; font-weight: 700; color: var(--ink-body); font-size: 14px; list-style: none; padding: 14px 18px; display: flex; align-items: center; gap: 8px; }
  details.so summary::-webkit-details-marker { display: none; }
  details.so summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(-45deg); transition: transform .15s; flex-shrink: 0; }
  details.so[open] summary::before { transform: rotate(45deg); }
  details.so > .md { padding: 0 18px 16px; }
  .feld-label { display: grid; gap: 7px; }
  .feld-label > span { font-size: 12px; font-weight: 800; color: var(--ink-muted); letter-spacing: .06em; text-transform: uppercase; }
  .haken-gross { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; color: var(--ink); padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); cursor: pointer; max-width: 66ch; transition: border-color .12s, background .12s; }
  .haken-gross:hover { border-color: var(--ok); }
  .checkliste { display: flex; flex-direction: column; gap: 12px; } .cl-punkt { display: flex; flex-direction: column; gap: 6px; }
  .cl-punkt .haken-gross small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--ink-muted); line-height: 1.4; }
  .haken-gross input { width: 22px; height: 22px; accent-color: var(--ok); flex-shrink: 0; margin: 0; }
  .haken-gross.an { border: 2px solid var(--ok); padding: 13px 15px; background: var(--ok-soft); color: var(--ok-strong); }
  .schritt .links .haken-gross { margin-top: 6px; }
  .optionen { display: grid; gap: 8px; max-width: 66ch; }
  .optionen label { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); cursor: pointer; font-size: 15.5px; line-height: 1.45; color: var(--ink); transition: border-color .12s, background .12s; }
  .optionen label:hover { border-color: var(--accent); }
  .optionen label:has(input:checked) { border: 2px solid var(--accent); padding: 12px 15px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
  .optionen input { accent-color: var(--accent); margin: 3px 0 0; width: 17px; height: 17px; flex-shrink: 0; }
  .quiz .antwort { border-radius: var(--radius-lg); padding: 14px 16px; font-size: 15px; line-height: 1.55; max-width: 66ch; color: var(--ink-body); }
  .quiz .antwort b { display: block; margin-bottom: 2px; }
  .quiz .antwort.richtig { background: var(--ok-soft); border: 1px solid var(--ok); }
  .quiz .antwort.richtig b { color: var(--ok-strong); }
  .quiz .antwort.falsch { background: var(--offen-soft); border: 1px solid var(--offen); }
  .quiz .antwort.falsch b { color: var(--offen-strong); }

  /* Vorlagen, Prompts, Berichte */
  .vorlage { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
  .vorlage .kopfzeile { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 16px; background: var(--surface-sunken); border-bottom: 1px solid var(--line-soft); font-weight: 700; font-size: 13.5px; color: var(--ink); }
  .vorlage .kopfzeile .btn { margin-left: auto; }
  .vorlage .kopfzeile .logo { width: 20px; height: 20px; border-radius: 5px; background: #fff; }
  .prompts { display: grid; gap: 12px; max-width: 80ch; }
  .prompt-karte pre { max-height: 220px; }
  .vorlage pre { margin: 0; padding: 14px 16px; max-height: 300px; overflow: auto; font-size: 14px; line-height: 1.55; white-space: pre-wrap; font-family: var(--font-body); color: var(--ink-body); }
  .bericht-stand { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ok-strong); }

  /* Tabellen zum Bearbeiten */
  .tabelle-ed, .zb-tabelle, table.bewertung { --kante: var(--line); }
  .tabelle-ed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 6px 8px 12px; overflow-x: auto; }
  .tabelle-ed table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  .tabelle-ed th, .zb-tabelle th { text-align: left; font-size: 11px; font-weight: 800; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .07em; padding: 8px 8px; white-space: nowrap; }
  .tabelle-ed td { padding: 4px 6px; vertical-align: middle; border-top: 1px solid var(--line-soft); }
  .tabelle-ed td input, .tabelle-ed td select { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); color: var(--ink); }
  .tabelle-ed td input[type="checkbox"] { width: 18px; min-height: 0; height: 18px; accent-color: var(--accent); }
  .tabelle-ed td input:hover, .tabelle-ed td select:hover { border-color: var(--line); background: var(--surface-sunken); }
  .tabelle-ed td input:focus, .tabelle-ed td select:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
  .tabelle-ed .logo { width: 22px; height: 22px; border-radius: 5px; vertical-align: middle; background: #fff; }
  .tabelle-ed .neu { display: flex; gap: 8px; margin: 10px 6px 0; align-items: center; flex-wrap: wrap; }
  .tabelle-ed .neu input { flex: 1; min-width: 200px; }
  .loeschen { border: 0; background: none; cursor: pointer; color: var(--ink-faint); font-size: 14px; border-radius: var(--radius-xs); padding: 4px 6px; }
  .loeschen:hover { color: var(--warn); background: var(--warn-soft); }
  .tabelle-ed .summe, .summe { margin: 10px 6px 0; font-size: 13px; color: var(--ink-muted); }
  .bestellungen-ed td.nr { font-weight: 800; font-variant-numeric: tabular-nums; width: 3em; color: var(--accent-strong); }
  .bestellungen-ed td.aktionen { white-space: nowrap; }
  .bestellungen-ed td.aktionen button { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-xs); padding: 3px 8px; margin-left: 3px; cursor: pointer; color: var(--ink-body); }
  .bestellungen-ed td.aktionen button.loeschen { border-color: transparent; }
  .bestellungen-ed td.aktionen button:disabled { opacity: .35; cursor: default; }
  .zb-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); }
  .zb-tabelle th { padding: 10px 10px 8px; }
  .zb-tabelle td { padding: 7px 10px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
  .zb-tabelle .feld { min-height: 34px; padding: 5px 8px; font-size: 14px; }
  .zt td { font-size: 15px; }
  .zt-wahl { display: inline-flex; gap: 4px; flex-wrap: wrap; }
  .zt-knopf { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-body); }
  .zt-knopf:hover { border-color: var(--accent); }
  .zt-knopf.an { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); }
  .zt-fest { font-size: 13px; color: var(--ink-muted); }
  .zt-treffer { font-weight: 800; text-align: center; } .zt-treffer.ja { color: var(--ok-strong); } .zt-treffer.nein { color: var(--warn); }
  .vs-check input { min-width: 140px; font-size: 13px; }
  .vs-check .vs-euro { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13px; }
  .vs-check .vs-euro input { min-width: 0; width: 80px; }
  .vs-check tfoot td { border-top: 2px solid var(--line); }
  table.bewertung { width: 100%; border-collapse: collapse; font-size: 14px; }
  table.bewertung th { text-align: left; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  table.bewertung thead th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); text-align: center; }
  table.bewertung td { text-align: center; padding: 5px; border-bottom: 1px solid var(--line-soft); }
  table.bewertung tr.summe th, table.bewertung tr.summe td { font-family: var(--font-display); font-weight: 800; border-bottom: none; }
  .bw { width: 42px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); font-size: 18px; font-weight: 800; cursor: pointer; color: var(--ink-faint); }
  .bw:hover { border-color: var(--accent); }
  .bw.plus { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-strong); } .bw.minus { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); } .bw.kreis { background: var(--surface-sunken); color: var(--ink); }
  .bw-alt { display: block; font-size: 10px; color: var(--ink-muted); }

  /* Anbieter, Auftragnehmer-Leiste, Arbeitsform */
  .vorstellung-karte { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); padding: 22px 22px 18px; }
  /* Emoji-Wolke: kleine weiße Karten mit Bildern aus dem Lab an festen Plätzen in Wolkenform (text-Schritt mit wolke, Plätze in WOLKE_ORTE) */
  .emoji-wolke { position: relative; width: 100%; max-width: 400px; height: 360px; margin: 0 auto; }
  .emoji-wolke::before { content: ""; position: absolute; inset: 6% 4%; border-radius: 50%; background: radial-gradient(closest-side, var(--himmel), transparent); }
  .ew-karte { position: absolute; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
  .vk-emoji { display: grid; place-items: center; font-size: 40px; background: var(--himmel); border: 1px solid var(--line); box-shadow: none; }
  .vk-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .vk-logo { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
  .vk-kopf b { display: block; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; } .vk-kopf small { display: block; color: var(--ink-muted); font-size: 14px; }
  .vk-marke { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--ok-strong); background: var(--ok-soft); border-radius: 999px; padding: 4px 10px; }
  .vk-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 16px 0 0; font-size: 14.5px; line-height: 1.45; } .vk-liste > div { min-width: 0; }
  .vk-liste dt { color: var(--ink-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; } .vk-liste dd { margin: 0; }
  .vk-alt { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .vk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .vk-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px 4px 8px; font-size: 13px; } .vk-chip small { color: var(--ink-muted); }
  .vk-chip .anbieter-logo { width: 16px; height: 16px; margin: 0; }
  /* Browser zum Anschauen (Kapitel 1): Adresszeile als Schrittsorte und als Beispiel unter der Bild-Karte */
  .browser-mock { display: block; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; color: inherit; text-decoration: none; }
  .browser-mock .bm-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-sunken); border-bottom: 1px solid var(--line-soft); }
  .browser-mock .bm-punkte { display: inline-flex; gap: 6px; flex: none; } .browser-mock .bm-punkte i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
  .browser-mock .bm-punkte i:nth-child(1) { background: var(--warn); } .browser-mock .bm-punkte i:nth-child(2) { background: var(--offen); } .browser-mock .bm-punkte i:nth-child(3) { background: var(--ok); }
  .browser-mock .bm-zeile { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 7px 12px; color: var(--ink-muted); }
  .browser-mock .bm-zeile svg { flex: none; color: var(--ok-strong); }
  .browser-mock .bm-zeile input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
  .browser-mock .bm-zeile:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .browser-mock .bm-inhalt { padding: 16px; display: grid; gap: 10px; min-height: 120px; align-content: start; }
  .browser-mock .bm-inhalt .leer { margin: 0; color: var(--ink-muted); font-size: 14px; }
  .schritt .rechts details.hinkt { margin-top: 14px; }
  /* Karten im Lesetext (text mit karten), etwa die fünf Stellen in Kapitel 1 */
  .schritt .karten-text { max-width: 62ch; }
  .stellen-karten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
  .stellen-karten > .stelle-karte { grid-column: span 2; } .stellen-karten > .stelle-karte:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
  .stellen-karten.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stellen-karten.vier > .stelle-karte { grid-column: auto; }
  @media (max-width: 1200px) { .stellen-karten.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1560px) { .stellen-karten.fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stellen-karten.fuenf > .stelle-karte, .stellen-karten.fuenf > .stelle-karte:nth-child(4):nth-last-child(2) { grid-column: auto; } }
  @media (max-width: 760px) { .stellen-karten, .stellen-karten.vier { grid-template-columns: 1fr; } .stellen-karten > .stelle-karte, .stellen-karten > .stelle-karte:nth-child(4):nth-last-child(2) { grid-column: auto; } }
  .stelle-karte { display: flex; flex-direction: column; gap: 8px; background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); padding: 18px 18px 16px; }
  .stelle-karte .sk-emoji { font-size: 26px; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-raised); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
  .stelle-karte .sk-titel { font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--ink); }
  .stelle-karte .sk-zitat { font-size: 14.5px; line-height: 1.5; color: var(--ink-body); font-style: italic; flex: 1; }
  .stelle-karte .sk-emoji img { width: 28px; height: 28px; border-radius: 6px; }
  .stelle-karte .sk-satz { font-size: 14.5px; line-height: 1.5; color: var(--ink-body); flex: 1; }
  .stelle-karte .sk-chip { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 2px 8px; }
  .stelle-karte .sk-zeilen { margin: 4px 0 0; display: grid; gap: 8px; flex: 1; } .stelle-karte .sk-zeilen div { display: grid; gap: 1px; }
  .stelle-karte .sk-zeilen dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); } .stelle-karte .sk-zeilen dd { margin: 0; font-size: 14.5px; color: var(--ink-body); }
  .stelle-karte .sk-fuss { font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); }
  .stelle-karte .sk-hilfe { font-size: 14px; font-weight: 600; color: var(--accent-strong); border-top: 1px solid var(--line-soft); padding-top: 10px; }
  .stelle-karte .sk-hilfe small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px; }
  /* Auswahl als Karten (kartenAus) und als Häuser-Chips (stil: "haeuser") */
  .optionen.wahl-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: none; }
  .optionen.wahl-karten label.wahl-karte { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border-radius: var(--radius-xl); background: var(--surface-sunken); border: 1px solid var(--line-soft); font-weight: 400; color: var(--ink-body); }
  .optionen.wahl-karten label.wahl-karte:has(input:checked) { border: 2px solid var(--accent); padding: 13px 15px; background: var(--accent-soft); }
  .wahl-karte .sk-emoji { font-size: 22px; width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-raised); display: inline-flex; align-items: center; justify-content: center; }
  .wahl-karte b { font-family: var(--font-display); font-size: 15.5px; color: var(--ink); } .wahl-karte .wk-satz { font-size: 13.5px; font-style: italic; color: var(--ink-muted); line-height: 1.45; }
  .wahl-karte input, .wahl-haus input { position: absolute; opacity: 0; pointer-events: none; }
  .wk-haken { display: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--ink-inverse); }
  .wahl-karte .wk-haken { position: absolute; top: 12px; right: 12px; }
  label:has(input:checked) > .wk-haken { display: inline-flex; }
  .optionen.wahl-haeuser { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
  .optionen.wahl-haeuser label.wahl-haus { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); font-size: 14.5px; font-weight: 400; color: var(--ink-body); }
  .optionen.wahl-haeuser label.wahl-haus:has(input:checked) { border: 2px solid var(--accent); padding: 7px 11px; background: var(--accent-soft); }
  .wahl-haus img { width: 18px; height: 18px; border-radius: 4px; } .wahl-haus b { color: var(--ink); } .wahl-haus small { color: var(--ink-muted); font-size: 12px; }
  .wahl-haus .wk-haken { width: 18px; height: 18px; }
  /* Werkbank für Aufträge und Antworten je Haus (prompt, bericht): Häuserliste links, der Auftrag groß rechts */
  .an-werkbank { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 6px; }
  .an-liste { display: grid; gap: 8px; position: sticky; top: 12px; }
  .an-liste .kicker { margin-bottom: 2px; }
  .an-haus { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink-body); }
  .an-haus:hover { border-color: var(--accent); }
  .an-haus.aktiv { border: 2px solid var(--accent); padding: 10px 11px; background: var(--accent-soft); }
  .an-logo img { width: 22px; height: 22px; border-radius: 5px; }
  .an-logo { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; } .an-haus .an-name { display: grid; min-width: 0; flex: 1; } .an-haus b { color: var(--ink); font-size: 14.5px; } .an-haus small { color: var(--ink-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .an-stand { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--line); }
  .an-haus.fertig .an-stand { border: 0; background: var(--ok); color: var(--ink-inverse); }
  .an-panel { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
  .an-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface-sunken); border-bottom: 1px solid var(--line-soft); }
  .an-kopf > div { display: grid; flex: 1; min-width: 0; } .an-kopf b { font-family: var(--font-display); font-size: 17px; color: var(--ink); } .an-kopf small { color: var(--ink-muted); font-size: 12.5px; }
  .an-pre { margin: 0; padding: 18px 20px; max-height: 460px; overflow: auto; white-space: pre-wrap; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--ink-body); background: var(--surface); }
  .an-panel .an-text { display: block; width: calc(100% - 32px); margin: 16px; min-height: 260px; font-family: var(--font-mono); font-size: 13px; }
  .an-fuss { display: flex; align-items: center; gap: 12px; padding: 0 16px 16px; } .an-fuss .bericht-meldung { font-size: 13.5px; color: var(--ok-strong); }
  @media (max-width: 900px) { .an-werkbank { grid-template-columns: 1fr; } .an-liste { position: static; } }
  .bm-chips { display: flex; flex-wrap: wrap; gap: 8px; } .bm-chips.bm-unter { justify-content: center; margin-top: 14px; }
  .bm-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 6px 6px 6px 10px; font-size: 14px; animation: bm-rein .25s ease-out; }
  .bm-chip img { width: 18px; height: 18px; border-radius: 4px; } .bm-chip small { color: var(--ink-muted); font-size: 12px; }
  .bm-chip .bm-weg { border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); } .bm-chip .bm-weg:hover { color: var(--warn); background: var(--warn-soft); }
  @keyframes bm-rein { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
  .browser-mock.klein { margin-top: 14px; transition: box-shadow .15s, transform .15s; } .browser-mock.klein:hover { box-shadow: var(--shadow-raised); transform: translateY(-1px); }
  .browser-mock.klein .bm-zeile { font-size: 14px; gap: 0; } .browser-mock.klein .bm-zeile svg { margin-right: 8px; }
  .browser-mock .bm-teil { position: relative; white-space: nowrap; } .browser-mock .bm-teil.dom { color: var(--ink); font-weight: 600; } .browser-mock .bm-teil.pfad { overflow: hidden; text-overflow: ellipsis; }
  .browser-mock .bm-los { margin-left: auto; padding-left: 8px; color: var(--ink-faint); display: inline-flex; }
  .browser-mock.beschriftet .bm-kopf { padding-bottom: 34px; }
  .browser-mock.beschriftet .bm-teil { border-bottom: 2px solid var(--accent); padding-bottom: 1px; } .browser-mock.beschriftet .bm-teil.pfad { border-color: var(--offen); overflow: visible; }
  .browser-mock .bm-name { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 2px 7px; }
  .browser-mock .bm-teil.pfad .bm-name { color: var(--offen-strong); background: var(--offen-soft); }
  @media (max-width: 600px) { .browser-mock.gross .bm-punkte { display: none; } }
  .browser-mock .bm-satz { display: block; padding: 10px 14px 12px; font-size: 13px; color: var(--ink-muted); }
  .anbieter-karten { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 12px; }
  .anbieter-karte { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 124px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); font-size: 14px; }
  .anbieter-karte .anbieter-logo.gross { width: 34px; height: 34px; margin: 0; }
  .anbieter-karte small { color: var(--ink-muted); font-size: 12px; }
  .anbieter-karte.aktiv { border: 2px solid var(--ok); background: var(--ok-soft); }
  .anbieter-karte.aktiv small { color: var(--ok-strong); font-weight: 700; }
  .an-leiste { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-sunken); font-size: 14px; }
  .an-leiste .anbieter-logo { flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); margin: 0; }
  .an-leiste b { color: var(--ink); }
  .an-leiste span { color: var(--ink-muted); }
  .an-leiste small { display: block; color: var(--ink-muted); font-size: 12.5px; margin-top: 2px; }
  .an-karte { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
  .an-karte .ank-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
  .an-karte .ank-kopf .anbieter-logo { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); margin: 0; }
  .an-karte .ank-kopf b { display: block; color: var(--ink); }
  .an-karte .ank-kopf small { color: var(--ink-muted); font-size: 12.5px; }
  .an-karte .ank-zeile { display: grid; grid-template-columns: 28px 128px 1fr; gap: 10px; align-items: start; padding: 11px 16px; border-top: 1px solid var(--line); }
  .an-karte .ank-kopf + .ank-zeile { border-top: 0; }
  .an-karte .ank-emoji { font-size: 20px; line-height: 1.2; }
  .an-karte .ank-label { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; padding-top: 3px; }
  .an-karte .ank-wert { color: var(--ink); }
  .an-karte .ank-wert small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-muted); }
  .an-karte .ank-frage { color: var(--ink-muted); font-style: italic; }
  .an-leiste .an-schalter { margin-left: auto; flex: none; white-space: nowrap; }
  .arbeitsform-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .arbeitsform-karte { display: grid; gap: 6px; text-align: left; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); cursor: pointer; color: inherit; }
  .arbeitsform-karte .sticker { font-size: 34px; }
  .arbeitsform-karte small { color: var(--ink-muted); font-size: 13.5px; line-height: 1.45; }
  .arbeitsform-karte.aktiv { border: 2px solid var(--accent); background: var(--accent-soft); }

  /* Kapitel 4 und 5: Bewohnerkarten, Zettel, Zonen, Zimmer bilden */
  .bewohner-ed { display: grid; gap: 12px; }
  .bw-karte { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--f); border-radius: var(--radius-xl); padding: 14px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .bw-karte .kopfzeile { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr 2fr auto auto; gap: 8px; align-items: center; }
  .bw-karte .farbe, .zb-tabelle .farbe { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--f); border: 1px solid rgba(0,0,0,.08); vertical-align: middle; }
  .bw-karte label { display: grid; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
  .bw-karte textarea { font-size: 14px; min-height: 64px; text-transform: none; letter-spacing: 0; font-weight: 400; }
  @media (max-width: 800px) { .bw-karte { grid-template-columns: 1fr; } .bw-karte .kopfzeile { grid-template-columns: auto 1fr; } }
  /* Musterkarte zum Lesen: derselbe Rahmen wie im Editor, Felder als Text */
  .bw-karte.muster { grid-template-columns: 1fr; gap: 10px; }
  .bw-karte.muster .kopfzeile { grid-template-columns: auto 1fr auto; }
  .bw-karte.muster .bw-name { font-family: var(--font-display); font-size: 20px; }
  .bw-karte.muster .bw-art { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-lg); background: var(--surface-sunken); color: var(--ink-muted); white-space: nowrap; }
  .bw-karte.muster .bw-rolle { font-size: 14px; color: var(--ink-muted); margin-top: -4px; }
  .bw-karte.muster .bw-feld { display: grid; gap: 3px; font-size: 14px; line-height: 1.45; padding-top: 8px; border-top: 1px solid var(--line); }
  .bw-karte.muster .bw-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
  .bw-karte.muster .bw-feld.betont { background: color-mix(in srgb, var(--f) 22%, transparent); border-top-color: transparent; border-radius: var(--radius-md); padding: 8px 10px; margin: 0 -10px; }
  .zettel-ed { display: grid; gap: 10px; }
  .zettel-gruppe { margin-top: 12px; }
  .zettel-liste { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-top: 10px; align-items: flex-start; }
  .zettel { position: relative; background: var(--f, #FFF3C4); color: #1B1B1B; border-radius: 3px; padding: 12px 28px 14px 12px; font-size: 14px; line-height: 1.35; width: 180px; min-height: 84px; box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.10); transform: rotate(-.8deg); word-wrap: break-word; }
  .zettel::before { content: ""; position: absolute; left: 50%; top: -6px; width: 34px; height: 12px; margin-left: -17px; background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.06); transform: rotate(-2deg); }
  .zettel:nth-child(even) { transform: rotate(.8deg); }
  .zettel.klein { padding: 8px 10px; font-size: 12.5px; width: auto; max-width: 220px; min-height: 0; }
  .zettel.klein::before { display: none; }
  .zettel .wer { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin-bottom: 2px; font-weight: 700; }
  .weg-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
  .weg-liste li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
    .weg-liste .nr { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--f); color: #1B1B1B; }
  .weg-liste .wn { flex: 1; display: grid; min-width: 0; } .weg-liste .wn small { font-size: 12px; color: var(--ink-muted); }
  .wege .weg { margin-top: 10px; padding: 8px 10px; border-left: 4px solid var(--f); background: var(--surface); border-radius: var(--radius-md, 8px); }
  .wege .weg-kopf { font-size: 14px; line-height: 1.35; }
  .wege .weg-schritte { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
  .wege .weg-zimmer { font: inherit; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink); cursor: pointer; }
  .wege button.weg-zimmer:hover { border-color: var(--accent); color: var(--accent); }
  .wege .weg-fehlt { cursor: default; color: var(--ink-muted); border-style: dashed; background: transparent; }
  .wege .pfeil { color: var(--ink-muted); font-size: 13px; }
  .zettel .von { display: flex; align-items: center; gap: 6px; margin: 10px -18px 0 0; font-size: 12px; font-weight: 700; line-height: 1.2; }
  .zettel .von .av { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(27,27,27,.78); color: #fff; font-size: 9.5px; letter-spacing: .02em; }
  .zettel .von .nm { min-width: 0; overflow-wrap: break-word; hyphens: auto; opacity: .8; }
  .zettel .von .mik { margin-left: auto; font-size: 13px; }
  .zettel .zimmer { display: block; font-size: 11px; opacity: .8; margin-top: 4px; }
  .zettel .loeschen { position: absolute; top: 3px; right: 3px; font-size: 11px; color: rgba(0,0,0,.45); }
  .zettel .loeschen:hover { background: rgba(0,0,0,.08); color: #1B1B1B; }
  .zettel .zone-sel { display: block; margin-top: 6px; font-size: 12px; padding: 2px 4px; min-height: 0; background: rgba(255,255,255,.7); color: #1B1B1B; }
  .zettel .punkte { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 800; }
  .zettel .punkte button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.8); cursor: pointer; color: #1B1B1B; }
  .zonen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 900px) { .zonen { grid-template-columns: 1fr; } }
  .zone { background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); padding: 12px 14px; font-size: 13px; min-height: 140px; }
  .zone > b { font-family: var(--font-display); font-size: 14px; }
  .zone-erstes { border: 2px solid var(--accent); background: var(--accent-soft); }
  .zone .zettel-liste { flex-direction: column; }
  .zone .zettel { max-width: none; transform: none; }
  .zimmer-spalten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .zimmer-spalte { background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); padding: 12px 14px; font-size: 13px; }

  /* Kleine Bausteine: Abschluss, Notiz, Profil, Timer, Auto, Aufdrehen */
  .abschluss-liste { display: flex; flex-wrap: wrap; gap: 8px; }
  .abschluss-liste span { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 7px 11px; font-size: 13.5px; font-weight: 700; }
  .abschluss-liste .fach { color: var(--ink-muted); font-weight: 400; border: 0; padding: 0; background: none; }
  .notiz { display: grid; gap: 8px; max-width: 66ch; }
  .notiz label { font-size: 13px; font-weight: 700; color: var(--ink-body); }
  .profil { background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-2xl); padding: 20px; display: grid; gap: 14px; max-width: 66ch; }
  .profil label { display: grid; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
  .profil label .feld { text-transform: none; letter-spacing: 0; font-weight: 400; background: var(--surface); }
  .profil .av-row { display: flex; align-items: center; gap: 12px; }
  .profil .av-row label.btn { display: inline-flex; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-body); }
  .profil .av-big { width: 64px; height: 64px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; font-size: 32px; overflow: hidden; }
  .profil .av-big img { width: 100%; height: 100%; object-fit: cover; }
  .profil input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .timer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); padding: 12px 16px; }
  .timer .zeit { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 84px; }
  .timer .hint { flex-basis: 100%; font-size: 13px; }
  .timer.um { background: var(--offen-soft); border-color: var(--offen); }
  .timer.um .zeit { color: var(--offen-strong); }
  .auto-vorschau { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); padding: 16px; max-width: 66ch; }
  .auto-optionen { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-width: 100%; margin-top: 14px; } .auto-optionen label { align-items: center; white-space: nowrap; } .auto-optionen .anbieter-logo { margin-right: 2px; }
  .auto-anders { margin-top: 12px; max-width: 40ch; }
  .auto-buehne { display: grid; place-items: center; min-height: 260px; background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-2xl); }
  .auto-demo.gross { transform: scale(2.2); transform-origin: center; }
  .auto-demo { position: relative; width: 90px; height: 80px; display: grid; place-items: end center; }
  .auto-demo .fahrzeug { font-size: 56px; line-height: 1; transform: scaleX(-1); filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
  .auto-demo .av { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); display: grid; place-items: center; font-size: 20px; overflow: hidden; }
  .auto-demo .av img { width: 100%; height: 100%; object-fit: cover; }
  .auto-demo .marke, #cursor .marke { position: absolute; right: -2px; bottom: 22px; width: 20px; height: 20px; border-radius: 5px; background: #fff; border: 1px solid var(--line); }
  #cursor .marke { right: -6px; bottom: 8px; width: 18px; height: 18px; }
  .aufdrehen { display: grid; gap: 12px; background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); padding: 16px 18px; }
  .aufdrehen .rohr-anim { width: 100%; max-width: 520px; height: auto; }
  .aufdrehen .fluss { opacity: 0; }
  .aufdrehen.laeuft .fluss { opacity: 1; animation: fluss 1s linear infinite; }
  @keyframes fluss { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -64; } }
  @media (prefers-reduced-motion: reduce) { .aufdrehen.laeuft .fluss { animation: none; } }
  .aufdrehen.gross { padding: 22px; gap: 16px; }
  .af-buehne { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0; }
  .af-haus { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 150px; padding: 14px 16px; background: var(--surface); border: 2px solid var(--hauslinie, var(--line)); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
  .af-haus b { font-family: var(--font-display); font-size: 15px; color: var(--ink); } .af-haus small { font-size: 12px; color: var(--ink-muted); }
  .af-logo { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; } .af-logo img { width: 36px; height: 36px; border-radius: 8px; }
  .af-rohr { position: relative; height: 22px; margin: 0 -2px; background: var(--rohr, var(--line)); border-top: 4px solid var(--hauslinie, var(--ink-muted)); border-bottom: 4px solid var(--hauslinie, var(--ink-muted)); overflow: hidden; }
  .af-fluss { position: absolute; inset: 3px 0; background: repeating-linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 34px); opacity: 0; }
  .aufdrehen.laeuft .af-fluss { opacity: 1; animation: af-fluss .8s linear infinite; }
  @keyframes af-fluss { from { background-position: 0 0; } to { background-position: 34px 0; } }
  @media (prefers-reduced-motion: reduce) { .aufdrehen.laeuft .af-fluss { animation: none; } }
  .af-zeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .aufdrehen.gross .lieferung { max-height: 420px; font-size: 13px; padding: 16px 18px; }
  .lieferung .j-k { color: var(--accent-strong); font-weight: 600; } .lieferung .j-s { color: var(--ok-strong); } .lieferung .j-n { color: var(--offen-strong); }
  .aufdrehen .lieferung { margin: 0; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; font-size: 12px; line-height: 1.45; white-space: pre; font-family: var(--font-mono); }

  /* Musterkoffer */
  .edit { display: grid; gap: 10px; font-size: 14px; }
  .edit label { display: grid; gap: 5px; font-size: 12px; color: var(--ink-muted); font-weight: 700; }
  .edit label .feld, .edit label .hint, .edit label input, .edit label select, .edit label textarea { font-weight: 400; }
  .edit label .feld { font-size: 15px; }
  .edit .zeile { display: flex; gap: 6px; align-items: center; }
  .edit .zeile input { flex: 1; }
  .edit .liste { display: flex; flex-wrap: wrap; gap: 6px; }
  .edit .chip { display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 28px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px 4px 3px 9px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: normal; }
  .edit .chip button { border: 0; background: none; cursor: pointer; color: var(--ink-faint); padding: 2px 5px; border-radius: 4px; }
  .edit .chip button:hover { color: var(--warn); background: var(--warn-soft); }
  .edit .bt-grid { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; font-size: 13.5px; }
  .gest .gest-zeile { display: flex; align-items: center; gap: 8px; position: relative; }
  .gest .gest-zeile .feld { flex: 1; min-width: 0; }
  .gest .gest-logo { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); padding: 3px; }
  .gest .gest-logo.leer { display: grid; place-items: center; color: var(--ink-muted); background: var(--surface-sunken); }
  .gest.breit { grid-template-columns: 1fr 1fr; gap: 20px 56px; margin-top: 16px; }
  .gest.breit .spalte { display: grid; gap: 14px; align-content: start; }
  @media (max-width: 900px) { .gest.breit { grid-template-columns: 1fr; } }
  .farbkarten { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
  .farbkarte { display: grid; gap: 6px; width: 120px; }
  .farbkarte small { font-size: 11px; color: var(--ink-muted); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
  .farbkarte input[type="color"] { width: 100%; height: 56px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0; background: var(--f); cursor: pointer; }
  .farbkarte input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; } .farbkarte input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 7px; }
  .farbkarte .hex { font-family: var(--font-mono); font-size: 13px; }
  .schriften { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
  .schriften .schrift { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 15px; cursor: pointer; color: var(--ink); }
  .schriften .schrift:hover { border-color: var(--accent); }
  .schriften .schrift.aktiv { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); }

  /* ---------- Wörterbuch und Tagebuch: Seitenpanel über der Seite ---------- */
  #wb-schleier { position: fixed; inset: 0; background: var(--schleier); z-index: 39; opacity: 0; transition: opacity .25s ease; }
  #wb-schleier.an { opacity: 1; }
  #wb { position: fixed; right: 0; top: 0; bottom: 0; width: 380px; max-width: 92vw; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(20, 22, 28, .18); z-index: 40; display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform .25s ease; visibility: hidden; }
  #wb.open { transform: none; visibility: visible; }
  @media (prefers-reduced-motion: reduce) { #wb, #wb-schleier { transition: none; } }
  #wb .panel-kopf { flex-shrink: 0; padding: 16px 16px 12px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 12px; }
  #wb .panel-kopf-zeile { display: flex; align-items: center; gap: 10px; }
  #wb .panel-titel { flex-grow: 1; font-family: var(--font-display); font-size: 16px; font-weight: 800; }
  .reiter { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-sunken); }
  .reiter button { flex: 1 1 0; height: 30px; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
  .reiter button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-raised); }
  .suche { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink-faint); }
  .suche:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
  .suche input { flex-grow: 1; min-width: 0; border: 0; background: transparent; font-size: 14px; color: var(--ink); outline: none; }
  #wb .liste { flex-grow: 1; min-height: 0; overflow: auto; padding: 6px 8px 16px; }
  #wb .gruppe { padding: 14px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
  #wb .leer, #wb .hint { padding: 8px 10px; }
  .wort { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer; color: inherit; }
  .wort:hover, .wort:focus-visible { background: var(--surface-sunken); outline: none; }
  .wort:hover .ding-emoji { background: var(--surface); }
  .wb-eintrag { flex-grow: 1; min-height: 0; overflow: auto; padding: 18px 18px 24px; display: flex; flex-direction: column; gap: 14px; }
  .wb-eintrag .md { font-size: 14.5px; line-height: 1.6; color: var(--ink-body); }
  .wb-eintrag .md p { margin: 0 0 .8em; } .wb-eintrag .md p:last-child { margin: 0; }
  .wb-eintrag .ort { font-size: 13px; color: var(--ink-muted); }
  .wb-eintrag .ort strong { color: var(--ink-body); }
  .aktionen-zeile { display: flex; gap: 8px; flex-wrap: wrap; }
  .aktionen-zeile .btn { flex: 1 1 auto; }
  .tb-liste { display: grid; gap: 8px; align-content: start; }
  .tb-kap { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
  .tb-kap.tb-entscheidungen { border-color: var(--kapsel); }
  .tb-e small { font-weight: 500; color: var(--ink-muted); }
  .tb-kap summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 12px; }
  .tb-kap summary::-webkit-details-marker { display: none; }
  .tb-kap summary .tb-titel { flex-grow: 1; font-size: 13.5px; font-weight: 700; color: var(--ink); }
  .tb-kap summary .tb-n { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
  .tb-kap summary .ico { color: var(--ink-faint); transition: transform .15s; }
  .tb-kap[open] summary .ico { transform: rotate(180deg); }
  .tb-felder { display: grid; gap: 10px; padding: 0 12px 12px; }
  .tb-e { display: grid; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--ink-muted); }
  .tb-e .feld { font-size: 14px; font-weight: 400; color: var(--ink); min-height: 36px; padding: 7px 10px; }
  .tb-e textarea.feld { min-height: 60px; }
  .popover { position: fixed; z-index: 45; width: 340px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-panel); padding: 14px 16px; font-size: 14px; display: grid; gap: 10px; }
  .popover .md { font-size: 13.5px; line-height: 1.55; color: var(--ink-body); }
  .popover .md p { margin: 0; }

  /* ---------- Stadt ---------- */
  .stadt-wrap { max-width: 1440px; margin: 0 auto; display: grid; gap: 16px; }
  .seiten-kopf { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
  .seiten-kopf .titel-block { flex: 1 1 260px; min-width: 0; }
  .seiten-kopf h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.025em; margin: 0; }
  .seiten-kopf .unter { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }
  .legende { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--ink-body); }
  .legende > span { display: inline-flex; align-items: center; gap: 6px; }
  .legende .eyebrow { margin-right: -4px; }
  .legende .strich { width: 1px; height: 18px; background: var(--line); }
  .dach-i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
  .kosten-zeile { display: flex; }
  .kosten-pille { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: 13px; font-weight: 700; }
  .kosten-pille small { font-weight: 400; color: var(--ink-muted); font-size: 12px; }
  .karte-flaeche { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); padding: 16px; }
  .karte-svg { width: 100%; height: auto; display: block; font-family: var(--font-body); }
  .karte-svg .wiese { fill: var(--wiese); }
  .karte-svg .strasse { fill: var(--asphalt); }
  .karte-svg .mitte { stroke: var(--asphalt-linie); stroke-width: 2; stroke-dasharray: 14 12; opacity: .55; }
  .karte-svg .strassenname { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; fill: var(--asphalt-linie); font-weight: 800; }
  .karte-svg .grundstueck { fill: var(--rasen); stroke: var(--zaun); stroke-width: 1.5; transition: stroke .12s; }
  .karte-svg .grundstueck.frei { fill: var(--rasen-frei); stroke-dasharray: 6 5; }
  .karte-svg .grundstueck.nachbar { fill: var(--grund-nachbar); stroke: color-mix(in srgb, var(--dach-nachbar) 35%, transparent); }
  .karte-svg .haus-g, .karte-svg .frei-g { cursor: pointer; outline: none; }
  .karte-svg .haus-g:hover .grundstueck, .karte-svg .haus-g:focus-visible .grundstueck, .karte-svg .frei-g:hover .grundstueck, .karte-svg .frei-g:focus-visible .grundstueck { stroke: var(--accent); stroke-width: 2.5; }
  .karte-svg .rohbau .grundstueck { stroke: var(--accent); stroke-dasharray: 7 5; stroke-width: 2; }
  .karte-svg .besitz-chip rect { fill: var(--surface); }
  .karte-svg .besitz-chip text { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; fill: var(--ink-body); }
  .karte-svg .typ-eigen .besitz-chip text { fill: var(--accent-strong); }
  .karte-svg .hier-chip rect { fill: var(--accent); }
  .karte-svg .hier-chip text { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; fill: var(--ink-inverse); }
  .karte-svg .dach { stroke: var(--hauslinie); stroke-width: 2.5; stroke-linejoin: round; }
  .karte-svg .fassade { fill: var(--surface); stroke: var(--hauslinie); stroke-width: 2.5; }
  .karte-svg .rohbau .dach { fill: var(--accent-soft) !important; stroke: var(--accent); stroke-dasharray: 7 5; }
  .karte-svg .rohbau .fassade { fill: color-mix(in srgb, var(--surface) 70%, transparent); stroke: var(--accent); stroke-dasharray: 7 5; }
  .karte-svg .name { font-family: var(--font-display); font-size: 14px; font-weight: 800; fill: var(--ink); }
  .karte-svg .tuer { fill: var(--hauslinie); }
  .karte-svg .rohbau .tuer { fill: var(--accent); opacity: .6; }
  .karte-svg .pfosten { stroke: var(--zaun); stroke-width: 2; }
  .karte-svg .zufahrt { fill: var(--asphalt); }
  .karte-svg .zufahrt-mitte { stroke: var(--asphalt-linie); stroke-width: 2; stroke-dasharray: 6 5; opacity: .7; }
  .karte-svg .hecke { fill: none; stroke: var(--zaun); stroke-width: 5; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .9; }
  .karte-svg .schild { fill: var(--surface); stroke: var(--line); }
  .karte-svg .schild.leer { fill: none; stroke: var(--zaun); stroke-dasharray: 4 3; }
  .karte-svg .adresse { font-size: 11.5px; fill: var(--ink-muted); text-anchor: middle; }
  .karte-svg .stand-karte rect { fill: var(--surface); stroke: var(--line); }
  .karte-svg .stand-karte.offen rect { stroke: var(--offen); stroke-dasharray: 4 3; }
  .karte-svg .stand-emoji { font-size: 13px; }
  .karte-svg .stand-text { font-size: 11.5px; font-weight: 700; fill: var(--ink-body); }
  .karte-svg .blase-text { font-weight: 800; fill: #fff; font-family: var(--font-body); }
  .karte-svg .blase-mehr { fill: var(--surface); stroke: var(--line); }
  .karte-svg .blase-mehr-text { font-size: 10px; font-weight: 800; fill: var(--ink-muted); }
  .karte-svg .plus-knopf { fill: var(--surface); stroke: var(--zaun); }
  .karte-svg .plus { stroke: var(--ok-strong); stroke-width: 2; stroke-linecap: round; }
  .karte-svg .frei-text { font-size: 13px; font-weight: 700; fill: var(--ok-strong); text-anchor: middle; }
  .karte-svg .frei-g:hover .plus-knopf { stroke: var(--accent); } .karte-svg .frei-g:hover .plus { stroke: var(--accent); } .karte-svg .frei-g:hover .frei-text { fill: var(--accent-strong); }
  .karte-svg .leitung { stroke: var(--ink); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
  .karte-svg .leitung.strasse { stroke-dasharray: 8 7; }
  .karte-svg .leitung.einwurfschacht { stroke: var(--ok); }
  .karte-svg .leitung.schuessel { stroke-dasharray: 2 6; }
  .karte-svg .leitung.fernglas { stroke-dasharray: 1 6; opacity: .6; }
  .karte-svg .leitung-ende { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
  .karte-svg .leitung-schild { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
  .karte-svg .leitung-text { font-size: 11.5px; font-weight: 700; fill: var(--ink); }
  .karte-svg .sticker { font-size: 26px; }
  /* Gewerbegebiet */
  .gewerbe { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); padding: 18px; display: grid; gap: 14px; }
  .gewerbe-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .gewerbe-kopf h3 { margin: 0; font-size: 15px; }
  .gewerbe-kopf .hint { margin: 0; font-size: 13px; }
  .kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
  .kachel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; text-align: left; color: inherit; transition: border-color .12s; }
  .kachel:hover, .kachel:focus-visible { border-color: var(--accent); outline: none; }
  .kachel.aktiv { border: 2px solid var(--accent); padding: 11px 13px; background: var(--accent-soft); }
  .kachel > .ico { color: var(--ink-faint); }
  .kachel-emoji { font-size: 21px; line-height: 1; flex-shrink: 0; }
  .kachel-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .kachel-name { font-size: 14px; font-weight: 700; color: var(--ink); }
  .kachel-fach { font-size: 12px; color: var(--ink-muted); }
  .blasen { display: inline-flex; align-items: center; }
  .blase { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--b, var(--fremd)); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--surface); flex-shrink: 0; overflow: hidden; }
  .blase + .blase { margin-left: -8px; }
  .blase img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 4px; background: #fff; object-fit: contain; }
  .blase.gewaehlt { box-shadow: 0 0 0 2px var(--ok); }
  .blase.mehr { background: var(--surface); color: var(--ink-muted); border: 1px solid var(--line); }
  .versorger-detail { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-sunken); padding: 16px 18px; display: grid; gap: 14px; }
  .vd-kopf { display: flex; align-items: center; gap: 12px; }
  .vd-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-body); max-width: 70ch; }
  .anbieter-logo { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 5px; background: #fff; }
  .anbieter-logo.gross { width: 22px; height: 22px; vertical-align: -5px; }
  .anbieter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
  .anbieter-chips span { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
  .anbieter-chips span.gewaehlt { border-color: var(--ok); background: var(--ok-soft); color: var(--ok-strong); }
  .vs-wahl-zeile { display: flex; align-items: center; gap: 6px; }
  .vs-wahl-zeile select { flex: 1; min-width: 0; }
  /* Dialog über der Seite */
  .dialog-schleier { position: fixed; inset: 0; z-index: 70; background: var(--schleier); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .2s ease; }
  .dialog-schleier.an { opacity: 1; }
  .dialog { width: 520px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-panel); padding: 20px 22px; display: grid; gap: 14px; }
  .dialog-kopf { display: flex; align-items: center; justify-content: space-between; }
  .dialog-kopf h3 { margin: 0; font-size: 18px; }
  .dialog-fuss { display: flex; justify-content: flex-end; gap: 8px; }
  .typ-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .typ-wahl button { display: grid; justify-items: center; gap: 3px; padding: 14px 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; color: var(--ink); text-align: center; }
  .typ-wahl button:hover { border-color: var(--accent); }
  .typ-wahl button[aria-checked="true"] { border: 2px solid var(--accent); padding: 13px 7px 11px; background: var(--accent-soft); }
  .typ-wahl .typ-emoji { font-size: 26px; line-height: 1.1; }
  .typ-wahl b { font-size: 13.5px; }
  .typ-wahl small { font-size: 11.5px; color: var(--ink-muted); }
  .typ-wahl.zwei-art { grid-template-columns: repeat(2, 1fr); }
  .typ-wahl button:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line); }
  @media (max-width: 560px) { .typ-wahl { grid-template-columns: 1fr; } }

  /* ---------- Haus: Schnitt ---------- */
  .haus-seite, .zimmer-seite { max-width: 1440px; margin: 0 auto; display: grid; gap: 14px; }
  .haus-marke { position: relative; width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; overflow: hidden; }
  .haus-marke img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 11px; background: #fff; object-fit: contain; }
  .seiten-kopf .unter .chip { vertical-align: 1px; margin-right: 4px; }
  .haus-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
  @media (max-width: 1100px) { .haus-wrap { grid-template-columns: 1fr; } }
  /* Im Zimmer bleibt der Grundriss stehen, während man rechts einrichtet */
  @media (min-width: 1101px) { .zimmer-seite .grundriss-flaeche { position: sticky; top: 0; max-height: calc(100dvh - 120px); overflow: auto; overscroll-behavior: contain; } }
  .schnitt-flaeche { border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); overflow: hidden; background: var(--himmel); }
  .zeichnung { width: 100%; height: auto; display: block; font-family: var(--font-body); }
  .zeichnung .himmel { fill: var(--himmel); }
  .zeichnung .gras { fill: var(--gras); }
  .zeichnung .erde { fill: var(--erde); }
  .zeichnung .zone-titel { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; fill: color-mix(in srgb, var(--ink-muted) 80%, var(--himmel)); }
  .zeichnung .zone-titel.erde { fill: var(--erde-ink); }
  .zeichnung .erde-klein { font-size: 11px; fill: var(--erde-ink); opacity: .8; }
  .zeichnung .erde-text { font-size: 10.5px; font-weight: 700; fill: var(--erde-ink); }
  .zeichnung .dach { stroke: var(--hauslinie); stroke-width: 4; stroke-linejoin: round; }
  .zeichnung .dach.offen { fill: var(--accent-soft) !important; stroke: var(--accent); stroke-dasharray: 10 7; }
  .zeichnung .fassade { fill: var(--surface-sunken); stroke: var(--hauslinie); stroke-width: 5; }
  .zeichnung .fassade.offen { stroke: var(--accent); stroke-dasharray: 12 8; }
  .zeichnung .treppenhaus { fill: color-mix(in srgb, var(--surface-sunken) 60%, var(--line)); }
  .zeichnung .treppe { fill: none; stroke: var(--ink-faint); stroke-width: 2.5; stroke-linejoin: round; }
  .zeichnung .flur-streifen { fill: color-mix(in srgb, var(--surface-sunken) 60%, var(--line)); }
  .zeichnung .flur-text { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-muted); }
  .zeichnung .decke { stroke: var(--hauslinie); stroke-width: 5; }
  .zeichnung .zelle { fill: var(--surface); stroke: var(--hauslinie); stroke-width: 3; }
  .zeichnung .zelle.leer { fill: var(--surface-sunken); }
  .zeichnung .zelle-name { font-size: 12.5px; font-weight: 700; fill: var(--ink); }
  .zeichnung .zelle-fach { font-size: 10.5px; fill: var(--ink-muted); }
  .zeichnung .zelle-tuer { stroke: color-mix(in srgb, var(--surface-sunken) 60%, var(--line)); stroke-width: 6; }
  .zeichnung .start-chip { fill: var(--accent-soft); }
  .zeichnung .start-text { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; fill: var(--accent-strong); }
  .zeichnung .zimmer-g, .zeichnung .zimmer-neu, .zeichnung .bt-klick { cursor: pointer; outline: none; }
  .zeichnung .zimmer-g:hover .zelle, .zeichnung .zimmer-g:focus-visible .zelle { stroke: var(--accent); stroke-width: 3.5; fill: var(--accent-soft); }
  .zeichnung .zimmer-g.wunsch .zelle { stroke-dasharray: 8 6; }
  .zeichnung .neu-rahmen { fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-dasharray: 7 5; }
  .zeichnung .neu-plus { font-size: 20px; fill: var(--ink-faint); }
  .zeichnung .neu-text { font-size: 10.5px; font-weight: 700; fill: var(--ink-muted); }
  .zeichnung .zimmer-neu:hover .neu-rahmen, .zeichnung .zimmer-neu:focus-visible .neu-rahmen { stroke: var(--accent); }
  .zeichnung .zimmer-neu:hover .neu-plus, .zeichnung .zimmer-neu:hover .neu-text { fill: var(--accent-strong); }
  /* Gegenstände: Emoji, Bildbegriff, Fachbegriff */
  .zeichnung .ding-emoji { font-size: 20px; }
  .zeichnung .ding-bild { font-size: 11.5px; font-weight: 700; fill: var(--ink); }
  .zeichnung .ding-fach { font-size: 10px; fill: var(--ink-muted); }
  .zeichnung .ding-kachel { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
  .zeichnung .ding-flaeche { fill: transparent; stroke: transparent; stroke-width: 2; }
  .zeichnung .bt-klick:hover .ding-kachel, .zeichnung .bt-klick:focus-visible .ding-kachel, .zeichnung .ding.gewaehlt .ding-kachel { stroke: var(--accent); stroke-width: 2; }
  .zeichnung .bt-klick:hover .ding-flaeche, .zeichnung .bt-klick:focus-visible .ding-flaeche { fill: var(--accent-soft); }
  .zeichnung .ding.gewaehlt .ding-flaeche { fill: var(--accent-soft); stroke: var(--accent); }
  .zeichnung .ding.offen .ding-kachel { fill: none; stroke: var(--offen); stroke-dasharray: 5 4; }
  .zeichnung .ding.offen .ding-emoji { opacity: .45; }
  .zeichnung .ding.offen .ding-bild { fill: var(--ink-muted); }
  .zeichnung .versorger-text { font-size: 10px; font-weight: 700; fill: var(--accent-strong); }
  .zeichnung .tuer-oeffnung { stroke: var(--himmel); stroke-width: 7; }
  .zeichnung .tuer-blatt { fill: var(--dach-miete); stroke: var(--hauslinie); stroke-width: 2; }
  .zeichnung .tuer-schwung { fill: none; stroke: var(--ink-faint); stroke-width: 1.8; stroke-dasharray: 5 4; }
  .zeichnung .haustuer:hover .tuer-blatt, .zeichnung .haustuer.gewaehlt .tuer-blatt { fill: var(--accent); }
  .zeichnung .haustuer.offen .ding-bild { fill: var(--ink-muted); }
  .zeichnung .schacht-klappe { fill: var(--ink-faint); stroke: var(--hauslinie); stroke-width: 2; }
  .zeichnung .schacht-punkt { fill: var(--hauslinie); }
  .zeichnung .schacht:hover .schacht-klappe, .zeichnung .schacht.gewaehlt .schacht-klappe { fill: var(--accent); }
  .zeichnung .rampe { fill: var(--erde-linie); stroke: var(--hauslinie); stroke-width: 2; }
  .zeichnung .leitung-luft { fill: none; stroke: var(--linie-luft); stroke-width: 3; stroke-dasharray: 9 6; stroke-linecap: round; stroke-linejoin: round; }
  .zeichnung .leitung-luft.offen { opacity: .45; }
  .zeichnung .pfeil-luft { fill: var(--linie-luft); }
  .zeichnung .leitung-erde { fill: none; stroke: var(--erde-linie); stroke-width: 2.5; stroke-dasharray: 8 5; }
  .zeichnung .pfeil-erde { fill: var(--erde-linie); }
  /* Rohrpost und Keller */
  .zeichnung .rohr-aussen { fill: none; stroke: var(--hauslinie); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
  .zeichnung .rohr-innen { fill: none; stroke: var(--rohr); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  .zeichnung .offen .rohr-innen { stroke-dasharray: 8 6; }
  .zeichnung .offen .rohr-aussen { opacity: .5; }
  .zeichnung .rohrpost-karte rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
  .zeichnung .rohrpost-karte:hover rect, .zeichnung .rohrpost-karte.gewaehlt rect { stroke: var(--accent); stroke-width: 2; }
  .zeichnung .rohrpost-karte.offen rect { stroke: var(--offen); stroke-dasharray: 5 4; }
  .zeichnung .kellerraum { fill: var(--surface-sunken); stroke: var(--hauslinie); stroke-width: 5; }
  .zeichnung .kellerraum.offen { stroke-dasharray: 12 8; opacity: .85; }
  .zeichnung .kasten { fill: var(--surface); stroke: var(--hauslinie); stroke-width: 2.5; }
  .zeichnung .kasten-g.offen .kasten { stroke-dasharray: 8 6; }
  .zeichnung .kasten-titel { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-faint); }
  .zeichnung .kasten-mehr { font-size: 11px; font-weight: 800; fill: var(--accent-strong); }
  .zeichnung .kasten-strich { stroke: var(--line-soft); stroke-width: 2; }
  .zeichnung .leitung-marke { fill: var(--fremd-soft); stroke: var(--line); }
  .zeichnung .leitung-neu rect { fill: none; stroke: var(--ink-faint); stroke-width: 1.8; stroke-dasharray: 6 4; }
  .zeichnung .leitung-neu text { font-size: 11px; font-weight: 700; fill: var(--ink-muted); }
  .zeichnung .leitung-neu:hover rect { stroke: var(--accent); } .zeichnung .leitung-neu:hover text { fill: var(--accent-strong); }
  .zeichnung .keller-schild:hover .zone-titel, .zeichnung .keller-schild.gewaehlt .zone-titel { text-decoration: underline; }
  /* Rechte Spalte im Haus */
  .haus-seitenleiste { display: grid; gap: 14px; align-content: start; position: sticky; top: 0; }
  .seite-box { background: var(--surface); border-radius: var(--radius-2xl); padding: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-raised); display: grid; gap: 12px; }
  .seite-box h3 { margin: 0; font-size: 15px; }
  .seite-box .box-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .seite-box .box-kopf .hint { margin: 0; font-size: 12px; }
  .seite-box .hinweis { padding: 12px 14px; background: var(--surface-sunken); border-radius: var(--radius-lg); font-size: 13.5px; line-height: 1.5; color: var(--ink-body); }
  .lesehilfe p { margin: 0; display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-body); }
  .lesehilfe b { color: var(--ink); }
  .lh-marke { flex-shrink: 0; width: 18px; height: 0; margin-top: 10px; border-top: 3px solid var(--kapsel); border-radius: 2px; }
  .lh-marke.strich { border-top: 3px dashed var(--linie-luft); }
  .lh-marke.offen { border-top: 2px dashed var(--offen); }
  .bt-liste { list-style: none; margin: 0; padding: 0; display: grid; }
  .bt-liste li + li { border-top: 1px solid var(--line-soft); }
  .bt-zeile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--radius-md); color: inherit; }
  .bt-zeile:hover, .bt-zeile:focus-visible { background: var(--surface-sunken); outline: none; }
  .bt-zeile .nr { width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
  .bt-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .bt-text b { font-size: 14px; color: var(--ink); }
  .bt-text small { font-size: 12px; color: var(--ink-muted); line-height: 1.35; }
  .haken-rund { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--ok-soft); color: var(--ok-strong); display: inline-flex; align-items: center; justify-content: center; }
  .detail { gap: 14px; }
  .detail-kopf { display: flex; align-items: center; gap: 12px; }
  .fach-zeile .chip { flex-shrink: 0; }
  .fach-zeile { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; padding: 10px 12px; border-radius: var(--radius-lg); background: var(--surface-sunken); font-size: 13.5px; font-weight: 700; color: var(--ink); }
  .detail-frage { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-body); }
  .detail-block { display: grid; gap: 8px; justify-items: start; }
  .detail-block > .dreifach, .detail-block > .chips, .detail-block > .zeile-neu, .detail-block > .sub-zeile, .detail-block > .einsaetze, .detail-block > .edit, .detail-block > .leitungs-liste { justify-self: stretch; }
  .dreifach { display: flex; gap: 8px; }
  .dreifach button { white-space: nowrap; flex: 1 1 0; min-height: 40px; padding: 0 6px; border-radius: var(--radius-md); font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); }
  .dreifach button:hover { border-color: var(--accent); color: var(--ink); }
  .dreifach button.ja[aria-pressed="true"] { border: 2px solid var(--ok); background: var(--ok-soft); color: var(--ok-strong); }
  .dreifach button.nein[aria-pressed="true"] { border: 2px solid var(--fremd); background: var(--fremd-soft); color: var(--ink); }
  .dreifach button.offen { border-style: dashed; border-color: var(--offen); color: var(--offen-strong); }
  .dreifach button.offen[aria-pressed="true"] { border: 2px dashed var(--offen); background: var(--offen-soft); }
  .dreifach.klein { gap: 4px; }
  .dreifach.klein button { flex: 0 0 34px; min-height: 30px; padding: 0; }
  .sub-zeile { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
  .sub-name { flex-grow: 1; display: grid; }
  /* Schlösser: zu kräftig, offen grün, unentschieden orange gestrichelt */
  .schloss { display: inline-flex; vertical-align: -3px; }
  .schloss.zu { color: var(--ink); } .schloss.auf { color: var(--ok-strong); } .schloss.unklar { color: var(--offen-strong); }
  .zeichnung .schloss-grund { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
  .zeichnung .schloss-svg.zu > g { stroke: var(--ink); } .zeichnung .schloss-svg.auf > g { stroke: var(--ok-strong); } .zeichnung .schloss-svg.unklar > g { stroke: var(--offen-strong); }
  .eintrag-chip .schloss { margin-right: 4px; }
  .schloss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .schloss-zeile { display: flex; align-items: center; gap: 10px; }
  .schloss-kipp { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-md); width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
  .schloss-kipp:hover, .schloss-kipp:focus-visible { border-color: var(--accent); outline: none; }
  .schloss-zeile > .schloss { width: 34px; justify-content: center; flex-shrink: 0; }
  .schloss-ziel { flex: 1; display: grid; text-align: left; border: 0; background: none; padding: 5px 6px; border-radius: var(--radius-md); cursor: pointer; color: inherit; font: inherit; font-size: 14px; }
  .schloss-ziel:hover, .schloss-ziel:focus-visible { background: var(--surface-sunken); outline: none; }
  .schloss-ziel small { font-size: 12px; color: var(--ink-muted); }
  .schloss-wahl .dreifach { flex-wrap: wrap; }
  .schloss-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
  .sub-name small { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .eintrag-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 3px 4px 3px 11px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: 13.5px; font-weight: 700; color: var(--ink); }
  .eintrag-chip.klickbar { cursor: pointer; }
  .eintrag-chip.klickbar:hover { border-color: var(--accent); background: var(--accent-soft); }
  .eintrag-chip button { border: 0; background: none; color: var(--ink-faint); cursor: pointer; border-radius: 6px; padding: 4px; display: inline-flex; }
  .eintrag-chip button:hover { color: var(--warn); background: var(--warn-soft); }
  .zeile-neu { display: flex; gap: 8px; }
  .zeile-neu .feld { flex: 1; min-width: 0; }
  .zeile-neu select.feld { flex: 0 1 auto; }
  .zeile-neu .btn { min-height: 40px; padding: 0 12px; }
  .leitungs-liste { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; }
  .leitung-li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); }
  .leitung-li .leitung-weg { font-size: 16px; line-height: 1.3; }
  .leitung-li .leitung-text { flex: 1; display: grid; gap: 1px; }
  .leitung-li .leitung-text .anbieter-logo { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
  .leitung-li small { font-size: 12px; color: var(--ink-muted); }
  .leitung-weg-btn { border: 0; background: none; color: var(--ink-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-xs); }
  .leitung-weg-btn:hover { color: var(--warn); background: var(--surface-sunken); }
  .leitung-form .edit { display: grid; gap: 10px; justify-self: stretch; }
  .leitung-form [hidden] { display: none; }
  .einsaetze { display: grid; gap: 6px; }
  .einsatz { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 13.5px; }
  .einsatz b { flex-grow: 1; }
  .einsatz span { color: var(--ink-muted); font-size: 12.5px; }
  .link-zeile { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-body); text-align: left; }
  .link-zeile span { flex-grow: 1; }
  .link-zeile:hover { border-color: var(--accent); }
  .knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .knoepfe .knopf { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; align-items: center; background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 8px 10px; font-size: 13px; }
  .knoepfe .knopf .e { font-size: 18px; grid-row: span 3; }
  .knoepfe .knopf .t { color: var(--ink-muted); font-size: 11.5px; line-height: 1.35; }
  .knoepfe .knopf .f { font-family: var(--font-mono); font-size: 10px; color: var(--accent-strong); }
  .stand-zeile { display: flex; flex-wrap: wrap; gap: 6px; }
  .btn.gefahr { color: var(--warn); }
  /* Zum Weiterlesen: Karten für Artikel und Studien */
  .lese-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
  .lese-karte { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: border-color .12s, transform .12s; }
  .lese-karte:hover, .lese-karte:focus-visible { border-color: var(--accent); outline: none; transform: translateY(-1px); }
  .lese-logo { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--surface-sunken); display: grid; place-items: center; font-weight: 800; color: var(--ink-muted); overflow: hidden; }
  .lese-logo img { position: absolute; inset: 8px; width: 24px; height: 24px; background: var(--surface-sunken); }
  .lese-text { flex: 1; display: grid; gap: 4px; min-width: 0; }
  .lese-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-muted); letter-spacing: .02em; }
  .lese-sprache { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink-body); }
  .lese-karte b { font-size: 15px; line-height: 1.35; color: var(--ink); }
  .lese-satz { font-size: 13.5px; line-height: 1.5; color: var(--ink-body); }
  .lese-pfeil { color: var(--ink-muted); margin-top: 2px; }
  .lese-karte:hover .lese-pfeil { color: var(--accent); }
  .lk-optional { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-muted); }
  .btn.nur-icon { padding: 0; width: 42px; justify-content: center; }
  /* Gerätekarten: Funktionsskizzen nach dem EVA-Prinzip */
  .dialog.breit { width: 760px; max-height: calc(100vh - 32px); overflow: auto; }
  .gk-liste { display: grid; gap: 12px; justify-items: start; }
  .gk-liste > .gk-karte { justify-self: stretch; }
  .gk-karte { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); padding: 14px 16px; display: grid; gap: 8px; max-width: 760px; }
  .gk-kopf { display: flex; align-items: center; gap: 12px; }
  .gk-emoji { font-size: 26px; line-height: 1; }
  .gk-titel { flex: 1; display: grid; }
  .gk-titel b { font-size: 16px; }
  .gk-titel small, .gk-l small { font-size: 12px; color: var(--ink-muted); font-weight: 500; }
  .gk-zeile { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 14px; }
  .gk-l { display: grid; font-weight: 700; font-size: 13px; }
  .gk-v .leer { color: var(--ink-faint); }
  .gk-schritte, .gk-edit-schritte { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: gk; }
  .gk-schritte li, .gk-edit-schritte li { display: flex; align-items: center; gap: 8px; }
  .gk-schritte li::before, .gk-edit-schritte li:not(.leer)::before { counter-increment: gk; content: counter(gk) "."; font-size: 12px; font-weight: 700; color: var(--ink-muted); width: 16px; }
  .gk-b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-sunken); flex-shrink: 0; }
  .gk-edit-schritte .feld { flex: 1; min-width: 0; }
  .gk-bausteine { display: flex; flex-wrap: wrap; gap: 6px; }
  .gk-baustein { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-md); padding: 5px 9px; font-size: 13px; cursor: pointer; color: inherit; }
  .gk-baustein:hover, .gk-baustein:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
  .gk-form { display: grid; gap: 14px; }
  .gk-reihe { display: flex; gap: 12px; flex-wrap: wrap; }
  .gk-emoji-feld { width: 72px; }
  .gk-emoji-feld .feld { text-align: center; font-size: 20px; }
  .zeichnung .kasten-link { font-size: 11px; font-weight: 800; fill: var(--accent); cursor: pointer; }
  .zeichnung .karte-neu:hover .kasten-link, .zeichnung .karte-neu:focus .kasten-link { text-decoration: underline; }
  .zeichnung .karte-klick { cursor: pointer; }
  @media (max-width: 640px) { .gk-zeile { grid-template-columns: 1fr; gap: 2px; } }
  .gk-karte.schmal { border: 0; padding: 0; background: none; }
  .gk-karte.schmal .gk-zeile { grid-template-columns: 1fr; gap: 4px; }
  .gk-karte.schmal .gk-l { display: flex; align-items: baseline; gap: 6px; }
  .gk-karte.schmal .gk-titel b { font-size: 19px; }
  .gk-karte.schmal .gk-emoji { font-size: 32px; }
  .geraete-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; justify-self: stretch; }
  .geraet-zeile { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line-soft); background: var(--surface); border-radius: var(--radius-lg); padding: 9px 12px; cursor: pointer; color: inherit; font: inherit; }
  .geraet-zeile:hover, .geraet-zeile:focus-visible { border-color: var(--accent); outline: none; }
  .geraet-zeile .bt-text { flex: 1; display: grid; }
  .geraet-zeile .bt-text small { font-size: 12px; color: var(--ink-muted); }
  .geraet-zeile .ding-emoji { font-size: 20px; }
  .zeile-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
  .btn.gefahr:hover { background: var(--warn-soft); border-color: var(--warn); }
  .dialog.breit { width: 620px; }
  .dialog-scroll { max-height: min(62vh, 640px); overflow: auto; padding-right: 4px; }

  /* ---------- Zimmer: Grundriss von oben ---------- */
  .grundriss-flaeche { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); padding: 18px 18px 22px; }
  .grundriss { --zeile: 96px; display: grid; grid-template-columns: 96px minmax(0, 1fr) 190px; gap: 0 14px; align-items: start; }
  .laufweg { display: grid; grid-template-rows: 44px auto auto; justify-items: center; }
  .lw-titel { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); text-align: center; line-height: 1.3; align-self: end; padding-bottom: 12px; }
  .lw-titel.unten { align-self: start; padding: 10px 0 0; }
  .lw-achse { position: relative; display: grid; grid-template-rows: repeat(var(--zeilen), var(--zeile)); gap: 8px; padding: 22px 0; width: 100%; justify-items: center; align-items: center; }
  .lw-achse::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dotted var(--ink-faint); }
  .lw-punkt { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink-faint); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--ink-muted); }
  .raum-spalte { position: relative; display: grid; grid-template-rows: 44px auto 44px; min-width: 0; }
  .tuer-schild { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-strong); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .tuer-schild:hover, .tuer-schild:focus-visible { background: var(--accent); color: var(--ink-inverse); outline: none; }
  .tuer-schild.oben { justify-self: center; align-self: start; }
  .raum { position: relative; background: var(--parkett); border: 8px solid var(--mauer); border-radius: 4px; padding: 14px; }
  .raum::before { content: ""; position: absolute; inset: 2px; border: 2px solid color-mix(in srgb, var(--mauer) 25%, transparent); pointer-events: none; border-radius: 2px; }
  .tuer-luecke { position: absolute; width: 80px; height: 8px; background: var(--tuer); }
  .tuer-luecke.oben { top: -8px; left: calc(50% - 40px); }
  .tuer-luecke.rechts { right: -8px; width: 8px; height: 56px; }
  .melder { position: absolute; top: -17px; left: calc(50% + 48px); width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; z-index: 1; }
  .kapsel { position: absolute; bottom: -8px; left: 50%; width: 30px; height: 8px; margin-left: -15px; background: var(--kapsel); border-radius: 4px; font-size: 0; }
  .kapsel.gewaehlt { box-shadow: 0 0 0 3px var(--accent); }
  .raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(var(--zeilen), var(--zeile)); gap: 8px; }
  .gegenstand { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: var(--radius-lg); background: var(--gegenstand); border: 1px solid var(--gegenstand-linie); box-shadow: var(--shadow-raised); cursor: pointer; color: var(--ink); text-align: center; transition: border-color .12s, box-shadow .12s; }
  .gegenstand:hover, .gegenstand:focus-visible { border-color: var(--accent); outline: none; }
  .gegenstand.g-schalter { background: var(--surface); border-radius: var(--radius-xl); border: 1px solid var(--line); box-shadow: 0 2px 0 var(--gegenstand-linie); padding: 6px; }
  .gegenstand.g-schalter .g-emoji { font-size: 19px; }
  .gegenstand.g-schalter .g-name { font-size: 11.5px; }
  .gegenstand.g-technik { background: transparent; border: 1.5px dashed var(--gegenstand-linie); box-shadow: none; padding: 6px; }
  .gegenstand.g-technik .g-name { font-size: 11.5px; color: var(--ink-body); }
  .gegenstand .g-emoji { font-size: 22px; line-height: 1.1; }
  .gegenstand .g-name { font-size: 12.5px; font-weight: 700; line-height: 1.25; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .gegenstand .g-fach { font-size: 10.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .gegenstand.schmal .g-fach { display: none; }
  .gegenstand.gewaehlt { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
  .gegenstand.gewaehlt .g-fach { color: var(--accent-strong); font-weight: 700; }
  .ecke { position: absolute; width: 10px; height: 10px; border: 2px solid var(--accent); background: var(--surface); border-radius: 3px; }
  .ecke.lo { left: -6px; top: -6px; } .ecke.ro { right: -6px; top: -6px; } .ecke.lu { left: -6px; bottom: -6px; } .ecke.ru { right: -6px; bottom: -6px; }
  .freie-flaeche { display: flex; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--parkett-linie); border-radius: var(--radius-lg); background: transparent; color: color-mix(in srgb, var(--parkett-linie) 70%, var(--ink)); font-size: 12.5px; font-weight: 700; cursor: pointer; }
  .freie-flaeche.still { cursor: default; opacity: .6; }
  .freie-flaeche .plus { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--parkett-linie); display: inline-flex; align-items: center; justify-content: center; }
  .freie-flaeche[data-r]:hover { border-color: var(--accent); color: var(--accent-strong); }
  .rohrpost-unten { display: flex; justify-content: center; padding-top: 8px; }
  .keine-tuer { display: block; padding: 22px 0 0 4px; font-size: 12px; color: var(--ink-faint); }
  .rohrpost-knopf { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; align-items: center; gap: 2px 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; color: var(--ink); }
  .rohrpost-knopf .g-emoji { font-size: 18px; }
  .tueren-spalte { display: grid; grid-template-rows: 44px auto; min-width: 0; }
  .ts-titel { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); align-self: end; padding-bottom: 12px; line-height: 1.3; }
  .ts-achse { display: grid; grid-template-rows: repeat(var(--zeilen), var(--zeile)); gap: 8px; padding: 22px 0; align-content: start; }
  .ts-zeile { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
  .tuer-schild.rechts { height: auto; min-height: 32px; padding: 5px 9px; gap: 6px; white-space: normal; text-align: left; line-height: 1.2; max-width: 100%; }
  .tuer-schild.rechts .ts-name { display: grid; min-width: 0; flex: 1; overflow-wrap: break-word; }
  .tuer-schild.rechts small { font-size: 10.5px; font-weight: 600; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gegenstand .g-tuer { position: absolute; top: 5px; right: 6px; font-size: 12px; opacity: .85; }
  .rohrpost-knopf b { font-size: 13px; } .rohrpost-knopf small { font-size: 11px; color: var(--ink-muted); }
  .rohrpost-knopf:hover, .rohrpost-knopf.gewaehlt { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  @media (max-width: 1250px) { .grundriss { grid-template-columns: 56px minmax(0, 1fr); } .tueren-spalte { grid-column: 2; grid-template-rows: auto auto; padding-top: 12px; } .ts-titel { padding-bottom: 6px; } .ts-achse { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; } .ts-zeile { flex-direction: row; flex-wrap: wrap; } .keine-tuer { padding: 0; } .lw-titel { display: none; } .laufweg { grid-template-rows: 44px auto; } }
  @media (max-width: 700px) { .grundriss { grid-template-columns: minmax(0, 1fr); --zeile: 84px; } .laufweg { display: none; } .tueren-spalte { grid-column: 1; } .raster { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; } .gegenstand .g-fach { display: none; } }
  .schrittliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .schrittliste li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-lg); background: var(--surface-sunken); font-size: 13.5px; line-height: 1.5; color: var(--ink-body); }
  .schrittliste .nr { width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--ink-inverse); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
  .schrittliste b { color: var(--ink); }
  .katalog-gruppe { display: grid; gap: 8px; }
  .katalog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .katalog-ding { display: grid; justify-items: center; gap: 3px; padding: 9px 3px 8px; letter-spacing: -.01em; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; color: var(--ink); font-size: 11.5px; min-width: 0; }
  .katalog-ding b { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .katalog-ding .g-emoji { font-size: 19px; }
  .katalog-ding:hover, .katalog-ding:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
  #zi-katalog.blitz { box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-raised); border-color: var(--accent); }
  .stepper-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .stepper-feld { display: grid; gap: 6px; }
  .stepper { display: flex; align-items: center; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
  .stepper button { width: 40px; height: 100%; border: 0; background: var(--surface); cursor: pointer; color: var(--ink-body); display: inline-flex; align-items: center; justify-content: center; }
  .stepper button:hover { background: var(--surface-sunken); }
  .stepper button[disabled] { opacity: .35; cursor: default; }
  .stepper span { flex-grow: 1; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
  .zeile-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
  .zettel-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
  .zettel-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 5px 5px 10px; border-radius: 4px; background: var(--f); color: #1B1B1B; font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
  .zettel-knoepfe { display: inline-flex; gap: 2px; }
  .zettel-knoepfe button { border: 0; background: rgba(255,255,255,.65); border-radius: 5px; cursor: pointer; padding: 2px 5px; font-size: 13px; }
  .zettel-knoepfe button:hover { background: #fff; }

  /* Zeiger: Auto mit Avatar */
  #cursor { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 50; display: none; transition: transform .08s linear; }
  @media (pointer: fine) { #cursor.on { display: block; } }
  #cursor .fahrzeug { font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); display: block; transform: scaleX(-1); }
  #cursor.fuss .fahrzeug { transform: none; font-size: 40px; }
  #cursor.hand .fahrzeug { font-size: 36px; }
  #cursor.hand .av { top: -18px; }
  #cursor .av { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); display: grid; place-items: center; font-size: 18px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
  #cursor .av img { width: 100%; height: 100%; object-fit: cover; }
  /* Schmale Bildschirme: Stadtplan und Schnitt bleiben lesbar und lassen sich seitlich schieben */
  @media (max-width: 900px) {
    .karte-flaeche, .schnitt-flaeche { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .karte-flaeche .karte-svg { min-width: 860px; }
    .schnitt-flaeche .zeichnung.schnitt { min-width: 820px; }
    .seiten-kopf .btn { flex: 1 1 auto; }
  }

/* Der gewählte Pfad in der Übersicht (Kapitel 6, Auswahl pfad) */
.tag-spalte.euer-pfad .tag-marke { color: var(--accent); }
.pfad-hinweis { display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 10px; padding: 3px 10px; border-radius: var(--radius-lg, 10px); background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 700; }

/* Große Antwortfelder (eingefügte Antworten des Auftragnehmers) und die Erkennung darunter */
textarea.feld.antwort.gross { min-height: 340px; font-size: 14px; line-height: 1.5; resize: vertical; }
.erkennung { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface-2, var(--accent-soft)); font-size: 14px; color: var(--ink-body); }
.erkennung b { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.erkennung ol { margin: 6px 0 0; padding-left: 20px; } .erkennung .leer { color: var(--ink-muted); }
/* Wahlkarten, die es noch nicht gibt: grau, nicht wählbar */
.optionen.wahl-karten label.wahl-karte.bald { opacity: .55; filter: grayscale(1); border-style: dashed; cursor: not-allowed; }
.wahl-karte .wk-chip { font-size: 11.5px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 2px 8px; }
.stelle-karte.bald { opacity: .55; filter: grayscale(1); border-style: dashed; }

/* Wege des Stadtplaners (Kapitel 6, 10, 18): Karten über der Bewertung, kurze Spaltenköpfe, sein Vorschlag grau */
.weg-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.weg-karte { padding: 12px 14px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.weg-karte.empfohlen { border: 2px solid var(--accent); padding: 11px 13px; }
.weg-karte .wk-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .weg-karte .wk-kopf b { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.weg-karte .wk-nr { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; font-size: 12px; }
.weg-karte .wk-stern { font-size: 11.5px; font-weight: 700; color: var(--accent-strong); }
.weg-karte .wk-art { font-size: 15px; } .weg-karte .wk-art span { font-size: 12.5px; color: var(--ink-muted); }
.weg-karte .wk-zeile { display: flex; flex-direction: column; line-height: 1.35; } .weg-karte .wk-zeile small { color: var(--ink-muted); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.bw-kopf { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; } .bw-kopf .bw-emo { font-size: 16px; letter-spacing: 0; text-transform: none; }
.bw-sein { display: block; font-size: 10.5px; color: var(--ink-muted); }
.bw-vorschlag { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13.5px; color: var(--ink-body); }

/* Eingefügte Antwort als Dokument (frage mit dokument: true) */
.dok-feld { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .dok-feld textarea { width: 100%; min-height: 360px; }
.antwort-dok { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); overflow: hidden; }
.antwort-dok .dok-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); background: var(--accent-soft); }
.antwort-dok .dok-inhalt { max-height: 560px; overflow: auto; padding: 18px 26px 22px; font-size: 15px; line-height: 1.6; color: var(--ink-body); max-width: none; }
.antwort-dok .dok-inhalt h3, .antwort-dok .dok-inhalt h4, .antwort-dok .dok-inhalt h5 { font-family: var(--font-display); color: var(--ink); margin: 18px 0 6px; } .antwort-dok .dok-inhalt h3 { font-size: 19px; } .antwort-dok .dok-inhalt h4 { font-size: 16.5px; }
.antwort-dok .dok-inhalt p, .antwort-dok .dok-inhalt ul, .antwort-dok .dok-inhalt ol { margin: 0 0 10px; } .antwort-dok .dok-inhalt table { font-size: 13.5px; }

.weg-marke { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; font-size: 12px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.weg-karte .wk-kopf { flex-direction: column; align-items: flex-start; gap: 6px; }
.bw-kopf .bw-stern { font-size: 12px; }
.weg-empfehlung { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.bw-kopf-zeile { display: inline-flex; align-items: center; gap: 4px; }
.antwort-dok .dok-inhalt table { border-collapse: collapse; margin: 4px 0 12px; } .antwort-dok .dok-inhalt th, .antwort-dok .dok-inhalt td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.antwort-dok .dok-inhalt pre.code { max-width: 100%; overflow: auto; }
.dok-block { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: 13.5px; }

/* Übersetzungstabelle mit Logos und Gruppen (Kapitel 7) */
table.ue-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
table.ue-tabelle thead th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; vertical-align: bottom; }
table.ue-tabelle th.ue-anbieter { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); width: 17%; } table.ue-tabelle th.ue-anbieter span { display: block; margin-top: 4px; font-family: var(--font-display); }
table.ue-tabelle th.ue-anbieter .anbieter-logo { width: 26px; height: 26px; border-radius: var(--radius-sm); }
table.ue-tabelle tr.ue-gruppe th { text-align: left; padding: 16px 12px 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-strong); border-bottom: 1px solid var(--line-soft); }
table.ue-tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } table.ue-tabelle td.ue-teil { font-weight: 700; color: var(--ink); white-space: nowrap; } table.ue-tabelle td.ue-was { color: var(--ink-muted); width: 26%; }
table.ue-tabelle tr.ue-hervor td { background: var(--accent-soft); } table.ue-tabelle tr.ue-hervor td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } table.ue-tabelle tr.ue-hervor td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Ablaufbild (Kapitel 7): Knoten mit Pfeilen, Weiche mit Nein-Ast, Fehlerast, Lauf mit wanderndem Punkt */
.ablauf-bild { margin: 18px 0 6px; padding: 22px 18px 16px; border-radius: var(--radius-2xl); background: var(--accent-soft); background-image: radial-gradient(color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px); background-size: 16px 16px; }
.ab-flaeche { display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: 18px; justify-content: center; }
.ab-knoten-spalte { display: flex; flex-direction: column; align-items: center; width: 112px; }
.ab-knoten { width: 112px; min-height: 128px; padding: 12px 10px 10px; border-radius: var(--radius-xl); background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow-raised); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.ab-knoten .ab-emoji { font-size: 26px; line-height: 1.1; } .ab-knoten b { font-size: 13.5px; line-height: 1.25; color: var(--ink); } .ab-knoten small { font-size: 12px; color: var(--ink-muted); }
.ab-teil { margin-top: auto; padding-top: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-strong); }
.ab-knoten.aktiv { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.ab-pfeil { position: relative; width: 70px; height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ab-pfeil::before { content: ""; position: absolute; left: 4px; right: 10px; top: 50%; border-top: 2px solid var(--ink-muted); opacity: .55; }
.ab-pfeil::after { content: ""; position: absolute; right: 4px; top: calc(50% - 5px); border-left: 8px solid var(--ink-muted); border-top: 5px solid transparent; border-bottom: 5px solid transparent; opacity: .55; }
.ab-pfeil .ab-punkt { position: absolute; left: 4px; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--accent); opacity: 0; }
.ab-pfeil.aktiv .ab-punkt { animation: ab-wandern .65s ease-in-out forwards; }
@keyframes ab-wandern { 0% { left: 4px; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 18px); opacity: 0; } }
.ab-pfeil .ab-menge { position: absolute; left: 0; right: 0; top: calc(50% + 9px); font-size: 10.5px; z-index: 1; font-weight: 700; color: var(--accent-strong); text-align: center; line-height: 1.2; opacity: 0; transition: opacity .3s; }
.ab-pfeil.gezeigt .ab-menge, .ablauf-bild.fertig .ab-menge { opacity: 1; }
.ab-nein { display: flex; flex-direction: column; align-items: center; font-size: 11.5px; color: var(--ink-muted); text-align: center; opacity: .45; transition: opacity .3s; } .ab-nein.gezeigt { opacity: 1; }
.ab-nein-linie { width: 0; height: 16px; border-left: 2px solid var(--ink-muted); opacity: .5; }
.ab-fehler { display: flex; flex-direction: column; align-items: center; opacity: .55; transition: opacity .3s; }
.ab-fehler-linie { width: 0; height: 18px; border-left: 2px dashed var(--warn); }
.ab-fehler-karte { width: 140px; padding: 10px; border-radius: var(--radius-lg); border: 2px dashed var(--warn); background: var(--surface); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; font-size: 12.5px; }
.ab-fehler-karte b { color: var(--ink); font-size: 13px; } .ab-fehler-ziel { color: var(--ink-body); } .ab-fehler-karte .ab-teil { color: var(--warn); }
.ablauf-bild.fehler .ab-fehler { opacity: 1; } .ablauf-bild.fehler .ab-fehler-karte { box-shadow: 0 6px 18px color-mix(in srgb, var(--warn) 30%, transparent); }
.ab-knoepfe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; } .ab-knoepfe .hint { flex-basis: 100%; text-align: center; margin: 0; min-height: 1.2em; }
@media (prefers-reduced-motion: reduce) { .ab-pfeil.aktiv .ab-punkt { animation: none; } }

.bw-logo .anbieter-logo { width: 22px; height: 22px; border-radius: var(--radius-sm); } .weg-karte .wk-logo .anbieter-logo { width: 30px; height: 30px; border-radius: var(--radius-sm); }
.sk-logo .anbieter-logo { width: 26px; height: 26px; border-radius: var(--radius-sm); }

.sk-logo:empty, .bw-logo:empty, .wk-logo:empty { display: none; }

/* Gesuch an den Makler (Kapitel 7) */
.gesuch { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.gs-spalte { display: grid; gap: 18px; }
.gs-teil { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--radius-xl); background: var(--surface-sunken); border: 1px solid var(--line-soft); }
.gs-teil h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.gs-nr { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--ink-inverse); font-size: 12.5px; font-weight: 800; }
.gs-hinweis { color: var(--ink-muted); font-size: 12.5px; line-height: 1.45; }
.gs-punkte { display: grid; gap: 2px; }
.gs-punkt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 8px; border-radius: var(--radius-md); }
.gs-punkt.pflicht { background: var(--accent-soft); }
.gs-punkt.egal .gs-label { color: var(--ink-muted); }
.gs-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; color: var(--ink-body); min-width: 0; }
.gs-label .anbieter-logo { width: 16px; height: 16px; flex: none; }
.gs-emoji { font-size: 15px; }
.gs-weg { border: 0; background: none; color: var(--ink-muted); cursor: pointer; padding: 2px; display: inline-flex; }
.gs-stufen { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.gs-stufen button { border: 0; background: none; padding: 5px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.gs-stufen button + button { border-left: 1px solid var(--line-soft); }
.gs-stufen button.an[data-stufe="pflicht"] { background: var(--accent); color: var(--ink-inverse); }
.gs-stufen button.an[data-stufe="wunsch"] { background: var(--accent-soft); color: var(--accent-strong); }
.gs-stufen button.an[data-stufe="egal"] { background: var(--surface-sunken); color: var(--ink); }
.gs-neu { display: flex; gap: 8px; } .gs-neu .feld { flex: 1; min-width: 0; }
.gs-frage { display: grid; gap: 6px; } .gs-frage > small { font-size: 12.5px; font-weight: 700; color: var(--ink-muted); }
.gs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-body); cursor: pointer; }
.gs-chip small { font-weight: 400; color: var(--ink-muted); }
.gs-chip.an { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.gs-chip .anbieter-logo { width: 14px; height: 14px; }
.gs-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.gs-ergebnis textarea { font-size: 13.5px; line-height: 1.5; }
.gs-hand { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--offen-strong); }
.gs-hand[hidden] { display: none; }
@media (max-width: 900px) { .gesuch { grid-template-columns: 1fr; } .gs-punkt { flex-wrap: wrap; } }

.profil label.prof-check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--ink-body); }

/* Aufgabe mit Anleitung als ganze Folie: nummerierte Schritte, das Häkchen am Ende */
.anleitung { display: grid; gap: 10px; }
.al-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.al-schritt { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius-xl); background: var(--surface-sunken); border: 1px solid var(--line-soft); }
.al-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--ink-inverse); font-weight: 800; font-size: 14px; margin-top: 1px; }
.al-inhalt { display: grid; gap: 6px; min-width: 0; }
.al-titel { font-family: var(--font-display); font-size: 15.5px; color: var(--ink); }
.al-inhalt .md p { margin: 0; }
.al-bild img { display: block; max-width: min(100%, 560px); border-radius: var(--radius-lg); border: 1px solid var(--line-soft); box-shadow: var(--shadow-raised); margin-top: 4px; }
.al-haken { margin-top: 4px; }
.al-schritt { padding: 12px 16px; } .al-inhalt .md { font-size: 15px; line-height: 1.5; }
@media (min-width: 1100px) { .al-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tb-e .tb-wahl { display: block; margin-top: 2px; font-weight: 400; color: var(--ink-muted); }

/* Bestellschein (Kapitel 9): eine Spec als Formular */
.bestellschein { margin-top: 22px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-raised); overflow: hidden; }
.bs-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 2px solid var(--line); background: var(--surface-sunken); }
.bs-kopf h3 { margin: 4px 0 0; font-family: var(--font-display); font-size: 19px; color: var(--ink); }
.bs-meta { display: flex; gap: 18px; flex-wrap: wrap; margin: 0; }
.bs-meta div { display: grid; gap: 1px; } .bs-meta dt { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } .bs-meta dd { margin: 0; font-size: 13.5px; color: var(--ink-body); }
.bs-teil { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 16px; padding: 12px 22px; border-bottom: 1px dashed var(--line-soft); }
.bs-teil:last-child { border-bottom: 0; }
.bs-teil.bs-was { background: var(--accent-soft); }
.bs-name { display: flex; gap: 10px; align-items: flex-start; }
.bs-name > span:last-child { display: grid; gap: 1px; }
.bs-name b { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.bs-name small { font-size: 12px; color: var(--ink-muted); }
.bs-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-muted); font-size: 12px; font-weight: 800; color: var(--ink-muted); margin-top: 1px; }
.bs-wechselt { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--accent-strong); }
.bs-inhalt { display: grid; gap: 6px; align-content: start; }
.bs-bsp { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); font-style: italic; }
.bs-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 0; }
.bs-felder dt { font-size: 12px; font-weight: 700; color: var(--accent-strong); } .bs-felder dd { margin: 0; font-size: 14px; color: var(--ink-muted); font-style: italic; }
.bs-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bs-haken li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-muted); font-style: italic; }
.bs-box { flex: none; width: 14px; height: 14px; border: 1.5px solid var(--ink-muted); border-radius: 3px; margin-top: 3px; }
.bs-frage { justify-self: start; font-size: 12.5px; font-weight: 600; color: var(--ink-body); background: var(--surface-sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 3px 9px; }
.bs-teil.bs-was .bs-frage { background: var(--surface); }
@media (max-width: 760px) { .bs-teil { grid-template-columns: 1fr; gap: 6px; } .bs-felder { grid-template-columns: 1fr; } }

/* Bild zum Aufklappen */
.bild-klappe { margin-top: 4px; } .bild-klappe summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-strong); }
.bild-klappe img { display: block; max-width: min(100%, 560px); margin-top: 8px; border-radius: var(--radius-lg); border: 1px solid var(--line-soft); box-shadow: var(--shadow-raised); }
.rechts .bild-klappe { padding: 12px 16px; border-radius: var(--radius-xl); background: var(--surface-sunken); border: 1px solid var(--line-soft); }
/* Rechte einsortieren */
.rechte { display: grid; gap: 4px; }
.rt-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 9px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line-soft); }
.rt-zeile.ok { background: var(--ok-soft); border-color: transparent; }
.rt-zeile.anders { background: var(--offen-soft); border-color: transparent; }
.rt-name { display: grid; gap: 1px; } .rt-name b { font-size: 14.5px; color: var(--ink); } .rt-name small { font-size: 12.5px; color: var(--ink-muted); }
.rt-auf { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.45; color: var(--ink-body); }
.rt-empf { font-weight: 700; margin-right: 4px; }
.rt-zeile.ok .rt-empf { color: var(--ok-strong); } .rt-zeile.anders .rt-empf { color: var(--offen-strong); }
.rt-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 760px) { .rt-zeile { grid-template-columns: 1fr; } }