/* ===================================================================
   REGAT — Design-System
   Klar & freundlich: Schwarz auf Weiß, warmes Creme im Header,
   Sonnengelb als Hervorhebung. Headlines handschriftlich (Annie Use
   Your Telescope), Fließtext in Inter.
   =================================================================== */

:root{
  --ink:#000000;
  --ink-soft:#31393C;
  --dark:#31393C;
  --header-bg:#FBF7EF;
  --paper:#FFFFFF;
  --card:#FFFFFF;
  --line:#E7E2D6;
  --line-soft:#F1EEE4;
  --muted:#5B6367;
  --muted-strong:#40484C;
  --accent:#FFCB00;
  --accent-ink:#000000;
  --r:20px;
  --r-sm:12px;
  --shadow:0 8px 24px rgba(0,0,0,.05);

  --success-bg:rgba(75,122,91,.14);
  --success-ink:#3F6B4C;
  --warning-bg:rgba(255,203,0,.20);
  --warning-ink:#7A5B00;
  --neutral-bg:rgba(49,57,60,.10);
  --neutral-ink:#40484C;
  --danger-bg:rgba(177,94,61,.14);
  --danger-ink:#B15E3D;
}

*{ box-sizing:border-box; }
html{ height:100%; }
body{ min-height:100%; } /* nicht height:100%, sonst zählt das Padding unten (Platz fürs Menü) nicht zur Scroll-Höhe */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

h1,h2,h3{ font-family:'Annie Use Your Telescope', 'Segoe Script', cursive; color:var(--ink); margin:0; font-weight:400; }
h1{ font-size:40px; letter-spacing:-.01em; margin-bottom:6px; }
h2{ font-size:23px; }
.muted{ color:var(--muted); font-weight:500; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

a{ color:var(--ink); }
a:hover{ color:var(--dark); }

.wrapper{
  max-width:1280px;
  margin:0 auto;
  padding:40px 32px 60px;
}

/* ---------- Topbar / Navigation ---------- */
.topbar{
  position:sticky; top:0; z-index:999;
  background:var(--header-bg);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1280px; margin:0 auto; padding:0 32px;
  height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  font-family:'Annie Use Your Telescope', 'Segoe Script', cursive; font-weight:400; font-size:24px;
  color:var(--dark); letter-spacing:.02em;
}
.brand:hover{ color:var(--dark); }
.brand svg{ display:block; }
.brand img{ height:26px; width:auto; display:block; }

.nav-groups{ display:flex; align-items:center; gap:6px; margin-left:32px; flex:1; flex-wrap:wrap; }
.nav-group, .nav-link{
  display:flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:10px;
  color:rgba(49,57,60,.72); font-weight:500; font-size:14px;
  text-decoration:none; cursor:pointer; position:relative;
  white-space:nowrap;
}
.nav-group:hover, .nav-link:hover{ background:rgba(49,57,60,.06); color:var(--dark); }
.nav-group.active, .nav-link.active{
  background:rgba(255,203,0,.22);
  box-shadow:inset 0 0 0 1px rgba(255,203,0,.55);
  color:var(--dark); font-weight:600;
}
.nav-group.active:hover{ background:rgba(255,203,0,.22); }
.nav-chevron{ color:currentColor; opacity:.8; }

.nav-dropdown{
  display:none;
  position:absolute; top:44px; left:0; min-width:210px;
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.14);
  padding:8px; z-index:1000;
}
.nav-group:hover .nav-dropdown, .nav-group:focus-within .nav-dropdown{ display:block; }
.nav-dropdown a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:11px;
  color:var(--dark); text-decoration:none;
  font-weight:500; font-size:14px;
}
.nav-dropdown a:hover{ background:rgba(49,57,60,.06); color:var(--ink); }
.nav-dropdown a.active{ background:rgba(255,203,0,.22); color:var(--ink); font-weight:600; }

.topbar-right{ display:flex; align-items:center; gap:14px; }

.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  background:rgba(49,57,60,.06); border:1px solid rgba(49,57,60,.14);
  color:var(--dark); cursor:pointer; font-size:16px;
}
.nav-toggle:hover{ background:rgba(49,57,60,.12); }

