/* ============================================================
   SERAPIS Energyhealing — Global Design System
   Shared across all pages. Page-local CSS lives inline in each page.
   See DESIGN.md §8 for the global vs page-local split.
   ============================================================ */

:root{
  /* === Warmes Farbsystem — Koralle · Orange · Kupfer · Gold · Gelbtöne === */
  --cream:#F5EDE0;
  --cream-2:#EFE4D2;
  --ivory:#FAF5EC;
  --terracotta:#BE6E47;
  --terracotta-dark:#9A4F2E;
  /* Helle Terracotta-Tönung — rein dekorativ, dunkle Schrift bleibt lesbar */
  --terracotta-tint:#F6E3D6;
  --terracotta-tint-2:#F0D6C4;
  --rose:#E0A07E;
  --rose-soft:#F0CBA8;
  --sage:#B79A5E;
  --gold:#C9A24F;
  --gold-soft:#E6C887;
  --coral:#E0805E;
  --coral-soft:#F2B79B;
  --copper:#B5683E;
  --amber:#E3A53F;
  --ink:#3D2E2A;
  --ink-soft:#6B554D;
  --read:#4A3A34;
  --line:#D9C6A9;
  --shadow:0 30px 80px -30px rgba(61,46,42,0.25);
  --shadow-soft:0 10px 40px -15px rgba(61,46,42,0.18);
  --shadow-warm:0 30px 80px -30px rgba(154,79,46,0.35);
}

/* === BASE === */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Outfit',sans-serif;
  font-weight:300;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
/* Links im Fliesstext (ohne eigene Klasse): Terracotta mit feiner Linie statt Browser-Blau.
   :where() hält die Spezifität bei 0, damit Bausteine mit eigenem Linkstil gewinnen.
   Die Navigation ist ausgenommen: ihre Menüpunkte stehen auch in <li>, haben aber einen eigenen Hover-Strich. */
:where(p, li, dd, small, label, .section-intro):not(:where(nav, nav *)) a:not([class]){color:var(--terracotta-dark);text-decoration:none;border-bottom:1px solid rgba(190,110,71,0.4);transition:color 0.25s, border-color 0.25s}
:where(p, li, dd, small, label, .section-intro):not(:where(nav, nav *)) a:not([class]):hover{color:var(--terracotta);border-color:var(--terracotta)}
/* Auf dunklen/farbigen Flächen in der Textfarbe */
:where(.infoband, .closing, .ausbildung, .home-ausb, .k-booking, .stats-strip, footer) :where(p, li, small) a:not([class]){color:inherit;border-color:currentColor}
.serif{font-family:'Cormorant Garamond',serif;font-weight:400}
.italic{font-style:italic}

/* Subtle film grain texture overlay */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1000;
  opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* === NAV === */
nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:1.4rem 3rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  backdrop-filter:blur(12px);
  background:rgba(245,237,224,0.78);
  border-bottom:1px solid rgba(190,110,71,0.12);
  transition:padding 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
nav.scrolled{padding:0.9rem 3rem;background:rgba(245,237,224,0.94);box-shadow:0 10px 40px -25px rgba(61,46,42,0.4)}
.nav-logo{
  display:inline-flex;
  align-items:baseline;   /* Marke steht auf der Schriftlinie, siehe nav.php */
  gap:0.7rem;
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
}
/* Wortmarke — identisch zu den Exportdateien unter /assets/logo:
   gleichmässige Sperrung 0.35em über ALLE Buchstaben, auch nach dem R.
   Das negative Randmass schluckt die Sperrung hinter dem letzten S, sonst
   sässe die Marke optisch links neben ihrer Box. Nicht abweichen — sonst
   sieht das Logo auf der Website anders aus als im Druck. */
