/* =====================================================================
   FAM – drei Stile zur Auswahl (Familie → Aussehen)
   Grundlage überall: Atkinson Hyperlegible, große Schrift, starke Kontraste.
   ===================================================================== */

/* Gemeinsam: größere Tab-Leiste und Bedienelemente für alle Stile */
.tabbar { --tabbar-h: 68px; }
:root { --tabbar: 70px; }
.tab { font-size: 13px; font-weight: 700; padding: 7px 0 3px; }
.tab svg { width: 28px; height: 28px; }
.chat-row .name { font-size: 18px; }
.chat-row .preview { font-size: 16px; }
.bubble { font-size: 17px; line-height: 1.42; }
.bubble .time { font-size: 12px; }

/* „Heute bei uns“ – Termine des Tages oben in der Chatliste */
.today-strip { margin: 2px 0 14px; padding: 14px 16px; border-radius: 18px; background: var(--strip-bg, var(--surface)); color: var(--strip-ink, var(--ink)); }
.today-strip h2 { margin: 0 0 6px; font: 700 15px/1.2 var(--font-display); color: var(--strip-head, var(--muted)); }
.today-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.today-strip li { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.today-strip .t { font-variant-numeric: tabular-nums; min-width: 52px; opacity: .85; font-weight: 700; }
.today-strip .dot { width: 10px; height: 10px; border-radius: 5px; background: var(--c); flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--strip-bg, var(--surface)) 70%, transparent); }
.today-strip button { all: unset; cursor: pointer; display: block; width: 100%; }

/* Aussehen-Auswahl */
.theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.theme-opt { border: 2px solid var(--line); border-radius: 16px; background: var(--surface); padding: 8px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.theme-opt[aria-pressed="true"] { border-color: var(--pine); box-shadow: 0 0 0 2px var(--pine); }
.theme-opt .mini { width: 100%; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; gap: 5px; padding: 8px 7px; }
.theme-opt .mini i { display: block; height: 11px; border-radius: 6px; }
.seg { display: flex; background: var(--sunk); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 10px; padding: 10px 6px; font-weight: 700; }
.seg button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow); }
.seg .s1 { font-size: 15px; } .seg .s2 { font-size: 18px; } .seg .s3 { font-size: 21px; }

/* =====================================================================
   1) KLAR – ruhig, maximaler Kontrast, Signalblau. Jede Person erkennt man
      am farbigen Streifen ihrer Nachricht.
   ===================================================================== */
:root[data-theme="klar"] {
  --ground: #F2F4F7;
  --surface: #FFFFFF;
  --sunk: #E6EAF0;
  --ink: #111827;
  --muted: #4B5565;
  --line: #D9DEE6;
  --pine: #1F56D6;
  --pine-ink: #FFFFFF;
  --pine-soft: #E3EBFC;
  --marigold: #FFB020;
  --marigold-ink: #2B1A00;
  --bubble-own: #1F56D6;
  --bubble-own-ink: #FFFFFF;
  --bubble-other: #FFFFFF;
  --shadow: 0 1px 2px rgba(17, 24, 39, .08);
  --strip-bg: #111827; --strip-ink: #FFFFFF; --strip-head: #FFB020;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="klar"] {
    --ground: #0E1117; --surface: #1A1F29; --sunk: #232A36; --ink: #F3F5F8; --muted: #A7B0BF; --line: #2C3442;
    --pine: #6F9BFF; --pine-ink: #0B1220; --pine-soft: #1D2A48; --bubble-own: #2F5FD0; --bubble-own-ink: #fff; --bubble-other: #1A1F29;
    --strip-bg: #1F56D6; --strip-ink: #fff; --strip-head: #FFD27A;
  }
}
[data-theme="klar"] .appbar h1 { font-weight: 800; font-size: 32px; letter-spacing: -.02em; }
[data-theme="klar"] .bubble { box-shadow: none; border: 1px solid var(--line); }
[data-theme="klar"] .msg.own .bubble { border-color: transparent; }
[data-theme="klar"] .msg:not(.own) .bubble { border-left: 5px solid var(--c, var(--line)); }
[data-theme="klar"] .bubble .author { font-size: 14px; }
[data-theme="klar"] .tab[aria-current="page"] svg { background: var(--pine-soft); border-radius: 12px; padding: 3px 14px; width: 58px; box-sizing: content-box; height: 26px; margin: -3px 0; }
[data-theme="klar"] .tab[aria-current="page"] { color: var(--pine); }
[data-theme="klar"] .day.today .num { background: var(--ink); color: var(--ground); }
[data-theme="klar"] .event { box-shadow: none; border: 1px solid var(--line); }
[data-theme="klar"] .event .bar { width: 6px; }
[data-theme="klar"] .month { box-shadow: none; border: 1px solid var(--line); }
[data-theme="klar"] .card { box-shadow: none; border: 1px solid var(--line); }

