/* ═══════════════════════════════════════════════════════════════════════
   stahl.css · Lesbarkeits- und Design-Overlay (Oktober 2026)
   Prinzip wie nacht.css auf shamanic-worlds.com, aber im Tengu-Look:
   Dunkelstahl-Palette, Cinzel / EB Garamond / Noto Serif JP bleiben.
   Mehr Kontrast, lesbare Textgrößen, Hero als Kachel mit weich
   auslaufendem Bild, nichts versteckt sich hinter Scroll-Effekten,
   ruhiges Angebotsmodul.
   Wird auf JEDER Seite als letztes Stylesheet vor </head> geladen
   (nach den Inline-Styles bzw. tengu-en.css / tengu-ja.css).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --text-main: #ece8de;
  --text-dim: #c3bdb0;          /* vorher #9a9488 – zu schwach auf Schwarz */
  --gold-light: #ecdcae;
  --steel: #a7b6d3;
  --st-label: #c9a84c;          /* Kicker / kleine Überschriften, 7,9:1 auf #050508 */
  --st-jp: #d3b76a;             /* japanische Untertitel */
  --st-line: rgba(136, 153, 187, .18);
  --st-line-gold: rgba(201, 168, 76, .28);
  --st-r: 18px;
  --st-shadow: 0 16px 44px rgba(0, 0, 0, .45);
  --st-tile: linear-gradient(125deg, #0c0f1a 0%, #111727 48%, #1a1626 100%);
}

