/* ==========================================================================
   GROWIT — ATMO (hell)
   Ein durchgehender hellblauer Grund statt weißer Einzelfelder.

   Leitgedanke: Die Seite ist EINE Fläche — heller Himmel über einem
   Bauvorhaben. Abschnitte werden nicht mehr durch weiße Kästen getrennt,
   sondern durch LICHT: jeder Abschnitt bringt beim Heranscrollen seinen
   eigenen Lichtkegel mit. Karten gibt es nur noch dort, wo man wirklich
   klicken kann — und dann als hauchdünnes Glas, nicht als weißes Blatt.

   Dunkel ist ausschließlich die Unterseite „KI & Automatisierung".
   Diese Datei wird auf der Startseite ALS LETZTE Stilebene geladen
   (nach site.css und adapt.css) und ersetzt rhythmus.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Der Grund
   -------------------------------------------------------------------------- */
body.atmo {
  --himmel: #EDF7FF;         /* hellster Punkt, oben   */
  --himmel-2: #DCEDFF;       /* Mittelton              */
  --himmel-3: #CFE6FF;       /* tiefster Blauton, unten*/
  --glas: rgba(255, 255, 255, .6);
  --glas-hover: rgba(255, 255, 255, .88);
  --kante: rgba(40, 15, 145, .11);
  --kante-stark: rgba(40, 15, 145, .2);
  --schrift-leise: rgba(89, 98, 127, .9);

  background: var(--himmel-2);
  color: var(--ink);
}

/* Die Grundfläche liegt fest hinter allem und scrollt nicht mit.
   Dadurch wirkt die Seite wie EIN Raum, durch den man sich bewegt. */
