/*
Theme Name: Demonic Nights Responsive
Description: Responsives Child-Theme für demonic-nights.at auf Basis von WP-Elegance Premium (Solostream). Das Eltern-Theme bleibt unverändert und kann jederzeit wieder aktiviert werden.
Author: demonic-nights.at
Template: wp-elegance-prem_april2011
Version: 1.0.0
Text Domain: demonicnights-child
*/

/* =========================================================
   Grundwerte (Variante D „Moderne Liste“)
   Hinweis: Das alte Theme gibt CSS aus den Theme-Einstellungen inline NACH
   diesem Stylesheet aus; Überschreibungen davon brauchen stärkere Selektoren.
   ========================================================= */
:root {
  --maxw: 990px;
  --gutter: 16px;
  --radius: 10px;
  --page-bg: #2e2e2e;
  --surface: #f2f2f2;
  --card-bg: #fff;
  --card-border: #e2e2e2;
  --card-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);
  --card-shadow-hover: 0 2px 4px rgba(0,0,0,.08), 0 10px 26px rgba(0,0,0,.12);
  --text: #2f2f2f;
  --muted: #6b6b6b;
  --heading: #161616;
  --accent: #c4161c;
  --accent-hover: #e0242a;
  --accent-ink: #fff;
  --link: #b3141a;
  --nav-bg: #111;
  --nav-text: #fff;
  --nav-hover-bg: #c4161c;
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-head: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100000; background: var(--accent); color: #fff; padding: 8px 12px; }
.skip-link:focus { left: 8px; color: #fff; }

/* ---------- Rahmen und Kopf (mobil zuerst) ---------- */
body { overflow-x: hidden; }
@media (max-width: 999px) { html body { background-image: none; } }
#wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0; }
#header { background: #1b1b1b url(images/header-ornament.jpg) center top / auto 100% repeat-x; }
#wrap #head-content {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: auto; height: auto; padding: 14px var(--gutter) 16px; background-image: none;
}
.dn-logo { display: block; line-height: 0; }
.dn-logo img { width: min(78vw, 300px); height: auto; }
#head-content .head-banner468 { float: none; width: 100%; max-width: 468px; margin: 0; }
#head-content .head-banner468 img { max-width: 100%; height: auto; }

/* ---------- Menü (mobil: Hamburger) ---------- */
#topnav { background: var(--nav-bg); font-family: var(--font-head); position: relative; z-index: 20; border-bottom: 3px solid var(--accent); }
#topnav .limit { width: auto; padding: 0 var(--gutter); background: none; }
.dn-menu-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 50px; padding: 0; margin: 0;
  background: none; border: 0; color: var(--nav-text);
  font: 600 17px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.no-js .dn-menu-toggle { display: none; }
.dn-burger, .dn-burger::before, .dn-burger::after {
  display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform .2s, background .2s;
}
.dn-burger::before, .dn-burger::after { content: ""; position: absolute; left: 0; }
.dn-burger::before { top: -7px; } .dn-burger::after { top: 7px; }
#topnav.is-open .dn-burger { background: transparent; }
#topnav.is-open .dn-burger::before { transform: translateY(7px) rotate(45deg); }
#topnav.is-open .dn-burger::after { transform: translateY(-7px) rotate(-45deg); }

