/* ==================================================================
   halloween-dekoration.info : Design D auf den Innenseiten
   Kategorie-Archive, Einzelbeiträge, Seiten.  Stand 03.09.2026.

   ⚠ Diese Datei lädt NACH hd-home-d.css (Abhängigkeit 'hd-design-d'
     im mu-plugin). Palette, Schriften, Kopf, Fuß, .karte, .faq, .mond
     und .halt kommen von dort und werden hier NICHT wiederholt.

   ⛔ hd-shell.css und hd-content.css sind ab dem 03.09.2026 auf allen
     Seiten abgemeldet. Wer sie zurückholt, holt drei !important-Regeln
     mit, die gegen dieses Design arbeiten (Grundfarbe #0d0b10 und ein
     padding-top für einen position:fixed-Kopf, den es nicht mehr gibt).
   ================================================================== */


/* ---------- 1. Das GeneratePress-Gerüst auf Innenseiten -----------

   Derselbe Eingriff wie auf der Startseite, nur ohne deren randlose
   Abschnitte: der Container wird aufgehoben und die Breite wandert auf
   #main. Damit sitzt der Inhalt exakt unter Kopf und Fuß, die ihre
   Breite über .huelle beziehen (width:min(100% - 2.5rem, 1200px)).
   ⛔ Deshalb bekommen die Abschnitte hier KEIN .huelle mehr: zweimal
     dieselbe Begrenzung würde die Seite ein zweites Mal einrücken. */

body:not(.home) #page.grid-container{max-width:none;background:transparent;padding:0}
body:not(.home) .site-content,
body:not(.home) #primary{padding:0;margin:0;background:transparent;max-width:none}
body:not(.home) #main{
  width:min(100% - 2.5rem,var(--breite));margin-inline:auto;padding:0;background:transparent;
}
body:not(.home) .inside-article{background:transparent;padding:0;border:0;box-shadow:none;border-radius:0}
body:not(.home) .site-main > *:last-child{margin-bottom:0}

/* GP setzt auf Buttons ein Polster von 10px/20px. Bei box-sizing:border-box
   bleibt in einem 46-px-Knopf innen nichts übrig und ein Icon darin wird
   auf 2 px gequetscht (Fall aus generatepress-pro §7b). Hier ist kein
   Knopf im Spiel, aber der Reset färbt auch summary und details ein. */
body:not(.home) button{font:inherit}


/* ---------- 2. Die Achse läuft auf den Innenseiten weiter ---------

   Auf der Startseite liegt sie bei calc(50% - breite/2 + 21px), also
   relativ zur Fenstermitte. Hier ist #main selbst die Hülle, deshalb
   genügt left:21px. Gleiche Optik, einfachere Rechnung. */

.hd-hookfree-category .site-main{position:relative}
.hd-hookfree-category .site-main::before{
  content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;z-index:0;
  background:linear-gradient(to bottom,transparent,rgba(245,240,230,.3) 6%,rgba(245,240,230,.3) 94%,transparent);
}
.hd-hookfree-category .halt{position:relative;z-index:1}
@media (max-width:560px){.hd-hookfree-category .site-main::before{left:16px}}


/* ---------- 3. Kategorie: Kopf ------------------------------------ */

/* Die H1 rückt auf dieselbe Spalte wie die Station-Körper (60px), damit
   Überschrift, Monde und Text auf einer Kante stehen. Die Achse läuft
   links daran vorbei: die Nacht hat schon angefangen, wenn man ankommt. */
.hd-hookfree-category .page-header{
  padding:3.4rem 0 .4rem 60px;margin:0;background:transparent;border:0;
}
@media (max-width:560px){.hd-hookfree-category .page-header{padding-left:34px}}
.hd-hookfree-category .page-title{
  font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.02em;
  font-size:clamp(2.1rem,1.2rem + 3.4vw,3.5rem);margin:0;color:var(--papier);
}

/* Die Stationen. .halt bringt das Raster aus hd-home-d.css mit, hier
   kommt nur der Abstand nach oben dazu, weil der Kategoriekopf enger
   sitzt als ein Startseiten-Abschnitt. */
.hd-hookfree-category .halt{padding-block:3.4rem}
.hd-hookfree-category .halt:first-of-type{padding-top:2.2rem}

