/* =====================================================================
   lebendig.css  ·  Belebung der Oberflaeche
   Wird als LETZTES Stylesheet geladen, nach styles.css, scroll-scenes.css
   und mobile.css. Hier stehen ausschliesslich Ergaenzungen: Bewegung,
   Tiefe, Hover-Zustaende und kleine Veredelungen. Inhalte und Layout
   der Seiten bleiben, wie sie sind.

   Grundsaetze
     - Nur transform, opacity, clip-path und Farben werden animiert;
       Layouteigenschaften nie. Alles bleibt auf dem Compositor.
     - Jede Bewegung hat unter prefers-reduced-motion eine ruhige
       Entsprechung (Abschnitt R am Ende).
     - Hover-Effekte gelten nur fuer Geraete mit Zeiger
       (hover:hover and pointer:fine).

   Aufbau
     1  Navigation      · Unterstreichung, die mitlaeuft
     2  Verweise        · Pfeile, die beim Zeigen vorruecken
     3  Schaltflaechen  · Druckpunkt
     R  Ruhige Fassung  · prefers-reduced-motion
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · NAVIGATION
   Statt der grauen Flaeche beim Zeigen waechst eine feine Linie unter
   dem Menuepunkt von links nach rechts. Der laufende Punkt behaelt sie
   dauerhaft. Das Kontaktfeld ist davon ausgenommen: es ist ein Knopf.
   --------------------------------------------------------------------- */
.nav-links > a:not(.nav-kontakt),
.nav-item > a{
  position:relative;
  background:transparent !important;
}
.nav-links > a:not(.nav-kontakt)::after,
.nav-item > a::after{
  content:""; position:absolute; left:11px; right:11px; bottom:4px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--petrol), var(--accent));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .32s var(--ease-out);
  pointer-events:none;
}
.nav-links > a:not(.nav-kontakt):hover::after,
.nav-item > a:hover::after,
.nav-item:focus-within > a::after{ transform:scaleX(1); }
.nav-links > a.is-current:not(.nav-kontakt)::after,
.nav-item > a.is-current::after{ transform:scaleX(1); opacity:.55; }
/* Der Pfeil im Aufklappmenue tritt sanft von links ein */
.nav-drop a{ transition:background .16s, color .16s, padding-left .22s var(--ease-out); }
.nav-drop a:hover{ padding-left:20px; }
@media (max-width:1080px){
  .nav-links > a:not(.nav-kontakt)::after,
  .nav-item > a::after{ display:none; }
  .nav-drop a:hover{ padding-left:10px; }
}

/* ---------------------------------------------------------------------
   2 · VERWEISE MIT PFEIL
   lebendig.js legt den abschliessenden Pfeil (→) der Weiterlinks in ein
   <span class="pfeil">. Beim Zeigen rueckt er ein Stueck vor und die
   Linie unter dem Verweis zieht sich von links auf.
   --------------------------------------------------------------------- */
.pfeil{
  display:inline-block;
  transition:transform .3s var(--ease-out);
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  a:hover > .pfeil,
  a:hover .pfeil,
  .lsp a:hover .pfeil,
  .btn-primary:hover .pfeil{ transform:translateX(5px); }
}
.more-link,
.post-more,
.svc-more{
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-size:0 1.5px;
  background-position:0 100%;
  padding-bottom:2px;
  transition:background-size .38s var(--ease-out), color .2s;
}
@media (hover:hover) and (pointer:fine){
  .more-link:hover,
  .post-card:hover .post-more,
  .svc:hover .svc-more{ background-size:100% 1.5px; }
}

/* ---------------------------------------------------------------------
   3 · SCHALTFLAECHEN
   Ein spuerbarer Druckpunkt beim Klicken; der Lichtstreif bleibt.
   --------------------------------------------------------------------- */
.btn-primary,
.nav-links > a.nav-kontakt,
.submit,
.kt-tel{
  transition:transform .18s var(--ease-out), box-shadow .25s ease, background .2s, border-color .2s;
}
.btn-primary:active,
.nav-links > a.nav-kontakt:active,
.submit:active{ transform:translateY(1px) scale(.985); }
.nav-links > a.nav-kontakt{ box-shadow:0 0 0 0 rgba(1,74,98,0); }
@media (hover:hover) and (pointer:fine){
  .nav-links > a.nav-kontakt:hover{ box-shadow:0 8px 20px rgba(1,74,98,.22); transform:translateY(-1px); }
}