#topnav ul { list-style: none; margin: 0; padding: 0; line-height: 1.3; }
.js #topnav .menu { display: none; padding-bottom: 8px; }
.js #topnav.is-open .menu { display: block; }
#topnav ul li, #topnav ul li:hover, #topnav ul li.hover { float: none; position: relative; background: none; padding: 0; width: auto; }
#topnav .menu > li { border-top: 1px solid rgba(255,255,255,.1); }
#topnav ul a { display: block; height: auto; padding: 12px 48px 12px 4px; line-height: 1.3; color: var(--nav-text); font-size: 17px; }
#topnav ul a:hover, #topnav ul a:focus { background: none; color: var(--accent-hover); }
.dn-sub-toggle {
  position: absolute; right: 0; top: 0; z-index: 101; width: 48px; height: 46px;
  background: none; border: 0; color: var(--nav-text); cursor: pointer; font-size: 20px;
}
.dn-sub-toggle::before { content: "+"; }
.dn-sub-toggle[aria-expanded="true"]::before { content: "–"; }
#topnav ul ul { position: static; left: auto; width: auto; border: 0; padding: 0 0 0 14px; display: none; }
.no-js #topnav ul ul, #topnav li.sub-open > ul { display: block; }
#topnav ul ul a { width: auto; border: 0; background: none; font-size: 15px; padding: 9px 4px; opacity: .85; }

/* ---------- Ab 600 px: Logo und Banner nebeneinander ---------- */
@media (min-width: 600px) {
  #wrap #head-content { flex-direction: row; justify-content: space-between; }
  .dn-logo img { width: 260px; }
}

/* ---------- Ab 768 px: Menü als Leiste mit Untermenüs ---------- */
@media (min-width: 768px) {
  .dn-menu-toggle, .dn-sub-toggle { display: none; }
  .js #topnav .menu, .js #topnav.is-open .menu, #topnav .menu { display: flex; flex-wrap: wrap; padding: 0; }
  #topnav .menu > li { border: 0; }
  #topnav .menu > li > a { padding: 0 10px; line-height: 54px; font-size: 15px; white-space: nowrap; }
  #topnav .menu > li:hover > a, #topnav .menu > li:focus-within > a { background: var(--nav-hover-bg); color: #fff; }
  #topnav ul ul, .no-js #topnav ul ul, #topnav li.sub-open > ul {
    display: block; position: absolute; left: 0; top: 100%; min-width: 230px; padding: 6px 0;
    background: var(--nav-bg); box-shadow: 0 8px 20px rgba(0,0,0,.35);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s; z-index: 99999;
  }
  #topnav ul li:hover > ul, #topnav ul li:focus-within > ul { left: 0; opacity: 1; visibility: visible; transform: none; }
  #topnav ul ul a { padding: 9px 16px; }
}
@media (min-width: 900px) {
  #topnav .menu > li > a { padding: 0 14px; font-size: 16px; }
}

