/* Tokens liegen in css/tokens.css (wird vor dieser Datei geladen). */
/* ==== agb.Cx1DP78z.css ==== */
/* Inter Tight – nur der Latin-Subset liegt lokal (deckt Deutsch komplett ab).
   Weitere Subsets bei Bedarf von fontsource holen und hier ergänzen. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/inter-tight-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  max-width: 100vw;
  overflow-x: clip; /* nichts darf die Seite horizontal aufziehen - gilt fuer alle Seiten */
}

body {
  max-width: 100vw;
  overflow-x: clip;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--text-basis);
  letter-spacing: var(--ls-klein);
  line-height: var(--lh-basis);
  color: var(--text-farbe);
  background-color: var(--flaeche);
}

/* Lenis (Watte-Scrolling) – empfohlene Basis-Styles */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Inter Tight gibt es auf der Website nur im Regular-Schnitt */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  letter-spacing: var(--ls-gross);
  margin: 0 0 0.4em;
}

p {
  margin-top: 0;
  margin-bottom: 0.7em;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
}

/* ---------- Reveal-System ----------
   Elemente mit [data-reveal] blenden beim Eintritt in den Viewport weich ein
   (Script in BaseLayout.astro). Gated über html.reveal-aktiv, das der
   Head-Script vor dem ersten Paint setzt – ohne JS/bei reduzierter Bewegung
   bleibt alles sichtbar. .reveal-fade = nur Deckkraft, kein Versatz. */
html.reveal-aktiv [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-wattig) var(--reveal-delay, 0ms),
              transform var(--transition-wattig) var(--reveal-delay, 0ms);
}
/* Koepfe zuerst: in Reveal-Gruppen bekommt der Inhalt einen Grundversatz
   (2x stagger), Koepfe starten sofort - inline gesetzte Delays gewinnen */
[data-reveal-group] [data-reveal] { --reveal-delay: calc(var(--stagger) * 2); }
[data-reveal-group] .schmal-headbereich,
[data-reveal-group] .kunden-links,
[data-reveal-group] .schmal-heading,
[data-reveal-group] .heading-gross { --reveal-delay: 0ms; }


html.reveal-aktiv [data-reveal].reveal-fade {
  transform: none;
}

html.reveal-aktiv [data-reveal].ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* ---------- Rahmen, der sich selbst zeichnet ----------
   Markup: <svg class="rahmen-svg" aria-hidden="true"><rect pathLength="100" /></svg>
   im position:relative-Feld; zeichnet, sobald das Feld .ist-sichtbar ist. */
.rahmen-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.rahmen-svg rect {
  x: 0.5px;
  y: 0.5px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  rx: var(--rahmen-radius, var(--border-radius-big));
  fill: none;
  stroke: rgba(var(--hair-rgb), var(--hair-a));
  stroke-width: var(--hair-w);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--dur-zeichnen) var(--ease) var(--delay-zeichnen);
}

.ist-sichtbar .rahmen-svg rect,
.ist-sichtbar.rahmen-svg rect {
  stroke-dashoffset: 0;
}

/* Trennlinie in einem gezeichneten Feld: zieht nach dem Rahmen auf */
.trenner-zeichnen {
  border-color: transparent;
  transition: border-color var(--dur-wattig) var(--ease) var(--dur-traege);
}

.ist-sichtbar .trenner-zeichnen {
  border-color: rgba(var(--hair-rgb), var(--hair-a));
}

/* ---------- Sektions-Grundgerüst ---------- */

/* Die meisten Sections nehmen ~85vh ein und zentrieren ihren Inhalt –
   viel Weißraum, ruhiger Rhythmus. Ausnahmen: Hero (100svh), Banner. */

.section-breit {
  width: 100vw;
  margin-bottom: var(--section-abstand);
  padding: var(--seiten-rand-klein);
}

.section-breit.hero {
  height: 100svh;
  margin-bottom: 50px;
  display: flex;
  flex-flow: column;
}
/* Hero-Feld: Headline liegt unten im Gradient-Feld und spannt fast die volle Breite */
.hero:not(.hero-unterseite) .section-breit-padding, .section-breit.hero.hero-unterseite.ms-hero .section-breit-padding { height: auto; flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
/* Music-Service-Hero: startet vollflaechig, zieht sich beim Scrollen auf den
   Rand zusammen - --mh-p (0..1) setzt js/global.js scroll-gekoppelt */
.section-breit.hero.hero-unterseite.ms-hero { padding: calc(var(--mh-p, 1) * var(--seiten-rand-klein)); }
.ms-hero .section-breit-padding { clip-path: inset(0 round calc(var(--mh-p, 1) * var(--border-radius-big))); }
.ms-hero .hero-zeile { overflow: hidden; max-height: calc(var(--mh-p, 1) * 120px); opacity: var(--mh-p, 1); margin-top: calc(var(--mh-p, 1) * var(--raum-m)); padding-top: calc(var(--mh-p, 1) * var(--raum-m)); padding-bottom: calc(var(--mh-p, 1) * var(--raum-m)); }
.ms-hero .hero-heading { font-size: 15.8vw; }
/* Zeile unter dem Feld: Subline links, Buttons rechts - gleiche Breite wie das Feld */
.hero-inhalt { width: 100%; display: flex; flex-flow: column; }
.hero-zeile { width: 100%; margin: var(--raum-l) 0 0; justify-content: space-between; align-items: center; gap: var(--raum-xl); padding: 0; display: flex; }

/* Unterseiten-Heros behalten den nahtlosen Anschluss */
.section-breit.hero.hero-unterseite { margin-bottom: 0; }

/* Unterseiten-Hero: Bildkarte mit zentriertem Seitentitel (Figma) */
.section-breit.hero.hero-unterseite {
  height: clamp(460px, 64vh, 660px);
  margin-bottom: var(--section-abstand);
}

.hero-unterseite .section-breit-padding {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-bild {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-unterseite-titel {
  color: var(--white);
  font-size: var(--heading-l); letter-spacing: var(--ls-gross);
  line-height: var(--lh-heading-l);
  text-align: center;
  margin: 0;
}

.section-breit.img-banner {
  height: clamp(400px, 42vw, 780px);
}

.section-breit-padding {
  width: 100%;
  height: 100%;
  max-width: var(--max-width-breit);
  clip-path: inset(0 round var(--border-radius-big));
  border-radius: var(--border-radius-big);
  flex-flow: row;
  margin-left: auto;
  margin-right: auto;
  padding: var(--raum-m);
  position: relative;
  overflow: hidden;
}

.section-breit-padding.img-banner {
  gap: var(--raum-2xl);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.section-schmal {
  width: 100vw;
  /* Kein vh-Mindestmass: sonst entsteht je nach Inhaltslaenge unterschiedlich
     viel Leerraum in der Section und die SICHTBAREN Abstaende werden ungleich.
     Den Rhythmus macht allein --section-abstand. */
  min-height: 0;
  margin-bottom: var(--section-abstand);
  padding-left: var(--seiten-rand-gross);
  padding-right: var(--seiten-rand-gross);
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.schmal-content-wrapper {
  width: 100%;
  max-width: var(--max-width-schmal);
  margin-left: auto;
  margin-right: auto;
}

/* Kopfbereich schmäler als die Section (zentriert); längere Headings
   brechen dadurch natürlich zweizeilig um */
.schmal-headbereich {
  gap: var(--raum-xl);
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 0 auto var(--abstand-kopf);
  display: flex;
}

/* Längere Titel brechen wie im Figma zweizeilig um (Breitenbegrenzung in ch) */
.schmal-heading {
  margin-bottom: 0;
  max-width: 20ch;
  font-size: var(--heading-m); letter-spacing: var(--ls-gross);
  line-height: var(--lh-heading-m);
}

.heading-gross {
  width: 80%;
  color: var(--white);
  text-align: center;
  margin-bottom: 0;
  font-size: var(--heading-l); letter-spacing: var(--ls-gross);
  line-height: var(--lh-heading-l);
}

.heading-gross.linksbuendig {
  text-align: left;
}

.paragraph-klein {
  width: 60%;
  color: var(--white);
  margin-bottom: 0;
  /* Fliesstext geht nie unter --text-basis (Lesbarkeit) */
  font-size: var(--text-basis);
  letter-spacing: var(--ls-klein);
  line-height: var(--lh-basis);
}

.paragraph-klein.dark {
  width: 100%;
  color: var(--text-60);
}

/* Kurzer Begleittext rechts neben dem Section-Heading (Kopfbereich) */
.kopf-text.breit { max-width: 50ch; text-wrap: balance; }
.kopf-text {
  color: var(--text-60);
  font-size: var(--text-basis);
  letter-spacing: var(--ls-klein);
  line-height: var(--lh-basis);
  max-width: 38ch;
  margin: 0;
  flex: none;
}

/* ---------- Felder ---------- */

/* Feld auf der Fläche (hell: weiß, dunkel: mittelblau) */
.feld {
  background-color: var(--feld);
  border-radius: var(--border-radius-big);
}

/* Feld nur mit Hairline-Rahmen, ohne Füllung */
.feld-rahmen {
  border: var(--hairline);
  border-radius: var(--border-radius-big);
}

/* Helles Feld, das auch auf dunklen Seiten hell bleibt */
.feld-hell {
  background-color: var(--feld-hell);
  color: var(--dunkelblau);
  border-radius: var(--border-radius-big);
}

/* ---------- Buttons ---------- */

.button-feld {
  border: calc(var(--hair-w) * 0.5) solid var(--white);
  color: var(--white);
  border-radius: var(--border-radius-klein);
  padding: var(--button-padding);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: var(--raum-s);
  cursor: pointer;
  transition: background-color var(--transition-standard), color var(--transition-standard), opacity var(--transition-standard);
}

.button-feld:hover {
  background-color: var(--white-40);
}

.button-feld.filled {
  background-color: var(--white);
  color: var(--dunkelblau);
  /* gleiche Geometrie wie der offene Button - die Kante liegt nur unsichtbar auf der Flaeche */
  border-color: var(--white);
}

.button-feld.filled:hover {
  background-color: var(--white);
  opacity: 0.88;
}

.button-textblock {
  font-size: var(--text-gross);
  letter-spacing: var(--ls-mittel);
  line-height: var(--lh-knopf);
}

.button-underlined {
  gap: var(--raum-s);
  color: var(--text-farbe);
  font-size: var(--text-gross); line-height: var(--lh-gross);
  letter-spacing: var(--ls-mittel);
  justify-content: flex-start;
  align-items: flex-end;
  padding-bottom: var(--raum-s);
  display: flex;
  position: relative;
}

.button-underlined .button-textblock {
  font-size: inherit;
}

/* Die Linie läuft bei Hover nach rechts auf 0 zusammen und baut sich
   beim Verlassen von links her wieder auf volle Breite auf */
.button-underlined::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: currentColor;
  opacity: var(--linie-deckkraft);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--transition-standard);
}

.button-underlined:hover::after {
  transform: scaleX(0);
  transform-origin: right;
}

.button-underlined.blue {
  color: var(--text-farbe);
  flex: none;
}

/* Gefüllter Button in Textfarbe (hell: dunkelblau, dunkel: weiß) */
.button-feld.invers {
  background-color: var(--text-farbe);
  border: 0;
  color: var(--text-invers);
  font-family: var(--font-family-base);
}

.button-feld.invers:hover {
  background-color: var(--text-farbe);
  opacity: 0.9;
}

/* ---------- Player (Playbar wie im SpotTool) ----------
   Markup: <div class="player" data-player data-dauer="9" [data-src="…mp3"]>
     <button class="play-btn">…</button>
     <div class="slider"><div class="slider__track"></div><div class="slider__progress"></div><div class="slider__thumb"></div></div>
     <span class="player-zeit"></span>
   </div>  → Logik in components/Player.astro */
.player {
  display: flex;
  align-items: center;
  gap: var(--raum-s);
  width: 100%;
}

.play-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -6px;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-klein);
  background: none;
  color: var(--text-farbe);
  cursor: pointer;
  transition: background-color var(--transition-standard);
}

.play-btn:hover {
  background-color: var(--hover-tint);
}

.play-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.play-btn .ikon-pause { display: none; }
.player.spielt .play-btn .ikon-play { display: none; }
.player.spielt .play-btn .ikon-pause { display: block; }

.player .slider {
  position: relative;
  flex: 1;
  height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.slider__track {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--track-rest);
}

.slider__progress {
  position: absolute;
  height: 1px;
  width: 0;
  background-color: var(--track-played);
}

.slider__thumb {
  position: absolute;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: var(--border-radius-klein);
  background-color: var(--thumb);
  transform: translateX(-50%);
}

.player-zeit {
  flex: none;
  min-width: 5ch;
  font-size: var(--text-klein); line-height: var(--lh-klein);
  letter-spacing: var(--ls-klein);
  color: var(--text-60);
}

/* ---------- Slider-Pfeile (Mechanik in components/SliderMechanik.astro) ---------- */

.slider_arrows {
  gap: var(--raum-xs);
  display: flex;
  flex: none;
}

.slider_arrow-prev,
.slider_arrow-next {
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-klein);
  background-color: var(--feld-hell);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-standard);
}

.slider_arrows .pfeil-icon { display: inline-block; width: 11px; height: auto; flex: none; align-self: center; fill: currentColor; }

/* Basis-Pfeil zeigt nach rechts oben → horizontal drehen */
.slider_arrow-next .pfeil-icon { transform: rotate(45deg); }
.slider_arrow-prev .pfeil-icon { transform: rotate(-135deg); }

/* ---------- Pfeil (↗) ---------- */

.pfeil {
  align-self: center;
  width: 13px;
}

/* Pfeil als Inline-SVG (<use href="#i-pfeil">), Farbe ueber currentColor */
.pfeil-icon {
  display: inline-block;
  width: 11px;
  height: auto;
  flex: none;
  align-self: end;
  fill: currentColor;
}

/* Hover: Pfeil baut sich kurz ab (fliegt nach rechts oben raus) und
   von links unten wieder auf – ein Takt, dann Ruhe */
