/*
 * The Sniffer Dog – Gestaltung
 * Warmer, ruhiger Look wie thesnifferdog.ch. Farben als CSS-Variablen;
 * das Layout kann sie mit den Farben aus den Einstellungen überschreiben
 * (Logo und Farben pro Instanz einstellbar). Kein Build-Schritt nötig.
 */

/* ── Schrift Figtree (lokal, SIL Open Font License, siehe fonts/OFL.txt) ── */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-cream: #f6f0e4;        /* Grund */
  --color-card: #fffbf3;         /* Karten */
  --color-sand: #ede3d0;         /* ruhige Flächen */
  --color-primary: #2f4a36;      /* Dunkelgrün: Menü, aktive Elemente, Links */
  --color-accent: #7a5a3c;       /* Braun: kleine Überschriften */
  --color-button: #f4d3cc;       /* Hauptknopf Rosé */
  --color-button-text: #7a1c14;  /* Schrift auf Hauptknopf */
  --color-text: #2a2520;
  --color-muted: #5e554a;        /* Nebentext */
  --color-line: #e3d8c4;         /* Linien */
  --color-trainer-tint: #eef1e8; /* Trainerportal leicht grünlich */

  --color-ok-bg: #e3eedf;   --color-ok-text: #2f5a2c;
  --color-warn-bg: #f6e3c8; --color-warn-text: #7a4a10;
  --color-full-bg: #f3d6d0; --color-full-text: #7a1c14;

  --radius-card: 20px;
  --radius-control: 16px;
  --tap-min: 44px;
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 1px 2px rgba(42, 37, 32, 0.06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* ── Bausteine ───────────────────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack--tight { gap: 8px; }
.stack--loose { gap: 24px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }

.card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card--sand { background: var(--color-sand); box-shadow: none; }

.eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.muted { color: var(--color-muted); }
.small { font-size: 0.875rem; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.04em; }

/* ── Knöpfe (mind. 44 px Tippfläche; keine kräftig roten Knöpfe) ────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap-min);
  padding: 10px 20px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  background: var(--color-button);
  color: var(--color-button-text);
  font: inherit; font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { filter: brightness(0.97); }
.btn--secondary { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn--quiet { background: transparent; color: var(--color-primary); padding-inline: 8px; }
.btn--block { width: 100%; }
.btn-link {
  background: none; border: 0; padding: 0; min-height: var(--tap-min);
  color: var(--color-primary); font: inherit; text-decoration: underline; cursor: pointer;
}

/* ── Formulare ───────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-weight: 600; }
.hint { font-size: 0.875rem; color: var(--color-muted); }
.input {
  min-height: var(--tap-min);
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--color-text);
  font: inherit;
}
.input:focus { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: 0; }
.input--code { font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; }
.input[aria-invalid="true"] { border-color: var(--color-button-text); }
.field-error { font-size: 0.875rem; color: var(--color-button-text); }
.checkbox { display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap-min); padding-top: 10px; }
.checkbox input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--color-primary); flex: none; }

/* ── Meldungen ───────────────────────────────────────────────────────────── */
.alert { border-radius: var(--radius-control); padding: 12px 16px; }
.alert--ok { background: var(--color-ok-bg); color: var(--color-ok-text); }
.alert--error { background: var(--color-full-bg); color: var(--color-full-text); }
.alert--warn { background: var(--color-warn-bg); color: var(--color-warn-text); }

/* ── Badges (Belegung, Status) – immer mit Text ──────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600;
  background: var(--color-sand); color: var(--color-muted);
}
.badge--ok { background: var(--color-ok-bg); color: var(--color-ok-text); }
.badge--warn { background: var(--color-warn-bg); color: var(--color-warn-text); }
.badge--full { background: var(--color-full-bg); color: var(--color-full-text); }

/* ── Listen ──────────────────────────────────────────────────────────────── */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 14px 0; border-top: 1px solid var(--color-line); }
.list > li:first-child { border-top: 0; padding-top: 0; }
.list > li:last-child { padding-bottom: 0; }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.dl dt { color: var(--color-muted); }
.dl dd { margin: 0; }

