/* ── tagebuch ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;

  /* ── flächen und schrift ───────────────────────────────────── */
  --bg:      #ffffff;   /* seite */
  --surface: #ffffff;   /* karten, felder, knöpfe */
  --sunk:    #fcfcfc;   /* leise abgesetzte flächen */
  --hover:   #f7f7f7;   /* flächen unter dem mauszeiger */
  --active:  #f2f2f2;   /* gedrückt / ausgewählt */
  --ink:     #161616;
  --soft:    #555555;   /* zweite textebene */
  --muted:   #8f8f8f;
  --faint:   #bbbbbb;   /* platzhalter */
  --oncolor: #ffffff;   /* schrift auf farbigem grund */

  --rule:   #efefef;   /* linienraster */
  --line:   #e6e6e6;   /* trenner */
  --person: var(--accent-raw, #1a44dd);   /* personen */
  --star:   #b58900;   /* markierte tage: gedämpftes gold */
  --star-bg:#fdf8ec;   /* dazu die leise fläche */
  --star-line:#efe3c6; /* rahmen markierter tage */
  --star-dark:#9c7600; /* gold, dunkler (heute + markiert) */
  --place:  #3f3f46;   /* orte */
  --alert:  #c81e1e;   /* fehler */
  --ink-hover: #000000;   /* gefüllte knöpfe unter dem mauszeiger */
  --shadow: rgba(0,0,0,.18);
  --veil:   rgba(0,0,0,.28);   /* grund hinter dem such-overlay */
  --maxw:   920px;
  --lh:     32px;      /* rasterhöhe = zeilenhöhe (ganze pixel) */

  /* zwei stimmen: was der mensch schreibt, steht in einer buchserife –
     was der apparat sagt, in kleiner versaler grotesk */
  --serif:  'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia,
            'Times New Roman', serif;
  --sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* meta-stimme: eine definition, überall gleich */
  --meta-size: .68rem;
  --meta-ls:   .09em;

  --r: 5px;              /* die eine rundung der app */
  --t:  .08s linear;      /* hover: kurz und hart */
  --t2: .14s ease;        /* überblendungen (unterlinien) */

  /* abstandsskala – alles im layout benutzt diese sechs stufen */
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;

  /* striche: eine stärke, zwei gewichte (struktur / innen) */
  --bw:     1px;
  --stroke: 2;           /* linienstärke der piktogramme */
}

/* ── dunkler modus ──────────────────────────────────────────────
   dieselbe handschrift, nur umgedreht: das papier wird zur nacht.
   die töne sind leicht entsättigt, damit nichts flimmert. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) { color-scheme: dark;
    --bg:      #131315;
    --surface: #1a1a1d;
    --sunk:    #161618;
    --hover:   #212126;
    --active:  #2a2a30;
    --ink:     #ececee;
    --soft:    #b4b4ba;
    --muted:   #86868e;
    --faint:   #5a5a62;
    --oncolor: #131315;

    --rule:    #26262b;
    --line:    #33333a;
    --person:  color-mix(in oklab, var(--accent-raw, #1a44dd) 30%, #d5dae4);
    --star:    #d9a521;
    --star-bg: #241f12;
    --star-line:#4a3d1c;
    --star-dark:#f0c04a;
    --place:   #b9b9c2;
    --alert:   #ff6b6b;
    --ink-hover: #ffffff;
    --shadow:  rgba(0,0,0,.6);
    --veil:    rgba(0,0,0,.55);
  }
}

/* feste wahl schlägt die systemeinstellung */
:root[data-theme="dunkel"] { color-scheme: dark;
  --bg:      #131315;
  --surface: #1a1a1d;
  --sunk:    #161618;
  --hover:   #212126;
  --active:  #2a2a30;
  --ink:     #ececee;
  --soft:    #b4b4ba;
  --muted:   #86868e;
  --faint:   #5a5a62;
  --oncolor: #131315;

  --rule:    #26262b;
  --line:    #33333a;
  --person:  color-mix(in oklab, var(--accent-raw, #1a44dd) 30%, #d5dae4);
  --star:    #d9a521;
  --star-bg: #241f12;
  --star-line:#4a3d1c;
  --star-dark:#f0c04a;
  --place:   #b9b9c2;
  --alert:   #ff6b6b;
  --ink-hover: #ffffff;
  --shadow:  rgba(0,0,0,.6);
  --veil:    rgba(0,0,0,.55);
}

/* piktogramme sprechen dieselbe strichstärke wie die linien der app.
   die svgs bringen stroke-width="2" mit – css sticht das aus. */
.auto-icon svg, .tgl-ico svg, .fchip-icon svg,
.cal-sport svg, .sport-icon svg, .lnk-ic { stroke-width: var(--stroke); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 18px/var(--lh) var(--sans);
  padding-bottom: 5rem;
  -webkit-font-smoothing: antialiased;
}

::selection { background: color-mix(in srgb, var(--person) 16%, var(--surface)); }

/* tastatur-fokus überall sichtbar, ohne die maus-nutzung zu stören */
:focus-visible {
  outline: 2px solid var(--person);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.logo {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
}

/* ── topbar ───────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s4) var(--s5);
  background: var(--bg);
  border-bottom: var(--bw) solid var(--line);
}
.topbar .logo {
  font-size: .8rem; font-weight: 700; letter-spacing: .05em;
  line-height: 1.2;
  text-decoration: none; color: var(--ink);
  border-bottom: var(--bw) solid transparent;
  transition: border-color var(--t2), color var(--t2);
}
.topbar .logo:hover { border-bottom-color: var(--person); }

/* text-navigation, überall gleich */
.topnav {
  display: flex; align-items: center; gap: 1.15rem;
  font-size: .78rem; letter-spacing: .03em;
}
.topnav a {
  color: var(--muted); text-decoration: none;
  line-height: 1.2;                 /* sonst rutscht die linie tief nach unten */
  padding-bottom: 2px;
  border-bottom: var(--bw) solid transparent;
  transition: border-color var(--t2), color var(--t2);
}
.topnav a:hover { color: var(--ink); border-bottom-color: var(--line); }
.topnav a.active { color: var(--ink); border-bottom-color: var(--person); }
.topnav .nav-logout { color: var(--muted); }
.topnav .nav-logout:hover { color: var(--alert); }

@media (max-width: 560px) {
  .topbar { padding: 1rem 1.1rem; flex-wrap: wrap; gap: .5rem .9rem; }
  .topnav { gap: .9rem; font-size: .8rem; }
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  color: var(--muted); background: none; border: none; border-radius: 0;
  cursor: pointer; text-decoration: none;
}
.icon-btn:hover { color: var(--ink); }

/* ── kalender-seite ───────────────────────────────────────────── */
.cal-page { padding: 1.6rem 1.4rem; max-width: var(--maxw); margin: 0 auto; }
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.2rem;
}
.cal-title {
  margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: .01em;
}
.cal-arrow {
  text-decoration: none; color: var(--muted); font-size: 1.15rem;
  padding: .2rem .6rem;
}
.cal-arrow:hover { color: var(--ink); }
/* ── kalender: jeder tag eine gleich große kachel ───────────────
   keine gitterlinien, keine flächenfarben – nur feine konturen,
   eine große tageszahl und darunter der inhalt des tages. */
.cal-grid {
  display: grid;
  /* minmax(0, 1fr): sonst leitet der browser aus seitenverhältnis und
     mindesthöhe eine mindestbreite ab und das raster läuft über */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
}
/* die wochentagszeile nutzt dasselbe raster, aber ohne linien */
.cal-head {
  margin-bottom: 0; border: none;
}
.cal-wd {
  text-align: center; font-size: var(--meta-size); color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--meta-ls); padding: var(--s1) 0;
}

.cal-cell {
  /* etwas höher als breit – mindestens so hoch, dass die eingestellte
     zahl an namen hineinpasst (--cal-rows kommt vom kalender) */
  aspect-ratio: 1 / 1.08;
  min-height: calc(2.6rem + var(--cal-rows, 3) * 1.2rem);
  min-width: 0;                        /* breite folgt der spalte, nicht der höhe */
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  padding: var(--s2);
  text-align: left;
  background: none;
  /* nur die linien ZWISCHEN den zellen: rechts und unten, aber nicht
     an den außenkanten – so steht kein rahmen um den kalender */
  border: none;
  border-right: var(--bw) solid var(--line);
  border-bottom: var(--bw) solid var(--line);
  text-decoration: none; color: var(--ink); font-size: .8rem;
  overflow: hidden;
  transition: background-color var(--t);
}
/* letzte spalte und letzte reihe brauchen keine kante nach außen */
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:nth-last-child(-n+7) { border-bottom: none; }

/* tage, die es in diesem monat nicht gab: keine fläche und keine
   linie zwischen ihnen. die untere linie bleibt (sie ist die obere
   kante der reihe darunter), und die letzte vor dem monatsanfang
   liefert dem ersten des monats seine linke kante. */
.cal-cell.cal-empty { background: none; border-right-color: transparent; }
.cal-cell.cal-empty.is-edge { border-right-color: var(--line); }
/* die füllzellen am monatsende tragen gar nichts */
.cal-cell.cal-tail { border-color: transparent; }
a.cal-cell:hover { background: var(--hover); }

/* zustände als fläche, nicht als kontur – die linien gehören dem raster */
.cal-cell.is-today {
  background-color: color-mix(in oklab, var(--person) 9%, var(--bg));
}
a.cal-cell.is-today:hover {
  background-color: color-mix(in oklab, var(--person) 15%, var(--bg));
}
.cal-cell.is-star { background: var(--star-bg); }
a.cal-cell.is-star:hover {
  background-color: color-mix(in oklab, var(--star) 12%, var(--bg));
}
.cal-cell.is-today.is-star {
  background-color: color-mix(in oklab, var(--star) 16%, var(--bg));
}
.cal-cell.is-today .cal-num { color: var(--person); }
.cal-cell.is-today.is-star .cal-num { color: var(--star-dark); }

.cal-main {
  flex: 1; min-height: 0; min-width: 0; width: 100%;
  display: flex; flex-direction: column; margin-top: var(--s1);
}
.cal-num {
  font-size: 1.35rem; font-weight: 400; line-height: 1;
  color: var(--faint); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.cal-cell.has-entry .cal-num { color: var(--muted); }
.cal-star { font-size: .95rem; line-height: 1; color: var(--star); }

/* die namen stehen untereinander, linksbündig */
.cal-content {
  display: flex; flex-direction: column; align-items: flex-start;
  margin-top: var(--s1); min-height: 0; flex: 1; overflow: hidden;
}

/* die marken stehen rechts untereinander – oben beginnend */
/* zwei zonen: oben die kopfzeile (datum links, marken rechts),
   darunter gehört die ganze fläche den namen */
.cal-head-row {
  flex: none; display: flex; align-items: center;
  justify-content: space-between; gap: var(--s1);
}
.cal-marks {
  flex: none; display: flex; align-items: center;
  gap: 4px; overflow: hidden;
}

/* sport schließt die zelle ab – ebenfalls mittig */

/* muss nach der flex-regel stehen, sonst gewinnt display gegen [hidden] */
.cal-name[hidden] { display: none; }
.cal-name {
  display: flex; align-items: baseline; gap: .25em;
  font-size: .8rem; font-weight: 600; line-height: 1.6;
  max-width: 100%; min-width: 0;
}

.cal-name-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  border-bottom: var(--bw) solid transparent;
  transition: border-color var(--t2);
}
/* namen führen zur person – deshalb zeiger und unterlinie beim hovern */
.cal-name[data-go] { cursor: pointer; }
.cal-name[data-go]:hover .cal-name-text { border-bottom-color: currentColor; }


@media (max-width: 560px) {
  .cal-cell { padding: 4px; font-size: .7rem; }
  .cal-num { font-size: .68rem; }
  .cal-name { font-size: .66rem; line-height: 1.5; }

}

/* schalter-zeile (im kalender zeigen) */
.toggle-row {
  display: flex; align-items: center; gap: .5rem;
  flex: 1 1 100%; margin-top: .3rem; font-size: .88rem; cursor: pointer;
}
.toggle-row input { width: 18px; height: 18px; cursor: pointer; }

/* ── suche-seite ──────────────────────────────────────────────── */
.search-page { padding: 1.6rem 1.4rem; max-width: var(--maxw); margin: 0 auto; }
.search-form { display: flex; gap: .6rem; margin-bottom: 1.2rem; }
.search-form input {
  flex: 1; padding: .55rem .8rem; font: inherit; font-size: .95rem;
  border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--surface);
}
.search-form input:focus { outline: none; border-color: var(--ink); }
.search-form button {
  padding: .6rem 1.1rem; font: inherit; cursor: pointer;
  background: var(--ink); color: var(--surface); border: none;
}
.search-count { font-size: .8rem; color: var(--muted); margin: 0 0 1rem; }
.search-list { list-style: none; margin: 0; padding: 0; }
.search-hit {
  position: relative;
  padding: var(--s2) 0 var(--s2) var(--s4); margin-bottom: var(--s2);
}
.search-hit::before {
  content: ""; position: absolute; left: 0; top: var(--s2); bottom: var(--s2);
  width: var(--bw); background: var(--line);
}
.search-hit:hover::before { background: var(--muted); }
.hit-date {
  display: inline-block; font-size: var(--meta-size); color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--meta-ls); margin-bottom: .35rem;
  text-decoration: none;
}
.hit-date:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hit-line {
  display: block; font-family: var(--serif); font-size: .98rem;
  line-height: 1.6;
}

