/* ─────────────────────────────────────────────────────────────────────────
   Blog-Stylesheet. Basis (Farben, Schrift, Body, .container, Footer) aus ../style.css.
   Tokens: --bg-dark #0a1f0a · --text-light #fffbeb · --accent-orange #f7931a
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --blog-card: #0e2e0e;
  --blog-card-2: #103610;
  --blog-border: rgba(255, 255, 255, 0.08);
  --blog-muted: rgba(255, 251, 235, 0.62);
  --dot-green: #35c759;
  --dot-red: #ff5a4d;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--blog-border); padding: 1rem 0; }
.site-header__inner { display: flex; align-items: center; gap: 1.25rem; }

/* ── Intro (dauerhaft sichtbar) ───────────────────────────────────────── */
.intro { max-width: 640px; margin: 2.5rem auto 1.5rem; text-align: center; padding: 0 1rem; }
.intro__logo { width: 96px; height: auto; margin-bottom: 1.25rem; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.35)); }
.intro__text { line-height: 1.7; margin: 0 auto 1rem; }
.intro__text--muted { color: var(--blog-muted); font-size: 0.95rem; }
.intro__text a { color: var(--accent-orange); }

/* ── Ladestatus (verschwindet nach dem Laden) ─────────────────────────── */
.loadstatus { margin-bottom: 1.5rem; }
.loadstatus__title { font-size: 1.4rem; margin: 0 0 1rem; }
.progress { height: 12px; background: var(--blog-card); border: 1px solid var(--blog-border); border-radius: 999px; overflow: hidden; margin: 0 auto 0.6rem; }
.progress__bar { height: 100%; width: 0; background: var(--accent-orange); border-radius: 999px; transition: width 0.35s ease; }
.progress__label { font-size: 0.85rem; color: var(--blog-muted); margin: 0; }

