/* Eihi-Stil für Apps, SaaS-Oberflächen und Plugins (ABGELEITET aus dem Eintracht-Hildesheim-CD).
   Benötigt ../tokens/tokens.css. Alles ist unter .eihi-scope gekapselt: Klasse auf <body> (Standalone-App)
   oder auf den Plugin-Container (fremde Seite wie WordPress) setzen – dann erben Komponenten nichts vom Host.
   Regeln & Begründungen: references/app-ui.md */

/* ---------- Abgeleitete Tokens (nicht Teil des offiziellen CD) ---------- */
:root,:host{
  --eihi-text-muted:#5b6075;      /* Sekundärtext in Apps, 6,2:1 auf Weiß (Slate #9196A5 hat nur 2,95:1) */
  --eihi-border-input:#8a8fa0;    /* Rahmen von Eingabefeldern, 3,2:1 (Nicht-Text-Kontrast ≥ 3:1) */
  --eihi-green-tint:#e6f0ee;
  --eihi-lime-tint:#f0f6d9;
  --eihi-red-tint:#fbe9eb;
  --eihi-blue-tint:#e6f0f9;
  --eihi-orange-tint:#fdf0db;
}

/* ---------- Semantische Variablen (hell = Standard) ---------- */
.eihi-scope{
  --ui-bg:var(--eihi-bg);
  --ui-surface:var(--eihi-white);
  --ui-surface-2:var(--eihi-mist);
  --ui-text:var(--eihi-navy);
  --ui-headline:var(--eihi-ink);
  --ui-muted:var(--eihi-text-muted);
  --ui-line:var(--eihi-line);
  --ui-border:var(--eihi-border-input);
  --ui-primary:var(--eihi-green);          /* Struktur, Links, aktive Zustände */
  --ui-primary-hover:var(--eihi-green-dark);
  --ui-link:var(--eihi-green);
  --ui-focus:var(--eihi-navy);
  --ui-sidebar:var(--eihi-green);
  --ui-shadow:var(--shadow-card);
  --ui-shadow-hover:var(--shadow-card-hover);

  box-sizing:border-box;
  background:var(--ui-bg);color:var(--ui-text);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.eihi-scope *,.eihi-scope *::before,.eihi-scope *::after{box-sizing:border-box}
.eihi-scope img{max-width:100%;display:block}
.eihi-scope :focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}
.eihi-scope a{color:var(--ui-link)}

/* Dunkelvariante: optional (data-theme="dark" oder "auto" = System). Das offizielle CD ist hell; dunkel ist abgeleitet. */
.eihi-scope[data-theme="dark"]{
  --ui-bg:#0a1a16;--ui-surface:#10251f;--ui-surface-2:#16302a;
  --ui-text:#f6f7fb;--ui-headline:#ffffff;--ui-muted:#a9b3c2;
  --ui-line:rgba(255,255,255,.14);--ui-border:#7f948c;
  --ui-primary:var(--eihi-lime);--ui-primary-hover:var(--eihi-lime-dark);--ui-link:var(--eihi-lime);
  --ui-focus:var(--eihi-lime);--ui-sidebar:#004a3d;
  --ui-shadow:0 4px 20px rgba(0,0,0,.35);--ui-shadow-hover:0 10px 30px rgba(0,0,0,.5);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  .eihi-scope[data-theme="auto"]{
    --ui-bg:#0a1a16;--ui-surface:#10251f;--ui-surface-2:#16302a;
    --ui-text:#f6f7fb;--ui-headline:#ffffff;--ui-muted:#a9b3c2;
    --ui-line:rgba(255,255,255,.14);--ui-border:#7f948c;
    --ui-primary:var(--eihi-lime);--ui-primary-hover:var(--eihi-lime-dark);--ui-link:var(--eihi-lime);
    --ui-focus:var(--eihi-lime);--ui-sidebar:#004a3d;
    --ui-shadow:0 4px 20px rgba(0,0,0,.35);--ui-shadow-hover:0 10px 30px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

/* ---------- Typografie ---------- */
.eihi-eyebrow{font:600 .8125rem/1.2 var(--font-display);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ui-muted);margin:0 0 .35rem}
.eihi-h1{font:700 clamp(1.75rem,3vw,2.25rem)/1.1 var(--font-display);letter-spacing:-1.5px;color:var(--ui-headline);margin:0}
.eihi-h2{font:600 1.5rem/1.15 var(--font-display);letter-spacing:-1px;color:var(--ui-headline);margin:0}
.eihi-h3{font:600 1.0625rem/1.3 var(--font-body);color:var(--ui-headline);margin:0}
.eihi-muted{color:var(--ui-muted)}
.eihi-meta{font:400 .8125rem/1.4 var(--font-meta);color:var(--ui-muted)}
.eihi-rule{display:block;width:64px;height:2px;background:var(--eihi-lime);border:0;margin:.9rem 0 0}

/* ---------- Buttons: genau EIN Primary (Lime) pro Sichtbereich ---------- */
.eihi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;
  font:700 1rem/1 var(--font-ui);border:2px solid transparent;border-radius:var(--radius-btn);cursor:pointer;text-decoration:none;
  transition:background .18s,color .18s,border-color .18s,transform .18s}
