/* ==========================================================================
   Schriften — selbst ausgeliefert aus public/fonts/

   Frueher kamen sie von fonts.googleapis.com. Das bedeutete: jeder Aufruf der
   Seite meldete den Besucher bei Google an, ohne Netz fiel die Schrift auf
   Georgia/Arial zurueck, und die CSP musste zwei fremde Hosts erlauben.
   Jetzt liegen die woff2-Teilmengen im Ordner nebenan (SIL OFL 1.1, siehe
   fonts/OFL.txt). Beides sind variable Schriften: eine Datei je Zeichensatz
   deckt den ganzen Strichstaerkenbereich ab, der Browser holt ueber
   unicode-range nur, was die Seite wirklich braucht.
   ========================================================================== */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/fraunces-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/libre-franklin-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/libre-franklin-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/libre-franklin-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/libre-franklin-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/libre-franklin-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Feedboard — Editorial-Design
   ========================================================================== */

:root {
  /* Sagt dem Browser, wie er seine eigenen Bestandteile zeichnen soll:
     Scrollbalken, Eingabefeld-Chrome, Textcursor, Autofill-Hintergrund. */
  color-scheme: light;
  --bg: #f6f2ea;
  --surface: #fffdf8;
  --surface-raised: #fffefb;
  --ink: #1c1914;
  --muted: #625b4e;
  --faint: #7a7263;
  --line: #e4ddce;
  --line-strong: #cfc5b0;
  --accent: #b3341e;
  --accent-ink: #fffdf8;
  --accent-soft: rgba(179, 52, 30, 0.08);
  --ok: #3c7a45;
  --warn: #a15c00;
  --shadow: 0 1px 2px rgba(38, 30, 18, 0.05), 0 8px 28px -14px rgba(38, 30, 18, 0.18);
  --shadow-pop: 0 12px 34px -10px rgba(38, 30, 18, 0.42);
  --shadow-hover: 0 1px 2px rgba(38, 30, 18, 0.05), 0 14px 34px -16px rgba(38, 30, 18, 0.34);
  --shadow-sheet: 0 -8px 40px -8px rgba(0, 0, 0, 0.4);
  --texture-dot: rgba(120, 100, 70, 0.05);
  --backdrop: rgba(20, 15, 8, 0.5);
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Libre Franklin', 'Segoe UI', Arial, sans-serif;
}

/* Dunkel = OLED-Schwarz: echter schwarzer Hintergrund, Flächen nur minimal
   angehoben, Graustufen neutral (kein Warmstich auf Schwarz). */
html[data-theme='dark'] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-raised: #101010;
  --ink: #e8e8e8;
  --muted: #9a9a9a;
  --faint: #7d7d7d;
  --line: #1e1e1e;
  --line-strong: #2f2f2f;
  --accent: #e25638;
  --accent-ink: #0a0503;
  --accent-soft: rgba(226, 86, 56, 0.14);
  --ok: #6fae78;
  --warn: #d89b45;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 10px 30px -14px rgba(0, 0, 0, 0.8);
  /* Auf Schwarz trägt ein Schlagschatten nicht mehr — schwebende Elemente
     bekommen ihre Höhenwirkung stattdessen über eine feine helle Kante. */
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 12px 34px -10px rgba(0, 0, 0, 0.9);
  --shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 14px 34px -16px rgba(0, 0, 0, 0.9);
  --shadow-sheet: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 -8px 40px -8px rgba(0, 0, 0, 0.9);
  --texture-dot: transparent;
  --backdrop: rgba(0, 0, 0, 0.72);
}

* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(var(--texture-dot) 1px, transparent 1px);
  background-size: 26px 26px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input[type='text'],
input[type='url'] {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input[type='text']:focus,
input[type='url']:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.hidden { display: none !important; }

/* Ein Element mit hidden bleibt verborgen — auch wenn seine Klasse ein display
   setzt. Die Vorgabe des Browsers (display:none) verliert sonst gegen jede
   Klassenregel, was hier mehrfach passiert ist und zuletzt die Basis-URL bei
   jedem KI-Anbieter zeigte. Deshalb einmal zentral statt je Klasse. */
[hidden] { display: none !important; }

/* Hintergrund still, solange ein Fenster offen ist */
body.dialog-open { overflow: hidden; }

/* ==========================================================================
   Masthead (Zeitungskopf)
   ========================================================================== */

.masthead {
  border-bottom: 3px double var(--line-strong);
  background: var(--surface);
}

.masthead-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 14px 24px 16px;
}