/* ---------- Breiter als die Seite: heutiger Ornament-Hintergrund mit eingebranntem Logo ---------- */
@media (min-width: 1000px) {
  #wrap { margin-top: 30px; }
  #header { background: none; }
  #wrap #head-content { height: 140px; padding: 20px 5px; }
  .dn-logo { width: 380px; height: 100%; }
  .dn-logo img { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
  #head-content .head-banner468 { align-self: flex-start; }
  #topnav .limit { padding: 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =========================================================
   Aufgabe 3: Fluides Layout (mobil zuerst) + Karten Variante D
   ========================================================= */
body { font: 16px/1.6 var(--font-body); color: var(--text); }
a, a:link, a:visited { color: var(--link); }
a:hover, a:active { color: var(--accent-hover); }
.limit, #footer .limit, #footer-widgets .limit { width: auto; max-width: var(--maxw); }

#page { width: auto; background: var(--surface); padding: 20px var(--gutter) 28px; }
#page.clearfix::after { display: none; }
#contentleft, #content, #contentright, #sidebar, #sidebar-bottom,
#sidebar-bottom-left, #sidebar-bottom-right, #sidebar-narrow { float: none; width: auto; max-width: 100%; }
#content { min-width: 0; }
#contentright { margin-top: 28px; }

/* Bilder, Videos, Einbettungen nie breiter als ihr Platz */
#page img, #page iframe, #page embed, #page object, #page video, .wp-caption { max-width: 100%; }
#page img { height: auto; }
.wp-caption { width: auto !important; }

/* Überschriften */
h1, h2, h3 { font-family: var(--font-head); color: var(--heading); line-height: 1.25; }
h1.archive-title, h1.page-title, h1.post-title.single { font-size: 26px; margin: 0 0 12px; letter-spacing: 0; }
h2.feat-title, h3.widgettitle {
  height: auto; line-height: 1.3; margin: 0 0 14px; padding: 0; border: 0;
  text-shadow: none; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: #222;
  display: flex; align-items: center; gap: 12px;
}
h2.feat-title::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--accent) 0 48px, #d6d6d6 48px); }

/* ---------- Startseite: Kategorien untereinander (Variante D) ---------- */
.cats-by-2 { overflow: visible; }
.cat-posts-left, .cat-posts-right, .cat-posts-stacked { float: none; width: auto; margin: 0; padding: 0; clear: none; }
.cat-posts-right, .cat-posts-stacked { margin-top: 18px; }
.post-clear { display: none; }

/* ---------- Beitragslisten als Karten (Startseite, Kategorie, Suche, Autor, Archiv) ---------- */
body:not(.single):not(.page):not(.error404) #content .post {
  display: grid; grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 0;
  background: var(--card-bg); border: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--card-shadow); margin: 0 0 14px; padding: 0;
  transition: box-shadow .2s, transform .2s;
}
body:not(.single):not(.page):not(.error404) #content .post:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
body:not(.single):not(.page):not(.error404) #content .post > .entry { display: contents; }
body:not(.single):not(.page):not(.error404) #content .post::after,
body:not(.single):not(.page):not(.error404) #content .post > .entry::after,
body:not(.single):not(.page):not(.error404) #content .post div[style*="clear"] { display: none; }
body:not(.single):not(.page):not(.error404) #content .post > .entry > *,
body:not(.single):not(.page):not(.error404) #content .post > p { grid-column: -2; padding: 0 14px; margin: 0; min-width: 0; }
body:not(.single):not(.page):not(.error404) #content .post .post-title { padding-top: 10px; }
body:not(.single):not(.page):not(.error404) #content .post > .entry > a:has(img.thumbnail),
body:not(.single):not(.page):not(.error404) #content .post > .entry > img.thumbnail {
  grid-column: 1; grid-row: 1 / -1; align-self: start; padding: 0; line-height: 0;
}
body:not(.single):not(.page):not(.error404) #content .post img.thumbnail {
  float: none; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  margin: 0; padding: 0; border: 0; background: none;
}
body:not(.single):not(.page):not(.error404) #content .post:not(:has(img.thumbnail)) { grid-template-columns: minmax(0, 1fr); }
body:not(.single):not(.page):not(.error404) #content .post .post-title { font-size: 17px; letter-spacing: 0; margin: 0 0 2px; line-height: 1.3; }
body:not(.single):not(.page):not(.error404) #content .post .post-title a { color: var(--heading); }
body:not(.single):not(.page):not(.error404) #content .post .meta { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
body:not(.single):not(.page):not(.error404) #content .post .meta a { color: var(--muted); }
body:not(.single):not(.page):not(.error404) #content .post .entry > p:not(:has(.more-link)) {
  font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body:not(.single):not(.page):not(.error404) #content .post p:has(> .more-link) { padding-bottom: 12px; padding-top: 4px; }
/* Handy: Cover + Titel/Meta oben nebeneinander, Kurztext und „Weiterlesen“ darunter über die volle Breite (keine Lücke unter dem Bild) */
@media (max-width: 599px) {
  body:not(.single):not(.page):not(.error404) #content .post { grid-template-rows: auto 1fr auto auto; }
  body:not(.single):not(.page):not(.error404) #content .post > .entry > a:has(img.thumbnail),
  body:not(.single):not(.page):not(.error404) #content .post > .entry > img.thumbnail { grid-row: 1 / 3; }
  body:not(.single):not(.page):not(.error404) #content .post > .entry > p,
  body:not(.single):not(.page):not(.error404) #content .post > p { grid-column: 1 / -1; }
  body:not(.single):not(.page):not(.error404) #content .post .entry > p:not(:has(.more-link)) { padding-top: 10px; }
}
#page a.more-link, #page a.more-link:link, #page a.more-link:visited {
  background: none; color: var(--accent); padding: 0; font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