.avatar{
  width:34px; height:34px; border-radius:999px;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.logout{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:10px;
  color:var(--dark); font-weight:600; text-decoration:none;
  background:rgba(49,57,60,.06); border:1px solid rgba(49,57,60,.14);
}
.logout:hover{ background:rgba(49,57,60,.12); color:var(--ink); }

/* Mittelbreite (z. B. kleineres Browserfenster): Menüleiste kompakter, damit sie nicht in zwei Zeilen bricht */
@media (min-width:1500px){ .topbar-inner{ max-width:1500px; } }
@media (min-width:901px) and (max-width:1499px){
  .topbar-inner{ padding:0 16px; gap:8px; }
  .nav-groups{ margin-left:8px; gap:0; flex-wrap:nowrap; }
  .nav-group, .nav-link{ padding:8px 8px; font-size:13.5px; gap:3px; }
  .nav-chevron{ display:none; }
  .nav-alle, .nav-hallo, .logout span{ display:none; }
}

@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }

  .nav-groups{
    display:none;
    position:absolute; top:64px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    margin-left:0; flex:none;
    background:var(--header-bg);
    border-bottom:1px solid var(--line);
    padding:10px 16px 18px;
    box-shadow:0 18px 40px rgba(0,0,0,.10);
    max-height:calc(100vh - 64px); overflow-y:auto;
  }
  .nav-groups.nav-open{ display:flex; }

  .nav-group{
    cursor:default; font-weight:700; opacity:.85;
    padding:12px 14px 2px;
  }
  .nav-group:hover{ background:none; color:rgba(49,57,60,.72); }
  .nav-chevron{ display:none; }

  .nav-dropdown{
    display:block !important;
    position:static; min-width:0;
    background:transparent; border:none; box-shadow:none;
    padding:0 0 4px 10px; margin:0;
  }

  .nav-link{ padding:12px 14px; }
}

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:24px;
  margin-bottom:14px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:var(--r-sm);
  font-weight:600; font-size:14px;
  border:none; cursor:pointer; text-decoration:none;
  font-family:inherit;
}
.btn-primary{ background:var(--ink); color:var(--accent); }
.btn-primary:hover{ background:var(--ink-soft); }
.btn-secondary{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn-secondary:hover{ background:rgba(0,0,0,.05); }
.btn-ghost{ background:transparent; color:var(--muted); }
.btn-ghost:hover{ color:var(--ink); }
.btn-danger{ background:var(--danger-bg); color:var(--danger-ink); }

/* ---------- Badges / Status-Pills ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:600;
}
.badge-success{ background:var(--success-bg); color:var(--success-ink); }
.badge-warning{ background:var(--warning-bg); color:var(--warning-ink); }
.badge-neutral{ background:var(--neutral-bg); color:var(--neutral-ink); }
.badge-danger{ background:var(--danger-bg); color:var(--danger-ink); }

/* ---------- KPI cards ---------- */
.kpi-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px; margin-bottom:24px;
}
@media (max-width:900px){ .kpi-grid{ grid-template-columns:1fr; } }
.kpi-icon{
  width:40px; height:40px; border-radius:var(--r-sm);
  background:rgba(255,203,0,.15);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.kpi-label{
  font-size:13px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;
}
.kpi-value{ font-family:'Annie Use Your Telescope', Georgia, serif; font-size:36px; font-weight:400; margin-bottom:4px; }
.kpi-sub{ font-size:13px; color:var(--muted); }

/* ---------- List rows (Termine, offene Posten, ...) ---------- */
.list-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-top:1px solid var(--line-soft);
  gap:12px;
}
.list-row:first-child{ border-top:0; }
.list-row-title{ font-weight:600; font-size:14.5px; }
.list-row-sub{ font-size:13px; color:var(--muted); margin-top:2px; }

.card-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px; gap:10px;
}

