/* ============================================================
   SELO Ausbildung — gemeinsames Aussehen der Lernorte-Plattform
   (ab_lernende, ab_berufsschule, ab_uek). Einbinden VOR dem eigenen
   <style> der Seite und VOR gema_responsive.css.
   Farben der Lernorte: Lehrbetrieb grün, Berufsfachschule blau,
   ÜK-Zentrum bernstein (wie die Rollen in gema_auth.js).
   ============================================================ */
:root{
  --bg:#f3f5fb;--sur:#fff;--sur2:#f7f8fc;
  --brd:#e0e4ef;--brd2:#c8cfdf;
  --txt:#0f172a;--txt2:#334155;--mut:#64748b;--mut2:#94a3b8;
  --teal:#0f766e;--teal-bg:#f0fdfa;--teal-bd:#99f6e4;
  --grn:#16a34a;--grn-bg:#f0fdf4;--grn-bd:#bbf7d0;
  --red:#dc2626;--red-bg:#fef2f2;--red-bd:#fecaca;
  --amb:#b45309;--amb-bg:#fffbeb;--amb-bd:#fde68a;
  --blue:#0369a1;--blue-bg:#f0f9ff;--blue-bd:#bae6fd;
  --ort-betrieb:#15803d;--ort-betrieb-bg:#f0fdf4;--ort-betrieb-bd:#bbf7d0;
  --ort-schule:#0369a1;--ort-schule-bg:#f0f9ff;--ort-schule-bd:#bae6fd;
  --ort-uek:#b45309;--ort-uek-bg:#fffbeb;--ort-uek-bd:#fde68a;
  --r:12px;--r-sm:8px;--r-lg:18px;
  --sh-sm:0 1px 4px rgba(0,0,0,.06);
  --sh:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --sh-lg:0 16px 48px rgba(0,0,0,.13),0 4px 16px rgba(0,0,0,.06);
  --sans:'DM Sans',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);font-size:14px;line-height:1.5;overflow-x:hidden;overflow-x:clip}
