/* myWerkzeug.de – Kontobereich. Tokens aus dem Design System „myWerkzeug.de“. */
@font-face { font-family: "Archivo"; src: url("/fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
:root {
  --surface: #f5f7fc; --raised: #ffffff; --line: #d8deec; --line-strong: #717c9a;
  --ink: #0a1540; --muted: #4a5579; --blue: #1f3fe0; --blue-soft: #e3e9ff; --navy: #0a1540;
  --volt: #c4ff1a; --volt-ink: #3b5a00; --navy-ink: #eef2ff; --navy-muted: #a4aed0; --blue-d: #7d93ff;
  --err: #c3262f; --err-soft: #ffe4e5; --ok: #3b6a00; --ok-soft: #effdc2; --warn: #8a5a00; --warn-soft: #fff1cc;
  --font: "Archivo", "Segoe UI", system-ui, sans-serif;
  --r-sm: 4px; --r-md: 7px; --r-lg: 12px;
  --focus: 0 0 0 1.5px #1f3fe0, 0 0 0 5px rgba(31,63,224,.25);
}
* { box-sizing: border-box; }
html { background: var(--surface); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; }
a { color: var(--blue); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus); }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; font-stretch: 118%; }
h2 { margin: 0 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-stretch: 112%; }
.lead { margin: 0 0 24px; color: var(--muted); max-width: 70ch; }
.eyebrow { margin: 0 0 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); font-stretch: 118%; }

/* Kopfzeile */
.kopf { background: var(--navy); color: var(--navy-ink); }
.kopf .wrap { display: flex; align-items: center; gap: 28px; min-height: 64px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand svg { width: 34px; height: 34px; }
.brand b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-stretch: 118%; }
.brand b span { color: var(--volt); }
.brand em { font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-muted); font-weight: 600; margin-left: 4px; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { color: var(--navy-ink); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: var(--r-sm); }
.nav a:hover { background: rgba(125,147,255,.16); }
.nav a[aria-current] { background: rgba(125,147,255,.22); color: #fff; }
.wer { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--navy-muted); }
.btn-ghost { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--blue-d); border-radius: var(--r-md); color: var(--navy-ink); text-decoration: none; font-size: 14px; font-weight: 600; background: transparent; font-family: inherit; cursor: pointer; }
.btn-ghost:hover { background: rgba(125,147,255,.16); }
.demo-band { background: var(--demo-band, var(--volt)); color: var(--demo-band-tx, var(--navy)); font-size: 14px; padding: 8px 0; box-shadow: inset 0 -1px 0 var(--demo-band-rand, transparent); }
.fuss { margin-top: auto; border-top: 1px solid var(--line); padding: 20px 0; font-size: 13px; color: var(--muted); }
.fuss .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fuss nav { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.fuss a { color: var(--muted); text-decoration: none; }

/* Inhalt */
.inhalt { padding: 36px 0 56px; display: grid; gap: 28px; align-content: start; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.karte { background: var(--raised); background-image: var(--glanz); box-shadow: var(--schatten); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; overflow-wrap: break-word; }
.karte.hervor { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset, var(--schatten); }
.karte h2, .karte h3 { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.karte p { margin: 0; color: var(--muted); font-size: 15px; }
.karte .fuss-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; min-width: 0; }
.karte .fuss-zeile > .hinweis { flex: 1 1 14em; min-width: 0; }
.preis { display: flex; align-items: baseline; gap: 6px; }
.preis b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-stretch: 112%; font-variant-numeric: tabular-nums; }
.preis span { color: var(--muted); font-size: 14px; }
.preis small { display: block; font-size: 12px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: var(--blue-soft); color: var(--blue); white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.aus { background: var(--neutral-soft, #ededf3); color: var(--muted); }
.chip.err { background: var(--err-soft); color: var(--err); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-md); background: var(--blue); background-image: var(--glanz-knopf); box-shadow: var(--knopf-licht); color: var(--auf-blau, #fff); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background-color: var(--blue-hover, #1832b8); }
.btn:active { transform: translateY(1px); }
.btn.zweit { background-color: var(--blue-soft); color: var(--blue); }
.btn.zweit:hover { background-color: color-mix(in srgb, var(--blue-soft) 88%, var(--blue)); }
.btn.leise { background: transparent; box-shadow: none; color: var(--blue); border: 1px solid var(--line-strong); }
.btn.leise:hover { background: var(--blue-soft); }
.btn.gefahr { background: transparent; box-shadow: none; color: var(--err); border: 1px solid var(--line); }
.btn.gefahr:hover { background: var(--err-soft); }
.btn.klein { height: 34px; padding: 0 12px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Fließtext mit <b>/<a> darf nicht in einzelne Flex-Spalten zerfallen: .msg ist ein Block, Aktionszeilen nutzen .msg-aktion */
.msg { display: block; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; }
.msg-error, .msg-err { background: var(--err-soft); color: var(--err); }
.msg-ok, .msg-info { background: var(--ok-soft); color: var(--ok); }
.msg-warn { background: var(--warn-soft); color: var(--warn); }
.msg-aktion { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.msg-aktion > span { flex: 1 1 260px; min-width: 0; }
.msg-aktion .btn { flex: none; }
.msg a { color: inherit; }

/* Formulare */
form.block { display: grid; gap: 16px; }
.zeilen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; }
.feld { display: grid; gap: 6px; min-width: 0; }
.feld > :is(input, select, textarea) { min-width: 0; max-width: 100%; }
.feld.breit { grid-column: 1 / -1; }
label { font-size: 14px; font-weight: 600; }
label small { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=tel], select {
  width: 100%; height: 44px; padding: 0 12px; font: inherit; color: var(--ink); background: var(--raised);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--feld-innen);
}
input:hover, select:hover { border-color: var(--ink); }
.wahl { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; }
.wahl input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--blue); }
.aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hinweis { font-size: 13px; color: var(--muted); margin: 0; }

/* Tabellen */
.tab-wrap { overflow-x: auto; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--raised-2, #f9f9fc); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zweizeilig small { display: block; color: var(--muted); }

/* Bestellübersicht */
.summe { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; }
.summe div { display: flex; justify-content: space-between; gap: 16px; }
.summe .gesamt { font-weight: 700; font-size: 18px; }
.produkt-wahl { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); cursor: pointer; }
.produkt-wahl:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue-soft) 45%, var(--raised)); }
.produkt-wahl input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); }
.produkt-wahl b { display: block; }
.produkt-wahl span { color: var(--muted); font-size: 14px; }
.produkt-wahl .p { margin-left: auto; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.produkt-block { display: grid; gap: 8px; }
.laufzeit-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; margin: 0 0 0 34px; padding: 0; border: 0; min-width: 0; }
.laufzeit-wahl legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.laufzeit-wahl label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); cursor: pointer; }
.laufzeit-wahl label:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.laufzeit-wahl input { margin-top: 3px; accent-color: var(--blue); }
.laufzeit-wahl b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14.5px; }
.laufzeit-wahl b .chip { font-style: normal; }
.laufzeit-wahl small { display: block; color: var(--muted); font-size: 13px; }
@media (max-width: 520px) { .laufzeit-wahl { margin-left: 0; } }

