/* ==========================================================================
   TrendShip — Kino-Ebene (2026-08-28)
   Stufe 3 nach blau.css: eigenes Hero-Motiv, Zeiger-Regie, Tauchgang.
   Laedt NACH blau.css. Aendert nur Auftritt, keine Inhalte.
   ========================================================================== */

/* ------------------------------------------------- Stroemung statt Sterne */
.flowfield{position:absolute;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:screen;opacity:.92}
.hero .aurora{opacity:.62}

/* ------------------------------------------ Motiv: das Foto verlaesst den Kasten
   Bisher sass das Portrait in einem Rechteck mit Passermarken — Editorial,
   aber kein Motiv. Jetzt taucht es aus der Stroemung auf: keine Kante,
   weicher Rand nach links und unten, kuehleres Licht. */
@media(min-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
  .hero-visual{margin-right:calc(-1 * clamp(1.15rem,4.4vw,4rem) - 2vw)}
  .hero-photo{
    border:0;border-radius:0;aspect-ratio:4/3.5;
    box-shadow:none;
    -webkit-mask-image:
      linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 12%,#000 34%),
      linear-gradient(180deg,#000 62%,rgba(0,0,0,.35) 88%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 12%,#000 34%),
      linear-gradient(180deg,#000 62%,rgba(0,0,0,.35) 88%,transparent 100%);
    mask-composite:intersect;
  }
  /* Passermarken und Leuchtkante gehoeren zum Kasten — mit ihm raus */
  .hero-visual::before,.hero-visual::after,.hero-photo::before{display:none}
}
/* Kuehlung: das Foto gehoert in die Tiefsee, nicht ins Buero-Warmlicht */
.hero-photo img{filter:saturate(.82) contrast(1.07) brightness(.94)}
.hero-photo::after{
  background:
    radial-gradient(46% 40% at var(--lx,62%) var(--ly,38%),rgba(147,178,237,.20),transparent 70%),
    linear-gradient(180deg,transparent 40%,rgba(5,10,20,.55) 82%,rgba(5,10,20,.92)),
    linear-gradient(90deg,rgba(5,10,20,.75),transparent 40%);
  transition:background .25s linear}

/* ----------------------------------------------------------- Tauchgang
   Der Uebergang vom dunklen Hero in die helle Lesestrecke ist ein Moment,
   kein Schnitt: eine Lichtkante laeuft mit, der Grund hellt kurz auf. */
.hero::after{height:2px;filter:blur(.2px);
  box-shadow:0 0 24px 2px rgba(147,178,237,.45)}
.ticker{position:relative}
.ticker::marker{content:""}
.tick-edge{position:absolute;left:0;right:0;top:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--xenon),transparent);
  transform:scaleX(var(--te,0));transform-origin:50% 50%;
  transition:transform 1.2s var(--ease)}

/* Die helle Flaeche schiebt sich unter dem Hero hervor */
.section.services{position:relative}
.section.services::before{content:"";position:absolute;left:0;right:0;top:0;height:180px;
  background:linear-gradient(180deg,rgba(147,178,237,.10),transparent);pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .tick-edge{transform:scaleX(1);transition:none}
}

/* ==========================================================================
   PAPIER MIT TIEFE — die hellen Lesestrecken waren flach: Zeilen ohne
   Zustand, Flaechen ohne Licht. Jetzt reagiert die Liste auf Zeiger UND
   auf Scrollen, damit auch am Telefon etwas passiert.
   ========================================================================== */

/* Licht unter dem Zeiger, in der Zeile selbst */
.svc-row::before,.ins-row::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(420px circle at var(--px,50%) var(--py,50%),rgba(40,78,199,.075),transparent 62%)}
.svc-row:hover::before,.ins-row:hover::before{opacity:1}
.svc-row > *,.ins-row > *{position:relative;z-index:1}

/* Aktive Zeile beim Scrollen: dieselbe Regie wie beim Hover, ohne Maus.
   Am Telefon ist das der einzige Weg, die Liste lebendig zu zeigen. */
