/* ==========================================================================
   AUTclouding Tech Blog – Design-System
   (portiert aus der Tailwind/React-Version: src/index.css + tailwind.config.ts)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften: lokal eingebunden statt über das Google-Fonts-CDN.
   Spart zwei DNS-/TLS-Verbindungen im kritischen Rendering-Pfad und
   überträgt keine Besucher-IPs an Google (DSGVO).
   Variable Fonts – eine Datei deckt alle verwendeten Schnitte ab.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --background: 0 0% 100%;
  --foreground: 220 26% 14%;
  --card: 0 0% 100%;
  --primary: 221 83% 23%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 96%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;
  --accent: 14 91% 62%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --radius: 0.75rem;

  --hero-gradient-start: 221 83% 23%;
  --hero-gradient-end: 221 83% 13%;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }

/* [hidden] muss jede display-Regel schlagen – sonst bleibt z.B. der
   Cookie-Dialog (.modal-overlay { display: flex }) dauerhaft sichtbar. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px) { .container { padding: 0 2rem; } }

.page-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.page-main { flex: 1; }

/* --------------------------------------------------------------------------
   Buttons & Badges
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500;
  padding: 0.55rem 1.1rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  transition: var(--transition-smooth);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
}
.btn:hover { opacity: 0.9; }
.btn-lg { padding: 0.75rem 2rem; font-size: 1rem; }
.btn-accent { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-accent:hover { background: hsl(var(--accent) / 0.9); opacity: 1; }
.btn-outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.btn-outline:hover { background: hsl(var(--muted)); opacity: 1; }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--muted)); opacity: 1; }
.btn-destructive { background: hsl(var(--destructive)); color: #fff; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: calc(var(--radius) - 2px);
  background: transparent; border: none; color: hsl(var(--foreground));
  transition: var(--transition-smooth);
}
.icon-btn:hover { background: hsl(var(--muted)); }

.badge {
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: 600;
  padding: 0.2rem 0.65rem; border-radius: 9999px;
}
.badge-accent { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.header-logo img { height: 2.5rem; width: auto; }
.header-nav { display: none; align-items: center; gap: 2rem; }
.header-nav a { font-size: 0.875rem; font-weight: 500; transition: color 0.2s; }
.header-nav a:hover { color: hsl(var(--accent)); }
@media (min-width: 768px) {
  .header-nav { display: flex; }
  .header-menu-btn { display: none; }
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-search { position: relative; display: none; }
@media (min-width: 1024px) {
  .header-search { display: block; }
  .header-search-mobile { display: none; }
}
.header-search-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: hsl(var(--muted-foreground));
}
.header-search input {
  width: 250px; height: 2.5rem;
  padding: 0 0.75rem 0 2.5rem;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  outline: none;
}
.header-search input:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); }

/* Mobile-Menü */
.mobile-menu-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.5);
}
.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: 280px; background: hsl(var(--background));
  border-left: 1px solid hsl(var(--border));
  padding: 1.5rem; box-shadow: var(--shadow-2xl);
}
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu-head img { height: 2rem; width: auto; }
.mobile-menu-nav { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.mobile-menu-nav a { font-size: 1.125rem; font-weight: 500; padding: 0.5rem 0; }
.mobile-menu-nav a:hover { color: hsl(var(--accent)); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 600px; display: flex; align-items: center;
  background: linear-gradient(135deg,
    hsl(var(--hero-gradient-start)), hsl(var(--primary)),
    hsl(var(--accent)), hsl(var(--hero-gradient-end)));
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.9) 55%, hsl(var(--accent)) 100%);
  opacity: 0.9;
}
.hero-content { position: relative; z-index: 10; max-width: 56rem; }
.hero h1 {
  color: #fff; font-size: 3rem; line-height: 1.1; margin-bottom: 1.5rem;
  animation: fade-in-up 0.6s ease-out forwards;
}
@media (min-width: 768px) { .hero h1 { font-size: 4.5rem; } }
.hero-keyword {
  color: hsl(var(--accent));
  animation: pulse-glow 2s ease-in-out infinite;
  display: inline-block; min-width: 2ch;
}
.hero-sub {
  color: rgba(255,255,255,0.9); font-size: 1.25rem; margin: 0 0 2rem;
  animation: fade-in-up 0.6s ease-out 0.3s forwards; opacity: 0;
}
@media (min-width: 768px) { .hero-sub { font-size: 1.5rem; } }
.hero-pills { display: flex; flex-wrap: wrap; gap: 1rem; animation: fade-in-up 0.6s ease-out 0.6s forwards; opacity: 0; }
.hero-pill {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(4px);
  padding: 0.5rem 1rem; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9); font-size: 0.875rem;
}
.hero-pill-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 9999px;
  background: hsl(var(--accent));
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.hero-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 8rem;
  background: linear-gradient(to top, hsl(var(--background)), transparent);
}

