/* Bildwerkstatt: baut nur auf den Rollen-Variablen aus redim-brand.css auf (Dark Mode automatisch). */

:root {
  --ws-kopfhoehe: 72px;
  --ws-icon: 24px;
  --ws-bildrand: var(--rd-radius-lg);
}

body { background: var(--rd-bg-alt); }
/* Marken-CSS setzt * { margin: 0 } – Modals sonst oben links statt mittig */
dialog:modal { margin: auto; inset: 0; }
[hidden] { display: none !important; }

svg { width: var(--ws-icon); height: var(--ws-icon); fill: none; stroke: currentColor;
      stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

:focus-visible { outline: 3px solid var(--rd-orange); outline-offset: 2px; border-radius: var(--rd-radius-sm); }

.sprunglink { position: absolute; left: -999px; top: 0; z-index: 10; padding: var(--rd-space-3) var(--rd-space-4);
              background: var(--rd-bg); color: var(--rd-akzent-text); }
.sprunglink:focus { left: var(--rd-space-4); }

/* ── Kopf ── */
.kopf { position: sticky; top: 0; z-index: 5; background: var(--rd-bg); border-bottom: 1px solid var(--rd-linie); }
.kopf__innen { max-width: var(--rd-container); margin-inline: auto; min-height: var(--ws-kopfhoehe);
               padding-inline: max(var(--rd-space-4), env(safe-area-inset-left)) max(var(--rd-space-4), env(safe-area-inset-right));
               display: flex; align-items: center; justify-content: space-between; gap: var(--rd-space-4); flex-wrap: wrap; }
.kopf__marke { display: flex; align-items: center; gap: var(--rd-space-4); color: var(--rd-text-stark); text-decoration: none;
               padding-block: var(--rd-space-3); min-width: 0; }
.kopf__trenner { width: 1px; height: 32px; background: var(--rd-linie); }
.kopf__name { font-family: var(--rd-font-headline); font-size: var(--rd-fs-small); line-height: 1.25; color: var(--rd-text-schwach); }
.kopf__name strong { display: block; color: var(--rd-text-stark); font-size: 1.125rem; }
.logo { height: 32px; width: auto; }
.logo--dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .logo--hell { display: none; }
  :root:not([data-theme="hell"]) .logo--dunkel { display: block; }
}
:root[data-theme="dunkel"] .logo--hell { display: none; }
:root[data-theme="dunkel"] .logo--dunkel { display: block; }

.status { display: inline-flex; align-items: center; gap: var(--rd-space-2); padding: 6px 14px;
          border: 1px solid var(--rd-linie); border-radius: var(--rd-radius-pill);
          font-family: var(--rd-font-headline); font-size: var(--rd-fs-caption); color: var(--rd-text-stark); }
.status__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--rd-text-schwach); }
.status[data-lage="bereit"] .status__punkt { background: var(--rd-success); }
.status[data-lage="belegt"] .status__punkt { background: var(--rd-warning); }
.status[data-lage="aus"] .status__punkt { background: var(--rd-error); }

/* ── Seite ── */
.seite { max-width: var(--rd-container); margin-inline: auto;
         padding: var(--rd-space-8) max(var(--rd-space-4), env(safe-area-inset-right)) var(--rd-space-12) max(var(--rd-space-4), env(safe-area-inset-left)); }

.einleitung { max-width: var(--rd-lesebreite); margin-bottom: var(--rd-space-8); }
.einleitung__titel { font-family: var(--rd-font-headline); font-weight: 700; color: var(--rd-text-stark);
                     font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.12; text-wrap: balance;
                     margin-bottom: var(--rd-space-4); }
.einleitung__text { color: var(--rd-text); }

/* ── System (Hardware-Monitoring) ── */
.system { --ws-kurve: var(--rd-blau); }
:root[data-theme="dunkel"] .system { --ws-kurve: var(--rd-info); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .system { --ws-kurve: var(--rd-info); } }
.system__kopf { display: flex; align-items: center; gap: var(--rd-space-3); min-height: 56px; cursor: pointer;
                padding: var(--rd-space-3) var(--rd-space-5); list-style: none; }
.system__kopf::-webkit-details-marker { display: none; }
.system__titel { font-family: var(--rd-font-headline); font-weight: 700; color: var(--rd-text-stark); }
.system__kurz { font-size: var(--rd-fs-caption); color: var(--rd-text-schwach); font-variant-numeric: tabular-nums;
                min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system__pfeil { margin-left: auto; color: var(--rd-text-schwach); transition: transform var(--rd-dur-standard) var(--rd-ease); }
.system[open] .system__pfeil { transform: rotate(180deg); }
.system__inhalt { display: grid; gap: var(--rd-space-4); padding: 0 var(--rd-space-5) var(--rd-space-5); }
.system__kacheln { list-style: none; padding: 0; display: grid; gap: var(--rd-space-3);
                   grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.kachel { position: relative; display: grid; gap: 4px; padding: var(--rd-space-3) var(--rd-space-4);
          border: 1px solid var(--rd-linie); border-radius: var(--rd-radius-md); background: var(--rd-bg); min-width: 0; }
.kachel__titel { font-family: var(--rd-font-headline); font-size: var(--rd-fs-caption); color: var(--rd-text-schwach); }
.kachel__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rd-space-2); }
.kachel__wert { font-family: var(--rd-font-headline); font-weight: 700; font-size: 1.75rem; line-height: 1.1;
                color: var(--rd-text-stark); font-variant-numeric: tabular-nums; }
.kachel__wert small { font-size: var(--rd-fs-small); font-weight: 400; color: var(--rd-text-schwach); margin-left: 2px; }
.kachel__zustand { display: inline-flex; align-items: center; gap: 4px; font-size: var(--rd-fs-caption); color: var(--rd-text); }
.kachel__zustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rd-success); }
.kachel__zustand[data-art="warm"]::before { background: var(--rd-warning); }
.kachel__zustand[data-art="heiss"]::before, .kachel__zustand[data-art="knapp"]::before { background: var(--rd-error); }
.kachel__zusatz { font-size: var(--rd-fs-caption); line-height: 1.4; color: var(--rd-text-schwach); font-variant-numeric: tabular-nums; }
.kachel__kurve { width: 100%; height: 40px; display: block; overflow: visible; touch-action: pan-y; }
.kachel__kurve .linie { fill: none; stroke: var(--ws-kurve); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
                        vector-effect: non-scaling-stroke; }
.kachel__kurve .flaeche { fill: var(--ws-kurve); opacity: .1; stroke: none; }
.kachel__kurve .punkt { fill: var(--ws-kurve); stroke: var(--rd-bg); stroke-width: 2; }
.kachel__kurve .zeiger { stroke: var(--rd-text-schwach); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kachel__tipp { position: absolute; top: var(--rd-space-2); right: var(--rd-space-3); padding: 2px 8px; border-radius: var(--rd-radius-sm);
                background: var(--rd-bg-invers); color: var(--rd-text-invers); font-size: var(--rd-fs-caption);
                font-variant-numeric: tabular-nums; pointer-events: none; }
.system__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rd-space-3); align-items: center; }
.system__dienste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rd-space-2); }
.system__dienste li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--rd-radius-pill);
                      background: var(--rd-bg-alt); font-size: var(--rd-fs-caption); color: var(--rd-text-stark); }
