/* ================================================================
   KidsCompass Interactive Prototype v2 — Styles
   Design tokens: D42 (AppUI), D46 (Touch Targets ≥48px), D47 (Responsive)
   ================================================================ */

/* ---- Reset & Design Tokens ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-primary:        #2E86AB;
  --color-primary-light:  #e8f4f8;
  --color-primary-dark:   #1a6d94;
  --color-secondary:      #F6AE2D;
  --color-secondary-light:#fef5e0;
  --color-success:        #33A853;
  --color-success-light:  #e6f5ea;
  --color-danger:         #EA4335;
  --color-danger-light:   #fde8e6;
  --color-warning:        #F59E0B;
  --color-warning-light:  #fffbeb;
  --color-purple:         #8B5CF6;
  --color-purple-light:   #f3f0ff;
  --color-teal:           #0D9488;
  --color-teal-light:     #f0fdfa;
  --color-bg:             #F5F7FA;
  --color-card:           #FFFFFF;
  --color-text:           #1a1a2e;
  --color-text-secondary: #6b7280;
  --color-border:         #e5e7eb;
  --color-grey-100:       #f3f4f6;
  --color-grey-200:       #e5e7eb;
  --color-grey-300:       #d1d5db;
  --color-grey-500:       #6b7280;
  --color-grey-700:       #374151;
  --radius-card:          12px;
  --radius-btn:           8px;
  --radius-full:          9999px;
  --shadow-sm:            0 1px 3px rgba(0,0,0,.08);
  --shadow-md:            0 4px 12px rgba(0,0,0,.1);
  --shadow-lg:            0 8px 24px rgba(0,0,0,.12);
  --font:                 system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --touch-min:            48px;
  --touch-rec:            56px;
  --transition:           .2s cubic-bezier(.4,0,.2,1);
  --nav-height:           56px;
  --switcher-height:      44px;
}

html { font-size: 16px; }
body {
  font-family: var(--font); background: var(--color-bg);
  color: var(--color-text); -webkit-font-smoothing: antialiased;
  overflow: hidden; height: 100vh;
}

/* ---- Role / Device Switcher ---- */
.role-switcher {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--switcher-height); background: #1a1a2e; color: #fff; font-size: 13px;
  padding: 0 12px; flex-wrap: wrap;
}
.role-switcher__label { opacity: .6; font-size: 12px; }
.role-switcher__roles { display: flex; gap: 4px; }
.role-switcher__sep { width: 1px; height: 24px; background: rgba(255,255,255,.2); margin: 0 4px; }
.role-switcher__devices { display: flex; gap: 4px; }
.role-switcher__btn {
  border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff;
  padding: 3px 12px; border-radius: var(--radius-full); font-size: 12px;
  cursor: pointer; transition: var(--transition);
}
.role-switcher__btn:hover { background: rgba(255,255,255,.12); }
.role-switcher__btn--active { background: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }
.device-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 14px;
  color: #fff; transition: var(--transition);
}
.device-btn:hover { background: rgba(255,255,255,.1); }
.device-btn--active { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); }

/* ---- App Shell ---- */
.app-shell {
  position: fixed; top: var(--switcher-height); left: 0; right: 0; bottom: 0;
  overflow: hidden; background: var(--color-bg);
}
.app-shell--phone  { max-width: 390px; left: 50%; transform: translateX(-50%); border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.app-shell--tablet { max-width: 780px; left: 50%; transform: translateX(-50%); }
.app-shell--desktop { /* full viewport width — no constraint */ }

/* ---- Screen System ---- */
.screen {
  position: absolute; top: 0; left: 0; right: 0; bottom: var(--nav-height);
  display: flex; flex-direction: column; background: var(--color-bg);
  opacity: 0; transform: translateX(20px); pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.screen[data-no-nav] { bottom: 0; }
.screen--active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.screen-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 16px; }
.screen-footer { flex-shrink: 0; padding: 12px 16px; background: var(--color-card); border-top: 1px solid var(--color-border); }

/* ---- Screen Header ---- */
.screen-header {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 56px; min-height: 56px; flex-shrink: 0;
  background: var(--color-primary); color: #fff;
}
.screen-header--light { background: var(--color-card); color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.screen-header__back {
  background: none; border: none; color: inherit; font-size: 22px; cursor: pointer;
  min-width: var(--touch-min); min-height: var(--touch-min);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 4px;
}
.screen-header__left { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.screen-header__center { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.screen-header__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.screen-header__group { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-header__greeting { font-size: 20px; font-weight: 700; }
.screen-header__user { font-size: 12px; opacity: .85; }
.screen-header__clock { font-size: 12px; opacity: .7; }
.screen-header__date { font-size: 13px; opacity: .9; font-weight: 600; }
.screen-header__count { font-size: 14px; font-weight: 700; opacity: .9; }
.date-nav-btn { background: none; border: none; color: inherit; font-size: 20px; cursor: pointer; padding: 4px 8px; min-width: 36px; min-height: 36px; opacity: .8; }
.date-nav-btn:hover { opacity: 1; }

/* ---- Global Navs ---- */
.global-nav {
  position: absolute; bottom: 0; left: 0; right: 0; height: var(--nav-height);
  display: flex; align-items: stretch; background: var(--color-card);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0); z-index: 50;
}
.bottom-bar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; background: none; border: none; cursor: pointer;
  color: var(--color-text-secondary); min-height: var(--touch-min); transition: var(--transition);
}
.bottom-bar__item--active { color: var(--color-primary); font-weight: 600; }
.bottom-bar__icon { font-size: 20px; line-height: 1; }
.bottom-bar__label { font-size: 10px; }

/* ---- PIN Switch ---- */
.pin-switch {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 24px; overflow-y: auto;
}
.pin-switch__title { font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.pin-switch__subtitle { color: var(--color-text-secondary); margin-bottom: 28px; font-size: 14px; }
.pin-switch__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 440px; width: 100%; }
.pin-switch__timeout { margin-top: 24px; font-size: 12px; color: var(--color-text-secondary); }

.profile-card {
  display: flex; flex-direction: column; align-items: center; padding: 20px 12px;
  background: var(--color-card); border: 2px solid var(--color-border);
  border-radius: var(--radius-card); cursor: pointer; transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.profile-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.profile-card__avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.profile-card__name { font-size: 15px; font-weight: 700; }
.profile-card__role { font-size: 12px; color: var(--color-text-secondary); }
.profile-card__group { font-size: 11px; color: var(--color-primary); font-weight: 600; margin-top: 2px; }

/* PIN Overlay */
.pin-overlay {
  position: absolute; inset: 0; z-index: 100; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center; animation: fadeIn .2s;
}
.pin-overlay__card { background: var(--color-card); border-radius: 20px; padding: 28px; width: 320px; text-align: center; box-shadow: var(--shadow-lg); }
.pin-overlay__avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.pin-overlay__name { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.pin-overlay__error { font-size: 12px; color: var(--color-danger); margin-bottom: 8px; padding: 6px 12px; background: var(--color-danger-light); border-radius: var(--radius-btn); }
.pin-overlay__lockout { font-size: 13px; color: var(--color-danger); font-weight: 600; margin-bottom: 8px; padding: 8px 12px; background: var(--color-danger-light); border-radius: var(--radius-btn); }
.pin-overlay__dots { display: flex; gap: 12px; justify-content: center; margin: 12px 0 20px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-grey-300); transition: var(--transition); }
.pin-dot--filled { background: var(--color-primary); border-color: var(--color-primary); }
.pin-dot--error { background: var(--color-danger); border-color: var(--color-danger); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.pin-key { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--color-grey-200); background: var(--color-grey-100); font-size: 22px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 0 auto; transition: var(--transition); }
.pin-key:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.pin-key:active { background: var(--color-primary); color: #fff; transform: scale(.94); }
.pin-key--empty { visibility: hidden; }
.pin-key--icon { font-size: 18px; }
.pin-overlay__hint { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 6px; }
.pin-overlay__cancel { background: none; border: none; color: var(--color-text-secondary); font-size: 14px; cursor: pointer; padding: 8px 16px; }
.pin-overlay__cancel:hover { color: var(--color-danger); }

/* ---- Dashboard ---- */
.kpi-row { display: flex; gap: 10px; margin-bottom: 14px; }
.kpi-row--large .kpi-card__value { font-size: 24px; }
.kpi-card { flex: 1; background: var(--color-card); border-radius: var(--radius-card); padding: 14px 10px; text-align: center; box-shadow: var(--shadow-sm); border-left: 4px solid transparent; }
.kpi-card--present { border-left-color: var(--color-success); }
.kpi-card--sick { border-left-color: var(--color-danger); }
.kpi-card--vacation { border-left-color: var(--color-primary); }
.kpi-card--pickup { border-left-color: var(--color-secondary); }
.kpi-card--warn { border-left-color: var(--color-warning); }
.kpi-card__value { font-size: 24px; font-weight: 800; }
.kpi-card__label { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }

.alert-list { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.alert-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-card); cursor: pointer; transition: var(--transition); }
.alert-card:hover { transform: translateX(2px); }
.alert-card--danger { background: var(--color-danger-light); border-left: 4px solid var(--color-danger); }
.alert-card--warning { background: var(--color-warning-light); border-left: 4px solid var(--color-warning); }
.alert-card--info { background: var(--color-primary-light); border-left: 4px solid var(--color-primary); }
.alert-card__icon { font-size: 22px; flex-shrink: 0; }
.alert-card__body { flex: 1; min-width: 0; }
.alert-card__title { font-size: 14px; font-weight: 700; }
.alert-card__sub { font-size: 12px; color: var(--color-text-secondary); }
.alert-card__arrow { font-size: 20px; color: var(--color-text-secondary); }

.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100px; background: var(--color-card); border: 2px solid var(--color-border); border-radius: var(--radius-card); cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; }
.tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tile:active { transform: scale(.96); }
.tile--green { border-color: var(--color-success); }
.tile--green:hover { background: var(--color-success-light); }
.tile--blue { border-color: var(--color-primary); }
.tile--blue:hover { background: var(--color-primary-light); }
.tile--red { border-color: var(--color-danger); }
.tile--red:hover { background: var(--color-danger-light); }
.tile--purple { border-color: var(--color-purple); }
.tile--purple:hover { background: var(--color-purple-light); }
.tile--teal { border-color: var(--color-teal); }
.tile--teal:hover { background: var(--color-teal-light); }
.tile--amber { border-color: var(--color-secondary); }
.tile--orange { border-color: #dc2626; background: #fee2e2; }
.tile--orange:hover { background: #fecaca; }

/* ---- C2 Notfallpräsenz ---- */
.notfall-banner { display: flex; align-items: center; gap: 10px; background: #dc2626; color: #fff; padding: 10px 16px; }
.notfall-banner__icon { font-size: 22px; flex-shrink: 0; }
.notfall-banner__title { font-size: 14px; font-weight: 700; }
.notfall-banner__sub { font-size: 12px; opacity: .85; }
.notfall-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); transition: var(--transition); }
.notfall-row--ok { opacity: .5; }
.notfall-row--ok .notfall-row__avatar { background: var(--color-success) !important; }
.notfall-row__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.notfall-row__info { flex: 1; }
.notfall-row__name { font-size: 14px; font-weight: 600; }
.notfall-row__group { font-size: 12px; color: var(--color-text-secondary); }
.notfall-row__alert { font-size: 16px; }
.notfall-row__btn { padding: 6px 14px; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; font-size: 13px; font-weight: 600; transition: var(--transition); }
.notfall-row__btn:disabled { background: var(--color-success); cursor: default; }
.tile--amber:hover { background: var(--color-secondary-light); }
.tile__icon { font-size: 28px; margin-bottom: 4px; }
.tile__label { font-size: 12px; font-weight: 600; text-align: center; }
.tile__badge { position: absolute; top: 6px; right: 6px; font-size: 11px; padding: 2px 6px; border-radius: var(--radius-full); font-weight: 700; }
.tile__badge--warn { background: var(--color-warning); color: #fff; }
.tile__badge--danger { background: var(--color-danger); color: #fff; animation: pulse 1.5s infinite; }
.tile__badge--info { background: var(--color-primary); color: #fff; }

/* ---- Filter pills ---- */
.filter-pills { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; flex-shrink: 0; background: var(--color-card); border-bottom: 1px solid var(--color-border); }
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pill { padding: 6px 14px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border); background: transparent; font-size: 13px; cursor: pointer; white-space: nowrap; transition: var(--transition); min-height: 36px; }
.filter-pill:hover { border-color: var(--color-primary); }
.filter-pill--active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }

/* ---- Attendance summary ---- */
.attendance-summary { display: flex; gap: 10px; padding: 8px 16px; background: var(--color-grey-100); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; flex-shrink: 0; }
.att-sum { font-size: 12px; font-weight: 600; }
.att-sum--present { color: var(--color-success); }
.att-sum--sick { color: var(--color-danger); }
.att-sum--vacation { color: var(--color-primary); }
.att-sum--open { color: var(--color-grey-500); }

/* ---- Attendance rows ---- */
.attendance-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color-card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition); min-height: var(--touch-rec); margin-bottom: 6px; user-select: none; }
.attendance-row:hover { box-shadow: var(--shadow-md); }
.attendance-row:active { transform: scale(.98); }
.attendance-row__avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.attendance-row__name { font-size: 14px; font-weight: 600; flex: 1; }
.attendance-row__time { font-size: 11px; color: var(--color-text-secondary); }
.attendance-row__status { font-size: 12px; padding: 4px 10px; border-radius: var(--radius-full); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.att-status--present { background: var(--color-success-light); color: var(--color-success); }
.att-status--absent { background: var(--color-grey-100); color: var(--color-grey-500); }
.att-status--sick { background: var(--color-danger-light); color: var(--color-danger); }
.att-status--vacation { background: var(--color-primary-light); color: var(--color-primary); }
.att-status--pickedup { background: var(--color-secondary-light); color: #b45309; }

/* ---- Tab Bar ---- */
.tab-bar { display: flex; background: var(--color-card); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.tab-bar__btn { flex: 1; padding: 10px; border: none; background: none; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--color-text-secondary); border-bottom: 2px solid transparent; transition: var(--transition); min-height: 40px; }
.tab-bar__btn--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ---- Mode Toggle ---- */
.mode-toggle { display: flex; border: 1.5px solid rgba(255,255,255,.4); border-radius: var(--radius-full); overflow: hidden; }
.mode-toggle__btn { padding: 4px 12px; background: transparent; border: none; color: rgba(255,255,255,.8); font-size: 12px; cursor: pointer; transition: var(--transition); }
.mode-toggle__btn--active { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; }

/* ---- Pflege ---- */
.pflege-multi-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 12px; font-size: 13px; color: var(--color-text-secondary); }
.pflege-child-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.pflege-child-card { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; background: var(--color-card); border: 2px solid var(--color-border); border-radius: var(--radius-card); cursor: pointer; transition: var(--transition); position: relative; min-height: var(--touch-rec); }
.pflege-child-card:hover { border-color: var(--color-primary); }
.pflege-child-card--selected { border-color: var(--color-primary); background: var(--color-primary-light); }
.pflege-child-card--sleeping { border-color: var(--color-purple); background: var(--color-purple-light); }
.pflege-child-card__check { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-grey-300); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.pflege-child-card--selected .pflege-child-card__check { background: var(--color-primary); border-color: var(--color-primary); }
.pflege-child-card__sleep-badge { position: absolute; top: 4px; left: 4px; font-size: 12px; }
.pflege-child-card__avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.pflege-child-card__name { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }
.pflege-selected-info { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 12px; padding: 8px 12px; background: var(--color-primary-light); border-radius: var(--radius-btn); }
.pflege-event-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.pflege-event-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 6px; background: var(--color-card); border: 2px solid var(--color-border); border-radius: var(--radius-card); cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-sm); min-height: 80px; }
.pflege-event-btn:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pflege-event-btn:active { transform: scale(.94); background: var(--color-primary-light); }
.pflege-event-btn--sleep { border-color: var(--color-purple); }
.pflege-event-btn--sleep:hover { background: var(--color-purple-light); }
.pflege-event-btn__icon { font-size: 26px; margin-bottom: 4px; }
.pflege-event-btn__label { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }
.pflege-event-btn__sub { font-size: 10px; color: var(--color-text-secondary); margin-top: 2px; }
.pflege-details { margin-top: 8px; background: var(--color-card); border-radius: var(--radius-card); border: 1px solid var(--color-border); overflow: hidden; }
.pflege-details summary { padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--color-text-secondary); }
.pflege-details__body { padding: 0 14px 14px; }

/* ---- Timeline ---- */
.timeline { padding: 4px 0; }
.timeline-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-left: 2px solid var(--color-grey-200); margin-left: 24px; padding-left: 14px; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-grey-300); border: 2px solid var(--color-card); }
.timeline-item--present::before { background: var(--color-success); }
.timeline-item__time { font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; margin-top: 2px; min-width: 36px; }
.timeline-item__icon { font-size: 16px; flex-shrink: 0; }
.timeline-item__label { font-size: 13px; line-height: 1.4; }

