/* ============================================================
   Kladde - Design-Tokens
   Ruhiger Stil nach Reise-App-Vorlage: kuehles Hellgrau, weisse Pillen,
   tiefes Navy als einziger Akzent, grosse Rundungen, Jost als Schrift.
   Der Theme-Wechsel laeuft ausschliesslich ueber data-theme am
   <html>-Element, nie ueber prefers-color-scheme; die Auswahl
   wird lokal gespeichert.
   ============================================================ */

/* Jost: geometrische Grotesk (SIL Open Font License), als variable Schrift
   mit Gewichten 300-700. Liegt in der App, damit sie offline da ist. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/jost-latin.woff2) format('woff2');
}

:root {
  /* Radien - grosszuegig, die Vorlage hat kaum eine Ecke unter 20px */
  --r-sm: 10px;
  --r: 20px;
  --r-md: 28px;
  --r-full: 9999px;

  /* Abstaende (8pt-Raster mit 4pt-Unterteilung) */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 20px;
  --s-xl: 28px;
  --margin: 16px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Die Navigationsleiste waechst mit der Schrift mit: 32px sind Icon und
     Abstaende, der Rest ist die Beschriftung. Bei 1rem = 16px sind das
     wieder genau die 62px von vorher. */
  /* Die Navigation schwebt als Pille ueber dem Inhalt: 64px Pille plus
     12px Abstand zum Rand. */
  --nav-h: 76px;
}

/* Alle Schriftgroessen sind in rem angegeben und haengen damit an dieser
   einen Zahl. Die App setzt sie beim Start auf die Schriftgroesse, die in
   den Android-Einstellungen gewaehlt ist (siehe applyFontScale in app.js);
   im Browser bleibt es bei 16px. */
html { font-size: 16px; }

/* ---------- Dark Mode ----------

   Die vier Grundtoene der Vorlage: Primary D0BCFF, Secondary 134E3F,
   Tertiary E2C499, Neutral 16151F. Neutral ist die Grundflaeche des
   Systems - der Hintergrund liegt eine Stufe darunter, damit eine Karte
   sich abhebt, ohne dass sie einen Rand dafuer braucht.

   Gefuellte Flaechen sind im dunklen Design hell: ein FAB in Lavendel mit
   dunkler Schrift steht auf einem fast schwarzen Grund deutlicher als ein
   dunkelvioletter mit weisser. Darum traegt --on-primary-container hier
   die dunkle Farbe und nicht Weiss. */
html[data-theme='dark'] {
  --bg: #0B1118;                 /* Nachtblau, fast schwarz */
  --surf-lowest: #111924;        /* Sheets */
  --surf-low: #141C27;
  --surf: #18212D;               /* Kartenflaeche, Pillen */
  --surf-high: #212B38;
  --surf-highest: #2B3644;

  /* Im Dunkeln dreht sich das Paar der Vorlage um: aktiv ist hell mit
     dunkler Schrift - so steht es auf dem Nachtblau am deutlichsten. */
  --primary: #DCE4EE;
  --primary-container: #EEF2F7;
  --on-primary-container: #0F1A26;
  --primary-soft: rgba(220, 228, 238, 0.12);

  --secondary: #8FD9BE;          /* Emerald, fuer dunklen Grund aufgehellt */
  --secondary-container: #134E3F;
  --on-secondary-container: #D6F2E6;

  --tertiary: #E2C499;           /* Sand */
  --tertiary-container: #5B4429;
  --on-tertiary-container: #F7E7CD;

  --text: #EEF2F6;
  --text-dim: #B3BDC9;
  --text-faint: #7D8896;
  --outline: rgba(255, 255, 255, 0.07);
  --outline-strong: rgba(255, 255, 255, 0.15);
  --ripple: rgba(255, 255, 255, 0.07);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.32);
  --fab-glow: 0 10px 26px rgba(0, 0, 0, 0.5);
  --glass: rgba(24, 33, 45, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.07);
  --nav-dot: rgba(255, 255, 255, 0.06);
  --scrim: rgba(0, 0, 0, 0.62);
  --danger: #FFB4AB;
  color-scheme: dark;
}

/* ---------- Light Mode ----------

   Dieselben vier Toene, fuer hellen Grund umgerechnet: was im Dunkeln als
   heller Akzent auf dunkler Flaeche steht, wird hier zum satten Akzent auf
   heller. Lavendel als Flaeche mit dunkler Schrift waere auf Weiss zu blass,
   also dreht sich das Paar um - gefuellt wird mit dem tiefen Violett, die
   Schrift darauf ist weiss. Die Hintergruende bekommen denselben violetten
   Stich wie Neutral, damit beide Ansichten nach derselben App aussehen. */
html[data-theme='light'] {
  --bg: #ECEEF1;                 /* kuehles Hellgrau der Vorlage */
  --surf-lowest: #FFFFFF;
  --surf-low: #FFFFFF;
  --surf: #FFFFFF;
  --surf-high: #F4F5F7;
  --surf-highest: #E2E6EB;

  --primary: #13202F;            /* Navy - Text, Icons und gefuellte Flaechen */
  --primary-container: #13202F;
  --on-primary-container: #FFFFFF;
  --primary-soft: rgba(19, 32, 47, 0.08);

  --secondary: #134E3F;          /* Emerald unveraendert - traegt auf Weiss */
  --secondary-container: #CFEBE0;
  --on-secondary-container: #0B3A2D;

  --tertiary: #7A5A2A;           /* Sand, fuer Text abgedunkelt */
  --tertiary-container: #F6E4C6;
  --on-tertiary-container: #48341A;

  --text: #121A24;
  --text-dim: #46505D;
  --text-faint: #7A8492;
  --outline: rgba(18, 26, 36, 0.07);
  --outline-strong: rgba(18, 26, 36, 0.16);
  --ripple: rgba(19, 32, 47, 0.06);
  --shadow: 0 14px 34px rgba(18, 26, 36, 0.12);
  --shadow-sm: 0 4px 14px rgba(18, 26, 36, 0.06);
  --shadow-card: 0 10px 28px rgba(18, 26, 36, 0.07);
  --fab-glow: 0 10px 24px rgba(19, 32, 47, 0.30);
  --glass: rgba(255, 255, 255, 0.66);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --nav-dot: rgba(19, 32, 47, 0.05);
  --scrim: rgba(18, 26, 36, 0.40);
  --danger: #B3261E;
  color-scheme: light;
}

/* ---------- Notizfarben (themeunabhaengig) ----------
   Dunkle Karten bekommen hellen Text, helle Karten dunklen Text. */
.c-default {
  --card-bg: var(--surf);                --card-fg: var(--text);
  --card-dim: var(--text-faint);         --card-line: var(--outline);
  --card-box: var(--surf-high);          --card-tint: var(--ripple);
}
.c-onyx {
  --card-bg: #0D0D0D;               --card-fg: #FFFFFF;
  --card-dim: #C7C7C7;              --card-line: rgba(255, 255, 255, 0.13);
  --card-box: rgba(255, 255, 255, 0.07); --card-tint: rgba(255, 255, 255, 0.10);
}
.c-ruby {
  --card-bg: #833135;               --card-fg: #FFFFFF;
  --card-dim: #D3BBBC;              --card-line: rgba(255, 255, 255, 0.13);
  --card-box: rgba(255, 255, 255, 0.07); --card-tint: rgba(255, 255, 255, 0.10);
}
.c-blush {
  --card-bg: #EBD4D4;               --card-fg: #251818;
  --card-dim: #5D4646;              --card-line: rgba(37, 24, 24, 0.14);
  --card-box: rgba(37, 24, 24, 0.07); --card-tint: rgba(37, 24, 24, 0.08);
}
.c-espresso {
  --card-bg: #372C28;               --card-fg: #FFFFFF;
  --card-dim: #D0C2BD;              --card-line: rgba(255, 255, 255, 0.13);
  --card-box: rgba(255, 255, 255, 0.07); --card-tint: rgba(255, 255, 255, 0.10);
}
.c-apricot {
  --card-bg: #E4C8A8;               --card-fg: #251F18;
  --card-dim: #5D5346;              --card-line: rgba(37, 31, 24, 0.14);
  --card-box: rgba(37, 31, 24, 0.07); --card-tint: rgba(37, 31, 24, 0.08);
}
.c-gold {
  --card-bg: #C7B190;               --card-fg: #252018;
  --card-dim: #5D5446;              --card-line: rgba(37, 32, 24, 0.14);
  --card-box: rgba(37, 32, 24, 0.07); --card-tint: rgba(37, 32, 24, 0.08);
}
.c-pearl {
  --card-bg: #E4E1DC;               --card-fg: #252119;
  --card-dim: #5C5547;              --card-line: rgba(37, 33, 25, 0.14);
  --card-box: rgba(37, 33, 25, 0.07); --card-tint: rgba(37, 33, 25, 0.08);
}
.c-creme {
  --card-bg: #EEEADA;               --card-fg: #252318;
  --card-dim: #5D5946;              --card-line: rgba(37, 35, 24, 0.14);
  --card-box: rgba(37, 35, 24, 0.07); --card-tint: rgba(37, 35, 24, 0.08);
}
.c-vanilla {
  --card-bg: #E9EECF;               --card-fg: #232518;
  --card-dim: #5A5D46;              --card-line: rgba(35, 37, 24, 0.14);
  --card-box: rgba(35, 37, 24, 0.07); --card-tint: rgba(35, 37, 24, 0.08);
}
.c-sage {
  --card-bg: #C5D4BD;               --card-fg: #1C2518;
  --card-dim: #4E5D46;              --card-line: rgba(28, 37, 24, 0.14);
  --card-box: rgba(28, 37, 24, 0.07); --card-tint: rgba(28, 37, 24, 0.08);
}
.c-mint {
  --card-bg: #CDE0D5;               --card-fg: #18251D;
  --card-dim: #465D50;              --card-line: rgba(24, 37, 29, 0.14);
  --card-box: rgba(24, 37, 29, 0.07); --card-tint: rgba(24, 37, 29, 0.08);
}
.c-emerald {
  --card-bg: #26433A;               --card-fg: #FFFFFF;
  --card-dim: #BBD3CC;              --card-line: rgba(255, 255, 255, 0.13);
  --card-box: rgba(255, 255, 255, 0.07); --card-tint: rgba(255, 255, 255, 0.10);
}
.c-turquoise {
  --card-bg: #ADD6CB;               --card-fg: #182522;
  --card-dim: #465D57;              --card-line: rgba(24, 37, 34, 0.14);
  --card-box: rgba(24, 37, 34, 0.07); --card-tint: rgba(24, 37, 34, 0.08);
}
.c-candy {
  --card-bg: #B2C9D7;               --card-fg: #182025;
  --card-dim: #46545D;              --card-line: rgba(24, 32, 37, 0.14);
  --card-box: rgba(24, 32, 37, 0.07); --card-tint: rgba(24, 32, 37, 0.08);
}
.c-dustyblue {
  --card-bg: #A6B3C1;               --card-fg: #181E25;
  --card-dim: #46515D;              --card-line: rgba(24, 30, 37, 0.14);
  --card-box: rgba(24, 30, 37, 0.07); --card-tint: rgba(24, 30, 37, 0.08);
}
.c-sapphire {
  --card-bg: #263053;               --card-fg: #FFFFFF;
  --card-dim: #BBC1D3;              --card-line: rgba(255, 255, 255, 0.13);
  --card-box: rgba(255, 255, 255, 0.07); --card-tint: rgba(255, 255, 255, 0.10);
}
.c-cosmic {
  --card-bg: #27272D;               --card-fg: #FFFFFF;
  --card-dim: #C4C4CA;              --card-line: rgba(255, 255, 255, 0.13);
  --card-box: rgba(255, 255, 255, 0.07); --card-tint: rgba(255, 255, 255, 0.10);
}
.c-violet {
  --card-bg: #31274A;               --card-fg: #FFFFFF;
  --card-dim: #C2BBD3;              --card-line: rgba(255, 255, 255, 0.13);
  --card-box: rgba(255, 255, 255, 0.07); --card-tint: rgba(255, 255, 255, 0.10);
}
.c-lavender {
  --card-bg: #D7CFEA;               --card-fg: #1C1825;
  --card-dim: #4C465D;              --card-line: rgba(28, 24, 37, 0.14);
  --card-box: rgba(28, 24, 37, 0.07); --card-tint: rgba(28, 24, 37, 0.08);
}
.c-orchid {
  --card-bg: #DDC5D6;               --card-fg: #251822;
  --card-dim: #5D4657;              --card-line: rgba(37, 24, 34, 0.14);
  --card-box: rgba(37, 24, 34, 0.07); --card-tint: rgba(37, 24, 34, 0.08);
}
.c-burgundy {
  --card-bg: #432430;               --card-fg: #FFFFFF;
  --card-dim: #D3BBC4;              --card-line: rgba(255, 255, 255, 0.13);
  --card-box: rgba(255, 255, 255, 0.07); --card-tint: rgba(255, 255, 255, 0.10);
}
.c-mauve {
  --card-bg: #B2959A;               --card-fg: #25181A;
  --card-dim: #5D464A;              --card-line: rgba(37, 24, 26, 0.14);
  --card-box: rgba(37, 24, 26, 0.07); --card-tint: rgba(37, 24, 26, 0.08);
}
/* ============================================================
   Grundlagen
   ============================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Jost', Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.9375rem; line-height: 1.3125rem;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; background: none; border: 0; outline: none; }
textarea { resize: none; overflow: hidden; }
::placeholder { color: var(--text-faint); }
::-webkit-scrollbar { display: none; }
[hidden] { display: none !important; }

.icon-btn {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full); color: var(--text-dim);
  transition: background-color .15s, color .15s, transform .1s;
}
.icon-btn:active { background: var(--ripple); color: var(--text); transform: scale(.93); }
.icon-btn.tiny { width: 30px; height: 30px; flex-basis: 30px; }
.icon-btn.danger { color: var(--danger); }

.round-btn {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--surf); color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform .1s, background-color .15s, color .15s;
}
.round-btn:active { transform: scale(.92); }
.round-btn.on { background: var(--primary-container); color: var(--on-primary-container); }

/* Schiebeschalter fuer Hell/Dunkel. Der Knauf sitzt links im Light Mode und
   rechts im Dark Mode und traegt das Symbol des gerade aktiven Modus. */
