/* Grundlayout nach Foxtag-Muster, in eigener Farbidentitaet (nur Tokens verwenden). */
* { box-sizing: border-box; }
body { margin: 0; font: var(--font-basis)/1.5 system-ui, "Inter", sans-serif; color: var(--text); background: var(--weiss); }

.topbar { display: flex; align-items: stretch; background: var(--dunkelgraubraun); color: var(--weiss); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; color: var(--weiss); text-decoration: none; font-weight: 700; }
.brand-logo { height: 28px; }
.mainnav { display: flex; flex: 1; flex-wrap: wrap; }
.mainnav :is(a, button.editor-nav) { color: var(--weiss); text-decoration: none; padding: .8rem 1rem; border-bottom: 3px solid transparent; }
.mainnav :is(a, button.editor-nav).aktiv { background: var(--dunkelrot); border-bottom-color: var(--weiss); }
.topbar-right { display: flex; align-items: center; gap: .6rem; padding: 0 1rem; }
.userchip { opacity: .85; }
.btn-ghost { background: transparent; color: var(--weiss); border: 1px solid var(--weiss); border-radius: var(--radius); padding: .35rem .8rem; cursor: pointer; }
.topbar .btn-ghost:hover { background: var(--dunkel-dunkelrot); }

.inhalt { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
h1, h2 { color: var(--schiefergrau); }
a { color: var(--schiefergrau); }
.hinweis { background: var(--graubraun-schleier); border-left: 4px solid var(--dunkelgraubraun); padding: .6rem .8rem; border-radius: var(--radius); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.kachel { border: 1px solid var(--graubraun-linie); border-radius: var(--radius); padding: 1rem; background: var(--weiss); text-decoration: none; }
.kachel .zahl { font-size: 1.8rem; font-weight: 700; color: var(--schiefergrau); font-variant-numeric: tabular-nums; }
.kachel .text { color: var(--dunkelgraubraun); }

.login-card { max-width: 380px; margin: 12vh auto; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); padding: 2rem; }
.login-card h1 { margin-top: 0; }
.login-card label { display: block; margin: 1rem 0 .25rem; }
.login-card input { width: 100%; padding: .6rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); }
.btn-primaer { margin-top: 1.5rem; width: 100%; min-height: var(--touch-ziel); background: var(--schiefergrau); color: var(--weiss); border: 0; border-radius: var(--radius); font-size: 1rem; cursor: pointer; }
.btn-primaer:hover { background: var(--schiefergrau-hover); }
.fehler { color: var(--schiefergrau); font-weight: 600; }

/* --- S2: Filterleisten, Tabellen, Tabs, Blockkarten (Foxtag-Muster) --- */
.werkzeugleiste { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0; }
.werkzeugleiste input, .werkzeugleiste select { padding: .45rem .6rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); font: inherit; }
.btn { display: inline-block; padding: .45rem .9rem; border-radius: var(--radius); border: 1px solid var(--schiefergrau); background: var(--schiefergrau); color: var(--weiss); text-decoration: none; font: inherit; cursor: pointer; }
.btn:hover { background: var(--schiefergrau-hover); border-color: var(--schiefergrau-hover); }
/* Decorative entity glyphs inherit the action color, including hover/disabled. */
.entity-icon { display: inline-block; width: 1.2em; height: 1.2em; margin-inline-end: .4em;
  vertical-align: -.22em; pointer-events: none; }
.btn-sekundaer { background: var(--weiss); color: var(--dunkelgraubraun); border: 1px solid var(--dunkelgraubraun); }
.btn-sekundaer:hover { background: var(--graubraun-schleier); color: var(--dunkelgraubraun); }
.btn-gefaehrlich { background: var(--weiss); color: var(--schiefergrau); border: 1px solid var(--schiefergrau); }
.btn-gefaehrlich:hover { background: var(--schiefergrau); color: var(--weiss); }
.schnellindex { display: flex; flex-wrap: wrap; gap: .15rem; margin: .5rem 0 1rem; }
.schnellindex a, .schnellindex span { min-width: 2rem; text-align: center; padding: .25rem .3rem; border-radius: 4px; text-decoration: none; }
.schnellindex a:hover { background: var(--schiefergrau-hover); color: var(--weiss); }
.schnellindex .aktiv { background: var(--schiefergrau); color: var(--weiss); font-weight: 700; }
.schnellindex .inaktiv { color: var(--graubraun-linie); }
table.daten { width: 100%; border-collapse: collapse; margin: 1rem 0; }
table.daten th { background: var(--dunkelgraubraun); color: var(--weiss); text-align: left; padding: .5rem .7rem; font-weight: 600; }
table.daten td { border-bottom: 1px solid var(--graubraun-linie); padding: .5rem .7rem; font-variant-numeric: tabular-nums; }
table.daten tr:hover td { background: var(--graubraun-schleier); }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--graubraun-linie); margin: 1.25rem 0 1rem; }
.tabs a { padding: .5rem .9rem; text-decoration: none; color: var(--dunkelgraubraun); border-bottom: 3px solid transparent; }
.tabs a.aktiv { color: var(--schiefergrau); border-bottom-color: var(--schiefergrau); font-weight: 700; }
.tabs a.inakt { opacity: .45; }
.blockkarte { border: 1px solid var(--graubraun-linie); border-radius: var(--radius); margin: .75rem 0; overflow: hidden; }
.blockkarte > summary { background: var(--graubraun-schleier); padding: .6rem .9rem; cursor: pointer; font-weight: 700; color: var(--dunkelgraubraun); list-style: none; display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.blockkarte > summary::before { content: "▸"; color: var(--schiefergrau); }
.blockkarte[open] > summary::before { content: "▾"; }
.blockkarte .blockinneres { padding: .5rem .9rem .9rem; }
.badelchen { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.badelchen.faellig { background: var(--ampel-dunkelrot); color: var(--weiss); }
.badelchen.bald { background: var(--ampel-amber); color: var(--weiss); }
.badelchen.okay { background: var(--graubraun-schleier); color: var(--dunkelgraubraun); border: 1px solid var(--graubraun-linie); }
.badelchen.passiv { background: var(--dunkelgraubraun); color: var(--weiss); }
.historieliste { list-style: none; padding: 0; margin: .5rem 0; font-size: .92rem; }
.historieliste li { border-bottom: 1px dashed var(--graubraun-linie); padding: .35rem 0; color: var(--dunkelgraubraun); }
.historieliste time { color: var(--text); font-variant-numeric: tabular-nums; }
.formular { max-width: 640px; }
.formular label { display: block; margin: 1rem 0 .25rem; font-weight: 600; }
.formular input, .formular select, .formular textarea { width: 100%; padding: .55rem .6rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); font: inherit; }
.formular input[type="radio"], .formular input[type="checkbox"] { width: auto; margin-right: .45rem; }
.formular [data-form-field="adresse_modus"] label, .formular [data-form-field="labels"] label { display: inline-block; margin: .3rem 1rem .3rem 0; font-weight: 400; }
.formular [data-form-field="adresse_modus"] > label, .formular [data-form-field="labels"] > label { display: block; margin: 1rem 0 .25rem; font-weight: 600; }
.formular [hidden] { display: none; }
.formular .fehlerliste { color: var(--schiefergrau); font-size: .9rem; margin: .25rem 0; padding: 0; list-style: none; }
.formular-ende { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; }
.kopfzeile-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.kopfzeile-zeile h1 { margin: .2rem 0; }
.kopfdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .35rem 1.5rem; background: var(--graubraun-schleier); border-radius: var(--radius); padding: .8rem 1rem; margin: 1rem 0; }
.kopfdaten div b { color: var(--dunkelgraubraun); font-weight: 600; }
.hilfetext { color: var(--dunkelgraubraun); font-size: .92rem; }
.hinweis-inlines { display: flex; gap: .5rem; align-items: center; }
.hinweis-inlines input { flex: 1; padding: .5rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); }
.felder-tabelle { max-width: 100%; overflow-x: auto; }
.felder-tabelle table { min-width: 650px; }
.felder-tabelle input[type="text"] { width: 100%; min-width: 100px; max-width: 280px;
  padding: .4rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); font: inherit; }
.felder-tabelle input[disabled] { background: var(--graubraun-schleier); }
.felder-tabelle td:first-child { white-space: nowrap; }
.felder-tabelle td:first-child .btn { padding: .25rem .45rem; }
.felder-tabelle label { white-space: nowrap; }
.felder-tabelle tr.feld-wird-geloescht { opacity: .5; text-decoration: line-through; }
.art-typ-dialog { width: min(650px, calc(100% - 1rem)); max-height: calc(100dvh - 1rem);
  padding: 0; color: var(--text); border: 1px solid var(--graubraun-linie);
  border-radius: var(--radius); box-shadow: 0 18px 45px var(--dunkelgraubraun); }
.art-typ-dialog:modal { position: fixed; top: 50dvh; left: 50vw;
  width: min(650px, calc(100vw - 1rem)); margin: 0; transform: translate(-50%, -50%); }
.art-typ-dialog::backdrop { background: color-mix(in srgb, var(--dunkelgraubraun) 65%, transparent); }
.art-typ-dialog > form { display: flex; flex-direction: column; max-height: calc(100dvh - 1rem); }
.art-typ-dialog-kopf, .art-typ-dialog-fuss { flex: none; display: flex; justify-content: space-between;
  align-items: center; gap: .5rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--graubraun-linie); }
.art-typ-dialog-kopf h2 { margin: 0; }
.art-typ-dialog-fuss { justify-content: flex-end; border-top: 1px solid var(--graubraun-linie);
  border-bottom: 0; }
.art-typ-dialog-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .4rem 1.1rem 1rem; }
.art-typ-dialog-feld { margin: .5rem 0; }
.art-typ-dialog-feld label { display: block; font-weight: 600; margin-bottom: .2rem; }
.art-typ-dialog-feld input, .art-typ-dialog-feld select { width: 100%; padding: .55rem;
  border: 1px solid var(--graubraun-linie); border-radius: var(--radius); font: inherit; }
