/* ==========================================================================
   Theme: Typer (Ghost) – Typer-Styles für herrmontag.de
   Zusammengebaut aus Kirby base.css + typer/typer.css + Ghost-Ergänzungen.
   Reines Schwarz-Weiß, Inter (self-hosted), 2px-Rahmen, 8px-Radien,
   Dark Mode via prefers-color-scheme UND data-mode-Toggle.
   ========================================================================== */

/* ==========================================================================
   Neuzeit/Notes – Base styles
   Structure, layout and typography for all three theme variants.
   Every theme (minimal / terminal / retro) defines its own CSS variables
   and overrides the look-and-feel of the components below.
   ========================================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
pre,
table,
hr {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Layout ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--masthead-bg);
  border-bottom: var(--bw) solid var(--rule);
  backdrop-filter: blur(8px);
}

.masthead__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  min-height: var(--masthead-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.masthead__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-logo);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav__link {
  color: var(--fg-muted);
  font-size: var(--fs-small);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-s);
}

.nav__link:hover,
.nav__link[aria-current] {
  color: var(--fg);
  background: var(--bg-soft);
}

.nav__count {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--accent);
  vertical-align: super;
}

.nav__link--feed {
  font-weight: 600;
}

.main {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--pad-block) var(--gut) calc(var(--pad-block) * 2);
  min-height: 60vh;
}

/* ---------- Intro ---------- */
.intro {
  margin-bottom: var(--space-lg);
  padding-block: var(--space-md);
  border-bottom: var(--bw) solid var(--rule);
}

.intro__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  margin-bottom: 0.4em;
  text-wrap: balance;
}

.intro__sub {
  color: var(--fg-muted);
  font-size: var(--fs-lead);
  max-width: 44ch;
}

.breadcrumb {
  font-size: var(--fs-small);
  color: var(--fg-faint);
  margin-bottom: 0.75em;
}

.breadcrumb a {
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Chips / tags ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  font-size: var(--fs-small);
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-s);
  color: var(--fg-muted);
  background: var(--bg-soft);
}

.chip:hover {
  color: var(--fg);
  border-color: var(--accent);
}

.chip__hash {
  color: var(--accent);
  font-weight: 700;
}

.chip__x {
  color: var(--fg-faint);
  font-size: 1.1em;
  line-height: 1;
}

.chip--active-close {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent);
}

.chip--active-close .chip__x,
.chip--active-close:hover {
  color: var(--accent-ink);
}

/* ---------- Feed / note rows ---------- */
.feed {
  display: grid;
}

.note-row {
  display: grid;
  grid-template-columns: var(--col-date, 8rem) 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: var(--bw) solid var(--rule);
  transition: background 0.15s ease;
}

.note-row:first-of-type {
  border-top: var(--bw) solid var(--rule);
}

.note-row__date {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-small);
  color: var(--fg-faint);
  padding-top: 0.35em;
}

.note-row__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-display, 0);
}

.note-row__title a {
  color: var(--fg);
}

.note-row__title a:hover {
  color: var(--accent);
}

.note-row__excerpt {
  margin-top: 0.4em;
  color: var(--fg-muted);
  font-size: var(--fs-body);
  max-width: 62ch;
}

.note-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7em;
}

.note-row__tags a {
  font-size: var(--fs-small);
  color: var(--fg-faint);
  border: var(--bw) solid transparent;
  padding: 0.12rem 0.3rem;
}

.note-row__tags a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.feed__more {
  margin-top: var(--space-lg);
  text-align: center;
}

.feed__more a {
  color: var(--accent);
  font-weight: 600;
}

.feed__more a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: var(--space-lg);
}

.pagination__arrow,
.pagination__num {
  min-width: 2.3rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-s);
  color: var(--fg-muted);
  font-size: var(--fs-small);
}

.pagination__num:hover,
.pagination__arrow:hover {
  color: var(--fg);
  border-color: var(--accent);
}

.pagination__num.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.pagination__gap {
  color: var(--fg-faint);
  padding-inline: 0.25rem;
}

.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Article: note ---------- */
.note {
  max-width: var(--measure);
  margin-inline: auto;
}

.note__cover {
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.note__cover a {
  display: block;
}

.note__cover img {
  display: block;
  width: 100%;
}

.note__header {
  padding-bottom: var(--space-md);
  border-bottom: var(--bw) solid var(--rule);
  margin-bottom: var(--space-lg);
}

.note__date {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-small);
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.note__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  margin-block: 0.35em 0.4em;
  text-wrap: balance;
}

.note__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ---------- Article: static pages ---------- */
.page {
  max-width: var(--measure);
  margin-inline: auto;
}

.page__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-display);
  margin-bottom: var(--space-md);
}

.page__header {
  margin-bottom: var(--space-lg);
}

/* ---------- Error page ---------- */
.error-page {
  text-align: center;
  padding-block: var(--space-xl);
}

.error-page__code {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.3em;
}

.error-page__links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: var(--space-lg);
}

.error-page__links a {
  color: var(--fg-muted);
  border-bottom: var(--bw) solid var(--accent);
  padding-bottom: 2px;
}

/* ---------- Prev/next ---------- */
.note-nav {
  max-width: var(--measure);
  margin-inline: auto;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--bw) solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.note-nav__link {
  display: block;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.3;
}

.note-nav__link:hover {
  color: var(--accent);
}

.note-nav__link--next {
  text-align: right;
}

.note-nav__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--fg-faint);
  margin-bottom: 0.3em;
}