/* Der Überblick steht ohne eigene Überschrift neben dem Mond: die H1
   darüber ist die Überschrift. Eine zweite wäre eine Dopplung, eine
   Kicker-Zeile ist in diesem Design gebannt (DESIGN.md). */
.hd-cat-lead{
  font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);
  line-height:1.32;color:var(--papier);margin:0 0 1.3rem;max-width:44ch;
}

.hd-cat-antwort{
  background:var(--tiefe);border:1px solid var(--kante);padding:1.15rem 1.35rem;
  max-width:var(--lese);margin:0 0 1.3rem;color:var(--papier-ruhig);
}
.hd-cat-antwort strong{color:var(--flamme);font-weight:600}
.hd-cat-zahlen{
  display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;font-family:var(--mono);
  font-size:.82rem;color:var(--papier-ruhig);margin:0 0 1.5rem;list-style:none;padding:0;
}
.hd-cat-zahlen b{color:var(--flamme);font-weight:600;font-variant-numeric:tabular-nums}
.hd-cat-links{display:flex;flex-wrap:wrap;gap:.6rem}
.hd-cat-links a{
  display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;
  border:1px solid var(--kante);text-decoration:none;font-size:.95rem;
  color:var(--papier-ruhig);transition:color .16s,border-color .16s,background .16s;
}
.hd-cat-links a:hover{color:var(--papier);border-color:var(--kerze);background:rgba(83,32,111,.35)}
.hd-cat-links svg{width:15px;height:15px;color:var(--kerze)}

/* ⚠ Steht ABSICHTLICH hinter den Basisregeln: eine Media Query hat keine
   höhere Spezifität, sie gewinnt nur über die Reihenfolge. Weiter oben
   hätte die spätere `.hd-cat-antwort{margin:0 0 1.3rem}` sie überholt.
   Ab 1080 px stehen Einstieg und Kurzantwort nebeneinander: sonst bleibt bei
   1440 px die halbe Breite leer, während der Einstieg sieben Zeilen hoch in
   einer schmalen Spalte steht (am 03.09.2026 im Screenshot gesehen). */
@media (min-width:1080px){
  .hd-cat-oben{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start;margin-bottom:1.6rem}
  .hd-cat-lead{margin-bottom:0;max-width:none}
  .hd-cat-antwort{margin-bottom:0;max-width:none}
}


/* ---------- 4. Kategorie: die Beiträge als D-Karten ---------------

   Kein neues Markup: GeneratePress liefert article.post mit
   .inside-article, .entry-header, .post-image und .entry-summary.
   Die Karte entsteht per CSS, das Bild wandert per order nach oben. */

.hd-cat-liste{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}