.zwei { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .zwei { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .kopf .wrap { gap: 10px; padding: 10px 0; }
  .wer span { display: none; }
  h1 { font-size: 24px; }
  .inhalt { padding-top: 24px; }
}

/* Bonus-Fortschritt */
.fortschritt { position: relative; height: 10px; background: var(--blue-soft); border-radius: 999px; margin: 14px 8px 22px; }
.fortschritt > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 72%, #fff)); border-radius: 999px; }
.fortschritt i { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--raised); border: 2px solid var(--blue-soft); font-style: normal; font-size: 12px; font-weight: 700; display: grid; place-items: center; color: var(--muted); }
.fortschritt i.ok { background: var(--volt); border-color: var(--volt); color: var(--navy); }

/* Verwaltung */
.rw-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.rw-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.rw-tabs a { padding: 8px 12px; border-radius: 4px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); background: var(--raised); }
.rw-tabs a[aria-current] { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.kpis div { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 2px; }
.kpis b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--blue); }
.kpis span { font-size: 13px; color: var(--muted); }
.filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter input[type=text] { max-width: 320px; height: 38px; }
.filter select { width: auto; height: 38px; }
form.mini { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0; }
.seiten { display: flex; gap: 4px; flex-wrap: wrap; }
.seiten a { min-width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 14px; background: var(--raised); }
.seiten a[aria-current] { background: var(--blue); color: var(--auf-blau, #fff); border-color: var(--blue); }
.parm { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.parm dt { color: var(--muted); overflow-wrap: anywhere; } .parm dd { margin: 0; text-align: right; overflow-wrap: anywhere; max-width: 220px; color: var(--ink); font-weight: 600; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.zwei > aside, .zwei > div { min-width: 0; }
code { font-size: 13px; background: var(--neutral-soft, #eef1f8); padding: 1px 5px; border-radius: 3px; }

/* Trennung Kunde / Verwaltung */
.bereich-verwaltung .kopf { background: #1a0f3d; border-bottom: 3px solid #ff9d2e; }
.bereich-verwaltung .brand em { color: #ffb866; }
.verwaltung-band { background: var(--vw-band, #fff1dc); color: var(--vw-band-tx, #6b3d00); font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--vw-band-rand, #f3d4a8); }
.btn-ghost.wechsel { border-color: #ffb866; color: #ffd8a8; }
.btn-ghost.wechsel.admin { border-color: #ff9d2e; color: #ffb866; }
.btn-ghost.wechsel:hover { background: rgba(255,157,46,.16); }
.rolle { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: #ff9d2e; color: #1a0f3d; padding: 2px 6px; border-radius: 3px; margin-left: 4px; }
.kopf .wrap { gap: 20px; }
.bereich-verwaltung .wer > span { font-size: 13px; }
@media (max-width: 1180px) { .wer > span { display: none; } }

.karte.helfer{background:linear-gradient(120deg,var(--raised) 60%,var(--helfer-verlauf,#f3ffd6));border-color:var(--helfer-rand,#cfe79a)}.karte.helfer .fuss-zeile{justify-content:flex-start;gap:8px}

/* Verwaltung: Helfer-Zugang */
.helferzugang .kopfzeile{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}.helferzugang h3{margin:0}
.helferzugang .alle{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.helferzugang .alle span{font-size:13px;color:var(--muted)}
.helferzugang th.mitte,.helferzugang td.mitte{text-align:center;width:130px}.helferzugang td.leise{color:var(--muted);font-size:14px}
.radio-zelle{display:inline-grid;place-items:center;width:34px;height:30px;border-radius:6px;cursor:pointer}.radio-zelle:hover{background:var(--blue-soft)}.radio-zelle input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer}
.helferzugang .feldzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 6px;font-size:14px}
/* Verwaltung: Produkte */
.produktliste{display:grid;gap:12px}
.karte.produkt{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-direction:row}
.karte.produkt .info{flex:1;min-width:0}.karte.produkt h3{display:flex;align-items:center;gap:10px;margin:0 0 4px}.karte.produkt p{margin:0 0 4px}
.karte.produkt.aus{background:var(--raised-2,#f7f8fb)}.karte.produkt.aus h3,.karte.produkt.aus p{color:var(--muted)}
.schalter{display:inline-flex;align-items:center;gap:10px;border:0;background:none;cursor:pointer;font:inherit;font-weight:600;color:var(--ink);padding:6px;border-radius:99px}
.schalter i{position:relative;width:52px;height:30px;border-radius:99px;background:var(--schalter-aus,#c9cfdf);transition:background .2s}
.schalter i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(10,21,64,.3);transition:transform .2s}
.schalter[aria-checked=true] i{background:var(--blue)}.schalter[aria-checked=true] i::after{transform:translateX(22px)}
.schalter:focus-visible{box-shadow:var(--focus)}
@media (max-width:640px){.karte.produkt{flex-direction:column;align-items:flex-start}}

/* Verwaltung: Benutzerliste und Nachrichten */
.segmente{display:flex;gap:6px;flex-wrap:wrap}
.segmente a{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--raised);color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.segmente a span{font-size:12px;font-variant-numeric:tabular-nums;background:var(--neutral-soft,#ededf3);color:var(--muted);border-radius:999px;padding:1px 7px}
.segmente a:hover{border-color:var(--blue);color:var(--blue)}
.segmente a[aria-current]{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.segmente a[aria-current] span{background:var(--blue);color:var(--auf-blau,#fff)}
input[type=search]{width:100%;height:44px;padding:0 12px;font:inherit;color:var(--ink);background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r-sm);box-shadow:var(--feld-innen)}
.filter input[type=search]{max-width:320px;height:38px}
textarea{width:100%;padding:10px 12px;font:inherit;line-height:1.5;color:var(--ink);background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r-sm);box-shadow:var(--feld-innen);resize:vertical}
textarea:focus-visible{outline:none;box-shadow:var(--focus)}
.benutzerliste th.cb,.benutzerliste td.cb{width:38px;padding-right:0}
.benutzerliste input[type=checkbox]{width:17px;height:17px;accent-color:var(--blue)}
.benutzerliste tbody tr:hover{background:color-mix(in srgb,var(--blue-soft) 35%,var(--raised))}
.benutzerliste td.leer{padding:36px 14px;text-align:center;color:var(--muted)}
.person{display:flex;align-items:center;gap:12px;min-width:200px}
.avatar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.02em;background:var(--blue-soft);color:var(--blue)}
.avatar.a1{background:var(--av1,#e6f5ef);color:var(--av1-tx,#0c6b4d)}.avatar.a2{background:var(--av2,#f0e9ff);color:var(--av2-tx,#5a38b8)}.avatar.a3{background:var(--av3,#fff1dc);color:var(--av3-tx,#8a5000)}.avatar.a4{background:var(--av4,#e8f1f8);color:var(--av4-tx,#245b82)}
.aktionsspalte{white-space:nowrap}.aktionsspalte .mini{margin:0 2px}.aktionsspalte .btn{margin-left:2px}
.auswahlleiste{position:sticky;bottom:12px;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;background:var(--navy);color:var(--navy-ink);border-radius:var(--r-lg);box-shadow:0 8px 28px rgba(10,21,64,.25)}
.auswahlleiste[hidden]{display:none}
.auswahlleiste .btn.leise{color:var(--navy-ink);border-color:var(--blue-d)}
.auswahlleiste .btn.leise:hover{background:rgba(125,147,255,.2)}
.trenner{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.emp{list-style:none;margin:0;padding:0;display:grid;gap:8px}.emp li{display:grid;font-size:14px}.emp small{color:var(--muted);overflow-wrap:anywhere}
details summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--muted)}
.mailbild{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);overflow:hidden}
.mailkopf{display:grid;gap:2px;padding:12px 16px;background:var(--raised-2,#f9f9fc);border-bottom:1px solid var(--line)}.mailkopf span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mailbild pre{margin:0;padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.55 var(--font)}
@media (prefers-reduced-motion:no-preference){.segmente a,.benutzerliste tbody tr{transition:background .15s,border-color .15s}}
.inhalt>*{min-width:0}
select.klein{height:34px;width:auto;max-width:150px;font-size:13px;padding:0 6px}
td.werkzeuge{min-width:200px}
.erweitert{flex-basis:100%;margin-top:4px}.erweitert summary{display:inline-block;padding:4px 0}.erweitert .zeilen{margin-top:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
input[type=date]{width:100%;height:44px;padding:0 12px;font:inherit;color:var(--ink);background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.filterchips{display:flex;gap:6px;flex-wrap:wrap}.filterchips a{text-decoration:none;cursor:pointer}.filterchips a:hover{background:var(--err-soft);color:var(--err)}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}.tag{font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-decoration:none;background:var(--raised)}.tag:hover{border-color:var(--blue);color:var(--blue)}
td.zahlung{min-width:110px}
.sammel{display:inline-flex;gap:6px;align-items:center;margin:0}.sammel select,.sammel input[type=text]{height:34px;width:auto;max-width:170px;font-size:13px;padding:0 8px}
.bereich-verwaltung .wrap{width:min(1360px,100% - 32px)}
.erweitert .zeilen{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
td.werkzeuge{min-width:0}
td.werkzeuge select.klein{max-width:130px}

.vgruppe{margin:28px 0 12px;font-size:20px}
.vraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.vkarte{padding:0;overflow:hidden;gap:0}.vkarte>*:not(.vbild){margin-inline:20px}.vkarte h3{margin-top:6px}.vkarte p{margin-top:6px}
.vbild{display:block;background:linear-gradient(135deg,var(--raised),#eef1f6);border-bottom:1px solid var(--line);padding:14px}
.vgrafik{display:block;width:100%;height:110px;transition:transform .3s}.vbild:hover .vgrafik{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.vgrafik{transition:none}}
.vkopf{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;font-size:13px}
.vreife{border-radius:99px;padding:2px 10px;font-weight:600;font-size:12px;background:var(--neutral-soft,#e8ecf2);color:var(--muted,#364452)}
.vreife.v-test{background:var(--warn-soft,#fdf0dc);color:var(--warn,#7a4a0e)}.vreife.v-bereit{background:var(--ok-soft,#e3f1de);color:var(--ok,#2f5a26)}.vreife.v-vorgemerkt{background:var(--blue-soft,#e4eafa);color:var(--blue,#1f4390)}
.vkarte details{font-size:14px;color:var(--muted);margin-top:8px}.vkarte ul{margin:6px 0 0;padding-left:18px}
.vkarte .fuss-zeile{margin-bottom:18px;margin-top:14px}
.vkarte{display:flex;flex-direction:column}.vkarte .fuss-zeile{margin-top:auto;padding-top:14px}

/* ---------- Dunkelmodus: Werte nur für den Kontobereich (gemeinsame Werte in /assets/thema.css) ---------- */
:root[data-theme="dark"]{--vw-band:#2f2110;--vw-band-tx:#ffcf94;--vw-band-rand:#5a3d17;--helfer-verlauf:#1c2a10;--helfer-rand:#3c5420;--schalter-aus:#3a4466;--demo-band:#1b2509;--demo-band-tx:#d9ff7a;--demo-band-rand:#3b4f12;
  --av1:#0f3328;--av1-tx:#7fdcb7;--av2:#2a1f4d;--av2-tx:#c3adff;--av3:#3a2810;--av3-tx:#ffc57a;--av4:#12304a;--av4-tx:#8cc4ef}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--vw-band:#2f2110;--vw-band-tx:#ffcf94;--vw-band-rand:#5a3d17;--helfer-verlauf:#1c2a10;--helfer-rand:#3c5420;--schalter-aus:#3a4466;--demo-band:#1b2509;--demo-band-tx:#d9ff7a;--demo-band-rand:#3b4f12;
  --av1:#0f3328;--av1-tx:#7fdcb7;--av2:#2a1f4d;--av2-tx:#c3adff;--av3:#3a2810;--av3-tx:#ffc57a;--av4:#12304a;--av4-tx:#8cc4ef}}
.kopf{box-shadow:inset 0 -1px 0 var(--navy-rand,transparent)}
.wer .thema-knopf{margin-right:-2px}
@media (max-width:1400px){.bereich-verwaltung .wer>span{display:none}}

/* Verwaltung → Produkte: zwei Seiten, Konfiguration je Produkt */
.site-block{margin-top:28px;padding-top:8px}
.site-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.site-kopf h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.site-kopf .hinweis{margin:0;max-width:70ch}
.site-mylernwerk .site-kopf{border-left:4px solid var(--navy);padding-left:14px}
.site-mywerkzeug .site-kopf{border-left:4px solid var(--blue);padding-left:14px}
.karte.produkt.konfig{align-items:stretch}
.karte.produkt .rechts{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:10px;min-width:150px}
.preis-anzeige{text-align:right;display:grid;gap:2px}
.preis-anzeige b{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--blue)}
.preis-anzeige span{font-size:12.5px;color:var(--muted)}
.nutzung{display:flex;flex-wrap:wrap;gap:8px 22px;margin:8px 0 0;font-size:13px}
.nutzung div{display:flex;gap:6px;align-items:baseline}.nutzung dt{color:var(--muted)}.nutzung dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.konfig-zeile{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.konfig-zeile .wahl{align-items:center;padding-bottom:7px}.konfig-zeile .wahl input{margin-top:0}
.konfig-zeile .wahlgruppe{display:flex;gap:14px}
.preisfeld{display:grid;gap:4px;font-size:12px;color:var(--muted)}.preisfeld input{padding:7px 10px;font-size:14px;width:110px}
.preisfeld.breit input{width:220px}
.preisfeld .euro{display:inline-flex;align-items:center;gap:6px}.preisfeld .euro b{color:var(--muted)}
.preisfeld input:disabled{opacity:.45}
@media (max-width:640px){.karte.produkt .rechts{flex-direction:row;align-items:center;width:100%}.preis-anzeige{text-align:left}.site-kopf{flex-direction:column}}
/* Konto: Werkzeuge nach Seite gegliedert */
.site-titel{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 10px;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.site-titel .leise{font-size:13px;text-transform:none;letter-spacing:0;font-weight:400}
.merk-gruppe{margin-top:16px}.merk-gruppe h3{display:flex;align-items:baseline;gap:8px 10px;flex-wrap:wrap;margin:0 0 8px;font-size:16px}.merk-gruppe h3 .leise{font-size:13px;font-weight:400;color:var(--muted)}.merk-gruppe .aktionen{margin-top:0}
.karte.hervor.lernwerk{border-color:var(--navy)}

/* Verwaltung → myLernwerk (Zugang, Betriebe, Codes) */
.lw-zugang h2{margin-top:0}
.lw-schalter{display:grid;gap:12px;margin:14px 0 6px}
.lw-schalter .wahl span{display:grid;gap:2px}.lw-schalter .wahl small{color:var(--muted);font-size:13px}
.lw-zugang .euro,#codes .euro{display:inline-flex;align-items:center;gap:6px}.lw-zugang .euro b{color:var(--muted)}
.lw-zugang .euro input{max-width:9em}
.lw-staffel{border:1px solid var(--line);border-radius:var(--r-lg,6px);padding:12px 16px 4px;margin:14px 0}
.lw-staffel legend{font-weight:600;padding:0 6px}
.lw-staffel table{width:auto;border-collapse:collapse}.lw-staffel th{text-align:left;font-size:13px;color:var(--muted);font-weight:500;padding:4px 12px 4px 0}
.lw-staffel td{padding:3px 12px 3px 0}.lw-staffel input{width:7em}
tr.gewaehlt td{background:var(--raised-2,var(--raised))}
.lw-zugang #freieFragen{max-width:9em}

/* Konto-Übersicht: Werkzeug-Kacheln (gebucht und kostenlos) */
.meine-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;margin-bottom:12px}.meine-kopf h2{margin:0}.meine-kopf .hinweis{margin:0;font-size:14px;color:var(--muted)}
.raster.kacheln{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.kachel{grid-template-rows:auto 1fr auto auto;gap:14px;transition:border-color .15s,box-shadow .15s,transform .15s}
.kachel:hover{border-color:var(--blue);box-shadow:0 10px 24px -16px color-mix(in srgb,var(--blue) 70%,transparent);transform:translateY(-1px)}
.kachel.gebucht{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.kachel.gebucht.lernwerk{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.kachel-kopf{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;row-gap:5px;align-items:center}
.kachel-kopf .kachel-ic{grid-row:1/3}.kachel-kopf h3{font-size:17px;line-height:1.25}
.kachel-marken{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.kachel-ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--navy);color:var(--volt);box-shadow:inset 0 0 0 1px var(--line)}
.kachel-ic.app{background:none;box-shadow:none}.kachel-ic img{width:48px;height:48px;display:block;border-radius:12px}
.kachel-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kachel>p{align-self:start;font-size:14.5px;line-height:1.5}
.kachel-infos{margin:0;border-top:1px solid var(--line)}
.kachel-infos div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.kachel-infos dt{color:var(--muted);flex:none}.kachel-infos dd{margin:0;font-weight:600;text-align:right;min-width:0}
.kachel .fuss-zeile{padding-top:0}
@media (prefers-reduced-motion:reduce){.kachel{transition:none}.kachel:hover{transform:none}}

/* Benutzerliste: je Konto eine schmale Zeile, Einzelheiten zum Aufklappen */
.benutzerliste tr.zeile{cursor:pointer}
.benutzerliste tr.zeile>td{padding-top:7px;padding-bottom:7px;vertical-align:middle;white-space:nowrap}
.benutzerliste tr.zeile .person{min-width:0;gap:10px}
.benutzerliste tr.zeile .avatar{width:30px;height:30px;font-size:11px}
.benutzerliste tr.zeile .person a{text-decoration:none;color:var(--ink)}.benutzerliste tr.zeile .person a:hover{color:var(--blue);text-decoration:underline}
.benutzerliste .leise-text{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.benutzerliste td.person-zelle{max-width:340px}.benutzerliste td.person-zelle .person{overflow:hidden}
.benutzerliste td.eng{max-width:180px;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.benutzerliste td.werkzeug-kurz{max-width:220px;color:var(--muted)}
.benutzerliste .anzahl{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-right:6px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:12px;font-weight:700}
.benutzerliste td.zahlung small{color:var(--muted)}
.auf-knopf{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised);color:var(--muted);cursor:pointer}
.auf-knopf:hover{border-color:var(--blue);color:var(--blue)}
.auf-knopf svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.auf-knopf[aria-expanded=true] svg{transform:rotate(180deg)}
.benutzerliste tr.zeile.offen{background:color-mix(in srgb,var(--blue-soft) 45%,var(--raised))}
.benutzerliste tr.mehr>td{padding-top:4px;padding-bottom:18px;background:color-mix(in srgb,var(--blue-soft) 20%,var(--raised))}
.mehr-raster{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:16px 28px}
.mehr-raster h4{margin:0 0 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mehr-raster .werkzeuge{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.mehr-daten{margin:0;display:grid;gap:3px;font-size:14px}.mehr-daten div{display:flex;gap:10px}.mehr-daten dt{color:var(--muted);min-width:92px}.mehr-daten dd{margin:0}
.frist-daten{margin:12px 0;grid-template-columns:max-content minmax(0,1fr);gap:5px 14px}.frist-daten div{display:contents}.frist-daten dt{min-width:0}
@media (max-width:560px){.frist-daten{grid-template-columns:minmax(0,1fr);gap:0}.frist-daten dd{margin-bottom:6px}}
.mehr-aktionen{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mehr-aktionen .mini{margin:0}
@media (max-width:900px){.mehr-raster{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.auf-knopf svg{transition:none}}
.benutzerliste tr.zeile .tags{margin:0;flex-wrap:nowrap}
/* Meine Daten: Anmeldewege (Code, Passkey, Passwort) */
.wege-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wege-liste li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; }
.wege-liste li > span:last-child { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.status-pill { justify-self: start; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.status-pill.an { background: var(--ok-soft); color: var(--ok); }
.status-pill.aus { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.passkeys { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.passkeys li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.passkeys li > span { display: grid; min-width: 0; }
.passkeys small { color: var(--muted); font-size: 13px; }
/* Verwaltung → E-Mails */
.mails-alle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mails-raster { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.mails-liste { display: grid; gap: 6px; position: sticky; top: 16px; }
.mails-liste a { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); color: var(--ink); text-decoration: none; font-size: 14px; }
.mails-liste a:hover { border-color: var(--blue); }
.mails-liste a[aria-current] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; background: var(--blue-soft); }
.mails-liste .mails-rund { border-style: dashed; margin-top: 6px; }
.mails-arbeit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.mails-form textarea { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--raised); color: var(--ink); resize: vertical; }
.platzhalter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.platzhalter code { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); cursor: help; }
.mails-vorschau { position: sticky; top: 16px; padding: 12px; }
.mails-vorschau iframe { width: 100%; height: 760px; border: 1px solid var(--line); border-radius: var(--r-md); }
.entwurf { color: var(--warn); }
@media (max-width: 1200px) { .mails-arbeit { grid-template-columns: 1fr; } .mails-vorschau { position: static; } }
@media (max-width: 800px) { .mails-raster { grid-template-columns: 1fr; } .mails-liste { position: static; } }

/* ---------- Verwaltung: Seitenleiste (Thomas 2026-10-09) ---------- */
.verw-raster{display:grid;grid-template-columns:248px minmax(0,1fr);gap:32px;align-items:start;flex:1}
.verw-raster>.inhalt{padding-top:32px}
.seitenleiste{position:sticky;top:0;display:block;max-height:100vh;overflow-y:auto;padding:24px 4px 32px 0;scrollbar-width:thin}
.seitenleiste .sl-knopf{display:none}
.sl-gruppe{display:grid;gap:1px;margin-bottom:18px;align-content:start}
.sl-titel{margin:0 0 6px;padding:0 12px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sl-site{margin:10px 0 2px;padding:0 12px;font-size:12px;font-weight:600;color:var(--muted);opacity:.85}
.seitenleiste a{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:var(--r-md);color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;line-height:1.3}
.seitenleiste a:hover{background:var(--blue-soft);color:var(--blue)}
.seitenleiste a[aria-current]{background:var(--blue-soft);color:var(--blue);font-weight:700;box-shadow:inset 3px 0 0 var(--blue)}
.seitenleiste a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-punkt{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line-strong);opacity:.55}
.sl-punkt.an{background:var(--ok);opacity:1;box-shadow:0 0 0 3px var(--ok-soft)}.sl-punkt.frei{background:var(--blue);opacity:.8}
.sl-zahl{order:2;margin-left:auto;flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--blue);color:var(--auf-blau,#fff);font-size:12px;font-style:normal;font-weight:700;line-height:20px;text-align:center}
.produkt-kopf h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.produkt-kopf h1 .chip{font-size:13px}
.reiter{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-top:-12px}
.reiter a{padding:10px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none}
.reiter a:hover{color:var(--ink)}.reiter a[aria-current]{color:var(--blue);border-bottom-color:var(--blue)}
.produkt-link{color:inherit;text-decoration:none}.produkt-link:hover{color:var(--blue);text-decoration:underline}
@media (max-width:1000px){
  .verw-raster{grid-template-columns:minmax(0,1fr);gap:0}
  .verw-raster>.inhalt{padding-top:20px}
  .seitenleiste{position:static;max-height:none;overflow:visible;padding:14px 0 0}
  .seitenleiste .sl-knopf{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised);color:var(--ink);font:600 14px var(--font);cursor:pointer}
  .seitenleiste .sl-knopf svg{width:18px;height:18px}
  .seitenleiste .sl-inhalt{display:none}
  .seitenleiste.offen .sl-inhalt{display:block;columns:3 200px;column-gap:20px;margin-top:12px;padding:16px 8px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg)}
  .sl-gruppe{margin-bottom:14px;break-inside:avoid}
}
.reiter+.site-block{margin-top:0;padding-top:0}
#erinnerungen .wahl>span{display:grid;gap:2px}#erinnerungen .wahl .hint{color:var(--muted);font-size:13px}#erinnerungen .wahl input{flex:none}
/* Kundenkonto mit der gemeinsamen Kopfzeile (Thomas 2026-10-13): oben kopf.css (data-kopf="konto"), darunter die Unterleiste .konto-nav */
.bereich-kunde header.kopf.kf .kf-wer{color:#aab4dc;font-size:14px;white-space:nowrap;margin-right:4px}
.bereich-kunde header.kopf.kf .kf-wer .rolle{margin-left:6px}
.bereich-kunde header.kopf.kf .kf-abmelden{color:#dfe5ff;text-decoration:none;padding:8px 11px;border:1px solid rgba(255,255,255,.28);border-radius:8px;font-size:14.5px;line-height:1.2;white-space:nowrap}
.bereich-kunde header.kopf.kf .kf-abmelden:hover{background:rgba(255,255,255,.09);color:#fff}
@media (max-width:640px){.bereich-kunde header.kopf.kf .kf-abmelden{display:none}}
@media (max-width:1100px){.bereich-kunde header.kopf.kf .kf-wer{display:none}}
.konto-nav{position:sticky;top:56px;z-index:30;background:var(--raised);box-shadow:inset 0 -1px 0 var(--line)}
.konto-nav .wrap{display:flex;align-items:center;gap:12px;min-height:46px}
.konto-nav-liste{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.konto-nav-liste::-webkit-scrollbar{display:none}
.konto-nav-liste a{flex:none;display:inline-flex;align-items:center;height:46px;padding:0 12px;color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s}
.konto-nav-liste a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--line-strong)}
.konto-nav-liste a[aria-current]{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)}
.konto-nav-liste a:focus-visible{box-shadow:var(--focus);border-radius:var(--r-sm)}
.konto-nav .wechsel{flex:none;margin-left:auto;display:inline-flex;align-items:center;height:30px;padding:0 11px;border:1px solid var(--vw-band-rand,#f3d4a8);border-radius:var(--r-md);background:var(--vw-band,#fff1dc);color:var(--vw-band-tx,#6b3d00);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.konto-nav .wechsel:hover{filter:brightness(.97)}
@media (max-width:640px){.konto-nav .wrap{width:100%;gap:8px}.konto-nav-liste{padding-left:6px}.konto-nav-liste a{padding:0 10px;font-size:14px}.konto-nav .wechsel{margin-right:12px;padding:0 9px}}
@media (prefers-reduced-motion:reduce){.konto-nav-liste a{transition:none}}
@media print{.konto-nav{display:none}}

/* ---------- Verwaltung in Bereichen (Thomas 2026-10-19): oben die Hauptfunktionen, links die Seiten des Bereichs ---------- */
.verw-bereiche{background:#1a0f3d;border-bottom:1px solid rgba(255,255,255,.08)}
.verw-bereiche .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.verw-bereiche .wrap::-webkit-scrollbar{display:none}
.verw-bereiche a{position:relative;display:inline-flex;align-items:center;gap:8px;flex:none;padding:11px 14px 12px;color:#c9c2e6;font-size:14.5px;font-weight:600;text-decoration:none;border-radius:8px 8px 0 0}
.verw-bereiche a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.verw-bereiche a:hover{color:#fff;background:rgba(255,255,255,.06)}
.verw-bereiche a[aria-current]{color:#fff}
.verw-bereiche a[aria-current]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#ff9d2e}
.verw-bereiche a[aria-current] svg{opacity:1;color:#ffb866}
.verw-bereiche .sl-zahl{order:0;margin-left:0;background:#ff9d2e;color:#1a0f3d}
.bereich-verwaltung .kopf{border-bottom:0}
.bereich-verwaltung .verwaltung-band{font-size:13px;padding:6px 0;border-top:3px solid #ff9d2e}
/* Hauptprodukte einklappbar */
.sl-familie{margin:2px 0}
.sl-familie>summary{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-md);cursor:pointer;list-style:none;font-size:14px;font-weight:700;color:var(--ink);user-select:none}
.sl-familie>summary::-webkit-details-marker{display:none}
.sl-familie>summary::before{content:"";flex:none;width:7px;height:7px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s;margin:0 3px 0 1px}
.sl-familie[open]>summary::before{transform:rotate(45deg);margin-top:-3px}
.sl-familie>summary:hover{background:var(--blue-soft)}
.sl-familie>summary span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-anzahl{flex:none;font-style:normal;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.sl-familie-inhalt{display:grid;gap:1px;margin:2px 0 6px 13px;padding-left:6px;border-left:1px solid var(--line)}
.sl-familie-inhalt a{font-size:13.5px;padding:6px 10px}
@media (prefers-reduced-motion:reduce){.sl-familie>summary::before{transition:none}}
/* Übersicht */
.ue-suche{display:flex;gap:8px;align-items:center;flex:1;max-width:460px}.ue-suche input{height:40px}
.ue-raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;margin-top:16px}
.ue-raster h2,.ue-familie h3{margin:0;font-size:17px}
.ue-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ue-liste a{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:var(--ink)}
.ue-liste a:hover{border-color:var(--blue)}
.ue-liste span{display:grid;gap:1px}.ue-liste small{color:var(--muted);font-size:12.5px}
.ue-ton{flex:none;width:9px;height:9px;border-radius:50%;background:var(--warn)}.ue-ton.err{background:var(--err)}
.ue-leer{margin:0;display:flex;gap:10px;align-items:center;color:var(--muted);font-size:14px}
.ue-knoepfe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ue-knoepfe a{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:var(--ink);font-size:14px;font-weight:600}
.ue-knoepfe a:hover{border-color:var(--blue);color:var(--blue)}
.ue-knoepfe svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ue-zwischen{margin:28px 0 12px;font-size:20px}
.ue-produkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.ue-familie h3{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ue-familie ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.ue-familie a{display:flex;gap:9px;align-items:center;padding:6px 8px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-size:14px}
.ue-familie a:hover{background:var(--blue-soft);color:var(--blue)}
@media (max-width:1000px){.ue-raster{grid-template-columns:minmax(0,1fr)}.seitenleiste.offen .sl-inhalt{columns:2 220px}}
@media (max-width:560px){.ue-knoepfe{grid-template-columns:minmax(0,1fr)}.ue-suche{max-width:none;width:100%}.verw-bereiche a{padding:10px 11px 11px;font-size:14px}}