.theme-switch {
  position: relative; flex: 0 0 52px;
  width: 52px; height: 30px;
}
.ts-track {
  position: absolute; left: 5px; right: 5px; top: 7px; height: 16px;
  border-radius: var(--r-full);
  background: var(--surf-highest);
  transition: background-color .2s;
}
html[data-theme='light'] .ts-track { background: #D5DAE0; }
.ts-knob {
  position: absolute; top: 0; left: 0;
  width: 30px; height: 30px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-container); color: var(--on-primary-container);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}
html[data-theme='dark'] .ts-knob { transform: translateX(22px); }
.theme-switch:active .ts-knob { transform: scale(.92); }
html[data-theme='dark'] .theme-switch:active .ts-knob { transform: translateX(22px) scale(.92); }

.text-btn {
  color: var(--on-primary-container); background: var(--primary-container);
  padding: 7px 14px; border-radius: var(--r-full);
  font-size: 0.75rem; font-weight: 600; letter-spacing: .02em;
}
.text-btn.ghost { background: none; color: var(--primary); padding: 6px 8px; }

/* ============================================================
   Kopfbereich
   ============================================================ */

#app { position: relative; height: 100%; display: flex; flex-direction: column; }

/* Die feste Kopfzeile ist im Normalfall nur der Streifen unter der
   Statusleiste. Sie waechst erst, wenn die Suche offen ist. */
.topbar {
  flex: 0 0 auto; z-index: 10;
  padding: var(--safe-top) var(--margin) 0;
  background: var(--bg);
}
.searching .topbar { padding-bottom: 6px; }

.topline { display: flex; align-items: center; gap: var(--s-sm); padding-top: 10px; }

.search-pill {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--s-sm);
  height: 52px; padding: 0 8px 0 18px;
  background: var(--surf);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  animation: selIn .16s;
}

/* ---------- Kopfbereich ----------
   Gruss und Wetter oben, darunter Datum und die grosse Ueberschrift mit der
   hohen Lupe daneben - wie "Explore the World" in der Vorlage. */
.hero { padding: 14px 2px 2px; }
.searching .hero { display: none; }

.hero-top { display: flex; align-items: center; gap: 10px; min-height: 56px; }
/* Wird auf schmalen Telefonen etwas kleiner: neben Schalter und Wetter
   bliebe von "Guten Abend" sonst nur "Guten Ab…". */
.hello {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: clamp(1.375rem, 6vw, 1.625rem); line-height: 2rem; font-weight: 500; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hero-main { display: flex; align-items: stretch; gap: 14px; margin-top: 20px; }
.hero-text { flex: 1 1 auto; min-width: 0; }
.eyebrow {
  margin-bottom: 6px;
  font-size: 0.75rem; line-height: 1rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}
.headline {
  margin: 0;
  font-size: 2.5rem; line-height: 2.875rem; font-weight: 500; letter-spacing: -.015em;
  word-break: break-word;
}

/* Die hohe Lupe: so hoch wie Datum und Ueberschrift zusammen. */
.search-tower {
  flex: 0 0 64px; width: 64px; min-height: 104px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 32px;
  background: var(--surf); color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform .12s;
}
.search-tower:active { transform: scale(.95); }

/* ---------- Wetter ----------
   Rundes Bild auf weissem Grund, daneben "Wetter" und die Temperatur -
   frei stehend auf dem Hintergrund, ohne eigene Kachel. */
.weather {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 0 2px 0 0;
  color: var(--text);
  transition: transform .12s;
}
.weather:active { transform: scale(.96); }
.w-pic {
  width: 52px; height: 52px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--surf); box-shadow: var(--shadow-sm);
}
.w-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.w-txt small { font-size: 0.75rem; color: var(--text-dim); font-weight: 500; }
.w-temp { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; }

/* Schmale Telefone: links sitzt jetzt das Profilbild. Damit "Guten Morgen"
   nicht zu "Guten M..." wird, ruecken Wetter und Gruss etwas zusammen. */
@media (max-width: 420px) {
  .hero-top { gap: 8px; }
  .hello { font-size: clamp(1.25rem, 5.6vw, 1.625rem); }
  .hello-wave { display: none; }
  .weather { gap: 6px; }
  .w-pic { width: 44px; height: 44px; }
  .w-txt small { display: none; }
}

/* Die Farben des Bildes. Wettertypisch, aber auf die Flaechen der App
   abgestimmt - die Wolke etwa ist im dunklen Design keine weisse Scheibe. */
/* Im hellen Design steht die Wolke inzwischen auf weissen Karten im Sheet und
   nicht mehr nur auf der grauen Kachel in der Leiste - als fast weisse
   Scheibe waere sie dort unsichtbar. */
:root {
  --w-sun: #f0a020;
  --w-sun-edge: #d97706;
  --w-cloud: #C3CDDE;
  --w-cloud-edge: #A6B2C6;
  --w-rain: #3b76d6;
  --w-snow: #7FA8DC;
}
html[data-theme='dark'] {
  --w-sun: #fbbf24;
  --w-sun-edge: #f59e0b;
  --w-cloud: #4a5163;
  --w-cloud-edge: #5c6478;
  --w-rain: #7aa8ef;
  --w-snow: #c7dcfb;
}

/* ---------- Wetter-Sheet ----------

   Das Sheet zeigt zuerst nur die Karte und faehrt beim Hochziehen auf volle
   Hoehe auf. Es ist dabei immer schon voll hoch (die Hoehe setzt app.js,
   weil sie erst das Layout kennt) und wird nur verschoben: eine Transform
   erledigt die Grafikkarte allein. Frueher wuchs die max-height mit jedem
   Fingerzucken, und jedes Mal musste das ganze Sheet neu gesetzt und gemalt
   werden - das war das Ruckeln. */
.sheet.w-sheet {
  background: var(--bg);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1);
  will-change: transform;
}
/* Solange nur die Karte zu sehen ist, wird nicht gescrollt.
   Sonst gewinnt das Scrollen das Rennen gegen die Hoehe: der Inhalt waere
   schon weggerutscht, bevor das Sheet ueberhaupt angefangen hat zu wachsen -
   und genau das sieht aus wie ein Sprung statt wie einer Bewegung.
   touch-action haelt dem Zug in dieser Stufe den Ruecken frei: der Browser
   soll die Geste nicht als Scrollen fuer sich nehmen. */
.sheet.w-sheet:not(.w-open) { overflow: hidden; touch-action: none; }
/* Passt alles hinein, gibt es auch aufgezogen nichts zu scrollen - dann
   soll der Browser die Geste nicht trotzdem fuer sich beanspruchen und den
   Zug nach wenigen Pixeln abbrechen. */
.sheet.w-sheet.w-fits { touch-action: none; }

.w-card {
  position: relative; overflow: hidden;
  margin: 2px var(--margin) 0; padding: 16px;
  border-radius: var(--r-md);
  background: var(--surf);
  border: 1px solid var(--outline);
}
/* Der warme Schimmer hinter dem Bild. Tags heller und hoeher, nachts tiefer
   und kuehler - dieselbe Karte, aber sie weiss, wie spaet es ist. */
.w-card::before {
  content: ''; position: absolute; right: -30px; top: -50px;
  width: 210px; height: 210px; border-radius: 50%;
  background: radial-gradient(circle, var(--w-glow) 0%, transparent 70%);
  pointer-events: none;
}
html[data-theme='dark'] .w-card.day { --w-glow: rgba(226, 196, 153, 0.22); }
html[data-theme='dark'] .w-card.night { --w-glow: rgba(170, 195, 230, 0.12); }
html[data-theme='light'] .w-card.day { --w-glow: rgba(226, 196, 153, 0.38); }
html[data-theme='light'] .w-card.night { --w-glow: rgba(19, 32, 47, 0.08); }

.w-card-top {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm);
}
.w-place, .w-fresh {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.6875rem; font-weight: 600;
  color: var(--text-dim); min-width: 0;
}
.w-place { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-place svg { color: var(--tertiary); flex: 0 0 auto; }
/* Der gruene Punkt: die Werte gelten fuer diesen Ort und sind frisch. */
.w-live {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--secondary);
}
.w-fresh {
  flex: 0 0 auto; padding: 4px 9px; border-radius: var(--r-full);
  background: var(--surf-high); color: var(--text-faint);
}

.w-card-main {
  position: relative;
  display: flex; align-items: center; gap: var(--s-sm);
  padding: 10px 0 14px;
}
.w-card-left { flex: 1 1 auto; min-width: 0; }
.w-card-temp {
  display: flex; align-items: flex-start; gap: 2px;
  font-size: 2.75rem; line-height: 1.1; font-weight: 300; letter-spacing: -.03em;
}
.w-card-temp span { font-size: 0.875rem; font-weight: 500; margin-top: 6px; color: var(--text-dim); }
.w-card-desc {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px; font-size: 0.8125rem; font-weight: 600;
}
.w-card-desc i { width: 5px; height: 5px; border-radius: 50%; background: var(--tertiary); }
.w-card-mood { margin-top: 3px; font-size: 0.75rem; color: var(--text-faint); line-height: 1.125rem; }
.w-card-pic { flex: 0 0 auto; display: flex; }

/* Vier Kacheln, zwei je Zeile - vier nebeneinander waeren auf einem Telefon
   vier schmale Streifen, in denen "14 km/h NW" umbricht. */
.w-tiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
.w-tile {
  display: flex; align-items: center; gap: var(--s-sm);
  padding: 10px 12px; border-radius: var(--r);
  background: var(--surf-high); min-width: 0;
}
.wt-icon {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--surf-highest); color: var(--text-dim);
}
.w-tile.warm .wt-icon { color: var(--tertiary); }
.w-tile.cool .wt-icon { color: var(--secondary); }
.wt-text { display: flex; flex-direction: column; min-width: 0; }
.wt-text small { font-size: 0.6875rem; color: var(--text-faint); }
.wt-text b {
  font-size: 0.8125rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Was beim Scrollen hochkommt ---------- */

.w-block { padding: 18px var(--margin) 0; }
.w-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-sm); padding: 0 2px 10px;
}
.w-block-head h4 { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: .01em; }
.w-block-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6875rem; font-weight: 600; color: var(--secondary);
}
.w-block-sub { font-size: 0.6875rem; color: var(--text-faint); }