.hd-hookfree-category .site-main article.post{margin:0;border:0;padding:0;background:none}
.hd-hookfree-category .site-main article.post > .inside-article{
  display:flex;flex-direction:column;height:100%;
  background:var(--tiefe);border:1px solid var(--kante);overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.hd-hookfree-category .site-main article.post:hover > .inside-article{
  border-color:var(--kerze);transform:translateY(-3px);
}
.hd-hookfree-category .post-image{order:-1;margin:0;aspect-ratio:16/10;overflow:hidden;background:#0d0a18}
.hd-hookfree-category .post-image a{display:block;height:100%}
.hd-hookfree-category .post-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hd-hookfree-category article.post:hover .post-image img{transform:scale(1.045)}

.hd-hookfree-category .entry-header{padding:1.05rem 1.15rem 0;margin:0;background:none;border:0}
/* ⚠ 1.3 statt der 1.2 der Startseiten-Karten: bei 19,5 px greift der
   Detektor `tight-leading` (am 03.09.2026 gemessen). Bei den großen
   Display-Überschriften mit 45 bis 56 px ist enge Zeilenhöhe richtig und
   wird auch nicht gemeldet, bei einem zweizeiligen Kartentitel nahe der
   Textgröße nicht. */
.hd-hookfree-category .entry-title{
  font-family:var(--display);font-size:1.22rem;line-height:1.3;font-weight:700;
  letter-spacing:-.01em;margin:0;overflow-wrap:break-word;hyphens:auto;
}
.hd-hookfree-category .entry-title a{color:var(--papier);text-decoration:none}
.hd-hookfree-category article.post:hover .entry-title a{color:var(--flamme)}
.hd-hookfree-category .entry-header .entry-meta{
  font-family:var(--mono);font-size:.74rem;color:rgba(245,240,230,.55);margin:.55rem 0 0;
}
.hd-hookfree-category .entry-header .entry-meta a{color:inherit;text-decoration:none}
.hd-hookfree-category .entry-header .entry-meta a:hover{color:var(--flamme)}
/* ⛔ GP gibt zwei time-Elemente aus, wenn ein Beitrag nach dem Erscheinen
   geändert wurde, und versteckt in main.min.css selbst `.updated:not(.published)`.
   Eine eigene Regel `.updated + .entry-date{display:none}` liess deshalb GAR KEIN
   Datum übrig (am 03.09.2026 im Browser gemessen: display none auf beiden).
   ▶ Sichtbar ist jetzt das Änderungsdatum: auf einer Saisonseite ist die
   Frische die nützlichere Angabe. Beide Werte bleiben im HTML und im Schema. */
body:not(.home) .entry-meta .updated:not(.published){display:inline}
body:not(.home) .entry-meta .updated + .entry-date{display:none}

.hd-hookfree-category .entry-summary{padding:.75rem 1.15rem 1.25rem;margin:0;flex:1;display:flex;flex-direction:column}
.hd-hookfree-category .entry-summary p{
  color:var(--papier-ruhig);font-size:.98rem;line-height:1.55;margin:0;max-width:none;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.hd-hookfree-category .entry-summary .read-more{
  display:inline-flex;color:var(--kerze);text-decoration:none;font-weight:500;
}
.hd-hookfree-category footer.entry-meta{
  padding:0 1.15rem 1.1rem;margin:0;font-family:var(--mono);font-size:.74rem;
  color:rgba(245,240,230,.5);
}
.hd-hookfree-category footer.entry-meta a{color:inherit;text-decoration:none}
.hd-hookfree-category footer.entry-meta a:hover{color:var(--kerze)}
.hd-hookfree-category .gp-icon{display:none}

/* Blätterung */
.hd-hookfree-category .paging-navigation{
  margin:2.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--kante);font-family:var(--mono);font-size:.9rem;
}
.hd-hookfree-category .paging-navigation a{color:var(--kerze);text-decoration:none}
.hd-hookfree-category .paging-navigation a:hover{color:var(--flamme)}


/* ---------- 5. Einzelbeitrag -------------------------------------- */

/* ⛔ Diese Regel galt zuerst nur für Beitraege. Auf `über-mich` stand das
   Beitragsbild dadurch ungeschnitten in Originalhöhe im Bild: ein Hochformat
   füllte die erste Bildschirmseite komplett (am 03.09.2026 gesehen, nicht
   hergeleitet). Sie gilt jetzt auf allen Innenseiten. */
body:not(.home) .featured-image{
  margin:2.6rem 0 0;padding:0;max-width:none;width:100%;
  border:1px solid var(--kante);overflow:clip;background:#0d0a18;
}
body:not(.home) .featured-image img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
}

.hd-hookfree-single .entry-header{
  padding:2.6rem 0 0;margin:0 0 2.4rem;background:none;border:0;
}
.hd-hookfree-single .entry-title{
  font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.02em;
  font-size:clamp(2.05rem,1.15rem + 3.5vw,3.4rem);margin:0;color:var(--papier);max-width:20ch;
}
.hd-hookfree-single .entry-header .entry-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.35rem;
  font-family:var(--mono);font-size:.82rem;color:var(--papier-ruhig);margin:1.35rem 0 0;
}
.hd-hookfree-single .entry-header .entry-meta a{color:inherit;text-decoration:none}
.hd-hookfree-single .entry-header .entry-meta a:hover{color:var(--flamme)}
.hd-hookfree-single .entry-meta .updated + .entry-date{display:none}
/* Die Lesezeit steht in derselben Zeile und in derselben Schrift wie das
   Datum. Sie ist hier kein Beiwerk: dieses Projekt sortiert nach der Zeit,
   die der Besucher hat (DESIGN.md, Ordnungslogik). */
.hd-dauer{display:inline-flex;align-items:center;gap:.4rem;color:var(--flamme)}
.hd-dauer svg{width:15px;height:15px}