/* ---- Medication screen ---- */
.section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-secondary); margin-bottom: 8px; margin-top: 4px; }
.med-row { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--color-card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); margin-bottom: 8px; }
.med-row__avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.med-row__body { flex: 1; min-width: 0; }
.med-row__name { font-size: 14px; font-weight: 700; }
.med-row__detail { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; }
.med-row__time { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; }
.med-status { font-size: 11px; padding: 3px 9px; border-radius: var(--radius-full); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.med-status--pending { background: var(--color-warning-light); color: var(--color-warning); border: 1px solid var(--color-warning); }
.med-status--done { background: var(--color-success-light); color: var(--color-success); }
.med-status--missed { background: var(--color-danger-light); color: var(--color-danger); }
.med-administer-btn { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-btn); padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 40px; flex-shrink: 0; }
.med-administer-btn:hover { background: var(--color-primary-dark); }

/* ---- Sleep Checks ---- */
.sleep-card { background: var(--color-card); border-radius: var(--radius-card); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--color-purple); }
.sleep-card--overdue { border-left-color: var(--color-danger); animation: pulse-border 1.2s infinite; }
.sleep-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sleep-card__avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.sleep-card__name { font-size: 15px; font-weight: 700; }
.sleep-card__since { font-size: 12px; color: var(--color-text-secondary); }
.sleep-card__body { display: flex; align-items: center; gap: 14px; }
.sleep-ring-wrap { flex-shrink: 0; position: relative; width: 72px; height: 72px; }
.sleep-ring { transform: rotate(-90deg); }
.sleep-ring__bg { fill: none; stroke: var(--color-grey-200); stroke-width: 5; }
.sleep-ring__track { fill: none; stroke: var(--color-purple); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .5s linear; }
.sleep-ring--overdue .sleep-ring__track { stroke: var(--color-danger); }
.sleep-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sleep-ring-time { font-size: 13px; font-weight: 700; }
.sleep-ring-sub { font-size: 9px; color: var(--color-text-secondary); }
.sleep-card__info { flex: 1; }
.sleep-card__overdue-text { font-size: 13px; font-weight: 700; color: var(--color-danger); margin-bottom: 6px; }
.sleep-card__last-check { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 8px; }
.sleep-check-btn { padding: 8px 16px; border-radius: var(--radius-btn); border: none; font-size: 13px; font-weight: 700; cursor: pointer; min-height: var(--touch-min); transition: var(--transition); }
.sleep-check-btn--normal { background: var(--color-primary); color: #fff; }
.sleep-check-btn--urgent { background: var(--color-danger); color: #fff; animation: pulse .8s infinite; }
.sleep-check-btn:hover { opacity: .9; transform: scale(1.02); }
.sleep-log-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color-card); border-radius: var(--radius-card); margin-bottom: 6px; box-shadow: var(--shadow-sm); }
.sleep-log-item__time { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.sleep-log-item__child { font-size: 13px; font-weight: 600; }
.sleep-log-item__status { font-size: 12px; padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; }
.log-ok { background: var(--color-success-light); color: var(--color-success); }
.log-awake { background: var(--color-warning-light); color: var(--color-warning); }
.log-alert { background: var(--color-danger-light); color: var(--color-danger); }

/* ---- Team Chat ---- */
.chat-layout { flex: 1; display: flex; overflow: hidden; }
.chat-channels { width: 200px; flex-shrink: 0; border-right: 1px solid var(--color-border); background: var(--color-grey-100); overflow-y: auto; }
.chat-channels--threads { width: 240px; }
.chat-channel-item { display: flex; align-items: center; gap: 8px; padding: 12px; cursor: pointer; transition: var(--transition); border-bottom: 1px solid var(--color-border); }
.chat-channel-item:hover { background: var(--color-grey-200); }
.chat-channel-item--active { background: var(--color-primary-light); border-right: 3px solid var(--color-primary); }
.chat-channel-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: var(--color-grey-200); }
.chat-channel-info { flex: 1; min-width: 0; }
.chat-channel-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-channel-preview { font-size: 11px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-channel-badge { background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700; border-radius: var(--radius-full); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-messages-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-messages-header { padding: 10px 14px; font-size: 14px; font-weight: 700; background: var(--color-card); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.chat-messages-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 85%; }
.chat-msg--own { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg__avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.chat-msg__bubble { padding: 8px 12px; border-radius: 16px; font-size: 13px; line-height: 1.4; box-shadow: var(--shadow-sm); }
.chat-msg__bubble--other { background: var(--color-card); border-bottom-left-radius: 4px; }
.chat-msg__bubble--own { background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg__bubble--handover { background: #fef9c3; border: 1px solid #fbbf24; border-radius: var(--radius-card); padding: 10px 14px; border-bottom-left-radius: 4px; }
.chat-msg__bubble--handover-icon { font-size: 14px; margin-right: 4px; }
.chat-msg__time { font-size: 10px; color: var(--color-text-secondary); margin-bottom: 2px; white-space: nowrap; }
.chat-msg__sender { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 3px; }
.chat-input-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--color-card); border-top: 1px solid var(--color-border); flex-shrink: 0; }
.chat-attach-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--color-text-secondary); padding: 4px; min-width: var(--touch-min); min-height: var(--touch-min); display: flex; align-items: center; justify-content: center; }
.chat-input { flex: 1; padding: 8px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); font-size: 14px; background: var(--color-grey-100); transition: var(--transition); }
.chat-input:focus { outline: none; border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px var(--color-primary-light); }
.chat-send-btn { background: var(--color-primary); color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition); }
.chat-send-btn:hover { background: var(--color-primary-dark); }