.w-hours {
  display: flex; gap: var(--s-sm); overflow-x: auto;
  padding: 0 0 2px; scrollbar-width: none;
  /* Damit die Reihe bis an den Rand laufen darf, obwohl der Block Luft hat. */
  margin: 0 calc(var(--margin) * -1); padding-left: var(--margin); padding-right: var(--margin);
}
.w-hours::-webkit-scrollbar { display: none; }
/* Die Stunden wischt man seitwaerts; senkrecht gehoert der Zug dem Sheet -
   ausser es ist voll aufgezogen und scrollt, dann scrollt es auch von hier. */
.sheet.w-sheet:not(.w-open) .w-hours,
.sheet.w-sheet.w-fits .w-hours { touch-action: pan-x; }
/* Alle Kacheln gleich hoch, egal wie lang das Wort darin ist - eine, die
   aus der Reihe waechst, zieht den Blick auf die falsche Stunde. */
.w-hours { align-items: stretch; }
.w-hour {
  flex: 0 0 auto; width: 68px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px 9px; border-radius: var(--r);
  background: var(--surf); border: 1px solid var(--outline);
  font-size: 0.6875rem; color: var(--text-faint);
}
.w-hour.now { background: var(--surf-high); border-color: var(--outline-strong); }
.wh-top { font-size: 0.75rem; font-weight: 700; color: var(--text); }
.wh-sub {
  font-size: 0.625rem; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wh-pic { display: flex; margin: 2px 0; }
.w-hour b { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.wh-rain {
  display: block; width: 100%; height: 3px; border-radius: 2px;
  background: var(--outline); overflow: hidden;
}
.wh-rain i { display: block; height: 100%; border-radius: 2px; background: var(--secondary); }
.w-hour small { font-size: 0.625rem; }

.w-days { display: flex; flex-direction: column; gap: 2px; }
.w-day {
  display: flex; align-items: center; gap: var(--s-sm);
  padding: 11px 14px; border-radius: var(--r);
  background: var(--surf); border: 1px solid var(--outline);
}
.wd-name { flex: 0 0 34%; display: flex; flex-direction: column; min-width: 0; }
.wd-name b { font-size: 0.8125rem; font-weight: 600; }
.wd-name small { font-size: 0.6875rem; color: var(--text-faint); }
.wd-mid {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; color: var(--text-dim);
}
.wd-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-rain { display: inline-flex; align-items: center; gap: 3px; color: var(--secondary); font-weight: 600; }
.wd-temp { flex: 0 0 auto; display: flex; align-items: baseline; gap: 3px; }
.wd-temp b { font-size: 0.875rem; font-weight: 600; }
.wd-temp small { font-size: 0.75rem; color: var(--text-faint); }

.w-actions {
  display: flex; flex-direction: column; gap: var(--s-sm);
  padding: 18px var(--margin) 6px;
}
.w-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-sm);
  width: 100%; padding: 14px; border-radius: var(--r-full);
  font-size: 0.8125rem; font-weight: 600;
  transition: transform .1s, opacity .15s;
}
.w-btn:active { transform: scale(.98); }
/* Der Verlauf von Lavendel nach Sand: die beiden Akzente der Vorlage in einem
   Knopf - er ist die einzige Flaeche im Sheet, die etwas anstoesst. */
.w-btn.primary {
  background: linear-gradient(100deg, var(--primary-container), var(--tertiary));
  color: var(--on-primary-container);
}
.w-btn.primary.busy { opacity: .6; }
.w-btn.primary.busy svg { animation: w-spin 1s linear infinite; }
@keyframes w-spin { to { transform: rotate(360deg); } }
.w-btn.ghost { background: var(--surf); border: 1px solid var(--outline); color: var(--text-dim); }

/* Im hellen Design traegt der Verlaufsknopf weisse Schrift - Sand unter
   dunkler Schrift waere dort der hellste Fleck auf dem Schirm. */
html[data-theme='light'] .w-btn.primary {
  background: linear-gradient(100deg, var(--primary-container), #3A4E66);
  color: #FFFFFF;
}

.search-icon { display: flex; color: var(--text-faint); }
.search-pill input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  font-size: 0.875rem; -webkit-appearance: none;
}
.search-pill input::-webkit-search-cancel-button { display: none; }

/* Die Filterzeile scrollt mit dem Kopfbereich hoch und bleibt dann oben
   kleben - Labels und Ansicht sind immer in Reichweite. */
.filterbar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: var(--s-sm);
  margin: 0 calc(var(--margin) * -1);
  padding: 18px var(--margin) 10px;
  background: var(--bg);
}
.searching .filterbar { padding-top: 4px; }
/* Ohne Label-Chips (Kalender, Labels) rutschen die Knoepfe nach rechts,
   statt verloren am linken Rand zu stehen. */
.filterbar:has(> .chips-scroll[hidden]) { justify-content: flex-end; }
.chips-scroll {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--s-sm);
  overflow-x: auto; padding: 2px 0;
}

.chip-btn {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: var(--r-full);
  background: var(--surf); color: var(--text);
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0;
  white-space: nowrap;
  transition: transform .1s, background-color .15s, color .15s;
}
.chip-btn:active { transform: scale(.95); }
.chip-btn.on { background: var(--primary-container); color: var(--on-primary-container); }
.searchfilter .chip-btn { height: 36px; padding: 0 14px; font-size: 0.8125rem; }

/* Filter-Chips waehrend der Suche: Alle / Listen / Notizen und der
   Schalter, der den Papierkorb mitdurchsucht. */
.searchfilter { display: flex; align-items: center; padding: var(--s-sm) 0 0; }
.searchfilter .chips-scroll { gap: 6px; }
.chip-btn .chip-num {
  font-variant-numeric: tabular-nums; opacity: .7; font-weight: 600;
}
.chip-btn.on .chip-num { opacity: .85; }
.chip-btn.sep { margin-left: 6px; position: relative; }
.chip-btn.sep::before {
  content: ''; position: absolute; left: -6px; top: 20%; bottom: 20%;
  width: 1px; background: var(--outline-strong);
}

.chip-icon {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--surf); color: var(--text);
  transition: transform .1s;
}
.chip-icon:active { transform: scale(.93); }
.chip-icon.on { background: var(--primary-container); color: var(--on-primary-container); }

/* Auswahlmodus: liegt ueber Suchleiste und Filterzeile */
.selectbar {
  position: absolute; left: var(--margin); right: var(--margin);
  top: calc(var(--safe-top) + 10px);
  display: flex; align-items: center; gap: 2px;
  height: 56px; padding: 0 8px;
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  animation: selIn .16s;
}
@keyframes selIn { from { opacity: 0; transform: translateY(-6px); } }
.selectbar .icon-btn { color: var(--on-primary-container); opacity: .88; }
.selectbar .icon-btn:active { background: var(--ripple); opacity: 1; }
.selectbar .icon-btn.danger { color: #E8857A; }
.sel-count { flex: 1 1 auto; padding-left: 6px; font-size: 0.9375rem; font-weight: 600; }

/* ============================================================
   Board
   ============================================================ */

.scroller {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  padding: 0 var(--margin);
}
.scroller.dnd-locked { overflow: hidden; }


/* ============================================================
   Kalender
   ============================================================ */

/* Platz fuer die schwebende Leiste und den Plus-Knopf darueber - sonst
   liegt der letzte Eintrag darunter und ist nicht zu treffen. */
.calendar { padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 80px); }

.cal-head {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 4px 0 14px;
}
.cal-title { flex: 1 1 auto; font-size: 1.375rem; font-weight: 500; padding-left: 2px; }
.cal-head .icon-btn {
  width: 44px; height: 44px; flex-basis: 44px;
  background: var(--surf); color: var(--text); box-shadow: var(--shadow-sm);
}
.cal-next { transform: rotate(180deg); }

/* Monat / Woche / Tag */
.cal-views {
  flex: 0 0 100%; margin-top: 6px;
  display: flex; gap: 4px; padding: 4px;
  background: var(--surf); border-radius: var(--r-full);
}
.cal-view {
  flex: 1 1 0; padding: 11px 0; border-radius: var(--r-full);
  font-size: 0.875rem; font-weight: 500; color: var(--text-dim);
}
.cal-view.on { background: var(--primary-container); color: var(--on-primary-container); }

/* ---------- Monatsraster ---------- */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  padding: 12px 8px 10px; border-radius: var(--r-md);
  background: var(--surf); box-shadow: var(--shadow-card);
}
.cal-wd {
  padding: 2px 0 6px; text-align: center;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text-faint); text-transform: uppercase;
}
.cal-day {
  position: relative; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 14px; background: transparent; color: var(--text);
  font-size: 0.875rem;
}
.cal-day.out { color: var(--text-faint); }
.cal-day.today .cal-num {
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--r-full); width: 30px; height: 30px;
  display: grid; place-items: center; font-weight: 600;
}
.cal-day.sel { background: var(--surf-high); }
.cal-num { line-height: 26px; height: 26px; }

.cal-dots { display: flex; gap: 3px; height: 5px; }
.cal-dot { width: 5px; height: 5px; border-radius: var(--r-full); background: var(--primary); }
.cal-dot.late { background: var(--danger); }
.cal-dot.done { background: var(--text-faint); }
.cal-more { font-size: 0.5625rem; color: var(--text-faint); line-height: 1; }

/* Feiertage: frei steht rot wie in jedem Wandkalender, nur teilweise oder
   regional frei gedaempft. Heute behaelt seine Flaeche - die Farbe der
   Zahl wuerde darauf verschwinden. */
.cal-day.hol:not(.today) .cal-num { color: var(--danger); font-weight: 600; }
.cal-day.hol-part:not(.today) .cal-num { color: var(--danger); opacity: .65; }
.cal-tg-day.hol:not(.today) .tg-num { color: var(--danger); }
.cal-tg-day.hol-part:not(.today) .tg-num { color: var(--danger); opacity: .65; }

/* ---------- Tagesliste unter dem Monat ---------- */
.cal-list { margin-top: var(--s-lg); }
.cal-list-head {
  padding: 0 4px 10px;
  font-size: 1.1875rem; font-weight: 500;
  color: var(--text);
}
.cal-empty { padding: var(--s-md) 2px; color: var(--text-faint); font-size: 0.875rem; }

.cal-row {
  display: flex; gap: var(--s-md); align-items: flex-start;
  padding: 16px 18px; margin-bottom: 10px;
  background: var(--surf); border-radius: 22px;
  box-shadow: var(--shadow-card);
}
.cal-row.done { opacity: .55; }
.cal-row.done .cal-row-title { text-decoration: line-through; }
.cal-time {
  flex: 0 0 auto; min-width: 76px;
  font-size: 0.875rem; font-weight: 600; color: var(--primary);
}
.cal-time.late { color: var(--danger); }
.cal-mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-row-title { font-size: 1rem; font-weight: 500; }
.cal-kind {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--text-faint);
}
.cal-mute::before { content: '·'; margin-right: 5px; }

/* Ein Feiertag in der Tagesliste ist kein Eintrag: nur umrandet, ohne
   eigene Flaeche und ohne Schatten. */
.cal-row.cal-hol {
  background: transparent; box-shadow: inset 0 0 0 1px var(--outline-strong);
  padding-top: 12px; padding-bottom: 12px;
}
.cal-row.cal-hol .cal-time { color: var(--text-faint); }
.cal-row.cal-hol.frei .cal-time,
.cal-row.cal-hol.teils .cal-time,
.cal-row.cal-hol.regional .cal-time { color: var(--danger); }

/* ---------- Stundenraster: Woche und Tag ---------- */
.cal-tg { --tg-gutter: 44px; }

.cal-tg-head, .cal-tg-allday {
  display: grid; grid-template-columns: var(--tg-gutter) repeat(7, 1fr); gap: 1px;
}
.cal-tg.one .cal-tg-head,
.cal-tg.one .cal-tg-allday { grid-template-columns: var(--tg-gutter) 1fr; }

.cal-tg-day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 0; border-radius: var(--r-sm); color: var(--text);
}
.cal-tg-day .tg-wd { font-size: 0.625rem; color: var(--text-faint); text-transform: uppercase; }
.cal-tg-day .tg-num { font-size: 0.875rem; font-weight: 600; }
.cal-tg-day.today .tg-num {
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--r-full); width: 24px; height: 24px;
  display: grid; place-items: center;
}
.cal-tg-day.sel { background: var(--surf-high); }