a.more-link::after { content: " \2192"; }
#page a.more-link:hover, #page a.more-link:active { background: none; color: var(--accent-hover); }

/* ---------- Seitennavigation (WP-PageNavi): große Tippflächen ---------- */
.navigation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 20px; }
.navigation .alignleft, .navigation .alignright { float: none; width: auto; max-width: 100%; }
.wp-pagenavi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wp-pagenavi .pages { flex-basis: 100%; color: var(--muted); font-size: 13px; border: 0; padding: 0; margin: 0; }
.wp-pagenavi a, .wp-pagenavi span.current, .wp-pagenavi span.extend {
  min-width: 44px; height: 44px; margin: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); color: var(--text); padding: 0 10px;
}
.wp-pagenavi span.current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ---------- Einzelbeitrag und Seiten ---------- */
.singlepost .post, .singlepage .post { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 18px var(--gutter); border: 0; }
.single .entry, .page .entry { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.single .entry img, .page .entry img { border: 0; padding: 0; }
.entry table { display: block; max-width: 100%; overflow-x: auto; }
.entry pre { white-space: pre-wrap; }
img.alignright, img.alignleft { max-width: 50%; }

/* ---------- Sidebar ---------- */
#sidebar { display: grid; gap: 18px; overflow: visible; }
#sidebar .widget, #sidebar-bottom .widget {
  background: var(--card-bg); border-radius: var(--radius); padding: 16px; margin: 0; box-shadow: var(--card-shadow);
  overflow: hidden;
}
#sidebar-bottom .widget { margin-top: 18px; }
#searchform { display: flex; }
#searchform #searchfield, #searchform input[type="text"] {
  flex: 1; min-width: 0; width: auto; height: 44px; padding: 0 12px; font-size: 16px;
  border: 1px solid var(--card-border); border-right: 0; border-radius: 8px 0 0 8px; background: #fff;
}
#page #searchform #submitbutton, #searchform input[type="submit"] {
  height: 44px; padding: 0 16px; border: 0; border-radius: 0 8px 8px 0; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
}

/* ---------- Banner unten, Fuß-Widgets, Fuß ---------- */
.banner728-container, .banner728 { width: auto; max-width: 100%; overflow: hidden; }
.banner728 img { max-width: 100%; height: auto; }
#footer-widgets { width: auto; }
#footer-widgets .limit { padding: 20px var(--gutter); }
#footer-widgets .footer-widget1, #footer-widgets .footer-widget2,
#footer-widgets .footer-widget3, #footer-widgets .footer-widget4 { float: none; width: auto; margin: 0 0 16px; }
#footer { height: auto; line-height: 1.5; font-size: 14px; }
#footer .limit { padding: 18px var(--gutter); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
#footer .sub-icons { position: static; float: none; margin-left: auto; }

/* ---------- Ab 600 px ---------- */
@media (min-width: 600px) {
  body:not(.single):not(.page):not(.error404) #content .post { grid-template-columns: 180px minmax(0, 1fr); }

  body:not(.single):not(.page):not(.error404) #content .post > .entry > *,
  body:not(.single):not(.page):not(.error404) #content .post > p { padding-left: 20px; padding-right: 20px; }
  body:not(.single):not(.page):not(.error404) #content .post .post-title { font-size: 21px; padding-top: 16px; }
  #sidebar { grid-template-columns: 1fr 1fr; align-items: start; }
  #footer-widgets .limit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .singlepost .post, .singlepage .post { padding: 24px 28px; }

  /* Karten: Bild füllt die volle Kartenhöhe, die Höhe bestimmt der Text (keine Lücke unter Bild bzw. „Weiterlesen“) */
  body:not(.single):not(.page):not(.error404) #content .post > .entry > a:has(img.thumbnail) { align-self: stretch; position: relative; }
  body:not(.single):not(.page):not(.error404) #content .post:has(img.thumbnail) { min-height: 150px; }
  body:not(.single):not(.page):not(.error404) #content .post > .entry > a:has(img.thumbnail) .dn-thumb { position: absolute; inset: 0; }
  body:not(.single):not(.page):not(.error404) #content .post > .entry > a:has(img.thumbnail) img.thumbnail { height: 100%; aspect-ratio: auto; }
}

