/* =============================================================================
   STANEK GmbH — Website
   Umsetzung des Entwurfs aus STANEK-Konzept-D.html.
   Das Erscheinungsbild ist unveraendert uebernommen; geaendert wurden nur
   Struktur und Benennung: sprechende Klassennamen statt der Kuerzel des
   Entwurfs (.rv, .f, .c, .n, .t), gruppierte Abschnitte, Tokens in :root.
   ============================================================================= */

/* Startseite: dort steht die bisherige Dachzeile darunter weiter. */
h1.eyebrow + .eyebrow {
  margin-top: 10px;
}

/* Ist die Überschrift unsichtbar (Startseite seit 26.10.2026), kein Abstand. */
h1.nur-vorlesen + .eyebrow {
  margin-top: 0;
}
/* -----------------------------------------------------------------------------
   3. Hero — „Licht an"
   Zwei Ebenen desselben Fotos: die untere per Filter abgedunkelt, die obere
   in Originalhelligkeit. Das Skript blendet die obere flackernd ein.
   -------------------------------------------------------------------------- */

.hero {
  height: 100vh;
  min-height: 640px;
  position: relative;
  overflow: hidden;
  background: #000;
}

.hero__layer {
  position: absolute;
  inset: 0;
}

.hero__layer--dark {
  filter: brightness(0.22) saturate(0.25) contrast(1.1);
}

.hero__layer--lit {
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Bildausschnitt je Foto (seit 9. Oktober 2026): Jedes Bild im Kopf der
   Startseite traegt zwei Werte im Markup. --pos fuer breite Bildschirme, dort
   wird oben und unten beschnitten; --pos-schmal fuer hochkant, dort bleibt
   nur ein Streifen aus der Mitte, und der muss das Logo treffen. */
.hero__layer img,
.hero__dia img {
  object-position: var(--pos, 50% 50%);
}

/* Steht ein Logo so tief im Foto, dass die Ueberschrift darauf laege, hebt
   es --zoom an: Das Bild waechst vom unteren Rand aus und schiebt das Logo
   damit nach oben. Vileda trug bis 9. Oktober 2026 1.15, das schnitt aber
   das Blattzeichen oben an; derzeit nutzt kein Bild den Wert. */
.hero__dia img {
  transform: scale(var(--zoom, 1));
  transform-origin: var(--pos, 50% 50%);
}

@media (max-aspect-ratio: 1/1) {
  .hero__layer img,
  .hero__dia img {
    object-position: var(--pos-schmal, var(--pos, 50% 50%));
  }

  /* Hochkant fuellt das Foto die Hoehe, und das Logo liegt oft in der Mitte,
     wo unten schon der Text steht. --hoch macht das Bild um so viel hoeher
     und zieht es um genau so viel nach oben. */
  .hero__dia img {
    height: calc(100% + var(--hoch, 0vh));
    transform: translateY(calc(-1 * var(--hoch, 0vh)));
  }
}

/* Diashow ueber der hellen Ebene: Das erste Bild ist die helle Ebene selbst,
   die weiteren liegen darueber und werden nacheinander eingeblendet. Ein
   spaeteres Bild liegt im Markup immer ueber dem vorigen, deshalb genuegt es,
   das neue einzublenden; das alte nimmt js/startseite.js erst danach weg. */
.hero__dia {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Übergang seit 19. Oktober 2026 (Wunsch der Auftraggeberin, die Diashow
   soll mehr Wirkung haben). Zwei Effekte laufen gleichzeitig:
   1. dia-ein: Das neue Bild blendet weich und leicht hell ein. Geflackert
      wird nur beim ersten Bild (Lichteffekt oben), nicht bei den weiteren.
   2. dia-fahrt: eine langsame, gleichmäßige Kamerafahrt, bei jedem Bild in
      eine andere Richtung. Gleichmäßig deshalb, weil beim Überblenden das
      alte Bild noch fährt und das neue schon fährt; mit Anlauf und Auslauf
      stand eines von beiden still und der Wechsel ruckte. Start und Ende
      stehen je Bild in --s0/--s1 (Zoom) und --x0/--x1, --y0/--y1
      (Verschiebung). Die Verschiebung darf höchstens
      halb so groß sein wie der Zoom über 1, sonst sieht man den Rand.
   Die Zeiten passen zu DIA_BLENDE und DIA_STEHT in js/startseite.js. */
.hero__dia {
  --s0: 1.14;
  --s1: 1.03;
  --x0: 0%;
  --x1: 0%;
  --y0: 0%;
  --y1: 0%;
}

/* R. Weiss: zoomt wie das erste Bild heraus und wandert leicht nach links,
   damit die Bewegung beim Überblenden in dieselbe Richtung weiterläuft. */
.hero__dia:nth-child(1) { --s0: 1.14; --s1: 1.03; --x1: -2%; }
/* Maßkunst: schwenkt von links nach rechts. */
.hero__dia:nth-child(2) { --s0: 1.12; --s1: 1.12; --x0: -4%; --x1: 4%; }
/* Hengst: fährt heraus. */
.hero__dia:nth-child(3) { --s0: 1.18; --s1: 1.04; --y0: 3%; }
/* 14 Nothelfer: schwenkt nach links und etwas nach oben. */
.hero__dia:nth-child(4) { --s0: 1.12; --s1: 1.12; --x0: 4%; --x1: -4%; --y0: 2%; --y1: -2%; }
/* Vileda: fährt heran und hebt sich leicht. */
.hero__dia:nth-child(5) { --s0: 1.04; --s1: 1.16; --y1: -3%; }

.hero__dia.is-an {
  opacity: 1;
  will-change: transform, filter, opacity;
  animation:
    dia-ein 1.1s cubic-bezier(0.4, 0, 0.2, 1) both,
    dia-fahrt 4.4s linear both;
}

/* Zurück zum ersten Bild: das oberste blendet hell und weich aus. */
.hero__dia.is-raus {
  animation: dia-raus 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes dia-raus {
  from {
    opacity: 1;
    transform: translate(var(--x1), var(--y1)) scale(var(--s1));
    filter: blur(0) brightness(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--x1), var(--y1)) scale(calc(var(--s1) + 0.04));
    filter: blur(10px) brightness(1.6);
  }
}

/* Das erste Bild (Bausch + Ströbel, die beiden Ebenen des Lichteffekts) fährt
   seit 20. Oktober 2026 ebenfalls, Wunsch der Auftraggeberin: Es beginnt nah
   an der Dachschrift und zoomt langsam heraus. Die Fahrt läuft beim Aufruf
   der Seite schon während des Flackerns. Sie darf nicht an is-weiter hängen:
   Die Klasse kommt im selben Moment, in dem das zweite Bild einzublenden
   beginnt, und das erste spränge dann sichtbar auf seine Ruhegröße zurück.
   Stattdessen läuft sie durch und ist länger als Flackern, Standzeit und
   Blende zusammen, damit das Bild noch in Bewegung ist, wenn das zweite
   darüberkommt. Gleichmäßig (linear), damit beim Überblenden keine der
   beiden Ebenen stillsteht. js/startseite.js startet sie neu, sobald die Diashow
   zum ersten Bild zurückkehrt (Klasse ist-neustart kurz setzen). Beide Ebenen
   bewegen sich gleich, sonst stünde das dunkle Foto neben dem hellen. */
.hero__layer img {
  will-change: transform;
  transform-origin: var(--pos, 50% 50%);
  animation: dia-fahrt-erstes 7s linear both;
}

.hero.ist-neustart .hero__layer img {
  animation: none;
}

@keyframes dia-fahrt-erstes {
  from { transform: scale(1.14); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__layer img {
    animation: none;
  }
}

/* Lichtschein ueber der Leuchtwerbung. Sitzt seit 9. Oktober 2026 auf der
   Dachschrift von Bausch + Stroebel (vorher 24 % von oben). */
.hero__bloom {
  position: absolute;
  left: 42%;
  top: 32%;
  width: 70vw;
  height: 60vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 190, 120, 0.4) 0%,
    rgba(255, 140, 60, 0.14) 40%,
    transparent 72%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.4s ease 0.1s;
  pointer-events: none;
}

.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 4, 5, 0.55) 0%,
    rgba(4, 4, 5, 0.22) 42%,
    rgba(4, 4, 5, 0.94) 100%
  );
}

