/* ==========================================================================
   components.css — Aussehen der einzelnen Bausteine.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Karte — Milchglas. Tiefe entsteht durch Helligkeit, nicht durch Schatten.
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--glass);
  border: var(--border);
  border-radius: var(--radius-card);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  transition:
    background var(--dur-mid) var(--ease-soft),
    translate   var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-soft);
}

/* `translate` statt `transform`: die Eintrittsanimation card-enter läuft mit
   animation-fill-mode: both und hält danach ihren Endzustand `transform: none`
   fest. Animationswerte stehen in der Kaskade über normalen Deklarationen —
   ein transform hier bliebe wirkungslos. `translate` ist eine eigenständige
   Eigenschaft und wird von der transform-Animation nicht angefasst. */
.card:hover {
  background: var(--glass-hover);
  translate: 0 -3px;
  border-color: rgba(255, 255, 255, 0.19);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  min-height: 16px;
}

.card__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

.card__tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Kleine Bedienfläche in Kartenköpfen */
.iconbtn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft);
}
.iconbtn:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}
.iconbtn[aria-pressed="true"] { color: var(--prio-2); }
.iconbtn .ti { font-size: 16px; }

/* Feste Mindesthöhen — verhindern Nachspringen beim Laden. */
.card--calendar  { min-height: 300px; }
.card--fact      { min-height: 190px; }
.card--capital   { min-height: 132px; }
.card--flag      { min-height: 132px; }
.card--depot     { min-height: 168px; }
.card--news      { min-height: 168px; }

/* --------------------------------------------------------------------------
   Uhr
   -------------------------------------------------------------------------- */
.clock { display: flex; flex-direction: column; gap: 2px; }

.clock__time {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-weight: 400;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
}
.clock__colon { padding: 0 2px; }

.clock__date {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 8px;
}

.clock__greeting {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Wetter — sitzt frei, ohne eigene Karte.
   -------------------------------------------------------------------------- */
.weather {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: right;
  min-height: 46px;
  min-width: 168px;
  justify-content: flex-end;
}

.weather__icon {
  font-size: 30px;
  color: var(--ink-2);
  line-height: 1;
}

.weather__temp {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}

.weather__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.weather__word {
  font-size: 12px;
  color: var(--ink-3);
}

.weather__place {
  font-size: 11px;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Suche
   -------------------------------------------------------------------------- */
.search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--glass);
  border: var(--border);
  border-radius: var(--radius-control);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  padding: 0 14px;
  height: 46px;
  transition: background var(--dur-mid) var(--ease-soft),
              border-color var(--dur-mid) var(--ease-soft);
}
.search:focus-within {
  background: var(--glass-hover);
  border-color: rgba(143, 184, 255, 0.45);
}

.search__icon { color: var(--ink-4); font-size: 17px; margin-right: 10px; }

.search__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-size: 15px;
  color: var(--ink);
}
.search__input::placeholder { color: var(--ink-4); }

/* Zeigt den erkannten Präfix an: „YouTube“, „Wikipedia“ … */
.search__scope {
  font-size: 11px;
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  margin-right: 8px;
  white-space: nowrap;
}
.search__scope[hidden] { display: none; }

.search__hint {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--ink-4);
  border: var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Schnellzugriff — zwei Ebenen
   -------------------------------------------------------------------------- */
.ql { display: flex; flex-direction: column; gap: 10px; }

.ql__top { display: flex; align-items: flex-start; gap: 10px; }

.ql__tiles {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.ql__tools { display: flex; align-items: center; gap: 4px; flex: none; }

/* Schmale Schaltfläche rechts: Anzahl und Chevron. */
.ql__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  border: var(--border);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: var(--ink-3);
  font-size: 12px;
  white-space: nowrap;
  transition: background var(--dur-mid) var(--ease-soft),
              color var(--dur-mid) var(--ease-soft);
}
.ql__toggle:hover { background: var(--glass-hover); color: var(--ink); }
.ql__toggle[hidden] { display: none; }
.ql__chevron { font-size: 15px; transition: rotate var(--dur-mid) var(--ease-out); }
.ql__toggle[aria-expanded="true"] .ql__chevron { rotate: 180deg; }

