/* ==========================================================================
   Wurzelwerk · Startseite V2 — seiteneigene Komponenten
   Ergaenzung zu leistungen.css (Tokens, Header, Footer, Buttons, Sektionen)
   und scroll-scenes.css (die Leistungs-Sequenz).

   Hier steht nur, was ausschliesslich die Startseite braucht: der Hero mit
   Partikelfeld, Erfolge, Ueber mich, der Website-Check und das Cookie-Banner.
   Die alte style.css wird bewusst NICHT mitgenommen — jede Komponente ist auf
   die V2-Tokens umgestellt, damit keine zweite Designsprache entsteht.
   ========================================================================== */

/* ---------- Fliesstext ----------
   Der Sekundaerton #a4b1ad gilt auf der Startseite durchgaengig, auch auf den
   hellen Flaechen. leistungen.css setzt dort sonst den kontraststarken Ton;
   diese Regel gilt bewusst nur hier und laesst die Leistungsseiten unberuehrt.
   ACHTUNG: auf Weiss und Sand erreicht #a4b1ad rund 2,2:1 und damit weniger
   als die 4,5:1, die WCAG AA fuer Fliesstext verlangt.

   Ausnahme: Ausgangslage und Website-Check bleiben beim kontraststarken Ton
   aus leistungen.css (#5f6b76 / --ww-text-muted). Deshalb :not() statt einer
   allgemeinen Regel — sonst muesste hinter dieser Stelle im Stylesheet wieder
   zurueckgesetzt werden. */
.ww-section--light .lead:not(#ausgangslage *):not(#website-check *),
.ww-section--sand .lead:not(#ausgangslage *):not(#website-check *),
.hero__sub{color:#a4b1ad}

/* ---------- Hero ----------
   Der Hero ist die erste Szene der Sequenz (siehe scroll-scenes.css). Hier
   steht nur sein Innenleben: Partikelfeld, Textspalte, Portrait, Aktionen. */
/* Wie das Stadtbild auf den Standortseiten spannt sich das Partikelfeld ueber
   die volle Buehnenbreite, nicht nur ueber den 1320-px-Container — sonst enden
   die Punkte sichtbar vor dem Rand. */
.hero__canvas{
  position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);
  z-index:0;pointer-events:none;
}
.hero__grid{
  position:relative;z-index:1;
  display:grid;gap:1.5rem 3rem;align-items:center;
  width:100%;
}
.hero__eyebrow{
  font-family:var(--font-headline);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ww-green);
  margin:0 0 .9rem;
}
.hero__headline{
  font-family:var(--font-headline);font-weight:700;line-height:1.1;
  letter-spacing:-.02em;color:var(--ww-text-light);
  font-size:clamp(2.1rem,6vw,3.6rem);margin:0 0 1rem;
}
.hero__headline .text--green{color:var(--ww-green)}
.hero__sub{color:var(--ww-text-soft);font-size:1.05rem;max-width:46ch;margin:0 0 1.75rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__portrait{
  width:100%;max-width:340px;height:auto;margin-inline:auto;display:block;
  border-radius:var(--radius-lg);
}

@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .hero__portrait{max-width:420px;margin-inline:0 auto}
  .hero__sub{font-size:1.1rem}
}
/* Unter 900 px steht das Portrait ueber dem Text und wird knapp gehalten,
   damit Headline und beide Aktionen ohne Scrollen in die Buehne passen. */
@media (max-width:899px){
  .hero__grid{grid-template-columns:1fr;gap:1rem}
  .hero__media{order:-1}
  /* Das Portrait ist hochformatig (896×1088): die Breitenbegrenzung allein
     reicht auf kurzen Displays nicht, deshalb zusaetzlich ueber svh gedeckelt.
     Ohne diese zweite Bremse ragten Eyebrow oder Aktionsbuttons auf einem
     iPhone SE aus der fixierten Buehne heraus. */
  .hero__portrait{max-width:min(190px,32svh)}
  .hero__sub{font-size:.98rem;margin-bottom:1.25rem}
}
@media (max-width:400px){
  .hero__portrait{max-width:min(150px,26svh)}
}

/* ---------- Erfolge ----------
   Eine Zahl, drei Foerderbereiche, eine Referenz. Bewusst ohne Kartenraster:
   die Aussage ist die Summe, nicht die Aufzaehlung. */
.stat-badge{
  display:inline-flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:1.5rem 2.25rem;margin-inline:auto;
  background:#fff;border:1px solid var(--ww-border-light);
  border-radius:var(--radius-lg);box-shadow:var(--ww-shadow-card);
}
.stat-badge__value{
  font-family:var(--font-headline);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2.2rem,6vw,3.4rem);line-height:1;color:var(--ww-green);
}
.stat-badge__label{font-size:.95rem;color:var(--ww-text-muted);text-align:center}