/* ── wochen-navigation ────────────────────────────────────────── */
.weeknav {
  display: flex; align-items: center; gap: .8rem;
  max-width: var(--maxw); margin: 1rem auto 1.4rem;
  padding: 0 1.4rem;
}
.nav-btn {
  width: 38px; height: 38px; flex: none;
  border: none; background: none; color: var(--muted);
  border-radius: 0; font-size: 1.1rem; cursor: pointer;
}
.nav-btn:hover { color: var(--ink); }
.week-label {
  flex: 1; text-align: center;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
}
.today-btn {
  border: none; background: none; color: var(--muted);
  font-size: var(--meta-size); text-transform: uppercase;
  letter-spacing: var(--meta-ls);
  cursor: pointer; padding: .3rem .4rem;
}
.today-btn:hover { color: var(--ink); }
.today-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── woche ────────────────────────────────────────────────────── */
.week { max-width: var(--maxw); margin: 0 auto; padding: 0 1.4rem; }

/* ein tag ist eine einheit: ein feiner leitstrich links bindet kopf,
   text und automatische zeile zusammen – auch wenn nichts notiert ist */
.day {
  position: relative;
  padding: var(--s4) 0 var(--s4) var(--s4);
  transition: background-color var(--t);
}
.day::before {
  content: ""; position: absolute; left: 0; top: var(--s4); bottom: var(--s4);
  width: var(--bw); background: var(--line);
  transition: background-color var(--t);
}
.day + .day { margin-top: var(--s4); }
.day:hover { background: var(--sunk); }
.day:hover::before { background: var(--muted); }
.day.editing::before, .day.is-today::before { background: var(--person); }
/* markierter tag: der leitstrich trägt dasselbe gold wie im kalender */
.day:has(.star.on)::before { background: var(--star); }
.day:has(.star.on) { background: var(--star-bg); }
.day:has(.star.on):hover { background: var(--star-bg); }
.day.is-future { opacity: .45; }

.day-head {
  display: flex; align-items: baseline; gap: .7rem;
  margin-bottom: .3rem;
}
/* tageskopf: sachliches datum, wochentag als leises etikett */
.day-date {
  font-size: .95rem; font-weight: 650; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.day-wd {
  font-size: var(--meta-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--meta-ls);
  color: var(--muted);
  transform: translateY(-1px);
}
.day.is-today .day-wd { color: var(--person); }
/* markieren ist eine bewusste geste – also ein sichtbarer knopf */
.star {
  margin-left: auto; margin-right: var(--s2);
  display: inline-flex; align-items: center; gap: .35em;
  padding: 2px var(--s2); line-height: 1;
  font: inherit; font-size: var(--meta-size);
  text-transform: uppercase; letter-spacing: var(--meta-ls);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r);
  color: var(--muted); cursor: pointer;
  transition: border-color var(--t), color var(--t), background-color var(--t);
}
/* der knopf hält seinen platz, zeigt sich aber erst bei annäherung –
   markierte tage tragen ihn dauerhaft */
.star {
  opacity: 0; pointer-events: none;
  transition: opacity var(--t), border-color var(--t),
              color var(--t), background-color var(--t);
}
.day:hover .star,
.day.editing .star,
.star:focus-visible,
.star.on {
  opacity: 1; pointer-events: auto;
}
.star:hover { border-color: var(--star); color: var(--star); }
/* markiert: im ruhezustand eine goldene aussage, kein knopf … */
.star.on {
  background: none; border-color: transparent; color: var(--star);
}
/* … erst bei annäherung wird wieder ein knopf daraus */
.day:hover .star.on,
.star.on:hover,
.star.on:focus-visible {
  background: var(--surface); border-color: var(--star); color: var(--star);
}
.star.on:hover { color: var(--star-dark); border-color: var(--star-dark); }

/* auf schmalen schirmen genügt der stern, solange nichts gesetzt ist */
@media (max-width: 520px) {
  .star:not(.on) .star-txt { display: none; }
}
.star svg { flex: none; }

/* schreibfläche mit linienraster – gleiches bild ob ansehen oder tippen.
   hier spricht der mensch: buchserife, etwas größer als die ui */
.day-body {
  outline: none;
  caret-color: var(--ink);
  min-height: var(--lh);
  cursor: text;
  white-space: pre-wrap;          /* zeilenumbrüche erhalten (auch beim tippen) */
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: var(--lh);
  word-break: break-word;
}
.day-body .ln,
.day-body .li { line-height: var(--lh); min-height: var(--lh); }
.day-body .empty { color: var(--rule); }
.day-body strong, .day-body b { font-weight: 600; }
/* leerer tag: hinweis statt leere fläche, erscheint deutlicher beim hovern */
.day:not(.editing) .day-body .empty {
  color: var(--rule); font-style: italic; font-size: .95rem;
}
.day:not(.editing):hover .day-body .empty { color: var(--muted); }

/* stichpunkte */
.day-body .li { padding-left: 1.6em; position: relative; }
.day-body .li::before {
  content: ''; position: absolute; left: .35em; top: calc(var(--lh) / 2);
  width: .55em; height: 1px; background: var(--muted);
}

/* ── tags (personen) ──────────────────────────────────────────── */

/* ── formatierung ─────────────────────────────────────────────── */
.day-body strong, .hit-body strong { font-weight: 700; }
.day-body em,     .hit-body em     { font-style: italic; }
.day-body u,      .hit-body u      { text-decoration: underline; text-underline-offset: 2px; }