/* ── Logo ────────────────────────────────────────────────────────────────── */
.logo { display: flex; align-items: center; gap: 8px; color: var(--color-primary); text-decoration: none; }
.logo__paw { width: 32px; height: 32px; fill: currentColor; flex: none; }
.logo__name { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }
.logo img { height: 64px; width: auto; max-width: min(280px, 60vw); object-fit: contain; }
.auth .logo { justify-content: center; }
.auth .logo img { height: 160px; max-width: 100%; }
.auth .logo__name { font-size: 1.75rem; }
.auth .logo__paw { width: 48px; height: 48px; }
.tp-nav__logo .logo img { height: auto; max-height: 84px; max-width: 100%; }

/* ── Bedienungsanleitung ─────────────────────────────────────────────────── */
.help { display: flex; flex-direction: column; gap: 16px; max-width: 54rem; }
.help__toc ol { margin: 0; padding-left: 1.25rem; columns: 2 16rem; }
.help__toc li { margin: 4px 0; }
.help__topic { scroll-margin-top: 76px; }
.help__topic h2 { margin: 0; }
.help__topic h3 { margin: 12px 0 0; font-size: 1.0625rem; color: var(--color-accent); }
.help__topic ul, .help__topic ol { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 6px; }
.help__steps { list-style: decimal; }
.help__example { background: var(--color-sand); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-control) var(--radius-control) 0; padding: 10px 14px; }
.ui { display: inline-block; padding: 0 7px; border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-card); font-weight: 600; white-space: nowrap; font-size: .95em; }
.help [hidden] { display: none !important; }

/* ── Anmeldung ───────────────────────────────────────────────────────────── */
.auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 48px; gap: 24px; }
.auth__inner { width: 100%; max-width: 26rem; display: flex; flex-direction: column; gap: 24px; }

/* ── Kundenportal: Handy zuerst, Menü unten ─────────────────────────────── */
.app-kunde { min-height: 100dvh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.app-kunde__header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--color-cream); border-bottom: 1px solid var(--color-line);
}
.app-kunde__main { max-width: 40rem; margin: 0 auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.bottom-nav {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  display: flex; justify-content: space-around;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--color-card); border-top: 1px solid var(--color-line);
}
.bottom-nav a {
  flex: 1; max-width: 120px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--color-muted); text-decoration: none; font-size: 0.8125rem; font-weight: 600; border-radius: 12px;
}
.bottom-nav a[aria-current="page"] { color: var(--color-primary); background: var(--color-sand); }
.bottom-nav svg, .side-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Trainerportal: PC Menü links, Handy oben; leicht grünlich ──────────── */
.app-trainer { min-height: 100dvh; background: var(--color-trainer-tint); }
.app-trainer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--color-card); border-bottom: 1px solid var(--color-line);
}
.side-nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; background: var(--color-card); border-bottom: 1px solid var(--color-line); }
.side-nav a {
  display: flex; align-items: center; gap: 10px; flex: none;
  min-height: var(--tap-min); padding: 8px 14px; border-radius: 12px;
  color: var(--color-text); text-decoration: none; font-weight: 600; white-space: nowrap;
}
.side-nav a[aria-current="page"] { background: var(--color-primary); color: #fff; }
.side-nav__footer { display: none; }
.app-trainer__main { padding: 20px 16px 40px; display: flex; flex-direction: column; gap: 16px; max-width: 72rem; }

@media (min-width: 900px) {
  .app-trainer { display: grid; grid-template-columns: 248px 1fr; grid-template-rows: auto 1fr; }
  .app-trainer__top { grid-column: 1 / -1; }
  .side-nav {
    flex-direction: column; overflow: visible; gap: 2px;
    padding: 16px 12px; border-bottom: 0; border-right: 1px solid var(--color-line);
  }
  .side-nav__footer { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-line); }
  .side-nav__footer--mobile { display: none; }
  .app-trainer__main { padding: 28px 32px 48px; }
}