/* ---------- Ab 900 px: Inhalt + Sidebar nebeneinander ---------- */
@media (min-width: 900px) {
  #page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
  #contentright { margin-top: 0; }
  #sidebar { grid-template-columns: 1fr; }
  #footer-widgets .limit { grid-template-columns: repeat(4, 1fr); }
}

/* Videos (YouTube/Vimeo) im Seitenverhältnis 16:9 */
#page iframe[src*="youtube.com"], #page iframe[src*="youtube-nocookie.com"], #page iframe[src*="vimeo.com"] {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
}

/* =========================================================
   Aufgabe 4: Slideshow (Startseite) – fluide, ohne jQuery Cycle
   Auswahl/Reihenfolge kommen unverändert aus featured-wide.php des alten Themes.
   ========================================================= */
#home-top { background: #000; overflow: hidden; }
#wrap #home-top #slideshow { background: #000; padding: 0; position: relative; }
#home-top #slideshow .slides { width: auto; height: auto; }
#home-top #slideshow .slides ul { display: grid; }
#home-top #slideshow .slides li, .js #home-top #slideshow .slides li,
#home-top #slideshow .slides li.full-width, .js #home-top #slideshow .slides li.full-width {
  grid-area: 1 / 1; position: relative; width: auto; height: auto; margin: 0; padding: 0;
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; z-index: 1;
}
.js #home-top #slideshow .slides li.is-active, .js #home-top #slideshow .slides li.full-width.is-active,
#home-top #slideshow .slides li.is-active,
#home-top #slideshow:not(.dn-slider) .slides li:first-child, #home-top #slideshow:not(.dn-slider) .slides li.full-width:first-child { opacity: 1; visibility: visible; z-index: 2; }
#home-top #slideshow .slides li .entry { margin: 0; padding: 0; }

/* Bild */
#home-top #slideshow .feature-image, #home-top #slideshow .feature-video,
#home-top #slideshow .full-width .feature-image {
  float: none; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; overflow: hidden; line-height: 0;
}
#home-top #slideshow img.home_feature, #home-top #slideshow .full-width img.home_feature {
  width: 100%; height: auto; aspect-ratio: 990 / 310; object-fit: cover; float: none; margin: 0; padding: 0; border: 0;
}
#home-top #slideshow li:not(.full-width) img.home_feature { aspect-ratio: 2 / 1; }
#home-top #slideshow .feature-video iframe, #home-top #slideshow .feature-video object, #home-top #slideshow .feature-video embed {
  width: 100%; height: auto; aspect-ratio: 2 / 1;
}

/* Text: am Handy unter dem Bild */
#home-top #slideshow .feat-content, #home-top #slideshow .full-width .feat-content {
  position: static; width: auto; padding: 12px var(--gutter) 6px; background: #000; color: #ddd; opacity: 1;
}
#home-top #slideshow .slides li .entry h2.post-title, #home-top #slideshow .slides li .entry h2.post-title a {
  font-size: 20px; line-height: 1.25; margin: 0 0 4px; color: #fff !important;
}
#home-top #slideshow .feat-content p { margin: 0; font-size: 14px; line-height: 1.45; color: #ddd; }
#home-top #slideshow .feat-content .meta, #home-top #slideshow .feat-content a.more-link { display: none; }