/* ── formatierungsleiste ───────────────────────────────────────── */
.fmt-bar {
  position: absolute; z-index: 60;
  display: flex;
  background: var(--ink);
  box-shadow: 0 4px 14px var(--shadow);
}
.fmt-bar[hidden] { display: none; }   /* sonst schlägt display:flex das hidden-attribut */
.fmt-bar button {
  width: 38px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 0; cursor: pointer;
  color: var(--surface); font: inherit; font-size: .95rem; line-height: 1;
}
.fmt-bar button + button { border-left: var(--bw) solid rgba(255,255,255,.18); }
.fmt-bar button:hover { background: var(--ink-hover); }
.fmt-bar button.on { background: var(--surface); color: var(--ink); }

/* ── tag-autovervollständigung ─────────────────────────────────── */
.tag-ac {
  position: absolute; z-index: 50;
  min-width: 140px; max-width: 240px;
  max-height: 220px; overflow-y: auto;
  background: var(--surface); border: var(--bw) solid var(--ink);
  box-shadow: 0 4px 14px var(--shadow);
}
.tag-ac button {
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
  width: 100%; text-align: left;
  padding: .45rem .7rem; font: inherit; font-size: .9rem;
  background: none; border: none; cursor: pointer; color: var(--ink);
}
.tag-ac .ac-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  align-self: center;
}
.tag-ac .ac-name   { font-weight: 600; }
.tag-ac .ac-handle { font-size: .75rem; color: var(--muted); }
.tag-ac .ac-note   { font-size: .75rem; color: var(--muted); }
.tag-ac button.active .ac-handle,
.tag-ac button.active .ac-note { color: var(--faint); }
.tag-ac button:hover { background: var(--active); }
.tag-ac button.active { background: var(--ink); color: var(--surface); }

/* fußhinweis für mehrwort-namen */
.tag-ac .ac-hint {
  padding: .5rem .7rem; font-size: .72rem; color: var(--muted);
  border-top: var(--bw) solid var(--line); background: var(--sunk);
  position: sticky; bottom: 0;
}

/* ── touch: dropdown als leiste unten, große tippflächen ────────── */
@media (pointer: coarse) {
  .tag-ac.ac-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    min-width: 0; max-width: none; max-height: 45vh;
    border: none; border-top: var(--bw) solid var(--ink);
    box-shadow: 0 -4px 18px var(--shadow);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tag-ac.ac-sheet button {
    min-height: 48px; align-items: center;
    padding: .7rem 1rem; font-size: 1rem;
    border-bottom: var(--bw) solid var(--line);
  }
  .tag-ac.ac-sheet button.active { background: none; color: var(--ink); }
  .tag-ac.ac-sheet button:active { background: var(--active); }   /* rückmeldung beim tippen */
  .tag-ac.ac-sheet .ac-name { font-size: 1rem; }
  .tag-ac.ac-sheet .ac-hint { font-size: .8rem; padding: .7rem 1rem; }
}
/* ── suche ────────────────────────────────────────────────────── */
.no-hits { color: var(--muted); padding: .8rem 0; }

.day-error { margin-top: .5rem; font-size: .85rem; color: var(--alert); }

/* ── login ────────────────────────────────────────────────────── */
.login-body { display: flex; min-height: 100vh; }
.login { margin: auto; width: 100%; max-width: 360px; padding: 2rem 1.5rem; text-align: center; }
.login .logo { font-size: 1.2rem; margin-bottom: 2rem; }
.login-form { display: flex; flex-direction: column; gap: .7rem; text-align: left; }
.login-form label {
  font-size: .72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.login-form input {
  font: inherit; padding: .7rem 0;
  border: none; border-bottom: var(--bw) solid var(--ink); background: none;
}
.login-form input:focus { outline: none; }
.login-form button {
  margin-top: .6rem; padding: .8rem; font: inherit; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--ink); color: var(--surface); border: none; border-radius: 0; cursor: pointer;
}
.login-form button:hover { background: var(--ink-hover); }
.login-hint, .login-msg { font-size: .85rem; color: var(--muted); margin-top: 1.1rem; }
.login-msg.error { color: var(--alert); }

/* ── personen-übersicht ────────────────────────────────────────── */
.people { max-width: var(--maxw); margin: 1.6rem auto 0; padding: 0 1.4rem; }

.crumb {
  margin: 0 0 1.4rem;
  font-size: var(--meta-size); text-transform: uppercase;
  letter-spacing: var(--meta-ls);
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }

.person { padding: 1.4rem 0 1.6rem; }
.person + .person { border-top: var(--bw) solid var(--line); }

.person-head { display: flex; align-items: baseline; gap: .8rem; }

.person-name {
  font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--person); text-decoration: none;
}
a.person-name:hover { text-decoration: underline; text-underline-offset: 3px; }
h2.person-name { margin: 0 0 .2rem; font-size: 1.55rem; }

.person-count {
  margin-left: auto; flex: none;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  color: var(--muted);
}

.person-stats {
  margin: .1rem 0 .9rem;
  font-size: .75rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}

.lines { list-style: none; margin: 0; padding: 0; }
.lines li {
  display: flex; gap: var(--s4); align-items: baseline;
  padding: var(--s2) 0; border-top: var(--bw) solid var(--rule);
}
/* muss NACH der display-regel stehen: sonst gewinnt flex gegen [hidden] */
.lines li[hidden] { display: none; }
.line-date {
  flex: none; width: 8.5rem;
  font-size: var(--meta-size); text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.line-date:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.line-text {
  word-break: break-word;
  font-family: var(--serif); font-size: .98rem; line-height: 1.55;
}
.line-text strong { font-weight: 600; }
.line-text em { font-style: italic; }
.line-text u { text-decoration: underline; text-underline-offset: 2px; }
.line-text .tag {
  font-weight: 700; color: var(--person);
  text-decoration: none;
}

.all-link {
  display: inline-block; margin-top: .7rem;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink); text-decoration: none;
  border-bottom: var(--bw) solid var(--ink);
}
.all-link:hover { color: var(--muted); border-color: var(--muted); }

.person-detail { padding-bottom: 3rem; }

@media (max-width: 560px) {
  .lines li { flex-direction: column; gap: .15rem; }
  .line-date { width: auto; }
}

/* ── person: anzeigename, notiz, formular ──────────────────────── */
.person-handle {
  margin: 0 0 .5rem;
  font-size: .8rem; color: var(--muted);
}

.meta-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
  margin: 0 0 1.6rem; padding: 1rem 0 1.2rem;
  border-top: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line);
}
.meta-form label { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 12rem; }
.meta-form label span {
  font-size: .68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.meta-form input {
  font: inherit; font-size: .95rem; padding: .45rem 0;
  border: none; border-bottom: var(--bw) solid var(--ink); background: none;
}
.meta-form input:focus { outline: none; }
.meta-form button {
  flex: none; padding: .5rem 1rem; font: inherit; font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--ink); color: var(--surface); border: none; border-radius: 0; cursor: pointer;
}
.meta-form button:hover { background: var(--ink-hover); }

/* ── farbwähler ────────────────────────────────────────────────── */
.swatches {
  flex: 1 1 100%;
  display: flex; align-items: center; gap: .5rem;
  margin: 0; padding: 0; border: none;
}
.swatches legend {
  padding: 0; margin-right: .3rem;
  font-size: .68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.swatch { cursor: pointer; line-height: 0; }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch span {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 1px var(--surface) inset;
}
.swatch input:checked + span {
  box-shadow: 0 0 0 2px var(--surface) inset, 0 0 0 2px var(--ink);
}
.swatch input:focus-visible + span { box-shadow: 0 0 0 2px var(--surface) inset, 0 0 0 2px var(--muted); }

/* poppigere variante: größere kreise, deutliche auswahl, sanfter zoom */
.swatches-pop {
  flex-wrap: wrap; gap: .6rem; margin-top: .3rem;
}
.swatches-pop .swatch span {
  width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--surface) inset;
  transition: transform .12s ease, box-shadow .12s ease;
}
.swatches-pop .swatch:hover span { transform: scale(1.12); }
.swatches-pop .swatch input:checked + span {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--surface) inset, 0 0 0 3px var(--c),
              0 2px 8px var(--shadow);
}
.swatches-pop .swatch.is-none span {
  width: 32px; height: 32px;
}

@media (max-width: 560px) {
  .swatches { flex-wrap: wrap; }
}

/* "keine eigene farbe" – standard-blau, durchgestrichen dargestellt */
.swatch.is-none span {
  background: var(--person);
  position: relative; overflow: hidden;
}
.swatch.is-none span::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom right,
    transparent 45%, var(--surface) 45%, var(--surface) 55%, transparent 55%);
}
.swatch-hint {
  flex: 1 1 100%; margin: .1rem 0 0;
  font-size: .72rem; color: var(--muted);
}

/* ── fehlerbanner ──────────────────────────────────────────────── */
.banner {
  padding: .7rem 1.4rem;
  background: var(--alert); color: var(--surface);
  font-size: .85rem;
}

/* ── personen und orte im text ─────────────────────────────────── */
.tag { font-weight: 700; color: var(--person); }
.place {
  color: var(--place); font-weight: 600;
  border-bottom: var(--bw) dotted var(--place);
}

/* ── anklickbar oder nicht ─────────────────────────────────────
   der server rendert klickbare tags als <a>, reine anzeige als
   <span>. daran hängen zeiger und hover – überall gleich, egal ob
   tagebuch, detailseite oder suchtreffer. im eintrag selbst sind es
   spans, die per javascript klickbar sind. */
a.tag, a.place,
.day-body .tag, .day-body .place,
[data-go] {
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--t2);
}
/* personen: unsichtbare unterlinie, die ihre farbe einblendet */
a.tag, .day-body .tag, .tag[data-go] {
  border-bottom: var(--bw) solid transparent;
}
a.tag:hover, .day-body .tag:hover, .tag[data-go]:hover {
  border-bottom-color: currentColor;
}