@keyframes pfeil-wechsel {
  0%   { transform: translate(0, 0); opacity: 1; }
  45%  { transform: translate(10px, -10px); opacity: 0; }
  50%  { transform: translate(-10px, 10px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

.button-feld:hover .pfeil,
.button-feld:hover .pfeil-icon,
.button-underlined:hover .pfeil,
.button-underlined:hover .pfeil-icon,
a:hover > .pfeil-icon {
  animation: pfeil-wechsel var(--dur-langsam) var(--ease);
}

/* ---------- Responsive Grundanpassungen ---------- */

@media screen and (max-width: 991px) {
  .section-schmal {
    min-height: 0;
  }
}

@media screen and (max-width: 767px) {
  .schmal-headbereich {
    flex-flow: column;
    align-items: flex-start;
    gap: var(--raum-m);
  }

  .heading-gross {
    width: 92%;
  }
}
/* ---------- Webflow-Basis-Styles (aus webflow.css, Original-Reihenfolge) ---------- */

  .w-nav {
    z-index: 1000;
    position: relative;
  }

  .w-nav:before,
  .w-nav:after {
    content: ' ';
    grid-area: 1 / 1 / 2 / 2;
    display: table;
  }

  .w-nav:after {
    clear: both;
  }

  .w-nav-brand {
    float: left;
    color: var(--text-farbe);
    text-decoration: none;
    position: relative;
  }

  .w-nav-link {
    vertical-align: top;
    color: var(--text-farbe);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding: var(--raum-m);
    text-decoration: none;
    display: inline-block;
    position: relative;
  }

  .w-nav-menu {
    float: right;
    position: relative;
  }

  .w-embed:before,
  .w-embed:after {
    content: ' ';
    grid-area: 1 / 1 / 2 / 2;
    display: table;
  }

  .w-embed:after {
    clear: both;
  }

  /* ---------- Designer-Styles (aus webflow.css, Original-Werte) ---------- */

  .header {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: var(--nav-bg);
    border: var(--nav-border-w) solid var(--nav-border);
    isolation: isolate; /* eigener Stacking Context für die Fade-Layer */
    border-radius: var(--border-radius-big);
    width: 70vw;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    inset: 30px 0% auto;
    box-shadow: var(--shadow);
  }

  /* Standalone-Header (nur Home + Kontakt): schmalere Pille, Mobil unberuehrt */
  @media screen and (min-width: 992px) {
    .header.nav-schlank { width: 44vw; }
  }

  .logo,
  .logo-wrapper {
    width: 170px;
  }

  .nav-menu {
    grid-column-gap: var(--raum-xl);
    grid-row-gap: var(--raum-xl);
    display: flex;
  }

  .div-block-83 {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-left: var(--raum-l);
    padding-right: var(--raum-l);
    display: flex;
  }

  .nav-link {
    padding: var(--raum-xs) 0;
    font-size: var(--text-gross);
    letter-spacing: var(--ls-mittel);
    font-weight: 400;
    line-height: var(--lh-gross);
  }

  .nav-link.w--current {
    color: var(--white);
  }

  .w-nav-menu { position: relative; }

  .w-nav-brand { color: var(--nav-logo); }
  .w-nav-brand svg { fill: currentColor; }

  /* Nur beim Theme-Wechsel: eigener Background + Blur aus, Layer übernehmen */
  html.nav-transition .w-nav {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-fade {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
  }

  .w-nav-menu a {
    color: var(--nav-link);
    position: relative;
    z-index: 1;
  }

  .w-nav-menu a.w--current,
  .w-nav-menu a.w--current:hover {
    color: var(--nav-link-active);
    opacity: 1;
  }

  .nav-pill {
    position: absolute;
    top: 0; left: 0;
    border-radius: var(--border-radius-klein);
    background: var(--pill-bg);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
  }

  /* Overlay in alter Seitenfarbe – wird per Opacity ausgeblendet (Theme-Wechsel) */
  .page-fade {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  /* Flächiger Hover auf nicht-aktiven Menüpunkten (wie im Spottool) */
  .nav-link:not(.w--current)::before {
    content: '';
    position: absolute;
    inset: -2px -12px;
    border-radius: var(--border-radius-klein);
    background-color: transparent;
    z-index: -1;
    transition: background-color var(--transition-standard);
  }

  .nav-link:not(.w--current):hover::before {
    background-color: var(--nav-hover-tint);
  }

  /* Lade-Choreografie (nur bei Direktaufruf, html.lade-choreo):
     Der Header wächst aus der Mitte auf der X-Achse auf,
     danach erscheinen Logo und Menüpunkte über einen Stagger.
     Die Pill wird nach der Choreografie per Resize-Event neu gemessen,
     weil Transforms die Messwerte während der Animation verfälschen. */
  @keyframes element-einblenden {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes header-aufklappen {
    0% {
      opacity: 0;
      transform: scaleX(0.05);
    }
    35% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: scaleX(1);
    }
  }

  html.lade-choreo .header {
    /* bewusst KEIN opacity: 0 am Element - der Startzustand steckt in den
       Keyframes (fill-mode both). Laeuft die Animation nicht, bleibt der
       Header sichtbar, statt unsichtbar haengen zu bleiben. */
    transform-origin: center;
    animation: header-aufklappen var(--choreo-header-dauer) var(--ease) var(--choreo-header-start) both;
  }

  /* Komponenten nacheinander (Stagger): zuerst das Logo, dann der
     Menue-Button (nur mobil sichtbar) bzw. die Menuepunkte – jede um
     --choreo-schritt versetzt. fill-mode both: bis zu ihrem Einsatz
     bleiben sie unsichtbar. */
  html.lade-choreo .logo-wrapper,
  html.lade-choreo .nav-button,
  html.lade-choreo .nav-menu a {
    animation: element-einblenden var(--dur-choreo-element) var(--ease) var(--choreo-komponenten-start) both;
  }

  html.lade-choreo .nav-button { animation-delay: calc(var(--choreo-komponenten-start) + 1 * var(--choreo-schritt)); }
  html.lade-choreo .nav-menu a:nth-of-type(1) { animation-delay: calc(var(--choreo-komponenten-start) + 1 * var(--choreo-schritt)); }
  html.lade-choreo .nav-menu a:nth-of-type(2) { animation-delay: calc(var(--choreo-komponenten-start) + 2 * var(--choreo-schritt)); }
  html.lade-choreo .nav-menu a:nth-of-type(3) { animation-delay: calc(var(--choreo-komponenten-start) + 3 * var(--choreo-schritt)); }
  html.lade-choreo .nav-menu a:nth-of-type(4) { animation-delay: calc(var(--choreo-komponenten-start) + 4 * var(--choreo-schritt)); }
  html.lade-choreo .nav-menu a:nth-of-type(5) { animation-delay: calc(var(--choreo-komponenten-start) + 5 * var(--choreo-schritt)); }

  /* Die Nav-Pill bleibt während der Choreografie unsichtbar und blendet
     zeitgleich mit dem aktiven Menüpunkt ein (gleiche Dauer wie die Links;
     Klasse html.pill-sichtbar, siehe Script unten).
     !important schlägt die Inline-Opacity, die der Custom Code setzt. */
  html.lade-choreo .nav-pill {
    transition: opacity var(--dur-choreo-element) var(--ease);
  }

  html.lade-choreo:not(.pill-sichtbar) .nav-pill {
    opacity: 0 !important;
  }

  /* ---------- Mobile-Menü (eigene Ergänzung; bei Webflow macht das webflow.js) ---------- */

  .nav-button {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: var(--raum-xs);
    width: 40px;
    height: 40px;
    padding: var(--raum-xs);
    background: none;
    border: 0;
    cursor: pointer;
  }

  .nav-button span {
    display: block;
    height: 1.5px;
    background-color: var(--nav-link);
    transition: transform var(--transition-standard), opacity var(--transition-standard);
  }

  @media screen and (max-width: 991px) {
    body { overflow-x: clip; } /* nichts darf die Seite horizontal aufziehen */
    html.nav-lock, html.nav-lock body { overflow: hidden; }

    .header {
      width: calc(100% - 32px);
      overflow: clip;
      display: flex; flex-flow: column;
      /* Beim Schliessen wartet die Hoehe, bis die Punkte ausgeblendet sind */
      transition: height var(--dur-wattig) var(--ease) var(--dur-standard),
                  top var(--dur-wattig) var(--ease) var(--dur-standard),
                  width var(--dur-wattig) var(--ease) var(--dur-standard),
                  border-radius var(--dur-wattig) var(--ease) var(--dur-standard),
                  border-color var(--dur-wattig) var(--ease) var(--dur-standard);
    }
    /* randlos ueber die ganze Seite */
    .header.nav-voll { top: 0; width: 100%; height: 100svh; border-radius: 0; border-color: transparent; transition-delay: 0s; }
    /* die Bar wandert gegenlaeufig mit - Logo und X bleiben optisch stehen
       (seitlich ueber Padding, width: 100% wuerde Margins ignorieren) */
    .div-block-83 { flex: none; height: 68px; transition: margin var(--dur-wattig) var(--ease) var(--dur-standard), padding var(--dur-wattig) var(--ease) var(--dur-standard); }
    .header.nav-voll .div-block-83 { margin-top: var(--raum-xl); padding-left: var(--raum-xl); padding-right: var(--raum-2xl); transition-delay: 0s; }

    .nav-button { display: flex; }

    /* Vollflaechiges Menue: Punkte stehen mittig, gross, staggern ein */
    .nav-menu {
      position: absolute; top: 98px; left: 0; right: 0; height: calc(100svh - 98px);
      flex-direction: column; justify-content: center; gap: var(--raum-xs);
      padding: 0 var(--raum-l) var(--raum-xl);
      border: 0; background: transparent;
      opacity: 1; transform: none;
      visibility: hidden; pointer-events: none;
      transition: visibility 0s linear calc(var(--dur-standard) + var(--dur-wattig));
    }
    .header.nav-voll .nav-menu { visibility: visible; pointer-events: auto; transition: none; }
    .nav-menu a {
      opacity: 0; transform: translateY(8px);
      align-self: center;
      font-size: var(--heading-m); letter-spacing: var(--ls-gross); line-height: var(--lh-heading-m); padding: var(--raum-s) var(--raum-l);
      transition: opacity var(--transition-standard), transform var(--transition-standard);
    }
    .header.nav-voll .nav-menu a { opacity: 1; transform: none; }
    .header.nav-voll .nav-menu a:nth-of-type(1) { transition-delay: calc(var(--dur-wattig) * 0.45 + 0 * var(--stagger)); }
    .header.nav-voll .nav-menu a:nth-of-type(2) { transition-delay: calc(var(--dur-wattig) * 0.45 + 1 * var(--stagger)); }
    .header.nav-voll .nav-menu a:nth-of-type(3) { transition-delay: calc(var(--dur-wattig) * 0.45 + 2 * var(--stagger)); }
    .header.nav-voll .nav-menu a:nth-of-type(4) { transition-delay: calc(var(--dur-wattig) * 0.45 + 3 * var(--stagger)); }
    .header.nav-voll .nav-menu a:nth-of-type(5) { transition-delay: calc(var(--dur-wattig) * 0.45 + 4 * var(--stagger)); }

    /* Die Pill ist der aktive Punkt selbst - keine zweite Instanz, nichts zu messen */
    .nav-menu a.w--current { background-color: var(--pill-bg); border-radius: var(--border-radius-klein); }
    .header.nav-voll .nav-link.w--current,
    .header.nav-voll .nav-link.w--current:hover { color: var(--nav-link-active); }
    .header.nav-voll .nav-menu a.w--current { opacity: 1; }
    .header:not(.nav-voll) .nav-link.w--current,
    .header:not(.nav-voll) .nav-link.w--current:hover { color: var(--nav-link); opacity: 0.5; }

    .header.nav-voll .nav-button span:first-child { transform: translateY(3.75px) rotate(45deg); }
    .header.nav-voll .nav-button span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

    /* Standalone-Header: kein Burger-Menue - der Kontakt-Link steht wie am
       Desktop direkt in der Bar */
    .header.nav-schlank .nav-button { display: none; }
    .header.nav-schlank .nav-menu {
      position: static; height: auto; flex-direction: row;
      visibility: visible; pointer-events: auto; padding: 0; transition: none;
    }
    .header.nav-schlank .nav-menu a {
      opacity: 1; transform: none; align-self: auto;
      font-size: var(--text-gross); letter-spacing: var(--ls-mittel);
      line-height: var(--lh-gross); padding: var(--raum-xs) 0;
    }
  }.footer{z-index:0;background-color:var(--dunkelblau);color:var(--white);--linie: rgba(255, 255, 255, 0.14);width:100vw;height:180vh;margin-top:-100vh;position:relative}.footer.footer-hell{background-color:var(--white);color:var(--dunkelblau);--linie: rgba(var(--dunkelblau-rgb), 0.14)}.footer-sticky{flex-flow:column;justify-content:space-between;width:100%;height:100vh;display:flex;position:sticky;top:0;overflow:hidden}.footer.footer-flach{height:auto;margin-top:0;display:flex;flex-flow:column;justify-content:space-between}.footer-flach .footer-sticky{position:static}.footer-inhalt{width:100%;max-width:var(--max-width-schmal);margin:clamp(56px,6vw,110px) auto 0;padding: 0 var(--seiten-rand-gross)}.footer-spalten{display:flex;gap: var(--raum-xl)}.footer-spalte{font-size:var(--text-gross);letter-spacing:var(--ls-mittel);line-height: var(--lh-gross)}.footer-marke{margin-right:auto}.footer-spalten-titel{margin-bottom: var(--raum-s)}.footer-muted,.footer-linkliste{opacity:0.47}.footer-mail{display:inline-flex;margin-top: var(--raum-l);color:inherit;font-size:var(--text-gross); letter-spacing: var(--ls-mittel); line-height: var(--lh-gross);opacity:0.85}.footer-linkliste{list-style:none;margin:0;padding:0}.footer-linkliste li{line-height:var(--lh-gross)}.footer-linkliste li+li{margin-top:var(--raum-s)}.footer-linkliste a{transition:opacity var(--transition-standard)}.footer-linkliste a:hover{opacity:0.7}.footer-pfeil{width:10px;height:10px;margin-left:4px}.footer-meta{display:flex;justify-content:space-between;gap: var(--raum-m);border-top:1px solid var(--linie);margin-top:clamp(56px,6vw,110px);padding: var(--raum-m) 0;font-size:var(--text-klein); line-height: var(--lh-klein);letter-spacing:var(--ls-klein);opacity:0.47}@media screen and (max-width: 767px){.footer-spalten{flex-flow:column;gap: var(--raum-xl)}.footer-meta{flex-flow:column;gap: var(--raum-xs)}.footer-meta-rechts{display:none}}

/* ---------- Platzhalter-Seiten (AGB, Impressum, Datenschutz, Studien …) ---------- */
.platzhalter {
  width:100vw;
  min-height:100vh;
  padding: 220px var(--seiten-rand-gross) 100px}
.platzhalter-text {
  color:var(--darkblue-60);
  font-size:var(--text-lead); letter-spacing: var(--ls-mittel);
  line-height: var(--lh-lead);
  margin-top: var(--raum-xl)}
body.theme-dark .platzhalter-text {
  color:var(--white-40)}
body.theme-dark .schmal-heading {
  color:var(--white)}



/* ---------- Geteilte Komponenten (Home + Text-to-Store) ----------
   Projekt-Slider-Karten, Erfolg-Module, CTA, Kontaktformular. */
.section-schmal.slider {
    background-color: transparent;
  }

  /* Deckkraft, Scale und Widget-Sichtbarkeit sind scroll-gekoppelt (setzt
     das Slider-Script pro Frame) – Karten wachsen also schon auf dem Weg
     in den Inhaltsbereich, ganz ohne Transition-Sprünge */
  .slider_item {
    background-color: var(--feld);
    background-position: 50%;
    background-size: cover;
    border-radius: var(--border-radius-big);
    align-items: flex-end;
    width: calc(33.3333% - 9.33333px);
    height: clamp(340px, 36vw, 620px);
    padding: var(--raum-xs);
    display: flex;
  }

  /* Das Widget der Foto-Karten bleibt immer weiß – hell wie dunkel gleich */
  .home-ref-text-widget {
    border-radius: var(--border-radius-klein);
    background-color: var(--white);
    padding: var(--raum-m);
    width: 100%;
  }

  .home-referenzen-titel {
    color: var(--darkblue-80);
    margin: 0 0 var(--raum-2xl);
    font-size: var(--text-lead); letter-spacing: var(--ls-mittel);
    line-height: var(--lh-lead);
  }

  .home-ref-text-widget .slider-text {
    color: var(--darkblue-60);
  }
.slider-tags {
    margin: var(--raum-s) 0 0;
    color: var(--darkblue-60);
    font-size: var(--text-klein);
    letter-spacing: var(--ls-klein);
    line-height: var(--lh-klein);
    font-style: italic;
  }

  /* Feld-Karte (Figma): Titel oben, Text unten links */
  .slider_item.feld-karte {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--pad-feld-s);
  }

  .feld-karte-titel {
    margin: 0;
    max-width: 12ch;
    color: var(--text-80);
    font-size: var(--heading-s); letter-spacing: var(--ls-gross);
    line-height: var(--lh-heading-s);
  }

  .feld-karte-text {
    margin: 0;
    max-width: 44ch;
    color: var(--text-60);
    font-size: var(--text-basis);
    letter-spacing: var(--ls-klein);
    line-height: var(--lh-basis);
  }

  @media screen and (max-width: 767px) {
    .slider_item {
      width: calc(80% - 7px);
      height: min(56vh, 105vw);
    }
  }.erfolg-feld{background-color:transparent;border-radius:var(--border-radius-big);flex-flow:column;width:100%;display:flex;position:relative}.erfolg-module{width:100%;display:flex}.erfolg-rahmen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.erfolg-rahmen rect{x:0.5px;y:0.5px;width:calc(100% - 1px);height:calc(100% - 1px);rx:var(--border-radius-big);fill:none;stroke:rgba(var(--hair-rgb),var(--hair-a));stroke-width:var(--hair-w);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset var(--dur-zeichnen) var(--ease) var(--delay-zeichnen)}.erfolg-feld.ist-sichtbar .erfolg-rahmen rect{stroke-dashoffset:0}.erfolg-modul{flex:1 1 0;flex-flow:column;justify-content:space-between;min-height:clamp(240px,20vw,380px);padding:var(--pad-feld-s);display:flex}.erfolg-modul+.erfolg-modul{border-left:var(--hairline)}.erfolg-modul+.erfolg-modul{border-left-color:transparent;transition:border-left-color var(--dur-wattig) var(--ease) var(--dur-traege)}.erfolg-feld.ist-sichtbar .erfolg-modul+.erfolg-modul{border-left-color:rgba(var(--hair-rgb),var(--hair-a))}.erfolg-modul-titel{color:var(--text-80);font-size:var(--text-lead); letter-spacing: var(--ls-mittel);line-height: var(--lh-lead);margin:0}.erfolg-modul-text{color:var(--text-60);font-size:var(--text-basis);line-height: var(--lh-basis);letter-spacing:var(--ls-klein);margin-bottom:0}.erfolg-anbau{background-color:rgba(var(--dunkelblau-rgb), 0.06);border-radius:0 0 var(--border-radius-big) var(--border-radius-big);border-top:var(--hairline);border-top-color:transparent;transition:border-top-color var(--dur-wattig) var(--ease) var(--dur-traege)}.erfolg-feld.ist-sichtbar .erfolg-anbau{border-top-color:rgba(var(--hair-rgb),var(--hair-a))}@media screen and (max-width: 991px){.erfolg-module{flex-flow:column}.erfolg-modul{flex:none;min-height:0;gap: var(--raum-xl)}.erfolg-modul+.erfolg-modul{border-left:0;border-top:var(--hairline)}}.cta-p5-waves{z-index:-1;width:100%;height:100%;position:absolute;inset:0}.cta-padding{gap:clamp(30px,3.2vw,60px)}.section-schmal.kontaktformular{flex-flow:column;justify-content:center;align-items:center;margin-bottom:var(--section-abstand);display:flex}.kontaktformular-flex{justify-content:space-between;align-items:center;width:100%;gap: var(--raum-xl);display:flex}.kontakt-heading{width:34%;color:var(--text-80);line-height:1.1;letter-spacing:var(--ls-gross)}.kontakt-form{width:50%;flex-flow:column;gap: var(--raum-s);display:flex}.kontakt-label{color:var(--text-farbe);opacity:0.4;font-size:var(--text-klein);letter-spacing:var(--ls-klein);line-height: var(--lh-klein);display:block;padding:0;flex:none}.kontakt-themen{border:0;margin:0 0 var(--raum-s);padding:0}.kontakt-pills{gap: var(--raum-s);margin-top: var(--raum-s);display:flex;flex-wrap:wrap}.kontakt-pill input{position:absolute;opacity:0;pointer-events:none}.kontakt-pill span{border:var(--hairline);border-radius:var(--border-radius-klein);background-color:var(--flaeche);color:var(--text-farbe);font-size:var(--text-basis);letter-spacing:var(--ls-klein);line-height: var(--lh-basis);padding: var(--raum-xs) var(--raum-s);cursor:pointer;display:inline-block;transition:background-color var(--transition-standard),color var(--transition-standard),border-color var(--transition-standard)}.kontakt-pill:hover span{background-color:var(--hover-tint)}.kontakt-pill input:checked+span{background-color:var(--text-farbe);border-color:var(--text-farbe);color:var(--text-invers)}.kontakt-pill input:focus-visible+span{outline:2px solid var(--text-60);outline-offset:2px}.kontakt-feld{border:var(--hairline);border-radius:var(--border-radius-big);min-height:64px;display:flex;align-items:center;gap: var(--raum-s);padding: 0 var(--raum-l)}.kontakt-feld input,.kontakt-feld textarea{flex:1;width:100%;border:0;outline:none;background:transparent;font-family:var(--font-family-base);font-size:var(--text-gross);letter-spacing:var(--ls-mittel);line-height: var(--lh-gross);color:var(--text-farbe);padding:0}.kontakt-feld input::placeholder,.kontakt-feld textarea::placeholder{color:var(--text-farbe);opacity:0.4}.kontakt-feld.mehrzeilig{flex-direction:column;align-items:stretch;gap: var(--raum-xs);min-height:200px;padding-top: var(--raum-m);padding-bottom: var(--raum-m)}.kontakt-feld.mehrzeilig .kontakt-label{width:auto}.kontakt-feld textarea{flex:1;resize:vertical;min-height:0}.kontakt-submit{align-self:flex-start;background-color:var(--text-farbe);border:0;color:var(--text-invers);cursor:pointer;font-family:var(--font-family-base);margin-top: var(--raum-xs);transition:opacity var(--transition-standard)}.kontakt-submit:hover{opacity:0.9;background-color:var(--text-farbe)}@media screen and (max-width: 991px){.kontaktformular-flex{flex-flow:column;align-items:flex-start}.kontakt-heading,.kontakt-form{width:100%}}

/* ---- Nachtrag Design-Durchgang ---- */
/* Ueberschriften brechen gleichmaessig um (alle Seiten) */
.schmal-heading, .heading-gross, .kontakt-heading { text-wrap: balance; }
/* Text-Karten im Slider: flacher als die Bild-Karten der Startseite */
.slider_item.feld-karte { height: clamp(340px, 31vw, 540px); flex-flow: column; align-items: flex-start; justify-content: space-between; gap: var(--pad-feld-s); padding: var(--pad-feld-m); }
.feld-karte-titel { margin: 0; color: var(--text-farbe); font-size: var(--text-lead); letter-spacing: var(--ls-mittel); line-height: var(--lh-lead); }

/* Browser-Standard (UA-Stylesheet) aufheben: svg:not(:root){overflow:hidden}
   clippte Pfeile und Logo an den Kanten */
svg:not(:root) { overflow: visible; }
/* Text neben Pfeil: line-height 0.73, Pfeil unten buendig */
.footer-linkliste a:has(.pfeil-icon) { display: inline-flex; align-items: end; line-height: 0.73; }

/* ---- Bereiche: eine Sektion, die einen neuen Bereich einleitet, bekommt mehr Luft davor ---- */
.bereich-start { margin-top: var(--abstand-bereich); }
/* Kontakt: voller Viewport */

/* CTA: mehr Abstand zwischen Headline und Button */
.cta-padding { gap: var(--abstand-kopf); }
/* data-reveal ohne Standard-Einblendung: das Element bekommt nur .ist-sichtbar fuer eigene Uebergaenge */
html.reveal-aktiv [data-reveal].reveal-eigen { opacity: 1; transform: none; transition: none; }


/* ---------- Responsive-Erweiterungen (Handy) ---------- */
@media screen and (max-width: 767px) {
  /* gleichmaessige, grosszuegigere Abstaende zwischen den Sections */
  :root { --section-abstand: 220px; }
  .bereich-start { margin-top: 0; }
  /* alles, was am Desktop ein Banner ist, wird am Handy 90svh hoch */
  .section-breit.img-banner { height: 90svh; }
  /* Headbereiche ohne Einzug - Headlines bekommen die volle Breite */
  .schmal-headbereich { width: 100%; }

}

/* ---------- Footer am Handy: alle Footer laufen flach ----------
   (kein 100vh-Sticky-Parallax, der auf iOS die Logo-Schnittkante unter die
   Browserleiste schiebt; steht bewusst NACH den Footer-Basisregeln,
   damit die Kaskade fuer .footer/.footer-sticky greift) */
@media screen and (max-width: 767px) {
  .footer { height: auto; min-height: 90svh; margin-top: 0; display: flex; flex-flow: column; justify-content: space-between; gap: var(--raum-2xl); }
  .footer-sticky { position: static; height: auto; overflow: visible; }
}

/* ================================================================
   GETEILTE SEKTIONS-KOMPONENTEN
   Von mehreren Unterseiten genutzt: Vorteile-Raster mit Miniaturen,
   Use Case, FAQ, Sorgen-Slider. Seiten-CSS liefert nur noch die
   jeweiligen Illustrationen.
   ================================================================ */
/* ============================================================
   Vorteile: 2x2-Haarlinien-Raster, je Zelle eine UI-Miniatur in der
   Bildsprache des Portals (Felder, Haarlinien, kleine Typo, Off-White-Pill),
   darunter Titel + Beschreibung. Darunter "Alle Lizenzen geregelt".
   ============================================================ */
.vorteile-raster {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%;
  border: var(--hairline);
  border-radius: var(--border-radius-big);
  overflow: clip; /* nur die Ecken der Zellen an den Radius binden (keine Animation) */
}
.vorteil-zelle {
  display: flex; flex-flow: column;
  padding: var(--pad-feld-m);
  border: 0 solid rgba(var(--hair-rgb), var(--hair-a));
}
/* Die Trennlinien stehen sofort mit dem Rahmen - nur der Zelleninhalt faded */
html.reveal-aktiv .vorteil-zelle[data-reveal] { opacity: 1; transform: none; }
html.reveal-aktiv .vorteil-zelle[data-reveal] > * { opacity: 0; transition: opacity var(--transition-langsam); }
html.reveal-aktiv .vorteil-zelle.ist-sichtbar > * { opacity: 1; }
.vorteil-zelle:nth-child(odd) { border-right-width: 1px; }
.vorteil-zelle:nth-child(-n + 2) { border-bottom-width: 1px; }
.vorteil-bild {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(220px, 20vw, 300px);
  margin-bottom: var(--raum-xl);
  background: var(--glow);
}
/* Glow-Tokens fuer die ganze Seite: weich, breit, kein Spotlight */
:root {
  --glow: radial-gradient(80% 70% at 50% 48%, rgba(var(--hair-rgb), 0.065), transparent 100%);
  --glow-breit: radial-gradient(85% 75% at 60% 50%, rgba(var(--hair-rgb), 0.035), transparent 100%);
}
.vorteil-titel { margin: 0 0 var(--raum-xs); color: var(--text-farbe); font-size: var(--text-gross); letter-spacing: var(--ls-mittel); line-height: var(--lh-gross); }
.vorteil-text { margin: 0; max-width: 40ch; color: var(--text-60); font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis); }
/* Raster-Zeile: hervorgehobene Zeile unter einem Raster (Lizenzen, EU AI-Act) – eine Komponente */
.raster-zeile {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pad-feld-m);
  border-top: var(--hairline);
  background-color: var(--feld);
}
.raster-zeile h3 { margin: 0; color: var(--text-farbe); font-size: var(--text-lead); letter-spacing: var(--ls-mittel); line-height: var(--lh-lead); }
.raster-zeile p { margin: 0; max-width: 52ch; color: var(--text-60); font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis); }

/* Miniaturen: Elemente erscheinen gestaffelt, Verbinder zeichnen sich */
.ill { position: relative; width: 100%; max-width: 380px; }
.ill-el { opacity: 0; transform: translateY(6px); transition: opacity var(--transition-langsam) calc(var(--i, 0) * var(--stagger) * 1.5), transform var(--transition-langsam) calc(var(--i, 0) * var(--stagger) * 1.5); }
.vorteil-zelle.ist-sichtbar .ill-el, .gegen-zelle.ist-sichtbar .ill-el { opacity: 1; transform: none; }
.ill-karte {
  padding: var(--raum-xs) var(--raum-s);
  border: var(--hairline); border-radius: var(--border-radius-klein);
  background-color: var(--feld);
  color: var(--text-80);
  font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis);
}
.ill-pill {
  display: inline-flex; align-items: center; gap: var(--raum-xs);
  padding: var(--raum-xs) var(--raum-s);
  border-radius: var(--border-radius-klein);
  background-color: var(--text-farbe); color: var(--text-invers);
  font-size: var(--text-basis); line-height: var(--lh-basis); letter-spacing: var(--ls-klein);
}
.ill-label { color: var(--text-60); font-size: var(--text-basis); line-height: var(--lh-basis); letter-spacing: var(--ls-klein); }
.ill-punkt { display: inline-block; width: 6px; height: 6px; border-radius: var(--border-radius-klein); background-color: currentColor; }