.nav-logo .nav-word{letter-spacing:0.35em;margin-right:-0.35em}
.nav-logo .r{color:var(--terracotta);font-style:italic}
.nav-mark{height:2.6rem;width:auto;flex:none;overflow:visible;transition:height 0.4s ease}
nav.scrolled .nav-mark{height:2.2rem}
/* Abstand wächst mit der Breite; unter 1180px übernimmt das Hamburger-Menü (sieben Punkte + Knopf) */
.nav-links{display:flex;gap:clamp(1.3rem,2.2vw,2.5rem);align-items:center;list-style:none}
.nav-links a{
  white-space:nowrap;
  color:var(--ink);
  text-decoration:none;
  font-size:0.82rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  font-weight:400;
  transition:color 0.3s;
  position:relative;
}
.nav-links a:hover{color:var(--terracotta)}
.nav-links a.current{color:var(--terracotta)}
.nav-links a:not(.nav-cta)::after{
  content:'';position:absolute;bottom:-6px;left:0;width:0;height:1px;
  background:var(--terracotta);transition:width 0.3s;
}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-links a.current:not(.nav-cta)::after{width:100%}
.nav-cta{
  background:var(--ink);color:var(--cream)!important;
  padding:0.7rem 1.6rem;border-radius:100px;letter-spacing:0.18em;
}
.nav-cta:hover{background:var(--terracotta);color:var(--cream)!important}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;font-size:1.5rem;color:var(--ink)}
/* Laptop-Breiten: Menü etwas kompakter, damit alles auf eine Zeile passt */
@media (max-width:1400px){
  .nav-links{gap:1.1rem}
  .nav-links a{font-size:0.78rem;letter-spacing:0.1em}
  .nav-cta{padding:0.65rem 1.2rem;letter-spacing:0.14em}
}

/* === BUTTONS === */
.btn{
  display:inline-flex;align-items:center;gap:0.7rem;padding:1.1rem 2.2rem;border-radius:100px;
  font-size:0.82rem;letter-spacing:0.2em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;border:none;font-family:inherit;font-weight:400;transition:all 0.3s ease;
}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--terracotta);transform:translateY(-2px);box-shadow:0 15px 30px -10px rgba(190,110,71,0.55)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream:hover{transform:translateY(-2px);box-shadow:0 15px 30px -10px rgba(0,0,0,0.3);background:var(--ivory)}
.btn-ghost-light{background:transparent;color:var(--cream);border:1px solid rgba(245,237,224,0.55)}
.btn-ghost-light:hover{background:var(--cream);color:var(--ink)}
.btn-arrow{transition:transform 0.3s;display:inline-block}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* === AURA ORB (signature element — do not remove) === */
.aura-orb{
  width:100%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,246,228,0.92) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(224,128,94,0.82) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(201,162,79,0.62) 0%, transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(227,165,63,0.5) 0%, transparent 50%),
    linear-gradient(135deg, #F2C4A4 0%, #E0805E 42%, #C9A24F 100%);
  box-shadow:
    inset 30px 30px 80px rgba(255,250,240,0.42),
    inset -30px -30px 80px rgba(154,79,46,0.22),
    0 40px 100px -20px rgba(190,110,71,0.42);
  animation:float 8s ease-in-out infinite, slowSpin 30s linear infinite;
  position:relative;
}
.aura-orb::before{
  content:'';position:absolute;inset:-30px;border-radius:50%;
  border:1px solid var(--terracotta);opacity:0.2;animation:pulse 4s ease-in-out infinite;
}
.aura-orb::after{
  content:'';position:absolute;inset:-60px;border-radius:50%;
  border:1px dashed var(--terracotta);opacity:0.15;animation:slowSpin 60s linear infinite reverse;
}