.two-col{ display:grid; grid-template-columns:2fr 1fr; gap:20px; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

/* ---------- Shared admin-page utilities ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--card);
  font-weight:700; font-size:12.5px; color:var(--ink);
}
.pill svg, .pill i{ color:var(--accent); }

.grid-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.kpi{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }

.card-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.card-title h2{ margin:0; display:flex; align-items:center; gap:8px; font-size:17px; }
.section-icon{ color:var(--accent); }

.row-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.table-wrap{ overflow:auto; border-radius:16px; }
.small{ font-size:12px; }
.inline-form{ display:inline; }

.btn-sm{ padding:7px 11px; border-radius:10px; font-size:12.5px; }
.btn-success{ background:var(--success-bg); color:var(--success-ink); }
.btn-success:hover{ background:rgba(75,122,91,.22); }
.btn-warning{ background:var(--warning-bg); color:var(--warning-ink); }
.btn-warning:hover{ background:rgba(255,203,0,.24); }
.btn-outline{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn-outline:hover{ background:rgba(0,0,0,.04); }

.details{ border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; margin-bottom:14px; }
.details summary{ cursor:pointer; padding:14px 18px; font-weight:700; background:var(--line-soft); list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.details summary::-webkit-details-marker{ display:none; }
.details .details-body{ padding:0; }

.field-label{ font-weight:700; font-size:13px; color:var(--ink); display:block; margin-bottom:6px; }
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.filters .field{ min-width:220px; flex:1; }

.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px 0; }
.tab{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; border:1px solid var(--line); background:var(--card); text-decoration:none; color:var(--ink); font-weight:600; font-size:14px; }
.tab:hover{ background:var(--line-soft); }
.tab.active{ background:var(--ink); color:var(--accent); border-color:var(--ink); }
.tab.active:hover{ background:var(--ink); }
.tab.active i{ color:var(--accent); }

.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:10px; }
.toolbar-left{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.toolbar-right{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; }
.modal{ display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(760px,92vw); max-height:86vh; overflow:auto; background:var(--card); border-radius:18px; border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,.25); z-index:10000; }
.modal-header{ padding:14px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-weight:700; }
.modal-body{ padding:18px; }
select, textarea, input[type="text"], input[type="search"], input[type="date"], input[type="time"], input[type="number"]{
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
  padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card);
}
select:focus, textarea:focus, input:focus{ outline:none; border-color:var(--accent); }

/* ---------- Tables ---------- */
table.tbl{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
table.tbl th{
  background:var(--line-soft); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--muted-strong);
  padding:12px 14px; text-align:left;
}
table.tbl td{
  padding:12px 14px; border-top:1px solid var(--line-soft); font-size:13.5px;
}
table.tbl tr:first-child td{ border-top:0; }

/* ---------- Elternportal: Karten-Listen (statt Tabellen) ----------
   Kurse und Termine werden im Elternportal nicht als Tabelle, sondern als
   Liste einzelner Karten dargestellt - immer untereinander, egal auf
   welcher Bildschirmbreite, kein Scrollen nach rechts/links nötig. */
.eltern-list{ display:flex; flex-direction:column; gap:14px; }
.eltern-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:18px 20px; box-shadow:var(--shadow);
}
.eltern-card-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:12px;
  border-bottom:1px solid var(--line-soft);
}
.eltern-card-heading{ font-weight:700; font-size:15.5px; line-height:1.35; }
.eltern-card-heading .muted{ font-weight:500; }
.eltern-card-badges{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.eltern-card-body{ display:flex; flex-direction:column; gap:12px; }
.eltern-card-field-label{
  display:block; font-weight:700; font-size:11px; text-transform:uppercase;
  letter-spacing:.03em; color:var(--muted-strong); margin-bottom:4px;
}
.eltern-card-field-value{ font-size:13.5px; }
.eltern-card-actions{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft);
}
@media (max-width:520px){
  .eltern-card{ padding:16px; border-radius:16px; }
  .eltern-card-actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* Zusatzprobe (außerordentlicher Termin, den Eltern extra zu-/absagen
   müssen): Karte bekommt eine deutliche Gold-Hervorhebung statt nur eines
   kleinen Badges, damit sie in der Terminliste sofort auffällt. */
.eltern-card-zusatzprobe{
  border-color:rgba(255,203,0,.5);
  border-left:5px solid var(--accent);
  background:linear-gradient(90deg, rgba(255,203,0,.08), var(--card) 55%);
}

/* ---------- Elternportal: Nachrichten von Julia ----------
   Ankündigungen, die Julia im Admin-Bereich (Eltern-Nachrichten) an alle/
   bestimmte Eltern schickt. Werden oben im Dashboard angezeigt, solange sie
   nicht als erledigt markiert wurden - optisch abgesetzt mit Gold-Kante. */
.nachricht-card{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:14px; padding:16px 18px; box-shadow:var(--shadow);
}
.nachricht-card-date{
  font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted-strong); margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.nachricht-card-date i{ color:var(--accent); }
.nachricht-card-text{ font-size:14px; line-height:1.5; white-space:pre-line; }

/* ---------- Upload dropzone ---------- */
.drop{
  border:2px dashed var(--line); border-radius:var(--r);
  padding:20px; background:var(--card);
}
.drop input[type="file"]{
  width:100%; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
  padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--paper);
}