.masthead-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.masthead-status { font-variant-numeric: tabular-nums; }

.masthead-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.masthead-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.5vw, 44px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.masthead-title::first-letter { color: var(--accent); }

/* ==========================================================================
   Toolbar
   ========================================================================== */

/* Umbrechen statt überlaufen: seit Stift und Design in der Leiste stehen,
   passt sie auf schmalen Schirmen nicht mehr in eine Zeile. */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---- Einstellungen als Dialog ----------------------------------------
   Fruher ein 260px-Aufklapper am Zahnrad. Mit Zugangsdaten, Zeitplan und
   Tastaturuebersicht war das nicht mehr zu halten, deshalb ein Fenster mit
   Bereichsnavigation — auf schmalen Schirmen als Vollbild. */

.icon-gear { transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1); }
#btn-settings[aria-expanded='true'] .icon-gear { transform: rotate(120deg); }
#btn-settings[aria-expanded='true'] { border-color: var(--accent); color: var(--accent); }

.dialog { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }

.dialog-backdrop { position: absolute; inset: 0; background: var(--backdrop); animation: fade-in 0.15s ease-out; }

.dialog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(640px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: dialog-in 0.18s cubic-bezier(0.22, 0.9, 0.3, 1);
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.dialog-title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; }

.dialog-close {
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
}
.dialog-close:hover { color: var(--accent); border-color: var(--line-strong); }

.dialog-body { display: flex; min-height: 0; flex: 1 1 auto; }

/* Fußzeile des Einstellungsfensters: Fassung, Lizenz, Quellcode. flex: 0 0 auto,
   damit sie auf dem Handy nicht weggedrückt wird, wenn die Panes lang werden. */
.dialog-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.dialog-foot-name { margin-right: auto; }
.dialog-foot-link { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.dialog-foot-link:hover { color: var(--accent); border-bottom-color: currentColor; }

.dialog-nav {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.dialog-nav-btn {
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.dialog-nav-btn:hover { color: var(--ink); background: var(--surface-raised); }
.dialog-nav-btn.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.dialog-panes { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 20px; }
.dialog-pane { display: none; flex-direction: column; gap: 14px; }
.dialog-pane.is-active { display: flex; }

/* Auf schmalen Schirmen: Vollbild, Navigation als Reiterzeile oben */
@media (max-width: 620px) {
  .dialog { padding: 0; }
  .dialog-card { width: 100%; max-height: 100%; height: 100%; border: none; border-radius: 0; }
  .dialog-body { flex-direction: column; }
  .dialog-nav {
    flex: 0 0 auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
  }
  .dialog-nav-btn { white-space: nowrap; }
}


/* ---- Einstellungs-Panel: Zeilen, Segmente, Schalter, Textfeld ---- */
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-section { display: flex; flex-direction: column; gap: 7px; }
/* display: flex würde sonst das hidden-Attribut aushebeln (KI, Abmelden) */
.settings-label { font-size: 12px; color: var(--muted); font-weight: 600; }

.seg {
  display: inline-flex;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
}
.seg-btn {
  border: none;
  background: none;
  color: var(--muted);
  padding: 5px 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line-strong); }
.seg-btn:hover { color: var(--accent); }
.seg-btn.active { background: var(--accent); color: var(--accent-ink); }
.seg-font-s { font-size: 11px; }
.seg-font-m { font-size: 13px; }
.seg-font-l { font-size: 16px; }

.settings-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.settings-toggle input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.settings-textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 7px 9px;
  outline: none;
}
.settings-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.settings-save { align-self: flex-start; padding: 6px 14px; }

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
}

.tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.tool-btn:active { transform: scale(0.97); }
.tool-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tool-btn-icon { padding: 8px 10px; }

/* Programm-Aktionen (Bearbeiten, Design, Einstellungen) treten hinter die
   Aktionen am Inhalt zurück: keine Umrandung, gedämpfte Farbe. Beim Überfahren
   verhalten sie sich wie die übrigen Knöpfe. */
.tool-btn-quiet { background: none; border-color: transparent; color: var(--faint); }
.tool-btn-quiet:hover { border-color: var(--line-strong); }