/* Schwebende Icons + Partikel */
.hero-float {
  position: absolute; opacity: 0.1; color: #fff;
  animation: float 20s ease-in-out infinite;
}
.hero-float svg { width: 4rem; height: 4rem; }
.hero-particle {
  position: absolute; width: 4px; height: 4px; border-radius: 9999px;
  background: rgba(255,255,255,0.3);
  animation: particle-float 15s linear infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-20px) rotate(5deg); }
  50% { transform: translateY(-10px) rotate(-5deg); }
  75% { transform: translateY(-30px) rotate(3deg); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 1; text-shadow: 0 0 20px hsl(var(--accent) / 0.5); }
  50% { opacity: 0.8; text-shadow: 0 0 30px hsl(var(--accent) / 0.8); }
}
@keyframes particle-float {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}
@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Featured Post
   -------------------------------------------------------------------------- */
.featured-section { margin-top: -3rem; position: relative; z-index: 20; }
.featured-post {
  display: block; overflow: hidden;
  border-radius: 1rem; background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}
.featured-grid { display: grid; }
@media (min-width: 768px) { .featured-grid { grid-template-columns: 1fr 1fr; } }
.featured-image { position: relative; height: 400px; overflow: hidden; }
@media (min-width: 768px) { .featured-image { height: 500px; } }
.featured-image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s ease;
}
.featured-post:hover .featured-image img { transform: scale(1.1); }
.featured-body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) { .featured-body { padding: 3rem; } }
.featured-body .badge { width: fit-content; margin-bottom: 1rem; }
.featured-title { font-size: 2.25rem; margin-bottom: 1rem; transition: color 0.2s; }
@media (min-width: 768px) { .featured-title { font-size: 3rem; } }
.featured-post:hover .featured-title { color: hsl(var(--accent)); }
.featured-excerpt {
  font-size: 1.125rem; color: hsl(var(--muted-foreground)); margin: 0 0 1.5rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.featured-meta { display: flex; gap: 1.5rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; }
.featured-footer { display: flex; align-items: center; justify-content: space-between; }
.featured-author { display: flex; align-items: center; gap: 0.75rem; font-weight: 500; }
.featured-author img { width: 2.5rem; height: 2.5rem; border-radius: 9999px; object-fit: cover; }
.featured-readmore { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.875rem; }
.featured-post:hover .featured-readmore { color: hsl(var(--accent)); }
.featured-readmore svg { transition: transform 0.2s; }
.featured-post:hover .featured-readmore svg { transform: translateX(4px); }

.meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.meta-item svg { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Post-Karten (Startseite)
   -------------------------------------------------------------------------- */
.section-posts { padding: 5rem 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3rem; }
.section-head h2 { font-size: 2.25rem; }

.posts-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card-link { display: block; height: 100%; }
.post-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); overflow: hidden;
  height: 100%; display: flex; flex-direction: column;
  transition: var(--transition-smooth);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.post-card-image { position: relative; height: 14rem; overflow: hidden; }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.post-card:hover .post-card-image img { transform: scale(1.1); }
.post-card-badge { position: absolute; top: 1rem; left: 1rem; }
.post-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.post-card-title {
  font-size: 1.25rem; margin-bottom: 0.75rem; transition: color 0.2s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card:hover .post-card-title { color: hsl(var(--accent)); }
.post-card-excerpt {
  color: hsl(var(--muted-foreground)); margin: 0 0 1rem; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card-meta {
  display: flex; gap: 1rem; font-size: 0.875rem; color: hsl(var(--muted-foreground));
  padding-top: 1rem; border-top: 1px solid hsl(var(--border));
}
.post-card-author { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.875rem; font-weight: 500; }
.post-card-author img { width: 2rem; height: 2rem; border-radius: 9999px; object-fit: cover; }

.load-more-wrap { display: flex; justify-content: center; margin-top: 3rem; }

/* --------------------------------------------------------------------------
   Post-Listen (Alle Artikel, Kategorie, Suche)
   -------------------------------------------------------------------------- */
.page-section { padding: 3rem 0; }
.page-intro { max-width: 56rem; margin: 0 auto 3rem; }
.page-intro h1 { font-size: 1.875rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .page-intro h1 { font-size: 2.25rem; } }
.page-intro p { color: hsl(var(--muted-foreground)); font-size: 1.125rem; margin: 0; }

.post-list { max-width: 56rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.post-list-link { display: block; }
.post-list-item {
  display: flex; flex-direction: column; gap: 1.5rem; padding: 1rem;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  transition: border-color 0.2s;
}
@media (min-width: 640px) { .post-list-item { flex-direction: row; } }
.post-list-item:hover { border-color: hsl(var(--accent) / 0.5); }
.post-list-image { flex-shrink: 0; }
@media (min-width: 640px) { .post-list-image { width: 12rem; } }
@media (min-width: 768px) { .post-list-image { width: 16rem; } }
.post-list-image img {
  /* height:auto, damit das width/height-Attribut aus dem HTML das
     aspect-ratio unten nicht überstimmt. */
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  transition: transform 0.3s ease;
}
@media (min-width: 640px) { .post-list-image img { aspect-ratio: 4 / 3; } }
.post-list-link:hover .post-list-image img { transform: scale(1.05); }
.post-list-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.post-list-title { font-size: 1.125rem; margin: 0.5rem 0; transition: color 0.2s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .post-list-title { font-size: 1.25rem; } }
.post-list-link:hover .post-list-title { color: hsl(var(--accent)); }
.post-list-excerpt {
  color: hsl(var(--muted-foreground)); font-size: 0.875rem; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 768px) { .post-list-excerpt { font-size: 1rem; } }
.post-list-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.post-list-meta-left { display: flex; gap: 1rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.post-list-author { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.post-list-author img { width: 1.5rem; height: 1.5rem; border-radius: 9999px; object-fit: cover; }

/* Pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 3rem; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem; font-weight: 500;
}
.pagination a:hover { background: hsl(var(--muted)); }
.pagination .current { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }

/* --------------------------------------------------------------------------
   Kategorien
   -------------------------------------------------------------------------- */
.category-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
.category-card {
  display: block; height: 100%;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: 1.5rem;
  transition: var(--transition-smooth);
}
.category-card:hover { box-shadow: var(--shadow-lg); border-color: hsl(var(--accent)); }
.category-card-head { display: flex; align-items: flex-start; justify-content: space-between; }
.category-card-name { display: flex; align-items: center; gap: 0.75rem; }
.category-card-icon {
  padding: 0.5rem; background: hsl(var(--accent) / 0.1); border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--accent)); display: inline-flex;
}
.category-card h2 { font-size: 1.25rem; }
.category-card-count { font-size: 0.875rem; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.category-card-desc { margin: 0.75rem 0 0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }

/* --------------------------------------------------------------------------
   Post-Detail
   -------------------------------------------------------------------------- */
.post-hero { position: relative; height: 400px; width: 100%; overflow: hidden; }
@media (min-width: 768px) { .post-hero { height: 500px; } }
.post-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, hsl(var(--background)), hsl(var(--background) / 0.5), transparent);
}
.post-article { position: relative; z-index: 10; max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
.post-article.with-hero { margin-top: -8rem; }
.post-article.no-hero { margin-top: 2rem; }
.post-article-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 1rem; padding: 2rem; box-shadow: var(--shadow-xl);
}
@media (min-width: 768px) { .post-article-card { padding: 3rem; } }
.post-article-card > .badge { margin-bottom: 1rem; }
.post-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .post-title { font-size: 1.875rem; } }
@media (min-width: 1024px) { .post-title { font-size: 2.25rem; } }
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid hsl(var(--border));
}
.post-meta-author { display: flex; align-items: center; gap: 0.75rem; }
.post-meta-author img { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; }
.post-meta-author span { font-weight: 500; color: hsl(var(--foreground)); }
.post-excerpt { font-size: 1.25rem; color: hsl(var(--muted-foreground)); margin: 0 0 2rem; line-height: 1.7; }
.post-spacer { height: 5rem; }

/* Artikel-Inhalt (prose-blog) */
.prose-blog { color: hsl(var(--foreground) / 0.9); line-height: 1.7; }
.prose-blog h2 { font-size: 1.875rem; margin: 3rem 0 1.5rem; color: hsl(var(--foreground)); }
.prose-blog h3 { font-size: 1.5rem; margin: 2rem 0 1rem; color: hsl(var(--foreground)); }
.prose-blog p { margin: 0 0 1.5rem; font-size: 1.125rem; }
.prose-blog a { color: hsl(var(--accent)); transition: color 0.2s; }
.prose-blog a:hover { color: hsl(var(--accent) / 0.8); }
.prose-blog img { border-radius: calc(var(--radius) - 2px); margin: 2rem 0; height: auto; }
.prose-blog ul { list-style: disc; padding-left: 1.5rem; margin: 1rem 0; }
.prose-blog ol { list-style: decimal; padding-left: 1.5rem; margin: 1rem 0; }
.prose-blog li { margin-bottom: 0.5rem; }
.prose-blog li p { margin-bottom: 0; }
.prose-blog blockquote {
  border-left: 3px solid hsl(var(--border));
  padding-left: 1rem; margin: 1rem 0;
  font-style: italic; color: hsl(var(--muted-foreground));
}
.prose-blog code {
  background: hsl(var(--muted)); padding: 0.15rem 0.4rem;
  border-radius: 0.25rem; font-size: 0.9em; font-family: monospace;
}
.prose-blog pre {
  background: hsl(var(--muted)); padding: 1rem;
  border-radius: calc(var(--radius) - 2px); overflow-x: auto; margin: 1.5rem 0;
}
.prose-blog pre code { background: none; padding: 0; }
.prose-blog hr { border: none; border-top: 2px solid hsl(var(--border)); margin: 1.5rem 0; }

/* --------------------------------------------------------------------------
   Suche
   -------------------------------------------------------------------------- */
.search-form { margin-bottom: 3rem; display: flex; gap: 0.5rem; }
.search-input-wrap { position: relative; flex: 1; }
.search-input-wrap svg {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: hsl(var(--muted-foreground));
}
.search-input-wrap input {
  width: 100%; height: 3rem; font-size: 1.125rem;
  padding: 0 1rem 0 2.75rem;
  border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px);
  outline: none;
}
.search-input-wrap input:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15); }
.search-count { color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; }
.search-empty { text-align: center; padding: 3rem 0; color: hsl(var(--muted-foreground)); }
.search-empty .big { font-size: 1.25rem; margin-bottom: 0.5rem; }