/* ---------- Footer ---------- */
.colophon {
  border-top: var(--bw) solid var(--rule);
  background: var(--bg-soft);
}

.colophon__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--space-xl) var(--gut);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-lg);
}

.colophon__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-logo);
  color: var(--fg);
}

.colophon__claim {
  margin-top: 0.6em;
  color: var(--fg-muted);
  font-size: var(--fs-small);
  max-width: 34ch;
}

.colophon__feed {
  display: inline-block;
  margin-top: 0.9em;
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: 600;
}

.colophon__feed:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.colophon__heading {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.7em;
}

.colophon__nav ul {
  display: grid;
  gap: 0.45em;
}

.colophon__nav a {
  color: var(--fg-muted);
  font-size: var(--fs-small);
}

.colophon__nav a:hover {
  color: var(--accent);
}

.colophon__bottom {
  border-top: var(--bw) solid var(--rule);
}

.colophon__bottom {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--space-md) var(--gut);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--fg-faint);
}

.colophon__bottom a {
  color: var(--fg-muted);
}

/* ---------- Theme switcher ---------- */
.theme-switch {
  display: inline-flex;
  gap: 2px;
  margin-left: 0.5rem;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-s);
  padding: 2px;
}

.theme-switch__link {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  padding: 0.25rem 0.5rem;
  border-radius: calc(var(--radius-s) - 2px);
  line-height: 1;
}

.theme-switch__link:hover {
  color: var(--fg);
}

.theme-switch__link[aria-current] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ---------- Prose (rendered Ghost content) ---------- */
.prose {
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--font-display);
  line-height: 1.2;
  letter-spacing: var(--ls-display, 0);
  margin-top: 1.6em;
  scroll-margin-top: calc(var(--masthead-h) + 1rem);
}

.prose h2 { font-size: var(--fs-h2); }
.prose h3 { font-size: var(--fs-h3); }
.prose h4 { font-size: var(--fs-h4); }

.prose p {
  text-wrap: pretty;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose strong,
.prose b {
  font-weight: 650;
  color: var(--fg);
}

.prose em {
  font-style: italic;
}

.prose del {
  color: var(--fg-faint);
}

.prose small {
  font-size: 0.85em;
  color: var(--fg-muted);
}

.prose ul,
.prose ol {
  padding-inline-start: 1.4em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose ul li,
.prose ol li {
  margin-top: 0.35em;
}

.prose ul ul,
.prose ol ol {
  margin-top: 0.35em;
}

.prose ul ul { list-style: circle; }
.prose ul ul ul { list-style: square; }

.prose hr {
  border: 0;
  border-top: var(--bw) solid var(--rule);
  margin-block: 2em;
}

.prose blockquote {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 1.2em;
  margin-block: 1.4em;
  color: var(--fg-muted);
}

.prose blockquote blockquote {
  border-inline-start-color: var(--fg-faint);
}

.prose sup {
  font-size: 0.75em;
}

.prose sup a,
.prose .footnote-ref a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-code);
  border: var(--bw) solid var(--rule);
  border-radius: 4px;
  padding: 0.12em 0.4em;
}

.prose pre {
  margin-block: 1.4em;
  padding: var(--space-md);
  background: var(--bg-code);
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-m);
  overflow-x: auto;
  font-size: var(--fs-code);
  line-height: 1.6;
  tab-size: 4;
}

.prose pre code {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}

.copy-btn {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-s);
  color: var(--fg-muted);
  background: var(--bg-soft);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.copy-btn:hover {
  opacity: 1;
  color: var(--fg);
}

.prose img {
  border-radius: var(--radius-m);
}

.prose figure {
  margin-block: var(--space-lg);
}

.prose figure img + figcaption,
.prose figcaption {
  margin-top: 0.6em;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--fg-faint);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  margin-block: 1.4em;
}

.prose th,
.prose td {
  border: var(--bw) solid var(--rule);
  padding: 0.5em 0.8em;
  text-align: start;
  vertical-align: top;
}

.prose th {
  background: var(--bg-soft);
  font-weight: 650;
}

/* Ghost cards ------------------------------------------------------ */

/* generic card wrapper */
.prose .kg-card {
  margin-block: var(--space-lg);
}

.prose .kg-card img {
  display: block;
}

/* image cards */
.prose .kg-image-card img {
  margin-inline: auto;
}

/* wide / full width */
.prose .kg-width-wide {
  width: var(--breakout, 52rem);
  max-width: calc(100vw - (var(--gut) * 2));
  margin-inline: calc(50% - (var(--breakout, 52rem) / 2));
  text-align: center;
}

.prose .kg-width-full {
  width: var(--breakout, 52rem);
  max-width: calc(100vw - (var(--gut) * 2));
  margin-inline: calc(50% - (var(--breakout, 52rem) / 2));
  text-align: center;
}

/* galleries */
.prose .kg-gallery-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.prose .kg-gallery-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.prose .kg-gallery-row:has(:only-child) { grid-template-columns: 1fr; }
.prose .kg-gallery-row:has(> *:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }

.prose .kg-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-m);
}

/* bookmark cards */
.prose .kg-bookmark-card {
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-soft);
}

.prose .kg-bookmark-container {
  display: grid;
  grid-template-columns: 1fr auto;
}

.prose .kg-bookmark-content {
  padding: var(--space-md);
  display: grid;
  gap: 0.5em;
  align-content: start;
}

.prose .kg-bookmark-title {
  font-weight: 650;
  color: var(--fg);
  line-height: 1.3;
}

.prose .kg-bookmark-description {
  color: var(--fg-muted);
  font-size: var(--fs-small);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prose .kg-bookmark-metadata {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-small);
  color: var(--fg-faint);
}