/* ---------- Login / standalone card pages (Admin-Login, Elternportal) ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:22px; }
.login-card{ width:100%; max-width:420px; background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:0 25px 60px rgba(0,0,0,.14); padding:36px; }
.login-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.login-brand img{ height:36px; width:auto; display:block; }
.login-brand .title{ font-family:'Annie Use Your Telescope', Georgia, serif; font-weight:400; font-size:26px; letter-spacing:.01em; color:var(--ink); }
.login-sub{ color:var(--muted); margin-bottom:22px; font-weight:500; font-size:14px; }
.login-alert{ display:flex; gap:10px; align-items:flex-start; background:var(--danger-bg); border-radius:14px; padding:12px 14px; margin-bottom:16px; color:var(--danger-ink); font-weight:600; font-size:13.5px; }
.login-success{ display:flex; gap:10px; align-items:flex-start; background:var(--success-bg); border-radius:14px; padding:12px 14px; margin-bottom:16px; color:var(--success-ink); font-weight:600; font-size:13.5px; }
.login-field{ margin-bottom:16px; }
.login-field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.login-field input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--paper);
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink);
}
.login-field input:focus{ outline:none; border-color:var(--accent); background:#fff; }
.btn-full{ width:100%; justify-content:center; margin-top:6px; }

/* ---------- Notices / flash messages ---------- */
.notice{
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; background:var(--card); box-shadow:var(--shadow);
  font-weight:600; display:flex; align-items:flex-start; gap:10px;
}
.notice.ok{ background:var(--success-bg); border-color:transparent; color:var(--success-ink); }
.notice.warn{ background:var(--warning-bg); border-color:transparent; color:var(--warning-ink); }
.notice.info{ background:var(--neutral-bg); border-color:transparent; color:var(--muted-strong); }

/* ---------- Form grids ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:980px){ .form-grid{ grid-template-columns:1fr; } }

.months{ display:grid; grid-template-columns:1fr; gap:8px; }
.month-row{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card);
  padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.month-left{ display:flex; align-items:center; gap:10px; font-weight:600; }
.month-right{ display:flex; align-items:center; gap:8px; }
.amount-input{ width:120px; }


/* ===================================================================
   MODERNISIERUNG (Handy zuerst)
   Gleiche Marke (Creme, Sonnengelb, Annie + Inter), aber mehr Luft,
   größere Tippflächen, Karten auf warmem Grund und eine Tab-Leiste am
   unteren Rand für Eltern und Kids.
   =================================================================== */

:root{
  --bg:#FAF8F3;
  --r:22px;
  --shadow:0 1px 2px rgba(49,57,60,.04), 0 8px 24px rgba(49,57,60,.06);
  --shadow-lift:0 2px 4px rgba(49,57,60,.06), 0 14px 32px rgba(49,57,60,.10);
  --tap:46px;
  --ring:0 0 0 3px rgba(255,203,0,.45);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
}

html{ -webkit-text-size-adjust:100%; scroll-padding-top:72px; }
body{
  background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  line-height:1.5;
}
h1,h2,h3{ line-height:1.15; }
img{ max-width:100%; }

/* Sichtbarer Fokus für Tastatur, ohne den Maus-Klick zu stören */
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px; }

