/* Familienzentrale – Stylesheet (verspieltes, freundliches Design) */
:root{
  --bg:#eaf1fc; --panel:#ffffff; --ink:#1f2450; --muted:#828cab;
  --line:#e6ecf7;
  --blue:#4c8dff; --purple:#a487f0; --lime:#54c07f; --coral:#f56a92; --amber:#ffab35;
  --primary:#1f2450; --primary-h:#141838;
  --accent:#4c8dff;
  --radius:22px; --radius-sm:14px;
  --shadow:0 10px 26px rgba(31,36,80,.08);
  --shadow-sm:0 3px 10px rgba(31,36,80,.06);
}
/* Bereichsfarben (Body bekommt page-<seite>) */
.page-dashboard{--accent:var(--blue)}
.page-profiles,.page-profile{--accent:var(--coral)}
.page-calendar{--accent:var(--lime)}
.page-wishlists{--accent:var(--purple)}
.page-lists{--accent:var(--amber)}

/* Persoenliches Farbschema pro Konto (theme-* am Body, gewinnt ueber Seitenfarbe) */
body.theme-pink{--accent:#ec4d8f; --bg:#fdeef6}
body.theme-blau{--accent:#4c8dff; --bg:#eaf1fc}
body.theme-lila{--accent:#8b5cf6; --bg:#f2ecfe}
body.theme-weinrot{--accent:#9d1f43; --bg:#fbecef}
body[class*="theme-"]{
  /* Primary-Buttons folgen dem Farbschema (Hover etwas dunkler) */
  --primary:var(--accent);
  --primary-h:color-mix(in srgb,var(--accent) 80%,#000);
  background:
    radial-gradient(1200px 500px at 100% -10%, color-mix(in srgb,var(--accent) 20%,#fff) 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 0%, color-mix(in srgb,var(--accent) 12%,#fff) 0%, transparent 55%),
    var(--bg);
}
/* Farbschema-Auswahl (Swatches) */
.theme-picker{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 14px}
.theme-picker label{cursor:pointer;position:relative}
.theme-picker input{position:absolute;opacity:0;width:0;height:0}
.theme-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 14px;
  border:2px solid var(--line);border-radius:16px;background:var(--panel);min-width:78px;transition:.15s;font-weight:800;font-size:.82rem}
.theme-swatch .dot{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.theme-picker input:checked + .theme-swatch{border-color:var(--sw);box-shadow:0 6px 16px -6px var(--sw)}
.theme-picker label:hover .theme-swatch{transform:translateY(-2px)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Nunito','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 500px at 100% -10%, #dfeafe 0%, rgba(223,234,254,0) 60%),
    radial-gradient(900px 500px at -10% 0%, #f0e9ff 0%, rgba(240,233,255,0) 55%),
    var(--bg);
  color:var(--ink);line-height:1.5;padding-bottom:40px;min-height:100vh;overflow-x:clip;
}
a{color:var(--ink);text-decoration:none}
h1{font-size:1.7rem;margin:.15em 0;font-weight:800;letter-spacing:-.02em}
h2{font-size:1.08rem;margin:0;font-weight:800}
h3{font-size:.95rem;margin:1.3em 0 .5em;font-weight:800}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}
.muted{color:var(--muted);font-size:.9em;font-weight:600}

/* Layout: linke Seitenleiste + Inhaltsspalte */
.shell{display:flex;align-items:stretch;min-height:100vh}
.main-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.18rem;letter-spacing:-.02em;color:var(--ink)}
.brand .mark{width:32px;height:32px;flex:0 0 auto;display:inline-flex;color:var(--accent)}
.sidebar{position:sticky;top:0;flex:0 0 240px;width:240px;height:100vh;overflow-y:auto;z-index:20;
  background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 14px;gap:4px}
.sidebar .brand{padding:6px 8px 14px}
.sidenav{display:flex;flex-direction:column;gap:3px}
.sidenav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;
  color:var(--muted);font-weight:700;font-size:.97rem;transition:.15s}
.sidenav a svg{width:20px;height:20px;flex:0 0 auto}
.sidenav a:hover{background:#eef2fb;color:var(--ink)}
.sidenav a.active{background:var(--accent);color:#fff;box-shadow:0 6px 16px -6px var(--accent)}
.sidenav a.active svg{color:#fff}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
.side-bell,.side-user{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;
  color:var(--muted);font-weight:700;position:relative}
.side-bell svg{width:20px;height:20px;flex:0 0 auto}
.side-bell:hover,.side-user:hover{background:#eef2fb;color:var(--ink)}
.side-user span{font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-bell .bell-badge{position:static;margin-left:auto}
.side-logout{padding:9px 12px;border-radius:12px;color:var(--coral);font-weight:800;font-size:.9rem}
.side-logout:hover{background:#fdeef3}
/* Kopfzeile nur auf schmalen Bildschirmen */
.apptop{display:none}

/* Burger-Menü (nur mobil sichtbar) */
.burger{display:none}
.burger>summary{list-style:none;outline:none}
.burger>summary::-webkit-details-marker{display:none}
.burger-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;color:var(--ink);cursor:pointer;flex:0 0 auto}
.burger-btn svg{width:26px;height:26px}
.burger[open] .burger-btn{background:#eef2fb}
.burger-panel{position:fixed;top:64px;left:0;right:0;max-height:calc(100dvh - 64px);overflow-y:auto;
  background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:25}
.bp-user{display:flex;align-items:center;gap:11px;font-weight:800;padding:16px 0;border-bottom:1px solid var(--line)}
.bp-settings-hint{margin-left:auto;font-size:.8rem;font-weight:800;color:var(--accent)}
.bp-nav{display:flex;flex-direction:column;padding:8px 0 18px}
.bp-nav a{display:flex;align-items:center;gap:13px;padding:13px 10px;border-radius:12px;
  color:var(--ink);font-weight:700;font-size:1rem}
.bp-nav a svg{width:22px;height:22px;color:var(--muted);flex:0 0 auto}
.bp-nav a.active{background:color-mix(in srgb,var(--accent) 13%,#fff);color:var(--accent)}
.bp-nav a.active svg{color:var(--accent)}
.bp-logout{color:var(--coral);border-top:1px solid var(--line);margin-top:8px;padding-top:16px}

@media(max-width:1024px){
  .sidebar{display:none}
  .shell{display:block}
  .main-col{min-height:auto}
  .apptop{display:block;position:sticky;top:0;z-index:20;
    background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .apptop-inner{display:flex;align-items:center;gap:10px;height:60px}
  .apptop .brand{font-size:1.05rem;min-width:0}
  .apptop .brand .mark{width:30px;height:30px}
  .apptop .bell{margin-left:auto}
  .burger{display:block}
}

/* Avatar */
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  color:#fff;font-weight:800;flex:0 0 auto;text-transform:uppercase;
  box-shadow:0 4px 12px -3px rgba(31,36,80,.35)}
.avatar-img{object-fit:cover;background:#eef3fb}
.icon-preview{margin:2px 0 12px}
.swatch-field{margin:2px 0 4px}
.swatch-label{display:block;font-size:.82rem;color:var(--muted);font-weight:800;margin-bottom:6px}

/* Page */
main.wrap{width:100%;max-width:1180px;margin:0 auto;padding-top:26px;padding-bottom:34px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{position:relative;padding-left:16px}
.page-head h1::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:70%;border-radius:6px;background:var(--accent)}
.flash{background:#e7f7ee;border:1px solid #b8e6cd;color:#1c6b45;padding:12px 16px;
  border-radius:14px;margin-bottom:18px;font-weight:700}
.hint{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);
  padding:12px 16px;border-radius:14px;color:var(--muted);font-size:.92rem;margin:0 0 18px;box-shadow:var(--shadow-sm)}

/* Cards / grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-head .mini,.mini{font-size:.82rem;color:var(--accent);font-weight:800}

/* Rows */
.row{display:flex;align-items:center;gap:13px;padding:11px 0;border-top:1px solid var(--line)}
.card .row:first-of-type{border-top:none}
.row-main{display:flex;flex-direction:column;flex:1;min-width:0}
.row-main strong{font-size:.96rem;font-weight:800}
.badge{background:var(--accent);color:#fff;border-radius:999px;padding:3px 12px;font-size:.78rem;font-weight:800;white-space:nowrap}
.datechip{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;
  background:color-mix(in srgb,var(--accent) 14%,#fff);border-radius:14px;flex:0 0 auto}
.dc-day{font-weight:800;font-size:1.1rem;line-height:1;color:var(--ink)}
.dc-mon{font-size:.64rem;color:var(--accent);text-transform:uppercase;font-weight:800;letter-spacing:.04em}
.quicklinks{display:flex;flex-direction:column;gap:9px}
.quicklinks a{display:flex;justify-content:space-between;align-items:center;background:#f4f7fd;
  padding:13px 16px;border-radius:14px;font-weight:800;color:var(--ink);transition:.15s}
.quicklinks a:hover{background:color-mix(in srgb,var(--accent) 12%,#fff);transform:translateX(2px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line);
  color:var(--ink);padding:10px 17px;border-radius:999px;font-weight:800;font-size:.9rem;cursor:pointer;
  font-family:inherit;transition:.15s}
.btn:hover{border-color:#cdd6e8;background:#fbfcfe}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 8px 18px -6px rgba(31,36,80,.5)}
.btn.primary:hover{background:var(--primary-h);border-color:var(--primary-h)}
.btn.small{padding:7px 13px;font-size:.82rem}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.ghost-danger{background:transparent;border-color:transparent;color:var(--coral)}
.btn.ghost-danger:hover{background:#fdeef3}
.linkbtn{background:none;border:none;color:var(--muted);font-size:1.25rem;cursor:pointer;line-height:1;padding:0 4px}
.linkbtn:hover{color:var(--coral)}

/* Member grid */
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:16px}
.member-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  box-shadow:var(--shadow);transition:.15s}
.member-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(31,36,80,.12)}
.member-card strong{font-size:1rem;font-weight:800}
.chip{background:#f4f7fd;border-radius:999px;padding:3px 12px;font-size:.78rem;color:var(--muted);font-weight:700}

/* Profile */
.profile-hero{display:flex;align-items:center;gap:20px;margin-bottom:22px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.deflist{display:grid;gap:2px;margin:0}
.deflist>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.deflist>div:first-child{border-top:none}
.deflist dt{color:var(--muted);font-size:.88rem;font-weight:700}
.deflist dd{margin:0;text-align:right;font-weight:800;font-size:.92rem}
.notes{background:#f4f7fd;border-radius:14px;padding:12px 14px;margin-top:12px;font-size:.9rem;font-weight:600}

/* Editbox / forms */
.editbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  margin-top:20px;box-shadow:var(--shadow);overflow:hidden}
.editbox>summary{padding:16px 20px;font-weight:800;cursor:pointer;list-style:none;display:flex;align-items:center}
.editbox>summary::-webkit-details-marker{display:none}
.editbox>summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin-right:10px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,#fff);
  color:var(--accent);font-weight:900}
.editbox[open]>summary::before{content:"–"}
.form-grid{padding:0 20px 20px;display:flex;flex-direction:column;gap:13px}
.form-grid.card{padding:20px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;align-items:stretch}
/* Eingabefelder einer Reihe unten buendig ausrichten, auch wenn eine Beschriftung umbricht */
.cols>label>input,.cols>label>select,.cols>label>textarea{margin-top:auto}
label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--muted);font-weight:800}
input,select,textarea{font:inherit;font-weight:600;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:12px;background:#fbfcfe;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);background:#fff}
input[type=color]{padding:3px;height:44px}
textarea{resize:vertical}
.form-actions{display:flex;gap:10px;margin-top:6px}
.who{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}
.who legend{font-size:.82rem;color:var(--muted);padding:0 6px;font-weight:800}
.check{flex-direction:row;align-items:center;gap:7px;color:var(--ink);font-weight:700;display:inline-flex;margin:5px 14px 5px 0}
.check input{width:auto}
.danger{margin-top:18px}

/* Auth */
.authcard{max-width:410px;margin:7vh auto;background:var(--panel);border:1px solid var(--line);
  border-radius:26px;padding:30px;box-shadow:0 20px 50px rgba(31,36,80,.14)}
.authcard h1{margin-top:0}
.stack{display:flex;flex-direction:column;gap:15px}
.stack label{color:var(--ink)}
.stack .btn{justify-content:center;margin-top:6px}

/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tab{padding:9px 16px;border-radius:999px;color:var(--muted);font-weight:800;font-size:.9rem;
  background:#fff;border:1.5px solid var(--line)}
.tab:hover{border-color:#cdd6e8}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 6px 16px -5px var(--accent)}

/* Calendar */
.cal-nav{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cal-nav strong{font-size:1.1rem;font-weight:800}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.cal-dow{text-align:center;font-size:.74rem;color:var(--muted);font-weight:800;padding:4px 0}
.cal-cell{background:var(--panel);border:1px solid var(--line);border-radius:14px;min-height:96px;padding:6px;
  display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow-sm)}
.cal-cell.empty{background:transparent;border:none;box-shadow:none}
.cal-cell.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.cal-num{font-size:.8rem;color:var(--muted);font-weight:800}
.cal-cell.today .cal-num{color:var(--accent)}
.cal-ev{display:block;font-size:.72rem;font-weight:700;padding:3px 7px;border-radius:8px;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.cal-ev:hover{filter:brightness(.97)}
@media(max-width:640px){
  .cal-cell{min-height:64px;border-radius:11px}
  .cal-ev{font-size:0;padding:0;border-radius:50%;width:8px;height:8px;display:inline-block}
}

/* Wishlist */
.wishlist{display:flex;flex-direction:column;gap:12px}
.wish{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.wish.is-reserved{opacity:.6}
.wish-main{min-width:0}
.wish-main strong{font-size:1rem;font-weight:800}
.wish-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.prio-hoch{background:#fff0d6;color:#b06a12}
.reslabel{margin-top:8px;font-size:.82rem;color:var(--purple);font-weight:800}
.wish-actions{display:flex;flex-direction:column;gap:7px;align-items:flex-end;flex:0 0 auto}

/* Checklists */
.inline-add{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow-sm)}
.inline-add input,.inline-add select{width:auto;flex:1;min-width:140px}
.inline-add .w-short{max-width:96px;min-width:72px}
.inline-add .w-mid{max-width:180px}
.grouphead{color:var(--muted);text-transform:uppercase;font-size:.74rem;letter-spacing:.06em;font-weight:800}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.checklist li{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:12px 15px;box-shadow:var(--shadow-sm)}
.check-form{display:flex}
.checkbtn{width:24px;height:24px;border:2px solid #c4cde0;border-radius:8px;background:#fff;cursor:pointer;
  color:#fff;font-size:.82rem;line-height:1;flex:0 0 auto;transition:.15s}
.checkbtn:hover{border-color:var(--accent)}
.checkbtn.checked{background:var(--lime);border-color:var(--lime)}
.ci-title{flex:1;font-weight:700}
.ci-title.strike{text-decoration:line-through;color:var(--muted);font-weight:600}
.ci-del{margin-left:auto}
.checklist.done{opacity:.7}
.done-head{display:flex;align-items:center;justify-content:space-between;margin-top:20px}

/* Infos */
.info-list{display:flex;flex-direction:column;gap:9px}
.info-item{display:flex;justify-content:space-between;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.info-val{font-size:1.02rem;font-weight:800;margin-top:3px}

/* Pinboard */
.pinboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:20px}
.pin{background:linear-gradient(160deg,#fffaf0,#fff5e2);border:1px solid #f2e6c8;border-radius:18px;
  padding:16px;box-shadow:var(--shadow-sm)}
.pin p{margin:.4em 0;white-space:pre-wrap;font-weight:600}
.pin-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}

/* Admin */
.admin-list{display:flex;flex-direction:column;gap:11px}
.admin-row{display:flex;gap:13px;align-items:flex-end;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.admin-name{display:flex;align-items:center;gap:10px;font-weight:800;min-width:150px}
.mini-l{flex:1;min-width:130px}

.mainnav a span{white-space:nowrap}

/* Zusatz-Bereichsfarben */
.page-timetable{--accent:#14b1bf}
.page-chat{--accent:#5b74f0}

/* Kalender: Klick auf Tag -> Termin hinzufuegen */
.cal-cell{position:relative}
.cal-add{position:absolute;inset:0;z-index:0;border-radius:14px}
.cal-add:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.cal-num,.cal-ev{position:relative;z-index:1}

/* Geschenk-Erinnerung */
.gift-banner{display:flex;gap:15px;align-items:flex-start;background:linear-gradient(120deg,#fff4e0,#ffe8ca);
  border:1px solid #f2d6a4;border-radius:18px;padding:16px 18px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.gift-icon{width:46px;height:46px;flex:0 0 auto;border-radius:13px;background:#ffab35;color:#fff;
  display:flex;align-items:center;justify-content:center}
.gift-icon svg{width:26px;height:26px}
.gift-body strong{display:block;margin-bottom:5px;color:#8a5713;font-size:1rem}
.gift-line{font-size:.92rem;font-weight:700;color:#7c5a29;padding:2px 0}
.gift-line a{color:#b5710f;font-weight:800;text-decoration:underline}

/* Profil: Aktionen + Telefon */
.profile-hero{flex-wrap:wrap}
.ph-info{flex:1;min-width:180px}
.ph-actions{display:flex;gap:9px;flex-wrap:wrap}
a.tel{color:var(--accent);font-weight:800}

/* Familien-Chat */
.chatbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;height:70vh;max-height:660px}
.chatlog{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.chat-empty{margin:auto;text-align:center}
.msg{display:flex;gap:10px;align-items:flex-end;max-width:82%}
.msg.mine{margin-left:auto;flex-direction:row-reverse}
.msg-bubble{background:#eef3fb;border-radius:16px;padding:9px 13px;position:relative}
.msg.mine .msg-bubble{background:color-mix(in srgb,var(--accent) 15%,#fff)}
.msg-head{display:flex;gap:8px;align-items:baseline;margin-bottom:2px}
.msg-name{font-weight:800;font-size:.82rem}
.msg.mine .msg-name{display:none}
.msg-time{font-size:.7rem;color:var(--muted);font-weight:700}
.msg-body{font-weight:600;white-space:pre-wrap;word-break:break-word}
.msg-del{position:absolute;top:-8px;right:-4px;opacity:0;transition:.15s}
.msg:hover .msg-del{opacity:1}
.chat-compose{display:flex;gap:10px;padding:12px;border-top:1px solid var(--line);background:#fbfcfe;align-items:flex-end}
.chat-compose textarea{flex:1;resize:none;border-radius:22px;padding:11px 16px;min-height:44px}
.chat-compose .btn{align-self:stretch}
/* Sprachmemo im Chat */
.msg-audio{display:flex;align-items:center;gap:8px}
.msg-audio svg{width:20px;height:20px;color:var(--accent);flex:0 0 auto}
.msg-audio audio{height:34px;max-width:200px}
.rec-btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent);padding:0}
.rec-btn svg{width:22px;height:22px}
.rec-btn.rec{background:var(--coral);border-color:var(--coral);color:#fff;animation:micpulse 1.1s infinite}
.rec-status{padding:6px 14px 12px;font-size:.82rem;font-weight:700;color:var(--coral)}
/* Reaktionen (Herz/Kuss/Blume) */
.react-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--line);background:#fbfcfe}
.react-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .12s,box-shadow .12s}
.react-btn:hover{transform:scale(1.12);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.react-btn:active{transform:scale(.94)}
.react-hint{font-size:.78rem;color:var(--muted);font-weight:700;margin-left:2px}
.msg-react{align-self:center;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 14px 5px 8px;box-shadow:var(--shadow);position:relative;max-width:90%}
.msg-react span{font-weight:700;font-size:.85rem}
.msg-react .msg-time{font-size:.7rem}
.msg-react .msg-del{top:-8px;right:-2px}
/* fliegende Reaktionen */
.fly-layer{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.fly-item{position:absolute;bottom:12%;will-change:transform,opacity;animation:flyup 2.6s ease-in forwards}
.fly-item svg{width:34px;height:34px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}
@keyframes flyup{
  0%{transform:translate(0,0) scale(.5) rotate(0);opacity:0}
  12%{opacity:1}
  50%{transform:translate(var(--drift,0),-40vh) scale(1.15) rotate(8deg)}
  100%{transform:translate(var(--drift,0),-82vh) scale(.9) rotate(-6deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){.fly-item{animation-duration:.9s}}

/* Stundenplan */
.tt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.timetable{border-collapse:separate;border-spacing:7px;width:100%;min-width:580px}
.timetable th{font-size:.8rem;color:var(--muted);font-weight:800;padding:2px}
.timetable .tt-slot-h{width:44px}
.tt-short{display:none}
.tt-slot{color:var(--muted);font-weight:800;font-size:.8rem;text-align:center;white-space:nowrap}
.tt-cell{display:flex;flex-direction:column;gap:2px;background:color-mix(in srgb,var(--accent) 13%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 32%,#fff);border-radius:12px;padding:8px 10px;min-height:54px;color:var(--ink)}
.tt-cell:hover{border-color:var(--accent)}
.tt-cell strong{font-size:.86rem;font-weight:800;line-height:1.2}
.tt-meta{font-size:.7rem;color:var(--muted);font-weight:700}
.tt-empty{display:flex;align-items:center;justify-content:center;min-height:54px;border:1.5px dashed var(--line);
  border-radius:12px;color:#c2ccdd;font-size:1.2rem;font-weight:800}
.tt-empty:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:640px){.tt-full{display:none}.tt-short{display:inline}}

/* PWA "App installieren"-Button */
.pwa-install{position:fixed;right:16px;bottom:86px;z-index:40;background:var(--primary);color:#fff;border:none;
  padding:12px 18px;border-radius:999px;font-weight:800;font-family:inherit;cursor:pointer;
  box-shadow:0 12px 26px -6px rgba(31,36,80,.55)}
.pwa-install:hover{background:var(--primary-h)}
@media(min-width:761px){.pwa-install{bottom:20px}}

/* Essensplan */
.page-meals{--accent:#e8703a}
.meal-week{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:14px}
.meal-day{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:13px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:9px}
.meal-day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.meal-day-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:7px}
.mdh-name{font-weight:800}
.mdh-date{font-size:.78rem;color:var(--muted);font-weight:700}
.meal-slot{display:flex;flex-direction:column;gap:4px}
.meal-type{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:800}
.meal-entries{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.meal-chip{background:color-mix(in srgb,var(--accent) 14%,#fff);border:1px solid color-mix(in srgb,var(--accent) 30%,#fff);
  border-radius:9px;padding:4px 9px;font-size:.82rem;font-weight:700;color:var(--ink)}
.meal-chip:hover{border-color:var(--accent)}
.meal-add{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:1.5px dashed var(--line);border-radius:9px;color:#c2ccdd;font-weight:800}
.meal-add:hover{border-color:var(--accent);color:var(--accent)}
.week-shop{margin:16px 0}
.recipe-list{display:flex;flex-direction:column;gap:12px}
.recipe-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden}
.recipe-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px}
.recipe-card>summary::-webkit-details-marker{display:none}
.recipe-card>summary::after{content:"";flex:none;width:9px;height:9px;margin-left:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.recipe-card[open]>summary::after{transform:rotate(-135deg)}
.recipe-card>summary .rc-title{font-size:1rem;font-weight:800}
.recipe-body{padding:2px 16px 15px;display:flex;flex-direction:column;gap:12px}
.recipe-ing,.recipe-steps{font-size:.9rem;color:var(--ink);font-weight:600;white-space:pre-wrap}
.recipe-ing strong,.recipe-steps strong{font-weight:800;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
.recipe-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.recipe-actions form{margin:0}

/* Rezept-Sterne: Durchschnitt (Kopf) + eigene Bewertung (klickbar) */
.rate-avg{margin-left:auto;display:inline-flex;align-items:center;gap:1px}
.rate-avg .ra-star{color:#d7dded;display:inline-flex}
.rate-avg .ra-star.on{color:#f2b600}
.rate-avg small{margin-left:6px;color:var(--muted);font-weight:700;font-size:.76rem}
.rate-form{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rate-form .rate-label{font-weight:700;color:var(--muted);font-size:.85rem;margin-right:4px}
.rate-star{background:none;border:none;padding:2px;cursor:pointer;color:#d7dded;line-height:0}
.rate-star.on{color:#f2b600}
.rate-star:hover{color:#f2b600;transform:scale(1.12)}

/* Belohnungssystem / Sterne */
.page-rewards{--accent:#f0a500}
.star{flex:0 0 auto}
.star-chip{display:inline-flex;align-items:center;gap:3px;background:#fff6e0;color:#a86b12;
  border-radius:999px;padding:2px 9px;font-weight:800;font-size:.8rem;vertical-align:middle}
.star-chip .star{color:#f5b301}
.star-chip.big{font-size:.95rem;padding:4px 11px}
.stars-hero{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);margin-bottom:16px}
.sh-info strong{font-size:1.05rem;font-weight:800;display:block}
.sh-balance{display:flex;align-items:flex-end;gap:6px;font-size:1.7rem;font-weight:900;color:#c98a12;line-height:1}
.sh-balance .star{color:#f5b301}
.sh-balance small{font-size:.8rem;color:var(--muted);font-weight:700;margin-bottom:4px}
.award-form{display:flex;gap:9px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:12px;box-shadow:var(--shadow-sm);margin-bottom:6px}
.award-form input[name=reason]{flex:1;min-width:160px;width:auto}
.award-form .w-short{max-width:90px}
.reward-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.reward-card{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:15px;box-shadow:var(--shadow-sm)}
.reward-card.locked{opacity:.72}
.reward-cost{display:inline-flex;align-items:center;gap:4px;background:#fff6e0;color:#a86b12;font-weight:900;
  border-radius:999px;padding:3px 10px;font-size:.85rem;align-self:flex-start}
.reward-cost .star{color:#f5b301}
.reward-card strong{font-size:.98rem;font-weight:800}
.reward-redeem{margin-top:4px}
.reward-admin{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;font-size:.82rem}
.reward-admin a{color:var(--muted);font-weight:700}
.tx-list{display:flex;flex-direction:column;gap:6px}
.tx-row{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;box-shadow:var(--shadow-sm)}
.tx-reason{flex:1;font-weight:700}
.tx-date{font-size:.8rem}
.tx-delta{font-weight:900;min-width:38px;text-align:right}
.tx-delta.plus{color:#2f9e5f}
.tx-delta.minus{color:var(--coral)}

/* Mini-Spiele */
.page-games{--accent:#7c5cff}
.game-players{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:12px;font-weight:800}
.gp{display:inline-flex;align-items:center;gap:7px}
.gp .sym{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;color:#fff;font-weight:900}
.gp.x .sym{background:#4c8dff}
.gp.o .sym{background:#f56a92}
.gp-vs{color:var(--muted);font-weight:700}
.game-status{text-align:center;font-weight:800;margin-bottom:16px;padding:10px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line)}
.game-status.active{background:color-mix(in srgb,var(--accent) 15%,#fff);
  border-color:color-mix(in srgb,var(--accent) 32%,#fff)}
.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:340px;margin:0 auto 18px}
.ttt-cellform{display:flex}
.ttt-cell{aspect-ratio:1;width:100%;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:2px solid var(--line);border-radius:16px;font-size:2.6rem;font-weight:900;
  box-shadow:var(--shadow-sm);cursor:default;font-family:inherit}
button.ttt-cell.empty{cursor:pointer}
button.ttt-cell.empty:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff)}
.ttt-cell.x{color:#4c8dff}
.ttt-cell.o{color:#f56a92}
.c4-wrap{max-width:420px;margin:0 auto 18px}
.c4-drops{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.c4-drop{aspect-ratio:1;border:1.5px dashed var(--line);border-radius:10px;background:#fff;color:var(--accent);
  font-size:1.1rem;font-weight:900;cursor:pointer;font-family:inherit}
.c4-drop:hover:not(:disabled){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,#fff)}
.c4-drop:disabled{opacity:.3;cursor:not-allowed}
.c4-board{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:#dbe3f4;padding:8px;border-radius:16px}
.c4-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.disc{width:84%;height:84%;border-radius:50%;background:#fff;box-shadow:inset 0 2px 4px rgba(0,0,0,.14)}
.disc.x{background:#4c8dff}
.disc.o{background:#f56a92}
.game-foot{display:flex;gap:10px;justify-content:center;margin-bottom:8px}
.game-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.game-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:11px 15px;box-shadow:var(--shadow-sm)}
.game-row:hover{border-color:var(--accent)}
.game-badge{width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:10px;font-weight:900;color:#fff;font-size:.82rem}
.game-badge.ttt{background:#4c8dff}
.game-badge.c4{background:#7c5cff}

/* Benachrichtigungs-Glocke */
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;color:var(--muted);flex:0 0 auto}
.bell:hover{background:#eef2fb;color:var(--ink)}
.bell svg{width:22px;height:22px}
.bell-badge{position:absolute;top:5px;right:5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  background:var(--coral);color:#fff;font-size:.66rem;font-weight:800;display:flex;align-items:center;
  justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--panel)}

/* Lange Werte umbrechen, damit nichts seitlich rausragt */
.deflist dd,.info-val,.recipe-ing,.tel,.wish-main strong{overflow-wrap:anywhere}

/* Essens-Roulette */
.roulette-card{margin-bottom:16px}
.roulette-display{font-size:1.5rem;font-weight:900;text-align:center;padding:20px;border-radius:14px;min-height:66px;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--ink);
  background:color-mix(in srgb,var(--accent) 10%,#fff);border:1.5px dashed color-mix(in srgb,var(--accent) 38%,#fff)}
.roulette-display.spinning{opacity:.85}
.roulette-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}

/* Verwandte */
.rel-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:0 0 auto}
.rel-actions .mini{color:var(--muted);font-weight:700}

/* Ferien im Kalender */
.ferien-banner{display:flex;flex-wrap:wrap;gap:7px 14px;align-items:center;
  background:color-mix(in srgb,var(--accent) 10%,#fff);border:1px solid color-mix(in srgb,var(--accent) 26%,#fff);
  border-left:4px solid var(--accent);border-radius:12px;padding:10px 14px;margin-bottom:14px}
.fb-label{font-weight:800;color:var(--accent);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em}
.fb-item{font-size:.85rem;color:var(--ink);font-weight:600}
.cal-cell.holiday{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,#fff),#fff)}
.cal-cell.holiday .cal-num{color:var(--accent)}
.cal-ferien-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:5px;vertical-align:middle}
.cal-ferien-tag{display:block;font-size:.62rem;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,#fff);border-radius:5px;
  padding:1px 5px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.cal-ferien-tag{display:none}}

/* Foto-Upload mit Kamera-Symbol */
.filepick{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.fp-btn{display:inline-flex;align-items:center;gap:9px;position:relative;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;padding:11px 15px;font-weight:800;color:var(--ink);cursor:pointer;font-size:.9rem}
.fp-btn:hover{border-color:var(--accent)}
.fp-btn svg{width:22px;height:22px;color:var(--accent)}
.fp-btn input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.fp-name{font-size:.82rem}

/* Einladungslinks */
.invite-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-sm)}
.invite-link{flex:1;min-width:200px;font-size:.8rem;font-family:ui-monospace,Menlo,Consolas,monospace;background:#f4f7fd}

/* Kind-Dashboard: Sterne-Hero ohne doppelten Rahmen in der Karte */
.kid-hero{box-shadow:none;border:none;padding:2px 0;margin:0;background:transparent}

/* KI-Eingabe mit Mikrofon */
.ai-input{display:flex;gap:8px;align-items:stretch}
.ai-input textarea{flex:1}
.mic-btn{flex:0 0 auto;padding:0 14px;display:flex;align-items:center;justify-content:center}
.mic-btn svg{width:22px;height:22px}
.mic-btn.rec{background:var(--coral);border-color:var(--coral);color:#fff;animation:micpulse 1.1s infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(245,106,146,.5)}50%{box-shadow:0 0 0 7px rgba(245,106,146,0)}}

/* ---- Shop, Mini-Kalender, Footer, breite Karte ---- */
.page-shop{--accent:#f0a500}
.card-wide{grid-column:1/-1}

/* Startseiten-Mini-Kalender */
.minical{margin-top:4px}
.mc-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mc-dow{text-align:center;font-size:.66rem;font-weight:800;color:var(--muted);padding-bottom:2px}
.mc-cell{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:9px;font-size:.82rem;font-weight:700;color:var(--ink);background:color-mix(in srgb,var(--accent) 7%,#fff)}
.mc-cell.empty{background:transparent}
.mc-cell.today{background:var(--accent);color:#fff;box-shadow:0 4px 12px -4px var(--accent)}
.mc-cell.has::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--accent)}
.mc-cell.today.has::after{background:#fff}

/* Shop */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:18px}
.shop-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;display:flex;flex-direction:column;gap:12px}
.shop-item .si-body strong{font-size:1.02rem}
.shop-item .si-body p{margin:6px 0 0;font-size:.88rem}
.si-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.si-foot .price{display:inline-flex;align-items:center;gap:5px;font-weight:900;font-size:1.05rem;color:#a86b12}
.si-foot .price .star{color:#f5b301}
.si-foot form{margin:0}

/* Footer mit Schnellzugriff */
.appfoot{border-top:1px solid var(--line);margin-top:36px;padding:22px 0 8px;
  background:color-mix(in srgb,var(--accent) 5%,transparent)}
.appfoot .foot-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:var(--muted);margin-bottom:10px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 10px}
.foot-links a{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-weight:700;font-size:.86rem;transition:.15s}
.foot-links a:hover{border-color:var(--accent);color:var(--accent)}
.foot-copy{margin-top:14px;font-size:.8rem;color:var(--muted);font-weight:700}

/* Kalender: Umschalter Monat/Woche + Wochenansicht */
.cal-toggle{display:inline-flex;gap:6px;margin-left:auto}
.cal-toggle .btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.calweek{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cw-cell{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  min-height:150px;padding:8px;display:flex;flex-direction:column;gap:4px}
.cw-cell.today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.cw-cell.holiday{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,#fff),#fff)}
.cw-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:5px}
.cw-dow{font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase}
.cw-num{font-weight:800}
.cw-cell.today .cw-num{color:var(--accent)}
.cw-cell .cal-ev{position:relative;z-index:1}
@media(max-width:720px){
  .calweek{grid-template-columns:1fr}
  .cw-cell{min-height:0}
  .cw-head{border-bottom:1px solid var(--line);padding-bottom:5px}
  .cal-toggle{margin-left:0}
}

/* Sprachmemo-Aufnahme (Aufgaben, Shop) + Kategorie-Icons + Shop-Medien */
.memo-field{display:inline-flex;align-items:center;gap:8px}
.memo-block{flex-direction:column;align-items:flex-start;gap:6px}
.memo-rec{flex:0 0 auto}
.memo-rec svg{width:20px;height:20px;vertical-align:middle}
.memo-rec.rec{background:var(--coral);border-color:var(--coral);color:#fff;animation:micpulse 1.1s infinite}
.memo-status{font-size:.8rem;font-weight:700;color:var(--muted)}
.taskcat{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,#fff)}
.ci-title .taskcat{width:26px;height:26px;border-radius:8px;vertical-align:middle;margin-right:4px}
.task-audio{height:32px;max-width:210px;vertical-align:middle;display:inline-block}
.si-photo{width:100%;height:150px;object-fit:cover;border-radius:14px;margin-bottom:4px;background:#eef3fb}
.si-audio{width:100%;height:34px;margin-top:2px}

/* Dashboard-Uhr, Routine, Bettzeit-Banner */
.clock-card{display:flex;flex-direction:column;justify-content:center;gap:8px}
.clock{display:flex;flex-direction:column;gap:2px}
.clock-time{font-size:2.5rem;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;color:var(--accent)}
.clock-date{font-weight:700;color:var(--muted)}
.clock-bed{margin-top:6px;font-weight:800;font-size:.92rem}
.routine-list li{gap:12px}
.routine-reward{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.section-sep{margin:28px 0 14px}
.bed-banner{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:70;
  background:var(--primary);color:#fff;padding:12px 18px;border-radius:16px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:14px;font-weight:700;max-width:92vw}
.bed-banner button{background:#fff;color:var(--primary);border:none;border-radius:999px;
  padding:6px 15px;font-weight:800;cursor:pointer;flex:0 0 auto}

/* Anklickbare Chat-Info -> Aufgabe */
.msg-link{display:inline-block;margin-top:7px;font-weight:800;font-size:.84rem;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 13%,#fff);border-radius:999px;padding:5px 13px}
.msg-link:hover{background:color-mix(in srgb,var(--accent) 22%,#fff)}
.checklist li:target{background:color-mix(in srgb,var(--accent) 14%,#fff);border-radius:10px;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,#fff)}

/* Zeiten pro Tag (Kind-Zeitplan) */
.sched-pick{margin-bottom:14px}
.sched-grid{display:flex;flex-direction:column;gap:8px}
.sched-head,.sched-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;align-items:center}
.sched-head{font-size:.74rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.sched-day{font-weight:800}
.sched-row input{width:100%}
@media(max-width:520px){
  .sched-head span:first-child,.sched-day{grid-column:1/-1}
  .sched-head,.sched-row{grid-template-columns:1fr 1fr}
}

/* Schnell-Bonus + Taschengeld */
.quick-award{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 6px}
.quick-award form{margin:0}
.check-inline{flex-direction:row!important;align-items:center;gap:8px}
.check-inline input{width:auto}

/* Menue-Gruppe (Verwaltung) */
.nav-group{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:14px 13px 5px}
.bp-group{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:12px 10px 4px}
/* Badge "fertig" */
.badge.ok{background:var(--lime)}
/* Schnellanlage Aufgabe (Dashboard) */
.quick-task{display:flex;flex-direction:column;gap:8px}
.quick-task input[name=title]{width:100%}
.qt-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qt-row .w-mid{flex:1 1 auto;min-width:110px}
/* Aufgaben-Uebersicht (tasks.php) */
.task-overview{margin-bottom:18px}
.ov-card{display:flex;flex-direction:column;gap:8px}
.ov-head{display:flex;align-items:center;gap:10px}
.ov-head strong{flex:1}
.ov-bar{height:8px;border-radius:999px;background:#eef2fb;overflow:hidden}
.ov-bar span{display:block;height:100%;background:var(--lime);border-radius:999px}
/* Kontoauszug: Saldo */
.tx-bal{display:inline-flex;align-items:center;gap:3px;font-weight:800;font-size:.82rem;color:var(--muted);
  min-width:44px;justify-content:flex-end}
.tx-bal .star{color:#f5b301}

/* Herzen (Eltern-Waehrung) */
.heart{color:#f56a92}
.heart-chip{display:inline-flex;align-items:center;gap:4px;background:#ffe9f0;color:#c43668;
  border-radius:999px;padding:3px 11px;font-weight:800;font-size:.9rem}
.heart-chip .heart{color:#f56a92}
.heart-chip.big{font-size:1.05rem;padding:5px 13px}
.price.heart{color:#c43668}
.price.heart .heart{color:#f56a92}
.tx-bal.heart{color:#c43668}
.tx-bal.heart .heart{color:#f56a92}
.si-actions{display:flex;align-items:center;gap:8px}
.si-actions form{margin:0}
.hearts-hero{display:flex;align-items:center;gap:12px}
.hearts-hero .heart-chip.big{font-size:1.5rem;padding:8px 16px}

/* Junge Kinder-Ansicht (Emojis) */
.young-hero{display:flex;align-items:center;gap:16px;background:var(--panel);border-radius:24px;
  box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.yh-txt{display:flex;flex-direction:column}
.yh-hi{font-size:1.4rem;font-weight:900}
.yh-stars{font-size:1.6rem;font-weight:900;color:#a86b12}
.young-card{background:var(--panel);border-radius:24px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:18px}
.young-card.done-all{text-align:center}
.yc-title{font-size:1.2rem;font-weight:900;margin-bottom:10px}
.young-task{display:flex;align-items:center;gap:12px;padding:10px 6px;border-top:2px solid var(--line);margin:0}
.young-task:first-of-type{border-top:none}
.young-task .yt-emoji{font-size:1.8rem;line-height:1}
.young-task .yt-title{flex:1;font-size:1.15rem;font-weight:800}
.young-task .yt-stars{color:#a86b12;font-weight:900;white-space:nowrap}
.checkbtn.big{width:40px;height:40px;border-radius:12px;font-size:1.4rem}
.young-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.ytile{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--panel);
  border-radius:24px;box-shadow:var(--shadow);padding:22px 12px;font-weight:900;font-size:1.05rem;
  color:var(--ink);transition:transform .12s,box-shadow .12s}
.ytile:hover{transform:translateY(-4px);box-shadow:0 14px 30px -10px rgba(31,36,80,.28)}
.ytile:active{transform:scale(.96)}
.ytile .emoji{font-size:2.8rem;line-height:1}
/* Konfetti/Sterne-Feier */
.celebrate-layer{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.confetti{position:fixed;font-size:24px;will-change:transform,opacity;animation:pop 1.15s ease-out forwards}
@keyframes pop{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:0}
  15%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 140px)) scale(1.05) rotate(35deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){.confetti{animation-duration:.5s}}

/* Emoji im Menue (junge Kinder) */
.nav-emoji{font-size:1.3rem;width:22px;text-align:center;flex:0 0 auto;line-height:1}
.bp-nav .nav-emoji{font-size:1.5rem;width:26px}
body.ui-young .sidenav a{font-size:1.05rem}

/* Kalender-Agenda (7 Tage) */
.agenda{display:flex;flex-direction:column;gap:10px}
.ag-day{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:12px 14px}
.ag-day.today{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,#fff)}
.ag-date{display:flex;align-items:center;gap:10px}
.ag-dow{font-weight:900}
.ag-num{color:var(--muted);font-weight:700;font-size:.9rem}
.ag-ferien{font-size:.8rem;font-weight:700;color:var(--accent)}
.ag-add{margin-left:auto;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,#fff);
  color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;flex:0 0 auto}
.ag-empty{font-size:.9rem;padding:4px 0 0}
.ag-ev{display:flex;align-items:center;gap:8px;padding:8px 10px;border-left:4px solid;border-radius:8px;
  background:#f7f9fd;margin-top:8px;font-weight:700;color:var(--ink)}
.ag-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ag-cat{margin-left:auto;font-size:.78rem}

/* Lernen & Spielen */
.learn-tiles{max-width:520px}
.learn-box{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:20px;max-width:560px;margin:0 auto}
.learn-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.math-q{font-size:2rem;font-weight:900;text-align:center;margin:8px 0 16px}
.count-emojis{font-size:2rem;line-height:1.3;margin-top:8px;word-break:break-word}
.math-answers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.math-opt{font-size:1.6rem;font-weight:900;padding:16px}
.math-opt.right{background:var(--lime);border-color:var(--lime);color:#fff}
.math-opt.wrong{background:#fdeef3;border-color:var(--coral);color:var(--coral)}
.math-fb{min-height:24px;text-align:center;font-weight:800;margin-top:12px}
.math-score{text-align:center;margin-top:8px;font-weight:800;color:var(--muted)}
.memory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;max-width:680px;margin:0 auto}
.mcard{aspect-ratio:1;border-radius:14px;border:2px solid var(--line);background:var(--panel);cursor:pointer;
  position:relative;overflow:hidden;padding:0;display:flex;align-items:center;justify-content:center}
.mcard .mc-back{font-size:1.8rem}
.mcard .mc-face{display:none;width:100%;height:100%}
.mcard .mc-face img{width:100%;height:100%;object-fit:cover}
.mcard .mc-ini{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1.4rem}
.mcard .mc-emo{font-size:2.2rem}
.mcard.flip .mc-back,.mcard.done .mc-back{display:none}
.mcard.flip .mc-face,.mcard.done .mc-face{display:flex;align-items:center;justify-content:center}
.mcard.done{border-color:var(--lime);opacity:.6}
.trace-wrap{position:relative;width:320px;max-width:82vw;aspect-ratio:1;margin:8px auto}
.trace-wrap canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:16px}
#traceBg{border:2px solid var(--line);background:#fff}
#traceCv{touch-action:none}
.lt-current{font-size:1.6rem;font-weight:900;min-width:32px;text-align:center}

/* Memory-Bilder verwalten */
.mem-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;margin-top:12px}
.mem-thumb{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.mem-thumb img{width:100%;height:100%;object-fit:cover}
.mt-del{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;border:none;
  background:rgba(0,0,0,.55);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer}
.mem-thumb form{margin:0}

/* Sprachnachricht als kleiner Play-Button */
.play-audio{width:38px;height:38px;border-radius:50%;border:none;flex:0 0 auto;cursor:pointer;
  background:color-mix(in srgb,var(--accent) 15%,#fff);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;padding:0}
.play-audio svg{width:20px;height:20px}
.play-audio.playing{background:var(--accent);color:#fff}
/* Junge Aufgabe: kein Umbruch */
.young-task .yt-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.young-task .yt-stars{white-space:nowrap}
.yh-label{color:var(--muted);font-weight:700;font-size:.9rem}

/* Junge Kinder: Infotexte ausblenden */
body.ui-young .hint{display:none}
/* Zurück-zur-Startseite-Knopf (Kinder, mobil) */
.home-fab{position:fixed;left:16px;bottom:16px;z-index:45;display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:#fff;font-weight:900;font-size:1.05rem;padding:12px 18px;border-radius:999px;
  box-shadow:0 10px 24px -6px var(--accent)}
@media(min-width:1025px){.home-fab{display:none}}
/* Einheitliche Abstände zwischen gestapelten Karten */
.card{margin-bottom:18px}
.grid .card{margin-bottom:0}
.editbox{margin-bottom:18px}

/* Notfall / Alarm */
.btn.big{font-size:1.1rem;padding:14px 22px}
.ytile-alarm{background:linear-gradient(160deg,#ffdede,#ffecec);color:#c0332e}
.alarm-mini{display:flex;align-items:center;gap:12px;text-decoration:none;
  background:linear-gradient(160deg,#ffe3e3,#fff1f1);border:1px solid #ffd0d0;color:#c0332e;font-weight:800}
.alarm-mini .emoji{font-size:1.8rem;line-height:1}
.alarm-mini strong{font-size:1.05rem}
.alarm-mini .muted{margin-left:auto;color:#c0332e;opacity:.75}
.alarm-addr{font-size:1.3rem;font-weight:800;margin:0}
.alarm-call{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;
  border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.alarm-call:first-of-type{border-top:none}
.ac-name{font-weight:800;font-size:1.05rem}
.loc-status{margin-top:10px;font-weight:700;color:var(--muted)}

/* Wunsch aufsprechen (kleine Kinder) */
.wish-voice{text-align:center}
#wishRec.rec{background:var(--coral);border-color:var(--coral);color:#fff;animation:micpulse 1.1s infinite}
.wish-meta{align-items:center}

/* Lernen: Level + Uhr + Buchstaben-Tabs */
.learn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.lvl-badge{background:var(--accent);color:#fff;font-weight:900;border-radius:999px;padding:5px 14px;font-size:.95rem}
.clock-wrap{display:flex;justify-content:center;margin:8px 0 14px}
.learnclock{width:220px;max-width:70vw;height:auto}
.lc-face{fill:#fff;stroke:var(--line);stroke-width:3}
.lc-t{stroke:var(--muted);stroke-width:2}
.lc-h{stroke:var(--ink);stroke-width:6;stroke-linecap:round}
.lc-m{stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.lc-c{fill:var(--ink)}
.lt-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.lt-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.lt-case{margin-left:auto;font-weight:900}

/* Strafpunkte / Abzüge + Aufgaben-Aktionen + heutige Sterne */
.quick-award.penalties{margin-top:2px}
.task-admin-actions{display:flex;align-items:center;gap:8px}
.task-admin-actions form{margin:0}
.today-stars{display:inline-flex;align-items:center;gap:8px;font-weight:800;margin-right:6px}
.routine-reward{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* Eltern im Kind-Konto / Foto-Dropzone / Lernstatistik */
.impersonate-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:#fff3d6;border:1px solid #f0d89a;color:#8a5a00;padding:10px 14px;border-radius:12px;margin-bottom:16px;font-weight:700}
.filepick.drag{outline:2px dashed var(--accent);outline-offset:3px;border-radius:12px;background:color-mix(in srgb,var(--accent) 8%,#fff)}
.learn-stats{display:flex;flex-direction:column;gap:2px}
.ls-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.ls-item:first-child{border-top:none}
.ls-emoji{font-size:1.4rem;width:30px;text-align:center;flex:0 0 auto}
.ls-name{font-weight:800;flex:0 0 110px}
.ls-val{margin-left:auto;font-weight:700;display:flex;align-items:center;gap:8px}
.ls-val .lvl-badge{font-size:.8rem;padding:3px 10px}

/* Buchstaben: Anhören-Button mittig + Tabs zentriert */
.lt-tabs{justify-content:center}
.lt-say{text-align:center}
.lt-say #saySay{margin:2px auto 14px}
.lt-say .math-answers{text-align:left}
/* Eltern-Stimme aufnehmen (Raster) */
.voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:8px}
.voice-chip{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 8px}
.voice-chip.has{border-color:var(--lime);background:color-mix(in srgb,var(--lime) 8%,#fff)}
.vc-sym{font-size:1.5rem;font-weight:900}
.vc-rec{width:34px;height:34px;border-radius:50%;border:none;background:#ffe3e3;color:#c0332e;font-size:1rem;cursor:pointer}
.voice-chip.rec .vc-rec{background:var(--coral);color:#fff;animation:micpulse 1.1s infinite}
.vc-play{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:50%;border:none;background:#eef2fb;color:var(--accent);cursor:pointer;font-size:.7rem}
.vc-del{position:absolute;top:6px;right:6px;margin:0}
.vc-del button{width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,.15);color:#fff;font-size:1rem;line-height:1;cursor:pointer}

/* Chat vorlesen / junge Kinder / Begrüßung / Feed */
.msg-read{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.95rem;margin-top:4px;padding:0;line-height:1}
.msg-read:hover{color:var(--accent)}
.compose-hint{flex:1;color:var(--muted);font-weight:700;align-self:center}
.greeting{font-weight:700;color:var(--ink)}
.greeting .play-audio{width:30px;height:30px;vertical-align:middle}
.greet-current{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.feed{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto}
.feed-post{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.fp-head{display:flex;align-items:center;gap:10px;padding:12px 14px}
.fp-head strong{font-weight:800}
.fp-head .muted{font-size:.8rem}
.fp-del{margin-left:auto}
.fp-photo{width:100%;display:block;background:#eef3fb}
.fp-cap{padding:12px 14px;font-weight:600;margin:0}

/* Eltern-Shop: Medien mit Blur bis freigeschaltet, Video-Dauer, Download */
.si-media{position:relative;border-radius:12px;overflow:hidden;background:#0d1526;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.si-media .si-photo,.si-media .si-video{width:100%;height:100%;object-fit:cover;display:block}
.si-media.blurred .si-photo,.si-media.blurred .si-video{filter:blur(28px) saturate(1.15) brightness(.92);transform:scale(1.15);pointer-events:none}
/* Zusaetzliche Frosted-Schicht ueber dem Bild – wirkt auch, falls filter auf dem <img> ignoriert wird */
.si-media.blurred::after{content:"";position:absolute;inset:0;z-index:1;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);background:rgba(13,21,38,.30)}
.si-media .lock-badge{position:absolute;z-index:2;inset:auto 0 0 0;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;font-weight:800;font-size:.8rem;color:#fff;background:linear-gradient(0deg,rgba(6,12,26,.82),rgba(6,12,26,.15))}
.si-media .vid-dur{z-index:2}
.si-media .lock-badge .heart{color:var(--coral,#ff5d73)}
.si-media .vid-dur{position:absolute;top:8px;right:8px;background:rgba(6,12,26,.78);color:#fff;font-size:.72rem;font-weight:800;padding:2px 7px;border-radius:999px;letter-spacing:.02em}
.si-body{padding:8px 2px 0}
.si-body strong{display:block;font-weight:800}
.si-body .si-audio{width:100%;height:34px;margin-top:6px}
.si-body p.muted{margin:4px 0 0;font-size:.86rem}
.chip.ok{background:#e7f6ec;color:#1f7a44;font-weight:800;font-size:.74rem;padding:2px 9px;border-radius:999px}
.chip.mine{background:#eef2fb;color:#556684;font-weight:800;font-size:.74rem;padding:2px 9px;border-radius:999px}
.si-actions a.btn[download]{text-decoration:none}

/* PIN-Gate Eltern-Shop */
.pin-gate .award-form{margin-top:6px}
.pin-gate input[type=password]{letter-spacing:.3em}

/* Eltern-Status (nur zwischen Eltern) – Kacheln mit Emojis, kein Text */
.pstatus-grid{display:flex;flex-wrap:wrap;gap:10px}
.ps-tile{flex:1 1 140px;min-width:130px;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;background:#f6f9ff;display:flex;flex-direction:column;gap:8px}
.ps-tile-lbl{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ps-tile-other{align-items:center;justify-content:center;text-align:center}
.ps-big{font-size:2.2rem;line-height:1}
.ps-big.muted{color:var(--muted);font-weight:800}
.pstatus-picker{display:flex;gap:8px}
.pstatus-picker form{margin:0}
.ps-opt{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;border:1.5px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;line-height:1}
.ps-opt:hover{border-color:var(--accent)}
.ps-opt.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,#fff)}

/* Junge-Kinder-Startseite: große Uhr */
.young-clock{background:var(--panel);border:2px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:14px 18px;margin:0 0 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.young-clock .yc-time{font-size:3.2rem;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;color:var(--accent)}
.young-clock .yc-date{font-size:1.05rem;font-weight:800;color:var(--ink)}
.young-clock .yc-bed{margin-top:4px;font-size:.95rem;font-weight:700;color:var(--muted)}

/* Kinder-Shop: Preis inline bearbeiten */
.price-edit{display:flex;align-items:center;gap:6px;margin:0}
.price-edit .pe-star{display:inline-flex;color:var(--gold,#e0a500)}
.price-edit .pe-input{width:64px;padding:5px 7px;border:1.5px solid var(--line);border-radius:9px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center;background:var(--panel);color:var(--ink)}
.price-edit .pe-input:focus{border-color:var(--accent);outline:none}
.shop-kids-foot,.shop-item .si-foot{flex-wrap:wrap;gap:8px}

/* Große Uhr neben dem Namen (Dashboard-Header) */
.dash-head .dh-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.head-clock{margin-left:auto;font-size:2rem;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1}
@media(max-width:520px){.head-clock{font-size:1.6rem;margin-left:0}}

/* Stundenplan: „Jetzt / Als Nächstes" gut sichtbar */
.tt-now{background:var(--panel);border:2px solid var(--accent);border-radius:16px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:16px}
.tt-now.free{border-color:var(--line)}
.tt-now-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.tt-now-head .tt-today{font-size:1.15rem;font-weight:900;color:var(--ink)}
.tt-now-head .tt-clock{font-size:1.9rem;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.tt-now-free{font-weight:700;color:var(--muted)}
.tt-now-lessons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.tt-now-lessons{grid-template-columns:1fr}.tt-now-head .tt-clock{font-size:1.6rem}}
.tt-nowbox{display:flex;flex-direction:column;gap:2px;border-radius:12px;padding:10px 12px;border:1.5px solid var(--line);background:#f6f9ff}
.tt-nowbox .nb-lbl{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tt-nowbox .nb-subj{font-size:1.15rem;font-weight:900;color:var(--ink);line-height:1.15}
.tt-nowbox .nb-meta{font-size:.82rem;font-weight:700;color:var(--muted)}
.tt-nowbox .nb-none{font-weight:700;color:var(--muted);padding:3px 0}
.tt-nowbox.is-now{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,#fff)}
.tt-nowbox.is-now .nb-lbl,.tt-nowbox.is-now .nb-subj{color:var(--accent)}
.tt-nowbox.is-next{border-color:color-mix(in srgb,var(--accent) 40%,#fff)}

/* Heutige Spalte + aktuelle/naechste Stunde im Raster hervorheben */
.timetable th.today{color:var(--accent)}
.timetable th.today::after{content:"";display:block;height:3px;border-radius:3px;background:var(--accent);margin-top:4px}
.timetable td.today{background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:12px}
.tt-cell.now{border-color:var(--accent);border-width:2px;background:color-mix(in srgb,var(--accent) 22%,#fff);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,#fff)}
.tt-cell.now strong{color:var(--accent)}
.tt-cell.next{border-color:color-mix(in srgb,var(--accent) 55%,#fff);border-width:2px}
.tt-free-cell{display:block;min-height:54px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--line) 70%,transparent)}

/* Chili-Checkbox im Eltern-Produktformular */
/* Kleine, unauffaellige Chili-Checkbox neben "Anlegen" */
.spicy-mini{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:1.1rem;line-height:1;user-select:none}
.spicy-mini input{width:16px;height:16px;accent-color:#e0492b;margin:0}

/* „Kacheln anordnen"-Link unter den jungen Kacheln */
.young-arrange{text-align:center;margin-top:12px}
.young-arrange a{font-weight:800;color:var(--accent);text-decoration:none}

/* Kachel-Reihenfolge in den Einstellungen */
.tile-order{display:flex;flex-direction:column;gap:8px}
.tile-order-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--panel)}
.tile-order-row .to-emoji{font-size:1.5rem;line-height:1}
.tile-order-row .to-label{font-weight:800;flex:1}
.tile-order-row .to-btns{display:flex;gap:6px}
.tile-order-row .to-btns form{margin:0}
.to-btn{width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line);background:#f6f9ff;color:var(--accent);font-size:1.1rem;font-weight:900;cursor:pointer;line-height:1}
.to-btn:hover:not(:disabled){border-color:var(--accent)}
.to-btn:disabled{opacity:.35;cursor:default}

/* Termin: Ganztägig + Von/Bis */
.check-allday{display:flex;align-items:center;gap:7px;font-weight:700;align-self:end}
.ev-time input:disabled{opacity:.45;background:#f1f4fa;cursor:not-allowed}

/* Header: Status des anderen Elternteils rechts neben "Hallo …" */
.head-status{margin-left:auto;display:flex;gap:8px;align-items:center}
.head-status .hs-item{font-size:1.7rem;line-height:1}

/* Admin-Dashboard: Aufgaben je Kind direkt gelistet */
.child-tasks{padding:8px 0;border-bottom:1px solid var(--line)}
.child-tasks:last-child{border-bottom:none}
.child-tasks .ct-head{display:flex;align-items:center;gap:10px}
.child-tasks .ct-head strong{font-weight:800;flex:1}
.child-tasks .ct-list{list-style:none;margin:6px 0 0;padding:0 0 0 42px;display:flex;flex-direction:column;gap:4px}
.child-tasks .ct-list li{display:flex;align-items:center;gap:6px;font-weight:600}
.child-tasks .ct-list .ct-pts{display:inline-flex;align-items:center;gap:2px;color:#e0a500;font-weight:800;font-size:.8rem}
.child-tasks .ct-empty{margin:4px 0 0;padding-left:42px;font-size:.86rem}

/* Routine verwalten: mehr Abstand zur "Bettzeit & Sterne"-Karte */
.routine-manage{margin-bottom:28px}

/* Info-„i" neben der Überschrift mit Mini-Popup (statt Dauertext) */
.info-wrap{position:relative;display:inline-flex;vertical-align:middle;margin-left:8px}
.info-i{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--accent);background:var(--panel);color:var(--accent);font-weight:800;font-size:.74rem;font-style:italic;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:Georgia,'Times New Roman',serif;flex:none}
.info-i:hover{background:var(--accent);color:#fff}
.info-wrap .info-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:200px;max-width:min(330px,82vw);background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(20,30,60,.20);padding:11px 14px;font-size:.85rem;font-weight:500;color:var(--ink);line-height:1.45;text-transform:none;letter-spacing:normal;white-space:normal;display:none}
.info-wrap.open .info-pop{display:block}
.info-pop a{color:var(--accent)}

/* KI-Ladebalken, während die KI arbeitet */
.ai-loading{height:5px;border-radius:3px;background:color-mix(in srgb,var(--accent) 18%,#fff);overflow:hidden;margin:12px 0 0}
.ai-loading::after{content:"";display:block;height:100%;width:38%;border-radius:3px;background:var(--accent);animation:aibar 1.05s ease-in-out infinite}
@keyframes aibar{0%{margin-left:-40%}100%{margin-left:100%}}
.btn.is-loading{opacity:.7;pointer-events:none}