/*
Theme Name: bln41
Theme URI: https://bln41.de
Author: bln41
Description: Schlichtes, klares WordPress-Theme für bln41.de, micro.bln41.de und vinyl-41.de – kein Schnickschnack, kein Gradient, automatischer Darkmode.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bln41
Tags: blog, minimal, dark-mode
*/

/* ============================================================
   CSS Custom Properties – Light & Dark
   ============================================================ */

:root {
  --color-bg:        #ffffff;
  --color-surface:   #f5f5f5;
  --color-text:      #1a1a1a;
  --color-muted:     #666666;
  --color-link:      #1a1a1a;
  --color-link-hover:#555555;
  --color-border:    #e0e0e0;
  --color-tag-bg:    #efefef;
  --color-tag-text:  #444444;

  --font-sans: 'Iosevka', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
  --font-size-base: 1.125rem;
  --line-height: 1.7;
  --max-width: 680px;
  --space: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:        #141414;
    --color-surface:   #1e1e1e;
    --color-text:      #e8e8e8;
    --color-muted:     #888888;
    --color-link:      #e8e8e8;
    --color-link-hover:#bbbbbb;
    --color-border:    #2e2e2e;
    --color-tag-bg:    #252525;
    --color-tag-text:  #aaaaaa;
  }
}

/* ============================================================
   Reset & Base
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ============================================================
   Layout
   ============================================================ */

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-header,
.site-content,
.site-footer {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space);
  padding-right: var(--space);
}

.site-header {
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}

.site-content {
  flex: 1;
  padding-top: 0;
  padding-bottom: 3rem;
}

/* ============================================================
   Header
   ============================================================ */

.site-branding {
  margin-bottom: 1rem;
}

.site-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.site-title a {
  color: var(--color-text);
  text-decoration: none;
}

.site-title a:hover {
  color: var(--color-muted);
}

.site-description {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 0.2rem;
}

/* ============================================================
   Navigation
   ============================================================ */

.main-navigation {
  margin-top: 0.75rem;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0;
}

.main-navigation ul li {
  position: relative;
}

.main-navigation ul li + li::before {
  content: ' · ';
  color: var(--color-muted);
  margin: 0 0.3rem;
}

.main-navigation a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--color-text);
}

/* Dropdown */
.main-navigation ul ul {
  display: none;
  position: absolute;
  top: 1.6rem;
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.5rem 0;
  min-width: 160px;
  z-index: 100;
  flex-direction: column;
  gap: 0;
}

.main-navigation ul ul li + li::before {
  display: none;
}

.main-navigation ul ul li a {
  display: block;
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul {
  display: flex;
}

/* ============================================================
   Posts / Archive
   ============================================================ */

.posts-section h2.screen-reader-text {
  position: absolute;
  left: -9999px;
}

.post {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.post:last-of-type {
  border-bottom: none;
}

.post-meta {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}

.post-meta a {
  color: var(--color-muted);
  text-decoration: none;
}

.post-meta a:hover {
  color: var(--color-text);
}

.post-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

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

.post-title a:hover {
  color: var(--color-muted);
}

.post-content {
  font-size: 0.9375rem;
  color: var(--color-text);
}

.post-content p {
  margin-bottom: 0.75rem;
}

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

.post-content a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-border);
  transition: text-decoration-color 0.15s, color 0.15s;
}

.post-content a:hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-muted);
}

.post-content em, .post-content blockquote {
  color: var(--color-muted);
  font-style: italic;
}

.post-content blockquote {
  border-left: 2px solid var(--color-border);
  padding-left: 0.75rem;
  margin: 0.75rem 0;
}

.post-content code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.1em 0.4em;
  font-size: 0.875em;
  font-family: var(--font-sans);
}