/* Farbvarianten derselben Kugel: jede Seite ein eigener Ton, gleiche Form (Startseite = Grundfarbe) */
.aura-orb.orb-gold{
  background:
    radial-gradient(circle at 35% 30%, rgba(255,248,230,0.92) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(227,165,63,0.75) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(201,162,79,0.68) 0%, transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(224,128,94,0.32) 0%, transparent 50%),
    linear-gradient(135deg, #F3DFB4 0%, #E3A53F 45%, #B98A3E 100%);
  box-shadow:inset 30px 30px 80px rgba(255,250,240,0.42), inset -30px -30px 80px rgba(154,110,46,0.22), 0 40px 100px -20px rgba(201,162,79,0.45);
}
.aura-orb.orb-rose{
  background:
    radial-gradient(circle at 35% 30%, rgba(255,244,236,0.92) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(214,118,104,0.72) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(183,154,94,0.45) 0%, transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(224,160,126,0.55) 0%, transparent 50%),
    linear-gradient(135deg, #F4D2C4 0%, #DE8E7A 45%, #A9604A 100%);
  box-shadow:inset 30px 30px 80px rgba(255,250,240,0.42), inset -30px -30px 80px rgba(154,79,60,0.22), 0 40px 100px -20px rgba(190,100,90,0.42);
}
/* Handy: Kugel auf allen Seiten gleich, ganz sichtbar, aber kleiner, damit die Überschrift im ersten Bild bleibt */
@media (max-width:640px){
  .hero-visual,.aus-hero-visual,.erk-hero-visual{width:100%;max-width:250px!important;margin:1.6rem auto 0.4rem!important}
  html .erk-hero-visual .aura-orb{width:100%}
}

/* Orb-glow — lighter radial variant for centred heroes (Impulse, Angebote, Kontakt) */
.hero-glow{
  position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:560px;height:560px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(224,128,94,0.16) 0%, rgba(227,165,63,0.08) 45%, transparent 70%);
  animation:float 11s ease-in-out infinite;
}

/* Floating particles */
.particle{
  position:absolute;width:6px;height:6px;background:var(--amber);
  border-radius:50%;opacity:0.45;animation:floatParticle 8s ease-in-out infinite;
}

/* === KEYFRAMES === */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes slowSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:0.2}50%{transform:scale(1.05);opacity:0.4}}
@keyframes floatParticle{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* === REVEAL ON SCROLL === */
/* «html» davor: Karten haben in den Seiten-CSS eigene transition-Regeln (für Hover), die später geladen
   werden und das Einblenden sonst überschreiben. global.js entfernt .reveal nach dem Einblenden wieder. */
html .reveal{opacity:0;transform:translateY(32px);transition:opacity 0.9s ease, transform 0.9s ease}
html .reveal.in{opacity:1;transform:none}
html .reveal.d1{transition-delay:0.1s}
html .reveal.d2{transition-delay:0.2s}
html .reveal.d3{transition-delay:0.3s}
html .reveal.d4{transition-delay:0.4s}

/* === SECTION SYSTEM === */
section{padding:7rem 3rem;position:relative}
.container{max-width:1400px;margin:0 auto}
.section-eyebrow{
  font-size:0.78rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--terracotta);
  margin-bottom:1.2rem;display:flex;align-items:center;gap:0.8rem;justify-content:center;
}
.section-eyebrow::before,.section-eyebrow::after{content:'';width:30px;height:1px;background:var(--terracotta)}
.section-title{
  font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:300;
  line-height:1.05;letter-spacing:-0.01em;text-align:center;margin-bottom:1.5rem;
}
.section-title em{font-style:italic;color:var(--terracotta)}
.section-intro{text-align:center;max-width:680px;margin:0 auto 4rem;color:var(--ink-soft);font-size:1.125rem;font-weight:300}

/* === FORM FIELDS (base) === */
.form-field{position:relative}
.form-field label{display:block;font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:0.5rem}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:0.9rem 1.2rem;border:1px solid var(--line);border-radius:12px;background:var(--cream);
  font-family:inherit;font-size:0.95rem;color:var(--ink);transition:border 0.3s;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--terracotta)}
.form-field textarea{resize:vertical}

/* === FOOTER === */
footer{background:var(--ink);color:var(--cream);padding:5rem 3rem 2rem;text-align:center}
.footer-mark{display:block;height:78px;width:auto;margin:0 auto 1.6rem}
/* Gleiche Sperrung wie Kopfzeile und Exportdateien. Der Text ist zentriert,
   deshalb wird die Sperrung hinter dem letzten S per Einzug ausgeglichen —
   sonst steht die Marke um ein halbes Sperrmass zu weit links. */
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:2.5rem;letter-spacing:0.35em;text-indent:0.35em;margin-bottom:1rem}
/* Auf dunklem Grund trägt das R Gold statt Terracotta — wie in den hellen
   Logofassungen (serapis-logo-*-hell.svg). Terracotta wäre hier zu dunkel. */
.footer-logo span{color:var(--gold-soft);font-style:italic}
.footer-tagline{font-style:italic;color:rgba(245,237,224,0.6);margin-bottom:2.5rem;font-family:'Cormorant Garamond',serif;font-size:1.2rem}
.footer-social{display:flex;gap:1rem;justify-content:center;margin-bottom:3rem}
.footer-social a{width:42px;height:42px;border-radius:50%;background:rgba(245,237,224,0.06);display:flex;align-items:center;justify-content:center;color:var(--cream);text-decoration:none;transition:all 0.3s;font-size:1rem}
.footer-social a:hover{background:var(--terracotta);transform:translateY(-3px)}
.footer-meta{padding-top:2rem;border-top:1px solid rgba(245,237,224,0.1);font-size:0.8rem;color:rgba(245,237,224,0.5);letter-spacing:0.1em}
.footer-meta a{color:rgba(245,237,224,0.7);text-decoration:none}
.footer-meta a:hover{color:var(--cream)}
/* Links als Zeile mit feinen Punkten dazwischen, Copyright darunter */
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0.6rem 0;margin-bottom:1.6rem}
.footer-links a{padding:0 0.9rem;position:relative}
.footer-links a + a::before{content:'';position:absolute;left:-1.5px;top:50%;width:3px;height:3px;border-radius:50%;background:rgba(245,237,224,0.3);transform:translateY(-50%)}
.footer-copy{font-size:0.74rem;line-height:1.6}
@media (max-width:640px){
  /* Handy: zwei saubere Spalten statt einer umbrechenden Zeile */
  .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:320px;margin:0 auto 1.8rem;text-align:left}
  .footer-links a{padding:0.75rem 0.4rem;border-bottom:1px solid rgba(245,237,224,0.08);font-size:0.86rem;letter-spacing:0.08em}
  .footer-links a + a::before{display:none}
  .footer-links a:nth-child(odd){padding-right:1rem}
  .footer-links a:nth-child(even){padding-left:1rem;border-left:1px solid rgba(245,237,224,0.08)}
  .footer-copy{max-width:280px;margin:0 auto}
}
.disclaimer{max-width:640px;margin:0 auto 2rem;font-size:0.75rem;color:rgba(245,237,224,0.4);font-style:italic;line-height:1.6}