@media screen and (max-width: 767px) {
  .vorteile-raster { grid-template-columns: 1fr; }
  .vorteil-zelle:nth-child(odd) { border-right-width: 0; }
  .vorteil-zelle:not(:last-child) { border-bottom-width: 1px; }
  .raster-zeile { flex-flow: column; align-items: flex-start; gap: var(--raum-l); }
}
/* ============================================================
   Zwei Wege: die Fakten tragen die Sektion - grosse Punkte auf
   Haarlinien, der Preis steht ruhig in der Fusszeile beim Button.
   ============================================================ */
.wege-heading { display: block; width: 100%; margin: 0 auto var(--abstand-kopf); text-align: center; }
.wege-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); width: 100%; }
.weg { position: relative; display: flex; flex-flow: column; padding: var(--pad-feld-l); border-radius: var(--border-radius-big); }
.weg-voll { background-color: var(--feld); }
.weg-titel { margin: 0 0 var(--pad-feld-m); color: var(--text-60); font-size: var(--text-gross); letter-spacing: var(--ls-mittel); line-height: var(--lh-gross); }
.weg-punkte { list-style: none; margin: 0 0 var(--pad-feld-l); padding: 0; }
.weg-punkte li {
  padding: var(--raum-l) 0;
  border-top: var(--hairline);
  color: var(--text-farbe);
  font-size: var(--text-lead); letter-spacing: var(--ls-mittel); line-height: var(--lh-lead);
  opacity: 0;
  transition: opacity var(--transition-langsam) calc(var(--delay-zeichnen) + var(--i, 0) * var(--stagger));
}
.weg-punkte li:last-child { border-bottom: var(--hairline); }
.wege-raster.ist-sichtbar .weg-punkte li { opacity: 1; }
.weg-fuss { margin-top: auto; display: flex; flex-flow: column; gap: var(--raum-s); align-items: flex-start; }
.weg-preis { margin: 0; color: var(--text-60); font-size: var(--text-basis); line-height: var(--lh-basis); letter-spacing: var(--ls-klein); }

@media (prefers-reduced-motion: reduce) { .weg-punkte li { opacity: 1; transition: none; } }
@media screen and (max-width: 767px) { .wege-raster { grid-template-columns: 1fr; } }

/* ============================================================
   Use Case
   ============================================================ */
.usecase-heading { max-width: none; margin: 0 auto var(--raum-2xl); text-align: center; color: var(--text-80); }
.usecase-label { color: var(--text-60); margin-right: 0.2em; }
.usecase { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); width: 100%; padding: var(--raum-m); }
.usecase-text { display: flex; flex-flow: column; justify-content: space-between; gap: var(--raum-xl); padding: var(--pad-feld-s); }
.usecase-intro { margin: 0; max-width: 44ch; color: var(--text-60); font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis); }
.usecase-zitat {
  margin: 0;
  /* Trennlinie laeuft ueber Spalten-Padding und Grid-Luecke bis an die Bildkante */
  margin-right: calc(-1 * (var(--pad-feld-s) + var(--raum-m)));
  padding-top: var(--raum-m);
  border-top: var(--hair-w) solid transparent;
}
.usecase-zitat blockquote { margin: 0 0 18px; max-width: 34ch; color: var(--text-80); font-size: var(--text-lead); letter-spacing: var(--ls-mittel); line-height: var(--lh-lead); }
.usecase-zitat figcaption { color: var(--text-40); font-size: var(--text-klein); line-height: var(--lh-klein); letter-spacing: var(--ls-klein); }
.usecase-bild { display: block; width: 100%; height: 100%; min-height: clamp(360px, 36vw, 666px); object-fit: cover; border-radius: var(--border-radius-klein); }
@media screen and (max-width: 767px) {
  .usecase { grid-template-columns: 1fr; min-height: 90svh; }
  .usecase-bild { min-height: 0; height: 100%; aspect-ratio: auto; object-fit: cover; order: -1; }
  .usecase-zitat { margin-right: 0; }
}

/* ============================================================
   FAQ: Haarlinien-Liste, Plus wird Minus, Antwort gleitet und blendet
   ============================================================ */
.faq { width: min(860px, 100%); margin: 0 auto; border-top: var(--hairline); }
.faq-eintrag { border-bottom: var(--hairline); }
.faq-frage {
  display: flex; justify-content: space-between; align-items: center; gap: var(--raum-l);
  width: 100%;
  padding: var(--raum-l) 0;
  border: 0; background: none;
  color: var(--text-60);
  font-family: var(--font-family-base);
  font-size: var(--text-gross); letter-spacing: var(--ls-mittel); line-height: var(--lh-gross);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-standard);
}
.faq-frage:hover, .faq-eintrag.offen .faq-frage { color: var(--text-farbe); }
.faq-plus { position: relative; flex: none; width: 16px; height: 16px; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; background-color: currentColor; transition: transform var(--transition-standard); }
.faq-plus::before { left: 0; right: 0; top: 50%; height: 1px; }
.faq-plus::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.faq-eintrag.offen .faq-plus::after { transform: scaleY(0); }
/* Antwort: exakt die Mechanik der Portal-Felder – Wrapper-Hoehe gleitet in px
   (js), der absolute Inhalt blendet erst, wenn die Hoehe steht; geschlossen
   ist er unsichtbar und faengt keine Klicks. */
.faq-antwort { position: relative; height: 0; transition: height var(--transition-langsam); }
.faq-antwort-inner {
  position: absolute; left: 0; top: 0; width: 100%;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-standard), visibility 0s linear calc(var(--dur-langsam) + var(--dur-standard));
}
.faq-eintrag.offen .faq-antwort-inner {
  visibility: visible; pointer-events: auto; opacity: 1;
  transition: opacity var(--transition-standard) var(--dur-langsam);
}
.faq-antwort-inner p {
  margin: 0; max-width: 58ch;
  padding: 2px var(--raum-l) var(--raum-l) 0;
  color: var(--text-60);
  font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis);
}
.faq-headbereich .schmal-heading { max-width: 13ch; }
.schmal-heading.heading-breit { max-width: 28ch; }
@media (prefers-reduced-motion: reduce) { .faq-antwort, .faq-antwort-inner { transition: none; } }

/* Systems-Banner: Bild-Aussage (flach), Text links unten, Button rechts unten */
.aussage.flach { min-height: clamp(280px, 27vw, 468px); flex-flow: row; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 3vw, 56px); padding: var(--raum-m); text-align: left; }
.aussage.flach .heading-gross { max-width: 20ch; margin: 0 auto 0 0; align-self: flex-end; font-size: var(--heading-m); letter-spacing: var(--ls-gross); line-height: var(--lh-heading-m); text-align: left; }
.aussage.flach .button-underlined { align-self: flex-end; margin: 0; }
.aussage .button-underlined { position: relative; z-index: 1; flex: none; }
@media screen and (max-width: 767px) { .aussage.flach { flex-flow: column; align-items: flex-start; justify-content: flex-end; } }
/* CTA: p5-Banner bleibt, Behandlung wie die Bild-Aussagen (gedaempft, Maske von unten) */
/* CTA-Banner erbt die img-banner-Hoehe (clamp) - wie auf der Startseite */
/* Gleichmaessiges Spacing: jede Section traegt dasselbe margin-bottom,
   Bereichs-Anfaenge legen nichts mehr obendrauf */
.cta-padding { position: relative; overflow: clip; border-radius: var(--border-radius-big); height: 100%; }
.cta-padding .cta-p5-waves { opacity: var(--aussage-bild-deckkraft); -webkit-mask-image: linear-gradient(to top, transparent 0%, black 70%); mask-image: linear-gradient(to top, transparent 0%, black 70%); }
.cta-padding { --aussage-bild-deckkraft: 0.4; }
/* Karte: Demo-Player hoert nur die ersten Sekunden einer 41-s-Durchsage */
.portal-buehne .card.spielt .demo-fortschritt { animation: demo-lauf var(--dur-durchsage) linear forwards; transform-origin: left; width: 100%; }
.portal-buehne .card.spielt .demo-thumb { animation: demo-thumb var(--dur-durchsage) linear forwards; }
.portal-buehne { --dur-durchsage: 41s; } /* Laenge der Beispiel-Durchsage */
.portal-buehne .kebab.is-hover { background: var(--hover); color: var(--text-80); }