.system__dienste li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rd-text-schwach); }
.system__dienste li[data-an="true"]::before { background: var(--rd-success); }
.system__stand { font-size: var(--rd-fs-caption); color: var(--rd-text-schwach); }

.arbeitsflaeche { display: grid; gap: var(--rd-space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .arbeitsflaeche { grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); }
  .formular { position: sticky; top: calc(var(--ws-kopfhoehe) + var(--rd-space-5));
              max-height: calc(100dvh - var(--ws-kopfhoehe) - var(--rd-space-8)); overflow-y: auto; }
}

/* ── Formular ── */
.formular { display: grid; gap: var(--rd-space-5); }
.formular__titel, .galerie__titel { font-family: var(--rd-font-headline); font-weight: 700; color: var(--rd-text-stark);
                                    font-size: 1.5rem; line-height: 1.25; }
.feld { border: 0; padding: 0; min-width: 0; display: grid; gap: var(--rd-space-2); }
.feld__label { font-family: var(--rd-font-headline); font-weight: 700; font-size: var(--rd-fs-small);
               color: var(--rd-text-stark); padding: 0; }
.feld textarea { width: 100%; min-height: 132px; resize: vertical; padding: var(--rd-space-3) var(--rd-space-4);
                 font: inherit; font-size: var(--rd-fs-small); line-height: var(--rd-lh-small); color: var(--rd-text-stark);
                 background: var(--rd-bg); border: 1px solid var(--rd-linie-stark); border-radius: var(--rd-radius-sm);
                 transition: border-color var(--rd-dur-schnell) var(--rd-ease); }
.feld textarea:hover { border-color: var(--rd-text-schwach); }
.feld textarea:focus-visible { border-color: var(--rd-orange); outline-offset: 0; }
.feld textarea[aria-invalid="true"] { border-color: var(--rd-error); }
.feld__fuss { display: flex; justify-content: space-between; gap: var(--rd-space-3); }
.feld__hilfe, .feld__zaehler, .formular__schaetzung { font-size: var(--rd-fs-caption); line-height: var(--rd-lh-caption);
                                                      color: var(--rd-text-schwach); }
.feld__zaehler { flex: none; font-variant-numeric: tabular-nums; }
.feld__fehler, .karte__fehler { font-size: var(--rd-fs-caption); color: var(--rd-error); }