.art-typ-dialog-feld small { display: block; margin-top: .2rem; }
.dialog-schliessen { border: 0; color: var(--dunkelgraubraun); background: transparent;
  font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.dialog-schliessen:hover { color: var(--schiefergrau); }
.art-typ-dialog :focus-visible { outline: 3px solid var(--schiefergrau); outline-offset: 2px; }

/* Die Listenfilter liegen wie bei Foxtag als eine eigene Leiste vor den Daten. */
.filterband { display: flex; align-items: end; flex-wrap: wrap; gap: .6rem;
  padding: .8rem 1rem; background: var(--graubraun-schleier);
  border: 1px solid var(--graubraun-linie); border-radius: var(--radius); }
.filterband label { display: flex; flex-direction: column; gap: .2rem; min-width: 145px; flex: 1 1 145px; }
.filterband input, .filterband select { width: 100%; padding: .45rem .6rem;
  background: var(--weiss); border: 1px solid var(--graubraun-linie);
  border-radius: var(--radius); font: inherit; }

/* Kundenerstaufnahme: ein Dialog, kein Seitenwechsel. Ohne JS bleibt /kunden/neu. */
.kunde-dialog { width: min(680px, calc(100% - 2rem)); max-height: min(90dvh, 900px);
  padding: 0; border: 1px solid var(--graubraun-linie); border-radius: var(--radius);
  color: var(--text); background: var(--weiss); box-shadow: 0 18px 45px var(--dunkelgraubraun); }
.kunde-dialog:modal { position: fixed; top: 50dvh; left: 50vw;
  width: min(680px, calc(100vw - 2rem)); max-height: calc(100dvh - 1rem);
  margin: 0; transform: translate(-50%, -50%); }
.kunde-dialog::backdrop { background: color-mix(in srgb, var(--dunkelgraubraun) 65%, transparent); }
.kunde-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.kunde-dialog-form { display: flex; flex-direction: column; min-height: 0;
  max-width: none; flex: 1 1 auto; }
.kunde-dialog-kopf, .kunde-dialog-fuss { flex-shrink: 0; }
.kunde-dialog-kopf, .kunde-dialog-fuss { display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--graubraun-linie); }
.kunde-dialog-kopf h2 { margin: 0; }
.kunde-dialog-fuss { justify-content: flex-end; flex-wrap: wrap; margin: 0; border-top: 1px solid var(--graubraun-linie); border-bottom: 0; }
.kunde-dialog-fuss .btn { min-height: 44px; }
.kunde-dialog-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .2rem .75rem; overflow-y: auto; min-height: 0;
  padding: .25rem 1.25rem 1rem; }
.kunde-dialog-feld { grid-column: 1 / -1; margin: .35rem 0; }
.kunde-dialog-feld[data-form-field="plz"], .kunde-dialog-feld[data-form-field="ort"] { grid-column: auto; }
.kunde-dialog-optional { grid-column: 1 / -1; margin: .4rem 0; }
.kunde-dialog-feld label { margin: 0 0 .2rem; }
.kunde-dialog-feld small { display: block; }
.kunde-dialog-objekt { grid-column: 1 / -1; margin: .4rem 0 0; border: 1px solid var(--graubraun-linie);
  background: var(--graubraun-schleier); border-radius: var(--radius); padding: .3rem 1rem .7rem; }
.kunde-dialog-objekt legend { font-weight: 700; color: var(--schiefergrau); }
.kunde-dialog-objekt label { display: flex; align-items: center; gap: .4rem; font-weight: 400; }
.kunde-dialog-objekt input { width: auto; }
.dialog-schliessen { border: 0; background: transparent; color: var(--dunkelgraubraun);
  font: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.dialog-schliessen:hover { color: var(--schiefergrau); }
.kunde-dialog :focus-visible { outline: 3px solid var(--schiefergrau); outline-offset: 2px; }
.kunden-tabelle { max-width: 100%; overflow-x: auto; }
.kunden-tabelle table { min-width: 610px; }

/* --- S3: Karte (Buehne mit fester, aber fensterabhaengiger Höhe) --- */
.inhalt--karte { max-width: none; padding: 0; }
.karten-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .65rem 1rem; margin: 0; background: var(--graubraun-schleier);
  border-bottom: 1px solid var(--graubraun-linie); }
.karten-filter label { display: flex; flex: 1 1 150px; min-width: 135px; }
.karten-filter select { width: 100%; padding: .5rem; background: var(--weiss);
  border: 1px solid var(--graubraun-linie); border-radius: var(--radius); font: inherit; }
.visuell-versteckt { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.karte-seite .karten-buehne { border: 0; border-radius: 0; }
.karte-seite .karten-buehne #karte { height: max(460px, calc(100dvh - 135px)); }
.karte-seite > .hilfetext { margin: .5rem 1rem; }
.karten-buehne { position: relative; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); overflow: hidden; }
.karten-buehne #karte { height: clamp(420px, calc(100vh - 360px), 780px); }
.startseiten-karte { margin: 1.25rem 0 0; }
.karten-buehne--cockpit #karte { height: clamp(390px, 54vh, 630px); }
.treffer-zaehler { position: absolute; z-index: 2; top: .75rem; right: .75rem; padding: .45rem .75rem; border: 1px solid var(--schiefergrau); border-radius: var(--radius); background: var(--schiefergrau); color: var(--weiss); font: inherit; font-weight: 700; cursor: pointer; }
.treffer-zaehler:hover { background: var(--schiefergrau-hover); border-color: var(--schiefergrau-hover); }
.treffer-zaehler[hidden] { display: none; }
.trefferliste { position: absolute; z-index: 2; top: 3.5rem; right: .75rem; display: grid; gap: .15rem; width: min(26rem, calc(100% - 1.5rem)); max-height: min(50vh, 320px); overflow: auto; padding: .35rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); background: var(--weiss); box-shadow: 0 2px 10px var(--graubraun-linie); }
.trefferliste[hidden] { display: none; }
.trefferliste a { display: flex; justify-content: space-between; gap: .8rem; padding: .4rem .55rem; color: var(--dunkelgraubraun); text-decoration: none; border-bottom: 1px solid var(--graubraun-linie); }
.trefferliste a:hover { background: var(--graubraun-schleier); }
.karten-stil-wechsel { position: absolute; z-index: 2; right: .75rem; bottom: .75rem; display: flex; gap: .2rem; padding: .25rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); background: var(--weiss); box-shadow: 0 2px 10px var(--graubraun-linie); }
.karten-stil-wechsel button { padding: .3rem .55rem; border: 1px solid transparent; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--dunkelgraubraun); font: inherit; cursor: pointer; }
.karten-stil-wechsel button.aktiv { background: var(--schiefergrau); color: var(--weiss); }
.karten-stil-wechsel button:focus-visible, .treffer-zaehler:focus-visible { outline: 3px solid var(--schiefergrau-hover); outline-offset: 2px; }
.pin-popup { max-height: min(280px, 45vh); overflow-y: auto; }
.pin-objekt-btn { margin-top: .5rem; }
/* S5: Foxtag-Feldraster in Brinitzer-Tokens, mobil horizontal scrollbar statt Quetschen. */
.checklisten-editor .tabs button { padding: .5rem .9rem; border: 0; border-bottom: 3px solid transparent; background: var(--weiss); color: var(--dunkelgraubraun); font: inherit; cursor: pointer; }
.checklisten-editor .tabs button.aktiv { color: var(--schiefergrau); border-bottom-color: var(--schiefergrau); font-weight: 700; }
.checklisten-editor [hidden] { display: none !important; }
.s5-stamm { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: .8rem; padding: 1rem; }
.s5-stamm label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.s5-stamm label.s5-check { display: inline-flex; flex-direction: row; margin: .25rem 1rem .25rem 0; font-weight: 400; }
.s5-stamm input:not([type=checkbox]), .s5-stamm select { width: 100%; padding: .5rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); font: inherit; }
.s5-stamm fieldset { border: 1px solid var(--graubraun-linie); }
.s5-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
/* Native selects and fieldsets have intrinsic minimum widths; contain them,
   not the page. Wide field/report tables remain fully accessible by scrolling. */
.checklisten-editor [data-protocol-editor],
.checklisten-editor [data-protocol-editor] fieldset,
.checklisten-editor [data-protocol-editor] label,
.checklisten-editor [data-protocol-editor] details { min-width: 0; max-width: 100%; }
.checklisten-editor [data-protocol-editor] select,
.checklisten-editor [data-protocol-editor] input,
.checklisten-editor [data-protocol-editor] textarea { min-width: 0; max-width: 100%; }
.checklisten-editor [data-protocol-editor] select { width: 100%; }
.checklisten-editor [data-applicability-summary] { min-width: 0; overflow-wrap: anywhere; }
.s5-bericht { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.s5-bericht table { min-width: 640px; overflow-wrap: normal; }
.s5-felder { min-width: 1050px; }
.s5-felder td { vertical-align: middle; }
.s5-felder input:not([type=checkbox]), .s5-felder select { width: 100%; min-width: 65px; padding: .45rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); font: inherit; }
.s5-felder td:nth-child(3) { min-width: 270px; }
.s5-felder td:nth-child(4) { min-width: 155px; }
.s5-felder td:nth-child(1) button, .s5-felder [data-remove] { border: 0; background: var(--weiss); color: var(--schiefergrau); cursor: pointer; font-size: 1.1rem; padding: .3rem; }
.s5-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--graubraun-linie); padding: .7rem 0; }
.s5-pruefung { max-width: 760px; min-width: 0; }
.s5-pruefung fieldset { min-width: 0; max-width: 100%; }
.s5-pruefung fieldset select { width: 100%; min-width: 0; max-width: 100%; }
.s5-frage { display: grid; gap: .4rem; padding: 1rem 0; border-bottom: 1px solid var(--graubraun-linie); }
.s5-frage label { font-weight: 600; }
.s5-frage input:not([type=checkbox]), .s5-frage select, .s5-frage textarea { width: 100%; padding: .6rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); font: inherit; }
.s5-frage input[type=checkbox] { width: 24px; height: 24px; }
.s5-zahl { display: flex; align-items: center; gap: .5rem; }
.s5-bericht { background: var(--weiss); }
@media (max-width:700px) { .s5-action { flex-wrap: wrap; } }
@media (max-width: 700px) {
  .karte-seite .karten-buehne #karte { height: max(420px, calc(100dvh - 280px)); }
  .karten-filter label { flex: 1 1 calc(50% - .5rem); }
  .kunde-dialog:modal { width: calc(100vw - 1rem); }
  .kunde-dialog-fuss .btn { font-size: .875rem; padding: .5rem .55rem; white-space: nowrap; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .brand { grid-column: 1; grid-row: 1; }
  .topbar-right { grid-column: 2; grid-row: 1; }
  .topbar-right .userchip { display: none; }
  .mainnav { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0;
    overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
  .mainnav :is(a, button.editor-nav) { flex: none; padding: .6rem .75rem; }
  .karten-stil-wechsel { bottom: 2.2rem; }
}

/* --- Foxtag parity pass --------------------------------------------------- */
:root { --topbar-height: 3.75rem; }
body { min-width: 320px; }
.topbar {
  height: var(--topbar-height); flex-wrap: nowrap; align-items: center;
  padding: 0 .75rem; background: var(--dunkelrot);
}
.brand { flex: 0 0 auto; padding: .4rem .55rem; font-size: 1rem; letter-spacing: .08em; }
.brand-logo { height: 25px; }
.global-search {
  position: relative; flex: 0 1 18rem; min-width: 10rem; margin: 0 .35rem;
}
.global-search input {
  width: 100%; min-height: 2.3rem; padding: .4rem .75rem .4rem 2.15rem;
  border: 0; border-radius: var(--radius); background: color-mix(in srgb, var(--weiss) 25%, transparent);
  color: var(--weiss); font: inherit; font-size: .86rem;
}
.global-search input::placeholder { color: color-mix(in srgb, var(--weiss) 78%, transparent); }
.global-search input:focus { outline: 3px solid var(--weiss); outline-offset: 2px; }
.global-search-icon { position: absolute; left: .65rem; top: .12rem; font-size: 1.4rem; line-height: 1.5; opacity: .9; }
.mainnav { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav button.editor-nav { margin: 0; font-family: inherit; line-height: inherit;
  background: transparent; border-radius: 0; cursor: pointer; }
/* Editor dropdown continues the red menu band: rectangular, borderless. */
.editor-nav-links { position: fixed; inset: auto; margin: 0; box-sizing: border-box;
  min-width: 11rem; max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem);
  overflow: auto; padding: .35rem 0; border: 0;
  border-radius: 0; background: var(--dunkelrot);
  box-shadow: 0 5px 16px rgba(0,0,0,.12); }
.mainnav .editor-nav-links a { display: block; padding: .7rem 1rem; border-radius: 0; }
.mainnav .editor-nav-links a[aria-current="page"] { background: var(--dunkel-dunkelrot); }

.mainnav :is(a, button.editor-nav) { flex: 0 0 auto; padding: .48rem .5rem; border: 0; font-size: .9rem; font-weight: 600; }
.mainnav :is(a, button.editor-nav):not(.aktiv):hover,
.mainnav :is(a, button.editor-nav):not(.aktiv):focus-visible { background: transparent; }
.mainnav :is(a, button.editor-nav):hover, .mainnav :is(a, button.editor-nav):focus-visible {
  outline: 2px solid var(--weiss); outline-offset: -3px; border-radius: var(--radius);
}
.mainnav :is(a, button.editor-nav).aktiv { background: var(--dunkel-dunkelrot); border-radius: var(--radius); }
.topbar-right { flex: 0 0 auto; padding: 0 .25rem 0 .35rem; }
.profil-menue { position: relative; }
.profil-menue > summary { display: grid; place-items: center; list-style: none; cursor: pointer; }
.profil-menue > summary::-webkit-details-marker { display: none; }
.profil-initialen { display: grid; place-items: center; width: 2.15rem; height: 2.15rem;
  border: 2px solid var(--weiss); border-radius: 50%; color: var(--weiss); font-size: .76rem; font-weight: 700; }
.profil-menue[open] .profil-initialen, .profil-menue > summary:hover .profil-initialen { background: var(--dunkel-dunkelrot); }
.profil-dropdown { position: absolute; z-index: 60; top: calc(100% + .55rem); right: 0; min-width: 13.5rem;
  padding: .35rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius);
  background: var(--weiss); color: var(--text); box-shadow: 0 8px 24px color-mix(in srgb, var(--dunkelgraubraun) 25%, transparent); }
.profil-dropdown p { margin: 0; padding: .5rem .65rem; border-bottom: 1px solid var(--graubraun-linie); }
.profil-dropdown small { display: block; color: var(--dunkelgraubraun); }
.profil-dropdown a, .profil-dropdown button { display: block; width: 100%; padding: .6rem .65rem;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--schiefergrau);
  text-align: left; text-decoration: none; font: inherit; font-size: .9rem; cursor: pointer; }