/* ---------- 6. Der Artikel hängt an der Achse ---------------------

   Die Linie läuft links neben dem Text, der gefüllte Teil wächst mit
   dem Scrollen. Das ist die Startseiten-Idee eine Ebene tiefer: dort
   schreitet die Nacht über die Abschnitte fort, hier über den Text.

   ⛔ Als scroll-driven animation gebaut, nicht mit einem scroll-Listener:
     die Scrollposition ist die Zeitachse, die Arbeit liegt im Compositor.
     Ohne Browserunterstützung bleibt die Linie einfach ungefüllt. */

.hd-hookfree-single .entry-content{
  position:relative;padding-left:60px;margin:0;
}
.hd-hookfree-single .entry-content::before{
  content:"";position:absolute;left:21px;top:.35rem;bottom:0;width:2px;
  background:rgba(245,240,230,.18);
}
.hd-lese-fuellung{
  position:absolute;left:21px;top:.35rem;bottom:0;width:2px;transform-origin:top;
  background:linear-gradient(to bottom,var(--kerze),var(--flamme));transform:scaleY(0);
}
/* ⚠ Langform statt Kurzform mit Absicht: die Kurzform `animation: name linear`
   setzt animation-duration auf ihren Anfangswert, und eine Dauer von 0s macht
   eine scroll-getriebene Animation wirkungslos. `auto` bedeutet hier
   „die ganze Zeitachse“, also der komplette Scrollweg. */
@supports (animation-timeline:scroll()){
  .hd-lese-fuellung{
    animation-name:hd-lesefortschritt;
    animation-duration:auto;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root);
  }
}
@keyframes hd-lesefortschritt{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.hd-lese-fuellung{display:none}}

@media (max-width:560px){
  .hd-hookfree-single .entry-content{padding-left:34px}
  .hd-hookfree-single .entry-content::before,.hd-lese-fuellung{left:16px}
}


/* ---------- 7. Typografie im Artikel ------------------------------- */

.hd-hookfree-single .entry-content > *{max-width:var(--lese)}
.hd-hookfree-single .entry-content p{margin:0 0 1.15rem;color:var(--papier)}
.hd-hookfree-single .entry-content > p:first-of-type{
  font-size:1.22rem;line-height:1.55;color:var(--papier);
}
.hd-hookfree-single .entry-content > p:first-of-type strong{font-weight:600}

.hd-hookfree-single .entry-content h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:1.1;
  font-size:clamp(1.6rem,1.15rem + 1.5vw,2.25rem);margin:3.1rem 0 1.1rem;color:var(--papier);
}
.hd-hookfree-single .entry-content h3{
  font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.24;
  margin:2.2rem 0 .8rem;color:var(--papier);
}
.hd-hookfree-single .entry-content h4{
  font-family:var(--text);font-weight:600;font-size:1.05rem;margin:1.7rem 0 .6rem;color:var(--flamme);
}
.hd-hookfree-single .entry-content a{
  color:var(--kerze);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,115,21,.45);
}
.hd-hookfree-single .entry-content a:hover{color:var(--flamme);text-decoration-color:currentColor}
.hd-hookfree-single .entry-content strong{color:var(--papier);font-weight:600}
.hd-hookfree-single .entry-content em{color:var(--flamme);font-style:italic}

.hd-hookfree-single .entry-content ul,
.hd-hookfree-single .entry-content ol{margin:0 0 1.35rem;padding-left:1.25rem;color:var(--papier)}
.hd-hookfree-single .entry-content li{margin:0 0 .5rem}
.hd-hookfree-single .entry-content li::marker{color:var(--kerze)}

.hd-hookfree-single .entry-content blockquote{
  margin:1.9rem 0;padding:1.15rem 1.4rem;background:var(--tiefe);
  border:1px solid var(--kante);color:var(--papier-ruhig);font-style:normal;
}
.hd-hookfree-single .entry-content blockquote p:last-child{margin-bottom:0}

/* Bilder dürfen breiter sein als die Lesespalte, aber nicht randlos:
   der Artikel bleibt eine Spalte, kein Bilderteppich. */
.hd-hookfree-single .entry-content img{
  max-width:min(100%,860px);height:auto;border:1px solid var(--kante);margin:1.6rem 0;
}
.hd-hookfree-single .entry-content figure{max-width:min(100%,860px);margin:1.6rem 0}
.hd-hookfree-single .entry-content figure img{margin:0}
.hd-hookfree-single .entry-content figcaption{
  font-family:var(--mono);font-size:.78rem;color:rgba(245,240,230,.6);margin-top:.5rem;
}