.prose .kg-bookmark-icon {
  width: 1.3em;
  height: 1.3em;
  border-radius: 3px;
  margin: 0 !important;
}

.prose .kg-bookmark-thumbnail {
  display: none;
}

.prose .kg-bookmark-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 560px) {
  .prose .kg-bookmark-thumbnail {
    display: block;
    width: 12rem;
  }
}

/* callout cards */
.prose .kg-callout-card {
  display: flex;
  gap: 0.8em;
  align-items: flex-start;
  padding: var(--space-md);
  border-radius: var(--radius-m);
  border: var(--bw) solid var(--rule);
  background: var(--bg-soft);
}

.prose .kg-callout-emoji {
  font-size: 1.3em;
  line-height: 1.4;
}

.prose .kg-callout-text {
  font-size: var(--fs-body);
}

.prose .kg-callout-text a { color: var(--accent); }

.prose .kg-callout-card-blue   { border-inline-start: 3px solid #3b82f6; }
.prose .kg-callout-card-green  { border-inline-start: 3px solid #22c55e; }
.prose .kg-callout-card-yellow { border-inline-start: 3px solid #eab308; }
.prose .kg-callout-card-red    { border-inline-start: 3px solid #ef4444; }
.prose .kg-callout-card-pink   { border-inline-start: 3px solid #ec4899; }
.prose .kg-callout-card-purple { border-inline-start: 3px solid #8b5cf6; }
.prose .kg-callout-card-accent { border-inline-start: 3px solid var(--accent); }

/* embed cards */
.prose .kg-embed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
}

.prose .kg-embed-card iframe {
  max-width: 100%;
  border-radius: var(--radius-m);
}

/* toggle cards */
.prose .kg-toggle-card {
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-m);
  padding: var(--space-md);
  background: var(--bg-soft);
}

.prose .kg-toggle-heading { cursor: pointer; }

.prose .kg-toggle-heading-text {
  font-weight: 650;
  color: var(--fg);
}

.prose .kg-toggle-content {
  margin-top: 0.8em;
  color: var(--fg-muted);
}

/* file cards */
.prose .kg-file-card {
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-m);
  background: var(--bg-soft);
}

.prose .kg-file-card-container {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: var(--space-md);
}

.prose .kg-file-card-title {
  font-weight: 650;
  color: var(--fg);
}

.prose .kg-file-card-caption {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

.prose .kg-file-card-metadata {
  font-size: var(--fs-small);
  color: var(--fg-faint);
}

.prose .kg-file-card-icon {
  margin-inline-start: auto;
  color: var(--accent);
}

/* video / audio cards */
.prose .kg-video-card,
.prose .kg-audio-card {
  width: 100%;
}

.prose .kg-video-card video {
  width: 100%;
  border-radius: var(--radius-m);
}

/* header cards (rare) */
.prose .kg-header-card {
  background: var(--bg-soft);
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-m);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

.prose .kg-header-card h2,
.prose .kg-header-card h3 {
  margin-top: 0;
  font-size: var(--fs-h2);
}

/* footnotes (from older Ghost html cards) */
.prose hr.footnotes-sep {
  margin-top: 2.5em;
}

.prose section.footnotes {
  margin-top: 2.5em;
  padding-top: 1.2em;
  border-top: var(--bw) solid var(--rule);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

.prose section.footnotes ol {
  padding-inline-start: 1.2em;
  display: grid;
  gap: 0.6em;
}

.prose section.footnotes li {
  line-height: 1.5;
}

.prose .footnotes-sep + p { margin-top: 0; }

/* legacy tags we still want to look okay */
.prose font { color: inherit; }

/* external links get a small arrow */
@media (min-width: 40rem) {
  .prose a[href^="http"]::after {
    content: " ↗";
    font-size: 0.7em;
    opacity: 0.6;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .masthead__inner {
    flex-direction: column;
    gap: 0;
    padding-block: 0.75rem;
  }

  .nav {
    justify-content: center;
    row-gap: 0.15rem;
  }

  .note-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .colophon__inner {
    grid-template-columns: 1fr 1fr;
  }

  .colophon__brand {
    grid-column: 1 / -1;
  }

  .theme-switch {
    margin-inline-start: 0.35rem;
  }
}

@media (max-width: 480px) {
  .colophon__inner {
    grid-template-columns: 1fr;
  }

  .nav__link--feed {
    display: none;
  }
}

/* ---------- Accessibility & print ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .masthead,
  .colophon,
  .theme-switch,
  .note-nav,
  .pagination,
  .feed__more {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    color: #000 !important;
  }
}
/* ==========================================================================
   Theme: Typer
   Nachbau des „Typer“-Demos (demo.themesforkirby.com/typer) von
   Themes for Kirby: reines Schwarz-Weiß, Inter 400/700/900, fette
   typografische Titel, 2px-Rahmen #ececee, 8px-Radien, kurze 32px-Hairlines,
   flattente Schnitt ohne Schatten, Dark Mode via prefers-color-scheme.
   ========================================================================== */

/* ---------- Fonts: Inter 400/700/900 (lokal gehostet) ---------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-var.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.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;
}

/* ---------- Design tokens ---------- */

:root {
  /* Ghost-Font-Settings (gscan GS051): Typer ist konsequent Inter. */
  --gh-font-heading: 'Inter', Helvetica, Arial, sans-serif;
  --gh-font-body: 'Inter', Helvetica, Arial, sans-serif;

  /* colors – reines Schwarz-Weiß wie im Demo */
  --bg: #fff;
  --bg-soft: #f7f7f8;
  --bg-code: #f4f4f6;
  --fg: #000;
  --fg-muted: #666;            /* demo: .muted = opacity .6 auf weiß */
  --fg-faint: #767676;         /* 4.5:1 auf weiß */
  --rule: #ececee;             /* demo-Standardrahmen (2px) */
  --rule-soft: #f1f1f2;
  --rule-strong: #d9d9dd;
  --link: #000;
  --link-hover: #666;          /* demo: a:hover opacity .6 */
  --accent: #000;              /* Primärfläche schwarz */
  --accent-ink: #fff;
  --accent-soft: rgba(0, 0, 0, 0.07);
  --glow: rgba(0, 0, 0, 0.045);
  --selection-bg: #000;
  --selection-fg: #fff;
  --masthead-bg: rgba(255, 255, 255, 0.92);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --code-ink: #111;

  /* hub – vinylisation.de patch color (wie ember) */
  --vinyl: #9a5fd6;
  --vinyl-soft: rgba(154, 95, 214, 0.12);

  color-scheme: light;

  /* prism token colors – auf hellem Codepanel */
  --prism-comment: #8a8a8a;
  --prism-punctuation: #555;
  --prism-string: #18837c;
  --prism-number: #b3541e;
  --prism-keyword: #c2185b;
  --prism-function: #1a73e8;
  --prism-tag: #1a73e8;
  --prism-class: #1a73e8;
  --prism-operator: #c2185b;
  --prism-boolean: #b3541e;

  /* type */
  --font-body: 'Inter', Helvetica, Arial, sans-serif;
  --font-display: 'Inter', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
    'Liberation Mono', monospace;
  --fs-body: 16px;
  --fs-lead: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-code: 0.875rem;
  --fs-logo: 1.3125rem;
  --fs-hero: clamp(2rem, 6vw, 4.5rem);        /* .title-hero 32 → 72px */
  --fs-h1: 3.5rem;                           /* demo h1 = 56/72 */
  --fs-h2: 3rem;                             /* demo h2 = 48/56 */
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --lh-body: 1.5;                             /* 16/24 */
  --lh-prose: 1.7;                            /* demo Artikeltext .paragraph-2x = 20/34 */
  --ls-display: 0;                            /* Demo hat kein negatives Letter-Spacing */

  /* layout */
  --maxw: 75rem;              /* demo .max-width-lg = 1200px */
  --gut: clamp(1.15rem, 4vw, 1.75rem);
  --measure: 75rem;           /* Artikelframework 1200px, Text/Intro auf 680px */
  --breakout: 54rem;
  --masthead-h: 4rem;         /* demo .header-main = 64px */
  --col-date: 7rem;
  --bw: 2px;                  /* demo: border 2px #ececee */
  --radius-s: 4px;             /* demo: buttons/tags 4px */
  --radius-m: 8px;             /* demo: cards/images/pre 8px */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.6rem;
  --space-lg: 2.75rem;
  --space-xl: 4rem;
  --pad-block: 5rem;          /* demo .padding = 80px */
}

/* demo mobil (≤767px): h1 32/40, h2 24/32, h2-Schriftstärke 700 */
@media (max-width: 767px) {
  :root {
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
  }
}

/* Systempräferenz – außer der Nutzer hat explizit light gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    /* demo: body.dark = hsl(0,0%,4%) / #eee, Rahmen #333 */
    --bg: #0a0a0a;
    --bg-soft: #141414;
    --bg-code: #161616;
    --fg: #eee;
    --fg-muted: #999;
    --fg-faint: #8a8a8a;
    --rule: #333;
    --rule-soft: #242424;
    --rule-strong: #444;
    --link: #eee;
    --link-hover: #999;
    --accent: #eee;
    --accent-ink: #0a0a0a;
    --accent-soft: rgba(255, 255, 255, 0.10);
    --glow: rgba(255, 255, 255, 0.05);
    --selection-bg: #eee;
    --selection-fg: #0a0a0a;
    --masthead-bg: rgba(10, 10, 10, 0.92);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --code-ink: #eee;
    --vinyl: #c08af0;
    --vinyl-soft: rgba(192, 138, 240, 0.15);
    color-scheme: dark;
  }
}

/* Explizite Wahl über den Light/Dark-Toggle */
:root[data-mode="dark"] {
  /* demo: body.dark = hsl(0,0%,4%) / #eee, Rahmen #333 */
  --bg: #0a0a0a;
  --bg-soft: #141414;
  --bg-code: #161616;
  --fg: #eee;
  --fg-muted: #999;
  --fg-faint: #8a8a8a;
  --rule: #333;
  --rule-soft: #242424;
  --rule-strong: #444;
  --link: #eee;
  --link-hover: #999;
  --accent: #eee;
  --accent-ink: #0a0a0a;
  --accent-soft: rgba(255, 255, 255, 0.10);
  --glow: rgba(255, 255, 255, 0.05);
  --selection-bg: #eee;
  --selection-fg: #0a0a0a;
  --masthead-bg: rgba(10, 10, 10, 0.92);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --code-ink: #eee;
  --vinyl: #c08af0;
  --vinyl-soft: rgba(192, 138, 240, 0.15);
  color-scheme: dark;
}

/* ---------- Masthead ---------- */

.masthead {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: transparent;  /* demo: Kopfzeile ohne Linie */
}

.masthead__logo {
  font-weight: 900;
  letter-spacing: 0;            /* demo .logo: kein Tracking */
  font-size: 1.3rem;
}

.nav__link {
  border-radius: var(--radius-s);
}

.nav__link:hover,
.nav__link[aria-current] {
  background: var(--accent-soft);
  color: var(--fg);
}

.nav__count {
  color: var(--link);
}

/* ---------- Intro / Hero ---------- */

.main {
  padding-bottom: var(--pad-block);  /* demo: 80px statt 160px */
}

.intro {
  max-width: 680px;           /* demo: eine einzige schmale Spalte (.max-width-sm) */
  margin-inline: auto;
  border-bottom: 0;           /* demo: keine Trennlinien */
  padding-block: var(--space-sm) var(--space-lg);
}

.intro__title {
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0;            /* demo: keine negativen Trackings */
}

.intro__sub {
  color: var(--fg-muted);
}

.intro__meta {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  margin-top: 1.1em;
}

.breadcrumb {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

/* ---------- Feed / Note-Rows – Demo-Liste: 680px, ohne Trennlinien ----------
   Demo-Reihenfolge pro Post: Titel (48/56, w900) → Datum (14px, .muted) →
   Beitragsbild (680×320, Radius 8) → Excerpt (18/28), 80px Abstand.        */

.feed {
  max-width: 680px;           /* demo .max-width-sm */
  margin-inline: auto;
}

.note-row {
  display: block;
  border: 0;
  padding: 0;
  margin-bottom: 5rem;        /* demo .space-bottom = 80px */
}

.note-row:first-of-type {
  border-top: 0;
}

.note-row:last-of-type {
  margin-bottom: 0;
}

.note-row__date {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;            /* demo .font-size-md */
  line-height: 16px;
  color: var(--fg);
  opacity: 0.6;               /* demo .muted */
  padding: 0;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;        /* demo .space-bottom-1x */
}

.note-row__title {
  font-weight: 900;
  font-size: 3rem;            /* demo main h2 = 48px */
  line-height: 56px;
  letter-spacing: 0;
  margin-bottom: 12px;        /* demo h2 = margin 0 0 12px */
}

.note-row__title a {
  color: var(--fg);
}

.note-row__title a:hover {
  color: var(--link-hover);
}

/* Beitragsbild im Feed (nur Typer-Markup): volle Spaltenbreite,
   auf 680×320 zugeschnitten wie demo .max-height-md. */
.note-row__cover {
  display: block;
  margin-top: 32px;           /* demo .space-top-2x */
  margin-bottom: 32px;        /* demo .space-bottom-2x */
  border-radius: var(--radius-m);
  overflow: hidden;
}

.note-row__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 680 / 320;
  object-fit: cover;
  object-position: center;
}

.note-row__excerpt {
  color: var(--fg);
  font-size: 18px;            /* demo .paragraph = 18/28 */
  line-height: 28px;
  margin-top: 0;
  max-width: none;
}

/* demo mobil (≤767px): h2 = 24/32, w700 */
@media (max-width: 767px) {
  .note-row__title {
    font-size: 1.5rem;
    line-height: 32px;
    font-weight: 700;
  }
}

.note-row__tags a {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-s);
  padding: 0.05rem 0.45rem;
}

.note-row__tags a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
}

.feed__more a {
  color: var(--link);
}

/* ---------- Chips & Pagination ---------- */

.chip {
  border-radius: var(--radius-s);
  background: var(--bg);
  font-weight: 600;
}

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

.chip--active-close {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.pagination {
  margin-top: 5rem;           /* demo .space-top = 80px nach dem letzten Post */
}

.pagination__arrow,
.pagination__num {
  border-radius: var(--radius-s);
  font-weight: 500;
}

.pagination__num.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

/* ---------- Single note / Artikel ----------
   Demo-Artikel: zentrierter Kopf auf 680px (Titel 56/72 w900, darunter
   Datum 14px .muted), Hero-Bild darunter über die vollen 1200px,
   darunter der Text auf 680px. Kein Rahmen unter dem Kopf.            */

.note {
  display: flex;
  flex-direction: column;
}

.note__cover {
  order: 2;                   /* demo: erst Titel+Datum, dann Hero */
  margin-bottom: 48px;        /* demo .space-bottom-3x */
  border-radius: var(--radius-m);
}

.note__header {
  order: 1;
  max-width: 680px;           /* demo Artikeltext = 680px */
  margin-inline: auto;
  margin-bottom: 80px;        /* demo .space-bottom */
  padding-bottom: 0;
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.note__date {
  order: 2;
  margin-top: 12px;           /* demo h1/h2 margin-bottom 12px */
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  opacity: 0.6;               /* demo .muted */
  font-variant-numeric: tabular-nums;
}

.note__title {
  order: 1;
  font-weight: 900;
  line-height: 1.286;         /* demo h1 = 56/72 */
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

.note__tags {
  order: 3;
  margin-top: 24px;
  justify-content: center;
}

.note__content {
  order: 3;
  max-width: 680px;           /* demo: Textspalte 680px (.max-width-none → 680) */
  margin-inline: auto;
}

/* statische Seiten: wie im Demo-Artikel auf 680px */
.page {
  max-width: 680px;
}

/* ---------- Prev / Next – demo: 2-Spalten mit title-h4 (24/32, w700) ---------- */

.note-nav__link {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.33;
  letter-spacing: 0;
}

.note-nav__link:hover {
  color: var(--link-hover);
}

.note-nav__label {
  color: var(--fg-muted);
}

/* ---------- Fehlerseite ---------- */

.error-page__code {
  color: var(--fg);
}

.error-page__links a {
  border-bottom-color: var(--accent);
}

/* ---------- Prose ----------
   Demo .paragraph-2x: 20/34 am Desktop, 18/30 mobil; Absätze 16px Abstand,
   Überschriften 48px darüber / 12px darunter, kein negatives Letter-Spacing. */

.prose {
  font-size: 1.25rem;         /* 20px */
  line-height: var(--lh-prose); /* 34px */
}

.prose > * + * {
  margin-top: 16px;           /* demo main p = margin 0 0 16px */
}

.prose > :first-child {
  margin-top: 0;              /* demo: erster Block bündig unter dem Hero */
}

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-weight: 900;
  letter-spacing: 0;
  margin-top: 48px;           /* demo Blockabstand = 48px */
  margin-bottom: 12px;        /* demo h1–h6 = margin 0 0 12px */
}

.prose h4,
.prose h5,
.prose h6 {
  font-weight: 700;
}

.prose h2 {
  font-size: var(--fs-h2);
  line-height: 1.17;          /* demo 48/56 */
}

/* demo: h3 = 32px, h4 = 24px */
.prose h3 {
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  line-height: 1.25;          /* demo 32/40 */
}

.prose h4 {
  font-size: 1.5rem;
  line-height: 1.33;          /* demo 24/32 */
}

.prose h5 {
  font-size: var(--fs-h4);
  line-height: 1.4;           /* demo 20/28 */
}

.prose h6 {
  font-size: var(--fs-body);
  line-height: 1.5;           /* demo 16/24 */
}

.prose a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

.prose strong,
.prose b {
  font-weight: 900;
}

/* demo: hr = 2px schwarz, nur 32px breit */
.prose hr {
  border-top: 2px solid var(--fg);
  width: 32px;
  margin-block: 2.4em;
}

.prose hr.footnotes-sep {
  width: 100%;
  border-top-color: var(--rule);
}

.prose blockquote {
  border-inline-start-color: var(--accent);
  color: var(--fg-muted);
}

.prose code {
  background: var(--bg-code);
  border-color: var(--rule);
  border-radius: var(--radius-s);
}

.prose pre,
.prose pre[class*="language-"] {
  background: var(--bg-code);
  color: var(--code-ink);
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-m);
  box-shadow: none;
}

.copy-btn {
  background: var(--bg);
  border-color: var(--rule);
}

.prose figure img,
.prose .kg-gallery-image img {
  border-radius: var(--radius-m);
}

.prose th {
  background: var(--bg-soft);
  font-weight: 700;
}

.prose th,
.prose td {
  border-color: var(--rule);
}

/* ---------- Footer / Colophon ----------
   Demo: keine Trennlinien, zentrierter, gedämpfter Footer. */

.colophon {
  background: var(--bg);
  border-top-width: 0;
}

.colophon__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 680px;
}

.colophon__logo {
  font-weight: 900;
  letter-spacing: 0;
}

.colophon__claim,
.colophon__nav a,
.colophon__bottom {
  color: var(--fg-muted);
}

.colophon__heading {
  color: var(--fg);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.colophon__feed {
  color: var(--link);
}

.colophon__bottom {
  border-top-width: 0;
  justify-content: center;
  text-align: center;
}

/* ---------- Theme-Switcher ---------- */

.theme-switch {
  border-color: var(--rule);
  border-radius: var(--radius-s);
}

.theme-switch__link {
  border-radius: calc(var(--radius-s) - 2px);
}

.theme-switch__link[aria-current] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---------- Hub: gemischte Zeitlinie (wie ember) ---------- */

.note-row__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: var(--bw) solid var(--rule-strong);
  border-radius: var(--radius-s);
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}

.note-row__badge--status {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent);
}

.note-row__badge--vinyl {
  color: var(--vinyl);
  border-color: var(--vinyl);
  background: var(--vinyl-soft);
}

/* externer Titel: dezenter Hinweis, dass es in die andere Quelle geht */
.note-row__title a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.72em;
  color: var(--fg-faint);
}