/* ---------------------------------------------------------------------
   4 · AUFTRITTE BEIM SCROLLEN
   site.js vergibt data-rvl und spaeter .is-in; hier kommen zwei neue
   Richtungen dazu:
     t  Titel: blendet mit einem kleinen Anstieg ein, etwas langsamer
               als der uebrige Text
     w  Bild:  blendet ein, das Motiv zieht sich dabei kaum merklich
               von 1,03 auf 1,0 zusammen
   Die Linie vor der Rubrik zeichnet sich, sobald die Rubrik erscheint.
   Nach dem Auftritt raeumt site.js die Attribute ab, dann gelten
   wieder die Grundregeln - deshalb enden alle Werte im Normalzustand.
   --------------------------------------------------------------------- */
.js [data-rvl="t"]{
  opacity:0; transform:translateY(10px);
  transition:opacity .9s ease calc(var(--rd,0s) + .05s), transform .9s var(--ease-out) calc(var(--rd,0s) + .05s);
}
.js [data-rvl="t"].is-in{ opacity:1; transform:none; }

.js [data-rvl="w"]{
  opacity:0; transform:translateY(12px);
  transition:opacity 1s ease var(--rd,0s), transform 1s var(--ease-out) var(--rd,0s);
}
.js [data-rvl="w"].is-in{ opacity:1; transform:none; }
.js [data-rvl="w"] img{ transform:scale(1.03); transition:transform 1.6s var(--ease-out) var(--rd,0s); }
.js [data-rvl="w"].is-in img{ transform:none; }

.js .sec-eyebrow[data-rvl]{ transform:translateX(-6px); }
.js .sec-eyebrow[data-rvl]::before{ transform:scaleX(0); transform-origin:left center; }
.js .sec-eyebrow[data-rvl].is-in{ transform:none; }
.js .sec-eyebrow[data-rvl].is-in::before{
  transform:scaleX(1);
  transition:transform .7s var(--ease-out) calc(var(--rd,0s) + .18s);
}

/* ---------------------------------------------------------------------
   5 · AUFTRITT DER SEITENKOEPFE
   Brotkrumen, Rubrik, Titel, Vorspann und Schaltflaechen steigen beim
   Laden nacheinander auf. Reine CSS-Animation: sie laeuft genau einmal
   und kann nicht steckenbleiben. fill-mode:both haelt den Startzustand
   nur, solange die Animation existiert - ohne sie ist alles sichtbar.
   --------------------------------------------------------------------- */
@keyframes kopfAuftritt{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
.js .page-head .wrap > *,
.js .article-head .wrap > *{
  animation:kopfAuftritt .85s var(--ease-out) both;
  animation-delay:calc(.08s + var(--ki, 0) * .09s);
}
.js .page-head .wrap > :nth-child(1), .js .article-head .wrap > :nth-child(1){ --ki:0; }
.js .page-head .wrap > :nth-child(2), .js .article-head .wrap > :nth-child(2){ --ki:1; }
.js .page-head .wrap > :nth-child(3), .js .article-head .wrap > :nth-child(3){ --ki:2; }
.js .page-head .wrap > :nth-child(4), .js .article-head .wrap > :nth-child(4){ --ki:3; }
.js .page-head .wrap > :nth-child(5), .js .article-head .wrap > :nth-child(5){ --ki:4; }
.js .page-head .wrap > :nth-child(n+6), .js .article-head .wrap > :nth-child(n+6){ --ki:5; }
/* Der Equalizer im Kopf laeuft bereits; er braucht keinen Auftritt. */
.js .page-head .wrap > .page-head-eq{ animation:none; }

/* ---------------------------------------------------------------------
   6 · HERO DER STARTSEITE · TEXT IN DREI STUFEN
   Die Folie blendet als Ganzes ein (scroll-scenes.css). Darin steigen
   Titel und Absatz leicht versetzt nach - das gibt dem Wechsel Tiefe.
   --------------------------------------------------------------------- */
.scene--hero .scene-step h2,
.scene--hero .scene-step p{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .7s var(--ease-out);
}
.scene--hero .scene-step.is-on h2{ opacity:1; transform:none; transition-delay:.06s; }
.scene--hero .scene-step.is-on p{ opacity:1; transform:none; transition-delay:.2s; }

/* ---------------------------------------------------------------------
   7 · LICHTPUNKT AUF KARTEN
   lebendig.js legt in jede Karte ein <i class="spot"> und fuehrt beim
   Zeigen die Variablen --mx/--my nach. Der Lichtpunkt liegt ueber dem
   Kartengrund und unter dem Inhalt (z-index:-1 im eigenen Stapel der
   Karte). Nur auf Geraeten mit feinem Zeiger.
   --------------------------------------------------------------------- */
.spot-host{ position:relative; isolation:isolate; }
.spot{
  position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .45s ease;
  background:radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
             rgba(175,209,219,.42), rgba(175,209,219,.12) 38%, transparent 68%);
}
@media (hover:hover) and (pointer:fine){
  .spot-host:hover > .spot{ opacity:1; }
}
/* Auf den dunklen Rufkarten im Kontakt ist der Grund hell; die Karte
   mit Rufnummer bekommt denselben Punkt wie alle anderen. */