/* orte: dieselbe linie wird durchgezogen – gleiche position, kein versatz */
a.place:hover, .day-body .place:hover, .place[data-go]:hover {
  border-bottom-style: solid;
}


/* vorschläge: pin-symbol, bekannte orte gefüllt */
.tag-ac .ac-pin {
  width: 9px; height: 9px; flex: none; align-self: center;
  border: var(--bw) solid var(--muted); border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: none;
}
.tag-ac .ac-pin.known { background: var(--ink); border-color: var(--ink); }
.tag-ac .ac-badge {
  font-size: .68rem; font-weight: 700; color: var(--muted);
  letter-spacing: .04em;
}
.tag-ac button.active .ac-badge { color: var(--faint); }
.tag-ac button.active .ac-pin { border-color: var(--surface); }
.tag-ac button.active .ac-pin.known { background: var(--surface); }
.tag-ac .ac-note { flex: 1 1 100%; }

/* ── ortsseite ─────────────────────────────────────────────────── */
.place-name { color: var(--place) !important; }
a.line-text .place { color: var(--place); font-weight: 600; }

.section-title {
  margin: 0 0 .9rem; font-size: var(--meta-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--meta-ls); color: var(--muted);
}
.new-place { padding-bottom: .6rem; border-bottom: var(--bw) solid var(--line); }
.new-place .meta-form { border: none; padding-top: 0; margin-bottom: .8rem; }

.delete-form { margin: -.8rem 0 1.4rem; }
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .78rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--alert); }
.form-error {
  margin: 0 0 1rem; padding: .6rem .8rem;
  background: var(--alert); color: var(--surface); font-size: .85rem;
}

/* "als eigenen ort anlegen" */
.tag-ac .ac-new { border-top: var(--bw) solid var(--line); }
.tag-ac .ac-plus {
  width: 9px; height: 9px; flex: none; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--muted); line-height: 1;
}
.tag-ac .ac-new.active .ac-plus { color: var(--surface); }

/* ── adressfeld mit eingabehilfe (ortsseite) ───────────────────── */
.geo-form { border-top: none; padding-top: 0; margin-top: -.8rem; }
.geo-field { position: relative; flex: 1 1 22rem; }
.geo-ac {
  position: absolute; left: 0; right: auto; top: 100%;
  min-width: 100%; max-width: 32rem;
  margin-top: 2px;
}
.geo-ac button { white-space: normal; }

/* ── handle-feld (kurzname mit vorangestelltem zeichen) ─────────── */
.handle-field {
  display: inline-flex; align-items: stretch;
  border: var(--bw) solid var(--line); background: var(--surface);
}
.handle-field .handle-sym {
  display: inline-flex; align-items: center;
  padding: 0 .5rem; background: var(--hover); color: var(--muted);
  font-weight: 700; border-right: var(--bw) solid var(--line);
}
.handle-field input { border: none !important; }

/* ── vollbild-picker für person/ort (touch) ────────────────────── */
.picker {
  position: fixed; inset: 0; z-index: 100;
  background: var(--surface); display: flex; flex-direction: column;
}
.picker[hidden] { display: none; }   /* attribut muss die flex-regel schlagen */
body.picker-open { overflow: hidden; }

.picker-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .7rem; border-bottom: var(--bw) solid var(--ink);
  padding-top: calc(.6rem + env(safe-area-inset-top, 0));
}
.picker-back {
  flex: none; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink); cursor: pointer;
}
.picker-field {
  flex: 1; display: inline-flex; align-items: center;
  border: var(--bw) solid var(--line); background: var(--surface);
}
.picker-sym {
  padding: 0 .5rem; color: var(--muted); font-weight: 700;
  border-right: var(--bw) solid var(--line); align-self: stretch;
  display: inline-flex; align-items: center;
}
.picker-input, #picker-input {
  flex: 1; border: none; padding: .6rem .7rem;
  font: inherit; font-size: 1.05rem; background: none;
}
.picker-input:focus { outline: none; }

.picker-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pk-row {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  min-height: 56px; padding: .7rem 1rem; text-align: left;
  background: none; border: none; border-bottom: var(--bw) solid var(--line);
  font: inherit; color: var(--ink); cursor: pointer;
}
.pk-row:active { background: var(--active); }
.pk-ic { flex: none; width: 12px; height: 12px; }
.pk-dot { border-radius: 50%; }
.pk-pin {
  border: var(--bw) solid var(--muted); border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.pk-pin.known { background: var(--ink); border-color: var(--ink); }
.pk-new .pk-ic {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--muted);
}
.pk-main { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.pk-name { font-weight: 600; font-size: 1.02rem; }
.pk-sub  { font-size: .8rem; color: var(--muted); }
.pk-badge { font-size: .78rem; color: var(--muted); font-weight: 700; }

/* der picker ist nur am touch gedacht */
@media (pointer: fine) { .picker { display: none !important; } }

/* kurzes aufblinken, wenn man von person/ort zu einem tag springt */
@keyframes day-flash {
  0%   { background: var(--surface)6d6; }
  100% { background: transparent; }
}
.day-flash { animation: day-flash 1.6s ease-out; }

/* ── profilbilder ──────────────────────────────────────────────── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex: none;
  object-fit: cover; background: var(--active);
  font-weight: 700; color: var(--surface); text-transform: uppercase;
}
.avatar-ph { line-height: 1; }              /* platzhalter mit initiale */
.avatar-place { border-radius: 14%; }        /* orte leicht eckig */

.avatar-lg { width: 72px; height: 72px; font-size: 1.7rem; }
.avatar-sm { width: 30px; height: 30px; font-size: .85rem; }
.avatar-md { width: 44px; height: 44px; font-size: 1.1rem; }

.detail-head {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;
}
.detail-head-text { min-width: 0; }
.detail-head-text .person-name { margin: 0; }

.person-name-av { display: inline-flex; align-items: center; gap: .55rem; }

/* upload */
.avatar-form {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 1.4rem;
}
.upload-btn {
  display: inline-block; cursor: pointer;
  padding: .45rem .9rem; font-size: .82rem;
  border: var(--bw) solid var(--ink); background: var(--surface);
}
.upload-btn:hover { background: var(--ink); color: var(--surface); }
.upload-btn input { display: none; }

/* avatar im dropdown / picker */
.ac-av {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; flex: none; align-self: center;
}
.pk-av { width: 34px !important; height: 34px !important; border-radius: 50%; object-fit: cover; }

/* ── entitäts-liste (personen, orte) ───────────────────────────── */
.entity-list { list-style: none; margin: 0; padding: 0; }
.entity-list li { border-bottom: var(--bw) solid var(--rule); }
.entity-row {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s3) var(--s1); text-decoration: none; color: var(--ink);
}
.entity-row:hover { background: var(--sunk); }
.entity-row .avatar-md { margin-top: 0; }

.entity-main { flex: 1; min-width: 0; }

/* kopf: name links, meta rechts – auf einer ebene.
   die zeile ist so hoch wie das bild daneben, damit name und initiale
   auf gleicher höhe sitzen (die geerbte zeilenhöhe ist kleiner) */
.entity-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; min-height: 44px;
}
.entity-name {
  font-weight: 600; font-size: 1rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.entity-meta {
  flex: none; font-size: .72rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* letzte interaktionen */
.entity-lines { display: flex; flex-direction: column; gap: .15rem; }
.entity-line {
  display: flex; gap: .5rem; font-size: .82rem; color: var(--soft);
  white-space: nowrap; overflow: hidden;
}
.entity-line-date {
  flex: none; color: var(--muted); font-variant-numeric: tabular-nums;
}
.entity-line-text {
  overflow: hidden; text-overflow: ellipsis;
  font-family: var(--serif); font-size: .92rem;
}
.entity-line-text .tag, .entity-line-text .place { font-weight: 600; }

@media (max-width: 480px) {
  .entity-top { flex-direction: column; gap: .1rem; }
  .entity-meta { white-space: normal; }
}

/* ausgeblendete namen: durchgestrichen, klick blendet wieder ein */



/* aufklappbereich zum ausblenden */











/* ── kalender-filter (personen und orte, gleiches schema) ──────── */




.inline-form { display: inline; margin: 0; }



















/* namen direkt in der zeile (abweichungen), anklickbar */







/* ── einstellungen ─────────────────────────────────────────────── */
.settings-page {
  padding: var(--s5); max-width: var(--maxw); margin: 0 auto;
}
.saved-note {
  font-size: .82rem; color: var(--ink);
  border-left: var(--bw) solid var(--person);
  padding: var(--s2) var(--s3);
  background: var(--sunk); margin: 0 0 var(--s5);
}
.set-block { padding: var(--s5) 0; border-top: var(--bw) solid var(--line); }
.set-block:first-child, .settings-form .set-block:first-child { border-top: none; padding-top: .2rem; }
.set-title {
  font-size: var(--meta-size); text-transform: uppercase;
  letter-spacing: var(--meta-ls);
  color: var(--muted); margin: 0 0 .6rem; font-weight: 600;
}
.set-hint { font-size: .8rem; color: var(--muted); margin: .1rem 0 .7rem; }
.set-field {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: .6rem 0; font-size: .88rem;
}
.set-field select {
  font: inherit; font-size: .88rem; padding: var(--s2) var(--s2);
  border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--surface);
}
.set-save {
  font: inherit; font-size: .88rem; padding: var(--s2) var(--s5); cursor: pointer;
  background: var(--ink); color: var(--surface); border: none; border-radius: var(--r);
}
.set-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.set-btn {
  display: inline-block; font-size: .84rem; padding: var(--s2) var(--s4);
  text-decoration: none; color: var(--ink);
  border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--surface);
  transition: background-color var(--t), color var(--t);
}
.set-btn:hover { background: var(--ink); color: var(--surface); }
.set-btn-quiet { border-color: var(--line); color: var(--muted); }
.set-btn-quiet:hover { background: none; color: var(--alert); border-color: var(--alert); }