/* ---------- Studienfeld (Home + Music Service) ---------- */
.studienfeld{background-color:var(--white);border-radius:var(--border-radius-big);justify-content:space-between;width:100%;padding:var(--pad-feld-l);display:flex;position:relative}
.studie-rahmen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.studie-rahmen rect{x:0.5px;y:0.5px;width:calc(100% - 1px);height:calc(100% - 1px);rx:var(--border-radius-big);fill:none;stroke:rgba(var(--hair-rgb),var(--hair-a));stroke-width:var(--hair-w);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset var(--dur-zeichnen) var(--ease) var(--delay-zeichnen)}
.studienfeld.ist-sichtbar .studie-rahmen rect{stroke-dashoffset:0}
/* Dreigeteiltes Studienfeld (Home, Uni-Wien-Ergebnisse) - Aufbau wie das Erfolg-Feld */
.studienfeld-drei{flex-flow:column;gap:0;padding:0}
.studien-drei{width:100%;display:flex}
.studien-teil{flex:1 1 0;flex-flow:column;justify-content:space-between;gap: var(--raum-xl);min-height:clamp(240px,20vw,380px);padding:var(--pad-feld-m);display:flex}
.studien-teil+.studien-teil{border-left:var(--hairline);border-left-color:transparent;transition:border-left-color var(--dur-wattig) var(--ease) var(--dur-traege)}
.studienfeld.ist-sichtbar .studien-teil+.studien-teil{border-left-color:rgba(var(--hair-rgb),var(--hair-a))}
.studien-teil .studie-hauptwert{margin-bottom:0}
.studien-quelle{width:100%;margin:0;padding:var(--pad-feld-s) var(--pad-feld-m);border-top:var(--hairline);border-top-color:transparent;transition:border-top-color var(--dur-wattig) var(--ease) var(--dur-traege);color:var(--darkblue-40);font-size:var(--text-klein);letter-spacing:var(--ls-klein);line-height: var(--lh-klein)}
.studienfeld.ist-sichtbar .studien-quelle{border-top-color:rgba(var(--hair-rgb),var(--hair-a))}
.uni-kopf-rechts{flex:none;flex-flow:column;align-items:flex-start;gap: var(--raum-m);display:flex}

@media screen and (max-width: 991px){.studien-drei{flex-flow:column}.studien-teil{flex:none;min-height:0}.studien-teil+.studien-teil{border-left:0;border-top:var(--hairline)}}
.studie-hauptwert-wrapper{width:44%}
.studie-hauptwert{color:var(--darkblue-80);margin-top:0;margin-bottom:var(--pad-feld-m);font-size:var(--zahl-gross); letter-spacing: var(--ls-gross);line-height: var(--lh-zahl)}
.studie-hauptwert-subline{color:var(--darkblue-80);font-size:var(--text-lead); letter-spacing: var(--ls-mittel);line-height: var(--lh-lead);margin:0;max-width:90%}
.studie-paragraph{width:44%;color:var(--darkblue-40);font-size:var(--text-basis); letter-spacing: var(--ls-klein);line-height: var(--lh-basis);margin-bottom:0}
/* Invertierte Variante fuer dunkle Seiten - Layout bleibt identisch */
.studienfeld.invers { background-color: transparent; }
.studienfeld.invers .studie-hauptwert,
.studienfeld.invers .studie-hauptwert-subline { color: var(--white); }
.studienfeld.invers .studie-paragraph { color: var(--white-40); }
@media screen and (max-width: 767px){
  .studienfeld{flex-flow:column;gap:var(--raum-xl);padding:var(--pad-feld-m)}
  /* Drei-Teile-Variante (Home): randlos, die Teile tragen das Padding selbst,
     damit Trennlinien und Quelle-Linie bis ganz an den Feldrand laufen */
  .studienfeld-drei{gap:0;padding:0}
  .studie-hauptwert-wrapper,.studie-paragraph{width:100%}
  .studie-hauptwert{margin-bottom:var(--raum-m)}
  .studie-hauptwert-subline{max-width:100%}
}

/* Drei Fakten nebeneinander, nur durch Haarlinien getrennt (ohne Rahmen) */
.fakten-drei { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
/* alle drei Spalten gleich - Nummer oben, Text unten, dazwischen Luft */
.fakt {
  display: flex; flex-flow: column; justify-content: center; gap: var(--pad-feld-s);
  min-height: clamp(16rem, 19vw, 23rem);
  padding: var(--pad-feld-m);
}
.fakt + .fakt { border-left: var(--hairline); }
.fakt-inhalt { display: flex; flex-flow: column; gap: var(--pad-feld-s); }
.fakt-titel { margin: 0; color: var(--text-farbe); font-size: var(--heading-m); letter-spacing: var(--ls-gross); line-height: var(--lh-heading-m); }
.fakt-text { margin: 0; max-width: 34ch; color: var(--text-60); font-size: var(--text-gross); letter-spacing: var(--ls-mittel); line-height: var(--lh-gross); }
@media screen and (max-width: 767px) {
  .fakten-drei { grid-template-columns: 1fr; }
  .fakt { min-height: 0; padding: var(--pad-feld-m) 0; gap: var(--pad-feld-s); }
  .fakt:first-child { padding-top: 0; }
  .fakt + .fakt { border-left: 0; border-top: var(--hairline); }
}

/* Musik-Banner (Home + Music Service) */
.musik-banner{background-image:url(../images/allgemein/band.jpg);background-position:50%;background-size:cover}
/* Banner mit mehr Seitenrand als der Hero: halber grosser Seitenrand (4vw) */
.section-breit.banner-rand{padding-left:var(--seiten-rand-banner);padding-right:var(--seiten-rand-banner)}

/* ============================================================
   Sorgenfreiheit: Slider im Linear-Look – Karten ohne Fuellung, nur
   Haarlinien, Glow, in einem Rahmen; unten angebaut die AI-Act-Zeile
   ============================================================ */
.sorgen-rahmen { position: relative; width: 100%; border: var(--hairline); border-radius: var(--border-radius-big); overflow: clip; }
.sorgen-rahmen .slider_wrap { padding: 0; }
.sorgen-rahmen .slider_track { gap: 0; } /* die Karten sind ueber Haarlinien verbunden - kein Gap */
.sorgen-rahmen .slider_item.feld-karte { width: 33.3333%; height: clamp(300px, 26vw, 420px); border-radius: 0; background: var(--glow); border-right: var(--hairline); }
@media screen and (max-width: 767px) { .sorgen-rahmen .slider_item.feld-karte { width: 80%; } }
/* Pfeil-Felder kommen aus der Basis-Komponente weiter oben (--feld-hell) */

/* Systems: Karte – Bild oben, darunter Headline links und Link rechts */


/* ################################################################
   SEITE: TEXT-TO-STORE
   ################################################################ */
/* sound-dna.com - Seiten-Styles: Text-to-Store
   Baut auf css/global.css auf (Tokens, Basis, Nav, Footer, geteilte Komponenten).
   Die Seite laeuft im Dark Theme (body.theme-dark). */

/* ============================================================
   Hero: orange Flaeche (halbe Hoehe) mit Titel, darunter 72h -> 5min
   ============================================================ */
/* Der TTS-Hero fuellt den ganzen Viewport (Unterseiten-Regel wird ueberschrieben) */
.section-breit.hero.hero-unterseite.tts-hero { height: 100svh; }
.tts-hero-padding { display: flex; flex-flow: column; align-items: center; gap: var(--raum-m); padding: 0; }

.tts-hero-flaeche {
  position: relative;
  flex: none;
  height: 50svh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: var(--border-radius-big);
  clip-path: inset(0 round var(--border-radius-big)); /* rundet den p5-Canvas mit */
}
.hero-p5 { position: absolute; inset: 0; z-index: -1; }
.hero-unterseite-titel { min-height: 1em; margin: 0; }

.tipp-cursor {
  display: inline-block;
  width: 0.06em; height: 0.88em;
  margin-left: 0.06em;
  vertical-align: -0.08em;
  background-color: var(--white);
  animation: cursor-blinken var(--dur-traege) var(--ease) infinite;
}
@keyframes cursor-blinken { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }

.tts-hero-zahlen {
  flex: 1;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: var(--raum-m);
  text-align: center;
}
.tempo-zahlen {
  display: flex; align-items: baseline; gap: var(--pad-feld-m);
  margin: 0;
  font-size: var(--zahl-gross); letter-spacing: var(--ls-gross); line-height: var(--lh-zahl);
  opacity: 0;
  transition: opacity var(--transition-wattig);
}
.tempo-alt { position: relative; color: var(--text-40); }
.tempo-alt::after {
  content: ""; position: absolute; left: -0.04em; right: -0.04em; top: 54%; height: 0.03em;
  background-color: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition-wattig) calc(var(--dur-langsam) + var(--dur-standard)); /* zieht nach dem Erscheinen durch */
}
.tempo-neu { color: var(--text-farbe); opacity: 0; transition: opacity var(--transition-wattig) calc(var(--dur-langsam) + var(--dur-standard) + var(--dur-wattig)); }
.tts-hero.fertig .tempo-zahlen, .tts-hero.fertig .tempo-neu { opacity: 1; }
.tts-hero.fertig .tempo-alt::after { transform: scaleX(1); }

/* ============================================================
   Service-Portal: Schritte links (alle gefuellt), rechts das SpotTool-Fenster
   ============================================================ */
.portal {
  display: grid;
  grid-template-columns: minmax(260px, 36%) 1fr;
  gap: var(--abstand-kopf);
  align-items: center;
  width: 100%;
}
.portal-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-flow: column; gap: var(--raum-s); }
.schritt-knopf {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--raum-l);
  border: 0;
  border-radius: var(--border-radius-klein);
  background-color: var(--feld);
  color: var(--text-farbe);
  font-family: var(--font-family-base);
  text-align: left;
  cursor: pointer;
  clip-path: inset(0 round var(--border-radius-klein)); /* rundet die Fortschrittslinie an den Ecken mit */
  transition: border-radius var(--transition-langsam), clip-path var(--transition-langsam);
}
.portal-schritt.aktiv .schritt-knopf {
  clip-path: inset(0 round var(--border-radius-big));
  border-radius: var(--border-radius-big);
  cursor: default;
}
.schritt-titel {
  display: block;
  color: var(--text-60);
  font-size: var(--text-gross); letter-spacing: var(--ls-mittel); line-height: var(--lh-gross);
  transition: color var(--transition-standard);
}
.portal-schritt.aktiv .schritt-titel { color: var(--text-farbe); }
/* Beschreibung: Wrapper-Hoehe gleitet (px setzt js/text-to-store.js), Text blendet */
.schritt-text-wrap {
  display: block;
  position: relative;
  height: 0;
  transition: height var(--transition-langsam);
}
.schritt-text {
  position: absolute; left: 0; top: 0; width: 100%;
  display: block;
  padding-top: var(--raum-xs);
  color: var(--text-60);
  font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition-standard), visibility 0s linear calc(var(--dur-langsam) + var(--dur-standard));
}
.portal-schritt.aktiv .schritt-text {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--transition-standard) var(--dur-langsam);
}
.schritt-fortschritt {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background-color: var(--track-rest);
  opacity: 0;
  transition: opacity var(--transition-standard);
}
.portal-schritt.aktiv .schritt-fortschritt { opacity: 1; }
.schritt-fortschritt-balken { position: absolute; inset: 0; background-color: var(--track-played); transform: scaleX(0); transform-origin: left; }

/* ---- Buehne: das SpotTool selbst ----
   Komponenten und Tokens kommen 1:1 aus css/spottool-buehne.css (gescopetes
   SpotTool-CSS). Hier nur der Rahmen, der Szenenwechsel und die Demo-Ablaeufe. */
.portal { position: relative; }
.portal::before { content: ""; position: absolute; inset: -18% -12%; z-index: -1; background: var(--glow-breit); pointer-events: none; }
.portal-buehne {
  --st-zeile: calc(var(--stagger) * 0.75); /* Zeile zu Zeile (SpotTool: 45ms) */
  position: relative;
  min-height: clamp(460px, 37vw, 600px);
  border: var(--hairline);
  border-radius: var(--border-radius-big);
  background-color: var(--dunkelblau); /* Seitenflaeche des SpotTools (Token aus spottool-buehne.css) */
  font-family: 'Inter Tight', sans-serif;
  --slot-h: 44px;   /* Kalender-Ausschnitt: hohe Slots mit Uhrzeit + Titel */
  --slot-gap: var(--raum-xs);
}
.portal-buehne .buehne-szene {
  position: absolute; inset: 0;
  display: flex; flex-flow: column; justify-content: center;
  padding: var(--pad-feld-m);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-standard), visibility 0s linear var(--dur-standard);
}
.buehne-szene.aktiv { opacity: 1; visibility: visible; transition: opacity var(--transition-standard); }
/* Inhalte rollen 6px von unten nach, 45ms versetzt (SpotTool --t-roll) */
.szene-el {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition-standard), transform var(--transition-standard);
}
.buehne-szene.aktiv .szene-el {
  opacity: 1; transform: none;
  transition: opacity var(--transition-standard) calc(var(--dur-standard) + var(--i, 0) * var(--st-zeile)), transform var(--transition-standard) calc(var(--dur-standard) + var(--i, 0) * var(--st-zeile));
}
/* Stop/Weiter: kleiner Knopf unten rechts, haelt die Rotation und die Szenen an */
.portal-buehne .buehne-stopp {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: var(--hairline); border-radius: var(--radius-md);
  background: none; color: var(--text-60);
  cursor: pointer;
  pointer-events: auto;
  transition: color var(--transition-standard), background-color var(--transition-standard);
}
.portal-buehne .buehne-stopp:hover { color: var(--text-farbe); background-color: var(--white-6); }
.portal-buehne .buehne-stopp .icon { width: 12px; height: 12px; }
.portal-buehne .buehne-stopp .ikon-play, .portal-buehne.pausiert .buehne-stopp .ikon-pause { display: none; }
.portal-buehne.pausiert .buehne-stopp .ikon-play { display: block; }
.portal-buehne.pausiert * { animation-play-state: paused !important; }
/* Cursor: fuehrt durch die Szenen, gleitet zwischen den Zielen */
.portal-buehne .buehne-cursor {
  position: absolute; left: 0; top: 0; z-index: 30;
  width: 18px; height: 18px;
  color: var(--text-100);
  opacity: 0;
  transform: translate(60%, 60%);
  transition: transform var(--transition-wattig), opacity var(--transition-standard);
  pointer-events: none;
}
.portal-buehne .buehne-cursor.da { opacity: 1; }
.portal-buehne .buehne-cursor.klickt { transform: translate(var(--x), var(--y)) scale(0.85); transition-duration: var(--dur-standard); }
.portal-buehne .buehne-cursor svg { display: block; width: 100%; height: 100%; }
/* Kalender: Slot leuchtet auf, wenn der Cursor ihn trifft (wie im Tool) */
.portal-buehne .cal-slot.is-lit .cal-slot__inner { bottom: 0; }
/* Creation: Text tippt sich */
.portal-buehne .creation-block { margin: 0; }
.portal-buehne .st-tipp { min-height: 4.4em; white-space: pre-wrap; }
.portal-buehne .st-tipp .tipp-cursor { width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background-color: var(--text-100); }
/* Card: Generating -> New (Zustandswechsel wie im Tool) */
.portal-buehne .card { max-width: 420px; margin: 0 auto; width: 100%; }
.portal-buehne .card.neu .badge--new { display: inline-flex; }
.portal-buehne .card .ikon-pause, .portal-buehne .card.spielt .ikon-play { display: none; }
.portal-buehne .card.spielt .ikon-pause { display: block; }
.portal-buehne .card:not(.spielt) .demo-fortschritt { width: 100%; transform: scaleX(0); }
@keyframes demo-lauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes demo-thumb { from { left: 0; } to { left: 100%; } }
/* Schedule: Tage rasten nacheinander ein; Buttons des Tools sind hier Spans */
.portal-buehne span.segmented__option, .portal-buehne span.day-chip, .portal-buehne span.field__btn, .portal-buehne span.play-btn, .portal-buehne span.primary-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
/* Haupt-Button der Buehne traegt das Website-Button-Padding statt der
   festen SpotTool-Hoehe (Icon- und Kleinst-Controls bleiben unberuehrt) */
.portal-buehne span.primary-btn { height: auto; padding: var(--button-padding); gap: var(--raum-s); }
/* Buehnen-Paddings auf Website-Tokens gezogen (spottool-buehne.css bleibt
   1:1; die Overrides gewinnen ueber die zusaetzliche Szene-Klasse).
   Kompakte, etwa quadratische Felder bekommen allseitig gleiches Padding. */
.portal-buehne .buehne-szene .cal-col { padding: 0 var(--raum-xs); }
.portal-buehne .buehne-szene .cal-col__date { padding: 2px var(--raum-xs); }
.portal-buehne .buehne-szene .cal-slot__title { padding: var(--raum-xs); }
.portal-buehne .buehne-szene .cal-time { padding: 0 var(--raum-s) 0 0; }
.portal-buehne .buehne-szene .card--pending { padding: var(--raum-xs); }
.portal-buehne .buehne-szene .dropdown__toggle { padding: 0 var(--raum-m); }
.portal-buehne .buehne-szene .sched-form { padding: var(--raum-l); }
/* Abstaende und Gaps der Szenen ebenfalls auf nahe feste Tokens (10->raum-s,
   22->raum-l, 23.4->raum-l, 46->raum-2xl) */
.portal-buehne .buehne-szene .title-field { gap: var(--raum-l); }
.portal-buehne .buehne-szene .creation-block .title-field { margin-top: var(--raum-s); }
.portal-buehne .buehne-szene .card__title-row { gap: var(--raum-s); }
.portal-buehne .buehne-szene .day-chips { gap: var(--raum-s); }
.portal-buehne .buehne-szene .dropdown__value { gap: var(--raum-s); }
.portal-buehne .buehne-szene .sched-form__label { margin-bottom: var(--raum-s); }
.portal-buehne .buehne-szene .sched-form__group { margin-top: var(--raum-l); }
.portal-buehne .sched-editor { max-width: 640px; margin: auto; width: 100%; justify-content: center; }
.portal-buehne .szene-planung { justify-content: center; }
.portal-buehne .sched-actions { display: flex; justify-content: flex-end; margin-top: var(--raum-s); }
.portal-buehne .lang-toggle { margin-top: var(--raum-l); }
.portal-buehne .dropdown__menu { max-height: none; }
.portal-buehne .context-menu { z-index: 8; }
.portal-buehne .dropdown__option.is-hover, .portal-buehne .context-menu__item.is-hover { background: var(--hover); color: var(--text-80); }
.portal-buehne .sched-form { border: 0; }
/* Kalender: Slots erscheinen versetzt, Jetzt-Linie zuletzt.
   Mit .szene-kalender im Selektor, damit die Regel die Basisregel aus
   spottool-buehne.css (laedt NACH dieser Datei, 7 Wochentags-Spalten und
   eine Mobil-Stauchung auf 1 Spalte) sicher uebertrumpft - sonst quetschen
   sich die 3 Demo-Tage in ein 8-Spalten-Raster und der Kalender wirkt auf
   der x-Achse gestaucht. */
