/* Mentara – V2 «ruhig»: ohne Berge. Einziger bewegter Moment ist das Logo im Startbild:
   der Ensō zeichnet sich, der Punkt steigt wie eine Sonne in die Öffnung. Wird nach styles.css geladen. */

/* ---------- Startbild ---------- */
/* Himmelsverlauf wie in V1: beim Laden von Morgenrot zu Tageslicht, unten fliesst er in Creme */
.hero2{position:relative;min-height:min(100svh,960px);display:flex;align-items:center;padding:140px 0 90px;overflow:hidden;
  --sky-a:#7F97C4;--sky-b:#F2BE98;
  background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 80%,var(--creme) 100%)}
/* Endzustand bleibt ein sichtbarer Verlauf (Himmelblau zu warmem Sand), Übergang langsam */
.hero2.is-day{--sky-a:#93C1E8;--sky-b:#F2D6BC;transition:--sky-a 7s cubic-bezier(.35,.2,.3,1),--sky-b 7s cubic-bezier(.35,.2,.3,1)}
.hero2-in{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);align-items:center}
.hero2 .hero-eyebrow{color:var(--arve-d);opacity:1}
.hero2 h1{font-size:clamp(34px,5.6vw,92px);line-height:.98;letter-spacing:-.025em;white-space:nowrap}  /* «Projekte mit Herz» auf einer Zeile */
.hero2 .hero-lead{max-width:30em;font-size:clamp(18px,1.1vw + 12px,22px);margin:28px 0 36px;color:var(--muted)}
.hero2-mark svg{display:block;width:min(100%,460px);margin-inline:auto;overflow:visible}
.h2-enso{fill:var(--see)}
.h2-dot{fill:var(--arve)}
.h2-draw{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s cubic-bezier(.6,.05,.25,1) .35s}
.h2-dotwrap{transform:translateY(38px);opacity:0;transition:transform 2.3s cubic-bezier(.22,.7,.2,1),opacity .9s var(--ease)}
.h2-glow{opacity:0;transition:opacity 2.4s var(--ease) .4s}
.hero2.is-day .h2-draw{stroke-dashoffset:0}
.hero2.is-day .h2-dotwrap{transform:none;opacity:1}
.hero2.is-day .h2-glow{opacity:1}
.js .hero2 .hero2-txt > *{opacity:0;transform:translateY(18px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.js .hero2.is-day .hero2-txt > *{opacity:1;transform:none}
.hero2.is-day .hero2-txt > :nth-child(1){transition-delay:.2s}.hero2.is-day .hero2-txt > :nth-child(2){transition-delay:.35s}
.hero2.is-day .hero2-txt > :nth-child(3){transition-delay:.55s}.hero2.is-day .hero2-txt > :nth-child(4){transition-delay:.75s}

/* ---------- Kontakt: hell und ruhig ---------- */
.v2 .kontakt{background:var(--sand);color:var(--tief)}
/* Abendhimmel beim Abschluss: färbt sich beim Hinscrollen sanft von Tag zu Abendrot */
.calm-sky{--sky-a:#93C1E8;--sky-b:#F2D6BC;background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 75%,var(--sand) 100%);
  transition:--sky-a 7s cubic-bezier(.35,.2,.3,1),--sky-b 7s cubic-bezier(.35,.2,.3,1)}
.calm-sky.is-dusk{--sky-a:#8EA3CF;--sky-b:#F0B896}
.calm-head{text-align:center;padding:clamp(96px,11vw,150px) 0 clamp(40px,5vw,64px);max-width:860px}
.calm-mark{width:64px;margin:0 auto 28px}
.calm-head h2{font-size:clamp(44px,5.6vw,88px);letter-spacing:-.02em}
.calm-head .lead{max-width:34em;margin:24px auto 0;font-size:clamp(18px,1vw + 12px,21px);color:var(--muted)}
.calm{padding:0 0 clamp(96px,10vw,150px)}
.calm .shell{background:rgba(20,61,99,.045);box-shadow:inset 0 0 0 1px rgba(20,61,99,.07)}
.calm .core{background:var(--paper)}
.calm .field label{color:var(--muted)}
.calm .field input,.calm .field select,.calm .field textarea{color:var(--tief);border-bottom-color:rgba(20,61,99,.25)}
.calm .field input:focus,.calm .field select:focus,.calm .field textarea:focus{border-color:var(--see)}
.calm .field select{background-image:linear-gradient(45deg,transparent 50%,var(--tief) 50%),linear-gradient(135deg,var(--tief) 50%,transparent 50%)}
.calm .err{color:#A4442A}
.calm .btn{background:var(--tief);color:var(--creme)}
.calm .btn .ico{background:rgba(247,242,232,.14)}
.calm .btn:hover{background:var(--see);color:var(--creme)}
.calm .promise{color:var(--muted)}
.calm .sig{color:var(--muted)}
.calm .dl a:hover{color:var(--see)}

/* ---------- Unterseiten ---------- */
.sub-hero2{background:linear-gradient(180deg,#93C1E8 0%,#F2D6BC 80%,var(--creme) 100%);padding:150px 0 56px}
.sub-hero2 h1{font-size:clamp(42px,5vw,76px)}

@media (max-width:860px){
  .hero2{padding:120px 0 64px;min-height:auto}
  .hero2-in{grid-template-columns:1fr}
  .hero2-mark{order:-1}
  .hero2-mark svg{width:200px}
  .hero2 h1{font-size:min(10.4vw,64px)}
}