/* ---- Message threads ---- */
.msg-thread { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: var(--transition); }
.msg-thread:hover { background: var(--color-grey-100); }
.msg-thread__avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; background: var(--color-grey-200); }
.msg-thread__body { flex: 1; min-width: 0; }
.msg-thread__name { font-size: 14px; font-weight: 700; }
.msg-thread__preview { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-thread__time { font-size: 11px; color: var(--color-text-secondary); flex-shrink: 0; }
.translate-btn { background: none; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--color-text); transition: var(--transition); }
.translate-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.translate-btn--active { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }

/* ---- Tagesbericht Editor ---- */
.child-selector { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; background: var(--color-card); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.child-selector::-webkit-scrollbar { display: none; }
.child-sel-pill { padding: 6px 14px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border); background: transparent; font-size: 13px; cursor: pointer; white-space: nowrap; transition: var(--transition); }
.child-sel-pill--active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
.tb-section { background: var(--color-card); border-radius: var(--radius-card); padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.tb-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tb-section-header span { font-size: 14px; font-weight: 700; }
.tb-edit-btn { background: none; border: none; font-size: 14px; color: var(--color-primary); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-btn); }
.tb-edit-btn:hover { background: var(--color-primary-light); }
.tb-section-content { font-size: 13px; line-height: 1.5; color: var(--color-text); }
.tb-event { padding: 2px 0; color: var(--color-text-secondary); }
.tb-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.tb-photo-thumb { width: 60px; height: 60px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; }
.tb-photo-thumb--lg { width: 80px; height: 80px; font-size: 28px; border-radius: var(--radius-card); }
.tb-release-hint { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 8px; text-align: center; }
.tb-date { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }
.tb-preview-card { background: var(--color-card); border-radius: var(--radius-card); padding: 12px; margin-bottom: 12px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--color-primary); cursor: pointer; transition: var(--transition); }
.tb-preview-card:hover { box-shadow: var(--shadow-md); }
.tb-preview-card__header { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.tb-preview-card__body { font-size: 12px; color: var(--color-text-secondary); }
.tb-preview-card__footer { font-size: 11px; color: var(--color-primary); margin-top: 6px; font-weight: 600; }
.tb-summary-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 12px; }
.tb-chip { font-size: 12px; padding: 4px 10px; border-radius: var(--radius-full); font-weight: 600; }
.tb-chip--ok { background: var(--color-success-light); color: var(--color-success); }
.tb-message-card { background: var(--color-primary-light); border-radius: var(--radius-card); padding: 12px; margin-top: 4px; border-left: 4px solid var(--color-primary); }
.tb-message-card__author { font-size: 12px; font-weight: 700; color: var(--color-primary); margin-bottom: 6px; }
.tb-message-card__text { font-size: 13px; line-height: 1.5; }

/* ---- Leitung Dashboard ---- */
.group-overview-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color-card); border-radius: var(--radius-card); margin-bottom: 6px; box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition); }
.groups-grid { display: contents; } /* default: rows flow naturally */
.group-overview-row:hover { box-shadow: var(--shadow-md); }
.group-overview-row__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.group-overview-row__name { font-size: 14px; font-weight: 700; flex: 1; }
.group-overview-row__stats { font-size: 12px; color: var(--color-text-secondary); }
.group-overview-row__lead { font-size: 12px; color: var(--color-primary); font-weight: 600; }
.week-cal { display: flex; gap: 6px; margin-top: 6px; }
.week-cal__day { flex: 1; text-align: center; }
.week-cal__label { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 4px; }
.week-cal__day--today .week-cal__label { color: var(--color-primary); font-weight: 700; }
.week-cal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-grey-200); margin: 0 auto; }
.week-cal__dot--today { background: var(--color-primary); }
.week-cal__event { font-size: 10px; background: var(--color-primary-light); color: var(--color-primary); padding: 2px 4px; border-radius: 4px; }
.week-cal__event--highlight { background: var(--color-success-light); color: var(--color-success); }

/* ---- Eltern ---- */
.eltern-login { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; overflow-y: auto; }
.eltern-login__logo { text-align: center; margin-bottom: 28px; }
.logo-mark { width: 68px; height: 68px; border-radius: 18px; background: linear-gradient(135deg, var(--color-primary), #1a6d94); color: #fff; font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; box-shadow: var(--shadow-md); }
.logo-text { font-size: 24px; font-weight: 800; }
.logo-tagline { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.login-form { width: 100%; max-width: 360px; }
.login-divider { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 360px; margin: 16px 0; color: var(--color-text-secondary); font-size: 13px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.login-link { margin-top: 14px; color: var(--color-primary); font-size: 14px; text-decoration: none; }
.login-link:hover { text-decoration: underline; }
.push-demo { background: var(--color-grey-100); border-radius: var(--radius-card); padding: 10px; margin-bottom: 14px; border: 1px dashed var(--color-grey-300); }
.push-demo__notification { display: flex; align-items: center; gap: 8px; background: var(--color-card); border-radius: 10px; padding: 8px 12px; box-shadow: var(--shadow-sm); }
.push-demo__icon { font-size: 22px; }
.push-demo__body { flex: 1; }
.push-demo__title { font-size: 12px; font-weight: 700; }
.push-demo__text { font-size: 12px; color: var(--color-text-secondary); }
.push-demo__time { font-size: 10px; color: var(--color-text-secondary); }
.push-demo__hint { margin-top: 6px; font-size: 11px; color: var(--color-primary); text-align: center; font-style: italic; }
.notification-bell { background: none; border: none; font-size: 22px; cursor: pointer; position: relative; padding: 4px; min-width: var(--touch-min); min-height: var(--touch-min); display: flex; align-items: center; justify-content: center; color: var(--color-text); }
.notification-bell__badge { position: absolute; top: 4px; right: 4px; width: 17px; height: 17px; border-radius: 50%; background: var(--color-danger); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.child-card { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 10px; background: var(--color-card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition); }
.child-card:hover { box-shadow: var(--shadow-md); }
.child-card__avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.child-card__info { flex: 1; }
.child-card__name { font-size: 16px; font-weight: 700; }
.child-card__group { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; }
.child-card__status { font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 5px; font-weight: 600; }
.child-card__status--present { color: var(--color-success); }
.child-card__status--sick { color: var(--color-danger); }
.child-card__arrow { font-size: 20px; color: var(--color-text-secondary); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-dot--green { background: var(--color-success); }
.status-dot--red { background: var(--color-danger); }
.krankmeldung-btn { margin: 12px 0; }
.quick-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.quick-action { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); cursor: pointer; transition: var(--transition); position: relative; min-height: var(--touch-rec); }
.quick-action:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.quick-action__icon { font-size: 20px; }
.quick-action__label { font-size: 11px; font-weight: 600; text-align: center; }
.quick-action__badge { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-danger); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.form-row { display: flex; gap: 10px; }
.form-group--half { flex: 1; }

/* ---- Radio Options ---- */
.radio-group { display: flex; flex-direction: column; gap: 6px; }
.radio-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--color-card); border: 2px solid var(--color-border); border-radius: var(--radius-card); cursor: pointer; transition: var(--transition); font-size: 14px; font-weight: 600; min-height: var(--touch-rec); }
.radio-option input { display: none; }
.radio-option__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-grey-300); flex-shrink: 0; transition: var(--transition); }
.radio-option--selected { border-color: var(--color-primary); background: var(--color-primary-light); }
.radio-option--selected .radio-option__dot { border-color: var(--color-primary); background: var(--color-primary); box-shadow: inset 0 0 0 3px #fff; }

/* ---- Shared Form Elements ---- */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 5px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius-btn); font-size: 14px; font-family: var(--font); background: var(--color-card); color: var(--color-text); transition: var(--transition); min-height: var(--touch-min); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--radius-btn); font-size: 14px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: var(--transition); min-height: var(--touch-min); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--primary:active { transform: scale(.97); }
.btn--primary:disabled { opacity: .4; cursor: not-allowed; }
.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover { background: #c5362a; }
.btn--success { background: var(--color-success); color: #fff; }
.btn--outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn--outline:hover { background: var(--color-primary-light); }
.btn--large { font-size: 16px; padding: 13px 24px; min-height: var(--touch-rec); }
.btn--small { font-size: 12px; padding: 6px 14px; min-height: 36px; }
.btn--full { width: 100%; }
.btn--social { width: 100%; max-width: 360px; padding: 10px 20px; border-radius: var(--radius-btn); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--touch-min); margin-bottom: 8px; }
.btn--google { background: #fff; color: var(--color-text); border: 1.5px solid var(--color-border); }
.btn--google:hover { background: var(--color-grey-100); }
.btn--apple { background: #000; color: #fff; border: 1.5px solid #000; }
.btn--apple:hover { background: #222; }

/* ---- Global Overlays ---- */
.overlay-backdrop { position: absolute; inset: 0; z-index: 200; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; animation: fadeIn .2s; }
.overlay-backdrop--centered { align-items: center; justify-content: center; padding: 16px; }
.action-sheet { background: var(--color-card); border-radius: 20px 20px 0 0; width: 100%; max-height: 70vh; overflow-y: auto; padding: 16px 16px 4px; }
.action-sheet__cancel { width: 100%; padding: 14px; background: var(--color-grey-100); border: none; border-radius: 14px; font-size: 15px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; margin-top: 8px; margin-bottom: 8px; min-height: var(--touch-rec); }
.action-sheet__cancel:hover { background: var(--color-grey-200); }
.action-sheet-item { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-card); cursor: pointer; transition: var(--transition); min-height: var(--touch-rec); }
.action-sheet-item:hover { background: var(--color-grey-100); }
.action-sheet-item__icon { font-size: 22px; width: 36px; text-align: center; }
.action-sheet-item__label { font-size: 15px; font-weight: 600; }
.action-sheet-item__sub { font-size: 12px; color: var(--color-text-secondary); }
.action-sheet-item--danger { color: var(--color-danger); }
.action-sheet-title { font-size: 13px; font-weight: 700; text-align: center; color: var(--color-text-secondary); padding: 4px 0 12px; border-bottom: 1px solid var(--color-border); margin-bottom: 8px; }
.modal-card { background: var(--color-card); border-radius: 20px; width: 100%; max-width: 360px; max-height: 80vh; overflow-y: auto; padding: 20px; box-shadow: var(--shadow-lg); animation: popIn .25s; }
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }
.mehr-menu-title { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); text-align: center; padding: 4px 0 12px; border-bottom: 1px solid var(--color-border); margin-bottom: 8px; }
.mehr-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-bottom: 8px; }
.mehr-menu-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: var(--radius-card); cursor: pointer; transition: var(--transition); min-height: 72px; }
.mehr-menu-item:hover { background: var(--color-grey-100); }
.mehr-menu-item__icon { font-size: 24px; }
.mehr-menu-item__label { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.3; }
.mehr-menu-item--wf .mehr-menu-item__label::after { content: ' ›'; color: var(--color-text-secondary); }

