/*
Theme Name: Stillklang
Description: Dunkles, ruhiges GeneratePress-Child-Theme für Blogs zu Hyperakusis, Misophonie und geräuschsensiblem Leben. Bringt das komplette Design plus fertige Block-Patterns mit (Hero, Themen, Blog-Grid, Affiliate-Boxen, Über mich, Hinweis, Newsletter).
Author: Pin dich Design
Template: generatepress
Version: 1.0.0
Text Domain: stillklang
*/

/* =========================================================
   1. DESIGN-SYSTEM (hier Farben & Fonts ändern)
   ========================================================= */
:root {
  --sk-bg: #191722;             /* tiefes, ruhiges Nachtblau-Violett */
  --sk-surface: #232030;
  --sk-surface-2: #2B2839;
  --sk-ink: #EAE6DF;            /* warmes Off-White */
  --sk-muted: #A79FB2;
  --sk-primary: #B3A6D4;        /* sanftes Lavendel */
  --sk-primary-dark: #9C8CC6;
  --sk-accent: #C9A57A;         /* gedämpftes Gold */
  --sk-border: #37333F;
  --sk-radius: 18px;
  --sk-radius-pill: 999px;
  --sk-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  --sk-font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --sk-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =========================================================
   2. BASIS & TYPOGRAFIE
   ========================================================= */
body {
  background-color: var(--sk-bg);
  color: var(--sk-ink);
  font-family: var(--sk-font-body);
  font-size: 17px;
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
  font-family: var(--sk-font-head);
  font-weight: 500;
  color: var(--sk-ink);
  line-height: 1.22;
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.3rem; }

h1 em, h2 em { color: var(--sk-primary); font-style: italic; }

a { color: var(--sk-primary); transition: color 0.2s ease; }
a:hover { color: var(--sk-ink); }

::selection { background: rgba(179, 166, 212, 0.3); }

/* =========================================================
   3. HEADER & NAVIGATION (GeneratePress-Struktur)
   ========================================================= */
.site-header {
  background-color: var(--sk-bg);
  border-bottom: 1px solid var(--sk-border);
}

.main-title a {
  font-family: var(--sk-font-head);
  font-weight: 600;
  color: var(--sk-ink);
}

.main-navigation,
.main-navigation .main-nav ul li a {
  background-color: transparent;
  color: var(--sk-muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--sk-ink);
}

.main-navigation ul ul {
  background-color: var(--sk-surface);
  box-shadow: var(--sk-shadow);
  border-radius: 12px;
}

/* Mobile-Menü-Icon */
.menu-toggle, .menu-toggle:hover { color: var(--sk-ink); background: transparent; }

/* =========================================================
   4. BUTTONS
   ========================================================= */
.button,
button,
input[type="submit"],
.wp-block-button__link {
  background-color: var(--sk-primary);
  color: #1B1824;
  border: none;
  border-radius: var(--sk-radius-pill);
  padding: 12px 28px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--sk-primary-dark);
  color: #1B1824;
  transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--sk-ink);
  border: 1.5px solid var(--sk-border);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--sk-primary);
  color: var(--sk-primary);
  background: transparent;
}

/* =========================================================
   5. SEKTIONEN & UTILITIES (von den Patterns genutzt)
   ========================================================= */
.sk-section { padding: 80px 0; }
.sk-section--deep { background-color: #14121C; }
.sk-section--surface { background-color: var(--sk-surface); }

.sk-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sk-accent);
  margin-bottom: 0.6em;
}

.sk-lead {
  font-size: 1.15rem;
  color: var(--sk-muted);
  max-width: 42em;
}

.sk-card {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  padding: 28px;
  box-shadow: var(--sk-shadow);
  height: 100%;
}

.sk-card h3, .sk-card h4 { margin-top: 0.4em; }
.sk-card p { color: var(--sk-muted); }
.sk-card p strong { color: var(--sk-ink); }

.sk-pill {
  display: inline-block;
  background: var(--sk-surface-2);
  color: var(--sk-muted);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-pill);
  padding: 4px 14px;
  font-size: 0.8rem;
  font-weight: 500;
}

.sk-img-round img { border-radius: var(--sk-radius); }

.sk-symbol {
  font-size: 1.6rem;
  color: var(--sk-accent);
  margin-bottom: 0;
}

/* =========================================================
   6. AFFILIATE-PRODUKTBOXEN
   ========================================================= */
.sk-produkt { position: relative; text-align: center; }

.sk-produkt .sk-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--sk-surface-2);
  color: var(--sk-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--sk-radius-pill);
  padding: 3px 10px;
  margin: 0;
}

.sk-produkt .sk-preis {
  font-family: var(--sk-font-head);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sk-ink);
  margin-bottom: 0.4em;
}

.sk-affiliate-hinweis, .sk-kleingedrucktes {
  font-size: 0.83rem;
  color: var(--sk-muted);
}

/* =========================================================
   7. HINWEIS-BOX (medizinischer Disclaimer)
   ========================================================= */
.sk-hinweis {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-left: 3px solid var(--sk-accent);
  border-radius: var(--sk-radius);
  padding: 24px 28px;
}

.sk-hinweis p { color: var(--sk-muted); margin-bottom: 0; font-size: 0.95rem; }

/* =========================================================
   8. BLOG-GRID (Query Loop) & ARTIKEL
   ========================================================= */
.sk-blog-grid .wp-block-post {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  overflow: hidden;
  box-shadow: var(--sk-shadow);
}

.sk-blog-grid .wp-block-post-featured-image { margin: 0; }

.sk-blog-grid .wp-block-post-title {
  font-size: 1.2rem;
  padding: 18px 22px 0;
  margin: 0;
}

.sk-blog-grid .wp-block-post-title a { color: var(--sk-ink); text-decoration: none; }
.sk-blog-grid .wp-block-post-title a:hover { color: var(--sk-primary); }

.sk-blog-grid .wp-block-post-excerpt {
  padding: 0 22px 22px;
  font-size: 0.92rem;
  color: var(--sk-muted);
}

/* Einzelartikel & Archiv (GP-Struktur) */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header {
  background-color: var(--sk-surface);
  border-radius: var(--sk-radius);
  border: 1px solid var(--sk-border);
}

.entry-meta, .entry-meta a { color: var(--sk-muted); }

/* =========================================================
   9. NEWSLETTER & FOOTER
   ========================================================= */
.sk-newsletter {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius);
  padding: 56px 32px;
  text-align: center;
}

.sk-newsletter input[type="email"] {
  border: 1.5px solid var(--sk-border);
  border-radius: var(--sk-radius-pill);
  padding: 12px 22px;
  min-width: 280px;
  background: var(--sk-bg);
  color: var(--sk-ink);
}

.site-footer, .footer-widgets { background-color: #14121C; color: var(--sk-muted); }

.site-info {
  background-color: #14121C;
  border-top: 1px solid var(--sk-border);
  font-size: 0.85rem;
  color: var(--sk-muted);
}

.footer-widgets .widget-title {
  font-family: var(--sk-font-head);
  font-size: 1.05rem;
  color: var(--sk-ink);
}

/* =========================================================
   10. RESPONSIVE FEINSCHLIFF
   ========================================================= */
@media (max-width: 768px) {
  .sk-section { padding: 52px 0; }
  .sk-newsletter { padding: 40px 20px; }
  .sk-newsletter input[type="email"] { min-width: 0; width: 100%; }
}