.settings-form .toggle-row { margin: .45rem 0; }

/* „+n" wenn nicht alle namen in den tag passen */
.cal-more { font-size: .62rem; color: var(--muted); font-weight: 600; margin-left: .2em; }

/* ── ausklappbares anlegen (orte) ──────────────────────────────── */
.add-details { margin-top: 1.6rem; }
.add-details summary {
  font-size: var(--meta-size); text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); cursor: pointer;
  list-style: none; display: inline-block; padding: .2rem 0;
}
.add-details summary::-webkit-details-marker { display: none; }
.add-details summary::before { content: "+ "; }
.add-details[open] summary::before { content: "– "; }
.add-details summary:hover { color: var(--ink); }
.add-details .meta-form {
  margin-top: .8rem; padding: 1rem;
  border: var(--bw) solid var(--line); background: var(--sunk);
}

/* ── sofortfilter in den listen ────────────────────────────────── */
.list-filter-wrap { position: relative; margin-bottom: .9rem; }
.list-filter {
  width: 100%; font: inherit; font-size: .9rem;
  padding: var(--s2) var(--s6) var(--s2) var(--s3);
  border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--surface);
}
.list-filter:focus { outline: none; border-color: var(--ink); }
.list-filter::-webkit-search-cancel-button { display: none; }
.filter-clear {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; line-height: 1;
  font-size: 1.1rem; color: var(--muted); cursor: pointer;
  background: none; border: none;
}
.filter-clear:hover { color: var(--ink); }
.filter-clear[hidden] { display: none; }
.entity-list li[hidden] { display: none; }

/* ── favoriten-kacheln ─────────────────────────────────────────
   die kachel IST das bild bzw. die farbe. der text liegt darüber,
   unten, auf einem verlauf – so bleibt er auf jedem foto lesbar. */
.fav-grid {
  list-style: none; margin: 0 0 var(--s5); padding: 0;
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.fav-tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1 / 1;                 /* alle exakt gleich hoch */
  border-radius: var(--r); text-decoration: none;
  background: var(--c) center / cover no-repeat;
  transition: filter var(--t);
}
.fav-tile:hover { filter: brightness(1.06); }

/* ohne foto: die initiale als ruhiges zeichen im hintergrund */
.fav-initial {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.4rem; font-weight: 600; line-height: 1;
  color: rgba(255,255,255,.28);
  transform: translateY(-8%);
}

/* verlauf trägt den text. er liegt über foto oder farbfläche, ist also
   in beiden modi schwarz – mit weichen zwischenstufen, damit keine
   sichtbare kante entsteht. */
.fav-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(0,0,0,.48) 0%,
              rgba(0,0,0,.28) 24%,
              rgba(0,0,0,.12) 44%,
              rgba(0,0,0,.04) 60%,
              rgba(0,0,0,0)   74%);
}
.fav-tile.has-photo::after {
  background: linear-gradient(to top,
              rgba(0,0,0,.66) 0%,
              rgba(0,0,0,.42) 22%,
              rgba(0,0,0,.20) 42%,
              rgba(0,0,0,.07) 62%,
              rgba(0,0,0,0)   80%);
}

.fav-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--s2) var(--s3) var(--s3);
  color: #fff;               /* liegt auf dem verlauf, nicht auf der seite */
}
.fav-name, .fav-tile .fav-name { color: #fff; }
.fav-name {
  font-size: .92rem; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-meta {
  font-size: var(--meta-size); text-transform: uppercase;
  letter-spacing: var(--meta-ls); color: rgba(255,255,255,.78);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .fav-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .fav-initial { font-size: 2.6rem; }
  .fav-name { font-size: .85rem; }
}

/* ── sofortfilter in den listen ────────────────────────────────── */
.list-filter-wrap { position: relative; margin-bottom: .9rem; }
.list-filter {
  width: 100%; font: inherit; font-size: .9rem;
  padding: var(--s2) var(--s6) var(--s2) var(--s3);
  border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--surface);
}
.list-filter:focus { outline: none; border-color: var(--ink); }
.list-filter::-webkit-search-cancel-button { display: none; }
.filter-clear {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; line-height: 1;
  font-size: 1.1rem; color: var(--muted); cursor: pointer;
  background: none; border: none;
}
.filter-clear:hover { color: var(--ink); }
.filter-clear[hidden] { display: none; }
.entity-list li[hidden] { display: none; }

/* ── orts-detail: direktbearbeitung ────────────────────────────── */
.hero { display: flex; gap: var(--s5); align-items: flex-start; margin-bottom: var(--s5); }
.hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }

/* nahtlose eingabefelder: sehen aus wie text, editierbar beim klick */
.seamless {
  font: inherit; border: none; background: none; padding: .1rem 0;
  width: 100%; color: var(--ink);
  border-bottom: var(--bw) solid transparent;
}
.seamless:hover  { border-bottom-color: var(--line); }
.seamless:focus  { outline: none; border-bottom-color: var(--ink); }
.seamless::placeholder { color: var(--faint); }

.hero-name   { font-size: 1.5rem; font-weight: 700; }
.hero-handle { font-size: .9rem; color: var(--muted); font-weight: 600; }
.hero-addr { font-size: .85rem; color: var(--soft); }
.hero-note {
  font-family: var(--serif); font-size: .95rem; color: var(--soft);
}

.hero-geo { position: relative; }

/* bild mit hover-overlay */
.hero-avatar {
  position: relative; flex: none; margin: 0;
  line-height: 0;      /* keine zeilenhöhe um das bild herum */
}
/* im kopfbereich ist das bild ein block – als inline-element würde die
   hülle je nach inhalt (bild oder initiale) unterschiedlich hoch */
.hero-avatar .avatar { display: flex; }
.hero-avatar-inner {
  display: block; position: relative; cursor: pointer;
  line-height: 0;      /* sonst ist die hülle höher als das bild (unterlängen) */
}
.hero-avatar-inner input { display: none; }
.avatar-xl { width: 104px; height: 104px; font-size: 2.2rem; }
.hero-avatar-hint {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center;
  font-size: .72rem; font-weight: 600; line-height: 1.2; color: #fff;
  background: rgba(0,0,0,.45); border-radius: 14%;
  opacity: 0; transition: opacity var(--t);
}
/* bei personen ist das bild rund – das overlay muss es auch sein */
.hero-avatar-person .hero-avatar-hint { border-radius: 50%; }
.hero-avatar-inner:hover .hero-avatar-hint,
.hero-avatar-inner:focus-within .hero-avatar-hint { opacity: 1; }
.hero-avatar .avatar { border-radius: 14%; }   /* orte: leicht eckig */
.hero-avatar-remove {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  border-radius: 50%; border: var(--bw) solid var(--line); background: var(--surface);
  color: var(--muted); font-size: .9rem; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--t);
}
.hero-avatar:hover .hero-avatar-remove { opacity: 1; }
.hero-avatar-remove:hover { color: var(--alert); border-color: var(--alert); }

/* favoriten-stern */




/* farbpunkt mit popover */
.color-wrap { position: relative; display: inline-flex; }
.color-dot {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  background: var(--c); border: var(--bw) solid var(--line);
}
.color-dot:hover { transform: scale(1.15); }
.color-pop {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; gap: .45rem; width: 172px;
  padding: .6rem; background: var(--surface); border: var(--bw) solid var(--ink);
  box-shadow: 0 4px 16px var(--shadow); z-index: 30;
}
.color-pop[hidden] { display: none; }
.pop-swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: var(--c); border: none;
  transition: transform var(--t);
}
.pop-swatch:hover { transform: scale(1.15); }
.pop-swatch[data-active] { box-shadow: 0 0 0 2px var(--surface) inset, 0 0 0 2px var(--ink); }
.pop-swatch.is-none {
  background: var(--surface); border: var(--bw) solid var(--line); position: relative;
}
.pop-swatch.is-none::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%;
  height: 1px; background: var(--muted); transform: rotate(-45deg);
}

/* kalender-chip */







@media (max-width: 560px) {
  .hero { gap: .9rem; }
  .avatar-xl { width: 80px; height: 80px; font-size: 1.7rem; }
  .hero-name { font-size: 1.2rem; }
}

/* personen-avatar im hero bleibt rund (orte sind leicht eckig) */
.hero-avatar-person .avatar { border-radius: 50%; }
.hero-avatar-person .hero-avatar-hint { border-radius: 50%; }

/* ── automatische informationen unter dem eintrag ──────────────── */
/* randnotiz zum tag: auf der linken achse verankert wie der text,
   abgesetzt allein durch die meta-typografie der übrigen beschriftungen */