.profil-dropdown a:hover, .profil-dropdown button:hover { background: var(--graubraun-schleier); }
.profil-dropdown form { margin: 0; }
.inhalt { max-width: 1260px; padding: 2rem 1.25rem 4rem; }
.inhalt.inhalt--anlagen { max-width: none; padding: 0 0 4rem; }
.inhalt.inhalt--kunden { max-width: none; padding: 0 0 4rem; }
.inhalt--kunden > .seitenkopf, .inhalt--kunden > .kundenliste { max-width: 1260px; margin-inline: auto; padding-inline: 1.25rem; }
.inhalt--kunden > .seitenkopf { margin-top: 2.25rem; }
.anlagen-inhalt { max-width: 1260px; margin: 0 auto; padding: 2rem 1.25rem; }
h1, h2 { color: var(--schiefergrau); }
a { color: var(--foxtag-blue); }
.btn { background: var(--foxtag-blue); border-color: var(--foxtag-blue); box-shadow: 0 2px 4px color-mix(in srgb, var(--foxtag-navy) 18%, transparent); }
.btn:hover { background: var(--foxtag-blue-dark); border-color: var(--foxtag-blue-dark); }
.btn-sekundaer { background: var(--weiss); color: var(--schiefergrau); border-color: var(--schiefergrau); box-shadow: none; }
.btn-sekundaer:hover { background: var(--foxtag-filter); color: var(--foxtag-blue-dark); }
.btn-gefaehrlich { color: var(--schiefergrau); border-color: var(--schiefergrau); background: var(--weiss); }
.btn-primaer { background: var(--foxtag-blue); }

/* A single compact band is the first content under the topbar. */
.foxtag-filterband {
  position: relative; display: flex; align-items: center; flex-wrap: nowrap; gap: .35rem;
  width: 100%; min-height: 3.25rem; padding: .35rem .65rem;
  background: var(--foxtag-filter); border: 0; border-radius: 0;
  overflow-x: auto; scrollbar-width: thin;
}
.foxtag-filterband .filter-control { display: flex; flex: 0 1 12rem; min-width: 9rem; }
.listen-scroll { overflow-x: auto; }
.hierarchie-id { display: block; overflow-wrap: anywhere; }
.foxtag-filterband .filter-control--wide { flex-basis: 17rem; }
.foxtag-filterband input, .foxtag-filterband select {
  width: 100%; min-height: 2rem; padding: .3rem .5rem; background: var(--weiss);
  border: 1px solid var(--foxtag-border); border-radius: var(--radius); color: var(--text); font: inherit; font-size: .82rem;
}
.filter-submit-fallback { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
.filter-submit-fallback:focus-visible { position: static; width: auto; height: auto; clip-path: none;
  padding: .35rem .65rem; background: var(--schiefergrau); color: var(--weiss); cursor: pointer; }
.foxtag-filterband .filter-apply { flex: 0 0 auto; white-space: nowrap; }
.filter-reset { flex: 0 0 auto; align-self: center; padding: .45rem .7rem; white-space: nowrap; text-decoration: none; }
.karten-filter .filter-control { flex-basis: 11rem; }
.karten-filter .filter-control--wide { flex-basis: 15rem; }
.karten-filter .filter-reset { margin-left: auto; }
.kunden-filterband { overflow-x: visible; }
.kunden-filterband .schnellindex { flex: 1 1 auto; min-width: 0; align-items: center; flex-wrap: nowrap;
  gap: .08rem; margin: 0; overflow-x: auto; scrollbar-width: thin; white-space: nowrap; }
.kunden-filterband .schnellindex a, .kunden-filterband .schnellindex span {
  flex: 0 0 auto; min-width: 1.25rem; padding: .25rem .15rem; font-size: .78rem; }
.kunden-filterband .filter-control.kunden-suchfeld { flex: 0 1 14rem; min-width: 11rem; }
.inventory-date-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 25rem; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.inventory-date-range legend { font-size: .78rem; margin-bottom: .2rem; }
.kunden-filterband .inventory-date-range .filter-control { flex: 1 1 0; min-width: 0; }
.kunden-filterband .inventory-date-range .filter-control > span { display: block; font-size: .78rem; }
.inventory-date-range .hilfetext:empty { display: none; }

.profil-seite { max-width: 43rem; }
.passwort-form { max-width: none; margin-top: 1.25rem; padding: 1rem 1.5rem 1.5rem;
  border: 1px solid var(--graubraun-linie); border-radius: var(--radius); }
.passwort-hilfe { margin-top: .4rem; }
.passwort-hilfe ul { margin: .2rem 0; padding-left: 1.4rem; }

.seitenkopf, .anlage-detail-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.seitenkopf h1, .anlage-detail-kopf h1 { margin: .15rem 0; font-size: 1.6rem; font-weight: 400; }
.seitenkontext { margin: 0; color: var(--foxtag-text); font-size: .9rem; }
.seitenaktionen, .anlage-detail-aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.seitenaktionen form, .anlage-detail-aktionen form { margin: 0; }
.aktions-dropdown { position: relative; }
.aktions-dropdown summary { list-style: none; }
.aktions-dropdown summary::-webkit-details-marker { display: none; }
.aktions-dropdown[open] summary { border-color: var(--foxtag-blue); }
.aktions-dropdown-inhalt {
  position: absolute; z-index: 20; right: 0; top: calc(100% + .35rem); display: grid; gap: .45rem;
  min-width: 12rem; padding: .65rem; border: 1px solid var(--foxtag-border); border-radius: var(--radius);
  background: var(--weiss); box-shadow: 0 8px 24px color-mix(in srgb, var(--foxtag-navy) 22%, transparent);
}
.aktions-dropdown-inhalt a { display: block; padding: .35rem .45rem; text-decoration: none; }
.aktions-dropdown-inhalt form { display: grid; gap: .45rem; }
.datei-auswahl { display: block; padding: .45rem .6rem; border: 1px dashed var(--foxtag-border); border-radius: var(--radius); cursor: pointer; color: var(--foxtag-text); }
.aktions-dropdown--kurz .aktions-dropdown-inhalt { min-width: 11rem; }

/* Customer cards and the Kunde > Objekt > Anlage hierarchy. */
.kundenliste { display: grid; gap: .8rem; margin-top: 1.2rem; }
.kundenkarte { position: relative; display: grid; grid-template-columns: minmax(15rem, 1.2fr) minmax(13rem, 1fr) auto auto; align-items: center; gap: .8rem 1.25rem; padding: 1.05rem 3.6rem 1.05rem 1.15rem; border: 1px solid var(--foxtag-border); border-radius: var(--radius); background: var(--weiss); box-shadow: 0 2px 6px color-mix(in srgb, var(--foxtag-navy) 12%, transparent); }
.kundenkarte-ident { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.kundenkarte-icon { color: var(--foxtag-text); font-size: 1.25rem; }
.kundenkarte-name { display: block; color: var(--schiefergrau); font-size: 1rem; font-weight: 700; text-decoration: none; }
.kundenkarte-nummer { display: block; color: var(--foxtag-text); font-size: .9rem; }
.kundenkarte-adresse, .kundenkarte-kennzahlen { color: var(--text); }
.kundenkarte-kennzahlen { display: flex; gap: .75rem; flex-wrap: wrap; color: var(--foxtag-text); font-size: .9rem; }
.karten-menue { position: absolute; top: .75rem; right: .75rem; }
.karten-menue summary { cursor: pointer; color: var(--foxtag-blue); font-weight: 700; list-style: none; }
.karten-menue summary::-webkit-details-marker { display: none; }
.karten-menue div { position: absolute; right: 0; z-index: 5; display: grid; min-width: 9rem; padding: .35rem; background: var(--weiss); border: 1px solid var(--foxtag-border); border-radius: var(--radius); box-shadow: 0 6px 18px color-mix(in srgb, var(--foxtag-navy) 18%, transparent); }
.karten-menue a { padding: .35rem .5rem; text-decoration: none; }
.badelchen.warnung { background: var(--foxtag-filter); color: var(--foxtag-text); border: 1px solid var(--foxtag-border); }

.anlagen-hierarchie { display: grid; gap: 1rem; margin-top: 1.4rem; }
.kundenblock { overflow: visible; border: 1px solid var(--foxtag-border); background: var(--weiss); box-shadow: 0 2px 6px color-mix(in srgb, var(--foxtag-navy) 12%, transparent); }
.kundenblock-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--foxtag-filter); }
.kundenblock-name { color: var(--schiefergrau); font-size: 1.35rem; text-decoration: none; }
.kundenblock-adresse, .objektblock-adresse { display: block; color: var(--text); font-size: .9rem; }
.inline-action, .objektblock-kopf > a { white-space: nowrap; text-decoration: none; }
.objektblock { border-top: 1px solid var(--foxtag-border); }
.objektblock-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.25rem .65rem 2rem; }
.objektblock-name { color: var(--schiefergrau); font-size: 1.08rem; font-weight: 700; text-decoration: none; }
.btn-klein { padding: .3rem .55rem; font-size: .88rem; box-shadow: none; }
.anlagenzeilen { display: grid; gap: .5rem; padding: 0 1.25rem .85rem 2rem; }
.anlagezeile { display: grid; grid-template-columns: minmax(12rem, 1.5fr) minmax(12rem, 1.2fr) minmax(9rem, 1fr) minmax(6rem, .6fr); align-items: center; gap: .7rem; padding: .7rem .8rem; border: 1px solid var(--foxtag-border); border-radius: var(--radius); }
.anlagezeile-name { display: block; color: var(--schiefergrau); font-weight: 700; text-decoration: none; }
.anlagezeile-meta, .anlagezeile-termine, .anlagezeile-count { color: var(--foxtag-text); font-size: .9rem; }
.anlagezeile-termine { display: grid; gap: .1rem; }
.anlagezeile-status { display: flex; flex-wrap: wrap; gap: .25rem; }
.objekt-leer { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 1.25rem 1rem 2rem; color: var(--foxtag-text); }
.objekt-leer a { text-decoration: none; }
.empty-state { display: grid; gap: .45rem; margin-top: 1.25rem; padding: 1.5rem; border: 1px dashed var(--foxtag-border); border-radius: var(--radius); background: var(--foxtag-filter); }