/* ── Tabellen (Trainerportal) ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.table th { font-size: 0.8125rem; color: var(--color-muted); font-weight: 600; }

/* ── Zwei-Faktor ─────────────────────────────────────────────────────────── */
.qr { background: #fff; border-radius: var(--radius-control); padding: 12px; width: max-content; }
.qr svg { display: block; width: 200px; height: 200px; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }
.codes li { background: #fff; border: 1px solid var(--color-line); border-radius: 12px; padding: 8px; text-align: center; }

/* ── Dokumente (AGB, Datenschutz) ───────────────────────────────────────── */
.prose { line-height: 1.6; }
.prose h2 { margin-top: 8px; }
.prose p + p { margin-top: 12px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Liste und Detail (Trainerportal) ───────────────────────────────────────
   PC: Liste links, Detail rechts. Handy: Detail ersetzt die Liste (Zurück-Pfeil). */
.split { display: grid; gap: 16px; }
.split__list { display: none; }
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); font-weight: 600; text-decoration: none; }
@media (min-width: 1200px) {
  .split { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
  .split__list { display: block; position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 8px; }
  .split .back-link { display: none; }
}
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list a { display: block; padding: 10px 12px; border-radius: 12px; color: var(--color-text); text-decoration: none; }
.mini-list a:hover { background: var(--color-sand); }
.mini-list a[aria-current="page"] { background: var(--color-primary); color: #fff; }
.mini-list small { display: block; color: inherit; opacity: .75; }

/* ── Filter ─────────────────────────────────────────────────────────────── */
.filters { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: end; }
.filters .field--wide { grid-column: 1 / -1; }
select.input { appearance: auto; }
textarea.input { min-height: 96px; resize: vertical; }

.table tr[data-href] { cursor: pointer; }
.table tr[data-href]:hover td { background: var(--color-sand); }
.table a.row-link { color: inherit; text-decoration: none; font-weight: 600; }

.pagination { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Hundefoto ──────────────────────────────────────────────────────────── */
.avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--color-sand); color: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar svg { width: 30px; height: 30px; fill: currentColor; }
.avatar--large { width: 112px; height: 112px; }
.avatar--large svg { width: 56px; height: 56px; }

.grid-2 { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.note { border-left: 4px solid var(--color-line); padding: 4px 0 4px 12px; }
.note--shared { border-left-color: var(--color-primary); }
.radio-row { display: flex; flex-wrap: wrap; gap: 16px; }
.radio-row label { display: flex; align-items: center; gap: 8px; min-height: var(--tap-min); }
.radio-row input { width: 20px; height: 20px; accent-color: var(--color-primary); }

/* ── Kalender (Trainerportal) ───────────────────────────────────────────────
   PC: Monat oder Woche. Handy: Liste mit Tagesfilter. */
.cal-desktop { display: none; }
.cal-mobile { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) {
  .cal-desktop { display: block; }
  .cal-mobile { display: none; }
}
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-head { font-size: 0.8125rem; font-weight: 650; color: var(--color-muted); padding: 0 6px; }
.cal-day {
  min-height: 112px; padding: 6px; border-radius: 14px;
  background: var(--color-card); border: 1px solid var(--color-line);
  display: flex; flex-direction: column; gap: 4px;
}
.cal-day--other { opacity: .55; }
.cal-day--today { outline: 2px solid var(--color-primary); }
.cal-week .cal-day { min-height: 260px; }
.cal-date { font-size: 0.8125rem; font-weight: 650; display: flex; justify-content: space-between; align-items: center; }
.cal-date a { text-decoration: none; color: var(--color-muted); font-weight: 400; }
.cal-event {
  display: block; padding: 4px 6px; border-radius: 8px; font-size: 0.75rem; line-height: 1.3;
  text-decoration: none; color: var(--color-text); border-left: 4px solid var(--color-line); background: var(--color-cream);
}
.cal-event--ok { border-left-color: #6a9c62; }
.cal-event--warn { border-left-color: #d08a2e; }
.cal-event--full { border-left-color: #b4483a; }
.cal-event--off { text-decoration: line-through; opacity: .6; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chip {
  flex: none; min-height: var(--tap-min); padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--color-line); background: var(--color-card); color: var(--color-text);
  text-decoration: none; font-weight: 600; display: inline-flex; align-items: center;
}
.chip[aria-current="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.event-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }

/* ── Pfotenreihe (Abo-Guthaben) ─────────────────────────────────────────── */
.paws { display: flex; flex-wrap: wrap; gap: 4px; }
.paw { width: 26px; height: 26px; }
.paw--on { fill: var(--color-primary); }
.paw--off { fill: var(--color-line); }

.movement { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--color-line); font-size: .9375rem; }
.movement__qty { font-weight: 650; text-align: right; }
.movement__qty--plus { color: var(--color-ok-text); }
.movement__qty--minus { color: var(--color-button-text); }
details > summary { cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; font-weight: 600; color: var(--color-primary); }

/* ── Glocke (App-Postfach) ─────────────────────────────────────────────── */
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; color: var(--color-primary); }
.bell svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell__count { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--color-button); color: var(--color-button-text); font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.inbox-item { display: block; padding: 12px; border-radius: 14px; text-decoration: none; color: inherit; }
.inbox-item--unread { background: var(--color-sand); }
.inbox-item--unread strong::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); margin-right: 8px; vertical-align: middle; }

/* ── Push-Einrichtung (Schritt-für-Schritt-Bilder) ─────────────────────── */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.steps figure { margin: 0; }
.steps svg { width: 96px; height: 96px; display: block; }
.step-number { font-weight: 700; color: var(--color-accent); }

/* Mitteilung schreiben: Kundenauswahl */
.check-list { max-height: 18rem; overflow-y: auto; border: 1px solid var(--color-line); border-radius: 12px; padding: 4px 12px 10px; }
fieldset.field { border: 0; padding: 0; margin: 0; }

/* Dashboard: Kacheln klein (Zahl), halb, ganz */
.dash { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash__tile { grid-column: span 2; min-width: 0; }
.dash__tile--small { grid-column: span 1; }
@media (min-width: 900px) {
  .dash { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dash__tile--small { grid-column: span 2; }
  .dash__tile--half { grid-column: span 3; }
  .dash__tile--full { grid-column: span 6; }
}
.dash__number { display: block; font-size: 2rem; font-weight: 650; color: var(--color-primary); text-decoration: none; line-height: 1.2; }
.dash__number .small { display: block; font-size: .875rem; font-weight: 400; }
.dash-edit { border-bottom: 1px solid var(--color-line); padding-bottom: 8px; }

/* Protokoll: vorher / nachher */
.json { white-space: pre-wrap; word-break: break-word; background: var(--color-sand); border-radius: 12px; padding: 8px 10px; font-size: .8125rem; margin: 4px 0 0; max-height: 20rem; overflow: auto; }

/* Einstellungen: Logo und Farben */
.logo-preview { background: var(--color-cream); border-radius: var(--radius-control); padding: 12px 16px; margin-bottom: 8px; }
.color-row { align-items: center; min-height: var(--tap-min); }
.color-row input[type="color"] { width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-line); border-radius: 12px; background: none; flex: none; }

/* Umschalter Kundenkonto ↔ Trainerportal (Personen mit beiden Rollen) */
.portal-switch { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 12px; border-radius: 999px; background: var(--color-sand); color: var(--color-primary); font-weight: 600; font-size: .875rem; text-decoration: none; }

/* Kalender: Kursleitung pro Termin */
.cal-leader { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; background: var(--color-sand); color: var(--color-primary); font-size: .75rem; font-weight: 600; }

/* Einstellungen → Versionen: Änderungsprotokoll */
.changelog h1 { font-size: 1.375rem; }
.changelog h2 { font-size: 1.125rem; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-line); }
.changelog ul { padding-left: 1.25rem; margin: 0; }
.changelog li { margin-bottom: 4px; }
.changelog code { background: var(--color-sand); border-radius: 6px; padding: 0 4px; font-size: .875em; }

/* ══ v0.3.1 Trainerportal: Kopfzeile, Navigation, Popups ══════════════════ */
.tp { min-height: 100dvh; background: var(--color-trainer-tint); }
.tp-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px 6px 16px; padding-top: calc(6px + env(safe-area-inset-top));
  background: var(--color-card); border-bottom: 1px solid var(--color-line);
}
.tp-header__title { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap-min); color: var(--color-primary); font-weight: 700; font-size: 1.0625rem; text-decoration: none; min-width: 0; }
.tp-header__title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-header__paw { width: 24px; height: 24px; fill: currentColor; flex: none; }
.tp-header__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border-radius: 50%; color: var(--color-primary); background: none; border: 0; cursor: pointer; list-style: none; }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover, .icon-btn[aria-current="page"], .menu[open] > .icon-btn { background: var(--color-sand); }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(18rem, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
  background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-control); box-shadow: 0 8px 24px rgba(42, 37, 32, .12);
}
.menu__panel a { display: flex; align-items: center; min-height: var(--tap-min); padding: 0 10px; border-radius: 10px; color: var(--color-text); text-decoration: none; }
.menu__panel a:hover { background: var(--color-sand); }
.menu__panel form { margin-top: 6px; }
.menu__name { margin: 0 0 6px; padding: 4px 10px 8px; border-bottom: 1px solid var(--color-line); font-weight: 600; }