/* === RESPONSIVE (global primitives) === */
@media (max-width:900px){
  nav{padding:1rem 1.5rem}
  nav.scrolled{padding:0.8rem 1.5rem}
  section{padding:5rem 1.5rem}
}
@media (max-width:1180px){
  /* Mobiles Menü: beginnt genau unter der Leiste (--nav-h setzt global.js),
     Leiste und Menü haben offen dieselbe deckende Fläche */
  .nav-links{
    position:fixed;top:var(--nav-h,64px);left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--ivory);padding:1.2rem 1.5rem 2.5rem;gap:0;
    transform:translateX(100%);transition:transform 0.4s ease;height:calc(100dvh - var(--nav-h,64px));overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links li{border-bottom:1px solid rgba(190,110,71,0.14)}
  .nav-links li:last-child{border-bottom:none;padding-top:1.8rem;text-align:center}
  .nav-links a:not(.nav-cta){display:block;padding:1.05rem 0.2rem;font-family:'Cormorant Garamond',serif;font-size:1.55rem;
    letter-spacing:0.02em;text-transform:none}
  .nav-links a:not(.nav-cta)::after{display:none}
  .nav-links .nav-cta{display:inline-block;padding:0.95rem 2.2rem}
  nav.menu-open{background:var(--ivory);backdrop-filter:none;box-shadow:none;border-bottom-color:rgba(190,110,71,0.14)}
  html.menu-lock,html.menu-lock body{overflow:hidden}
  .menu-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-0.6rem;font-size:1.45rem;line-height:1}
}

/* === TOUCH: Karten nicht anheben ===
   Auf dem Handy löst schon das Antippen beim Wischen :hover aus. Die Karte hob sich dann um 4px
   und wurde oben vom Wischbereich (overflow-x:auto schneidet auch oben ab) gekappt.
   «html» davor: gewinnt gegen die gleichnamigen Regeln in den Seiten-CSS, die später geladen werden. */
@media (hover:none){
  html .service-card:hover, html .mini-quote:hover, html .post:hover, html .home-erk-card:hover,
  html .erk-card:hover, html .an-kcard:hover, html .field-card:hover, html .kd-tile:hover,
  html .lern-card:hover, html .pcard:hover, html .pillar-card:hover, html .tz-card:hover,
  html a.ap-node:hover, html .ib-date-btn:hover{transform:none}
}

/* === ACCESSIBILITY: reduced motion === */
@media (prefers-reduced-motion: reduce){
  .aura-orb,.aura-orb::before,.aura-orb::after,.hero-glow,.particle{animation:none!important}
  .reveal{transition:none!important;opacity:1!important;transform:none!important}
  *{scroll-behavior:auto!important}
}

/* «Angaben auf diesem Gerät merken» (global.js) */
.merken{display:flex !important;align-items:center;gap:0.55rem;font-size:0.88rem;color:var(--soft, #6B554D);cursor:pointer;margin:0.2rem 0 0.4rem;text-transform:none;letter-spacing:0;font-weight:400}
.merken input{width:auto !important;margin:0;accent-color:var(--terracotta);flex-shrink:0}
.an-fields label.merken,.ib-fields label.merken,.form-grid label.merken{flex-direction:row;align-items:center;gap:0.55rem;font-size:0.88rem;letter-spacing:0;text-transform:none}
.ib-formcard .ib-fields label.merken{color:var(--ink-soft)}