.day-auto {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .1rem .55rem;
  margin: 0 0 .5rem;
}
.auto-slot {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.auto-slot + .auto-slot::before {
  content: "·"; margin-right: .55rem; color: var(--rule);
  letter-spacing: 0;
}
.auto-label { color: var(--muted); }
.auto-value { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* sportarten-liste in den einstellungen */
.sport-list { list-style: none; margin: .6rem 0 .4rem; padding: 0; }
.sport-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) 0; border-bottom: var(--bw) solid var(--rule);
}
.sport-row:last-child { border-bottom: none; }
.sport-on {
  display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0;
  cursor: pointer; font-size: .9rem;
}
.sport-icon { display: inline-flex; color: var(--muted); }
.sport-icon svg { width: 16px; height: 16px; }
.sport-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sport-unit {
  font: inherit; font-size: .82rem; padding: var(--s2) var(--s2);
  border: var(--bw) solid var(--line); border-radius: var(--r);
  background: var(--surface); flex: 0 0 auto;
}
.sport-unit:disabled { color: var(--rule); background: var(--sunk); }
.sport-move { display: inline-flex; gap: .15rem; flex: none; }
.sport-move button {
  width: 26px; height: 26px; line-height: 1; cursor: pointer;
  font-size: .85rem; color: var(--muted);
  background: none; border: var(--bw) solid var(--line);
}
.sport-move button:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.sport-move button:disabled { color: var(--rule); cursor: default; }

/* abgewählte sportart tritt zurück */
.sport-row.is-off .sport-name,
.sport-row.is-off .sport-icon { opacity: .45; }

/* verlinkte slots: dezent, aber als klickbar erkennbar */
a.auto-slot { text-decoration: none; cursor: pointer; }
a.auto-slot:hover { color: var(--ink); }

/* schwebendes "gespeichert" der einstellungen */
.save-badge {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  font-size: .8rem; font-weight: 600; color: var(--surface);
  background: var(--ink); padding: .4rem .8rem; border-radius: var(--r);
}
.save-badge[hidden] { display: none; }

/* sport-piktogramme an den kalendertagen */
.cal-sport { display: inline-flex; flex: none; color: var(--person); }
.cal-sport svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .cal-sport svg { width: 12px; height: 12px; }
}

/* sport-piktogramme in slots und chips */
.auto-icon { display: inline-flex; color: currentColor; }
.auto-icon svg { width: 12px; height: 12px; }





/* sportart hinzufügen */
.sport-add-wrap { margin: .7rem 0 .2rem; }
.sport-add {
  font: inherit; font-size: .82rem; padding: var(--s2) var(--s2);
  border: var(--bw) solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--muted);
}
.sport-add:hover { color: var(--ink); border-color: var(--ink); }
.sport-add[hidden] { display: none; }
.sport-row[hidden] { display: none; }

/* ── such-overlay (die suche liegt auf jeder seite) ────────────── */
.nav-search {
  font: inherit; font-size: .78rem; letter-spacing: .03em;
  background: none; border: none;
  padding: .1rem 0 .1rem var(--s3);
  margin-left: var(--s1);
  border-left: var(--bw) solid var(--line);
  color: var(--muted); cursor: pointer;
}
.nav-search:hover { color: var(--ink); }
.search-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: var(--veil);
  padding: 8vh 1rem 0;
}
.search-overlay[hidden] { display: none; }
.search-panel {
  max-width: 620px; margin: 0 auto;
  background: var(--surface); border-radius: var(--r);
  padding: var(--s4);
  max-height: 74vh; overflow-y: auto;
  box-shadow: 0 18px 50px var(--shadow);
}
#overlay-q {
  width: 100%; font: inherit; font-size: 1.02rem;
  padding: .55rem .2rem; background: none;
  border: none; border-bottom: var(--bw) solid var(--line);
}
#overlay-q:focus { outline: none; border-bottom-color: var(--ink); }
.search-panel .search-count { margin-top: .7rem; }
.search-panel .search-hit { cursor: default; }

/* ── kalender-legende: alles direkt sichtbar, ein klick kippt ──── */
.cal-legend { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.legend-row { display: flex; align-items: baseline; gap: var(--s4); }
.legend-label {
  flex: 0 0 4.6rem;
  font-size: var(--meta-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--meta-ls);
  color: var(--muted);
}
.legend-chips { display: flex; flex-wrap: wrap; gap: var(--s1); min-width: 0; }
.fchip {
  display: inline-flex; align-items: center; gap: var(--s1);
  font: inherit; font-size: .78rem; cursor: pointer;
  padding: var(--s1) var(--s3); white-space: nowrap;
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r);
  color: var(--muted);
  transition: border-color var(--t), color var(--t), background-color var(--t);
}
.fchip:hover { border-color: var(--ink); color: var(--ink); }
.fchip-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--c); opacity: .3;
}
.fchip-icon { display: inline-flex; color: currentColor; }
.fchip-icon svg { width: 13px; height: 13px; }
.fchip.is-on { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.fchip.is-on .fchip-dot { opacity: 1; }
.fchip.is-on .fchip-icon { color: var(--c); }

/* ── kalenderzelle: fußzeile für kontext (wo · was) ────────────── */




/* ── detailseiten: aktionsleiste, handle-feld, listen-kopf ─────── */

.handle-box {
  display: inline-flex; align-items: baseline;
  border: none; background: none; padding: 0;
  border-bottom: var(--bw) solid transparent;
  transition: border-color var(--t);
}
.handle-box:focus-within { border-bottom-color: var(--ink); }
.handle-prefix {
  font-size: .95rem; font-weight: 700; color: var(--muted);
  user-select: none; padding-right: .05rem;
}
.handle-input {
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--muted);
  border: none; background: none; outline: none; padding: 0;
}
.handle-box:hover .handle-input, .handle-box:focus-within .handle-input {
  color: var(--ink);
}

.lines-head {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin: var(--s6) 0 var(--s2);
}
.lines-title {
  margin: 0; flex: 1;
  font-size: var(--meta-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--meta-ls);
  color: var(--muted);
}
.lines-filter-wrap { position: relative; flex: 0 1 16rem; }
.lines-filter {
  font: inherit; font-size: .84rem;
  padding: var(--s2) var(--s6) var(--s2) var(--s3);
  border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--surface);
  width: 100%;
}
.lines-filter-wrap .filter-clear { right: var(--s1); }
.lines-filter:focus { outline: none; border-color: var(--ink); }


/* ── identitätszeile: name und handle dicht nebeneinander ──────── */
.ident-row {
  display: flex; align-items: baseline; gap: var(--s1); flex-wrap: wrap;
  margin-bottom: var(--s2);
}
.ident-row .hero-name { width: auto; padding: 0; }
.edit-wrap { position: relative; display: inline-flex; align-items: center; }
/* der stift verrät die bearbeitbarkeit – erst bei annäherung */
.edit-wrap::after {
  content: "\270E"; font-size: .75rem; color: var(--muted);
  margin-left: .25rem; opacity: 0; transition: opacity var(--t);
}
.edit-wrap:hover::after, .edit-wrap:focus-within::after { opacity: 1; }
.edit-wrap:hover .seamless,
.edit-wrap:hover .handle-input {
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--muted);
}
.edit-wrap:focus-within .seamless,
.edit-wrap:focus-within .handle-input { text-decoration: none; }
.ident-row .seamless:hover { border-bottom-color: transparent; }
.handle-input { width: auto; }

/* ── zustands-knöpfe: an ist gefüllt, aus ist umrissen ─────────── */
.hero-toggles {
  display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap;
  margin: 0 0 var(--s3);
}
.tgl {
  display: inline-flex; align-items: center; gap: var(--s1);
  font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap;
  padding: var(--s1) var(--s3);
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r);
  color: var(--muted);
  transition: border-color var(--t), color var(--t), background-color var(--t);
}
.tgl:hover { border-color: var(--muted); color: var(--ink); }
.tgl-ico { display: inline-flex; font-size: .95rem; line-height: 1; }
.tgl-ico svg { width: 14px; height: 14px; }

/* eingeschaltet: dunkle fläche, weiße schrift – auf einen blick klar */
.tgl.is-on {
  background: var(--ink); border-color: var(--ink);
  color: var(--surface); font-weight: 600;
}
.tgl.is-on:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.tgl.is-on .tgl-ico, .tgl.is-on svg { color: var(--surface); }

/* farbe ist kein zustand, sondern eine wahl – bleibt hell */
.tgl-color { color: var(--ink); }
.tgl-swatch {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: var(--c); box-shadow: inset 0 0 0 1px var(--line);
}

/* sportarten im kalender (einstellungen) */
.set-sub {
  margin: var(--s4) 0 var(--s2);
  font-size: .82rem; font-weight: 600; color: var(--ink);
}
/* die pillenreihe sitzt rechts wie die auswahlfelder daneben */
.set-field .theme-choice { margin-top: 0; flex: none; }
.cal-sport-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }

/* pfeile sitzen von haus aus auf der mathe-achse und damit höher als
   der gedankenstrich – diese feine korrektur bringt sie auf eine linie */
.arw {
  display: inline-block;
  transform: translateY(-.005em);  /* fein austariert zum gedankenstrich */
  font-family: var(--sans);        /* nie aus einer symbolschrift ziehen */
}

/* ── auswahl der darstellung ───────────────────────────────────── */
.theme-choice { display: flex; gap: var(--s1); margin-top: var(--s2); }
.theme-opt {
  position: relative; cursor: pointer;
  font-size: .82rem; padding: var(--s1) var(--s3);
  border: var(--bw) solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--muted);
  transition: border-color var(--t), color var(--t), background-color var(--t);
}
.theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.theme-opt:hover { border-color: var(--muted); color: var(--ink); }
.theme-opt.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
  font-weight: 600;
}