/* Navigation: Handy unten nur Symbole */
.tp-nav {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: flex; justify-content: space-around; align-items: center;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  background: var(--color-card); border-top: 1px solid var(--color-line);
}
.tp-nav a { flex: 1; max-width: 72px; min-height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--color-muted); text-decoration: none; }
.tp-nav a[aria-current="page"] { color: var(--color-primary); background: var(--color-sand); }
.tp-nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tp-nav__label, .tp-nav__logo, .tp-nav__toggle { display: none; }
.tp-main { padding: 16px 16px calc(88px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; max-width: 80rem; min-width: 0; }

/* PC: Seitenleiste links, ausgeschrieben, einklappbar */
@media (min-width: 900px) {
  .tp { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .tp--collapsed { grid-template-columns: 72px minmax(0, 1fr); }
  .tp-header { grid-column: 2; padding-left: 24px; }
  .tp-nav {
    position: sticky; top: 0; inset: auto; grid-column: 1; grid-row: 1 / span 2; height: 100dvh;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2px;
    padding: 14px 10px; border-top: 0; border-right: 1px solid var(--color-line);
  }
  .tp-nav a { flex: none; max-width: none; min-height: var(--tap-min); justify-content: flex-start; gap: 12px; padding: 8px 12px; color: var(--color-text); font-weight: 600; }
  .tp-nav a[aria-current="page"] { background: var(--color-primary); color: #fff; }
  .tp-nav svg { width: 24px; height: 24px; }
  .tp-nav__label { display: inline; white-space: nowrap; }
  .tp-nav__logo { display: block; padding: 0 6px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--color-line); }
  .tp-nav__toggle {
    display: flex; align-items: center; gap: 12px; margin-top: auto; min-height: var(--tap-min); padding: 8px 12px;
    border: 0; border-radius: 12px; background: none; color: var(--color-muted); font: inherit; cursor: pointer;
  }
  .tp-nav__toggle:hover { background: var(--color-sand); }
  .tp-nav__toggle svg { transition: transform .15s; }
  .tp--collapsed .tp-nav__label, .tp--collapsed .tp-nav__logo { display: none; }
  .tp--collapsed .tp-nav a, .tp--collapsed .tp-nav__toggle { justify-content: center; padding: 8px; }
  .tp--collapsed .tp-nav__toggle svg { transform: rotate(180deg); }
  .tp-main { grid-column: 2; padding: 24px 32px 48px; }
}

/* Popup (Modal): abgedunkelter Hintergrund, X oben rechts */
html.has-modal, html.has-modal body { overflow: hidden; }
.modal { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(30, 26, 22, .42); }
.modal__panel {
  position: relative; display: flex; flex-direction: column; width: 100%; max-height: 94dvh;
  background: var(--color-cream); border-radius: var(--radius-card) var(--radius-card) 0 0; box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
}
.modal__head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--color-line); background: var(--color-card); border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.modal__title { flex: 1; margin: 0; font-size: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal__close, .modal__back { width: var(--tap-min); height: var(--tap-min); border: 0; border-radius: 50%; background: none; font-size: 1.75rem; line-height: 1; color: var(--color-text); cursor: pointer; flex: none; }
.modal__back { font-size: 1.25rem; }
.modal__close:hover, .modal__back:hover { background: var(--color-sand); }
.modal__body { overflow-y: auto; padding: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.modal__body > .modal-fragment, .modal__body { min-width: 0; }
.modal__body h1, .modal__body .back-link { display: none; }
.modal__body .card { box-shadow: none; }
.modal__body form[style*="max-width"], .modal__body section[style*="max-width"] { max-width: none !important; }
@media (min-width: 720px) {
  .modal { align-items: center; padding: 24px; }
  .modal__panel { width: min(52rem, 100%); max-height: 90dvh; border-radius: var(--radius-card); }
}

.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2000;
  max-width: min(32rem, calc(100vw - 32px)); padding: 12px 18px; border-radius: var(--radius-control);
  background: var(--color-primary); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
@media (min-width: 900px) { .toast { bottom: 24px; } }

/* Serienliste mit Symbolen; Listenlinks */
.series-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--color-line); }
.series-row:first-child { border-top: 0; }
.series-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; padding: 4px 8px; border-radius: 12px; }
.series-row__main:hover, .list-link:hover { background: var(--color-sand); }
.series-row__actions { display: flex; gap: 2px; flex: none; }
.list-link { color: inherit; text-decoration: none; padding: 8px; border-radius: 12px; }