/* Karten heben sich beim Zeigen ein wenig deutlicher und bekommen eine
   farbige Kante - einheitlich fuer alle Kartenarten. */
@media (hover:hover) and (pointer:fine){
  .fact:hover, .link-card:hover, .svc:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 44px rgba(1,74,98,.14);
  }
  .fact, .link-card, .svc{ transition:transform .32s var(--ease-out), box-shadow .32s ease, border-color .3s ease; }
  .fact-ico, .link-ico, .svc-icon{ transition:transform .35s var(--ease-out), background .3s ease, color .3s ease; }
  .fact:hover .fact-ico, .link-card:hover .link-ico, .svc:hover .svc-icon{
    transform:translateY(-2px) scale(1.06); background:var(--petrol); color:#fff;
  }
}

/* ---------------------------------------------------------------------
   8 · TEAM
   Das Foto bekommt beim Zeigen einen weichen himmelblauen Ring, das
   Motiv zieht leicht auf, der Name faerbt sich.
   --------------------------------------------------------------------- */
.tm-photo{ transition:transform .4s var(--ease-out), box-shadow .4s ease; }
.tm-photo img{ transition:transform .7s var(--ease-out); }
.tm-name{ transition:color .25s ease; }
@media (hover:hover) and (pointer:fine){
  .tm-card:hover .tm-photo{
    transform:scale(1.02);
    box-shadow:0 0 0 4px rgba(175,209,219,.55), 0 24px 46px rgba(1,74,98,.22);
  }
  .tm-card:hover .tm-photo img{ transform:scale(1.07); }
  .tm-card:hover .tm-name{ color:var(--accent); }
}

/* ---------------------------------------------------------------------
   9 · FAQ UND REFERENZ-AUFKLAPPER
   Geoeffnete Fragen tragen links eine Akzentkante, der Pfeil dreht
   mit einem kleinen Ueberschwinger.
   --------------------------------------------------------------------- */
.faq-item{ box-shadow:inset 0 0 0 0 var(--accent); transition:border-color .25s, box-shadow .35s ease, transform .3s var(--ease-out); }
.faq-item[open]{ box-shadow:inset 3px 0 0 0 var(--accent), 0 14px 32px rgba(1,74,98,.08); }
.faq-toggle, .ref-toggle, .mship-chevron, .refnote-chevron{
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), margin-top .45s cubic-bezier(.34,1.56,.64,1);
}
@media (hover:hover) and (pointer:fine){
  .faq-item:not([open]):hover{ transform:translateX(4px); }
}

/* ---------------------------------------------------------------------
   11 · RUFBAND MIT WANDERNDEM LICHT
   Zwei grosse, weiche Lichtflecken ziehen langsam hinter dem Text des
   Rufbands hin und her.
   --------------------------------------------------------------------- */
.cta-band{ position:relative; overflow:hidden; isolation:isolate; }
.cta-band .wrap{ position:relative; z-index:1; }
.cta-band::before,
.cta-band::after{
  content:""; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
  will-change:transform;
}
.cta-band::before{
  width:62vmax; height:62vmax; left:-18vmax; top:-40vmax;
  background:radial-gradient(circle, rgba(175,209,219,.36), rgba(175,209,219,.08) 40%, transparent 68%);
  animation:ctaLichtA 16s ease-in-out infinite alternate;
}
.cta-band::after{
  width:50vmax; height:50vmax; right:-16vmax; bottom:-34vmax;
  background:radial-gradient(circle, rgba(54,119,169,.62), rgba(54,119,169,.16) 42%, transparent 70%);
  animation:ctaLichtB 13s ease-in-out infinite alternate;
}
@keyframes ctaLichtA{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(18vmax,6vmax,0); } }
@keyframes ctaLichtB{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-16vmax,-8vmax,0); } }
.cta-band .btn-primary{ box-shadow:0 10px 30px rgba(0,0,0,.28); }

