/* Custom CSS für Pure Blog */

/* ---------- Custom Font: VictorMono ----------
   Dateien liegen unter /content/fonts/ (vom Nutzer hochgeladen).
   Alle vier Schnitte (Regular, Italic, Bold, Bold Italic) über
   font-weight/font-style an EINEN font-family-Namen gebunden,
   damit ganz normales <strong>/<em> im Content automatisch den
   richtigen Schnitt zieht. */
@font-face {
  font-family: "VictorMono";
  src: url("/content/fonts/VictorMono-Regular.woff2") format("woff2"),
       url("/content/fonts/VictorMono-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "VictorMono";
  src: url("/content/fonts/VictorMono-Italic.woff2") format("woff2"),
       url("/content/fonts/VictorMono-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "VictorMono";
  src: url("/content/fonts/VictorMono-Bold.woff2") format("woff2"),
       url("/content/fonts/VictorMono-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "VictorMono";
  src: url("/content/fonts/VictorMono-BoldItalic.woff2") format("woff2"),
       url("/content/fonts/VictorMono-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

:root {
  /* VictorMono zuerst, danach der bisherige Monospace-Stack als
     Fallback, falls die Font-Dateien mal nicht laden. */
  --font-stack: "VictorMono", "Iosevka", ui-monospace, "Cascadia Code",
    "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* Kleiner Radius nur für interaktive Elemente (Buttons, Felder),
     keine Karten mehr im Layout. */
  --radius: 0;

  /* Einspaltiges Layout, aber nach rechts versetzt: links bleibt
     Platz für eine schmale, feste Sidebar, in der nur der Rabe
     sitzt (keine Nav/kein Titel dort). */
  --content-w: 660px;
  --content-pad: 1.5rem;
  --raven-sidebar-w: 160px;
  --raven-gap: 4rem;
  --layout-offset: max(0px, calc((100vw - (var(--raven-sidebar-w) + var(--raven-gap) + var(--content-w))) / 2));
}

/* ---------- Farbschema: Dark / Light / Auto ----------
   Pure Blog setzt html[data-theme] je nach Einstellung auf "dark",
   "light" oder "auto". Alle Farb-Variablen liegen hier statt in
   :root, damit sie je nach Modus umgeschaltet werden können -
   Layout und Radius oben in :root bleiben in beiden Modi identisch.

   1) DARK (Standard): gilt für data-theme="dark" und als Fallback,
      falls das Attribut fehlt. Gedämpftes, warmes Anthrazit mit
      Beige-Text und Salbeigrün als Akzent. */
html {
  color-scheme: dark;

  --bg: #282828;          /* Seitenhintergrund */
  --card-bg: #32302f;     /* Flächen wie Eingabefelder/Kommentarbox - leicht heller als der Seitenhintergrund */
  --text: #d6ccb8;        /* Fließtext: gedämpftes, warmes Beige */
  --muted: #9c9488;       /* Datum / Meta-Infos */
  --card-border-color: #46423a; /* dezente, warme Rahmenfarbe statt voller Textfarbe */
  --scrollbar-thumb: #46423a;

  /* Hauptakzent: gedämpftes Salbeigrün (Überschriften, Links,
     aktive Nav-Seite, Buttons). */
  --tape-current-bg: #9fbfae;
  --tape-current-text: #1a1917;

  /* Dasselbe Grün, wenn es als reine TEXTfarbe auf der Kartenfläche
     steht (RSS-Link, Tag-Hover, Fokus-Rahmen). Im Dark Mode identisch
     mit dem Akzent, im Light Mode etwas vertieft (Lesbarkeit). */
  --accent-ink: #9fbfae;

  /* Zweiter Akzent: Rosé/Lila für bereits besuchte Links und das
     Kopf-Auge des Raben. */
  --accent-rose: #c8899b;

  /* Hover-Fläche für den Kommentarbereich. */
  --cream-hover: #26241f;

  /* Schriftfarbe auf Flächen in Textfarbe (invertierte Hover-Zustände
     bei Nav, Titel, Buttons): im Dark Mode die Kartenfarbe (dunkel
     auf beige), im Light Mode reines Weiß auf dunkler Fläche. */
  --invert-text: var(--card-bg);

  /* Kein Schatten mehr - reiner, flacher Minimalismus statt Tiefenandeutung. */
  --hard-shadow: none;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* 2) LIGHT: gleiche Farbrollen wie im Dark Mode, als helles,
      warmes Papier-Pendant. Karten sind (wie im Dark Mode) einen Hauch
      abgesetzt vom Seitenhintergrund. Das Salbeigrün ist als Fläche
      identisch mit dem Dark Mode (dunkle Schrift darauf); nur wo es als
      Textfarbe auf hellem Grund steht (--accent-ink) und beim Rosé ist
      es vertieft, damit es lesbar bleibt. Gilt für explizit
      gewähltes "light" sowie - via Media Query darunter - für "auto"
      bei hellem Systemschema. */
html[data-theme="light"] {
  color-scheme: light;

  --bg: #f2efe7;
  --card-bg: #faf8f3;
  --text: #2e2a23;
  --muted: #6f695d;
  --card-border-color: #ddd6c6;
  --scrollbar-thumb: #c4bba6;

  --tape-current-bg: #9fbfae;
  --tape-current-text: #1a1917;

  --accent-ink: #4a7a61;

  --accent-rose: #98506a;

  --cream-hover: #ece7da;

  --invert-text: #ffffff;

  --hard-shadow: none;
}

/* 3) AUTO: Pure Blog liefert data-theme="auto" (bzw. kein Attribut)
      und überlässt die Umschaltung dem Systemschema des Besuchers -
      "dark" bleibt dabei ausgenommen und immer dunkel. */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    color-scheme: light;

    --bg: #f2efe7;
    --card-bg: #faf8f3;
    --text: #2e2a23;
    --muted: #6f695d;
    --card-border-color: #ddd6c6;
    --scrollbar-thumb: #c4bba6;

    --tape-current-bg: #9fbfae;
    --tape-current-text: #1a1917;

    --accent-ink: #4a7a61;

    --accent-rose: #98506a;

    --cream-hover: #ece7da;

    --invert-text: #ffffff;

    --hard-shadow: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  background-color: var(--bg);
  overflow-x: clip;
  scroll-behavior: smooth;
  /* Reserviert die Breite der vertikalen Scrollbar immer, auch
     wenn eine Seite kurz genug ist, um ohne Scrollbar auszukommen.
     Ohne das würde sich zentrierter Inhalt leicht seitlich
     verschieben, sobald eine Seite eine Scrollbar erzwingt. */
  scrollbar-gutter: stable;
  scrollbar-color: var(--text) var(--bg);
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* body bleibt transparent, damit der Seitenhintergrund von <html>
   durchscheint. Zusätzlich deaktivieren wir hier einen möglichen
   Sticky-Footer-Mechanismus des Grundthemes (justify-content/
   min-height auf body), der sonst bei kurzen Seiten Leerraum vor
   dem Footer erzeugen würde. */
body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: transparent;
  color: var(--text);
  line-height: 1.6;
  justify-content: flex-start !important;
  align-items: stretch !important;
  min-height: 0 !important;
}

a {
  color: inherit;
}

.icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  vertical-align: -2px;
  margin-right: 2px;
}

/* ---------- Header (oben, volle Breite der Inhaltsspalte) ----------
   Ersetzt die frühere fixierte linke Sidebar: Titel, Untertitel und
   Navigation stehen jetzt oben im normalen Textfluss, exakt so breit
   wie der restliche Inhalt. Eine dünne Linie trennt den Header vom
   Inhalt - keine Karten/Rahmen/Schatten mehr. */
header {
  max-width: var(--content-w);
  margin: 3rem 0 0 calc(var(--layout-offset) + var(--raven-sidebar-w) + var(--raven-gap));
  padding: 0 var(--content-pad) 1.5rem;
  border-bottom: 1px solid var(--card-border-color);
  position: relative;
}

/* Seitentitel: großer, fetter, linksbündiger Schriftzug statt
   einer Chip-Fläche, angelehnt an das Referenz-Design. Grundtheme
   liefert den Titel auf der Startseite als <h1 class="site-title">,
   auf Unterseiten als <p class="site-title"> (nur ein <h1> pro
   Seite erlaubt) - daher beide Selektoren. */
header h1,
header .site-title {
  margin: 0 0 0.5rem;
  padding: 0;
  text-align: left;
  font-size: 6.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

header h1 a,
header .site-title a {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  /* Kein eigener Schwarz-Schnitt bei VictorMono geladen (nur
     Regular/Bold) - Text-Stroke verstärkt die Kontur zusätzlich,
     damit der Titel kräftiger wirkt als normales Fett. */
  -webkit-text-stroke: 1px currentColor;
}

header h1::after,
header .site-title::after {
  content: "_";
  margin-left: 0.08em;
  color: var(--tape-current-bg);
  animation: title-caret 2.4s step-end infinite;
}

@keyframes title-caret {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  header h1::after,
  header .site-title::after {
    animation: none;
  }
}

header h1 a::before,
header .site-title a::before {
  content: none;
}

header h1 + *,
header .site-title + * {
  text-align: left !important;
}

/* Untertitel: steht jetzt fertig da, keine Animation mehr - die
   übernimmt stattdessen der Seitentitel (siehe unten). */
header .tagline {
  display: block;
  color: var(--muted);
  margin: 0 0 0.25rem;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Grundtheme setzt offenbar eine eigene untere Rahmenlinie an Nav
   bzw. innerhalb des Headers - hier gezielt nur dort entfernt,
   damit nur unsere eigene header-Trennlinie oben übrig bleibt. */
header nav,
header .site-nav {
  border-bottom: none !important;
}

/* Navigation: horizontale, linksbündige Pipe-Liste unter dem
   Untertitel, wie im Referenz-Design ("| Home  | Tags  | ..."). */
header .site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0;
  margin: 1rem 0 0;
  padding: 0;
}

header .site-nav li {
  display: flex;
  align-items: baseline;
}

header .site-nav li::before {
  content: "|";
  color: var(--card-border-color);
  margin-right: 0.35em;
}

header .site-nav a {
  display: inline-block;
  margin-right: 0.8em;
  padding: 0;
  font-size: 0.95rem;
  color: var(--tape-current-bg);
  font-weight: 700;
  text-decoration: none;
  background: none;
  border-radius: 0;
}

header .site-nav a::before {
  content: none;
}

header .site-nav a:hover {
  text-decoration: underline;
}

header .site-nav a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

/* Aktive Seite: unterstrichen in der normalen Textfarbe statt
   komplett eingefärbter Pillenform (kein Karten-Look mehr). */
header .site-nav li a.current {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- Inhalt (einspaltig, zentriert) ---------- */
main {
  max-width: var(--content-w);
  margin: 0 0 0 calc(var(--layout-offset) + var(--raven-sidebar-w) + var(--raven-gap));
  padding: 2.5rem var(--content-pad) 1.5rem;
  /* Falls das Grundtheme einen "Sticky Footer"-Mechanismus nutzt
     (main wird per Flexbox/min-height gestreckt, damit der Footer
     bei kurzem Inhalt unten bleibt), hier deaktiviert. */
  min-height: 0 !important;
  flex: none !important;
}

/* ---------- Einzelansicht (Post/Page) ----------
   Keine Karte mehr - der Beitrag steht einfach im normalen
   Textfluss, abgesetzt nur durch die Titel-Linie darunter. */
main:not(:has(.excerpt-view)) h1 {
  margin: 0 0 1.5rem;
  padding: 0 0 1rem;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  border-bottom: 1px solid var(--card-border-color);
}

/* ---------- Beitragsliste (Startseite/Archiv) ---------- */
/* Überschrift über der normalen Beitragsliste (Beitragsauszug/Ganzer
   Beitrag-Modus), im "## Überschrift"-Look der Referenz. Die Zeile
   mit dem Einleitungstext ist ein zweiter, direkt folgender Absatz -
   zwei echte HTML-Zeilen mit unterschiedlicher Formatierung sind per
   CSS-generiertem Inhalt nicht möglich; stattdessen eine Zeile mit
   ::first-line unterschiedlich gestaltet (moderne Browser
   unterstützen das auf generiertem Inhalt). */
main:has(.excerpt-view)::before {
  content: "## Willkommen!\A\AHallo, ich bin Bernd (aka Rappel) und dies ist mein Weblog. Ich schreibe hier über das, was schön war. Zumeist jedenfalls. Wer mitliest, ist herzlich willkommen und eingeladen, die Dinge freundlich zu diskutieren.";
  display: block;
  white-space: pre-line;
  margin: 0 0 2.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

main:has(.excerpt-view)::before::first-line {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--tape-current-bg);
}

/* Willkommens-Block für die Archiv-Liste (Datum & Titel-Modus) -
   dein tatsächlich genutzter Homepage-Modus. Sitzt auf main, NICHT
   auf .archive-list selbst (Grid-Problem, siehe unten). "Aktuell im
   Blog:" ist bewusst NICHT hier drin, sondern ein eigener Block
   direkt im Grid (siehe .archive-list::before weiter unten) - so
   kann es unabhängig fett/groß gestylt werden. Jedes \A hat ein
   Leerzeichen danach, sonst verschluckt der Browser nachfolgende
   Buchstaben als Teil einer Hex-Escape-Sequenz. */
main:has(.archive-list)::before {
  content: "# Willkommen!\A \A Guten Tag. Ich schreibe hier über das, was schön war. Oder immer noch schön ist. Zumeist jedenfalls. Wer mitliest, ist herzlich willkommen und eingeladen, die Dinge freundlich zu diskutieren.";
  display: block;
  white-space: pre-line;
  margin: 0 0 2.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text);
}

/* "## Aktuell im Blog:" als EIGENES Grid-Element mit fester Zeile 1
   - WICHTIG: hier explizit grid-row:1 setzen und ALLE nth-child-
   Zuordnungen unten um eins verschieben. Vorher (ohne explizite
   Zeile) ist die Auto-Platzierung des Pseudo-Elements mit der Zeile
   des neuesten Artikels kollidiert, wodurch der neueste Artikel vor
   der Überschrift auftauchte. */
.archive-list::before {
  content: "## Aktuell im Blog:";
  display: block;
  grid-row: 1;
  grid-column: 1 / -1;
  margin: 0 0 1rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
}

/* Jeder Beitrag als Listen-Eintrag mit "-" davor statt einer
   umrandeten Karte. */
article.post-item {
  position: relative;
  margin: 0 0 1.75rem;
  padding-left: 1.3em;
}

article.post-item::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0.15em;
  color: var(--tape-current-bg);
  font-weight: 800;
}

article.post-item:last-of-type {
  margin-bottom: 0;
}

.excerpt-view {
  margin: 0;
  padding: 0;
}

/* Datum/Lesezeit als kleine, gedämpfte Meta-Zeile. */
main p:has(time) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.3rem;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Der direkt folgende Absatz hat einen eigenen margin-top, der
   sonst mit dem margin-bottom oben kollabiert (der jeweils
   größere Wert gewinnt) - dadurch griff unsere Abstands-Reduktion
   nicht. Hier gezielt auf 0 gesetzt. */
main p:has(time) + p {
  margin-top: 0;
}

/* In der Beitragsliste kein Datum mehr anzeigen (passend zum
   Referenz-Design) - main:has(.excerpt-view) grenzt das auf
   Listen-Seiten ein, die Einzelansicht (ohne .excerpt-view) zeigt
   ihr Datum weiterhin. */
main:has(.excerpt-view) p:has(time) {
  display: none;
}

.excerpt-view h2 {
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.post-excerpt {
  margin: 0 0 0.5rem;
  color: var(--text);
  font-size: 0.95rem;
}

/* Tags: schlichter #Hashtag-Text, keine Pillen. */
.excerpt-view .tag-list,
.tag-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  /* Zwischen den Tag-Links stehen im Markup Kommas als reiner
     Text, die sich per CSS nicht direkt entfernen lassen. Trick:
     Schriftgröße des Containers auf 0, Icon/Links bekommen ihre
     Schriftgröße gezielt zurück. */
  font-size: 0 !important;
  color: var(--muted);
  margin: 0.4rem 0 0;
}

.excerpt-view .tag-list .icon,
.tag-list .icon {
  font-size: 0.8rem !important;
}

.excerpt-view .tag-list a,
.tag-list a {
  display: inline-block;
  padding: 0;
  border: none;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.78rem !important;
}

.excerpt-view .tag-list a::before,
.tag-list a::before {
  content: "#";
  color: var(--muted);
}

.tag-list a:hover {
  color: var(--accent-ink);
}

/* ---------- Links (generische Hover-Füllung) ----------
   Beim Hover wächst ein Akzent-Hintergrund von unten nach oben
   herein, Linktext wechselt zur Akzent-Schrift. Ausnahmen: Elemente
   mit eigenem Hover-Stil (Nav, Tags, Titel-Link, Footer-Stempel,
   Kommentare, h-card). Beitragstitel in der Liste laufen jetzt
   bewusst MIT über diese generische Regel (kein eigener
   Hintergrund-Tausch mehr), passend zum schlichten Unterstrich-Look. */
a:not(:where(header .site-nav a, .tag-list a, header h1 a, header .site-title a, .footer-transmission, #comments a, .admin-edit-link, .h-card a, .archive-list > a, .protocol-badges a, .indieweb-badge, .tag-cloud a)) {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 0.3em;
  margin: 0 -0.3em;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.35s ease;
}

a:not(:where(header .site-nav a, .tag-list a, header h1 a, header .site-title a, .footer-transmission, #comments a, .admin-edit-link, .h-card a, .archive-list > a, .protocol-badges a, .indieweb-badge, .tag-cloud a))::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--tape-current-bg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s ease;
  z-index: -1;
}

a:not(:where(header .site-nav a, .tag-list a, header h1 a, header .site-title a, .footer-transmission, #comments a, .admin-edit-link, .h-card a, .archive-list > a, .protocol-badges a, .indieweb-badge, .tag-cloud a)):hover {
  color: var(--tape-current-text);
}

a:not(:where(header .site-nav a, .tag-list a, header h1 a, header .site-title a, .footer-transmission, #comments a, .admin-edit-link, .h-card a, .archive-list > a, .protocol-badges a, .indieweb-badge, .tag-cloud a)):hover::before {
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  a:not(:where(header .site-nav a, .tag-list a, header h1 a, header .site-title a, .footer-transmission, #comments a, .admin-edit-link, .h-card a, .archive-list > a, .protocol-badges a, .indieweb-badge, .tag-cloud a)),
  a:not(:where(header .site-nav a, .tag-list a, header h1 a, header .site-title a, .footer-transmission, #comments a, .admin-edit-link, .h-card a, .archive-list > a, .protocol-badges a, .indieweb-badge, .tag-cloud a))::before {
    transition: none;
  }
}

/* Besuchte externe Links (z.B. Blogroll) bewusst NICHT anders
   eingefärbt - bleiben wie unbesuchte Links. */

/* ---------- Pagination ---------- */
.post-nav,
.post-nav * {
  border-top: none !important;
  border-bottom: none !important;
}

.post-nav {
  border-bottom: 1px solid var(--card-border-color) !important;
  padding-bottom: 1.5rem;
}

nav.pagination {
  margin: 2rem 0;
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
}

nav.pagination a {
  text-decoration: underline;
  font-weight: 600;
}

/* Dünner Trennbalken. */
hr {
  border: none;
  border-top: 1px solid var(--card-border-color);
  width: 100%;
  height: 0;
  margin: 2.5rem 0;
  background: none;
}

/* ---------- Bilder in Artikeln ----------
   Auf 65% Breite reduziert und zentriert, mit dünnem Rahmen.
   Graustufen-Look als kleines Detail; bei Hover blendet die
   Originalfarbe auf. Bildunterschrift (z.B. <em>) sitzt frei
   darunter, ohne eigenen Rahmen. */
main p:has(> img):not(.h-card),
main p:has(> video) {
  display: block;
  width: 65%;
  margin: 2.5rem auto;
  padding: 8px;
  border: 1px solid var(--card-border-color);
  transform: rotate(-0.8deg);
}

main p:has(> img):not(.h-card) img,
main p:has(> video) video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  filter: grayscale(0.9) contrast(1.15);
  transition: filter 0.4s ease;
}

main p:has(> img):not(.h-card):hover img,
main p:has(> video):hover video {
  filter: none;
}

main p:has(> img):not(.h-card) em,
main p:has(> video) em {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Footer ---------- */
footer {
  position: relative;
  max-width: var(--content-w);
  margin: 1rem 0 0 calc(var(--layout-offset) + var(--raven-sidebar-w) + var(--raven-gap));
  padding: 2rem var(--content-pad) 3rem;
  background: none;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--card-border-color);
  min-height: 0 !important;
  flex: none !important;
}

footer *:not(.footer-transmission) {
  border-top: none !important;
}

footer a {
  text-decoration: underline;
}

/* Der "Beitrag bearbeiten"-Link (nur für eingeloggte Admins
   sichtbar): eigene, garantiert kontrastreiche Farben statt der
   kontrastarmen Akzentfarbe des Grundthemes. */
.admin-edit-link {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--text) !important;
}

.admin-edit-link:hover {
  background: var(--text) !important;
  color: var(--invert-text) !important;
  border-color: var(--tape-current-bg) !important;
}

/* Terminal-/Stempel-Statement im Footer: dünner Rahmen statt Karte,
   invertierter Hover wie bei Buttons. */
.footer-transmission {
  display: inline-block;
  width: fit-content;
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--card-border-color);
  border-radius: var(--radius);
  color: var(--muted) !important;
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.footer-transmission:hover {
  background: var(--tape-current-bg);
  color: var(--tape-current-text) !important;
}

/* Footer-Kindelemente (Bild, Absätze, Links) sitzen teils in
   verschachtelten Wrappern mit großzügigen Standard-Abständen des
   Grundthemes - hier auf ein einheitliches, kompakteres Maß
   zusammengestaucht. */
footer :is(p, div, figure, img, ul, ol, section) {
  margin-top: 0 !important;
  margin-bottom: 0.8rem !important;
}

footer :is(p, div, figure, img, ul, ol, section):last-child {
  margin-bottom: 0 !important;
}

footer p:empty {
  display: none !important;
  margin: 0 !important;
}

/* ---------- Kommentare (Pure Comments) ----------
   Pure Comments ist über CSS-Variablen themebar (das Widget setzt
   diese selbst per nachträglich eingefügtem Style-Tag). Wir
   überschreiben dieselben Variablen mit unserer eigenen Palette;
   !important nötig, da das Style-Tag des Widgets nach unserer
   custom.css im DOM landet und sonst gewinnen würde. Rahmenlos wie
   der Rest der Seite, nur eine dünne Trennlinie oben/unten. */
#comments {
  --comments-text: var(--text) !important;
  --comments-bg: var(--bg) !important;
  --comments-accent-bg: var(--bg) !important;
  --comments-accent: var(--tape-current-bg) !important;
  --comments-accent-hover: var(--cream-hover) !important;
  --comments-border: var(--text) !important;
  --comments-standard-border: 1px solid var(--card-border-color) !important;
  --comments-success: #2f7d32 !important;
  --comments-error: #b3392b !important;
  border-top: 1px solid var(--card-border-color) !important;
  border-bottom: 1px solid var(--card-border-color) !important;
  padding: 1.5rem 1rem !important;
  margin: 2.5rem 0 !important;
}

/* Höhere Spezifität als reines "#comments", falls das
   Pure-Comments-Widget selbst ein <style>-Tag mit eigenem
   border-Shorthand nachträglich einfügt, das sonst bei gleicher
   Spezifität durch spätere DOM-Position gewinnen und unsere
   Rahmenlinien zurücksetzen würde. */
html body #comments {
  border-top: 1px solid var(--card-border-color) !important;
  border-bottom: 1px solid var(--card-border-color) !important;
}

#comments input,
#comments textarea {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--card-border-color) !important;
  border-radius: var(--radius);
}

#comments .comments-header {
  border-bottom: none !important;
  background: none !important;
}

/* Buttons außerhalb des Kommentarbereichs (z.B. der Such-Button)
   nutzen sonst die rote Akzentfarbe des Grundthemes. */
button,
input[type="submit"] {
  background: var(--tape-current-bg) !important;
  color: var(--tape-current-text) !important;
  border: none !important;
  border-radius: var(--radius) !important;
}

button:hover,
input[type="submit"]:hover {
  background: var(--text) !important;
  color: var(--invert-text) !important;
}

#comments button {
  border-radius: var(--radius);
  color: var(--tape-current-text) !important;
}

#comments button:hover {
  background: var(--text) !important;
  color: var(--invert-text) !important;
}

/* ---------- Autor-Avatar in Kommentaren ----------
   Das über "Author avatar URL" in den Pure-Comments-Einstellungen
   gesetzte Bild kommt ohne Größenbegrenzung vom Widget - hier
   gezielt nur diese Klasse angefasst, damit ein eventuell per
   Markdown im Kommentartext eingebettetes Bild unangetastet bleibt. */
#comments img.comment-avatar,
html body #comments img.comment-avatar {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid var(--card-border-color);
  display: inline-block;
  vertical-align: middle;
}

/* ---------- Facepile-Avatare (Likes & Boosts, Bridgy-Backfeed) ---------- */
#comments a.facepile-item,
html body #comments a.facepile-item {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border-radius: 50% !important;
  overflow: hidden;
  line-height: 0;
}