.portal-buehne .szene-kalender .cal-grid { grid-template-columns: 50px repeat(3, minmax(0, 1fr)); padding: var(--raum-s) var(--raum-s) var(--raum-s) 0; max-width: 560px; width: 100%; margin: 0 auto; }
.portal-buehne .szene-kalender .cal-col__head { display: flex; } /* Tages-Koepfe bleiben auch unter 980px sichtbar */
.portal-buehne .cal-slot--spot .cal-slot__title { opacity: 1; }
.portal-buehne .cal-slot--spot .cal-slot__text { font-size: 11.5px; }
.portal-buehne .cal-slot--spot .cal-slot__inner, .portal-buehne .cal-slot--spot .cal-slot__title { opacity: 0; transition: opacity var(--transition-standard) calc(var(--dur-standard) + var(--i) * var(--stagger)); }
.szene-kalender.aktiv .cal-slot--spot .cal-slot__inner, .szene-kalender.aktiv .cal-slot--spot .cal-slot__title { opacity: 1; }
.portal-buehne .cal-now { opacity: 0; transition: opacity var(--transition-langsam) calc(var(--dur-wattig) + var(--dur-standard)); }
.szene-kalender.aktiv .cal-now { opacity: 1; }
@media screen and (max-width: 991px) {
  /* 90svh-Slider: Buehne fuellt oben (im Hochformat gerendert und in den Slot
     skaliert, js/text-to-store.js setzt --buehne-scale), darunter die Schritte
     als Peek-Slider - die naechste Karte lugt rein, swipen wechselt, und der
     Auto-Advance scrollt mit */
  .portal { display: flex; flex-flow: column; align-items: stretch; justify-content: center; gap: var(--raum-s); height: 90svh; padding-bottom: var(--raum-s); }
  .portal-buehne {
    --buehne-b: 470px; --buehne-h: 620px;
    order: -1; flex: none; align-self: center;
    width: var(--buehne-b); height: var(--buehne-h); min-height: 0;
    scale: var(--buehne-scale, 0.75); transform-origin: top center; /* scale-Property: kollidiert nicht mit den Reveal-Transforms */
    /* Layout-Fussabdruck zusammenziehen: Hoehe auf die skalierte Hoehe,
       Breite auf den Container (sonst zieht die Buehne die Seite seitlich auf) */
    margin: 0 calc((100% - var(--buehne-b)) / 2) calc(var(--buehne-h) * (var(--buehne-scale, 0.75) - 1));
  }
  .portal-schritte {
    --schritt-hoehe: 196px;
    position: relative; flex: none;
    display: flex; flex-flow: row; gap: var(--raum-xs);
    height: var(--schritt-hoehe);
    padding-inline: 7%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 7%;
    scrollbar-width: none;
  }
  .portal-schritte::-webkit-scrollbar { display: none; }
  .portal-schritt { flex: 0 0 86%; scroll-snap-align: center; }
  .schritt-knopf { height: 100%; }
  .portal-schritt .schritt-titel { margin-bottom: var(--raum-s); }
}

/* ============================================================
   Bild-Aussagen: Bild fuellt das Feld, laeuft am Rand ganz subtil ins
   Dunkelblau aus; die Headline steht mittig darauf
   ============================================================ */
.aussage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: clamp(460px, 58vw, 940px);
  padding: var(--raum-m); /* wie die img-Banner auf der Startseite */
  border-radius: var(--border-radius-big);
  overflow: clip;
  text-align: center;
}
.aussage { --dur-vorhang: calc(var(--dur-wattig) * 2.8); --delay-aussage-text: calc(var(--dur-vorhang) * 0.5); }
.aussage-bild {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; /* faded zusaetzlich zum Vorhang ein */
  /* Vorhang: die Maske ist 250% hoch (oben deckend, ab 4% weich auslaufend) und
     faehrt von unten nach oben durch - die weiche Kante wandert also mit runter.
     Endzustand (Position 0 0) = das stehende Auslaufen ueber die unteren ~70%. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 4%, transparent 40%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 4%, transparent 40%);
  -webkit-mask-size: 100% 250%; mask-size: 100% 250%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  transition: -webkit-mask-position var(--dur-vorhang) var(--ease), mask-position var(--dur-vorhang) var(--ease), opacity var(--dur-vorhang) var(--ease);
}
.aussage.ist-sichtbar .aussage-bild { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: var(--aussage-bild-deckkraft); }
@media (prefers-reduced-motion: reduce) {
  .aussage-bild { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: var(--aussage-bild-deckkraft); transition: none; }
}
.aussage .heading-gross {
  opacity: 0; line-height: 1.18; transform: translateY(14px);
  transition: opacity var(--dur-wattig) var(--ease) var(--delay-aussage-text),
              line-height var(--dur-wattig) var(--ease) var(--delay-aussage-text),
              transform var(--dur-wattig) var(--ease) var(--delay-aussage-text);
}
.aussage.ist-sichtbar .heading-gross { opacity: 1; line-height: 1.02; transform: none; }
.aussage .button-underlined { opacity: 0; transition: opacity var(--transition-standard) calc(var(--delay-aussage-text) + var(--stagger) * 3); }
.aussage.ist-sichtbar .button-underlined { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .aussage .heading-gross { opacity: 1; line-height: 1.02; transform: none; transition: none; }
  .aussage .button-underlined { opacity: 1; transition: none; }
}
.aussage { --aussage-bild-deckkraft: 0.4; }
.aussage .heading-gross { position: relative; z-index: 1; width: auto; max-width: 24ch; margin: 0; font-size: var(--heading-l); letter-spacing: var(--ls-gross); line-height: var(--lh-heading-l); } /* line-height animiert oben (1.18 -> 1.02) */
.aussage .button-underlined { position: relative; z-index: 1; margin-top: clamp(18px, 2vw, 32px); }
.section-schmal.bild-banner-schmal { min-height: 0; }
@media screen and (max-width: 767px) {
  .aussage { min-height: 90svh; }
  /* Chips fliessen zentriert als ein Muster, die Desktop-Zeilen loesen sich auf */
  .ill-wolke { flex-flow: row wrap; justify-content: center; }
  .ill-wolke-zeile { display: contents; }
  /* sonst bricht die Headline am Handy dreizeilig */
  .aussage .heading-gross { font-size: var(--heading-m); letter-spacing: var(--ls-gross); line-height: var(--lh-heading-m); }
}

/* ============================================================
   Wir casten: vertikaler Ablauf direkt nach dem BrandVoice-Banner.
   Linie mittig (zeichnet mit dem Scroll), fuenf Stationen als Felder auf der
   Linie, je eine kleine Info wechselseitig daneben; die letzte Station
   traegt den Play-Button.
   ============================================================ */
.ablauf-section { justify-content: flex-start; }
.ablauf { --ab-takt: var(--abstand-ablauf); --ab-linie-start: clamp(72px, 8vw, 140px); --ab-p: 0; position: relative; width: min(900px, 100%); margin: var(--ab-takt) auto calc(var(--ab-takt) / 2); }
/* Stationen kommen gemaechlicher als das uebliche Reveal - und ohne y-Versatz */
.ablauf .ablauf-punkt { transition-duration: calc(var(--dur-wattig) * 1.6); }
html.reveal-aktiv .ablauf-punkt[data-reveal] { transform: none; }
.ablauf-linie {
  /* Takt und Nachlauf sind jetzt Margins der .ablauf-Box - die Linie ragt
     mit negativen Offsets hinein, ihre Laenge bleibt wie zuvor */
  position: absolute; left: 50%;
  top: calc(var(--ab-linie-start) - var(--ab-takt));
  bottom: calc(var(--ab-takt) / -2);
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(var(--hair-rgb), var(--hair-a)) 8%, rgba(var(--hair-rgb), var(--hair-a)) 92%, transparent);
  /* scroll-gekoppelt pro Frame (setzt js) - ohne Transition, sonst springt es */
  transform: scaleY(var(--ab-p)); transform-origin: top;
}
.ablauf-punkt { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--raum-2xl); margin-bottom: var(--ab-takt); }
.ablauf-punkt:last-child { margin-bottom: 0; }
.ablauf-knoten {
  grid-column: 2; grid-row: 1;
  display: inline-flex; align-items: center; gap: var(--raum-s);
  padding: var(--button-padding);
  border: var(--hairline); border-radius: var(--border-radius-big);
  background-color: var(--flaeche);
  color: var(--text-80);
  font-size: var(--text-lead); letter-spacing: var(--ls-mittel); line-height: var(--lh-lead); white-space: nowrap;
}
.ablauf-knoten.hell { background-color: var(--text-farbe); color: var(--text-invers); border-color: transparent; cursor: pointer; }
/* Play/Pause umschalten (die globale Regel gilt nur fuer .player) */
.ablauf-knoten.spielt .play-btn .ikon-play { display: none; }
.ablauf-knoten.spielt .play-btn .ikon-pause { display: block; }
.ablauf-knoten .play-btn { width: 32px; height: 32px; margin-right: 2px; color: inherit; }
.ablauf-info { grid-row: 1; margin: 0; max-width: 30ch; color: var(--text-60); font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis); }
.ablauf-punkt:nth-child(odd) .ablauf-info { grid-column: 1; justify-self: end; }
.ablauf-punkt:nth-child(even) .ablauf-info { grid-column: 3; justify-self: start; }
@media screen and (max-width: 767px) {
  .ablauf-punkt { grid-template-columns: auto 1fr; column-gap: var(--raum-m); }
  .ablauf-linie { left: 24px; }
  .ablauf-knoten { grid-column: 1; font-size: var(--text-lead); letter-spacing: var(--ls-mittel); line-height: var(--lh-lead); }
  .ablauf-punkt:nth-child(odd) .ablauf-info, .ablauf-punkt:nth-child(even) .ablauf-info { grid-column: 2; justify-self: start; text-align: left; }
}

/* Vorteile-Raster, Miniatur-Atome, Use Case, FAQ und Sorgen-Slider liegen
   in css/global.css - sie werden von mehreren Seiten genutzt. Hier bleiben
   nur die Illustrationen dieser Seite. */

/* 1 · Standorte: Brand Voice -> Stores */
.ill-standorte { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0; }
.ill-standorte svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ill-standorte path { fill: none; stroke: rgba(var(--hair-rgb), var(--hair-a)); stroke-width: var(--hair-w); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset var(--dur-zeichnen) var(--ease) calc(var(--delay-zeichnen) + var(--i) * var(--stagger) * 2); }
.vorteil-zelle.ist-sichtbar .ill-standorte path { stroke-dashoffset: 0; }
.ill-stores { display: flex; flex-flow: column; gap: var(--raum-xs); }
.ill-stores .ill-karte { height: 36px; box-sizing: border-box; }
.ill-standorte svg { height: 124px; }
.ill-stores .ill-karte { display: flex; align-items: center; gap: var(--raum-xs); white-space: nowrap; }
.ill-stores .ill-punkt { color: var(--gruen-soft, #8fcfa4); }
/* 2 · Regie: drei Takes auf einer Linie, der dritte ist freigegeben */
.ill-takes-linie { --delay-frei: calc(var(--delay-zeichnen) + var(--dur-zeichnen) * 0.7); position: relative; display: flex; justify-content: space-between; align-items: flex-end; width: 100%; max-width: 320px; height: 70px; }
.ill-takes-linie::before { content: ""; position: absolute; left: -8%; right: -8%; bottom: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(var(--hair-rgb), var(--hair-a)) 20%, rgba(var(--hair-rgb), var(--hair-a)) 80%, transparent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-zeichnen) var(--ease) var(--delay-zeichnen); }
.vorteil-zelle.ist-sichtbar .ill-takes-linie::before { transform: scaleX(1); }
.ill-take-punkt { position: relative; display: flex; flex-flow: column; align-items: center; gap: var(--raum-xs); padding-bottom: var(--raum-s); }
.ill-take-punkt::after { content: ""; position: absolute; bottom: -3px; width: 7px; height: 7px; border-radius: var(--border-radius-klein); background-color: var(--text-60); transition: background-color var(--transition-langsam); }
.ill-take-punkt .ill-label { transition: color var(--transition-langsam); }
/* Freigabe zuletzt: erst wenn Linie und Takes stehen, hebt sich der dritte hervor */
.vorteil-zelle.ist-sichtbar .ill-take-punkt.frei::after { background-color: var(--text-farbe); transition-delay: var(--delay-frei); }
.vorteil-zelle.ist-sichtbar .ill-take-punkt.frei .ill-label { color: var(--text-farbe); transition-delay: var(--delay-frei); }
@media (prefers-reduced-motion: reduce) {
  .ill-takes-linie::before { transform: scaleX(1); transition: none; }
  .vorteil-zelle.ist-sichtbar .ill-take-punkt.frei::after, .vorteil-zelle.ist-sichtbar .ill-take-punkt.frei .ill-label { transition: none; }
}
/* 2 (alt) · Regie: Regieanweisungen */
.ill-notizen { display: flex; flex-flow: column; gap: var(--raum-xs); width: 100%; max-width: 300px; }
.ill-notiz { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-s); }
.ill-notiz.frei .ill-karte { background-color: var(--text-farbe); color: var(--text-invers); border-color: transparent; }
/* 3 · Studio: horizontale Wellen, zeichnen sich, laufen nach aussen aus */
.ill-wellen { width: 100%; max-width: 360px; -webkit-mask-image: linear-gradient(to right, transparent, black 22%, black 78%, transparent); mask-image: linear-gradient(to right, transparent, black 22%, black 78%, transparent); }
.ill-wellen svg { display: block; width: 100%; height: auto; overflow: visible; }
.ill-wellen path { fill: none; stroke: var(--text-60); stroke-width: var(--hair-w); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset var(--dur-zeichnen) var(--ease) calc(var(--delay-zeichnen) + var(--i) * var(--stagger) * 2); }
.ill-wellen path.leise { stroke: var(--text-40); }

.vorteil-zelle.ist-sichtbar .ill-wellen path { stroke-dashoffset: 0; }
/* 4 · Sprachen: Wolke, laeuft nach aussen aus */
/* 4 · Sprachen: Chip-Wolke, laeuft nach aussen aus */
.ill-wolke { display: flex; flex-flow: column; align-items: center; gap: var(--raum-xs); width: 100%; max-width: 440px;
  -webkit-mask-image: radial-gradient(62% 70% at 50% 50%, black 45%, transparent 100%); mask-image: radial-gradient(62% 70% at 50% 50%, black 45%, transparent 100%); }
.ill-wolke-zeile { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--raum-xs); } /* bricht um statt rechts rauszuclippen */
.ill-wolke .ill-sprache { height: 36px; padding: 0 var(--raum-s); }
/* 2 · Regie: Takes (alt) */
.ill-takes { display: flex; flex-flow: column; gap: var(--raum-xs); width: 100%; max-width: 320px; }
.ill-take { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--raum-s); }
.ill-take-balken { position: relative; height: 1px; background-color: rgba(var(--hair-rgb), var(--hair-a)); }
.ill-take-balken::after { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: var(--w); border-radius: var(--border-radius-klein); background-color: var(--text-60); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-wattig) calc(var(--delay-zeichnen) + var(--i) * var(--stagger) * 2); }
.vorteil-zelle.ist-sichtbar .ill-take-balken::after { transform: scaleX(1); }
.ill-take.gewaehlt .ill-take-balken::after { background-color: var(--text-farbe); }
.ill-take.gewaehlt .ill-label { color: var(--text-farbe); }
/* 3 · Studio: zwei Knoten, ein Weg */
.ill-studio { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0; }
.ill-knoten {
  display: flex; align-items: center; justify-content: center;
  width: clamp(64px, 6vw, 84px); height: clamp(64px, 6vw, 84px);
  border: var(--hairline); border-radius: var(--border-radius-big);
  background-color: var(--feld);
  color: var(--text-80);
}
.ill-knoten svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ill-knoten.hell { background-color: var(--text-farbe); color: var(--text-invers); border-color: transparent; }
.ill-weg { position: relative; height: 1px; margin: 0 -1px; background-color: rgba(var(--hair-rgb), var(--hair-a)); }
.ill-weg .ill-pill { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; background-color: var(--feld); color: var(--text-80); border: var(--hairline); white-space: nowrap; }
.ill-weg::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background-color: var(--text-60); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-zeichnen) var(--ease) var(--delay-zeichnen); }
.vorteil-zelle.ist-sichtbar .ill-weg::after, .gegen-zelle.ist-sichtbar .ill-weg::after { transform: scaleX(1); }
/* 4 · Sprachen: Chip-Raster, Rand laeuft aus */
.ill-sprachen { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--raum-xs); width: 100%; max-width: 340px; }
.ill-sprache { display: flex; align-items: center; justify-content: center; height: 40px; border: var(--hairline); border-radius: var(--border-radius-klein); color: var(--text-60); font-size: var(--text-basis); line-height: var(--lh-basis); letter-spacing: var(--ls-klein); }
.ill-sprache.aktiv { background-color: var(--text-farbe); color: var(--text-invers); border-color: transparent; }
.ill-sprache.rand { opacity: 0.35; }


/* ============================================================
   Wie ein Spot entsteht: DAW-Zeitraster. Linien laufen nach oben und unten
   ins Dunkelblau aus, die aeusseren sind leiser; die drei Bausteine sind
   Felder im Look der Miniaturen und setzen sich zum Spot zusammen.
   ============================================================ */