/* Stil-Kacheln: Radio-Buttons mit Beispielbild */
.stile { display: grid; gap: var(--rd-space-4); }
.stile__gruppe { display: grid; gap: var(--rd-space-2); }
.stile__titel { font-size: var(--rd-fs-caption); color: var(--rd-text-schwach); }
.stile__raster { display: grid; gap: var(--rd-space-2); grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.stil { position: relative; }
.stil input, .segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stil label { display: grid; gap: 6px; cursor: pointer; padding: 4px; border-radius: var(--rd-radius-md);
              border: 2px solid transparent; transition: border-color var(--rd-dur-schnell) var(--rd-ease); }
.stil img, .stil__leer { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px;
                         background: var(--rd-bg-alt); }
.stil__leer { display: grid; place-items: center; color: var(--rd-text-schwach); border: 1px dashed var(--rd-linie-stark); }
.stil span { font-family: var(--rd-font-headline); font-size: var(--rd-fs-caption); line-height: 1.2;
             color: var(--rd-text-stark); text-align: center; overflow-wrap: anywhere; }
.stil label:hover { border-color: var(--rd-linie-stark); }
.stil input:checked + label { border-color: var(--rd-orange); background: var(--rd-orange-flaeche); }
:root[data-theme="dunkel"] .stil input:checked + label { background: var(--rd-bg-alt); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .stil input:checked + label { background: var(--rd-bg-alt); } }
.stil input:focus-visible + label { outline: 3px solid var(--rd-orange); outline-offset: 2px; }

/* Segmente: Format, Qualität, Anzahl */
.segmente { display: grid; gap: var(--rd-space-2); grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.segmente--klein, #formate { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segment { position: relative; }
.segment label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
                 min-height: 48px; height: 100%; padding: 6px 8px; cursor: pointer; text-align: center;
                 font-family: var(--rd-font-headline); font-weight: 700; font-size: var(--rd-fs-caption); line-height: 1.2;
                 color: var(--rd-text-stark); background: var(--rd-bg); border: 1px solid var(--rd-linie-stark);
                 border-radius: var(--rd-radius-sm); transition: border-color var(--rd-dur-schnell) var(--rd-ease); }
.segment small { font-family: var(--rd-font-body); font-weight: 400; color: var(--rd-text-schwach); }
.segment label:hover { border-color: var(--rd-text-schwach); }
.segment input:checked + label { border: 2px solid var(--rd-orange); }
.segment input:focus-visible + label { outline: 3px solid var(--rd-orange); outline-offset: 2px; }
.segment__form { display: block; border: 1.75px solid currentColor; border-radius: 2px; margin-bottom: 2px; }

/* Schalter „Gleich als 3D-Modell" */
.schalter { position: relative; }
.schalter__eingabe { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter__label { display: flex; gap: var(--rd-space-3); align-items: flex-start; cursor: pointer; min-height: 44px;
                   padding: var(--rd-space-3); border: 1px solid var(--rd-linie-stark); border-radius: var(--rd-radius-md); }
.schalter__spur { position: relative; flex: none; width: 44px; height: 26px; margin-top: 2px; border-radius: var(--rd-radius-pill);
                  background: var(--rd-linie-stark); transition: background-color var(--rd-dur-standard) var(--rd-ease); }
.schalter__spur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
                         background: #fff; box-shadow: var(--rd-shadow-sm); transition: transform var(--rd-dur-standard) var(--rd-ease); }
.schalter__text { display: grid; gap: 2px; }
.schalter__text strong { font-family: var(--rd-font-headline); font-size: var(--rd-fs-small); color: var(--rd-text-stark); }
.schalter__text small { font-size: var(--rd-fs-caption); line-height: var(--rd-lh-caption); color: var(--rd-text-schwach); }
.schalter__eingabe:checked + .schalter__label { border-color: var(--rd-orange); }
.schalter__eingabe:checked + .schalter__label .schalter__spur { background: var(--rd-orange-text); }
.schalter__eingabe:checked + .schalter__label .schalter__spur::after { transform: translateX(18px); }
.schalter__eingabe:focus-visible + .schalter__label { outline: 3px solid var(--rd-orange); outline-offset: 2px; }
.feld:disabled { opacity: .45; }
.karte__quelle { font-size: var(--rd-fs-caption); color: var(--rd-text-schwach); margin-top: -4px; }

.formular__senden { width: 100%; }
/* Styleguide 6.1: auf dunklem Grund weiße Fläche mit blauer Schrift statt Orange */
:root[data-theme="dunkel"] .formular__senden,
:root[data-theme="dunkel"] .knopf-3d[data-lage="fertig"] { background: #fff; border-color: #fff; color: var(--rd-blau); }
:root[data-theme="dunkel"] .formular__senden:hover,
:root[data-theme="dunkel"] .knopf-3d[data-lage="fertig"]:hover { background: var(--rd-blau-hell); border-color: var(--rd-blau-hell); color: var(--rd-blau); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .formular__senden,
  :root:not([data-theme="hell"]) .knopf-3d[data-lage="fertig"] { background: #fff; border-color: #fff; color: var(--rd-blau); }
  :root:not([data-theme="hell"]) .formular__senden:hover,
  :root:not([data-theme="hell"]) .knopf-3d[data-lage="fertig"]:hover { background: var(--rd-blau-hell); border-color: var(--rd-blau-hell); color: var(--rd-blau); }
}
.formular__senden svg { width: 20px; height: 20px; }
.formular__schaetzung { text-align: center; margin-top: calc(-1 * var(--rd-space-3)); }

/* ── Galerie ── */
.galerie { display: grid; gap: var(--rd-space-4); min-width: 0; }
.galerie__raster { list-style: none; padding: 0; display: grid; gap: var(--rd-space-5);
                   grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.galerie__leer { display: grid; justify-items: center; gap: var(--rd-space-2); text-align: center;
                 padding: var(--rd-space-10) var(--rd-space-5); border: 1px dashed var(--rd-linie-stark);
                 border-radius: var(--rd-radius-lg); color: var(--rd-text-schwach); background: var(--rd-bg); }
.galerie__leer svg { width: 48px; height: 48px; color: var(--rd-akzent); }
.galerie__leer h3 { font-family: var(--rd-font-headline); color: var(--rd-text-stark); font-size: 1.25rem; }
.galerie__mehr { justify-self: center; }

.karte { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--rd-bg); border: 1px solid var(--rd-linie);
         border-radius: var(--rd-radius-lg); box-shadow: var(--rd-shadow-sm); overflow: hidden;
         transition: box-shadow var(--rd-dur-standard) var(--rd-ease); }
.karte:hover { box-shadow: var(--rd-shadow-md); }
.karte__bildrahmen { position: relative; aspect-ratio: 1; background: var(--rd-bg-alt); }
.karte[data-format="quer"] .karte__bildrahmen { aspect-ratio: 3 / 2; }
.karte[data-format="breit"] .karte__bildrahmen { aspect-ratio: 16 / 9; }
.karte[data-format="hoch"] .karte__bildrahmen { aspect-ratio: 2 / 3; }
.karte__bildknopf { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.karte__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.karte__platzhalter { position: absolute; inset: 0; display: grid; place-items: center;
                      background: linear-gradient(110deg, var(--rd-bg-alt) 30%, var(--rd-linie) 50%, var(--rd-bg-alt) 70%) 0 0 / 300% 100%; }
.karte[data-zustand="fertig"] .karte__platzhalter { display: none; }
.karte[data-zustand="wartet"] .karte__platzhalter,
.karte[data-zustand="laeuft"] .karte__platzhalter { animation: schimmer 1.6s linear infinite; }
.karte[data-zustand="fehler"] .karte__platzhalter { background: var(--rd-bg-alt); }
.karte__zustand { font-family: var(--rd-font-headline); font-weight: 700; font-size: var(--rd-fs-caption);
                  color: var(--rd-text-stark); background: var(--rd-bg); padding: 6px 14px; border-radius: var(--rd-radius-pill);
                  box-shadow: var(--rd-shadow-sm); }
@keyframes schimmer { to { background-position: -100% 0; } }

.karte__inhalt { display: flex; flex-direction: column; gap: var(--rd-space-2); padding: var(--rd-space-4); flex: 1; }
.karte__inhalt > * { flex: none; }
.karte__inhalt > .karte__fuss { margin-top: auto; }
.karte__inhalt > .karte__aktionen { margin-top: 0; }
.tv__karte > .karte { min-height: 100%; }
.karte__zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--rd-space-2); }
.karte__zeit { font-size: var(--rd-fs-caption); color: var(--rd-text-schwach); font-variant-numeric: tabular-nums; }
.karte__beschreibung { font-size: var(--rd-fs-caption); line-height: var(--rd-lh-caption); color: var(--rd-text);
                       display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.karte__aktionen { display: flex; align-items: center; gap: var(--rd-space-1); margin-top: auto; padding-top: var(--rd-space-2); }

.icon-knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0;
              color: var(--rd-text-stark); background: transparent; border: 1px solid transparent;
              border-radius: var(--rd-radius-pill); cursor: pointer;
              transition: background-color var(--rd-dur-schnell) var(--rd-ease); }
.icon-knopf:hover { background: var(--rd-bg-alt); }
.icon-knopf[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.icon-knopf svg { width: 22px; height: 22px; }

.knopf-3d { display: inline-flex; align-items: center; gap: var(--rd-space-2); margin-left: auto; min-height: 44px;
            padding: 8px 16px; font-family: var(--rd-font-headline); font-weight: 700; font-size: var(--rd-fs-caption);
            color: var(--rd-btn-sekundaer); background: transparent; border: 2px solid var(--rd-btn-sekundaer);
            border-radius: var(--rd-radius-pill); cursor: pointer;
            transition: background-color var(--rd-dur-standard) var(--rd-ease), color var(--rd-dur-standard) var(--rd-ease); }
.knopf-3d:hover:not(:disabled) { background: var(--rd-btn-sekundaer); color: var(--rd-bg); }
.knopf-3d:disabled { opacity: .6; cursor: progress; }
.knopf-3d[data-lage="fertig"] { background: var(--rd-orange-text); border-color: var(--rd-orange-text); color: #fff; }
.knopf-3d[data-lage="fertig"]:hover { background: var(--rd-blau); border-color: var(--rd-blau); }
.knopf-3d svg { width: 20px; height: 20px; }

/* Werkzeuge und Ergebnisse auf der Karte */
.karte__werkzeuge { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--rd-space-2); border-top: 1px solid var(--rd-linie); }
.werkzeug-knopf { min-height: 36px; padding: 6px 12px; font-family: var(--rd-font-headline); font-weight: 700;
                  font-size: var(--rd-fs-caption); color: var(--rd-akzent-text); background: transparent;
                  border: 1px solid var(--rd-linie-stark); border-radius: var(--rd-radius-pill); cursor: pointer; }
.werkzeug-knopf:hover:not(:disabled) { border-color: var(--rd-akzent-text); }
.werkzeug-knopf:disabled { opacity: .5; cursor: progress; }
@media (pointer: coarse) { .werkzeug-knopf { min-height: 44px; } }
.karte__extras { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.karte__extras:empty { display: none; }
.extra { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 0;
         border-radius: var(--rd-radius-pill); background: var(--rd-bg-alt); color: var(--rd-text-stark);
         font-family: var(--rd-font-headline); font-size: var(--rd-fs-caption); cursor: pointer; }
.extra::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rd-success); }
.extra[data-zustand="wartet"]::before, .extra[data-zustand="laeuft"]::before { background: var(--rd-warning); }
.extra[data-zustand="fehler"]::before { background: var(--rd-error); }
.extra:disabled { cursor: progress; }
@media (pointer: coarse) { .extra { min-height: 44px; } }

/* Ergebnis-Dialog: Transparenz auf Schachbrett sichtbar machen */
.schachbrett { border-radius: var(--rd-radius-md); overflow: hidden;
               background: repeating-conic-gradient(var(--rd-bg-alt) 0% 25%, var(--rd-bg) 0% 50%) 50% / 24px 24px; }
.schachbrett .dialog__bild { background: transparent; image-rendering: auto; }
.schachbrett[data-pixel="true"] .dialog__bild { image-rendering: pixelated; }
.ergebnis-dateien { list-style: none; padding: 0; display: grid; gap: var(--rd-space-2);
                    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ergebnis-dateien a { display: grid; gap: 4px; justify-items: center; padding: var(--rd-space-2); text-align: center;
                      border: 1px solid var(--rd-linie); border-radius: var(--rd-radius-md); color: var(--rd-text-stark);
                      font-size: var(--rd-fs-caption); text-decoration: none; }
.ergebnis-dateien a:hover { border-color: var(--rd-akzent-text); }
.ergebnis-dateien img { width: 72px; height: 72px; object-fit: contain;
                        background: repeating-conic-gradient(var(--rd-bg-alt) 0% 25%, var(--rd-bg) 0% 50%) 50% / 12px 12px; }
.ergebnis-dateien svg { width: 40px; height: 72px; color: var(--rd-text-schwach); }

/* ── Dialoge ── */
.dialog { margin: auto; width: min(960px, calc(100vw - 2 * var(--rd-space-4))); max-height: calc(100dvh - 2 * var(--rd-space-4));
          padding: var(--rd-space-5); border: 1px solid var(--rd-linie); border-radius: var(--rd-radius-lg);
          background: var(--rd-bg); color: var(--rd-text); box-shadow: var(--rd-shadow-lg); }
.dialog::backdrop { background: rgba(9, 38, 54, .72); }
.dialog[open] { display: grid; gap: var(--rd-space-4); }
.dialog__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--rd-space-3); }
.dialog__kopf h2 { font-family: var(--rd-font-headline); font-size: 1.25rem; color: var(--rd-text-stark); }
.dialog__bild { width: 100%; max-height: 68dvh; object-fit: contain; border-radius: var(--rd-radius-md); background: var(--rd-bg-alt); }
.dialog__buehne { height: min(62dvh, 640px); border-radius: var(--rd-radius-md); overflow: hidden;
                  background: radial-gradient(circle at 50% 40%, var(--rd-bg) 0%, var(--rd-bg-alt) 75%); }
.dialog__buehne model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.dialog__text { font-size: var(--rd-fs-caption); color: var(--rd-text-schwach); }
.dialog__aktionen { display: flex; flex-wrap: wrap; gap: var(--rd-space-3); justify-content: flex-end; }

@media (max-width: 600px) {
  .kopf__name span { display: none; }
  .seite { padding-top: var(--rd-space-6); }
  .rd-card.formular { padding: var(--rd-space-4); }
  .stile__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ════════ Werkstatt-Ausbau: Benutzer, Ordner, Warteschlange, Bearbeitungsstand ════════ */

.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Kopf rechts ── */
.kopf__rechts { display: flex; align-items: center; gap: var(--rd-space-2); margin-left: auto; }
.status { cursor: pointer; background: var(--rd-bg); min-height: 44px; }
.status:hover { border-color: var(--rd-linie-stark); }
.status__zahl { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center;
                border-radius: var(--rd-radius-pill); background: var(--rd-blau); color: #fff;
                font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-theme="dunkel"] .status__zahl { background: var(--rd-info); color: var(--rd-nachtblau); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .status__zahl { background: var(--rd-info); color: var(--rd-nachtblau); } }
.status[data-lage="belegt"] .status__punkt { animation: puls 1.4s var(--rd-ease) infinite; }
@keyframes puls { 50% { opacity: .35; transform: scale(.8); } }

.benutzer-knopf { display: inline-flex; align-items: center; gap: var(--rd-space-2); min-height: 44px; padding: 4px 12px 4px 4px;
                  border: 1px solid var(--rd-linie); border-radius: var(--rd-radius-pill); background: var(--rd-bg);
                  color: var(--rd-text-stark); font-family: var(--rd-font-headline); font-size: var(--rd-fs-caption); cursor: pointer; }
.benutzer-knopf:hover { border-color: var(--rd-linie-stark); }
.benutzer-knopf__kreis { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
                         background: var(--rd-orange-flaeche); color: var(--rd-akzent-text); font-weight: 700; }
.benutzer-knopf__name:empty, .benutzer-knopf__kreis:empty { display: none; }

/* ── Warteschlange: klappt bei Mouseover, Fokus oder Tippen auf ── */
.klapp { position: relative; }
.klapp__tafel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(380px, calc(100vw - 2 * var(--rd-space-4)));
                   max-height: min(70dvh, 560px); overflow-y: auto; padding: var(--rd-space-4);
                   background: var(--rd-bg); border: 1px solid var(--rd-linie); border-radius: var(--rd-radius-lg);
                   box-shadow: var(--rd-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
                   transform-origin: top right;
                   transition: opacity var(--rd-dur-standard) var(--rd-ease), transform var(--rd-dur-standard) var(--rd-ease),
                               visibility 0s linear var(--rd-dur-standard); }
.klapp::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } /* Brücke für die Maus */
.klapp:hover .klapp__tafel, .klapp:focus-within .klapp__tafel, .klapp--offen .klapp__tafel {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.klapp__titel { font-family: var(--rd-font-headline); font-size: 1rem; color: var(--rd-text-stark); margin-bottom: var(--rd-space-3); }
.schlange__liste { list-style: none; padding: 0; display: grid; gap: var(--rd-space-2); }
.schlange__eintrag { display: grid; gap: 2px; padding: var(--rd-space-3); border-radius: var(--rd-radius-md);
                     background: var(--rd-bg-alt); border-left: 4px solid var(--rd-linie-stark); }
.schlange__eintrag[data-zustand="laeuft"] { border-left-color: var(--rd-orange); }
.schlange__zeile { display: flex; justify-content: space-between; gap: var(--rd-space-2); align-items: baseline;
                   font-size: var(--rd-fs-caption); color: var(--rd-text-stark); }
.schlange__zeit { color: var(--rd-text-schwach); font-variant-numeric: tabular-nums; white-space: nowrap; }
.schlange__eintrag[data-zustand="laeuft"] .schlange__zeit { color: var(--rd-akzent-text); font-weight: 700; }
.schlange__text { font-size: var(--rd-fs-caption); color: var(--rd-text); overflow: hidden; text-overflow: ellipsis;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.schlange__wer { font-size: 12px; color: var(--rd-text-schwach); }
.schlange__leer { font-size: var(--rd-fs-caption); color: var(--rd-text-schwach); }

/* ── Formularfelder ── */
.auswahl, .eingabe { width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; font-size: var(--rd-fs-small);
                     color: var(--rd-text-stark); background: var(--rd-bg); border: 1px solid var(--rd-linie-stark);
                     border-radius: var(--rd-radius-sm); }
.auswahl:hover, .eingabe:hover { border-color: var(--rd-text-schwach); }
.auswahl:focus-visible, .eingabe:focus-visible { border-color: var(--rd-orange); outline-offset: 0; }
.eingabe[aria-invalid="true"] { border-color: var(--rd-error); }
.segmente--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zahl-feld { display: flex; align-items: center; gap: var(--rd-space-2); }
.zahl-feld .eingabe { width: 96px; font-variant-numeric: tabular-nums; }

/* ── Ordnerleiste ── */
.ordnerleiste { display: flex; flex-wrap: wrap; gap: var(--rd-space-2); }
@media (max-width: 600px) {
  .ordnerleiste { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scroll-snap-type: x proximity; }
}
.ordner-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
               scroll-snap-align: start; border: 1px solid var(--rd-linie-stark); border-radius: var(--rd-radius-pill);
               background: var(--rd-bg); color: var(--rd-text-stark); font-family: var(--rd-font-headline);
               font-size: var(--rd-fs-caption); cursor: pointer; white-space: nowrap;
               transition: background-color var(--rd-dur-schnell) var(--rd-ease), border-color var(--rd-dur-schnell) var(--rd-ease); }
.ordner-chip:hover { border-color: var(--rd-text-schwach); }
.ordner-chip[aria-pressed="true"] { background: var(--rd-blau); border-color: var(--rd-blau); color: #fff; }
:root[data-theme="dunkel"] .ordner-chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--rd-blau); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .ordner-chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--rd-blau); } }
.ordner-chip svg { width: 16px; height: 16px; }
.ordner-chip__zahl { font-family: var(--rd-font-body); font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.ordner-chip--neu { border-style: dashed; color: var(--rd-akzent-text); }
.ordner-chip--trenner { width: 1px; min-height: 28px; padding: 0; border: 0; background: var(--rd-linie); align-self: center; cursor: default; }
.ordner-chip__bearbeiten { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: -8px;
                           border-radius: 50%; }
.ordner-chip__bearbeiten:hover { background: rgba(255,255,255,.2); }
@media (pointer: coarse) { .ordner-chip { min-height: 44px; } }

/* ── Karte: Bearbeitungsstand deutlich zeigen ── */
.karte[data-laeuft="true"] { border-color: var(--rd-orange); box-shadow: 0 0 0 1px var(--rd-orange), var(--rd-shadow-md); }
.karte__lauf { position: absolute; inset: auto 0 0 0; z-index: 2; display: none; align-items: center; gap: var(--rd-space-2);
               padding: 28px var(--rd-space-3) var(--rd-space-3); color: #fff; font-family: var(--rd-font-headline);
               font-size: var(--rd-fs-caption); background: linear-gradient(to top, rgba(9, 38, 54, .92), rgba(9, 38, 54, 0)); }
.karte[data-laeuft="true"] .karte__lauf { display: flex; }
.karte__lauftext { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte__laufzeit { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .85; white-space: nowrap; }
.karte__spinner { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.3);
                  border-top-color: var(--rd-orange); animation: drehen .9s linear infinite; }
.karte[data-laufzustand="wartet"] .karte__spinner { border-top-color: #fff; animation-duration: 2.4s; }
@keyframes drehen { to { transform: rotate(360deg); } }
/* Laufender Rand: wandernder Lichtschein unten am Bild */
.karte[data-laeuft="true"] .karte__bildrahmen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--rd-orange), transparent) 0 0 / 40% 100% no-repeat;
  animation: lauflicht 1.6s var(--rd-ease) infinite; }