.hub-more {
  margin-top: 5rem;           /* demo: gleiche 80px-Rhythmik wie .pagination */
  text-align: center;
}

.hub-more__btn {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border: var(--bw) solid var(--accent);
  border-radius: var(--radius-s);
  padding: 0.55rem 1.5rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.hub-more__btn:hover,
.hub-more__btn:focus-visible {
  background: var(--link-hover);
  border-color: var(--link-hover);
}

.hub-more__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.hub-more__status {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  margin-top: 0.7rem;
}

/* ---------- Demo mobil (≤767px): Artikeltext 18/30 ---------- */
@media (max-width: 767px) {
  .prose {
    font-size: 1.125rem;
    line-height: 30px;
  }

  .note__header {
    margin-bottom: 48px;
  }
}


/* ==========================================================================
   Ghost-Ergänzungen: Widgets & Code-Injection-Anpassungen im Typer-Look.
   Portiert aus gruvbox-terminal/terminal.css, übersetzt auf Typer-Variablen.
   ========================================================================== */

/* ---------- Status-/Akzentfarben (Hell + Dunkel) ---------- */
:root {
  --green: #2e9e4f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --green: #3aa757;
  }
}

:root[data-mode="dark"] {
  --green: #3aa757;
}

/* ---------- Suche & Mobile-Navigation ---------- */
.masthead__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.search-button {
  all: unset;
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-s);
}