.timeline {
  --tl-hoehe: clamp(32.5rem, 46.8vw, 48.75rem); /* Originalhoehe +30% */
  --tl-linie-takt: calc(var(--stagger) * 0.75);
  --tl-felder-start: calc(var(--tl-linie-takt) * 15 + var(--dur-standard));
  --tl-felder-takt: calc(var(--stagger) * 3);
  --tl-vereinen-dauer: calc(var(--dur-wattig) * 1.5);
  --tl-vereinen-takt: calc(var(--stagger) * 2);
  --tl-feld-hoehe: 11%;
  --tl-knopf-abstand: clamp(24px, 3vw, 52px);
  --tl-linie-a: calc(var(--hair-a) * 0.7);
  position: relative; height: var(--tl-hoehe);
  background: var(--glow-breit);
}
.takt-linie {
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  /* nach aussen (oben/unten) ins Dunkelblau; --d = Abstand zur Mitte (0..1) dimmt die Randlinien */
  background: linear-gradient(to bottom, transparent, rgba(var(--hair-rgb), calc(var(--tl-linie-a) * (1 - var(--d, 0) * 0.7))) 30%, rgba(var(--hair-rgb), calc(var(--tl-linie-a) * (1 - var(--d, 0) * 0.7))) 70%, transparent);
  opacity: 0;
  transition: opacity var(--transition-standard) calc(var(--i) * var(--tl-linie-takt));
}
.takt-linie.letzte { transform: translateX(-1px); }
.timeline.laeuft .takt-linie { opacity: 1; }
.baustein {
  position: absolute; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: var(--raum-s);
  height: var(--tl-feld-hoehe);
  padding: var(--button-padding);
  border: var(--hairline);
  border-radius: var(--border-radius-klein);
  background-color: var(--feld);
  color: var(--text-80);
  font-size: var(--text-lead); letter-spacing: var(--ls-mittel); line-height: var(--lh-lead); text-align: center;
  opacity: 0;
  transition: left var(--tl-vereinen-dauer) var(--ease), top var(--tl-vereinen-dauer) var(--ease), border-radius var(--tl-vereinen-dauer) var(--ease), clip-path var(--tl-vereinen-dauer) var(--ease), opacity var(--transition-wattig);
}
.baustein.intro, .baustein.outro { background-color: var(--feld); color: var(--text-80); }
.baustein.stimme { background-color: var(--feld); color: var(--white); clip-path: inset(0 round var(--border-radius-klein)); }
.baustein-p5 { opacity: 0.55; }
.timeline.vereint .baustein.stimme { clip-path: inset(0); }
.baustein-p5 { position: absolute; inset: 0; z-index: 0; }
.baustein span { position: relative; z-index: 1; }
.baustein.intro { left: 0; top: 14%; width: 24%; }
.baustein.stimme { left: 24%; top: 42.5%; width: 52%; }
.baustein.outro { left: 76%; top: 71%; width: 24%; }
.timeline.laeuft .baustein { opacity: 1; }
.timeline.laeuft .baustein.intro { transition-delay: var(--tl-felder-start); }
.timeline.laeuft .baustein.stimme { transition-delay: calc(var(--tl-felder-start) + var(--tl-felder-takt)); }
.timeline.laeuft .baustein.outro { transition-delay: calc(var(--tl-felder-start) + var(--tl-felder-takt) * 2); }
.timeline.vereint .baustein { top: 42.5%; }
.timeline.vereint .baustein.intro { transition-delay: 0s; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.timeline.vereint .baustein.stimme { transition-delay: var(--tl-vereinen-takt); border-radius: 0; }
.timeline.vereint .baustein.outro { transition-delay: calc(var(--tl-vereinen-takt) * 2); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.playline {
  position: absolute; left: 0; top: 34%; height: 32%; width: 3px; z-index: 2;
  border-radius: var(--border-radius-klein);
  background-color: var(--text-farbe);
  opacity: 0;
  transition: opacity var(--transition-wattig);
}
.timeline.fertig .playline { opacity: 1; }
.spot-play {
  position: absolute; bottom: var(--tl-knopf-abstand); left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: var(--button-pad-y);
  padding: var(--button-padding);
  border: var(--hairline);
  border-radius: var(--border-radius-big);
  background-color: var(--feld);
  color: var(--text-farbe);
  font-family: var(--font-family-base);
  font-size: var(--text-basis); line-height: var(--lh-basis); letter-spacing: var(--ls-klein);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-wattig) var(--dur-standard);
}
.spot-play svg { width: 1em; height: 1em; fill: currentColor; }
.spot-play .ikon-stop { opacity: 0; }
.timeline.spielt .spot-play .ikon-play { opacity: 0; }
.timeline.spielt .spot-play .ikon-stop { opacity: 1; }
.spot-play .ikon-play, .spot-play .ikon-stop { transition: opacity var(--transition-standard); }
.timeline.fertig .spot-play { opacity: 1; pointer-events: auto; }
.timeline:not(.fertig) .spot-play { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .takt-linie, .baustein, .playline, .spot-play { opacity: 1; transition: none; } }
@media screen and (max-width: 767px) {
  .timeline { --tl-hoehe: 90svh; }
  .baustein { font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis); padding: 0 var(--button-pad-y); }
  .baustein.intro, .timeline.vereint .baustein.intro { width: 26%; }
  .baustein.stimme, .timeline.vereint .baustein.stimme { left: 26%; width: 48%; }
  .baustein.outro, .timeline.vereint .baustein.outro { left: 74%; width: 26%; }
}

.systems-karte { position: relative; display: flex; flex-flow: column; width: 100%; border-radius: var(--border-radius-big); }
.systems-karte img { display: block; width: 100%; aspect-ratio: 2.7 / 1; object-fit: cover; opacity: 0.85; border-radius: var(--border-radius-big) var(--border-radius-big) 0 0; }
.systems-karte-zeile { display: flex; align-items: center; justify-content: space-between; padding: var(--pad-feld-s); }
.systems-karte-zeile h2 { margin: 0; max-width: none; color: var(--text-farbe); font-size: var(--heading-s); letter-spacing: var(--ls-gross); line-height: var(--lh-heading-s); }
@media screen and (max-width: 767px) {
  .systems-karte { min-height: 90svh; }
  .systems-karte img { flex: 1 1 auto; min-height: 0; height: 100%; aspect-ratio: auto; }
  .systems-karte-zeile { flex-flow: column; align-items: flex-start; }
}


/* ################################################################
   SEITE: HOME
   ################################################################ */
/* sound-dna.com – Seiten-Styles: Home
   Baut auf css/global.css auf (Tokens, Basis, Nav, Footer). */

/* ==== index.CjiGk1jz.css ==== */
.home-p5-waves{z-index:-1;width:100%;height:100%;position:absolute;inset:0}
/* Home-Hero: das p5 behaelt die volle Feld-Hoehe aus Schritt 1 - wenn die Zeile
   aufklappt, wird es unten nur vom Feld beschnitten, nie gestaucht */
.hero .home-p5-waves{height:calc(100svh - 2 * var(--seiten-rand-klein));inset:50% 0 auto 0;transform:translateY(-50%)}@keyframes hero-setzen{0%,35%{clip-path:inset(0 round 0);transform:scale(1.07)}100%{clip-path:inset(0 round var(--border-radius-big));transform:scale(1)}}
/* Schritt 2: die Zeile unter dem Feld klappt auf (Layout statt Transform - nichts wird gestreckt) */
@keyframes hero-platz{from{max-height:0;margin-top:0}to{max-height:64px;margin-top:var(--raum-l)}}
@media screen and (max-width: 767px){@keyframes hero-platz{from{max-height:0;margin-top:0}to{max-height:180px;margin-top:var(--raum-l)}}}/* Seitenwechsel: Hero blendet weich ein (Klasse in head.js) */
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
html.seiten-fade .hero{animation:hero-fade var(--dur-wattig) var(--ease) both}
html.seiten-fade [data-p5-gradient] canvas{animation:hero-fade var(--dur-wattig) var(--ease) both}
html.lade-choreo .hero .section-breit-padding{animation:hero-setzen var(--hero-setzen) var(--ease) forwards}
html.lade-choreo .hero-zeile{max-height:0;margin-top:0;padding-top:0;padding-bottom:0;overflow:hidden;animation:hero-platz var(--dur-traege) var(--ease) calc(var(--hero-setzen) + var(--dur-traege)) forwards}html.lade-choreo .hero-heading,html.lade-choreo .hero-subline,html.lade-choreo .home-hero-buttons{animation-duration:var(--dur-wattig)}html.lade-choreo .hero-heading{animation-delay:var(--hero-inhalt-start)}html.lade-choreo .hero-subline{animation-delay:calc(var(--hero-setzen) + var(--dur-traege) + var(--dur-langsam))}html.lade-choreo .home-hero-buttons{animation-delay:calc(var(--hero-setzen) + var(--dur-traege) + var(--dur-langsam) + var(--hero-inhalt-takt))}.hero-heading{color:var(--text-80);font-size:11.5vw; letter-spacing: var(--ls-gross);margin:0;line-height:0.9}/* Hero-Buttons auf hellem Grund: dunkle Kontur statt weiss */
.home-hero-buttons{flex:none}
.home-hero-buttons .button-feld{color:var(--text-farbe);border-color:var(--text-farbe)}
.home-hero-buttons .button-feld:hover{background-color:var(--hover-tint)}
.hero-subline{color:var(--text-farbe);margin:0;font-size:var(--text-lead); letter-spacing: var(--ls-mittel);line-height: var(--lh-lead)}.home-hero-buttons{gap: var(--raum-m);display:flex}.hero-heading,.hero-subline,.home-hero-buttons{opacity:0;animation:hero-einblenden var(--hero-einblenden) var(--ease) forwards}.hero-heading{animation-delay:calc(var(--stagger) * 2.5)}.hero-subline{animation-delay:calc(var(--stagger) * 4.5)}.home-hero-buttons{animation-delay:calc(var(--stagger) * 7)}@keyframes hero-einblenden{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.hero-heading,.hero-subline,.home-hero-buttons{animation:none;opacity:1}}@media screen and (max-width: 767px){}

  

  

  

  

  @media (prefers-reduced-motion: reduce) {
    
    
    
  }

  /* Dezent wie im Figma: Logos über die Höhe vereinheitlicht statt riesiger
     Breiten – die Wort-/Bildmarken wirken dadurch als ruhige Reihe */
  .kundenlogo {
    height: clamp(22px, 2.6vw, 46px);
    width: auto;
  }

  .kundenlogo.ikea { height: clamp(26px, 3vw, 54px); }
/* Kopf-Headlines, die immer zweizeilig brechen sollen */
.schmal-heading.zweizeilig { max-width: 30ch; }
  .ueberuns-label{color:var(--darkblue-80);font-size:var(--text-gross);letter-spacing:var(--ls-mittel);line-height: var(--lh-gross);margin-bottom:var(--raum-m)}.ueberuns-text{font-size:var(--about-text);line-height: var(--lh-about);letter-spacing:var(--ls-gross);margin:0;max-width:92%}.wort{color:var(--darkblue-40);transition:color var(--transition-standard)}.wort.aktiv{color:var(--dunkelblau)}@media (prefers-reduced-motion: reduce){.wort{color:var(--dunkelblau);transition:none}}.home-about-grid{column-gap: var(--grid-gap);row-gap:var(--abstand-kopf);grid-template-rows:auto auto;grid-template-columns:1fr 1fr 1fr 1fr;grid-auto-columns:1fr;display:grid}.person-bild-wrap{position:relative;border-radius:var(--border-radius-big);overflow:hidden}.person-img{display:block;aspect-ratio:362 / 509;width:100%;object-fit:cover}.person-info{position:absolute;left:8px;right:8px;bottom:8px;margin:0;background-color:var(--white);border-radius:var(--border-radius-klein);padding: var(--raum-s);font-size:var(--text-basis);letter-spacing:var(--ls-klein);line-height: var(--lh-basis);color:var(--darkblue-60);opacity:0;transition:opacity var(--transition-standard)}.home-about-person:hover .person-info{opacity:1}.person-name-title{font-size:var(--text-gross);letter-spacing:var(--ls-mittel);line-height: var(--lh-gross);margin-top: var(--raum-s);margin-bottom:0}@media screen and (max-width: 767px){.home-about-grid{grid-template-columns:1fr 1fr;row-gap: var(--raum-xl)}.home-about-person{grid-column:auto!important;grid-row:auto!important}}

/* ---------- Team: Personen staggern einzeln ---------- */
.home-about-person:nth-child(3n + 2) { --reveal-delay: calc(var(--stagger) * 2); }
.home-about-person:nth-child(3n) { --reveal-delay: calc(var(--stagger) * 4); }

/* ---------- Handy-Feinschliff ---------- */
@media screen and (max-width: 767px) {
  /* Hero: weniger Padding, mehr Luft zwischen den Textzeilen und zu den Buttons */
  /* Hero vollflaechig: Rand- und Radius-Token im Hero auf 0 gedreht */
  .section-breit.hero { --seiten-rand-klein: 0px; }
  .hero .section-breit-padding { --border-radius-big: 0px; padding: var(--seiten-rand-gross); }
  
  
  /* Erforscht: Feld 90svh, der lange Text sitzt am unteren Ende */
  .studienfeld { min-height: 70svh; justify-content: space-between; }
  .studie-paragraph { margin-top: auto; }
  /* Ueber uns: etwas groesser */
  .ueberuns-text { font-size: 2.125rem; }
}

/* ---------- Kunden: kleine Headline links, Logo-Wall rechts ----------
   Die Wall ist ein Hairline-Raster im Stil der Studien-/Erfolgsfelder;
   die Logos blenden wattig gestaffelt ein (Reveal-System) und werden
   beim Hover voll deckend. */
/* Kunden-Ticker: Headline links am grossen Seitenrand, rechts laufen die Logos
   als Endlos-Band innerhalb der Section - beide Kanten faden weich aus */
.kunden-ticker{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
.kunden-spur{width:max-content;display:flex;animation:kunden-lauf calc(var(--dur-playline) * 6) linear infinite reverse}
.kunden-gruppe{flex:none;align-items:center;gap:clamp(48px,6vw,110px);padding-right:clamp(48px,6vw,110px);display:flex}
.kunden-spur .kundenlogo{flex:none;opacity:0.12;height:clamp(26px,3vw,54px)}
@keyframes kunden-lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.kunden-spur{animation:none}}
@media screen and (max-width: 991px){.kunden-flex{grid-template-columns:1fr}.kunden-heading{max-width:none}}



/* Versatz: jede zweite Reihe rueckt ein, die Fugen stehen nie uebereinander */




@media screen and (max-width: 991px) {
  
  
}
@media screen and (max-width: 767px) {
  
  
  
}


/* ################################################################
   SEITE: MUSIC SERVICE
   ################################################################ */
/* sound-dna.com - Seiten-Styles: Music Service
   Nur die Sektionen, die es sonst nirgends gibt. Raster, Use Case, FAQ,
   Sorgen-Slider, Studienfeld und Erfolg-Module kommen aus css/global.css. */

/* ============================================================
   Hero: gruene p5-Flaeche, daneben der blinkende Live-Punkt
   ============================================================ */
/* Aufbau wie der Text-to-Store-Hero: Flaeche auf halber Hoehe,
   darunter steht die Aussage an der Stelle der 72h-5min-Zahlen */
.section-breit.hero.hero-unterseite.ms-hero { height: 100svh; }
.ms-hero-padding { --ms-claim-start: 1200ms; display: flex; flex-flow: column; align-items: center; gap: var(--raum-m); padding: 0; }
.ms-hero-flaeche {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50svh;
  border-radius: var(--border-radius-big);
  clip-path: inset(0 round var(--border-radius-big));
}
.ms-hero-titel { position: relative; }
.ms-hero-aussage { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
.ms-hero-claim {
  margin: 0; max-width: none;
  color: var(--text-farbe);
  font-size: inherit; line-height: var(--lh-heading-l); letter-spacing: var(--ls-gross);
  opacity: 0;
  animation: ms-einblenden var(--dur-wattig) var(--ease) var(--ms-claim-start) forwards;
}
.ms-hero-aussage { font-size: var(--heading-l); }  /* gleich gross wie der Hero-Titel */

/* Der Titel kommt Zeichen fuer Zeichen, danach der Claim, zuletzt der Punkt */
.ms-hero-titel { --ms-zeichen-takt: 45ms; --ms-start: 420ms; }
.ms-zeichen {
  display: inline-block;
  opacity: 0; transform: translateY(0.28em);
  animation: ms-zeichen-rein var(--dur-wattig) var(--ease) calc(var(--ms-start) + var(--i) * var(--ms-zeichen-takt)) forwards;
}
@keyframes ms-zeichen-rein { to { opacity: 1; transform: none; } }
@keyframes ms-einblenden { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ms-zeichen, .ms-hero-claim { opacity: 1; transform: none; animation: none; }
}
/* Live-Punkt: echter Kreis, sitzt rechts oben am Titel */
.live-punkt {
  position: absolute; top: 0.06em; left: 100%;
  width: 0.2em; height: 0.2em; margin-left: 0.18em;
  fill: var(--white);
  opacity: 0;
  animation: ms-einblenden var(--dur-wattig) var(--ease) 1600ms forwards, live-blinken 2s var(--ease) 2400ms infinite;
}
@keyframes live-blinken { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .live-punkt { animation: none; } }

/* ============================================================
   Miniaturen der vier Felder (Marke, Angebot, Raeume, Zielgruppe)
   in derselben Bildsprache wie auf Text-to-Store: Haarlinien,
   kleine Felder, gestaffeltes Erscheinen.
   ============================================================ */

/* 1 - Marke: eine Pill verzweigt sich auf drei Werte */
.ill-marke { display: flex; flex-flow: column; align-items: center; width: 100%; max-width: 320px; }
.ill-marke svg { display: block; width: 100%; height: 90px; overflow: visible; }
.ill-marke path {
  fill: none; stroke: rgba(var(--hair-rgb), var(--hair-a)); stroke-width: var(--hair-w);
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--dur-zeichnen) var(--ease) var(--delay-zeichnen);
}
.vorteil-zelle.ist-sichtbar .ill-marke path { stroke-dashoffset: 0; }
.ill-werte { display: flex; justify-content: space-between; width: 100%; gap: var(--raum-xs); }