/* Auf- und Zuklappen über grid-template-rows: 0fr → 1fr. Anders als bei
   max-height braucht das keinen geratenen Zielwert und läuft sauber aus. */
.ql__drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ql__drawer.is-open { grid-template-rows: 1fr; }
/* visibility zusätzlich zu overflow: sonst bliebe die eingeklappte Ebene mit
   dem Tabulator erreichbar und stünde im Vorlesebaum. Der Wechsel auf hidden
   wartet die 260 ms ab, damit das Zuklappen noch zu sehen ist. */
.ql__drawer > div {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear 260ms;
}
.ql__drawer.is-open > div { visibility: visible; transition-delay: 0s; }

.ql__groups { display: flex; flex-direction: column; gap: 8px; }
.ql__group { display: flex; align-items: center; gap: 10px; }
.ql__group-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 74px;
  flex: none;
}

.ql__note { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.ql__note[hidden] { display: none; }

/* --- Kachel --------------------------------------------------------------- */
.quicklink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px 0 12px;
  background: var(--glass);
  border: var(--border);
  border-radius: var(--radius-control);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: var(--ink-2);
  text-decoration: none;
  transition: transform var(--dur-mid) var(--ease-out),
              background var(--dur-mid) var(--ease-soft),
              border-color var(--dur-mid) var(--ease-soft);
}
.quicklink:hover {
  transform: translateY(-4px);
  background: var(--glass-hover);
  border-color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

/* Untere Ebene: rund 80 Prozent der oberen Größe. */
.quicklink--sm { height: 36px; padding: 0 13px 0 10px; gap: 7px; }

/* Zeichenfläche — nimmt Logo, Tabler-Icon oder Monogramm auf. */
.quicklink__glyph {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent, var(--ink-2));
  font-size: 19px;
  line-height: 1;
}
.quicklink--sm .quicklink__glyph { width: 18px; height: 18px; font-size: 16px; }

.quicklink__logo { width: 22px; height: 22px; display: block; fill: currentColor; }
.quicklink--sm .quicklink__logo { width: 18px; height: 18px; }

/* Monogramm für Marken ohne frei verwendbares Logo. Sieht bewusst anders aus
   als ein Logo — ein schlecht nachgebautes Markenzeichen wäre schlimmer. */
.quicklink__mono {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, var(--ink-2)) 18%, transparent);
  color: var(--accent, var(--ink-2));
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.quicklink__mono.is-wide { font-size: 9.6px; }
.quicklink--sm .quicklink__mono { width: 18px; height: 18px; font-size: 10px; }
.quicklink--sm .quicklink__mono.is-wide { font-size: 8px; }

.quicklink__label {
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}
.quicklink--sm .quicklink__label { font-size: 12px; }

.quicklink__key {
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--ink-4);
  margin-left: 2px;
}

/* Kategorie-Zeichen unten rechts. Immer Icon UND Farbe, nie Farbe allein:
   Netflix und YouTube sind beide rot und liegen nebeneinander im Raster. */
.quicklink__cat {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
}

/* Änderung ist lokal da, aber noch nicht in der Datenbank. */
.quicklink__unsynced {
  position: absolute;
  left: 4px;
  top: 3px;
  font-size: 9px;
  color: var(--prio-2);
}

/* Platzhalter-Links: sichtbar unfertig, aber nicht laut. */
.quicklink.is-placeholder {
  border-style: dashed;
  border-color: rgba(240, 180, 41, 0.4);
  opacity: 0.72;
}
.quicklink.is-placeholder .quicklink__label::after {
  content: ' · offen';
  color: var(--prio-2);
  font-size: 11px;
}

/* --- Bearbeiten-Modus ----------------------------------------------------- */
.ql.is-editing .ql__top,
.ql.is-editing .ql__groups {
  border: 0.5px dashed rgba(143, 184, 255, 0.42);
  border-radius: var(--radius-control);
  padding: 6px;
}
.ql.is-editing .quicklink { cursor: grab; }
.ql.is-editing .quicklink:hover { transform: none; }

.quicklink.is-dragging { opacity: 0.4; }