.cal-tg-allday { padding: 2px 0; border-bottom: 1px solid var(--outline); }
.cal-tg-alllabel { font-size: 0.625rem; color: var(--text-faint); align-self: center; }
.cal-tg-allcell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cal-chip {
  padding: 2px 6px; border-radius: var(--r-sm);
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: 0.625rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-chip.done { opacity: .5; }
.cal-chip.cal-hol {
  background: transparent; color: var(--text-faint);
  box-shadow: inset 0 0 0 1px var(--outline-strong);
}
.cal-chip.cal-hol.frei, .cal-chip.cal-hol.teils, .cal-chip.cal-hol.regional { color: var(--danger); }

.cal-tg-body { position: relative; display: flex; margin-top: var(--s-sm); }
.cal-tg-hours {
  flex: 0 0 var(--tg-gutter);
  display: flex; flex-direction: column;
}
.cal-tg-hour {
  font-size: 0.625rem; color: var(--text-faint);
  /* Die Beschriftung sitzt an der Linie, nicht mittig im Feld. */
  transform: translateY(-6px);
}
.cal-tg-cols { flex: 1 1 auto; display: flex; gap: 1px; min-width: 0; }
.cal-tg-col { position: relative; flex: 1 1 0; min-width: 0; }
.cal-tg-col.today { background: var(--surf-lowest); }
.cal-tg-slot { border-top: 1px solid var(--outline); }

.cal-block {
  position: absolute; left: 1px; right: 1px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 3px 5px; border-radius: var(--r-sm);
  background: var(--primary-container); color: var(--on-primary-container);
  text-align: left; overflow: hidden;
}
.cal-block .cb-time { font-size: 0.5625rem; line-height: 1.2; opacity: .85; }
.cal-block .cb-title {
  font-size: 0.6875rem; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Eine eigene Farbe faerbt Block, Chip und Punkt - dieselben Klassen wie
   auf den Karten, damit Hell und Dunkel ohne zweite Tabelle stimmen. Die
   Zeile in der Tagesliste bekommt nur einen Streifen: eine ganz eingefaerbte
   Zeile wuerde die Liste zum Flickenteppich. */
.cal-block.tinted { background: var(--card-bg); color: var(--card-fg); }
.cal-chip.tinted { background: var(--card-bg); color: var(--card-fg); }
.cal-dot.tinted { background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--outline-strong); }
.cal-row.tinted { box-shadow: inset 3px 0 0 var(--card-bg); }

.cal-block.late { background: var(--surf-high); color: var(--danger); }
/* Ueberfaellig und trotzdem farbig: ein roter Rand statt einer roten Flaeche.
   Sonst waere die gewaehlte Farbe bei allem verschwunden, was schon vorbei
   ist - und das ist im Kalender der groessere Teil. */
.cal-block.tinted.late {
  background: var(--card-bg); color: var(--card-fg);
  box-shadow: inset 0 0 0 2px var(--danger);
}
.cal-block.done { opacity: .5; }
.cal-block.done .cb-title { text-decoration: line-through; }

/* Die aktuelle Uhrzeit als Linie mit Punkt am Rand. */
.cal-now {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--danger); pointer-events: none;
}
.cal-now::before {
  content: ''; position: absolute; left: -3px; top: -3px;
  width: 8px; height: 8px; border-radius: var(--r-full); background: var(--danger);
}

/* ---------- Zeichnen ---------- */

/* Die Flaeche liegt ueber dem ganzen Inhalt und laesst im Zeigermodus alles
   durch - erst der Stift macht sie greifbar. Ohne diesen Schalter waere
   jeder Wisch entweder ein Strich oder ein Blaettern, nie beides. */
.draw-layer {
  position: absolute; left: 0; top: 0; z-index: 2;
  pointer-events: none;
}
.draw-layer.on {
  pointer-events: auto;
  /* Sonst nimmt der Browser den ersten Zug als Blaettern und der Strich
     bricht nach wenigen Punkten ab. */
  touch-action: none;

  /* Ein eigenes Fadenkreuz statt `crosshair`.

     Wie das Systemkreuz aussieht, entscheidet das Zeigerschema des
     Betriebssystems - je nach Einstellung ist es weiss, und dann ist auf
     hellem Grund nicht mehr zu erkennen, wo man gerade zeichnet. Hier liegt
     ein breiter weisser Saum unter einem duennen dunklen Strich: diese
     Kombination hebt sich von jedem Untergrund ab, hell wie dunkel.

     `crosshair` bleibt als Rueckfall stehen, falls ein Browser das Bild
     nicht laden kann - ein Zeiger ist besser als keiner. */
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><g fill='none' stroke-linecap='round'><path d='M12 2.5v6.5M12 15v6.5M2.5 12h6.5M15 12h6.5' stroke='%23fff' stroke-width='3.5'/><path d='M12 2.5v6.5M12 15v6.5M2.5 12h6.5M15 12h6.5' stroke='%23111' stroke-width='1.4'/></g></svg>") 12 12, crosshair;
}

/* Der Radiergummi zeigt, wie weit er reicht - ein Kreuz sagt darueber
   nichts, und man radiert sonst nach Gefuehl. */
.draw-layer.on.radiert {
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><g fill='none'><circle cx='14' cy='14' r='9.5' stroke='%23fff' stroke-width='3.5'/><circle cx='14' cy='14' r='9.5' stroke='%23111' stroke-width='1.4'/></g></svg>") 14 14, crosshair;
}

/* Unten rechts statt mittig: auf halber Hoehe stand die Leiste genau ueber
   den Knoepfen neben dem Titel, und das ⋮-Menue war nicht mehr zu treffen.
   Ueber der Fussleiste ist sie aus dem Weg und trotzdem in Daumenweite. */
.draw-bar {
  position: absolute; right: 8px; bottom: calc(var(--safe-bottom) + 100px);
  z-index: 12;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px; border-radius: 26px;
  background: var(--surf);
  box-shadow: var(--shadow);
  transition: opacity .18s;
}
/* Beim Schreiben tritt sie zurueck - aber nur so weit, dass man sie noch
   sieht und trifft. Auf dem Telefon steht die Tastatur beim Schreiben fast
   immer offen; ganz blass waere sie dann meistens blass. */
.editor-body:focus-within ~ .draw-bar { opacity: .55; }
.draw-bar:hover, .draw-bar:focus-within { opacity: 1; }

.dr-btn {
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--text-dim);
}
.dr-btn:active { background: var(--ripple); }
.dr-btn.on { background: var(--primary-container); color: var(--on-primary-container); }
.dr-btn[disabled] { opacity: .3; }
.dr-sep { width: 20px; height: 1px; background: var(--outline); margin: 3px 0; }

/* Der Klappknopf: zugeklappt zeigt der Winkel nach oben, aufgeklappt nach
   unten - er weist immer dorthin, wo die Leiste hinwill. */
.dr-fold { color: var(--text-faint); }
.dr-fold svg { transition: transform .18s; }
.draw-bar.klein .dr-fold svg { transform: rotate(180deg); }
.dr-dot {
  width: 18px; height: 18px; border-radius: var(--r-full);
  border: 1px solid var(--outline-strong);
}

/* ---------- Auswahlzeile im Sheet ---------- */
.sheet-choice { padding: 2px 22px var(--s-md); }
.sc-label {
  display: block; margin-bottom: 8px; padding-left: 4px;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: .02em; color: var(--text-dim);
}
.sc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-opt {
  padding: 11px 16px; border-radius: var(--r-full);
  background: var(--surf-high); color: var(--text);
  border: 1px solid transparent;
  font-size: 0.875rem; font-weight: 500;
}
.sc-opt.on {
  background: var(--primary-container); color: var(--on-primary-container);
  border-color: transparent;
}

/* Farbtupfer zum Durchwischen. Waagerecht verschiebbar, damit siebzehn
   Farben eine Zeile bleiben und das Formular darunter sichtbar bleibt. */
.sheet-colors {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px;
  scrollbar-width: none;
}
.sheet-colors::-webkit-scrollbar { display: none; }
.sc-dot {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-full);
  background: var(--card-bg); border: 1px solid var(--outline-strong);
}
.sc-dot.on { box-shadow: 0 0 0 2px var(--primary); border-color: transparent; }
.sheet-link.danger { color: var(--danger); }

/* ---------- Termin auf der Karte ---------- */
/* Wie die Datums-Pillen der Vorlage ("27/03 - 7/04"). */
.card-due {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px;
  padding: 7px 13px; border-radius: var(--r-full);
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: 0.8125rem; font-weight: 500;
}
/* Ueberfaellig: die einzige Angabe auf einer Karte, die etwas will. */
.card-due.late { background: var(--surf-high); color: var(--danger); }

/* Erledigte ToDos bleiben lesbar, treten aber zurueck. */
.card.done { opacity: .55; }
.card.done .card-title { text-decoration: line-through; }

/* ---------- Schnellwahl im Erinnerungs-Sheet ---------- */
.quick-times {
  display: flex; flex-wrap: wrap; gap: var(--s-sm);
  padding: 2px 22px 10px;
}
.quick-time {
  padding: 11px 16px; border-radius: var(--r-full);
  background: var(--surf-high); color: var(--text);
  border: 1px solid transparent;
  font-size: 0.875rem; font-weight: 500;
}
.quick-time:active { transform: scale(.97); }

/* ---------- Nach unten ziehen zum Aktualisieren ----------
   Der Anzeiger haengt am Rand von #app, nicht im Scroller: er soll beim
   Ziehen stehenbleiben und nicht mitscrollen. Bewegt wird er allein ueber
   transform - das laeuft auf dem Kompositor und bleibt auch auf einem
   aelteren Geraet fluessig. */
.pull {
  position: absolute; left: 50%; top: calc(var(--safe-top) + 6px); z-index: 11;
  width: 44px; height: 44px; margin-left: -22px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--surf-high);
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(0) scale(.55);
  pointer-events: none;
}
.pull.is-eased { transition: transform .25s ease, opacity .25s ease; }

/* Solange gezogen wird, stehen die Punkte still - sie wachsen nur mit der
   Zugstrecke ein. Erst beim Loslassen, wenn wirklich abgeglichen wird,
   laufen sie los. Das ist derselbe Ablauf, den man aus anderen Apps kennt:
   das Symbol zeigt zuerst den Zug und dann die Arbeit. */
.pull .three-body,
.pull .three-body__dot::after { animation-play-state: paused; }
.pull.is-busy .three-body,
.pull.is-busy .three-body__dot::after { animation-play-state: running; }

/* ---------- Startbildschirm ---------- */
.boot {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .3s ease;
}
.boot.is-done { opacity: 0; pointer-events: none; }

/* ---------- Ladepunkte ----------
   Nach einer Vorlage von Uiverse.io (dovatgabriel), an die Farben der App
   angepasst: die Groesse kommt aus --uib-size, die Farbe aus dem Design. */
.three-body {
  --uib-size: 32px;
  --uib-speed: 0.8s;
  --uib-color: var(--primary);
  position: relative; display: inline-block;
  height: var(--uib-size); width: var(--uib-size);
  animation: three-body-spin calc(var(--uib-speed) * 2.5) infinite linear;
}
.boot .three-body { --uib-size: 44px; }

.three-body__dot { position: absolute; height: 100%; width: 30%; }
.three-body__dot::after {
  content: ''; position: absolute;
  height: 0; width: 100%; padding-bottom: 100%;
  background-color: var(--uib-color); border-radius: 50%;
}

.three-body__dot:nth-child(1) {
  bottom: 5%; left: 0;
  transform: rotate(60deg); transform-origin: 50% 85%;
}
.three-body__dot:nth-child(1)::after {
  bottom: 0; left: 0;
  animation: three-body-wobble1 var(--uib-speed) infinite ease-in-out;
  animation-delay: calc(var(--uib-speed) * -0.3);
}

.three-body__dot:nth-child(2) {
  bottom: 5%; right: 0;
  transform: rotate(-60deg); transform-origin: 50% 85%;
}
.three-body__dot:nth-child(2)::after {
  bottom: 0; left: 0;
  animation: three-body-wobble1 var(--uib-speed) infinite
    calc(var(--uib-speed) * -0.15) ease-in-out;
}