/* Tags */
.post-tags {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.post-tags a {
  display: inline-block;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.post-tags a:hover {
  background: var(--color-border);
  color: var(--color-text);
}

/* ============================================================
   Single Post
   ============================================================ */

.single .post {
  border-bottom: none;
}

.back-link {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--color-muted);
  text-decoration: none;
  margin-bottom: 1.5rem;
}

.back-link:hover {
  color: var(--color-text);
}

/* ============================================================
   Pagination
   ============================================================ */

.pagination {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.pagination a,
.pagination span {
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  transition: all 0.15s;
}

.pagination a:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.pagination .current {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-muted);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  font-size: 0.8rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
}

.site-footer a {
  color: var(--color-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-text);
}

.footer-widgets {
  margin-bottom: 0.75rem;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

/* Webring */
.webring-bar {
  margin-top: 0.75rem;
  font-size: 0.8rem;
}

/* ============================================================
   Widgets (Sidebar / Footer)
   ============================================================ */

.widget {
  margin-bottom: 1.5rem;
}

.widget-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.widget ul {
  list-style: none;
}

.widget ul li {
  padding: 0.2rem 0;
  font-size: 0.875rem;
}

.widget ul li a {
  color: var(--color-muted);
  text-decoration: none;
}

.widget ul li a:hover {
  color: var(--color-text);
}

/* Search */
.search-form {
  display: flex;
  gap: 0.4rem;
}

.search-field {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.3rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  border-radius: 3px;
  outline: none;
}

.search-field:focus {
  border-color: var(--color-muted);
}

.search-submit {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  padding: 0.3rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}

.search-submit:hover {
  background: var(--color-border);
  color: var(--color-text);
}

/* ============================================================
   404 / No Results
   ============================================================ */

.not-found h1,
.no-results h1 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

/* ============================================================
   Screen reader utility
   ============================================================ */

.screen-reader-text {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  width: 1px;
  white-space: nowrap;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 480px) {
  :root {
    --font-size-base: 1rem;
    --space: 1rem;
  }

  .site-header {
    padding-top: 1.5rem;
  }
}


/* ============================================================
   Comments, Fediverse Reactions & ActivityPub Plugin
   ============================================================
   Basiert auf dem echten HTML-Output von micro.bln41.de:

   .comments-area
     h3.comments-title          ← "1 Kommentar" / "2 Fediverse-Antworten …"
     ol.comment-list
       li#comment-NNN.comment   ← WP standard comment classes
         .comment-body (unser callback) ODER Plugin-eigenes Markup
           img.avatar
           .comment-author-link / cite.fn
           time
           .comment-content
             [Remote-Reply JS-Widget]
     h3.comments-title          ← "Kommentar hinterlassen"
     ## Likes   ← H2 direkt in .comments-area (Plugin)
     ul > li > a > img + Text
     ## Neuveröffentlichungen
     ul > li > a > img + Text
     #respond / .comment-respond
   ============================================================ */

.comments-area {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* ---- Abschnitts-Überschriften ---- */

.comments-area h2,
.comments-area h3,
.comments-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin: 1.5rem 0 0.75rem;
  border: none;
  background: none;
  padding: 0;
}

.comments-area h2:first-child,
.comments-area h3:first-child,
.comments-title:first-child {
  margin-top: 0;
}

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

.comment-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

/* Jeder Kommentar-Eintrag */
.comment-list > li,
.comment-list .comment {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
}

.comment-list > li:last-child,
.comment-list .comment:last-child {
  border-bottom: none;
}

/* Meta-Zeile: Avatar + Name + Zeit */
.comment-list .comment-meta,
.comment-list .comment-author {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

/* Avatar-Bilder (Gravatar & ActivityPub-Avatare) */
.comment-list img.avatar,
.comment-list .comment-author img {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Autorenname */
.comment-list .comment-author .fn,
.comment-list cite.fn,
.comment-list .comment-author b {
  font-size: 0.875rem;
  font-weight: 600;
  font-style: normal;
  color: var(--color-text);
}

.comment-list .comment-author .fn a,
.comment-list cite.fn a {
  color: var(--color-text);
  text-decoration: none;
}

.comment-list .comment-author .fn a:hover {
  color: var(--color-muted);
}

/* Emoji-Bilder in Fediverse-Anzeigenamen */
.comment-list .emoji,
.comment-list img.emoji {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin: 0 0.05em;
  display: inline;
  border-radius: 0;
}

/* Zeitstempel */
.comment-list .comment-metadata,
.comment-list .comment-meta time,
.comment-list .comment-metadata a {
  font-size: 0.75rem;
  color: var(--color-muted);
  text-decoration: none;
}

.comment-list .comment-metadata a:hover {
  color: var(--color-text);
}

/* Bearbeitungs-Link (Admin) */
.comment-list .comment-edit-link {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-left: 0.4rem;
  text-decoration: none;
}

/* Kommentar-Text */
.comment-list .comment-content {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: var(--line-height);
}

.comment-list .comment-content p {
  margin-bottom: 0.4rem;
}

.comment-list .comment-content p:last-child {
  margin-bottom: 0;
}

.comment-list .comment-content a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-border);
}

.comment-list .comment-content a:hover {
  text-decoration-color: var(--color-muted);
}

/* Moderations-Hinweis */
.comment-list .comment-awaiting-moderation {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-style: italic;
}

/* Antwort-Link */
.comment-list .reply {
  margin-top: 0.4rem;
}

.comment-list .comment-reply-link {
  font-size: 0.78rem;
  color: var(--color-muted);
  text-decoration: none;
}

.comment-list .comment-reply-link:hover {
  color: var(--color-text);
}

/* ---- ActivityPub: Remote-Reply-Widget ----
   Das Plugin rendert ein JS-gesteuertes Widget das initial
   als einfacher Button/Link erscheint und per JS ein Modal öffnet.
   Wir integrieren es dezent ins Theme. */

/* Wrapper des ganzen Widgets (div oder span mit data-Attributen) */
.comment-list [class*="remote-reply"],
.comment-list .activitypub-remote-reply,
.comment-list .wp-block-activitypub-remote-reply {
  margin-top: 0.5rem;
  font-size: 0.78rem;
}

/* Trigger-Button/Link "Als … antworten" / "Antworte im Fediverse" */
.comment-list [class*="remote-reply"] button,
.comment-list [class*="remote-reply"] a[role="button"],
.comment-list [class*="remote-reply"] .activitypub-remote-reply-trigger {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-muted);
  cursor: pointer;
  text-decoration: none;
}

.comment-list [class*="remote-reply"] button:hover,
.comment-list [class*="remote-reply"] a[role="button"]:hover {
  color: var(--color-text);
}

/* Modal/Overlay des Dialogs */
.activitypub-remote-reply-modal,
[class*="remote-reply"] [role="dialog"],
[class*="remote-reply"] .modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

/* Überschriften im Modal */
.activitypub-remote-reply-modal h2,
.activitypub-remote-reply-modal h3,
.activitypub-remote-reply-modal h4,
[class*="remote-reply"] [role="dialog"] h2,
[class*="remote-reply"] [role="dialog"] h3,
[class*="remote-reply"] [role="dialog"] h4 {
  font-size: 0.75rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin: 0.6rem 0 0.25rem !important;
  border: none !important;
  background: none !important;
}

.activitypub-remote-reply-modal h2:first-child,
[class*="remote-reply"] [role="dialog"] h2:first-child {
  margin-top: 0 !important;
}

/* Erklärungstexte im Modal */
.activitypub-remote-reply-modal p,
[class*="remote-reply"] [role="dialog"] p,
[class*="remote-reply"] [role="dialog"] label {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-bottom: 0.3rem;
  line-height: 1.5;
}

/* Inputs im Modal */
.activitypub-remote-reply-modal input,
[class*="remote-reply"] [role="dialog"] input {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  border-radius: 3px;
  outline: none;
  margin-bottom: 0.4rem;
}

.activitypub-remote-reply-modal input:focus,
[class*="remote-reply"] [role="dialog"] input:focus {
  border-color: var(--color-muted);
}

/* Buttons im Modal */
.activitypub-remote-reply-modal button,
[class*="remote-reply"] [role="dialog"] button {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}

.activitypub-remote-reply-modal button:hover,
[class*="remote-reply"] [role="dialog"] button:hover {
  background: var(--color-border);
}

/* Schließen-Button */
[class*="remote-reply"] .close,
[class*="remote-reply"] [aria-label="Close"],
[class*="remote-reply"] [aria-label="Schließen"] {
  float: right;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* Verschachtelter Details/Summary für "Warum muss ich mein Profil eingeben?" */
[class*="remote-reply"] details summary {
  font-size: 0.75rem;
  color: var(--color-muted);
  cursor: pointer;
  list-style: none;
}

[class*="remote-reply"] details summary::-webkit-details-marker {
  display: none;
}

[class*="remote-reply"] details[open] summary {
  margin-bottom: 0.3rem;
}

[class*="remote-reply"] details p {
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* ---- ActivityPub: Likes & Neuveröffentlichungen ----
   Das Plugin rendert direkt H2 + UL als Geschwister-Elemente
   der Kommentarliste in .comments-area */

.comments-area > h2 {
  /* Bereits oben abgedeckt, hier nochmal explizit für Spezifität */
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* Erste H2 nach der Kommentarliste bekommt extra Abstand nach oben */
.comment-list + h2,
.comments-navigation + h2 {
  margin-top: 1.5rem;
}

.comments-area > ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.5rem;
  padding: 0;
}

.comments-area > ul > li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.comments-area > ul > li a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-muted);
  text-decoration: none;
}

.comments-area > ul > li a:hover {
  color: var(--color-text);
}

/* Reaktions-Avatare */
.comments-area > ul > li img {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Emoji in Reaktions-Listen (👍 ♻️) */
.comments-area > ul > li a > span,
.comments-area > ul > li a:first-child {
  font-size: 0.9em;
}

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

.comment-respond,
#respond {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* Titelzeile des Formulars */
.comment-respond h3#reply-title,
.comment-form-section .comments-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
}

/* "Antwort abbrechen"-Link */
#cancel-comment-reply-link {
  font-size: 0.78rem;
  color: var(--color-muted);
  text-decoration: none;
  margin-left: 0.5rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

#cancel-comment-reply-link:hover {
  color: var(--color-text);
}