.search-button:hover {
  color: var(--fg);
  background: var(--bg-soft);
}

.search-button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.nav-toggle {
  display: none;
}

@media screen and (max-width: 767px) {
  .masthead__inner {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    color: var(--fg-muted);
    background: none;
    border: var(--bw) solid var(--rule-strong);
    border-radius: var(--radius-s);
    padding: 3px 8px;
  }

  .nav-toggle:hover {
    color: var(--fg);
    border-color: var(--fg);
  }

  .nav {
    display: none;
    width: 100%;
    padding-bottom: 12px;
  }

  .nav.is-open {
    display: flex;
  }

  .nav .nav__link {
    padding: 0.45rem 0.6rem;
  }
}

/* ---------- Light/Dark-Toggle (Buttons statt Varianten-Links) ---------- */
.theme-switch button {
  all: unset;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  padding: 0.25rem 0.5rem;
  border-radius: calc(var(--radius-s) - 2px);
  line-height: 1;
}

.theme-switch button:hover {
  color: var(--fg);
}

.theme-switch button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}

.theme-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ---------- Status-Indikator ---------- */
.status-indicator {
  margin-top: 1.1rem;
}

.status-indicator a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 12px;
  border: var(--bw) solid var(--rule-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
}

.status-indicator a:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.status-indicator a span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green);
  animation: hm-pulse 2.2s ease-in-out infinite;
}