/* Customer dialog: protected focus, long forms scroll inside the modal. */
.kunde-dialog { width: min(820px, calc(100% - 2rem)); border-color: var(--foxtag-border); box-shadow: 0 18px 45px color-mix(in srgb, var(--foxtag-navy) 35%, transparent); }
.kunde-dialog:modal { width: min(820px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
.kunde-dialog-kopf { padding: 1.2rem 1.5rem; }
.kunde-dialog-kopf h2 { font-size: 1.9rem; font-weight: 400; }
.kunde-dialog-inhalt { padding: .5rem 1.5rem 1.4rem; gap: .3rem 1.2rem; }
.kunde-dialog-feld input, .kunde-dialog-feld select, .kunde-dialog-feld textarea { min-height: 2.65rem; }
.kunde-dialog-feld--readonly { display: flex; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--foxtag-border); }
.kunde-dialog-feld--readonly label { min-width: 12rem; }
.kunde-dialog-feld--readonly span { color: var(--foxtag-text); }
.kunde-dialog-objekt { background: var(--foxtag-filter); border-color: var(--foxtag-border); padding: .65rem 1rem .85rem; }
.kunde-dialog-objekt legend { color: var(--foxtag-text); }

/* Anlage anlegen: Foxtag-Anordnung mit eigenen Brinitzer-Farben. */
.anlage-dialog { width: min(650px, calc(100% - 1rem)); max-height: calc(100dvh - 1rem);
  padding: 0; border: 1px solid var(--foxtag-border); border-radius: var(--radius);
  color: var(--text); background: var(--weiss);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--dunkelgraubraun) 35%, transparent); }
.anlage-dialog:modal { position: fixed; top: 50dvh; left: 50vw;
  width: min(650px, calc(100vw - 1rem)); margin: 0; transform: translate(-50%, -50%); }
.anlage-dialog::backdrop { background: color-mix(in srgb, var(--dunkelgraubraun) 65%, transparent); }
.anlage-dialog-form { display: flex; flex-direction: column; max-width: none; max-height: calc(100dvh - 1rem); }
.anlage-dialog-kopf, .anlage-dialog-fuss { display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .9rem 1.5rem; flex: none; border-bottom: 1px solid var(--foxtag-border); }
.anlage-dialog-kopf h2 { margin: 0; font-size: 1.5rem; font-weight: 400; }
.anlage-dialog-fuss { justify-content: flex-end; border-top: 1px solid var(--foxtag-border); border-bottom: 0; }
.anlage-dialog-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .65rem 1.5rem 1rem; }
.anlage-dialog-inhalt hr { border: 0; border-top: 1px solid var(--foxtag-border); margin: 1.1rem 0; }
.anlage-dialog-feld { display: grid; grid-template-columns: 165px minmax(0, 1fr); align-items: start;
  gap: .75rem; padding: .45rem 0; }
.anlage-dialog-feld > label, .anlage-dialog-feld > .anlage-dialog-label { margin: .6rem 0 0; font-size: .875rem; }
.anlage-dialog-feld > div { min-width: 0; }
.anlage-dialog-feld input:not([type=checkbox]), .anlage-dialog-feld select { min-height: 2.55rem; }
.anlage-dialog-feld input:not([type=checkbox]):disabled { background: var(--foxtag-filter); color: var(--foxtag-text); cursor: not-allowed; opacity: 1; }
.anlage-dialog-feld input:not([type=checkbox]):disabled::placeholder { color: var(--foxtag-text); opacity: 1; }
.anlage-dialog-feld small { display: block; font-size: .8rem; margin-top: .25rem; line-height: 1.35; }
.anlage-dialog-feld--readonly { font-size: .875rem; padding-block: .8rem; }
.anlage-dialog-feld--readonly span:last-child { color: var(--foxtag-text); }
.anlage-dialog-erweitert { padding: .45rem 0 .2rem 177px; font-size: .875rem; }
.anlage-dialog-erweitert summary { cursor: pointer; color: var(--schiefergrau); }
.anlage-dialog-erweitert label { display: block; margin: .5rem 0; font-weight: 400; }
.anlage-dialog-erweitert input { width: auto; }
.anlage-dialog .fehler { color: var(--schiefergrau); margin: .25rem 0; font-size: .875rem; }
.anlage-dialog .fehlerliste { color: var(--schiefergrau); }
.anlage-dialog :focus-visible { outline: 3px solid var(--schiefergrau); outline-offset: 2px; }
.anlage-dialog [hidden] { display: none !important; }
.anlage-art-picker { position: relative; width: 100%; }
.anlage-art-picker[open] { z-index: 20; }
.anlage-art-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 2.75rem; padding: .55rem .7rem; border: 1px solid var(--foxtag-border);
  border-radius: var(--radius); background: var(--weiss); cursor: pointer; list-style: none; }
.anlage-art-picker > summary::-webkit-details-marker { display: none; }
.anlage-art-picker > summary::after { content: "⌄"; flex: none; color: var(--schiefergrau); }
.anlage-art-picker[open] > summary { border-color: var(--schiefergrau); border-radius: var(--radius) var(--radius) 0 0; }
.anlage-art-picker-panel { position: absolute; top: calc(100% - 1px); left: 0; right: 0; z-index: 21; box-sizing: border-box;
  max-height: var(--anlage-art-panel-max-height, min(15rem, 40dvh)); overflow-y: auto; margin: 0; padding: .35rem;
  border: 1px solid var(--foxtag-border); border-radius: 0 0 var(--radius) var(--radius);
  background: var(--weiss); box-shadow: 0 8px 20px color-mix(in srgb, var(--dunkelgraubraun) 20%, transparent); }
.anlage-art-picker[data-placement="above"] > .anlage-art-picker-panel { top: auto; bottom: calc(100% - 1px);
  border-radius: var(--radius) var(--radius) 0 0; }
.anlage-art-picker[data-placement="above"] > summary { border-radius: 0 0 var(--radius) var(--radius); }
.anlage-art-picker-panel > div { display: grid; }
.anlage-art-picker-panel label { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem;
  margin: 0; padding: .35rem .55rem; border-radius: var(--radius); font-weight: 400; cursor: pointer; }
.anlage-art-picker-panel label:hover { background: var(--foxtag-filter); }
.anlage-art-picker-panel input[type="checkbox"] { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--schiefergrau); }
.anlage-suchzeile.is-enhanced select { display: none; }
.anlage-suchauswahl { position: relative; width: 100%; }
.anlage-suchauswahl summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 2.55rem; padding: .55rem .7rem; border: 1px solid var(--foxtag-border);
  border-radius: var(--radius); background: var(--weiss); cursor: pointer; list-style: none; }
.anlage-suchauswahl summary::-webkit-details-marker { display: none; }
.anlage-suchauswahl summary::after { content: "⌄"; flex: none; color: var(--schiefergrau); }
.anlage-suchauswahl[open] summary { border-color: var(--schiefergrau); }
.anlage-suchauswahl-panel { position: absolute; top: calc(100% - 1px); left: 0; right: 0; z-index: 5;
  padding: .4rem; border: 1px solid var(--foxtag-border); border-radius: 0 0 var(--radius) var(--radius);
  background: var(--weiss); box-shadow: 0 8px 20px color-mix(in srgb, var(--dunkelgraubraun) 20%, transparent); }