.atmo-ground {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(118% 76% at 50% -12%, #FFFFFF 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(88% 58% at 84% 20%, rgba(82, 113, 255, .16), rgba(82, 113, 255, 0) 64%),
    radial-gradient(78% 54% at 10% 66%, rgba(39, 230, 255, .2), rgba(39, 230, 255, 0) 62%),
    linear-gradient(180deg, var(--himmel) 0%, var(--himmel-2) 48%, var(--himmel-3) 100%);
}
/* Zwei langsam wandernde Lichtfelder — sie geben dem Grund Tiefe,
   ohne dass ein einziges Bild geladen werden muss. */
.atmo-ground span {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
}
.atmo-ground span:nth-child(1) {
  width: 52vw; height: 52vw; left: -14vw; top: 6vh;
  background: radial-gradient(circle, rgba(82, 113, 255, .3), rgba(82, 113, 255, 0) 68%);
  animation: atmo-drift-a 34s ease-in-out infinite alternate;
}
.atmo-ground span:nth-child(2) {
  width: 44vw; height: 44vw; right: -10vw; top: 46vh;
  background: radial-gradient(circle, rgba(39, 230, 255, .32), rgba(39, 230, 255, 0) 68%);
  animation: atmo-drift-b 42s ease-in-out infinite alternate;
}
@keyframes atmo-drift-a { to { transform: translate3d(6vw, 10vh, 0) scale(1.12); } }
@keyframes atmo-drift-b { to { transform: translate3d(-7vw, -8vh, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .atmo-ground span { animation: none; }
}

/* Alles, was Inhalt ist, liegt über dem Grund. */
body.atmo > header,
body.atmo > section,
body.atmo > footer { position: relative; z-index: 2; }
body.atmo .grain { z-index: 3; opacity: .03; }

/* --------------------------------------------------------------------------
   2 · Hero — der Übergang in den Grund
   Kopfbereich, Schleier und Schrift bleiben wie im Grunddesign (hell).
   Neu ist nur: das Foto endet nicht an einer Kante, sondern löst sich nach
   unten vollständig in den Grund auf.
   -------------------------------------------------------------------------- */
body.atmo .hero { background: transparent; }
body.atmo .hero__bg {
  background-color: transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0) 100%);
}
/* Der Schleier endet unten offen statt in einer festen Farbe. */
body.atmo .hero__bg::after {
  background:
    linear-gradient(100deg, #EDF7FF 0%, rgba(237, 247, 255, .94) 26%, rgba(237, 247, 255, .66) 52%, rgba(237, 247, 255, .44) 100%),
    linear-gradient(180deg, rgba(237, 247, 255, .3) 0%, rgba(237, 247, 255, .06) 40%, rgba(237, 247, 255, .2) 100%);
}

/* --------------------------------------------------------------------------
   3 · Die Bühne — ein Abschnitt ist ein Lichtkegel, kein Kasten
   -------------------------------------------------------------------------- */
.stage { position: relative; padding: clamp(72px, 10vw, 138px) 0; }
.stage > .shell { position: relative; z-index: 2; }
.stage::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 0; translate: -50% 0;
  width: min(1360px, 108vw); height: min(78%, 760px);
  background: radial-gradient(52% 50% at 50% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%);
  opacity: .2; transition: opacity 1.4s var(--ease);
}
.stage.in::before { opacity: 1; }
/* Der kalte Kegel hat einen Cyan-Saum statt reinen Weißlichts */
.stage--kalt::before {
  background:
    radial-gradient(52% 50% at 50% 0%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 66%),
    radial-gradient(70% 60% at 50% 6%, rgba(39, 230, 255, .22), rgba(39, 230, 255, 0) 70%);
}

/* Haarlinie als Abschnittsgrenze — dünner als jede Kartenkante */
.stage + .stage::after {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 0; translate: -50% 0;
  width: min(1200px, calc(100% - var(--gutter) * 2)); height: 1px;
  background: linear-gradient(90deg, rgba(40, 15, 145, 0), rgba(40, 15, 145, .14) 22%, rgba(40, 15, 145, .14) 78%, rgba(40, 15, 145, 0));
}

/* Symmetrischer Abschnittskopf: Augenbraue, Zeile, Satz — immer mittig,
   immer gleiche Abstände. Das ist die Symmetrie, die vorher fehlte. */
.stage__head { max-width: 780px; margin-inline: auto; text-align: center; }
.stage__head .eyebrow { justify-content: center; }
.stage__head h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -.04em;
  line-height: 1.06; color: var(--navy);
}
.stage__head h2 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--royal), #0FB9CE);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stage__head p {
  margin: 20px auto 0; max-width: 58ch; color: var(--muted);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.62;
}
/* Zahl unter dem Kopf — ersetzt die frühere asymmetrische Zweiteilung */
.stage__fakt {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 26px;
  padding: 10px 20px 10px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .66); border: 1px solid var(--kante);
  box-shadow: 0 14px 34px -26px rgba(40, 15, 145, .6);
  font-size: .92rem; color: var(--muted);
}
.stage__fakt b {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-royal); color: #fff;
  font-size: 1rem; font-weight: 800;
}
.stage__fakt a { color: var(--royal); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   4 · Wertlinie — die Kurve liegt jetzt frei auf dem Grund
   -------------------------------------------------------------------------- */
body.atmo .valueline__head { text-align: center; margin-bottom: clamp(28px, 4vw, 46px); }
body.atmo .valueline__chart {
  background: none; border: 0; box-shadow: none; padding: 0; overflow: visible;
}
body.atmo .wertlinie .curve { filter: drop-shadow(0 4px 12px rgba(40, 15, 145, .22)); }

/* Kennzahlen: vier gleich breite Säulen, getrennt durch Haarlinien */
body.atmo .valueline__stats { border-top: 1px solid var(--kante); }
body.atmo .journey__step {
  background: rgba(255, 255, 255, .6); border-color: var(--kante);
  backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------------
   5 · Leistungs-Kacheln — Glas, kein Papier
   -------------------------------------------------------------------------- */
body.atmo .teaser-grid { margin-top: clamp(40px, 5vw, 62px); gap: clamp(14px, 1.6vw, 20px); }
body.atmo .teaser {
  background: var(--glas);
  border: 1px solid var(--kante); border-radius: 26px;
  box-shadow: 0 24px 54px -44px rgba(40, 15, 145, .8), inset 0 1px 0 rgba(255, 255, 255, .8);
  backdrop-filter: blur(8px);
}
body.atmo .teaser:hover {
  background: var(--glas-hover);
  border-color: rgba(82, 113, 255, .34);
  box-shadow: 0 40px 80px -44px rgba(40, 15, 145, .75), inset 0 1px 0 #fff;
}

/* --------------------------------------------------------------------------
   6 · Bank-Abschnitt — die dunkle Tafel entfällt, der Grund IST die Tafel
   -------------------------------------------------------------------------- */
body.atmo .bank__panel {
  background: none; box-shadow: none; padding: 0; border-radius: 0; overflow: visible;
  color: var(--ink);
}
body.atmo .bank__panel::before { display: none; }
body.atmo .bank__head { max-width: 780px; margin-inline: auto; text-align: center; }
body.atmo .bank__head .eyebrow { justify-content: center; }
body.atmo .bank__head h2 { color: var(--navy); }
body.atmo .bank__head .lead { color: var(--muted); margin-inline: auto; }
body.atmo .steps { margin-top: clamp(36px, 5vw, 58px); }
body.atmo .step {
  background: var(--glas); border-color: var(--kante); backdrop-filter: blur(8px);
  box-shadow: 0 24px 54px -44px rgba(40, 15, 145, .8), inset 0 1px 0 rgba(255, 255, 255, .8);
}
body.atmo .step:hover {
  background: var(--glas-hover); border-color: rgba(82, 113, 255, .34);
}
body.atmo .step__dot { background: var(--grad-royal); border-color: transparent; color: #fff; }
body.atmo .step__k { color: var(--light); }
body.atmo .step h3 { color: var(--navy); }
body.atmo .step p { color: var(--muted); }
body.atmo .step__metric { color: var(--royal); }
body.atmo .step__metric small { color: var(--muted); }
body.atmo .bank__cta {
  justify-content: center; text-align: center; border-top-color: var(--kante);
}
body.atmo .bank__cta p { color: var(--navy); }

/* --------------------------------------------------------------------------
   7 · Sponsoring — Foto und Text stehen frei, ohne weiße Karte
   -------------------------------------------------------------------------- */
body.atmo .spons__card {
  background: none; border: 0; box-shadow: none; padding: 0;
  gap: clamp(28px, 4.4vw, 64px); align-items: center;
}
body.atmo .spons__card::before,
body.atmo .spons__card::after { display: none; }
body.atmo .spons__media {
  border-radius: 26px;
  box-shadow: 0 50px 90px -50px rgba(40, 15, 145, .75), 0 0 0 1px var(--kante);
}

/* --------------------------------------------------------------------------
   8 · Fragen — Haarlinien-Liste statt Kartenstapel
   -------------------------------------------------------------------------- */
body.atmo .faq { max-width: 860px; margin-inline: auto; gap: 0; }
body.atmo .faq-item {
  background: none; border: 0; border-top: 1px solid var(--kante); border-radius: 0;
  box-shadow: none;
}
body.atmo .faq-item:last-child { border-bottom: 1px solid var(--kante); }
body.atmo .faq-item.open { box-shadow: none; background: rgba(255, 255, 255, .5); }
body.atmo .faq-q { padding: 26px 20px; }
body.atmo .faq-a p { padding: 0 20px 10px; }

/* Faktenzeile unter jeder Antwort */
body.atmo .fakten {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 20px 26px; list-style: none;
}
body.atmo .fakten li {
  font-size: .8rem; font-weight: 500; letter-spacing: .01em;
  color: var(--muted);
  background: rgba(255, 255, 255, .66); border: 1px solid var(--kante);
  padding: 6px 13px; border-radius: 999px;
}

/* --------------------------------------------------------------------------
   9 · Footer — der dunkle Abbinder bekommt einen weichen Anlauf,
   damit zwischen hellem Grund und Fußzeile keine harte Naht steht.
   -------------------------------------------------------------------------- */
body.atmo .footer { position: relative; padding-top: clamp(96px, 11vw, 140px); }
body.atmo .footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 130px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--himmel-3) 0%, rgba(207, 230, 255, 0) 100%);
  opacity: .5;
}
body.atmo .footer > .shell { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   10 · Bewegung beim Scrollen
   Wenige, dafür bewusste Effekte. Alles respektiert „weniger Bewegung".
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
    /* Kacheln und Karten steigen aus dem Grund auf */
    body.atmo .teaser,
    body.atmo .step,
    body.atmo .journey__step {
      animation: atmo-auf linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 62%;
    }
    /* Der Abschnittskopf kommt eine Spur später und ruhiger */
    body.atmo .stage__head,
    body.atmo .valueline__head,
    body.atmo .bank__head {
      animation: atmo-kopf linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 52%;
    }
    /* Das Sponsoring-Foto zieht beim Scrollen langsam nach */
    body.atmo .spons__media {
      animation: atmo-schub linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes atmo-auf {
  from { transform: translateY(34px) scale(.985); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes atmo-kopf {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes atmo-schub {
  from { transform: translateY(30px); }
  to   { transform: translateY(-30px); }
}

/* --------------------------------------------------------------------------
   11 · Kleine Bildschirme
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  body.atmo .spons__card { grid-template-columns: 1fr; }
  body.atmo .bank__cta { flex-direction: column; align-items: center; }

  /* Auf schmalen Geräten deckt der seitliche Schleier den ganzen sichtbaren
     Ausschnitt ab — das Gebäudefoto verschwindet dahinter. Deshalb hier ein
     senkrechter, leichterer Schleier: oben dicht für die Lesbarkeit der
     Navigation, in der Mitte offen, unten der Übergang in den Grund. */
  body.atmo .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(237, 247, 255, .96) 0%, rgba(237, 247, 255, .8) 24%,
                              rgba(237, 247, 255, .76) 60%, rgba(237, 247, 255, .84) 100%);
  }
}

/* --- Wertlinie auf dem Handy: Kurve raus, Zeitstrahl rein ------------------
   Die SVG-Kurve ist 1120 Einheiten breit. Unter 700 px schrumpft sie auf
   unter 100 px Höhe — die Beschriftungen wären nicht mehr lesbar. Statt sie
   klein zu quetschen, zeigen wir dieselbe Geschichte als senkrechten
   Zeitstrahl, der auf dem schmalen Bildschirm besser funktioniert. */
@media (max-width: 700px) {
  body.atmo .wl-plot { display: none; }
  body.atmo .valueline__stats { border-top: 0; padding-top: 0; }

  body.atmo .journey {
    display: grid; grid-template-columns: 1fr; gap: 0;
    position: relative; margin-top: 6px; padding-left: 30px;
  }
  /* die durchgehende Linie ersetzt die Kurve */
  body.atmo .journey::before {
    content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
    background: linear-gradient(180deg, var(--royal), var(--cyan));
    opacity: .7; border-radius: 2px;
  }
  body.atmo .journey__step {
    background: none; border: 0; border-radius: 0; padding: 0 0 26px;
    position: relative; backdrop-filter: none;
  }
  body.atmo .journey__step::before {
    content: ""; position: absolute; left: -30px; top: 5px;
    width: 16px; height: 16px; border-radius: 50%; background: var(--royal);
    border: 3px solid #EDF7FF; box-shadow: 0 0 0 3px rgba(82, 113, 255, .22);
    opacity: 1;
  }
  body.atmo .journey__step--win::before {
    background: #0FB9CE; box-shadow: 0 0 0 3px rgba(39, 230, 255, .3);
  }
  body.atmo .journey__step:last-child { padding-bottom: 0; }
}

@media (max-width: 640px) {
  .stage { padding: clamp(56px, 12vw, 88px) 0; }
  body.atmo .faq-q { padding: 20px 4px; }
  body.atmo .faq-a p { padding: 0 4px 10px; }
  body.atmo .fakten { padding: 0 4px 22px; }
}

/* Auf sehr schmalen Geräten (320 px) bricht die Zeile neben dem Etikett auf
   drei Zeilen um. Etikett und Zusatz stehen dann besser untereinander. */
@media (max-width: 360px) {
  body.atmo .hero__badge {
    flex-direction: column; align-items: flex-start; gap: 8px;
    border-radius: 18px; padding: 12px 16px;
  }
}