/* ===========================================================
   Blog — Artikel, Beitragsliste, Seitenleiste.

   Laedt nur auf Blogansichten (includes/blog-template.php). Alle Werte
   kommen aus den Tokens in design-system.css; hier steht keine zweite
   Farb- oder Abstandsskala.

   Klassennamen durchgaengig mit dm- davor: .article, .sidebar und .search
   sind bei GeneratePress belegt, .dm-article ist es nicht.

   Aufbau
     01 · Geruest (Raster Text | Seitenleiste)
     02 · Artikelkopf
     03 · Artikeltext — die Kernbloecke
     04 · Beitragsnavigation
     05 · Beitragsliste
     06 · Blaettern
     07 · Seitenleiste
     08 · Responsive
   =========================================================== */

/* ===========================================================
   01 · Geruest
   =========================================================== */

.dm-article-wrap,
.dm-blog {
  padding-block: var(--space-10) var(--space-16);
}

/* Text und Seitenleiste. 320px ist keine gerundete Zahl, sondern die
   Breite, ab der die Kategorienzeilen einzeilig bleiben. */
.dm-article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-16) var(--space-8);
  align-items: start;
}

/* ===========================================================
   02 · Artikelkopf
   =========================================================== */

.dm-article-head,
.dm-blog-head {
  max-width: min(100%, 60rem);
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-5);
  border-bottom: 2px solid var(--ink-black);
}

.dm-article-title,
.dm-blog-title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  color: var(--ink-black);
  text-wrap: balance;
}

.dm-article-meta,
.dm-post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: baseline;
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.dm-meta-sep {
  color: var(--outline-variant);
}

/* Das Aktualisierungsdatum ist die einzige Angabe in der Zeile, die eine
   Aussage traegt und nicht nur Herkunft — deshalb der Akzent. */
.dm-article-updated {
  color: var(--accent-pink-ink);
}

/* Die Beitragsliste fuehrt kein Eyebrow — ohne Label darueber beginnt der
   Titel an der Oberkante des Kopfes. */
.dm-blog-head .dm-blog-title {
  margin-top: 0;
}

.dm-blog-lead {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-surface-variant);
  max-width: 62ch;
}

.dm-article-figure {
  margin: 0 0 var(--space-8);
}

.dm-article-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===========================================================
   03 · Artikeltext — die Kernbloecke

   Fuenf Blockarten tragen 94 % des Bestands: Absatz, H2, Liste, Bild, H3.
   Sie stehen zuerst; alles darunter ist der lange Schwanz.

   Der Text laeuft auf 68ch, nicht auf die Spaltenbreite: Eine Zeile von
   110 Zeichen liest sich schlecht, egal wie breit das Fenster ist.
   =========================================================== */

.dm-article-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-surface);
}

.dm-article-body > * {
  max-width: 68ch;
}

/* Breite Inhalte duerfen aus dem Lesemass ausbrechen — eine Tabelle oder
   ein Bild auf 68ch zu quetschen macht beide unlesbar. */
.dm-article-body > figure,
.dm-article-body > .wp-block-image,
.dm-article-body > .wp-block-gallery,
.dm-article-body > .wp-block-table,
.dm-article-body > .wp-block-embed,
.dm-article-body > .dm-table-block {
  max-width: 100%;
}

.dm-article-body > * + * {
  margin-top: var(--space-3);
}

/* --- Absatz ------------------------------------------------ */

.dm-article-body p {
  margin: 0;
}

.dm-article-body a {
  color: var(--accent-pink-ink);
  text-underline-offset: 3px;
}

/* GeneratePress setzt a:hover mit (0,1,1) und schlaegt eine einzelne
   Klasse. Deshalb die Farbe auf allen Zustaenden festnageln. */
.dm-article-body a:hover,
.dm-article-body a:focus,
.dm-article-body a:active,
.dm-article-body a:visited {
  color: var(--accent-pink-ink);
}

.dm-article-body a:hover {
  text-decoration-thickness: 2px;
}