.anlage-suchauswahl-panel input { width: 100%; min-height: 2.35rem; margin: 0 0 .35rem; padding: .4rem .5rem; }
.anlage-suchauswahl-treffer { max-height: 7rem; overflow-y: auto; }
.anlage-suchauswahl-treffer button { display: block; width: 100%; min-height: 2.5rem; padding: .45rem .6rem;
  border: 0; background: var(--weiss); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.anlage-suchauswahl-treffer button:hover, .anlage-suchauswahl-treffer button[aria-pressed=true] { background: var(--foxtag-filter); }
.anlage-suchauswahl-treffer p { margin: .35rem; font-size: .875rem; }

/* Detail navigation: functional links and honest disabled modules are distinct. */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; margin-bottom: .65rem; color: var(--foxtag-text); }
.breadcrumbs a { text-decoration: none; }
.anlage-detail-kopf h1 span { color: var(--foxtag-text); font-weight: 300; }
.anlage-detail-fakten { display: flex; justify-content: flex-end; gap: .75rem; margin: .35rem 0 .8rem; }
.anlage-detail-fakten section { min-width: 10rem; padding: .7rem .9rem; border: 1px solid var(--foxtag-border); border-radius: var(--radius); background: var(--foxtag-filter); }
.anlage-detail-fakten h2 { margin: 0 0 .3rem; font-size: 1rem; color: var(--text); }
.anlage-detail-fakten p { margin: .15rem 0; }
.faellig-punkt { display: inline-block; width: .75rem; height: .75rem; margin-right: .35rem; border-radius: 50%; background: var(--ampel-grau); }
.faellig-punkt--überfällig, .faellig-punkt--fällig { background: var(--ampel-dunkelrot); }
.faellig-punkt--bald { background: var(--ampel-amber); }
.tabs { gap: 0; margin-top: 1.2rem; border-bottom-color: var(--foxtag-border); overflow-x: auto; flex-wrap: nowrap; }
.tabs a, .tabs .tab-disabled { flex: 0 0 auto; padding: .7rem .85rem; color: var(--foxtag-text); white-space: nowrap; text-decoration: none; }
.tabs a.aktiv { color: var(--foxtag-blue); border-bottom-color: var(--foxtag-blue); }
.tabs .tab-disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) {
  .anlagenart-tabs { flex-wrap: wrap; overflow-x: visible; }
  .anlagenart-tabs a { padding: .5rem .65rem; }
}
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .25rem; border-radius: 999px; background: var(--foxtag-filter); font-size: .8rem; }
.anlage-overview { max-width: 58rem; padding: 1.3rem; border: 1px solid var(--foxtag-border); box-shadow: 0 2px 6px color-mix(in srgb, var(--foxtag-navy) 12%, transparent); }
.anlage-overview h2 { margin-top: 0; }
.anlage-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 0; }
.anlage-overview-grid dt { color: var(--foxtag-text); font-weight: 700; }
.anlage-overview-grid dd { margin: .15rem 0 0; }

/* Search and empty placeholders use the same information density. */
.suchergebnis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.suchergebnis { border: 1px solid var(--foxtag-border); border-radius: var(--radius); background: var(--weiss); }
.suchergebnis-kopf { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; background: var(--foxtag-filter); }
.suchergebnis h2 { margin: 0; font-size: 1.1rem; color: var(--foxtag-text); }
.suchergebnis-kopf span { color: var(--foxtag-text); font-variant-numeric: tabular-nums; }
.suchergebnis ul { list-style: none; margin: 0; padding: 0; }
.suchergebnis li { border-top: 1px solid var(--foxtag-border); }
.suchergebnis li a { display: grid; gap: .1rem; padding: .65rem 1rem; text-decoration: none; }
.suchergebnis li a span, .such-leer, .suchergebnis--leer p { color: var(--foxtag-text); font-size: .9rem; }
.such-leer, .suchergebnis--leer p { padding: .8rem 1rem; }
.placeholder-seite { max-width: 52rem; }

/* Map owns precisely the space left by its actual header, including mobile. */
.karte-layout { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.karte-layout .topbar { flex: 0 0 auto; }
.karte-layout .inhalt--karte {
  flex: 1 1 auto; min-height: 0; height: auto; max-width: none;
  width: 100%; margin: 0; padding: 0; overflow: hidden;
}
.karte-seite { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.karte-seite .foxtag-filterband { flex: 0 0 auto; }
.karte-seite .karten-buehne { flex: 1 1 auto; min-height: 0; }
.karte-seite .karten-buehne #karte { height: 100%; min-height: 0; }

.karten-buehne { border-color: var(--foxtag-border); border-radius: 0; }

:focus-visible { outline: 3px solid var(--foxtag-blue); outline-offset: 2px; }
@media (max-width: 1120px) {
  .global-search { flex-basis: 21rem; min-width: 11rem; margin-left: .5rem; }
  .mainnav :is(a, button.editor-nav) { padding-left: .5rem; padding-right: .5rem; }
  .brand { font-size: 1rem; letter-spacing: .08em; }
}
@media (max-width: 760px) {
  :root { --topbar-height: auto; }
  .topbar { height: auto; display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem;
    grid-template-rows: 2.55rem 2.55rem auto; gap: .1rem .3rem; padding: .2rem .5rem; }
  .brand { grid-column: 1; grid-row: 1; align-self: center; padding: .3rem .35rem; }
  .topbar-right { grid-column: 2; grid-row: 1; justify-self: end; padding: 0; }
  .global-search { grid-column: 1 / -1; grid-row: 2; align-self: center; min-width: 0; width: 100%; margin: 0; }
  /* Mobile: the main navigation gets its own full-width row and wraps, so no item is clipped. */
  .mainnav { grid-column: 1 / -1; grid-row: 3; align-self: center; width: 100%; min-width: 0;
    flex-wrap: wrap; overflow: visible; row-gap: .1rem; padding-bottom: .15rem; }
  .mainnav :is(a, button.editor-nav) { padding: .45rem .55rem; }
  .inhalt { padding: 1.1rem .75rem 2rem; }
  .karte-layout .inhalt--karte { height: auto; min-height: 0; padding: 0; overflow: hidden; }
  .karte-seite { height: 100%; min-height: 0; }
  .karte-seite .karten-buehne { flex: 1 1 auto; height: auto; min-height: 0; }
  .karte-seite .karten-buehne #karte { height: 100%; }
  .foxtag-filterband { align-items: center; flex-wrap: nowrap; overflow-x: auto; min-height: 0; padding: .5rem; }
  .foxtag-filterband .filter-control, .foxtag-filterband .filter-control--wide { flex: 0 0 10rem; min-width: 9rem; }
  .foxtag-filterband .filter-control--wide { flex-basis: 14rem; }
  .kunden-filterband { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; overflow: visible; }
  .kunden-filterband .schnellindex { width: 100%; }
  .kunden-filterband .filter-control.kunden-suchfeld { min-width: 0; width: 100%; }
  .inventory-date-range { width: 100%; }

  .anlagen-inhalt { padding: 1.1rem .75rem 2rem; }
  .inhalt--kunden > .seitenkopf, .inhalt--kunden > .kundenliste { padding-inline: .75rem; }
  .inhalt--kunden > .seitenkopf { margin-top: 1.1rem; }
  .foxtag-filterband .filter-apply, .foxtag-filterband .filter-reset { margin-left: 0; }
  .seitenkopf, .anlage-detail-kopf { align-items: stretch; }
  .seitenaktionen { justify-content: flex-start; }
  .kundenkarte { grid-template-columns: 1fr; gap: .45rem; padding-right: 3.6rem; }
  .kundenkarte-kennzahlen { gap: .45rem; }
  .objektblock-kopf, .kundenblock-kopf, .objekt-leer { align-items: flex-start; flex-direction: column; }
  .anlagenzeilen { padding-left: .75rem; padding-right: .75rem; }
  .anlagezeile { grid-template-columns: 1fr; gap: .3rem; }
  .suchergebnis-grid { grid-template-columns: 1fr; }
  .anlage-detail-fakten { justify-content: stretch; flex-direction: column; }
  .anlage-detail-fakten section { min-width: 0; }
  .anlage-overview-grid { grid-template-columns: 1fr; }
  .kunde-dialog-inhalt { grid-template-columns: 1fr; padding-left: 1rem; padding-right: 1rem; }
  .kunde-dialog-feld[data-form-field="plz"], .kunde-dialog-feld[data-form-field="ort"] { grid-column: 1; }
  .kunde-dialog-feld--readonly { align-items: flex-start; flex-direction: column; gap: .1rem; }
  .anlage-dialog-kopf, .anlage-dialog-fuss { padding: .65rem 1rem; }
  .anlage-dialog-inhalt { padding: .5rem 1rem 1rem; }
  .anlage-dialog-feld { grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .35rem 0; }
  .anlage-dialog-feld > label, .anlage-dialog-feld > .anlage-dialog-label { margin: 0; }
  .anlage-dialog-erweitert { padding-left: 0; }
}
/* Detail block spacing; shared page gutters are owned by main below. */
.inhalt.inhalt--detail {
  max-width: 1440px;
  padding: 2rem clamp(1rem, 3vw, 3rem) 4rem;
}
.detail-tabellen-scroll { max-width: 100%; overflow-x: auto; }
/* Component identifiers wrap within metadata, never inherited by data tables. */
.komponente-metadaten > div { min-width: 0; overflow-wrap: anywhere; }
.komponente-qr-inhalt code { overflow-wrap: anywhere; }
/* Keep ordinary words intact; only metadata labels need emergency wrapping. */
.inhalt--detail .anlage-detail-kopf h1 { min-width: 0; overflow-wrap: break-word; }
.inhalt--detail .anlage-overview-grid dd { overflow-wrap: anywhere; }
.inhalt--detail .komponenten-blockkarte { overflow: visible; }
.komponenten-tabellen-scroll { overscroll-behavior-x: contain; }
.komponenten-tabellen-scroll:focus-visible { outline-offset: 0; }
.komponenten-tabelle { min-width: 64rem; overflow-wrap: normal; }
.komponenten-tabelle th { min-width: 6rem; }
.komponenten-tabelle th:nth-child(7) { min-width: 4.5rem; }
.komponenten-tabelle td:nth-child(2),
.komponenten-tabelle td:nth-child(3),
.komponenten-tabelle td:nth-child(4) { max-width: 18rem; overflow-wrap: break-word; }
.anlage-infoband {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--graubraun-schleier);
  border-radius: var(--radius);
}
.anlage-infoband .kopfdaten {
  flex: 1 1 0;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: .5rem 1.5rem;
  margin: 0;
  padding: 0;
}
.anlage-infoband .kopfdaten > div { min-width: 0; overflow-wrap: anywhere; }
.anlage-infoband .anlage-detail-fakten {
  flex: 0 1 19rem;
  min-width: 0;
  display: grid;
  align-content: start;
  margin: 0;
}
.anlage-infoband .anlage-detail-fakten section {
  min-width: 0;
  padding: 0 0 0 1rem;
  border: 0;
  border-left: 1px solid var(--graubraun-linie);
  border-radius: 0;
  background: transparent;
}
.faelligkeiten-liste {
  max-height: 5.5rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  margin: 0;
  padding: .15rem .5rem .15rem .2rem;
  list-style: none;
}
.faelligkeiten-liste li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .15rem .35rem;
  padding-block: .15rem;
}
.faelligkeiten-liste .faellig-punkt { flex: 0 0 .75rem; margin-right: 0; }
.faelligkeiten-liste time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.faelligkeiten-liste:focus-visible { outline-offset: 0; }
@media (max-width: 760px) {
  .inhalt.inhalt--detail { padding-block: 1.25rem 2rem; }
  .anlage-infoband { flex-direction: column; gap: 1rem; }
  .anlage-infoband .kopfdaten { grid-template-columns: minmax(0, 1fr); }
  .anlage-infoband .anlage-detail-fakten { flex-basis: auto; }
  .anlage-infoband .anlage-detail-fakten section {
    padding: .75rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--graubraun-linie);
  }
  .faelligkeiten-liste { max-height: 7.5rem; }
}
/* Keep the affordance inside the control, including the compact filter bands. */
select:not([multiple]) {
  appearance: none;
  padding-right: 2.25rem !important;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: .75rem auto;
}
/* Every page, including direct edit fallbacks, owns exactly one edge inset. */
:root { --page-gutter: clamp(16px, 3vw, 48px); }
.inhalt,
.inhalt.inhalt--anlagen,
.inhalt.inhalt--kunden,
.inhalt.inhalt--detail { padding-inline: var(--page-gutter); }
.anlagen-inhalt,
.inhalt--kunden > .seitenkopf,
.inhalt--kunden > .kundenliste { padding-inline: 0; }
/* Only the map canvas is full bleed; its text/controls keep the page inset. */
.karte-seite > .foxtag-filterband { padding-inline: var(--page-gutter); }
.karte-seite > .hilfetext { margin-inline: var(--page-gutter); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* I1.6 interaction states; geometry and historical report data stay untouched. */
input, select, textarea, button, summary { accent-color: var(--schiefergrau); }
button, summary, .tabs a, .blockkarte > summary, .trefferliste a, .dialog-schliessen, .karten-stil-wechsel button { color: var(--schiefergrau); }
input:not([type=hidden]), select, textarea { color: var(--schiefergrau); }
input::placeholder, textarea::placeholder { color: var(--schiefergrau); opacity: 1; }
a:not(.btn):not(.btn-ghost):hover { text-decoration: underline; }
.btn:active, .btn-primaer:active, .treffer-zaehler:active { background: var(--schiefergrau-pressed); border-color: var(--schiefergrau-pressed); color: var(--weiss); }
.btn:disabled, .btn-primaer:disabled, button[aria-disabled=true] { background: var(--graubraun-schleier); color: var(--schiefergrau); border-color: var(--schiefergrau); box-shadow: none; opacity: 1; cursor: not-allowed; }
input:disabled, select:disabled, textarea:disabled { color: var(--schiefergrau); opacity: 1; }
.tabs a.inakt, .tabs .tab-disabled, .schnellindex .inaktiv { color: var(--schiefergrau); opacity: 1; }
.fehler::before, .fehlerliste > li::before { content: "⚠ "; }
[aria-invalid=true], input:user-invalid, select:user-invalid, textarea:user-invalid { border: 2px double var(--schiefergrau); }
/* Header navigation is the explicit white-on-red exception, not ordinary UI. */
.topbar > .brand, .mainnav :is(a, button.editor-nav) { color: var(--weiss); }
.topbar .btn-ghost:focus-visible, .profil-menue > summary:focus-visible { outline-color: var(--weiss); }

/* Shared inventory disclosures keep actions and names reachable at every width. */
.inventory-controls { margin-block: .75rem; }
.inventory-tree summary { cursor: pointer; list-style: none; min-width: 0; }
.inventory-tree summary::-webkit-details-marker { display: none; }
.inventory-tree summary::before { content: "▸"; flex: 0 0 1rem; }
.inventory-tree details[open] > summary::before { content: "▾"; }
/* Branches without children keep the chevron slot, so names stay in one column. */
.inventory-tree div.kundenblock-kopf::before, .inventory-tree div.objektblock-kopf::before { content: ""; flex: 0 0 1rem; }
.inventory-tree div.kundenblock-kopf > span:first-of-type, .inventory-tree div.objektblock-kopf > span:first-of-type { flex: 1; min-width: 0; }
.inventory-tree .kundenblock-kopf, .inventory-tree .objektblock-kopf { justify-content: flex-start; }
.inventory-tree summary > span:first-of-type { flex: 1; min-width: 0; }
.inventory-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-left: auto; }
.inventory-plant > .anlagezeile { grid-template-columns: 1rem minmax(0, 1fr) minmax(8rem, auto) auto auto; }
.inventory-devices { padding: .5rem 1rem 1rem 2rem; }
.inventory-device { border-top: 1px solid var(--graubraun-linie); padding-block: .5rem; }
.inventory-device > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.inventory-device p, .inventory-device-child { margin: .5rem 0 .5rem 1.5rem; }
.inventory-tree a, .inventory-tree .hilfetext { overflow-wrap: anywhere; }
[data-live-inventory].filterband { flex-wrap: wrap; overflow: visible; }
@media (max-width: 700px) {
  .inventory-tree .kundenblock-kopf, .inventory-tree .objektblock-kopf { flex-direction: row; flex-wrap: wrap; }
  .inventory-row-actions { flex: 1 1 100%; margin-left: 1.5rem; }
  .inventory-plant > .anlagezeile { display: flex; flex-wrap: wrap; gap: .5rem; }
  .inventory-plant > .anlagezeile > span { flex: 1 1 100%; margin-left: 1.5rem; }
  .inventory-plant > .anlagezeile > span:first-of-type { flex: 1 1 calc(100% - 3rem); margin-left: 0; }
  .inventory-devices { padding-inline: .75rem; }
  [data-live-inventory].filterband .filter-control { flex: 1 1 100%; min-width: 0; }
}

/* A date error owns a separate grid row, never control width or height. */
.inventory-range-error { grid-column: 1 / -1; margin: 0; }
.kunden-filterband { align-items: flex-start; }
.kunden-filterband .kunden-suchfeld { align-self: flex-start; padding-top: 0; }
.kunden-filterband input[type="search"],
.kunden-filterband .digit-date > input { box-sizing: border-box; height: 44px; min-height: 44px; max-height: 44px; }
.kunden-filterband .digit-date > input[type="text"] { width: 100%; }
.inventory-device-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.inventory-device-name { flex: 1; min-width: 0; }
.inventory-device-name .hilfetext { display: block; }
.inventory-device-leaf { padding-left: 1.5rem; }
.inventory-device > .inventory-device { margin-left: 1.5rem; }
@media (max-width: 760px) {
  .kunden-filterband .kunden-suchfeld { padding-top: 0; }
  .inventory-device-row { flex-wrap: wrap; }
}

.kunden-filterband .filter-control { flex-direction: column; }
.kunden-filterband .filter-control > span { font-size: .78rem; line-height: 1.25; margin-bottom: .2rem; }
.kunden-filterband .schnellindex { align-self: center; }
.inventory-date-range legend { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Only real parents disclose; leaves retain a neutral row. */
details.inventory-device > summary { cursor: pointer; }
details.inventory-device > summary::before { content: "▸"; flex: 0 0 1rem; }
details.inventory-device[open] > summary::before { content: "▾"; }

/* Each real node encloses its descendants; inner cards stay light and shadow-free. */
.inventory-tree [data-tree-node] { min-width: 0; border: 1px solid var(--foxtag-border); border-radius: var(--radius); background: var(--weiss); }
.inventory-tree .objektblock, .inventory-tree .inventory-plant, .inventory-tree .inventory-device { box-shadow: none; padding: 0; }
.inventory-tree .inventory-children, .inventory-tree .anlagenzeilen, .inventory-tree .inventory-devices { display: grid; gap: .75rem; padding: .75rem; margin: 0; }
.inventory-tree .objektblock-kopf, .inventory-tree .inventory-device > summary, .inventory-tree .inventory-device-row { padding: .75rem; }
.inventory-tree .kundenblock-kopf { border-radius: var(--radius); }
.inventory-tree .inventory-plant > .anlagezeile { display: flex; flex-wrap: wrap; border: 0; padding: .75rem; }
.inventory-tree .inventory-plant > .anlagezeile > .anlagezeile-main { flex: 1 1 12rem; }
.inventory-tree .inventory-plant > .anlagezeile > span { min-width: 0; }
.inventory-tree .inventory-device-name { overflow-wrap: anywhere; }
.inventory-tree .inventory-device-row { flex-wrap: wrap; }

/* Only the matched Details/Edit pair changes, not global secondary or create actions. */
.inventory-tree .inventory-row-actions > .inventory-action { background: transparent; color: var(--schiefergrau); border: 1px solid var(--schiefergrau); border-radius: var(--radius); padding: .25rem .55rem; font-size: .85rem; line-height: 1.5; box-shadow: none; text-decoration: none; white-space: nowrap; }
.inventory-tree .inventory-row-actions > .inventory-action:hover,
.inventory-tree .inventory-row-actions > .inventory-action:focus-visible { background: var(--schiefergrau); color: var(--weiss); border-color: var(--schiefergrau); }
.inventory-tree .inventory-row-actions > .inventory-action:focus-visible { outline: 2px solid var(--schiefergrau); outline-offset: 3px; }
@media (max-width: 700px) {
  /* Small consistent insets avoid cumulative loss of usable width at the deepest level. */
  .inventory-tree .inventory-children, .inventory-tree .anlagenzeilen, .inventory-tree .inventory-devices { padding: .375rem; gap: .5rem; }
  .inventory-tree .kundenblock-kopf, .inventory-tree .objektblock-kopf, .inventory-tree .inventory-plant > .anlagezeile, .inventory-tree .inventory-device > summary, .inventory-tree .inventory-device-row { padding: .5rem; }
  .inventory-tree .inventory-row-actions { margin-left: 0; gap: .5rem; }
  .inventory-tree .inventory-plant > .anlagezeile > span { margin-left: 0; }
  .inventory-tree .inventory-plant > .anlagezeile > .anlagezeile-main { flex: 1 1 calc(100% - 3rem); }
}

/* Spinner-only progress: currentColor, stable label and reduced motion. */
[aria-busy="true"]:has(> .button-spinner) { position:relative; }
.button-spinner { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-block; flex:none; width:.85em; height:.85em; margin-inline-start:0; border:2px solid currentColor; border-inline-end-color:transparent; border-radius:50%; vertical-align:-.08em; animation:button-spin .8s linear infinite; }
@keyframes button-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .button-spinner { animation:none; border-style:dotted; } }
.entity-form-dialog { width:min(48rem,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); }
.entity-form-dialog .formular { max-width:none; }
.entity-form-dialog .anlage-dialog-inhalt { overflow:auto; }

.checklist-dialog { width:min(80rem,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); }
.checklist-dialog .anlage-dialog-inhalt { overflow:auto; }

/* Cockpit cards respond as a whole, never as underlined text. */
a.kachel, a.kachel:not(.btn):not(.btn-ghost):hover, a.kachel:focus-visible { text-decoration: none; }
a.kachel { transition: transform 160ms ease, box-shadow 160ms ease; }
a.kachel:hover { transform: translateY(-2px); box-shadow: 0 5px 12px color-mix(in srgb, var(--foxtag-navy) 16%, transparent); }
a.kachel:focus-visible { outline: 2px solid var(--schiefergrau); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.kachel { transition: none; } a.kachel:hover { transform: none; } }
.inventory-tree .inventory-type > summary > .anlagezeile-main { flex: 1 1 10rem; min-width: 0; }
.inventory-tree .inventory-type > summary > .inventory-due,
.inventory-tree .inventory-device-row > .inventory-due { margin-left: auto; text-align: right; }
.inventory-tree .inventory-device-name { flex: 1 1 8rem; }
.inventory-tree .inventory-device-row > .inventory-row-actions { margin-left: 0; }
.inventory-tree .kundenblock-name small { font-size: .8rem; }
/* Henry's scoped hierarchy refinement preserves the incumbent nested cards. */
.topbar .mainnav :is(a, button.editor-nav):hover, .topbar .brand:hover { text-decoration: none; }
.inventory-tree .inventory-due { flex: 0 1 auto; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.inventory-tree .inventory-due--ueberfaellig { color: var(--ampel-dunkelrot); font-weight: 600; }
.inventory-tree .inventory-device-location { flex: 0 1 12rem; overflow-wrap: anywhere; }
.kunde-dialog-feld .kunde-first-object { display: flex; align-items: center; gap: .7rem; min-height: 44px; }
.kunde-dialog-feld .kunde-first-object input[type="checkbox"] { flex: none; width: 1.4rem; height: 1.4rem; min-height: 0; margin: 0; accent-color: var(--schiefergrau); }
.kunde-dialog-feld[hidden] { display: none; }
@media (max-width: 760px) {
  .inventory-tree .inventory-device-location, .inventory-tree .inventory-device-row > .inventory-due { flex-basis: 100%; }
}
.detail-inventory-infoband { display: grid; grid-template-columns: minmax(10rem, .8fr) minmax(14rem, 1.3fr) minmax(14rem, .9fr); align-items: start; }
.detail-inventory-infoband .kopfdaten { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
.detail-inventory-infoband .faelligkeiten-liste { max-height: 11rem; }
.detail-object-map { position: relative; min-width: 0; }
.detail-map-canvas { width: 100%; height: 200px; border-radius: var(--radius); }
.detail-object-map p:empty { display: none; }
.detail-object-map p { margin: .35rem 0; overflow-wrap: anywhere; }
.detail-object-map .pin-popup { overflow-wrap: anywhere; }
.detail-object-map .pin-popup { display: flex; flex-direction: column; gap: .5rem; }
.detail-object-map .pin-popup-body { max-height: 8rem; overflow-y: auto; overscroll-behavior-y: contain; }
.detail-object-map .pin-popup-body:focus-visible { outline: 2px solid var(--schiefergrau); outline-offset: 0; }
.detail-object-map > .maplibregl-popup { z-index: 3; top: 0; left: 0; width: 100%; max-width: 100% !important; transform: none !important; }
.detail-object-map > .maplibregl-popup .maplibregl-popup-tip { display: none; }
.detail-object-map .maplibregl-marker:focus-visible { outline: 2px solid var(--schiefergrau); outline-offset: 3px; }
.inventory-management { margin-top: 1rem; }
@media (max-width: 760px) {
  .detail-inventory-infoband { grid-template-columns: minmax(0, 1fr); }
  .detail-inventory-infoband .faelligkeiten-liste { max-height: 7.5rem; }
}
/* Iteration 2: bounded business lists, a single label input, and existing editor in a modal. */
.faelligkeiten-liste li { display: grid; grid-template-columns: .75rem minmax(5.5rem, auto) minmax(5rem, 1fr); gap: .25rem .5rem; }
.faelligkeiten-liste .due-origin { grid-column: 2 / -1; font-size: .85rem; overflow-wrap: anywhere; }
.inventory-tree small { font-size: .8rem; font-weight: normal; }
.combobox-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .4rem; }
.combobox-chips button { border: 1px solid var(--graubraun-linie); background: var(--graubraun-schleier); border-radius: .3rem; padding: .3rem .5rem; }
.art-editor-dialog { width: min(1100px, calc(100vw - 24px)); max-width: calc(100vw - 24px); padding: .75rem; }
.art-editor-iframe { display: block; width: 100%; height: 74vh; border: 0; margin-top: .5rem; }
.art-editor-frame .inhalt { padding: 1rem; }
.art-context { margin-block: .75rem; }
.pin-popup { display: flex; flex-direction: column; overflow: hidden; gap: .5rem; max-height: min(420px, 65vh); }
.karten-buehne .maplibregl-popup { z-index: 3; }
.pin-popup-body { min-height: 0; overflow-y: auto; max-height: min(340px, 50vh); overscroll-behavior: contain; overflow-wrap: anywhere; }
.pin-popup-body:focus-visible { outline: 2px solid var(--schiefergrau); outline-offset: 0; }
.pin-popup-body details { margin-block: .35rem; padding-left: .4rem; }
.pin-popup-body summary { cursor: pointer; }
.pin-popup-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: .5rem; }
.pin-dates { padding-left: 1.25rem; margin-block: .4rem; }
/* Paket 1: one popup anatomy for every dialog. Reference = "Kunde hinzufügen":
 * header (context + title + close), scrolling body, footer with right-aligned buttons. */
:is(.anlage-dialog, .art-typ-dialog) { border-color: var(--foxtag-border);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--foxtag-navy) 35%, transparent); }
:is(.anlage-dialog, .art-typ-dialog):not(.checklist-dialog):not(.art-editor-dialog):modal {
  width: min(820px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
:is(.anlage-dialog, .art-typ-dialog)[open] { display: flex; flex-direction: column; overflow: hidden; }
:is(.anlage-dialog, .art-typ-dialog) > form { display: flex; flex-direction: column; flex: 1 1 auto;
  min-height: 0; max-width: none; max-height: none; margin: 0; }
:is(.kunde-dialog-kopf, .anlage-dialog-kopf, .art-typ-dialog-kopf) { flex: none; display: flex;
  align-items: center; justify-content: space-between; gap: .75rem; padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--foxtag-border); }
:is(.kunde-dialog-kopf, .anlage-dialog-kopf, .art-typ-dialog-kopf) > div { min-width: 0; }
:is(.kunde-dialog-kopf, .anlage-dialog-kopf, .art-typ-dialog-kopf) h2 { margin: 0; font-size: 1.9rem;
  font-weight: 400; line-height: 1.2; overflow-wrap: break-word; }
:is(.anlage-dialog-inhalt, .art-typ-dialog-inhalt) { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: .5rem 1.5rem 1.4rem; }
:is(.kunde-dialog-fuss, .anlage-dialog-fuss, .art-typ-dialog-fuss) { flex: none; display: flex;
  align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; margin: 0;
  padding: .8rem 1.5rem; border-top: 1px solid var(--foxtag-border); border-bottom: 0; background: var(--weiss); }
:is(.kunde-dialog-fuss, .anlage-dialog-fuss, .art-typ-dialog-fuss) .btn { min-height: 44px; }
.art-typ-dialog-feld label { font-weight: 400; font-size: .875rem; }
.art-typ-dialog :focus-visible { outline: 3px solid var(--schiefergrau); outline-offset: 2px; }
/* Large editors keep their width; their in-form footer stays pinned like a dialog footer. */
.checklist-dialog .anlage-dialog-inhalt { padding-bottom: 0; }
.checklist-dialog .formular-ende { position: sticky; bottom: 0; z-index: 2; margin: 1rem -1.5rem 0;
  padding: .8rem 1.5rem; background: var(--weiss); border-top: 1px solid var(--foxtag-border); }
.checklist-dialog .formular-ende .btn { min-height: 44px; }
.art-editor-dialog { width: min(1100px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem); padding: 0; }
.art-editor-dialog .art-editor-inhalt { padding: 0; overflow: hidden; }
.art-editor-dialog .art-editor-iframe { height: min(74vh, calc(100dvh - 13rem)); margin: 0; }
.art-editor-dialog .art-editor-inhalt > [data-edit-error] { padding: 1rem 1.5rem; }
@media (max-width: 760px) {
  :is(.anlage-dialog, .art-typ-dialog, .art-editor-dialog):modal { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  :is(.kunde-dialog-kopf, .anlage-dialog-kopf, .art-typ-dialog-kopf) { padding: 1rem; }
  :is(.kunde-dialog-kopf, .anlage-dialog-kopf, .art-typ-dialog-kopf) h2 { font-size: 1.5rem; }
  :is(.anlage-dialog-inhalt, .art-typ-dialog-inhalt) { padding: .5rem 1rem 1rem; }
  :is(.kunde-dialog-fuss, .anlage-dialog-fuss, .art-typ-dialog-fuss) { padding: .65rem 1rem; }
  .checklist-dialog .formular-ende { margin-inline: -1rem; padding-inline: 1rem; }
}

/* Paket 1: address hint lives at the object itself, as plain text (no action). */
.adresse-hinweis { display: block; margin-top: .15rem; color: var(--schiefergrau); font-size: .85rem;
  font-weight: 600; overflow-wrap: anywhere; }
.adresse-hinweis::before { content: "⚠ "; }
.objektblock-adresse .adresse-hinweis { margin-top: .1rem; }

/* Paket 1: Anlagenteil band = same three-column band as Kunde/Objekt/Anlage, without map. */
.komponente-infoband { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.komponente-infoband > .kopfdaten + .kopfdaten { padding-left: 1rem; border-left: 1px solid var(--graubraun-linie); }
.komponente-details { margin: .5rem 0 1rem; }
.komponente-faelligkeiten .anlage-detail-fakten { margin: 0 0 1rem; }
@media (max-width: 760px) {
  .komponente-infoband { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .komponente-infoband > .kopfdaten + .kopfdaten { padding-left: 0; padding-top: 1rem; border-left: 0;
    border-top: 1px solid var(--graubraun-linie); }
}

/* Paket 3: detail list view toggles; state is the URL, so a popup refresh keeps it. */
.listen-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.listen-steuerung-form { margin: 0; }
.listen-schalter { display: inline-flex; align-items: center; gap: .4rem; }
/* Toggles stay outlined in every state: the check box / arrow carries the state, never a dark fill. */
.listen-haken { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border: 1.5px solid currentColor; border-radius: 3px; font-size: .8rem; line-height: 1; }
.listen-richtung { display: inline-block; min-width: .8em; text-align: center; }
.listen-richtung:empty { display: none; }

/* Paket 4a: Archiv statt Löschen */
:is(.anlage-dialog-fuss, .art-typ-dialog-fuss, .kunde-dialog-fuss, .formular-ende) .archiv-ausloeser { margin-right: auto; }
.archiv-tabs { flex-wrap: wrap; }
.archiv-tabs small { color: var(--schiefergrau); font-weight: 400; }
/* Paket 5: Archiv-Suche rechts neben den Tabs, auf Mobile darunter umbrechend. */
.archiv-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin: 1.2rem 0 1rem; border-bottom: 1px solid var(--foxtag-border); }
/* Tabs behalten ihre Inhaltsbreite: passt die Suche nicht daneben, bricht die Suche um, nicht die Tabs. */
.archiv-kopf .archiv-tabs { flex: 1 1 auto; min-width: 0; margin: 0; border-bottom: 0; }
.archiv-suche { position: relative; flex: 0 1 14rem; min-width: 11rem; margin: 0 0 .45rem auto; }
.archiv-suche input[type="search"] { width: 100%; box-sizing: border-box; min-height: 2.25rem; padding: .35rem .6rem; background: var(--weiss); border: 1px solid var(--foxtag-border); border-radius: var(--radius); color: var(--text); font: inherit; }
@media (max-width: 700px) { .archiv-suche { flex: 1 1 100%; margin-left: 0; } }
.archiv-datum { display: block; color: var(--schiefergrau); }
.archiv-eltern-hinweis { margin: 0; }
.archiv-hinweis-aktionen { justify-content: flex-start; flex-wrap: wrap; }
.archiv-hinweis-aktionen form { margin: 0; }

/* Paket 4b: Labels-Editor, Kundennotiz im Band, Archiv-Dialog-Feinschliff */
.labels-editor, .archiv { padding: 1rem 0; }
.kachel-liste { display: grid; gap: .75rem; margin-top: 1rem; }
/* Kacheln klappen nie auf: kein reservierter Pfeil-Platz, symmetrischer Innenabstand. */
.kachel-liste div.kundenblock-kopf::before { content: none; }
.detail-notiz { display: grid; gap: .4rem; justify-items: start; }
.detail-notiz h2 { margin: 0; }
.detail-notiz .hilfetext { margin: 0; }
/* Ganze Zeilen: Höhe = 4 Zeilen à 1.375rem, darüber scrollt der Text. */
.detail-notiz-text { justify-self: stretch; max-height: 5.5rem; line-height: 1.375rem; overflow-y: auto; overscroll-behavior-y: contain; overflow-wrap: anywhere; padding-right: .5rem; }
.detail-notiz-text:focus-visible { outline: 2px solid var(--schiefergrau); outline-offset: 0; }
.kundennotiz-tab h2 { margin: 0 0 .4rem; font-size: 1rem; }
.kundennotiz-tab p { overflow-wrap: anywhere; }
.komponente-notiz .anlage-detail-fakten { justify-content: flex-start; }
.formular-ende > .btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.25; }

/* Paket 6b: Standortarten-Editor */
.standortart-karte .standort-werte > p { margin: 0; }
.standort-moves form, .standort-pflicht { display: inline-flex; margin: 0; }
.standort-moves button:disabled { opacity: .4; cursor: default; }
/* Paket 9: weitere Adressen im Objekt-Formular (Pfeile wie bei Standortarten). */
.weitere-adressen-liste { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .5rem; }
.weitere-adressen-liste:empty { display: none; }
.weitere-adresse { display: flex; align-items: center; gap: .5rem; }
.weitere-adresse input[type="text"] { flex: 1 1 auto; min-width: 0; }
.weitere-adresse .prueflisten-moves { flex: 0 0 auto; }
.standortart-karte .inventory-row-actions { flex-wrap: wrap; align-items: center; gap: .4rem; }
.objekt-standortwerte { display: grid; gap: .5rem; margin: 1rem 0; }
.objekt-standortwerte h2, .objekt-standortwerte h3 { margin: 0; }
.objekt-standortwerte ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.objekt-standortwerte li { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); }

/* Paket 6c: Konfigurator (Felder je Anlagenart bzw. Typ, Freifelder) und schlanke Popups. */
[data-konfig-feld][hidden] { display: none !important; }
.konfig-attribute, .konfig-freifelder { border: 1px solid var(--graubraun-linie); border-radius: var(--radius); padding: .75rem; margin: 0 0 1rem; min-width: 0; }
.konfig-attribute { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .4rem 1rem; }
.konfig-attribute > legend, .konfig-freifelder > legend { font-weight: 600; padding: 0 .3rem; }
.formular .konfig-check { margin: 0; }
.konfig-check { display: flex; align-items: center; gap: .5rem; font-weight: 400; min-height: 2.5rem; cursor: pointer; }
.formular .konfig-check input, .konfig-check input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; flex: none; }
.konfig-freifeld { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: .5rem; align-items: end; margin-bottom: .75rem; }
.konfig-freifeld label { display: grid; gap: .25rem; min-width: 0; margin: 0; }
.konfig-freifeld input, .konfig-freifeld select { min-height: 2.75rem; box-sizing: border-box; margin: 0; }
.konfig-freifeld .btn { align-self: center; margin-top: 1.4rem; }
@media (max-width: 600px) { .konfig-freifeld .btn { justify-self: start; margin-top: 0; } }
.konfig-freifelder > [data-freifeld-add] { margin-top: .5rem; }
@media (max-width: 600px) { .konfig-freifeld { grid-template-columns: 1fr; } }
.dialog-fixwerte { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem 1rem; margin: 0 0 1rem; }
.dialog-fixwerte dt { font-weight: 600; }
.dialog-fixwerte dd { margin: 0; overflow-wrap: anywhere; }
/* Alle Auswahlfelder in Popups gleich: weiß, gleicher Pfeil. */
select:not([multiple]) { background-color: var(--weiss); }
/* Einzelne Checkbox (z. B. Funkvernetzt) steht in einer Zeile mit ihrer Beschriftung. */
.formular [data-form-field]:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.formular [data-form-field]:has(> input[type="checkbox"]) > input[type="checkbox"] { order: -1; width: auto; min-height: 0; margin: 0; }
.formular [data-form-field]:has(> input[type="checkbox"]) > label { margin: 0; line-height: 1.3; }
.formular [data-form-field]:has(> input[type="checkbox"]) > .fehlerliste { flex-basis: 100%; }

/* Paket 7: Standortarten wie /anlagenarten (1rem zwischen Art-Karten, .75rem Kinderzone wie
   .inventory-children); Karten per Drag & Drop sortierbar. */
.standortarten-editor .kachel-liste { gap: 1rem; }
.standortarten-editor .standort-sortier-status { min-height: 1.5em; margin: 0; }
.standortarten-editor [data-sort-id] > .kundenblock-kopf,
.standortarten-editor [data-sort-id] > .objektblock-kopf { cursor: grab; }
.standortarten-editor [data-sort-id] :is(a, button, form, input) { cursor: pointer; }
.standortarten-editor [data-sort-id] button:disabled { cursor: default; }
.standortarten-editor [data-sort-id].wird-gezogen { opacity: .5; }
.standortarten-editor [data-sort-drop="before"] { box-shadow: 0 -4px 0 var(--schiefergrau); }
.standortarten-editor [data-sort-drop="after"] { box-shadow: 0 4px 0 var(--schiefergrau); }

/* Paket 10: Rechnungsempfänger am Kunden (Name, dann Adresse; Pfeile wie Weitere Adressen). */
.kunde-rechnungsempfaenger { display: grid; gap: .5rem; margin: 1.5rem 0 1rem; }
.kunde-rechnungsempfaenger-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.kunde-rechnungsempfaenger h2 { margin: 0; }
.kunde-rechnungsempfaenger .hilfetext { margin: 0; }
.rechnungsempfaenger-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rechnungsempfaenger-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .5rem .75rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); }
.rechnungsempfaenger-text { display: grid; gap: .15rem; flex: 1 1 16rem; min-width: 0; }
.rechnungsempfaenger-name { font-weight: 600; overflow-wrap: anywhere; }
.rechnungsempfaenger-name small { font-weight: 400; font-size: .8rem; }
.rechnungsempfaenger-adresse { color: var(--dunkelgraubraun); overflow-wrap: anywhere; }
.rechnungsempfaenger-zeile .inventory-row-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: .4rem; margin-left: 0; }
.rechnungsempfaenger-zeile .inventory-row-actions > .inventory-action { background: transparent; color: var(--schiefergrau); border: 1px solid var(--schiefergrau); border-radius: var(--radius); padding: .25rem .55rem; font-size: .85rem; line-height: 1.5; box-shadow: none; text-decoration: none; white-space: nowrap; }
.rechnungsempfaenger-zeile .inventory-row-actions > .inventory-action:hover,
.rechnungsempfaenger-zeile .inventory-row-actions > .inventory-action:focus-visible { background: var(--schiefergrau); color: var(--weiss); border-color: var(--schiefergrau); }
.rechnungsempfaenger-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0 0; }
.rechnungsempfaenger-filter .filter-control { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.rechnungsempfaenger-filter select { min-height: 2.25rem; max-width: 100%; padding: .3rem .5rem; border: 1px solid var(--graubraun-linie); border-radius: var(--radius); font: inherit; }
[data-rechnungsempfaenger-feld][hidden], .rechnungsempfaenger-filter [hidden] { display: none !important; }

/* Paket 11: Rollen und Mitarbeiter */
fieldset.nur-lesen { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.nur-lesen:disabled { opacity: .75; }
.mitarbeiter-liste .kundenblock-kopf > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.mitarbeiter-meta { color: var(--dunkelgraubraun); font-size: .85rem; overflow-wrap: anywhere; }
.mitarbeiter-inaktiv .kundenblock-name, .mitarbeiter-inaktiv .mitarbeiter-meta { opacity: .7; }
.mitarbeiter-inaktiv .kundenblock-name { color: var(--dunkelgraubraun); }
.einladung-link textarea { width: 100%; min-width: 0; resize: none; font-family: ui-monospace, monospace; font-size: .85rem; word-break: break-all; }
.einladung-form label { display: block; }
.einladung-form .passwort-hilfe ul { margin: .25rem 0 .5rem; padding-left: 1.1rem; }
.keine-berechtigung { max-width: 40rem; }

/* Paket 12: Konfliktschutz bei paralleler Bearbeitung */
.konflikt-praesenz { margin: 0 0 .75rem; padding: .45rem .7rem; border-radius: var(--radius); background: var(--graubraun-schleier); color: var(--dunkelgraubraun); font-size: .92rem; }
.konflikt-praesenz[hidden] { display: none; }
.konflikt-zuletzt { margin: 0 0 .75rem; color: var(--dunkelgraubraun); font-size: .85rem; }
.konflikt-box { margin: 0 0 1rem; padding: .75rem .9rem; border-left: 4px solid var(--dunkelgraubraun); border-radius: var(--radius); background: var(--graubraun-schleier); color: var(--text); }
.konflikt-box p { margin: 0; }
.konflikt-felder { display: grid; gap: .5rem; margin: .75rem 0 0; }
.konflikt-feld { display: grid; gap: .15rem; padding-top: .5rem; border-top: 1px solid var(--graubraun-linie); }
.konflikt-feld dt { font-weight: 600; }
.konflikt-feld dd { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .15rem 1rem; margin: 0; }
.konflikt-wert { overflow-wrap: anywhere; min-width: 0; }
/* Im Konflikt nur die zwei Entscheidungen zeigen, nicht das normale Speichern. */
form:has([data-konflikt]) button[type="submit"]:not([name="_trotzdem"]) { display: none; }
.konflikt-wert-label { display: block; color: var(--dunkelgraubraun); font-size: .8rem; }
.konflikt-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
@media (max-width: 480px) { .konflikt-aktionen .btn { flex: 1 1 100%; justify-content: center; text-align: center; } }