/*
Theme Name: Schlaf Gut Child
Theme URI: https://schlaf-gut.net
Description: Child-Theme von Astra für Schlaf Gut. Enthält das zentrale Designsystem, Header-Styling und Startseiten-Stile.
Author: Schlaf Gut
Template: astra
Version: 1.0.0
Text Domain: schlafgut-child
*/

/* =====================================================================
   SCHLAF GUT – Zentrales Designsystem
   Ruhig, hell, vertrauenswürdig. Akzent: Salbei-Grün + Dämmerblau.
   ===================================================================== */
:root{
  --sg-ink:#262d38;          /* Fließtext */
  --sg-deep:#2e3d5e;         /* Überschriften / Akzentlinien (Dämmerblau) */
  --sg-accent:#5c8a80;       /* ruhiger Salbei-Akzent */
  --sg-accent-deep:#436b62;
  --sg-soft:#eef2f8;         /* zartes Blau für Info-Flächen */
  --sg-soft-line:#d8e1ee;
  --sg-sage:#eef3ee;         /* zartes Grün */
  --sg-sage-line:#d5e2d4;
  --sg-sand:#f6efe1;         /* warmer Sandton für ärztl. Hinweis */
  --sg-sand-line:#e7d6b6;
  --sg-line:#e6e8ec;
  --sg-radius:14px;
  --sg-shadow:0 1px 2px rgba(30,40,60,.04), 0 8px 24px rgba(30,40,60,.06);
  --sg-head:"Fraunces", Georgia, serif;
  --sg-body:"Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* =====================================================================
   ARTIKEL-BAUSTEINE (sg-)
   ===================================================================== */
.sg-toc,.sg-takeaways,.sg-hinweis,.sg-arztlich,
.sg-checkliste,.sg-routine,.sg-quellen,.sg-faq{ margin:1.8em 0; line-height:1.65; }

.sg-toc{ background:#fff; border:1px solid var(--sg-line);
  border-left:4px solid var(--sg-accent); border-radius:var(--sg-radius);
  padding:1.1em 1.3em; box-shadow:var(--sg-shadow); }
.sg-toc-title{ font-family:var(--sg-head); font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sg-accent-deep); margin:0 0 .6em; }
.sg-toc ol{ margin:0; padding-left:1.1em; }
.sg-toc li{ margin:.3em 0; }
.sg-toc a{ color:var(--sg-deep); text-decoration:none; }
.sg-toc a:hover{ text-decoration:underline; }