/* --- Ueberschriften ---------------------------------------- */

.dm-article-body h2,
.dm-article-body h3,
.dm-article-body h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-black);
  text-wrap: balance;
}

.dm-article-body h2 {
  margin-top: var(--space-10);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
}

/* Haarlinie ueber jeder H2: Sie gliedert den Artikel in Kapitel, ohne dass
   dafuer ein Abstand von 96px noetig waere. */
.dm-article-body h2::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: var(--space-4);
  background: var(--outline-variant);
}

.dm-article-body h3 {
  margin-top: var(--space-6);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.dm-article-body h4 {
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-body);
}

/* --- Listen ------------------------------------------------ */

.dm-article-body ul,
.dm-article-body ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.dm-article-body li + li {
  margin-top: var(--space-1);
}

.dm-article-body ul > li,
.dm-article-body ol > li {
  position: relative;
  padding-left: var(--space-4);
}

/* Pink als Aufzaehlungszeichen — die eine Stelle im Fliesstext, an der die
   Marke auftaucht (DESIGN.md, „Lists"). */
.dm-article-body ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 2px;
  background: var(--accent-pink);
}

.dm-article-body ol {
  counter-reset: dm-ol;
}

.dm-article-body ol > li {
  counter-increment: dm-ol;
  padding-left: var(--space-5);
}

.dm-article-body ol > li::before {
  content: counter(dm-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--accent-pink-ink);
}

/* Verschachtelte Listen erben die Zeichen nicht doppelt. */
.dm-article-body li > ul,
.dm-article-body li > ol {
  margin-top: var(--space-1);
}

/* --- Bild und Bildunterschrift ----------------------------- */

.dm-article-body figure {
  margin: 0;
}

.dm-article-body img {
  display: block;
  max-width: 100%;
  height: auto;
}

.dm-article-body figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
}

/* --- Langer Schwanz: Tabelle, Zitat, Einbettung, Code ------- */

/* Waagerecht scrollbar statt in Karten umgebaut: Der Umbau zerreisst die
   Zuordnung Spalte→Wert, und genau die traegt hier den Inhalt. */
.dm-article-body .wp-block-table {
  overflow-x: auto;
}

.dm-article-body table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.dm-article-body th,
.dm-article-body td {
  padding: var(--space-2);
  border: 1px solid var(--outline-variant);
  text-align: left;
  vertical-align: top;
}

.dm-article-body thead th {
  background: var(--ink-black);
  color: var(--canvas-white);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dm-article-body blockquote {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent-pink);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.dm-article-body blockquote p {
  margin: 0;
}

.dm-article-body blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
}

.dm-article-body .wp-block-embed__wrapper {
  position: relative;
  padding-top: 56.25%;
}

.dm-article-body .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.dm-article-body pre {
  padding: var(--space-3);
  overflow-x: auto;
  background: var(--surface-container);
  border-left: 2px solid var(--outline);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.dm-article-body hr {
  height: 1px;
  margin-block: var(--space-8);
  border: 0;
  background: var(--outline-variant);
}

/* Rank-Math-FAQ im Fliesstext: dieselbe Optik wie das Accordion der
   Abschnitte, aber ohne dessen dunkle Flaeche. */
.dm-article-body .wp-block-rank-math-faq-block .rank-math-question {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  margin-top: var(--space-5);
}

/* ===========================================================
   04 · Beitragsnavigation
   =========================================================== */

.dm-postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: var(--space-16);
  background: var(--outline-variant);
  border: 1px solid var(--outline-variant);
}

.dm-postnav-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--canvas-white);
  text-decoration: none;
}

.dm-postnav-item--next {
  text-align: right;
}

/* Nur eine Richtung vorhanden → sie nimmt die volle Breite, statt eine
   halbe leere Zelle danebenzustellen. */
.dm-postnav-item:only-child {
  grid-column: 1 / -1;
}

.dm-postnav-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.dm-postnav-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--ink-black);
}