/* ---- Success Overlay ---- */
.success-overlay { position: absolute; inset: 0; z-index: 150; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; animation: fadeIn .2s; }
.success-card { background: var(--color-card); border-radius: 20px; padding: 36px; text-align: center; box-shadow: var(--shadow-lg); max-width: 320px; width: 90%; }
.success-card__check { width: 68px; height: 68px; border-radius: 50%; background: var(--color-success); color: #fff; font-size: 32px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; animation: popIn .4s cubic-bezier(.175,.885,.32,1.275); }
.success-card__check--green { background: var(--color-success); }
.success-card__check--primary { background: var(--color-primary); }
.success-card__text { font-size: 15px; line-height: 1.5; font-weight: 600; }
.success-card__detail { font-size: 13px; color: var(--color-text-secondary); margin-top: 6px; line-height: 1.5; }
.success-card__meal-info { font-size: 12px; color: var(--color-success); margin-top: 10px; padding: 8px; background: var(--color-success-light); border-radius: var(--radius-btn); }

/* ---- Wireframe styles ---- */
.wf-badge { font-size: 11px; background: var(--color-grey-200); color: var(--color-grey-500); padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; }
.wf-notice { background: #fffbeb; border: 1px solid #fbbf24; border-radius: var(--radius-btn); padding: 8px 12px; font-size: 12px; color: #92400e; margin-bottom: 14px; font-weight: 600; }
.wf-notice--info { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-dark); }
.wf-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); margin-bottom: 8px; margin-top: 4px; }
.wf-block { background: var(--color-grey-200); border-radius: 8px; height: 80px; margin-bottom: 8px; }
.wf-block--sm { height: 50px; }
.wf-block--activity { background: linear-gradient(135deg, var(--color-primary-light), var(--color-grey-200)); height: 56px; }
.wf-row-ph { height: 52px; background: var(--color-card); border-radius: var(--radius-card); margin-bottom: 6px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.wf-row-ph::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%); animation: shimmer 1.5s infinite; }
.wf-row-ph--child { height: 64px; }
.wf-row-ph--person { height: 56px; }
.wf-form-group { height: 64px; background: var(--color-grey-100); border-radius: var(--radius-btn); margin-bottom: 10px; border: 1.5px solid var(--color-border); }
.wf-search-bar { height: 44px; background: var(--color-grey-100); border-radius: var(--radius-full); margin: 0 16px 10px; border: 1.5px solid var(--color-border); display: flex; align-items: center; padding: 0 14px; font-size: 13px; color: var(--color-text-secondary); }
.wf-child-filter { padding: 8px 0 12px; }
.wf-chip { display: inline-block; padding: 6px 14px; border-radius: var(--radius-full); border: 1.5px solid var(--color-border); font-size: 13px; }
.wf-chip--active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.wf-timeline-entry { height: 56px; border-left: 2px solid var(--color-grey-200); margin-left: 24px; padding-left: 14px; margin-bottom: 8px; position: relative; }
.wf-timeline-entry::before { content: ''; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-grey-300); border: 2px solid var(--color-card); }
.wf-timeline-entry--photo { height: 80px; background: var(--color-grey-100); border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.wf-calendar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wf-cal-day { text-align: center; }
.wf-cal-day-header { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 4px; font-weight: 600; }
.wf-progress-bar { margin-bottom: 14px; }
.wf-progress-bar__label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.wf-progress-bar__track { height: 8px; background: var(--color-grey-200); border-radius: var(--radius-full); overflow: hidden; }
.wf-progress-bar__fill { height: 100%; background: var(--color-success); border-radius: var(--radius-full); }
.wf-emoji-scale { display: flex; gap: 12px; font-size: 24px; padding: 8px 0; }
.wf-emoji-scale--active { filter: none; }
.wf-album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wf-album-card { background: var(--color-card); border-radius: var(--radius-card); padding: 12px; text-align: center; box-shadow: var(--shadow-sm); cursor: pointer; }
.wf-album-card--new { border: 2px dashed var(--color-border); background: transparent; }
.wf-album-thumb { font-size: 28px; margin-bottom: 4px; }
.wf-album-label { font-size: 12px; font-weight: 600; }
.wf-album-sub { font-size: 10px; color: var(--color-text-secondary); }
.wf-group-card { background: var(--color-card); border-radius: var(--radius-card); margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.wf-group-card__header { padding: 8px 12px; color: #fff; font-size: 13px; font-weight: 700; }
.wf-group-card__body { padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; color: var(--color-text-secondary); }
.wf-dienstplan-grid { display: grid; grid-template-columns: 70px repeat(5, 1fr); gap: 4px; }
.wf-dp-header { font-size: 11px; font-weight: 700; text-align: center; color: var(--color-text-secondary); padding: 4px 0; }
.wf-dp-name { font-size: 12px; font-weight: 600; display: flex; align-items: center; }
.wf-dp-cell { height: 36px; border-radius: 6px; }
.wf-dp-cell--early { background: var(--color-primary-light); }
.wf-dp-cell--late { background: var(--color-secondary-light); }
.wf-dp-cell--off { background: var(--color-grey-100); }
.wf-settings-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.wf-settings-row span:last-child { font-weight: 600; color: var(--color-primary); }
.wf-folder { padding: 12px 14px; background: var(--color-card); border-radius: var(--radius-card); margin-bottom: 6px; font-size: 14px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 10px; }
.wf-list-item { padding: 12px 14px; background: var(--color-card); border-radius: var(--radius-card); margin-bottom: 6px; font-size: 14px; box-shadow: var(--shadow-sm); cursor: pointer; }
.wf-doc-row { padding: 12px 14px; background: var(--color-card); border-radius: var(--radius-card); margin-bottom: 6px; font-size: 13px; box-shadow: var(--shadow-sm); }
.wf-doc-row--pending { border-left: 4px solid var(--color-warning); font-weight: 600; }
.wf-child-row { padding: 10px 12px; background: var(--color-card); border-radius: var(--radius-card); margin-bottom: 6px; font-size: 13px; box-shadow: var(--shadow-sm); }
.wf-child-row--allergy { border-left: 4px solid var(--color-danger); font-weight: 600; color: var(--color-danger); }
.wf-briefing-header { background: var(--color-primary-light); border-radius: var(--radius-card); padding: 12px; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.wf-event-card { background: var(--color-card); border-radius: var(--radius-card); padding: 14px; box-shadow: var(--shadow-sm); }
.wf-event-card__title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.wf-event-card__detail { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
.wf-feed-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.wf-feed-item__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; background: var(--color-grey-200); }
.wf-feed-item__body { flex: 1; }
.wf-feed-item__author { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.wf-feed-item__actions { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; }
.wf-month-cal { }
.wf-month-header { font-size: 15px; font-weight: 700; margin-bottom: 8px; text-align: center; }
.wf-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wf-month-cell { height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 13px; background: var(--color-grey-100); }
.wf-month-cell--today { background: var(--color-primary); color: #fff; font-weight: 700; }
.wf-month-cell--event { background: var(--color-success-light); color: var(--color-success); font-size: 11px; font-weight: 600; }
.wf-week-menu { display: flex; flex-direction: column; gap: 8px; }
.wf-menu-day { background: var(--color-card); border-radius: var(--radius-card); padding: 10px 12px; box-shadow: var(--shadow-sm); }
.wf-menu-day--today { border-left: 4px solid var(--color-primary); }
.wf-menu-day__label { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 4px; }
.wf-menu-day__meal { font-size: 13px; font-weight: 600; }
.wf-allergy-tag { font-size: 11px; margin-top: 3px; }
.wf-allergy-tag--ok { color: var(--color-success); }
.wf-child-hero { margin-bottom: 16px; }
.wf-briefing-header small { font-weight: 400; font-size: 12px; color: var(--color-text-secondary); display: block; margin-top: 4px; }

/* ================================================================
   DEVICE LAYOUT OVERRIDES
   Controlled by .app-shell--{phone|tablet|desktop} class.
   Pure CSS — no JS re-render needed.
   ================================================================ */

/* ---- Compact switcher bar (activated via JS class when phone mode selected) ---- */
.role-switcher--compact { gap: 4px; padding: 0 6px; }
.role-switcher--compact .role-switcher__label { display: none; }
.role-switcher--compact .role-switcher__btn { padding: 2px 7px; font-size: 11px; }
.role-switcher--compact .role-switcher__sep { margin: 0 1px; }
.role-switcher--compact .device-btn { padding: 2px 4px; font-size: 12px; }

/* On actual devices: fill full viewport, drop simulation frame */
@media (max-width: 540px) {
  .app-shell--phone {
    max-width: 100%;
    left: 0;
    transform: none;
    border-left: none;
    border-right: none;
  }
}
@media (min-width: 541px) and (max-width: 1024px) {
  .app-shell--tablet {
    max-width: 100%;
    left: 0;
    transform: none;
  }
}
@media (max-width: 540px) {
  .role-switcher { gap: 4px; padding: 0 6px; }
  .role-switcher__label { display: none; }
  .role-switcher__btn { padding: 2px 7px; font-size: 11px; }
  .role-switcher__sep { margin: 0 1px; }
  .device-btn { padding: 2px 5px; }
}

/* ---- Phone Mode (390px) ---- */
.app-shell--phone .screen-header { padding: 0 8px; }
.app-shell--phone .screen-header__group { font-size: 15px; }
.app-shell--phone .screen-body { padding: 10px 12px 12px; }

/* Attendance: prevent name wrap, keep status badge visible */
.app-shell--phone .attendance-row { padding: 8px 10px; gap: 8px; }
.app-shell--phone .attendance-row__name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 115px; font-size: 13px;
}
.app-shell--phone .attendance-row__time { font-size: 10px; white-space: nowrap; flex-shrink: 0; }
.app-shell--phone .attendance-row__status { font-size: 11px; padding: 3px 7px; flex-shrink: 0; }
.app-shell--phone .attendance-row__name { max-width: 95px; }

/* Pflege: 3 columns (auto-fill gives 1 col at 390px) */
.app-shell--phone .pflege-child-grid { grid-template-columns: repeat(3, 1fr); }

/* Tiles: 3 columns so all 6 fit in 2 rows without orphan */
.app-shell--phone .tile-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.app-shell--phone .tile { height: 80px; padding: 6px 4px; font-size: 10px; word-break: break-word; }

/* KPI: 2-column grid */
.app-shell--phone .kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.app-shell--phone .kpi-card { min-width: 0; }
.app-shell--phone .kpi-card__value { font-size: 22px; }

/* Krankmeldung date range: stack vertically */
.app-shell--phone .form-row { flex-direction: column; gap: 6px; }
.app-shell--phone .form-group--half { flex: none; width: 100%; }

/* ---- Tablet (780px centered) ---- */
.app-shell--tablet .screen-body { padding: 14px 20px 20px; }
.app-shell--tablet .tile-grid   { grid-template-columns: repeat(4, 1fr); }
.app-shell--tablet .pin-switch__grid { grid-template-columns: repeat(4, 1fr); max-width: 640px; }
.app-shell--tablet .kpi-row     { gap: 12px; }
.app-shell--tablet .kpi-card__value { font-size: 26px; }
.app-shell--tablet .bottom-bar__icon  { font-size: 22px; }
.app-shell--tablet .bottom-bar__label { font-size: 11px; }
.app-shell--tablet .attendance-list  { font-size: 15px; }
.app-shell--tablet .child-card      { padding: 14px; }
.app-shell--tablet .pflege-child-grid { grid-template-columns: repeat(5, 1fr); }
.app-shell--tablet .sleep-card-grid  { grid-template-columns: repeat(3, 1fr); }

/* ---- Attendance master-detail layout (desktop activates two-column) ---- */
.attendance-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.attendance-left { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.attendance-left .filter-pills { flex-shrink: 0; }
.attendance-left .attendance-summary { flex-shrink: 0; }
.attendance-left .screen-body { flex: 1; overflow-y: auto; }
.attendance-left .screen-footer { flex-shrink: 0; }
.attendance-side-panel { display: none; }

/* Side panel content styles */
.side-panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--color-text-secondary); margin-bottom: 10px; }
.group-stat-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--color-card); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); margin-bottom: 8px; }
.group-stat-card__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.group-stat-card__info { flex: 1; min-width: 0; }
.group-stat-card__name { font-size: 14px; font-weight: 700; }
.group-stat-card__lead { font-size: 11px; color: var(--color-text-secondary); }
.group-stat-card__nums { text-align: right; flex-shrink: 0; }
.group-stat-card__present { font-size: 20px; font-weight: 800; color: var(--color-success); }
.group-stat-card__sep { font-size: 14px; color: var(--color-text-secondary); margin: 0 1px; }
.group-stat-card__total { font-size: 14px; color: var(--color-text-secondary); }
.group-stat-card__sick { display: block; font-size: 11px; color: var(--color-danger); font-weight: 600; }
.side-panel-action { display: block; width: 100%; text-align: left; padding: 10px 14px; background: var(--color-grey-100); border: 1px solid var(--color-border); border-radius: var(--radius-btn); cursor: pointer; font-size: 13px; margin-bottom: 6px; transition: var(--transition); }
.side-panel-action:hover { background: var(--color-primary-light); border-color: var(--color-primary); }

/* ---- Desktop (sidebar + wide content) ---- */

/* CSS variable for sidebar width — used in several rules */
.app-shell--desktop { --sidebar-w: 228px; }

/* Transform bottom-nav into left sidebar */
.app-shell--desktop .global-nav {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: auto;
  width: var(--sidebar-w);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: auto;
  border-top: none;
  border-right: 1px solid var(--color-border);
  padding: 0 0 16px;
  background: var(--color-card);
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0,0,0,.04);
}