/* Die aktive Ablagefläche hebt sich beim Darüberziehen leicht hervor. */
.is-dropzone {
  background: rgba(143, 184, 255, 0.1);
  border-radius: var(--radius-control);
  outline: 1px solid rgba(143, 184, 255, 0.35);
}

.quicklink__del {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(16, 18, 28, 0.96);
  border: var(--border);
  color: var(--loss);
  font-size: 10px;
  z-index: 2;
}
.quicklink__del:hover { background: rgba(255, 138, 107, 0.22); }

.quicklink--add {
  border-style: dashed;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ink-3);
}
.quicklink--add:hover { color: var(--ink); transform: none; }

@media (max-width: 640px) {
  .quicklink { padding: 0 8px; justify-content: center; }
  .quicklink__label { font-size: 12px; }
  .quicklink__key { display: none; }
}

/* --------------------------------------------------------------------------
   Kalender
   -------------------------------------------------------------------------- */
.cal { position: relative; }

.cal__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  flex: 1;
  padding-right: 4px;
  margin-right: -4px;
}

.cal__today-strip {
  display: flex;
  width: 100%;
  text-align: left;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  margin-bottom: 10px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.07);
  border: var(--border);
  border-left: 3px solid var(--prio, var(--prio-3));
  font-size: 13px;
  color: var(--ink);
}
.cal__today-label {
  font-weight: 500;
  color: var(--ink);
}
.cal__today-sep { color: var(--ink-4); }
.cal__today-meta { color: var(--ink-3); font-family: var(--font-data); font-size: 12px; }

.cal__empty {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 120px;
  color: var(--ink-3);
  font-size: 13px;
}

/* --- Terminzeile ---------------------------------------------------------
   Drei unabhängige Merkmale: Streifenfarbe, Symbolform, Flächenhelligkeit.
   Jedes allein genügt zur Unterscheidung der Stufe.

   Die Zeile ist ein <div>, nicht mehr ein <button>: In ihr stecken eigene
   Bedienelemente (Kästchen, Maps-Verknüpfung), und ein <a> oder <button> in
   einem <button> ist kein gültiges HTML. Die Fläche klickbar macht
   .event__hit, eine randlose Schaltfläche unter dem Inhalt.                  */
.event {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px 8px 12px;
  border-radius: var(--radius-control);
  border: var(--border);
  border-left: 3px solid var(--prio);
  background: var(--prio-wash);
  transition: background var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-out);
}
.event:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateX(2px);
}

/* Geschätztes Datum: andere Linienart, kein weiterer Farbton. Muss auch bei
   Rot-Grün-Schwäche erkennbar bleiben. */
.event.is-estimated { border-left-style: dashed; }

.event__hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: none;
}

/* Inhalt liegt über der Trefferfläche, lässt Klicks aber durch. Nur die
   echten Bedienelemente fangen sie ab. */
.event__glyph,
.event__main,
.event__side {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.event__check,
.event__pin { position: relative; z-index: 1; pointer-events: auto; }

/* Kästchen zum Abhaken einer Frist */
.event__check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 5px;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft);
}
.event__check:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
.event__check .ti { font-size: 15px; }
.event__check[aria-checked="true"] { color: var(--prio-3); }

/* Abgehakt: zwei Sekunden durchgestrichen stehen lassen, dann verschwinden.
   In der Monatsansicht bleibt die Zeile so stehen. */
.event.is-done { opacity: 0.55; }
.event.is-done .event__title { text-decoration: line-through; }

.event__glyph {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1;
  color: var(--prio);
  width: 12px;
  flex: none;
  text-align: center;
}

.event__main { min-width: 0; flex: 1; }

.event__title {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event__meta .dot { color: var(--ink-4); }

.event__countdown {
  color: var(--prio-1);
  font-weight: 500;
}
/* Fristen tragen den Countdown immer; in Prioritätsfarbe statt in Alarmrot,
   sonst schriee jede Frist gleich laut. */
.event--frist .event__countdown { color: var(--prio); }

/* Geschätztes Datum auch im Klartext, nicht nur über die Linienart. */
.event__approx {
  color: var(--ink-3);
  font-style: italic;
}

/* Maps-Verknüpfung: gedämpft, wird beim Überfahren der Zeile heller. */
.event__pin {
  display: inline-grid;
  place-items: center;
  color: var(--ink-4);
  font-size: 13px;
  border-radius: 4px;
  padding: 1px;
  margin-left: -2px;
  transition: color var(--dur-fast) var(--ease-soft);
}
.event:hover .event__pin { color: var(--ink-3); }
.event__pin:hover { color: var(--link); text-decoration: none; }

.event__side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--ink-3);
}
/* Kategorie bewusst neutral gefärbt — sie darf sich nicht mit der
   Prioritätsachse vermischen. */
