:root{
  /* WISO Corporate Design (aus Logo abgeleitet) */
  --brand-green:#478E4F;
  --brand-green-dark:#2F6F3A;
  --brand-red:#f7a1a5;
  --brand-gray:#6d6a60;

  /* App-Tokens */
  --blue:var(--brand-green-dark);     /* primäre UI-Farbe (Header, Buttons, Links) */
  --ok:var(--brand-green);
  --danger:var(--brand-red);
  --warn:#F79009;

  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --border:#e4e7ec;
  --shadow:0 2px 14px rgba(16,24,40,.08);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.topbar{
  background:var(--blue);
  color:#fff;
  position:sticky;
  top:0;
  z-index:10;
  padding-top:env(safe-area-inset-top, 0px);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{font-weight:800;letter-spacing:.2px}
.nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;flex:1}
.nav a{color:#fff;text-decoration:none;opacity:.95;padding:8px 10px;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.12)}
.nav a.active{background:rgba(255,255,255,.22);opacity:1}
.nav a.kiosk-nav{
  color:#101828;
  background:linear-gradient(180deg, #ffd966, #f79009);
  font-weight:900;
  opacity:1;
  box-shadow:0 0 0 2px rgba(255,255,255,.24), 0 6px 18px rgba(16,24,40,.22);
}
.nav a.kiosk-nav:hover,
.nav a.kiosk-nav.active{
  background:linear-gradient(180deg, #ffe58f, #f79009);
  text-decoration:none;
}
.userpill{display:flex;align-items:center;gap:8px;color:#fff;opacity:.95}
.userpill .badge{background:rgba(255,255,255,.18);color:#fff}
.card{background:var(--card);border-radius:14px;padding:16px;box-shadow:var(--shadow);margin:12px 0;border:1px solid rgba(228,231,236,.6)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1;min-width:220px}
label{display:block;font-size:13px;color:var(--muted);margin:6px 0}
input,select,button,textarea{font:inherit;padding:10px 12px;border-radius:12px;border:1px solid var(--border);width:100%;background:#fff}
select{appearance:auto}
button{background:var(--blue);color:#fff;border:none;cursor:pointer}
button:hover{filter:brightness(1.03)}
button.secondary{background:#e1e5ea}
button.danger{background:var(--danger)}
button.small{width:auto;padding:7px 10px;border-radius:10px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.table th{font-size:13px;color:var(--muted);font-weight:700}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;background:#eef2ff;color:var(--blue);border:1px solid rgba(228,231,236,.8)}
.badge.ok{background:rgba(18,183,106,.10);color:var(--ok);border-color:rgba(18,183,106,.25)}
.badge.warn{background:rgba(247,144,9,.12);color:var(--warn);border-color:rgba(247,144,9,.25)}
.badge.danger{background:rgba(180,35,24,.10);color:var(--danger);border-color:rgba(180,35,24,.25)}
.flash{padding:10px 12px;border-radius:12px;margin:12px 0;border:1px solid rgba(228,231,236,.8)}
.flash.success{background:rgba(18,183,106,.08)}
.flash.error{background:rgba(180,35,24,.08)}
.small{font-size:12px;color:var(--muted)}
.footer{padding:8px 0 20px}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
     background:#111827;color:#fff;border-radius:8px;padding:2px 8px;font-size:12px}


/* Brand header */
.brand{font-weight:800;letter-spacing:.2px}
.brandlink{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brandlink:hover{text-decoration:none}
.brandlogo{height:63px;width:auto;display:block}
.brandtext{display:flex;flex-direction:column;line-height:1.05}
.brandtitle{font-size:15px;font-weight:900;letter-spacing:.3px}
.brandsub{font-size:12px;opacity:.9;font-weight:700}

/* Improve contrast for default badge */
.badge{background:rgba(71,142,79,.10);color:var(--blue);border:1px solid rgba(71,142,79,.22)}

/* Admin dashboard grouping */
.admin-dashboard > h2{margin-bottom:6px}
.admin-sections{display:grid;gap:16px;margin-top:16px}
.admin-group{
  --group-accent:var(--blue);
  --group-soft:rgba(47,111,58,.08);
  margin:0;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(47,111,58,.18);
  border:1px solid color-mix(in srgb, var(--group-accent) 18%, white);
  background:linear-gradient(180deg, var(--group-soft) 0%, rgba(255,255,255,.96) 32%, #fff 100%);
  box-shadow:var(--shadow);
}
.admin-group--classes{
  --group-accent:#b54708;
  --group-soft:rgba(181,71,8,.10);
}
.admin-group--rooms{
  --group-accent:#0f766e;
  --group-soft:rgba(15,118,110,.10);
}
.admin-group--ops{
  --group-accent:#344054;
  --group-soft:rgba(52,64,84,.08);
}
.admin-group__header{margin-bottom:14px}
.admin-group__header h3{margin:8px 0 6px}
.admin-group__badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--group-accent);
  background:rgba(255,255,255,.78);
  background:color-mix(in srgb, var(--group-accent) 10%, white);
  border:1px solid rgba(47,111,58,.18);
  border:1px solid color-mix(in srgb, var(--group-accent) 18%, white);
}
.admin-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.admin-tile{
  --tile-accent:var(--group-accent);
  margin:0;
  border:1px solid rgba(47,111,58,.18);
  border:1px solid color-mix(in srgb, var(--tile-accent) 20%, white);
  box-shadow:none;
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.98);
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, color-mix(in srgb, var(--tile-accent) 3%, white) 100%);
}
.admin-tile::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--tile-accent);
}
.admin-tile--classes{--tile-accent:#b54708;}
.admin-tile--rooms{--tile-accent:#0f766e;}
.admin-tile--ops{--tile-accent:#344054;}
.admin-tile h4{margin:10px 0 8px;font-size:18px}
.admin-tile p{margin:8px 0 0}
.admin-tile a{font-weight:700}
.admin-tile__tag{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--tile-accent);
  background:rgba(255,255,255,.82);
  background:color-mix(in srgb, var(--tile-accent) 10%, white);
  border:1px solid rgba(47,111,58,.18);
  border:1px solid color-mix(in srgb, var(--tile-accent) 18%, white);
}
.bulk-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:10px 0 12px;
  padding:10px;
  border-radius:14px;
  background:rgba(47,111,58,.07);
  border:1px solid rgba(47,111,58,.16);
}
.bulk-actions__count{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff;
  color:var(--blue);
  border:1px solid rgba(47,111,58,.20);
  font-size:13px;
  font-weight:800;
}
tr.is-selected td{
  background:rgba(23,92,211,.08);
}

/* Teacher dashboard grouping */
.teacher-dashboard > h2{margin-bottom:6px}
.teacher-current-selection{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 12px;
}
.teacher-current-selection span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 11px;
  border-radius:999px;
  color:#0f172a;
  background:linear-gradient(180deg, rgba(23,92,211,.10), rgba(47,111,58,.08));
  border:1px solid rgba(23,92,211,.18);
  font-size:14px;
}
.teacher-sections{display:grid;gap:16px;margin-top:16px}
.teacher-group{
  --teacher-accent:var(--blue);
  --teacher-soft:rgba(47,111,58,.08);
  margin:0;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(47,111,58,.18);
  border:1px solid color-mix(in srgb, var(--teacher-accent) 18%, white);
  background:linear-gradient(180deg, var(--teacher-soft) 0%, rgba(255,255,255,.96) 32%, #fff 100%);
  box-shadow:var(--shadow);
}
.teacher-group--day{
  --teacher-accent:#2f6f3a;
  --teacher-soft:rgba(71,142,79,.10);
}
.teacher-group--tools{
  --teacher-accent:#175cd3;
  --teacher-soft:rgba(23,92,211,.08);
}
.teacher-group__header{margin-bottom:14px}
.teacher-group__header h3{margin:8px 0 6px}
.teacher-group__badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--teacher-accent);
  background:rgba(255,255,255,.78);
  background:color-mix(in srgb, var(--teacher-accent) 10%, white);
  border:1px solid rgba(47,111,58,.18);
  border:1px solid color-mix(in srgb, var(--teacher-accent) 18%, white);
}
.teacher-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.teacher-tile{
  --teacher-tile-accent:var(--teacher-accent);
  margin:0;
  border:1px solid rgba(47,111,58,.18);
  border:1px solid color-mix(in srgb, var(--teacher-tile-accent) 20%, white);
  box-shadow:none;
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.98);
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, color-mix(in srgb, var(--teacher-tile-accent) 3%, white) 100%);
}
.teacher-tile::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--teacher-tile-accent);
}
.teacher-tile--day{--teacher-tile-accent:#2f6f3a;}
.teacher-tile--tools{--teacher-tile-accent:#175cd3;}
.teacher-tile h4{margin:10px 0 8px;font-size:18px}
.teacher-tile p{margin:8px 0 0}
.teacher-tile a{font-weight:700}
.teacher-tile__tag{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--teacher-tile-accent);
  background:rgba(255,255,255,.82);
  background:color-mix(in srgb, var(--teacher-tile-accent) 10%, white);
  border:1px solid rgba(47,111,58,.18);
  border:1px solid color-mix(in srgb, var(--teacher-tile-accent) 18%, white);
}
.class-status-action{
  min-width:150px;
  font-weight:800;
  border:2px solid transparent;
  white-space:normal;
}
.class-status-action--inactive{
  background:#b42318;
  color:#fff;
  border-color:#7a271a;
}
.class-status-action--active{
  background:#087443;
  color:#fff;
  border-color:#054f31;
}
.class-status-action--present{
  background:#087443;
  color:#fff;
  border-color:#054f31;
}
.class-status-action--absent{
  background:#b42318;
  color:#fff;
  border-color:#7a271a;
}
.class-status-action:hover{
  filter:none;
  transform:translateY(-1px);
}

/* Student room selection */
.student-dashboard > h2{margin-bottom:6px}
.student-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.student-hero h2{margin-bottom:6px}
.student-hero p{margin:0}
.student-hero__hint{
  flex:0 0 auto;
  max-width:240px;
  padding:8px 12px;
  border-radius:999px;
  color:#175cd3;
  background:rgba(23,92,211,.08);
  border:1px solid rgba(23,92,211,.18);
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.student-status-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:16px 0;
}
.student-panel{
  --student-panel-accent:#175cd3;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(23,92,211,.18);
  border:1px solid color-mix(in srgb, var(--student-panel-accent) 20%, white);
  background:rgba(255,255,255,.98);
  background:linear-gradient(180deg, color-mix(in srgb, var(--student-panel-accent) 8%, white) 0%, rgba(255,255,255,.98) 70%);
  position:relative;
  overflow:hidden;
}
.student-panel::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:var(--student-panel-accent);
}
.student-panel--classroom{--student-panel-accent:#2f6f3a;}
.student-panel--current.has-room{--student-panel-accent:#175cd3;}
.student-panel--current.no-room{--student-panel-accent:#f79009;}
.student-panel__label{
  display:inline-block;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--student-panel-accent);
  background:rgba(255,255,255,.80);
  background:color-mix(in srgb, var(--student-panel-accent) 10%, white);
  border:1px solid rgba(47,111,58,.18);
  border:1px solid color-mix(in srgb, var(--student-panel-accent) 18%, white);
}
.student-panel strong{
  display:block;
  margin-top:10px;
  font-size:24px;
  line-height:1.15;
}
.student-panel p{margin:8px 0 0}
.student-room-picker{
  margin-top:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(23,92,211,.18);
  background:linear-gradient(180deg, rgba(23,92,211,.07) 0%, rgba(255,255,255,.98) 30%, #fff 100%);
}
.student-room-picker__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.student-room-picker__header h3{margin:0 0 6px}
.student-room-picker__header p{margin:0}
.student-room-picker__badge{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  color:#175cd3;
  background:rgba(23,92,211,.10);
  border:1px solid rgba(23,92,211,.20);
  font-size:12px;
  font-weight:800;
}
.student-room-groups{
  display:grid;
  gap:14px;
}
.student-room-group{
  --room-group-color:#175cd3;
  padding:12px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--room-group-color) 22%, white);
  background:linear-gradient(180deg, color-mix(in srgb, var(--room-group-color) 9%, white) 0%, rgba(255,255,255,.98) 44%, #fff 100%);
}
.student-room-group__header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.student-room-group__header h4{
  margin:0;
  font-size:17px;
}
.student-room-group__label{
  padding:4px 9px;
  border-radius:999px;
  color:var(--room-group-color);
  background:color-mix(in srgb, var(--room-group-color) 11%, white);
  border:1px solid color-mix(in srgb, var(--room-group-color) 24%, white);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.student-room-card-grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.student-room-card{
  min-height:118px;
  padding:12px;
  border-radius:14px;
  border:2px solid color-mix(in srgb, var(--room-group-color) 24%, white);
  background:#fff;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  box-shadow:0 1px 6px rgba(16,24,40,.06);
}
.student-room-card:hover{
  border-color:var(--room-group-color);
  transform:translateY(-1px);
}
.student-room-card:focus{
  outline:3px solid color-mix(in srgb, var(--room-group-color) 30%, transparent);
  outline-offset:2px;
}
.student-room-card.is-class-room{
  border-color:#2f6f3a;
  background:linear-gradient(180deg, rgba(71,142,79,.13), #fff 62%);
}
.student-room-card.is-current{
  border-color:#175cd3;
  background:linear-gradient(180deg, rgba(23,92,211,.14), #fff 62%);
  box-shadow:0 0 0 3px rgba(23,92,211,.12);
}
.student-room-card.is-current.is-class-room{
  border-color:#175cd3;
  background:linear-gradient(135deg, rgba(23,92,211,.14), rgba(71,142,79,.13) 46%, #fff 78%);
}
.student-room-card.is-full{
  opacity:.58;
  cursor:not-allowed;
  background:#f8fafc;
}
.student-room-card.is-full:hover{
  transform:none;
  border-color:color-mix(in srgb, var(--room-group-color) 24%, white);
}
.student-room-card__top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:7px;
}
.student-room-card__top strong{
  flex:1 0 100%;
  font-size:20px;
  line-height:1.1;
}
.student-room-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.student-badge-classroom{
  background:rgba(71,142,79,.14);
  color:#2f6f3a;
  border-color:rgba(71,142,79,.28);
  font-weight:800;
}
.student-badge-current{
  font-weight:800;
}
.student-manual-select{
  margin-top:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(228,231,236,.9);
  background:#fff;
}
.student-manual-select h3{margin-top:0}


/* Burger navigation */
.burger{
  display:none !important; /* hidden on desktop */
  width:auto !important;
  flex:0 0 auto;
  margin-left:auto;
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  border-radius:14px;
  padding:10px 10px;
  cursor:pointer;
  flex-direction:column;   /* stack bars */
  gap:5px;                 /* space between bars */
  align-items:center;
  justify-content:center;
}
.burger span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
  margin:0;                /* avoid flex row spacing issues */
}


/* --- Mobile responsiveness (Burger + Karten-Tabellen) --- */
@media (max-width: 720px){
  .wrap{padding:12px}
  .topbar .wrap{flex-wrap:wrap;justify-content:space-between;gap:10px}
  .brandlogo{height:32px}
  .brandtitle{font-size:14px}
  .brandsub{font-size:12px}

  /* Burger */
  .burger{display:flex !important}

  .nav{display:none;width:100%}
  .nav.is-open{
    display:flex;
    flex-direction:column;
    gap:6px;
    background:rgba(0,0,0,.12);
    padding:10px;
    border-radius:14px;
  }
  .nav a{padding:12px 12px;border-radius:12px;white-space:normal}
  .userpill{margin-left:0;margin-top:6px;align-self:flex-start}

  /* Inputs & buttons: comfortable touch targets */
  input,select,button,textarea{min-height:44px}

  /* Grid */
  .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .admin-group{padding:14px}
  .admin-grid{grid-template-columns:1fr}
  .teacher-group{padding:14px}
  .teacher-grid{grid-template-columns:1fr}
  .student-hero{display:block}
  .student-hero__hint{
    display:block;
    max-width:none;
    margin-top:10px;
  }
  .student-status-grid{grid-template-columns:1fr}
  .student-room-picker{padding:14px}
  .student-room-picker__header{display:block}
  .student-room-picker__badge{
    display:inline-block;
    margin-top:10px;
  }

  /* Tables -> cards */
  table.table{display:block;border:0}
  table.table thead{display:none}
  table.table tbody{display:block}
  table.table tr{
    display:block;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:10px 12px;
    margin:0 0 10px 0;
    box-shadow: var(--shadow);
  }
  table.table td{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    border:0;
    padding:6px 0;
    white-space:normal;
  }
  table.table td::before{
    content: attr(data-label);
    flex:0 0 42%;
    font-weight:800;
    color:var(--muted);
  }
  table.table td:last-child{padding-bottom:0}
}
@media (max-width: 420px){
  .userpill{display:none}
}

@supports (padding: max(0px)){
  body{
    padding-left:max(0px, env(safe-area-inset-left));
    padding-right:max(0px, env(safe-area-inset-right));
  }
  main.wrap{
    padding-bottom:max(16px, env(safe-area-inset-bottom));
  }
}

body.is-standalone .topbar{
  box-shadow:0 8px 20px rgba(16,24,40,.12);
}