.werkzeugkasten { display: grid; gap: var(--space-4); }
.werkzeugkasten [hidden] { display: none; }
.werkzeugkasten form { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: end; }
.werkzeugkasten form .breit { grid-column: 1 / -1; }
.werkzeugkasten label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-inline-size: 0; font-weight: 600; font-size: 0.92rem; }
.werkzeugkasten label small { font-weight: 400; color: var(--text-muted); }
.werkzeugkasten input[type="file"] { padding: 6px; background: var(--bg-raised); }
.werkzeugkasten [role="status"] { min-block-size: 1.55em; font-weight: 500; }
.werkzeugkasten caption { text-align: start; font-weight: 600; padding-block-end: var(--space-2); }
.werkzeugkasten [data-ton="fehler"] { color: var(--text-danger); }
.vorschlaege { max-inline-size: min(calc(100vw - 16px), 640px); }
.vorschlaege .kit-menu-item > span { flex-shrink: 0; }
.vorschlaege .kit-menu-hint { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }

.ablage {
  display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-6);
  border: 2px dashed var(--border-accent-soft); border-radius: var(--radius-large);
  background: var(--bg-page); transition: border-color 120ms, background 120ms;
}
.ablage[data-ueber] { border-style: solid; outline: 2px solid var(--border-focus); outline-offset: 2px; background: var(--bg-hover); }
.foto-wahl .button { position: relative; }
.foto-wahl input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; padding: 0; font-size: 0; opacity: 0; pointer-events: none; }
.foto-wahl .button:has(input:focus-visible) { outline: 1px solid var(--border-focus); outline-offset: 2px; }

.foto-ecken { display: grid; gap: var(--space-4); }
.foto-buehne { display: grid; justify-items: start; }
.foto-buehne > * { grid-area: 1 / 1; inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 72svh; }
.foto-buehne canvas {
  outline: 1px solid var(--border); border-radius: var(--radius);
  background: repeating-conic-gradient(var(--bg-hover) 0 25%, var(--bg-raised) 0 50%) 0 0 / 16px 16px;
}
.foto-buehne polygon { fill: color-mix(in oklab, var(--bg-accent) 12%, transparent); stroke: var(--bg-accent); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.foto-buehne circle { fill: var(--bg-accent); fill-opacity: 0.85; stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; cursor: grab; touch-action: none; }
.foto-buehne circle:active { cursor: grabbing; }
.foto-buehne circle:focus-visible { outline: none; stroke: var(--border-focus); stroke-width: 6; }
.foto-vorschau { display: grid; gap: var(--space-2); margin: 0; max-inline-size: min(100%, 520px); }
.foto-vorschau canvas { inline-size: 100%; block-size: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-hover); }
.foto-vorschau figcaption { font-size: var(--t-1); color: var(--text-muted); }

.werkzeugkasten ul.treffer { display: grid; gap: 6px; padding: 0; list-style: none; max-inline-size: none; }
.werkzeugkasten ul.treffer li + li { margin: 0; }
.treffer button {
  display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--space-4); inline-size: 100%; min-block-size: 44px;
  padding: var(--space-2) var(--space-4); text-align: start;
  background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius);
}
.treffer button:hover, .treffer button[aria-pressed="true"] { border-color: var(--border-accent-soft); background: var(--bg-hover); }
.treffer span:first-child { font-family: var(--font-mono); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

.ergebnis-daten { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: var(--space-2) var(--space-6); }
.ergebnis-daten dt { color: var(--text-muted); }
.ergebnis-daten dd { margin: 0; overflow-wrap: anywhere; }

.raumbild { display: grid; gap: var(--space-2); }
.raumbild canvas {
  inline-size: 100%; aspect-ratio: 4 / 3; touch-action: none; cursor: grab;
  background: radial-gradient(ellipse at 50% 40%, var(--bg-raised), var(--bg-hover));
  border: 1px solid var(--border); border-radius: var(--radius-large);
}
.raumbild canvas:active { cursor: grabbing; }
.werkzeugkasten .griffe .button { flex: 1 1 auto; }
.raumbild .griffe { gap: var(--space-2); }

.erklaerung {
  display: grid; gap: var(--space-4); padding: var(--space-8);
  background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.95rem;
}
.erklaerung h3 { font-size: 1.15rem; }
.erklaerung dl { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: var(--space-2) var(--space-6); }
.erklaerung dd { margin: 0; white-space: pre-line; }
.erklaerung [data-leer]::before { content: "—"; color: var(--text-muted); }
.erklaerung .unterschrift { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); padding-block-start: var(--space-12); }
.erklaerung .unterschrift p { border-block-start: 1px solid var(--border-strong); padding-block-start: 4px; font-size: 0.85rem; }