/* Leiste „Tipps der Redaktion“ + Punkte */
#home-top #slideshow .slides-nav-container {
  position: relative; z-index: 2; width: auto; height: 44px; line-height: 44px; background: #000; padding: 0 var(--gutter);
}
#home-top #slideshow h2.feature-title {
  position: absolute; left: var(--gutter); bottom: 0; z-index: 5; height: 44px; line-height: 44px; margin: 0; padding: 0; border: 0;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #aaa; text-shadow: none;
}
#home-top #slideshow ul.slides-nav {
  position: absolute; right: calc(var(--gutter) - 8px); bottom: 0; height: 44px; padding: 0; margin: 0; display: flex; z-index: 6;
}
.js #home-top #slideshow .slides-nav li, #home-top #slideshow .slides-nav li {
  float: none !important; display: block !important; width: 28px; height: 44px; margin: 0; padding: 0; line-height: 44px;
}
.js #home-top #slideshow .slides-nav li a, #home-top #slideshow .slides-nav li a {
  position: relative; display: block; width: 28px; height: 44px; background: none; opacity: 1;
}
#home-top #slideshow .slides-nav li a img { display: none; }
#home-top #slideshow .slides-nav li a::after {
  content: ""; position: absolute; left: 9px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: #666; transition: background .2s;
}
#home-top #slideshow .slides-nav li.on a::after, #home-top #slideshow .slides-nav li a:hover::after { background: var(--accent); }

/* Ab 600 px: Text als Verlauf über dem Bild */
@media (min-width: 600px) {
  #home-top #slideshow .full-width .feat-content {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    background: linear-gradient(transparent, rgba(0,0,0,.85)); padding: 40px 20px 14px;
  }
  #home-top #slideshow .slides li .entry h2.post-title, #home-top #slideshow .slides li .entry h2.post-title a { font-size: 24px; }
  #home-top #slideshow li:not(.full-width) .entry { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
}
@media (min-width: 1000px) {
  #home-top #slideshow .full-width .feat-content { padding: 50px 24px 18px; }
}
.js #home-top #slideshow .slides-nav li.on a, .js #home-top #slideshow .slides-nav li a:hover, .js #home-top #slideshow .slides-nav li a:active,
#home-top #slideshow .slides-nav li.on a { background: none; opacity: 1; }

/* =========================================================
   Aufgabe 4a: Wertungs-Abzeichen auf dem Vorschaubild
   ========================================================= */
.dn-thumb { position: relative; display: block; line-height: 0; }
.dn-rating {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  display: inline-flex; align-items: baseline; gap: 1px;
  padding: 2px 7px 3px; border-radius: 999px;
  background: rgba(10,10,10,.82); color: #fff;
  font: 600 12px/1.2 var(--font-head); letter-spacing: .02em;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.dn-rating b { color: #ff3b42; font-size: 15px; font-weight: 700; }
.dn-rating span { opacity: .75; font-size: 11px; }

/* Handy: redaktioneller Blocksatz (inline im Beitrag) erzeugt große Wortlücken → linksbündig mit Silbentrennung */
@media (max-width: 599px) {
  .single .entry [style*="justify"], .page .entry [style*="justify"] { text-align: left !important; }
  .single .entry, .page .entry { hyphens: auto; -webkit-hyphens: auto; }
}

/* 404-Seite: Liste der neuesten Beiträge als Karte */
.error404 #content .post { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 18px var(--gutter); }
.error404 #content .post ol { padding-left: 2.2em; margin: 10px 0 0; }

/* =========================================================
   Kopf ohne Banner (2026-10-20): Hintergrund ohne schwarzen Banner-Rahmen
   (Original-Hintergrund „header_ausschn.jpg“, deckungsgleich mit dem bisherigen Bild)
   ========================================================= */
@media (min-width: 1000px) {
  html body { background-image: url(images/header-bg-ohne-banner.jpg); }
}

/* Suchfeld: echter Platzhalter statt Vorgabetext (2026-10-20) */
#searchform #searchfield { color: var(--text); }
#searchform #searchfield::placeholder { color: var(--muted); opacity: 1; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }