/* ===== CSS DESIGN SYSTEM ===== */
/* Basierend auf BlogBuilder Rules: Zeitlos, luftig, minimal */

:root {
  /* Light Mode (Default) */
  --color-primary: #333333;
  --color-secondary: #666666;
  --color-accent: #ff6666;
  --color-bg: #ffffff;
  --color-surface: #f8f8f8; /* Subtiler Hintergrund für Code-Blöcke */
  --color-text: #333333;
  --color-muted: #999999;
  --color-border: #e5e5e5;
  
  /* Großzügiges Spacing für luftiges Design */
  --space-micro: 0.25rem;
  --space-small: 0.5rem;
  --space-medium: 0.75rem;
  --space-base: 1rem;
  --space-large: 2rem;
  --space-xlarge: 3rem;
  --space-xxlarge: 4rem;
  
  /* Klare Typography-Hierarchie */
  --font-size-small: 0.9rem;
  --font-size-base: 1rem;
  --font-size-large: 1.25rem;  
  --font-size-xlarge: 1.5rem;   /* Deutlicher für Headlines */
  --font-size-xxlarge: 1.875rem; /* Für wichtige Titel */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;  /* Für Headlines */
  --line-height-base: 1.6;
  --line-height-tight: 1.3;
  
  /* Zeitlose, moderne Font-Stack */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
}

/* Dark Mode */
[data-theme="dark"] {
  --color-primary: #e5e5e5;
  --color-secondary: #b3b3b3;
  --color-accent: #ff6666;
  --color-bg: #151515;
  --color-surface: #303030; /* Subtiler Hintergrund für Code-Blöcke */
  --color-text: #f9f9f9;
  --color-muted: #808080;
  --color-border: #333333;
}

/* ===== BASE STYLES ===== */
/* Zeitlose, moderne Basis */

* {
  box-sizing: border-box;
}

html {
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}

/* ===== GENERISCHE KLASSEN (MANDATORY) ===== */
/* Vor jedem Element IMMER prüfen ob diese existieren */

/* Buttons - Generische Klassen */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-small) var(--space-large);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  text-decoration: none;
  background: var(--color-accent);
  color: white;
}

.btn:hover {
  opacity: 0.9;
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  font-family: var(--font-family-base);
}

.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  font-family: var(--font-family-base);
}

.btn-small {
  padding: var(--space-small) var(--space-base);
  font-size: var(--font-size-small);
}

/* Cards - Sparsam verwenden */
.card {
  background: var(--color-bg);
  border-radius: 0.5rem;
  overflow: hidden;
}

.card-content {
  padding: var(--space-large);
}

/* Layout - Generische Klassen */
.container {
  width: 100%;
  max-width: none; /* Volle Browser-Breite wie gewünscht */
  padding: 0 var(--space-large);
}

.grid {
  display: grid;
  gap: var(--space-large);
}

.flex {
  display: flex;
}

/* Spacing - Generische Klassen */
.space-small { margin: var(--space-small); }
.space-large { margin: var(--space-large); }
.space-xlarge { margin: var(--space-xlarge); }

/* ===== LAYOUT SYSTEM ===== */
/* Volle Browser-Breite auf Desktop wie gewünscht */

.layout {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  background: var(--color-bg);
}

/* Header mit zeitlos-moderner Navigation */
.main-header {
  background: var(--color-bg);
  padding: var(--space-xlarge) 0;
  /* Keine Border für klareres Design */
}

.header-content {
  max-width: none; /* Volle Browser-Breite wie gewünscht */
  margin: 0 auto;
  padding: 0 var(--space-xxlarge);
  display: flex;
  justify-content: space-between;
  align-items: center; /* Zentrale Ausrichtung für Theme-Button */
}

/* Desktop: Theme-Button normal im Layout */
#theme-toggle-container {
  position: static;
}

/* Brand-Bereich mit Logo + Tagline */
.brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.logo {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-primary);
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.tagline {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-muted);
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* Zeitlos-moderne Navigation */
.nav {
  display: flex;
  gap: var(--space-xxlarge);
  align-items: center;
}

.nav-link {
  color: var(--color-muted);
  font-weight: 400;
  font-size: 0.9rem;
  padding: var(--space-small) var(--space-base);
  border-radius: 6px;
  letter-spacing: 0.01em;
  position: relative;
}

.nav-link:hover {
  color: var(--color-primary);
  background: rgba(51, 51, 51, 0.04);
}

.nav-link--active {
  color: var(--color-primary);
  background: rgba(51, 51, 51, 0.06);
  font-weight: 500;
}