.tool-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 3px;
  background: var(--line);
  flex: none;
}

.icon { width: 16px; height: 16px; display: block; }

/* Kleinere Abstufungen für Symbole in Knöpfen. Standen frueher als
   style-Attribut im erzeugten HTML — die CSP verbietet Inline-Stile. */
.icon-13 { width: 13px; height: 13px; }
.icon-14 { width: 14px; height: 14px; }
.icon-15 { width: 15px; height: 15px; }

.icon-refresh { transition: transform 0.4s; }
.tool-btn.spinning .icon-refresh { animation: spin 0.9s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

html[data-theme='dark'] .icon-sun { display: none; }
html:not([data-theme='dark']) .icon-moon { display: none; }

/* ==========================================================================
   Edit-Leiste
   ========================================================================== */

.edit-bar {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
}

.edit-bar-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.edit-bar-hint { font-size: 13px; color: var(--muted); }

.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }

/* Anker-/Slug-Feld mit vorangestelltem #/ */
.slug-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 8px 0 10px;
}

.slug-affix {
  color: var(--faint);
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}

.slug-field input {
  border: none;
  background: none;
  padding: 7px 2px;
  width: 140px;
}

.slug-field input:focus { box-shadow: none; }
.slug-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.btn {
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  transition: filter 0.15s, transform 0.1s, border-color 0.15s, color 0.15s;
}

.btn:hover { filter: brightness(1.03); border-color: var(--accent); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: wait; }

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn-accent:hover { border-color: var(--accent); filter: brightness(1.08); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  padding: 4px 6px;
}

.btn-ghost:hover { color: var(--accent); border-color: transparent; filter: none; }

.btn-danger:hover { color: #fff; background: var(--accent); border-color: var(--accent); }

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

.board {
  max-width: 1680px;
  margin: 0 auto;
  padding: 22px 24px 60px;
  display: grid;
  /* auto-fit statt auto-fill: bei zwei Rubriken bleibt sonst eine leere Spur
     stehen und rechts klafft ein Loch. auto-fit faltet leere Spuren zusammen.
     Die Obergrenze hält die Kacheln dabei in Form — ohne sie zöge eine einzelne
     Rubrik ihre Kachel über die volle Breite. */
  grid-template-columns: repeat(auto-fit, minmax(min(370px, 100%), 480px));
  justify-content: center;
  gap: 20px;
  align-items: start;
}

@media (max-width: 480px) {
  .board { grid-template-columns: 1fr; padding: 16px 12px 60px; }
  .masthead-inner { padding: 12px 14px; }
  .edit-bar-inner { padding: 10px 14px; }
  .tool-label { display: none; }
  .tool-btn { padding: 8px 10px; }
}

/* Detailansicht einer Rubrik: breiter Bereich, Feeds im Raster */
.board.board--detail {
  display: block;
  max-width: 1500px;
}

/* ---- Rubrik-Kachel (Startseite), zentriert mit optionalem Logo ---- */

.category-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  padding: 24px 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  animation: card-in 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.category-tile:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-hover);
}

/* Seit dem Umbau ein <button>: das Klickziel muss mit der Tastatur erreichbar
   sein. Deshalb hier die übliche Zurücksetzung der Knopf-Eigenschaften. */
.category-tile-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  flex: 1;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.category-tile-body:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 6px;
}

/* Der Knopf füllt nur den Inhaltsbereich, klickbar war früher aber die ganze
   Kachel samt Polsterung. Diese Fläche legt das Klickziel wieder über die
   gesamte Kachel, ohne die Werkzeuge darin zu verdecken. */
.category-tile-body::after {
  content: '';
  position: absolute;
  inset: 0;
}
.category-tile .category-tools { z-index: 1; }

/* Jüngste Schlagzeile der Rubrik — gibt der Kachel einen Inhalt statt nur
   Name und Feed-Zahl. */
.category-tile-latest {
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--muted);
  max-width: 36ch;
  margin-top: -2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-logo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--surface-raised);
}