/* =====================================================================
   2) BUNT – Familienfarben überall. Jede Nachricht trägt die Farbe der
      Person, die sie geschrieben hat. Runde, fröhliche Überschriften.
   ===================================================================== */
:root[data-theme="bunt"] {
  --font-display: "Baloo", "Atkinson", ui-rounded, system-ui, sans-serif;
  --ground: #FFFFFF;
  --surface: #FFFFFF;
  --sunk: #F1F2F6;
  --ink: #1B1D2A;
  --muted: #5D6274;
  --line: #E8E9EF;
  --pine: #5B4BDB;
  --pine-ink: #FFFFFF;
  --pine-soft: #ECEAFD;
  --marigold: #FFC233;
  --marigold-ink: #2E2100;
  --bubble-own: var(--me, #5B4BDB);
  --bubble-own-ink: #FFFFFF;
  --bubble-other: #F1F2F6;
  --shadow: 0 2px 0 rgba(27, 29, 42, .06);
  --strip-bg: #FFF3CF; --strip-ink: #1B1D2A; --strip-head: #8A6200;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="bunt"] {
    --ground: #15161E; --surface: #1F2130; --sunk: #272A3B; --ink: #F4F4F8; --muted: #A9ACBE; --line: #2E3144;
    --pine: #9C90FF; --pine-ink: #15161E; --pine-soft: #2B2850; --bubble-other: #272A3B;
    --strip-bg: #3A2F10; --strip-ink: #FFF3CF; --strip-head: #FFC233;
  }
}
[data-theme="bunt"] .appbar h1 { font: 800 36px/1 var(--font-display); letter-spacing: -.01em; padding-top: 4px; }
[data-theme="bunt"] .avatar { border-radius: 32%; }
[data-theme="bunt"] .chat-row { padding: 10px 8px; }
[data-theme="bunt"] .chat-row .avatar { width: 54px; height: 54px; font-size: 22px; }
[data-theme="bunt"] .chat-row + .chat-row { box-shadow: none; }
[data-theme="bunt"] .chat-row .name { font: 700 20px/1.2 var(--font-display); }
[data-theme="bunt"] .msg:not(.own) .bubble {
  background: color-mix(in srgb, var(--c, #8A8FA3) 16%, var(--surface));
  border: 0; box-shadow: none;
}
[data-theme="bunt"] .msg.own .bubble { background: var(--c, var(--pine)); box-shadow: none; }
[data-theme="bunt"] .bubble { border-radius: 22px; padding: 9px 14px 7px; }
[data-theme="bunt"] .bubble .author { font: 700 15px/1.2 var(--font-display); color: color-mix(in srgb, var(--c) 80%, var(--ink)); }
[data-theme="bunt"] .day-sep { background: transparent; font: 700 15px/1 var(--font-display); color: var(--muted); }
[data-theme="bunt"] .tabbar { background: var(--surface); border-top: 0; box-shadow: 0 -1px 0 var(--line); }
[data-theme="bunt"] .tab { font-family: var(--font-display); font-size: 14px; }
[data-theme="bunt"] .tab[aria-current="page"] svg { color: var(--pine); stroke-width: 2.6; }
[data-theme="bunt"] .fab, [data-theme="bunt"] .icon-btn.filled { border-radius: 50%; }
[data-theme="bunt"] .month { border-radius: 26px; box-shadow: none; background: var(--sunk); }
[data-theme="bunt"] .day .num { font: 700 18px/1 var(--font-display); }
[data-theme="bunt"] .day .dots i { width: 8px; height: 8px; border-radius: 4px; }
[data-theme="bunt"] .event { background: color-mix(in srgb, var(--c) 13%, var(--surface)); box-shadow: none; border-radius: 18px; }
[data-theme="bunt"] .event .bar { display: none; }
[data-theme="bunt"] .event { padding-left: 14px; }
[data-theme="bunt"] .card { box-shadow: none; background: var(--sunk); }
[data-theme="bunt"] .agenda-title h2, [data-theme="bunt"] .section-title { font: 800 22px/1.2 var(--font-display); }

/* =====================================================================
   3) ALBUM – wie ein Familienalbum. Nachtblaue Kopfzeile, Fotos im
      Sofortbild-Rahmen, kräftige Slab-Überschriften, Senfgelb als Akzent.
   ===================================================================== */
:root[data-theme="album"] {
  --font-display: "Zilla", "Atkinson", Georgia, serif;
  --ground: #EEF0F2;
  --surface: #FFFFFF;
  --sunk: #E2E5E9;
  --ink: #18223A;
  --muted: #55607A;
  --line: #D7DBE2;
  --pine: #1C2B4F;
  --pine-ink: #FFFFFF;
  --pine-soft: #DCE2F0;
  --marigold: #E9B027;
  --marigold-ink: #241800;
  --bubble-own: #1C2B4F;
  --bubble-own-ink: #FFFFFF;
  --bubble-other: #FFFFFF;
  --band: #1C2B4F; --band-ink: #FFFFFF;
  --shadow: 0 1px 3px rgba(24, 34, 58, .10);
  --strip-bg: #FFFFFF; --strip-ink: #18223A; --strip-head: #A2740A;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="album"] {
    --ground: #0F1524; --surface: #1A2235; --sunk: #222B41; --ink: #EEF1F7; --muted: #A3ADC4; --line: #2A3450;
    --pine: #E9B027; --pine-ink: #1A1300; --pine-soft: #3A3218; --bubble-own: #2B3B66; --bubble-other: #1A2235;
    --band: #1A2235; --strip-bg: #1A2235; --strip-ink: #EEF1F7; --strip-head: #E9B027;
  }
}
[data-theme="album"] .appbar { background: var(--band); color: var(--band-ink); padding-bottom: 18px; border-radius: 0 0 26px 26px; margin-bottom: 14px; }
[data-theme="album"] .appbar h1 { font: 700 34px/1.05 var(--font-display); letter-spacing: 0; }
[data-theme="album"] .appbar .btn.small { background: rgba(255,255,255,.14); color: var(--band-ink); }
[data-theme="album"] .appbar .icon-btn { color: var(--band-ink); }
[data-theme="album"] .appbar .icon-btn.filled { background: var(--marigold); color: var(--marigold-ink); }
[data-theme="album"] .chat-head { background: var(--band); color: var(--band-ink); border-bottom: 0; }
[data-theme="album"] .chat-head .t2 { color: rgba(255,255,255,.7); }
[data-theme="album"] .chat-head .icon-btn { color: var(--band-ink); }
[data-theme="album"] .avatar.family { background: var(--marigold); color: var(--marigold-ink); }
[data-theme="album"] .bubble .author { font: 700 16px/1.2 var(--font-display); }
[data-theme="album"] .day-sep { background: var(--ink); color: var(--ground); font: 700 14px/1 var(--font-display); padding: 6px 14px; }
/* Fotos im Sofortbild-Rahmen */
[data-theme="album"] .bubble.media { background: #FFFFFF; padding: 8px 8px 4px; border-radius: 4px; box-shadow: 0 2px 8px rgba(24,34,58,.18); transform: rotate(-1.2deg); }
[data-theme="album"] .msg.own .bubble.media { transform: rotate(1.2deg); color: #18223A; }
[data-theme="album"] .msg.own .bubble.media .text a { color: #18223A; }
[data-theme="album"] .bubble.media .media-grid { border-radius: 2px; }
[data-theme="album"] .bubble.media .time { color: #55607A; opacity: 1; }
[data-theme="album"] .tabbar { background: var(--band); border-top: 0; }
[data-theme="album"] .tab { color: rgba(255,255,255,.62); }
[data-theme="album"] .tab[aria-current="page"] { color: var(--marigold); }
[data-theme="album"] .tab .dot { box-shadow: 0 0 0 2px var(--band); }
[data-theme="album"] .fab { background: var(--marigold); color: var(--marigold-ink); }
[data-theme="album"] .day .num { font-family: var(--font-display); font-weight: 700; }
[data-theme="album"] .agenda-title h2, [data-theme="album"] .section-title { font: 700 22px/1.2 var(--font-display); }
[data-theme="album"] .event .when { font-family: var(--font-display); font-size: 17px; }
[data-theme="album"] .today-strip { border-left: 6px solid var(--marigold); }
[data-theme="album"] .today-strip h2 { font: 700 17px/1.2 var(--font-display); }

/* =====================================================================
   Form der Sprechblasen (Familie → Aussehen), unabhängig vom Stil
   ===================================================================== */

/* Blatt: zwei spitze, zwei weite Ecken wie ein Laubblatt */
[data-bubble="blatt"] .bubble { border-radius: 30px 4px 30px 4px !important; padding-left: 16px; padding-right: 16px; }
[data-bubble="blatt"] .msg.own .bubble { border-radius: 4px 30px 4px 30px !important; }

/* Comic: klassischer Zipfel wie in einer Sprechblase */
[data-bubble="zipfel"] .bubble { border-radius: 22px !important; position: relative; }
[data-bubble="zipfel"] .msg:not(.cont-next) .bubble::after {
  content: ""; position: absolute; bottom: 0; width: 22px; height: 22px;
  background: inherit; pointer-events: none;
}
[data-bubble="zipfel"] .msg:not(.own):not(.cont-next) .bubble::after { left: -11px; clip-path: path("M22 0 L22 22 L0 22 C8 19 13 12 13 0 Z"); }
[data-bubble="zipfel"] .msg.own:not(.cont-next) .bubble::after { right: -11px; clip-path: path("M0 0 L0 22 L22 22 C14 19 9 12 9 0 Z"); }
[data-bubble="zipfel"] .msg:not(.own) .bubble { border-left-width: 0 !important; }
[data-bubble="zipfel"] .msg { margin-left: 4px; margin-right: 4px; }
[data-bubble="zipfel"] .bubble.media::after { display: none; }

/* Zettel: wie ein Notizzettel am Kühlschrank, oben ein Farbstreifen der Person */
[data-bubble="zettel"] .bubble { border-radius: 6px !important; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 3px 10px rgba(0,0,0,.06); }
[data-bubble="zettel"] .msg:not(.own) .bubble { border-left-width: 0 !important; border-top: 5px solid var(--c, var(--line)) !important; }
[data-bubble="zettel"] .msg.own .bubble { border-top: 5px solid color-mix(in srgb, #000 22%, var(--bubble-own)) !important; }
[data-theme="bunt"][data-bubble="zettel"] .msg.own .bubble { border-top-color: color-mix(in srgb, #000 22%, var(--c, var(--pine))) !important; }
[data-bubble="zettel"] .media-grid { border-radius: 3px; }

/* Vorschau im Auswahl-Menü */
.shape-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.shape-opt { border: 2px solid var(--line); border-radius: 14px; background: var(--surface); padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.shape-opt[aria-pressed="true"] { border-color: var(--pine); box-shadow: 0 0 0 2px var(--pine); }
.shape-opt svg { width: 44px; height: 32px; color: var(--pine); }

/* Tisch je Stil */
:root[data-theme="bunt"] { --splash: #5B4BDB; --chair: #EEEBF8; --chair-back: #C9C2EC; }
:root[data-theme="klar"] { --splash: #1F56D6; --chair: #E2E7EF; --chair-back: #B9C4D4; --wood-1: #C9D3E0; --wood-2: #9DAABD; }
:root[data-theme="album"] { --splash: #1C2B4F; --chair: #DCE0E7; --chair-back: #AEB6C6; }
[data-theme="album"] .table-screen .appbar { padding-bottom: 14px; }
[data-theme="album"] .brand span { color: rgba(255,255,255,.75); }
@media (prefers-color-scheme: dark) {
  :root[data-theme] { --chair: #2B3040; --chair-back: #3E4558; }
}