.hd-hookfree-single .entry-content table{
  width:100%;max-width:min(100%,860px);border-collapse:collapse;margin:1.7rem 0;font-size:.98rem;
}
.hd-hookfree-single .entry-content th,
.hd-hookfree-single .entry-content td{
  border:1px solid var(--kante);padding:.7rem .85rem;text-align:left;vertical-align:top;
}
.hd-hookfree-single .entry-content th{background:var(--tiefe);font-weight:600;color:var(--flamme)}
/* Eine Tabelle darf nie die Seite aufschieben. Der Rahmen scrollt, nicht der Body. */
.hd-hookfree-single .entry-content .tabelle-rahmen{overflow-x:auto;max-width:min(100%,860px)}

.hd-hookfree-single .entry-content hr{border:0;border-top:1px solid var(--kante);margin:2.6rem 0}

/* Fußleiste des Beitrags: Kategorien */
.hd-hookfree-single footer.entry-meta{
  margin:3rem 0 0;padding:1.3rem 0 0 60px;border-top:1px solid var(--kante);
  font-family:var(--mono);font-size:.82rem;color:var(--papier-ruhig);
}
.hd-hookfree-single footer.entry-meta a{color:var(--kerze);text-decoration:none}
.hd-hookfree-single footer.entry-meta a:hover{color:var(--flamme)}
@media (max-width:560px){.hd-hookfree-single footer.entry-meta{padding-left:34px}}


/* ---------- 8. Weitere Ideen (verwandte Beiträge) ----------------- */

.hdhf-related{margin:3.4rem 0 0;padding-top:2.4rem;border-top:1px solid var(--kante)}
.hdhf-related h2{
  font-family:var(--display);font-weight:700;font-size:1.55rem;letter-spacing:-.015em;
  margin:0 0 1.3rem;color:var(--papier);
}
.hdhf-related-grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.hdhf-related-card{
  background:var(--tiefe);border:1px solid var(--kante);overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.hdhf-related-card:hover{border-color:var(--kerze);transform:translateY(-3px)}
.hdhf-related-card a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--papier)}
.hdhf-related-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.hdhf-related-card span{
  padding:.85rem 1rem 1rem;font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.25;
}
.hdhf-related-card:hover span{color:var(--flamme)}


/* ---------- 9. Seiten (Impressum, Datenschutz, Über mich) ---------

   Ruhig und ohne Achse. Diese Seiten liegen auf keiner Zeitachse, und
   ein Signature, das überall klebt, ist Dekoration statt Ordnung. */

body.page:not(.home) .entry-header{padding:2.8rem 0 0;margin:0 0 2rem;background:none;border:0}
body.page:not(.home) .entry-title{
  font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.02em;
  font-size:clamp(2rem,1.2rem + 3vw,3rem);margin:0;color:var(--papier);
}
body.page:not(.home) .entry-content{margin:0 0 3rem;color:var(--papier)}
body.page:not(.home) .entry-content > *{max-width:var(--lese)}
body.page:not(.home) .entry-content p{margin:0 0 1.15rem}
body.page:not(.home) .entry-content h2{
  font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,1.1rem + 1.2vw,1.95rem);
  line-height:1.12;margin:2.6rem 0 .9rem;color:var(--papier);
}
body.page:not(.home) .entry-content h3{
  font-family:var(--display);font-weight:600;font-size:1.22rem;margin:1.9rem 0 .7rem;color:var(--papier);
}
body.page:not(.home) .entry-content a{color:var(--kerze);text-decoration:underline;text-underline-offset:.18em}
body.page:not(.home) .entry-content a:hover{color:var(--flamme)}
body.page:not(.home) .entry-content ul,
body.page:not(.home) .entry-content ol{margin:0 0 1.3rem;padding-left:1.25rem}
body.page:not(.home) .entry-content li{margin:0 0 .45rem}
body.page:not(.home) .entry-content li::marker{color:var(--kerze)}
body.page:not(.home) .entry-content strong{color:var(--papier);font-weight:600}
body.page:not(.home) .entry-content table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.96rem}
body.page:not(.home) .entry-content th,
body.page:not(.home) .entry-content td{border:1px solid var(--kante);padding:.65rem .8rem;text-align:left}
body.page:not(.home) .entry-content th{background:var(--tiefe);color:var(--flamme);font-weight:600}