/* ── verbindungen (wer mit wem, wo, seit wann) ─────────────────── */
.verb {
  display: flex; flex-direction: column; gap: var(--s2);
  margin: var(--s5) 0 var(--s4);
  padding: var(--s3) 0;
  border-top: var(--bw) solid var(--rule);
  border-bottom: var(--bw) solid var(--rule);
}
.verb-row { display: flex; align-items: baseline; gap: var(--s3); }
.verb-label {
  flex: 0 0 6.5rem;
  font-size: var(--meta-size); text-transform: uppercase;
  letter-spacing: var(--meta-ls); color: var(--muted);
}
.verb-items { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); min-width: 0; }
.verb-chip {
  display: inline-flex; align-items: baseline; gap: .35em;
  font: inherit; font-size: .88rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  padding: 0; background: none; border: none;
  color: var(--c);
  border-bottom: var(--bw) solid transparent;
  transition: border-color var(--t2);
}
.verb-chip:hover { border-bottom-color: currentColor; }
.verb-num {
  font-size: .68rem; font-weight: 400; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.verb-date {
  font-size: .88rem; color: var(--ink); text-decoration: none;
  border-bottom: var(--bw) solid transparent;
  transition: border-color var(--t2);
}
.verb-date:hover { border-bottom-color: currentColor; }

@media (max-width: 520px) {
  .verb-row { flex-direction: column; gap: var(--s1); }
  .verb-label { flex: none; }
}

/* stichworte: wie die verbindungen, aber als suchknopf */
.verb-word {
  display: inline-flex; align-items: baseline; gap: .35em;
  font: inherit; font-size: .88rem; cursor: pointer;
  padding: 0; background: none; border: none;
  color: var(--soft);
  border-bottom: var(--bw) solid transparent;
  transition: border-color var(--t2), color var(--t2);
}
.verb-word:hover { color: var(--ink); border-bottom-color: currentColor; }

/* erwähnungen von markierten tagen – dieselbe sprache wie im kalender */
.lines li.is-star {
  background: var(--star-bg);
  box-shadow: inset 3px 0 0 0 var(--star);   /* schmaler goldstreifen links */
  padding-left: var(--s3); padding-right: var(--s2);
  margin-left: calc(var(--s3) * -1); margin-right: calc(var(--s2) * -1);
}
.line-star {
  flex: none; margin-left: auto; padding-left: var(--s2);
  font-size: .8rem; line-height: 1; color: var(--star);
}

/* ── verweise im text ──────────────────────────────────────────── */
.lnk {
  color: var(--ink); text-decoration: none; cursor: pointer;
  border-bottom: var(--bw) solid var(--muted);
  transition: border-color var(--t2), color var(--t2);
}
.lnk:hover { color: var(--person); border-bottom-color: currentColor; }
.lnk-ic {
  width: .78em; height: .78em; margin-left: .25em;
  vertical-align: -.06em; flex: none; opacity: .55;
  transition: opacity var(--t2);
}
.lnk:hover .lnk-ic { opacity: 1; }

/* verweis-knopf in der formatierungsleiste */
.fmt-bar button svg { display: block; }


/* ── eigene farben ──────────────────────────────────────────────
   personen und orte bringen ihre farbe als --c mit. hell wird sie
   unverändert benutzt; dunkel perzeptuell aufgehellt und entsättigt,
   damit kein ton sticht. */
.tag, .cal-name, .entity-name, .hero-name, .verb-chip {
  color: var(--c, var(--person));
}
.place { color: var(--c, var(--place)); }

:root[data-theme="dunkel"] .tag,
:root[data-theme="dunkel"] .cal-name,
:root[data-theme="dunkel"] .entity-name,
:root[data-theme="dunkel"] .hero-name,
:root[data-theme="dunkel"] .verb-chip,
:root[data-theme="dunkel"] .place {
  color: color-mix(in oklab, var(--c, var(--person)) 45%, #d5dae4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .tag,
  :root:not([data-theme="hell"]) .cal-name,
  :root:not([data-theme="hell"]) .entity-name,
  :root:not([data-theme="hell"]) .hero-name,
  :root:not([data-theme="hell"]) .verb-chip,
  :root:not([data-theme="hell"]) .place {
    color: color-mix(in oklab, var(--c, var(--person)) 45%, #d5dae4);
  }
}

/* ── der heutige tag lebt ───────────────────────────────────────
   ein ruhiger puls, kein blinken. bei "reduzierte bewegung" steht er
   still (siehe die globale regel weiter oben). */
@keyframes heute-puls {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.82); }
}

/* farbige flächen (avatar-platzhalter, punkte) folgen derselben regel:
   hell die eigene farbe, dunkel perzeptuell gedämpft */

:root[data-theme="dunkel"] .fav-tile,
:root[data-theme="dunkel"] .avatar-ph,
:root[data-theme="dunkel"] .cal-pdot,
:root[data-theme="dunkel"] .ac-dot,
:root[data-theme="dunkel"] .pk-dot,
:root[data-theme="dunkel"] .cal-dot {
  /* nur die farbe – sonst würde die kurzschreibweise bei foto-kacheln
     zuschnitt und position zurücksetzen */
  background-color: color-mix(in oklab, var(--c, var(--person)) 45%, #d5dae4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .fav-tile,
  :root:not([data-theme="hell"]) .avatar-ph,
  :root:not([data-theme="hell"]) .cal-pdot,
  :root:not([data-theme="hell"]) .ac-dot,
  :root:not([data-theme="hell"]) .pk-dot,
  :root:not([data-theme="hell"]) .cal-dot {
    background-color: color-mix(in oklab, var(--c, var(--person)) 45%, #d5dae4);
  }
}

/* ── jahresstreifen ────────────────────────────────────────────
   ein jahr als linie: einzelne tage werden zum strich, mehrere
   aufeinanderfolgende zu einer durchgehenden strecke */
.ystrips {
  display: flex; flex-direction: column; gap: var(--s2);
  margin: var(--s5) 0 var(--s4);
}
.ystrips-title {
  margin: 0 0 var(--s1);
  font-size: var(--meta-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--meta-ls);
  color: var(--muted);
}
.ystrip-row { display: flex; align-items: center; gap: var(--s3); }
.ystrip-year {
  flex: 0 0 2.4rem;
  font-size: var(--meta-size); letter-spacing: var(--meta-ls);
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.ystrip {
  position: relative; flex: 1; min-width: 0;
  height: 12px;
}
/* die zeitachse des jahres – auch dort sichtbar, wo nichts war.
   im laufenden jahr endet sie bei heute (--bis kommt aus dem markup) */
.ystrip::before {
  content: ""; position: absolute; left: 0; top: 50%;
  right: calc(100% - var(--bis, 100%));
  height: var(--bw); margin-top: calc(var(--bw) / -2);
  background: var(--rule);
}
.ys-month {
  position: absolute; top: 1px; bottom: 1px; width: var(--bw);
  background: var(--rule);
}
.ys-day {
  position: absolute; top: 0; bottom: 0;
  min-width: 4px;                       /* ein einzelner tag bleibt sichtbar */
  border-radius: 2px;                   /* nur angedeutet, nicht rund */
  background: var(--c, var(--person));
  cursor: pointer; text-decoration: none;
  transition: background-color var(--t2);
}
.ys-day:focus-visible { outline: 2px solid var(--person); outline-offset: 2px; }
.ys-day:hover { background: var(--ink); }

/* datum beim hovern – schwebt über dem streifen */
.ys-day::after {
  content: attr(data-label);
  position: absolute; bottom: calc(100% + 5px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font-size: .72rem; letter-spacing: .01em;
  color: var(--bg); background: var(--ink);
  padding: 2px var(--s1); border-radius: var(--r);
  opacity: 0; transition: opacity var(--t2);
  z-index: 5;
}
.ys-day:hover::after { opacity: 1; }
.ys-today {
  /* schmale linie ohne freistellung – ein rahmen in der seitenfarbe
     würde eine lücke in die strecke schneiden und wie eine pause wirken */
  position: absolute; top: -3px; bottom: -3px; width: var(--bw);
  background: var(--star);
}

@media (max-width: 520px) {
  .ystrip-row { gap: var(--s2); }
  .ystrip-year { flex-basis: 2.1rem; }
}




/* sport schließt die zelle ab – unten links, unter den namen */



/* ortspunkte in der kopfzeile, sport als icons am fuß der zelle */
.cal-pdot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--c, var(--place));
}
.cal-sportrow {
  flex: none; display: flex; align-items: center; justify-content: flex-start;
  gap: 5px; margin-top: var(--s1); overflow: hidden;
}

/* ── fotos im tagebuch ─────────────────────────────────────────── */




/* eine zeile mit foto wird zweispaltig: text links, bilder rechts.
   beide beginnen oben, der text läuft nie unter das bild */
.day-body .hat-foto {
  display: flex; align-items: flex-start; gap: var(--s3);
}
.li-text { flex: 1; min-width: 0; }
.li-fotos { flex: none; display: flex; gap: var(--s1); }
.foto-inline {
  height: 62px; width: auto; display: block;
  border-radius: var(--r); cursor: pointer;
  transition: opacity var(--t);
}
.foto-inline:hover { opacity: .85; }

/* beim ziehen wird die zielzeile benannt – der tag als ganzes ist
   kein ziel, ein foto gehört immer zu einem stichpunkt */

/* platzhalter, solange das bild unterwegs ist – steht genau dort,
   wo das foto gleich erscheint */
.foto-lade {
  display: block; flex: none;
  width: 62px; height: 62px;
  border: var(--bw) solid var(--line); border-radius: var(--r);
  background: var(--sunk);
  position: relative; overflow: hidden;
}
/* ein heller streifen wandert darüber */
.foto-lade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
              transparent 20%, color-mix(in oklab, var(--ink) 7%, transparent) 50%,
              transparent 80%);
  transform: translateX(-100%);
  animation: foto-lade-lauf 1.1s ease-in-out infinite;
}
@keyframes foto-lade-lauf {
  to { transform: translateX(100%); }
}

/* großansicht */
.foto-view {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.86); padding: 3vh 3vw;
}
.foto-view img {
  max-width: 100%; max-height: 94vh;
  object-fit: contain; border-radius: var(--r);
}
.foto-weg {
  position: absolute; right: 1.2rem; bottom: 1.2rem;
  font: inherit; font-size: var(--meta-size);
  text-transform: uppercase; letter-spacing: var(--meta-ls);
  padding: var(--s1) var(--s3); cursor: pointer;
  background: none; border: var(--bw) solid rgba(255,255,255,.5);
  border-radius: var(--r); color: #fff;
}
.foto-weg:hover { border-color: #fff; background: rgba(255,255,255,.12); }

/* beim ziehen: die zeile, die das foto bekommt – deutlich markiert
   und beschriftet, damit klar ist, dass ein stichpunkt gewählt wird */
.day-body .zeile-ziel {
  position: relative;
  background: color-mix(in oklab, var(--person) 10%, var(--bg));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--person) 10%, var(--bg)),
              inset 2px 0 0 0 var(--person);
}