.dm-postnav-item:hover .dm-postnav-title,
.dm-postnav-item:focus .dm-postnav-title {
  color: var(--accent-pink-ink);
}

/* ===========================================================
   05 · Beitragsliste
   =========================================================== */

.dm-post-list {
  display: flex;
  flex-direction: column;
}

.dm-post-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--outline-variant);
}

.dm-post-card:last-child {
  border-bottom: 1px solid var(--outline-variant);
}

.dm-post-card-media {
  display: block;
  overflow: hidden;
  background: var(--surface-container);
}

.dm-post-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.dm-post-card-blank {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-container);
}

.dm-post-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dm-post-card-cat {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-pink-ink);
  text-decoration: none;
}

.dm-post-card-cat:hover,
.dm-post-card-cat:focus {
  text-decoration: underline;
}

.dm-post-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.dm-post-card-title a {
  color: var(--ink-black);
  text-decoration: none;
}

.dm-post-card-title a:hover,
.dm-post-card-title a:focus,
.dm-post-card-title a:active,
.dm-post-card-title a:visited {
  color: var(--ink-black);
}

.dm-post-card-title a:hover,
.dm-post-card-title a:focus {
  color: var(--accent-pink-ink);
}

.dm-post-card-excerpt {
  margin: var(--space-1) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-surface-variant);
  max-width: 62ch;
}

/* Ganze Karte klickbar: Der Titelverweis legt sich als unsichtbare Flaeche
   ueber die Karte. Kein zweiter Link und kein Klick-Handler auf einem <div> —
   Tastatur, Mittelklick und "Link kopieren" arbeiten wie bei jedem Verweis. */
.dm-post-card {
  position: relative;
}

.dm-post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Die Kategorie fuehrt woandershin und muss deshalb ueber der Flaeche liegen. */
.dm-post-card-cat {
  position: relative;
  z-index: 1;
}

/* Rueckmeldung fuer die ganze Karte, nicht nur fuer die Titelzeile. */
.dm-post-card:hover .dm-post-card-title a {
  color: var(--accent-pink-ink);
}

/* Der Fokusrahmen umfasst das, was der Klick trifft: die Karte. */
.dm-post-card:has(.dm-post-card-title a:focus-visible) {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
}

.dm-post-card-title a:focus-visible {
  outline: none;
}

.dm-blog-empty {
  padding: var(--space-6) 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-surface-variant);
}

/* ===========================================================
   06 · Blaettern
   =========================================================== */

.dm-blog .wp-block-query-pagination,
.dm-blog .navigation.pagination {
  margin-top: var(--space-8);
}

.dm-blog .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.dm-blog .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-2);
  border: 1px solid var(--outline-variant);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--ink-black);
  text-decoration: none;
}

.dm-blog .page-numbers:hover,
.dm-blog .page-numbers:focus {
  border-color: var(--ink-black);
}

.dm-blog .page-numbers.current {
  background: var(--ink-black);
  border-color: var(--ink-black);
  color: var(--canvas-white);
}

/* ===========================================================
   07 · Seitenleiste
   =========================================================== */

.dm-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: sticky;
  top: var(--space-4);
}

.dm-widget-title {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--ink-black);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-black);
}

.dm-widget-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-widget-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--outline-variant);
}

.dm-widget-list a {
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
  color: var(--ink-black);
  text-decoration: none;
}

.dm-widget-list a:hover,
.dm-widget-list a:focus,
.dm-widget-list a:active,
.dm-widget-list a:visited {
  color: var(--ink-black);
}

.dm-widget-list a:hover,
.dm-widget-list a:focus {
  color: var(--accent-pink-ink);
  text-decoration: underline;
}

.dm-widget-meta,
.dm-widget-count {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
}

.dm-widget-meta {
  flex-basis: 100%;
}

/* --- Suche -------------------------------------------------- */

/* Unterkante statt Rahmen, wie in DESIGN.md fuer Eingabefelder
   festgelegt. */