@keyframes lauflicht { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.karte__oben { position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start;
               gap: var(--rd-space-2); padding: var(--rd-space-2); pointer-events: none; }
.karte__oben > * { pointer-events: auto; }
.karte__marken { display: flex; gap: 4px; flex-wrap: wrap; margin-left: 40px; }
.marke { padding: 2px 8px; border-radius: var(--rd-radius-pill); background: rgba(9, 38, 54, .78); color: #fff;
         font-family: var(--rd-font-headline); font-size: 12px; font-weight: 700; backdrop-filter: blur(4px); }
.marke--privat::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px;
                         border: 1.5px solid currentColor; border-radius: 2px; vertical-align: 0; }
.karte__eck { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
              border-radius: 50%; background: rgba(9, 38, 54, .72); color: #fff; cursor: pointer; backdrop-filter: blur(4px);
              opacity: 0; transform: scale(.9);
              transition: opacity var(--rd-dur-schnell) var(--rd-ease), transform var(--rd-dur-schnell) var(--rd-ease),
                          background-color var(--rd-dur-schnell) var(--rd-ease); }
.karte__eck svg { width: 20px; height: 20px; }
.karte:hover .karte__eck, .karte:focus-within .karte__eck, .karte__eck:focus-visible { opacity: 1; transform: none; }
.karte__eck[data-aktion="loeschen"]:hover { background: var(--rd-error); }
.karte__eck[data-aktion="wiederherstellen"] { opacity: 1; transform: none; background: var(--rd-blau); }
@media (hover: none) { .karte__eck { opacity: 1; transform: none; } }
.karte[data-geloescht="true"] .karte__bild { filter: grayscale(.85); opacity: .7; }