.empty-state { text-align: center; padding: 5rem 0; color: hsl(var(--muted-foreground)); font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   Statische Seiten (Impressum, Datenschutz, Sitemap)
   -------------------------------------------------------------------------- */
.static-page { max-width: 48rem; margin: 0 auto; padding: 3rem 1rem; }
.static-page h1 { font-size: 1.875rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .static-page h1 { font-size: 2.25rem; } }
.static-page h2 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; }
.static-page h3 { font-size: 1rem; margin: 1rem 0 0.5rem; }
.static-page p, .static-page li { font-size: 0.875rem; margin: 0 0 0.5rem; }
.static-page ul { padding-left: 1.25rem; margin: 0 0 0.75rem; }
.static-page a { color: hsl(var(--accent)); }
.static-page a:hover { color: hsl(var(--accent) / 0.8); }
.static-page .muted { color: hsl(var(--muted-foreground)); }

.sitemap-section { margin-bottom: 2rem; }
.sitemap-section h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; margin-bottom: 0.75rem; }
.sitemap-section h2 svg { color: hsl(var(--accent)); }
.sitemap-section ul { list-style: none; padding-left: 1.75rem; margin: 0; }
.sitemap-section li { margin-bottom: 0.5rem; font-size: 0.875rem; }
.sitemap-cat-name { font-weight: 600; font-size: 1rem; display: inline-block; margin-bottom: 0.25rem; color: hsl(var(--foreground)); }
.sitemap-cat-name:hover { color: hsl(var(--accent)); }
.sitemap-posts { margin-left: 1rem !important; margin-top: 0.5rem !important; }
.sitemap-posts li { display: flex; gap: 0.5rem; align-items: flex-start; }
.sitemap-posts svg { margin-top: 0.3rem; flex-shrink: 0; color: hsl(var(--muted-foreground)); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.3);
  margin-top: 5rem;
}
.site-footer .container { padding-top: 3rem; padding-bottom: 3rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-logo-text {
  display: inline-block; margin-bottom: 1rem;
  font-size: 1.5rem; font-weight: 700; font-family: var(--font-display);
  background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-brand p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); max-width: 28rem; margin: 0; }