.fields{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
  margin:1.75rem auto 0;max-width:62ch;
}
.fields li{
  padding:.5rem 1rem;border:1px solid var(--ww-border-light);border-radius:999px;
  font-family:var(--font-headline);font-size:.875rem;font-weight:500;
  color:var(--ww-text-dark);background:#fff;
}

.proof{
  display:grid;gap:1.25rem;align-items:center;
  max-width:820px;margin:2.5rem auto 0;padding:1.5rem;
  background:#fff;border:1px solid var(--ww-border-light);
  border-radius:var(--radius-lg);box-shadow:var(--ww-shadow-card);
}
@media (min-width:768px){.proof{grid-template-columns:1fr auto;gap:2rem}}
.proof__label{
  font-family:var(--font-headline);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#2f8b4c;margin:0 0 .4rem;
}
.proof h3{margin:0 0 .5rem;font-size:1.3rem;font-weight:700;color:var(--ww-text-dark)}
.proof p{margin:0;color:var(--ww-text-muted);font-size:.98rem}
.proof__note{
  margin-top:1.5rem;text-align:center;font-size:.875rem;color:var(--ww-text-muted);
}

/* ---------- Ueber mich ---------- */
.about{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.about{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3.5rem}}
.about__portrait{
  width:100%;max-width:420px;height:auto;display:block;margin-inline:auto;
  border-radius:var(--radius-lg);
}
.about__stations{display:grid;gap:1rem;margin:1.75rem 0 0}
.about__stations li{
  padding-left:1.1rem;border-left:2px solid rgba(59,165,93,.45);
}
.about__company{
  display:block;font-family:var(--font-headline);font-weight:500;
  color:var(--ww-text-light);
}
.about__role{display:block;font-size:.9375rem;color:var(--ww-text-light-muted);margin-top:.15rem}
.about__quote{
  margin:2rem 0 0;padding:1.1rem 1.4rem;
  border-left:3px solid var(--ww-green);
  background:var(--ww-card-bg);border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-family:var(--font-headline);font-size:1.05rem;color:var(--ww-text-light);
}

/* ---------- Website-Check ---------- */
.check{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.check{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem}}
.check__benefits{display:grid;gap:.7rem;margin:1.5rem 0 0}
.check__benefits li{position:relative;padding-left:1.9rem;color:var(--ww-text-muted)}
.check__benefits li::before{
  content:"";position:absolute;left:0;top:.45rem;width:1.1rem;height:1.1rem;
  border-radius:50%;background:rgba(59,165,93,.15);
  box-shadow:inset 0 0 0 1px rgba(59,165,93,.4);
}
.check__benefits li::after{
  content:"";position:absolute;left:.33rem;top:.72rem;
  width:.45rem;height:.22rem;border-left:2px solid var(--ww-green);
  border-bottom:2px solid var(--ww-green);transform:rotate(-45deg);
}
.check__fine{margin-top:1rem;font-size:.875rem;color:var(--ww-text-muted)}

.check-form{
  padding:1.5rem;background:#fff;
  border:1px solid var(--ww-border-light);border-radius:var(--radius-lg);
  box-shadow:var(--ww-shadow-card);
}
.check-form__honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.check-form__row{display:grid;gap:1rem}
@media (min-width:520px){.check-form__row{grid-template-columns:1fr 1fr}}
.check-form__group{margin-bottom:1rem}
.check-form__label{
  display:block;margin-bottom:.4rem;
  font-family:var(--font-headline);font-size:.875rem;font-weight:500;
  color:var(--ww-text-dark);
}
.check-form__input{
  width:100%;min-height:48px;padding:.7rem .9rem;
  font:inherit;color:var(--ww-text-dark);background:#fff;
  border:1px solid rgba(14,20,27,.18);border-radius:var(--radius-sm);
  transition:border-color var(--tr),box-shadow var(--tr);
}
.check-form__input:focus{
  outline:none;border-color:var(--ww-green);
  box-shadow:0 0 0 3px rgba(59,165,93,.18);
}
.check-form__error{margin:.25rem 0 .75rem;color:#b3261e;font-size:.875rem;min-height:1.2em}
.check-form .btn__loading{display:none}
.check-form .btn.is-loading .btn__text{display:none}
.check-form .btn.is-loading .btn__loading{display:inline}
.check-form__success{
  padding:2rem 1.5rem;text-align:center;background:#fff;
  border:1px solid var(--ww-border-light);border-radius:var(--radius-lg);
}
.check-form__success h3{margin:.75rem 0 .5rem;color:var(--ww-text-dark)}
.check-form__success p{margin:0;color:var(--ww-text-muted)}
.success-icon{width:44px;height:44px;margin-inline:auto;color:var(--ww-green)}
.success-icon svg{width:100%;height:100%}

/* ---------- Cookie-Banner ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  padding:1.25rem var(--pad);
  background:var(--ww-surface-dark);color:var(--ww-text-light);
  border-top:1px solid var(--ww-border-dark);
  box-shadow:0 -18px 50px rgba(0,0,0,.4);
}
.cookie-banner[hidden]{display:none}
.cookie-banner__inner{
  max-width:var(--container);margin-inline:auto;
  display:grid;gap:1rem;align-items:center;
}
@media (min-width:900px){.cookie-banner__inner{grid-template-columns:1fr auto}}
.cookie-banner__title{
  margin:0 0 .3rem;font-family:var(--font-headline);font-weight:500;
}
.cookie-banner__text{margin:0;font-size:.9375rem;color:var(--ww-text-light-muted)}
.cookie-banner__text a{color:var(--ww-green);text-decoration:underline}
.cookie-banner__actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.cookie-banner__btn-decline,
.cookie-banner__btn-settings{
  min-height:44px;padding:.6rem .9rem;background:none;border:0;cursor:pointer;
  font-family:var(--font-headline);font-size:.875rem;
  color:var(--ww-text-light-muted);text-decoration:underline;
}
.cookie-banner__btn-decline:hover,
.cookie-banner__btn-settings:hover{color:var(--ww-text-light)}
.cookie-banner__options{
  display:grid;gap:.6rem;margin-top:.9rem;
}
@media (min-width:640px){.cookie-banner__options{grid-template-columns:1fr 1fr;gap:1.25rem}}
.cookie-banner__option{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.cookie-banner__option b{display:block;font-family:var(--font-headline);font-weight:500;font-size:.9375rem}
.cookie-banner__option span span{display:block;font-size:.8125rem;color:var(--ww-text-light-muted)}
.cookie-banner__checkbox{margin-top:.25rem;width:18px;height:18px;flex:none;accent-color:var(--ww-green)}

/* ==========================================================================
   Standortseiten (Halle, Leipzig, Bitterfeld-Wolfen, Wittenberg)
   Aufbau und Scrollverhalten sind identisch zur Startseite. Abweichend sind
   nur der Hero — Stadtbild statt Portrait und Partikelfeld — und der lokale
   Abschnitt, der dort steht, wo die Startseite "Ausgangslage und Zielbild"
   zeigt.
   ========================================================================== */

/* ---------- Hero mit Stadtbild ----------
   Das Bild liegt als eigene Ebene unter dem Text, damit es beim Einsinken der
   Hero-Szene mitbewegt wird. Darueber derselbe Verlauf wie auf den bisherigen
   Standortseiten: dunkel auf der Textseite, nach rechts aufklarend. */
.hero__photo{
  /* Die Szene ist auf 1320 px begrenzt und zentriert; mit inset:0 endete das
     Bild an dieser Kante und liess links und rechts dunkle Streifen stehen.
     Es fuellt deshalb die volle Buehnenbreite. Der Ueberstand wird vom
     overflow:clip der Buehne abgeschnitten. */
  position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);
  z-index:0;overflow:hidden;
}
.hero__photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    155deg,
    rgba(11,15,20,.90) 30%,
    rgba(11,15,20,.66) 62%,
    rgba(59,165,93,.14) 100%
  );
}
/* Auf schmalen Flaechen steht der Text ueber der Bildmitte statt daneben,
   deshalb gleichmaessiger abdunkeln. */
@media (max-width:899px){
  .hero__photo::after{background:rgba(11,15,20,.80)}
}

/* Das Partikelfeld liegt UEBER dem Stadtbild. Ohne diese Stufung gewinnt das
   Foto, weil es spaeter im DOM steht — die Punkte waeren unsichtbar. */
.scene--ort .hero__canvas{z-index:1}
.scene--ort .hero__grid{z-index:2}

/* Ohne Portrait ist der Hero einspaltig. Die Spalte muss breit genug bleiben,
   dass "Digitalisierung" in eine Zeile passt und die beiden Aktionen
   nebeneinander stehen — sonst bricht die Ueberschrift dreizeilig um. */
.scene--ort .hero__grid{grid-template-columns:1fr;position:relative}
.scene--ort .hero__col{max-width:min(54ch,100%)}
@media (min-width:900px){
  .scene--ort .hero__headline{font-size:clamp(2.4rem,4.6vw,3.6rem)}
  .scene--ort .hero__sub{max-width:50ch}
}

/* ---------- Lokaler Abschnitt ----------
   Steht vor der Ausgangslage und traegt den ortsbezogenen Text. Einspaltig,
   ohne Kontaktkarte — die Kontaktdaten stehen am Seitenende.

   Der Fliesstext ist hier bewusst dunkler als der Sekundaerton der Startseite:
   es ist der einzige laengere Lesetext auf hellem Grund. */
.local{max-width:70ch}
.local p{color:#474f4d;max-width:62ch}