/* =========================================================================
   Notes – Corporate Design als CSS-Basis
   Helle Basis, zwei Tinten: Blau = privat, Honig = gemeinsam.
   Der Ansichtsmodus wird serverseitig entschieden und als Body-Klasse gesetzt
   (modus-desktop / modus-mobile). Das CSS orientiert sich an dieser Klasse –
   nicht an Media-Queries.
   ========================================================================= */

:root{
  --papier:#F4F6FB; --blatt:#FFFFFF; --tinte:#23283F; --tinte-leise:#5B6178; --nebel:#E2E6F0;
  --privat:#4A5BE7; --privat-600:#3B49C9; --privat-tint:#ECEEFC;
  --gemeinsam:#DE9526; --gemeinsam-700:#A96E17; --gemeinsam-tint:#FBF1DD;
  --r:14px; --rs:10px;
  --sch:0 1px 2px rgba(35,40,63,.05), 0 10px 28px rgba(35,40,63,.07);
  --sch-fein:0 1px 2px rgba(35,40,63,.06);
  --gruen:#2f9e6f; --gruen-tint:#e6f5ee; --rot:#c0392b; --rot-tint:#fbeceb;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:"Fraunces",Georgia,serif;font-weight:500;letter-spacing:-.01em;line-height:1.14;margin:0}
p{margin:0}
a{color:var(--privat);text-decoration:none}
i.bi{line-height:1;display:inline-flex}
hr.trenner{border:0;border-top:1px solid var(--nebel);margin:22px 0}

/* ---------- Buttons: bewusst nur zwei Klassen (.btn / .btn.btn-primary) ---------- */
.btn{font-family:inherit;font-size:14.5px;font-weight:600;border-radius:var(--rs);
  padding:10px 16px;border:1px solid var(--nebel);background:var(--blatt);color:var(--tinte);
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1.2}
.btn:hover{border-color:#cfd5e6}
.btn:focus-visible{outline:3px solid var(--privat-tint);outline-offset:2px}
.btn.btn-primary{background:var(--privat-600);border-color:var(--privat-600);color:#fff}
.btn.btn-primary:hover{background:#33409e;border-color:#33409e}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.voll{width:100%;justify-content:center}

/* ---------- Formulare ---------- */
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.fg label{font-size:13.5px;font-weight:600}
.fg .opt{font-weight:400;color:var(--tinte-leise)}
.fg-reihe{display:flex;gap:12px}
.fg-reihe .fg{flex:1}
.input{font-family:inherit;font-size:15.5px;padding:11px 13px;border:1px solid var(--nebel);
  border-radius:var(--rs);background:var(--blatt);color:var(--tinte);width:100%}
.input::placeholder{color:#9aa0b4}
.input:focus{outline:none;border-color:var(--privat);box-shadow:0 0 0 3px var(--privat-tint)}
.input:disabled{background:var(--papier);color:var(--tinte-leise)}
.input.readonly{display:flex;align-items:center;gap:8px;background:var(--papier);color:var(--tinte-leise)}
.input.readonly .bi{font-size:13px}
select.input{appearance:auto}
.hint{font-size:13px;color:var(--tinte-leise)}
.zentriert{text-align:center}

/* ---------- Flash ---------- */
.flash{display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:var(--rs);
  font-size:14.5px;margin-bottom:16px;border:1px solid var(--nebel);background:var(--blatt)}
.flash .bi{font-size:16px;flex:0 0 auto}
.flash-erfolg{background:var(--gruen-tint);border-color:#bfe6d3;color:#1c6b48}
.flash-fehler{background:var(--rot-tint);border-color:#f0c7c3;color:#8f2a20}
.flash-info{background:var(--privat-tint);border-color:#d3d9f8;color:var(--privat-600)}

/* ---------- Chips & Avatare ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:5px 11px;border-radius:999px;background:var(--papier);color:var(--tinte-leise);border:1px solid var(--nebel)}
.chip .bi{font-size:12px}
.chip.chip-privat{background:var(--privat-tint);color:var(--privat-600);border-color:transparent}
.chip.chip-gemeinsam{background:var(--gemeinsam-tint);color:var(--gemeinsam-700);border-color:transparent}
.av{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;color:#fff;flex:0 0 auto;text-decoration:none}
.av-privat{background:var(--privat)}
.av-gemeinsam{background:var(--gemeinsam)}

/* ---------- Wortmarke / Logo ---------- */
.wm{font-family:"Fraunces",serif;font-weight:500;font-size:20px;display:flex;align-items:center;gap:9px}
.wm-text{font-family:"Fraunces",serif;font-weight:500;font-size:24px}
.logo{flex:0 0 auto}

/* =========================================================================
   AUTH (Login / Einladung) – modusunabhängige, mittige Karte
   ========================================================================= */
.auth-body{background:var(--papier)}
.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 18px;gap:6px}
.auth .flash{width:100%;max-width:400px}
.auth-card{width:100%;max-width:400px;background:var(--blatt);border:1px solid var(--nebel);
  border-radius:18px;box-shadow:var(--sch);padding:clamp(26px,4vw,36px)}
.auth-card .brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.auth-card .sub{text-align:center;color:var(--tinte-leise);font-size:14px;margin-bottom:22px}
.haushalt-badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--gemeinsam-700);
  background:var(--gemeinsam-tint);border-radius:999px;padding:6px 13px;margin-bottom:20px}
.auth-card .empty-ic{margin:6px auto 12px}

/* =========================================================================
   DESKTOP-SHELL
   ========================================================================= */
.modus-desktop .app-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.modus-desktop .side{border-right:1px solid var(--nebel);background:#fbfcfe;padding:18px 14px;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.modus-desktop .side .wm{margin:2px 6px 18px}
.modus-desktop .nav{display:flex;flex-direction:column;gap:3px}
.modus-desktop .nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  color:var(--tinte-leise);font-size:14.5px;font-weight:500}
.modus-desktop .nav a .bi{font-size:15px}
.modus-desktop .nav a:hover{background:var(--papier);color:var(--tinte)}
.modus-desktop .nav a.on{background:var(--privat-tint);color:var(--privat-600);font-weight:600}
.modus-desktop .nav a.leiser{opacity:.55}
.modus-desktop .nav .sep{height:1px;background:var(--nebel);margin:12px 6px}
.modus-desktop .side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:14px}
.modus-desktop .ansicht-link{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--tinte-leise);padding:0 6px}
.modus-desktop .ansicht-link:hover{color:var(--privat)}
.modus-desktop .user{display:flex;align-items:center;gap:10px;padding:12px 6px 2px;border-top:1px solid var(--nebel)}
.modus-desktop .user .nm{font-size:14px;font-weight:600;line-height:1.15;overflow:hidden}
.modus-desktop .user .nm small{display:block;font-weight:400;color:var(--tinte-leise);font-size:11.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.modus-desktop .user .logout{margin-left:auto}
.modus-desktop .user .logout .btn{padding:8px 10px}
.modus-desktop .main{padding:26px clamp(18px,3vw,40px);max-width:1040px}

/* =========================================================================
   MOBIL-SHELL
   ========================================================================= */
.modus-mobile .topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--nebel);background:var(--blatt)}
.modus-mobile .topbar .wm{font-size:19px}
.modus-mobile .main{padding:18px 16px 92px;max-width:640px;margin:0 auto}
.modus-mobile .bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:space-around;
  background:var(--blatt);border-top:1px solid var(--nebel);padding:8px 0 10px}
.modus-mobile .bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--tinte-leise);font-size:11px;font-weight:600;flex:1}
.modus-mobile .bottomnav a .bi{font-size:19px}
.modus-mobile .bottomnav a.on{color:var(--privat-600)}
/* Auf dem Handy stapeln sich zweispaltige Formularreihen */
.modus-mobile .fg-reihe{flex-direction:column;gap:0}