.fediverse-reply-hint {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
}

.fediverse-reply-hint code {
  font-family: var(--font-sans);
  font-size: inherit;
}

/* Formularfelder */
.comment-form p,
.comment-form .comment-form-field {
  margin-bottom: 0.5rem;
}

.comment-form label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.15rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0.35rem 0.55rem;
  border-radius: 3px;
  outline: none;
  resize: vertical;
  line-height: var(--line-height);
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--color-muted);
}

.comment-form textarea {
  min-height: 90px;
}

.comment-form .form-submit {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.comment-form .submit-button,
.comment-form .form-submit input[type="submit"] {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}

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

.comment-form .logged-in-as {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.comment-form .logged-in-as a {
  color: var(--color-muted);
  text-decoration: none;
}

/* Webmention-Feld */
.comment-form .comment-form-url {
  margin-bottom: 0.5rem;
}

.comments-closed {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 0.75rem;
}

/* Kommentar-Navigations-Paginierung */
.comments-navigation {
  margin: 0.75rem 0;
  font-size: 0.8rem;
}

.comments-navigation a {
  color: var(--color-muted);
  text-decoration: none;
}

.comments-navigation a:hover {
  color: var(--color-text);
}

/* ============================================================
   Kommentar-Verschachtelung & keine Nummern
   ============================================================ */

/* Falls doch ol/li gerendert wird – Nummern weg */
.comment-list,
ol.comment-list {
  list-style: none;
  counter-reset: none;
}

.comment-list li,
.comment-list li::before {
  counter-increment: none;
  content: none;
}

/* Verschachtelte Antworten – Children einrücken */
.comment-list .children,
.comment-list .depth-2,
.comment-list .depth-3,
.comment-list .depth-4 {
  margin-left: 1.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border);
}

/* Jede Verschachtelungstiefe leicht schwächer */
.comment-list .depth-3 {
  margin-left: 1.25rem;
}

.comment-list .depth-4 {
  margin-left: 1rem;
}

/* Kinder-Wrapper von wp_list_comments im div-Modus */
.comment-list .comment > .children {
  margin-top: 0.5rem;
}

/* ============================================================
   Kommentar-Nummern definitiv entfernen
   ============================================================ */

ol.comment-list,
ol.comment-list > li,
.comments-area ol,
.comments-area ol > li {
  list-style: none !important;
  list-style-type: none !important;
  counter-increment: none !important;
}

ol.comment-list > li::before,
.comments-area ol > li::before {
  content: none !important;
}

/* ============================================================
   Featured Image
   ============================================================ */

.post-thumbnail {
  margin-bottom: 1rem;
}

.post-thumbnail img,
.post-thumbnail a img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}