.category-tile-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.category-tile-count {
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.category-tile .category-tools {
  position: absolute;
  top: 10px;
  right: 10px;
}

body.edit-mode .category-tile {
  cursor: default;
  outline: 1.5px dashed var(--line-strong);
  outline-offset: 3px;
}

body.edit-mode .category-tile:hover {
  transform: none;
}

/* ---- Bearbeiten-Panel einer Rubrik ---- */

.category-tile.editing {
  cursor: default;
  outline: none;
  text-align: left;
  align-items: stretch;
  padding: 16px;
}

body.edit-mode .category-tile.editing:hover { transform: none; box-shadow: var(--shadow); }

.category-edit { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.edit-field { display: flex; flex-direction: column; gap: 5px; }

.edit-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.category-edit input[type='text'] { width: 100%; }
.category-edit .slug-field { width: 100%; }
.category-edit .slug-field input { flex: 1; width: auto; }

.edit-logo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.edit-logo-preview { width: 48px; height: 48px; }

.edit-logo-empty {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  flex-shrink: 0;
}

.edit-actions { display: flex; gap: 8px; margin-top: 2px; }

.btn-danger-outline {
  border-color: var(--accent);
  color: var(--accent);
  background: none;
}
.btn-danger-outline:hover { background: var(--accent-soft); }

/* ---- Detailansicht: Rubrik als schlichter Rahmen, Feeds als Karten ---- */

.category.category-open {
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
  animation: none;
}

.category-open .category-header {
  padding-left: 4px;
  padding-right: 4px;
}

.feeds-grid {
  display: grid;
  /* Feste drei Spalten hinterließen bei zwei Feeds eine leere dritte. auto-fit
     nimmt so viele Spalten, wie bei 340 px Mindestbreite hineinpassen, und
     verteilt sie auf die vorhandenen Feeds — die Umbrüche ergeben sich damit von
     selbst, die Media Queries dafür sind weggefallen. Die Obergrenze von 620 px
     verhindert dabei das Gegenteil: bei nur zwei Feeds würden sich die Spalten
     sonst über die volle Breite dehnen und die Zeilen zu lang werden. */
  /* min(340px, 100%) statt 340px: auf einem schmalen Telefon wäre die Spalte
     sonst breiter als der Bildschirm und die Seite liefe seitlich über. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 620px));
  justify-content: center;
  gap: 18px;
  padding: 20px 0;
  align-items: start;
}

.feeds-grid .feed {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ---- Zurück-Button in der Detailansicht ---- */

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 7px;
  margin-right: 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-back:hover {
  color: var(--ink);
  background: var(--accent-soft);
  border-color: var(--line);
}

/* ---- Rubrik-Karte ---- */

.category {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: card-in 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px 11px;
  border-bottom: 2px solid var(--ink);
}

.category-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.15;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.category-title::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--accent);
  margin-right: 9px;
  transform: rotate(45deg) translateY(-2px);
}

.category-count {
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.category-tools { display: none; gap: 2px; }
body.edit-mode .category-tools { display: flex; }
body.edit-mode .category { outline: 1.5px dashed var(--line-strong); outline-offset: 3px; }

/* ---- Feed-Block ---- */

.feed { border-bottom: 1px solid var(--line); }
.feed:last-child { border-bottom: none; }

.feed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 7px;
}

.feed-favicon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

.feed-favicon-fallback {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.feed-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-name:hover { color: var(--accent); }

.feed-error {
  color: var(--warn);
  font-size: 13px;
  cursor: help;
  flex-shrink: 0;
}

.feed-tools { display: none; gap: 2px; }
body.edit-mode .feed-tools { display: flex; }

/* ---- Artikel ---- */

.articles { list-style: none; margin: 0; padding: 2px 0 8px; }

.article { padding: 0 16px; }

.article-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4.5px 0;
  cursor: default;
}

.article.expandable .article-row { cursor: pointer; }

.article-time {
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  width: 58px;
}

/* Frische Artikel standen in Akzentfarbe und fett — zusammen mit der roten
   Ungelesen-Marke direkt daneben waren das zwei laute Elemente vor jeder
   Schlagzeile. Jetzt nur noch eine leichte Hervorhebung in Grau. */
.article-fresh .article-time { color: var(--muted); font-weight: 600; }

.article-title {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Auf zwei Zeilen begrenzt: vorher liefen Titel über eine bis drei Zeilen und
   der Zeilenrhythmus der Spalte wurde unruhig. Erst ab Tablet-Breite — auf dem
   Telefon steht ohnehin nur eine Spalte, dort gibt es keinen Rhythmus zu retten
   und die Begrenzung würde nur Überschriften abschneiden. */
@media (min-width: 700px) {
  .article-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.article-title:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.article-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--faint);
  transition: transform 0.2s;
  width: 12px;
  height: 12px;
  align-self: center;
}

.article.expanded .article-chevron { transform: rotate(180deg); }

.article-summary {
  display: none;
  margin: 2px 0 8px 68px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
}

.article.expanded .article-summary { display: block; animation: summary-in 0.18s ease-out; }

@keyframes summary-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .article-summary { margin-left: 0; }
}