/* Dark Mode: Navigation Links */
[data-theme="dark"] .nav-link:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .nav-link--active {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 500;
}

/* Main Content Area */
.main-content {
  padding: var(--space-xxlarge); /* Großzügige Abstände */
  overflow-y: auto;
  max-width: none; /* Volle Browser-Breite nutzen */
}

/* Posts Grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-xlarge); /* Luftige Abstände zwischen Posts */
}

/* Post Card Komponente */
.post-card {
  /* Wenig cards - nur für klar abgegrenzte Container */
  background: var(--color-bg);
  border-radius: 0.5rem;
  padding: 0; /* Kein äußeres Padding für perfekte Ausrichtung */
  display: flex;
  flex-direction: column;
  height: 100%; /* Gleiche Höhe für alle Cards */
}

.post-card-header {
  margin-bottom: var(--space-base);
  padding: var(--space-base) var(--space-base) 0 var(--space-base); /* Nur innen Padding */
}

.post-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-base) var(--space-base) var(--space-base); /* Nur innen Padding */
}

/* Pin Icon */
.post-pin-icon {
  position: absolute;
  top: var(--space-base);
  left: var(--space-base);
  background: var(--color-accent);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.post-pin-icon svg {
  width: 18px;
  height: 18px;
}

/* Guest Icon - links positioniert */
.post-guest-icon {
  position: absolute;
  top: var(--space-base);
  background: var(--color-accent);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* Guest Icon Positionierung abhängig von Pin */
.post-guest-icon.no-pin {
  left: var(--space-base);
}

.post-guest-icon.with-pin {
  left: calc(var(--space-base) + 50px);
}

.post-guest-icon svg {
  width: 18px;
  height: 18px;
}

/* Guest Author Pille rechts - gleiche Höhe wie Pin */
.post-guest-author-pill {
  position: absolute;
  top: var(--space-base);
  right: var(--space-base);
  background: var(--color-accent);
  color: white;
  height: 36px;
  border-radius: 18px;
  padding: 0 var(--space-base);
  display: flex;
  align-items: center;
  z-index: 3;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* Mobile: Kompakte Autor-Pille */
@media (max-width: 768px) {
  .post-guest-author-pill {
    font-size: 0.75rem;
    padding: 0 var(--space-small);
  }
  
  /* Guest Icon Anpassung für Mobile */
  .post-guest-icon.with-pin {
    left: calc(var(--space-base) + 42px);
  }
}

.post-card-footer {
  margin-top: auto;
  padding-top: var(--space-small);
  display: flex;
  justify-content: center; /* Button mittig */
  align-items: center;
}

.meta-separator {
  color: var(--color-muted);
  margin: 0 var(--space-micro);
}

.post-category {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

/* Post Image - Generische Klasse für Teaser-Bilder */
.post-image-container {
  margin-bottom: var(--space-large);
  overflow: hidden;
  border-radius: 11px; /* Einheitlich abgerundet auf 11px */
  /* Aspect Ratio für konsistente Bildgrößen - etwas höher für bessere Proportionen */
  aspect-ratio: 16 / 10;
  position: relative; /* Für absolute Positionierung der Tags */
}

/* Image Placeholder für Posts ohne Bild */
.post-image-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
}

.post-image-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

.post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.post-card-title {
  font-size: var(--font-size-xlarge);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--space-base) 0;
  line-height: var(--line-height-tight);
}

/* Titel-Links */
.post-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-card-title a:hover {
  color: var(--color-accent);
  cursor: pointer;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-base);
  margin-bottom: var(--space-large);
  font-size: 0.875rem;
  color: var(--color-muted);
}

.post-card-excerpt {
  color: var(--color-secondary);
  line-height: var(--line-height-base);
  margin: 0 0 var(--space-large) 0;
}

/* Tags im Bild-Overlay */
.post-card-tags-overlay {
  position: absolute;
  bottom: var(--space-base);
  right: var(--space-base);
  left: var(--space-base); /* Verhindert Überlauf nach links */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; /* Tags bleiben rechtsbündig beim Umbruch */
  gap: var(--space-small);
}

.tag {
  display: inline-block;
  padding: var(--space-micro) var(--space-base); /* Mehr horizontales Padding für Pillen-Form */
  background: var(--color-primary);
  color: white;
  font-size: 0.875rem;
  font-weight: var(--font-weight-normal);
  border-radius: 999px; /* Vollständig runde Pillen-Form */
  border: none;
  letter-spacing: 0.01em; /* Bessere Lesbarkeit */
}

/* Weiße Tags im Bild-Overlay */
.tag-overlay {
  background: white;
  color: #333333;
  border: none;
  backdrop-filter: blur(4px);
}

/* Dark Mode: Tags bleiben weiß mit dunkler Schrift */
[data-theme="dark"] .tag-overlay {
  background: white;
  color: #333333;
}

/* Dark Mode: Normale Tags mit weißem Hintergrund */
[data-theme="dark"] .tag {
  background: white;
  color: #333333;
}

/* Post-Detail Tags - statisch, keine Interaktion */
.post-detail-tags .tag {
  cursor: default;
}

/* Dark Mode: Tags in Post-Detail bleiben coral */
[data-theme="dark"] .post-detail-tags .tag {
  background: var(--color-accent);
  color: white;
}

/* Klickbare Tags */
.tag-clickable {
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tag-clickable:hover:not(.tag-active) {
  background: var(--color-accent) !important;
  color: white !important;
}

/* Dark Mode: Klickbare Tags */
[data-theme="dark"] .tag-clickable:hover:not(.tag-active) {
  background: var(--color-accent) !important;
  color: white !important;
}

/* Guest Badge entfernt - nur Icons oben in Post-Cards */

/* ===== PLACEHOLDER CARDS ===== */
.post-card-placeholder {
  opacity: 0.6;
  pointer-events: none;
}

/* Placeholder Image (mit Shimmer) */
.placeholder-image {
  background: var(--color-border);
  position: relative;
  overflow: hidden;
}

.placeholder-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%
  );
  animation: shimmer 2.5s ease-in-out infinite;
}