@keyframes hm-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot {
    animation: none;
  }
}

/* ---------- Boxen (View-Counter, Author, Last.fm) ---------- */
.box {
  margin: 20px 0 26px;
  padding: 14px 16px;
  border: var(--bw) solid var(--rule);
  background: var(--bg-soft);
  border-radius: var(--radius-m);
}

.box-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.box p:last-child {
  margin-bottom: 0;
}

.box a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.box .avatar {
  float: none;
  margin: 0 14px 6px 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

/* ---------- Post-Extras (View-Counter, Kommentare, Top-Artikel) ---------- */
.post-extras {
  max-width: 680px;
  margin-inline: auto;
  margin-top: var(--space-xl);
  padding-top: 26px;
  border-top: var(--bw) solid var(--rule);
  text-align: left;
}

.post-extras h4 {
  margin: 26px 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.post-extras h4:first-child {
  margin-top: 0;
}

.top-articles {
  margin: 0;
  padding-left: 20px;
}

.top-articles li {
  margin-bottom: 5px;
  font-size: 15px;
}

.section-hint {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--fg-faint);
}

/* Autor-Box */
.author-box .avatar {
  vertical-align: middle;
}

/* Isso-/PureComments-Kommentare an das Typer-Design heranführen */
#comments {
  margin-top: 6px;
}