.dm-search {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.dm-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-1) 0;
  border: 0;
  border-bottom: 2px solid var(--ink-black);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-black);
}

.dm-search-input:focus {
  outline: none;
  border-bottom-color: var(--accent-pink);
}

.dm-search-input::placeholder {
  color: var(--outline);
}

.dm-search-submit {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-3);
  border: 2px solid var(--ink-black);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-black);
  cursor: pointer;
}

.dm-search-submit:hover,
.dm-search-submit:focus {
  background: var(--ink-black);
  color: var(--canvas-white);
}

/* ===========================================================
   08 · Kommentare

   Liegt unter dem Artikelraster, nicht darin: Die Kommentare gehoeren zum
   Beitrag, nicht in die Textspalte neben der Seitenleiste. Auf dem Lesemass
   des Artikels (68ch) bleiben sie trotzdem — ein Kommentarfeld ueber die
   volle Breite laedt zum Schnellschuss ein, ein schmales zum Formulieren.
   =========================================================== */

.dm-comments {
  max-width: 68ch;
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 2px solid var(--ink-black);
}

.dm-comments-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--ink-black);
}

/* --- Liste -------------------------------------------------- */

.dm-comment-list,
.dm-comment-list .children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-comment-list > .dm-comment + .dm-comment {
  border-top: 1px solid var(--outline-variant);
}

.dm-comment-inner {
  padding-block: var(--space-4);
}

/* Antworten ruecken ein und bekommen eine Kante, damit der Faden auch ohne
   Avatare sichtbar bleibt. */
.dm-comment-list .children {
  margin-left: var(--space-3);
  padding-left: var(--space-4);
  border-left: 1px solid var(--outline-variant);
}

.dm-comment-head {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}

/* Monogramm statt Avatar — Avatare sind abgeschaltet. Kreis ist hier die
   Ausnahme von der Regel „scharfe Kanten": DESIGN.md laesst sie fuer
   Markenzeichen und Personenbilder ausdruecklich zu. */
.dm-comment-mono {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ink-black);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: 0.04em;
  color: var(--ink-black);
}

.dm-comment-ident {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  align-items: baseline;
}

.dm-comment-author {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  color: var(--ink-black);
}

.dm-comment-author a {
  color: var(--ink-black);
  text-decoration: none;
}

.dm-comment-author a:hover,
.dm-comment-author a:focus,
.dm-comment-author a:active,
.dm-comment-author a:visited {
  color: var(--ink-black);
}

.dm-comment-author a:hover,
.dm-comment-author a:focus {
  color: var(--accent-pink-ink);
  text-decoration: underline;
}

.dm-comment-date {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
  text-decoration: none;
}

.dm-comment-date:hover,
.dm-comment-date:focus,
.dm-comment-date:active,
.dm-comment-date:visited {
  color: var(--on-surface-variant);
}

.dm-comment-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-surface);
}

.dm-comment-body > * {
  margin: 0;
}

.dm-comment-body > * + * {
  margin-top: var(--space-2);
}

.dm-comment-body a {
  color: var(--accent-pink-ink);
}

/* Wartet auf Freigabe: gestrichelte Kante, wie beim Redaktionsplatzhalter.
   Der Zustand soll sichtbar sein, nicht dekoriert. */
.dm-comment--held > .dm-comment-inner {
  padding-left: var(--space-3);
  border-left: 2px dashed var(--accent-pink);
}

.dm-comment-held {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-pink-ink);
}

.dm-comment-reply {
  margin: var(--space-2) 0 0;
}

.dm-comment-reply a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-black);
  text-decoration: none;
  border-bottom: 1px solid var(--outline-variant);
}

.dm-comment-reply a:hover,
.dm-comment-reply a:focus,
.dm-comment-reply a:active,
.dm-comment-reply a:visited {
  color: var(--ink-black);
}

.dm-comment-reply a:hover,
.dm-comment-reply a:focus {
  border-bottom-color: var(--accent-pink);
  color: var(--accent-pink-ink);
}