/* ---------------------------------------------------------------------
   13 · PARALLAXE AM SCROLLBALKEN
   Bilder in Kaesten wandern beim Scrollen ein kleines Stueck langsamer
   als die Seite. Das macht der Browser selbst (animation-timeline:
   view()), ohne ein einziges Scroll-Ereignis im Skript; wo er es nicht
   kann, passiert schlicht nichts. Bewegt wird die Einzel-Eigenschaft
   translate, damit sie sich nicht mit transform (Auftritt, Hover)
   ins Gehege kommt; scale sorgt fuer die Reserve an den Kanten.
   --------------------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (min-width:861px){
    /* overflow:hidden macht einen Kasten zum Scroll-Container, und
       view() misst dann gegen den Kasten statt gegen die Seite. clip
       schneidet genauso ab, zaehlt aber nicht als Scroller. */
    .tool-foto, .feature-media, .fm-bild,
    .page-head, .page-head--photo .head-photo, .page-head--foto .ph-foto{ overflow:clip; }
    .tool-foto img,
    .feature-media img,
    .fm-bild img{
      scale:1.12;
      animation:parallaxe linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    /* Produktfoto auf weissem Grund: ohne Reserve, nur die Bewegung. */
    .fm-bild img{ scale:1; }
    /* Spektrogramm mit Bildunterschrift: Zoom und Verschiebung wuerden
       die erste Zeile der Unterschrift ueberdecken, Achsen gingen verloren. */
    .tool-foto--spektro img{ animation:none; scale:1; translate:none; }
    /* Das Kopfbild der Fernmessung bleibt bewusst aussen vor: Die Reserve
       von 1,1 zoomt hinein und schneidet das Paket an. */
    /* Kopfbild (Referenzen, Unternehmen ohne Schwenk): schiebt sich
       beim Weiterscrollen langsamer aus dem Bild. */
    .page-head--photo .head-photo:not(.head-photo--pan) img{
      scale:1.1;
      animation:kopfParallaxe linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
  }
}
@keyframes parallaxe{
  from{ translate:0 -5%; }
  to  { translate:0 5%; }
}
@keyframes kopfParallaxe{
  from{ translate:0 0; }
  to  { translate:0 14%; }
}

/* ---------------------------------------------------------------------
   14 · SEITENSTART
   Beim Aufruf steigt die Seite kurz aus dem Weiss auf. Eine
   Ueberblendung zwischen zwei Dokumenten gibt es bewusst nicht: Sie
   legte das Kopfbild der vorigen Seite unter die Ueberschrift der
   neuen, solange deren Bild noch lud.
   --------------------------------------------------------------------- */
@keyframes seiteStart{ from{ opacity:0; } }
.js body{ animation:seiteStart .45s ease-out both; }

/* ---------------------------------------------------------------------
   15 · FORMULAR
   Das Feld mit Fokus hebt sich leicht, die Beschriftung faerbt sich
   mit; der Sendeknopf antwortet auf den Zeiger wie die uebrigen
   Schaltflaechen.
   --------------------------------------------------------------------- */