.isso-comment,
#comments .comments,
#comments .comment,
#comments .comments-list,
#comments .reply-list {
  font-family: var(--font-body) !important;
  color: var(--fg) !important;
  font-size: 15px !important;
}

#comments a {
  color: var(--fg) !important;
}

#comments .comment-header,
#comments .comment-date {
  color: var(--fg-faint) !important;
  font-size: 12.5px !important;
}

#comments textarea,
#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"] {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--fg) !important;
  background: var(--bg) !important;
  border: var(--bw) solid var(--rule-strong) !important;
  border-radius: var(--radius-s) !important;
}

#comments button,
#comments .button,
#comments input[type="submit"] {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600;
  color: var(--accent-ink) !important;
  background: var(--accent) !important;
  border: var(--bw) solid var(--accent) !important;
  border-radius: var(--radius-s) !important;
  padding: 6px 14px !important;
  cursor: pointer;
}

#comments .comment-preview,
#comments .preview {
  background: var(--bg-soft) !important;
  border-left: var(--bw) solid var(--accent) !important;
}

/* ---------- Webmentions ---------- */
.webmentions {
  margin-top: var(--space-lg);
  padding-top: 26px;
  border-top: var(--bw) solid var(--rule);
  text-align: left;
}

.webmentions > h2 {
  margin: 0 0 22px;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 900;
  letter-spacing: 0;
  text-align: left;
}

.wm-group {
  margin-bottom: 28px;
}

.wm-group h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.wm-group h3 span {
  color: var(--fg);
}

/* Likes & Reposts: Avatare in einer Reihe */
.wm-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wm-faces li {
  margin: 0;
  padding: 0;
}

.wm-faces li a {
  display: block;
  line-height: 0;
  border-bottom: 0;
}

.wm-faces li img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--bw) solid var(--rule);
  filter: grayscale(1);
  transition: border-color 0.2s, filter 0.2s, transform 0.15s;
}

.wm-faces li a:hover img {
  border-color: var(--fg);
  filter: grayscale(0);
  transform: scale(1.08);
}

/* Antworten & Erwähnungen */
.wm-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wm-item {
  display: flex;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0 0 0 16px;
  border-left: var(--bw) solid var(--rule);
  font-size: 15.5px;
  line-height: 1.55;
}

.wm-item:hover {
  border-left-color: var(--rule-strong);
}

.wm-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  border: var(--bw) solid var(--rule);
  filter: grayscale(1);
}

.wm-body {
  flex: 1;
  min-width: 0;
}

.wm-body header {
  margin: 0 0 4px;
  padding: 0;
  font-size: 12.5px;
  font-style: normal;
  text-align: left;
  color: var(--fg-faint);
  background: none;
}

