/*
Theme Name: Breathwork Sieglinde
Theme URI: https://example.com
Author: Sieglinde Wohlfarth Breathwork
Author URI: https://example.com
Description: Ruhiges, elegantes Breathwork-Theme in Dunkelblau, Hellblau und Cremeweiß mit goldenen Akzenten. Enthält Home, Über mich und Kurse (als eigener Beitragstyp, in wp-admin frei bearbeitbar).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: breathwork-sieglinde
*/

/* =========================================================
   DESIGN TOKENS — bewusst ohne echtes Schwarz (#000).
   Dunkelste Farbe ist ein tiefes Marineblau, keine Grau-/
   Schwarztöne. Auch Schatten sind blau statt schwarz getönt.
   ========================================================= */
:root{
  --navy:        #31485C;   /* dunkles Pastellblau — Header, Überschriften */
  --navy-deep:   #2A3E4F;   /* etwas dunkler, für Overlays */
  --navy-soft:   #55677A;   /* Fließtext — dunkel genug zum Lesen, kein Schwarz */
  --sky:         #B9D6E1;   /* helles Pastellblau — Akzent, Impressum-Leiste */
  --sky-soft:    #D7E8ED;
  --cream:       #F8F3E9;   /* Creme-Weiß — Hauptfläche */
  --cream-deep:  #F1E9D8;
  --gold:        #C6A166;   /* Gold-Akzent, aus dem Logo */
  --gold-soft:   #E3D0AC;
  --ink:         #3B4652;   /* dunkelster Textton im ganzen Theme — Blaugrau, kein Schwarz */
  --ink-soft:    #7A8896;
  --shadow:      rgba(49,72,92,0.16);   /* alle Schatten sind blau getönt statt schwarz */
  --shadow-soft: rgba(49,72,92,0.10);
  --header-h: 92px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Karla', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-weight:400;
  color:var(--navy);
  line-height:1.15;
  margin:0 0 0.5em;
}

a{color:var(--navy);text-decoration:none;}
a:hover{color:var(--gold);}
img{max-width:100%;height:auto;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
ul{list-style:none;margin:0;padding:0;}

/* Neutralisiert WordPress-Standardfarben (z.B. Zitate, Code, Trennlinien),
   damit nirgends Schwarz durchscheint */
blockquote{border-left:3px solid var(--gold);padding-left:1rem;color:var(--navy-soft);}
hr{border:none;border-top:1px solid rgba(198,161,102,0.35);}
code, pre{background:var(--cream-deep);color:var(--navy);}
::selection{background:var(--gold-soft);color:var(--navy);}

/* =========================================================
   HEADER — immer sichtbar, dunkles Pastellblau
   ========================================================= */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--header-h);
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  box-shadow:0 2px 18px var(--shadow);
}
.burger{
  position:absolute;
  left:22px;top:50%;
  transform:translateY(-50%);
  width:30px;height:22px;
  display:flex;flex-direction:column;justify-content:space-between;
  z-index:1001;
}
.burger span{
  display:block;height:2px;width:100%;
  background:var(--sky-soft);
  border-radius:2px;
  transition:transform .35s ease, opacity .25s ease;
}
.burger.open span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

.site-header .logo-link{display:block;height:66px;}
.site-header .logo{height:66px;width:auto;}
@media (min-width:600px){
  .site-header .logo-link{height:74px;}
  .site-header .logo{height:74px;}
}

/* =========================================================
   MENÜ-OVERLAY
   ========================================================= */
.menu-overlay{
  position:fixed;inset:0;
  background:var(--navy-deep);
  z-index:900;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease;
}
.menu-overlay.open{opacity:1;visibility:visible;}
.menu-list{list-style:none;text-align:center;margin:0;padding:0;}
.menu-list li{margin:0;}
.menu-list a{
  display:block;
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(2.1rem, 6vw, 3.2rem);
  font-weight:300;
  color:var(--cream);
  padding:0.45em 0;
  opacity:0;
  transform:translateY(14px);
  transition:color .3s ease, letter-spacing .3s ease;
}
.menu-overlay.open a{animation:menuIn .6s ease forwards;}
.menu-overlay.open li:nth-child(1) a{animation-delay:.08s;}
.menu-overlay.open li:nth-child(2) a{animation-delay:.16s;}
.menu-overlay.open li:nth-child(3) a{animation-delay:.24s;}
@keyframes menuIn{to{opacity:1;transform:translateY(0);}}
.menu-list a:hover{color:var(--gold-soft);letter-spacing:0.04em;}
.menu-list a.current{color:var(--gold);}

/* =========================================================
   PARALLAX HERO (Home & Über mich)
   ========================================================= */
.parallax-stage{position:relative;height:100vh;overflow:hidden;}
.parallax-image{
  position:absolute;top:0;left:0;right:0;height:130%;
  background-size:cover;background-position:center 40%;
  will-change:transform;
}
.parallax-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(49,72,92,0.06) 0%, rgba(49,72,92,0.30) 100%);
}
.hero-wordmark{position:absolute;left:0;right:0;bottom:14%;text-align:center;z-index:3;pointer-events:none;}
.hero-wordmark span{
  font-family:'Fraunces', Georgia, serif;
  font-weight:300;font-style:italic;
  font-size:clamp(2.4rem, 8vw, 4.6rem);
  letter-spacing:0.06em;
  color:var(--cream);
  text-shadow:0 3px 22px rgba(49,72,92,0.55);
}
.hero-wordmark::before{
  content:"";display:block;width:52px;height:1px;
  background:var(--gold-soft);margin:0 auto 1.1rem;opacity:0.9;
}