/* Auf der Archiv-Seite etwas kompakter */
.archive .post-thumbnail img,
.home .post-thumbnail img {
  max-height: 320px;
  object-fit: cover;
}

/* ============================================================
   Reicherer Post-Content (bln41.de + vinyl-41.de)
   ============================================================ */

/* Überschriften im Content */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.25rem 0 0.4rem;
  color: var(--color-text);
  line-height: 1.3;
}

.post-content h2 { font-size: 1rem; }
.post-content h3 { font-size: 0.95rem; }
.post-content h4,
.post-content h5,
.post-content h6 { font-size: 0.9rem; color: var(--color-muted); }

/* Listen */
.post-content ul,
.post-content ol {
  margin: 0.6rem 0 0.75rem 1.25rem;
}

.post-content ul li,
.post-content ol li {
  margin-bottom: 0.3rem;
  line-height: var(--line-height);
}

.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }

/* Code-Blöcke */
.post-content pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.75rem 0;
}

.post-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* Tabellen */
.post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0.75rem 0;
}

.post-content th,
.post-content td {
  text-align: left;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
}

.post-content th {
  font-weight: 700;
  color: var(--color-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Bilder im Content */
.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

.post-content figure {
  margin: 0.75rem 0;
}

.post-content figcaption {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.3rem;
}

/* WordPress-Bildausrichtungen */
.post-content .alignleft {
  float: left;
  margin: 0.25rem 1rem 0.5rem 0;
}

.post-content .alignright {
  float: right;
  margin: 0.25rem 0 0.5rem 1rem;
}

.post-content .aligncenter {
  display: block;
  margin: 0.5rem auto;
}

.post-content .alignwide,
.post-content .alignfull {
  width: 100%;
}

/* Galerie */
.post-content .gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.post-content .gallery-item {
  flex: 1 1 calc(33% - 0.4rem);
  min-width: 100px;
}

.post-content .gallery-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 3px;
}

/* ============================================================
   iFrame-Embeds (Bandcamp, YouTube etc.)
   ============================================================ */

.post-content iframe {
  max-width: 100%;
  border: none;
  border-radius: 3px;
}

/* Consent-Wrapper (z.B. Borlabs, Complianz, WP Consent) */
.post-content .wp-block-embed,
.post-content .embed-container {
  margin: 0.75rem 0;
}

/* Consent-Hinweis-Boxen die Plugins einfügen */
.post-content [class*="consent"],
.post-content [class*="dsgvo"],
.post-content [class*="cookie-notice"],
.post-content .BorlabsCookie,
.post-content .cli-plugin-main-link {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: 0.75rem 0;
}

.post-content [class*="consent"] a,
.post-content [class*="dsgvo"] a {
  color: var(--color-muted);
  text-decoration: underline;
}

/* ============================================================
   Sterne-Bewertung (WP-Postratings o.ä.)
   ============================================================ */

.post-ratings,
[class*="star-rating"],
[class*="wp-postratings"] {
  margin: 0.75rem 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.post-ratings img,
[class*="star-rating"] img {
  vertical-align: middle;
  height: 1.1em;
  width: auto;
}

/* ============================================================
   Einzelbeitrag – etwas mehr Raum
   ============================================================ */

.single .post-title {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.single .post-meta {
  margin-bottom: 0.75rem;
}

/* Kategorie-Links */
.post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.post-categories a {
  font-size: 0.75rem;
  color: var(--color-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
}

.post-categories a:hover {
  color: var(--color-text);
  border-color: var(--color-muted);
}

/* ============================================================
   Clearfix für float-Bilder
   ============================================================ */

.post-content::after {
  content: '';
  display: table;
  clear: both;
}