/* Placeholder Tags (oben rechts wie echte Tags) */
.placeholder-tags {
  position: absolute;
  bottom: var(--space-base);
  right: var(--space-base);
  display: flex;
  gap: var(--space-small);
}

.placeholder-tag {
  width: 60px;
  height: 24px;
  background: var(--color-border);
  border-radius: 999px;
}

/* Placeholder Title (mehrzeilig wie echte Titel) */
.placeholder-title {
  margin: 0 0 var(--space-base) 0;
}

.placeholder-title-line1 {
  width: 85%;
  height: 1.2em;
  margin-bottom: var(--space-micro);
}

.placeholder-title-line2 {
  width: 65%;
  height: 1.2em;
}

/* Placeholder Meta (Datum + Kategorie) */
.placeholder-meta {
  display: flex;
  gap: var(--space-base);
  margin-bottom: var(--space-large);
  align-items: center;
}

.placeholder-date {
  width: 80px;
  height: 0.875em;
}

.placeholder-category {
  width: 60px;
  height: 0.875em;
}

/* Placeholder Excerpt (mehrere Zeilen) */
.placeholder-excerpt {
  margin: 0 0 var(--space-large) 0;
}

.placeholder-excerpt-line1 {
  width: 100%;
  height: 1em;
  margin-bottom: var(--space-micro);
}

.placeholder-excerpt-line2 {
  width: 95%;
  height: 1em;
  margin-bottom: var(--space-micro);
}

.placeholder-excerpt-line3 {
  width: 70%;
  height: 1em;
}

/* Placeholder Button */
.placeholder-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-small) var(--space-large);
  background: var(--color-border);
  border: none;
  border-radius: 6px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted);
  margin: 0 auto;
}

/* Base Placeholder Text Styling */
.placeholder-text {
  background: var(--color-border);
  border-radius: 4px;
}

/* Shimmer Animation */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Dark Mode: Placeholder */
[data-theme="dark"] .placeholder-image,
[data-theme="dark"] .placeholder-text,
[data-theme="dark"] .placeholder-tag,
[data-theme="dark"] .placeholder-button {
  background: var(--color-border);
}

[data-theme="dark"] .placeholder-button {
  color: var(--color-text);
}

/* Dark Mode: Animation entfernen (sieht aus als würde was nachladen) */
[data-theme="dark"] .placeholder-shimmer {
  display: none;
}

/* ===== AKTIVE TAG ZUSTÄNDE ===== */
.tag-active {
  background: var(--color-accent) !important;
  color: white !important;
}

/* Spezielle Behandlung für aktive Tags im Overlay */
.tag-overlay.tag-active {
  background: var(--color-accent) !important;
  color: white !important;
  backdrop-filter: none;
}

/* Dark Mode: Aktive Tags bleiben coral */
[data-theme="dark"] .tag-active {
  background: var(--color-accent) !important;
  color: white !important;
}