.eihi-btn:disabled,.eihi-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.eihi-btn--primary{background:var(--eihi-lime);border-color:var(--eihi-lime);color:var(--eihi-navy)}
.eihi-btn--primary:hover{background:var(--eihi-lime-dark);border-color:var(--eihi-lime-dark)}
.eihi-btn--secondary{background:var(--eihi-green);border-color:var(--eihi-green);color:var(--eihi-mist)}
.eihi-btn--secondary:hover{background:var(--eihi-green-dark);border-color:var(--eihi-green-dark)}
.eihi-btn--outline{background:transparent;border-color:var(--ui-primary);color:var(--ui-primary)}
.eihi-btn--outline:hover{background:var(--eihi-fog)}
.eihi-scope[data-theme="dark"] .eihi-btn--outline:hover{background:rgba(255,255,255,.08)}
.eihi-btn--ghost{background:transparent;color:var(--ui-primary);padding-inline:12px}
.eihi-btn--ghost:hover{background:var(--eihi-fog)}
.eihi-btn--danger{background:var(--eihi-red);border-color:var(--eihi-red);color:#fff}
.eihi-btn--danger:hover{background:var(--eihi-red-dark);border-color:var(--eihi-red-dark)}
.eihi-btn--sm{min-height:36px;padding:6px 14px;font-size:.875rem}
/* Marketing-/Landing-CTA innerhalb einer App-Seite: eckig, versal (wie auf eihi.de) */
.eihi-btn--cta{border-radius:0;font:600 var(--fs-small)/1 var(--font-body);letter-spacing:var(--ls-cta);text-transform:uppercase;padding:18px 40px;background:var(--eihi-lime);border-color:var(--eihi-lime);color:var(--eihi-navy)}
.eihi-btn--cta:hover{background:var(--eihi-lime-dark);border-color:var(--eihi-lime-dark)}

/* ---------- App-Shell: grüne Sidebar + weiße Topbar ---------- */
.eihi-shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.eihi-sidebar{background:var(--ui-sidebar);color:#fff;display:flex;flex-direction:column;padding:0 0 24px;position:sticky;top:0;height:100vh;overflow-y:auto}
.eihi-brand{background:#fff;color:var(--eihi-navy);display:flex;align-items:center;gap:12px;padding:14px 20px;margin-bottom:20px}
.eihi-brand img{width:48px;height:48px;object-fit:contain;flex:none}
.eihi-brand strong{display:block;font:700 1rem/1.15 var(--font-display);letter-spacing:-.3px;color:var(--eihi-green)}
.eihi-brand span{font:400 .75rem/1.2 var(--font-meta);color:var(--eihi-text-muted)}
.eihi-nav{list-style:none;margin:0;padding:0 12px;display:flex;flex-direction:column;gap:2px}
.eihi-nav__label{font:600 .75rem/1 var(--font-display);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:rgba(255,255,255,.72);padding:18px 12px 8px}
.eihi-nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:var(--radius-btn);color:#fff;text-decoration:none;font:600 1rem/1.2 var(--font-body);position:relative}
.eihi-nav a:hover{background:rgba(255,255,255,.1)}
.eihi-nav a[aria-current="page"]{background:rgba(255,255,255,.14)}
.eihi-nav a[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;background:var(--eihi-lime);border-radius:0 2px 2px 0}
.eihi-nav svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.eihi-nav .eihi-badge-count{margin-left:auto;background:var(--eihi-lime);color:var(--eihi-navy);font:700 .75rem/1 var(--font-ui);padding:4px 8px;border-radius:99px}
.eihi-sidebar__foot{margin-top:auto;padding:16px 24px 0;font-size:.8125rem;color:rgba(255,255,255,.78)}
.eihi-main{min-width:0;display:flex;flex-direction:column}
.eihi-topbar{background:var(--ui-surface);border-bottom:1px solid var(--ui-line);min-height:64px;padding:10px 32px;display:flex;align-items:center;gap:16px}
.eihi-topbar .eihi-search{flex:1;max-width:420px}
.eihi-topbar__right{margin-left:auto;display:flex;align-items:center;gap:12px}
.eihi-avatar{width:40px;height:40px;border-radius:50%;background:var(--eihi-green);color:#fff;display:grid;place-items:center;font:700 .875rem/1 var(--font-ui)}
.eihi-page{padding:32px;width:100%;max-width:1280px}
.eihi-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.eihi-page-head p{margin:.4rem 0 0;color:var(--ui-muted)}
.eihi-actions{display:flex;gap:12px;flex-wrap:wrap}
.eihi-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}

/* ---------- Cards, KPI ---------- */
.eihi-card{background:var(--ui-surface);border-radius:var(--radius-card);box-shadow:var(--ui-shadow);padding:24px}
.eihi-card--flush{padding:0;overflow:hidden}
.eihi-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid var(--ui-line)}
.eihi-card--interactive{transition:transform .2s,box-shadow .2s}
.eihi-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-hover)}
.eihi-grid{display:grid;gap:24px}
.eihi-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.eihi-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.eihi-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.eihi-grid--2,.eihi-grid--3,.eihi-grid--4{align-items:start}  /* Felder mit Hint/Fehler sollen die Nachbarzelle nicht strecken */
.eihi-grid--main{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.eihi-kpi{display:flex;flex-direction:column;gap:6px}
.eihi-kpi__label{font:600 .8125rem/1.2 var(--font-display);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ui-muted)}
.eihi-kpi__value{font:700 2.5rem/1 var(--font-display);letter-spacing:-2px;color:var(--ui-headline)}
.eihi-kpi__delta{font:600 .875rem/1.2 var(--font-body);color:var(--eihi-green-mid)}
.eihi-kpi__delta--down{color:var(--eihi-red)}
.eihi-scope[data-theme="dark"] .eihi-kpi__delta{color:var(--eihi-lime)}
.eihi-scope[data-theme="dark"] .eihi-kpi__delta--down{color:#ff8a8a}
.eihi-kpi--accent{border-top:4px solid var(--eihi-lime)}

/* ---------- Tabelle ---------- */
.eihi-table-wrap{overflow-x:auto}
.eihi-table{width:100%;border-collapse:collapse;font-size:.9375rem}
.eihi-table th{text-align:left;font:600 .75rem/1.2 var(--font-display);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ui-muted);background:var(--ui-surface-2);padding:12px 16px;white-space:nowrap}
.eihi-table td{padding:14px 16px;border-top:1px solid var(--ui-line);vertical-align:middle}
.eihi-table tbody tr:hover{background:var(--ui-surface-2)}
.eihi-table .num{text-align:right;font-variant-numeric:tabular-nums}
.eihi-table td strong{font-weight:600;color:var(--ui-headline)}