.articles-more {
  display: block;
  width: calc(100% - 32px);
  margin: 2px 16px 6px;
  padding: 5px;
  background: none;
  border: none;
  border-top: 1px dotted var(--line-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.articles-more:hover { color: var(--accent); }

.feed-empty,
.category-empty {
  padding: 10px 16px 14px;
  font-size: 13px;
  color: var(--faint);
  font-style: italic;
}

/* ---- Feed-Hinzufügen-Formular (Edit-Mode) ---- */

.feed-add {
  display: none;
  padding: 12px 16px 14px;
  border-top: 1px dashed var(--line-strong);
  background: var(--accent-soft);
}

body.edit-mode .feed-add { display: block; }

/* In der breiten Detailansicht das Hinzufügen-Formular als eigene Karte oben */
.category-open .feed-add {
  max-width: 520px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 16px 0 4px;
}

.feed-add-form { display: flex; flex-direction: column; gap: 7px; }
.feed-add-form input { width: 100%; }

.feed-add-row { display: flex; gap: 7px; }
.feed-add-row input { flex: 1; min-width: 0; }

.feed-add-hint { font-size: 11.5px; color: var(--faint); }

/* ---- Inline-Umbenennen ---- */

.rename-form { display: flex; gap: 6px; flex: 1; min-width: 0; }
.rename-form input { flex: 1; min-width: 0; font-size: 14px; padding: 4px 8px; }

/* ==========================================================================
   Empty State
   ========================================================================== */

.board-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 70px 20px;
  color: var(--muted);
}

.board-empty h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--ink);
  margin: 0 0 10px;
}

.board-empty p { margin: 0 0 22px; }

/* ==========================================================================
   Artikel-Vorschau (Hover)
   ========================================================================== */

.article-preview {
  position: fixed;
  z-index: 1000;
  width: max-content;
  max-width: 320px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  pointer-events: none;
  animation: preview-in 0.12s ease-out;
}

@keyframes preview-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.article-preview-img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  background: var(--surface);
}