.footer-col h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a, .footer-cookie-btn {
  font-size: 0.875rem; color: hsl(var(--muted-foreground)); transition: color 0.2s;
}
.footer-col a:hover, .footer-cookie-btn:hover { color: hsl(var(--accent)); }
.footer-cookie-btn {
  background: none; border: none; padding: 0;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.footer-bottom {
  padding-top: 2rem; border-top: 1px solid hsl(var(--border));
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-bottom p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin: 0; }
.footer-social { display: flex; align-items: center; gap: 1rem; }
.footer-social a { color: hsl(var(--muted-foreground)); transition: color 0.2s; }
.footer-social a:hover { color: hsl(var(--accent)); }

/* --------------------------------------------------------------------------
   Cookie-Banner & Modal
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; padding: 1rem;
  animation: fade-in-up 0.5s ease-out;
}
.cookie-banner-card {
  max-width: 56rem; margin: 0 auto;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: 1rem; box-shadow: var(--shadow-2xl);
  padding: 1.5rem; display: flex; align-items: flex-start; gap: 1rem;
}
.cookie-banner-icon {
  padding: 0.75rem; background: hsl(var(--accent) / 0.1);
  border-radius: var(--radius); color: hsl(var(--accent)); flex-shrink: 0;
}
.cookie-banner-content h3 { font-family: var(--font-body); font-size: 1.125rem; margin-bottom: 0.5rem; }
.cookie-banner-content p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin: 0 0 1rem; }
.cookie-banner-content a { color: hsl(var(--accent)); }
.cookie-banner-content a:hover { text-decoration: underline; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal {
  background: hsl(var(--card)); border-radius: var(--radius);
  max-width: 32rem; width: 100%; max-height: 90vh; overflow-y: auto;
  padding: 1.5rem; box-shadow: var(--shadow-2xl);
}
.modal-title { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 1.125rem; margin-bottom: 0.5rem; }
.modal-title svg { color: hsl(var(--accent)); }
.modal-desc { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin: 0 0 1.5rem; }
.modal-actions {
  display: flex; flex-direction: column-reverse; gap: 0.75rem;
  padding-top: 1rem; border-top: 1px solid hsl(var(--border)); margin-top: 1.5rem;
}
@media (min-width: 640px) { .modal-actions { flex-direction: row; } .modal-actions .btn { flex: 1; } }

.cookie-option {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1rem; border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px); margin-bottom: 1rem;
}
.cookie-option-muted { background: hsl(var(--muted) / 0.5); border: none; }
.cookie-option strong { font-size: 1rem; }
.cookie-option p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin: 0.25rem 0 0; }

/* Switch */
.switch { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: hsl(var(--input)); border-radius: 9999px; transition: 0.2s;
}
.switch-slider::before {
  content: ""; position: absolute; height: 1.25rem; width: 1.25rem;
  left: 2px; top: 2px; background: #fff; border-radius: 9999px; transition: 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.switch input:checked + .switch-slider { background: hsl(var(--accent)); }
.switch input:checked + .switch-slider::before { transform: translateX(1.25rem); }
.switch input:disabled + .switch-slider { opacity: 0.7; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.notfound { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.notfound h1 { font-size: 4rem; margin-bottom: 1rem; }
.notfound p { font-size: 1.25rem; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; }