/* Sidebar brand label at top */
.app-shell--desktop .global-nav::before {
  content: '🧭 KidsCompass';
  display: block;
  padding: 14px 16px 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
  letter-spacing: -.2px;
}

/* Nav items: horizontal icon + label */
.app-shell--desktop .bottom-bar__item {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  width: 100%;
  border-radius: 0;
  text-align: left;
  border-left: 3px solid transparent;
}
.app-shell--desktop .bottom-bar__item--active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}
.app-shell--desktop .bottom-bar__item:hover:not(.bottom-bar__item--active) {
  background: var(--color-grey-100);
}
.app-shell--desktop .bottom-bar__icon  { font-size: 18px; flex-shrink: 0; }
.app-shell--desktop .bottom-bar__label { font-size: 13px; font-weight: 500; }

/* Screens: push right of sidebar, full height (no bottom nav) */
.app-shell--desktop .screen { left: var(--sidebar-w); bottom: 0; }

/* Full-screen no-nav screens (PIN, Login) cover whole shell */
.app-shell--desktop .screen[data-no-nav] { left: 0; }

/* Wider, more spacious content */
.app-shell--desktop .screen-body  { padding: 20px 40px 28px; max-width: none; }
.app-shell--desktop .screen-header { padding: 0 32px; }

/* Desktop grids: more columns */
.app-shell--desktop .tile-grid          { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.app-shell--desktop .pin-switch__grid   { grid-template-columns: repeat(4, 1fr); max-width: 680px; }
.app-shell--desktop .pflege-child-grid  { grid-template-columns: repeat(6, 1fr); }
.app-shell--desktop .pflege-event-grid  { grid-template-columns: repeat(5, 1fr); }
.app-shell--desktop .sleep-card-grid    { grid-template-columns: repeat(4, 1fr); }
.app-shell--desktop .attendance-list    { font-size: 15px; }
.app-shell--desktop .child-card         { padding: 14px 16px; }
.app-shell--desktop .kpi-row            { gap: 16px; }
.app-shell--desktop .kpi-card__value    { font-size: 28px; }
.app-shell--desktop .kpi-card           { padding: 16px 14px; }

/* Desktop touch targets: mouse-friendly smaller size */
.app-shell--desktop { --touch-min: 36px; --touch-rec: 40px; }

/* Desktop chat: wider channel list */
.app-shell--desktop .chat-channels         { min-width: 240px; max-width: 260px; }
.app-shell--desktop .chat-channels--threads { min-width: 260px; max-width: 280px; }

/* Desktop: two-column card layouts where applicable */
.app-shell--desktop .alert-list { display: grid; grid-template-columns: repeat(2, 1fr); }

/* Desktop: larger med rows */
.app-shell--desktop .med-row { padding: 14px 16px; font-size: 14px; }

/* Desktop: attendance master-detail two-column */
.app-shell--desktop .attendance-main { flex-direction: row; }
.app-shell--desktop .attendance-left { flex: 0 0 55%; max-width: 640px; border-right: 1px solid var(--color-border); }
.app-shell--desktop .attendance-side-panel { display: block; flex: 1; padding: 16px 20px; overflow-y: auto; background: var(--color-bg); }

/* Desktop: groups-grid becomes 2-column card grid */
.app-shell--desktop .groups-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.app-shell--desktop .groups-grid .group-overview-row { margin-bottom: 0; flex-direction: column; align-items: flex-start; padding: 14px 16px; gap: 4px; }
.app-shell--desktop .groups-grid .group-overview-row__stats { font-size: 18px; font-weight: 800; color: var(--color-primary); order: -1; }
.app-shell--desktop .groups-grid .group-overview-row__dot { display: none; }
.app-shell--desktop .groups-grid .group-overview-row__name { font-size: 14px; font-weight: 700; }
.app-shell--desktop .groups-grid .group-overview-row__lead { font-size: 12px; color: var(--color-text-secondary); }

/* Desktop: cap KPI row width on dashboard screens */
.app-shell--desktop #screenLeitungDashboard .kpi-row,
.app-shell--desktop #screenTraegerDashboard .kpi-row { max-width: 700px; }

/* Desktop: alert cards back to single column (we removed 2-col grid for dashboards) */
.app-shell--desktop #screenLeitungDashboard .alert-list,
.app-shell--desktop #screenTraegerDashboard .alert-list { display: flex; flex-direction: column; max-width: 700px; }

/* ---- Animations ---- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes pulse-border { 0%, 100% { box-shadow: 0 0 0 0 rgba(234,67,53,.2); } 50% { box-shadow: 0 0 0 6px rgba(234,67,53,0); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes flashHighlight { 0% { box-shadow: 0 0 0 0 rgba(46,134,171,.4); } 50% { box-shadow: 0 0 0 8px rgba(46,134,171,.2); } 100% { box-shadow: 0 0 0 0 rgba(46,134,171,0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .pin-switch__grid { gap: 10px; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .pflege-event-grid { grid-template-columns: repeat(4, 1fr); }
  .chat-channels { width: 160px; }
  .chat-channels--threads { width: 180px; }
  .kpi-row { flex-wrap: wrap; }
  .kpi-card { min-width: calc(50% - 5px); }
}

@media (max-width: 480px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .chat-layout { flex-direction: column; }
  .chat-channels { width: 100%; height: 160px; border-right: none; border-bottom: 1px solid var(--color-border); }
  .chat-channels--threads { height: 200px; }
  .mehr-menu-grid { grid-template-columns: repeat(3, 1fr); }
}

/* @media (min-width: 1025px) rules removed — device layout handled via .app-shell--{device} classes */

/* ================================================================
   DESKTOP ASIDE PANELS
   Visible only in .app-shell--desktop; hidden on phone/tablet.
   ================================================================ */

/* ---- Shared aside styles ---- */
.aside-section { margin-bottom: 20px; }
.aside-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--color-text-secondary); margin-bottom: 10px; }

.aside-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--color-card); border-radius: var(--radius-btn); margin-bottom: 6px; font-size: 13px; box-shadow: var(--shadow-sm); }
.aside-item--urgent { border-left: 3px solid var(--color-danger); background: var(--color-danger-light); }
.aside-item--soon { border-left: 3px solid var(--color-warning); }
.aside-item__time { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); min-width: 40px; }
.aside-item--urgent .aside-item__time { color: var(--color-danger); }
.aside-item__icon { font-size: 16px; }
.aside-item__text { flex: 1; font-size: 12px; }

.aside-sleep-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--color-card); border-radius: var(--radius-btn); margin-bottom: 4px; border-left: 3px solid var(--color-purple); }
.aside-sleep-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.aside-sleep-name { font-size: 12px; font-weight: 600; flex: 1; }
.aside-sleep-dur { font-size: 11px; color: var(--color-purple); font-weight: 600; }

.aside-link { display: block; width: 100%; text-align: left; padding: 10px 14px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-btn); cursor: pointer; font-size: 13px; margin-bottom: 6px; transition: var(--transition); font-family: var(--font); }
.aside-link:hover { background: var(--color-primary-light); border-color: var(--color-primary); }

.aside-pending { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--color-card); border-radius: var(--radius-btn); margin-bottom: 6px; border-left: 3px solid var(--color-warning); }
.aside-pending__count { font-size: 18px; font-weight: 800; color: var(--color-warning); min-width: 28px; text-align: center; }
.aside-pending__text { font-size: 12px; color: var(--color-text-secondary); }

/* ---- F02 Dashboard layout ---- */
.dashboard-aside { display: none; }
.app-shell--desktop .dashboard-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
.app-shell--desktop .dashboard-aside { display: block; }