#comments img.facepile-avatar,
html body #comments img.facepile-avatar {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid var(--card-border-color);
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Reaktionen (Likes & Boosts): schlichte Zeile statt Karte. */
#comments .reactions-group {
  display: block;
  padding: 0.75rem 0;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--card-border-color);
}

#comments .reactions-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

#comments .reactions-header .reaction-icon {
  color: var(--tape-current-bg);
}

#comments .facepile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Mobile: Header/Nav gestapelt, kleinere Schrift ---------- */
@media (max-width: 700px) {
  header {
    margin-top: 2rem;
    padding: 0 var(--content-pad) 1.25rem;
  }

  header h1,
  header .site-title {
    font-size: 3.3rem;
  }

  main {
    padding: 1.75rem var(--content-pad) 3rem;
  }

  main:not(:has(.excerpt-view)) h1 {
    font-size: 2rem;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Lesezeit in der mobilen Ansicht ausblenden, Datum bleibt
     sichtbar - gleicher Trick wie bei den Tag-Kommas. */
  main p:has(time) {
    font-size: 0 !important;
  }

  main p:has(time) time,
  main p:has(time) svg.icon:first-of-type {
    font-size: 0.75rem !important;
  }

  main p:has(> img):not(.h-card),
  main p:has(> video) {
    width: 100%;
  }

  /* Datum in der Liste auf schmalen Bildschirmen weglassen - Grid
     dafür auf eine Spalte umstellen, sonst würden zwei Titel ohne
     das wegfallende Datum nebeneinander statt untereinander
     landen. */
  .archive-list {
    grid-template-columns: 1fr !important;
  }

  .archive-list time {
    display: none !important;
  }
}

/* ---------- Kleine Detailschliffe ---------- */
::selection {
  background: var(--tape-current-bg);
  color: var(--tape-current-text);
}

::-moz-selection {
  background: var(--tape-current-bg);
  color: var(--tape-current-text);
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 3px solid var(--bg);
  border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--tape-current-bg);
}