/* ---------- Status-Chips (immer Text + Farbe, nie nur Farbe) ---------- */
.eihi-chip{display:inline-flex;align-items:center;gap:6px;font:600 .75rem/1 var(--font-body);padding:6px 10px;border-radius:99px;background:var(--eihi-fog);color:var(--eihi-navy);white-space:nowrap}
.eihi-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.eihi-chip--ok{background:#eaf3e6;color:var(--eihi-green-mid)}
.eihi-chip--warn{background:var(--eihi-orange-tint);color:#8a4f00}
.eihi-chip--err{background:var(--eihi-red-tint);color:var(--eihi-red)}
.eihi-chip--info{background:var(--eihi-blue-tint);color:var(--eihi-blue-dark)}
.eihi-chip--brand{background:var(--eihi-green);color:#fff}
.eihi-scope[data-theme="dark"] .eihi-chip{background:rgba(255,255,255,.1);color:var(--ui-text)}
.eihi-scope[data-theme="dark"] .eihi-chip--ok{background:rgba(162,198,23,.18);color:var(--eihi-lime)}
.eihi-scope[data-theme="dark"] .eihi-chip--warn{background:rgba(243,146,0,.2);color:#ffb84d}
.eihi-scope[data-theme="dark"] .eihi-chip--err{background:rgba(255,138,138,.16);color:#ff8a8a}
.eihi-scope[data-theme="dark"] .eihi-chip--info{background:rgba(64,144,206,.22);color:#8cc4ee}
/* Kategorie-Badge wie auf eihi.de (eckig, oben rechts an Bildern) */
.eihi-badge{position:absolute;top:0;right:0;background:var(--eihi-green);color:#fff;font:600 .75rem/1 var(--font-body);padding:8px 14px}

/* ---------- Formulare ---------- */
.eihi-form{display:grid;gap:20px}
.eihi-field{display:grid;gap:6px}
.eihi-field label,.eihi-label{font:600 .9375rem/1.3 var(--font-body);color:var(--ui-headline)}
.eihi-input,.eihi-select,.eihi-textarea{width:100%;min-height:44px;padding:10px 14px;font:400 1rem/1.4 var(--font-body);color:var(--ui-text);background:var(--ui-surface);
  border:1.5px solid var(--ui-border);border-radius:var(--radius-btn);transition:border-color .18s,box-shadow .18s}
.eihi-textarea{min-height:110px;resize:vertical}
.eihi-input::placeholder{color:var(--ui-muted);opacity:.8}
.eihi-input:hover,.eihi-select:hover,.eihi-textarea:hover{border-color:var(--ui-primary)}
.eihi-input:focus-visible,.eihi-select:focus-visible,.eihi-textarea:focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px;border-color:var(--ui-primary)}
.eihi-field--error .eihi-input,.eihi-field--error .eihi-select,.eihi-field--error .eihi-textarea{border-color:var(--eihi-red);border-width:2px}
.eihi-hint{font-size:.8125rem;color:var(--ui-muted)}
.eihi-error{font-size:.8125rem;font-weight:600;color:var(--eihi-red)}
.eihi-scope[data-theme="dark"] .eihi-error{color:#ff8a8a}
.eihi-check{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem}
.eihi-check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--eihi-green);flex:none}
.eihi-form__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ---------- Tabs, Alerts, Empty, Progress, Modal ---------- */
.eihi-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ui-line);margin-bottom:20px;overflow-x:auto}
.eihi-tabs a,.eihi-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:12px 16px;min-height:44px;font:600 1rem/1 var(--font-body);color:var(--ui-muted);cursor:pointer;text-decoration:none;white-space:nowrap}
.eihi-tabs [aria-selected="true"],.eihi-tabs [aria-current="page"]{color:var(--ui-primary);border-bottom-color:var(--eihi-lime)}
.eihi-alert{display:flex;gap:12px;padding:14px 18px;border-left:4px solid var(--eihi-blue-dark);background:var(--eihi-blue-tint);color:var(--eihi-navy);border-radius:0 var(--radius-card) var(--radius-card) 0;font-size:.9375rem}
.eihi-alert--ok{border-color:var(--eihi-green-mid);background:#eaf3e6}
.eihi-alert--warn{border-color:var(--eihi-orange);background:var(--eihi-orange-tint)}
.eihi-alert--err{border-color:var(--eihi-red);background:var(--eihi-red-tint)}
.eihi-scope[data-theme="dark"] .eihi-alert{background:rgba(255,255,255,.07);color:var(--ui-text)}
.eihi-empty{text-align:center;padding:48px 24px;color:var(--ui-muted)}
.eihi-empty .eihi-h3{margin-bottom:6px}
.eihi-progress{height:8px;background:var(--eihi-fog);border-radius:99px;overflow:hidden}
.eihi-progress>span{display:block;height:100%;background:var(--eihi-green);border-radius:99px}
.eihi-scope[data-theme="dark"] .eihi-progress{background:rgba(255,255,255,.12)}
.eihi-scope[data-theme="dark"] .eihi-progress>span{background:var(--eihi-lime)}
.eihi-modal-backdrop{position:fixed;inset:0;background:var(--eihi-overlay-dark);display:grid;place-items:center;padding:16px;z-index:100}
.eihi-modal{background:var(--ui-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-label);width:min(100%,520px);padding:28px}

/* Header-Band für eingebettete Plugins/Widgets: Eintracht-Grün mit Lime-Strich */
.eihi-widget{background:var(--ui-surface);border-radius:var(--radius-card);box-shadow:var(--ui-shadow);overflow:hidden}
.eihi-widget__head{background:var(--eihi-green);color:#fff;padding:18px 24px;border-bottom:3px solid var(--eihi-lime)}
.eihi-widget__head .eihi-h2{color:#fff;font-size:1.25rem;letter-spacing:-.5px}
.eihi-widget__body{padding:24px}

/* ---------- Ergänzungen: Gruppenzeilen, Meter, Toast, Dialog, Wortzeichen, Karten-Tabelle ---------- */
/* Gruppenzeile in Tabellen (z. B. Wochentag): <tr class="eihi-group"><td colspan="n">Montag <span>3 Kurse</span></td></tr> */
.eihi-table .eihi-group td{background:var(--eihi-green-tint);color:var(--eihi-green);font:600 .9375rem/1.2 var(--font-display);padding:10px 16px}
.eihi-table .eihi-group td span{font:400 .8125rem var(--font-body);color:var(--ui-muted);margin-left:6px}
.eihi-scope[data-theme="dark"] .eihi-table .eihi-group td{background:rgba(162,198,23,.12);color:var(--eihi-lime)}
/* Belegung/Meter: Grün = ok, Orange = knapp (ab ≈ 80 %), Rot = voll. Immer mit Zahl/Text daneben. */
.eihi-progress--warn>span{background:var(--eihi-orange)}
.eihi-progress--full>span{background:var(--eihi-red)}
.eihi-meter{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;font-weight:600}
.eihi-meter .eihi-progress{width:72px;flex:none}
/* Filterleiste mit Trefferzahl rechts */
.eihi-toolbar .eihi-count{margin-left:auto;font-size:.8125rem;color:var(--ui-muted)}
/* Toast / Erfolgsmeldung (role="status"), unten rechts */
.eihi-toast{position:fixed;right:24px;bottom:24px;max-width:360px;box-shadow:var(--shadow-label);z-index:110}
/* Natives <dialog class="eihi-modal"> mit Kopfzeile und Schließen-Button */
dialog.eihi-modal{border:0;margin:auto;color:var(--ui-text);max-height:calc(100vh - 32px);overflow:auto;width:min(calc(100% - 32px),520px)}
dialog.eihi-modal::backdrop{background:var(--eihi-overlay-dark)}
.eihi-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.eihi-icon-btn{min-width:44px;min-height:44px;display:inline-grid;place-items:center;background:none;border:0;border-radius:var(--radius-btn);color:var(--ui-muted);cursor:pointer;font-size:1.5rem;line-height:1}
.eihi-icon-btn:hover{background:var(--eihi-fog);color:var(--ui-text)}
.eihi-modal__actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:24px}
/* Wortzeichen statt Logo (für eigene Produkte "im Eihi-Stil", die nicht dem Verein gehören) */
.eihi-brand--word{border-left:6px solid var(--eihi-lime)}
.eihi-brand--word strong{font-size:1.125rem}
/* Tabelle als Karten auf dem Handy: <table class="eihi-table eihi-table--cards">, jede <td data-label="Trainer:in"> */
@media (max-width:640px){
  .eihi-table--cards thead{position:absolute;left:-9999px}
  .eihi-table--cards tr:not(.eihi-group){display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 16px;border-top:1px solid var(--ui-line)}
  .eihi-table--cards tr:not(.eihi-group) td{display:block;border:0;padding:2px 0}
  .eihi-table--cards td[data-label]::before{content:attr(data-label) ": ";color:var(--ui-muted);font-size:.8125rem}
  .eihi-table--cards .eihi-group{display:block}
  .eihi-table--cards .eihi-group td{display:block}
}

/* ---------- Responsiv ---------- */
@media (max-width:1100px){
  .eihi-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eihi-grid--main,.eihi-grid--3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .eihi-shell{grid-template-columns:1fr}
  .eihi-sidebar{position:static;height:auto;flex-direction:column;padding-bottom:8px}
  .eihi-brand{margin-bottom:8px}
  .eihi-nav{flex-direction:row;overflow-x:auto;padding:0 12px 8px}
  .eihi-nav__label,.eihi-sidebar__foot{display:none}
  .eihi-nav a{white-space:nowrap}
  .eihi-nav a[aria-current="page"]::before{left:8px;right:8px;top:auto;bottom:2px;width:auto;height:3px;border-radius:2px}
  .eihi-page{padding:20px 16px}
  .eihi-topbar{padding:10px 16px}
}
@media (max-width:640px){
  .eihi-grid--4,.eihi-grid--2{grid-template-columns:minmax(0,1fr)}
  .eihi-kpi__value{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){.eihi-scope *{transition:none!important}}