.rezept-befund { display: grid; gap: var(--space-4); }
.rezept-matrix { display: grid; gap: var(--space-2); }
.rezept-abrechnung td, .rezept-abrechnung th { text-align: right; }
.rezept-abrechnung :is(td, th):first-child { text-align: left; }
.rezept-abrechnung tr[data-gleich] td:first-child { color: var(--text-muted); }
.rezept-abrechnung td[data-mono] { font-variant-numeric: tabular-nums; }
.rezept-hinweis { padding: var(--space-2) var(--space-4); border-inline-start: 3px solid var(--border-accent-soft); background: var(--bg-raised); border-radius: var(--radius); }
.rezept-hinweis[data-art="abgelaufen"], .rezept-hinweis[data-art="bg"] { font-weight: 600; }
.rezept-fall { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius); }
.rezept-ergebnis b { font-family: var(--font-mono); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.rezept-ergebnis small, .rezept-schritte [data-art="annahme"], .rezept-schritte [data-art="regelwerk"] { color: var(--text-muted); }
.rezept-empfehlung { font-weight: 600; }
.werkzeugkasten :is(.rezept-schritte, .rezept-hinweise, .rezept-kandidaten) { display: grid; gap: 4px; margin: 0; padding-inline-start: 1.25em; max-inline-size: none; }
.rezept-schritte :is([data-art="entfaellt"], [data-art="abweichung"], [data-art="hoch"]), .rezept-hinweise [data-art="fehlt"] { font-weight: 600; }
.rezept-kandidaten code { font-variant-numeric: tabular-nums; }
.werkzeugkasten [data-empfohlen] { font-weight: 600; }
.werkzeugkasten tr[data-empfohlen] { background: var(--bg-accent-soft); }
.rezept-karte { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); border: 2px dashed var(--border-accent-soft); border-radius: var(--radius); }
.rezept-karte label { max-inline-size: 20em; }
.rezept-karte-inhalt { display: grid; gap: 4px; }