.field label{ transition:color .2s ease; }
.field:focus-within label{ color:var(--accent); }
.field input, .field textarea{
  transition:border-color .2s, box-shadow .25s ease, background .25s ease, transform .25s var(--ease-out);
}
.field input:focus, .field textarea:focus{ background:#fff; transform:translateY(-1px); }
@media (hover:hover) and (pointer:fine){
  .submit:hover{ box-shadow:0 10px 24px rgba(1,74,98,.22); transform:translateY(-1px); }
}

/* ---------------------------------------------------------------------
   17 · HANDY-MENUE
   Beim Oeffnen fahren die Eintraege nacheinander von rechts ein. Die
   Animation haengt an body.nav-open und startet mit jedem Oeffnen neu.
   --------------------------------------------------------------------- */
@keyframes menuEin{
  from{ opacity:0; transform:translateX(18px); }
  to  { opacity:1; transform:none; }
}
@media (max-width:1080px){
  body.nav-open .nav-links > *{
    animation:menuEin .5s var(--ease-out) both;
    animation-delay:calc(.12s + var(--mi, 0) * .055s);
  }
  body.nav-open .nav-links > :nth-child(1){ --mi:0; }
  body.nav-open .nav-links > :nth-child(2){ --mi:1; }
  body.nav-open .nav-links > :nth-child(3){ --mi:2; }
  body.nav-open .nav-links > :nth-child(4){ --mi:3; }
  body.nav-open .nav-links > :nth-child(5){ --mi:4; }
  body.nav-open .nav-links > :nth-child(6){ --mi:5; }
  body.nav-open .nav-links > :nth-child(n+7){ --mi:6; }
}

/* ---------------------------------------------------------------------
   R · RUHIGE FASSUNG
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .pfeil{ transition:none; }
  a:hover .pfeil, .lsp a:hover .pfeil, .btn-primary:hover .pfeil{ transform:none; }
  .nav-links > a::after, .nav-item > a::after{ transition:none; }
  .nav-drop a{ transition:none; }
  .more-link, .post-more, .svc-more{ transition:none; }
  .js [data-rvl="t"], .js [data-rvl="w"]{ transform:none; opacity:1; transition:none; }
  .js [data-rvl="w"] img{ transform:none; transition:none; }
  .js .sec-eyebrow[data-rvl]{ transform:none; }
  .js .sec-eyebrow[data-rvl]::before{ transform:none; transition:none; }
  .js .page-head .wrap > *, .js .article-head .wrap > *{ animation:none; }
  .scene--hero .scene-step h2, .scene--hero .scene-step p{ opacity:1; transform:none; transition:none; }
  .spot{ transition:none; }
  .fact, .link-card, .svc, .fact-ico, .link-ico, .svc-icon, .tm-photo, .tm-photo img, .faq-item,
  .faq-toggle, .ref-toggle, .mship-chevron, .refnote-chevron{ transition:none; }
  .fact:hover, .link-card:hover, .svc:hover, .faq-item:not([open]):hover{ transform:none; }
  .tm-card:hover .tm-photo, .tm-card:hover .tm-photo img{ transform:none; }
  .cta-band::before, .cta-band::after{ animation:none; }
  .tool-foto img, .feature-media img, .fm-bild img,
  .page-head--photo .head-photo img, .page-head--foto .ph-foto img{ animation:none; scale:1; translate:none; }
  .js body{ animation:none; }
  .field input, .field textarea, .field label{ transition:none; }
  .field input:focus, .field textarea:focus{ transform:none; }
  body.nav-open .nav-links > *{ animation:none; }
}

/* =====================================================================
   18 · PROJEKTBAND (Startseite)
   Dunkles Band ueber die volle Breite, Karten in einer Bahn, die sich
   ziehen laesst. Nur die aufgeklappte Karte waechst; die Bahn richtet
   die Karten oben aus, statt sie auf gleiche Hoehe zu strecken.
   ===================================================================== */
.prj-band{
  background:linear-gradient(165deg,#02465c 0%,#012530 58%,#01212b 100%);
  color:#eaf4f7; padding-bottom:clamp(44px,6vh,72px) !important;
}
.prj-band .sec-eyebrow{ color:var(--skyblue); }
.prj-band .sec-title{ color:#fff; }
.prj-band .sec-intro{ color:rgba(207,228,234,.86); }
.prj-bahn{ margin-top:clamp(28px,4vw,44px); }
.prj-spur{
  display:flex; align-items:flex-start; gap:20px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:30px;
  padding-bottom:14px; scrollbar-width:none; cursor:grab;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.prj-spur::-webkit-scrollbar{ display:none; }
.prj-spur.zieht{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.prj-spur.zieht *{ pointer-events:none; }
/* Waehrend Laufleiste, Rad oder Trackpad die Bahn fuehren, darf sie nicht
   an jeder Karte einrasten; angelegt wird erst, wenn die Bewegung endet. */
.prj-spur.frei{ scroll-snap-type:none; }
.prj-spur::after{ content:""; flex:0 0 10px; }
.prj{
  flex:0 0 min(360px, 80vw); scroll-snap-align:start;
  background:rgba(255,255,255,.05); border:1px solid rgba(175,209,219,.18); border-radius:14px;
  padding:12px 12px 16px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .3s ease, background .3s ease, transform .35s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .prj:hover{ border-color:rgba(175,209,219,.45); background:rgba(255,255,255,.08); transform:translateY(-3px); }
  .prj:hover .prj-bild img{ transform:scale(1.04); filter:saturate(1); }
}
.prj-bild{ margin:0; aspect-ratio:4/3; overflow:hidden; border-radius:8px; background:#011b23; }
.prj-bild img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.82); transition:transform .9s var(--ease-out), filter .6s ease; -webkit-user-drag:none; user-select:none; }
.prj-art{ display:block; margin-top:6px; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--skyblue); }
.prj h3{ font-size:18.5px; color:#fff; line-height:1.3; margin:0; }
.prj-fold{ border-top:1px solid rgba(175,209,219,.18); padding-top:10px; margin-top:4px; }
.prj-fold summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:14px; font-weight:600; color:var(--skyblue); transition:color .2s;
}
.prj-fold summary::-webkit-details-marker{ display:none; }
.prj-fold summary:hover{ color:#fff; }
.prj-plus{ position:relative; width:14px; height:14px; flex:0 0 auto; }
.prj-plus::before, .prj-plus::after{ content:""; position:absolute; left:0; top:6px; width:14px; height:2px; background:currentColor; border-radius:1px; transition:transform .35s var(--ease-out); }
.prj-plus::after{ transform:rotate(90deg); }
.prj-fold[open] .prj-plus::after{ transform:rotate(0deg); }
.prj-fold[open] .prj-plus::before{ transform:rotate(180deg); }
.prj-detail{ overflow:hidden; }
.js .prj-detail{ transition:height .36s cubic-bezier(.4,0,.2,1); }
.prj-detail p{ font-size:14px; color:#cfe4ea; line-height:1.62; margin:10px 0 0; }
.prj-steuer{ display:flex; align-items:center; gap:22px; margin-top:16px; }
/* Die Laufleiste ist ein Griff: Die Flaeche ist deutlich hoeher als die
   sichtbare Linie, damit sie sich mit Maus und Finger gut fassen laesst. */
.prj-lauf{ flex:1; height:26px; position:relative; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; border-radius:4px; }
.prj-lauf::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(175,209,219,.22); }
.prj-lauf i{ position:absolute; left:0; top:50%; height:5px; margin-top:-2px; width:20%; border-radius:3px; background:var(--skyblue); transition:left .15s linear, width .2s, height .2s, margin-top .2s; }
.prj-lauf:hover i, .prj-lauf.greift i{ height:8px; margin-top:-4px; }
.prj-lauf.greift{ cursor:grabbing; }
.prj-lauf.greift i{ transition:height .2s, margin-top .2s; }
.prj-lauf:focus-visible{ outline:2px solid var(--skyblue); outline-offset:3px; }
.prj-knoepfe{ display:flex; gap:8px; }
.prj-rund{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(175,209,219,.3); background:none; color:#eaf4f7;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s var(--ease-out);
}
.prj-rund svg{ width:18px; height:18px; }
.prj-rund:hover{ background:rgba(255,255,255,.08); border-color:var(--skyblue); }
.prj-rund:active{ transform:scale(.94); }
.prj-rund[disabled]{ opacity:.35; cursor:default; }
.prj-mehr{ margin-top:0; color:var(--skyblue); }
.prj-mehr:hover{ color:#fff; }
@media (max-width:700px){
  .prj-steuer{ flex-wrap:wrap; gap:14px 18px; }
  .prj-lauf{ flex:1 1 100%; order:-1; }
  .prj-mehr{ margin-left:auto; }
}

/* =====================================================================
   19 · WEG (Unternehmen)
   Senkrechter Zeitstrahl links, daneben klebt ein Seitenstreifen mit
   Bild und Mitgliedschaften. Die Schiene fuellt sich bis zur Lesehoehe.
   ===================================================================== */
.weg-raster{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(36px,6vw,96px); align-items:start; margin-top:clamp(30px,4vw,48px); }
.weg{ list-style:none; margin:0; padding:0 0 0 30px; position:relative; }
.weg::before{ content:""; position:absolute; left:5px; top:12px; bottom:12px; width:1px; background:var(--line); }
.weg::after{ content:""; position:absolute; left:5px; top:12px; width:1px; height:calc(var(--weg-fort,0) * (100% - 24px)); background:var(--petrol); }
.weg-posten{ position:relative; display:grid; grid-template-columns:112px minmax(0,1fr); gap:6px 24px; padding:14px 0 30px; }
.weg-posten::before{
  content:""; position:absolute; left:-30px; top:22px; width:11px; height:11px; border-radius:50%;
  background:#fff; border:1.5px solid var(--line); z-index:1;
  transition:background .4s, border-color .4s, transform .4s var(--ease-out);
}
.weg-posten.ist-an::before{ background:var(--petrol); border-color:var(--petrol); transform:scale(1.15); }
.weg-zeit{ padding-top:2px; line-height:1.1; transition:color .4s; }
.weg-zeit b{ display:block; font-size:clamp(22px,2.4vw,28px); font-weight:700; letter-spacing:-.01em; color:var(--petrol); }
.weg-zeit small{ display:block; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-top:4px; }
.weg-text p{ font-size:16px; color:var(--ink); line-height:1.62; margin:0; max-width:52ch; }
.weg-text a{ color:var(--petrol); font-weight:600; }
.weg-text .tl-mehr{ display:inline-block; margin-top:4px; }
.weg-figur{ margin:16px 0 0; max-width:520px; border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow:0 18px 40px -22px rgba(1,44,59,.35); background:#0b1c22; }
.weg-figur video{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; }
.weg-figur figcaption{ font-size:11.5px; color:var(--ink-soft); padding:8px 12px; background:#fff; border-top:1px solid var(--line); }
.js .weg-posten{ opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .9s var(--ease-out); }
.js .weg-posten.ist-da{ opacity:1; transform:none; }
.weg-seite{ position:sticky; top:calc(var(--nav-h,78px) + 24px); display:flex; flex-direction:column; gap:26px; }
.weg-bild{ margin:0; }
.weg-bild img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:14px; box-shadow:0 16px 38px rgba(1,74,98,.14); filter:saturate(.85); }
.weg-bild figcaption{ font-size:11.5px; color:var(--ink-soft); margin-top:10px; }
.weg-mitglieder{ border-top:1px solid var(--line); padding-top:20px; }
.weg-mk{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.weg-logos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:center; }
.weg-logos img{ width:100%; height:56px; object-fit:contain; display:block; transition:filter .4s, transform .35s var(--ease-out); }
.weg-logos img.weg-logo--breit{ height:44px; }
@media (hover:hover) and (pointer:fine){
  .weg-logos img{ filter:grayscale(1) opacity(.7); }
  .weg-logos:hover img{ filter:grayscale(1) opacity(.45); }
  .weg-logos img:hover{ filter:none; transform:scale(1.05); }
}
.weg-mitglieder p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:16px 0 0; }
.weg-mitglieder a{ color:var(--accent); font-weight:600; text-decoration:none; }
.weg-mitglieder a:hover{ color:var(--petrol); }
@media (max-width:900px){
  .weg-raster{ grid-template-columns:1fr; gap:40px; }
  .weg-seite{ position:static; }
}
@media (max-width:700px){
  .weg-posten{ grid-template-columns:1fr; gap:4px; padding:12px 0 26px; }
  .weg-zeit{ display:flex; align-items:baseline; gap:10px; }
  .weg-zeit b{ font-size:19px; }
  .weg-zeit small{ margin-top:0; }
  .weg-figur{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .prj, .prj-bild img, .prj-plus::before, .prj-plus::after, .prj-lauf i{ transition:none; }
  .js .prj-detail{ transition:none; }
  .js .weg-posten{ opacity:1; transform:none; transition:none; }
  .weg-posten::before, .weg-zeit{ transition:none; }
}

/* =====================================================================
   20 · KI-KENNZEICHNUNG AM BILD
   Klein in der Bildecke, wie der Bildnachweis im Hero der Startseite.
   Der Kasten schneidet mit clip statt hidden, sonst misst die Parallaxe
   (Abschnitt 13) gegen ihn statt gegen die Seite.
   ===================================================================== */
.bild-ki{ position:relative; overflow:clip; }
.ki-hinweis{
  position:absolute; right:9px; bottom:6px;
  font-size:9.5px; letter-spacing:.05em; line-height:1.4;
  color:rgba(255,255,255,.85); text-shadow:0 1px 3px rgba(1,25,33,.9);
  pointer-events:none;
}
@media (max-width:700px){ .ki-hinweis{ font-size:10px; } }
/* Kraeftige Motive etwas zuruecknehmen, damit sie neben dem Text ruhig bleiben. */
.bild-sanft{ filter:saturate(.8) contrast(.95) brightness(1.02); }

/* Hero, zweite Folie: Der Ausschnitt sitzt am rechten Bildrand, damit die
   Person mit dem Messgeraet nicht unter dem Weiter-Pfeil steht. */
@media (min-width:861px){ .hero-bild--einsatz{ object-position:100% 50%; } }

/* Passen alle Beitraege in die Reihe, haben die Pfeile nichts zu tun. */
.post-karussell:has(.pk-pfeil--zurueck[disabled]):has(.pk-pfeil--vor[disabled]) .pk-pfeil{ display:none; }

/* Zwei getoente Abschnitte hintereinander (Unternehmen): feine Linie dazwischen. */
.block.tinted + .block.tinted{ border-top:1px solid var(--line); }

/* =====================================================================
   21 · HERO DER STARTSEITE · WEICHER SCHLEIER NUR WO GEWOLLT
   Der urspruengliche Verlauf (scroll-scenes.css) deckt die Bildhoehe
   gleichmaessig und bleibt der Normalfall. Bilder mit dem Attribut
   data-schleier-weich bekommen stattdessen einen Verlauf, der nur dort
   sitzt, wo Text steht. Beide Ebenen blenden ueber --weich ineinander,
   den Wert setzt die Szene (scene-extra.js) passend zur Bildueberblendung.
   Bilder ohne eigene Regel behalten auch ihren alten Filter.
   ===================================================================== */
.hero-bild--rechts{ filter:saturate(1.12) contrast(1.12) brightness(.94); }
/* Die Warnweste ist von Haus aus sehr leuchtend, deshalb hier zurueckgenommen. */
.hero-bild--einsatz{ filter:saturate(.82) contrast(1.04) brightness(.98); }
@media (min-width:861px){
  .scene--foto .scene-stage{ --weich:1; }
  .scene--foto .scene-stage::after{ opacity:calc(1 - var(--weich)); }
  .scene--foto .scene-stage::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    opacity:var(--weich);
    background:
      radial-gradient(ellipse 60% 74% at 14% 68%, rgba(1,37,48,.92) 0%, rgba(1,37,48,.78) 44%, rgba(1,37,48,.32) 74%, rgba(1,37,48,0) 100%),
      linear-gradient(100deg, rgba(1,37,48,.40) 0%, rgba(1,37,48,.14) 40%, rgba(1,45,58,.03) 75%),
      linear-gradient(to top, rgba(1,37,48,.60), transparent 32%);
  }
}

/* =====================================================================
   SPRACHWAHL (DE / EN)
   Kleiner Knopf rechts in der Kopfzeile, auf jeder Seite. Er fuehrt
   zur gleichen Seite in der anderen Sprache (en/<seite>.html bzw.
   zurueck). Am Telefon steht er zwischen "Kontakt" und dem Menue.
   ===================================================================== */
.sprachwahl{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:30px; padding:0 9px; margin-left:12px;
  border:1px solid var(--line); border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.08em; line-height:1;
  color:var(--petrol); text-decoration:none; background:#fff;
  transition:background .2s, border-color .2s;
}
.sprachwahl:hover, .sprachwahl:focus-visible{ background:var(--bg-tint); border-color:var(--petrol); }
@media (max-width:1080px){
  .sprachwahl{ margin-left:0; height:32px; }
}
@media (max-width:380px){
  .sprachwahl{ min-width:32px; padding:0 7px; }
}

/* Englische Fassung: Texte, die per CSS eingesetzt werden */
@media (max-width: 860px){
  :lang(en) .kt-seite .kt-tel--kopf b::before{ content:"Phone "; }
  :lang(en) .kt-seite .kt-personen::before{ content:"Your contact"; }
}

/* =====================================================================
   QUELLEN DER PEGELBEISPIELE (Startseite, unter dem Regler)
   Absichtlich kaum sichtbar: kleine, blasse Zeile, die sich aufklappen
   laesst. Erst beim Ueberfahren wird sie etwas heller.
   ===================================================================== */
.pb-quellen{ margin-top:10px; font-size:11.5px; line-height:1.55; color:rgba(207,228,234,.42); }
.pb-quellen > summary{
  display:inline-flex; align-items:center; gap:6px;
  list-style:none; cursor:pointer; user-select:none;
  color:rgba(207,228,234,.42); transition:color .2s;
}
.pb-quellen > summary::-webkit-details-marker{ display:none; }
.pb-quellen > summary::after{
  content:""; width:5px; height:5px; margin-top:-2px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); transition:transform .2s;
}
.pb-quellen[open] > summary::after{ transform:rotate(-135deg); margin-top:3px; }
.pb-quellen > summary:hover, .pb-quellen > summary:focus-visible, .pb-quellen[open] > summary{ color:rgba(207,228,234,.75); }
.pb-quellen p{ margin:8px 0 6px; color:rgba(207,228,234,.6); font-size:11.5px; }
.pb-quellen ul{ margin:0; padding-left:16px; color:rgba(207,228,234,.6); }
.pb-quellen li{ margin:2px 0; }
.pb-quellen a{ color:rgba(207,228,234,.8); text-decoration:underline; text-decoration-color:rgba(207,228,234,.3); text-underline-offset:2px; }
.pb-quellen a:hover{ color:#fff; }