/* Gemeinsame Suche der Apps (2026-10-17, Thomas: „Einheitliche Suche in allen Apps“): Helfer, Formelsammlung, Tabellenbuch, Fehlersuche.
   Ein Muster: Suchknopf in der Kopfzeile (#sucheKnopf.suche; am Handy breit zwischen Marke und Menü), auf Startseiten optional ein großer
   Auslöser ([data-suche-auf].suche-gross), beide öffnen dieselbe Befehlspalette (dialog#palette.palette; am Handy vollflächig).
   Verhalten: assets/app-suche.js (window.MWSuche). Farben nur über Variablen; jede App benennt sie anders, darum eigene Namen mit Fallback. */
:root{--as-flaeche:var(--flaeche,var(--raised,#fff));--as-flaeche2:var(--flaeche2,var(--paper,#f4f4f8));--as-text:var(--text,var(--ink,#0a1540));
  --as-text2:var(--text2,var(--muted,#525975));--as-leise:var(--leise,var(--soft,#5e6680));--as-linie:var(--linie,var(--line,#dcdfe9));
  --as-linie2:var(--linie2,var(--line-2,#c6cadb));--as-blau:var(--blau,var(--blue,#1f3fe0));--as-blau-hell:var(--blau-hell,var(--blue-soft,#e6ebff));
  --as-amber:var(--amber,#ffb21e);--as-navy:var(--navy,#0a1540);--as-volt:var(--volt,#c4ff1a)}

/* ---------- Suchknopf in der Kopfzeile: sieht aus wie ein Feld, öffnet die Palette ---------- */
header.kopf .suche{position:relative;display:flex;align-items:center;gap:8px;height:38px;margin-left:auto;padding:0 10px;border:1px solid rgba(255,255,255,.14);border-radius:10px;
  background:rgba(255,255,255,.08);color:#aab4dc;font:inherit;font-size:14px;text-align:left;cursor:pointer;width:min(320px,30vw);min-width:0;transition:background .15s,border-color .15s}
header.kopf .suche:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.24)}
header.kopf .suche:focus-visible{outline:none;box-shadow:0 0 0 2px var(--as-navy),0 0 0 4px var(--as-volt)}
header.kopf .suche>svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;color:#aab4dc}
header.kopf .suche .suche-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.kopf .suche .suche-kurz{display:none;flex:1;white-space:nowrap}
header.kopf .suche .suche-kbd{display:inline-flex;gap:3px;align-items:center;flex:none;font-family:inherit;font-weight:600;font-size:11.5px;line-height:1.6;color:#c3cbec;border:1px solid rgba(255,255,255,.22);border-bottom-width:2px;border-radius:6px;padding:0 6px;white-space:nowrap}
/* Gemeinsame Kopfzeile (kopf.js): Platz zwischen Menü und Konto; bei wenig Platz die kurze Form „Suchen …“ ohne Kürzel */
header.kf .suche{flex:0 1 300px;width:auto}
/* Der Knopf richtet seinen Text nach der eigenen Breite: lang, sonst „Suchen …“, ganz schmal ohne Kürzel (nie abgeschnittener Text) */
header.kopf .suche{container-type:inline-size}
@container (max-width:250px){header.kopf .suche .suche-text{display:none}header.kopf .suche .suche-kurz{display:block}}
@container (max-width:150px){header.kopf .suche .suche-kbd{display:none}}
@media (hover:none){header.kopf .suche .suche-kbd{display:none}}
@media (pointer:coarse){header.kopf .suche{min-height:44px}}
/* Bis 900 px mit App-Leiste: breites Feld zwischen Marke und Menü (Kopf 48 px), ohne Kürzel */
@media (max-width:900px){
  body[data-app-nav] header.kopf .suche{flex:1 1 auto;width:auto;min-width:0;max-width:none;height:36px;min-height:36px;margin-left:0;padding:0 10px}
  body[data-app-nav] header.kopf .suche .suche-kurz{display:block;overflow:hidden;text-overflow:ellipsis}
  body[data-app-nav] header.kopf .suche .suche-text,body[data-app-nav] header.kopf .suche .suche-kbd{display:none}
}
/* Schmale Handys: Marke nur als Logo (wie in der Formelsammlung), damit das Suchfeld Platz hat */
@media (max-width:560px){body[data-app-nav] header.kopf:has(> .suche) .marke b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}body[data-app-nav] header.kopf:has(> .suche){gap:10px}}
/* Ohne App-Leiste (Offline-Kopien in Werkzeug Pro) auf Handys nur die Lupe */
@media (max-width:640px){body:not([data-app-nav]) header.kopf .suche{flex:0 0 auto;width:40px;padding:0;justify-content:center}
  body:not([data-app-nav]) header.kopf .suche .suche-kurz{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media print{header.kopf .suche{display:none}}

/* ---------- Großer Auslöser auf Startseiten (Tabellenbuch, Fehlersuche): dieselbe Suche, nur größer ---------- */
.suche-gross{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 10px 0 16px;border:1px solid var(--as-linie2);border-radius:14px;
  background:var(--as-flaeche);background-image:var(--glanz,none);box-shadow:var(--schatten,0 1px 2px rgba(10,21,64,.06));color:var(--as-leise);font:inherit;font-size:17px;text-align:left;cursor:text;
  transition:border-color .15s,box-shadow .15s}
.suche-gross:hover{border-color:color-mix(in srgb,var(--as-blau) 45%,var(--as-linie2))}
.suche-gross:focus-visible{outline:none;border-color:var(--as-blau);box-shadow:var(--fokus,var(--focus,0 0 0 1.5px var(--as-blau),0 0 0 5px rgba(31,63,224,.25)))}
.suche-gross>svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--as-blau);stroke-width:2;stroke-linecap:round}
.suche-gross .suche-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suche-gross .suche-kbd{flex:none;display:inline-flex;gap:3px;align-items:center;font-family:inherit;font-weight:600;font-size:12px;line-height:1.6;color:var(--as-leise);border:1px solid var(--as-linie2);border-bottom-width:2px;border-radius:6px;padding:0 7px}
.suche-gross .suche-los{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:10px;background:var(--as-blau);color:#fff;font-weight:650;font-size:15px}
@media (hover:none){.suche-gross .suche-kbd{display:none}}

/* ---------- Palette ---------- */
.pal-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
html:has(dialog.palette[open]){overflow:hidden}
.palette{width:min(760px,calc(100vw - 32px));max-width:none;max-height:min(680px,calc(100dvh - 12vh - 24px));margin:10vh auto auto;padding:0;border:1px solid var(--as-linie);border-radius:18px;
  background:var(--as-flaeche);color:var(--as-text);box-shadow:var(--schatten-gross,0 30px 80px rgba(10,21,64,.35));overflow:hidden;font-family:inherit;font-size:15px;line-height:1.45}
.palette[open]{display:flex;animation:pal-rein .18s cubic-bezier(.2,.8,.2,1)}
.palette::backdrop{background:rgba(6,12,38,.52);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:pal-dunkel .18s ease-out}
@keyframes pal-rein{from{opacity:0;transform:translateY(-8px) scale(.985)}}
@keyframes pal-dunkel{from{opacity:0}}
.palette svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pal-innen{display:flex;flex-direction:column;width:100%;min-height:0}
.pal-kopf{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 18px;border-bottom:1px solid var(--as-linie)}
.pal-kopf>svg{flex:none;width:22px;height:22px;color:var(--as-blau)}
.pal-kopf input{flex:1;min-width:0;border:0;background:none;outline:none;padding:14px 0;font:inherit;font-size:18px;font-weight:500;color:var(--as-text);box-shadow:none}
.pal-kopf input:focus,.pal-kopf input:focus-visible{outline:none;box-shadow:none}
.pal-kopf:focus-within{box-shadow:inset 0 -2px 0 var(--as-blau)}
.pal-kopf input::placeholder{color:var(--as-leise);font-weight:400;opacity:1}
.pal-kopf input::-webkit-search-cancel-button{display:none}
.pal-leeren{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border:0;border-radius:8px;background:none;color:var(--as-leise);cursor:pointer}
.pal-leeren[hidden]{display:none}
.pal-leeren:hover{background:var(--as-flaeche2);color:var(--as-text)}.pal-leeren svg{width:18px;height:18px;stroke-width:2.2}
.pal-zu{display:inline-flex;align-items:center;flex:none;border:0;background:none;padding:6px;border-radius:8px;cursor:pointer;color:var(--as-leise);font:inherit}
.pal-zu span{display:none;font-weight:600;color:var(--as-blau);font-size:15px}
.pal-zu:hover{background:var(--as-flaeche2)}
.palette :focus-visible{outline:2px solid var(--as-blau);outline-offset:2px}
.palette kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;font-family:inherit;font-weight:600;font-size:11.5px;line-height:1;color:var(--as-text2);background:var(--as-flaeche2);border:1px solid var(--as-linie2);border-bottom-width:2px;border-radius:6px}
.pal-filter{display:flex;gap:6px;padding:10px 14px 4px;overflow-x:auto;scrollbar-width:none;flex:none}
.pal-filter[hidden]{display:none}
.pal-filter::-webkit-scrollbar{display:none}
.pal-filter button{display:inline-flex;align-items:center;gap:6px;flex:none;border:1px solid var(--as-linie);background:var(--as-flaeche);color:var(--as-text2);font:inherit;font-size:13px;font-weight:600;padding:5px 12px;border-radius:99px;cursor:pointer}
.pal-filter button svg{width:15px;height:15px}
.pal-filter button:hover{border-color:var(--as-linie2);color:var(--as-text)}
.pal-filter button[aria-pressed=true]{background:var(--as-text);border-color:var(--as-text);color:var(--as-flaeche)}
.pal-filter button[aria-pressed=true] svg{color:inherit}
.pal-filter .pf-n{font-weight:500;opacity:.75}
.pal-koerper{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 8px 10px;scroll-padding:36px 0 8px}
.pal-beispiele{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 8px 4px;font-size:13px;color:var(--as-leise)}
.pal-beispiele[hidden]{display:none}
.pal-beispiele span{margin-right:2px}
.pal-beispiele button{border:1px dashed var(--as-linie2);background:none;color:var(--as-text);font:inherit;font-size:13px;font-weight:500;padding:3px 10px;border-radius:8px;cursor:pointer}
.pal-beispiele button:hover{border-style:solid;border-color:var(--as-blau);color:var(--as-blau)}
.pal-gruppe{margin-top:6px}
.pal-gtitel{position:sticky;top:-4px;z-index:1;display:flex;align-items:center;gap:7px;padding:8px 10px 6px;background:var(--as-flaeche);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--as-leise)}
.pal-gtitel svg{width:15px;height:15px;color:var(--as-blau)}
.pal-gtitel>span{flex:1}
.pal-mehr{border:0;background:none;font:inherit;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--as-blau);cursor:pointer;padding:2px 4px;border-radius:6px;text-decoration:none}
.pal-mehr:hover{text-decoration:underline}
.pal-opt{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px;border-radius:11px;text-decoration:none;color:inherit;cursor:pointer;position:relative;scroll-margin:40px 0 8px}
.pal-opt.an{background:var(--as-blau-hell)}
.pal-opt.an::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--as-blau)}
.po-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--as-flaeche2);border:1px solid var(--as-linie);color:var(--as-text2)}
.po-icon svg{width:18px;height:18px}
.pal-opt.an .po-icon{background:var(--as-flaeche);color:var(--as-blau)}
.po-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.po-titel{font-weight:650;font-size:14.5px;line-height:1.3;display:flex;align-items:center;gap:6px}
.po-tt{min-width:0}
.po-titel mark{background:none;color:var(--as-blau);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--as-blau) 45%,transparent)}
.po-stern svg{width:14px;height:14px;fill:var(--as-amber);stroke:var(--as-amber)}
.po-meta{font-size:12.5px;color:var(--as-leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.po-marke{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--as-blau);background:var(--as-blau-hell);border:1px solid color-mix(in srgb,var(--as-blau) 25%,transparent);padding:3px 8px;border-radius:99px;white-space:nowrap}
.pal-opt.an .po-marke{background:var(--as-flaeche)}
.pal-familie .po-icon{color:var(--as-blau)}
.pal-weiter .po-icon{background:var(--as-blau-hell);border-color:color-mix(in srgb,var(--as-blau) 25%,transparent);color:var(--as-blau)}
.pal-weiter .po-titel{color:var(--as-blau)}
/* Werkzeug als erster Treffer (z. B. „Leitung entschlüsseln: NYM-J 5×1,5“): Symbol in der Akzentfarbe, Kurzzeichen fett */
.pal-werkzeug .po-icon,.pal-opt.an.pal-werkzeug .po-icon{background:var(--as-blau);border-color:var(--as-blau);color:var(--as-flaeche)}
.pal-werkzeug .po-titel b{font-weight:750;white-space:nowrap;font-variant-numeric:tabular-nums}
.pal-werkzeug .po-meta{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Farbpunkt je Sparte/Bereich (--k der App) */
.po-icon[style*="--k"]{color:var(--k);border-color:color-mix(in srgb,var(--k) 30%,var(--as-linie))}
.pal-leer{padding:26px 16px;text-align:center;color:var(--as-text2);font-size:14px;line-height:1.6}
.pal-leer b{display:block;color:var(--as-text);font-size:15px}
.pal-leer button{margin-top:10px;border:1px solid var(--as-linie2);background:var(--as-flaeche);color:var(--as-blau);font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:9px;cursor:pointer}
.pal-tipp-leer{padding:4px 10px 10px;font-size:13px;color:var(--as-leise)}
.pal-fuss{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:9px 16px;border-top:1px solid var(--as-linie);background:var(--as-flaeche2);font-size:12px;color:var(--as-leise);flex:none}
.pal-fuss span{display:inline-flex;align-items:center;gap:4px}
.pal-fuss .pal-tipp{margin-left:auto}
@media (max-width:640px){
  .palette{width:100vw;height:100dvh;max-height:none;margin:0;border:0;border-radius:0}
  .pal-kopf{padding:4px 8px 4px 14px}.pal-kopf input{font-size:17px}
  .pal-zu{min-height:44px}.pal-zu kbd{display:none}.pal-zu span{display:inline}
  .pal-leeren{width:44px;height:44px}
  .pal-filter button{min-height:36px}
  .pal-opt{grid-template-columns:30px minmax(0,1fr) auto;gap:4px 10px;padding:9px 8px;min-height:48px}
  .po-icon{width:30px;height:30px}
  .po-marke{font-size:10px;padding:2px 7px}
  .pal-fuss{display:none}
  @keyframes pal-rein{from{opacity:0;transform:translateY(14px)}}
}
@media (hover:none){.pal-fuss{display:none}}
@media (prefers-reduced-motion:reduce){.palette[open],.palette::backdrop{animation:none}}
@media print{.palette,.suche-gross{display:none!important}}