::placeholder{color:#cbd5e1}
button{font-family:inherit}
input,select,textarea{font-family:inherit;font-size:16px}

/* ── Navigation (Kanon, Metriken aus gema_responsive.css) ── */
.g-nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--brd);box-shadow:var(--sh-sm)}
.g-nav-inner{padding:0 24px;height:52px;display:flex;align-items:center;gap:0}
.g-nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:14px}
.g-nav-bc{display:flex;align-items:center;gap:7px;font-size:13px;min-width:0}
.bc-cat{color:var(--mut);text-decoration:none;font-weight:600}
.bc-cat:hover{color:var(--txt)}
.bc-sep{color:var(--mut2)}
.bc-cur{font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.gema-feedback-btn{border:1.5px solid var(--brd2);background:var(--sur);color:var(--txt2);border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:700;cursor:pointer}
.g-page{max-width:1100px;margin:0 auto;padding:20px 24px 80px}

/* ── Hero (Modul-Muster) ── */
.hero{background:linear-gradient(135deg,#0f172a,#14532d 55%,#15803d);border-radius:16px;padding:20px 24px;color:#fff;margin-bottom:16px}
.hero.au-hero-schule{background:linear-gradient(135deg,#0f172a,#0c4a6e 55%,#0369a1)}
.hero.au-hero-uek{background:linear-gradient(135deg,#0f172a,#78350f 55%,#b45309)}
.hero-in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.hero-left{display:flex;align-items:center;gap:14px;min-width:0}
.hero-ic{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.hero-title{font-size:20px;font-weight:900;letter-spacing:-.3px}
.hero-sub{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:2px}
.hero-pills{display:flex;gap:8px;flex-wrap:wrap}
.hero-pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700;color:#fff}

/* ── Knöpfe, Felder ── */
.au-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1.5px solid var(--brd2);background:var(--sur);color:var(--txt2);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.au-btn:hover{background:var(--sur2)}
.au-btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.au-btn.primary:hover{background:#0d5f59}
.au-btn.danger{color:var(--red);border-color:var(--red-bd)}
.au-btn.danger:hover{background:var(--red-bg)}
.au-btn.ghost{border-color:transparent;background:transparent;color:var(--teal)}
.au-btn.ghost:hover{background:var(--teal-bg)}
.au-btn.sm{padding:5px 10px;font-size:12px;border-radius:8px}
.au-btn:disabled{opacity:.5;cursor:default}
.au-btn.on{background:var(--teal-bg);border-color:var(--teal);color:var(--teal)}
.inp{width:100%;border:1.5px solid var(--brd2);border-radius:var(--r-sm);padding:8px 10px;font-size:14px;background:var(--sur);color:var(--txt);min-width:0}
.inp:focus{outline:none;border-color:var(--teal)}
.inp:disabled,.inp[readonly]{background:var(--sur2);color:var(--txt2)}
textarea.inp{min-height:64px;resize:vertical;line-height:1.45}
select.inp{cursor:pointer}
.fld{margin-bottom:12px;min-width:0}
.fl{display:block;font-size:12px;font-weight:700;color:var(--txt2);margin-bottom:5px}
.au-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.au-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
.g-inp-group{display:flex;align-items:stretch;min-width:0}
.g-inp-group .inp{border-top-right-radius:0;border-bottom-right-radius:0;flex:1 1 auto;min-width:0}
.g-inp-unit{display:flex;align-items:center;padding:0 10px;border:1.5px solid var(--brd2);border-left:none;border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--sur2);font-size:12.5px;font-weight:700;color:var(--mut);white-space:nowrap}
.au-klein{font-size:12px;color:var(--mut)}
.au-meld{font-size:12.5px;color:var(--red);font-weight:700;margin-top:6px}
.au-meld:empty{display:none}
.au-check{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--txt2);cursor:pointer}
.au-check input{width:18px;height:18px;accent-color:var(--teal);flex-shrink:0}
.au-seg{display:inline-flex;border:1.5px solid var(--brd2);border-radius:10px;overflow:hidden;background:var(--sur);flex-wrap:wrap}
.au-seg button{border:none;background:none;padding:7px 11px;font-size:12.5px;font-weight:700;color:var(--txt2);cursor:pointer;border-right:1px solid var(--brd)}
.au-seg button:last-child{border-right:none}
.au-seg button.on{background:var(--teal-bg);color:var(--teal)}

/* ── Werkzeugleiste, Suche ── */
.au-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.au-spacer{flex:1}
.au-search{display:flex;align-items:center;gap:7px;border:1.5px solid var(--brd2);border-radius:10px;background:var(--sur);padding:0 10px;min-width:0}
.au-search:focus-within{border-color:var(--teal)}
.au-search input{border:none;outline:none;background:transparent;padding:8px 0;flex:1;min-width:0;color:var(--txt)}

/* ── Hinweis-Banner (Regeln, Übernahme, Anfragen) ── */
.au-banner{display:flex;align-items:flex-start;gap:10px;border-radius:var(--r);padding:11px 14px;margin-bottom:12px;font-size:13px;border:1.5px solid;flex-wrap:wrap}
.au-banner .au-bt{flex:1 1 260px;min-width:0}
.au-banner b{font-weight:800}
.au-banner.info{background:var(--blue-bg);border-color:var(--blue-bd);color:#0c4a6e}
.au-banner.warn{background:var(--amb-bg);border-color:var(--amb-bd);color:#78350f}
.au-banner.err{background:var(--red-bg);border-color:var(--red-bd);color:#7f1d1d}
.au-banner.ok{background:var(--grn-bg);border-color:var(--grn-bd);color:#14532d}

/* ── Karten ── */
.au-card{background:var(--sur);border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--sh-sm);margin-bottom:12px;min-width:0}
.au-card-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--brd);flex-wrap:wrap}
.au-card-hd h3{font-size:14.5px;font-weight:900;flex:1 1 auto;min-width:0}
.au-card-bd{padding:12px 14px}
.au-card-bd.flush{padding:0}
.au-leer{border:1.5px dashed var(--brd2);border-radius:var(--r);padding:22px 16px;text-align:center;color:var(--mut);font-size:13px;background:var(--sur)}
.au-leer b{display:block;color:var(--txt2);font-size:14px;margin-bottom:3px}

/* ── Chips, Badges ── */
.au-chips{display:flex;gap:6px;flex-wrap:wrap}
.au-chip{display:inline-flex;align-items:center;gap:4px;background:var(--sur2);border:1px solid var(--brd);border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700;color:var(--txt2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
button.au-chip{cursor:pointer}
.au-chip[data-ort="betrieb"]{background:var(--ort-betrieb-bg);border-color:var(--ort-betrieb-bd);color:var(--ort-betrieb)}
.au-chip[data-ort="schule"]{background:var(--ort-schule-bg);border-color:var(--ort-schule-bd);color:var(--ort-schule)}
.au-chip[data-ort="uek"]{background:var(--ort-uek-bg);border-color:var(--ort-uek-bd);color:var(--ort-uek)}
.au-chip.fehlt{border-style:dashed;background:var(--sur);color:var(--mut)}
.au-badge{display:inline-flex;align-items:center;gap:3px;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:800;white-space:nowrap;background:var(--sur2);color:var(--txt2);border:1px solid var(--brd)}
.au-badge.ok{background:var(--grn-bg);color:#15803d;border-color:var(--grn-bd)}
.au-badge.warn{background:var(--amb-bg);color:#92400e;border-color:var(--amb-bd)}
.au-badge.err{background:var(--red-bg);color:#b91c1c;border-color:var(--red-bd)}
.au-badge.info{background:var(--blue-bg);color:#075985;border-color:var(--blue-bd)}

/* ── Reiter ── */
.au-tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--brd);margin-bottom:14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.au-tabs::-webkit-scrollbar{display:none}
.au-tab{border:none;background:none;padding:9px 13px 10px;font-size:13px;font-weight:800;color:var(--mut);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.au-tab:hover{color:var(--txt)}
.au-tab.on{color:var(--teal);border-bottom-color:var(--teal)}
.au-tab .au-badge{font-size:10.5px}
.au-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}

/* ── Cockpit: Liste links, Inhalt rechts (Handy: erst die Liste) ──
   .einzeln = ohne Liste · .mit-auswahl = etwas gewählt (Handy zeigt dann
   nur den Inhalt, mit «← Zurück» .au-zurueck) */
.au-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
.au-layout.einzeln{grid-template-columns:minmax(0,1fr)}
.au-layout.einzeln .au-side{display:none}
.au-side{position:sticky;top:calc(72px + env(safe-area-inset-top,0px));background:var(--sur);border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--sh-sm);min-width:0}
.au-side-hd{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--brd);align-items:center}
.au-side-hd .au-search{flex:1 1 auto}
.au-list{max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);overflow-y:auto;padding:6px;-webkit-overflow-scrolling:touch}
.au-item{display:flex;gap:9px;align-items:center;padding:8px 9px;border-radius:10px;cursor:pointer;border:1px solid transparent;width:100%;text-align:left;background:none;color:inherit;font:inherit}
.au-item:hover{background:var(--sur2)}
.au-item.on{background:var(--teal-bg);border-color:var(--teal-bd)}
.au-item .t{flex:1;min-width:0;display:flex;flex-direction:column}
.au-item .n{font-weight:800;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-item .m{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-item.alt .n{color:var(--mut)}
.au-item-ic{width:34px;height:34px;border-radius:10px;background:var(--sur2);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.au-dot{min-width:18px;height:18px;border-radius:9px;background:var(--amb);color:#fff;font-size:10.5px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0}
.au-grp{font-size:10.5px;font-weight:800;color:var(--mut);letter-spacing:.3px;padding:10px 9px 4px}
.au-main{min-width:0}
.au-zurueck{display:none;margin-bottom:10px}

/* ── Tabellen ── */
.au-tbl-w{overflow-x:auto;-webkit-overflow-scrolling:touch}
.au-tbl{width:100%;border-collapse:collapse;font-size:13px}
.au-tbl th{text-align:left;font-size:11px;font-weight:800;color:var(--mut);text-transform:none;letter-spacing:.2px;padding:7px 10px;border-bottom:1.5px solid var(--brd);white-space:nowrap;background:var(--sur2)}
.au-tbl td{padding:8px 10px;border-bottom:1px solid var(--brd);vertical-align:top}
.au-tbl tr:last-child td{border-bottom:none}
.au-tbl td.num,.au-tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.au-tbl .au-acts{white-space:nowrap;text-align:right}

/* ── Kennzahlen ── */
.au-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.au-kpi{background:var(--sur2);border:1px solid var(--brd);border-radius:10px;padding:8px 10px;min-width:0}
.au-kpi .v{font-size:19px;font-weight:900;line-height:1.2;font-variant-numeric:tabular-nums}
.au-kpi .l{font-size:11px;font-weight:700;color:var(--mut)}

/* ── Dateien ── */
/* Raster statt Flex: der Name bekommt den Platz zuerst (vorher schrumpfte er
   auf «Aufg…», während die Angaben daneben ungekürzt blieben), die Angaben
   kürzen mit «…» und stehen am Handy unter dem Namen. */
.au-dateien{display:flex;flex-direction:column;gap:5px;min-width:0}
.au-datei{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,auto) auto;align-items:center;column-gap:8px;border:1px solid var(--brd);border-radius:9px;padding:6px 9px;background:var(--sur2);min-width:0}
.au-datei-n{min-width:0;font-size:12.5px;font-weight:700;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;background:none;text-align:left;cursor:pointer;padding:0}
.au-datei-n:hover{color:var(--teal);text-decoration:underline}
.au-datei-m{font-size:11px;color:var(--mut);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.au-datei-x{border:none;background:none;color:var(--mut);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px}
.au-datei-x:hover{background:var(--red-bg);color:var(--red)}
.au-upl{font-size:12px;color:var(--mut)}

.au-up{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:960;background:#0f172a;color:#fff;border-radius:10px;padding:9px 14px;font-size:12.5px;font-weight:700;box-shadow:var(--sh);max-width:calc(100vw - 32px);display:none}
.au-up.on{display:block}
/* Absenzen während des ÜK (Teilnahme-Dialog) */
.au-uabs-z{border:1px solid var(--brd);border-radius:9px;padding:8px;margin-bottom:6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;align-items:center}
.au-uabs-tx{grid-column:1/-1}

/* ── Dialog (.modal-bg = Scroll-Sperre + Feedback-Knopf) ── */
.au-ov{position:fixed;inset:0;z-index:950;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
.au-ov.open{display:flex}
.au-modal{background:var(--sur);border-radius:16px;box-shadow:var(--sh-lg);width:100%;max-width:640px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;overflow:hidden}
.au-modal.breit{max-width:900px}
.au-modal.schmal{max-width:440px}
.au-mhd{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--brd);flex-shrink:0}
.au-mhd h3{font-size:15.5px;font-weight:900;flex:1;min-width:0}
.au-x{border:none;background:none;font-size:18px;cursor:pointer;color:var(--mut);padding:4px 8px;border-radius:8px}
.au-x:hover{background:var(--sur2)}
.au-mbd{padding:14px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0}
.au-mft{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:11px 16px;border-top:1px solid var(--brd);background:var(--sur2);flex-shrink:0;flex-wrap:wrap}
.au-mft .au-meld{margin:0 auto 0 0}

/* ── Auswahlliste (Lernende wählen, Suche) ── */
.au-wahl{display:flex;flex-direction:column;gap:4px;max-height:48vh;overflow-y:auto}
.au-wahl-z{display:flex;align-items:center;gap:9px;border:1px solid var(--brd);border-radius:9px;padding:7px 10px;cursor:pointer;background:var(--sur)}
.au-wahl-z:hover{background:var(--sur2)}
.au-wahl-z input{width:18px;height:18px;accent-color:var(--teal);flex-shrink:0}
.au-wahl-z .n{font-weight:800;font-size:13px}
.au-wahl-z .m{font-size:11.5px;color:var(--mut)}
.au-treffer{border:1.5px solid var(--brd);border-radius:11px;padding:10px 12px;display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.au-treffer+.au-treffer{margin-top:8px}
.au-treffer .t{flex:1 1 220px;min-width:0}
.au-treffer .n{font-weight:900;font-size:14px}
.au-treffer .m{font-size:12px;color:var(--mut);margin-top:2px}

/* ── Avatar / Namen ── */
.au-av{width:34px;height:34px;border-radius:50%;background:var(--teal-bg);border:1px solid var(--teal-bd);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:900;flex-shrink:0}
.au-prog{height:5px;border-radius:3px;background:var(--brd);overflow:hidden;margin-top:5px}
.au-prog>i{display:block;height:100%;background:var(--teal);border-radius:3px}

/* ── Meldung (Toast) ── */
.au-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:#0f172a;color:#fff;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:12500;max-width:calc(100vw - 32px)}
.au-toast.on{opacity:1;transform:translate(-50%,0)}
.au-toast.err{background:#991b1b}

/* ── Skelett (Form der Liste, Basis in gema_responsive.css 19) ── */
.au-sk-z{display:flex;align-items:center;gap:10px;padding:9px 12px}
.au-sk-z .gema-sk-ic{width:34px;height:34px;flex-shrink:0}
.au-sk-z .au-sk-t{flex:1;display:flex;flex-direction:column;gap:6px}

@media(max-width:900px){
  .au-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .au-layout{grid-template-columns:minmax(0,1fr)}
  .au-side{position:static}
  .au-list{max-height:none}
  .au-layout.mit-auswahl .au-side{display:none}
  .au-layout:not(.mit-auswahl):not(.einzeln) .au-main{display:none}
  .au-layout.mit-auswahl:not(.einzeln) .au-zurueck{display:inline-flex}
}
@media(max-width:640px){
  .au-datei{grid-template-columns:auto minmax(0,1fr) auto;row-gap:1px}
  .au-datei-m{grid-column:2;grid-row:2}
  .au-datei-x{grid-column:3;grid-row:1}
  .g-page{padding:14px 14px 80px}
  .hero{padding:14px 16px}
  .au-grid2,.au-grid3{grid-template-columns:minmax(0,1fr)}
  .au-card-hd{padding:10px 12px}
  .au-card-bd{padding:10px 12px}
  .au-mbd{padding:12px}
  .au-mft{padding:10px 12px}
  .au-search{flex:1 1 100%}
  .au-tab{padding:8px 10px 9px;font-size:12.5px}
  .au-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .au-kpi{padding:6px 8px}
  .au-kpi .v{font-size:17px}
  .au-kpi .l{font-size:10.5px;overflow-wrap:anywhere}
}
@media print{
  .g-nav,.au-toolbar,.au-tabs,.au-btn,.au-datei-x,.gema-feedback-btn,.no-print,.au-banner{display:none!important}
  .au-card{break-inside:avoid;box-shadow:none}
  .au-side,.au-zurueck{display:none!important}
  .au-layout{display:block}
  body{background:#fff}
}