:root {
  --bg: #ECE8E1; --panel: #FBFAF7; --paper: #FFFDF9; --ink: #211D18; --muted: #6C6459; --line: #DAD2C5;
  --grid: #EEE8DF; --grid2: #DDD4C6; --accent: #E4601B; --accent-ink: #FFFFFF; --accent-soft: #FCE7DA;
  --wall: #2B2621; --room: #FFFDF9; --room-sel: #FFF3EA; --danger: #C3352C; --ok: #2F7A4D; --shadow: 0 1px 2px rgba(40,28,14,.08), 0 6px 20px rgba(40,28,14,.07);
  --f-wohnen: #DCE5EC; --f-schlafen: #E7DFEE; --f-kueche: #E1ECD8; --f-arbeit: #F1E6D0; --f-kind: #F5DDDA; --f-bad: #D9ECEC; --f-sonst: #E4E1DC; --f-bau: #FFFFFF;
  --accent-strong: #9E350A; --on-strong: #FFFFFF; --accent-text: #9E350A; --field: #857B6E; --focus: #9E350A; --on-ok: #FFFFFF; --chip-hint: #9A5E05;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12100E; --panel: #1B1815; --paper: #1F1C18; --ink: #F0EBE3; --muted: #A59C8F; --line: #36302A;
    --grid: #26221E; --grid2: #332E28; --accent: #F2743A; --accent-ink: #1A0F08; --accent-soft: #3A2417;
    --wall: #E6DED2; --room: #221F1B; --room-sel: #33261C; --danger: #F0685E; --ok: #5DBB82; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    --f-wohnen: #2B3640; --f-schlafen: #362F40; --f-kueche: #2E3A2A; --f-arbeit: #3D3526; --f-kind: #432D2B; --f-bad: #263B3B; --f-sonst: #34312D; --f-bau: #1F1C18;
    --accent-strong: #F2743A; --on-strong: #1A0F08; --accent-text: #F2743A; --field: #86796B; --focus: #F2743A; --on-ok: #0E1A12; --chip-hint: #F0B35A;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12100E; --panel: #1B1815; --paper: #1F1C18; --ink: #F0EBE3; --muted: #A59C8F; --line: #36302A;
  --grid: #26221E; --grid2: #332E28; --accent: #F2743A; --accent-ink: #1A0F08; --accent-soft: #3A2417;
  --wall: #E6DED2; --room: #221F1B; --room-sel: #33261C; --danger: #F0685E; --ok: #5DBB82; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  --f-wohnen: #2B3640; --f-schlafen: #362F40; --f-kueche: #2E3A2A; --f-arbeit: #3D3526; --f-kind: #432D2B; --f-bad: #263B3B; --f-sonst: #34312D; --f-bau: #1F1C18;
  --accent-strong: #F2743A; --on-strong: #1A0F08; --accent-text: #F2743A; --field: #86796B; --focus: #F2743A; --on-ok: #0E1A12; --chip-hint: #F0B35A;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: .9375rem/1.5 var(--body); overflow: hidden; }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

.app { height: 100%; display: grid; grid-template-rows: auto 1fr; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0; }
.top img { height: 30px; width: auto; flex: none; }
.top h1 { margin: 0; font: 700 1.35rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.top h1 span { color: var(--muted); font-weight: 600; }
.top .grow { flex: 1; }
.tbtn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 8px 12px; font-size: .9rem; white-space: nowrap; }
a.tbtn { color: var(--ink); }
.tbtn:hover { border-color: var(--accent); }
.tbtn:disabled, .tbtn[aria-disabled="true"] { opacity: .55; cursor: default; }
.tbtn[aria-disabled="true"]:hover { border-color: var(--line); }
.tbtn svg { width: 16px; height: 16px; }
.tbtn.primary { background: var(--accent-strong); color: var(--on-strong); border-color: var(--accent-strong); font-weight: 600; }

.main { min-height: 0; display: grid; grid-template-columns: clamp(290px, 18rem, 34vw) minmax(0, 1fr) clamp(290px, 18rem, 34vw); }
.side { background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; min-height: 0; }
.side--r { border-right: 0; border-left: 1px solid var(--line); }
.tabs { display: none; }
.sec { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.sec h2 { margin: 0; font: 700 .95rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hint { margin: 0; font-size: .85rem; color: var(--muted); }

.plan { position: relative; min-height: 0; min-width: 0; background: var(--paper); overflow: hidden; }
#svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#svg.panning { cursor: grabbing; }
.zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.zoom button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); font: 700 1.2rem/1 var(--display); display: grid; place-items: center; }
.zoom button svg { width: 18px; height: 18px; }
.scale { position: absolute; left: 12px; bottom: 12px; font: 600 .8rem/1 var(--body); color: var(--muted); display: flex; flex-direction: column; gap: 4px; pointer-events: none; font-variant-numeric: tabular-nums; }
.scale i { display: block; height: 6px; border: 2px solid var(--muted); border-top: 0; }
.status { position: absolute; left: 12px; top: 12px; right: 60px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.chip { font-size: .8rem; padding: 4px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.chip b { font-weight: 600; }
.chip--warn { border-color: var(--danger); color: var(--danger); }
.chip--ok { border-color: var(--ok); color: var(--ok); }

/* Räume */
.rooms { display: grid; gap: 6px; }
.roomrow { min-height: 44px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); text-align: left; }
.roomrow[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.roomrow small { color: var(--muted); font-variant-numeric: tabular-nums; }
.addroom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.addroom .full { grid-column: 1 / -1; }
.field { display: grid; gap: 3px; font-size: .8rem; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--field); border-radius: 7px; background: var(--paper); color: var(--ink); font-size: .95rem; }
.field textarea { min-height: 70px; resize: vertical; }
.tpl { display: flex; flex-wrap: wrap; gap: 6px; }

/* Katalog */
.search { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--field); color: var(--ink); border-radius: 8px; background: var(--paper); }
.cat h3 { margin: 6px 0 6px; font: 700 .85rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.item { display: grid; grid-template-rows: 44px auto; gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); text-align: center; font-size: .8rem; line-height: 1.5; }
.item:hover { border-color: var(--accent); }
.item svg { width: 100%; height: 44px; }
.item small { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Auswahl */
.selbox { display: grid; gap: 10px; }
.selhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.selhead strong { font: 700 1.25rem/1.1 var(--display); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; }
.tbtn.danger { color: var(--danger); }
.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .88rem; }
.list li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--line); padding-bottom: 3px; }
.list li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.warn { color: var(--danger); font-size: .85rem; margin: 0; }