.three-body__dot:nth-child(3) {
  bottom: -5%; left: 0;
  transform: translateX(116.666%);
}
.three-body__dot:nth-child(3)::after {
  top: 0; left: 0;
  animation: three-body-wobble2 var(--uib-speed) infinite ease-in-out;
}

@keyframes three-body-spin { to { transform: rotate(360deg); } }
@keyframes three-body-wobble1 {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-66%) scale(.65); opacity: .8; }
}
@keyframes three-body-wobble2 {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(66%) scale(.65); opacity: .8; }
}

/* Wer Bewegung im System abgestellt hat, bekommt hier auch keine. */
@media (prefers-reduced-motion: reduce) {
  .three-body, .three-body__dot::after { animation: none; }
}
.scroller-pad { height: calc(var(--nav-h) + var(--safe-bottom) + 40px); }

.result-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-md); padding: 2px 2px var(--s-md);
  font-size: 0.75rem; color: var(--text-dim);
}
.result-line .hit {
  color: var(--on-primary-container); background: var(--primary-container);
  padding: 2px 8px; border-radius: var(--r-full); font-weight: 600;
}

/* "Top Recommendation  View All": ruhige Zwischenueberschrift statt
   Versalien-Etikett. */
.group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 4px 12px;
}
.group-head .gh-icon { display: none; }
.group-head h2 {
  flex: 1 1 auto; margin: 0;
  font-size: 1.1875rem; line-height: 1.5rem; font-weight: 500; letter-spacing: -.005em;
  color: var(--text);
}
.group-head .gh-count { font-size: 0.8125rem; font-weight: 500; color: var(--text-dim); }

.board {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 4px;
  column-gap: 14px;
  align-items: start;
  padding-bottom: var(--s-lg);
}
.board[data-cols='2'] { grid-template-columns: 1fr 1fr; }

.card {
  position: relative; overflow: hidden;
  background: var(--card-bg); color: var(--card-fg);
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  padding: 22px;
  box-shadow: var(--shadow-card);
  transition: transform .12s;
}
/* Die weisse Standardkarte braucht auf dem hellen Grau keinen Rand. */
html[data-theme='light'] .card.c-default { border-color: transparent; }
.board[data-cols='2'] .card { padding: 14px; border-radius: 22px; }
.card:active { transform: scale(.985); }

/* Ausgewaehlte Karte im Mehrfachauswahl-Modus */
.card.sel { box-shadow: 0 0 0 3px var(--primary); }
.card-check {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-container); color: var(--on-primary-container);
  box-shadow: 0 0 0 2px var(--card-bg);
}

/* Bilder oben auf der Karte.
   Bis zu vier Bilder werden als Mosaik gezeigt - das erste gross, der Rest
   als Streifen darunter. Frueher stand dort nur "+2 weitere", was man nicht
   anschauen konnte. Ab dem fuenften Bild traegt die letzte Kachel die Zahl.
   Wie in der Vorlage sitzt das Bild eingerahmt in der Karte, mit eigener
   Rundung, statt bis an die Kante zu laufen. */
.card-photos {
  margin: -12px -12px 16px;
  display: grid; gap: 3px;
  border-radius: 20px; overflow: hidden;
  background: var(--card-line);
}
.board[data-cols='2'] .card-photos {
  margin: -6px -6px 10px; border-radius: 16px;
}
.card-photos[data-n='1'] { grid-template-columns: 1fr; }
.card-photos[data-n='2'] { grid-template-columns: 1fr 1fr; }
.card-photos[data-n='3'], .card-photos[data-n='4'] { grid-template-columns: repeat(3, 1fr); }
/* Das erste Bild bekommt die volle Breite, die kleineren reihen sich darunter. */
.card-photos[data-n='3'] .cp-cell:first-child,
.card-photos[data-n='4'] .cp-cell:first-child { grid-column: 1 / -1; }

.cp-cell { position: relative; overflow: hidden; background: var(--card-box); }
.card-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-photos[data-n='1'] .card-photo { max-height: 210px; }
.card-photos[data-n='2'] .card-photo { height: 120px; }
.card-photos[data-n='3'] .cp-cell:first-child .card-photo,
.card-photos[data-n='4'] .cp-cell:first-child .card-photo { height: 132px; }
.card-photos[data-n='3'] .card-photo,
.card-photos[data-n='4'] .card-photo { height: 74px; }
.board[data-cols='2'] .card-photos[data-n='1'] .card-photo { max-height: 130px; }
.board[data-cols='2'] .card-photos[data-n='2'] .card-photo { height: 82px; }
.board[data-cols='2'] .card-photos[data-n='3'] .cp-cell:first-child .card-photo,
.board[data-cols='2'] .card-photos[data-n='4'] .cp-cell:first-child .card-photo { height: 96px; }
.board[data-cols='2'] .card-photos[data-n='3'] .card-photo,
.board[data-cols='2'] .card-photos[data-n='4'] .card-photo { height: 52px; }

/* "+3" auf der letzten Kachel, wenn mehr Bilder da sind als Platz */
.cp-rest {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .52); color: #fff;
  font-size: 0.875rem; font-weight: 700; letter-spacing: .02em;
}

.card-head {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 14px;
}
/* Das Typ-Symbol steht in einem eigenen runden Feld - wie das Baum-Symbol
   auf der dunklen Karte der Vorlage. */
.card-head .ch-icon {
  flex: 0 0 34px; width: 34px; height: 34px; margin-top: -4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--card-tint); color: var(--card-fg);
}
.card-title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 1.3125rem; line-height: 1.625rem; font-weight: 500; letter-spacing: -.01em;
  word-break: break-word;
}
.board[data-cols='2'] .card-title { font-size: 1.0625rem; line-height: 1.375rem; }
/* In schmalen Spalten zerbrachen lange Woerter mitten im Wort
   ("Wochenei|nkauf"). Mit Silbentrennung wird daraus "Wochen-|einkauf" -
   die Sprache dafuer kommt aus lang="de" am <html>. */
.card-title, .card-item, .card-text, .sec-box-name, .ed-title, .item-text {
  -webkit-hyphens: auto; hyphens: auto;
}
.board[data-cols='2'] .card-head .ch-icon { flex-basis: 28px; width: 28px; height: 28px; margin-top: -3px; }
/* In der schmalen Spalte hat die Posten-Pille keinen Platz mehr. */
.board[data-cols='2'] .sec-pill { display: none; }
.board[data-cols='2'] .card-foot { font-size: 0.6562rem; }
.card-head .ch-pin { flex: 0 0 auto; color: var(--card-fg); opacity: .7; }
/* Zeigt an, dass noch jemand an dieser Notiz haengt. Blasser als die
   Stecknadel: es ist eine Auskunft, keine Auszeichnung. */
.card-head .ch-share { flex: 0 0 auto; color: var(--card-fg); opacity: .55; display: flex; }

.card-text {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-size: 0.9375rem; line-height: 1.375rem;
  max-height: 12.6em; overflow: hidden;
}

/* Abschnitts-Box auf der Karte */
.sec-box {
  background: var(--card-box);
  border-radius: 18px;
  padding: 12px 14px 12px;
  margin-bottom: 10px;
}
.sec-box:last-of-type { margin-bottom: 0; }

.sec-box-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.sec-badge {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.625rem; font-weight: 700; letter-spacing: .02em;
  color: var(--card-fg);
}
.b0 { background: rgba(214, 190, 208, .34); }
.b1 { background: rgba(196, 206, 172, .34); }
.b2 { background: rgba(178, 196, 222, .32); }
.b3 { background: rgba(232, 238, 206, .38); }
.b4 { background: rgba(150, 158, 168, .32); }

.sec-box-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sec-pill {
  flex: 0 0 auto; font-size: 0.75rem; font-weight: 500; letter-spacing: 0;
  padding: 4px 11px; border-radius: var(--r-full);
  background: var(--card-tint); color: var(--card-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.card-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 3px 0; font-size: 0.9375rem; line-height: 1.3125rem;
  word-break: break-word;
}
.card-item .dot {
  flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2.5px;
  border: 1.6px solid var(--card-dim); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.card-item.done .dot { background: var(--card-dim); border-color: var(--card-dim); }
.card-item.done .dot svg { color: var(--card-bg); }
.card-item.done span { text-decoration: line-through; opacity: .55; }

/* Unterpunkte ruecken auch in der Kartenvorschau ein, sonst sieht eine
   gegliederte Liste dort aus wie eine flache. */
.card-item[data-indent='1'] { padding-left: 14px; }
.card-item[data-indent='2'] { padding-left: 28px; }
.card-item[data-indent='1'] .dot { transform: scale(.86); }
.card-item[data-indent='2'] .dot { transform: scale(.78); }

.card-more { color: var(--card-dim); font-size: 0.8125rem; margin-top: 8px; }

.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-sm); margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--card-line);
  font-size: 0.8125rem; font-weight: 500; color: var(--card-dim);
}
.card-foot .cf-left { display: flex; align-items: center; gap: 5px; min-width: 0; }
.card-foot .cf-left span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--s-md); }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8125rem; font-weight: 500; line-height: 1;
  padding: 7px 12px; border-radius: var(--r-full);
  background: var(--card-tint); color: var(--card-dim);
  white-space: nowrap;
}

/* Ein farbiger Punkt statt einer eingefaerbten Flaeche: die Karte kann jede
   der Notizfarben haben, eine Fuellung waere darauf mal zu blass und mal
   zu grell. Der Punkt bleibt auf hellem wie dunklem Grund erkennbar. */
.lc-dot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--lc, currentColor);
}
.chip.lc-none .lc-dot { display: none; }
.chip-btn .lc-dot { width: 9px; height: 9px; flex-basis: 9px; }

/* Treffer-Hervorhebung in der Suche */
mark {
  background: var(--card-tint); color: inherit;
  border-radius: 4px; padding: 0 3px; font-weight: 700;
}

/* ---------- Profilbild im Kopfbereich ----------
   Ohne Konto ein leeres Symbol, mit Konto die Initialen. */
.avatar-btn {
  position: relative; flex: 0 0 42px; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--surf); color: var(--text-dim);
  box-shadow: var(--shadow-sm);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: .02em;
  transition: transform .1s;
}
.avatar-btn:active { transform: scale(.93); }
.avatar-btn.is-user { background: var(--primary-container); color: var(--on-primary-container); }
/* Abgleich klemmt oder Anmeldung abgelaufen. */
.avatar-btn.has-problem::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 11px; height: 11px; border-radius: var(--r-full);
  background: var(--danger); border: 2px solid var(--bg);
}

/* ---------- Anmeldung und Profil ----------
   Ganze Seiten über der App: über dem Editor, unter Sheets und Snackbar -
   "Name ändern" oder "Abmelden?" legen sich darüber. */
.auth {
  position: fixed; inset: 0; z-index: 35;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  overflow-y: auto; overscroll-behavior: contain;
  animation: sheetUp .22s cubic-bezier(.2, .8, .3, 1);
}
.auth[hidden] { display: none; }

.auth-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: calc(var(--safe-top) + 10px) var(--margin) 0;
}
.auth-top .icon-btn {
  width: 48px; height: 48px; flex-basis: 48px;
  background: var(--surf); color: var(--text);
  box-shadow: var(--shadow-sm);
}
.auth-top h1 {
  margin: 0; font-size: 0.8125rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}

.auth-body {
  display: flex; flex-direction: column;
  width: 100%; max-width: 440px; margin: 0 auto;
  padding: 6px 24px calc(var(--safe-bottom) + 32px);
}

.auth-logo {
  width: 64px; height: 64px; margin: 4px auto 20px;
  border-radius: 18px; box-shadow: var(--shadow-sm);
}

/* Umschalter Anmelden / Registrieren. */
.auth-tabs {
  display: flex; align-self: center; gap: 2px;
  margin-bottom: 24px; padding: 4px;
  border-radius: var(--r-full); background: var(--surf);
  box-shadow: var(--shadow-sm);
}
.auth-tabs button {
  padding: 9px 18px; border-radius: var(--r-full);
  font-size: 0.875rem; font-weight: 500; color: var(--text-dim);
  transition: background-color .15s, color .15s;
}
.auth-tabs button.on { background: var(--primary-container); color: var(--on-primary-container); }