/* =========================================================================
   ÜBERSICHT / DASHBOARD (gemeinsame Inhalts-View)
   ========================================================================= */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.search{flex:1;display:flex;align-items:center;gap:9px;background:var(--blatt);border:1px solid var(--nebel);
  border-radius:var(--rs);padding:10px 13px;color:var(--tinte-leise);font-size:14px}
.search input{border:0;background:none;outline:none;font:inherit;color:var(--tinte);width:100%}
.zonentitel{display:flex;align-items:center;gap:10px;font-family:"Fraunces",serif;font-size:20px;font-weight:600;
  margin:28px 0 14px}
.zonentitel:first-of-type,#privat .zonentitel{margin-top:6px}
.zonentitel .bi{font-size:15px}
.zonentitel.privat .bi{color:var(--privat)}
.zonentitel.gemeinsam .bi{color:var(--gemeinsam-700)}

.empty{border:1.5px dashed var(--nebel);border-radius:var(--r);padding:34px 24px;text-align:center;background:var(--blatt)}
.empty h3{font-size:17px;margin-bottom:6px}
.empty p{font-size:13.5px;color:var(--tinte-leise);max-width:42ch;margin:0 auto 16px}
.empty-ic{width:54px;height:54px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:13px}
.empty-ic.privat{background:var(--privat-tint);color:var(--privat-600)}
.empty-ic.gemeinsam{background:var(--gemeinsam-tint);color:var(--gemeinsam-700)}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:16px}

/* =========================================================================
   PANELS / SEITENKOPF / LISTEN (Profil & Benutzer)
   ========================================================================= */
.seiten-kopf{margin:4px 0 18px}
.seiten-kopf h1{font-size:clamp(24px,4vw,30px)}
.panel{background:var(--blatt);border:1px solid var(--nebel);border-radius:var(--r);
  padding:22px;box-shadow:var(--sch-fein);margin-bottom:20px}