/* fotos in erwähnungen, vorschauen und suchtreffern: rechts außen,
   oben beginnend – der text läuft links daran vorbei */
.line-fotos {
  float: right; display: flex; gap: var(--s1);
  margin: 0 0 var(--s1) var(--s3);
}
.line-foto { display: block; line-height: 0; }
.line-foto img {
  height: 48px; width: auto; display: block;
  border-radius: var(--r);
  transition: opacity var(--t);
}
.line-foto:hover img { opacity: .85; }
/* der umfluss braucht einen eigenen block, sonst ragt das bild heraus */
.line-text, .hit-line { display: block; overflow: hidden; }

/* in den listen-vorschauen genügt ein kleines bild */
.entity-line-text .line-fotos { margin-left: var(--s2); }
.entity-line-text .line-foto img { height: 30px; }

/* ── fotoübersicht bei personen und orten ──────────────────────── */
.fotos-box { margin: var(--s5) 0 var(--s4); }
.fotos-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s2);
}
.fotos-kopf .ystrips-title { margin: 0; }
.fotos-aus-link {
  font: inherit; font-size: var(--meta-size);
  text-transform: uppercase; letter-spacing: var(--meta-ls);
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted);
  border-bottom: var(--bw) solid transparent;
  transition: color var(--t2), border-color var(--t2);
}
.fotos-aus-link:hover { color: var(--ink); border-bottom-color: currentColor; }

/* eine reihe – der rest ist verborgen, bis man aufklappt */
.fotos-reihe {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  max-height: 118px; overflow: hidden;
}
.fotos-reihe.ist-offen { max-height: none; }

.foto-kachel { position: relative; margin: 0; }
.foto-kachel img {
  height: 92px; width: auto; display: block;
  border-radius: var(--r);
}
.foto-kachel figcaption {
  margin-top: 2px;
  font-size: var(--meta-size); letter-spacing: .04em;
  color: var(--muted); text-align: center;
}
/* aus- und wieder einblenden erscheint erst bei annäherung */
.foto-aus, .foto-zurueck {
  position: absolute; top: var(--s1); right: var(--s1);
  width: 22px; height: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: .9rem; cursor: pointer;
  background: var(--bg); color: var(--ink);
  border: var(--bw) solid var(--line); border-radius: var(--r);
  opacity: 0; transition: opacity var(--t);
}
.foto-kachel:hover .foto-aus,
.foto-kachel:hover .foto-zurueck { opacity: 1; }
.foto-aus:hover, .foto-zurueck:hover { border-color: var(--ink); }

.fotos-mehr {
  margin-top: var(--s2);
  font: inherit; font-size: var(--meta-size);
  text-transform: uppercase; letter-spacing: var(--meta-ls);
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted);
  border-bottom: var(--bw) solid transparent;
  transition: color var(--t2), border-color var(--t2);
}
.fotos-mehr:hover { color: var(--ink); border-bottom-color: currentColor; }

/* overlay der ausgeblendeten */
.fotos-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: var(--veil); padding: 8vh 1rem 0;
}
.fotos-panel {
  max-width: 720px; margin: 0 auto;
  background: var(--surface); border-radius: var(--r);
  padding: var(--s4); max-height: 74vh; overflow-y: auto;
  box-shadow: 0 18px 50px var(--shadow);
}


/* ── „heute" als kleine pille mit pulsierendem punkt ───────────── */
.heute-pille {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--meta-size); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--meta-ls);
  color: var(--person);
  border: var(--bw) solid color-mix(in oklab, var(--person) 20%, transparent);
  border-radius: 999px;
  padding: 1px .5em 1px .45em;
  line-height: 1.4; white-space: nowrap;
}
/* im tagebuch sitzt sie sonst auf der grundlinie der wochentagszeile
   und wirkt dadurch abgesackt */
.day-head .heute-pille { transform: translateY(-2px); }
.heute-punkt {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--person);
  animation: heute-puls 2.6s ease-in-out infinite;
}
/* in der kalenderzelle ist es enger */
.cal-head-row .heute-pille {
  font-size: .58rem; letter-spacing: .06em;
  padding: 0 .4em 0 .35em; gap: .3em;
}
.cal-head-row .heute-punkt { width: 4px; height: 4px; }

/* kleine vorschaubilder in der kalenderzelle */
.cal-fotos {
  flex: none; display: flex; align-items: center;
  gap: 3px; margin-top: var(--s1); overflow: hidden;
}
.cal-foto {
  width: 22px; height: 22px; object-fit: cover;
  border-radius: 3px; display: block; flex: none;
}
/* mit bildreihe brauchen die zellen etwas mehr höhe */
.cal-grid.hat-fotos .cal-cell {
  min-height: calc(2.6rem + var(--cal-rows, 3) * 1.2rem + 26px);
}

/* kleines bild vor dem namen in der kalenderzelle */
.cal-ava {
  width: 14px; height: 14px; flex: none;
  border-radius: 50%; object-fit: cover;
  margin-right: .3em; align-self: center;
}
.cal-ava-ort { border-radius: 3px; }
.cal-ava-leer { background: var(--c, var(--person)); }













/* kopf eines themas: das quadrat trägt den anfangsbuchstaben */


/* ── startseite (öffentlich) ───────────────────────────────────── */
.lp-body { background: var(--bg); }
.lp-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); padding: var(--s4) var(--s5); max-width: 62rem; margin: 0 auto;
}
.lp-lang { display: flex; gap: var(--s3); font-size: var(--meta-size);
  text-transform: uppercase; letter-spacing: var(--meta-ls); }
.lp-lang a { color: var(--muted); text-decoration: none; line-height: 1.2;
  border-bottom: var(--bw) solid transparent; transition: color var(--t2), border-color var(--t2); }
.lp-lang a:hover { color: var(--ink); }
.lp-lang a.active { color: var(--ink); border-bottom-color: currentColor; }

.lp { max-width: 62rem; margin: 0 auto; padding: 0 var(--s5) var(--s7); }
.lp-hero { padding: var(--s7) 0 var(--s6); max-width: 40rem; }
.lp-h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.1;
  margin: 0 0 var(--s3); letter-spacing: -.01em;
}
.lp-h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.2;
  margin: 0 0 var(--s3);
}
.lp-h3 { font-size: .95rem; font-weight: 600; margin: 0 0 var(--s1); }
.lp-claim { font-size: 1.1rem; line-height: 1.6; color: var(--soft); margin: 0 0 var(--s4); }
.lp-hint  { font-size: .88rem; color: var(--muted); margin: var(--s3) 0 0; }

.lp-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin: 0; }
.lp-btn {
  display: inline-block; padding: var(--s2) var(--s5);
  background: var(--ink); color: var(--bg); text-decoration: none;
  border-radius: var(--r); font-size: .95rem; font-weight: 600;
  transition: background-color var(--t);
}
.lp-btn:hover { background: var(--ink-hover); }
.lp-cta-sub { font-size: var(--meta-size); text-transform: uppercase;
  letter-spacing: var(--meta-ls); color: var(--muted); }

/* das beispiel steht auf einer leise abgesetzten fläche */
.lp-demo { margin: var(--s6) 0; }
.lp-week {
  background: var(--sunk); border: var(--bw) solid var(--rule);
  border-radius: var(--r); padding: var(--s3) var(--s4);
}
.lp-week .day { cursor: default; }
.lp-week .day-body { cursor: default; }

.lp-features { margin: var(--s7) 0; display: flex; flex-direction: column; gap: var(--s5); }
.lp-row { display: flex; flex-wrap: wrap; gap: var(--s5); }
.lp-feat { flex: 1 1 15rem; }
.lp-feat p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--soft); }

.lp-end { margin: var(--s7) 0 0; max-width: 40rem; }
.lp-foot {
  margin-top: var(--s7); padding-top: var(--s4);
  border-top: var(--bw) solid var(--rule);
  font-size: var(--meta-size); text-transform: uppercase;
  letter-spacing: var(--meta-ls); color: var(--faint);
}

@media (max-width: 560px) {
  .lp, .lp-top { padding-left: var(--s4); padding-right: var(--s4); }
  .lp-hero { padding-top: var(--s5); }
}

/* die getippte fassung unter dem beispiel */
.lp-raw {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-top: var(--s2); flex-wrap: wrap;
}
.lp-raw-label {
  flex: none; font-size: var(--meta-size); text-transform: uppercase;
  letter-spacing: var(--meta-ls); color: var(--faint);
}
.lp-raw code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; color: var(--muted);
  background: var(--sunk); border: var(--bw) solid var(--rule);
  border-radius: var(--r); padding: 2px var(--s2);
}