.rezept-ablage { justify-items: stretch; }
.rezept-ablage > * { max-inline-size: 60ch; }
.rezept-symbol { inline-size: 32px; block-size: 32px; fill: none; stroke: var(--text-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rezept-kamera { display: grid; gap: var(--space-4); }
.rezept-sucher { display: grid; justify-items: start; }
.rezept-sucher > * { grid-area: 1 / 1; inline-size: 100%; max-inline-size: 720px; block-size: auto; max-block-size: 72svh; border-radius: var(--radius); }
.rezept-sucher video { background: var(--bg-hover); object-fit: contain; }
.rezept-sucher svg { block-size: 100%; pointer-events: none; }
.rezept-sucher polygon { fill: color-mix(in oklab, var(--bg-accent) 14%, transparent); stroke: var(--bg-accent); stroke-width: 3; vector-effect: non-scaling-stroke; }

.rezept-mehr { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); }
.rezept-mehr[open]:not([hidden]) { display: grid; gap: var(--space-4); padding-block-end: var(--space-4); }
.rezept-mehr[open]::details-content { display: grid; gap: var(--space-4); }
.rezept-mehr > summary { min-block-size: 44px; padding: 0 var(--space-4); font-weight: 600; border-radius: var(--radius); }
.rezept-mehr > summary:hover { background: var(--bg-hover); }
.rezept-mehr > :not(summary) { margin-inline: var(--space-4); min-inline-size: 0; }
.rezept-mehr > form { container-type: inline-size; }
.werkzeugkasten .rezept-beispiele { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin: 0; max-inline-size: none; }
@container (min-width: 34rem) { .werkzeugkasten .rezept-beispiele { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 64rem) { .werkzeugkasten .rezept-beispiele { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rezept-ergebnis { container-type: inline-size; }
.rezept-blick { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 36rem) {
  .rezept-blick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rezept-blick > :is(:nth-child(-n+2), :last-child) { grid-column: 1 / -1; }
}
.rezept-blickkarte { display: grid; gap: var(--space-2); align-content: start; min-inline-size: 0; padding: var(--space-4); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-large); }
.rezept-blickkarte h3 { margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--text-muted); }
.rezept-blickkarte p { margin: 0; }
.rezept-karte-titel { font-weight: 600; }
.rezept-angaben { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-4); margin: 0; }
.rezept-angaben dt { color: var(--text-muted); }
.rezept-angaben dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.werkzeugkasten .rezept-punkte { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-inline-size: none; }
.werkzeugkasten .rezept-punkte li { display: flex; gap: var(--space-2); align-items: flex-start; min-inline-size: 0; margin: 0; overflow-wrap: anywhere; }
.rezept-punkte li::before {
  content: ""; flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 0.15em;
  background: currentColor; -webkit-mask: var(--zeichen) center / contain no-repeat; mask: var(--zeichen) center / contain no-repeat;
}
.rezept-punkte details { flex: 1; min-inline-size: 0; }
.rezept-punkte details > p { margin-block-start: var(--space-2); }
.rezept-punkte summary, .rezept-blickkarte > details > summary { cursor: pointer; }
.rezept-name, .rezept-blickkarte > details > summary { color: var(--text-muted); }
.rezept-blickkarte > details[open] { display: grid; gap: var(--space-2); }
.rezept-blickkarte h4 { margin: 0; font-size: var(--t-1); font-weight: 600; }
.rezept-punkte li[data-art="ok"]::before { color: var(--text-success); --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.rezept-punkte li[data-art="warn"]::before { color: var(--text-warning); --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.rezept-punkte li[data-art="fehlt"]::before { color: var(--text-danger); --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }
.rezept-punkte li[data-art="hinweis"]::before { color: var(--text-muted); --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.rezept-weiter { font-weight: 600; }
.rezept-weiter:is([data-art="neu"], [data-art="nachfordern"], [data-art="nichts"]) { color: var(--text-danger); }

.werkzeugkasten .rezept-wahl { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.rezept-wahl legend { padding: 0 0 var(--space-2); font-weight: 600; font-size: 0.92rem; }
.rezept-wahl legend small { font-weight: 400; color: var(--text-muted); }
.werkzeugkasten .rezept-wahl label {
  display: flex; align-items: center; gap: var(--space-2); min-block-size: 44px; padding: 0 var(--space-4);
  font-weight: 500; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius);
}
.werkzeugkasten .rezept-wahl label:has(:checked) { border-color: var(--border-accent-soft); background: var(--bg-accent-soft); }

@media (max-width: 720px) {
  .ergebnis-daten, .erklaerung dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ergebnis-daten dd, .erklaerung dd { margin-block-end: var(--space-2); }
  .treffer button { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media print {
  body:has(.erklaerung) :is(.site-header, .kontakt, .skip-link, .inhalt, .versprechen, .beitrag section:not(:has(.erklaerung)), .werkzeugkasten > :not(.erklaerung)) { display: none; }
  body:has(.erklaerung) :is(.vorstellung, .text, .werkzeugkasten) { display: block; padding: 0; margin: 0; border: 0; box-shadow: none; background: none; }
  .erklaerung { border: 0; padding: 0; }
}