.dm-comments-closed {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* --- Formular ----------------------------------------------- */

.dm-respond {
  margin-top: var(--space-8);
}

.dm-respond-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  color: var(--ink-black);
}

/* „Antwort abbrechen" sitzt im <small> der Ueberschrift. */
.dm-respond-title small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-mono);
  font-weight: 400;
}

.dm-respond-title small a {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-pink-ink);
}

.dm-form-note,
.dm-comment-form .logged-in-as {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--on-surface-variant);
}

.dm-comment-form .logged-in-as a {
  color: var(--accent-pink-ink);
}

/* Zwei Spalten fuer Name und E-Mail, alles andere ueber die volle Breite.
   Die Reihenfolge im Markup bleibt die des Kerns. */
.dm-comment-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.dm-comment-form > .dm-field--full,
.dm-comment-form > .form-submit,
.dm-comment-form > .dm-form-note,
.dm-comment-form > .logged-in-as,
.dm-comment-form > .comment-form-cookies-consent {
  grid-column: 1 / -1;
}

.dm-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}

.dm-field label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-black);
}

.dm-required {
  color: var(--accent-pink-ink);
}

/* Rahmen auf allen Seiten — dieselben Felder wie im Kontaktformular.
   Die Werte sind bewusst die von ci-form (padding 0.85rem/1rem, 1.5px
   Rahmen in --outline, weisse Flaeche), damit ein Besucher, der erst das
   Kontaktformular und dann das Kommentarfeld sieht, nicht zwei verschiedene
   Eingabefelder vor sich hat. Der Radius bleibt 0 wie ueberall. */
.dm-field input[type="text"],
.dm-field input[type="email"],
.dm-field input[type="url"],
.dm-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--outline);
  border-radius: 0;
  background: var(--canvas-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 26px;
  color: var(--ink-black);
  box-sizing: border-box;
}

.dm-field textarea {
  resize: vertical;
  min-height: 160px;
}

.dm-field input:focus,
.dm-field textarea:focus {
  outline: none;
  border-color: var(--accent-pink);
}

.dm-field input::placeholder,
.dm-field textarea::placeholder {
  color: var(--outline);
}

/* Die Einwilligung ist keine Spalte, sondern eine Zeile. */
.dm-field--check {
  flex-direction: row;
  gap: var(--space-2);
  align-items: flex-start;
}

.dm-field--check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent-pink);
}

.dm-field--check label {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--on-surface-variant);
}

.dm-comment-form .form-submit {
  margin: 0;
}

/* Primaerschaltflaeche: Ink mit weisser Schrift, Hover nach Pink. */
.dm-comment-form .dm-comment-submit,
.dm-comment-form input[type="submit"] {
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--ink-black);
  border-radius: 0;
  background: var(--ink-black);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--canvas-white);
  cursor: pointer;
}

.dm-comment-form .dm-comment-submit:hover,
.dm-comment-form input[type="submit"]:hover,
.dm-comment-form .dm-comment-submit:focus,
.dm-comment-form input[type="submit"]:focus {
  background: var(--accent-pink);
  border-color: var(--accent-pink);
}

/* ===========================================================
   09 · Responsive
   =========================================================== */

@media (max-width: 959px) {
  .dm-article-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }

  .dm-sidebar {
    position: static;
  }

  .dm-article-wrap,
  .dm-blog {
    padding-block: var(--space-6) var(--space-10);
  }
}

@media (max-width: 767px) {
  .dm-post-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .dm-post-card-media img,
  .dm-post-card-blank {
    aspect-ratio: 16 / 9;
  }

  .dm-postnav {
    grid-template-columns: minmax(0, 1fr);
  }

  .dm-postnav-item--next {
    text-align: left;
  }

  

  /* Name und E-Mail untereinander: Zwei Felder auf 320px sind zwei zu
     schmale Felder. */
  .dm-comment-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .dm-comment-list .children {
    margin-left: 0;
    padding-left: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-postnav-item,
  .dm-post-card-title a {
    transition: none;
  }
}