/* Seit dem 6. Oktober 2026 liegt im Kopf der Startseite eine Nahaufnahme
   leuchtender Buchstaben, die bis in die linke untere Ecke hell ist. Ohne
   zusaetzliche Abdunklung von links verschwindet dort die kleine Zeile ueber
   der Ueberschrift. */
.hero--nah .hero__veil {
  background:
    linear-gradient(90deg, rgba(4, 4, 5, 0.82) 0%, rgba(4, 4, 5, 0.5) 40%, rgba(4, 4, 5, 0) 72%),
    linear-gradient(180deg, rgba(4, 4, 5, 0.55) 0%, rgba(4, 4, 5, 0.22) 38%, rgba(4, 4, 5, 0.94) 100%);
}

@media (max-width: 700px) {
  .hero--nah .hero__veil {
    background: linear-gradient(180deg, rgba(4, 4, 5, 0.5) 0%, rgba(4, 4, 5, 0.6) 35%, rgba(4, 4, 5, 0.95) 62%);
  }
}

/* `is-lit` setzt das Skript, sobald die Lichtsequenz durchgelaufen ist. */
body.is-lit .hero__layer--lit,
body.is-lit .hero__bloom {
  opacity: 1;
}

/* Der Lichtschein sitzt auf der Leuchtschrift des ersten Bildes. Solange die
   Diashow ein anderes zeigt, tritt er zurueck. */
