/* ==========================================================================
   update-next.css — Design 09/2026: „Hell arbeiten, dunkel steuern".
   Navy-Kopfzeile und Steuerleisten aus webentwickler.io, Menü links (weiß),
   helle Arbeitsfläche, Lime = Handlung, Pink = Neues/Angebote.
   Konzept: https://claude.ai/artifact/S3pfMWgQ8PpVnrCjZMzcB9
   Die --u-* Variablen werden auf helle Werte umdefiniert — dadurch re-skinnen
   sich alle bestehenden Reiter, die mit Variablen arbeiten, von selbst.
   ========================================================================== */
body.ui-next{
  /* Marke */
  --u-navy:#180E48; --u-navy-900:#0F0830; --u-navy-700:#241A66;
  --u-lime-fill:#9DEA1B; --u-lime-text:#3F6200; --u-pink:#EF0CA4; --u-pink-text:#A3066F;
  --u-lavendel:#C1C1DA;
  /* Flächen und Text — alle Textfarben ≥ 4,5:1 auf dem Grund */
  --u-bg-1:#F4F3FA; --u-bg-2:#FFFFFF; --u-surface:#FFFFFF; --u-surface-2:#F8F7FC;
  --u-border:rgba(24,14,72,.16); --u-hairline:rgba(24,14,72,.11);
  --u-fg-1:#1B1538; --u-fg-2:#4A4566; --u-fg-3:#6E6A86;
  --u-lime:#7FB000; --u-lime-ink:#3F6200; --u-lime-soft:rgba(157,234,27,.28);
  --u-mag:#C40888; --u-blue:#2F6BA8;
  --u-line:rgba(24,14,72,.13); --u-accent:#7FB000; --u-card:#FFFFFF; --u-muted:#6E6A86;
  --u-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --u-display:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;
  --u-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --u-hdr-h:64px; --u-side-w:272px;
  background:#F4F3FA !important; color:#1B1538; font-family:var(--u-sans);
}
body.ui-next h1, body.ui-next h2{font-family:var(--u-display);letter-spacing:-.015em}

/* Karten heben sich durch Kante UND Schatten ab — zwei helle Flächen liegen
   zwangsläufig nah beieinander (1,1:1), erst der Schatten zeigt die Grenze. */
body.ui-next .u-card,
body.ui-next .u-logo-tile,
body.ui-next .u-hist-box,
body.ui-next .u-edit-card,
body.ui-next .u-img-card,
body.ui-next .u-diag,
body.ui-next .u-psi-score-block,
body.ui-next .u-site-row,
body.ui-next section.u-feat{
  box-shadow:0 1px 2px rgba(24,14,72,.04), 0 12px 28px -22px rgba(24,14,72,.35);
}

/* alten Seiten-Titel/Breadcrumb ausblenden */
body.ui-next .u-legacy-head{display:none !important}