.article-preview-text {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast-container {
  position: fixed;
  bottom: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  max-width: min(380px, calc(100vw - 36px));
}

.toast {
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow);
  animation: toast-in 0.25s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.toast-error { background: var(--accent); color: var(--accent-ink); }

.toast.leaving { animation: toast-out 0.25s ease-in forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

/* ==========================================================================
   Suche, Lese-Status, PWA-Sheet
   ========================================================================== */

/* ---- Suchfeld in der Kopfleiste ---- */
.search-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0 8px 0 12px;
  min-width: 180px;
  flex: 1 1 200px;
  max-width: 320px;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-icon { width: 15px; height: 15px; color: var(--faint); flex-shrink: 0; }
.search-box input {
  border: none;
  background: none;
  padding: 8px 0;
  width: 100%;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear {
  border: none;
  background: none;
  color: var(--faint);
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
}
.search-clear:hover { color: var(--accent); }

/* ---- „Nur Ungelesene"-Umschalter ---- */
#btn-unread .icon-unread-off { display: none; }
#btn-unread.active .icon-unread-on { display: none; }
#btn-unread.active .icon-unread-off { display: block; }

/* ---- Ungelesen-Zähler ---- */
.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.tile-badge { position: absolute; top: 10px; left: 10px; }
body.edit-mode .tile-badge { display: none; }

/* ---- Lese-Status pro Artikel ---- */
/* Die Marke war ein 14px-Kreis mit 2px-Ring in Akzentfarbe — achtmal je Spalte
   untereinander ergab das einen roten Streifen, der lauter war als die
   Schlagzeilen. Der Knopf behält seine Größe als Klickziel, der sichtbare Punkt
   darin ist nur noch halb so groß. */
.article-read {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-right: 2px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.article-read::before {
  content: '';
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--accent);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.article-read:hover::before { transform: scale(1.3); }
.article-read-done .article-read::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.article-read-done .article-title { color: var(--faint); font-weight: 500; }
.article-read-done .article-time { opacity: 0.6; }

.feed-mark-read, .category-mark-read { color: var(--faint); }
.feed-mark-read:hover, .category-mark-read:hover { color: var(--ok); }

/* ---- Suchergebnis-Ansicht ---- */
.board.board--search { display: block; max-width: 820px; }
.search-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: 12px;
}
.search-empty { text-align: center; color: var(--muted); padding: 60px 20px; }
.search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.search-result {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.search-result-img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--surface-raised);
}
.search-result-body { min-width: 0; flex: 1; }
.search-result-meta {
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}
/* In der Suche steht je Treffer nur eine Zeile — dort darf der Titel voll
   ausgeschrieben bleiben statt nach zwei Zeilen abzubrechen. */
.search-result .article-title { font-size: 16px; -webkit-line-clamp: 3; }
.search-result-summary {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-result.article-read-done .article-title { color: var(--faint); }

/* ---- Vorschau-Sheet (Touch) ---- */
.preview-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.preview-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  animation: fade-in 0.15s ease-out;
}
.preview-sheet-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow-sheet);
  animation: sheet-up 0.22s cubic-bezier(0.22, 0.9, 0.3, 1);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.sheet-body { padding: 16px 18px 22px; }
.sheet-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25; }
.sheet-summary { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.sheet-actions { display: flex; gap: 10px; }
.sheet-actions .btn { flex: 1; text-align: center; text-decoration: none; padding: 10px; }
body.sheet-open { overflow: hidden; }

@media (min-width: 640px) {
  .preview-sheet { align-items: center; }
  .preview-sheet-card { border-radius: 16px; animation: preview-in 0.16s ease-out; }
}

/* ==========================================================================
   Stern, Thumbnails, Dichte & Schriftgröße
   ========================================================================== */

/* Titel wächst, damit Stern & Chevron rechts sitzen */
.article-title { flex: 1 1 auto; min-width: 0; }

/* Stern pro Artikel */
.article-star {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  align-self: center;
  transition: color 0.15s, transform 0.1s;
}
.article-star svg { width: 15px; height: 15px; }
.article-star:hover { color: var(--warn); transform: scale(1.15); }
.article-star.starred { color: var(--warn); }

/* Thumbnail in der Liste */
.article-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  align-self: center;
  background: var(--surface-raised);
}
.article-row:has(.article-thumb) { align-items: center; }

/* Stern in Such-/Gespeichert-Ergebnissen */
.search-result { align-items: flex-start; }
.search-result .article-star { align-self: flex-start; margin-top: 2px; }

/* Dichte kompakt */
body.density-compact .articles { padding: 1px 0 5px; }
body.density-compact .article-row { padding: 2px 0; gap: 8px; }
body.density-compact .feed-header { padding: 7px 16px 5px; }
body.density-compact .article-summary { margin-top: 1px; margin-bottom: 5px; }
body.density-compact .search-result { padding: 8px 12px; }

/* Schriftgröße */
/* Fraunces baut kleiner als die Grotesk, deshalb liegen die Stufen seit der
   Umstellung der Schlagzeilen jeweils einen Punkt höher als vorher. */
body.font-small .article-title { font-size: 13.5px; }
body.font-small .article-summary { font-size: 12px; }
body.font-large .article-title { font-size: 17px; }
body.font-large .article-summary { font-size: 14.5px; }
body.font-large .search-result .article-title { font-size: 17.5px; }

/* ==========================================================================
   Nachgeladener Text (Volltext/KI), Aktionen, Tastaturauswahl, Pause
   ========================================================================== */

/* Wie die Kurzfassung: erst sichtbar, wenn der Artikel aufgeklappt ist */
.article-extra,
.article-actions { display: none; }

.article.expanded .article-extra,
.article.expanded .article-actions,
.search-result.expanded .article-extra,
.search-result.expanded .article-actions { display: block; }

.article-extra {
  margin: 2px 0 8px 68px;
  padding: 10px 12px;
  max-height: 420px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.article-extra-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}

.article-extra-busy { color: var(--muted); font-style: italic; }