.auth-title {
  margin: 0; text-align: center;
  font-size: 1.875rem; line-height: 2.25rem; font-weight: 500; letter-spacing: -.01em;
}
.auth-sub {
  margin: 8px 0 26px; text-align: center;
  font-size: 0.9375rem; line-height: 1.375rem; color: var(--text-dim);
}
.auth-sub.is-notice {
  padding: 12px 16px; border-radius: 18px;
  background: var(--surf); color: var(--text); text-align: left;
}

.auth .sheet-form { padding: 0; }
.auth .sheet-field > input { background: var(--surf); box-shadow: var(--shadow-sm); }
.auth .sheet-field > input::placeholder { color: var(--text-faint); }
.auth .auth-submit { width: 100%; margin: 6px 0 0; }

.auth-or {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0; font-size: 0.75rem; color: var(--text-faint);
}
.auth-or::before, .auth-or::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--outline-strong);
}

.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 15px 16px;
  border-radius: var(--r-full); border: 1px solid var(--outline-strong);
  background: var(--surf); color: var(--text);
  font-size: 1rem; font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: transform .1s, opacity .15s;
}
.auth-google:active { transform: scale(.98); }
.auth-google:disabled { opacity: .6; }
.auth-google svg { flex: 0 0 20px; }

.auth-switch {
  margin: 24px 0 0; text-align: center;
  font-size: 0.875rem; color: var(--text-dim);
}
.auth-switch button { padding: 4px 2px; color: var(--primary); font-weight: 600; }
.auth-foot {
  margin: 14px 0 0; text-align: center;
  font-size: 0.75rem; line-height: 1.125rem; color: var(--text-faint);
}

/* Profil */
.pf-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 0 26px; text-align: center;
}
.pf-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: var(--r-full);
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: 2.25rem; font-weight: 500; letter-spacing: .02em;
  box-shadow: var(--shadow-card);
}
.pf-name { margin: 16px 0 2px; font-size: 1.625rem; line-height: 2rem; font-weight: 500; }
.pf-mail { margin: 0; font-size: 0.875rem; color: var(--text-dim); overflow-wrap: anywhere; }
.pf-via {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 6px 0 0; font-size: 0.75rem; color: var(--text-faint);
}
.pf-via svg { width: 14px; height: 14px; }
.pf-status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 8px 14px;
  border-radius: var(--r-full); background: var(--surf);
  font-size: 0.8125rem; color: var(--text-dim);
  box-shadow: var(--shadow-sm);
}
.pf-status.is-bad { color: var(--danger); }

.pf-label {
  margin: 0 0 8px 8px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}
.pf-group {
  margin-bottom: 20px; overflow: hidden;
  background: var(--surf); border-radius: 22px;
  box-shadow: var(--shadow-card);
}
.pf-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 12px 16px; text-align: left; font-size: 1rem;
}
.pf-row + .pf-row { border-top: 1px solid var(--outline); }
.pf-row:active { background: var(--ripple); }
.pf-row .sr-icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--surf-high); color: var(--text);
}
.pf-row .pf-text { flex: 1 1 auto; min-width: 0; }
.pf-row .pf-hint {
  flex: 0 1 auto; min-width: 0; max-width: 45%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.8125rem; color: var(--text-faint);
}
.pf-row.danger, .pf-row.danger .sr-icon { color: var(--danger); }

/* Einladung zum Konto - eine Karte über den Notizen, solange niemand
   angemeldet ist (renderAccountHint in app.js). */
.account-hint {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start;
  margin: 2px 0 var(--s-md); padding: 16px 16px 12px;
  background: var(--surf); border-radius: 22px;
  box-shadow: var(--shadow-card);
}
.account-hint[hidden] { display: none; }
.ah-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: var(--primary-container); color: var(--on-primary-container);
}
.ah-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.ah-text strong { font-size: 1rem; font-weight: 600; }
.ah-text span { font-size: 0.8125rem; line-height: 1.25rem; color: var(--text-dim); }
.ah-actions {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end; align-items: center; gap: var(--s-sm);
  margin-top: 4px;
}
.ah-actions .text-btn { font-size: 0.8125rem; padding: 9px 16px; }
.ah-actions .text-btn.ghost { padding: 9px 10px; }

.empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-md); padding: 72px 32px; color: var(--text-faint); text-align: center;
}
.empty-icon { opacity: .4; }

/* Label-Verwaltung */
.lv-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; margin-bottom: 10px; min-height: 64px;
  background: var(--surf);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}
.lv-row .lv-icon { display: flex; color: var(--primary); flex: 0 0 auto; }
.lv-row .lv-icon.lv-colored { color: var(--lc, var(--primary)); }
.lv-color {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: var(--r-full);
  border: 2px solid var(--outline-strong);
  background: var(--lc, transparent);
}
.lv-color.is-none { background: var(--surf-highest); }
.lv-row input { flex: 1 1 auto; min-width: 0; font-size: 1.0625rem; font-weight: 500; }
.lv-row .lv-count {
  font-size: 0.75rem; color: var(--text-dim); font-weight: 500;
  padding: 4px 10px; border-radius: var(--r-full); background: var(--surf-high);
}

/* ============================================================
   FAB und Bottom-Navigation
   ============================================================ */

/* Der Plus-Knopf steht auf einer Hoehe mit der schwebenden Navigation,
   rechts daneben. */
.fab-stack {
  position: absolute; right: var(--margin);
  bottom: calc(var(--safe-bottom) + 14px);
  z-index: 12;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

.fab {
  width: 60px; height: 60px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-container); color: var(--on-primary-container);
  box-shadow: var(--fab-glow);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.fab:active { transform: scale(.94); }
.fab.open { transform: rotate(45deg); }

.fab-mini {
  display: flex; align-items: center; gap: 10px;
  animation: miniIn .16s cubic-bezier(.2, .8, .3, 1);
}
@keyframes miniIn { from { opacity: 0; transform: translateY(10px); } }
.fab-mini-label {
  font-size: 0.75rem; font-weight: 600;
  padding: 6px 12px; border-radius: var(--r-full);
  background: var(--surf-highest); color: var(--text);
  box-shadow: var(--shadow-sm);
}
.fab-mini-icon {
  width: 44px; height: 44px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surf-highest); color: var(--primary);
  box-shadow: var(--shadow-sm);
}
html[data-theme='light'] .fab-mini-icon,
html[data-theme='light'] .fab-mini-label { background: var(--surf); border: 1px solid var(--outline); }

/* Schwebende Glas-Pille mit vier runden Symbolen, wie in der Vorlage.
   Die Beschriftungen bleiben fuer Screenreader im DOM, sind aber nicht
   zu sehen. */
.bottomnav {
  position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 12px); z-index: 11;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  height: 64px; padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
/* Auf schmalen Telefonen rueckt die Pille nach links, damit der
   Plus-Knopf rechts daneben Platz hat. */
@media (max-width: 400px) {
  .bottomnav { left: var(--margin); transform: none; }
}

/* Die aktive Pille ist ein einziges Element, das zwischen den Tabs gleitet -
   statt am Ziel einfach aufzutauchen. Sie liegt hinter den Icons. */
.nav-indicator {
  position: absolute; left: 0; top: 0;
  width: 48px; height: 26px; border-radius: var(--r-full);
  background: var(--primary-container);
  pointer-events: none; opacity: 0; z-index: 0;
  transition: transform .36s cubic-bezier(.34, 1.25, .38, 1),
              width .36s cubic-bezier(.34, 1.25, .38, 1),
              opacity .18s, background-color .2s;
}
.nav-indicator.no-anim { transition: background-color .2s; }

.nav-item {
  position: relative; z-index: 1;
  flex: 0 0 48px; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  transition: color .2s;
}
.nav-item > span:not(.ni-icon) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.nav-item .ni-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--r-full);
  background: var(--nav-dot);
  transition: color .2s, background-color .2s, transform .36s cubic-bezier(.34, 1.25, .38, 1);
}
.nav-item:active .ni-icon { transform: scale(.92); }
/* Waehrend der Suche stehen Tastatur und Treffer im Vordergrund - die
   schwebende Leiste wuerde sonst ueber der Tastatur haengen. */
.searching .bottomnav, .searching .fab-stack { display: none; }
/* Liegt ein Sheet darueber, verdeckt der Schleier die Leiste ohnehin. Die
   Unschaerfe darunter muesste sonst bei jeder Bewegung des Sheets neu
   berechnet werden - genau dann, wenn jedes Bild zaehlt. */
body:has(.sheet-scrim:not([hidden])) .bottomnav {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--surf);
}
.nav-item.active .ni-icon { color: var(--on-primary-container); background: transparent; }

/* ============================================================
   Editor
   ============================================================ */

.editor {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  animation: sheetUp .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes sheetUp { from { transform: translateY(16px); opacity: 0; } }

/* Wie die Detailseite der Vorlage: runder weisser Zurueck-Knopf links,
   die Art der Notiz als kleines Etikett daneben. */
.editor-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: calc(var(--safe-top) + 10px) var(--margin) 6px;
}
.editor-top .icon-btn {
  width: 52px; height: 52px; flex-basis: 52px;
  background: var(--surf); color: var(--text);
  box-shadow: var(--shadow-sm);
}
.editor-kind {
  margin: 0; font-size: 0.8125rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}

/* Zeigt die Farbe der Notiz, ohne die Editorflaeche einzufaerben. */
.ed-dot {
  flex: 0 0 14px; width: 14px; height: 14px; border-radius: var(--r-full);
  background: var(--card-bg); border: 1.5px solid var(--outline-strong);
  margin-right: -2px;
}
.editor-top-spacer { flex: 1 1 auto; }

.editor-body {
  flex: 1 1 auto; overflow-y: auto;
  /* Bezugsrahmen fuer die Zeichenflaeche: absolut Positioniertes darin
     scrollt mit dem Inhalt mit, statt stehen zu bleiben. */
  position: relative;
  padding: 14px var(--margin) 0;
}

.editor-body.dnd-locked { overflow: hidden; }
.editor-pad { height: 130px; }

/* Bilderstreifen im Editor */
.ed-images {
  display: grid; gap: 6px; margin-bottom: var(--s-md);
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.ed-images.single { grid-template-columns: 1fr; }
.ed-images img {
  width: 100%; height: 100%; max-height: 260px;
  object-fit: cover; border-radius: 20px;
  background: var(--surf-high); display: block;
  pointer-events: none;                 /* Ziehen haengt am Rahmen, nicht am Bild */
}
.ed-images.single img { max-height: 320px; }

/* Bilder lassen sich in ihrer Reihenfolge ziehen - langes Druecken startet,
   wie bei den Karten auf dem Board. Die Nummer zeigt, welches Bild auf der
   Karte oben landet. */
.ed-img { position: relative; touch-action: none; border-radius: 20px; }
.ed-img::after {
  content: attr(data-n);
  position: absolute; left: 6px; top: 6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, .58); color: #fff;
  font-size: 0.625rem; font-weight: 700;
}
.ed-images.single .ed-img::after { display: none; }
.dnd-ghost.ed-img { opacity: .9; }
.dnd-ghost.ed-img img { border-radius: 20px; }