/* ---- F07 Chat info panel ---- */
.chat-info-panel { display: none; }
.app-shell--desktop .chat-info-panel {
  display: block;
  width: 220px;
  flex-shrink: 0;
  border-left: 1px solid var(--color-border);
  padding: 16px;
  overflow-y: auto;
  background: var(--color-grey-100);
}
.chat-info-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-secondary); margin-bottom: 10px; }
.chat-info-member { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.chat-info-member__avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.chat-info-member__name { font-size: 12px; font-weight: 600; flex: 1; }
.chat-info-member__status { font-size: 10px; color: var(--color-text-secondary); }
.chat-info-member__status--online { color: var(--color-success); }
.chat-info-divider { height: 1px; background: var(--color-border); margin: 12px 0; }
.chat-info-pinned { background: #fef9c3; border: 1px solid #fbbf24; border-radius: var(--radius-btn); padding: 10px; margin-top: 8px; }
.chat-info-pinned__header { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.chat-info-pinned__text { font-size: 11px; color: var(--color-text-secondary); line-height: 1.4; }
.chat-info-pinned__by { font-size: 10px; color: var(--color-text-secondary); margin-top: 6px; }

/* ---- Leitung dashboard layout ---- */
.leitung-aside { display: none; }
.app-shell--desktop .leitung-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}
.app-shell--desktop .leitung-aside { display: block; }

/* Staff ratio widget */
.staff-ratio-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.staff-ratio-label { font-size: 12px; font-weight: 600; min-width: 80px; }
.staff-ratio-bar { flex: 1; height: 6px; background: var(--color-grey-200); border-radius: var(--radius-full); overflow: hidden; }
.staff-ratio-fill { height: 100%; background: var(--color-success); border-radius: var(--radius-full); }
.staff-ratio-fill--warn { background: var(--color-warning); }
.staff-ratio-val { font-size: 12px; font-weight: 700; min-width: 45px; text-align: right; }
.staff-ratio-val--warn { color: var(--color-warning); }

/* ---- Träger dashboard layout ---- */
.traeger-aside { display: none; }
.app-shell--desktop .traeger-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}
.app-shell--desktop .traeger-aside { display: block; }

/* Träger stats */
.traeger-stat { margin-bottom: 12px; }
.traeger-stat__label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 2px; }
.traeger-stat__value { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.traeger-stat__bar { height: 6px; background: var(--color-grey-200); border-radius: var(--radius-full); overflow: hidden; }
.traeger-stat__fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); }

/* ================================================================
   BATCH 5: PHASE-3 + TRÄGER-SCREENS
   ================================================================ */

/* ---- Berichte (Leitung) ---- */
.bericht-stat-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.bericht-stat-row__label { min-width: 140px; color: var(--color-text-secondary); }
.bericht-bar { flex: 1; height: 8px; background: var(--color-grey-200); border-radius: var(--radius-full); overflow: hidden; }
.bericht-bar__fill { height: 100%; background: var(--color-success); border-radius: var(--radius-full); }
.bericht-bar__fill--warn { background: var(--color-warning); }
.bericht-bar__fill--info { background: var(--color-primary); }
.bericht-stat-row__val { font-size: 12px; font-weight: 700; min-width: 60px; text-align: right; }
.bericht-type-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: var(--transition); }
.bericht-type-row:hover { background: var(--color-primary-light); padding-left: 4px; }
.bericht-type-row__icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.bericht-type-row__info { flex: 1; }
.bericht-type-row__name { font-size: 13px; font-weight: 600; }
.bericht-type-row__sub { font-size: 12px; color: var(--color-text-secondary); }

/* ---- Einrichtungen (Träger) ---- */
.einrichtung-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 12px; cursor: pointer; transition: var(--transition); }
.einrichtung-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.einrichtung-card__header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: #fff; }
.einrichtung-card__name { font-size: 14px; font-weight: 700; }
.einrichtung-card__capacity { font-size: 13px; opacity: .85; }
.einrichtung-card__body { padding: 8px 14px; background: var(--color-card); }
.einrichtung-card__row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--color-grey-100, #f3f4f6); }
.einrichtung-card__ok { color: var(--color-success); font-weight: 600; }
.einrichtung-card__warn { color: var(--color-warning); font-weight: 600; }

/* ---- Personalpool (Träger) ---- */
.springer-card { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: var(--transition); }
.springer-card:hover { background: var(--color-primary-light); padding-left: 4px; }
.springer-card--unavail { opacity: .6; cursor: default; }
.springer-card--unavail:hover { background: none; padding-left: 0; }
.springer-card__avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.springer-card__info { flex: 1; }
.springer-card__name { font-size: 14px; font-weight: 600; }
.springer-card__quals { font-size: 12px; color: var(--color-text-secondary); }
.springer-card__status { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; }
.springer-card__status--active { background: #dbeafe; color: #1d4ed8; }
.springer-card__status--free { background: #dcfce7; color: #16a34a; }
.springer-card__status--off { background: var(--color-grey-200); color: var(--color-text-secondary); }

/* ---- Finanzen (Träger) ---- */
.finanzen-progress { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-btn); padding: 12px; margin-bottom: 4px; }
.finanzen-progress__label { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 6px; }
.finanzen-progress__bar { height: 10px; background: var(--color-grey-200); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 4px; }
.finanzen-progress__fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); }
.finanzen-progress__sub { font-size: 12px; color: var(--color-text-secondary); }
.finanzen-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--color-grey-100, #f3f4f6); }
.finanzen-row__name { min-width: 110px; }
.finanzen-bar { flex: 1; height: 6px; background: var(--color-grey-200); border-radius: var(--radius-full); overflow: hidden; }
.finanzen-bar__fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); }
.finanzen-bar__fill--warn { background: var(--color-warning); }
.finanzen-bar__fill--ok { background: var(--color-success); }
.finanzen-row__val { font-size: 11px; font-weight: 600; min-width: 110px; text-align: right; color: var(--color-text-secondary); }

/* ================================================================
   BATCH 4: PHASE-2-SCREENS
   ================================================================ */