/* ═══ Kopfzeile: Navy ════════════════════════════════════════════════════ */
body.ui-next .u-hdr{background:#180E48 !important;border-bottom:1px solid #0F0830 !important;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;position:sticky;top:0;z-index:60}
body.ui-next .u-hdr-inner,
body.ui-next.u-body-admin .u-hdr-inner{max-width:none;margin:0;min-height:var(--u-hdr-h);box-sizing:border-box;
  padding:0 20px;display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
body.ui-next .u-hdr{color:#fff}
body.ui-next .u-hdr a{text-decoration:none}
body.ui-next .u-hdr a:focus-visible, body.ui-next .u-hdr button:focus-visible{outline:2px solid #9DEA1B;outline-offset:2px}
body.ui-next .u-ico{display:block;flex:0 0 auto}

body.ui-next .u-brand{display:flex;align-items:baseline;gap:10px;color:#fff;flex:0 0 auto}
body.ui-next.u-app .u-brand{min-width:212px}
body.ui-next .u-brand-name{font:800 19px/1 var(--u-display);letter-spacing:-.02em;color:#fff}
body.ui-next .u-brand-tld{color:#9DEA1B !important}
body.ui-next .u-brand-tag{font:600 10px/1 var(--u-mono);letter-spacing:.1em;text-transform:uppercase;color:#C1C1DA;
  background:none;border:1px solid rgba(193,193,218,.35);border-radius:6px;padding:3px 6px;margin:0}

body.ui-next .u-hdr-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  border-radius:12px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;cursor:pointer;flex:0 0 auto}

/* Website-Wechsler */
body.ui-next .u-site-switcher{padding-left:0;border-left:0;flex:0 1 auto;min-width:0}
body.ui-next .u-site-switcher-btn, body.ui-next .u-site{height:40px;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;
  padding:0 14px 0 12px;background:#241A66 !important;border:1px solid rgba(255,255,255,.1) !important;border-radius:999px !important;
  color:#fff !important;font:600 14px/1 var(--u-sans);max-width:100%;cursor:pointer}
body.ui-next .u-site{cursor:default}
body.ui-next .u-site-switcher-btn:hover{border-color:rgba(157,234,27,.6) !important}
body.ui-next .u-site-switcher-btn .u-ico{color:#C1C1DA}
body.ui-next .u-site-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ui-next .u-site-punkt{width:8px;height:8px;border-radius:50%;background:#9DEA1B;box-shadow:0 0 0 3px rgba(157,234,27,.22);flex:0 0 auto}
body.ui-next .u-site-switcher-menu{left:0;top:calc(100% + 8px);background:#fff !important;border:1px solid #E3E1EE !important;
  border-radius:12px;box-shadow:0 20px 50px -20px rgba(15,8,48,.45);color:#1B1538;max-height:70vh;overflow-y:auto}
body.ui-next .u-site-switcher-head{color:#6E6A86}
body.ui-next .u-site-switcher-menu a{color:#2E2850 !important;display:flex;align-items:center;gap:8px}
body.ui-next .u-site-switcher-menu a:hover{background:#F4F3FA;color:#180E48 !important}
body.ui-next .u-site-switcher-all{border-top-color:#EEECF5 !important}

/* Menüsuche */
body.ui-next .u-hdr-suche{flex:1 1 auto;max-width:440px;min-width:160px;height:40px;box-sizing:border-box;display:flex;align-items:center;gap:10px;
  padding:0 10px 0 12px;background:#0F0830;border:1px solid rgba(193,193,218,.22);border-radius:10px;color:#A5A5B5;cursor:text}
body.ui-next .u-hdr-suche:focus-within{border-color:#9DEA1B;box-shadow:0 0 0 3px rgba(157,234,27,.25)}
body.ui-next .u-hdr-suche input{flex:1 1 auto;min-width:0;height:100%;background:transparent;border:0;outline:0;color:#fff;font:400 14px var(--u-sans);padding:0}
body.ui-next .u-hdr-suche input::placeholder{color:#A5A5B5}
body.ui-next .u-hdr-suche input::-webkit-search-cancel-button{display:none}
body.ui-next .u-hdr-suche-weg{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
body.ui-next .u-hdr-suche-weg:hover{background:#9DEA1B;color:var(--u-navy)}
body.ui-next .u-side-leer-weg{display:inline-block;margin-left:6px;padding:0;border:0;background:none;color:var(--u-lime-ink);
  font:600 13px var(--u-sans);text-decoration:underline;cursor:pointer}
body.ui-next .u-hdr-kbd{font:500 11px/1 var(--u-mono);color:#C1C1DA;border:1px solid rgba(193,193,218,.3);border-radius:5px;padding:3px 6px;white-space:nowrap}
body.ui-next .u-hdr-platz{flex:1 1 0;min-width:0}

/* Live ansehen = Lime, Website bearbeiten = Umriss */
body.ui-next .u-live-link{height:40px;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;padding:0 16px;
  border-radius:999px !important;background:#9DEA1B !important;border:1px solid #9DEA1B !important;
  font:700 13.5px/1 var(--u-sans);white-space:nowrap;flex:0 0 auto;margin:0}
body.ui-next .u-live-link, body.ui-next .u-live-link *{color:#180E48 !important}
body.ui-next .u-live-link:hover{background:#B7F048 !important;border-color:#B7F048 !important}
body.ui-next .u-live-link.u-edit-link{background:transparent !important;border:1px solid rgba(255,255,255,.3) !important;font-weight:600}
body.ui-next .u-live-link.u-edit-link, body.ui-next .u-live-link.u-edit-link *{color:#fff !important}
body.ui-next .u-live-link.u-edit-link:hover{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.55) !important}

/* Ansicht simulieren (Admin) */
body.ui-next .u-vat-btn{height:40px;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;
  background:rgba(239,12,164,.14) !important;border:1px solid rgba(239,12,164,.45) !important;color:#fff !important;font:600 13px/1 var(--u-sans);white-space:nowrap}
body.ui-next .u-vat-btn strong{color:#FFB3E4 !important;margin-left:0}
body.ui-next .u-vat-menu{background:#fff;border:1px solid #E3E1EE;box-shadow:0 20px 50px -20px rgba(15,8,48,.45);color:#1B1538}
body.ui-next .u-vat-head, body.ui-next .u-vat-foot{color:#6E6A86}
body.ui-next .u-vat-opt{color:#2E2850}
body.ui-next .u-vat-opt:hover{background:#F4F3FA;color:#180E48}
body.ui-next .u-vat-opt.active{background:#FDEAF6;color:#A3066F}

/* Konto */
body.ui-next .u-user{margin-left:0;gap:12px;flex:0 0 auto}
body.ui-next .u-id-pill{background:transparent !important;border:0 !important;padding:0 !important;gap:10px;display:inline-flex;align-items:center}
body.ui-next .u-avatar{width:34px;height:34px;border-radius:50%;background:#C1C1DA;color:#180E48;display:inline-flex;align-items:center;justify-content:center;
  font:700 12.5px/1 var(--u-sans);flex:0 0 auto}
body.ui-next .u-id-text{display:flex;flex-direction:column;gap:4px;min-width:0}
body.ui-next .u-id-name{color:#fff !important;font:600 13px/1 var(--u-sans);max-width:160px;overflow:hidden;text-overflow:ellipsis}
body.ui-next .u-tier-chip{background:none !important;box-shadow:none !important;padding:0 !important;border-radius:0;
  font:600 10px/1 var(--u-mono) !important;letter-spacing:.08em;color:#D7F27A !important}
body.ui-next .u-logout{height:36px;box-sizing:border-box;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;
  background:transparent !important;border:1px solid rgba(255,255,255,.22) !important;color:#E4E3F0 !important;font:600 12.5px/1 var(--u-sans)}
body.ui-next .u-logout:hover{border-color:#EF0CA4 !important;color:#fff !important}

/* ═══ Seitengerüst mit Menü links (site.php) ═════════════════════════════ */
body.ui-next .u-layout{display:block !important}
body.ui-next .u-content{max-width:1180px;margin:0 auto;padding:20px 26px 70px;background:transparent}
body.ui-next .u-main{padding-top:5px !important}

body.u-app .u-layout.u-layout-wide .u-main{padding:0 !important;max-width:none;margin:0}
body.u-app .u-main > .u-layout{display:grid !important;grid-template-columns:var(--u-side-w) minmax(0,1fr);gap:0;margin:0;align-items:start}
body.u-app .u-content{max-width:1440px;margin:0;padding:24px 32px 64px;box-sizing:border-box;width:100%}
/* Meldungen und Hinweisbanner stehen vor dem Gerüst — bündig mit dem Inhalt rechts vom Menü. */
body.u-app .u-main > .u-section:not(.u-legacy-head),
body.u-app .u-main > .u-flash{margin:14px 32px 0 calc(var(--u-side-w) + 32px)}
body.u-app .u-main > .u-section:empty{display:none}

body.u-app .u-sidebar{display:flex !important;flex-direction:column;position:sticky;top:var(--u-hdr-h);height:calc(100vh - var(--u-hdr-h));
  max-height:none;width:var(--u-side-w);box-sizing:border-box;padding:0;margin:0;gap:0;
  background:#fff;border:0;border-right:1px solid #E3E1EE;border-radius:0;overflow:hidden}

/* Kopf: Website */
body.u-app .u-side-kopf{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #EEECF5;flex:0 0 auto}
body.u-app .u-side-logo{width:40px;height:40px;flex:0 0 auto;border-radius:10px;background:#fff;border:1px solid #E3E1EE;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
body.u-app .u-side-logo img{max-width:32px;max-height:32px;object-fit:contain;display:block}
body.u-app .u-side-kuerzel{display:none}
body.u-app .u-side-logo.ist-leer{background:#180E48;border-color:#180E48}
body.u-app .u-side-logo.ist-leer .u-side-kuerzel{display:block;color:#9DEA1B;font:800 18px/1 var(--u-display)}
body.u-app .u-side-kopf-text{display:flex;flex-direction:column;gap:3px;min-width:0}
body.u-app .u-side-kopf-name{font:700 14px/1.2 var(--u-sans);color:#1B1538;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.u-app .u-side-kopf-info{font:400 12px/1.2 var(--u-sans);color:#6E6A86}
/* Server als Wort in der Infozeile (01.10.2026); Punkt nur, wenn die .htaccess nicht wirkt */
body.u-app .u-side-kopf-info .un-serverart{display:inline-flex;align-items:center;gap:4px;margin:0;padding:0;border:0;border-radius:0;background:none;
  font:inherit;letter-spacing:0;color:inherit;cursor:pointer;vertical-align:baseline}
body.u-app .u-side-kopf-info .un-serverart:hover{background:none;color:#180E48;text-decoration:underline}
body.u-app .u-side-kopf-info .un-serverart .un-serverart-punkt{display:none;width:6px;height:6px}
body.u-app .u-side-kopf-info .un-serverart.ist-problem .un-serverart-punkt{display:inline-block}
body.u-app .u-side-kopf-info .un-serverart.ist-leer{border:0;background:none;color:inherit}

/* Liste */
body.u-app .u-side-liste{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 10px 14px;display:flex;flex-direction:column;gap:2px}
body.u-app .u-side-leer{margin:6px 10px;font-size:13px;color:#6E6A86}

body.u-app .u-sidebar .u-side-group,
body.u-app .u-sidebar .u-side-group + .u-side-group,
body.u-app .u-sidebar .u-side-group.is-collapsed,
body.u-app .u-sidebar .u-side-group.is-collapsed + .u-side-group{padding:0;margin:0;border:0}
body.u-app .u-sidebar .u-side-group::before{display:none}

body.u-app .u-sidebar .u-side-group-head{height:40px;box-sizing:border-box;padding:0 10px;gap:10px;border-radius:9px;
  font:600 13.5px/1 var(--u-sans);letter-spacing:0;text-transform:none;color:#2E2850;cursor:pointer}
body.u-app .u-sidebar .u-side-group-head:hover{background:#F4F3FA;color:#180E48}
body.u-app .u-sidebar .u-side-group-head:focus-visible{outline:2px solid #7FB000;outline-offset:1px}
body.u-app .u-sidebar .u-side-group .u-side-group-label{color:inherit !important}
body.u-app .u-sidebar .u-side-group-icon{display:flex;color:#57527A;font-size:15px;opacity:1}
/* Keine Einträge-Zahl und kein Punkt an der Gruppe mehr (Variante C, 01.10.2026) —
   die Gruppe mit dem offenen Reiter ist ohnehin fett. */
body.u-app .u-sidebar .u-side-group-count,
body.u-app .u-sidebar .u-side-group-punkt{display:none !important}
body.u-app .u-sidebar .u-side-group-chevron{display:flex !important;opacity:1;color:#8C88A3;transform:none;transition:transform .15s ease}
body.u-app .u-sidebar .u-side-group.is-open .u-side-group-chevron{transform:rotate(90deg)}
/* Gruppe mit dem aktiven Reiter: kräftiger, zugeklappt mit Punkt statt Anzahl */
body.u-app .u-sidebar .u-side-group:has(.u-tab-active) > .u-side-group-head{color:#180E48;font-weight:700}
body.u-app .u-sidebar .u-side-group:has(.u-tab-active) > .u-side-group-head .u-side-group-icon{color:#180E48}
body.u-app .u-sidebar .u-side-group:has(.u-tab-active) .u-side-group-count{display:none}

body.u-app .u-sidebar .u-side-items{gap:1px;padding:2px 0 8px}
body.u-app .u-sidebar .u-side-group.is-collapsed .u-side-items{padding:0}

body.u-app .u-sidebar .u-side-item{min-height:36px;box-sizing:border-box;margin-left:18px;padding:5px 10px 5px 12px;gap:10px;border-radius:9px;border:0;
  font:500 13.5px/1.25 var(--u-sans);color:#4A4566;background:transparent;box-shadow:none}
body.u-app .u-sidebar .u-side-item:hover{background:#F4F3FA;color:#1B1538}
body.u-app .u-sidebar .u-side-group .u-side-item.u-tab-active,
body.u-app .u-sidebar .u-side-item.u-tab-active{background:#180E48 !important;color:#fff !important;font-weight:500;box-shadow:none !important}
/* Aktiv NICHT fetter setzen: 600 ist breiter als 500, lange Namen („Google Analytics", „Seiten-Editor
   (WYSIWYG)") brachen dann je nach Menübreite auf zwei Zeilen um und schoben alles darunter um eine
   Zeile nach unten (WA-2026-0059 #635). Der Schatten verstärkt die Schrift, ohne ihre Breite zu ändern. */
body.u-app .u-sidebar .u-side-item.u-tab-active .u-side-item-label{text-shadow:.35px 0 0 currentColor}
/* Nur Farben überblenden — „transition: all" aus update.css animierte auch Schriftstärke und Höhe. */
body.u-app .u-sidebar .u-side-item{transition:background-color .15s ease,color .15s ease}
body.u-app .u-sidebar .u-side-item:focus-visible{outline:2px solid #7FB000;outline-offset:1px}
body.u-app .u-sidebar .u-side-item-icon{order:1;width:16px;display:flex;justify-content:center;font-size:14px;color:inherit;opacity:.9}
/* Umbrechen statt abschneiden: „Google Search Console“ oder „Webentwickler Analytics“
   wären sonst nur halb zu lesen. */
body.u-app .u-sidebar .u-side-item-text{order:2;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
body.u-app .u-sidebar .u-side-item-label{order:2;white-space:normal;overflow-wrap:anywhere;line-height:1.25}   /* order: „Übersicht“ hat keine Textklammer */
/* Zustand nur noch, wenn etwas abweicht (Variante C, 01.10.2026): läuft = kein Zeichen,
   aus = das Wort „aus“. Das Element bleibt im DOM — FeatureShell schaltet es live um. */
body.u-app .u-sidebar .u-side-item-dot{order:3;flex:0 0 auto;box-shadow:none;animation:none}
body.u-app .u-sidebar .u-side-item-dot--on{display:none}
body.u-app .u-sidebar .u-side-item-dot--off{width:auto;height:auto;border:0;border-radius:0;background:none}
body.u-app .u-sidebar .u-side-item-dot--off::after{content:'aus';font:500 11px/1 var(--u-sans);color:#6E6A86}
body.u-app .u-sidebar .u-side-item.u-tab-active .u-side-item-dot--off::after{color:#C1C1DA}
/* Statuszeile nur am offenen Reiter, und nur solange er läuft */
body.u-app .u-sidebar .u-side-item-status{order:3;display:none;font:400 11px/1.3 var(--u-sans);color:#C1C1DA;text-shadow:none}
body.u-app .u-sidebar .u-side-item.u-tab-active .u-side-item-status{display:block}
body.u-app .u-sidebar .u-side-item:has(.u-side-item-dot--off) .u-side-item-status{display:none}
body.u-app .u-sidebar.collapsed .u-side-item-status{display:none}
body.u-app .u-sidebar .u-side-item-flags{order:4}
body.u-app .u-sidebar .u-side-flag{font:700 9.5px/1 var(--u-mono);letter-spacing:.04em;border-radius:5px;padding:3px 6px;border:0;background-image:none;font-style:normal}
body.u-app .u-sidebar .u-side-flag-tier-2{background:#E5EEF8;color:#2B5580}
body.u-app .u-sidebar .u-side-flag-tier-3{background:#FFF1DC;color:#8A4B00}
body.u-app .u-sidebar .u-side-flag-server{background:#EEECF5;color:#4A4566}
body.u-app .u-sidebar .u-side-flag-soon{background:#FFF1DC;color:#8A4B00}
/* Beta leise: kleiner grauer Rahmen statt rosa Pille (01.10.2026) */
body.u-app .u-sidebar .u-side-flag-beta{background:none;border:1px solid #DDDAE8;color:#6E6A86;font:500 10.5px/1 var(--u-sans);letter-spacing:0;padding:2px 4px;border-radius:4px}
body.u-app .u-sidebar .u-side-item.u-tab-active .u-side-flag-beta{border-color:rgba(255,255,255,.35);color:#C1C1DA}
body.u-app .u-sidebar .u-side-item.u-side-locked{color:#8C88A3;opacity:1}
body.u-app .u-sidebar .u-side-item.u-side-locked:hover{color:#4A4566}
body.u-app .u-sidebar .u-side-item.u-side-locked .u-ico{opacity:.7}

/* Übersicht: eigener Punkt ohne Gruppe */
body.u-app .u-sidebar .u-side-item.u-side-start{margin-left:0;min-height:40px;padding-left:10px;font-weight:600;color:#2E2850;margin-bottom:2px}
body.u-app .u-sidebar .u-side-item.u-side-start .u-side-item-icon{width:18px;color:#57527A}
body.u-app .u-sidebar .u-side-item.u-side-start.u-tab-active .u-side-item-icon{color:#9DEA1B}

/* Angebote: unten, in Pink */
body.u-app .u-sidebar .u-side-group[data-group="angebote"]{margin-top:auto;padding-top:8px;border-top:1px solid #EEECF5}
body.u-app .u-sidebar .u-side-group[data-group="angebote"] > .u-side-group-head{background:#FDEAF6;color:#A3066F}
body.u-app .u-sidebar .u-side-group[data-group="angebote"] > .u-side-group-head .u-side-group-icon{color:#A3066F}
body.u-app .u-sidebar .u-side-group[data-group="angebote"] > .u-side-group-head:hover{background:#FBD8EE}
body.u-app .u-sidebar .u-side-group[data-group="admin"]{margin-top:6px;padding-top:6px;border-top:1px dashed #E3E1EE}

/* Suche */
body.u-app .u-sidebar .ist-weggefiltert{display:none !important}
body.u-menue-sucht .u-sidebar .u-side-group.ist-suchtreffer .u-side-items{max-height:1500px !important;opacity:1 !important;padding:2px 0 8px}
body.u-menue-sucht .u-sidebar .u-side-group.ist-suchtreffer .u-side-group-chevron{transform:rotate(90deg)}
body.u-menue-sucht .u-sidebar .u-side-group[data-group="angebote"]{margin-top:0}

.u-side-schleier{display:none}

/* Fußzeile im App-Modus rechts neben dem Menü */
body.u-app .u-foot{margin-left:var(--u-side-w);max-width:none;width:auto;padding:16px 32px}

/* ═══ Schmale Fenster ════════════════════════════════════════════════════ */
@media (max-width:1180px){
  body.ui-next .u-hdr-kbd{display:none}
  body.ui-next .u-id-text{display:none}
}
@media (max-width:980px){
  body.ui-next .u-live-link .u-live-link-text{display:none}
  body.ui-next .u-live-link{padding:0 12px}
  body.ui-next.u-app .u-brand{min-width:0}
}
@media (max-width:900px){
  body.u-app .u-hdr-burger{display:inline-flex}
  body.u-app .u-main > .u-layout{display:block !important}
  body.u-app .u-sidebar{position:fixed !important;left:0;top:var(--u-hdr-h);bottom:0;height:auto;width:min(300px,86vw);z-index:70;
    transform:translateX(-102%);transition:transform .2s ease;box-shadow:0 24px 60px rgba(15,8,48,.35);
    flex-direction:column !important;flex-wrap:nowrap !important;padding:0 !important;border-radius:0}
  body.u-app.u-menue-offen .u-sidebar{transform:none}
  body.u-app .u-side-schleier:not([hidden]){display:block;position:fixed;left:0;right:0;bottom:0;top:var(--u-hdr-h);background:rgba(15,8,48,.45);z-index:65}
  body.u-app .u-sidebar .u-side-items{flex-direction:column !important;flex-wrap:nowrap !important}
  body.u-app .u-sidebar .u-side-item{padding:5px 10px 5px 12px;font-size:13.5px;min-height:40px}
  body.u-app .u-sidebar .u-side-group-head{padding:0 10px}
  body.u-app .u-content{padding:16px 16px 56px}
  body.u-app .u-main > .u-section:not(.u-legacy-head), body.u-app .u-main > .u-flash{margin:12px 16px 0}
  body.u-app .u-foot{margin-left:0;padding:16px}
}
@media (prefers-reduced-motion:reduce){ body.u-app .u-sidebar{transition:none} }
@media (max-width:720px){
  body.ui-next .u-hdr-inner{padding:0 12px;gap:8px}
  body.ui-next .u-hdr-suche{display:none}
  body.ui-next .u-live-link.u-edit-link{display:none}
  body.ui-next .u-logout{display:none}
  body.ui-next .u-brand-tag{display:none}
  body.ui-next .u-site-switcher-btn, body.ui-next .u-site{max-width:46vw}
}
@media (max-width:480px){
  body.ui-next .u-brand-name{font-size:15px}
  body.ui-next .u-hdr-burger{width:40px;height:40px}
  body.ui-next .u-site-switcher-btn, body.ui-next .u-site{max-width:40vw;height:36px;padding:0 10px;gap:7px;font-size:13px}
  body.ui-next .u-site-switcher-btn .u-ico{display:none}
  body.ui-next .u-avatar{width:30px;height:30px;font-size:11.5px}
  body.ui-next .u-site-switcher-menu{position:fixed;left:12px;right:12px;top:calc(var(--u-hdr-h) - 4px);min-width:0}
}

/* Platzhalter für noch nicht geladene Tabs (Lazy-Loading). */
body.ui-next .u-lazy-hint{padding:26px 4px;font-size:12.5px;color:#8a8499;text-align:center}
body.ui-next .u-lazy-hint .u-lazy-nochmal{margin-top:12px;display:inline-flex}

/* ═══ Vollbild für Tabs mit Live-Vorschau ══════════════════════════════════
   Anlass: Im Tab „Anpassungen" arbeitet man IN der Website — Kopfzeile und
   Hauptmenü nehmen dem Vorschaurahmen sonst rund ein Drittel der Höhe weg.
   Der Balken für die Impersonation bleibt bewusst stehen: Er sagt, in wessen
   Ansicht man gerade arbeitet, und das darf keine Ansicht verstecken. */
/* Bewusst OHNE `body.ui-next` davor: Die Klasse hängt an Rolle und Vorschau-Stufe.
   Ein Vollbild, das nur beim Admin greift, ist schlimmer als keins. */
html.u-vollbild .u-hdr,
html.u-vollbild .u-sidebar,
html.u-vollbild .un-nav{display:none !important}
html.u-vollbild body.u-app .u-main > .u-layout{display:flex !important;flex-direction:column}
html.u-vollbild body.u-app .u-foot{margin-left:0}
html.u-vollbild .u-content{max-width:none;padding:12px 18px 18px}
html.u-vollbild .u-feat-head{padding-top:4px}

/* Höhe rein über Flex, keine gerechnete Pixelhöhe: Über der Bühne stehen je nach
   Rolle unterschiedlich viele Zeilen (Impersonations-Balken, Aktiv-Schalter,
   Unter-Reiter). Eine JS-Rechnung dafür war genau die Stelle, an der es beim
   Kunden nicht griff — die Kette hier kommt ganz ohne Skript aus.
   `:not([hidden])` ist Pflicht: `display:flex` würde ein `hidden` überstimmen und
   die inaktiven Unter-Reiter sichtbar machen. */
/* Kein `calc(100vh - X)`: Was über dem Inhalt steht, ist von Rolle und Zustand
   abhängig (Impersonations-Balken ja/nein, Meldungszeile). Jeder feste Abzug lag
   bei einer der Varianten daneben — gemessen 39 px Überstand. Stattdessen eine
   Flex-Kette ab `body`: Der Balken nimmt seine natürliche Höhe, der Rest füllt
   exakt den Rest. Nichts zu rechnen, nichts zu raten. */
html.u-vollbild,
html.u-vollbild body{height:100%;overflow:hidden}
html.u-vollbild body{display:flex;flex-direction:column}
/* ALLE Zwischenstufen, nicht nur die erste: Zwischen `body` und `.u-content` liegen
   in Wahrheit `div.u-layout.u-layout-wide` → `main.u-main` → `div.u-layout`. Die
   Kette nur am äußeren anzusetzen reichte nicht — das innere `.u-layout` blieb
   `display:block` und stoppte die Höhe bei 518 px.
   `display` braucht !important, weil Zeile 19 `.u-layout` festnagelt.
   `align-items:stretch` und `margin-bottom:0` müssen mit: Die Grundregel setzt
   `align-items:start` (der Inhalt wüchse nicht in die Höhe) und 48 px Abstand
   nach unten. */
html.u-vollbild .u-layout,
html.u-vollbild .u-main{display:flex !important;flex-direction:column;flex:1 1 auto;
  min-height:0;align-items:stretch;margin-bottom:0}
/* Die Fußzeile kostet 55 px, die die Vorschau besser gebrauchen kann. */
html.u-vollbild .u-foot{display:none}
/* Innenabstände von `.u-main`: 36 px oben und 72 px unten sind für eine Seite mit
   Fließtext gedacht — hier verschenken sie fast 100 px Vorschauhöhe. Der Selektor
   muss `.u-layout` mitnehmen, sonst gewinnt `.u-layout.u-layout-wide .u-main`. */
html.u-vollbild .u-layout .u-main{padding-top:10px;padding-bottom:0}
html.u-vollbild .u-content{flex:1 1 auto;min-height:0;overflow:auto;height:auto;
  display:flex;flex-direction:column}
html.u-vollbild #tab-anpassungen.u-tab-panel-active{display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0}
html.u-vollbild #tab-anpassungen > .u-feat,
html.u-vollbild #tab-anpassungen .u-feat-body,
html.u-vollbild #tab-anpassungen .u-feat-panel[data-feat-panel="live"]:not([hidden]){
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
html.u-vollbild #tab-anpassungen .an-stage{flex:1 1 auto;height:auto;min-height:320px}
/* Das iframe steht auf `height:100%`. Im Vollbild bekommt die Bühne ihre Höhe erst
   vom Flex-Layout — eine Prozenthöhe hat dann keinen Bezug, und das iframe fiel auf
   seine Standardhöhe von 150 px zurück: sichtbar war nur die Kopfzeile der Website,
   darunter weiße Fläche. Absolut positioniert füllt es die Bühne unabhängig davon,
   woher deren Höhe kommt (`.an-stage` ist ohnehin `position:relative`).
   Die Handy-Ansicht bleibt außen vor: Die verengt das iframe bewusst auf 390 px
   und lässt es von `align-items:stretch` in die Höhe ziehen. */
html.u-vollbild #tab-anpassungen .an-stage:not(.is-mobile) > iframe{
  position:absolute;inset:0;width:100%;height:100%}
/* Editor (Neubau 23.10.2026): gleiche Kette bis zur Arbeitsfläche. Bühne und Seitenfeld
   teilen sich die Resthöhe; das iframe steht in der Bühne absolut (auch in der Handy-
   Ansicht, dort 390 px breit und volle Höhe — der alte Reiter fiel auf `height:auto`). */
html.u-vollbild #tab-editor.u-tab-panel-active{display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0}
html.u-vollbild #tab-editor > .u-feat,
html.u-vollbild #tab-editor .u-feat-body,
html.u-vollbild #tab-editor .u-feat-panel[data-feat-panel="bearbeiten"]:not([hidden]),
html.u-vollbild #tab-editor .ed{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
html.u-vollbild #tab-editor .ed-arbeit{flex:1 1 auto;height:auto;min-height:420px}


/* Umschalter Vollbild ⇄ Menü. Er steht in der Kopfzeile des Tabs, weil die als
   einzige Leiste beide Zustände überlebt — die Seiten-Kopfzeile ist im Vollbild ja
   gerade weg. Vorher hing hier ein Knopf, den es NUR im Vollbild gab: Wer einmal
   ausgestiegen war, kam für die restliche Sitzung nicht mehr hinein.
   Aussehen und Maße liefert `.u-feat-cta` aus der Feature-Hülle. Deren <style> steht
   im Dokument nach dieser Datei und gewinnt bei gleicher Gewichtung — hier deshalb
   nur, was dort fehlt: Pfeil und Text nebeneinander auf einer Grundlinie. */
.u-vollbild-pill{display:inline-flex;align-items:center;gap:7px}
/* Notnagel: Solange der Tab nachlädt, gibt es die Tab-Kopfzeile noch nicht. Dann
   schwebt der Knopf frei — unten rechts, damit er im Normalzustand nicht in die
   Seiten-Kopfzeile fasst, und oben rechts, sobald die weg ist. Eigene Farben, weil
   die Variablen der Feature-Hülle außerhalb von `.u-feat` nicht gelten. */
.u-vollbild-pill.is-frei{position:fixed;right:12px;bottom:14px;z-index:2147483000;
  background:#17131F;color:#fff;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 20px rgba(0,0,0,.28)}
.u-vollbild-pill.is-frei:hover{background:#2a2338;border-color:rgba(255,255,255,.32)}
html.u-vollbild .u-vollbild-pill.is-frei{top:9px;bottom:auto}

/* Verlaufskarten: das „/100" neben dem Score erbte --u-fg-3 (#8a8499). Auf der
   weißen Karte sind das 3,6:1 — zu wenig für 11 px Text. #6b6680 bringt 5,5:1
   und bleibt trotzdem sichtbar zweitrangig. Die Delta-Pillen daneben stecken
   inline in lib/AuditHistoryHelpers.php. */
body.ui-next .u-hist-score small{color:#6b6680}
body.ui-next .u-hist-meta{color:#6b6680}
/* Die Verlaufskarte ist weiß auf einem fast weißen Grund (#f4f3f8). Ihre Kante
   stand auf rgba(18,14,30,.06) — 1,3:1, also unsichtbar; die Karte „hatte keinen
   Hintergrund mehr". Eine sichtbare Kante plus ein leiser Schatten geben ihr
   wieder eine Fläche, ohne dass sie laut wird. */
body.ui-next .u-hist-box{border-color:rgba(18,14,30,.14);
  box-shadow:0 1px 2px rgba(18,14,30,.04), 0 8px 20px -16px rgba(18,14,30,.28)}
body.ui-next .u-hist-dayhint{color:#6b6680}

/* ── Serverart-Kürzel in der Navileiste (nur Admin) ───────────────────────
   Apache oder nginx entscheidet, ob `.htaccess` überhaupt wirkt. Der Name
   kommt aus der Server-Kopfzeile, der Punkt daneben aus der echten Messung
   (Servernachweis) — denn nginx steht bei zwei Kunden nur als Vermittler vor
   einem Apache, und dort greift die .htaccess sehr wohl. */
body.ui-next .un-serverart{
  margin-left:0; align-self:center;
  display:inline-flex; align-items:center; gap:6px;
  font:600 11.5px/1 var(--u-mono,ui-monospace,Menlo,monospace);
  letter-spacing:.02em;
  color:var(--sa-farbe,#6b6680);
  background:color-mix(in srgb, var(--sa-farbe,#6b6680) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--sa-farbe,#6b6680) 32%, transparent);
  border-radius:999px; padding:5px 11px; cursor:pointer;
  white-space:nowrap; flex:0 0 auto;
}
body.ui-next .un-serverart:hover{
  background:color-mix(in srgb, var(--sa-farbe,#6b6680) 18%, transparent);
  border-color:var(--sa-farbe,#6b6680);
}
body.ui-next .un-serverart .un-serverart-punkt{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--sa-punkt,#8a8499);
}
/* Wert veraltet oder noch nie erfasst → blass, aber lesbar. */
body.ui-next .un-serverart.ist-alt{opacity:.62}
body.ui-next .un-serverart.ist-leer{
  color:#6b6680; background:rgba(18,14,30,.05); border-style:dashed;
  border-color:rgba(18,14,30,.22);
}
body.ui-next .un-serverart.laeuft{opacity:.6; cursor:progress}


/* ── Gemeinsames Diagramm (assets/js/wec-chart.js) ───────────────────────────
   Gleiche Sprache wie das Säulendiagramm im Reiter Analytics. */
.wc{position:relative;min-width:0;color:#17131F}
.wc-flaeche{position:relative;width:100%;touch-action:pan-y}
.wc-linie{position:absolute;height:0;border-top:1px dashed rgba(67,64,90,.24);pointer-events:none}
.wc-linie.is-null{border-top:1px solid rgba(18,14,30,.30)}
.wc-y{position:absolute;font-size:11px;line-height:14px;color:#6b6680;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.wc-y-l{left:0;text-align:right}
.wc-y-r{right:0;text-align:left}
.wc-x{position:absolute;transform:translateX(-50%);font-size:11.5px;color:#43405a;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none}
.wc-svg{position:absolute;overflow:visible;pointer-events:none}
.wc-saeule{position:absolute;display:block;border-radius:4px 4px 0 0;pointer-events:none}
.wc-luecke{position:absolute;border-radius:5px;background:repeating-linear-gradient(135deg,rgba(18,14,30,.09) 0 5px,transparent 5px 11px);pointer-events:none}
.wc-band{position:absolute;border-radius:5px;background:rgba(18,14,30,.06);box-shadow:0 0 0 1px rgba(18,14,30,.20);pointer-events:none}
.wc-tip{position:absolute;top:4px;z-index:5;width:210px;box-sizing:border-box;padding:12px 14px;border-radius:10px;background:#fff;border:1px solid rgba(18,14,30,.18);box-shadow:0 12px 30px -12px rgba(18,14,30,.45);display:flex;flex-direction:column;gap:4px;pointer-events:none;color:#17131F}
.wc-tip[hidden],.wc-band[hidden]{display:none!important}
.wc-tip b{font-size:13px}
.wc-tip>small{font-size:12.5px;color:#43405a;margin-bottom:4px}
.wc-tip span{display:flex;align-items:center;gap:8px;font-size:12.5px}
.wc-tip span em{flex:1;font-style:normal;color:#43405a}
.wc-tip span strong{font-variant-numeric:tabular-nums}
.wc-sw{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.wc-leer{display:flex;align-items:center;justify-content:center;min-height:140px;border:1px dashed rgba(18,14,30,.16);border-radius:10px;font-size:13px;color:#6b6680}
/* Legenden-/Kennzahl-Knöpfe wie in Analytics */
.wc-legende{display:flex;gap:6px;flex-wrap:wrap}
.wc-leg{height:34px;display:inline-flex;align-items:center;gap:8px;padding:0 11px;border-radius:8px;border:1px solid rgba(18,14,30,.16);background:#fff;font:inherit;font-size:12.5px;color:#17131F;cursor:pointer}
.wc-leg:hover{border-color:#17131F}
.wc-leg.is-an{border-color:#7fb000;background:rgba(159,212,0,.16)}
.wc-leg:focus-visible{outline:2px solid #7FB000;outline-offset:2px}
.wc-achsname{position:absolute;top:0;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#43405a;white-space:nowrap;pointer-events:none}
.wc-achsname small{font-weight:400;color:#6b6680;font-size:11px}
/* Karte + Kopf wie `.an-karte` */
body.ui-next .wc-karte{background:#fff;border:1px solid rgba(18,14,30,.14);border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgba(18,14,30,.05),0 10px 24px -18px rgba(18,14,30,.35);min-width:0;display:flex;flex-direction:column;gap:10px;margin:14px 0}
body.ui-next .wc-karte-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
body.ui-next .wc-karte-kopf h3{margin:0;font-size:16px;font-weight:700;color:#17131F;letter-spacing:0;text-transform:none}
body.ui-next .wc-karte-sub{display:block;font-size:12.5px;color:#6b6680;margin-top:2px}
body.ui-next .wc-karte-fuss{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:12px;border-top:1px solid rgba(18,14,30,.10);font-size:12.5px;color:#43405a}
body.ui-next .wc-karte-fuss strong{color:#17131F}
/* Zeitraum-Umschalter */
body.ui-next .wc-seg{display:inline-flex;flex-wrap:wrap;max-width:100%;gap:2px;padding:3px;border-radius:10px;background:#EEECF5}
body.ui-next .wc-seg button{min-height:30px;padding:0 12px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:13px;font-weight:600;color:#4A4566;cursor:pointer;white-space:nowrap}
body.ui-next .wc-seg button:hover{color:#180E48}
body.ui-next .wc-seg button.is-active,body.ui-next .wc-seg button[aria-pressed=true]{background:#180E48;color:#fff}
body.ui-next .wc-seg button:focus-visible{outline:2px solid #7FB000;outline-offset:2px}
body.ui-next .wc-auswahl{height:34px;padding:0 10px;border-radius:8px;border:1px solid rgba(18,14,30,.16);background:#fff;font:inherit;font-size:12.5px;color:#17131F}
.wc-saeule.is-neg{border-radius:0 0 4px 4px}
.wc-saeule.is-mitte{border-radius:0}   /* nur das oberste Teil einer gestapelten Säule ist gerundet */
.wc-band-wert{position:absolute;pointer-events:none}
body.ui-next .u-hist-wc{--wc-hoehe:190;min-height:190px}
body.ui-next .u-hist-grid-psi .u-hist-wc,body.ui-next .u-hist-grid-lg .u-hist-wc{--wc-hoehe:260;min-height:260px}
body.ui-next .u-hist-legend.wc-legende{margin-top:4px}
body.ui-next .u-locked-trend{background:#fff;border:1px solid rgba(18,14,30,.14);border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgba(18,14,30,.05),0 10px 24px -18px rgba(18,14,30,.35)}
body.ui-next .u-locked-trend-title{font-size:16px;font-weight:700;color:#17131F;letter-spacing:0}
body.ui-next .u-locked-trend-delta{background:#EAF6D6;color:#3F6200}
body.ui-next .u-locked-trend-wc{min-height:180px}

/* ══ Analyse-Baukasten (18.09.2026) ══════════════════════════════════════════
   Gemeinsame Bausteine aller Reiter unter „Analyse" — Vorbild Search Console.
   PHP-Gegenstück: lib/tabs/_analyse_kit.php (ak_*). Daten in Blau (vier Stufen),
   Zustand nur mit Zeichen und Wort, Lime nur für die Bedienung, keine Emojis. */
.ak-flex{flex:1 1 auto}
.ak-ico{flex-shrink:0;vertical-align:-2px}
.u-feat-panel.ak-panel{display:flex;flex-direction:column;gap:16px}
.u-feat-panel.ak-panel[hidden]{display:none}
.ak-spalte{display:flex;flex-direction:column;gap:16px;min-width:0}
/* Pille (wandert per Skript in die Kopfzeile) */
.ak-pille{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap}
.ak-pille i{width:8px;height:8px;border-radius:99px;display:inline-block}
.ak-pille--ok{background:rgba(159,212,0,.22);color:#3f6200}.ak-pille--ok i{background:#5f8f00}
.ak-pille--warn{background:rgba(244,183,64,.24);color:#8a4b00}.ak-pille--warn i{background:#C98A00}
.ak-pille--fehler{background:rgba(179,38,30,.10);color:#b3261e}.ak-pille--fehler i{background:#E0484F}
.ak-pille--neutral{background:rgba(18,14,30,.06);color:#43405a}.ak-pille--neutral i{background:#8a8499}
/* Dunkle Leiste (Zeitraum, Stand, Abruf) */
.ak-leiste{background:#17131F;color:#fff;border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:12px}
.ak-leiste-z{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ak-zr{min-height:44px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24)}
.ak-zr-t{display:flex;flex-direction:column;line-height:1.15}
.ak-zr-t strong{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ak-zr-t small,.ak-stand small{font-size:11.5px;color:#c9c4d8}
.ak-presets{display:flex;padding:3px;border-radius:9px;background:rgba(255,255,255,.07);gap:2px;flex-wrap:wrap}
.ak-preset{height:38px;padding:0 13px;border:none;border-radius:7px;font:inherit;font-size:13px;background:transparent;color:#e6e2f0;font-weight:500;cursor:pointer;white-space:nowrap}
.ak-preset:hover{background:rgba(255,255,255,.1)}
.ak-preset.is-an,.ak-preset[aria-pressed=true]{background:#9fd400;color:#0a0818;font-weight:700}
.ak-preset:focus-visible,.ak-abruf:focus-visible{outline:2px solid #d7f27a;outline-offset:2px}
.ak-stand{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;white-space:nowrap}
.ak-stand strong{font-size:13px}
.ak-abruf{height:40px;padding:0 14px;border-radius:9px;border:1px solid rgba(255,255,255,.34);background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
.ak-abruf:hover{border-color:#d7f27a}
.ak-abruf:disabled{opacity:.6;cursor:default}
.ak-leiste-lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#b9e05a;white-space:nowrap}
.ak-leiste-hint{font-size:12.5px;color:#c9c4d8}
/* Reiter */
.ak-tabs{display:flex;align-items:stretch;flex-wrap:wrap;border-bottom:1px solid rgba(18,14,30,.12);margin:4px 0 18px}
.ak-tabs-f{display:flex;flex:1 1 auto;gap:2px;overflow-x:auto}
.ak-tabs-u{display:flex;align-items:stretch;gap:2px}
.ak-tab{height:52px;padding:0 14px;border:none;border-bottom:3px solid transparent;margin-bottom:-1px;background:transparent;font:inherit;font-size:14px;color:#43405a;font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer}
.ak-tab:hover{color:#17131F}
.ak-tab.is-active{color:#17131F;font-weight:700;border-bottom-color:#7fb000}
.ak-tab:focus-visible{outline:2px solid #7FB000;outline-offset:-2px}
.ak-tab-n{font-size:11px;font-weight:700;border-radius:99px;padding:1px 7px;background:rgba(18,14,30,.07);color:#43405a;font-variant-numeric:tabular-nums}
.ak-tab-n--fix{background:rgba(179,38,30,.10);color:#b3261e}
/* Kopfsatz */
.ak-kopfsatz{display:flex;flex-direction:column;gap:8px}
.ak-satz{margin:0;font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.015em;max-width:1060px;color:#17131F;text-wrap:balance}
.ak-subsatz{margin:0;font-size:13px;line-height:1.5;color:#43405a}
/* Kennzahlen */
.ak-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.ak-kpi{background:#fff;border:1px solid rgba(18,14,30,.14);border-radius:12px;padding:14px 16px 12px;box-shadow:0 1px 2px rgba(18,14,30,.05),0 10px 24px -18px rgba(18,14,30,.35);display:flex;flex-direction:column;gap:6px;min-width:0;text-align:left;font:inherit;color:inherit}
button.ak-kpi{cursor:pointer}
button.ak-kpi:hover{border-color:#17131F}
button.ak-kpi.is-an{border:2px solid #7fb000;padding:13px 15px 11px;background:#FBFFF4}
button.ak-kpi:focus-visible{outline:2px solid #7FB000;outline-offset:2px}
.ak-kpi-kopf{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12.5px;font-weight:600;color:#43405a}
.ak-kpi-wert{font-size:30px;line-height:1.05;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#17131F}
.ak-kpi-wert small{font-size:15px;font-weight:600;color:#6b6680;letter-spacing:0}
.ak-kpi-fuss{font-size:12px;line-height:1.4;color:#6b6680}
.ak-kpi .ak-bar{margin-top:auto}
.ak-d{font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ak-d:empty{display:none}
.ak-d-p{color:#3f6200;background:rgba(159,212,0,.22)}
.ak-d-m{color:#8a4b00;background:rgba(244,183,64,.24)}
.ak-d-n{color:#43405a;background:rgba(18,14,30,.06)}
/* Zustand: Zeichen + Wort */
.ak-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;white-space:nowrap}
.ak-status--ok{color:#3F6200}.ak-status--watch{color:#8A5A00}.ak-status--fix{color:#B3261E}.ak-status--info{color:#1B4B99}.ak-status--neutral{color:#6B6680}
.ak-score{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;white-space:nowrap;color:#17131F}
.ak-score b{font-weight:700}
.ak-score em{font-style:normal;font-size:12px;font-weight:600}
.ak-score--ok em{color:#3F6200}.ak-score--watch em{color:#8A5A00}.ak-score--fix em{color:#B3261E}
.ak-score--neutral{color:#6B6680}
/* Karten */
.ak-karte{background:#fff;border:1px solid rgba(18,14,30,.14);border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgba(18,14,30,.05),0 10px 24px -18px rgba(18,14,30,.35);min-width:0;display:flex;flex-direction:column;gap:12px}
.ak-karte-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ak-karte h3{margin:0;font-size:16px;font-weight:700;color:#17131F;letter-spacing:0}
.ak-karte-sub{display:block;font-size:12.5px;color:#6b6680;margin-top:2px}
.ak-karte-rechts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ak-karte-fuss{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:12px;border-top:1px solid rgba(18,14,30,.10);font-size:12.5px;color:#43405a}
.ak-karte-fuss strong{color:#17131F}
.ak-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.ak-reihe--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ak-reihe--breit{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.ak-leer{color:#6b6680;font-size:13px;padding:6px 0}
.ak-notiz{margin:0;font-size:12px;line-height:1.5;color:#6b6680}
.ak-notiz a{color:#2b5580}
.ak-hinweis{background:rgba(244,183,64,.14);border:1px solid rgba(214,138,0,.30);color:#7a4a00;border-radius:10px;padding:11px 14px;font-size:12.5px;margin:0}
.ak-fs-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#6b6680}
.ak-unterteil{border-top:1px solid rgba(18,14,30,.10);padding-top:12px;display:flex;flex-direction:column;gap:6px}
/* Bedienung */
.ak-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:10px;background:#EEECF5}
.ak-seg button{min-height:30px;padding:0 12px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:13px;font-weight:600;color:#4A4566;cursor:pointer;white-space:nowrap}
.ak-seg button:hover{color:#180E48}
.ak-seg button.is-an,.ak-seg button[aria-pressed=true]{background:#180E48;color:#fff}
.ak-seg button:focus-visible{outline:2px solid #7FB000;outline-offset:2px}
.ak-auswahl{height:34px;padding:0 10px;border-radius:8px;border:1px solid rgba(18,14,30,.16);background:#fff;font:inherit;font-size:12.5px;color:#17131F}
.ak-link{border:none;background:none;padding:0;color:#2b5580;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none}
.ak-link:hover{color:#17131F;text-decoration:underline}
.ak-knoepfe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ak-k{height:38px;padding:0 14px;border-radius:9px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.ak-k--1{border:none;background:#7fb000;color:#0a0818;font-weight:700}
.ak-k--1:hover{background:#6f9a00}
.ak-k--2{border:1px solid rgba(18,14,30,.22);background:#fff;color:#17131F}
.ak-k--2:hover{border-color:#17131F}
.ak-k:disabled{opacity:.55;cursor:default}
.ak-k:focus-visible{outline:2px solid #7FB000;outline-offset:2px}
.ak-suche input{height:34px;width:240px;max-width:100%;padding:0 10px;border-radius:8px;border:1px solid rgba(18,14,30,.16);font:inherit;font-size:13px;background:#fff}
.ak-suche input:focus{outline:none;border-color:#7fb000;box-shadow:0 0 0 3px rgba(159,212,0,.25)}
/* Balken und Listenzeilen: Daten in Stufe 2 */
.ak-bar{height:8px;border-radius:99px;background:#ECEAF3;overflow:hidden;display:block;min-width:40px}
.ak-bar>span{display:block;height:100%;border-radius:99px;background:#2F6FD8}
.ak-bar--dick{height:10px}
.ak-lz{display:grid;grid-template-columns:minmax(0,170px) minmax(60px,1fr) 52px 58px;align-items:center;gap:12px;min-height:32px;font-size:13.5px;color:#17131F}
.ak-lz strong{text-align:right;font-variant-numeric:tabular-nums}
.ak-lz-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-anteil{font-size:12.5px;color:#6b6680;text-align:right;font-variant-numeric:tabular-nums}
.ak-stapel{display:flex;gap:2px;height:18px}
.ak-stapel>span{display:block;border-radius:4px;min-width:3px}
.ak-leg{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:#17131F}
.ak-leg span{display:inline-flex;align-items:center;gap:6px}
.ak-leg i{width:9px;height:9px;border-radius:2px;display:inline-block;flex-shrink:0}
.ak-leg strong{font-variant-numeric:tabular-nums}
.ak-leg em{font-style:normal;color:#6b6680}
/* Was auffällt */
.ak-auff{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid rgba(18,14,30,.08)}
.ak-auff:first-of-type{border-top:none;padding-top:2px}
.ak-auff-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.ak-auff-t strong{font-size:13.5px;color:#17131F;overflow-wrap:anywhere}
.ak-auff-t span{font-size:12.5px;line-height:1.5;color:#43405a}
.ak-marke{justify-self:start;font-size:11px;font-weight:700;border-radius:99px;padding:3px 9px;white-space:nowrap}
.ak-marke--watch{background:#FFF6E0;color:#8A5A00}
.ak-marke--info{background:#EEF3FC;color:#1B4B99}
.ak-marke--ok{background:#EAF6D6;color:#3F6200}
.ak-marke--fix{background:#FDECEA;color:#B3261E}
/* Tabellen */
.ak-tabwrap{overflow-x:auto}
.ak-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ak-tbl th{padding:0 10px 8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b6680;text-align:right;white-space:nowrap;border-bottom:1px solid rgba(18,14,30,.10)}
.ak-tbl th:first-child,.ak-tbl th.ak-l{text-align:left}
.ak-tbl td{padding:9px 10px;border-top:1px solid rgba(18,14,30,.07);color:#17131F;vertical-align:middle}
.ak-t-z{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ak-t-name{overflow-wrap:anywhere}
.ak-t-pfad{font-family:var(--u-mono,ui-monospace,monospace);font-size:12px;overflow-wrap:anywhere}
.ak-t-pfad a{color:#180E48;text-decoration:none}
.ak-t-pfad a:hover{text-decoration:underline}
.ak-t-bar{text-align:right;white-space:nowrap}
.ak-t-barz{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;font-variant-numeric:tabular-nums}
.ak-t-barz .ak-bar{width:72px;height:6px}
.ak-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#43405a;background:#EEECF5;border-radius:5px;padding:1px 6px;white-space:nowrap}
.ak-chip--warn{color:#8A5A00;background:#FFF6E0}
.ak-sortierbar th[data-s]{cursor:pointer;user-select:none}
.ak-sortierbar th[data-s]:hover,.ak-sortierbar th.is-sort{color:#17131F}
.ak-sortierbar th.is-sort::after{content:' ↓'}
.ak-sortierbar th.is-sort.is-auf::after{content:' ↑'}
.ak-sortierbar th[data-s]:focus-visible{outline:2px solid #7FB000;outline-offset:-2px}
@media(max-width:1100px){.ak-reihe--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.ak-reihe,.ak-reihe--3,.ak-reihe--breit{grid-template-columns:1fr}.ak-satz{font-size:20px}}
@media(max-width:560px){.ak-auff{grid-template-columns:1fr}.ak-lz{grid-template-columns:minmax(0,1fr) 70px 44px 50px}.ak-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ak-kpi-wert{font-size:24px}}

/* API-Schlüssel und Geheimnisse verdeckt zeigen, OHNE type="password" (13.10.2026, #637).
   Ein echtes Passwortfeld lässt Chrome den Werkzeug-Login einfüllen: Benutzername ins Suchfeld
   der Kopfzeile, Passwort in den Schlüssel. Wer dann speichert, überschreibt den API-Schlüssel. */
input[data-wec-geheim] { -webkit-text-security: disc; }