.hero.is-weiter .hero__bloom {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero__content {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 110px;
  z-index: 5;
  max-width: max(940px, 65.3vw);
}

/* Der Schriftgrad ist auf zwei KURZE Zeilen ausgelegt — "Sichtbar werden." /
   "Sichtbar bleiben." sind 16 und 17 Zeichen.

   SEIT 6. OKTOBER 2026 OHNE OBERGRENZE: Vorher blieb die Ueberschrift ab
   1440 px Breite bei 92 px stehen und wirkte auf einem grossen Bildschirm
   deutlich kleiner als auf einem Laptop. Jetzt waechst sie mit der
   Bildschirmbreite mit, und das Textfeld (max-width oben) waechst im selben
   Verhaeltnis, sodass der Umbruch ueberall gleich bleibt. Nur nach unten gibt
   es eine Grenze von 40 px, damit sie auf dem Telefon lesbar bleibt. In das
   Textfeld passen rund 20 Zeichen je Zeile. Wer die Ueberschrift austauscht,
   prueft das mit und senkt notfalls den Grad, statt den Umbruch zu erzwingen. */
.hero__title {
  /* Seit dem 13. Oktober 2026 ein bisschen kleiner (Wunsch der
     Auftraggeberin), vorher max(40px, 6.4vw). */
  font-size: max(36px, 5.6vw);
  line-height: 1;
  margin-top: 22px;
  color: #fff;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s ease 0.55s,
    transform 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.55s;
}

body.is-lit .hero__title {
  opacity: 1;
  transform: none;
}

/* Teil der Dachzeile, der nicht in Versalien steht ("Seit 2005:"). */
.eyebrow__normal {
  text-transform: none;
  letter-spacing: 0.08em;
}

/* Auf schmalen Telefonen sonst ein einzelnes "STANEK" in Zeile zwei. */
@media (max-width: 420px) {
  .hero .eyebrow {
    letter-spacing: 0.22em;
  }
}

.hero__claim,
.hero__go {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease 1.05s, transform 0.9s ease 1.05s;
}

body.is-lit .hero__claim,
body.is-lit .hero__go {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------------------
   7. Vorher/Nachher: Überblendung beim Scrollen (seit dem 23. Oktober 2026)

   Bis dahin ein Regler zum seitlichen Schieben (.compare). Jetzt klebt das
   Bild in der Mitte des Bildschirms, während man über die Strecke .wandel
   scrollt, und das Nachher-Foto blendet langsam über das Vorher-Foto.
   --wandel (0 bis 1) setzt js/startseite.js, Abschnitt 4. Die Strecke ist 200
   Prozent der Bildschirmhöhe: lang genug, dass die Verwandlung ruhig wirkt,
   kurz genug, dass man nicht festzustecken meint.
   -------------------------------------------------------------------------- */

/* SEIT DEM 24. OKTOBER 2026 (Wunsch von Jürgen Stanek): Die Überschrift
   "Früher eine Fassade. Jetzt ein Blickfang." klebt oben unter der Leiste,
   das Bild direkt darunter, und die Strecke ist 500 statt 200 Prozent der
   Bildschirmhöhe lang. Die Verwandlung zieht sich damit über viele
   Scrollbewegungen. --nav-h setzt js/basis.js. */
.wandel {
  --wandel: 0;
  --titel-h: 130px;
  --wandel-hoehe: min(calc(100vh - var(--nav-h, 68px) - var(--titel-h) - 40px), 640px);
  position: relative;
  height: 500vh;
  margin: 60px var(--pad) 0;
}

.wandel__titel {
  position: sticky;
  top: var(--nav-h, 68px);
  z-index: 3;
  display: flex;
  align-items: center;
  height: var(--titel-h);
  margin: 0;
  background: var(--bg);
}

.wandel__buehne {
  position: sticky;
  top: calc(var(--nav-h, 68px) + var(--titel-h));
  height: var(--wandel-hoehe);
  overflow: hidden;
}

.wandel__bild {
  position: absolute;
  inset: 0;
}

.wandel__bild--nachher {
  opacity: var(--wandel);
}

/* DECKUNGSGLEICH: Die beiden Fotos sind nicht vom selben Standpunkt
   aufgenommen. Im Nachher-Foto steht der Schriftzug weiter links. Damit beim
   Überblenden das Gebäude stehen bleibt und nicht springt, rückt das
   Vorher-Foto etwas nach links und das Nachher-Foto etwas nach rechts, beide
   leicht vergrößert, damit kein Rand sichtbar wird. Die Werte sind am Bild
   gemessen (Schriftzug "Gaiser" in beiden an derselben Stelle) und stehen in
   den Variablen, damit sie für schmale Bildschirme unten anders gesetzt
   werden können. Die Angaben im Markup (object-position) gelten damit hier
   nicht mehr. */
.wandel {
  --vorher-x: 100%;
  --vorher-verschub: 0%;
  --nachher-x: 0%;
  --nachher-verschub: 0%;
}

.wandel__bild img {
  object-position: var(--vorher-x) 50% !important;
  transform: translateX(var(--vorher-verschub)) scale(1.06);
}

.wandel__bild--nachher img {
  object-position: var(--nachher-x) 50% !important;
  transform: translateX(var(--nachher-verschub)) scale(1.06);
}

/* SEIT DEM 25. OKTOBER 2026 (Wunsch von Jürgen Stanek): Das helle
   Vorher-Foto wirkte auf den ersten Blick sehr weiß und dominant. Es beginnt
   jetzt abgedunkelt und hellt sich beim Scrollen auf, während das
   Nachher-Foto darüber erscheint. Bei halber Strecke hat es volle Helligkeit. */
.wandel__bild:not(.wandel__bild--nachher) img {
  filter: brightness(clamp(0.45, calc(0.45 + var(--wandel) * 1.1), 1));
}

/* -----------------------------------------------------------------------------
   8. Scroll-Story
   Links laufen die Stufen durch, rechts steht das Bild still und wechselt.
   Traegt der Abschnitt: `position: sticky` an der Bildspalte. Sie klebt,
   solange ihr Elternelement (.story__layout) durch das Bild laeuft — deshalb
   darf dort weder `overflow` noch eine feste Hoehe gesetzt werden, beides
   schaltet sticky wirkungslos ab.
   -------------------------------------------------------------------------- */

.story {
  padding-bottom: 120px;
}

.story__intro {
  padding: 120px var(--pad) 0;
}

/* Der Satz bleibt in der Bildschirmmitte stehen, waehrend die Seite unter ihm
   ungefaehr eine Bildschirmhoehe weiterlaeuft. Erst danach schiebt sich die
   Geschichte heran. */
.story__intro--halt {
  height: 150vh;
}

.story__intro--halt h2 {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
}

.story__layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0 56px;
  margin-top: 20px;
  align-items: start;
}

.story__steps {
  padding: 0 0 0 var(--pad);
}

/* --- Die Überschriften bleiben stehen (seit 13. Oktober 2026) ---------------
   Wunsch der Auftraggeberin: Der Wechsel wirkte störrisch. Vorher wanderte
   jede Überschrift mit der Seite nach oben weg, während das Bild daneben
   stillstand, und jeder Schritt brauchte 86 % der Bildschirmhöhe.

   Jetzt liegen alle Überschriften übereinander in .story__kopf. Der Kopf
   klebt wie die Bildspalte und ist so hoch wie der Bildschirm; die
   Überschrift, die gilt, steht in seiner Mitte. Beim Wechsel gleitet die
   alte ein Stück nach oben weg und die neue kommt von unten nach, beim
   Zurückscrollen umgekehrt. Dafür unterscheidet das Skript drei Zustände:
   .is-current (gilt), .is-vorbei (war schon dran), ohne Klasse (kommt noch).

   Der erste Schritt rückt mit einem negativen Außenabstand unter den Kopf:
   Die Schritte beginnen ganz oben in der Spalte, so wie die Bildspalte
   daneben. BIS ZUM 23. OKTOBER 2026 trug der Kopf selbst den negativen
   Abstand (unten). Dann durfte er aber eine Bildschirmhöhe länger kleben
   als das Bild: Am Ende der Seite stand der letzte Satz mit seinen Knöpfen
   allein über der Fußzeile, während das Bild schon weg war (Hinweis von
   Jürgen Stanek). So lösen sich Kopf und Bild im selben Moment.

   ALLES HÄNGT AN .story--lebt. Die Klasse setzt js/startseite.js. Ohne Skript
   stehen die Überschriften einfach untereinander, dann fehlt nur die
   Bewegung. */
.story__kopf {
  display: grid;
  gap: 40px;
  padding: 90px 0;
  max-width: 520px;
}

.story__satz .story__title {
  margin-top: 0;
}

.story--lebt .story__kopf {
  display: block;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0;
  max-width: none;
  /* Der Kopf liegt über den leeren Schritten. Er selbst fängt nichts ab,
     nur die geltende Überschrift mit ihren Knöpfen. */
  pointer-events: none;
}

.story--lebt .story__satz {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  max-width: 520px;
  opacity: 0;
  transform: translateY(calc(-50% + 26px));
}

/* Die Bewegung kommt erst mit .story--bewegt dazu, einen Augenblick nach
   .story--lebt. Sonst blendeten beim Laden der Seite alle Sätze sichtbar
   aus, weil sie ohne Skript zunächst untereinander stehen. */
.story--bewegt .story__satz {
  transition: opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.story--lebt .story__satz.is-vorbei {
  transform: translateY(calc(-50% - 26px));
}

.story--lebt .story__satz.is-current {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}

/* Die Knöpfe am letzten Satz sind unsichtbar nicht bedienbar, auch nicht
   mit der Tastatur. Die Verzögerung lässt sie erst mit ausblenden. */
.story--lebt .story__satz .story__aktion {
  visibility: hidden;
}

.story--bewegt .story__satz .story__aktion {
  transition: visibility 0s linear 0.7s;
}

.story--lebt .story__satz.is-current .story__aktion {
  visibility: visible;
}

.story--bewegt .story__satz.is-current .story__aktion {
  transition-delay: 0s;
}

/* Die Schritte sind nur noch Strecke: An ihnen liest das Skript ab, welches
   Bild gilt. 58 statt 86 % der Bildschirmhöhe, der Wechsel antwortet also
   um ein Drittel schneller auf das Scrollen.

   DER ERSTE IST LÄNGER: In ihm geht das Licht im ersten Bild an (licht() in
   js/startseite.js rechnet mit seiner Höhe). Wäre er so kurz wie die übrigen,
   wäre das Licht schon an, bevor der Abschnitt ganz im Bild steht.

   DER AUSLAUF am Ende hält Kopf und Bild noch fest, wenn der letzte Schritt
   gilt. Ohne ihn lösten sich beide, bevor der letzte Satz erschienen ist. */
.story--lebt .story__step {
  min-height: 58vh;
}

/* Die leeren Schritte liegen über dem klebenden Kopf mit den Knöpfen. Ohne
   diese Regel fing ein Schritt den Fingertipp ab, "Zum STANEK-Prinzip" und
   "Projekt anfragen" reagierten am Telefon erst beim zweiten Versuch
   (Hinweis von Jürgen Stanek, 26. Oktober 2026). */
.story__step,
.story__auslauf {
  pointer-events: none;
}

.story--lebt .story__step[data-stufe="0"] {
  min-height: 110vh;
  margin-top: -100vh;
}

.story--lebt .story__auslauf {
  height: 60vh;
}

@media (prefers-reduced-motion: reduce) {
  .story--bewegt .story__satz,
  .story--bewegt .story__satz .story__aktion {
    transition: none;
  }
}

.story__title {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  color: #fff;
  margin-top: 16px;
}

/* HIER STANDEN .story__paar UND .story__title--bleibt (12. bis 13. Oktober
   2026): eine Überschrift, die über zwei Schritte hinweg in der Mitte
   klebte. Seit alle Überschriften im Kopf stehen bleiben, trägt das
   data-fuer am Satz, für welche Bilder er gilt. */

/* Der Aufruf am Ende des letzten Schritts. Er steht seit dem 2. September
   2026 hier, weil der eigene Abschnitt darunter entfallen ist. Etwas mehr
   Luft nach oben als zwischen den Absaetzen: Der Knopf ist keine Fortsetzung
   des Textes, sondern die Folge daraus. */
.story__aktion {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --- Bildspalte --- */

.story__media {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #08080a;
}

.story__frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.story__frame.is-active {
  opacity: 1;
}

/* HIER STAND EINE ABSICHERUNG, UND SIE DARF NICHT ZURUECKKOMMEN, SOLANGE DIE
   STORY OHNE GLUEHBIRNE AUSKOMMT — aber sie gehoert erklaert, falls jemand
   die Rahmen doch wieder merkbar machen will.

   js/basis.js haengt an jedes Bild mit Gluehbirne die Klasse .hat-merken, und
   die setzt position: relative, weil der Knopf einen Bezugsrahmen braucht.
   Standen die Story-Rahmen in dieser Liste, gewann .hat-merken gegen das
   position: absolute oben (gleich stark, spaeter notiert). Die Rahmen lagen
   dann untereinander statt uebereinander: Sichtbar blieb das erste Bild,
   alles weitere fiel aus der klebenden Spalte heraus und wurde von deren
   overflow: hidden abgeschnitten. Beim Scrollen wechselte nichts mehr, es
   wurde nur schwarz.

   Seit dem 3. September 2026 traegt die Story auf Wunsch der Auftraggeberin
   keine Gluehbirne mehr, damit ist der Zusammenstoss weg. Wer sie wieder
   einbaut, braucht hier wieder eine Regel mit zwei Klassen
   (.story__media .story__frame { position: absolute }), sonst ist der
   Abschnitt still kaputt. */

/* Die einzige Bewegung im Bild: Was neu erscheint, kommt eine Spur zu gross
   herein und kommt zur Ruhe. Zusammen mit dem Ueberblenden ergibt das den
   Eindruck, den die Auftraggeberin am 2. September 2026 beschrieben hat —
   das Bild bleibt an seinem Platz, nur sein Inhalt aendert sich.

   1.05 UND NICHT MEHR: Ab etwa 1.1 sieht man das Vergroessern als Effekt,
   darunter nimmt man es nur als Ruhe wahr. Langsamer als das Ueberblenden
   (1,6 s gegen 1 s), damit die Bewegung noch laeuft, wenn das Bild steht.

   MEHR EFFEKTE GEHOEREN HIER NICHT HIN. "Nicht zu viele Effekte, hochwertig
   und reduziert halten" war die Vorgabe: Ueberblenden, dieses Heranfahren,
   das Licht am Ende — mehr nicht. */
.story__frame img {
  transform: scale(1.05);
  transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.story__frame.is-active img {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .story__frame img,
  .story__frame.is-active img {
    transform: none;
    transition: none;
  }
}

/* --- Letzter Schritt: das Licht geht an ---------------------------------

   Zwei Ebenen desselben Ausschnitts liegen deckungsgleich uebereinander:
   unten das Tagfoto, darueber die Abendansicht. Wie weit die obere deckt,
   haengt an einer einzigen Zahl.

   BIS ZUM 2. SEPTEMBER 2026 lief das anders: Das Licht war an, und wer mit
   der Maus auf das Bild zeigte, machte es aus. Eine versteckte Bedienung —
   am Telefon gar nicht zu finden, und wer die Maus zufaellig ueber dem Bild
   parkte, sah das Licht nie. Jetzt macht es die Bewegung, die ohnehin
   stattfindet: das Scrollen.
   ---------------------------------------------------------------------- */

.story__frame--light span {
  position: absolute;
  inset: 0;
}

/* Grundschicht. Das Tagfoto ist immer da; die Abendansicht schiebt sich
   darueber. */
.story__tag {
  z-index: 1;
}

/* --licht laeuft von 0 auf 1, waehrend der Schritt mit dem Lichtbild (seit
   dem 6. Oktober 2026 der erste) durch die Bildschirmmitte scrollt;
   js/startseite.js setzt die Zahl an der Bildspalte. Ohne Skript bleibt sie 0,
   und es bleibt beim Tagbild, was verstaendlich ist.

   KEINE UEBERBLENDUNG auf der Deckkraft: Der Wert kommt schon aus der
   Scrollbewegung und aendert sich in winzigen Schritten. Eine Ueberblendung
   obendrauf machte daraus ein Nachziehen, das der Bewegung hinterherhinkt. */
.story__lit {
  z-index: 2;
  opacity: var(--licht, 0);
}

/* Der warme Schein sitzt dort, wo bei dieser Aufnahme die Anlage steht:
   etwas rechts der Mitte, im unteren Drittel. Er haengt an derselben Zahl
   wie die Abendansicht und kommt deshalb genau mit ihr. */
.story__bloom {
  left: 54%;
  top: 56%;
  width: 76%;
  height: 52%;
  inset: auto;
  z-index: 3;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 190, 120, 0.4) 0%,
    rgba(255, 140, 60, 0.14) 40%,
    transparent 72%
  );
  mix-blend-mode: screen;
  opacity: var(--licht, 0);
  pointer-events: none;
}

/* Hinweis auf dem letzten Bild: Die Abendansicht ist aus dem Tagfoto
   erzeugt, kein Nachtfoto. Das muss am Bild stehen und nicht nur im
   Alternativtext — wer die Seite sieht, soll wissen, was er sieht. */
.story__hinweis {
  position: absolute;
  right: 26px;
  bottom: 26px;
  z-index: 4;
  pointer-events: none;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b4b4ac;
  background: rgba(8, 8, 10, 0.5);
  padding: 8px 12px;
  backdrop-filter: blur(6px);
}

/* Nicht sichtbare Schritte fangen keine Zeigereingaben ab — die sechs
   Rahmen liegen uebereinander, und opacity: 0 allein macht ein Element
   nicht durchlaessig. */
.story__frame:not(.is-active) {
  pointer-events: none;
}

/* Aus zwei Spalten wird eine. Das Bild klebt oben und die Stufen laufen
   darunter durch — dieselbe Erzaehlung, nur gestapelt. Bis zum 24. Oktober
   2026 galt das nur für schmale Ansichten; seither auch am Computer (Wunsch
   von Jürgen Stanek: "so wie auf dem Handy"). Die Anpassungen für breite
   Bildschirme stehen gleich unter diesem Block. */
@media all {
  .story__layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Die Bildspalte steht im Quelltext NACH den Stufen; gestapelt gehoert sie
     nach oben. */
  .story__media {
    order: -1;
    height: 46vh;
    top: 52px;
  }

  .story__steps {
    padding: 0 var(--pad-sm);
  }

  .story__kopf,
  .story--lebt .story__satz {
    max-width: none;
  }

  /* --- Am Telefon neu seit dem 23. Oktober 2026 (Wunsch von Jürgen
     Stanek) ------------------------------------------------------------

     1. Die Überschrift "Du führst dein Unternehmen, wir dein Projekt."
        fährt mit dem ersten Bild hoch und bleibt dann oben stehen. Sie
        steht dafür als .story__ueber in der klebenden Bildspalte, über den
        Bildern. Die Überschrift im Abschnittskopf ist hier nur noch für
        Bildschirmleser da, und ihr Halt in der Bildschirmmitte entfällt.
     2. Darunter das Bild, darunter der Kopf mit den Sätzen. Alle drei
        kleben übereinander und füllen genau den Bildschirm (die Leiste ist
        65 px hoch). Mit 100svh, wo der Browser es kennt: Das ist die Höhe
        bei sichtbarer Adressleiste, sonst stünden die Knöpfe des letzten
        Satzes darunter.
     3. Viel langsamer: Jeder Schritt ist fast eine Bildschirmhöhe lang,
        der erste mit Tag und Nacht fast zwei, und die Bilder blenden
        langsamer über. Wer schnell wischt, sieht trotzdem jeden Wechsel.
     4. Der erste Satz "Deine Architektur gibt den Rahmen" fällt weg.

     DER KOPF trägt hier wieder selbst den negativen Abstand (am Computer
     der erste Schritt, siehe oben). Er liegt unter dem Bild und löst sich
     so im selben Moment wie das Bild. Dabei ragt er um seine eigene Höhe
     über das Ende der Spalte hinaus; damit er die Fußzeile nicht verdeckt,
     hat der Abschnitt unten genau so viel Innenabstand. */
  .story {
    --story-oben: var(--nav-h, 65px);
    --ueber-h: 96px;
    --bild-h: 40vh;
    --kopf-h: calc(100vh - var(--story-oben) - var(--ueber-h) - var(--bild-h));
    /* Oben Luft zum Knopf "Projekt anfragen" des Abschnitts davor. */
    padding-top: 64px;
    padding-bottom: calc(var(--kopf-h) + 40px);
  }

  @supports (height: 100svh) {
    .story {
      --bild-h: 40svh;
      --kopf-h: calc(100svh - var(--story-oben) - var(--ueber-h) - var(--bild-h));
    }
  }

  .story__intro,
  .story__intro--halt {
    height: auto;
    padding: 0;
  }

  .story__intro--halt h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .story__layout {
    margin-top: 0;
  }

  .story__media {
    top: var(--story-oben);
    height: calc(var(--ueber-h) + var(--bild-h));
    background: var(--bg);
  }

  .story__ueber {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--ueber-h);
    z-index: 5;
    margin: 0;
    padding: 0 var(--pad-sm);
    background: var(--bg);
    color: #fff;
    font-size: min(26px, 6.9vw);
    line-height: 1.12;
  }

  .story__media .story__frame {
    top: var(--ueber-h);
    background: #08080a;
  }

  .story--lebt .story__kopf {
    top: calc(var(--story-oben) + var(--ueber-h) + var(--bild-h));
    height: var(--kopf-h);
    margin-bottom: calc(-1 * var(--kopf-h));
  }

  .story__satz[data-fuer="0"] {
    display: none;
  }

  .story--lebt .story__step {
    min-height: 90vh;
  }

  .story--lebt .story__step[data-stufe="0"] {
    min-height: 180vh;
    margin-top: 0;
  }

  .story--lebt .story__auslauf {
    height: 70vh;
  }

  .story__frame {
    transition-duration: 1.8s;
  }

  .story__frame img {
    transition-duration: 2.4s;
  }

  @media (prefers-reduced-motion: no-preference) {
    .story--bewegt .story__satz {
      transition: opacity 1.1s ease,
        transform 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
  }
}

/* Am Computer: Bild mittig, die Überschrift darüber und der Satz darunter
   ebenfalls mittig (seit dem 24. Oktober 2026). Bis zum 25. Oktober 2026 hatte
   das Bild das Format der Fotos (3 zu 2) und war damit nur etwa halb so breit
   wie der Bildschirm (Hinweis von Jürgen Stanek: "in der Breite sehr klein").
   Seitdem geht es über die ganze Breite des Bildschirms (Wunsch von Jürgen
   Stanek), die Fotos werden dafür oben und unten beschnitten. */
@media (min-width: 901px) {
  .story {
    --story-oben: var(--nav-h, 68px);
    --ueber-h: 116px;
    --bild-h: 62vh;
  }

  .story__media {
    justify-self: stretch;
    width: 100%;
  }

  /* Das Hochformat (Buchstaben auf der Wiese) im breiten Rahmen: Ausschnitt
     nach unten, damit der Schriftzug ganz im Bild bleibt. */
  .story__media img[src$="vileda-05.jpg"] {
    object-position: 50% 65%;
  }

  .story__ueber {
    justify-content: center;
    text-align: center;
    padding: 0;
    font-size: clamp(30px, 2.8vw, 46px);
  }

  .story__steps {
    padding: 0 var(--pad);
  }

  .story--lebt .story__satz {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }
}

@media (min-width: 901px) {
  @supports (height: 100svh) {
    .story {
      --bild-h: 62svh;
    }
  }
}

/* Kundenzeile — ein laufendes Band.

   Die Namen ziehen langsam durch, und wer einen davon beruehrt, laesst ihn
   angehen: heller Kern, drei gestaffelte Lichthoefe. Dasselbe Verhalten wie
   eine Anlage bei Einbruch der Daemmerung, nur in Schrift.

   DAS BAND HAELT DABEI NICHT AN. Frueher stand hier eine Regel, die die
   Animation beim Ueberfahren pausierte — mit der Begruendung, ein Name, der
   unter dem Zeiger wegwandert, sei ein Aergernis. Auf Wunsch der
   Auftraggeberin ist sie entfernt: Das Band soll durchlaufen. Der
   Lichteffekt bleibt und wandert mit, er haengt allein an
   `.clients__reihe li:hover` und nicht am Lauf. Wer das Anhalten wieder
   einbauen will, braucht `animation-play-state: paused` an
   `.clients:hover .clients__spur.ist-laufend` — bitte nicht ohne Ruecksprache.

   Ohne JavaScript und bei abbestellter Bewegung bleibt die Zeile stehen —
   dann ist sie schlicht eine Liste, und das genuegt auch. Das ist zugleich
   der Weg, auf dem sich die Bewegung anhalten laesst (WCAG 2.2.2): ueber die
   Systemeinstellung "Bewegung reduzieren", nicht ueber den Mauszeiger. */
.clients {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  /* Die Raender ausblenden, damit die Namen nicht an einer harten Kante
     abgeschnitten erscheinen, sondern aus dem Dunkeln kommen und darin
     verschwinden. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.clients__spur {
  display: flex;
  width: max-content;
}

/* Laeuft erst, wenn das Skript die zweite Kopie angehaengt hat. Vorher waere
   am Ende der einen Reihe eine Luecke zu sehen. */
.clients__spur.ist-laufend {
  animation: bandlauf var(--dauer, 42s) linear infinite;
  /* Eigene Ebene für die Grafikkarte: Am Telefon flackerte das Band sonst
     und Logos wurden nur zum Teil gezeichnet (seit dem 26. Oktober 2026). */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes bandlauf {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* Genau eine Kopienbreite: die zweite Reihe steht dann dort, wo die
       erste begann — der Sprung zurueck ist unsichtbar. */
    transform: translate3d(-50%, 0, 0);
  }
}

.clients__reihe {
  display: flex;
  align-items: center;
  gap: 68px;
  padding: 38px 34px;
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--mut-klein); /* seit 24.10.2026 besser lesbar (vorher #54544e) */
  list-style: none;
  white-space: nowrap;
}

.clients__reihe li {
  flex: none;
  transition: color 0.35s, text-shadow 0.35s;
  cursor: default;
}

/* Der Lichteffekt. Drei Hoefe statt eines: ein enger heller Kern, ein
   mittlerer Schein und ein weiter, schwacher Ueberstrahl — so leuchtet
   Licht, ein einzelner Schatten sieht nach Weichzeichner aus. */
.clients__reihe li:hover {
  color: #fff;
  text-shadow:
    0 0 7px rgba(255, 227, 176, 0.95),
    0 0 20px rgba(255, 227, 176, 0.6),
    0 0 54px rgba(255, 200, 140, 0.4);
}


/* Logos statt Namen. Beide Formen duerfen im selben Band stehen: wo eine
   Datei vorliegt, steht das Logo, sonst der Name. So laesst sich die Zeile
   Stueck fuer Stueck umstellen, ohne dass zwischendurch Luecken entstehen.

   Im Ruhezustand sind die Logos gedaempft wie die Namen — dieselbe Sprache
   wie bei den Kennzahlen: erst zurueckhaltend, dann angehen. Ein Bild kennt
   keinen text-shadow, darum uebernimmt drop-shadow die drei Lichthoefe. */
.clients__reihe img {
  display: block;
  /* Hoehe vorgeben, Breite laufen lassen: Logos sind unterschiedlich breit,
     aber gleich hoch wirken sie als Reihe. */
  height: 26px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  opacity: 0.42;
  transition: opacity 0.35s, filter 0.35s;
}

/* Nur mit Maus: Am Telefon blieb der Lichteffekt nach dem Antippen an
   einem Logo hängen, das Band sah aus, als gingen Logos an und aus. */
@media (hover: hover) {
  .clients__reihe li:hover img {
    opacity: 1;
    filter:
      drop-shadow(0 0 6px rgba(255, 227, 176, 0.75))
      drop-shadow(0 0 18px rgba(255, 227, 176, 0.45))
      drop-shadow(0 0 48px rgba(255, 200, 140, 0.3));
  }
}

@media (hover: none) {
  .clients__reihe img {
    opacity: 0.72;
  }
}

/* Steht das Band still — kein Skript, abbestellte Bewegung —, gehoert die
   Zeile auf die Seitenkante wie alles andere. Die Klasse setzt das Skript;
   ohne :has(), denn genau hier soll nichts Modernes vorausgesetzt werden. */
.clients:not(.ist-band) .clients__reihe {
  padding-left: var(--pad);
  padding-right: var(--pad);
  flex-wrap: wrap;
  white-space: normal;
  gap: 18px 68px;
}

@media (prefers-reduced-motion: reduce) {
  .clients__spur.ist-laufend {
    animation: none;
  }
}

@media (max-width: 900px) {
  .clients__reihe {
    gap: 44px;
    padding: 30px 22px;
  }
}

/* ==========================================================================
   DIE LEGENDE ZUR AUFBAUZEICHNUNG

   In jeder Aufbauzeichnung des Herstellers stehen graue Kreise mit A, B, C
   und D auf den Bauteilen. Ohne Legende sind sie stumm: Man sieht, DASS drei
   Teile bezeichnet sind, erfaehrt aber nicht, welches Teil welches ist. Bis
   zum 1. September 2026 stand auf der Seite genau das — die Zeichnung mit
   ihren Kreisen und kein Wort dazu.

   Der Text stammt aus dem bestehenden Auftritt (stanek-werbung.de, je eine
   Seite pro Ausfuehrung) und ist gegen die Zeichnungen geprueft: Jeder
   Buchstabe, der in einer Zeichnung vorkommt, hat einen Eintrag, und keiner
   steht in der Liste, den die Zeichnung nicht zeigt.

   DAS ZEICHEN IST EIN KREIS, KEINE AUFZAEHLUNG. Ein schlichtes "A)" waere
   eine Nummerierung wie jede andere; der Leser muesste selbst darauf kommen,
   dass es sich auf die Zeichnung daneben bezieht. Der Kreis nimmt die Form
   auf, die in der Zeichnung steht, und stellt die Verbindung ohne einen Satz
   Erklaerung her.

   NICHT als ol mit list-style, sondern mit eigenem Zeichen: Die Buchstaben
   sind keine Reihenfolge, sondern Namen. Bei EGOLIGHT 6 traegt die Zeichnung
   dreimal dasselbe A — eine Nummerierung wuerde daraus A, B, C machen und
   damit die Zeichnung verfaelschen.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   14. Schmale Ansichten
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

  /* Alles Weitere zur Navigation auf schmalen Ansichten steht in Abschnitt 16,
     zusammen mit der Ziehharmonika — an zwei Stellen verteilt waere es nicht
     mehr nachvollziehbar. */

  .hero__content {
    bottom: 104px;
  }

  /* Schmal ist vom Foto nur ein Streifen zu sehen; dieselbe Deckung wie
     oben braucht hier andere Werte (am Telefon gemessen).
     DIE STRECKE IST LANG: 360 statt 180 % der Bildschirmhöhe (seit dem
     23. Oktober 2026, Wunsch von Jürgen Stanek). Am Telefon wischt man
     schnell; erst mit der doppelten Strecke zieht sich die Verwandlung
     über mehrere Wischer. */
  .wandel {
    --titel-h: 104px;
    --wandel-hoehe: 52vh;
    --vorher-x: 64%;
    --nachher-x: 47%;
    height: 600vh;
    margin-top: 40px;
  }

  .wandel__titel {
    font-size: min(30px, 8vw);
    line-height: 1.12;
  }
}

/* =============================================================================
   41. Zuruf in der Seitenmitte (.cta)

   WOZU ES DEN BAUSTEIN GIBT: Bis zum 2. September 2026 konnte eine Seite den
   Leser nur auf zwei Arten zur Anfrage schicken — mit dem grossen .zuruf, der
   eine ganze Bildschirmbreite fuellt und deshalb hoechstens zweimal je Seite
   ertraeglich ist, oder mit einem .link, den man leicht ueberliest. Dazwischen
   fehlte etwas: ein Angebot, das nach einem ueberzeugenden Abschnitt steht,
   deutlich sichtbar ist und die Seite trotzdem nicht unterbricht.

   Die Auftraggeberin hat am 2. September 2026 verlangt, dass die Anfrage nicht
   erst am Seitenende moeglich ist, sondern nach jedem Argument, das traegt.
   Genau dafuer ist .cta gebaut.

   AUFBAU: ein Satz links, der an den Abschnitt darueber anschliesst, und
   rechts die Handlung. Die Handlung ist immer ein gefuellter Knopf (der
   primaere Weg) und hoechstens ein zurueckhaltender Zweitweg daneben. Mehr
   als zwei Moeglichkeiten waeren keine Entscheidungshilfe mehr, sondern eine
   zweite Navigation.

   DER STRICH LINKS traegt die Lichtfarbe und ist dasselbe Zeichen wie beim
   Zitat: hier spricht die Seite den Leser direkt an, statt weiter zu
   berichten.

   NICHT VERWECHSELN mit .zuruf. Der steht einmal in der Seitenmitte und
   einmal am Ende, ist mittig gesetzt und hat eine eigene Ueberschrift. .cta
   hat keine Ueberschrift und ordnet sich dem Textfluss unter.
   ========================================================================== */

/* Hero: der Aufruf steht seit dem 2. September 2026 im Bild statt eines
   Sprunglinks. Knopf und Zweitweg brauchen deshalb hier etwas Luft
   zueinander und eine gemeinsame Grundlinie. */
.hero__go {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 26px;
  margin-top: 30px;
}

@media (max-width: 600px) {
  .hero__go {
    gap: 14px 18px;
  }
}


/* =============================================================================
   HANDY, ZWEITE RUNDE (seit dem 23. Oktober 2026, Wünsche von Jürgen Stanek)
   ========================================================================== */

/* --- Hengst im Kopf der Startseite, hochkant (seit dem 24. Oktober 2026) ---
   Wunsch von Jürgen Stanek: am Handy etwas kleiner. Hochkant blieb vom
   breiten Foto nur ein Streifen, und die Stele füllte den ganzen Schirm.
   Jetzt ist das Bild nur gut zwei Drittel so hoch wie der Kopf, oben und
   unten läuft es weich ins Dunkle aus, und es zoomt kaum noch. */
@media (max-aspect-ratio: 1/1) {
  .hero__dia:nth-child(3) {
    --s0: 1.05;
    --s1: 1;
    --y0: 0%;
  }

  .hero__dia:nth-child(3) img {
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 66%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  }
}

/* =============================================================================
   STARTSEITE: ANFRAGE HÄLT, VILEDA NUR MIT LETZTEM SATZ
   (seit dem 24. Oktober 2026 am Handy, noch am selben Tag auch am Computer,
   Wünsche von Jürgen Stanek)
   ========================================================================== */

/* In der Vileda-Geschichte bleibt nur der letzte Satz "Ein Auftritt, auf
   den dein Team stolz ist." mit dem Knopf "Zum STANEK-Prinzip" darunter,
   mittig. Die übrigen Sätze und das Wort "Visualisierung" auf dem ersten
   Bild sind weg. */
.story__satz[data-fuer="1 2"],
.story__satz[data-fuer="3 4"],
.story__satz[data-fuer="5"],
.story__hinweis {
  display: none;
}

.story__satz[data-fuer="6"] {
  text-align: center;
}

.story__aktion {
  justify-content: center;
}

@media (max-aspect-ratio: 1/1) {
  /* Ohne eigenen Grund schien oben und unten das Bild darunter durch. */
  .hero__dia:nth-child(3) {
    background: #000;
  }
}

/* Auf niedrigen Telefonen lag die Unterzeile sonst auf dem Schild. */
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  .hero__dia:nth-child(3) img {
    top: 9%;
    height: 54%;
  }
}