.event__cat { font-size: 15px; color: var(--ink-3); }
.event__repeat { font-size: 12px; color: var(--ink-3); }
/* Herkunftszeichen für Einträge aus DFBnet und DFL. Sehr klein, sehr leise. */
.event__source { font-size: 11px; color: var(--ink-3); opacity: 0.75; }

/* --- Monatsansicht -------------------------------------------------------- */
.month {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}

.month__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.month__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.month__nav { display: flex; gap: 2px; }

.month__weekdays,
.month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.month__weekdays span {
  text-align: center;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--ink-3);
  padding-bottom: 2px;
}

.day {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 30px;
  border-radius: 8px;
  border: 0.5px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-soft);
}
.day:hover { background: rgba(255, 255, 255, 0.09); }
.day.is-outside { color: var(--ink-4); opacity: 0.42; }
.day.is-today {
  border-color: var(--link);
  color: var(--ink);
}
.day.is-selected { background: rgba(143, 184, 255, 0.18); }

.day__dots {
  display: flex;
  gap: 2px;
  height: 4px;
  align-items: center;
}
.day__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--prio-3);
}

/* Vorlaufbalken einer Frist — zeigt, in welchen Wochen Druck liegt.
   Am unteren Rand der Tageszelle, damit er die Ziffer nicht stört. */
.day__bars {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.day__bar {
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--bar, var(--prio-3)) 25%, transparent);
}
/* Geschätztes Datum: gestrichelt statt eingefärbt. */
.day__bar.is-estimated {
  background: repeating-linear-gradient(
    to right,
    color-mix(in srgb, var(--bar, var(--prio-3)) 25%, transparent) 0 4px,
    transparent 4px 7px
  );
}
.day__bar.is-done { opacity: 0.5; }
/* Platzhalter einer nicht belegten Spur — hält den Balken auf seiner Zeile. */
.day__bar.is-empty { visibility: hidden; }

.month__detail {
  border-top: var(--border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 172px;
}
.month__detail-title {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 2px;
}

/* --- Formular ------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 11px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field__label {
  font-size: 11px;
  color: var(--ink-3);
}
/* Ruhiger Hinweis unter einem Feld — keine Fehlerfarbe, keine Ausrufezeichen. */
.field__hint {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
  word-break: break-all;
}
.field__hint[hidden] { display: none; }

.field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.input,
.select {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.06);
  border: var(--border);
  border-radius: var(--radius-control);
  color: var(--ink);
  font-size: 13px;
  transition: border-color var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft);
}
.input:hover, .select:hover { background: rgba(255, 255, 255, 0.09); }
.input:focus, .select:focus { border-color: var(--link); }
.input::placeholder { color: var(--ink-4); }

/* Dunkle Auswahllisten — sonst zeigt Chrome weiße Einträge. */
.select option { background: #14161F; color: var(--ink-2); }

/* Auswahl als Segmentleiste: Symbol + Wort, nicht nur Farbe. */
.segs { display: flex; gap: 5px; flex-wrap: wrap; }
.seg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: var(--radius-control);
  border: var(--border);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: var(--ink-3);
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.seg:hover { background: rgba(255, 255, 255, 0.09); }
.seg[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--seg-color, var(--link));
  background: var(--seg-wash, rgba(143, 184, 255, 0.16));
}
.seg__glyph { color: var(--seg-color, var(--ink-3)); font-size: 11px; }
.seg .ti { font-size: 14px; }

/* Termin oder Frist — die Entscheidung ganz oben, deshalb breiter. */
.segs--type { display: grid; grid-template-columns: 1fr 1fr; }
.segs--type .seg { justify-content: center; padding: 8px 10px; }