/* ---- Wochenplanung ---- */
.wochenplan-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px 8px; overflow-x: auto; }
.wp-day-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wp-day-header { background: var(--color-grey-100, #f3f4f6); border-radius: var(--radius-btn); padding: 6px 4px; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.3; }
.wp-day-header--today { background: var(--color-primary); color: #fff; border-radius: var(--radius-btn); padding: 6px 4px; }
.wp-activity-block { background: var(--color-primary-light); border: 1px solid var(--color-primary); border-left: 3px solid var(--color-primary); border-radius: var(--radius-btn); padding: 6px 4px; cursor: pointer; transition: var(--transition); }
.wp-activity-block:hover { box-shadow: var(--shadow-sm); }
.wp-activity-block--outdoor { background: #dcfce7; border-color: #16a34a; }
.wp-activity-block--kreativ { background: #fae8ff; border-color: #a855f7; }
.wp-activity-block--musik { background: #fef9c3; border-color: #ca8a04; }
.wp-activity-block--ausflug { background: #fee2e2; border-color: #ef4444; }
.wp-activity-title { font-size: 11px; font-weight: 600; }
.wp-activity-time { font-size: 10px; color: var(--color-text-secondary); }
.material-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--color-grey-100, #f3f4f6); }
.material-row__icon { font-size: 16px; }

/* ---- Portfolio ---- */
.portfolio-child-header { display: flex; align-items: center; gap: 12px; padding: 12px 0 8px; border-bottom: 1px solid var(--color-border); margin-bottom: 12px; }
.portfolio-child-header__avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.portfolio-child-header__name { font-size: 16px; font-weight: 700; }
.portfolio-child-header__meta { font-size: 12px; color: var(--color-text-secondary); }
.portfolio-entry { display: flex; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.portfolio-entry__date { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); min-width: 55px; padding-top: 2px; }
.portfolio-entry__body { flex: 1; }
.portfolio-entry__title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.portfolio-entry__text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 6px; }
.portfolio-entry__photo { width: 60px; height: 60px; border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 6px; }
.portfolio-entry__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.portfolio-tag { background: #dbeafe; color: #1d4ed8; border-radius: var(--radius-full); padding: 2px 8px; font-size: 11px; font-weight: 600; }
.bogen-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.bogen-row__name { flex: 1; font-size: 13px; font-weight: 600; }
.bogen-row__status { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-full); }
.bogen-row__status--done { background: #dcfce7; color: #16a34a; }
.bogen-row__status--due { background: #fef3c7; color: #b45309; }
.bogen-row__arrow { color: var(--color-text-secondary); font-size: 16px; }

/* ---- Eingewöhnung ---- */
.eingew-hero { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 12px; }
.eingew-hero__avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.eingew-hero__name { font-size: 16px; font-weight: 700; }
.eingew-hero__meta { font-size: 12px; color: var(--color-text-secondary); }
.eingew-progress { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-btn); padding: 12px; margin-bottom: 14px; }
.eingew-progress__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-secondary); margin-bottom: 8px; }
.eingew-progress__phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.eingew-phase { text-align: center; padding: 6px 4px; border-radius: var(--radius-btn); font-size: 11px; font-weight: 600; background: var(--color-grey-100, #f3f4f6); color: var(--color-text-secondary); }
.eingew-phase--done { background: #dcfce7; color: #16a34a; }
.eingew-phase--active { background: var(--color-primary); color: #fff; }
.eingew-progress__bar { height: 6px; background: var(--color-grey-200); border-radius: var(--radius-full); }
.eingew-progress__fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); }
.eingew-log-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-grey-100, #f3f4f6); }
.eingew-log-row--today { background: #eff6ff; padding: 7px 6px; border-left: 3px solid var(--color-primary); }
.eingew-log-row__day { font-size: 12px; font-weight: 700; min-width: 40px; color: var(--color-text-secondary); }
.eingew-log-row__mood { font-size: 18px; }
.eingew-log-row__note { font-size: 12px; flex: 1; }
.eingew-emoji-scale { display: flex; justify-content: center; gap: 12px; padding: 8px 0; }
.eingew-emoji-btn { font-size: 24px; background: none; border: 2px solid transparent; border-radius: var(--radius-full); padding: 6px; cursor: pointer; transition: var(--transition); }
.eingew-emoji-btn:hover { background: var(--color-grey-100, #f3f4f6); }
.eingew-emoji-btn--active { border-color: var(--color-primary); background: var(--color-primary-light); }

/* ---- Fotogalerie ---- */
.consent-notice { display: flex; align-items: center; gap: 8px; background: #fef9c3; border: 1px solid #fbbf24; border-radius: var(--radius-btn); padding: 8px 12px; margin-bottom: 12px; font-size: 12px; }
.album-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.album-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; cursor: pointer; transition: var(--transition); }
.album-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.album-card__thumb { height: 70px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.album-card__thumb--new { background: var(--color-grey-100, #f3f4f6); font-size: 24px; color: var(--color-text-secondary); }
.album-card__name { padding: 6px 8px 2px; font-size: 13px; font-weight: 700; }
.album-card__meta { padding: 0 8px 8px; font-size: 11px; color: var(--color-text-secondary); }
.album-card--new { border-style: dashed; }
.foto-recent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.foto-recent { height: 64px; border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; }

/* ---- Springer-Briefing ---- */
.briefing-header { padding: 12px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 12px; }
.briefing-header__springer { display: flex; align-items: center; gap: 12px; }
.briefing-header__avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.briefing-header__name { font-size: 15px; font-weight: 700; }
.briefing-header__group { font-size: 12px; color: var(--color-text-secondary); }
.briefing-alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-btn); margin-bottom: 6px; }
.briefing-alert--danger { background: var(--color-danger-light); border: 1px solid var(--color-danger); }
.briefing-alert--warning { background: #fffbeb; border: 1px solid var(--color-warning); }
.briefing-alert--info { background: #eff6ff; border: 1px solid #93c5fd; }
.briefing-alert__icon { font-size: 18px; flex-shrink: 0; }
.briefing-alert__title { font-size: 13px; font-weight: 700; }
.briefing-alert__sub { font-size: 12px; color: var(--color-text-secondary); }
.briefing-child-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-grey-100, #f3f4f6); }
.briefing-child-row__avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.briefing-child-row__info { flex: 1; }
.briefing-child-row__name { font-size: 13px; font-weight: 600; }
.briefing-child-row__note { font-size: 12px; color: var(--color-text-secondary); }
.briefing-child-row__note--danger { color: var(--color-danger); font-weight: 600; }

/* ---- Personalverwaltung ---- */
.personal-card { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: var(--transition); }
.personal-card:hover { background: var(--color-primary-light); padding-left: 4px; }
.personal-card__avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.personal-card__info { flex: 1; }
.personal-card__name { font-size: 14px; font-weight: 600; }
.personal-card__role { font-size: 12px; color: var(--color-text-secondary); }
.personal-card__meta { font-size: 11px; color: var(--color-text-secondary); }
.personal-card__status { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; }
.personal-card__status--active { background: #dcfce7; color: #16a34a; }
.personal-card__status--springer { background: #ede9fe; color: #7c3aed; }
.qual-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--color-grey-100, #f3f4f6); font-size: 13px; }
.qual-row__name { font-weight: 600; min-width: 120px; }
.qual-tag { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-full); }
.qual-tag--ok { background: #dcfce7; color: #16a34a; }
.qual-tag--due { background: #fef3c7; color: #b45309; }

/* ---- Dienstplan ---- */
.dienstplan-grid { display: grid; grid-template-columns: 70px repeat(5, 1fr); gap: 2px; }
.dp-header-cell { background: var(--color-grey-100, #f3f4f6); text-align: center; padding: 6px 2px; font-size: 11px; font-weight: 700; border-radius: var(--radius-btn); }
.dp-header-cell--today { background: var(--color-primary); color: #fff; }
.dp-header-cell--name { background: none; }
.dp-name-cell { display: flex; align-items: center; gap: 6px; padding: 4px 2px; font-size: 11px; font-weight: 600; }
.dp-name-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 7px; font-weight: 700; flex-shrink: 0; }
.dp-shift { text-align: center; padding: 4px 2px; border-radius: var(--radius-btn); font-size: 10px; font-weight: 600; }
.dp-shift--early { background: #dbeafe; color: #1d4ed8; }
.dp-shift--late { background: #fde68a; color: #b45309; }
.dp-shift--springer { background: #ede9fe; color: #7c3aed; }
.dp-shift--off { background: var(--color-grey-100, #f3f4f6); color: var(--color-text-secondary); }
.dp-legend { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 0 4px; font-size: 11px; }
.dp-legend-item { padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; }
.dp-legend-item--early { background: #dbeafe; color: #1d4ed8; }
.dp-legend-item--late { background: #fde68a; color: #b45309; }
.dp-legend-item--springer { background: #ede9fe; color: #7c3aed; }
.dp-legend-item--off { background: var(--color-grey-100, #f3f4f6); color: var(--color-text-secondary); }

/* ================================================================
   BATCH 3: NEUE SCREENS
   ================================================================ */

/* ---- Abholmanagement ---- */
.abhol-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.abhol-row--pending { background: none; }
.abhol-row--warning { background: var(--color-warning-light, #fffbeb); border-left: 3px solid var(--color-warning); padding-left: 8px; }
.abhol-row--done { opacity: .55; }
.abhol-row__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.abhol-row__info { flex: 1; }
.abhol-row__name { font-size: 14px; font-weight: 600; }
.abhol-row__by { font-size: 12px; color: var(--color-text-secondary); }
.abhol-row__tag { font-size: 10px; padding: 1px 6px; border-radius: var(--radius-full); }
.abhol-row__tag--ok { background: var(--color-success-light, #dcfce7); color: var(--color-success); }
.abhol-row__tag--warn { background: #fef3c7; color: #b45309; }
.abhol-row__check { font-size: 18px; color: var(--color-success); }
.btn--danger { background: var(--color-danger); color: #fff; border: none; }
.btn--danger:hover { opacity: .9; }

/* ---- Übergabe ---- */
.uebergabe-info { background: var(--color-primary-light); border: 1px solid var(--color-primary); border-radius: var(--radius-btn); padding: 10px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.uebergabe-info__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--color-primary); }
.uebergabe-info__time { font-size: 14px; font-weight: 700; }
.uebergabe-info__from { font-size: 12px; color: var(--color-text-secondary); }
.uebergabe-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.uebergabe-row--ok { opacity: .7; }
.uebergabe-row--pending { background: #fffbeb; border-left: 3px solid var(--color-warning); padding-left: 8px; }
.uebergabe-row__icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; margin-top: 1px; }
.uebergabe-row__info { flex: 1; }
.uebergabe-row__title { font-size: 13px; font-weight: 600; }
.uebergabe-row__sub { font-size: 12px; color: var(--color-text-secondary); }

/* ---- Benachrichtigungs-Inbox ---- */
.notif-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: var(--transition); }
.notif-item:hover { background: var(--color-primary-light); padding-left: 4px; }
.notif-item--unread { background: #eff6ff; }
.notif-item--unread:hover { background: #dbeafe; }
.notif-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.notif-item__icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.notif-item__body { flex: 1; }
.notif-item__title { font-size: 13px; font-weight: 600; }
.notif-item__sub { font-size: 12px; color: var(--color-text-secondary); }
.notif-item__arrow { font-size: 18px; color: var(--color-text-secondary); }

/* ---- PIN Setup ---- */
.pin-setup-body { display: flex; flex-direction: column; align-items: center; padding: 32px 24px; }
.pin-setup-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.pin-setup-name { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.pin-setup-step { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 24px; text-align: center; }

/* ---- Einwilligungs-Management ---- */
.einwilligung-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.einwilligung-row--urgent { border-left: 3px solid var(--color-warning); padding-left: 8px; background: #fffbeb; }
.einwilligung-row--done { opacity: .65; }
.einwilligung-row__icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.einwilligung-row__info { flex: 1; }
.einwilligung-row__name { font-size: 14px; font-weight: 600; }
.einwilligung-row__families { font-size: 12px; color: var(--color-text-secondary); }
.einwilligung-row__deadline { font-size: 11px; font-weight: 600; color: var(--color-warning); margin-top: 2px; }

/* ================================================================
   BATCH 2: LEITUNG + ELTERN FULL-FIDELITY SCREENS
   ================================================================ */

/* ---- Kinderliste ---- */
.kinder-search-bar { padding: 10px 12px 4px; }
.kinder-search-input { width: 100%; padding: 10px 14px; font-size: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-card); font-family: var(--font); background: var(--color-card); }
.kinder-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: var(--transition); }
.kinder-row:hover { background: var(--color-primary-light); }
.kinder-row__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.kinder-row__info { flex: 1; }
.kinder-row__name { font-size: 14px; font-weight: 600; }
.kinder-row__group { font-size: 12px; color: var(--color-text-secondary); }
.kinder-row__status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); }
.kinder-row__status--present { background: var(--color-success-light, #dcfce7); color: var(--color-success); }
.kinder-row__status--sick { background: var(--color-danger-light); color: var(--color-danger); }
.kinder-row__status--vacation { background: #e0f2fe; color: #0369a1; }
.kinder-row__status--absent { background: var(--color-grey-200); color: var(--color-text-secondary); }
.kinder-row__arrow { color: var(--color-text-secondary); font-size: 18px; }

/* ---- Kind-Detail Hero ---- */
.kind-detail-hero { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--color-card); border-bottom: 1px solid var(--color-border); }
.kind-detail-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.kind-detail-name { font-size: 17px; font-weight: 700; }
.kind-detail-meta { font-size: 13px; color: var(--color-text-secondary); }

/* ---- Contact rows ---- */
.contact-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.contact-row__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.contact-row__info { flex: 1; }
.contact-row__name { font-size: 14px; font-weight: 600; }
.contact-row__detail { font-size: 12px; color: var(--color-text-secondary); }
.contact-row__priority { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); background: var(--color-grey-200); border-radius: var(--radius-full); padding: 2px 8px; }
.contact-row__tag { font-size: 12px; padding: 2px 8px; border-radius: var(--radius-full); }
.contact-row__tag--ok { background: var(--color-success-light, #dcfce7); color: var(--color-success); }
.form-value { font-size: 14px; color: var(--color-text); }
.health-badge { display: inline-block; padding: 6px 12px; border-radius: var(--radius-btn); font-size: 13px; font-weight: 600; }
.health-badge--danger { background: var(--color-danger-light); color: var(--color-danger); border: 1px solid var(--color-danger); }
.med-plan-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--color-card); border-radius: var(--radius-btn); border: 1px solid var(--color-border); margin-bottom: 6px; }
.med-plan-row__icon { font-size: 18px; }
.med-plan-row__info { flex: 1; }
.med-plan-row__name { font-size: 14px; font-weight: 600; }
.med-plan-row__detail { font-size: 12px; color: var(--color-text-secondary); }
.med-plan-row__status { font-size: 11px; font-weight: 700; color: var(--color-success); }

/* ---- Gruppenübersicht cards ---- */
.group-detail-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 12px; cursor: pointer; transition: var(--transition); }
.group-detail-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.group-detail-card__header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; color: #fff; }
.group-detail-card__name { font-size: 15px; font-weight: 700; }
.group-detail-card__capacity { font-size: 13px; opacity: .85; }
.group-detail-card__body { padding: 10px 14px; background: var(--color-card); }
.group-detail-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--color-grey-100, #f3f4f6); }
.group-detail-row__label { color: var(--color-text-secondary); }
.group-detail-row__value--ok { color: var(--color-success); font-weight: 600; }
.group-detail-row__value--warn { color: var(--color-warning); font-weight: 600; }

/* ---- Einstellungen ---- */
.plan-badge { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-btn); margin-bottom: 4px; }
.plan-badge__tier { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); }
.plan-badge__tier--pro { background: #ede9fe; color: #7c3aed; }
.plan-badge__tier--ent { background: #fef3c7; color: #b45309; }
.plan-badge__renew { font-size: 12px; color: var(--color-text-secondary); }
.feature-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--color-grey-100, #f3f4f6); font-size: 14px; }
.feature-toggle-row--locked { opacity: .5; }
.feature-toggle-row__label { flex: 1; }
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle__slider { position: absolute; cursor: pointer; inset: 0; background: var(--color-grey-300, #d1d5db); border-radius: var(--radius-full); transition: .2s; }
.toggle__slider::before { content:''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle input:checked + .toggle__slider { background: var(--color-primary); }
.toggle input:checked + .toggle__slider::before { transform: translateX(18px); }
.toggle input:disabled + .toggle__slider { opacity: .4; cursor: default; }
.user-mgmt-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-grey-100, #f3f4f6); }
.user-mgmt-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.user-mgmt-info { flex: 1; }
.user-mgmt-name { font-size: 13px; font-weight: 600; }
.user-mgmt-role { font-size: 12px; color: var(--color-text-secondary); }
.user-mgmt-status { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-full); }
.user-mgmt-status--active { background: var(--color-success-light, #dcfce7); color: var(--color-success); }

/* ---- Dokumente Leitung ---- */
.folder-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: var(--transition); }
.folder-row:hover { background: var(--color-primary-light); padding-left: 4px; }
.folder-row--alert .folder-row__name { color: var(--color-text); }
.folder-row__icon { font-size: 22px; flex-shrink: 0; width: 32px; text-align: center; }
.folder-row__info { flex: 1; }
.folder-row__name { font-size: 14px; font-weight: 600; }
.folder-row__meta { font-size: 12px; color: var(--color-text-secondary); }
.folder-row__meta--warn { color: var(--color-warning); }
.folder-row__arrow { font-size: 18px; color: var(--color-text-secondary); }
.folder-modal-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; max-height: 240px; overflow-y: auto; }
.folder-modal-item { padding: 6px 8px; background: var(--color-grey-50, #f9fafb); border-radius: var(--radius-btn); font-size: 13px; border: 1px solid var(--color-border); }
.upload-drop-zone { border: 2px dashed var(--color-border); border-radius: var(--radius-btn); padding: 24px; text-align: center; font-size: 14px; color: var(--color-text-secondary); }

/* ---- Dokumente Eltern ---- */
.doc-pending-card { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--color-card); border: 1px solid var(--color-warning); border-left: 3px solid var(--color-warning); border-radius: var(--radius-btn); margin-bottom: 8px; }
.doc-pending-card__icon { font-size: 22px; flex-shrink: 0; }
.doc-pending-card__info { flex: 1; }
.doc-pending-card__name { font-size: 14px; font-weight: 600; }
.doc-pending-card__sub { font-size: 12px; color: var(--color-text-secondary); }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.doc-row:hover { opacity: .8; }
.doc-row__icon { font-size: 20px; flex-shrink: 0; }
.doc-row__info { flex: 1; }
.doc-row__name { font-size: 14px; font-weight: 600; }
.doc-row__meta { font-size: 12px; color: var(--color-text-secondary); }
.doc-row__arrow { font-size: 18px; color: var(--color-text-secondary); }
.sign-preview { background: var(--color-grey-50, #f9fafb); border: 1px solid var(--color-border); border-radius: var(--radius-btn); padding: 14px; font-size: 14px; }
.sign-preview__text { line-height: 1.5; }
.doc-preview-box { background: var(--color-grey-50, #f9fafb); border: 1px solid var(--color-border); border-radius: var(--radius-btn); overflow: hidden; margin-bottom: 8px; }
.doc-preview-box__header { background: var(--color-primary); color: #fff; padding: 8px 12px; font-size: 13px; font-weight: 700; }
.doc-preview-box__body { padding: 12px; font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }

/* ---- Pinnwand (Eltern) ---- */
.feed-item { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 14px; margin-bottom: 10px; }
.feed-item__author { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.feed-item__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; background: var(--color-grey-300); }
.feed-item__author-info { flex: 1; }
.feed-item__name { font-size: 13px; font-weight: 700; }
.feed-item__time { font-size: 11px; color: var(--color-text-secondary); }
.feed-item__content { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.feed-item__photo-strip { display: flex; gap: 6px; margin-bottom: 10px; }
.feed-item__photo { width: 64px; height: 64px; border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.feed-item__actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--color-grey-100, #f3f4f6); }
.feed-reaction-btn { padding: 4px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: none; cursor: pointer; font-size: 13px; font-family: var(--font); transition: var(--transition); }
.feed-reaction-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.feed-reaction-btn--active { background: #fce7f3; border-color: #f472b6; color: #db2777; }

/* ---- Kalender (Eltern) ---- */
.month-cal { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.month-cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--color-grey-100, #f3f4f6); }
.month-cal__weekdays span { text-align: center; padding: 6px 0; font-size: 11px; font-weight: 700; color: var(--color-text-secondary); }
.month-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--color-border); }
.month-cal__cell { background: var(--color-card); padding: 6px; font-size: 13px; min-height: 36px; }
.month-cal__cell--empty { background: var(--color-grey-50, #f9fafb); }
.month-cal__cell--today { background: #dbeafe; font-weight: 700; color: var(--color-primary); }
.month-cal__cell--today-real { background: var(--color-primary); color: #fff; font-weight: 700; }
.month-cal__cell--event { cursor: pointer; background: #fef9c3; font-weight: 600; }
.month-cal__cell--event:hover { background: #fef08a; }
.event-list-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: var(--transition); }
.event-list-item:hover { opacity: .8; }
.event-list-item__date { display: flex; flex-direction: column; align-items: center; min-width: 36px; }
.event-list-item__day { font-size: 18px; font-weight: 800; color: var(--color-primary); line-height: 1; }
.event-list-item__month { font-size: 10px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; }
.event-list-item__info { flex: 1; }
.event-list-item__title { font-size: 14px; font-weight: 600; }
.event-list-item__meta { font-size: 12px; color: var(--color-text-secondary); }
.event-list-item__arrow { font-size: 18px; color: var(--color-text-secondary); }

/* ---- Speiseplan (Eltern) ---- */
.allergen-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.speiseplan-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.speiseplan-day { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-btn); overflow: hidden; }
.speiseplan-day--today { border-color: var(--color-primary); }
.speiseplan-day__header { background: var(--color-grey-100, #f3f4f6); padding: 6px 4px; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.3; }
.speiseplan-day--today .speiseplan-day__header { background: var(--color-primary); color: #fff; }
.speiseplan-day__date { font-size: 10px; font-weight: 400; }
.speiseplan-day__meal { padding: 6px 4px; flex: 1; }
.speiseplan-day__name { font-size: 11px; font-weight: 600; margin-bottom: 3px; line-height: 1.3; }
.speiseplan-day__tags { display: flex; flex-direction: column; gap: 2px; margin-bottom: 3px; }
.speiseplan-day__child-ok { font-size: 10px; color: var(--color-success); }
.speiseplan-day__child-ok--warn { color: var(--color-warning); }
.speiseplan-day__snack { padding: 4px 4px 6px; font-size: 10px; color: var(--color-text-secondary); border-top: 1px solid var(--color-grey-100, #f3f4f6); }
.allergen-tag { display: inline-block; padding: 1px 5px; border-radius: var(--radius-full); font-size: 10px; margin-right: 2px; }
.allergen-tag--warn { background: #fef3c7; color: #b45309; }
.allergen-tag--info { background: #dbeafe; color: #1d4ed8; }

/* ---- Modal helpers ---- */
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }
.btn--success { background: var(--color-success); color: #fff; border: none; }
.btn--success:hover { opacity: .9; }

/* ---- Beobachtungsbogen Wizard ---- */
.bogen-progress-bar { height: 4px; background: var(--color-grey-200); }
.bogen-progress-bar__fill { height: 100%; background: var(--color-primary); border-radius: 0 2px 2px 0; transition: width .3s ease; }
.bogen-child-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--color-card); border-bottom: 1px solid var(--color-border); }
.bogen-child-bar__avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.bogen-child-bar__name { font-size: 14px; font-weight: 700; }
.bogen-child-bar__meta { font-size: 12px; color: var(--color-text-secondary); }
.bogen-section-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.bogen-item { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 14px; margin-bottom: 12px; }
.bogen-item__label { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.bogen-scale4 { display: flex; flex-direction: column; gap: 6px; }
.bogen-scale4__option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-btn); cursor: pointer; transition: var(--transition); }
.bogen-scale4__option:hover { background: var(--color-primary-light); }
.bogen-scale4__option--active { background: var(--color-primary-light); border-color: var(--color-primary); }
.bogen-scale4__option input { display: none; }
.bogen-scale4__label { width: 24px; height: 24px; border-radius: 50%; background: var(--color-grey-200); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.bogen-scale4__option--active .bogen-scale4__label { background: var(--color-primary); color: #fff; }
.bogen-scale4__text { font-size: 13px; }
.bogen-item--yesno .bogen-yesno { display: flex; gap: 8px; }
.bogen-yesno__btn { flex: 1; padding: 10px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-btn); text-align: center; cursor: pointer; font-size: 13px; font-weight: 600; transition: var(--transition); display: flex; align-items: center; justify-content: center; }
.bogen-yesno__btn input { display: none; }
.bogen-yesno__btn:hover { background: var(--color-primary-light); }
.bogen-yesno__btn--active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.bogen-footer { display: flex; gap: 8px; padding: 10px 12px; background: var(--color-card); border-top: 1px solid var(--color-border); }
.bogen-footer .btn { flex: 1; }

/* ---- Bestätigungs-Modals ---- */
.confirm-detail-box { background: var(--color-grey-50, #f9fafb); border: 1px solid var(--color-border); border-radius: var(--radius-btn); padding: 10px 12px; margin-bottom: 4px; }
.confirm-detail-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--color-grey-100, #f3f4f6); }
.confirm-detail-row:last-child { border-bottom: none; }
.confirm-detail-row span:first-child { font-weight: 600; flex-shrink: 0; }

/* ---- Eltern-Nav: extra items hidden on phone, visible on tablet/desktop ---- */
.nav-eltern-extra { display: none; }
.app-shell--tablet .nav-eltern-extra,
.app-shell--desktop .nav-eltern-extra { display: flex; }
/* Hide ••• on tablet/desktop in Eltern nav */
.app-shell--tablet #navEltern .bottom-bar__item--mehr,
.app-shell--desktop #navEltern .bottom-bar__item--mehr { display: none; }

/* ---- tbEdit modal helpers ---- */
.tb-edit-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tb-edit-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--color-grey-50, #f9fafb); border: 1px solid var(--color-border); border-radius: var(--radius-btn); }
.tb-edit-row__label { flex: 1; font-size: 13px; }
.tb-edit-row__del { padding: 2px 8px; font-size: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-btn); background: none; cursor: pointer; color: var(--color-text-secondary); }
.tb-edit-row__del:hover { background: var(--color-danger-light); border-color: var(--color-danger); color: var(--color-danger); }
.form-select--sm { max-width: 90px; font-size: 12px; padding: 4px 6px; }

/* ---- Login "Passwort vergessen" link ---- */
.login-link--forgot { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: var(--color-primary); text-decoration: none; }
.login-link--forgot:hover { text-decoration: underline; }

/* ---- date-nav-btn disabled state ---- */
.date-nav-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* ================================================================
   TABLET LANDSCAPE — show aside panels in a narrower variant.
   Portrait keeps the current single-column layout.
   ================================================================ */
@media (orientation: landscape) {
  /* F02 Fachkraft Dashboard */
  .app-shell--tablet .dashboard-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 20px;
    align-items: start;
  }
  .app-shell--tablet .dashboard-aside { display: block; }

  /* F07 Team Chat */
  .app-shell--tablet .chat-info-panel {
    display: block;
    width: 200px;
    flex-shrink: 0;
    border-left: 1px solid var(--color-border);
    padding: 12px;
    overflow-y: auto;
    background: var(--color-grey-100);
  }

  /* Leitung Dashboard */
  .app-shell--tablet .leitung-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 20px;
    align-items: start;
  }
  .app-shell--tablet .leitung-aside { display: block; }

  /* Träger Dashboard */
  .app-shell--tablet .traeger-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 20px;
    align-items: start;
  }
  .app-shell--tablet .traeger-aside { display: block; }

  /* Attendance master-detail */
  .app-shell--tablet .attendance-main { flex-direction: row; }
  .app-shell--tablet .attendance-left { flex: 0 0 55%; max-width: 580px; border-right: 1px solid var(--color-border); }
  .app-shell--tablet .attendance-side-panel { display: block; flex: 1; padding: 14px 16px; overflow-y: auto; background: var(--color-bg); }
}