/* =============================================================================
   "WANN STANEK NICHT DER RICHTIGE PARTNER IST": RUHIGER (seit dem 24. Oktober
   2026, Wunsch von Jürgen Stanek)

   Vorher stand jede Zeile in einem eigenen Kasten mit rotem Rand und rotem
   Verlauf. Das wirkte zu dominant und passte nicht mehr zum übrigen Design.
   Jetzt liegt die ganze Liste mittig auf einer einzigen, leicht helleren
   Fläche, die Zeilen trennt nur eine feine Linie. Das Nein-Wort bleibt
   unterstrichen.
   ========================================================================== */


/* Zeilenumbruch nur am Handy (<br class="umbruch-handy">). */
.umbruch-handy {
  display: none;
}

@media (max-width: 900px) {
  .umbruch-handy {
    display: inline;
  }
}


/* =============================================================================
   LESBARKEIT UND BEDIENBARKEIT (seit dem 24. Oktober 2026)

   Nachbesserungen nach einer Prüfung auf Lesbarkeit und Bedienung mit
   Finger und Tastatur. Am Computer sieht alles aus wie vorher, die
   Änderungen greifen vor allem am Handy.
   ========================================================================== */


/* Kundenlogos im Band (seit dem 24. Oktober 2026): etwas heller als die
   frühere Grundeinstellung, damit man die Marken gut erkennt. */