.form__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.form__spacer { flex: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  border: var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-2);
  font-size: 13px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--ink); text-decoration: none; }
.btn .ti { font-size: 14px; }

.btn--primary {
  background: rgba(143, 184, 255, 0.18);
  border-color: rgba(143, 184, 255, 0.45);
  color: var(--ink);
}
.btn--primary:hover { background: rgba(143, 184, 255, 0.28); }

.btn--danger {
  color: var(--loss);
  border-color: rgba(255, 138, 107, 0.4);
}
.btn--danger:hover { background: rgba(255, 138, 107, 0.16); color: var(--ink); }

.btn--ghost { background: none; border-color: transparent; color: var(--ink-3); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* --------------------------------------------------------------------------
   Einblendung über einer Karte
   -------------------------------------------------------------------------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border-radius: var(--radius-card);
  background: rgba(11, 12, 20, 0.93);
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  border: var(--border);
}

.overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.overlay__title { font-size: 13px; font-weight: 500; color: var(--ink); }
.overlay__body { flex: 1; min-height: 0; }

/* --------------------------------------------------------------------------
   Freistehendes Fenster — für den Schnellzugriff, der keine Karte hat und
   über die sich .overlay legen könnte.
   -------------------------------------------------------------------------- */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 7, 13, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal {
  width: min(460px, 100%);
  max-height: min(82vh, 660px);
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border-radius: var(--radius-card);
  background: rgba(11, 12, 20, 0.97);
  border: var(--border);
  animation: overlay-in var(--dur-mid) var(--ease-out) both;
}

/* Menü beim langen Antippen auf Touchgeräten */
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu__item {
  text-align: left;
  padding: 11px 12px;
  border-radius: var(--radius-control);
  font-size: 14px;
  color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-soft);
}
.menu__item:hover { background: rgba(255, 255, 255, 0.09); color: var(--ink); }
.menu__item--danger { color: var(--loss); }

/* Icon-Auswahl im Link-Formular */
.icongrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 5px;
  max-height: 148px;
  overflow-y: auto;
}
.icongrid__item {
  display: grid;
  place-items: center;
  height: 34px;
  border-radius: 8px;
  border: var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-3);
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.icongrid__item:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.icongrid__item[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--link);
  background: rgba(143, 184, 255, 0.18);
}
.icongrid__item .ti { font-size: 17px; }

/* Fremdquelle ansehen — kein Formular, weil hier nichts zu ändern ist. */
.view { display: flex; flex-direction: column; gap: 9px; }
.view__title { font-size: 15px; color: var(--ink); line-height: 1.35; }
.view__row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  align-items: baseline;
}
.view__label { font-size: 11px; color: var(--ink-3); }
.view__value { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.view__hint {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  padding-top: 4px;
  border-top: var(--border);
}

/* Rückfrage beim Löschen einer Serie */
.confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.confirm__text { font-size: 13px; color: var(--ink-2); }
.confirm__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------------------
   Wissen — Fakt
   -------------------------------------------------------------------------- */
.fact { position: relative; }

.fact__counter {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-3);
}

.fact__body {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}

.fact__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
}

.fact__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: var(--border);
}

.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-3);
  border-radius: 6px;
  padding: 3px 6px;
  margin: -3px -6px;
  transition: color var(--dur-fast) var(--ease-soft);
}
.linkbtn:hover { color: var(--ink); text-decoration: none; }
.linkbtn .ti { font-size: 14px; }
.linkbtn[aria-pressed="true"] { color: var(--prio-2); }

.fact__nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }

/* --------------------------------------------------------------------------
   Wissen — Hauptstadt
   -------------------------------------------------------------------------- */
.capital__body,
.flag__body { display: flex; flex-direction: column; }
.capital__body { flex: 1; justify-content: center; }