.svc-row.live::after,.ins-row.live::after{width:100%}
.svc-row.live .no{color:var(--accent)}
.svc-row.live .arr,.ins-row.live .arr{opacity:1;transform:none;border-color:var(--accent);color:var(--accent)}
@media(hover:hover) and (pointer:fine){
  /* Mit Maus fuehrt der Zeiger — der Scroll-Zustand tritt zurueck */
  .svc-list:hover .svc-row.live::after,.ins-list:hover .ins-row.live::after{width:0}
  .svc-list:hover .svc-row.live .no{color:var(--faint)}
  .svc-row:hover::after,.svc-row.live:hover::after{width:100%}
  .svc-row:hover .no{color:var(--accent)}
}

/* Der Grund ist Papier, kein Weiss: eine sehr feine Struktur und ein
   Lichtschein von oben geben der hellen Zone dieselbe Tiefe wie der Tiefsee. */
.section.services,.section.insights,.section.faq{position:relative;isolation:isolate}
.section.services::after,.section.insights::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(80% 46% at 84% 0%,rgba(40,78,199,.055),transparent 62%),
    radial-gradient(60% 40% at 0% 100%,rgba(29,57,165,.04),transparent 60%)}

/* Kapitelmarke am Rand: auf hellem Grund war sie kaum zu sehen */
.chapters a.on .ch-tick{background:var(--accent)}

/* ==========================================================================
   LAUFBAND ALS EINSTIEG — jede Branche ist ein Weg, nicht Deko.
   Das Band haelt an, sobald der Zeiger drin ist: sonst kann man nicht
   treffen, was sich bewegt. Branchen mit gezeigter Arbeit stehen vorn
   und sind gefuellt statt konturiert.
   ========================================================================== */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track{animation-play-state:paused}

a.ticker-item{text-decoration:none;position:relative;display:inline-flex;align-items:center;gap:.5rem;
  transition:color .35s var(--ease),-webkit-text-stroke-color .35s var(--ease)}
a.ticker-item::after{content:"";position:absolute;left:0;right:0;bottom:-.22em;height:2px;
  background:var(--xenon);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .4s var(--ease)}
a.ticker-item:hover,a.ticker-item:focus-visible{color:var(--ice);-webkit-text-stroke-color:transparent}
a.ticker-item:hover::after,a.ticker-item:focus-visible::after{transform:scaleX(1)}
a.ticker-item:focus-visible{outline:none}

/* Belegte Branchen: gefuellt, mit Punkt — die Reihenfolge ist die
   Verkaufsreihenfolge, nicht das Alphabet. */
.ticker-item.is-ref{color:rgba(233,240,250,.94);-webkit-text-stroke-color:transparent}
.ticker-ref{width:7px;height:7px;flex:none;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 0 4px rgba(40,78,199,.18)}

.ticker-all{position:absolute;right:clamp(1.15rem,4.4vw,4rem);top:50%;transform:translateY(-50%);
  z-index:3;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--cream-ink);background:rgba(5,10,20,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(147,178,237,.28);padding:.62rem 1rem;
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.ticker-all:hover{border-color:var(--xenon);background:rgba(40,78,199,.22)}
.ticker-all svg{transition:transform .35s var(--ease)}
.ticker-all:hover svg{transform:translateX(3px)}
@media(max-width:860px){.ticker-all{display:none}}

/* Von der gezeigten Arbeit in die Branche: die Referenz ist der Beweis,
   die Branchenseite das Angebot. Ohne diesen Weg endet der Beweis im Nichts. */
.ref-branchlink{margin-top:1.6rem;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.82rem;letter-spacing:.02em;font-weight:600;text-decoration:none;
  color:var(--cream-ink);border:1px solid rgba(147,178,237,.30);
  padding:.85rem 1.25rem;background:rgba(147,178,237,.05);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)}
