/* ═══════════════════════════════════════════════════════════════════════
   nacht.css · Probe für ein überarbeitetes dunkles Design (Oktober 2026)
   Bleibt dunkel und schamanisch, übernimmt aber die Bauweise der neuen
   shingon-reiki.com: Hero als Kachel, abgerundete Karten, Lato als
   Lesetext, mehr Kontrast, nichts versteckt sich hinter Scroll-Effekten.
   Wird nach shamanic-worlds.css und den Seiten-Styles geladen.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg-dark: #0a1020;
  --bg-mid: #0f182c;
  --bg-card: #131d35;
  --bg-card2: #18244200;
  --text-main: #eee9e1;
  --text-dim: #d3cbe0;
  --gold: #d8b45a;
  --gold-light: #f0dfae;
  --gold-dim: #b8954a;
  --emerald: #34b07a;
  --violet: #b48ae0;
  --font-display: 'Lato', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Lato', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --n-line: rgba(255, 255, 255, .09);
  --n-r: 20px;
  --n-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

html, body { overflow-x: clip; }
body { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--text-main); -webkit-font-smoothing: antialiased; }
/* Atmender Hintergrund bleibt, aber ruhiger */
body::before { opacity: .8; }
.noise-overlay { opacity: .03 !important; }

/* Inhalte nie unsichtbar lassen, nur sanft einblenden */
.reveal { opacity: 1 !important; transform: none !important; }

/* ── Überschriften ──────────────────────────────────────────────────── */
.section-h1, .section-h2, .section-h3, h1, h2, h3, h4 {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  line-height: 1.18 !important;
  color: #fff;
}
.section-h1 { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; }
.section-h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem) !important; }
.section-h1 .accent, .section-h2 .accent { color: var(--gold) !important; }
.section-eyebrow { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: .78rem !important; letter-spacing: .16em !important; color: var(--gold) !important; }
.section-eyebrow::before { display: none !important; }
.section-lead { color: var(--text-dim) !important; font-size: 1.12rem !important; }
p, li { font-size: 1rem; }
.prose p, .content-text p, .tradition-content .content-text p { color: var(--text-main) !important; line-height: 1.75 !important; }
.tradition-content .content-text h3 { font-family: var(--font-display) !important; font-size: 1.2rem !important; color: var(--gold-light) !important; letter-spacing: 0 !important; text-transform: none !important; }