.clients__reihe img {
  opacity: 0.6;
  height: 30px;
  max-width: 170px;
}

/* Optischer Ausgleich (seit dem 26. Oktober 2026): Bei gleicher Höhe wirkten
   fette, breite Schriftzüge wie TOBSTEEL und HAKRO zu wuchtig und die
   Bildzeichen von BMW, Sparkasse und Mondi zu klein. */
.clients__reihe img[src$="tobsteel.png"] { height: 19px; }
.clients__reihe img[src$="hakro.svg"],
.clients__reihe img[src$="jako.svg"] { height: 25px; }
.clients__reihe img[src$="r-weiss.png"] { height: 27px; }
.clients__reihe img[src$="mondi.svg"] { height: 40px; }
.clients__reihe img[src$="bmw.svg"],
.clients__reihe img[src$="sparkasse.svg"] { height: 38px; }
.clients__reihe img[src$="vgp.svg"] { height: 34px; }
.clients__reihe img[src$="studio-lamisse.png"],
.clients__reihe img[src$="bausch-stroebel.svg"] { max-width: 200px; height: 24px; }

@media (max-width: 900px) {
  .clients__reihe img { height: 24px; }
  .clients__reihe img[src$="tobsteel.png"] { height: 15px; }
  .clients__reihe img[src$="hakro.svg"],
  .clients__reihe img[src$="jako.svg"] { height: 20px; }
  .clients__reihe img[src$="r-weiss.png"] { height: 22px; }
  .clients__reihe img[src$="mondi.svg"] { height: 32px; }
  .clients__reihe img[src$="bmw.svg"],
  .clients__reihe img[src$="sparkasse.svg"] { height: 30px; }
  .clients__reihe img[src$="vgp.svg"] { height: 27px; }
  .clients__reihe img[src$="studio-lamisse.png"],
  .clients__reihe img[src$="bausch-stroebel.svg"] { max-width: 160px; height: 19px; }
}

/* =============================================================================
   Terminbuchung über Cal.com (seit dem 9. November 2026), termin-buchen.html.
   Nur sichtbar, wenn config('site.calcom.url') gesetzt ist.
   ========================================================================== */

/* Startseite: kurzer Absatz zum STANEK-Prinzip über dem Fußbereich (seit dem
   10. November 2026). Abstand nach unten wie bei den anderen Seitenenden. */
.section--prinzip {
  padding-bottom: 110px;
}