/* Vollbildansicht eines Bildes */
.viewer {
  position: fixed; inset: 0; z-index: 60;
  background: #05050A;
  display: flex; align-items: center; justify-content: center;
}
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-bar {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: var(--s-xs);
  padding: calc(var(--safe-top) + 8px) var(--s-sm) var(--s-sm);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .65), transparent);
}
.viewer-bar .icon-btn { color: #fff; }
.viewer-bar .icon-btn.danger { color: #FFB4AB; }

/* Fortschrittskarte - die dunkle Karte der Vorlage ("The Sound Of
   Nature"): gefuellt im Akzent, das Symbol in einem hellen Feld. */
.progress-card {
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--r-md); padding: 18px 20px 20px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card);
}
.pc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pc-icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--on-primary-container); color: var(--primary-container);
}
.pc-title {
  flex: 1 1 auto; min-width: 0; font-size: 1.0625rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-stat {
  font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums;
  padding: 5px 12px; border-radius: var(--r-full);
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.pc-track {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.pc-fill { height: 100%; border-radius: 4px; background: currentColor; transition: width .25s; }

/* Titelzeile */
.ed-titlerow { display: flex; align-items: flex-start; gap: 10px; }
.ed-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 2rem; line-height: 2.375rem; font-weight: 500; letter-spacing: -.015em;
  padding: 2px 0;
}
.ed-title-actions { display: flex; align-items: center; gap: 8px; }
/* Auf schmalen Telefonen reicht die Kopfzeile nicht fuer alles - das
   Etikett "Liste"/"Notiz" ist dort das Entbehrlichste. */
@media (max-width: 400px) {
  .editor-kind { display: none; }
}

.ed-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; color: var(--text-dim);
  padding: 6px 0 16px;
}

.ed-text { width: 100%; font-size: 1.0625rem; line-height: 1.6875rem; padding: 4px 0 var(--s-md); }

.ed-labels { display: flex; flex-wrap: wrap; gap: 8px; padding-top: var(--s-md); }
.ed-labels .chip { background: var(--surf); color: var(--text); font-size: 0.8125rem; padding: 9px 14px; }

/* Die Werkzeugleiste schwebt als Pille wie die Navigation auf dem Board. */
.editor-bottom {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  margin: 6px var(--margin) calc(12px + var(--safe-bottom));
  padding: 8px;
  background: var(--surf);
  border-radius: var(--r-full);
  box-shadow: var(--shadow);
}
.editor-bottom .icon-btn {
  width: 48px; height: 48px; flex-basis: 48px;
  background: var(--nav-dot); color: var(--text);
}
.editor-bottom .icon-btn.danger { color: var(--danger); }
.editor-bottom-spacer { flex: 0 0 6px; }
.editor-bottom-fill { flex: 1 1 auto; }

/* Der Knopf, hinter dem das Farbraster liegt: er zeigt die aktive Farbe. */
.ed-color-chip {
  width: 22px; height: 22px; border-radius: var(--r-full);
  border: 1.5px solid var(--outline-strong);
  background: var(--card-bg);
  display: block; position: relative; overflow: hidden;
}

/* "Standard" uebernimmt die Theme-Flaeche und sieht im Dark Mode aus wie
   Cosmic - der Schraegstrich macht die Option trotzdem eindeutig. */
.ed-color-chip.c-default::after, .swatch.c-default::after {
  content: ''; position: absolute; left: 50%; top: -20%; bottom: -20%;
  width: 1.5px; background: var(--outline-strong);
  transform: rotate(45deg);
}
.swatch.c-default { position: relative; overflow: hidden; }

/* ---------- Abschnitte in der Liste (Kernfeature) ---------- */

.sections { padding-top: 2px; }

.section {
  background: var(--surf);
  border-radius: 24px;
  padding: 14px 12px 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.section.is-root.only-section {
  background: none; padding: 0; box-shadow: none;
}
.section.is-root.only-section > .section-head { display: none; }
.section.is-root.has-siblings.is-empty { display: none; }

.section-head { display: flex; align-items: center; gap: 6px; margin-bottom: var(--s-sm); }

.section-grip {
  flex: 0 0 22px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); opacity: .6; touch-action: none;
  margin-left: -4px;
}
.sec-badge-lg {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 600; color: var(--text);
}
.section-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.005em;
  color: var(--text); padding: 6px 2px;
}
.section-pill {
  flex: 0 0 auto; font-size: 0.75rem; font-weight: 500;
  padding: 5px 11px; border-radius: var(--r-full);
  background: var(--surf-high); color: var(--text-dim);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.section-toggle, .section-menu {
  flex: 0 0 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); border-radius: var(--r-full);
}
.section-toggle svg { transition: transform .18s; }
.section.collapsed .section-toggle svg { transform: rotate(-90deg); }
.section.collapsed .section-items,
.section.collapsed .section-addrow { display: none; }

.section-items { min-height: 8px; }
/* Der Kasten mit den erledigten Eintraegen steht unter der Hinzufuegen-Zeile
   und braucht etwas Luft dazu. Ohne min-height waere er ohne Inhalt nicht
   da - er wird dann gar nicht erst eingehaengt (js/editor.js). */
.section-done { min-height: 0; margin-top: 2px; }

.item-row {
  position: relative;
  display: flex; align-items: flex-start; gap: 2px;
  background: var(--surf-high); border-radius: 16px;
  margin-bottom: 6px; padding: 2px 4px 2px 0;
}
.section.is-root.only-section .item-row { background: var(--surf); }

/* Unterpunkte. Die ganze Zeile rueckt ein; der senkrechte Strich links
   zeigt, zu welchem Hauptpunkt sie gehoert. */
.item-row[data-indent='1'] { margin-left: 20px; }
.item-row[data-indent='2'] { margin-left: 40px; }
.item-row[data-indent='1']::before,
.item-row[data-indent='2']::before {
  content: ''; position: absolute; left: -11px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 1px; background: var(--outline-strong); opacity: .7;
}
.item-row[data-indent] .item-text { font-size: 0.875rem; }

.item-grip {
  flex: 0 0 22px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); opacity: .5; touch-action: none;
}
.item-check {
  flex: 0 0 34px; height: 38px;
  display: flex; align-items: center; justify-content: center;
}
.item-box {
  width: 22px; height: 22px; border-radius: 8px;
  border: 2px solid var(--outline-strong);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .12s, border-color .12s;
}
.item-row.done .item-box { background: var(--primary-container); border-color: var(--primary-container); }
.item-row.done .item-box svg { color: var(--on-primary-container); }
.item-row:not(.done) .item-box svg { opacity: 0; }

.item-text {
  flex: 1 1 auto; min-width: 0;
  font-size: 1rem; line-height: 1.375rem; padding: 9px 2px;
}
.item-row.done .item-text { text-decoration: line-through; color: var(--text-faint); }
.item-row.done .item-grip { visibility: hidden; }

.item-del {
  flex: 0 0 32px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); opacity: .45;
}

.section-addrow { display: flex; align-items: center; gap: var(--s-sm); }
.section-add {
  flex: 1 1 auto; text-align: left;
  padding: 12px 16px; border-radius: var(--r-full);
  background: var(--surf-high); color: var(--text-faint);
  font-size: 0.9375rem;
}
.section.is-root.only-section .section-add { background: var(--surf); }
.section-add-btn {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-container); color: var(--on-primary-container);
  transition: transform .1s;
}
.section-add-btn:active { transform: scale(.92); }

.add-section-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-sm);
  width: 100%; margin: var(--s-sm) 0 var(--s-xs);
  padding: 16px; border-radius: var(--r-full);
  background: var(--surf); box-shadow: var(--shadow-sm);
  color: var(--text); font-size: 0.9375rem; font-weight: 500;
}
.add-section-btn:active { background: var(--ripple); }
.add-section-btn .plus { display: flex; }

/* Klappe ueber den erledigten Eintraegen einer Kategorie (js/editor.js).
   Zugeklappt zeigt der Pfeil nach rechts - wie bei der Kategorie selbst. */
.done-toggle {
  display: flex; align-items: center; gap: var(--s-sm);
  width: 100%; min-height: 44px;
  padding: 6px 4px 6px 24px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: .06em;
  color: var(--text-faint); text-transform: uppercase; text-align: left;
  border-radius: var(--r-full);
}
/* Der Pfeil direkt hinter der Zahl und nicht am rechten Rand: dort liegt
   die schwebende Zeichenleiste und verdeckte ihn. */
.done-toggle::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--outline); }
.done-toggle .dt-chev { display: flex; transition: transform .18s; transform: rotate(-90deg); }
.done-toggle.open .dt-chev { transform: none; }
.done-toggle:active { color: var(--text-dim); background: var(--ripple); }
.section.collapsed .done-toggle { display: none; }

/* ============================================================
   Bottom-Sheet
   ============================================================ */

.sheet-scrim {
  position: fixed; inset: 0; background: var(--scrim); z-index: 40;
  opacity: 0; transition: opacity .2s;
}
.sheet-scrim.in { opacity: 1; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--surf-low); color: var(--text);
  border-radius: 32px 32px 0 0;
  padding: 0 0 calc(var(--s-md) + var(--safe-bottom));
  max-height: 80vh; overflow-y: auto;
  box-shadow: var(--shadow);
  transform: translateY(101%);
  transition: transform .24s cubic-bezier(.2, .8, .3, 1);
}
.sheet.in { transform: none; }

/* Der Griff bleibt beim Scrollen oben stehen und ist die ganze Breite hoch
   anfassbar - als 34 Pixel schmaler Strich mitten im Inhalt waere er nach
   dem ersten Wisch weg, und genau dann will man ihn greifen. `inherit`
   nimmt die Flaeche des Sheets mit, damit nichts darunter durchscrollt. */
.sheet-grip {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 11px 0 12px;
  background: inherit;
  touch-action: none;          /* der Zug gehoert dem Sheet, nicht dem Scrollen */
  cursor: grab;
}
.sheet-grip::before {
  content: ''; width: 38px; height: 4px; border-radius: 2px;
  background: var(--outline-strong);
  transition: width .15s, background-color .15s;
}
.sheet.dragging .sheet-grip { cursor: grabbing; }
.sheet.dragging .sheet-grip::before { width: 52px; background: var(--text-faint); }

/* Waehrend des Ziehens folgt das Sheet dem Finger ohne Nachlauf - ein
   Uebergang darauf fuehlte sich an, als haenge es an einem Gummiband.
   Beim Loslassen kommt er zurueck und traegt die Bewegung zur naechsten
   Stufe aus. */
.sheet.dragging { transition: none; }

/* Am oberen Anschlag soll das Ziehen dem Sheet gehoeren und nicht die
   Seite darunter mitnehmen. */
.sheet { overscroll-behavior: contain; }
.sheet-title { padding: 2px 24px 12px; font-size: 1.375rem; line-height: 1.75rem; font-weight: 500; }

/* Jede Zeile mit dem Symbol in einem runden Feld - wie die Knoepfe der
   Vorlage, nur kleiner. */
.sheet-row {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 8px 22px; text-align: left; font-size: 1rem;
}
.sheet-row:active { background: var(--ripple); }
.sheet-row .sr-icon {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--surf-high); color: var(--text);
}
.sheet-row span { flex: 1 1 auto; }
.sheet-row.danger, .sheet-row.danger .sr-icon { color: var(--danger); }
.sheet-hint {
  flex: 0 0 auto !important;
  font-size: 0.75rem; font-weight: 500; color: var(--text-faint);
  padding: 4px 9px; border-radius: var(--r-full); background: var(--surf-high);
  white-space: nowrap;
}
.sheet-note {
  margin: 6px 0 0; padding: 4px 22px 8px;
  color: var(--text-faint); font-size: 0.8125rem; line-height: 1.25rem;
}

/* ---------- Gemeinsam genutzte Notiz ---------- */
.share-list { padding: 4px 22px 8px; display: flex; flex-direction: column; gap: 2px; }
.share-member { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
/* Der Anfangsbuchstabe statt eines Bildes: Merkle kennt keine Profilbilder,
   und ein leerer grauer Kreis sagt weniger als ein Buchstabe. */
.sm-face {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: 0.875rem; font-weight: 700;
}
.sm-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sm-text b { font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-text small { font-size: 0.6875rem; color: var(--text-faint); }
.sm-remove {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--text-dim);
}
.sm-remove:active { background: var(--ripple); }

/* Der Einladungscode. Gross, gesperrt und einzeln markierbar: er wird
   vorgelesen und abgetippt, nicht ueberflogen. */
.share-code {
  margin: 6px 22px 2px; padding: 18px 12px; border-radius: 24px;
  background: var(--surf-high); border: 1px solid var(--outline);
  text-align: center; user-select: all; -webkit-user-select: all;
  font-size: 1.375rem; font-weight: 700; letter-spacing: .12em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Farbe & Stil ----------

   Oben die Notiz als Vorschau, darunter die Palette. Die Vorschau traegt
   dieselben --card-* Variablen wie eine echte Karte auf dem Board - sie ist
   keine Nachbildung, sondern dasselbe Farbsystem, nur kleiner. Ein Tippen
   tauscht die Klasse, und damit faerbt sich alles darin mit. */

.cs-head { padding: 2px 22px 12px; }
.cs-head h3 {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0; font-size: 1.25rem; font-weight: 500;
}
.cs-head h3 svg { color: var(--secondary); }
.cs-head p {
  margin: 4px 0 0; text-align: center;
  font-size: 0.75rem; color: var(--text-faint); line-height: 1.125rem;
}

.cs-preview {
  margin: 0 var(--margin) 16px; padding: 14px 16px 12px;
  border-radius: var(--r-md);
  background: var(--card-bg); color: var(--card-fg);
  border: 1px solid var(--card-line);
  transition: background-color .22s, color .22s, border-color .22s;
}
.csp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); }
.csp-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.625rem; font-weight: 700; letter-spacing: .08em;
  color: var(--card-dim);
}
.csp-tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.csp-pin { display: flex; color: var(--card-dim); }
.csp-title {
  margin-top: 6px; font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csp-items { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.csp-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 10px;
  background: var(--card-box); font-size: 0.8125rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csp-item.done { color: var(--card-dim); text-decoration: line-through; }
.csp-box {
  flex: 0 0 16px; width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--card-dim);
  display: flex; align-items: center; justify-content: center;
}
.csp-item.done .csp-box {
  background: var(--card-fg); border-color: var(--card-fg); color: var(--card-bg);
}
.csp-text {
  margin-top: 8px; font-size: 0.8125rem; line-height: 1.25rem; color: var(--card-dim);
}
.csp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm);
  margin-top: 12px;
}
.csp-chips { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.csp-chip {
  padding: 4px 9px; border-radius: var(--r-full);
  background: var(--card-box); color: var(--card-dim);
  font-size: 0.6562rem; font-weight: 600; white-space: nowrap;
}
.csp-count {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6875rem; color: var(--card-dim);
}

.cs-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-sm); padding: 0 22px 10px;
}
.cs-bar-title { font-size: 0.9375rem; font-weight: 500; }
.cs-chosen { font-size: 0.6875rem; color: var(--secondary); font-weight: 600; }