.karte__ordner { font-size: 12px; color: var(--rd-text-schwach); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte__ordner::before { content: ""; display: inline-block; width: 10px; height: 8px; margin-right: 5px;
                         border: 1.5px solid currentColor; border-radius: 1px 3px 1px 1px; vertical-align: 0; }
.karte__zeiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rd-space-2);
                 padding: var(--rd-space-2) 0; border-top: 1px solid var(--rd-linie); margin: 0; }
.karte__zeiten div { min-width: 0; }
.karte__zeiten dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--rd-text-schwach); }
.karte__zeiten dd { margin: 0; font-size: var(--rd-fs-caption); color: var(--rd-text-stark); font-variant-numeric: tabular-nums; white-space: nowrap; }

.karte__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--rd-space-2); flex-wrap: wrap; }
.behalten { position: relative; display: inline-flex; align-items: center; gap: var(--rd-space-2); min-height: 44px; cursor: pointer;
            font-family: var(--rd-font-headline); font-size: var(--rd-fs-caption); color: var(--rd-text-stark); }
.behalten__eingabe { position: absolute; opacity: 0; width: 1px; height: 1px; }
.behalten__spur { position: relative; width: 38px; height: 22px; border-radius: var(--rd-radius-pill); background: var(--rd-linie-stark);
                  transition: background-color var(--rd-dur-standard) var(--rd-ease); }
.behalten__spur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
                         background: #fff; box-shadow: var(--rd-shadow-sm); transition: transform var(--rd-dur-standard) var(--rd-ease); }
.behalten__eingabe:checked + .behalten__spur { background: var(--rd-success); }
.behalten__eingabe:checked + .behalten__spur::after { transform: translateX(16px); }
.behalten__eingabe:focus-visible + .behalten__spur { outline: 3px solid var(--rd-orange); outline-offset: 2px; }
.behalten__eingabe:disabled + .behalten__spur { opacity: .4; }
.karte__ablauf { font-size: 12px; color: var(--rd-text-schwach); font-variant-numeric: tabular-nums; }
.karte__ablauf[data-bald="true"] { color: var(--rd-warning-text, var(--rd-akzent-text)); font-weight: 700; }