/* ── Navigation ─────────────────────────────────────────────────────── */
nav.site-nav { background: rgba(10, 16, 32, .92) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--n-line) !important; }
.nav-logo { font-family: 'Cinzel', serif !important; }
.nav-links a, .nav-submenu a, .mobile-menu a { font-family: var(--font-display) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; font-size: .92rem !important; color: #eee9e1 !important; }
.nav-links a:hover, .nav-links a.active { color: var(--gold) !important; }
.nav-submenu { background: #131d35 !important; border: 1px solid var(--n-line) !important; border-radius: 14px !important; box-shadow: var(--n-shadow) !important; }
.nav-lang a { border-radius: 999px !important; font-family: var(--font-display) !important; }

/* ── Hero als Kachel mit Bild rechts ────────────────────────────────── */
.sub-hero, .hero {
  max-width: 1160px; width: calc(100% - 40px); margin: 22px auto 0 !important;
  border-radius: var(--n-r); overflow: hidden; position: relative;
  background: linear-gradient(120deg, #0f1a33 0%, #13284a 45%, #2a1a4d 100%) !important;
  border: 1px solid var(--n-line);
  box-shadow: var(--n-shadow);
  padding: clamp(36px, 6vw, 72px) clamp(22px, 5vw, 56px) !important;
  min-height: 0 !important;
}
.sub-hero .section-inner, .hero.page-hero-with-disc .section-inner { padding: 0 !important; max-width: none !important; }
.sub-hero::after, .hero.page-hero-with-disc::after { display: none !important; }
.sub-hero .kanji-drift { opacity: .06 !important; }
.page-hero-grid { display: grid !important; grid-template-columns: 1.15fr .85fr !important; gap: clamp(24px, 4vw, 56px) !important; align-items: center !important; }
.page-hero-image { position: static !important; width: auto !important; height: auto !important; transform: none !important; margin: 0 !important; }
.page-hero-image picture, .page-hero-image img {
  display: block; width: 100% !important; height: auto !important; max-width: 420px; margin-left: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 18px !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important;
  box-shadow: 0 0 0 1px rgba(216, 180, 90, .25), 0 20px 60px rgba(52, 176, 122, .18), 0 20px 60px rgba(154, 108, 204, .18) !important;
}
.page-hero-image::before, .page-hero-image::after { display: none !important; }
.hero-kanji-line { color: var(--gold) !important; letter-spacing: .3em !important; }
@media (max-width: 860px) {
  .sub-hero { width: calc(100% - 24px); margin-top: 14px !important; }
  .page-hero-grid { grid-template-columns: 1fr !important; }
  .page-hero-image { order: -1; }
  .page-hero-image picture, .page-hero-image img { max-width: 100%; aspect-ratio: 16 / 10; margin: 0; }
}

/* ── Abschnitte, Karten, Kästen ─────────────────────────────────────── */
section { padding-top: clamp(56px, 8vw, 96px) !important; padding-bottom: clamp(56px, 8vw, 96px) !important; }
.aurora-strip::after { opacity: .5; }
.definition-paragraph {
  background: var(--bg-card) !important; border: 1px solid var(--n-line) !important; border-left: 4px solid var(--emerald) !important;
  border-radius: var(--n-r) !important; padding: 28px 32px !important; font-size: 1.08rem !important; line-height: 1.75 !important; color: var(--text-main) !important;
  box-shadow: var(--n-shadow);
}
.pfeiler-card, .artikel-karte-mini, .verwandte-thema, .faq-item, .tradition-aside, .autoren-box, .cta-box, .expand-card, .big-testimonial {
  background: var(--bg-card) !important;
  border: 1px solid var(--n-line) !important;
  border-radius: var(--n-r) !important;
  box-shadow: var(--n-shadow) !important;
}
.tradition-aside { border-left: 4px solid var(--emerald) !important; }
.pfeiler-card h4, .artikel-karte-mini h4, .verwandte-thema h4, .faq-item summary { font-family: var(--font-display) !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; font-size: 1.05rem !important; }
.pfeiler-card p, .artikel-karte-mini p, .verwandte-thema p, .faq-item .faq-body, .faq-item .faq-body p, .tradition-aside li { color: var(--text-dim) !important; font-size: .98rem !important; line-height: 1.7 !important; }
.pfeiler-card .pfeiler-kanji { color: var(--gold) !important; }
.hover-lift::after { display: none !important; }
.hover-lift:hover { transform: translateY(-3px); }
img:hover { filter: none !important; transform: none !important; }
figure.seiten-bild img, .seiten-bild-container img { border-radius: 16px !important; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-emerald {
  font-family: var(--font-display) !important; font-weight: 900 !important; text-transform: none !important; letter-spacing: 0 !important;
  border-radius: 999px !important; padding: 14px 28px !important; font-size: 1rem !important;
}
.btn-primary { background: var(--gold) !important; color: #0a1020 !important; border: 0 !important; }
.btn-primary:hover { background: #e7c66e !important; }
.btn-secondary { background: transparent !important; color: #fff !important; border: 2px solid rgba(255, 255, 255, .55) !important; }
.btn-emerald { background: var(--emerald) !important; color: #06140d !important; border: 0 !important; }
.btn-primary::before, .btn-secondary::before, .btn-emerald::before { display: none !important; }

/* ── Fuß ────────────────────────────────────────────────────────────── */
footer.site-footer { background: #070b16 !important; border-top: 1px solid var(--n-line) !important; }
.footer-col h4 { font-family: var(--font-display) !important; letter-spacing: .14em !important; font-size: .78rem !important; color: var(--gold) !important; }
.footer-col a, .footer-bottom p, .footer-brand p { color: #d3cbe0 !important; font-family: var(--font-display) !important; }

/* Hinweisleiste unten ruhiger */
.sticky-optin { border-radius: 18px 18px 0 0; }

/* Hero mit Kreisbild: Bild als Hintergrund der Kachel, rechts ausgerichtet.
   Die Bilder laufen links ohnehin in Nachtblau aus, so gibt es keine Kante. */
:is(.sub-hero, .hero).page-hero-with-disc {
  background-color: #070e20 !important;
  background-image: linear-gradient(90deg, #070e20 0%, #070e20 30%, rgba(7,14,32,.55) 50%, rgba(7,14,32,0) 70%), var(--bild) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, auto 100% !important;
  background-position: center, right center !important;
  min-height: 440px !important; display: flex; align-items: center;
}
:is(.sub-hero, .hero).page-hero-with-disc .page-hero-grid { grid-template-columns: minmax(0, 560px) !important; }
:is(.sub-hero, .hero).page-hero-with-disc .page-hero-image { display: none !important; }
@media (max-width: 860px) {
  :is(.sub-hero, .hero).page-hero-with-disc {
    background-image: linear-gradient(180deg, rgba(7,14,32,0) 0%, rgba(7,14,32,.2) 30%, #070e20 55%), var(--bild) !important;
    background-size: 100% 100%, auto 300px !important;
    background-position: center, 92% top !important;
    padding-top: 250px !important; min-height: 0 !important; display: block;
  }
}
:is(.sub-hero, .hero).page-hero-with-disc .page-hero-grid { justify-content: start !important; margin: 0 !important; width: 100%; }
:is(.sub-hero, .hero).page-hero-with-disc { background-image: linear-gradient(90deg, #070e20 0%, #070e20 42%, rgba(7,14,32,.6) 58%, rgba(7,14,32,0) 75%), var(--bild) !important; }
.page-hero-text { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; }
@media (max-width: 860px) {
  :is(.sub-hero, .hero).page-hero-with-disc { background-image: linear-gradient(180deg, rgba(7,14,32,0) 0%, rgba(7,14,32,.2) 30%, #070e20 55%), var(--bild) !important; }
}

.hero.page-hero-with-disc { text-align: left !important; }
.hero.page-hero-with-disc .section-lead { margin-left: 0 !important; margin-right: 0 !important; }
.hero.page-hero-with-disc .hero-ctas { justify-content: flex-start !important; }
.hero.page-hero-with-disc .hero-scroll { display: none !important; }
@media (max-width: 860px) {
  .hero.page-hero-with-disc { width: calc(100% - 24px); margin-top: 14px !important; }
  .hero.page-hero-with-disc .hero-ctas { align-items: stretch !important; }
}

/* Startseite EN/JA: Hero mit kleinem Kreisbild über dem Text */
.hero:not(.page-hero-with-disc) { flex-direction: column !important; justify-content: center !important; text-align: center; min-height: 0 !important; }
.hero:not(.page-hero-with-disc) .section-inner { width: 100%; }
.hero:not(.page-hero-with-disc) .hero-disc { width: min(300px, 70vw); margin: 0 auto 8px !important; }
.hero:not(.page-hero-with-disc) .hero-scroll { display: none !important; }
.hero h1 { font-family: var(--font-display) !important; font-weight: 900 !important; text-transform: none !important; letter-spacing: -.01em !important; font-variant: normal !important; }
.hero-sub { font-family: var(--font-body) !important; color: var(--text-dim) !important; font-size: 1.12rem !important; }
@media (max-width: 860px) { .hero { width: calc(100% - 24px); margin-top: 14px !important; } }

.hero.page-hero-with-disc > .hero-disc { display: none !important; }
.hero.page-hero-with-disc > .section-inner:not(.page-hero-grid) { max-width: 560px !important; margin: 0 !important; text-align: left !important; }
.hero.page-hero-with-disc .hero-sub { margin-left: 0 !important; }
.hero.page-hero-with-disc { align-items: flex-start !important; }
.hero.page-hero-with-disc { flex-direction: column !important; justify-content: center !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Funnel-Bausteine (gemeinsam/funnel.js) · Oktober 2026
   Eintrag-Formular, Termin-Zeilen, Warteliste, Abschieds-Karte, Brücken-Box
   ═══════════════════════════════════════════════════════════════════════ */
.sw-box { background: var(--bg-card); border: 1px solid var(--n-line); border-radius: var(--n-r); box-shadow: var(--n-shadow); padding: clamp(24px, 4vw, 40px); max-width: 760px; margin: 0 auto; text-align: left; }
.sw-box h2, .sw-box h3 { margin: 0 0 10px; }
.sw-box p { color: var(--text-dim); }
.sw-box .section-eyebrow { justify-content: flex-start !important; }
.sw-eintrag { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.sw-eintrag input[type=email], .sw-eintrag input[type=text] { flex: 1 1 220px; min-width: 0; background: #0a1020; color: #fff; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 13px 18px; font: inherit; font-size: 1rem; }
.sw-eintrag input::placeholder { color: #a79fb6; }
.sw-eintrag input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.sw-eintrag .sw-falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sw-knopf { display: inline-block; background: var(--gold); color: #0a1020 !important; border: 0; border-radius: 999px; padding: 13px 24px; font: inherit; font-weight: 900; font-size: 1rem; cursor: pointer; text-decoration: none !important; text-align: center; transition: background .15s, transform .15s; }
.sw-knopf:hover { background: #e7c66e; transform: translateY(-1px); }
.sw-knopf[disabled] { opacity: .7; cursor: wait; transform: none; }
.sw-fehler { flex-basis: 100%; color: #ffb4a8; font-size: .92rem; margin: 4px 6px 0; }
.sw-klein { font-size: .85rem !important; color: #b9b0c9 !important; margin: 10px 0 0; }
.sw-klein a { color: var(--gold-light); }
.sw-termine { display: grid; gap: 14px; }
.sw-termin { display: grid; grid-template-columns: 86px 1fr auto; gap: 18px; align-items: center; background: var(--bg-card); border: 1px solid var(--n-line); border-radius: 16px; padding: 16px 20px; }
.sw-termin .sw-tag { background: #2a1a4d; color: #fff; border-radius: 12px; text-align: center; padding: 8px 4px; line-height: 1.1; }
.sw-termin .sw-tag b { display: block; font-size: 1.7rem; }
.sw-termin .sw-tag span { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-light); }
.sw-termin h3 { margin: 0 0 2px; font-size: 1.08rem !important; }
.sw-termin p { margin: 0; font-size: .92rem; color: var(--text-dim); }
.sw-lang { display: inline-block; font-size: .7rem; font-weight: 900; border: 1px solid var(--n-line); border-radius: 6px; padding: 0 6px; margin-right: 8px; color: var(--text-dim); vertical-align: middle; }
@media (max-width: 640px) { .sw-termin { grid-template-columns: 70px 1fr; } .sw-termin .sw-knopf { grid-column: 1 / -1; } }
.sw-planung { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.sw-planung-titel { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 26px 0 10px; }
.sw-warte { background: var(--bg-card); border: 1px dashed rgba(216, 180, 90, .55); border-radius: 16px; padding: 20px 22px; min-width: 0; }
.sw-warte h3 { margin: 0 0 6px; font-size: 1.08rem !important; }
.sw-warte p { margin: 0 0 6px; font-size: .95rem; color: var(--text-dim); }
.sw-laden, .sw-stand { color: var(--text-dim); font-size: .9rem; }
.sw-stand { font-size: .8rem; margin-top: 14px; }
.sw-laden a { color: var(--gold-light); }
.sw-abschied { position: fixed; right: 18px; bottom: 18px; z-index: 1000; width: min(360px, calc(100vw - 36px)); background: #131d35; color: var(--text-main); border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); border: 1px solid rgba(216, 180, 90, .35); padding: 22px 22px 18px; transform: translateY(130%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.sw-abschied.da { transform: none; }
.sw-abschied h3 { font-size: 1.05rem !important; margin: 0 26px 6px 0; }
.sw-abschied p { font-size: .92rem; color: var(--text-dim); margin: 0 0 4px; }
.sw-abschied .sw-zu { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--text-dim); cursor: pointer; padding: 4px 8px; }
.sw-abschied .sw-eintrag input[type=email] { padding: 11px 14px; }
.sw-abschied .sw-knopf { padding: 11px 18px; font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .sw-abschied { transition: none; } }
.sw-bruecke { background: var(--bg-card); border: 1px solid var(--n-line); border-left: 4px solid var(--gold); border-radius: var(--n-r); box-shadow: var(--n-shadow); padding: 26px 28px; margin: 48px auto; max-width: 760px; }
.sw-bruecke h3 { margin: 0 0 8px; font-size: 1.2rem !important; }
.sw-bruecke p { color: var(--text-dim) !important; margin: 0 0 14px; }
.sw-bruecke .sw-leise { font-size: .92rem; margin: 16px 0 0 !important; }
.sw-bruecke .sw-leise a { color: var(--gold-light); }
.sw-eintrag-zentriert { max-width: 540px; margin: 18px auto 0; }
.sw-eintrag-zentriert .sw-eintrag { justify-content: center; }