/* ===== ZEITLOSE PAGINATION ===== */
.pagination {
  margin-top: var(--space-xxlarge);
  padding-top: var(--space-xxlarge);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xlarge);
}



.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-small);
}

.pagination-btn {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-muted);
  background: none;
  border: none;
  padding: var(--space-small);
  cursor: pointer;
  letter-spacing: 0.02em;
}

.pagination-btn:hover {
  color: var(--color-accent);
}

.pagination-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  border-radius: 50%;
  letter-spacing: 0.02em;
}

.pagination-number:hover {
  background: var(--color-accent);
  color: white;
}

.pagination-number--active {
  background: var(--color-primary);
  color: white;
  font-weight: 500;
}

/* ===== POST DETAIL VIEW - Zweispaltiges Layout ===== */
.post-detail-container {
  width: 100%;
  max-width: 1400px; /* Layout begrenzen */
  margin: 0 auto; /* Zentrieren */
  padding: 0 var(--space-large);
}

.post-detail-grid {
  display: grid;
  grid-template-columns: 40% 60%; /* 40% Sidebar, 60% Content */
  gap: var(--space-xlarge);
  align-items: start;
  /* Grid-Containment für Code-Blöcke ohne Text abzuschneiden */
  min-width: 0;
}



/* 30% Links: Sidebar mit Bild + Meta-Infos */
.post-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
}

.post-detail-image {
  border-radius: 11px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10; /* Konsistente Höhe auch ohne Bild - etwas höher für bessere Proportionen */
}

.post-detail-image img,
.post-detail-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-detail-image {
  position: relative; /* Für Overlay-Positionierung */
}

.post-detail-image .image-fallback {
  /* Bild als Fallback, wird zuerst geladen */
  position: relative;
  z-index: 1;
}

.post-detail-image .video-overlay {
  /* Video über dem Bild */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* Video-spezifische Eigenschaften für perfektes Scaling */
  object-position: center;
  background: transparent;
  /* Videos haben manchmal eigene Dimensionen - diese überschreiben */
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  /* Zeige Video nur wenn es erfolgreich geladen wurde */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.post-detail-image .video-overlay.loaded {
  opacity: 1;
}

.post-detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}

.post-detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
}

.post-detail-date {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  font-weight: var(--font-weight-normal);
}

.post-detail-category {
  font-size: var(--font-size-small);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Author-Byline über dem Content */
.post-detail-author-byline {
  font-size: 0.875rem;
  color: var(--color-muted);
  font-weight: var(--font-weight-normal);
  font-style: italic;
  margin-bottom: var(--space-large);
  padding-bottom: var(--space-base);
  border-bottom: 1px solid var(--color-border);
  opacity: 0.8;
}

.post-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small);
}

/* 70% Rechts: Main Content */
.post-detail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  min-width: 0; /* Wichtig: Erlaubt Shrinking für Code-Blöcke */
  overflow: visible; /* Text soll nicht abgeschnitten werden */
}

.post-detail-title {
  font-size: var(--font-size-xxlarge);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-base) 0;
}

.post-detail-excerpt {
  font-size: var(--font-size-large);
  color: var(--color-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
  font-style: italic;
}


.post-content {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  /* Content-Containment für Code-Blöcke */
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* Sicherstellen, dass Content nicht über Grid-Grenzen hinausgeht */
  max-width: 100%;
}

.post-content h1 {
  font-size: var(--font-size-xlarge);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: var(--space-xxlarge) 0 var(--space-large) 0;
  line-height: var(--line-height-tight);
}

.post-content h1:first-child {
  margin-top: 0;
}

.post-content h2 {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
}

.post-content h3 {
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: var(--space-large) 0 var(--space-base) 0;
  line-height: var(--line-height-base);
}

.post-content p {
  margin-bottom: var(--space-base);
}

.post-content ul {
  margin: var(--space-base) 0;
  padding-left: var(--space-large);
}

.post-content li {
  margin-bottom: var(--space-small);
}

.post-content strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.post-content em {
  font-style: italic;
}

.post-content code {
  background: var(--color-surface);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: var(--font-family-mono);
  font-size: 0.875em;
  color: var(--color-primary);
  word-break: break-all; /* Verhindert Überlauf bei langen Strings */
}

.post-content pre {
  background: var(--color-surface);
  padding: var(--space-base);
  border-radius: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  margin: var(--space-base) 0;
  /* Robuste Layout-Containment */
  width: 100%;
  max-width: 100%;
  min-width: 0; /* Wichtig für Flexbox/Grid Containment */
  box-sizing: border-box;
  /* Scrolling-Verhalten */
  white-space: pre;
  word-wrap: normal;
  word-break: normal;
  -webkit-overflow-scrolling: touch;
  /* Zusätzliche Sicherheit */
  contain: layout style;
}

.post-content pre code {
  background: none;
  padding: 0;
  font-size: 0.7rem; /* Noch kleiner für Code-Blöcke */
  line-height: 1.4; /* Kompaktere Zeilenhöhe für Code */
  /* Wichtige Code-Formatierung */
  white-space: pre;
  word-wrap: normal;
  word-break: normal;
  overflow-wrap: normal;
  /* Vererbung stoppen */
  max-width: none;
  width: auto;
}

.post-content blockquote {
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-base);
  margin: var(--space-base) 0;
  font-style: italic;
  color: var(--color-muted);
}