.sg-takeaways{ background:linear-gradient(180deg,#f4f8f5,var(--sg-sage));
  border:1px solid var(--sg-sage-line); border-radius:var(--sg-radius); padding:1.3em 1.5em; }
.sg-takeaways .sg-label{ font-family:var(--sg-head); font-size:1.05rem;
  color:var(--sg-accent-deep); margin:0 0 .6em; }
.sg-takeaways ul{ list-style:none; margin:0; padding:0; }
.sg-takeaways li{ position:relative; padding-left:1.8em; margin:.5em 0; }
.sg-takeaways li::before{ content:"\2713"; position:absolute; left:0; top:0;
  color:var(--sg-accent); font-weight:700; }

.sg-hinweis{ background:var(--sg-soft); border:1px solid var(--sg-soft-line);
  border-radius:var(--sg-radius); padding:1.1em 1.3em; }
.sg-hinweis .sg-label{ font-weight:600; color:var(--sg-deep); display:block; margin-bottom:.25em; }

.sg-arztlich{ background:var(--sg-sand); border:1px solid var(--sg-sand-line);
  border-radius:var(--sg-radius); padding:1.1em 1.3em; }
.sg-arztlich .sg-label{ font-weight:600; color:#8a6d2f; display:block; margin-bottom:.25em; }

.sg-checkliste{ background:#fff; border:1px solid var(--sg-line);
  border-radius:var(--sg-radius); padding:1.2em 1.4em; box-shadow:var(--sg-shadow); }
.sg-checkliste ul{ list-style:none; margin:0; padding:0; }
.sg-checkliste li{ position:relative; padding-left:2em; margin:.55em 0; }
.sg-checkliste li::before{ content:""; position:absolute; left:0; top:.15em;
  width:1.15em; height:1.15em; border:2px solid var(--sg-accent); border-radius:5px; }

.sg-routine{ counter-reset:sg-step; list-style:none; padding:0; }
.sg-routine .sg-step{ position:relative; padding:.2em 0 .2em 3em; margin:.9em 0; min-height:2.2em; }
.sg-routine .sg-step::before{ counter-increment:sg-step; content:counter(sg-step);
  position:absolute; left:0; top:0; width:2.1em; height:2.1em;
  background:var(--sg-deep); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.95em; }

.sg-faq details{ border:1px solid var(--sg-line); border-radius:var(--sg-radius);
  padding:0 1.2em; background:#fff; margin:.6em 0; }
.sg-faq summary{ list-style:none; cursor:pointer; padding:.95em 0; font-weight:600;
  color:var(--sg-deep); display:flex; justify-content:space-between; align-items:center; gap:1em; }
.sg-faq summary::-webkit-details-marker{ display:none; }
.sg-faq summary::after{ content:"+"; font-size:1.4em; color:var(--sg-accent); transition:transform .2s ease; }
.sg-faq details[open] summary::after{ transform:rotate(45deg); }
.sg-faq details > p{ margin:0 0 1em; }

.sg-quellen{ border-top:1px solid var(--sg-line); padding-top:1em; font-size:.9rem; color:#5b6573; }
.sg-quellen .sg-label{ font-weight:600; color:var(--sg-deep); display:block; margin-bottom:.3em; }
.sg-quellen ul{ margin:0; padding-left:1.1em; }

.entry-content{ font-size:1.06rem; line-height:1.75; color:var(--sg-ink); }
.entry-content h2{ font-family:var(--sg-head); color:var(--sg-deep); margin-top:1.8em; }
.entry-content h3{ color:var(--sg-deep); }

/* =====================================================================
   HEADER – weiß, Menü in Markenfarben
   Bewusst hohe Spezifitaet + !important, damit Astra-Defaults
   (helle Menuefarbe) sicher ueberschrieben werden.
   ===================================================================== */
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-above-header,
.ast-below-header{ background-color:#ffffff; }

/* Menue-Links und Untertitel: dunkles Daemmerblau, lesbar */
.ast-primary-header-bar .main-navigation .menu a,
.main-header-bar .main-navigation .menu a,
.main-header-bar-navigation .menu a,
header .main-navigation a,
.site-title a,
.site-title,
.site-description{ color:#2e3d5e !important; }

.ast-primary-header-bar .main-navigation .menu a:hover,
.main-header-bar .main-navigation .menu a:hover,
header .main-navigation a:hover,
.site-title a:hover{ color:#5c8a80 !important; }

.site-header{ border-bottom:1px solid var(--sg-line); }

/* =====================================================================
   STARTSEITE – Full-Width-Bänder
   (greifen auf .sg-home, ausgeliefert über front-page.php oder HTML-Block)
   ===================================================================== */
.sg-home{ color:var(--sg-ink); font-family:var(--sg-body); line-height:1.7; }
.sg-home *{ box-sizing:border-box; }
.sg-home a{ color:var(--sg-accent-deep); }

/* Full-Width-Band: bricht aus jedem Astra-Container aus.
   cqw-Methode (war nachweislich korrekt: volle Breite, mittig, kein Streifen).
   container-type sitzt auf dem Inhaltsbereich UNTER dem Header,
   damit das Header-Menue unberuehrt bleibt. */
.site-content,
#content{ container-type:inline-size; }
.sg-band{
  padding:3.4em 1.5em;
  width:100cqw;
  position:relative;
  left:calc(50% - 50cqw);
  padding-inline:max(1.5em, calc(50cqw - 540px)); /* Inhalt mittig bis 1080px */
}
.sg-band--hero{ background:linear-gradient(180deg,#f4f8f5,var(--sg-sage));
  padding-top:4em; padding-bottom:4em; text-align:center; }
.sg-band--plain{ background:#fff; }
.sg-band--soft{ background:var(--sg-soft); }
.sg-band--sage{ background:var(--sg-sage); }

.sg-inner{ max-width:1080px; margin:0 auto; }
.sg-inner--narrow{ max-width:760px; }

.sg-home-kicker{ font-family:var(--sg-head); font-size:.82rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sg-accent-deep); margin:0 0 1em; }
.sg-band--hero h1{ font-family:var(--sg-head); color:var(--sg-deep);
  font-size:2.6rem; line-height:1.15; margin:0 0 .5em; font-weight:600; }
.sg-band--hero p{ font-size:1.18rem; color:var(--sg-ink); max-width:36em; margin:.4em auto 0; }
.sg-home-hero-tags{ display:flex; flex-wrap:wrap; gap:.5em; justify-content:center; margin-top:1.6em; }
.sg-home-hero-tags span{ font-size:.88rem; color:var(--sg-accent-deep); background:#fff;
  border:1px solid var(--sg-sage-line); border-radius:999px; padding:.4em 1em; }

.sg-home-h2{ font-family:var(--sg-head); color:var(--sg-deep); font-size:1.8rem;
  text-align:center; margin:0 0 .3em; font-weight:600; }
.sg-home-sub{ text-align:center; color:#5b6573; max-width:34em; margin:0 auto 1.8em; }

.sg-home-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.1em; }
.sg-home-card{ display:block; background:#fff; border:1px solid var(--sg-line);
  border-left:4px solid var(--sg-accent); border-radius:var(--sg-radius);
  padding:1.3em 1.4em; box-shadow:var(--sg-shadow);
  text-decoration:none; color:var(--sg-ink);
  transition:transform .15s ease, box-shadow .15s ease; }
.sg-home-card:hover{ transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(30,40,60,.06), 0 14px 32px rgba(30,40,60,.10); }
.sg-home-card h3{ font-family:var(--sg-head); color:var(--sg-deep); font-size:1.2rem; margin:0 0 .35em; font-weight:600; }
.sg-home-card p{ margin:0; color:#5b6573; font-size:.98rem; }
.sg-home-card .sg-home-more{ display:inline-block; margin-top:.7em; color:var(--sg-accent-deep); font-weight:600; font-size:.92rem; }

.sg-band--soft h2{ font-family:var(--sg-head); color:var(--sg-deep); font-size:1.7rem;
  margin:0 0 1.4em; text-align:center; font-weight:600; }
.sg-home-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.6em; }
.sg-home-num{ font-family:var(--sg-head); display:inline-flex; align-items:center; justify-content:center;
  width:2.1em; height:2.1em; background:var(--sg-deep); color:#fff; border-radius:50%;
  font-weight:600; margin-bottom:.5em; }
.sg-home-step h4{ color:var(--sg-deep); margin:0 0 .3em; font-size:1.05rem; }
.sg-home-step p{ margin:0; color:#5b6573; font-size:.96rem; }

.sg-band--sage .sg-home-trust{ text-align:center; color:#4a5360; }
.sg-band--sage .sg-home-trust strong{ color:var(--sg-deep); }

@media(max-width:600px){
  .sg-band{ padding:2.4em 1.2em; }
  .sg-band--hero h1{ font-size:2rem; }
}

/* =====================================================================
   STARTSEITE – Container aufheben (front-page.php)
   Hebt nur auf der Startseite Astras Inhaltsbreite/Polster auf,
   damit die Bänder echte volle Breite haben. Kein 100vw-Hack noetig.
   ===================================================================== */
.home #primary,
.home #content .ast-container,
.home .site-content > .ast-container{
  max-width:100%;
  padding-left:0;
  padding-right:0;
  margin-left:0;
  margin-right:0;
}
.home #primary{ margin:0; }
.home .entry-header,
.home .ast-no-thumbnail .entry-header{ display:none; } /* falls doch ein Titelbereich auftaucht */
.home .site-content{ padding-top:0; }