/* Taste and See: Nehemia Journal im gemeinsamen Look
   Bild: Steinmauer vor dem Garten. Akzent: warmer Sandstein. Gold bleibt "weitergehen".
   Einbinden NACH dem Seiten-<style>. */
html{background:#0F1512}
body.neh{
  --bg:transparent; --cream:rgba(var(--tint),.45); --sand:rgba(245,240,230,.16);
  --text:#F5F0E6; --text-soft:rgba(245,240,230,.8); --text-faint:rgba(245,240,230,.38); --rule:rgba(245,240,230,.12);
  --gold-soft:rgba(201,162,39,.1); --gbf:transparent; --gbt:transparent; --love:var(--accent);
  --accent:#E2CDA0; --accent-rgb:226,205,160; --tint:15,21,18;
  --glass:rgba(var(--tint),.5); --glass-in:rgba(245,240,230,.05); --line:rgba(var(--accent-rgb),.4);
  background:transparent!important; color:var(--text); overflow-x:hidden;
}
.neh-bg{position:fixed;inset:0;z-index:-2;background:url(/images/wege/mauer-garten.jpg) center 60%/cover no-repeat;pointer-events:none}
.neh-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(var(--tint),.55),rgba(var(--tint),.9) 75%)}

/* Kopf */
body.neh .nav{position:fixed;left:0;right:0;top:0;background:linear-gradient(rgba(var(--tint),.95) 55%,rgba(var(--tint),0))!important;backdrop-filter:none;-webkit-backdrop-filter:none;border:0!important;padding:calc(env(safe-area-inset-top,0px) + 14px) 20px 26px}
body.neh .nav-logo img{display:block;width:clamp(86px,9vw,120px);height:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.4))}
.neh-steps{display:flex;align-items:center;gap:5px}
.neh-steps-label{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-faint);margin-right:8px}
.neh-st{display:block;width:15px;height:15px;opacity:.3;transition:opacity .4s,transform .4s}
.neh-st svg{display:block;width:100%;height:100%}
.neh-st.here{opacity:.65}
.neh-st.on{opacity:1;transform:scale(1.25);filter:drop-shadow(0 0 4px rgba(255,220,130,.8))}
.neh-st.gap{margin-left:7px}
@media (max-width:640px){.neh-steps-label{display:none}.neh-st{width:11px;height:11px}.neh-steps{gap:3px}.neh-st.gap{margin-left:5px}}

/* Einstieg */
body.neh .hero{min-height:78vh;min-height:78svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:130px 22px 30px;max-width:760px}
body.neh .hero-phase,body.neh .et-num,body.neh .inc-label,body.neh .hc-label,body.neh .btb-label,body.neh .vbox-l,body.neh .neh-tag,body.neh .praxis h4,body.neh .wz-tag,body.neh .lw-head{color:var(--accent)!important;font-weight:500!important;letter-spacing:.24em!important;font-size:.66rem!important;background:none!important}
body.neh .hero h1{font-size:clamp(2.4rem,7vw,3.8rem);color:var(--text)}
body.neh h1 em,body.neh h2 em{color:var(--accent)!important}
body.neh .hero-sub{color:var(--text-soft);font-size:clamp(1.2rem,2.8vw,1.5rem);max-width:34ch}
.spk{display:inline-block;width:1em;height:1em;vertical-align:-.12em;margin-right:.5em;filter:drop-shadow(0 0 4px rgba(255,220,130,.6))}

/* Glas-Karten */
body.neh .neh-context,body.neh .neh-box,body.neh .vbox,body.neh .incentive,body.neh .werkzeug,body.neh .hc,body.neh .btb,body.neh .milestone{
  background:var(--glass)!important;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border:1px solid var(--line)!important;border-radius:20px!important;box-shadow:none!important;color:var(--text-soft)}
body.neh .neh-box::before{display:none}
body.neh .neh-context{max-width:760px;margin:10px auto 40px}
body.neh .neh-context h3,body.neh .incentive h3,body.neh .werkzeug h3,body.neh .hc-truth{color:var(--text)}
body.neh .neh-box p{color:var(--text-soft)}
body.neh .neh-box p:first-of-type{color:var(--text)}
body.neh .vq{background:rgba(var(--accent-rgb),.07)!important;border:0!important;border-left:2px solid var(--accent)!important;border-radius:0 14px 14px 0!important}
body.neh .vq p{color:var(--text)}
body.neh .vq .ref,body.neh [style*="color:#8B6914"]{color:var(--accent)!important}
body.neh .praxis{background:var(--glass-in)!important;border:1px solid rgba(245,240,230,.1)!important;border-left:1px solid rgba(245,240,230,.1)!important;border-radius:14px!important}
body.neh .praxis p,body.neh .werkzeug p,body.neh .teach p,body.neh .milestone p{color:var(--text-soft)}
body.neh [style*="color:var(--text)"]{color:var(--text)!important}
body.neh .wz-header{justify-content:center;flex-wrap:wrap;text-align:center}
body.neh .wz-icon{display:none}
body.neh .etappe{border-bottom:0;padding-bottom:20px}
body.neh .et-head{padding-top:90px}
body.neh .et-head h2{font-size:clamp(1.7rem,4.4vw,2.4rem)}
body.neh .et-whisper{color:var(--text-soft);font-size:1.25rem}