.wm-body header a {
  color: var(--fg);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wm-body header a:hover {
  color: var(--link-hover);
}

.wm-body header time {
  margin-left: 8px;
  color: var(--fg-faint);
}

.wm-kind {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 10.5px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}

.wm-body p {
  margin: 0 0 4px;
}

.wm-body p:last-child {
  margin-bottom: 0;
}

.wm-source {
  font-size: 12.5px;
}

.wm-source a {
  color: var(--fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wm-empty,
.wm-error {
  font-size: 15px;
  font-style: italic;
  text-align: center;
  color: var(--fg-muted);
  margin: 0;
}

/* ---------- Last.fm-Widget (im Colophon) ---------- */
.colophon > .lastfm-widget {
  max-width: 680px;
  width: 100%;
  margin: var(--space-lg) auto 0;
  text-align: left;
}

.lastfm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  margin-bottom: 11px;
  border-bottom: var(--bw) solid var(--rule);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}

.lastfm-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lastfm-label [data-lastfm-status] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lastfm-logo {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--fg-faint);
  border-bottom: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.lastfm-logo:hover {
  color: var(--fg);
}

.lastfm-body {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.lastfm-art-link {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 44px;
  height: 44px;
  background: var(--bg);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-s);
  color: var(--fg-faint);
  font-size: 17px;
  line-height: 42px;
  text-align: center;
}

.lastfm-art-link::after {
  content: "\266B";
}

.lastfm-art-link:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.lastfm-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: var(--bw) solid var(--rule-strong);
  border-radius: var(--radius-s);
  filter: grayscale(0.4);
  transition: filter 0.2s ease;
}

.lastfm-art-link:hover .lastfm-art {
  filter: grayscale(0);
}

.lastfm-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lastfm-line__track {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lastfm-line__meta {
  font-size: 12.5px;
  color: var(--fg-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Artikeldetail: Hero auf Originalzuschnitt ---------- */
.note__cover {
  overflow: hidden;
}

.note__cover a {
  display: block;
}

.note__cover img {
  display: block;
  width: 100%;
  aspect-ratio: 1400 / 800;
  object-fit: cover;
  object-position: center;
}

/* ---------- Responsive Embeds (Wrapper wird per Injection erzeugt) ---------- */
.responsive-embed-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 1.6em 0;
}

.responsive-embed-wrapper iframe,
.responsive-embed-wrapper object,
.responsive-embed-wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.prose .kg-embed-card {
  width: 100% !important;
  margin: 1.6em 0;
}

.prose .kg-embed-card iframe,
.prose .kg-video-card iframe {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
  border: 0;
}

/* ---------- Alterswarnung aus der Code-Injection ----------
   Injection kennt nur prefers-color-scheme/html.dark; wir hängen die
   Farben an die Typer-Variablen, damit data-mode und Systemeinstellung
   zusammenpassen. */
.age-warning-callout {
  background: var(--bg-soft) !important;
  border: var(--bw) solid var(--rule) !important;
  border-left: 3px solid var(--accent) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-m) !important;
}

.age-warning-callout .kg-callout-emoji {
  padding-right: 0.8em;
}

.age-warning-callout .kg-callout-text {
  flex-grow: 1;
  margin: 0;
}

/* ---------- Webring-Blöcke aus der Injection ---------- */
.webring-row {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0.5rem 0;
}

.webring {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 14px;
  background: var(--bg-soft);
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius-s);
  font-size: 13px;
  color: var(--fg);
}

.webring a {
  padding: 0 4px;
  color: var(--fg);
  font-weight: 700;
  border-bottom: 0;
}

.webring a:hover {
  text-decoration: underline;
}

.webring a.webring-title {
  font-weight: 400;
  color: var(--fg-muted);
  border-bottom: 0;
}

/* ---------- Bookmark-Cards: Injection greift auf fremde Tokens zu ---------- */
.prose .kg-bookmark-card,
.prose .kg-bookmark-card .kg-bookmark-container {
  background-color: var(--bg-soft) !important;
  border: var(--bw) solid var(--rule-strong) !important;
  border-radius: var(--radius-m);
}

.prose .kg-bookmark-card .kg-bookmark-title {
  color: var(--fg) !important;
}

.prose .kg-bookmark-card .kg-bookmark-description,
.prose .kg-bookmark-card .kg-bookmark-metadata {
  color: var(--fg-muted) !important;
}

/* ---------- Sodo-Suche ---------- */
.sodo-search {
  font-family: var(--font-body) !important;
  font-size: 17px !important;
}

.sodo-search .sodo-search__inner {
  background: var(--bg) !important;
  border: var(--bw) solid var(--rule-strong) !important;
  border-radius: var(--radius-m) !important;
}

.sodo-search .sodo-search__input {
  background: var(--bg-soft) !important;
  border: var(--bw) solid var(--rule-strong) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-s) !important;
  font-family: var(--font-body) !important;
}

.sodo-search .sodo-search__input:focus {
  border-color: var(--fg) !important;
  outline: none !important;
}

.sodo-search .sodo-search__result-link {
  border-bottom: var(--bw) solid var(--rule) !important;
  color: var(--fg) !important;
}

.sodo-search .sodo-search__result-link:hover {
  border-bottom-color: var(--fg) !important;
  color: var(--fg) !important;
}

.sodo-search .sodo-search__result-title {
  color: var(--fg) !important;
  font-weight: 700 !important;
}

.sodo-search .sodo-search__result-meta,
.sodo-search .sodo-search__fallback {
  color: var(--fg-faint) !important;
  font-size: 13px !important;
}

.sodo-search .sodo-search__close {
  color: var(--fg-faint) !important;
}

.sodo-search .sodo-search__close:hover {
  color: var(--fg) !important;
}

/* ---------- Externe Zeilen: Untertitel-Layout ----------
   Badge sitzt wie in hub.js in der Tags-Liste. */
.note-external .note-row__badge {
  margin: 0;
}