.post-content del {
  text-decoration: line-through;
  color: var(--color-muted);
}

.post-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xlarge) 0;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 11px;
  margin: var(--space-base) 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  display: block;
}

.post-content a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.post-content a:hover {
  border-bottom-color: var(--color-accent);
}

.post-content a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.8em;
  color: var(--color-muted);
}

/* ===== STATIC PAGES ===== */
/* Statische Seiten verwenden das gleiche Layout wie Post-Details */

/* Mobile Pagination */
@media (max-width: 768px) {
  .pagination {
    gap: var(--space-large);
  }
  
  .pagination-controls {
    gap: var(--space-micro);
  }
  
  .pagination-number {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
  
  .pagination-btn {
    font-size: 0.8rem;
    padding: var(--space-micro);
  }
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
}

.theme-toggle-button svg {
  width: 18px;
  height: 18px;
}

/* Light Mode: Coral Button */
.theme-toggle-button--light {
  background: var(--color-accent);
  color: white;
}

/* Dark Mode: White Button */
.theme-toggle-button--dark {
  background: white;
  color: #333333;
}

.theme-toggle-button:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ===== RESPONSIVE DESIGN ===== */
/* Mobile: Single-Column, Stack-Layout */

@media (max-width: 768px) {
  .main-header {
    padding: var(--space-large) 0;
  }
  
  .header-content {
    flex-direction: column;
    align-items: center;
    gap: var(--space-large);
    padding: 0 var(--space-base);
    position: relative;
  }
  
  /* Theme-Button oben rechts positionieren */
  #theme-toggle-container {
    position: absolute;
    top: 0;
    right: var(--space-base);
    z-index: 10;
  }
  
  .brand {
    align-items: center;
    text-align: center;
  }
  
  .logo {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  
  .tagline {
    font-size: 0.75rem;
  }
  
  .nav {
    gap: var(--space-xlarge);
    justify-content: center;
  }
  
  .nav-link {
    font-size: 0.85rem;
    padding: var(--space-small);
  }
  
  .main-content {
    padding: var(--space-large);
  }
  
  .posts-grid {
    grid-template-columns: 1fr;
    gap: var(--space-large);
  }
  
  /* Post Images auf Mobile anpassen */
  .post-image-container {
    margin-bottom: var(--space-base);
    /* Kompakteres Aspect Ratio auf Mobile - niedrigere Bilder sparen wertvollen vertikalen Platz */
    aspect-ratio: 2 / 1;
  }
  
  /* Post Detail Mobile - Einspaltig mit weniger Padding für mehr Lesefläche */
  .post-detail-container {
    padding: 0; /* Weniger Padding als bei der Übersicht */
  }
  
  .post-detail-grid {
    grid-template-columns: 1fr; /* Einspaltig auf Mobile */
    gap: var(--space-large);
  }
  
  .post-detail-sidebar {
    order: 1; /* Banner/Sidebar zuerst auf Mobile */
  }
  
  .post-detail-main {
    order: 2; /* Content nach Banner auf Mobile */
  }
  
  .post-detail-title {
    font-size: var(--font-size-xlarge);
  }
  
  .post-detail-excerpt {
    font-size: var(--font-size-base); /* Kleiner auf Mobile */
  }
  
}

/* Tablet Breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
  
  /* Post Detail auf Tablet: 40% / 60% */
  .post-detail-grid {
    grid-template-columns: 40% 60%;
    gap: var(--space-large);
  }

}

/* Large Desktop - Volle Breite ausnutzen */
@media (min-width: 1440px) {
  .posts-grid {
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  }
  
  .main-content {
    padding: var(--space-xxlarge) var(--space-xxlarge);
  }
}