/* Text: keine fetten Stellen */
body.neh strong,body.neh b{font-weight:inherit;color:var(--text)}

/* Mauer-Inspektion */
body.neh .hc-item{border:1px solid rgba(245,240,230,.16)!important;background:rgba(var(--tint),.35);border-radius:12px;outline:none}
body.neh .hc-item:hover,body.neh .hc-item:focus-visible{border-color:var(--gold)!important}
body.neh .hc-item.sel{border-color:var(--gold)!important;background:rgba(201,162,39,.16)!important;box-shadow:0 0 18px rgba(201,162,39,.18)}
body.neh .hc-num{color:var(--text);font-weight:400}
body.neh .hc-lbl{color:var(--text-soft);font-size:.62rem}
body.neh .hc-note{color:var(--text-soft)}

/* Bautagebuch */
body.neh textarea{background:rgba(var(--tint),.45)!important;border:1px solid rgba(245,240,230,.18)!important;color:var(--text)!important;border-radius:14px}
body.neh textarea::placeholder{color:var(--text-faint)!important}
body.neh textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14)!important}
.saved-note{font-size:.66rem;color:var(--text-faint);text-align:center;margin-top:8px;font-style:italic}
.saved-note.ok::after{content:" Gespeichert.";color:var(--accent)}
body.neh .lw-table{border:1px solid var(--line)!important;border-radius:14px}
body.neh .lw-head{padding:12px 10px}
body.neh .lw-cell{border-top:1px solid rgba(245,240,230,.1)}

/* Weiter */
.neh-next{display:flex;flex-direction:column;align-items:center;gap:4px;margin:26px 0 30px}
.neh-next .tw{--tw-size:clamp(160px,34vw,190px)}
.tw-cap{font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--text-soft);text-align:center}

/* Deine Mauer: Rückblick */
.wall{background:var(--glass);backdrop-filter:blur(2px);border:1px solid var(--line);border-radius:20px;padding:30px 26px;margin:30px auto;max-width:760px;text-align:center}
.wall h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;color:var(--text);margin:6px 0 6px}
.wall .sub{font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--text-soft);margin-bottom:20px}
.wall-row{display:grid;grid-template-columns:2.4em 1fr 7.5em;gap:12px;align-items:center;text-align:left;padding:8px 0;border-top:1px solid rgba(245,240,230,.08)}
.wall-row:first-of-type{border-top:0}
.wall-row em{font-family:var(--serif);color:var(--accent)}
.wall-row span{font-size:.88rem;color:var(--text-soft);line-height:1.4}
.wall-stones{display:flex;gap:4px;justify-content:flex-end}
.wall-stones i{width:18px;height:12px;border-radius:3px;background:rgba(245,240,230,.1)}
.wall-stones i.f{background:linear-gradient(#E8D29A,#B8902E)}
.wall-empty{font-size:.8rem;color:var(--text-faint);text-align:right}
.wall-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.pill{background:none;border:1px solid var(--gold);color:var(--text);font-family:var(--serif);font-style:italic;font-size:1rem;padding:10px 24px;border-radius:999px;cursor:pointer}
.pill:hover{background:rgba(201,162,39,.16)}
.pill.quiet{border-color:rgba(245,240,230,.2);color:var(--text-faint);font-size:.9rem}
@media (max-width:520px){.wall-row{grid-template-columns:2em 1fr}.wall-stones,.wall-empty{grid-column:2;justify-content:flex-start;text-align:left}}

/* Ende */
body.neh .next-phase{margin:10px 0 30px}
.neh-footer{padding:30px 20px calc(env(safe-area-inset-bottom,0px) + 24px);text-align:center}
.neh-footer a{font-size:.7rem;color:rgba(245,240,230,.32);text-decoration:none;margin:0 10px}
.neh-footer a:hover{color:var(--gold)}
@media (max-width:640px){body.neh .neh-context,body.neh .neh-box,body.neh .vbox,body.neh .incentive,body.neh .werkzeug,body.neh .hc,body.neh .btb,body.neh .milestone{padding:24px 18px!important}body.neh .hc-scale{flex-wrap:wrap}body.neh .hc-item{flex:1 1 30%}}
body.neh .lw-table{grid-template-columns:1fr 1fr!important}
@media (max-width:640px){body.neh .lw-cell{padding:8px}body.neh .lw-cell textarea{font-size:.95rem;padding:8px}body.neh .lw-head{font-size:.56rem!important;letter-spacing:.14em!important}}