/* ---------- Archiv-Liste: Datum & Titel-Modus ---------- */
/* .archive-list ist ein CSS-Grid mit abwechselnd <time> und <a> als
   direkte Kinder. Auf eine Spalte umgestellt, damit Datum und Titel
   pro Eintrag untereinander stehen statt nebeneinander. */
.archive-list {
  grid-template-columns: auto 1fr !important;
  column-gap: 1rem;
  row-gap: 0.5rem;
  align-items: baseline;
}

/* Reihenfolge pro Eintrag umkehren: Titel (a) zuerst, Datum (time)
   danach. Da .archive-list eine flache Liste ohne Wrapper pro
   Eintrag ist, geht das nur per expliziter grid-row-Zuweisung je
   Position - hier für bis zu 24 Einträge pro Seite abgedeckt. */

.archive-list time {
  display: block;
  color: var(--accent-rose);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.archive-list time::before {
  content: "> ";
  color: var(--text);
}

.archive-list > a {
  display: block;
  color: var(--tape-current-bg);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: underline;
}

.archive-list > a:hover {
  color: var(--text);
}

/* Besuchte Beiträge bewusst NICHT anders eingefärbt - bleiben wie
   unbesuchte Links in Grün. */

/* ---------- Hand-Rabe als feste Sidebar-Grafik ----------
   Fünf exakt übereinanderliegende CSS-Masken statt eines
   eingebetteten Bildes, damit die Farben automatisch über die
   Theme-Variablen laufen. Sitzt jetzt links als eigene schmale
   Sidebar, fixiert (bleibt beim Scrollen stehen), vertikal
   zentriert im Viewport - unabhängig vom eigentlichen Inhalt, der
   dafür nach rechts versetzt ist (siehe --layout-offset oben).
   Anker sind body/header/footer, da keines davon sonst ::before/
   ::after für etwas anderes nutzt. position:fixed verankert sich
   am Viewport, nicht am jeweiligen Host-Element - die Positionierung
   (left/top) ist daher für alle fünf Ebenen identisch und
   unabhängig davon, wo ihr jeweiliger Host auf der Seite sitzt. */
body::before {
  content: "";
  position: fixed;
  left: var(--layout-offset);
  top: 280px;
  transform: translateY(-50%);
  width: var(--raven-sidebar-w);
  height: calc(var(--raven-sidebar-w) * 171 / 195);
  background-color: var(--text);
  -webkit-mask-image: url('/content/images/raven-body-mask.svg');
  mask-image: url('/content/images/raven-body-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 1;
}

body::after {
  content: "";
  position: fixed;
  left: var(--layout-offset);
  top: 280px;
  transform: translateY(-50%);
  width: var(--raven-sidebar-w);
  height: calc(var(--raven-sidebar-w) * 171 / 195);
  background-color: #ffffff;
  -webkit-mask-image: url('/content/images/raven-sclera-mask.svg');
  mask-image: url('/content/images/raven-sclera-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 2;
}

header::before {
  content: "";
  position: fixed;
  left: var(--layout-offset);
  top: 280px;
  transform: translateY(-50%);
  width: var(--raven-sidebar-w);
  height: calc(var(--raven-sidebar-w) * 171 / 195);
  background-color: var(--accent-rose);
  -webkit-mask-image: url('/content/images/raven-red-eye-mask.svg');
  mask-image: url('/content/images/raven-red-eye-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 3;
}

header::after {
  content: "";
  position: fixed;
  left: var(--layout-offset);
  top: 280px;
  transform: translateY(-50%);
  width: var(--raven-sidebar-w);
  height: calc(var(--raven-sidebar-w) * 171 / 195);
  background-color: var(--tape-current-bg);
  -webkit-mask-image: url('/content/images/raven-chest-pupil-mask.svg');
  mask-image: url('/content/images/raven-chest-pupil-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 4;
}

footer::before {
  content: "";
  position: fixed;
  left: var(--layout-offset);
  top: 280px;
  transform: translateY(-50%);
  width: var(--raven-sidebar-w);
  height: calc(var(--raven-sidebar-w) * 171 / 195);
  background-color: var(--text);
  -webkit-mask-image: url('/content/images/raven-eye-outline-mask.svg');
  mask-image: url('/content/images/raven-eye-outline-mask.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 5;
}

/* Frei gewordene Hosts vom vorherigen Footer-Standort - ohne
   eigene Funktion mehr, aber harmlos. */
.indieweb-badge::before {
  content: none;
}

.footer-transmission::before {
  content: none;
}

/* Rabe auf schmalen Bildschirmen ausblenden und Inhalt wieder auf
   volle Breite setzen - für eine feste Sidebar ist einfach kein
   Platz. */
@media (max-width: 1000px) {
  body::before,
  body::after,
  header::before,
  header::after,
  footer::before {
    content: none;
  }

  /* Nur links/rechts zentrieren, margin-top unangetastet lassen -
     sonst würde das hier die spezifischeren 700px-Werte weiter
     unten im Code überschreiben (reine Quelltext-Reihenfolge). */
  header,
  main,
  footer {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- IndieWeb: h-card & Protokoll-Badges (Über-Seite) ---------- */
.h-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
}

.h-card .u-photo {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  flex-shrink: 0;
  margin: 0 !important;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--card-border-color);
}

.h-card .p-name {
  position: static;
  display: inline;
  padding: 0;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--text);
}

.protocol-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin: 0 0 2rem;
}

.protocol-badges a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: underline;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

/* Schlichte, einfarbige Icons statt Klammern/Emoji - per
   mask-image, daher automatisch in der jeweiligen Link-Farbe
   (Grundzustand gedämpft, bei Hover grün). Icon-Klasse muss im
   HTML-Snippet passend zum jeweiligen Link gesetzt werden
   (badge-icon-rss, -webmention, -opml, -fediverse, -indieweb). */
.badge-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.badge-icon-rss {
  -webkit-mask-image: url('/content/images/icon-rss.svg');
  mask-image: url('/content/images/icon-rss.svg');
}

.badge-icon-webmention {
  -webkit-mask-image: url('/content/images/icon-webmention.svg');
  mask-image: url('/content/images/icon-webmention.svg');
}

.badge-icon-opml {
  -webkit-mask-image: url('/content/images/icon-opml.svg');
  mask-image: url('/content/images/icon-opml.svg');
}

.badge-icon-fediverse {
  -webkit-mask-image: url('/content/images/icon-fediverse.svg');
  mask-image: url('/content/images/icon-fediverse.svg');
}

.badge-icon-indieweb {
  -webkit-mask-image: url('/content/images/icon-indieweb.svg');
  mask-image: url('/content/images/icon-indieweb.svg');
}

.protocol-badges a:hover {
  color: var(--tape-current-bg);
}

.indieweb-badge {
  display: inline-block;
  text-decoration: underline;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}

.indieweb-badge:hover {
  color: var(--tape-current-bg);
}

/* ---------- Meistgenutzte-Tags-Seite (/tag-cloud) ---------- */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin: 1.5rem 0;
}

.tag-cloud a {
  text-decoration: underline;
  color: var(--text);
}

.tag-cloud a:hover {
  color: var(--tape-current-bg);
}