/* ── Relay-Panel (rechts oben) ────────────────────────────────────────── */
.relay-panel { position: fixed; top: 4.5rem; right: 0.75rem; z-index: 40; background: var(--blog-card); border: 1px solid var(--blog-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); width: 220px; max-width: calc(100vw - 1.5rem); overflow: hidden; }
.relay-panel__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: transparent; border: none; color: var(--text-light); padding: 0.6rem 0.85rem; cursor: pointer; font: inherit; }
.relay-panel__title { font-weight: 600; font-size: 0.9rem; }
.relay-panel__summary { font-size: 0.8rem; color: var(--blog-muted); }
.relay-panel__leds { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.relay-led { width: 8px; height: 8px; border-radius: 50%; background: var(--blog-muted); }
.relay-led--open, .relay-led--done { background: var(--dot-green); }
.relay-led--error { background: var(--dot-red); }
.relay-panel.relay-panel--collapsed { width: auto; }
.relay-panel__list { list-style: none; margin: 0; padding: 0 0.85rem 0.7rem; }
.relay-panel--collapsed .relay-panel__list { display: none; }
.relay-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.28rem 0; font-size: 0.82rem; }
.relay-item__dot { width: 1rem; text-align: center; line-height: 1; }
.relay-item__name { color: var(--blog-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relay-item--connecting .relay-item__dot { color: var(--blog-muted); }
.relay-item--open .relay-item__dot { color: var(--dot-green); }
.relay-item--error .relay-item__dot { color: var(--dot-red); }
.relay-item--done .relay-item__dot { color: var(--dot-green); font-weight: 700; }
.relay-item--done .relay-item__name { color: var(--text-light); }

/* ── Blog / Boxen-Liste ───────────────────────────────────────────────── */
.blog { max-width: 720px; margin: 0 auto 4rem; padding: 0 1rem; }
.post-list { list-style: none; margin: 0; padding: 0; }

.post {
  border: 1px solid var(--blog-border);
  border-radius: 10px;
  background: var(--blog-card);
  margin-bottom: 0.75rem;
  overflow: hidden;
  scroll-margin-top: 96px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.post__head { display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; text-align: left; padding: 0.95rem 1.1rem; cursor: pointer; }
.post__title { font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.post__date { font-size: 0.8rem; color: var(--accent-orange); }
.post.is-preview { border-color: rgba(247, 147, 26, 0.4); }
.post.is-preview .post__title { color: var(--accent-orange); }

/* Vorschau (nur bei .is-preview sichtbar) */
.post__preview { display: none; padding: 0 1.1rem 1.1rem; }
.post.is-preview .post__preview { display: block; }
.post.is-reading .post__preview { display: none; }
.post__excerpt { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; color: var(--blog-muted); line-height: 1.6; margin: 0 0 0.75rem; }
.post__more { background: transparent; border: none; color: var(--accent-orange); cursor: pointer; font: inherit; font-weight: 600; padding: 0; }
.post__more:hover { text-decoration: underline; }

/* Vollständiger Artikel (nur beim Lesen) */
.post__full { display: none; padding: 0 1.1rem 1.6rem; }
.post.is-reading { border-color: rgba(247, 147, 26, 0.5); }
.post.is-reading .post__full { display: block; }
.post.is-reading .post__head { border-bottom: 1px solid var(--blog-border); }

/* Artikel-Typografie */
.post__full { line-height: 1.75; font-size: 1.05rem; }
.post__full h1, .post__full h2, .post__full h3 { line-height: 1.25; margin: 1.8rem 0 0.75rem; }
.post__full h1 { font-size: 1.8rem; }
.post__full h2 { font-size: 1.45rem; }
.post__full h3 { font-size: 1.2rem; }
.post__full p { margin: 0 0 1.1rem; }
.post__full a { color: var(--accent-orange); }
.post__full img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }
.post__full ul, .post__full ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
.post__full li { margin: 0.3rem 0; }
.post__full blockquote { border-left: 3px solid var(--accent-orange); margin: 1.2rem 0; padding: 0.2rem 0 0.2rem 1rem; color: var(--blog-muted); }
.post__full pre { background: #061706; border: 1px solid var(--blog-border); border-radius: 8px; padding: 1rem; overflow-x: auto; }
.post__full code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.post__full :not(pre) > code { background: #061706; padding: 0.1rem 0.35rem; border-radius: 4px; }

/* ── Archiv-Button ────────────────────────────────────────────────────── */
.archive { text-align: center; margin-top: 1.5rem; }
.btn-archive { display: inline-block; background: transparent; color: var(--accent-orange); border: 1px solid var(--accent-orange); border-radius: 999px; padding: 0.55rem 1.4rem; cursor: pointer; font: inherit; transition: background 0.2s ease, color 0.2s ease; }
.btn-archive:hover { background: var(--accent-orange); color: var(--bg-dark); }

/* ── Untere Sticky-Leiste im Lesemodus ────────────────────────────────── */
.reading-bar {
  position: fixed; left: 0; right: 0; z-index: 45;
  background: rgba(14, 46, 14, 0.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: stretch; gap: 1rem;
  padding: 0.55rem max(1rem, calc((100% - 720px) / 2));
}
.reading-bar[hidden], .close-reading[hidden] { display: none; }

/* 21start-Schriftzug im Lesemodus nicht mehr nötig – die fixe Kopfzeile zeigt das Logo dauerhaft */
.reading-logo { display: none; }
.reading-bar--bottom { bottom: 0; border-top: 1px solid var(--blog-border); }

/* Platz für die untere Leiste, damit sie den Footer (Impressum/Datenschutz) nicht verdeckt */
body.reading-mode .page-footer { padding-bottom: 5.5rem; }

/* Klickbare Nachbar-Boxen */
.mini-post { flex: 1; min-width: 0; cursor: pointer; }
.mini-post__head { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.15rem 0; }
.mini-post__role { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-orange); }
.mini-post__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-post__date { font-size: 0.75rem; color: var(--blog-muted); }

/* Platz für den fixierten Schriftzug oben schaffen */
body.reading-mode { scroll-padding-top: 3.5rem; }

/* ── Schließen-Pfeil (wie back-to-top auf der Startseite) ──────────────── */
.close-reading {
  position: fixed; bottom: 5.5rem; right: 1.5rem; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; padding: 0;
  border: 1px solid rgba(247, 147, 26, 0.4); border-radius: 50%;
  background-color: rgba(14, 46, 14, 0.85); color: var(--accent-orange);
  cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.close-reading:hover { background-color: var(--accent-orange); color: #000; transform: translateY(-2px); }
.close-reading:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 3px; }

/* ── Fehlerhinweis ────────────────────────────────────────────────────── */
.notice { max-width: 560px; margin: 3rem auto; text-align: center; color: var(--blog-muted); }

/* ── Klein / mobil ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .relay-panel { width: 190px; }
  /* Eingeklappt nur die LEDs zeigen – Panel wird zur kleinen Pille */
  .relay-panel--collapsed .relay-panel__title,
  .relay-panel--collapsed .relay-panel__summary { display: none; }
  .close-reading { bottom: 6rem; right: 1rem; width: 2.75rem; height: 2.75rem; }
}