.content-panel{
  position:relative;margin-top:100vh;
  background:var(--cream);z-index:5;
  will-change:transform;
  border-radius:28px 28px 0 0;
  box-shadow:0 -18px 40px var(--shadow);
  background-image:
    repeating-linear-gradient(0deg, transparent 0px, transparent 38px, rgba(198,161,102,0.05) 38px, rgba(198,161,102,0.05) 40px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' viewBox='0 0 400 120'%3E%3Cpath d='M0 60 C 50 20, 100 100, 150 60 S 250 20, 300 60 S 380 100, 400 60' fill='none' stroke='%23C6A166' stroke-opacity='0.10' stroke-width='1.4'/%3E%3Cpath d='M0 85 C 50 45, 100 125, 150 85 S 250 45, 300 85 S 380 125, 400 85' fill='none' stroke='%2331485C' stroke-opacity='0.05' stroke-width='1.2'/%3E%3C/svg%3E"),
    var(--cream);
  background-repeat:repeat, repeat, no-repeat;
}
.panel-inner{max-width:640px;margin:0 auto;padding:5rem 1.6rem 4rem;text-align:center;}
.panel-inner .eyebrow{display:inline-block;width:40px;height:2px;background:var(--gold);margin-bottom:1.4rem;}
.panel-inner h2{font-size:clamp(1.9rem, 4.2vw, 2.6rem);font-weight:300;margin-bottom:1.1rem;}
.panel-inner .entry-content{font-size:1.02rem;line-height:1.75;color:var(--ink-soft);max-width:520px;margin:0 auto;}
.panel-inner .entry-content p{margin:0 0 1rem;}
.panel-inner .cta{
  display:inline-block;margin-top:1.8rem;padding:0.85em 2.1em;
  border:1px solid var(--navy);border-radius:999px;color:var(--navy);
  font-size:0.95rem;letter-spacing:0.02em;
  transition:background .3s ease, color .3s ease;
}
.panel-inner .cta:hover{background:var(--navy);color:var(--cream);}

/* =========================================================
   FOOTER / IMPRESSUM
   ========================================================= */
.site-footer{background:var(--sky);padding:1.4rem 1.6rem;text-align:center;}
.site-footer a{
  font-size:0.9rem;color:var(--navy-deep);font-weight:500;letter-spacing:0.03em;
  padding-bottom:2px;border-bottom:1px solid var(--navy-deep);
}

/* =========================================================
   KURSE (Custom Post Type "kurs")
   ========================================================= */
.kurse-hero{padding:calc(var(--header-h) + 3.6rem) 1.6rem 2.4rem;text-align:center;background:var(--cream);}
.kurse-hero .eyebrow{display:inline-block;width:40px;height:2px;background:var(--gold);margin-bottom:1.4rem;}
.kurse-hero h1{font-size:clamp(2rem, 5vw, 2.7rem);font-weight:300;margin-bottom:0.8rem;}
.kurse-hero p{color:var(--ink-soft);max-width:480px;margin:0 auto;line-height:1.7;}

.kurse-grid{
  max-width:1000px;margin:0 auto;padding:1rem 1.6rem 5rem;
  display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:1.6rem;
}
.kurs-card{
  background:var(--cream-deep);border-radius:18px;padding:2.1rem 1.7rem;
  display:flex;flex-direction:column;gap:0.9rem;
  border:1px solid rgba(198,161,102,0.25);
  transition:transform .35s ease, box-shadow .35s ease;
  overflow:hidden;
}
.kurs-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px var(--shadow-soft);}
.kurs-card img{border-radius:12px;margin-bottom:0.4rem;}
.kurs-badge{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  font-family:'Fraunces', Georgia, serif;font-size:0.95rem;flex-shrink:0;
}
.kurs-card h2, .kurs-card h3{font-size:1.25rem;font-weight:400;margin:0;}
.kurs-card .kurs-excerpt{font-size:0.92rem;color:var(--ink-soft);line-height:1.6;flex-grow:1;}
.kurs-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:0.6rem;padding-top:0.9rem;border-top:1px solid rgba(198,161,102,0.25);
}
.kurs-meta span{font-size:0.85rem;color:var(--ink-soft);}
.kurs-book{font-size:0.85rem;color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:1px;}
.kurs-card:hover .kurs-book{color:var(--gold);border-color:var(--gold);}

.kurse-empty{
  grid-column:1/-1;text-align:center;color:var(--ink-soft);
  padding:2rem;border:1px dashed var(--gold-soft);border-radius:14px;
  background:rgba(198,161,102,0.06);
}

/* Einzelner Kurs (single-kurs.php) */
.single-kurs-wrap{max-width:720px;margin:0 auto;padding:calc(var(--header-h) + 3rem) 1.6rem 5rem;}
.single-kurs-wrap h1{font-size:clamp(1.9rem,4.5vw,2.6rem);font-weight:300;}
.single-kurs-wrap .kurs-meta-single{color:var(--ink-soft);margin-bottom:1.6rem;}
.single-kurs-wrap .entry-content{line-height:1.8;color:var(--ink-soft);}
.single-kurs-wrap img{border-radius:16px;margin-bottom:2rem;}
.back-link{display:inline-block;margin-bottom:1.6rem;color:var(--navy-soft);font-size:0.9rem;}
.back-link:hover{color:var(--gold);}

/* =========================================================
   Platzhalter-/Bearbeitungshinweis (nur sichtbar für Admins/Editoren) */
.editor-note{
  margin-top:2rem;padding:1rem 1.2rem;border:1px dashed var(--gold-soft);
  border-radius:12px;font-size:0.82rem;color:var(--ink-soft);
  background:rgba(198,161,102,0.06);text-align:left;
}

@media (max-width:600px){
  .panel-inner{padding:3.6rem 1.3rem 3rem;}
  .content-panel{border-radius:22px 22px 0 0;}
}