/* Topbar: halbtransparent, ruhiger */
.topbar{
  background:rgba(251,247,239,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 rgba(49,57,60,.06);
  padding-top:var(--safe-t);
}

/* Karten: weiß auf warmem Grund, weicher Schatten */
.card, .eltern-card, .nachricht-card, .details{
  border-color:rgba(49,57,60,.08);
  box-shadow:var(--shadow);
}
.eltern-card{ border-radius:20px; }

/* Nachrichtentext: nl2br macht die Umbrüche schon, pre-line verdoppelte sie */
.nachricht-card-text{ white-space:normal; line-height:1.6; }

/* Buttons: größere Tippfläche, spürbares Drücken */
.btn{
  min-height:var(--tap); padding:11px 20px; border-radius:14px; font-size:15px;
  justify-content:center; transition:transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-sm{ min-height:38px; padding:8px 14px; border-radius:12px; font-size:13.5px; }
.btn-primary{ box-shadow:0 2px 0 rgba(0,0,0,.18); }
.badge{ padding:5px 11px; font-size:12.5px; }

/* Formularfelder: alle Typen, 16 px (verhindert Zoomen am iPhone) */
select, textarea,
input[type="text"], input[type="search"], input[type="date"], input[type="time"], input[type="number"],
input[type="email"], input[type="password"], input[type="tel"], input[type="url"]{
  font-size:16px; min-height:var(--tap); padding:11px 14px; border-radius:14px;
  border:1.5px solid rgba(49,57,60,.16); background:#fff; color:var(--ink);
  max-width:100%; transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{ min-height:96px; line-height:1.5; }
select:focus, textarea:focus, input:focus{ border-color:var(--accent); box-shadow:var(--ring); }
input[type="checkbox"], input[type="radio"]{ width:20px; height:20px; accent-color:#31393C; }

/* Login-Karten (Kids, Eltern, Admin) */
.login-wrap{ padding:max(22px, var(--safe-t)) 18px max(22px, var(--safe-b)); background:radial-gradient(120% 80% at 50% 0%, #FFF3C4 0%, var(--bg) 60%); }
.login-card{ border-radius:28px; border-color:rgba(49,57,60,.06); box-shadow:var(--shadow-lift); }
.login-field input, .login-card form input[type="email"], .login-card form input[type="password"]{ width:100%; }
.login-card form label{ display:block; font-size:13px; font-weight:600; margin:14px 0 6px; }
.login-card form button.btn-full{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:50px; margin-top:18px; border:0; border-radius:14px; cursor:pointer;
  background:var(--ink); color:var(--accent); font:600 16px 'Inter',sans-serif;
}
.login-card form button.btn-full:active{ transform:scale(.98); }
.alert-error{ border-radius:14px; }

/* Tabellen: im Admin seitlich wischbar statt abgeschnitten */
.table-wrap{ -webkit-overflow-scrolling:touch; }

/* ---------- Tab-Leiste unten (Eltern: .topbar-eltern, Kids: .kmenu) ---------- */
.tabbar-label{ display:none; }
.topbar-eltern .nav-link i{ display:none; }

@media (max-width:700px){
  body{ padding-bottom:calc(112px + var(--safe-b)); } /* Platz für die feste Tab-Leiste, auch wenn Beschriftungen umbrechen */
  .wrapper{ padding:22px 16px 28px; }
  h1{ font-size:34px; }
  h2{ font-size:22px; }
  .card{ padding:18px; border-radius:20px; }
  .two-col, .kpi-grid{ gap:14px; }
  .topbar-inner{ height:56px; padding:0 16px; }
  .brand{ font-size:22px; }

  /* Eltern: Menü wird zur Tab-Leiste am Daumen. backdrop-filter am Elternelement würde
     position:fixed an die Kopfleiste binden, deshalb hier aus. */
  .topbar-eltern{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--header-bg); }
  .topbar-eltern .nav-toggle{ display:none; }
  .topbar-eltern .nav-groups{
    display:flex !important; flex-direction:row; align-items:stretch; gap:2px;
    position:fixed; top:auto; left:0; right:0; bottom:0; margin:0; flex-wrap:nowrap;
    max-height:none; overflow:visible;
    padding:6px 6px calc(6px + var(--safe-b));
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px);
    border-top:1px solid rgba(49,57,60,.08);
    box-shadow:0 -8px 24px rgba(49,57,60,.08);
    z-index:1000;
  }
  .topbar-eltern .nav-link{
    flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; gap:3px;
    padding:8px 2px; border-radius:14px; font-size:11px; font-weight:600; text-align:center;
    white-space:normal; line-height:1.15; box-shadow:none;
  }
  .topbar-eltern .nav-link i{ display:block; font-size:19px; }
  .topbar-eltern .nav-link.active{ background:rgba(255,203,0,.28); box-shadow:none; color:var(--ink); }

  /* Kids: Proben-Menü als Tab-Leiste */
  .kmenu{
    position:fixed; left:0; right:0; bottom:0; z-index:1000; margin:0 !important;
    display:flex !important; gap:2px !important; overflow:visible;
    padding:6px 6px calc(6px + var(--safe-b));
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px);
    border-top:1px solid rgba(49,57,60,.08); box-shadow:0 -8px 24px rgba(49,57,60,.08);
    scrollbar-width:none;
  }
  .kmenu::-webkit-scrollbar{ display:none; }
  .kmenu-item{
    flex:1 1 0 !important; min-width:0; padding:8px 2px !important; gap:3px !important;
    border:0 !important; border-radius:14px !important; box-shadow:none !important;
    background:transparent !important; font-size:11px !important; line-height:1.15;
  }
  .kmenu-item i{ font-size:20px !important; color:var(--muted) !important; }
  .kmenu-item span{ white-space:nowrap; }
  .kmenu-item.active{ background:rgba(255,203,0,.28) !important; }
  .kmenu-item.active i{ color:var(--ink) !important; }

  /* Karten-Aktionen volle Breite, besser tippbar */
  .eltern-card-actions .btn{ flex:1 1 calc(50% - 8px); }
  .filters .field{ min-width:100%; }
  .row-actions{ justify-content:flex-start; }
  .modal{ width:94vw; max-height:90vh; border-radius:20px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .btn:active, .kmenu-item:active{ transform:none; }
}