/* ── Grundlagen: kein horizontales Scrollen, klare Schrift ──────────── */
html, body { overflow-x: clip; max-width: 100%; }
body {
  font-size: 19px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* „Verschwommen“: Der atmende Vollbild-Hintergrund (transform: scale, mix-blend-mode)
   lässt Chrome/Safari den Text über einer ständig neu gerenderten Ebene glätten.
   Hintergrund bleibt, aber still. */
body::before, body::after { animation: none !important; transform: none !important; }
body::before { opacity: .75; }
body::after { mix-blend-mode: normal !important; opacity: .6; }
.noise-overlay { opacity: .03 !important; }
img { max-width: 100%; height: auto; }
p, li, blockquote, figcaption { text-shadow: none !important; }

/* Inhalte nie unsichtbar lassen (vorher opacity:0 bis zum Scroll-Ereignis).
   Keine Ausblende-Animation mehr – der Inhalt steht sofort da. */
.reveal, .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ── Navigation: größer, heller ─────────────────────────────────────── */
nav.main-nav, body > nav { background: rgba(5, 5, 8, .95); border-bottom: 1px solid var(--st-line); }
.nav-logo { font-size: .9rem; color: var(--gold); }
.nav-logo span { color: var(--gold); }
.nav-links { gap: 20px; }
.nav-links a { font-size: 14px !important; letter-spacing: .06em !important; color: #e4dfd3 !important; }
.nav-links a:hover, .nav-links a.active, .nav-links a[aria-current] { color: var(--gold) !important; }
.nav-lang a { font-size: 13px !important; color: #d8cba2 !important; border-color: rgba(201, 168, 76, .45) !important; border-radius: 999px; padding: 3px 10px; }
.mobile-menu a { font-size: 1rem; color: var(--text-main); }
/* Neun Menüpunkte in 14 px brauchen Platz: unter 1320 px Breite übernimmt das Menü-Symbol */
@media (max-width: 1320px) {
  .nav-links, .nav-lang { display: none !important; }
  .nav-hamburger { display: block !important; }
}

/* ── Hero als Kachel, Bild weich auslaufend in der Kachel ───────────── */
.hero {
  max-width: 1180px; width: calc(100% - 40px);
  margin: 88px auto 0 !important;
  padding: clamp(36px, 5vw, 64px) clamp(22px, 5vw, 60px) !important;
  min-height: 460px !important;
  background: var(--st-tile);
  border: 1px solid var(--st-line); border-radius: var(--st-r);
  box-shadow: var(--st-shadow);
  justify-content: flex-start !important;
  overflow: hidden !important;
}
.hero.aurora-strip::after { display: none; }
.hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--crimson) 25%, var(--gold) 50%, var(--steel) 75%, transparent); opacity: .8; z-index: 1; }
.hero-kanji { font-size: clamp(12rem, 22vw, 24rem); left: 30%; color: rgba(201, 168, 76, .05); max-width: 100%; overflow: hidden; }
.hero-bg-image {
  position: absolute !important; top: 14px !important; right: 14px; bottom: 14px;
  width: 48% !important; max-width: none !important; z-index: 0 !important;
}
.hero-bg-image picture { width: 100%; height: 100%; }
.hero-bg-image img {
  width: 100% !important; height: 100% !important; object-position: right center !important;
  object-fit: cover !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-composite: intersect;
}
.hero-bg-image::after { display: none !important; }
.hero-inner { margin-left: 0 !important; max-width: 560px !important; z-index: 2; }
/* Heros ohne Bild (Blogartikel): Text mittig in der Kachel */
.hero:not(:has(.hero-bg-image)) { justify-content: center !important; min-height: 380px !important; }
.hero:not(:has(.hero-bg-image)) .hero-inner { margin: 0 auto !important; max-width: 820px !important; text-align: center !important; }
.hero:not(:has(.hero-bg-image)) .hero-kanji { left: 50%; }
.hero-logo { width: 150px !important; height: 150px !important; margin: 0 0 22px !important; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)) !important; }
.hero:not(:has(.hero-bg-image)) .hero-logo { margin: 0 auto 22px !important; }
.hero-eyebrow { font-size: 13px !important; letter-spacing: .2em; color: #bfcbe2 !important; margin-bottom: 18px; }
.hero-title { font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--gold); }
.hero-title-jp { color: var(--st-jp) !important; font-weight: 400 !important; margin-bottom: 22px; }
.hero-lead { color: var(--text-main) !important; font-size: clamp(1.12rem, 1.9vw, 1.28rem) !important; line-height: 1.7 !important; }
.hero-meta { font-size: 13px !important; color: #c9c3b6 !important; }
.hero-meta span { color: var(--gold); }
.hero-cta-wrap { flex-wrap: wrap; }
@media (max-width: 900px) {
  .hero { width: calc(100% - 24px); margin-top: 76px !important; padding: 0 0 32px !important; min-height: 0 !important; flex-direction: column !important; }
  .hero:not(:has(.hero-bg-image)) { padding: 40px 0 32px !important; }
  .hero-bg-image { position: relative !important; top: 0 !important; right: 0; bottom: auto; width: 100% !important; aspect-ratio: 16 / 11; margin: 0 0 22px !important; }
  .hero-bg-image img { object-fit: cover !important; object-position: center !important; -webkit-mask-composite: source-over; mask-composite: add; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .hero-inner { padding: 0 20px !important; max-width: 100% !important; }
  .hero-kanji { display: none; }
  .hero-logo { margin: 0 auto 18px !important; width: 120px !important; height: 120px !important; }
}

/* ── Fließtext: größer, heller, aufrecht ────────────────────────────── */
.article { padding: clamp(56px, 7vw, 88px) 20px; }
.container-narrow { max-width: 760px; }
.article p, .article li, .article-body p, .article-body li {
  font-size: 1.22rem !important;       /* 19,5 px */
  line-height: 1.78 !important; color: var(--text-main) !important; font-weight: 400 !important;
}
.article p.lead { font-size: 1.3rem !important; color: var(--gold-light) !important; }
.article strong, .article-body strong { color: #fff; font-weight: 500; }
.article a, .article-body a { color: var(--gold-light); border-bottom: 1px solid rgba(201, 168, 76, .5); }
.article-section-kanji { color: rgba(201, 168, 76, .6); }
.article-section-title { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.article-body { color: var(--text-main) !important; }
.article-body h3 { color: var(--gold-light); }
figure.seiten-bild { border-radius: 14px; border: 1px solid var(--st-line); box-shadow: var(--st-shadow); max-width: min(900px, calc(100% - 32px)); margin-left: auto; margin-right: auto; }
figure.seiten-bild figcaption { color: var(--text-dim) !important; font-size: 1rem !important; }
figure.seiten-bild.logo-figur { max-width: 300px; background: transparent; box-shadow: none; border: 0; }
figure.seiten-bild.logo-figur figcaption { background: transparent; }
figure.seiten-bild.float-r { max-width: 250px; margin-top: 4px; }
.article-section::after { content: ''; display: block; clear: both; }

/* ── Karten und Abschnitts-Labels ───────────────────────────────────── */
.cluster-intro-label, .verwandte-intro-label, .section-label,
.sys-cluster-intro-label, .trad-cluster-intro-label { font-size: 13px !important; color: var(--st-label) !important; }
.cluster-intro p, .sys-cluster-intro p, .trad-cluster-intro p { color: var(--text-dim) !important; font-size: 1.1rem !important; }
.cluster-card, .related-card { border-radius: 16px; border-color: var(--st-line); padding: 26px 24px; }
.cluster-card:hover, .related-card:hover { border-color: var(--st-line-gold); }
.cluster-card-kanji, .related-card .related-kanji { color: rgba(201, 168, 76, .6) !important; }
.cluster-card-title, .related-card .related-title { font-size: 1rem !important; color: var(--gold-light) !important; }
.cluster-card-text, .related-card .related-text { font-size: 1.02rem !important; color: var(--text-dim) !important; }

/* EN / JA: Seitenkopf und Abschnitte */
.page-hero { padding-top: 128px; }
.page-hero .page-jp { color: var(--st-jp) !important; font-weight: 400; }
.page-hero .page-lead { color: var(--text-main) !important; font-size: clamp(1.15rem, 2.2vw, 1.35rem) !important; }
.section-title { color: var(--gold); }
:lang(ja) .article-body p, :lang(ja) .article-body li { font-size: 1.12rem !important; line-height: 1.95 !important; }
:lang(ja) .nav-links a { letter-spacing: .04em !important; }

/* Stimmen + FAQ (Inline-Styles) */
.stimmen-disclaimer { font-size: 1rem !important; color: var(--text-dim) !important; }
.faq-item { border-radius: 14px !important; border-color: var(--st-line) !important; }
.faq-item summary { font-size: 1.05rem !important; color: var(--gold-light) !important; }
.faq-item > div { font-size: 1.12rem !important; color: var(--text-main) !important; }

/* ── Fuß: lesbar ────────────────────────────────────────────────────── */
.footer-logo { color: var(--gold) !important; font-size: .85rem !important; }
.footer-links a { font-size: 13px !important; color: #cdc7ba !important; }
.footer-links a:hover { color: var(--gold) !important; }
.footer-copy { color: #aaa497 !important; font-size: .85rem !important; }
footer p, footer span, footer a { text-shadow: none !important; }

/* ── Angebotsmodul am Artikelende ───────────────────────────────────── */
.st-angebot { padding: 8px 20px clamp(56px, 7vw, 88px); }
.st-angebot-box {
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(22px, 4vw, 44px); align-items: center;
  background: var(--st-tile); border: 1px solid var(--st-line); border-left: 4px solid var(--gold);
  border-radius: var(--st-r); box-shadow: var(--st-shadow); padding: clamp(22px, 4vw, 40px);
}
.st-angebot-bild img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--st-line-gold); }
.st-angebot-label { font-family: var(--font-display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #bfcbe2; display: block; margin-bottom: 10px; }
.st-angebot h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 1.75rem); letter-spacing: .04em; color: var(--gold); line-height: 1.3; margin-bottom: 14px; }
.st-angebot p { color: var(--text-main); font-size: 1.12rem; line-height: 1.75; margin-bottom: 14px; }
.st-angebot ul { list-style: none; margin: 0 0 20px; padding: 0; }
.st-angebot li { position: relative; padding-left: 22px; margin-bottom: 6px; color: var(--text-dim); font-size: 1.05rem; line-height: 1.6; }
.st-angebot li::before { content: '◆'; position: absolute; left: 0; top: .1em; font-size: .7rem; color: var(--gold); }
.st-angebot-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.st-knopf {
  display: inline-block; font-family: var(--font-display); font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: #0b0b10 !important; background: var(--gold); border-radius: 999px; padding: 13px 26px; text-decoration: none !important; border: 0 !important; transition: background .2s, transform .2s;
}
.st-knopf:hover { background: #ddbe68; transform: translateY(-1px); }
.st-preis { font-size: 1.05rem; color: var(--text-dim); }
.st-leise { margin-top: 18px !important; font-size: 1rem !important; color: var(--text-dim) !important; }
.st-leise a { color: var(--gold-light); border-bottom: 1px solid rgba(201, 168, 76, .45); text-decoration: none; }
@media (max-width: 760px) {
  .st-angebot-box { grid-template-columns: 1fr; border-left-width: 1px; border-top: 4px solid var(--gold); }
  .st-knopf { width: 100%; text-align: center; }
}

/* Weitere kleine Beschriftungen mit zu schwachem Gold */
.bridge-domain, .verwandte-card-eyebrow { color: var(--st-label) !important; font-size: 12px !important; }
.hero-title-latin { color: var(--st-label) !important; }
blockquote footer, figure blockquote + footer, .zitat footer, blockquote cite { color: #d6c79a !important; }
.platzhalter-hinweis { display: none !important; }   /* interner Hinweis für Mark, nicht öffentlich zeigen */

/* Kleine Kategorie-Marken, Verlage, Hinweise: mind. 12 px und volle Deckkraft */
.stimme-card footer .kategorie, .stimme-card footer span[style*="font-size:0.6rem"],
footer span[style*="opacity:0.6"] { font-size: 12px !important; opacity: 1 !important; color: var(--st-label) !important; }
.book-publisher, .way-eyebrow { font-size: 12px !important; color: var(--st-label) !important; }
.newsletter-fineprint, .newsletter-fineprint a { font-size: 14px !important; color: var(--text-dim) !important; }
.sub-nav-inner a { font-size: 13px !important; color: #ddd6c6 !important; }
.verwandte-card-kanji, .tradition-kanji { color: rgba(201, 168, 76, .6) !important; }

/* ── Kontaktformular (POST an shingon-reiki.com/api/kontakt, seite: tengu-akasha-dojo) ── */
    .kf-box { max-width: 680px; margin: 0 auto; background: var(--st-tile); border: 1px solid rgba(201,168,76,.32); border-radius: 8px; padding: 40px 36px; text-align: left; }
    .kf-form { position: relative; }
    .kf-feld { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
    .kf-feld label, .kf-an-frage { font-family: 'Cinzel', serif; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: #d3b76a; }
    .kf-feld input, .kf-feld textarea { background: rgba(5,5,8,.65); border: 1px solid rgba(201,168,76,.32); border-radius: 10px; padding: 13px 16px; color: #ece8de; font-family: 'EB Garamond', serif; font-size: 1.02rem; transition: border-color .25s; width: 100%; box-sizing: border-box; }
    .kf-feld input:focus, .kf-feld textarea:focus { outline: none; border-color: #c9a84c; }
    .kf-feld textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
    .kf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .kf-an { margin-bottom: 22px; }
    .kf-an-frage { display: block; margin-bottom: 10px; }
    .kf-an-optionen { display: flex; gap: 10px; flex-wrap: wrap; }
    .kf-an-option { flex: 1 1 140px; display: flex; align-items: center; gap: 11px; background: rgba(5,5,8,.65); border: 1px solid rgba(201,168,76,.32); border-radius: 10px; padding: 13px 18px; cursor: pointer; }
    .kf-an-option:has(input:checked) { border-color: #c9a84c; }
    .kf-an-option input { accent-color: #c9a84c; margin: 0; }
    .kf-an-option span { font-family: 'EB Garamond', serif; color: #ece8de; }
    .kf-meldung { margin-top: 16px; font-size: 0.97rem; line-height: 1.6; display: none; }
    .kf-meldung.gut { display: block; color: #a8dcb2; }
    .kf-meldung.schlecht { display: block; color: #f2aaa2; }
    .kf-hinweis { font-size: 0.86rem; color: #c3bdb0; font-style: italic; margin-top: 18px; line-height: 1.6; }
    .kf-hinweis a { color: #c9a84c; }
    button[disabled] { opacity: .6; cursor: wait; }
    @media (max-width: 600px) { .kf-box { padding: 28px 20px; } }
.kf-section { padding: clamp(48px, 6vw, 80px) 20px 24px; }
.kf-section h2 { font-family: var(--font-display); font-weight: 400; color: var(--gold); font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: .05em; margin-bottom: 14px; text-align: center; }
.kf-section .section-label { text-align: center; }
.kf-intro { text-align: center; color: var(--text-main); font-size: 1.15rem; line-height: 1.7; max-width: 620px; margin: 0 auto 28px; }
.kf-box { border-radius: var(--st-r) !important; box-shadow: var(--st-shadow); }
.kf-feld label, .kf-an-frage { font-size: 13px !important; }
.kf-feld input, .kf-feld textarea { font-size: 1.1rem !important; }
.kf-hinweis { font-size: .95rem !important; }
.kf-form .st-knopf { cursor: pointer; }

/* Knöpfe: lesbare Größe; im Desktop-Hero linksbündig zum Text */
.btn-primary, .btn-secondary, .hero-cta-wrap a { font-size: 13px !important; }
@media (min-width: 901px) { .hero:has(.hero-bg-image) .hero-cta-wrap { justify-content: flex-start !important; margin-left: 0 !important; } }
figure.seiten-bild { margin-top: 36px; margin-bottom: 36px; overflow: hidden; background: var(--bg-card, #0f0f18); }
figure.seiten-bild img { display: block; width: 100%; height: auto; }
figure.seiten-bild figcaption { text-align: center; padding: 12px 18px; font-style: italic; }
figure.seiten-bild.float-r { margin-top: 4px; }
figure.seiten-bild.logo-figur { background: transparent; }
figure.seiten-bild img { max-height: 80vh; object-fit: cover; }