/* Anfrage */
.req { display: grid; gap: 8px; }
.req fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 10px; margin: 0; display: grid; gap: 8px; }
.req legend { font: 700 .8rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: .88rem; }
.check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--accent-strong); }
.out { display: grid; gap: 8px; padding: 10px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent); }
.out textarea { width: 100%; min-height: 180px; font: .8rem/1.5 ui-monospace, Menlo, Consolas, monospace; padding: 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.out img { width: 100%; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.contact { font-size: .88rem; display: grid; gap: 2px; }
.contact b { user-select: all; }

/* SVG */
.g-grid { stroke: var(--grid); }
.g-grid2 { stroke: var(--grid2); }
.r-floor { fill: var(--room); }
.r-floor.sel { fill: var(--room-sel); }
.r-wall { fill: none; stroke: var(--wall); }
.r-name { fill: var(--ink); font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; paint-order: stroke; stroke: var(--room); stroke-linejoin: round; }
.r-area { fill: var(--muted); font-family: var(--body); font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--room); stroke-linejoin: round; }
.r-dim { fill: var(--accent-text); font-family: var(--body); font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.r-handle { fill: var(--accent); stroke: var(--paper); }
.it { stroke: var(--ink); }
.it .body { stroke-width: 1.4; }
.it .det { fill: none; stroke-width: .9; opacity: .7; }
.it .detf { stroke: none; fill: var(--ink); opacity: .18; }
.it.sel .body { stroke: var(--accent); stroke-width: 2.4; }
.it.bad .body { stroke: var(--danger); stroke-width: 2.2; stroke-dasharray: 5 3; }
.it-label { fill: var(--ink); font-family: var(--body); font-weight: 600; paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.c-wohnen { fill: var(--f-wohnen); } .c-schlafen { fill: var(--f-schlafen); } .c-kueche { fill: var(--f-kueche); }
.c-arbeit { fill: var(--f-arbeit); } .c-kind { fill: var(--f-kind); } .c-bad { fill: var(--f-bad); } .c-sonst { fill: var(--f-sonst); } .c-bau { fill: var(--f-bau); }
.it .punch { fill: var(--room); stroke: none; }
.sel-ring { fill: none; stroke: var(--accent); stroke-dasharray: 4 3; }


/* Freiraum vor Schränken & Co. */
.zone { fill: var(--accent); fill-opacity: .08; stroke: var(--accent); stroke-dasharray: 5 4; }
.zone--bad { fill: #E9A23B; fill-opacity: .22; stroke: #C47A0A; }
.chip--hint { border-color: #C47A0A; color: var(--chip-hint); }
.warn--hint { color: var(--chip-hint); }

/* Kalle, der Umzugshelfer */
.kalle { position: absolute; left: 10px; bottom: 34px; z-index: 5; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; max-width: calc(100% - 70px); }
.kalle > * { pointer-events: auto; }
.kalle__fig { position: relative; flex: none; width: 78px; height: 110px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 4px 8px rgba(40,28,14,.25)); transition: width .2s, height .2s; }
.kalle__fig svg { width: 100%; height: 100%; overflow: visible; }
.kalle__q { position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-strong); color: var(--on-strong); font: 700 14px/22px var(--display); display: none; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.kalle.is-min .kalle__q { display: block; }
.kalle.is-min .kalle__fig { width: 58px; height: 82px; }
.kalle__bubble { position: relative; margin-bottom: 44px; max-width: 330px; padding: 12px 14px 12px; border-radius: 14px 14px 14px 4px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .9rem; line-height: 1.5; animation: kpop .22s ease-out; }
.kalle.is-min .kalle__bubble { display: none; }
.kalle__name { margin: 0 34px 4px 0; font: 700 .72rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.kalle__text p { margin: 0 0 6px; }
.kalle__text p:last-child { margin-bottom: 0; }
.kalle__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kalle__btns:empty { display: none; }
.kalle__btns .tbtn { padding: 5px 10px; font-size: .85rem; }
.kalle__x { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; border-radius: 6px; }
.kalle__x:hover { color: var(--ink); background: var(--bg); }
.k-shadow { fill: rgba(40,28,14,.18); }
.k-pants { fill: #2D3440; } .k-shoe { fill: #1B1B1B; }
.k-jacket { fill: #F0641E; } .k-stripe { fill: #E8ECEF; opacity: .9; }
.k-badge { fill: #FFFFFF; } .k-badge-t { fill: #F0641E; font: 800 8px/1 var(--display); }
.k-collar { fill: none; stroke: #C84E12; stroke-width: 2.5; stroke-linejoin: round; }
.k-arm { fill: none; stroke: #F0641E; stroke-width: 11; stroke-linecap: round; }
.k-skin { fill: #F2C4A0; } .k-ink { fill: #2A2320; } .k-cheek { fill: #E88F7A; opacity: .45; }
.k-brow { fill: none; stroke: #6B4A32; stroke-width: 2.2; stroke-linecap: round; }
.k-stache { fill: #6B4A32; } .k-mouth { fill: none; stroke: #2A2320; stroke-width: 2; stroke-linecap: round; }
.k-cap { fill: #F0641E; } .k-brim { fill: #D4561A; } .k-cap-t { fill: #fff; font: 800 9px/1 var(--display); }
.k-body { animation: kbob 3.2s ease-in-out infinite; transform-origin: 60px 160px; }
.k-eyes { animation: kblink 4.6s infinite; transform-origin: 60px 46px; }
.k-wave { transform-origin: 88px 82px; }
.kalle.is-talk .k-wave { animation: kwave .5s ease-in-out 3; }
@keyframes kbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes kblink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes kwave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
@keyframes kpop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.pulse { animation: kpulse 1.2s ease-in-out 3; }
@keyframes kpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(228,96,27,0); } 50% { box-shadow: 0 0 0 5px rgba(228,96,27,.35); } }
@media (max-width: 860px) {
  .kalle { bottom: 30px; left: 6px; }
  .kalle__fig { width: 58px; height: 82px; }
  .kalle.is-min .kalle__fig { width: 46px; height: 64px; }
  .kalle__bubble { max-width: 250px; margin-bottom: 30px; font-size: .84rem; padding: 10px 12px; }
}
.tl-short { display: none; }
@media (max-width: 860px) {
  .tl-long { display: none; } .tl-short { display: inline; }
  .top h1 { font-size: .98rem; letter-spacing: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
  .top .grow { display: none; }
  .top .tbtn { padding: 6px 8px; }
  .top { flex-wrap: wrap; }
  .status { gap: 4px; right: 56px; }
  .chip { font-size: .72rem; padding: 3px 7px; }
  .chip--count { display: none; }
}
@media (prefers-reduced-motion: reduce) { .k-body, .k-eyes, .kalle.is-talk .k-wave, .kalle__bubble, .pulse { animation: none; } }


/* ===== Kundenführung ===== */
.app { grid-template-rows: auto auto 1fr; }
.steps { display: flex; gap: 4px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; }
.steps button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 0; background: none; padding: 7px 12px 7px 8px; border-radius: 999px; color: var(--muted); font: 600 .95rem/1 var(--body); white-space: nowrap; }
.steps button[aria-current="step"] { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent-strong); }
.st__n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; font: 700 .85rem/1 var(--display); }
.steps button[aria-current="step"] .st__n { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-strong); }
.steps button.done .st__n { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.app[data-mode="free"] .steps button { padding: 7px 14px; }
.stepnav { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 8px; padding: 10px 16px; background: var(--panel); border-top: 1px solid var(--line); }
.stepnav .primary { margin-left: auto; }
.pane-title { font: 700 1.35rem/1.1 var(--display) !important; letter-spacing: .01em !important; text-transform: none !important; color: var(--ink) !important; }
.lead { margin: 0; font-size: .95rem; }
.choices { display: grid; gap: 8px; }
.cc { display: grid; gap: 4px; width: 100%; min-height: 44px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); text-align: left; }
.cc:hover { border-color: var(--accent); }
.cc b { font: 700 1.05rem/1.2 var(--display); }
.cc span { font-size: .85rem; color: var(--muted); }
.cc.is-confirm { border-color: var(--danger); }
.cc__warn { color: var(--danger) !important; font-weight: 600; }
.tplrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tplrow .cc { text-align: center; padding: 10px 6px; }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tools button, .ptools button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: .88rem; text-align: left; }
.tools button[aria-pressed="true"], .ptools button[aria-pressed="true"] { border-color: var(--accent-strong); background: var(--accent-strong); color: var(--on-strong); }
.tools svg, .ptools svg { width: 20px; height: 20px; flex: none; }
.howto { margin: 0; padding-left: 1.1em; font-size: .85rem; color: var(--muted); display: grid; gap: 4px; }
details.more summary, details.help summary { cursor: pointer; font-size: .9rem; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 6px; }
details.more summary::before, details.help summary::before { content: "▸"; flex: none; }
details.more[open] > summary::before, details.help[open] > summary::before { content: "▾"; }
details.more summary::-webkit-details-marker, details.help summary::-webkit-details-marker { display: none; }
details.more summary { list-style: none; } details.help summary { list-style: none; }
details.more[open] summary { margin-bottom: 8px; }
/* Werkzeugleiste im Plan */
.ptools { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 4; }
.ptools button { width: 44px; height: 44px; padding: 0; justify-content: center; box-shadow: var(--shadow); background: var(--panel); }
.ptools button span { display: none; }
.drawbar { position: absolute; left: 12px; right: 64px; top: 12px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--accent); box-shadow: var(--shadow); font-size: .88rem; }
.drawbar span { flex: 1 1 180px; }
body.is-drawing .status { display: none; }
.selbar { position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 24px); padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .88rem; white-space: nowrap; }
.selbar b { overflow: hidden; text-overflow: ellipsis; max-width: 14em; }
.selbar span { color: var(--muted); font-variant-numeric: tabular-nums; }
.selbar button { min-width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--bg); font-size: 1.05rem; }
.selbar button.danger { color: var(--danger); }
.selbar button.more { padding: 0 14px; font-size: .88rem; font-weight: 600; background: var(--accent-soft); color: var(--ink); }
.selbar b { min-width: 0; }
.selnav { display: none; }
#svg.tool-draw { cursor: crosshair; }
/* Grundriss-Elemente */
.f-wall { stroke: var(--wall); stroke-linecap: square; }
.f-wall.sel { stroke: var(--accent); }
.f-wall-hit { stroke: transparent; stroke-linecap: round; }
.h-vtx { fill: var(--accent-strong); stroke: var(--paper); cursor: move; }
.h-mid circle { fill: var(--paper); stroke: var(--accent); }
.h-mid path { stroke: var(--accent); }
.h-mid { cursor: copy; }
.h-start { fill: none; stroke: var(--accent); stroke-dasharray: 3 2; }
.h-pt { fill: var(--accent); }
.h-cross { fill: var(--accent-soft); stroke: var(--accent); }
.g-wall { stroke: var(--accent); stroke-opacity: .55; stroke-linecap: square; }
.g-room { fill: var(--accent); fill-opacity: .08; stroke: var(--accent); stroke-opacity: .6; }
.it .det--solid { opacity: 1; }

/* Desktop: Assistent zeigt einen Schritt, frei zeigt alles untereinander */
[data-pane] { display: none; }
[data-pane].on { display: block; }
.app[data-mode="free"] #sideL [data-pane]:not([data-pane="start"]) { display: block; }
#sideR [data-pane="auswahl"] { display: block; }
.app[data-mode="free"] .stepnav { display: none; }
[data-mobile-only] { display: none; }
@media (max-width: 1100px) { .main { grid-template-columns: clamp(270px, 17rem, 34vw) minmax(0, 1fr) clamp(250px, 16rem, 30vw); } }
@media (max-width: 860px) {
  body { overflow: hidden; }
  .top { padding: 8px 12px; gap: 8px; }
  .top h1 span, .top .tlabel { display: none; }
  .top img { height: 24px; }
  .app { display: flex; flex-direction: column; }
  .top { order: 0; }
  .main { order: 1; flex: 1 1 auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .plan { grid-row: 1; }
  .steps { order: 2; border-top: 1px solid var(--line); border-bottom: 0; padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); gap: 2px; }
  .kalle__bubble { max-height: 46vh; overflow: auto; }
  body.is-drawing .kalle { display: none; }
  .steps button { flex: 1 1 0; justify-content: center; padding: 8px 4px; font-size: .82rem; gap: 5px; }
  .st__n { width: 20px; height: 20px; font-size: .75rem; }
  .steps button { min-height: 44px; }
  .side, .side--r { grid-row: 2; border: 0; border-top: 1px solid var(--line); height: 40vh; height: 40dvh; display: none; }
  .side.has-on { display: block; }
  .app[data-mode="free"] #sideL [data-pane]:not(.on) { display: none; }
  [data-pane]:not(.on) { display: none !important; }
  #sideR [data-pane="auswahl"].on { display: block; }
  .selnav { display: block; }
  [data-desktop-only] { display: none; }
  .items { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .ptools { right: 8px; top: 8px; gap: 4px; }
  .ptools button { width: 44px; height: 44px; }
  .zoom { right: 8px; bottom: 8px; flex-direction: row; }
  .zoom button { width: 44px; height: 44px; }
  .drawbar { left: 8px; right: 54px; top: 8px; font-size: .8rem; padding: 6px 8px; }
  .selbar { bottom: 60px; font-size: .8rem; }
  .selbar b { max-width: 8em; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.it .det--solid { opacity: 1; }

/* ===== Barrierefreiheit: Bedienen ohne Ziehen, Tastatur, Screenreader ===== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -100px; z-index: 50; padding: 12px 16px; border-radius: 8px; background: var(--accent-strong); color: var(--on-strong); font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }
.main:focus { outline: none; }
#svg:focus { outline: none; }
#svg:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
#svg:focus-visible .sel-ring { stroke: var(--accent-strong); stroke-dasharray: none; stroke-width: 3px; }
.it-n { display: block; }
.helpbtn { justify-self: start; white-space: normal; text-align: left; }
.rooms__sub { margin: 6px 0 0; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.addroom .hint.full { grid-column: 1 / -1; }
/* Hilfe */
.sec--help { padding-top: 8px; padding-bottom: 8px; }
details.help { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 0 12px; }
details.help summary { font-size: .92rem; line-height: 1.5; padding: 6px 0; }
.help__body { display: grid; gap: 8px; padding: 2px 0 12px; font-size: .9rem; line-height: 1.5; }
.help__body p { margin: 0; }
/* Auswahl-Bereich */
.selname { margin: 0; font: 700 1.25rem/1.15 var(--display); }
.selinfo { display: grid; gap: 4px; }
.selinfo .warn, .selinfo .ok { padding: 6px 8px; border-radius: 6px; border-left: 4px solid currentColor; background: var(--paper); }
.ok { color: var(--ok); font-size: .85rem; margin: 0; }
.fs { border: 1px solid var(--line); border-radius: 8px; margin: 0; padding: 6px 10px 10px; display: grid; gap: 6px; min-width: 0; }
.fs legend, .mvset legend { padding: 0 4px; font-size: .85rem; font-weight: 700; color: var(--ink); }
.rotline { margin: 0; font-size: .9rem; }
.mvset { border: 1px solid var(--line); border-radius: 8px; margin: 0; padding: 6px 10px 10px; display: grid; gap: 8px; min-width: 0; }
.steprow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; }
.steprow > span { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--field); border-radius: 999px; background: var(--paper); cursor: pointer; font-variant-numeric: tabular-nums; }
.pill input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-strong); }
.pill:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-soft); font-weight: 700; }
.pill:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". up ." "left . right" ". down ."; gap: 4px; }
.pb { min-height: 44px; min-width: 44px; padding: 4px 6px; border: 1px solid var(--field); border-radius: 8px; background: var(--paper); font-size: .82rem; line-height: 1.3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.pb span { font-size: 1.15rem; line-height: 1; }
.pb:hover { border-color: var(--accent-strong); }
.pb:active { background: var(--accent-soft); }
.pb-up { grid-area: up; } .pb-left { grid-area: left; } .pb-right { grid-area: right; } .pb-down { grid-area: down; }
.clist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.corners .acts .tbtn { white-space: normal; }
.acts .tbtn { white-space: normal; text-align: center; }
/* Möbelliste */
.mlist { display: grid; gap: 6px; }
.ml-h { margin: 8px 0 0; font: 700 .9rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.ml-h small { font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ml { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ml-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: stretch; }
.ml-sel { min-height: 44px; display: grid; gap: 2px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); text-align: left; font-size: .85rem; line-height: 1.5; }
.ml-sel:hover { border-color: var(--accent-strong); }
.ml-name { font-weight: 700; font-size: .92rem; }
.ml-meta { color: var(--muted); font-variant-numeric: tabular-nums; }
.ml-warn { color: var(--danger); }
.ml-row.is-sel .ml-sel { border: 2px solid var(--accent-strong); background: var(--accent-soft); }
.ml-row.is-bad .ml-sel { border-left: 4px solid var(--danger); }
.ml-del { align-self: stretch; }
.selbar { flex-wrap: nowrap; }
/* Kleine Bildschirme */
@media (max-width: 480px) {
  .top h1 { flex: 1 1 60%; }
  .selbar { padding: 4px 4px 4px 10px; gap: 2px; }
  .selbar b { flex: 0 1 auto; min-width: 0; text-overflow: ellipsis; }
  .selbar > span { display: none; }
  .row2 { grid-template-columns: 1fr; }
  .pad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .selbar b { display: none; }
  .steps { flex-wrap: wrap; }
  .steps button { flex: 1 1 40%; }
}
/* Wenig Höhe (z. B. 200 % Zoom auf dem Laptop, Handy quer): Seite darf scrollen, damit nichts abgeschnitten wird */
@media (max-height: 560px) {
  html, body { height: auto; }
  body { overflow: auto; }
  .app { height: auto; min-height: 100%; display: flex; flex-direction: column; }
  .main { display: flex; flex-direction: column; flex: none; }
  .plan { order: 1; height: 440px; min-height: 440px; flex: none; }
  .side, .side--r { order: 2; height: auto !important; max-height: none; overflow: visible; border-right: 0; border-left: 0; border-top: 1px solid var(--line); }
  .steps { order: 0; }
  .stepnav { position: static; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; } }
@media (forced-colors: active) {
  .ml-row.is-sel .ml-sel, .roomrow[aria-pressed="true"], .steps button[aria-current="step"] { outline: 3px solid Highlight; }
  .sel-ring { stroke: Highlight; }
}
/* Sehr niedriger Plan (kleines Handy): Zeichenwerkzeuge gibt es links unter „Grundriss“ – hier ausblenden, damit nichts abgeschnitten wird */
.plan { container-type: size; container-name: plan; }
@container plan (max-height: 380px) { .ptools { display: none; } }

/* ===== Barrierefreiheit, Teil 2 (WCAG 2.2 AA): Pfeil-Knöpfe in der Auswahlleiste, Barrierefrei-Menü der Website ===== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
::placeholder { color: var(--muted); opacity: 1; }
.lead, .hint, .howto, .cc span, .help__body, .kalle__text, .selinfo, .contact { line-height: 1.5; }
.selbar__mv { display: inline-flex; gap: 2px; padding: 0 4px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.selbar__mv button { font-size: 1.15rem; font-weight: 700; }
.selbar button:hover { background: var(--accent-soft); }
@media (max-width: 640px) {
  .selbar { flex-wrap: wrap; justify-content: center; border-radius: 16px; padding: 6px; row-gap: 4px; max-width: calc(100% - 16px); white-space: normal; }
  .selbar b { flex: 1 1 100%; max-width: none; text-align: center; }
  .selbar > .selbar__info { display: none; }
}
@media (max-width: 480px) { .selbar > span.selbar__mv { display: inline-flex; border: 0; padding: 0; } }
@media (max-width: 360px) { .selbar b { display: none; } }

/* Knopf „Barrierefrei“ im Kopf (Name über aria-label, sichtbarer Text am Anfang) */
.a11y-toggle { gap: 6px; font-weight: 700; }
.a11y-toggle .icon { width: 22px; height: 22px; flex: none; }
@media (max-width: 1100px) { .a11y-toggle__label { display: none; } }

/* Schriftgröße aus dem Barrierefrei-Menü (115 / 130 / 150 %) – alle rem-Maße wachsen mit */
html[data-schrift="1"] { font-size: 115%; }
html[data-schrift="2"] { font-size: 130%; }
html[data-schrift="3"] { font-size: 150%; }
html[data-schrift] .top h1 { white-space: normal; }
html[data-schrift] .tbtn, html[data-schrift] .steps button { white-space: normal; }
html:is([data-schrift="2"], [data-schrift="3"]) .items { grid-template-columns: 1fr; }
html:is([data-schrift="2"], [data-schrift="3"]) .row2, html:is([data-schrift="2"], [data-schrift="3"]) .addroom { grid-template-columns: 1fr; }
html:is([data-schrift="2"], [data-schrift="3"]) .tplrow { grid-template-columns: 1fr; }
html:is([data-schrift="2"], [data-schrift="3"]) .tools { grid-template-columns: 1fr; }

/* Lesefreundlich (1.4.8 / 1.4.12) */
html[data-lesen] body { line-height: 1.8; letter-spacing: .06em; word-spacing: .16em; }
html[data-lesen] :not(svg, svg *) { font-style: normal !important; text-transform: none !important; }
html[data-lesen] :is(p, li, .hint, .lead, .kalle__text, .help__body, .ml-sel) { line-height: 1.8; }
html[data-lesen] :is(.tbtn, .selbar, .steps button) { white-space: normal; }

/* Bewegung aus */
html[data-bewegung="reduziert"] *, html[data-bewegung="reduziert"] *::before, html[data-bewegung="reduziert"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ---- Farbdarstellungen aus dem Barrierefrei-Menü (html[data-farbe], data-kontrast="hoch" = „Kontrast dunkel“) ----
   html:root[…] schlägt die automatische Dunkel-Palette des Planers (prefers-color-scheme). Text ≥ 7:1, Bedienelemente ≥ 3:1. */
html:root[data-farbe="kontrast-hell"] {
  color-scheme: light;
  --bg: #FFFFFF; --panel: #FFFFFF; --paper: #FFFFFF; --ink: #000000; --muted: #262626; --line: #000000;
  --grid: #E6E6E6; --grid2: #B3B3B3; --accent: #A33C00; --accent-ink: #FFFFFF; --accent-soft: #FFE8D6;
  --wall: #000000; --room: #FFFFFF; --room-sel: #FFEBD9; --danger: #A30000; --ok: #005A1E; --on-ok: #FFFFFF; --chip-hint: #6B4100;
  --f-wohnen: #DCE8F2; --f-schlafen: #EAE0F2; --f-kueche: #E1F0D6; --f-arbeit: #F4E8CF; --f-kind: #F8DEDA; --f-bad: #D6F0F0; --f-sonst: #E8E8E8; --f-bau: #FFFFFF;
  --accent-strong: #7A2600; --on-strong: #FFFFFF; --accent-text: #7A2600; --field: #000000; --focus: #0040C0;
  --shadow: none;
}
html:root[data-farbe="kontrast-dunkel"], html:root[data-kontrast="hoch"] {
  color-scheme: dark;
  --bg: #000000; --panel: #000000; --paper: #000000; --ink: #FFFFFF; --muted: #D6D6D6; --line: #BFBFBF;
  --grid: #1F1F1F; --grid2: #3D3D3D; --accent: #FFE500; --accent-ink: #000000; --accent-soft: #2B2600;
  --wall: #FFFFFF; --room: #000000; --room-sel: #262100; --danger: #FF9C94; --ok: #7DFFA0; --on-ok: #000000; --chip-hint: #FFD27A;
  --f-wohnen: #10263A; --f-schlafen: #2A1A3A; --f-kueche: #16301A; --f-arbeit: #33280F; --f-kind: #3A1814; --f-bad: #0F3333; --f-sonst: #262626; --f-bau: #000000;
  --accent-strong: #FFE500; --on-strong: #000000; --accent-text: #FFE500; --field: #FFFFFF; --focus: #FFE500;
  --shadow: none;
}
html:root[data-farbe="dunkel"] {
  color-scheme: dark;
  --bg: #12100E; --panel: #1B1815; --paper: #1F1C18; --ink: #F0EBE3; --muted: #C4BBAF; --line: #5A5249;
  --grid: #26221E; --grid2: #332E28; --accent: #F2743A; --accent-ink: #1A0F08; --accent-soft: #33261C;
  --wall: #E6DED2; --room: #221F1B; --room-sel: #33261C; --danger: #FF8A80; --ok: #6FD39A; --on-ok: #0E1A12; --chip-hint: #F0B35A;
  --f-wohnen: #2B3640; --f-schlafen: #362F40; --f-kueche: #2E3A2A; --f-arbeit: #3D3526; --f-kind: #432D2B; --f-bad: #263B3B; --f-sonst: #34312D; --f-bau: #1F1C18;
  --accent-strong: #FF9A66; --on-strong: #1A0F08; --accent-text: #FF9A66; --field: #9A8E80; --focus: #FF9A66;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
}
html:root[data-farbe="creme"] {
  color-scheme: light;
  --bg: #F1E9D6; --panel: #FBF6E9; --paper: #FBF6E9; --ink: #2E2A26; --muted: #4A4238; --line: #CBBFA8;
  --grid: #EDE3CC; --grid2: #D9CCB0; --accent: #B8480F; --accent-ink: #FFFFFF; --accent-soft: #F8EBD9;
  --wall: #2E2A26; --room: #FBF6E9; --room-sel: #F8EBD9; --danger: #9E1B12; --ok: #1F5E36; --on-ok: #FFFFFF; --chip-hint: #6B4100;
  --accent-strong: #8A2E06; --on-strong: #FFFFFF; --accent-text: #8A2E06; --field: #7A6E5B; --focus: #8A2E06;
}
html:root[data-farbe="farbenblind"] { --danger: #B3261E; --ok: #1F6B3A; }
/* feste Farben, die sonst nicht über Variablen laufen */
html:root:is([data-farbe="kontrast-hell"], [data-farbe="kontrast-dunkel"], [data-kontrast="hoch"]) .zone--bad { fill: var(--danger); stroke: var(--danger); }
html:root:is([data-farbe="kontrast-hell"], [data-farbe="kontrast-dunkel"], [data-kontrast="hoch"]) .chip--hint { border-color: var(--chip-hint); }
html:root:is([data-farbe="kontrast-hell"], [data-farbe="kontrast-dunkel"], [data-kontrast="hoch"]) :is(.tbtn, .cc, .roomrow, .ml-sel, .item, .zoom button, .ptools button, .tools button, .chip, .selbar, .search) { border-color: var(--line); border-width: 2px; }
html:root:is([data-farbe="kontrast-hell"], [data-farbe="kontrast-dunkel"], [data-kontrast="hoch"]) :focus-visible { outline-width: 4px; }
html:root:is([data-farbe="kontrast-hell"], [data-farbe="kontrast-dunkel"], [data-kontrast="hoch"]) .it .det { opacity: 1; }
html:root:is([data-farbe="kontrast-hell"], [data-farbe="kontrast-dunkel"], [data-kontrast="hoch"]) .it .body { stroke-width: 2; }
/* Links und Zustände nicht nur über Farbe */
html[data-farbe] a { text-decoration-line: underline; text-underline-offset: .18em; }
html[data-farbe] a.tbtn, html[data-farbe] a.skip { text-decoration: none; }
html[data-farbe] .ml-row.is-sel .ml-name::before, html[data-farbe] .roomrow[aria-pressed="true"] > span:first-child::before { content: "✓ "; }
html[data-farbe] .chip--warn::before, html[data-farbe] .chip--hint::before { content: "! "; font-weight: 800; }
html[data-farbe="farbenblind"] .it.sel .body { stroke-dasharray: none; stroke-width: 3.2; }
html[data-farbe="farbenblind"] .tools button[aria-pressed="true"], html[data-farbe="farbenblind"] .ptools button[aria-pressed="true"] { outline: 2px dashed var(--on-strong); outline-offset: -5px; }

/* ---- Dialog „Anzeige anpassen“ (Markup wie src/templates/layout.php, Logik /assets/js/barrierefrei.js) ---- */
.a11y-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: auto; overscroll-behavior: contain; line-height: 1.5; }
.a11y-dialog::backdrop { background: rgba(16,16,16,.6); }
.a11y-dialog__body { padding: 1.25rem; }
.a11y-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.a11y-dialog__title { display: flex; align-items: center; gap: .5rem; margin: 0; font: 700 1.4rem/1.2 var(--display); }
.a11y-dialog__title .icon { width: 1.5rem; height: 1.5rem; color: var(--accent-text); flex: none; }
.a11y-dialog__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--field); border-radius: 8px; background: var(--paper); color: var(--ink); }
.a11y-dialog__close:hover { background: var(--accent-soft); }
.a11y-dialog__close .icon { width: 1.3rem; height: 1.3rem; }
.a11y-dialog__text { margin: 0 0 .75rem; font-size: .95rem; color: var(--muted); }
.a11y-group { min-width: 0; margin: 0; padding: 1rem 0; border: 0; border-top: 1px solid var(--line); }
.a11y-group__label { float: left; width: 100%; margin: 0 0 .55rem; padding: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.a11y-group__label + * { clear: both; }
.a11y-group__hint { margin: 0 0 .65rem; font-size: .9rem; color: var(--muted); }
.a11y-group__note { margin: .65rem 0 0; padding: .5rem .75rem; border-left: 4px solid var(--accent); background: var(--bg); font-size: .9rem; }
.a11y-subgroup { min-width: 0; margin: .9rem 0 0; padding: 0; border: 0; }
.a11y-subgroup__label { float: left; width: 100%; margin: 0 0 .4rem; padding: 0; font-size: .95rem; font-weight: 700; }
.a11y-subgroup__label + * { clear: both; }
.a11y-dialog kbd { display: inline-block; padding: 0 .35em; border: 1px solid var(--muted); border-radius: 3px; font: inherit; font-size: .85em; font-weight: 700; line-height: 1.4; }
.a11y-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.a11y-choices--row .a11y-choice { flex: 1 1 auto; justify-content: center; }
.a11y-choices--tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); }
.a11y-choice { position: relative; display: flex; align-items: center; gap: .6rem; min-height: 44px; min-width: 44px; padding: .5rem .85rem .5rem .7rem; border: 2px solid var(--field); border-radius: 8px; background: var(--paper); color: var(--ink); font-weight: 700; line-height: 1.3; cursor: pointer; }
.a11y-choice input { flex: none; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--accent-strong); cursor: pointer; }
.a11y-choice input:focus-visible { outline: none; }
.a11y-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.a11y-choice:hover { border-color: var(--ink); }
.a11y-choice:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.a11y-choice:has(input:checked) .a11y-choice__desc { color: var(--paper); }
.a11y-choice:has(input:disabled) { cursor: default; }
.a11y-choice__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.a11y-choice__desc { font-size: .88rem; font-weight: 400; line-height: 1.5; color: var(--muted); }
.a11y-choice__desc[hidden] { display: none; }
.a11y-choice--check { flex: 1 1 100%; align-items: flex-start; }
.a11y-choice--check input { margin-top: .15rem; }
.a11y-swatch { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid #7C8698; border-radius: 4px; font: 700 1.05rem/1 Georgia, serif; }
:root .a11y-dialog .a11y-swatch.a11y-swatch--standard { background: #FFFFFF; color: #211D18; border-bottom: 4px solid #E4601B; }
:root .a11y-dialog .a11y-swatch.a11y-swatch--kontrast-hell { background: #FFFFFF; color: #000000; border: 2px solid #000000; }
:root .a11y-dialog .a11y-swatch.a11y-swatch--kontrast-dunkel { background: #000000; color: #FFE500; border: 2px solid #FFFFFF; }
:root .a11y-dialog .a11y-swatch.a11y-swatch--dunkel { background: #1B1815; color: #F0EBE3; border-color: #8E9AB3; }
:root .a11y-dialog .a11y-swatch.a11y-swatch--creme { background: #FBF6E9; color: #2E2A26; border-color: #7A6E5B; }
:root .a11y-dialog .a11y-swatch.a11y-swatch--farbenblind { background: #FFFFFF; color: #211D18; text-decoration: underline 2px; text-underline-offset: .18em; }
.a11y-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: .5rem; }
.a11y-option { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 44px; padding: .5em 1em; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); color: var(--ink); font-weight: 700; line-height: 1.3; }
.a11y-option:hover { background: var(--accent-soft); }
.a11y-option:disabled { border-color: var(--field); color: var(--muted); cursor: default; }
.a11y-option .icon { width: 1.2em; height: 1.2em; }
.a11y-stimme { margin-top: .9rem; }
.a11y-stimme .a11y-subgroup__label { display: block; float: none; }
.a11y-select { width: 100%; min-height: 44px; padding: .5rem .75rem; border: 2px solid var(--field); border-radius: 8px; background: var(--paper); color: var(--ink); }
.a11y-status { margin: .75rem 0 0; font-size: .92rem; font-weight: 600; }
.a11y-dialog__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.a11y-dialog__reset-desc { flex: 1 1 100%; margin: 0; font-size: .85rem; color: var(--muted); }
/* Vorlese-Leiste und Markierung */
.a11y-reader { position: fixed; left: .5rem; right: .5rem; bottom: .5rem; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; max-width: 40rem; margin: 0 auto; padding: .6rem .75rem; border: 2px solid var(--accent-strong); border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.a11y-reader__status { flex: 1 1 12rem; margin: 0; font-size: .95rem; font-weight: 600; }
.a11y-reader__btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.a11y-reader__btn { display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-height: 44px; min-width: 44px; padding: .4em .75em; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); color: var(--ink); font-weight: 700; }
.a11y-reader__btn:disabled { border-color: var(--field); color: var(--muted); cursor: default; }
.a11y-reader__btn .icon { width: 1.1em; height: 1.1em; }
.a11y-reader__prev { transform: scaleX(-1); }
.is-reading { box-shadow: 0 0 0 .3rem var(--accent-soft); outline: 2px solid var(--accent-strong); border-radius: 4px; }
html.a11y-waehlen main { cursor: pointer; }
html.a11y-waehlen main :is(h2, h3, p, li, summary, label, legend):hover { outline: 2px dashed var(--focus); outline-offset: 3px; }
/* Lese-Lineal */
.a11y-lineal { position: fixed; inset: 0; z-index: 65; pointer-events: none; --lineal-y: 40vh; --lineal-h: 2.2rem; --lineal-farbe: #C2410C; --lineal-dunkel: rgba(14, 23, 43, .6); }
.a11y-lineal > div { position: absolute; left: 0; right: 0; pointer-events: none; }
html:not([data-lineal]) .a11y-lineal { display: none; }
.a11y-lineal__band { top: 0; height: var(--lineal-h); transform: translateY(var(--lineal-y)); }
html[data-lineal="linie"] .a11y-lineal__band { background: rgba(240,100,30,.1); border-top: 1px solid rgba(194,65,12,.45); border-bottom: 3px solid var(--lineal-farbe); }
html[data-lineal="linie"] :is(.a11y-lineal__oben, .a11y-lineal__unten) { display: none; }
html[data-lineal="fenster"] .a11y-lineal { --fy: calc(var(--lineal-y) - var(--lineal-h) * .6); --fh: calc(var(--lineal-h) * 2.2); }
html[data-lineal="fenster"] .a11y-lineal__band { transform: translateY(var(--fy)); height: var(--fh); border-top: 2px solid var(--lineal-farbe); border-bottom: 2px solid var(--lineal-farbe); }
html[data-lineal="fenster"] .a11y-lineal__oben { top: 0; height: max(0px, var(--fy)); background: var(--lineal-dunkel); }
html[data-lineal="fenster"] .a11y-lineal__unten { top: calc(var(--fy) + var(--fh)); bottom: 0; background: var(--lineal-dunkel); }
@media print { .a11y-lineal, .a11y-reader, .a11y-dialog { display: none !important; } }
@media (forced-colors: active) { .a11y-choice:has(input:checked) { outline: 3px solid Highlight; } }
.steps button { position: relative; }
@media (max-width: 860px) {
  html[data-schrift] .steps, html[data-lesen] .steps { flex-wrap: wrap; overflow-x: visible; }
  html[data-schrift] .steps button, html[data-lesen] .steps button { flex: 1 1 40%; }
}
.check a, .hint a { color: var(--accent-text); text-decoration: underline; text-underline-offset: .18em; }

/* Kalle in niedriger Planfläche (320 px breit / starker Zoom): Sprechblase bleibt ganz in der Planfläche und
   scrollt selbst, statt oben abgeschnitten zu werden (Text und „Kalle ausblenden“ sonst unsichtbar – 1.4.10, 2.4.11). */
@container plan (max-height: 420px) {
  .kalle { bottom: 6px; }
  .kalle__bubble { margin-bottom: 0; max-height: calc(100cqh - 12px); overflow: auto; }
}

/* WCAG 2.4.11/2.4.12 (Prüfung 01.10.2026): Die klebende Schritt-Leiste unten im Seitenbereich darf das fokussierte
   Element nicht verdecken – beim Fokus-Scrollen bleibt unten so viel Platz frei, wie die Leiste hoch ist. */
.side { scroll-padding-bottom: calc(4.5rem + 12px); scroll-padding-top: .75rem; }
.app[data-mode="free"] .side { scroll-padding-bottom: .75rem; }
/* „Bitte prüfen Sie Ihre Angaben“ vor dem Senden (WCAG 3.3.6, /assets/js/angaben-pruefen.js) */
.pruefen { margin: 4px 0 12px; padding: 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); }
.pruefen:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.pruefen__titel { margin: 0 0 6px; font-size: 1.05rem; }
.pruefen__text { margin: 0 0 10px; font-size: .95rem; }
.pruefen__liste { margin: 0; }
.pruefen__zeile { padding: 6px 0; border-top: 1px solid var(--line); }
.pruefen__zeile dt { font-weight: 700; }
.pruefen__zeile dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pruefen__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pruefen__knoepfe .tbtn { white-space: normal; }
.help__body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: .18em; }