.article-actions {
  margin: 0 0 8px 68px;
  flex-wrap: wrap;
  gap: 6px;
}

.article.expanded .article-actions,
.search-result.expanded .article-actions { display: flex; }

.article-action {
  padding: 3px 9px;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.article-action:hover { color: var(--accent); border-color: var(--accent); }

.search-result .article-extra,
.search-result .article-actions { margin-left: 0; margin-top: 8px; }

.search-result.expanded .search-result-summary { -webkit-line-clamp: unset; }
.search-result .article-read { align-self: flex-start; margin-top: 3px; }

@media (max-width: 480px) {
  .article-extra,
  .article-actions { margin-left: 0; }
}

/* Tastaturauswahl (j/k) — die Tönung allein bleibt auf jedem Hintergrund
   unter 1,2:1 und ist damit praktisch unsichtbar; den Kontrast trägt der
   Balken in voller Akzentfarbe. Als inset-Schatten, damit die Zeile beim
   Wandern des Cursors nicht springt (.article hat 16px Innenabstand). */
.article.selected {
  background: var(--accent-soft);
  border-radius: 6px;
  box-shadow: inset 3px 0 0 var(--accent);
}
.search-result.selected { border-color: var(--accent); }

/* Weitere Quellen derselben Meldung */
.duplicate-hint {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}
.duplicate-hint a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.duplicate-hint a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Pausierte Feeds */
.feed-paused .feed-header { opacity: 0.6; }

.paused-badge {
  flex-shrink: 0;
  padding: 1px 7px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: 999px;
}

/* Zahnrad: Daten-Knöpfe und Tastaturübersicht */
/* ---- Zugänge einrichten (Telegram, KI, Briefing) ---- */
.settings-field { display: flex; flex-direction: column; gap: 4px; }

/* Zwei zusammengehörende Felder nebeneinander (Anbieter und Modell). Unten
   ausgerichtet, damit die Auswahlfelder auf einer Linie stehen, auch wenn eine
   Beschriftung umbricht — auf Russisch tut sie das auf dem Telefon. */
.settings-pair { display: flex; align-items: flex-end; gap: 10px; }
.settings-pair > .settings-field { flex: 1 1 0; min-width: 0; }

.settings-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
}

.settings-input {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 6px 9px;
  outline: none;
}
.settings-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.settings-input::placeholder { color: var(--faint); }

/* Rückblick und Sprache teilen sich eine Zeile — sonst wird das Panel zu lang */
.settings-field-row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
.settings-field-row .settings-field-label { flex: 0 0 auto; }
.settings-input-narrow { width: auto; flex: 1 1 60px; }

/* Bewusst als Textknopf: das Entfernen eines Geheimnisses soll nicht wie eine
   der Hauptaktionen aussehen. */