/* Sechs Spalten wie in der Vorlage; auf sehr schmalen Geraeten nimmt das
   Raster von selbst eine Spalte weniger, statt die Namen abzuschneiden. */
.cs-grid {
  display: grid; gap: 14px 6px; padding: 0 var(--margin) 4px;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
}
.cs-cell { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cs-dot {
  width: 46px; height: 46px; border-radius: var(--r-full);
  background: var(--card-bg); color: var(--card-fg);
  border: 1.5px solid var(--card-line);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, box-shadow .12s;
}
.cs-dot:active { transform: scale(.9); }
.cs-dot.sel { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 5px var(--primary); }
.cs-dot.is-default { color: var(--text-faint); border-style: dashed; }
.cs-name {
  width: 100%; margin-top: 6px; text-align: center;
  font-size: 0.6562rem; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Die beiden Knoepfe kleben am unteren Rand: die Palette ist laenger als das
   Sheet, und "Farbe anwenden" darf nicht der Teil sein, den man erst
   herunterscrollen muss. */
.cs-foot {
  position: sticky; bottom: calc(var(--s-md) * -1);
  display: flex; align-items: center; gap: var(--s-sm);
  margin-top: 8px; padding: 12px var(--margin) calc(12px + var(--s-md));
  background: linear-gradient(to bottom, transparent, var(--surf-low) 22%);
}
.cs-reset, .cs-apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 15px 20px; border-radius: var(--r-full);
  font-size: 0.9375rem; font-weight: 500;
  transition: transform .1s;
}
.cs-reset:active, .cs-apply:active { transform: scale(.97); }
.cs-reset { flex: 0 0 auto; color: var(--text-dim); }
.cs-apply {
  flex: 1 1 auto;
  background: var(--primary-container); color: var(--on-primary-container);
  box-shadow: var(--fab-glow);
}

/* Warnung vor einem Schritt, den keine Snackbar mehr zurueckholt */
.sheet-warn {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 22px 10px; padding: 14px 16px;
  border-radius: 20px; background: var(--ripple);
  border: 1px solid var(--outline);
  font-size: 0.8125rem; line-height: 1.375rem; color: var(--text-dim);
}
.sheet-warn .sw-icon { flex: 0 0 22px; display: flex; color: var(--danger); margin-top: 1px; }

/* ---------- Formulare im Sheet (Konto, Anmeldung) ---------- */

.sheet-form { padding: 4px 22px 6px; }

.sheet-field { display: block; margin-bottom: 14px; }
.sheet-field > span {
  display: block; margin-bottom: 6px; padding-left: 4px;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: .02em;
  color: var(--text-dim);
}
.sheet-field > input {
  width: 100%; padding: 14px 18px;
  background: var(--surf-high); color: var(--text);
  border: 1px solid transparent; border-radius: var(--r-full);
  font-size: 1rem;
}
.sheet-field > input:focus { border-color: var(--primary); }

.sheet-submit {
  display: block; width: calc(100% - 44px); margin: 4px 22px 6px;
  padding: 16px; border-radius: var(--r-full);
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: 1rem; font-weight: 500;
  transition: transform .1s, opacity .15s;
}
.sheet-submit:active { transform: scale(.98); }
.sheet-submit:disabled { opacity: .6; }

/* "Weiter mit Google" - zweitrangig neben dem eigentlichen Formular, aber
   als ganzer Knopf, nicht als Link. */
.sheet-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 10px;
  background: var(--surf-highest); color: var(--text);
}
.g-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: #fff; color: #4285F4;
  font-size: 0.875rem; font-weight: 700; line-height: 1;
}
.sheet-or {
  margin: 10px 22px 0; text-align: center;
  font-size: 0.75rem; color: var(--text-faint);
}

.sheet-link {
  display: block; width: 100%; padding: 12px 22px 4px;
  text-align: center; color: var(--primary);
  font-size: 0.8125rem; font-weight: 600;
}

.sheet-error {
  margin: 2px 0 0; padding: 10px 12px;
  border-radius: 10px;
  background: var(--ripple); color: var(--danger);
  font-size: 0.8125rem; line-height: 1.25rem;
}

/* Farbwahl fuer ein Label - kleinere Punkte, dieselbe Rasterlogik */
.label-colors {
  display: grid; gap: 12px 8px; padding: 4px 22px 18px;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
}
.lc-swatch {
  width: 38px; height: 38px; border-radius: var(--r-full);
  border: 2px solid var(--outline-strong);
  display: flex; align-items: center; justify-content: center;
  color: #fff; justify-self: center;
}
.lc-swatch.sel { box-shadow: 0 0 0 3px var(--primary); }
.lc-swatch.is-none { background: var(--surf-highest); color: var(--text-dim); }

.label-row { display: flex; align-items: center; gap: 14px; padding: 10px 22px; }
.label-row input[type='text'] {
  flex: 1 1 auto; min-width: 0;
  border-bottom: 1px solid var(--outline); padding: 8px 0; font-size: 0.9375rem;
}
.label-row .cb {
  width: 22px; height: 22px; flex: 0 0 22px;
  border: 2px solid var(--text-faint); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.label-row .cb.on { background: var(--primary-container); border-color: var(--primary-container);
  color: var(--on-primary-container); }

/* ============================================================
   Snackbar
   ============================================================ */

.snackbar {
  position: fixed; left: var(--margin); right: var(--margin);
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px); z-index: 50;
  display: flex; align-items: center; gap: var(--s-md);
  padding: 8px 8px 8px 22px; min-height: 56px;
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--r-full); box-shadow: var(--shadow);
  animation: snackIn .18s;
}
.snackbar .text-btn {
  background: color-mix(in srgb, currentColor 14%, transparent); color: inherit;
  padding: 10px 16px; font-size: 0.8125rem; font-weight: 500;
}
.snackbar span { flex: 1 1 auto; font-size: 0.9375rem; }
@keyframes snackIn { from { transform: translateY(16px); opacity: 0; } }

/* ============================================================
   Drag & Drop
   ============================================================ */

/* Waehrend eines Drags gehoert die Geste uns - nicht dem Scroller.
   touch-action greift erst beim naechsten Aufsetzen des Fingers, den
   laufenden Drag haelt blockScroll in dnd.js frei. */
body.dnd-active { user-select: none; -webkit-user-select: none; touch-action: none; }
body.dnd-active .scroller, body.dnd-active .editor-body { touch-action: none; }

.dnd-ghost {
  position: fixed !important; z-index: 90; margin: 0 !important;
  pointer-events: none; opacity: .96;
  box-shadow: var(--shadow);
  border-radius: var(--r);
}
.dnd-ghost.card { background: var(--card-bg); }
.dnd-ghost.item-row { background: var(--surf-highest); border-radius: 12px; }
.dnd-ghost.section { background: var(--surf-high); border-radius: var(--r); }

.dnd-source { opacity: .3; }
.dnd-source * { visibility: hidden; }
.card.dnd-source, .section.dnd-source, .item-row.dnd-source {
  outline: 2px dashed var(--outline-strong); outline-offset: -2px;
}


/* ============================================================
   Grosse und gedrehte Bildschirme

   Die App ist fuer ein Telefon im Hochformat gebaut. Damit sie im Querformat
   und auf einem Tablet nicht aus dem Leim geht, bekommt sie hier drei
   Anpassungen: mehr Spalten, eine gedeckelte Zeilenbreite und eine flachere
   Navigationsleiste, wenn der Bildschirm niedrig ist.
   ============================================================ */

/* ---------- Breiter Bildschirm: mehr Spalten ---------- */
@media (min-width: 620px) {
  /* Die Wahl ein-/zweispaltig bleibt erhalten, sie bedeutet jetzt nur
     "breite" oder "schmale" Karten - die Spaltenzahl ergibt sich aus dem Platz. */
  .board { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .board[data-cols='2'] { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

/* ---------- Sehr breiter Bildschirm: Inhalt zentrieren ---------- */
@media (min-width: 1000px) {
  /* Ueber die ganze Breite gezogene Zeilen liest niemand gern. */
  .topbar, .scroller {
    padding-left: max(var(--margin), calc((100% - 1120px) / 2));
    padding-right: max(var(--margin), calc((100% - 1120px) / 2));
  }
  .editor-body {
    padding-left: max(var(--margin), calc((100% - 760px) / 2));
    padding-right: max(var(--margin), calc((100% - 760px) / 2));
  }
  .editor-top, .editor-bottom {
    padding-left: max(var(--s-sm), calc((100% - 780px) / 2));
    padding-right: max(var(--s-sm), calc((100% - 780px) / 2));
  }
  .sheet {
    left: 50%; right: auto; transform: translate(-50%, 101%);
    width: min(560px, 100%);
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
  .sheet.in { transform: translate(-50%, 0); }
  .snackbar { left: 50%; right: auto; width: min(520px, calc(100% - 24px)); margin-left: -260px; }
  .fab-stack { right: max(var(--margin), calc((100% - 1120px) / 2)); }
}

/* Auf ganz schmalen Snackbars waere die feste Breite oben zu breit. */
@media (min-width: 1000px) and (max-width: 1060px) {
  .snackbar { left: var(--s-md); right: var(--s-md); width: auto; margin-left: 0; }
}

/* ---------- Querformat auf dem Telefon: Hoehe ist knapp ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  /* Icon und Beschriftung nebeneinander statt uebereinander - das spart
     rund ein Drittel der Leistenhoehe. */
  :root { --nav-h: 62px; }
  .bottomnav { height: 54px; bottom: calc(var(--safe-bottom) + 8px); }
  .nav-item, .nav-item .ni-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .fab-stack { bottom: calc(var(--safe-bottom) + 6px); }

  .search-pill { height: 44px; }
  .hero-main { margin-top: 10px; }
  .headline { font-size: 1.875rem; line-height: 2.25rem; }
  .search-tower { min-height: 80px; }
  .filterbar { padding-top: 10px; }
  .editor-top { padding-top: calc(var(--safe-top) + 4px); padding-bottom: 4px; }
  .editor-pad { height: 90px; }
  .scroller-pad { height: calc(var(--nav-h) + var(--safe-bottom) + 70px); }

  /* Ein Sheet, das 80 % einer 400px hohen Flaeche einnimmt, zeigt drei
     Zeilen - hier darf es hoeher und scrollt dafuer. */
  .sheet { max-height: 92vh; }
  .sheet-grip { margin: 2px auto 8px; }
  .sheet-row { padding-top: 11px; padding-bottom: 11px; }
}

/* ---------- Sehr grosse Schrift ---------- */
/* Bei stark vergroesserter Systemschrift sind die Beschriftungen in der
   Navigationsleiste nicht mehr unterzubringen - dann zaehlen die Symbole. */
@media (max-width: 420px) {
  html[data-fontscale='xl'] .chip-btn { padding: 0 12px; }
  html[data-fontscale='xl'] .headline { font-size: 2rem; line-height: 2.375rem; }
}