/* ── Dialoge (Formulare) ── */
.dialog--schmal { width: min(480px, calc(100vw - 2 * var(--rd-space-4))); }
.dialog--mittel { width: min(680px, calc(100vw - 2 * var(--rd-space-4))); }
.dialog__formular { display: grid; gap: var(--rd-space-4); }
.dialog__titel { font-family: var(--rd-font-headline); font-size: 1.25rem; color: var(--rd-text-stark); }
.dialog__links { margin-right: auto; color: var(--rd-error); }
.dialog[open] { animation: dialog-auf var(--rd-dur-standard) var(--rd-ease); }
.dialog[open]::backdrop { animation: hintergrund-auf var(--rd-dur-standard) var(--rd-ease); }
@keyframes dialog-auf { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes hintergrund-auf { from { opacity: 0; } }

.vorlagen { border: 0; padding: 0; margin: 0; display: grid; gap: var(--rd-space-2);
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.vorlage { position: relative; }
.vorlage input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vorlage label { display: grid; gap: 6px; height: 100%; padding: var(--rd-space-3); cursor: pointer;
                 border: 1px solid var(--rd-linie-stark); border-radius: var(--rd-radius-md); }
.vorlage label:hover { border-color: var(--rd-text-schwach); }
.vorlage input:checked + label { border: 2px solid var(--rd-orange); padding: calc(var(--rd-space-3) - 1px); }
.vorlage input:focus-visible + label { outline: 3px solid var(--rd-orange); outline-offset: 2px; }
.vorlage strong { font-family: var(--rd-font-headline); color: var(--rd-text-stark); }
.vorlage ul { list-style: none; padding: 0; display: grid; gap: 2px; font-size: 12px; color: var(--rd-text); }
.vorlage li span { color: var(--rd-text-schwach); }
.teile-liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.teile-liste li { padding: 4px 10px; border-radius: var(--rd-radius-pill); background: var(--rd-bg-alt); font-size: var(--rd-fs-caption);
                  color: var(--rd-text-stark); }
.teile-liste li span { color: var(--rd-text-schwach); }

@media (max-width: 600px) {
  .benutzer-knopf__name { display: none; }
  .benutzer-knopf { padding-right: 4px; }
  .kopf__rechts { width: 100%; justify-content: flex-end; margin-top: -8px; padding-bottom: var(--rd-space-2); }
}

/* ── Modus: Beschreiben oder eigenes Bild ── */
.formular[data-modus="hochladen"] .nur-erzeugen, .formular:not([data-modus="hochladen"]) .nur-hochladen { display: none; }
.ablage { position: relative; display: grid; justify-items: center; gap: var(--rd-space-2); padding: var(--rd-space-6) var(--rd-space-4);
          text-align: center; cursor: pointer; border: 2px dashed var(--rd-linie-stark); border-radius: var(--rd-radius-md);
          background: var(--rd-bg-alt); color: var(--rd-text-stark);
          transition: border-color var(--rd-dur-schnell) var(--rd-ease), background-color var(--rd-dur-schnell) var(--rd-ease); }
.ablage:hover, .ablage[data-ziehen="true"] { border-color: var(--rd-orange); background: var(--rd-orange-flaeche); }
:root[data-theme="dunkel"] .ablage[data-ziehen="true"] { background: var(--rd-bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .ablage[data-ziehen="true"] { background: var(--rd-bg); } }
.ablage:focus-within { outline: 3px solid var(--rd-orange); outline-offset: 2px; }
.ablage__icon { width: 40px; height: 40px; color: var(--rd-akzent-text); }
.ablage[data-gefuellt="true"] .ablage__icon { display: none; }
.ablage__vorschau { max-height: 220px; max-width: 100%; border-radius: var(--rd-radius-sm); object-fit: contain;
                    box-shadow: var(--rd-shadow-sm); }
.ablage__text { font-family: var(--rd-font-headline); font-weight: 700; font-size: var(--rd-fs-small); overflow-wrap: anywhere; }
.ablage__hilfe { font-size: var(--rd-fs-caption); line-height: var(--rd-lh-caption); color: var(--rd-text-schwach); max-width: 36ch; }

/* Bild auf die Galerie ziehen */
.galerie { position: relative; }
.galerie[data-ziehen="true"]::after { content: attr(data-ablage-text); position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center; padding: var(--rd-space-6); text-align: center; border-radius: var(--rd-radius-lg);
  border: 3px dashed var(--rd-orange); background: rgba(9, 38, 54, .82); color: #fff;
  font-family: var(--rd-font-headline); font-weight: 700; font-size: 1.25rem; pointer-events: none; }

/* ── Listenansicht ── */
.liste__bild { width: 56px; height: 56px; object-fit: cover; border-radius: var(--rd-radius-sm); background: var(--rd-bg-alt); display: block; }
.zustand-marke { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--rd-radius-pill);
                 background: var(--rd-bg-alt); font-size: var(--rd-fs-caption); color: var(--rd-text-stark); white-space: nowrap; }
.zustand-marke::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rd-success); }
.zustand-marke[data-zustand="wartet"]::before { background: var(--rd-text-schwach); }
.zustand-marke[data-zustand="laeuft"]::before { background: var(--rd-orange); animation: puls 1.4s var(--rd-ease) infinite; }
.zustand-marke[data-zustand="fehler"]::before { background: var(--rd-error); }
.teile-liste__farbe { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: 0; }
.ergebnis-dateien li { display: grid; gap: 4px; }
.liste__bild { flex: none; min-width: 56px; }
.liste__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 240px; max-width: 420px; }
.galerie__tabelle td[data-key="stil"], .galerie__tabelle td[data-key="wer"], .galerie__tabelle td[data-key="ordner_name"] { white-space: nowrap; }

.dialog--frage { width: min(440px, calc(100vw - 2 * var(--rd-space-4))); }
.dialog__frage { font-size: var(--rd-fs-small); color: var(--rd-text-stark); line-height: var(--rd-lh-small); }

/* ════════ reDim-UIKit ════════ */

/* ── Kopf-Chip „System" mit Klapptafel ── */
.kopfchip { display: inline-flex; align-items: center; gap: var(--rd-space-2); min-height: 44px; padding: 6px 14px;
            border: 1px solid var(--rd-linie); border-radius: var(--rd-radius-pill); background: var(--rd-bg); cursor: pointer;
            font-family: var(--rd-font-headline); font-size: var(--rd-fs-caption); color: var(--rd-text-stark);
            font-variant-numeric: tabular-nums; white-space: nowrap; }
.kopfchip:hover { border-color: var(--rd-linie-stark); }
.kopfchip svg { width: 18px; height: 18px; color: var(--rd-text-schwach); }
.system__tafel { width: min(820px, calc(100vw - 2 * var(--rd-space-4))); max-height: min(80dvh, 720px); }
.system__tafel .system__kacheln { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); margin-bottom: var(--rd-space-4); }
@media (max-width: 1100px) { .kopfchip__text { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 720px) {
  .kopfchip__text { display: none; }
  .kopfchip { padding: 6px 12px; }
  .klapp__tafel { position: fixed; left: var(--rd-space-4); right: var(--rd-space-4); top: calc(var(--ws-kopfhoehe) + 56px); width: auto; }
}

/* ── Toasts: oben rechts gestapelt, Handy unten ── */
.toasts { position: fixed; z-index: 60; top: calc(var(--ws-kopfhoehe) + var(--rd-space-3)); right: max(var(--rd-space-4), env(safe-area-inset-right));
          display: flex; flex-direction: column; gap: var(--rd-space-2); width: min(420px, calc(100vw - 2 * var(--rd-space-4)));
          pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--rd-space-3); padding: var(--rd-space-3) var(--rd-space-2) var(--rd-space-3) var(--rd-space-4);
         border-radius: var(--rd-radius-md); box-shadow: var(--rd-shadow-lg); background: var(--rd-bg-invers); color: var(--rd-text-invers);
         border-left: 4px solid var(--rd-info); pointer-events: auto; animation: toast-rein var(--rd-dur-standard) var(--rd-ease); }
.toast[data-geht] { animation: toast-raus var(--rd-dur-standard) var(--rd-ease) forwards; }
.toast > svg { width: 22px; height: 22px; flex: none; }
.toast--erfolg { border-left-color: var(--rd-success); } .toast--erfolg > svg { color: var(--rd-success); }
.toast--warnung { border-left-color: var(--rd-warning); } .toast--warnung > svg { color: var(--rd-warning); }
.toast--fehler { border-left-color: var(--rd-error); } .toast--fehler > svg { color: var(--rd-error); }
.toast--info > svg { color: var(--rd-info); }
.toast__text { flex: 1; font-size: var(--rd-fs-small); line-height: 1.4; }
.toast__aktion { flex: none; min-height: 36px; padding: 4px 12px; border: 1px solid currentColor; border-radius: var(--rd-radius-pill);
                 background: transparent; color: inherit; font-family: var(--rd-font-headline); font-weight: 700;
                 font-size: var(--rd-fs-caption); cursor: pointer; }