/* ---------- 10. Suche, 404 und alles Übrige ----------------------

   Die Seite hat mehr Ansichten als Kategorie, Beitrag und Seite. Ohne
   diese Regeln stünden sie in GeneratePress-Grau auf schwarzem Grund,
   und genau das fällt erst auf, wenn ein Besucher darauf landet. */

body:not(.home) .site-main > .page-header,
body:not(.home) .site-main > .no-results{color:var(--papier)}
body:not(.home) .no-results .entry-title,
body:not(.home) .site-main .page-title{
  font-family:var(--display);font-weight:700;color:var(--papier);
}
body:not(.home) .search-form input[type="search"],
body:not(.home) .search-field{
  background:var(--tiefe);border:1px solid var(--kante);color:var(--papier);
  font:inherit;padding:.65rem .85rem;
}
body:not(.home) .search-form input::placeholder{color:rgba(245,240,230,.45)}
body.search .site-main article.post,
body.archive:not(.hd-hookfree-category) .site-main article.post{
  background:var(--tiefe);border:1px solid var(--kante);padding:1.3rem 1.5rem;margin:0 0 1.15rem;
}
body.search .entry-title a,
body.archive:not(.hd-hookfree-category) .entry-title a{color:var(--papier);text-decoration:none}
body.search .entry-title a:hover{color:var(--flamme)}


/* ---------- 11. „Auf dieser Seite": die rechte Spalte im Beitrag -----

   Die Lesespalte ist 620 px breit, der Container 1200 px. Bei 1440 px
   stand rechts davon eine leere Fläche von über 500 px (am 03.09.2026 im
   Screenshot gesehen). Statt die Spalte zu verbreitern, was die gemessenen
   78 Zeichen je Zeile über die Lesbarkeitsgrenze schieben würde, steht dort
   jetzt das Verzeichnis der Abschnitte.

   ★ Das ist die Ordnungslogik dieses Projekts eine Ebene tiefer: die Achse
     links sagt, wie weit man ist, die Liste rechts sagt, was noch kommt.

   ⚠ Absolut positioniert statt Grid: `grid-row:1/-1` spannt nur über das
     EXPLIZITE Raster, und die Absätze eines Beitrags erzeugen implizite
     Zeilen. Ein absolut positioniertes Element über die volle Höhe mit
     einem klebenden Kind darin hat dieses Problem nicht.
   ⛔ Kein position:sticky ohne freien Überlauf in den Vorfahren: deshalb
     steht überall `overflow:clip`, nie `hidden` (Hausregel).            */

.hd-inhalt{display:none}

@media (min-width:1080px){
  .hd-hookfree-single .entry-content:has(.hd-inhalt){padding-right:340px}
  .hd-inhalt{
    display:block;position:absolute;top:.35rem;bottom:0;right:0;width:300px;
  }
  .hd-inhalt-innen{position:sticky;top:96px}
}

.hd-inhalt-titel{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(245,240,230,.55);margin:0 0 .9rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--kante);
}
.hd-inhalt ol{list-style:none;margin:0;padding:0;counter-reset:hd-abschnitt}
.hd-inhalt li{counter-increment:hd-abschnitt;margin:0}
/* ⛔ Höhere Spezifität mit Absicht: das Verzeichnis steht INNERHALB von
   .entry-content und erbt sonst `color:var(--kerze)` samt Unterstreichung aus
   der Fließtext-Regel. Sieben unterstrichene orange Zeilen untereinander sind
   eine Wand, kein Verzeichnis (am 03.09.2026 im Screenshot gesehen). */
.hd-hookfree-single .entry-content .hd-inhalt a{
  display:grid;grid-template-columns:1.7rem 1fr;gap:.2rem;align-items:baseline;
  padding:.42rem 0;text-decoration:none;font-size:.92rem;line-height:1.35;
  color:var(--papier-ruhig);transition:color .16s;
}
.hd-inhalt a::before{
  content:counter(hd-abschnitt,decimal-leading-zero);
  font-family:var(--mono);font-size:.72rem;color:rgba(245,240,230,.4);
}
.hd-hookfree-single .entry-content .hd-inhalt a:hover{color:var(--papier);text-decoration:none}
.hd-inhalt a:hover::before{color:var(--kerze)}
/* Der laufende Abschnitt wird gefärbt, nicht vergrößert: ein springendes
   Verzeichnis lenkt vom Text ab. Gleiche Regel wie bei den Monden. */
