/* ============================================================
   GROWIT — Startseite v3
   Aufbau von oben nach unten:
   1) Bild-Einstieg mit kurzer Erklaerung
   2) Referenz-Geschichten unserer Kunden
   3) Sponsoring-Band (Bild in voller Breite, nichts abgeschnitten)
   4) Management-Cockpit als vollbreites Band mit Farbverlauf
   Laedt nach grund.css.
   Regel fuer die ganze Seite: dunkel gibt es nur als vollbreites
   Band, nie als Kaestchen auf hellem Grund.
   ============================================================ */

:root {
  --st-ease: cubic-bezier(.32, .72, 0, 1);
}

/* ============================================================
   1 · Bild-Einstieg
   ============================================================ */
.st-einstieg { padding: clamp(56px, 7vw, 104px) 0 clamp(20px, 3vw, 40px); }
.st-einstieg__kopf { max-width: 780px; }
.st-einstieg__kopf h2 {
  margin: 0; color: var(--navy, #280F91);
  font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700;
  line-height: 1.08; letter-spacing: -.03em;
}
.st-einstieg__kopf p {
  margin: 20px 0 0; color: var(--muted, #4F5872); font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.76; max-width: 66ch;
}

/* Drei Bilder nebeneinander. Kein Rahmen, keine Kachel, keine Auswahl —
   nur das Bild und eine Zeile darunter. */
.st-bilder {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px); margin-top: clamp(34px, 4.5vw, 56px);
}
.st-bild figure { margin: 0; }
.st-bild__rahmen {
  border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: 0 30px 66px -46px rgba(40, 15, 145, .5);
}
.st-bild__rahmen img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--st-ease);
}
.st-bild:hover .st-bild__rahmen img { transform: scale(1.04); }
.st-bild figcaption {
  margin-top: 16px; color: var(--ink, #141A33);
  font-size: .98rem; font-weight: 500; line-height: 1.5;
}
.st-bild figcaption span {
  display: block; margin-top: 4px; color: var(--muted, #4F5872);
  font-size: .89rem; font-weight: 300;
}

/* ============================================================
   2 · Referenz-Geschichten
   ============================================================ */
.st-refs { padding: clamp(56px, 7vw, 100px) 0 clamp(30px, 4vw, 60px); }
.st-refs__kopf { max-width: 720px; margin-bottom: clamp(30px, 4vw, 52px); }
.st-refs__kopf h2 {
  margin: 0; color: var(--navy, #280F91);
  font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700;
  line-height: 1.08; letter-spacing: -.03em;
}
.st-refs__kopf p { margin: 18px 0 0; color: var(--muted, #4F5872); font-weight: 300; line-height: 1.74; max-width: 60ch; }

.st-story {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(28px, 4.4vw, 72px); align-items: center;
  padding: clamp(38px, 5vw, 70px) 0;
  border-top: 1px solid rgba(40, 15, 145, .1);
}
.st-story:first-of-type { border-top: 0; padding-top: 0; }
.st-story--kehr .st-story__bild { order: 2; }

.st-story__bild {
  position: relative; border-radius: 26px; overflow: hidden;
  aspect-ratio: 16 / 11;
  box-shadow: 0 40px 88px -54px rgba(40, 15, 145, .55);
}
.st-story__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--st-ease); }
.st-story__bild:hover img { transform: scale(1.035); }

.st-story__ort {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--royal-text, #3348D9); margin-bottom: 14px;
}
.st-story h3 {
  margin: 0; color: var(--navy, #280F91);
  font-size: clamp(1.5rem, 2.7vw, 2.25rem); font-weight: 700;
  line-height: 1.12; letter-spacing: -.025em;
}
.st-story__text { margin: 16px 0 0; color: var(--muted, #4F5872); font-weight: 300; line-height: 1.76; font-size: 1rem; max-width: 54ch; }

/* Was gemacht wurde — als Zeilen mit Haarlinie, nicht als Feld */
.st-story__was { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(40, 15, 145, .08); }
.st-story__was li {
  position: relative; padding: 10px 0 10px 20px;
  border-bottom: 1px solid rgba(40, 15, 145, .08);
  font-size: .93rem; font-weight: 400; color: var(--ink, #141A33);
}
.st-story__was li::before {
  content: ""; position: absolute; left: 0; top: 1.28em;
  width: 9px; height: 1.6px; background: var(--royal, #5271FF);
}

/* Zitat: keine Sprechblase, kein Kasten — eine senkrechte Linie und Schrift */
.st-zitat { margin: 26px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--royal, #5271FF); }
.st-zitat p {
  margin: 0; color: var(--navy, #280F91);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 500;
  line-height: 1.6; letter-spacing: -.01em;
}
.st-zitat footer { margin-top: 12px; color: var(--muted, #4F5872); font-size: .88rem; font-weight: 300; }
.st-zitat--offen p { color: var(--light, #5C6580); font-weight: 400; font-style: italic; }

.st-story__mehr {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
  color: var(--royal-text, #3348D9); font-weight: 600; font-size: .95rem;
}
.st-story__mehr svg { width: 17px; height: 17px; transition: transform .45s var(--st-ease); }
.st-story__mehr:hover svg { transform: translateX(5px); }

/* ============================================================
   3 · Sponsoring — Bild in voller Breite, nichts abgeschnitten
   ============================================================ */
.st-vfb { padding: clamp(40px, 5vw, 74px) 0 clamp(56px, 7vw, 100px); }
.st-vfb__breit { width: min(100% - 40px, 1360px); margin-inline: auto; }
.st-vfb__bild {
  border-radius: 26px; overflow: hidden;
  aspect-ratio: 1600 / 1066;   /* Originalformat — es wird nichts beschnitten */
  box-shadow: 0 44px 96px -56px rgba(40, 15, 145, .5);
}
.st-vfb__bild img { width: 100%; height: 100%; object-fit: cover; }
.st-vfb__unten {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-top: 24px;
}
.st-vfb__unten h3 { margin: 8px 0 0; color: var(--navy, #280F91); font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; }
.st-vfb__unten p { margin: 10px 0 0; color: var(--muted, #4F5872); font-weight: 300; line-height: 1.72; max-width: 56ch; }

/* ============================================================
   4 · Management-Cockpit — vollbreites Band mit Farbverlauf
   ============================================================ */
.st-cockpit {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(72px, 9vw, 128px) 0;
  background:
    radial-gradient(56% 68% at 84% 6%, rgba(39, 230, 255, .17), rgba(39, 230, 255, 0) 62%),
    linear-gradient(132deg, #150A52 0%, #280F91 40%, #3348D9 78%, #2F5FC4 100%);
}
.st-cockpit::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(74% 84% at 44% 18%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(74% 84% at 44% 18%, #000 0%, transparent 78%);
}
.st-cockpit > .shell { position: relative; z-index: 2; }
.st-cockpit__grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(30px, 4.5vw, 66px); align-items: center;
}
.st-cockpit__mark {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: #8FE9F8; margin-bottom: 18px;
}
.st-cockpit h2 {
  margin: 0; color: #fff; font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.03em; max-width: 18ch;
}
.st-cockpit__text { margin: 20px 0 0; color: rgba(255,255,255,.82); font-weight: 300; line-height: 1.76; max-width: 52ch; }
.st-cockpit__was {
  margin: 26px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 26px;
}
.st-cockpit__was li { position: relative; padding-left: 24px; color: rgba(255,255,255,.9); font-size: .93rem; font-weight: 300; line-height: 1.5; }
.st-cockpit__was li::before {
  content: ""; position: absolute; left: 0; top: .52em; width: 14px; height: 14px;
  border-radius: 50%; background: rgba(39,230,255,.14); box-shadow: inset 0 0 0 1.4px #27E6FF;
}
.st-cockpit__was li::after {
  content: ""; position: absolute; left: 3.9px; top: calc(.52em + 4.2px);
  width: 6.4px; height: 3.4px; border-left: 1.5px solid #27E6FF; border-bottom: 1.5px solid #27E6FF;
  transform: rotate(-45deg);
}
.st-cockpit__tun { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.st-cockpit__tun .btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.st-cockpit__tun .btn--klar {
  background: transparent; color: #fff; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
  transition: background .5s var(--st-ease), box-shadow .5s var(--st-ease), transform .5s var(--st-ease);
}
.st-cockpit__tun .btn--klar:hover {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .66);
  transform: translateY(-2px);
}

/* Helle Programmansicht im dunklen Band — hier ist hell der Kontrast */
.st-app {
  border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 50px 110px -56px rgba(0, 0, 0, .6);
}
.st-app__leiste {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; background: #F6F9FF; border-bottom: 1px solid rgba(40,15,145,.08);
}
.st-app__leiste i { width: 8px; height: 8px; border-radius: 50%; background: rgba(40,15,145,.16); }
.st-app__leiste span { margin-left: 8px; color: var(--muted, #4F5872); font-size: .74rem; letter-spacing: .03em; }
.st-app__inhalt { padding: 18px; }
.st-app__zeile {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 12px; background: #F4F7FF;
  border: 1px solid rgba(40,15,145,.06); margin-bottom: 9px;
}
.st-app__zeile:last-child { margin-bottom: 0; }
.st-app__zeile b { flex: 0 0 auto; color: var(--navy, #280F91); font-size: .8rem; font-weight: 500; }
.st-app__frei { flex: 1; }
.st-app__zeile em {
  font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(82,113,255,.12); color: var(--royal-text, #3348D9);
}
.st-app__zeile em.wartet { background: rgba(40,15,145,.06); color: var(--muted, #4F5872); }
.st-app__balken { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(40,15,145,.09); overflow: hidden; }
.st-app__balken i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #5271FF, #27E6FF); width: var(--w, 60%); }

/* ============================================================
   Bildkante
   ------------------------------------------------------------
   Helle Bilder — Himmel, weisse Fassaden, Innenaufnahmen — laufen
   an der Rundung ins Weiss der Seite aus. Dann fehlt dem Bild die
   Begrenzung und es sieht aus, als sei es nicht fertig geladen.
   Eine Haarlinie schliesst es ab.

   Die Linie liegt auf einer eigenen Ebene, nicht als inset-Schatten
   am Rahmen selbst: der Rahmen hat overflow:hidden und das Bild
   fuellt ihn vollstaendig aus, ein inset-Schatten laege darunter
   und waere nicht zu sehen.

   border-radius: inherit uebernimmt automatisch die kleineren
   Rundungen aus dem Responsive-Block weiter unten.
   ============================================================ */
.st-bild__rahmen,
.st-vfb__bild { position: relative; }

.st-bild__rahmen::after,
.st-story__bild::after,
.st-vfb__bild::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(40, 15, 145, .09);
}

/* ============================================================
   Wertlinie · anwählbare Meilensteine
   ------------------------------------------------------------
   Die vier Schritte unter der Kurve sind Bedienelemente. Wer
   einen berührt oder anklickt, sieht sein Detail-Fenster direkt
   am Punkt der Kurve. Die übrigen Schritte treten leicht zurück,
   damit klar ist, worauf die Grafik gerade zeigt.
   ============================================================ */
.journey__step[data-schritt] {
  cursor: pointer;
  border-radius: var(--r-sm, 12px);
  transition: opacity .35s var(--st-ease, ease);
}
.journey:hover .journey__step[data-schritt]:not(:hover):not(.akt) { opacity: .62; }
.journey__step[data-schritt]:focus-visible {
  outline: 2px solid var(--royal, #5271FF);
  outline-offset: 5px;
}
.journey__step.akt { opacity: 1; }
.journey__step.akt h4 { color: var(--royal-text, #3348D9); }
.journey__step--win.akt h4 { color: var(--cyan-text, #0FB9CE); }

/* Nach dem Aufbau der Grafik reagieren Punkte und Lote sofort,
   ohne die Verzögerungen ihres ersten Auftritts. */
.valueline__chart.wl-fertig .wertlinie .tick,
.valueline__chart.wl-fertig .wertlinie .grid-line {
  transition-delay: 0s;
  transition-duration: .4s;
}
.wertlinie[data-akt="1"] .tick--1,
.wertlinie[data-akt="2"] .tick--2,
.wertlinie[data-akt="3"] .tick--3,
.wertlinie[data-akt="4"] .tick--4 { transform: scale(1.5); }
.wertlinie .grid-line.drop { transition: stroke .35s ease, opacity .9s var(--ease, ease); }
.wertlinie[data-akt="1"] .grid-line:nth-of-type(6),
.wertlinie[data-akt="2"] .grid-line:nth-of-type(7),
.wertlinie[data-akt="3"] .grid-line:nth-of-type(8),
.wertlinie[data-akt="4"] .grid-line:nth-of-type(9) { stroke: rgba(82, 113, 255, .75); }

/* Das Detail-Fenster am Punkt der Kurve */
.wl-fenster {
  position: absolute; z-index: 3; pointer-events: none;
  transform: translate(-50%, calc(-100% - 18px));
  background: #fff;
  border: 1px solid rgba(40, 15, 145, .1);
  border-radius: var(--r-sm, 12px);
  box-shadow: 0 24px 48px -22px rgba(40, 15, 145, .4);
  padding: 11px 15px; min-width: 190px; max-width: 250px;
  animation: wl-fenster-auf .3s var(--st-ease, ease);
}
.wl-fenster[data-lage="unten"] { transform: translate(-82%, 24px); }
.wl-fenster b {
  display: block; color: var(--navy, #280F91);
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
}
.wl-fenster span {
  display: block; margin-top: 3px; color: var(--muted, #4F5872);
  font-size: .74rem; font-weight: 300; line-height: 1.45;
}
@keyframes wl-fenster-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Kennzeichnung unter der Grafik */
.wl-schema {
  margin: 18px 0 0; text-align: center;
  color: var(--muted, #4F5872); font-size: .74rem; font-weight: 300;
  letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  .wl-fenster { animation: none; }
  .journey__step[data-schritt],
  .wertlinie .tick { transition: none; }
}


/* ============================================================
   Cockpit-Teaser · bedienbare Beispielansicht
   ------------------------------------------------------------
   Drei Bereiche hinter drei Reitern. Die Kopfleiste trägt die
   Kennzeichnung „Beispieldaten“, damit niemand die Werte für
   echte Zahlen hält.
   ============================================================ */
.st-app__demo {
  margin-left: auto; font-style: normal;
  font-size: .6rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted, #4F5872); background: rgba(40, 15, 145, .07);
  padding: 3px 8px; border-radius: 6px;
}
.st-app__tabs {
  display: flex; gap: 6px;
  padding: 12px 16px 0; background: #fff;
}
.st-app__tab {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  font-size: .78rem; font-weight: 500; color: var(--muted, #4F5872);
  background: transparent; padding: 7px 14px; border-radius: 999px;
  transition: background .3s var(--st-ease, ease), color .3s var(--st-ease, ease);
}
.st-app__tab:hover:not(.ist-an) { background: rgba(40, 15, 145, .05); color: var(--navy, #280F91); }
.st-app__tab.ist-an { background: rgba(82, 113, 255, .12); color: var(--royal-text, #3348D9); font-weight: 600; }
.st-app__tab:focus-visible { outline: 2px solid var(--royal, #5271FF); outline-offset: 2px; }

.st-app--live .st-app__inhalt { min-height: 268px; }
.st-app__panel { display: none; }
.st-app__panel.ist-an { display: block; animation: st-panel-auf .35s var(--st-ease, ease); }
@keyframes st-panel-auf {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Zahlen neben den Balken */
.st-app__zeile em.zahl {
  background: transparent; color: var(--muted, #4F5872);
  font-variant-numeric: tabular-nums; padding: 0; min-width: 38px; text-align: right;
}
.st-app__zeile em.fertig { background: rgba(39, 230, 255, .16); color: #0F8DA0; }
.st-app__balken i { transition: width .8s var(--st-ease, ease); }

/* Konto-Bereich */
.st-konto__kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 6px 13px;
}
.st-konto__kopf b { color: var(--navy, #280F91); font-size: .8rem; font-weight: 500; }
.st-konto__kopf strong {
  color: var(--navy, #280F91); font-size: 1.08rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  transition: color .3s ease;
}
.st-konto__kopf strong.tickt { animation: st-konto-tick .6s var(--st-ease, ease); }
@keyframes st-konto-tick {
  0%   { color: var(--royal-text, #3348D9); }
  100% { color: var(--navy, #280F91); }
}
.st-konto__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.st-konto__liste li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 14px; border-radius: var(--r-sm, 12px);
  background: #F4F7FF; border: 1px solid rgba(40, 15, 145, .06);
  font-size: .8rem;
  transition: opacity .5s var(--st-ease, ease), transform .5s var(--st-ease, ease);
}
.st-konto__liste li span:first-child { color: var(--navy, #280F91); font-weight: 500; }
.st-konto__liste li span:last-child {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--muted, #4F5872); white-space: nowrap;
}
.st-konto__liste li.haben span:last-child { color: var(--royal-text, #3348D9); }
.st-konto__liste li.neu { opacity: 0; transform: translateY(-8px); }

@media (prefers-reduced-motion: reduce) {
  .st-app__panel.ist-an { animation: none; }
  .st-konto__liste li { transition: none; }
  .st-konto__kopf strong.tickt { animation: none; }
}


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .st-story { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .st-story--kehr .st-story__bild { order: 0; }
  .st-cockpit__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .st-bilder { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .st-bild__rahmen { aspect-ratio: 16 / 10; }
  .st-cockpit__was { grid-template-columns: minmax(0, 1fr); }
  .st-story__bild { aspect-ratio: 16 / 10; border-radius: 18px; }
  .st-vfb__bild { border-radius: 18px; }
  .wl-fenster { display: none; } /* auf dem Handy steht alles im Zeitstrahl darunter */
  .wl-schema__zusatz { display: none; } /* ohne Plot gibt es nichts anzuwählen */
  .st-app__zeile b { font-size: .74rem; }
}