/* Termine als Liste */
.event-list h3 { margin: 10px 0 0; }
.event-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: inherit; text-decoration: none; border-top: 1px solid var(--color-line); }
.event-row:hover { background: var(--color-sand); }
.event-row__title { flex: 1; min-width: 0; }
.toast__link { color: #fff; font-weight: 700; text-decoration: underline; }

/* Dashboard v0.3.1: Raster mit Drag & Drop, Grösse ziehen */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.dash-head h1 { margin: 0; min-width: 0; }
.dash-head__actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.dash-head__editbar { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dash-head__editbar[hidden] { display: none; }
.btn__icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-right: 4px; vertical-align: -3px; }
.dash-edit-info { background: var(--color-card); border: 1px dashed var(--color-primary); border-radius: var(--radius-control); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.dash-edit-info p { margin: 0; }
.dash-edit-info__narrow { display: none; }
@media (max-width: 760px) { .dash-edit-info__narrow { display: inline; } }
.dash-grid { margin: 0 -8px; }
.dash-grid .grid-stack-item-content.dash-tile { inset: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; container-type: size; }
.dash-tile__head { display: flex; align-items: center; gap: 8px; }
.dash-tile__head .eyebrow { flex: 1; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-tile__remove { display: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--color-sand); font-size: 1.25rem; line-height: 1; cursor: pointer; flex: none; }
.dash-grid--edit .dash-tile__remove { display: inline-flex; align-items: center; justify-content: center; }
.dash-grid--edit .dash-tile__head { cursor: move; }
.dash-grid--edit .dash-tile { outline: 2px dashed var(--color-line); outline-offset: -2px; }
.dash-tile__body { flex: 1; min-height: 0; overflow-y: auto; }
.dash-tile__number { display: none; font-size: 2rem; font-weight: 650; color: var(--color-primary); text-decoration: none; line-height: 1.2; }
.dash-tile__number .small { display: block; font-size: .875rem; font-weight: 400; }
.dash-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; border-top: 1px solid var(--color-line); color: inherit; text-decoration: none; border-radius: 8px; }
.dash-line:first-child { border-top: 0; }
.dash-line:hover { background: var(--color-sand); }
/* Schmale oder niedrige Kachel: nur die Zahl */
@container (max-width: 250px) { .dash-tile__number { display: block; } .dash-tile__list { display: none; } }
@container (max-height: 120px) { .dash-tile__number { display: block; } .dash-tile__list { display: none; } }
/* Eine Spalte (Handy): Höhe aus dem Inhalt */
@media (max-width: 760px) {
  .dash-grid .grid-stack-item-content.dash-tile { container-type: inline-size; }
}
/* Dashboard: Pfeile und −/+ im Bearbeitungsmodus (auch am Handy) */
.dash-tile__tools { display: none; flex-wrap: wrap; gap: 4px; }
.dash-grid--edit .dash-tile__tools { display: flex; }
.dash-tile__tools button { min-width: 40px; height: 40px; padding: 0 8px; border: 1px solid var(--color-line); border-radius: 10px; background: var(--color-card); color: var(--color-primary); font: inherit; font-weight: 700; cursor: pointer; }
.dash-tile__tools button:hover { background: var(--color-sand); }
.dash-tile__sep { width: 6px; }
.dash-grid--narrow .dash-wide-only { display: none; }
.dash-grid--edit .dash-tile__body { opacity: .55; }
.dash-grid--edit .grid-stack-item-content.dash-tile { overflow: auto; }

/* Mitteilungen: Vorschau max. zwei Zeilen; formatierter Text */
.message-item { display: block; color: inherit; text-decoration: none; }
.message-item:hover { background: var(--color-sand); }
.message-item__preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; white-space: pre-line; }
.rich-text p { margin: 0 0 .6em; }
.rich-text ol, .rich-text ul { margin: 0 0 .6em; padding-left: 1.5em; }
.rich-text li[data-list="bullet"] { list-style-type: disc; }
.rich-text li[data-list="ordered"] { list-style-type: decimal; }
.rich-text a { color: var(--color-primary); }
.ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.ql-font-monospace { font-family: Consolas, "Courier New", monospace; }
.ql-size-small { font-size: .8em; }
.ql-size-large { font-size: 1.4em; }
.ql-size-huge { font-size: 2em; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-color-red { color: #b3261e; } .ql-color-green { color: #2f6b34; } .ql-color-blue { color: #1f5aa6; }
.ql-color-orange { color: #b45f06; } .ql-color-purple { color: #6a3d9a; } .ql-color-brown { color: #7a5a3c; } .ql-color-gray { color: #6b6b6b; }
.ql-bg-yellow { background-color: #fff3a3; } .ql-bg-lime { background-color: #d8f5c0; } .ql-bg-pink { background-color: #fbd3e0; }
.ql-bg-cyan { background-color: #cdeffa; } .ql-bg-orange { background-color: #fde0c2; }
.ql-indent-1 { padding-left: 2em; } .ql-indent-2 { padding-left: 4em; } .ql-indent-3 { padding-left: 6em; }

/* «hidden» gilt immer, auch bei Elementen mit eigener Anzeige (flex, grid) */
[hidden] { display: none !important; }