.hd-hookfree-single .entry-content .hd-inhalt .hier a{color:var(--flamme)}
.hd-inhalt .hier a::before{color:var(--kerze)}

/* ═══════════════════════════════════════════════════════════════════
   BEITRAGSKOPF (Strang A, 04.09.2026)

   Gemessen an Beitrag 256 bei 1440x900, vorher: Bild ab 95 px und 676 px
   hoch, H1 erst bei 848 px, erster Satz bei 1.103 px. Der Leser sah kein
   Wort, ohne zu scrollen.

   Neue Reihenfolge im PHP: Metazeile, H1, Vorspann, Eckdaten, dann Bild.
   Hier steht nur, wie die drei neuen Bausteine aussehen.
   ═══════════════════════════════════════════════════════════════════ */

/* Das Beitragsbild wird zum Band. Nicht mehr 16/9 auf voller Breite,
   sondern eine feste Hoehe mit object-fit:cover. Bei 1200 px Container
   sind 16/9 genau 675 px, und das war das Problem. */
body.single .featured-image{
  margin:2rem 0 2.4rem;
}
body.single .featured-image img{
  aspect-ratio:auto;
  height:clamp(200px,32vw,380px);
  object-fit:cover;
  object-position:50% 50%;
}

/* Vorspann: die Antwort in zwei Saetzen, direkt unter der Ueberschrift.
   Groesser als der Fliesstext, aber nicht fett gesetzt, sonst schreit die
   Seite. Die Lesebreite bleibt die des Textes. */
.hd-vorspann{
  margin:0 0 1.8rem;
  max-width:var(--lese,620px);
  font-size:1.16rem;
  line-height:1.62;
  color:var(--papier);
}

/* Die Eckdaten-Leiste.
   Vier Angaben, jede fuer sich lesbar: oben der Wert, darunter wofuer er
   steht. Bewusst ohne Rahmen um jede Zelle, nur eine gemeinsame Linie
   oben und unten. Ein Kasten mit vier Kaesten darin wird unruhig. */
.hd-eckdaten{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:0;
  margin:0 0 2rem;
  padding:1.15rem 0;
  border-top:1px solid var(--kante);
  border-bottom:1px solid var(--kante);
}
.hd-eckdaten > div{
  padding:.1rem 1.15rem;
  border-left:1px solid var(--kante);
}
.hd-eckdaten > div:first-child{
  border-left:0;
  padding-left:0;
}
.hd-eckdaten dt{
  font:600 1.14rem/1.3 var(--text);
  color:var(--papier);
  margin:0;
}
.hd-eckdaten dd{
  margin:.22rem 0 0;
  font-size:.87rem;
  line-height:1.35;
  color:var(--papier-ruhig);
}
/* Unter 560 px zwei Spalten statt vier nebeneinander gequetscht. Die
   Trennlinie links stoert dann in der zweiten Reihe, also weg damit. */
@media (max-width:560px){
  .hd-eckdaten{grid-template-columns:1fr 1fr;gap:1rem 0}
  .hd-eckdaten > div{border-left:0;padding:0 .8rem 0 0}
  .hd-eckdaten dt{font-size:1.05rem}
}

/* Bild im Fliesstext.
   Am 04.09.2026 gemessen: in KEINEM der 30 Beitraege stand ein Bild im
   Text, auch nicht in dem mit 2.585 Woertern und 13.591 px Laenge.
   Markup im post_content:

     <figure class="hd-bild">
       <img src="..." alt="..." width="1536" height="1024" loading="lazy">
       <figcaption>Was man sieht, und warum es hier steht.</figcaption>
     </figure>

   Das Bild darf breiter sein als die Lesespalte: es unterbricht den Text
   bewusst und markiert damit den Abschnittswechsel. */
.hd-hookfree-single .entry-content figure.hd-bild{
  margin:2.4rem 0;
  max-width:min(100%,860px);
}
.hd-hookfree-single .entry-content figure.hd-bild img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--kante);
  background:#0d0a18;
}
.hd-hookfree-single .entry-content figure.hd-bild figcaption{
  margin-top:.6rem;
  font-size:.9rem;
  line-height:1.5;
  color:var(--papier-ruhig);
  border-left:2px solid var(--kerze);
  padding-left:.8rem;
}