.abschnitt-titel{font-weight:600;font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.ansicht-wahl{display:flex;gap:10px;flex-wrap:wrap}
.ansicht-wahl .chip{cursor:pointer;padding:8px 14px;font-size:14px}
.ansicht-wahl .chip.aktiv{background:var(--privat-tint);color:var(--privat-600);border-color:transparent}
.abmelden-block{margin-top:4px}

.liste{border:1px solid var(--nebel);border-radius:var(--r);overflow:hidden}
.lrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--nebel)}
.lrow:last-child{border-bottom:0}
.lrow .name{display:flex;align-items:center;gap:12px;min-width:0}
.lrow .name strong{font-size:14.5px;display:block}
.lrow .name small{color:var(--tinte-leise);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:240px}
.lrow form{margin:0}
.einladen-form{display:flex;flex-direction:column;gap:0}
.link-panel .link-box{margin-top:4px}
.link-panel .link-box .input{font-size:13px}

/* ---------- 404 / Rohseite ---------- */
.rohseite{max-width:520px;margin:12vh auto;padding:0 24px;text-align:center}
.rohseite h1{font-size:30px;margin-bottom:10px}
.rohseite p{color:var(--tinte-leise);margin-bottom:18px}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* =========================================================================
   STUFE 2 – Notizbücher: Karten, Anlegen, Detailseite
   ========================================================================= */

/* Cover-Farben (Schlüssel = Notizbuch.FARBEN) */
.cover-blau{--cover:#4A5BE7}
.cover-honig{--cover:#DE9526}
.cover-salbei{--cover:#3F9E6F}
.cover-flieder{--cover:#8B5CF6}
.cover-koralle{--cover:#E0574B}
.cover-schiefer{--cover:#5B6178}

/* Rasterkarte */
.nb-card{display:flex;flex-direction:column;border:1px solid var(--nebel);border-radius:14px;overflow:hidden;
  background:var(--blatt);text-decoration:none;color:var(--tinte);box-shadow:var(--sch-fein);
  transition:transform .12s ease, box-shadow .12s ease}
.nb-card:hover{transform:translateY(-2px);box-shadow:var(--sch)}
.nb-cover{height:92px;background:var(--cover,#4A5BE7);display:flex;align-items:center;justify-content:center;color:#fff}
.nb-cover .bi{font-size:26px;opacity:.9}
.nb-body{padding:12px 14px}
.nb-title{font-family:"Fraunces",serif;font-weight:600;font-size:15.5px;line-height:1.2;display:block}
.nb-meta{font-size:12px;color:var(--tinte-leise);margin-top:4px;display:block}

/* „Neu"-Kachel im Raster */
.nb-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1.5px dashed var(--nebel);border-radius:14px;min-height:140px;color:var(--tinte-leise);
  text-decoration:none;font-size:13.5px;font-weight:600;background:var(--blatt)}
.nb-add .bi{font-size:20px}
.nb-add:hover{border-color:var(--privat);color:var(--privat)}

/* Bereichs-Auswahl (Kacheln) */
.bereich-wahl{display:flex;gap:12px}
.radio-kachel{flex:1;display:flex;align-items:center;gap:11px;border:1.5px solid var(--nebel);border-radius:12px;
  padding:13px 15px;cursor:pointer;background:var(--blatt)}
.radio-kachel .bi{font-size:18px;color:var(--tinte-leise)}
.radio-kachel span{display:flex;flex-direction:column;line-height:1.2}
.radio-kachel small{color:var(--tinte-leise);font-size:12px}
.radio-kachel input{position:absolute;opacity:0;width:0;height:0}
.radio-kachel.aktiv,.radio-kachel:has(input:checked){border-color:var(--privat);background:var(--privat-tint)}
.radio-kachel.aktiv .bi,.radio-kachel:has(input:checked) .bi{color:var(--privat-600)}

/* Farb-Auswahl */
.farb-wahl{display:flex;gap:12px;flex-wrap:wrap}
.farb-punkt{width:34px;height:34px;border-radius:50%;background:var(--cover);cursor:pointer;position:relative;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);outline:2px solid transparent;outline-offset:2px}
.farb-punkt input{position:absolute;opacity:0;width:0;height:0}
.farb-punkt.aktiv,.farb-punkt:has(input:checked){outline-color:var(--tinte)}

/* Knopf-Reihen */
.knopf-reihe{display:flex;gap:12px;align-items:center}
.knopf-reihe form{margin:0}
.loesch-knopf{background:var(--rot);border-color:var(--rot);color:#fff}
.loesch-knopf:hover{background:#a92f22;border-color:#a92f22}

/* Zurück-Kopf */
.zurueck-kopf{margin-bottom:14px}
.zurueck{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--tinte-leise);font-weight:600}
.zurueck:hover{color:var(--privat)}

/* Detail-Hero */
.nb-hero{display:flex;align-items:center;gap:18px;background:var(--cover,#4A5BE7);color:#fff;border-radius:16px;
  padding:22px 24px;margin-bottom:20px}
.nb-hero>.bi{font-size:34px;opacity:.92}
.nb-hero h1{color:#fff;font-size:clamp(22px,4vw,28px);margin-top:8px}
.nb-hero .chip{background:rgba(255,255,255,.22);color:#fff;border:0}

/* Mobil: Bereichs-Kacheln untereinander */
.modus-mobile .bereich-wahl{flex-direction:column}