/* 2 - Angebot: Karten des Tages, die mittlere ist gesetzt */
.ill-angebot { display: flex; flex-flow: column; gap: var(--raum-xs); width: 100%; max-width: 300px; }
.ill-zeile {
  display: flex; align-items: center; gap: var(--raum-s);
  padding: var(--raum-s) var(--raum-m);
  border: var(--hairline); border-radius: var(--border-radius-klein);
  color: var(--text-60);
  font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis);
  transition: color var(--transition-langsam), border-color var(--transition-langsam), background-color var(--transition-langsam);
}
.ill-zeile .ill-label { min-width: 5ch; }
.vorteil-zelle.ist-sichtbar .ill-zeile.gewaehlt {
  color: var(--text-farbe);
  border-color: rgba(var(--hair-rgb), calc(var(--hair-a) * 2.4));
  background-color: var(--hover-tint);
  transition-delay: calc(var(--delay-zeichnen) + var(--dur-zeichnen) * 0.5);
}

/* 3 - Raeume: Grundriss zeichnet sich, danach gehen die Quellen an */
.ill-raeume { position: relative; width: 100%; max-width: 300px; }
.ill-raeume svg { display: block; width: 100%; height: auto; }
.ill-raeume rect, .ill-raeume path {
  fill: none; stroke: rgba(var(--hair-rgb), var(--hair-a)); stroke-width: var(--hair-w);
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--dur-zeichnen) var(--ease) var(--delay-zeichnen);
}
.ill-raeume .ill-trenner { stroke: rgba(var(--hair-rgb), calc(var(--hair-a) * 0.7)); }
.vorteil-zelle.ist-sichtbar .ill-raeume rect,
.vorteil-zelle.ist-sichtbar .ill-raeume path { stroke-dashoffset: 0; }
.ill-quelle {
  position: absolute; width: 7px; height: 7px; border-radius: var(--border-radius-klein);
  background-color: var(--text-60);
}
.ill-quelle::after {
  content: ''; position: absolute; inset: -9px;
  border: var(--hairline); border-radius: var(--border-radius-klein);
}
.ill-quelle[data-pos='a'] { left: 24%; top: 30%; }
.ill-quelle[data-pos='b'] { left: 24%; top: 70%; }
.ill-quelle[data-pos='c'] { left: 74%; top: 26%; }
.ill-quelle[data-pos='d'] { left: 74%; top: 74%; }

/* 4 - Zielgruppe: Chips aus der Mitte heraus */
.ill-zielgruppe {
  display: flex; flex-flow: row wrap; justify-content: center;
  gap: var(--raum-xs); width: 100%; max-width: 300px;
}

/* ============================================================
   Slider mit vollbreiten Feldern: Grafik oben, Text darunter
   ============================================================ */
.ms-slider .slider_item.ms-karte {
  width: 100%;
  /* die Basis-Karte richtet ihren Inhalt unten aus - hier soll er die volle Breite fuellen */
  display: flex; flex-flow: column; align-items: stretch; justify-content: space-between; gap: var(--pad-feld-m);
  padding: var(--pad-feld-l);
  border: var(--hairline); border-radius: var(--border-radius-big);
  background: var(--glow-breit);
}
.ms-karte-grafik { flex: 1; display: flex; align-items: center; justify-content: center; min-height: clamp(180px, 18vw, 300px); }
/* Die Miniatur-Elemente blenden sonst nur in einer Vorteile-Zelle ein -
   in den Slider-Karten uebernimmt das der sichtbare Slider-Wrapper */
.ms-karte.ist-sichtbar .ill-el { opacity: 1; transform: none; }
.ms-karte-titel { margin: 0 0 var(--raum-s); color: var(--text-farbe); font-size: var(--text-lead); letter-spacing: var(--ls-mittel); line-height: var(--lh-lead); }
.ms-karte-beschreibung { margin: 0; max-width: 62ch; color: var(--text-60); font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis); }

/* Tageszeitkurve: Raster steht, die Kurve zeichnet sich darueber */
.ms-kurve { width: 100%; }
.ms-kurve svg { display: block; width: 100%; height: clamp(160px, 16vw, 260px); overflow: visible; }
.ms-kurve path { fill: none; stroke-dasharray: 100; stroke-dashoffset: 100; }
.ms-raster-linie {
  stroke: rgba(var(--hair-rgb), calc(var(--hair-a) * 0.7)); stroke-width: var(--hair-w);
  transition: stroke-dashoffset var(--dur-zeichnen) var(--ease) calc(var(--delay-zeichnen) + var(--i, 0) * var(--stagger));
}
.ms-kurve-linie {
  stroke: var(--text-80); stroke-width: 1.5; stroke-linecap: round;
  transition: stroke-dashoffset calc(var(--dur-zeichnen) * 1.4) var(--ease) calc(var(--delay-zeichnen) + var(--dur-standard));
}
.ms-karte.ist-sichtbar .ms-kurve path { stroke-dashoffset: 0; }
.ms-kurve-linie { stroke-linejoin: round; }
/* Uhrzeiten sitzen genau auf ihrer Rasterlinie */
.ms-kurve-stunden { position: relative; height: 1.4em; margin-top: var(--raum-s); }
.ms-kurve-stunden span {
  position: absolute; left: var(--x); translate: -50% 0;
  color: var(--text-40); font-size: var(--text-klein); line-height: var(--lh-klein); letter-spacing: var(--ls-klein);
}

/* Klangbild: vier Drehregler wie am Pult */
.ms-regler-reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--abstand-kopf); width: 100%; }
.ms-regler { display: flex; flex-flow: column; align-items: center; gap: var(--raum-s); }
.ms-regler svg { display: block; width: clamp(64px, 7vw, 104px); height: auto; overflow: visible; }
@property --wert { syntax: '<number>'; inherits: true; initial-value: 0; }
.ms-regler path { fill: none; stroke-linecap: round; }
.ms-regler-weg { stroke: rgba(var(--hair-rgb), calc(var(--hair-a) * 1.6)); stroke-width: 2; }
/* Bogenlaenge und Zeiger folgen beide --wert - sie koennen gar nicht auseinanderlaufen */
.ms-regler-wert { stroke: var(--text-farbe); stroke-width: 3; stroke-dasharray: 0 100; }
.ms-regler-zeiger {
  stroke: var(--text-farbe); stroke-width: 2.5; stroke-linecap: round;
  transform: rotate(225deg); transform-origin: 50px 50px;
}
.ms-regler-nabe { fill: var(--text-40); }
/* beim Sichtbarwerden auf den Wert fahren, danach leise weiterjustieren */
.ms-karte.ist-sichtbar .ms-regler { animation: regler-setzen var(--dur-zeichnen) var(--ease) var(--delay-zeichnen) forwards,
                                               regler-justieren 7s var(--ease) calc(var(--delay-zeichnen) + var(--dur-zeichnen)) infinite alternate; }
.ms-karte.ist-sichtbar .ms-regler-wert { stroke-dasharray: var(--wert) 100; }
.ms-karte.ist-sichtbar .ms-regler-zeiger { transform: rotate(calc(225deg + var(--wert) * 2.7deg)); }
@keyframes regler-setzen { from { --wert: 0; } to { --wert: var(--a); } }
@keyframes regler-justieren { from { --wert: var(--a); } to { --wert: var(--b); } }
@media (prefers-reduced-motion: reduce) {
  .ms-karte.ist-sichtbar .ms-regler { animation: none; --wert: var(--a); }
}

/* Saisonale Batches: Jahresraster, vier Monate liefern frische Titel */
.ms-jahr-raster {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--raum-xs);
  width: 100%;
}
.ms-monat {
  display: flex; flex-flow: column; gap: 2px;
  min-height: clamp(72px, 7vw, 104px);
  padding: var(--raum-s) var(--raum-m);
  border: var(--hairline); border-radius: var(--border-radius-klein);
  color: var(--text-60);
  font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis);
}
.ms-monat.liefert {
  color: var(--text-farbe);
  border-color: rgba(var(--hair-rgb), calc(var(--hair-a) * 2.4));
  background-color: var(--hover-tint);
}
.ms-monat-batch { margin-top: auto; }
.ms-monat-zahl { color: var(--text-60); font-size: var(--text-klein); line-height: var(--lh-klein); letter-spacing: var(--ls-klein); }

/* ============================================================
   Tagesverlauf: gestricheltes Raster, darauf die Kanaele als
   Play-Pillen - sie steigen ueber den Tag an
   ============================================================ */
.tagesverlauf {
  position: relative;
  padding-inline: var(--pad-feld-m);
  height: clamp(24rem, 30vw, 32rem);
  width: 100%;
}
.tag-raster { position: absolute; inset: 0 0 1.8em; display: flex; justify-content: space-between; }
.tag-zeit {
  position: absolute; bottom: -1.6em; left: 50%; translate: -50% 0;
  /* erste und letzte Zeit ruecken nach innen, damit sie nicht abgeschnitten werden */
  color: var(--text-40); font-size: var(--text-klein); line-height: var(--lh-klein); letter-spacing: var(--ls-klein);
  white-space: nowrap;
}
.tag-linie:first-child .tag-zeit { left: 0; translate: 0 0; }
.tag-linie:last-child .tag-zeit { left: auto; right: 0; translate: 0 0; }
.tag-linie {
  position: relative;
  width: var(--hair-w);
  opacity: 0;
  transition: opacity var(--transition-langsam) calc(var(--delay-zeichnen) + var(--i, 0) * var(--stagger) * 0.5);
}
/* Der Strich liegt im Pseudo-Element - sonst wuerde die Auslauf-Maske
   auch die Uhrzeit darunter wegschneiden */
.tag-linie::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(to bottom, rgba(var(--hair-rgb), calc(var(--hair-a) * 0.9)) 50%, transparent 50%);
  background-size: var(--hair-w) 10px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.tagesverlauf.ist-sichtbar .tag-linie { opacity: 1; }
.tag-pille {
  position: absolute; left: calc(var(--pad-feld-m) + var(--x)); top: var(--y);
  display: inline-flex; align-items: center; gap: var(--raum-s);
  padding: var(--raum-s) var(--raum-m);
  border: var(--hairline); border-radius: var(--border-radius-klein);
  background-color: var(--feld);
  color: var(--text-farbe);
  font-family: var(--font-family-base);
  font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis);
  cursor: pointer;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--transition-langsam) calc(var(--delay-zeichnen) + var(--i, 0) * var(--stagger) * 2),
              transform var(--transition-langsam) calc(var(--delay-zeichnen) + var(--i, 0) * var(--stagger) * 2),
              border-color var(--transition-standard);
}
.tagesverlauf.ist-sichtbar .tag-pille { opacity: 1; transform: none; }
.tag-pille .play-btn { pointer-events: none; }
.tag-pille-zeit { margin-left: var(--raum-xs); }
/* laufender Kanal: invertiert - dunkelblau auf Weiss (Icon und Zeit ziehen mit) */
.tag-pille.spielt { background-color: var(--white); border-color: var(--white); color: var(--dunkelblau); }
.tag-pille.spielt .play-btn svg { fill: var(--dunkelblau); }
.tag-pille.spielt .ill-label { color: var(--darkblue-60); }
.tag-pille.spielt .ikon-play { display: none; }
.tag-pille.spielt .ikon-pause { display: block; }
.tag-pille .ikon-play { display: block; }
.tag-pille .ikon-pause { display: none; }

/* ============================================================
   Einzelne hervorgehobene Zeile als eigenes Feld
   ============================================================ */
.raster-zeile-solo { border: 0; border-radius: var(--border-radius-big); padding: var(--pad-feld-l); }


@media screen and (max-width: 991px) {
  .ms-slider .slider_item.ms-karte { padding: var(--pad-feld-m); }
}

@media screen and (max-width: 767px) {
  .tagesverlauf { height: auto; display: flex; flex-flow: column; gap: var(--raum-s); }
  .tag-raster { display: none; }
  .tag-pille { position: static; justify-content: flex-start; width: 100%; }
  .ms-karte-grafik { min-height: 0; }
}

/* ============================================================
   Der About-Block gehoert zusammen: Banner, drei Fakten und das
   grosse Use-Case-Feld ruecken auf den halben Sektionsabstand.
   ============================================================ */
.seite-music-service .section-breit:has(.aussage-bild),
.seite-music-service .section-schmal:has(.fakten-drei) { margin-bottom: var(--abstand-bereich); }

/* Genug Breite, damit die Headline auf zwei Zeilen bleibt */
.ms-slider-heading { max-width: 22ch; }

/* letzter Kanal schliesst rechts mit demselben Abstand ab */
.tag-pille:last-of-type { left: auto; right: var(--pad-feld-m); }

/* Artikel-Sektion: eigenstaendiger Block, voller Sektionsabstand darunter */
.section-schmal.article { margin-bottom: var(--section-abstand); }

/* Ueberschrift im Use-Case-Feld (KI-Artikel) */
.usecase-heading-innen { margin: 0 0 var(--pad-feld-s); color: var(--text-farbe); font-size: var(--heading-s); letter-spacing: var(--ls-gross); line-height: var(--lh-heading-s); }

/* Der p5-Verlauf im CTA steht auf hellen Seiten auf hellem Grund und
   braucht dort mehr Deckkraft als auf den dunklen Seiten */
body:not(.theme-dark) .cta-padding .cta-p5-waves { opacity: calc(var(--aussage-bild-deckkraft) * 2.5); }

/* ################################################################
   SEITE: SYSTEMS
   ################################################################ */

/* Hero wie auf den anderen Unterseiten: Flaeche halbe Hoehe, darunter die Aussage */
.section-breit.hero.hero-unterseite.sys-hero { height: 100svh; }
.sys-hero-padding { display: flex; flex-flow: column; align-items: center; gap: var(--raum-m); padding: 0; }
.sys-hero-flaeche {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50svh;
  border-radius: var(--border-radius-big);
  clip-path: inset(0 round var(--border-radius-big));
}
.sys-hero-aussage { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--heading-l); }
.sys-hero-claim { margin: 0; color: var(--text-farbe); font-size: inherit; line-height: var(--lh-heading-l); letter-spacing: var(--ls-gross); }

/* Wirkung: dasselbe Raster wie die Vorteile, nur drei Felder */
.vorteile-raster.raster-drei { grid-template-columns: repeat(3, 1fr); }
.vorteile-raster.raster-drei .vorteil-zelle:nth-child(odd) { border-right-width: 0; }
.vorteile-raster.raster-drei .vorteil-zelle:not(:last-child) { border-right-width: var(--hair-w); }
.vorteile-raster.raster-drei .vorteil-zelle { border-bottom-width: 0; }
@media screen and (max-width: 767px) {
  .vorteile-raster.raster-drei { grid-template-columns: 1fr; }
  .vorteile-raster.raster-drei .vorteil-zelle:not(:last-child) { border-right-width: 0; border-bottom-width: var(--hair-w); }
}

/* Miniatur: Raum mit Gaesten */
.ill-raum { position: relative; width: 100%; max-width: 300px; }
.ill-raum svg { display: block; width: 100%; height: auto; }
.ill-raum rect {
  fill: none; stroke: rgba(var(--hair-rgb), var(--hair-a)); stroke-width: var(--hair-w);
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--dur-zeichnen) var(--ease) var(--delay-zeichnen);
}
.vorteil-zelle.ist-sichtbar .ill-raum rect { stroke-dashoffset: 0; }
.ill-glanz { display: none; }
.ill-gast { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; border-radius: var(--border-radius-klein); background-color: var(--text-60); }

/* Miniatur: Verweildauer als zwei Balken */
.ill-dauer { display: flex; flex-flow: column; gap: var(--raum-m); width: 100%; max-width: 300px; }
.ill-balken-zeile { display: flex; align-items: center; gap: var(--raum-s); }
.ill-balken-zeile .ill-label { min-width: 8ch; }
.ill-balken { position: relative; flex: 1; height: 8px; border-radius: var(--border-radius-klein); background-color: rgba(var(--hair-rgb), calc(var(--hair-a) * 0.8)); overflow: hidden; }
.ill-balken-fuell {
  position: absolute; inset: 0; width: var(--anteil);
  border-radius: var(--border-radius-klein); background-color: var(--text-60);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-zeichnen) var(--ease) calc(var(--delay-zeichnen) + var(--i, 0) * var(--stagger) * 2);
}
.vorteil-zelle.ist-sichtbar .ill-balken-fuell { transform: scaleX(1); }
.ill-wert { min-width: 6ch; color: var(--text-farbe); font-size: var(--text-basis); line-height: var(--lh-basis); letter-spacing: var(--ls-klein); text-align: right; }

/* Miniatur: Bewertungsskala */
.ill-skala { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--raum-xs); width: 100%; max-width: 300px; }
.ill-stufe { width: 34px; height: 10px; border-radius: var(--border-radius-klein); border: var(--hairline); }
.ill-stufe.voll { background-color: var(--text-60); border-color: transparent; }
.ill-skala-label { width: 100%; margin-top: var(--raum-xs); text-align: center; }