.settings-clear {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.settings-clear:hover { color: var(--accent); }

/* Fragezeichen an der Beschriftung: klappt die Anleitung unter dem Feld auf */
.help-btn {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  /* Direkt hinter die Beschriftung; alles Weitere (entfernen, Liste laden)
     wird dadurch an den rechten Rand geschoben. */
  margin-right: auto;
  align-self: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.help-btn:hover { border-color: var(--accent); color: var(--accent); }
.help-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.field-help {
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.field-help ol, .field-help ul { margin: 0; padding-left: 18px; }
.field-help li + li { margin-top: 3px; }
.field-help-link { margin: 7px 0 0; word-break: break-all; }
.field-help-link a { color: var(--accent); }

/* Uhrzeit und Wochentage in einer Zeile. Die Tage teilen sich den Rest der
   Breite, die Uhrzeit behält ihre eigene. */
.briefing-when { display: flex; align-items: center; gap: 8px; }
.briefing-time { flex: 0 0 auto; width: auto; }

/* Sieben gleich breite Spalten: die Reihe bleibt auf jeder Breite eine Zeile,
   auch auf dem Telefon neben der Uhrzeit. */
.weekdays { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }

.weekday {
  position: relative;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--muted);
  border-radius: 7px;
  padding: 4px 1px 8px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  min-width: 0;
}
.weekday:hover { border-color: var(--accent); color: var(--accent); }
.weekday.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Zweites Merkmal neben der Farbe: ein Balken unter der Beschriftung. Er liegt
   über dem Knopf statt daneben, kostet also keine Breite — davon ist neben der
   Uhrzeit auf einem Telefon keine übrig. Ein Häkchen im Knopf überlappte dort
   bei 30 px Breite die Beschriftung. */
.weekday-mark {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 13px;
  height: 2px;
  border-radius: 1px;
  transform: translateX(-50%);
  background: currentColor;
  opacity: 0;
  pointer-events: none;
}
.weekday.active .weekday-mark { opacity: 1; }

.weekday-presets { display: flex; align-items: baseline; gap: 12px; margin-top: 7px; flex-wrap: wrap; }

.settings-hint { font-size: 11px; color: var(--faint); font-weight: 400; }

.settings-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.settings-status { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.settings-status.is-error { color: var(--accent); }
.settings-status.is-ok { color: var(--ok); }

.settings-buttons { display: flex; flex-direction: column; gap: 6px; }
.settings-buttons .btn { text-align: center; text-decoration: none; }

.shortcut-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--muted);
}

.shortcut { display: contents; }

.shortcut kbd {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 11px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0 5px;
  white-space: nowrap;
  justify-self: start;
}

/* Anmelde- und Passwort-Formular im Sheet */
.sheet-form { display: flex; flex-direction: column; gap: 8px; }

.sheet-form input {
  width: 100%;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  outline: none;
}

.sheet-form input:focus { border-color: var(--accent); }
.sheet-form .sheet-actions { margin-top: 6px; }

/* Briefing im Sheet */
.sheet-briefing {
  max-height: 60vh;
  overflow-y: auto;
  color: var(--ink);
  white-space: normal;
}
.sheet-briefing strong {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
}
.sheet-briefing strong:first-child { margin-top: 0; }

/* ==========================================================================
   Reduzierte Bewegung — folgt der Betriebssystem-Einstellung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Ausnahme: Der Aktualisieren-Spinner ist eine Fortschrittsanzeige. Er muss
     weiterlaufen, sonst wirkt der Feed-Abruf eingefroren — nur ruhiger. */
  .tool-btn.spinning .icon-refresh {
    animation: spin 1.8s linear infinite !important;
  }

  /* Verschiebungen ganz weglassen statt nur zu beschleunigen. */
  .category-tile:hover { transform: none; }
  .tool-btn:active { transform: none; }
}

/* Zustand der Feeds ---------------------------------------------------------
   Eine Zeile je Feed: Ampel, Name mit Rubrik, Kennzahlen, im Fehlerfall die
   Meldung des letzten Versuchs. */
.feed-health { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

.feed-health-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.feed-health-row.is-fehler { border-color: var(--accent); }
.feed-health-row.is-aus { opacity: 0.75; }

.feed-health-mark { flex: 0 0 auto; font-size: 11px; line-height: 1.6; color: var(--faint); }
.feed-health-row.is-ok .feed-health-mark { color: #4f9e5f; }
.feed-health-row.is-fehler .feed-health-mark { color: var(--accent); font-weight: 700; }

.feed-health-body { flex: 1 1 auto; min-width: 0; }
.feed-health-name { font-size: 13px; color: var(--ink); font-weight: 600; }
.feed-health-cat { margin-left: 7px; font-size: 11px; font-weight: 400; color: var(--faint); }
.feed-health-meta { font-size: 11.5px; color: var(--muted); }
.feed-health-error { margin-top: 3px; font-size: 11.5px; color: var(--accent); overflow-wrap: anywhere; }
.feed-health-on { flex: 0 0 auto; font-size: 11.5px; padding: 4px 8px; }

/* Regeln ------------------------------------------------------------------ */
.rule-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }

.rule-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.rule-row.is-off { opacity: 0.6; }
.rule-body { flex: 1 1 auto; min-width: 0; }
.rule-text { font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
.rule-meta { font-size: 11px; color: var(--faint); }
.rule-switch { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.rule-form { display: flex; flex-direction: column; gap: 10px; }

/* Abschnitt innerhalb eines Einstellungsblocks (z. B. Handy-App unter Zugänge) */
.settings-subsection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Erster Unterabschnitt eines Bereichs: keine Trennlinie nach oben, sie liegt
   ja direkt unter der Überschrift. Stand frueher als style-Attribut im HTML —
   die CSP verbietet Inline-Stile. */
.settings-subsection.is-first {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}