.ref-branchlink:hover{border-color:var(--xenon);background:rgba(40,78,199,.20);transform:translateY(-2px)}
.ref-branchlink svg{transition:transform .35s var(--ease)}
.ref-branchlink:hover svg{transform:translateX(4px)}


/* Die Konturschrift war Deko, solange das Band nur lief. Jetzt ist jedes
   Wort ein Link — dann muss es auch ohne Hover gut lesbar sein. */
.ticker-item{-webkit-text-stroke-width:1.15px;-webkit-text-stroke-color:rgba(233,240,250,.66)}

/* ==========================================================================
   HERO: RASTER UND LICHT (statt Teilchen)
   Der Kopf soll nach Werkstatt aussehen, nicht nach Bildschirmschoner:
   ein feines Konstruktionsraster, ein sehr langsam wanderndes Licht und
   eine Messachse am Rand. Nichts blinkt, nichts fliegt — und es kostet
   keine Rechenschleife, sondern zwei Farbverlaeufe.
   ========================================================================== */
.hero .aurora{display:none}          /* zweite Leinwand im Kopf: raus */

.hero-raster{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-raster::before{content:"";position:absolute;inset:-2px;
  background:
    repeating-linear-gradient(90deg,rgba(147,178,237,.075) 0 1px,transparent 1px 92px),
    repeating-linear-gradient(0deg,rgba(147,178,237,.055) 0 1px,transparent 1px 92px);
  -webkit-mask-image:radial-gradient(120% 90% at 62% 26%,#000 12%,rgba(0,0,0,.45) 52%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 62% 26%,#000 12%,rgba(0,0,0,.45) 52%,transparent 78%)}
/* Das Licht wandert einmal in 26 Sekunden durch — langsam genug, dass man
   es nicht verfolgt, deutlich genug, dass die Flaeche lebt. */
.hero-raster::after{content:"";position:absolute;top:-30%;left:-25%;width:85%;height:170%;
  background:radial-gradient(closest-side,rgba(40,78,199,.20),rgba(40,78,199,.06) 55%,transparent 78%);
  filter:blur(14px);animation:heroLicht 26s cubic-bezier(.45,0,.55,1) infinite}
@keyframes heroLicht{
  0%   {transform:translate3d(0,0,0) scale(1)}
  50%  {transform:translate3d(95%,6%,0) scale(1.14)}
  100% {transform:translate3d(0,0,0) scale(1)}
}

/* Messachse: die Seite ist gebaut, nicht gemalt. */
.hero-achse{position:absolute;left:clamp(1.15rem,4.4vw,4rem);top:0;bottom:0;width:1px;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(147,178,237,.22) 18%,rgba(147,178,237,.22) 82%,transparent);
  pointer-events:none}
.hero-achse::before,.hero-achse::after{content:"";position:absolute;left:-4px;width:9px;height:1px;
  background:rgba(147,178,237,.55)}
.hero-achse::before{top:32%}
.hero-achse::after{top:68%}

@media(max-width:900px){.hero-achse{display:none}
  .hero-raster::before{background-size:auto;
    background-image:
      repeating-linear-gradient(90deg,rgba(147,178,237,.06) 0 1px,transparent 1px 64px),
      repeating-linear-gradient(0deg,rgba(147,178,237,.045) 0 1px,transparent 1px 64px)}}
@media(prefers-reduced-motion:reduce){.hero-raster::after{animation:none}}

/* Die ganze Referenz fuehrt weiter — das muss man sehen und fuehlen. */
.ref-klickbar{cursor:pointer}
.ref-klickbar .dvhit{cursor:pointer}
.ref-klickbar:hover .ref-branchlink{border-color:var(--xenon);background:rgba(40,78,199,.20)}
.ref-klickbar:hover .ref-branchlink svg{transform:translateX(4px)}

/* ==========================================================================
   AUFTRITT DER LEISTUNGSLISTE
   Die Liste stand einfach da. Jetzt tritt sie auf: die Trennlinie zieht
   sich auf, die Nummer kommt zuerst, der Titel faehrt unter der Kante
   hervor, Beschreibung und Pfeil folgen. Eine Zeile nach der anderen —
   bewegt werden nur transform und opacity.
   ========================================================================== */
.svc-list.auftritt-bereit .svc-row,
.ins-list.auftritt-bereit .ins-row{--d:0ms}

/* Ausgangslage: Zeile liegt tiefer und ist blass */
.auftritt-bereit .svc-row,.auftritt-bereit .ins-row{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease) var(--d),transform .95s var(--ease) var(--d)}
.auftritt-bereit .svc-row.auf,.auftritt-bereit .ins-row.auf{opacity:1;transform:none}

/* Die Kante wandert mit: 0 -> volle Breite */
.auftritt-bereit .svc-row::after,.auftritt-bereit .ins-row::after{
  width:0;transition:width 1.05s var(--ease) calc(var(--d) + 120ms)}
.auftritt-bereit .svc-row.auf::after,.auftritt-bereit .ins-row.auf::after{width:100%}
/* Nach dem Auftritt fuehrt wieder der Zeiger */
@media(hover:hover) and (pointer:fine){
  .auftritt-bereit .svc-row.auf:hover::after{width:100%}
}

/* Titel unter der Kante hervor */
.ttl-maske{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.ttl-maske > span{display:block;transform:translate3d(0,105%,0);
  transition:transform .95s cubic-bezier(.19,1,.22,1) calc(var(--d) + 90ms)}
.svc-row.auf .ttl-maske > span,.ins-row.auf .ttl-maske > span{transform:none}

/* Die Nummer kommt zuerst und blitzt kurz im Akzent auf */
.auftritt-bereit .svc-row .no{opacity:0;transform:translate3d(-8px,0,0);
  transition:opacity .6s var(--ease) var(--d),transform .6s var(--ease) var(--d),color .5s var(--ease)}
.auftritt-bereit .svc-row.auf .no{opacity:1;transform:none}
.svc-row.auf-blitz .no{color:var(--accent)}

/* Beschreibung und Pfeil folgen der Zeile */
.auftritt-bereit .svc-row .desc,.auftritt-bereit .svc-row .meta,
.auftritt-bereit .ins-row .desc{opacity:0;
  transition:opacity .9s var(--ease) calc(var(--d) + 220ms)}
.auftritt-bereit .svc-row.auf .desc,.auftritt-bereit .svc-row.auf .meta,
.auftritt-bereit .ins-row.auf .desc{opacity:1}

/* Die Kopfzeile der Gruppe ("Websites & Marketing") fuehrt den Auftritt an */
.auftritt-bereit .svc-split{opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.auftritt-bereit .svc-split.auf{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .auftritt-bereit .svc-row,.auftritt-bereit .ins-row,
  .auftritt-bereit .svc-row .no,.auftritt-bereit .svc-row .desc,
  .auftritt-bereit .svc-row .meta,.auftritt-bereit .ins-row .desc,
  .auftritt-bereit .svc-split{opacity:1;transform:none;transition:none}
  .ttl-maske > span{transform:none;transition:none}
  .auftritt-bereit .svc-row::after,.auftritt-bereit .ins-row::after{transition:none}
}

/* ==========================================================================
   SCHAUKASTEN — die Leistungsliste zeigt jetzt, was sie behauptet.
   Links die Zeilen, rechts eine mitlaufende Buehne: zu jeder Leistung ein
   Bild davon, was sie bewirkt. Nur ab 1100px — darunter bleibt die Liste
   wie sie war, denn am Telefon zaehlt Lesbarkeit vor Schauwert.
   ========================================================================== */
@media(min-width:1100px){
  .svc-schaukasten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
    gap:clamp(2rem,4vw,4rem);align-items:start}
  .svc-schaukasten .svc-index{margin-bottom:0}

  /* Die Zeile wird schmaler: Beschreibung ruecht unter den Titel */
  .svc-schaukasten .svc-row{grid-template-columns:2.9rem minmax(0,1fr) 2.4rem;
    align-items:start;padding-block:1.45rem}
  .svc-schaukasten .svc-row .desc{grid-column:2;max-width:46ch;margin-top:.55rem}
  .svc-schaukasten .svc-row .arr{align-self:center}

  /* Die Buehne bleibt stehen, waehrend die Liste laeuft */
  .svc-buehne{position:sticky;top:7.5rem;display:flex;flex-direction:column;gap:1rem}
  .sb-rahmen{position:relative;aspect-ratio:4/3.15;background:var(--abyss,#050A14);
    border:1px solid rgba(147,178,237,.22);overflow:hidden;
    box-shadow:0 40px 90px -50px rgba(9,16,32,.75)}
  .sb-leiste{position:absolute;top:0;left:0;right:0;height:38px;z-index:3;
    display:flex;align-items:center;gap:.4rem;padding:0 .9rem;
    background:rgba(10,20,36,.9);border-bottom:1px solid rgba(147,178,237,.16)}
  .sb-leiste span{width:8px;height:8px;border-radius:50%;background:rgba(147,178,237,.28)}
  .sb-titel{margin-left:.7rem;font-size:.72rem;letter-spacing:.04em;font-weight:500;
    color:rgba(233,240,250,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .sb-panel{position:absolute;inset:38px 0 0;opacity:0;transform:translate3d(0,14px,0);
    transition:opacity .55s var(--ease),transform .7s var(--ease);
    padding:clamp(1.1rem,2.2vw,1.8rem);display:flex;flex-direction:column;justify-content:center;gap:1rem}
  .sb-panel.is-on{opacity:1;transform:none}
  .sb-satz{font-size:.82rem;color:var(--muted);margin:0}

  /* 01 — die echte Arbeit */
  .sb-panel[data-sb="0"]{padding:0}
  .sb-shot{position:absolute;inset:0;overflow:hidden}
  .sb-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
    transform:scale(1.02);transition:transform 8s linear}
  .sb-panel[data-sb="0"].is-on .sb-shot img{transform:scale(1.09)}

  /* 02 — Platzierung */
  .sb-serp{display:flex;flex-direction:column;gap:.6rem}
  .sb-serp-zeile{display:flex;align-items:center;gap:.7rem}
  .sb-pos{width:20px;font-family:var(--mono);font-size:.72rem;color:rgba(233,240,250,.45);text-align:right}
  .sb-bar{height:9px;background:rgba(147,178,237,.22);border-radius:1px;
    width:0;transition:width .9s var(--ease)}
  .is-on .sb-bar.w70{width:70%} .is-on .sb-bar.w55{width:55%} .is-on .sb-bar.w85{width:85%}
  .is-on .sb-bar.w60{width:60%} .is-on .sb-bar.w48{width:48%}
  .sb-serp-zeile.is-ihr .sb-pos{color:var(--xenon)}
  .sb-serp-zeile.is-ihr .sb-bar{background:linear-gradient(90deg,var(--accent-2),var(--xenon));
    box-shadow:0 0 18px -4px rgba(147,178,237,.6);height:13px;transition-delay:.35s}
  .sb-tag{font-size:.68rem;letter-spacing:.06em;color:var(--xenon);white-space:nowrap}

  /* 03 — Anfragen */
  .sb-balken{display:flex;align-items:flex-end;gap:.7rem;height:64%;padding-top:.6rem}
  .sb-saeule{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.5rem;height:100%}
  .sb-saeule i{display:block;width:100%;height:0;background:rgba(147,178,237,.26);
    transition:height .9s var(--ease)}
  .is-on .sb-saeule i{height:var(--h)}
  .sb-saeule.is-top i{background:linear-gradient(180deg,var(--xenon),var(--accent-2));
    box-shadow:0 0 26px -6px rgba(147,178,237,.7)}
  .sb-saeule span{font-family:var(--mono);font-size:.62rem;color:rgba(233,240,250,.45)}
  .sb-fuss{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,240,250,.5)}

  /* 04 — Trichter */
  .sb-trichter{display:flex;flex-direction:column;gap:.55rem}
  .sb-stufe{display:flex;align-items:baseline;gap:.7rem;padding:.5rem .8rem;
    width:0;background:rgba(147,178,237,.10);border-left:2px solid rgba(147,178,237,.30);
    transition:width 1s var(--ease);white-space:nowrap;overflow:hidden}
  .is-on .sb-stufe{width:var(--w)}
  .sb-stufe b{font-size:1rem;color:var(--cream-ink,#E9F0FA)}
  .sb-stufe span{font-size:.72rem;color:rgba(233,240,250,.55)}
  .sb-stufe.is-ziel{background:rgba(40,78,199,.22);border-left-color:var(--xenon)}
  .sb-stufe.is-ziel b{color:var(--xenon)}

  /* 05 — Marke */
  .sb-marke{display:flex;flex-direction:column;gap:1.1rem}
  .sb-farben{display:flex;gap:.5rem}
  .sb-farben i{flex:1;height:46px;background:var(--c);border:1px solid rgba(147,178,237,.18);
    transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s var(--ease)}
  .is-on .sb-farben i{transform:none}
  .is-on .sb-farben i:nth-child(2){transition-delay:.08s}
  .is-on .sb-farben i:nth-child(3){transition-delay:.16s}
  .is-on .sb-farben i:nth-child(4){transition-delay:.24s}
  .is-on .sb-farben i:nth-child(5){transition-delay:.32s}
  .sb-typo{display:flex;align-items:baseline;gap:.9rem}
  .sb-typo b{font-size:2.6rem;letter-spacing:-.04em;color:var(--cream-ink,#E9F0FA);line-height:1}
  .sb-typo span{font-family:var(--mono);font-size:.68rem;color:rgba(233,240,250,.5)}
  .sb-linie{height:1px;background:linear-gradient(90deg,var(--accent-2),transparent);
    transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease) .2s}
  .is-on .sb-linie{transform:none}

  /* 06 — Betreuung */
  .sb-liste{display:flex;flex-direction:column;gap:.7rem}
  .sb-check{display:flex;align-items:center;gap:.7rem;font-size:.86rem;
    color:rgba(233,240,250,.72);opacity:0;transform:translate3d(-8px,0,0);
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .is-on .sb-check{opacity:1;transform:none}
  .is-on .sb-check:nth-child(2){transition-delay:.09s}
  .is-on .sb-check:nth-child(3){transition-delay:.18s}
  .is-on .sb-check:nth-child(4){transition-delay:.27s}
  .is-on .sb-check:nth-child(5){transition-delay:.36s}
  .sb-check i{width:17px;height:17px;flex:none;border:1px solid var(--xenon);position:relative}
  .sb-check i::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
    border:solid var(--xenon);border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
  .sb-check.is-offen{color:rgba(233,240,250,.45)}
  .sb-check.is-offen i{border-color:rgba(147,178,237,.35)}
  .sb-check.is-offen i::after{display:none}
}
@media(max-width:1099px){.svc-buehne{display:none}}
@media(prefers-reduced-motion:reduce){
  .sb-panel{transition:none}
  .sb-shot img{transition:none}
}

/* Die neue Hero-Aussage ist ein Zweisatz statt drei Schlagworte — sie
   braucht vier Zeilen, also etwas weniger Schriftgroesse, damit keine
   Zeile umbricht (die Maske der .row wuerde den Umbruch abschneiden). */
.hero h1.h1-claim{font-size:clamp(1.85rem,4.7vw,3.5rem);line-height:1.04;letter-spacing:-.035em}
.hero h1.h1-claim .row:nth-child(4) span{animation-delay:.45s}