/* Slider-Grafik: zentrale Steuerung */
.ill-hub { display: flex; flex-flow: column; align-items: center; width: 100%; max-width: 520px; }
.ill-hub svg { display: block; width: 100%; height: 90px; overflow: visible; }
.ill-hub path {
  fill: none; stroke: rgba(var(--hair-rgb), var(--hair-a)); stroke-width: var(--hair-w);
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--dur-zeichnen) var(--ease) var(--delay-zeichnen);
}
.ms-karte.ist-sichtbar .ill-hub path { stroke-dashoffset: 0; }
.ill-filialen { display: flex; justify-content: space-between; width: 100%; gap: var(--raum-xs); }

/* Slider-Grafik: Pegel mit Zielbereich */
.ill-pegel { width: 100%; max-width: 620px; }
.ill-pegel-bahn { position: relative; height: 10px; border-radius: var(--border-radius-klein); background-color: rgba(var(--hair-rgb), calc(var(--hair-a) * 0.8)); }
.ill-pegel-zone { position: absolute; left: 46%; right: 26%; top: 0; bottom: 0; border-radius: var(--border-radius-klein); background-color: rgba(var(--hair-rgb), calc(var(--hair-a) * 2)); }
.ill-pegel-tick { position: absolute; left: var(--x); top: -6px; width: var(--hair-w); height: 6px; background-color: rgba(var(--hair-rgb), var(--hair-a)); }
.ill-pegel-marke {
  position: absolute; top: 50%; left: 58%; translate: -50% -50%;
  width: 14px; height: 22px; border-radius: var(--border-radius-klein); background-color: var(--text-farbe);
}
.ill-pegel-labels { display: flex; justify-content: space-between; margin-top: var(--raum-s); }
.ill-pegel-ziel { color: var(--text-farbe); }

/* Slider-Grafik: Schallverteilung */
.ill-verteilung { width: 100%; max-width: 620px; }
.ill-verteilung svg { display: block; width: 100%; height: auto; }
.ill-verteilung rect, .ill-verteilung circle { fill: none; stroke: rgba(var(--hair-rgb), var(--hair-a)); stroke-width: var(--hair-w); }
.ill-verteilung .ill-radius {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset var(--dur-zeichnen) var(--ease) calc(var(--delay-zeichnen) + var(--i, 0) * var(--stagger));
}
.ill-verteilung .ill-grundriss { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset var(--dur-zeichnen) var(--ease) var(--delay-zeichnen); }
.ms-karte.ist-sichtbar .ill-verteilung .ill-radius,
.ms-karte.ist-sichtbar .ill-verteilung .ill-grundriss { stroke-dashoffset: 0; }
.ill-verteilung .ill-quelle-punkt { fill: var(--text-60); stroke: none; }

/* Use-Case-Slider: eine Karte pro Ansicht, Firmenname wechselt oben mit */
.usecase-slider .slider_item.usecase-karte { width: 100%; background-color: transparent; border-radius: 0; align-items: stretch; padding: 0; }
.usecase-slider .usecase { width: 100%; }
.usecase-firma { transition: opacity var(--transition-standard); }
.usecase-firma.wechselt { opacity: 0; }

/* Services-CTA: zwei Felder mit p5-Flaeche */
.services-feld {
  display: flex; flex-flow: column; gap: var(--pad-feld-l);
  padding: var(--pad-feld-l);
  border-radius: var(--border-radius-big);
  background-color: var(--feld-hell);
}
.services-heading { margin: 0; color: var(--text-farbe); font-size: var(--heading-m); letter-spacing: var(--ls-gross); line-height: var(--lh-heading-m); max-width: 22ch; }
.services-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); width: 100%; }
/* Services-Wechsler (Home): ein Feld bleibt sticky stehen, der Scroll blendet
   Farben und Inhalt zum naechsten Service */
.services-scroll{height:260svh}
.services-haft{position:sticky;top:16svh;height:calc(84svh - var(--seiten-rand-klein));display:flex;flex-flow:column}
.services-haft .service-karte{flex:1 1 auto;min-height:0}
.services-haft .service-zeile{align-items:flex-end}
.services-haft .service-titel-liste{flex-flow:column;align-items:flex-start;gap:1.4em;display:flex}
.services-haft .service-titel{align-items:center;font-size:var(--heading-l);line-height:0.9;letter-spacing:var(--ls-gross);opacity:0.25;transition:opacity var(--transition-standard)}
.services-haft .service-titel.aktiv{opacity:1}
.services-haft .service-text{max-width:24ch;text-wrap:balance;transition:opacity var(--transition-standard)}
.services-haft .service-text.wechselt{opacity:0}
@media screen and (max-width: 767px){.services-haft .service-titel{font-size:var(--heading-s)}}
/* Services-Akkordeon (Home): die Karte mit .aktiv ist offen (JS setzt sie beim Hovern,
   beim Raushovern bleibt die letzte offen - kein Zurueckspringen); zugeklappte Karten
   sind schmale Titelzeilen, linksbuendig, mit Hairline-Trenner */
.services-akkordeon{width:100%;flex-flow:column;display:flex}
.services-akkordeon .service-karte{min-height:0;color:var(--text-farbe);padding: var(--raum-l) 0;transition:min-height var(--dur-wattig) var(--ease),padding var(--dur-wattig) var(--ease),color var(--dur-wattig) var(--ease)}
.services-akkordeon .service-karte + .service-karte{border-top:var(--hairline)}
.services-akkordeon .service-p5,.services-akkordeon .service-text{opacity:0;transition:opacity var(--dur-wattig) var(--ease)}
.services-akkordeon .service-text{max-width:24ch;text-wrap:balance}
.services-akkordeon .service-titel{align-items:center;font-size:var(--heading-m);line-height: var(--lh-heading-m);letter-spacing:var(--ls-gross);transition:font-size var(--dur-wattig) var(--ease)}
.services-akkordeon .service-titel .pfeil-icon{width:0.5em;align-self:center}
.services-akkordeon .service-karte:hover .pfeil-icon{animation:none}
.services-akkordeon .service-karte.aktiv{min-height:clamp(20rem,26vw,30rem);color:var(--white);padding:var(--pad-feld-m)}
.services-akkordeon .service-karte.aktiv .service-p5,.services-akkordeon .service-karte.aktiv .service-text{opacity:1}
.services-akkordeon .service-karte.aktiv .service-titel{font-size:var(--heading-l)}
@media screen and (max-width: 767px){.hero-zeile{flex-flow:column;align-items:flex-start;gap: var(--raum-l)}.services-akkordeon .service-titel,.services-akkordeon .service-karte.aktiv .service-titel{font-size:var(--heading-s)}}
.service-karte {
  position: relative; display: flex; flex-flow: column; justify-content: flex-end;
  min-height: clamp(20rem, 26vw, 30rem);
  padding: var(--pad-feld-m);
  border-radius: var(--border-radius-big); overflow: hidden;
  color: var(--white); text-decoration: none;
  transition: opacity var(--transition-standard);
}
.service-p5 { position: absolute; inset: 0; z-index: -1; }
.services-raster:hover .service-karte:not(:hover) { opacity: 0.75; }
.service-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--raum-m); }
.service-titel { display: inline-flex; align-items: end; gap: var(--raum-s); font-size: var(--text-gross); letter-spacing: var(--ls-mittel); line-height: var(--lh-knopf); white-space: nowrap; }
.service-titel .pfeil-icon { width: 12.5px; height: auto; flex: none; align-self: end; fill: currentColor; }
.service-karte:hover .pfeil-icon { animation: pfeil-wechsel var(--dur-langsam) var(--ease); }
.service-text { font-size: var(--text-lead); letter-spacing: var(--ls-mittel); line-height: var(--lh-lead); text-align: right; max-width: 18ch; }
@media screen and (max-width: 767px) {
  .services-raster { grid-template-columns: 1fr; }
  .service-zeile { flex-flow: column; align-items: flex-start; gap: var(--raum-xs); }
  /* schlaegt das align-items:flex-end der Desktop-Zeile (hoehere Spezifitaet) */
  .services-haft .service-zeile { align-items: flex-start; gap: var(--raum-m); }
  .service-text { text-align: left; max-width: 100%; }
}

/* Die Wirkungs-Felder tragen keinen Glow hinter der Grafik */
.raster-drei .vorteil-bild { background: none; }

/* Headline der Wirkweise-Sektion bleibt zweizeilig */
.seite-systems .ms-slider-heading { max-width: 26ch; }

/* Bild-Banner auf hellen Seiten brauchen deutlich mehr Deckkraft */
body:not(.theme-dark) .aussage.ist-sichtbar .aussage-bild { opacity: calc(var(--aussage-bild-deckkraft) * 2.5); }

/* ---------- Use-Case-Slider ---------- */
.usecase-slider .slider_item.usecase-karte {
  width: 100%; height: auto;
  background-color: transparent; border-radius: 0;
  align-items: stretch; padding: 0;
}
.usecase-slider .usecase { width: 100%; }
/* Firmennamen rollen senkrecht durch, im Takt mit dem Slider */
.firmen-rolle {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  /* Slothoehe = Zeilenhoehe des Tokens - Scroll-Schritt und Fenster
     bleiben automatisch synchron zu --lh-heading-m */
  height: calc(var(--lh-heading-m) * 1em); margin-left: 0.3em;
}
.firmen-liste {
  display: flex; flex-flow: column;
  transform: translateY(calc(var(--n, 0) * var(--lh-heading-m) * -1em));
  transition: transform var(--transition-wattig);
}
.firmen-name { height: calc(var(--lh-heading-m) * 1em); line-height: var(--lh-heading-m); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .firmen-liste { transition: none; } }



/* ---------- Rechtsseiten (Impressum, Datenschutz, AGB) ---------- */
/* Platz fuer den fixen Header, danach der normale Kopfabstand */
.recht-section { padding-top: calc(var(--abstand-kopf) + 7rem); }
.recht-inhalt { width: 100%; max-width: 78ch; }
.recht-titel {
  margin: var(--pad-feld-l) 0 var(--pad-feld-s);
  color: var(--text-farbe);
  font-size: var(--heading-s); letter-spacing: var(--ls-gross); line-height: var(--lh-heading-s);
}
.recht-inhalt > .recht-titel:first-child { margin-top: 0; }
.recht-text {
  margin: 0 0 var(--raum-m);
  color: var(--text-60);
  font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis);
}
.recht-text strong { color: var(--text-farbe); font-weight: inherit; }
.recht-vorspann { color: var(--text-80); font-size: var(--text-gross); line-height: var(--lh-gross); letter-spacing: var(--ls-mittel); }
.recht-liste { margin: 0 0 var(--raum-m); padding-left: 1.2em; color: var(--text-60); font-size: var(--text-basis); letter-spacing: var(--ls-klein); line-height: var(--lh-basis); }
.recht-liste li { margin-bottom: var(--raum-xs); }
.recht-inhalt a { color: var(--text-farbe); text-decoration: underline; text-underline-offset: 0.2em; }

/* Use-Case-Kopf auf Systems: Headline linksbuendig wie beim Home-Slider,
   nicht wie das eingerueckte Use-Case-Label der dunklen Seiten */
.usecase-slider .schmal-headbereich { justify-content: space-between; align-items: center; }
.usecase-slider .usecase-heading { display: flex; align-items: baseline; gap: var(--raum-m); margin: 0; text-align: left; }
.usecase-slider .usecase-label { position: static; display: inline; margin: 0; }

/* Auf Bildern bleibt der unterstrichene Button hell, unabhaengig vom Theme */
.aussage .button-underlined, .cta-padding .button-underlined { color: var(--white); }

/* NewTec-Karte: Headline auf zwei Zeilen */

/* Hero-Claim auf Systems blendet nach dem Titel ein - wie auf Music Service */
.sys-hero-aussage { --sys-claim-start: 1700ms; }
.sys-hero-claim { opacity: 0; animation: ms-einblenden var(--dur-wattig) var(--ease) var(--sys-claim-start) forwards; }

/* ---------- Systems: die Buchstaben poppen in zufaelliger Reihenfolge auf.
   Sie behalten dabei ihren Platz - nur Deckkraft und Skalierung animieren. ---------- */
.sys-titel { position: relative; display: inline-block; }
.sys-zeichen {
  display: inline-block;
  opacity: 0; transform: scale(0.86);
  transition: opacity var(--transition-langsam), transform var(--transition-langsam);
}
.sys-zeichen.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sys-zeichen { opacity: 1; transform: none; } .sys-hero-claim { opacity: 1; animation: none; } }

/* ################################################################
   SEITE: STUDIEN
   ################################################################ */
.studien-claim { margin: 0; color: var(--text-farbe); font-size: var(--heading-l); line-height: var(--lh-heading-l); letter-spacing: var(--ls-gross); text-align: center; }
/* Jede Studie bekommt Luft; die Felder blenden einzeln beim Hinscrollen ein */
.studien-liste { display: flex; flex-flow: column; gap: var(--abstand-bereich); }
.studien-mehr { align-self: center; margin-top: var(--pad-feld-m); background: none; border: 0; cursor: pointer; font-family: var(--font-family-base); }
.pfeil-ab { transform: rotate(135deg); }

/* Das Studienfeld traegt jetzt eine Quellenzeile unter einer Haarlinie.
   Aufbau bewusst offen gehalten: ueber Zusatzklassen am .studienfeld lassen
   sich einzelne Studien spaeter optisch abwandeln. */
.studie-koerper { display: flex; justify-content: space-between; width: 100%; gap: var(--pad-feld-m); }
.studie-quelle {
  width: 100%; margin: var(--pad-feld-m) 0 0; padding-top: var(--pad-feld-s);
  border-top: var(--hairline);
  color: var(--darkblue-40);
  font-size: var(--text-klein); letter-spacing: var(--ls-klein); line-height: var(--lh-klein);
}
.studienfeld { flex-flow: column; align-items: flex-start; }
.studienfeld.invers .studie-quelle { color: var(--white-40); }

/* Geteiltes Feld: zwei Studien nebeneinander, getrennt durch eine Haarlinie */
.studienfeld-geteilt .studie-koerper { gap: 0; }
.studie-haelfte { flex: 1 1 0; padding: 0 var(--pad-feld-l); }
.studie-haelfte:first-child { padding-left: 0; }
.studie-haelfte:last-child { padding-right: 0; border-left: var(--hairline); padding-left: var(--pad-feld-l); }
.studie-haelfte .studie-hauptwert-subline { max-width: 100%; }
.studie-haelfte .studie-paragraph { width: 100%; margin-top: var(--pad-feld-m); }

@media screen and (max-width: 767px) {
  .studie-koerper { flex-flow: column; gap: var(--pad-feld-s); }
  .studienfeld-geteilt .studie-koerper { gap: var(--pad-feld-m); }
  .studie-haelfte { padding: 0; }
  .studie-haelfte:last-child { border-left: 0; border-top: var(--hairline); padding: var(--pad-feld-m) 0 0; }
}

/* Studien-Hero: Bild oben, Aussage darunter - wie auf den anderen Unterseiten */
.section-breit.hero.hero-unterseite.studien-hero { height: 100svh; }
.studien-hero-padding { display: flex; flex-flow: column; align-items: center; gap: var(--raum-m); padding: 0; }
.studien-hero-flaeche {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50svh;
  border-radius: var(--border-radius-big); overflow: hidden;
}
.studien-hero-flaeche .hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studien-hero-flaeche .hero-unterseite-titel { position: relative; z-index: 1; }
.studien-hero-aussage { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
.studien-claim { max-width: 22ch; }

/* ################################################################
   SEITE: NEWTEC
   ################################################################ */

/* Hero wie auf den anderen Unterseiten: Bild oben, Aussage darunter */
.section-breit.hero.hero-unterseite.nt-hero { height: 100svh; }
.nt-hero-padding { display: flex; flex-flow: column; align-items: center; gap: var(--raum-m); padding: 0; }
.nt-hero-flaeche {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50svh;
  border-radius: var(--border-radius-big); overflow: hidden;
}
.nt-hero-flaeche .hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nt-hero-flaeche .hero-unterseite-titel { position: relative; z-index: 1; }
.nt-hero-aussage { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--heading-l); }
.nt-hero-claim { margin: 0; color: var(--text-farbe); font-size: inherit; line-height: var(--lh-heading-l); letter-spacing: var(--ls-gross); }

/* Gegenueberstellung: zwei Spalten, Haarlinien wie im Vorteile-Raster.
   Die rechte Spalte ist die unsere und steht kraeftiger. */
.gegen-raster { display: flex; flex-flow: column; width: 100%; }
.gegen-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-m); padding-bottom: var(--pad-feld-s); }
.gegen-zeile {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-m);
  border-top: var(--hairline);
}
.gegen-zelle { padding: var(--pad-feld-m) 0; }
.gegen-zelle p { margin: 0; font-size: var(--text-lead); letter-spacing: var(--ls-mittel); line-height: var(--lh-lead); }
.gegen-alt p { color: var(--text-40); }
.gegen-neu { position: relative; padding-left: var(--pad-feld-m); }
.gegen-neu::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--hair-w); background-color: rgba(var(--hair-rgb), var(--hair-a)); }
.gegen-neu p { color: var(--text-farbe); }
@media screen and (max-width: 767px) {
  .gegen-kopf, .gegen-zeile { grid-template-columns: 1fr; gap: 0; }
  .gegen-zelle { padding: var(--pad-feld-s) 0; }
  .gegen-neu { padding-left: var(--pad-feld-s); }
}

/* P5-Heros der Unterseiten: die Flaeche fuellt am Handy die volle Hoehe,
   Claim/Zahlen bleiben darunter sichtbar (Flex nimmt den Rest). Steht am
   Dateiende, damit sie die spaeter notierten Basisregeln (ms/sys) sicher
   ueberstimmt. */
@media screen and (max-width: 767px) {
  .tts-hero-flaeche, .ms-hero-flaeche, .sys-hero-flaeche {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  /* die Bloecke darunter wachsen am Handy nicht mit - nur Inhaltshoehe */
  .tts-hero-zahlen, .ms-hero-aussage, .sys-hero-aussage {
    flex: 0 0 auto;
  }
}