.toast__aktion:hover { background: rgba(255, 255, 255, .12); }
.toast__zu { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
             background: transparent; color: inherit; opacity: .75; cursor: pointer; }
.toast__zu:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.toast__zu svg { width: 18px; height: 18px; }
@keyframes toast-rein { from { opacity: 0; transform: translateX(24px); } }
@keyframes toast-raus { to { opacity: 0; transform: translateX(24px); } }
@media (max-width: 600px) {
  .toasts { top: auto; bottom: max(var(--rd-space-4), env(safe-area-inset-bottom)); left: var(--rd-space-4); right: var(--rd-space-4); width: auto; }
  @keyframes toast-rein { from { opacity: 0; transform: translateY(16px); } }
  @keyframes toast-raus { to { opacity: 0; transform: translateY(16px); } }
}

/* ── Tooltip (schwebende Ebene, siehe uikit.js) ── */
.tipp { position: fixed; z-index: 80; max-width: min(320px, calc(100vw - 16px)); padding: 6px 10px; border-radius: var(--rd-radius-sm);
        background: var(--rd-bg-invers); color: var(--rd-text-invers); box-shadow: var(--rd-shadow-md);
        font-size: var(--rd-fs-caption); line-height: 1.4; pointer-events: none; animation: tipp-rein 120ms var(--rd-ease); }
@keyframes tipp-rein { from { opacity: 0; transform: translateY(4px); } }
.tipp[data-seite="unten"] { animation-name: tipp-rein-unten; }
@keyframes tipp-rein-unten { from { opacity: 0; transform: translateY(-4px); } }

/* ── Spinner in Knöpfen während der Arbeit ── */
button[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
button[aria-busy="true"] > * { visibility: hidden; }
button[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--rd-linie-stark); border-top-color: var(--rd-orange); animation: drehen .7s linear infinite; }
.rd-btn[aria-busy="true"]::after { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }

/* ── Skeleton beim ersten Laden ── */
.skelett { display: grid; gap: var(--rd-space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.skelett__karte { display: grid; gap: var(--rd-space-3); padding-bottom: var(--rd-space-4); border-radius: var(--rd-radius-lg);
                  background: var(--rd-bg); border: 1px solid var(--rd-linie); overflow: hidden; }
.skelett__bild, .skelett__zeile { display: block; background: linear-gradient(90deg, var(--rd-bg-alt) 25%, var(--rd-linie) 50%, var(--rd-bg-alt) 75%) 0 0 / 200% 100%;
                                  animation: skelett 1.5s linear infinite; }
.skelett__bild { aspect-ratio: 1; }
.skelett__zeile { height: 12px; margin-inline: var(--rd-space-4); border-radius: 6px; }
.skelett__zeile--kurz { width: 55%; }
@keyframes skelett { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── EmptyState ── */
.leer { display: grid; justify-items: center; gap: var(--rd-space-2); text-align: center; padding: var(--rd-space-10) var(--rd-space-5);
        border: 1px dashed var(--rd-linie-stark); border-radius: var(--rd-radius-lg); background: var(--rd-bg); }
.leer__icon { width: 48px; height: 48px; color: var(--rd-akzent-text); margin-bottom: var(--rd-space-2); }
.leer__titel { font-family: var(--rd-font-headline); font-size: 1.25rem; color: var(--rd-text-stark); }
.leer__text { max-width: 44ch; font-size: var(--rd-fs-small); color: var(--rd-text-schwach); margin-bottom: var(--rd-space-3); }

/* ── Seitenweite Ablage ── */
.seitenablage { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--rd-space-6);
                background: rgba(9, 38, 54, .78); backdrop-filter: blur(3px); animation: hintergrund-auf var(--rd-dur-schnell) var(--rd-ease); }
.seitenablage[hidden] { display: none; }
.seitenablage__innen { display: grid; justify-items: center; gap: var(--rd-space-3); width: min(560px, 100%); padding: var(--rd-space-10) var(--rd-space-6);
                       border: 3px dashed var(--rd-orange); border-radius: var(--rd-radius-lg); color: #fff; text-align: center; pointer-events: none; }
.seitenablage__innen svg { width: 56px; height: 56px; color: var(--rd-orange); }
.seitenablage__innen strong { font-family: var(--rd-font-headline); font-size: 1.5rem; }
.seitenablage__innen span { font-size: var(--rd-fs-small); opacity: .85; max-width: 44ch; }

/* ── Destruktiver Knopf, Bestätigung ── */
.rd-btn.rd-btn--gefahr { background: var(--rd-error); border-color: var(--rd-error); color: #fff; }
.rd-btn.rd-btn--gefahr:hover { filter: brightness(.92); }
.dialog--frage .dialog__kopf h2 { font-size: 1.125rem; }

/* ── Modals auf dem Handy als Vollbild (Rückfragen bleiben kompakt) ── */
@media (max-width: 640px) {
  dialog.dialog:not(.dialog--frage):modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0;
                                            padding: max(var(--rd-space-4), env(safe-area-inset-top)) var(--rd-space-4) max(var(--rd-space-4), env(safe-area-inset-bottom)); }
  dialog.dialog:not(.dialog--frage)[open] { align-content: start; overflow-y: auto; }
}
/* Toasts auf dem Handy über der schwebenden Auswahlleiste */
@media (max-width: 600px) { body:has(.tv__bulk-bar:not([hidden])) .toasts { bottom: 88px; } }
/* Platz unter der Galerie, damit die Leiste nichts verdeckt */
body:has(.tv__bulk-bar:not([hidden])) .seite { padding-bottom: 120px; }

/* ── Volle Bildschirmbreite (Andi, 19.10.2026): Kopf und Arbeitsfläche ohne feste Inhaltsbreite ── */
.kopf__innen, .seite { max-width: none; padding-inline: max(clamp(var(--rd-space-4), 2.5vw, 40px), env(safe-area-inset-left)); }
@media (min-width: 1024px) { .arbeitsflaeche { grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); } }

/* ════════ Schlagworte ════════ */
.karte__schlagworte, .schlagwort-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.wort { display: inline-flex; align-items: center; gap: 2px; min-height: 26px; padding: 2px 9px; border-radius: var(--rd-radius-pill);
        border: 1px solid var(--rd-linie); background: var(--rd-bg-alt); color: var(--rd-text-stark);
        font-family: var(--rd-font-body); font-size: 12px; line-height: 1.2; cursor: pointer;
        transition: border-color var(--rd-dur-schnell) var(--rd-ease); }
button.wort:hover { border-color: var(--rd-akzent-text); }
.wort--hand { border-color: var(--rd-akzent-text); }
.wort--art { color: var(--rd-text-schwach); }
.wort--bearbeiten { min-width: 26px; justify-content: center; color: var(--rd-akzent-text); border-style: dashed; background: transparent; }
@media (pointer: coarse) { .wort { min-height: 36px; padding-inline: 12px; } }
.schlagwort-liste .wort { cursor: default; padding-right: 2px; }
.wort__weg { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
             background: transparent; color: var(--rd-text-schwach); cursor: pointer; }
.wort__weg:hover { background: var(--rd-linie); color: var(--rd-error); }
.wort__weg svg { width: 14px; height: 14px; }
.feld-reihe { display: flex; gap: var(--rd-space-2); }
.feld-reihe .eingabe { flex: 1; min-width: 0; }

.schlagwortleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.schlagwortleiste__icon { display: grid; place-items: center; width: 28px; color: var(--rd-text-schwach); }
.schlagwortleiste__icon svg { width: 18px; height: 18px; }
.filterwort { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: var(--rd-radius-pill);
              border: 1px solid var(--rd-linie); background: transparent; color: var(--rd-text-stark); cursor: pointer;
              font-size: var(--rd-fs-caption); transition: background-color var(--rd-dur-schnell) var(--rd-ease), border-color var(--rd-dur-schnell) var(--rd-ease); }
.filterwort:hover { border-color: var(--rd-text-schwach); }
.filterwort__zahl { font-size: 11px; color: var(--rd-text-schwach); font-variant-numeric: tabular-nums; }
.filterwort[aria-pressed="true"] { background: var(--rd-orange-text); border-color: var(--rd-orange-text); color: #fff; }
.filterwort[aria-pressed="true"] .filterwort__zahl { color: rgba(255, 255, 255, .8); }
.filterwort--leise { border-color: transparent; color: var(--rd-akzent-text); font-family: var(--rd-font-headline); }
@media (pointer: coarse) { .filterwort { min-height: 44px; } }
@media (max-width: 600px) { .schlagwortleiste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }
.einleitung { overflow: hidden; max-height: 600px;
              transition: max-height 400ms var(--rd-ease), opacity 250ms var(--rd-ease), margin-bottom 400ms var(--rd-ease); }
.einleitung--geht { max-height: 0; opacity: 0; margin-bottom: 0; }

/* ── Export-Dialog ── */
.vorlage__text { font-size: var(--rd-fs-caption); color: var(--rd-text-schwach); }
.vorlage label[data-fertig="true"] strong::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px;
  border-radius: 50%; background: var(--rd-success); vertical-align: 2px; }

/* ── Überhitzungsschutz ── */
.status[data-lage="heiss"] .status__punkt { background: var(--rd-error); animation: puls 1.4s var(--rd-ease) infinite; }
.schlange__hitze { margin-bottom: var(--rd-space-3); padding: var(--rd-space-3); border-radius: var(--rd-radius-md);
                   border-left: 4px solid var(--rd-error); background: var(--rd-bg-alt); font-size: var(--rd-fs-caption);
                   line-height: 1.45; color: var(--rd-text-stark); }

/* ── Zugang von außen ── */
.dialog--anmelden { width: min(420px, calc(100vw - 2 * var(--rd-space-4))); padding: var(--rd-space-8) var(--rd-space-6); }
.dialog--anmelden .dialog__formular { gap: var(--rd-space-4); }
.dialog--anmelden::backdrop { background: var(--rd-bg-alt); }
.anmelden__logo { height: 32px; width: auto; justify-self: start; }
.anmelden__logo.logo--dunkel { display: none; }
:root[data-theme="dunkel"] .anmelden__logo.logo--hell { display: none; }
:root[data-theme="dunkel"] .anmelden__logo.logo--dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .anmelden__logo.logo--hell { display: none; }
  :root:not([data-theme="hell"]) .anmelden__logo.logo--dunkel { display: block; }
}
.konto-aktionen { display: flex; flex-wrap: wrap; gap: var(--rd-space-2); }
.rd-btn--abmelden { background: transparent; border: 1px solid var(--rd-linie-stark); color: var(--rd-text-stark); }
.konto-zugang { display: grid; gap: var(--rd-space-3); padding-top: var(--rd-space-4); border-top: 1px solid var(--rd-linie); }
.konto-zugang__titel { font-family: var(--rd-font-headline); font-size: 1rem; color: var(--rd-text-stark); }
@media (max-width: 640px) { .dialog--anmelden { padding: var(--rd-space-6) var(--rd-space-4); } }

/* ── Rechte: fehlende Rechte blenden die Bedienung aus (der Server prüft trotzdem) ── */
body.kein-bilder-erstellen .formular, body.kein-bilder-erstellen .arbeitsflaeche { grid-template-columns: minmax(0, 1fr); }
body.kein-bilder-erstellen .formular { display: none; }
body.kein-modelle-erstellen [data-aktion="3d"]:not([data-lage="fertig"]), body.kein-modelle-erstellen .seitenablage,
body.kein-modelle-erstellen #als3d, body.kein-modelle-erstellen .schalter, body.kein-modelle-erstellen #modus { display: none !important; }
body.kein-werkzeuge-nutzen .karte__werkzeuge { display: none !important; }
body.kein-eintraege-bearbeiten .karte__fuss, body.kein-eintraege-bearbeiten .karte__eck,
body.kein-eintraege-bearbeiten .tv__karte-wahl, body.kein-eintraege-bearbeiten .wort--bearbeiten { display: none !important; }
body.kein-ordner-verwalten [data-sicht="neu"], body.kein-ordner-verwalten [data-bearbeiten] { display: none !important; }
body.kein-einstellungen-aendern #einstellungen-knopf { display: none !important; }

/* ── Anmeldung in Schritten, 2FA ── */
.anmelden__schritt { display: grid; gap: var(--rd-space-4); }
.zweifaktor { display: grid; gap: var(--rd-space-3); }
.zweifaktor__qr { justify-self: center; padding: var(--rd-space-2); border-radius: var(--rd-radius-md); background: #fff; line-height: 0; }
/* Die Icon-Regel oben (dicke, runde Striche) würde die QR-Module verschmelzen lassen. */
.zweifaktor__qr svg { width: 200px; height: 200px; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; }
.zweifaktor__hand summary { cursor: pointer; font-size: var(--rd-fs-caption); color: var(--rd-akzent-text); }
.zweifaktor__hand code { display: block; margin-top: var(--rd-space-2); padding: var(--rd-space-2); border-radius: var(--rd-radius-sm);
                         background: var(--rd-bg-alt); font-size: var(--rd-fs-small); word-spacing: 4px; user-select: all; }
.backup-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rd-space-2); padding: var(--rd-space-3);
                margin: 0; list-style: none; border: 1px dashed var(--rd-linie-stark); border-radius: var(--rd-radius-md); }
.backup-codes code { font-size: var(--rd-fs-small); color: var(--rd-text-stark); letter-spacing: .04em; }
.konto-admin { justify-self: start; }

/* ── 3D-Daten ── */
.karte__3d { font-size: 12px; color: var(--rd-text-schwach); font-variant-numeric: tabular-nums; }
.modell-daten { display: grid; gap: var(--rd-space-2) var(--rd-space-4); margin: 0; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.modell-daten div { display: grid; gap: 2px; }
.modell-daten dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--rd-text-schwach); }
.modell-daten dd { margin: 0; font-size: var(--rd-fs-small); color: var(--rd-text-stark); font-variant-numeric: tabular-nums; }
.kopf-admin { text-decoration: none; color: var(--rd-text-stark); }
.kopf-admin svg { color: var(--rd-akzent-text); }
@media (max-width: 720px) { .kopf-admin .kopfchip__text { display: inline; } }