.capital__country {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.capital__city {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.capital__note {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Wissen — Flagge
   -------------------------------------------------------------------------- */
.flag__stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  overflow: hidden;
}
/* Rahmen und Rundung, weil Flaggen mit weißen Rändern sonst im dunklen Glas
   verschwinden — Japan, Polen, Schweiz. */
.flag__svg {
  width: 92px;
  height: auto;
  max-height: 62px;
  border-radius: 4px;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  display: block;
}
.flag__country {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 10px;
}
.flag__note {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Favoritenansicht
   -------------------------------------------------------------------------- */
.favs { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.favs__group-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.fav {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  border: var(--border);
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 6px;
}
.fav__main { min-width: 0; }
.fav__text { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.fav__region { font-size: 10px; color: var(--ink-3); margin-top: 3px; }
.fav__tools { display: flex; gap: 2px; }
.favs__empty { color: var(--ink-3); font-size: 13px; padding: 10px 0; }

/* Regionsfilter über den Gruppen */
.favs__filter { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: var(--border);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  color: var(--ink-3);
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.chip:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.chip[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--link);
  background: rgba(143, 184, 255, 0.18);
}

/* --------------------------------------------------------------------------
   Depot
   -------------------------------------------------------------------------- */
.card__ext { font-size: 14px; color: var(--ink-4); }

/* Die ganze Karte führt zum Depot. */
.depot__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  color: inherit;
  text-decoration: none;
}
.depot__link:hover { text-decoration: none; }
.depot__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.depot__value {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
}

.depot__change {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  margin-top: 4px;
}
/* Pfeil ist Pflicht — die Farbe allein darf nie den Unterschied tragen. */
.depot__change[data-dir="up"]   { color: var(--gain); }
.depot__change[data-dir="down"] { color: var(--loss); }
.depot__change[data-dir="flat"] { color: var(--ink-3); }
.depot__arrow { font-size: 11px; }

.depot__spark {
  margin-top: auto;
  padding-top: 10px;
  width: 100%;
  height: 54px;
  display: block;
}
.depot__path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Ruhiger Ruhezustand: eine Karte, die noch keine Quelle hat, sagt das in
   einem Satz — statt einer Fehlermeldung oder eines leeren Rahmens. */
.card__idle {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Nachrichten
   -------------------------------------------------------------------------- */
.news__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1;
}

.news__item {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  border: var(--border);
  background: rgba(255, 255, 255, 0.03);
  transition: background var(--dur-fast) var(--ease-soft);
}
.news__item:hover { background: rgba(255, 255, 255, 0.09); text-decoration: none; }

.news__title {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Fußzeile — Bildnachweis und Zitat
   -------------------------------------------------------------------------- */
.credit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 46%;
  min-height: 30px;
}
.credit__title {
  font-size: 12px;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-soft);
}
a.credit:hover .credit__title { color: var(--ink); }
a.credit { text-decoration: none; }
a.credit:hover { text-decoration: none; }
.credit__by {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--ink-3);
}

.quote {
  max-width: 46%;
  text-align: right;
  min-height: 30px;
}
.quote__figure { position: relative; }
.quote__text {
  font-family: var(--font-voice);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-3);
}
.quote__author {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
}

/* Der Stern erscheint erst beim Überfahren — die Fußzeile soll ruhig bleiben. */
.quote__star {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.quote:hover .quote__star,
.quote__star:focus-visible,
.quote__star[aria-pressed="true"] { opacity: 1; }
.quote__star:hover { color: var(--ink); }
.quote__star[aria-pressed="true"] { color: var(--prio-2); }
.quote__star .ti { font-size: 13px; }

/* Einordnung des Autors. Steht unter dem Zitat, in der Fußzeilenluft. */
.quote__note {
  position: absolute;
  top: calc(100% + 3px);
  right: 0;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ink-3);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft);
  pointer-events: none;
}
.quote:hover .quote__note,
.quote:focus-within .quote__note,
.quote__figure.is-noted .quote__note { opacity: 1; }

/* Touchgeräte: antippen statt überfahren, deshalb sichtbar als tippbar. */
.quote__figure.is-tappable { cursor: pointer; }

@media (max-width: 1000px) {
  .credit, .quote { max-width: 100%; text-align: left; }
  .quote__author { justify-content: flex-start; }
  .quote__note { right: auto; left: 0; white-space: normal; }
}

/* --------------------------------------------------------------------------
   Tabler-Icons — Webfont
   -------------------------------------------------------------------------- */
.ti {
  font-family: 'tabler-icons', sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  speak: none;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}