/* =====================================================================
   scroll-scenes.css   ·   Fassung 2
   Ergaenzung zu styles.css - MUSS NACH styles.css eingebunden werden.

   TEIL 1  Vollbild-Kopfbereich
   TEIL 2  Slide-Szenen (Scrollen loest einen Wechsel aus)
   TEIL 3  Vollbild-Szene ohne Rahmen
   ===================================================================== */

/* ---------------------------------------------------------------------
   Gesamtmassstab
   Die Seite wirkt bei rund 80 % Browserzoom ruhiger - mehr Inhalt pro
   Bildschirm, kleinere Schrift, mehr Luft. Statt jede Groesse einzeln
   umzurechnen, wird das Dokument als Ganzes skaliert. Alles in px und
   em folgt automatisch.

   Wichtig: vh-Einheiten kennen den Zoom nicht - sie loesen weiter
   gegen den echten Bildschirm auf. Bildschirmhohe Flaechen muessen
   deshalb durch den Faktor geteilt werden, sonst fehlt unten ein
   Fuenftel. Dafuer gibt es --vh-voll und --vh-rest.
   --------------------------------------------------------------------- */
html{ zoom: var(--zoom); }
:root{
  --zoom: .8;
  --vh-voll: calc(100vh / .8);
  --vh-rest: calc(100vh / .8 - var(--nav-h));

  --nav-h:  78px;
  --meta-h: 44px;

  /* ---- Vollbild-Kopf -------------------------------------------
     Kopf + Navigation + Metazeile ergeben zusammen genau einen
     Bildschirm. Damit gibt es keine Kante mehr in der Bildmitte:
     die dunkle Flaeche endet exakt dort, wo der Bildschirm endet.  */
  --head-h: var(--vh-rest);

  /* Scrollweg je Slide. Der Wechsel kippt nach der Haelfte,
     also nach etwa 42vh Scrollen. */
  --slide-vh: 85vh;
}
/* svh statt vh, wo verfuegbar: auf Mobilgeraeten wandert die
   Browserleiste und 100vh ist dort zu hoch. */
@supports (height: 100svh){
  :root{
    --vh-voll: calc(100svh / .8);
    --vh-rest: calc(100svh / .8 - var(--nav-h));
  }
}

/* =====================================================================
   TEIL 1 - VOLLBILD-KOPFBEREICH
   ===================================================================== */

.page-head,
.article-head,
.home-hero{
  min-height: var(--head-h);
  display:flex; flex-direction:column; justify-content:center;
  padding-top: clamp(30px, 6vh, 70px);
  padding-bottom: clamp(40px, 8vh, 92px);
  position:relative; overflow:hidden;
}

/* Der Signaturkanal fuellt jetzt die ganze Flaeche. Die Maske haelt nur
   noch die Textzone frei, statt die Animation fast wegzublenden. */
.head-sig{
  position:absolute; inset:0; z-index:1; opacity:.72;
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 22% 50%, transparent 12%, #000 62%);
          mask-image: radial-gradient(ellipse 62% 78% at 22% 50%, transparent 12%, #000 62%);
}
.head-sig canvas{ width:100%; height:100%; display:block; }
.page-head .wrap,
.article-head .wrap,
.home-hero .wrap{
  position:relative; z-index:4;
  /* Wichtig: .wrap hat aus styles.css ein margin:0 auto. In einem
     Flex-Container verhindern automatische Seitenraender das Strecken -
     das Element schrumpft dann auf Inhaltsbreite und zentriert sich.
     Die Ueberschrift stuende dadurch weiter rechts als alle Abschnitts-
     titel darunter, und auf jeder Seite woanders. */
  width:100%; align-self:stretch;
}

/* Bei voller Hoehe darf die Typografie groesser werden - sonst
   schwimmt die Ueberschrift in der Flaeche. */
.page-head h1,
.article-head h1{ font-size:clamp(34px, 5.4vw, 72px); line-height:1.05; max-width:15em; }
.page-head .page-lead{ font-size:clamp(17px, 1.8vw, 21px); max-width:46ch; margin-top:18px; }
.page-eyebrow{ margin-bottom:14px; }

/* Scrollhinweis. Ersetzt die alte Kennzeilen-Leiste am Kopfende:
   die trug wenig Information, erzeugte aber eine zweite waagerechte
   Kante. Ein Pfeil sagt dasselbe, was gebraucht wird - es geht weiter. */
.scroll-cue{
  position:absolute; left:50%; bottom:clamp(22px,3.4vh,42px);
  transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  color:rgba(175,209,219,.62);
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  background:none; border:0; padding:6px 10px; cursor:pointer;
  transition:color .3s;
}
.scroll-cue:hover{ color:var(--skyblue); }
.scroll-cue svg{ width:19px; height:19px; display:block; animation:cueDrop 2.4s cubic-bezier(.5,0,.4,1) infinite; }
@keyframes cueDrop{
  0%,58%,100%{ transform:translateY(0);   opacity:.55 }
  26%        { transform:translateY(7px); opacity:1 }
}
@media (max-height:700px){ .scroll-cue span{ display:none } }

/* Alte Signaturstreifen stilllegen */
.lhead-strip{ display:none !important; }

/* Metazeile - schliesst den Bildschirm nach unten ab */
.headfoot{
  position:relative; z-index:5; min-height:var(--meta-h);
  display:flex; align-items:center;
  background:#012530; color:rgba(175,209,219,.72);
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
}
.headfoot .wrap{
  display:flex; flex-wrap:nowrap; gap:10px 32px; justify-content:space-between;
  width:100%;
}
.headfoot b{ color:var(--skyblue); font-weight:600; }

/* Streifenmuster entschaerfen */
.block + .block{ border-top:0; }
.block.tinted{ border-top:0; border-bottom:0; }
.block{ padding: clamp(52px, 7vh, 86px) 0; }
.block.tight{ padding: clamp(40px, 5.4vh, 66px) 0; }

@media (max-width: 620px){
  .headfoot .wrap span:nth-child(n+3){ display:none; }
  .headfoot .wrap{ gap:4px 16px; }
  .page-head h1,
  .article-head h1{ font-size:clamp(30px, 8.4vw, 44px); }
}

/* =====================================================================
   TEIL 2 - SLIDE-SZENEN
   Scrollen loest einen Wechsel aus, statt die Animation durchzuziehen.
   Die Buehne klebt, der Track liefert den Scrollweg.
   ===================================================================== */

.scene{ position:relative; background:#012530; color:#fff; }

/* Trackhoehe = ein Bildschirm plus ein Slide-Weg je Uebergang.
   --slides wird im Markup gesetzt: style="--slides:4"            */
.scene-track{
  position:relative;
  height: calc(var(--vh-voll) + (var(--slides, 4) - 1) * var(--slide-vh));
}
@supports (height: 100svh){
  .scene-track{ height: calc(var(--vh-voll) + (var(--slides, 4) - 1) * var(--slide-vh)); }
}

/* Die Buehne laeuft ueber die volle Breite - Grafik und Pfeile sollen
   den Bildschirmrand erreichen wie in den Kopfbereichen. Begrenzt wird
   nur der Text, ueber einen eigenen inneren Kasten. */
.scene-stage{
  position:sticky; top:0; height:var(--vh-voll); overflow:hidden;
  display:block; max-width:none; margin:0; padding:0;
}
.scene-copy{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  z-index:2; padding:0 30px; pointer-events:none;
}
.scene-copy > *{
  max-width:1120px; margin-left:auto; margin-right:auto;
  pointer-events:auto;
}
.scene-copy .scene-steps,
.scene-copy .scene-readout,
.scene-copy .scene-eyebrow,
.scene-copy .crumbs{ max-width:1120px; }
.scene-copy .scene-step,
.scene-copy .scene-step p,
.scene-copy .scene-step h2{ max-width:none; }
/* Innerhalb der 1120er Spur bleibt der Text in der linken Haelfte.
   Etwas schmaler als frueher: die Grafiken setzen bei 54 % der Bild-
   schirmbreite an, und zwischen Satzende und Kurvenanfang muss Luft
   bleiben - sonst laeuft die Zeile in die Animation. */
.scene-copy .scene-step{ padding-right:58%; }
.scene-copy .scene-readout{ padding-right:50%; }


.scene-canvas{ position:absolute; inset:0; z-index:0; }
.scene-canvas canvas{ width:100%; height:100%; display:block; }


.scene-copy .scene-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--skyblue); margin-bottom:12px;
}

/* Die Schritte liegen uebereinander und werden ueberblendet. Weil die
   Engine ohnehin weich zwischen den Slides fahrt, darf die Blende
   kuerzer sein als bei kontinuierlichem Scrollen. */
.scene-steps{ position:relative; min-height:230px; }
.scene-step{
  position:absolute; inset:0; opacity:0; transform:translateY(16px);
  transition:opacity .38s cubic-bezier(.2,.7,.2,1), transform .46s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.scene-step.is-on{ opacity:1; transform:none; }
.scene-step h2{ font-size:clamp(26px,3vw,38px); margin-bottom:14px; line-height:1.12; }
.scene-step p{ color:#cfe4ea; font-size:16.5px; max-width:34em; }

.scene-readout{
  display:flex; gap:26px; margin-top:26px; position:relative; z-index:2;
  font-variant-numeric:tabular-nums;
}
.ro-k{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(175,209,219,.6); font-weight:600;
}
.ro-v{ font-size:24px; font-weight:700; color:#fff; line-height:1.2; }
.ro-v.is-over{ color:#e8927f; }
.ro-v.is-ok{ color:var(--skyblue); }

/* Slide-Anzeige: zeigt, wie viele Wechsel noch kommen */
.scene-prog{ position:absolute; left:30px; bottom:34px; z-index:3; display:flex; gap:7px; }
.scene-prog i{
  width:26px; height:2px; border-radius:2px; background:rgba(175,209,219,.22);
  transition:background .35s, transform .35s;
}
.scene-prog i.on{ background:var(--skyblue); }
.scene-prog i.cur{ transform:scaleY(2.5); }

/* =====================================================================
   TEIL 3 - VOLLBILD-SZENE OHNE RAHMEN
   Das Modell fuellt den Bildschirm, der Text liegt darauf.
   ===================================================================== */
.scene--full .scene-stage{
  display:block; max-width:none; padding:0;
}
.scene--full .scene-copy{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 0 clamp(56px,9vh,110px);
  background:linear-gradient(to top, rgba(1,37,48,.97) 8%, rgba(1,37,48,.86) 34%, rgba(1,37,48,.52) 64%, transparent);
}
.scene--full .scene-copy .wrap{ max-width:1120px; margin:0 auto; padding:0 30px; }
.scene--full .scene-steps{ min-height:172px; max-width:640px; }
.scene--full .scene-readout{ margin-top:20px; }
.scene--full .scene-prog{ bottom:22px; }

@media (max-width:860px){
  .scene-copy{ top:auto; bottom:0; transform:none; padding-bottom:13vh; }
  .scene-copy .scene-step,
  .scene-copy .scene-readout{ padding-right:0; }
  .scene-copy{
    background:linear-gradient(to top, rgba(1,37,48,.95), rgba(1,37,48,.65), transparent);
    padding:26px 0 10px;
  }
  .scene-steps{ min-height:200px; }
  .scene-prog{ bottom:22px; }
  :root{ --slide-vh: 78vh; }
}

/* Bewegungsreduktion: alle Slides untereinander, nichts klebt. */
@media (prefers-reduced-motion: reduce){
  .scroll-cue{ display:none; }
  .scene-step{ transition:none; }
  .scene-track{ height:auto; }
  .scene-stage{ position:static; height:auto; min-height:78vh; padding-top:9vh; padding-bottom:9vh; }
  .scene--full .scene-copy{ position:static; background:none; padding:26px 0 0; }
}

/* =====================================================================
   TEIL 4 - VARIANTEN
   ===================================================================== */

/* Kopfanimation, die als Band im unteren Drittel sitzt (Pegelband).
   Statt der Textzone wird hier die obere Haelfte ausgeblendet - unten
   darf die Grafik voll stehen, weil dort kein Text liegt. */
.head-sig--band{
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, rgba(0,0,0,.5) 32%, #000 50%);
          mask-image: linear-gradient(to bottom, transparent 4%, rgba(0,0,0,.5) 32%, #000 50%);
  opacity:.9;
}

/* Kopf mit Datenband im unteren Bereich.
   Vorher stand der Text oben und das Band unten - dazwischen klaffte
   eine leere Bildmitte, und der Kopf zerfiel in zwei Haelften mit
   nichts dazwischen. Jetzt sitzt der Text tief, direkt ueber dem Band:
   Ueberschrift und Messdaten bilden EINEN Block im unteren Drittel,
   darueber steht ruhige Flaeche als Luft. Das Band bricht den Text
   nicht, es traegt ihn.                                              */
.page-head--band{
  justify-content:flex-start;
  padding-top:clamp(56px, 10vh, 128px);
}
.page-head--band .page-lead{ max-width:44ch; }

/* Kopfanimation, die eine gefuellte Flaeche ist (Spektrogramm).
   Die radiale Standardmaske stanzt ein Loch in die Grafik. Bei duennen
   Linien sieht man das nicht - bei einer Flaeche erscheint es als
   unbewegtes, konstantfarbenes Oval neben der Ueberschrift.
   Deshalb hier kein Loch, sondern ein Verlauf von links nach rechts:
   die Flaeche blendet zum Text hin einfach aus, ohne geschlossene Kante. */
.head-sig--wash{
  /* Das Spektrogramm steht mittig und blendet zu beiden Seiten aus.
     Der frueher durchgehende Verlauf nach links liess die Flaeche
     einseitig auslaufen; so bleibt sie als Block erkennbar. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 2%, #000 26%, #000 74%, transparent 98%),
    linear-gradient(to bottom, transparent 3%, #000 24%, #000 78%, transparent 99%);
          mask-image:
    linear-gradient(90deg, transparent 2%, #000 26%, #000 74%, transparent 98%),
    linear-gradient(to bottom, transparent 3%, #000 24%, #000 78%, transparent 99%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  opacity:.72;
}

/* ---------------------------------------------------------------------
   Leistungsraster  ("Was wir messen")
   Loest die gestapelten Bild-Text-Zeilen ab. Die kosteten drei Bild-
   schirme Hoehe, hatten wechselnde Leserichtung und wirkten wie ein
   Blog. Jetzt: drei gleich hohe Spalten, einheitlicher Bildausschnitt,
   und ueber jeder Spalte eine Kennzeile mit Klasse und Regelwerk.
   Das macht aus Werbetext ein Datenblatt.
   --------------------------------------------------------------------- */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:clamp(20px, 2.6vw, 34px);
  margin-top:34px;
}
.svc-item{ display:flex; flex-direction:column; }

.svc-fig{
  position:relative; margin:0 0 16px; overflow:hidden;
  border-radius:10px; aspect-ratio:3/2; background:#0b2b36;
}
.svc-fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* Die drei Aufnahmen stammen aus verschiedenen Situationen und
     wirken sonst zusammengesucht. Leichte Entsaettigung plus ein
     Petrolschleier binden sie zu einer Serie. */
  filter:saturate(.80) contrast(1.05);
  transform:scale(1.001);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.svc-fig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg, rgba(1,74,98,.34), rgba(1,37,48,.06) 55%, rgba(1,37,48,.40));
  mix-blend-mode:multiply;
}
.svc-item:hover .svc-fig img{ transform:scale(1.045); }

.svc-spec{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding-top:13px; border-top:1px solid var(--line);
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:11px;
}
.svc-spec .n{ color:var(--skyblue); font-variant-numeric:tabular-nums; }
.svc-item h3{ font-size:19px; line-height:1.25; color:var(--petrol); margin:0 0 9px; }
.svc-item p{ font-size:14.5px; line-height:1.62; color:var(--ink-soft); margin:0; }

@media (prefers-reduced-motion: reduce){
  .svc-fig img{ transition:none; }
  .svc-item:hover .svc-fig img{ transform:none; }
}

/* ---------------------------------------------------------------------
   Softwarehinweis (SoundPLAN)
   Logo links, Text rechts. Das Logo steht auf hellem Grund in einem
   eigenen Feld - es bringt eigene Farben mit (Blau/Gruen) und wuerde
   frei auf der Flaeche mit dem Petrol der Seite kollidieren.
   --------------------------------------------------------------------- */
.tool-row{
  display:grid; grid-template-columns:150px minmax(0,1fr);
  gap:clamp(22px,3vw,44px); align-items:start; margin-top:26px;
}
.tool-logo{
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:18px 16px;
}
.tool-logo img{ width:100%; height:auto; display:block; }
.tool-row .prose{ max-width:none; }
.tool-row .prose p{ margin-bottom:14px; }
.tool-facts{
  display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:16px;
  padding-top:16px; border-top:1px solid var(--line);
}
.tool-facts span{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:var(--bg-tint);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
}
@media (max-width:620px){
  .tool-row{ grid-template-columns:1fr; }
  .tool-logo{ width:132px; }
}

/* =====================================================================
   TEIL 5 - REFERENZEN, ZEITLEISTE, AUTOREN
   ===================================================================== */

/* ---- Referenzkarte -------------------------------------------------
   Hellblauer Grund statt Petrol: die Karte ist ein Sachbild, kein
   Stimmungsbild, und liest sich hell deutlich besser.
   ------------------------------------------------------------------- */
.refmap{ background:linear-gradient(170deg,#eaf4f8 0%,#dcecf3 55%,#d3e6ee 100%); }
.refmap .sec-title{ color:var(--petrol); }
.refmap-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(24px,4vw,60px); align-items:center; margin-top:30px;
}
.refmap-figure{ position:relative; }
.refmap svg{ width:100%; height:auto; display:block; overflow:visible; }

.rm-state{ fill:#c3dce7; stroke:#eaf4f8; stroke-width:1; transition:fill .5s; }
.rm-outline{ fill:none; stroke:#7fadc0; stroke-width:1.4; }

/* Standorte: erscheinen nacheinander, sobald die Karte im Bild ist */
.rm-dot{
  fill:var(--accent); opacity:0; transform:scale(.2); transform-origin:center;
  transform-box:fill-box;
  transition:opacity .5s ease, transform .55s cubic-bezier(.3,1.5,.5,1);
}
.rm-on .rm-dot{ opacity:.9; transform:scale(1); }
.rm-dot:hover{ fill:var(--petrol); }

/* Heimatmarke Freiburg mit ruhigem Puls */
.rm-home .rm-sitz{ fill:var(--petrol); }
.rm-pulse{
  fill:none; stroke:var(--petrol); stroke-width:1.6; opacity:0;
  transform-origin:center; transform-box:fill-box;
}
.rm-on .rm-pulse{ animation:rmPulse 3.4s ease-out infinite; }
.rm-on .rm-pulse:nth-of-type(3){ animation-delay:1.7s; }
@keyframes rmPulse{
  0%{ transform:scale(.4); opacity:.55 }
  70%{ transform:scale(3.4); opacity:0 }
  100%{ transform:scale(3.4); opacity:0 }
}

/* Verbindungsbögen: zeichnen sich von Freiburg aus */
.rm-arc{
  fill:none; stroke:var(--accent); stroke-width:1; opacity:.30;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}
.rm-on .rm-arc{ stroke-dashoffset:0; }

.rm-legend{
  display:flex; gap:22px; flex-wrap:wrap; margin-top:22px;
  font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft);
}
.rm-legend b{ color:var(--petrol); }
.rm-count{
  font-size:clamp(40px,5vw,64px); font-weight:700; color:var(--petrol);
  line-height:1; font-variant-numeric:tabular-nums;
}
.rm-count-k{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
.rm-lead{ color:var(--ink-soft); margin-top:16px; max-width:40ch; }
/* Kleingedrucktes zur Karte: Es gehoert unter die Grafik, auf die es
   sich bezieht, und nicht in den Fliesstext daneben - dort wog es
   schwerer als die Aussage des Abschnitts. */
.rm-hinweis{
  margin:10px 0 0; font-size:11.5px; line-height:1.5;
  color:var(--ink-soft); opacity:.8; max-width:46ch;
}

@media (max-width:860px){
  .refmap-grid{ grid-template-columns:1fr; }
  .refmap-figure{ max-width:420px; margin:0 auto; }
}
@media (prefers-reduced-motion: reduce){
  .rm-dot{ opacity:.9; transform:none; transition:none; }
  .rm-arc{ stroke-dashoffset:0; transition:none; }
  .rm-on .rm-pulse{ animation:none; }
}

/* ---- Zeitleiste ---------------------------------------------------- */
.tl{ position:relative; margin-top:34px; padding-left:0; }
.tl-line{
  position:absolute; left:0; top:6px; bottom:6px; width:2px;
  background:linear-gradient(to bottom,var(--skyblue),var(--accent));
  opacity:.35;
}
.tl-item{
  position:relative; padding:0 0 26px 34px;
}
.tl-item::before{
  content:""; position:absolute; left:-5px; top:5px;
  width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--accent);
}
.tl-item:last-child{ padding-bottom:0; }
.tl-item.is-now::before{ background:var(--accent); box-shadow:0 0 0 4px rgba(54,119,169,.16); }
.tl-year{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:5px;
}
.tl-item p{ color:var(--ink-soft); font-size:15px; margin:0; }

/* ---- Standortbild -------------------------------------------------- */
.place-fig{
  position:relative; margin:0; border-radius:14px; overflow:hidden;
  aspect-ratio:16/9; background:#0b2b36;
}
.place-fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.86) contrast(1.04);
}
.place-fig::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(1,37,48,.72), rgba(1,74,98,.10) 55%, transparent);
}
.place-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px clamp(18px,3vw,28px); color:#fff;
}
.place-cap .t{ font-size:clamp(17px,2vw,21px); font-weight:700; }
.place-cap .s{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--skyblue); margin-bottom:6px;
}

/* ---- Autorenzeile in Fachbeiträgen --------------------------------- */
.byline{
  display:flex; align-items:center; gap:13px; margin-top:22px;
  position:relative; z-index:4;
}
.byline img{
  width:46px; height:46px; border-radius:50%; object-fit:cover; display:block;
  border:2px solid rgba(175,209,219,.42);
}
.byline .bl-n{ font-size:14.5px; font-weight:700; color:#fff; line-height:1.3; }
.byline .bl-r{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(175,209,219,.72);
}
.byline--light .bl-n{ color:var(--petrol); }
.byline--light .bl-r{ color:var(--accent); }
.byline--light img{ border-color:var(--line); }

/* Autorenfoto in der Beitragszeile.
   Ersetzt das generische Personen-Piktogramm: ein Gesicht sagt bei
   einem Fachbeitrag mehr über die Urheberschaft als ein Umriss. */
.article-byline .b-author{ align-items:center; gap:10px; }
.article-byline .b-author img{
  width:34px; height:34px; border-radius:50%; object-fit:cover; display:block;
  border:2px solid rgba(175,209,219,.42); flex:0 0 auto;
}

/* ---------------------------------------------------------------------
   Kopfbereich mit Foto statt Animation.
   Das Bild liegt ganzflächig, ein Verlauf hält die linke Textzone dunkel
   genug. Ohne den Verlauf säuft die Schrift im Himmel ab.
   --------------------------------------------------------------------- */
.page-head--photo .head-photo{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.page-head--photo .head-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.72) contrast(1.04) brightness(.86);
}
.page-head--photo::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(1,37,48,.94) 0%, rgba(1,37,48,.80) 34%, rgba(1,45,58,.34) 66%, rgba(1,45,58,.20) 100%),
    linear-gradient(to top, rgba(1,37,48,.86), transparent 46%);
}
@media (max-width:860px){
  .page-head--photo::before{
    background:linear-gradient(to top, rgba(1,37,48,.94) 22%, rgba(1,37,48,.66) 62%, rgba(1,45,58,.42));
  }
}

/* ---------------------------------------------------------------------
   Szene als Kopfbereich (Autoplay).
   Kein Scrolltrack: die Buehne fuellt genau einen Bildschirm und die
   Folien wechseln von selbst. Gescrollt wird an ihr vorbei, nicht
   durch sie hindurch.
   --------------------------------------------------------------------- */
.scene--hero{ position:relative; }
.scene--hero .scene-track{ height:auto; }
.scene--hero .scene-stage{
  position:relative; height:var(--head-h); top:auto;
}
.scene--hero .scene-step h2{ font-size:clamp(32px,4.6vw,62px); line-height:1.06; }
.scene--hero .scene-step p{ font-size:clamp(16px,1.6vw,19px); max-width:28em; }
/* Der Weiterfuehrungslink bekommt eine eigene Zeile. Stand er im
   Fliesstext, haengte er je nach Zeilenumbruch mal hinter dem Satz,
   mal allein - die Folien wirkten dadurch unterschiedlich gesetzt.
   width:max-content haelt die Unterlaenge am Text, nicht an der Spalte. */
.scene--hero .scene-step p a{
  display:block; width:max-content; max-width:100%;
  margin-top:20px; color:var(--skyblue);
  text-decoration:none; font-weight:600; border-bottom:1px solid rgba(175,209,219,.4);
  padding-bottom:2px;
}
.scene--hero .scene-step p a:hover{ color:#fff; border-color:#fff; }
.scene--hero .scene-steps{ min-height:290px; }
.scene--hero .scene-prog{ left:30px; bottom:clamp(78px,11vh,120px); }
.scene--hero .scene-prog i{ cursor:pointer; width:34px; height:3px; }
.scene--hero .scene-prog i:focus-visible{ outline:2px solid var(--skyblue); outline-offset:3px; }

/* Der Fortschrittsbalken zeigt hier zusätzlich, wie lange die Folie
   noch steht - sonst wirkt der Wechsel unmotiviert. */
.scene--hero .scene-prog i.cur{ transform:none; background:var(--skyblue); }
@media (max-width:860px){
  .scene--hero .scene-steps{ min-height:260px; }
  .scene--hero .scene-prog{ left:30px; }
}

/* Standortbild im Originalseitenverhältnis: kein festes aspect-ratio,
   damit nichts beschnitten wird. Breite gedeckelt, damit ein Hochformat
   die Seite nicht auseinanderzieht. */
.place-fig--free{ aspect-ratio:auto; max-width:760px; }
.place-fig--free img{ height:auto; }

/* =====================================================================
   TEIL 6 - PEGELSKALA UND LEISTUNGSÜBERSICHT
   ===================================================================== */

/* ---------------------------------------------------------------------
   Pegelskala "Schallpegel im Alltag"
   Der alte Regler war eine helle Karte mit Schieber - funktional, aber
   ohne Bezug zum Rest. Jetzt: dunkles Messgerät-Panel wie die Szenen,
   mit stehendem Balken, beiden Richtwerten und einem Wert, der beim
   Ziehen mitläuft.
   --------------------------------------------------------------------- */
.dbx{
  position:relative; margin-top:30px; border-radius:16px; overflow:hidden;
  background:linear-gradient(165deg,#013a4d 0%,#012530 62%,#01212b 100%);
  color:#fff; padding:clamp(26px,4vw,44px);
}
.dbx-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; flex-wrap:wrap; margin-bottom:clamp(18px,3vh,30px);
}
.dbx-k{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(175,209,219,.62); margin-bottom:8px;
}
.dbx-val{
  font-size:clamp(46px,7vw,86px); font-weight:700; line-height:.95;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  transition:color .3s;
}
.dbx-val small{ font-size:.30em; font-weight:700; margin-left:.4em; letter-spacing:.04em; }
.dbx-val.over{ color:#e8927f; }
.dbx-val.under{ color:var(--skyblue); }
.dbx-what{ text-align:right; max-width:24em; }
.dbx-what .n{ font-size:clamp(16px,1.8vw,20px); font-weight:700; line-height:1.3; }
.dbx-what .s{ font-size:13px; color:rgba(207,228,234,.8); margin-top:5px; }

/* Balken: Skala von 20 bis 100 dB(A) */
.dbx-bar{ position:relative; height:clamp(52px,7vh,68px); margin:6px 0 4px; }
.dbx-fill{
  position:absolute; left:0; top:14px; bottom:14px; border-radius:4px;
  background:linear-gradient(90deg,#146376,#3f8fa6 46%,#c08678 74%,#e8927f);
  transition:width .18s linear;
}
.dbx-rest{
  position:absolute; inset:14px 0; border-radius:4px;
  background:rgba(175,209,219,.10);
}
.dbx-fill{ z-index:2; } .dbx-rest{ z-index:1; }
.dbx-knob{
  position:absolute; top:50%; z-index:4; width:3px; height:100%;
  transform:translate(-50%,-50%); background:#fff; border-radius:2px;
  box-shadow:0 0 0 5px rgba(1,37,48,.55);
  transition:left .18s linear;
}
.dbx-lim{ position:absolute; top:0; bottom:0; z-index:3; width:1px;
  background:repeating-linear-gradient(to bottom,rgba(226,59,52,.85) 0 5px,transparent 5px 10px); }
.dbx-lim span{
  position:absolute; top:-4px; left:7px; white-space:nowrap;
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(232,146,127,.95);
}
.dbx-input{
  position:absolute; inset:0; width:100%; height:100%; z-index:6;
  opacity:0; cursor:ew-resize; margin:0;
}
.dbx-ticks{
  display:flex; justify-content:space-between;
  font-size:10px; font-weight:700; letter-spacing:.1em;
  color:rgba(175,209,219,.45); margin-top:2px;
}
.dbx-legal{ font-size:12px; color:rgba(175,209,219,.55); margin-top:18px; max-width:60ch; }
.dbx-hint{
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(175,209,219,.55);
}
@media (max-width:700px){
  .dbx-what{ text-align:left; }
  .dbx-top{ margin-bottom:20px; }
}

/* ---------------------------------------------------------------------
   Leistungsübersicht
   Statt vier gleicher Kacheln eine nummerierte Kette: jede Leistung
   bekommt eine Position im Ablauf und eine Kennzeile mit Regelwerk -
   dieselbe Sprache wie das Raster auf messungen.html.
   --------------------------------------------------------------------- */
.svc-chain{ display:grid; gap:0; margin-top:34px; }
.svc-link{
  display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,300px);
  gap:clamp(16px,2.6vw,38px); align-items:start;
  padding:clamp(22px,3.4vh,34px) 0;
  border-top:1px solid var(--line);
  text-decoration:none; color:inherit; position:relative;
  transition:background .25s;
}
.svc-link:last-child{ border-bottom:1px solid var(--line); }
.svc-link::after{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.svc-link:hover::after{ transform:scaleX(1); }
.svc-link:hover{ background:linear-gradient(90deg,rgba(54,119,169,.05),transparent 70%); }
.svc-n{
  font-size:clamp(26px,3vw,40px); font-weight:700; line-height:1;
  color:var(--line); font-variant-numeric:tabular-nums;
  transition:color .3s;
}
.svc-link:hover .svc-n{ color:var(--accent); }
.svc-link h3{
  font-size:clamp(19px,2.2vw,26px); color:var(--petrol); margin:0 0 8px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.svc-link h3 .arrow{
  font-size:.7em; color:var(--accent); opacity:0; transform:translateX(-6px);
  transition:opacity .3s, transform .3s;
}
.svc-link:hover h3 .arrow{ opacity:1; transform:none; }
.svc-link p{ color:var(--ink-soft); font-size:15px; margin:0; max-width:52ch; }
.svc-meta{ display:flex; flex-direction:column; gap:7px; padding-top:4px; }
.svc-meta span{
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent);
}
.svc-meta b{ color:var(--ink-soft); font-weight:600; letter-spacing:.02em; text-transform:none; font-size:13px; }
@media (max-width:820px){
  .svc-link{ grid-template-columns:46px minmax(0,1fr); }
  .svc-meta{ grid-column:2; flex-direction:row; flex-wrap:wrap; gap:6px 18px; padding-top:12px; }
}

/* Kopfanimation, die die ganze Fläche füllt.
   Nur ein weicher Rand ringsum und eine Abdunklung über der Textzone -
   kein ausgestanztes Loch, keine einseitige Blende. */
.head-sig--voll{
  opacity:.9;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 88%, transparent 100%);
}
/* Die Abdunklung gehoert auf den Kopfbereich, NICHT in den .wrap.
   Im .wrap ist sie ein absolut gesetztes Kind der Textspalte und legt
   sich mit z-index:2 UEBER Ueberschrift und Fliesstext - genau der
   dunkle Schleier vor der Schrift. Deshalb nur noch am .page-head. */
.page-head:has(.head-sig--voll)::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, rgba(1,37,48,.90) 0%, rgba(1,37,48,.74) 30%, rgba(1,45,58,.24) 62%, transparent 88%);
}

/* Umschalter, nur auf der Entwurfsseite */
.opt-switch{
  position:absolute; left:50%; transform:translateX(-50%); bottom:96px; z-index:9;
  display:flex; gap:8px; background:rgba(1,30,40,.72); padding:7px; border-radius:999px;
  border:1px solid rgba(175,209,219,.22); backdrop-filter:blur(6px);
}
.opt-switch button{
  font:inherit; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  color:rgba(175,209,219,.72); background:none; border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px; transition:background .25s, color .25s;
}
.opt-switch button:hover{ color:#fff; }
.opt-switch button.is-on{ background:var(--skyblue); color:#012530; }
@media (max-width:700px){ .opt-switch{ bottom:88px; font-size:10px; } .opt-switch button{ padding:7px 10px; } }

/* Kopfbild breiter als der Kopf, damit sich der Bildausschnitt seitlich
   schieben laesst. Bei gleichem Seitenverhaeltnis von Bild und Kopf
   bewirkt object-position praktisch nichts - es gibt nichts zu schieben. */
.page-head--photo .head-photo--pan img{
  width:var(--photo-w,142%); max-width:none; height:100%;
  left:var(--photo-x,0); position:absolute; top:0;
  object-fit:cover; object-position:center;
}

/* ---------------------------------------------------------------------
   Korrekturen an den Szenen
   --------------------------------------------------------------------- */

/* Die aktive Folie muss anklickbar sein. .scene-step setzt
   pointer-events:none, damit die verdeckten Folien keine Klicks
   abfangen - bei .is-on muss das wieder aufgehoben werden, sonst
   sind die Links darin tot. */
.scene-step.is-on{ pointer-events:auto; }

/* Fortschrittspunkte: groessere Trefferflaeche, ohne dass der Strich
   optisch waechst. Ein 3px hoher Balken laesst sich sonst kaum treffen. */
.scene--hero .scene-prog{ gap:0; }
.scene--hero .scene-prog i{
  width:auto; height:auto; background:none; border-radius:0;
  padding:11px 5px; min-width:32px; cursor:pointer; position:relative;
}
.scene--hero .scene-prog i::after{
  content:""; position:absolute; left:5px; right:5px; top:50%;
  height:2px; border-radius:2px; transform:translateY(-50%);
  background:rgba(175,209,219,.22); transition:background .3s;
  width:auto; min-width:22px;
}
.scene--hero .scene-prog i.on::after{ background:var(--skyblue); }
.scene--hero .scene-prog i:hover::after{ background:#fff; }
.scene--hero .scene-prog i.cur{ transform:none; }

/* Auf der Startseite laufen lange Ueberschriften in die Grafik.
   Die Textspalte bekommt deshalb einen eigenen, dunkleren Grund. */
.scene--hero .scene-copy{
  position:relative;
}
.scene--hero .scene-copy::before{ display:none; }

/* ---------------------------------------------------------------------
   Referenzkarte: Freiburg deutlicher hervorheben
   --------------------------------------------------------------------- */
.rm-home .rm-sitz{ fill:var(--petrol); }
/* Der Sitz ist eine Ortsangabe, kein Ausrufezeichen. Vorher stand hier
   ein 30er-Halo mit pulsierendem Ring und 19px-Beschriftung - das zog
   den Blick von den Projektstandorten weg, um die es eigentlich geht.
   Jetzt: gleiche Punktgroesse wie die Standorte, nur dunkler, mit
   knapper Beschriftung darunter. */
.rm-home{ filter:none; }
.rm-halo{ fill:rgba(1,74,98,.09); stroke:rgba(1,74,98,.22); stroke-width:1; }
/* Ein ruhig auslaufender Ring, kein Blinken: zweimal versetzt, damit
   die Bewegung nie ganz abreisst, aber auch nie zieht. */
.rm-puls{ fill:none; stroke:var(--petrol); stroke-width:1.4; opacity:0; }
.rm-on .rm-puls{ animation:rmSitzPuls 3.8s ease-out infinite; }
.rm-on .rm-puls--2{ animation-delay:1.9s; }
@keyframes rmSitzPuls{
  0%{ transform:scale(.55); opacity:.55; }
  70%{ opacity:0; }
  100%{ transform:scale(2.6); opacity:0; }
}
.rm-puls{ transform-box:fill-box; transform-origin:50% 50%; }
@media (prefers-reduced-motion: reduce){ .rm-on .rm-puls{ animation:none; } }
.rm-home-label{
  font-size:19px; font-weight:700; fill:var(--petrol);
  paint-order:stroke; stroke:#eaf4f8; stroke-width:4px; stroke-linejoin:round;
}
.rm-home-sub{
  font-size:11px; font-weight:700; letter-spacing:.14em; fill:var(--ink-soft);
  paint-order:stroke; stroke:#eaf4f8; stroke-width:3px; stroke-linejoin:round;
}
.rm-home-line{ stroke:var(--petrol); stroke-width:1; opacity:.35; }
.rm-on .rm-home-label,
.rm-on .rm-home-sub,
.rm-on .rm-home-line{ animation:rmFade .8s ease 1.1s backwards; }
@keyframes rmFade{ from{opacity:0} }

/* ---------------------------------------------------------------------
   Zeitleiste: Vorschau der L.F.N.-Seite beim Überfahren
   --------------------------------------------------------------------- */
.tl-item--media{ position:relative; }
.tl-preview{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-size:12.5px; font-weight:700; color:var(--accent);
  text-decoration:none; border-bottom:1px solid rgba(54,119,169,.35);
  padding-bottom:2px; cursor:pointer;
}
.tl-preview svg{ width:14px; height:14px; }
.tl-figure{
  margin:14px 0 0; max-width:520px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:#0b2b36; position:relative;
  aspect-ratio:1712/1130;
}
.tl-figure video{ width:100%; height:100%; object-fit:cover; display:block; }
.tl-figure figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:24px 16px 12px; color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:linear-gradient(to top, rgba(1,37,48,.85), transparent);
}
.tl-figure::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
@media (prefers-reduced-motion: reduce){ .tl-figure video{ display:block } }

/* Mehr Luft zwischen Fließtext und der Logoreihe im Kurzprofil.
   Die Logos standen direkt unter dem Absatz und wirkten wie Teil des
   Satzes statt wie eine eigene Aussage. */
#kurzprofil .sec-intro{ margin-bottom:clamp(30px, 5vh, 58px); }
/* padding statt margin: Aussenabstaende koennen zusammenfallen oder
   von Regeln in styles.css ueberschrieben werden, Innenabstaende nicht. */
#kurzprofil .mship-logos{ padding-top:clamp(30px, 4.6vh, 54px); }
#kurzprofil .more-link{ margin-top:clamp(22px, 3.4vh, 38px); display:inline-block; }

/* ---------------------------------------------------------------------
   Pfeilnavigation in den Szenen
   --------------------------------------------------------------------- */
.scene-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(1,30,40,.62); border:1px solid rgba(175,209,219,.26);
  color:rgba(175,209,219,.85); cursor:pointer;
  backdrop-filter:blur(5px);
  transition:background .25s, color .25s, border-color .25s, opacity .25s;
}
.scene-nav svg{ width:22px; height:22px; }
.scene-nav:hover{ background:var(--skyblue); color:#012530; border-color:var(--skyblue); }
.scene-nav:focus-visible{ outline:2px solid var(--skyblue); outline-offset:3px; }
.scene-nav[disabled]{ opacity:.22; cursor:default; }
.scene-nav[disabled]:hover{ background:rgba(1,30,40,.62); color:rgba(175,209,219,.85); border-color:rgba(175,209,219,.26); }
.scene-nav--zurueck{ left:clamp(10px, 2.4vw, 34px); }
.scene-nav--vor{ right:clamp(10px, 2.4vw, 34px); }
@media (max-width:700px){
  .scene-nav{ width:44px; height:44px; top:auto; bottom:76px; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .scene-nav{ transition:none } }

/* ---------------------------------------------------------------------
   Slides-Kopf auf der Leistungsseite
   Gleicher Grund wie die uebrigen Kopfbereiche, damit die Seite nicht
   aus der Reihe faellt - die Liniengrafik liegt darueber.
   --------------------------------------------------------------------- */
.scene--leistung .scene-stage{
  background:linear-gradient(160deg, var(--petrol) 0%, var(--petrol-deep) 55%, #012d3a 100%);
}
/* Statischer Grund: keine laufende Grafik, keine Signatur. */
.scene--leistung .scene-canvas,
.scene--leistung .scene-sig{ display:none; }
.scene-sig{ position:absolute; inset:0; z-index:0; }
.scene-sig canvas{ width:100%; height:100%; display:block; }
.scene--leistung .scene-copy{ z-index:3; }
.scene--leistung .crumbs{ margin-bottom:16px; }

/* Kleinere Balken unten */
.scene-prog--klein i{ padding:11px 5px; min-width:32px; }
.scene-prog--klein i::after{ left:5px; right:5px; height:2px; min-width:22px; }

/* ---------------------------------------------------------------------
   Foto-Slides im Kopfbereich der Startseite
   --------------------------------------------------------------------- */
.scene--foto .scene-stage{ background:#012530; }
.hero-bilder{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bild{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); transform-origin:60% 50%;
  transition:opacity .9s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
  filter:saturate(.78) contrast(1.05) brightness(.9);
}
.scene--foto .scene-stage::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(1,37,48,.94) 0%, rgba(1,37,48,.80) 34%, rgba(1,45,58,.30) 66%, rgba(1,45,58,.14) 100%),
    linear-gradient(to top, rgba(1,37,48,.80), transparent 42%);
}
.scene--foto .scene-copy{ z-index:3; }
.scene--foto .scene-copy::before{ display:none; }

/* Bildnachweis: klein, in der Ecke, ohne eigene Flaeche. Er soll
   auffindbar sein, aber nicht mit der Folienanzeige konkurrieren. */
.hero-quelle{
  position:absolute; right:14px; bottom:10px; z-index:4;
  max-width:min(58vw, 460px); text-align:right;
  font-size:9.5px; letter-spacing:.05em; line-height:1.4;
  color:rgba(175,209,219,.72); text-shadow:0 1px 3px rgba(1,25,33,.85);
  pointer-events:none; opacity:0; transition:opacity .5s;
}
@media (max-width:700px){ .hero-quelle{ font-size:9px; left:14px; text-align:left; right:auto; bottom:8px; } }

/* Der Ausschnitt des DIN-Gebaeudes sitzt etwas hoeher, damit der
   Baukoerper und nicht die Strasse im Bild steht. */
.hero-bild--din{ object-position:50% 42%; }
@media (max-width:860px){
  .scene--foto .scene-stage::after{
    background:linear-gradient(to top, rgba(1,37,48,.95) 26%, rgba(1,37,48,.72) 60%, rgba(1,45,58,.42));
  }
}
@media (prefers-reduced-motion: reduce){ .hero-bild{ transition:none } }

/* ---------------------------------------------------------------------
   Leistungskacheln auf der Startseite
   Jede Kachel traegt die Signatur ihrer Seite als kleine, langsam
   laufende Grafik - dieselbe Bildsprache wie die Kopfbereiche.
   --------------------------------------------------------------------- */
.lz-gitter{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
  gap:clamp(16px, 2vw, 26px); margin-top:34px;
}
.lz-karte{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:border-color .3s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.lz-karte:hover{
  border-color:var(--accent); transform:translateY(-3px);
  box-shadow:0 10px 30px -18px rgba(1,74,98,.55);
}
.lz-figur{
  height:132px; background:linear-gradient(170deg,#f3f8fa,#e6f1f5);
  border-bottom:1px solid var(--line); position:relative;
}
.lz-figur canvas{ width:100%; height:100%; display:block; }
.lz-text{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.lz-text h3{
  font-size:18px; color:var(--petrol); margin:0 0 8px;
  display:flex; align-items:center; gap:8px;
}
.lz-text h3 .pfeil{
  color:var(--accent); opacity:0; transform:translateX(-5px);
  transition:opacity .3s, transform .3s;
}
.lz-karte:hover h3 .pfeil{ opacity:1; transform:none; }
.lz-text p{ font-size:14.5px; color:var(--ink-soft); margin:0 0 16px; flex:1; }
.lz-norm{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); padding-top:13px; border-top:1px solid var(--line);
}
@media (prefers-reduced-motion: reduce){ .lz-karte{ transition:none } }

/* Kopfbereich mit Datengrafik rechts.
   Kein Verlauf ueber die Grafik, sondern eine klare Teilung: links
   Text auf ruhigem Grund, rechts die Messdaten. Damit liegt nichts
   mehr hinter der Schrift. */
.page-head--daten .head-sig--rechts{
  opacity:1;
  -webkit-mask-image:none; mask-image:none;
}
.page-head--daten::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, rgba(1,37,48,.55) 0%, rgba(1,37,48,.12) 34%, transparent 46%);
}
.page-head--daten .wrap{ z-index:4; }
.page-head--daten .page-lead{ max-width:34ch; }
@media (max-width:980px){
  .page-head--daten::before{
    background:linear-gradient(to top, rgba(1,37,48,.86) 30%, rgba(1,37,48,.30) 62%, transparent);
  }
  .page-head--daten .page-lead{ max-width:46ch; }
}

/* ---------------------------------------------------------------------
   Kontaktseite
   Erreichbarkeit zuerst, Formular als Angebot daneben - nicht als
   Hürde davor. Der Ablauf darunter nimmt die Unsicherheit, was nach
   dem Absenden passiert.
   --------------------------------------------------------------------- */
.kt-gitter{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(30px,4.5vw,70px); align-items:start;
}
.kt-tel{
  display:inline-flex; align-items:center; gap:15px; margin:28px 0 6px;
  text-decoration:none; color:var(--petrol);
  background:var(--bg-tint); border:1px solid var(--line); border-radius:14px;
  padding:16px 24px 16px 20px; transition:border-color .3s, background .3s;
}
.kt-tel:hover{ border-color:var(--accent); background:#fff; }
.kt-tel svg{ width:26px; height:26px; color:var(--accent); flex:0 0 auto; }
.kt-tel b{ display:block; font-size:clamp(21px,2.4vw,27px); line-height:1.15; }
.kt-tel small{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:3px; font-weight:400; }

.kt-daten{ margin-top:30px; border-top:1px solid var(--line); }
.kt-zeile{
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.kt-k{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
.kt-v{ font-size:15px; color:var(--ink-soft); line-height:1.55; overflow-wrap:anywhere; }
.kt-v a{ color:var(--petrol); }

.kt-person{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.kt-person img{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.kt-name{ font-size:16px; font-weight:700; color:var(--petrol); }
.kt-rolle{ font-size:13px; color:var(--ink-soft); margin-top:2px; }

.kt-formkasten{
  background:var(--bg-tint); border:1px solid var(--line); border-radius:16px;
  padding:clamp(24px,3vw,36px);
}
.kt-formtitel{ font-size:20px; color:var(--petrol); margin:0 0 10px; }
.kt-formtext{ font-size:14.5px; color:var(--ink-soft); margin:0 0 24px; }
.kt-formkasten input, .kt-formkasten textarea{ background:#fff; }

@media (max-width:900px){ .kt-gitter{ grid-template-columns:1fr; } }
@media (max-width:520px){ .kt-zeile{ grid-template-columns:1fr; gap:4px; } }

/* ---------------------------------------------------------------------
   Software: Bildschirmfoto und Merkmalsliste
   --------------------------------------------------------------------- */
.sw-figur{ margin:30px 0 0; }
.sw-figur img{
  width:100%; height:auto; display:block; border-radius:12px;
  border:1px solid var(--line); background:#fff;
}
.sw-figur figcaption{
  font-size:13px; color:var(--ink-soft); margin-top:12px; max-width:62ch;
}
.sw-liste{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:clamp(16px,2vw,26px); margin-top:32px;
}
.sw-punkt{ padding-top:16px; border-top:1px solid var(--line); }
.sw-n{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
.sw-punkt p{ font-size:14.5px; color:var(--ink-soft); margin:0; }

/* Programmfenster-Rahmen für die eingebettete Demo */
.app-rahmen{
  margin-top:30px; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:#fff;
  box-shadow:0 18px 50px -30px rgba(1,74,98,.5);
}
.app-leiste{
  display:flex; align-items:center; gap:8px;
  padding:11px 16px; background:var(--bg-tint); border-bottom:1px solid var(--line);
}
.app-leiste i{ width:10px; height:10px; border-radius:50%; background:var(--line); }
.app-leiste span{
  margin-left:10px; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  color:var(--ink-soft);
}
.app-rahmen iframe{
  width:100%; height:min(76vh, 760px); border:0; display:block; background:#fff;
}
.app-hinweis{ font-size:13px; color:var(--ink-soft); margin-top:14px; max-width:64ch; }

/* Erstes Kopfbild: der Ausschnitt muss den Messtechniker rechts im Bild
   halten - links darf vom Fahrzeug abgeschnitten werden. */
.hero-bild--rechts{ object-position:76% 50%; transform-origin:82% 50%; }


/* =====================================================================
   NACHTRAEGE
   ===================================================================== */

/* Vollbildszene: der Textblock gehoert wieder an den unteren Rand.
   Die neue, mittig ausgerichtete Grundregel fuer .scene-copy hatte ihn
   in die Bildmitte gezogen - dort ueberlappte er mit der Anzeige. */
.scene--full .scene-copy{
  top:auto; bottom:0; transform:none;
  padding:0 0 clamp(56px,9vh,110px);
}
.scene--full .scene-copy > *{ max-width:none; }
.scene--full .scene-copy .wrap{ max-width:1120px; margin:0 auto; padding:0 30px; }
.scene--full .scene-copy .scene-step,
.scene--full .scene-copy .scene-readout{ padding-right:0; }

/* Auf der Leistungsseite bleibt der Grund statisch, die Liniengrafik
   laeuft aber weiter - nur die Signatur ist aus. */
.scene--leistung .scene-canvas{ display:block; z-index:1; }
.scene--leistung .scene-canvas canvas{ mix-blend-mode:screen; opacity:.9; }
.scene--leistung .scene-sig{ display:none; }

/* Folienanzeige: der Balken steckt im ::after. Die Grundregel faerbt
   sonst zusaetzlich das Element selbst ein, das durch die Trefferflaeche
   deutlich groesser ist - daraus wurde ein Klotz. */
.scene--hero .scene-prog i,
.scene-prog--klein i{ background:none !important; }
.scene--hero .scene-prog i.on,
.scene-prog--klein i.on{ background:none !important; }
.scene--hero .scene-prog i.cur,
.scene-prog--klein i.cur{ transform:none; }

/* Kopfbild Startseite: Der Text steht am Desktop in der linken Haelfte,
   das Motiv soll rechts davon liegen. Ein kleiner Wert zeigt den linken
   Bildteil und schiebt das Motiv damit nach rechts - der frueher hier
   stehende Wert 92% tat das Gegenteil und war ausserdem auf das alte
   Foto gemuenzt (Aufschrift auf der Jacke), das es nicht mehr gibt. */
.hero-bild--rechts{ object-position:10% 50%; transform-origin:10% 50%; }

/* Messungen: heller Grund unter der Statistik, damit die Flaeche traegt. */
.page-head:has(> .head-sig canvas[data-sig="pegelstatistik"])::before{
  background:linear-gradient(100deg, rgba(1,37,48,.86) 0%, rgba(1,37,48,.58) 30%, rgba(1,45,58,.10) 62%, transparent 84%);
}
.head-sig--voll{ opacity:1; }

/* ---------------------------------------------------------------------
   Ansprechpartner-Band am Fuss der Leistungsseiten
   Ein allgemeines "Angebot anfordern" ist austauschbar. Ein Name mit
   Gesicht ist es nicht - und er wandert ueber den Parameter im Link
   mit ins Formular, damit die Anfrage dort landet, wo sie hingehoert.
   --------------------------------------------------------------------- */
.ansp-band{
  background:linear-gradient(160deg, var(--petrol) 0%, var(--petrol-deep) 100%);
  color:#fff; padding:clamp(38px,5vh,58px) 0;
}
.ansp-band .wrap{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(18px,2.4vw,30px);
}
.ansp-foto{
  width:104px; height:104px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(175,209,219,.35); flex:0 0 auto;
}
.ansp-text{ flex:1 1 320px; min-width:0; }
.ansp-k{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--skyblue); margin-bottom:7px;
}
.ansp-band h2{ font-size:clamp(21px,2.5vw,27px); color:#fff; margin:0 0 8px; }
.ansp-band p{ color:#d4e6ec; font-size:15px; margin:0; max-width:62ch; }
.ansp-band .btn-primary{ flex:0 0 auto; }
@media (max-width:720px){
  .ansp-foto{ width:76px; height:76px; }
  .ansp-band .btn-primary{ width:100%; text-align:center; }
}

/* Fachlicher Ansprechpartner auf der Kontaktseite.
   Er steht NEBEN dem Backoffice, nicht an seiner Stelle: Borchert
   koordiniert weiterhin, die zweite Karte sagt nur, wer fachlich
   antwortet. Ohne Parameter im Link bleibt sie ausgeblendet. */
.kt-person--fach{ display:none; }
.kt-person--fach.is-on{ display:flex; }
.kt-person--fach{
  margin-top:16px; padding-top:20px; border-top:1px solid var(--line);
}
.kt-fach-hinweis{
  font-size:12.5px; color:var(--ink-soft); margin:14px 0 0;
}

/* ---------------------------------------------------------------------
   Wissensmarke
   Die Scrollszenen sind kein Leistungsversprechen, sondern Anschauung:
   sie erklaeren ein Verfahren, statt es zu verkaufen. Damit das nicht
   verwechselt wird, traegt jede Szene oben links dieselbe kleine Marke.
   Sie sitzt unterhalb der Navigation, blendet beim Hineinscrollen ein
   und bleibt bewusst zurueckhaltend - sie soll einordnen, nicht rufen.
   --------------------------------------------------------------------- */
.scene-badge{
  position:absolute; z-index:6; pointer-events:none;
  top:calc(var(--nav-h) + clamp(14px, 3vh, 34px));
  left:clamp(16px, 4vw, 42px);
  display:flex; align-items:center; gap:9px;
  padding:7px 13px 7px 10px; border-radius:999px;
  background:rgba(1,30,40,.55); border:1px solid rgba(175,209,219,.22);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(175,209,219,.9); white-space:nowrap;
  opacity:0; transform:translateY(-8px);
  transition:opacity .55s ease, transform .55s var(--ease-out, ease);
}
.scene-badge.is-on{ opacity:1; transform:none; }
.scene-badge svg{ width:14px; height:14px; flex:0 0 auto; opacity:.85; }
.scene-badge b{ font-weight:700; }
.scene-badge span{
  font-weight:600; letter-spacing:.06em; text-transform:none;
  color:rgba(175,209,219,.62); font-size:11px;
}
.scene-badge span::before{ content:"·"; margin:0 7px 0 2px; opacity:.6; }

/* Auf hellem Grund - etwa beim Pegelvergleich auf der Startseite -
   dreht sich der Kontrast um. */
.scene-badge--hell{
  background:rgba(255,255,255,.72); border-color:rgba(1,66,86,.16);
  color:var(--petrol);
}
.scene-badge--hell span{ color:var(--ink-soft); }

/* Im Fluss stehende Marke (keine Sticky-Buehne, sondern ein normaler
   Abschnitt): dort sitzt sie nicht absolut, sondern ueber dem Inhalt. */
.scene-badge--statisch{
  position:static; opacity:1; transform:none;
  display:inline-flex; margin-bottom:16px;
}

@media (max-width:700px){
  .scene-badge{ font-size:9.5px; padding:6px 11px 6px 9px; gap:7px; }
  .scene-badge span{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .scene-badge{ transition:none; }
}

/* ---------------------------------------------------------------------
   Kontaktseite: kompakter Kopf mit Erreichbarkeit
   Ein ganzer Bildschirm nur fuer eine Ueberschrift ist auf einer
   Kontaktseite verschenkt - wer hier landet, sucht eine Nummer. Der
   Kopf ist deshalb auf Inhaltshoehe gesetzt und traegt Telefon,
   E-Mail und Anschrift gleich mit. Der Weiterscrollen-Knopf entfaellt.
   --------------------------------------------------------------------- */
.page-head--kompakt{
  min-height:0;
  padding-top:clamp(34px, 6vh, 62px);
  padding-bottom:clamp(34px, 6vh, 62px);
}
.page-head--kompakt h1{ margin-bottom:14px; }

.kt-schnell{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(22px, 4vw, 54px);
  margin-top:clamp(26px, 4vh, 40px);
  padding-top:clamp(22px, 3vh, 32px);
  border-top:1px solid rgba(175,209,219,.20);
}
.kt-tel--kopf{ margin:0; flex:0 0 auto; }
.kt-schnell-daten{
  flex:1 1 320px; min-width:0;
  display:flex; flex-wrap:wrap; gap:8px clamp(24px, 3vw, 44px);
}
.kt-schnell-daten .kt-zeile{ border:0; padding:0; }
.kt-schnell-daten .kt-k{ color:rgba(175,209,219,.66); }
.kt-schnell-daten .kt-v,
.kt-schnell-daten .kt-v a{ color:#eaf4f7; }
.kt-schnell-daten .kt-v a:hover{ color:var(--skyblue); }

@media (max-width:700px){
  .kt-schnell{ gap:20px; }
  .kt-schnell-daten{ flex-basis:100%; }
}

/* ---------------------------------------------------------------------
   TEIL 4 - Szene mit eingebettetem Programmfenster
   Wie die uebrigen Szenen aufgebaut (links Text, rechts die Grafik),
   nur ist die "Grafik" hier ein bedienbares Fenster. Es bleibt also
   anklickbar - die Szene schaltet nur die Ansicht mit.
   --------------------------------------------------------------------- */
.scene--app .scene-stage{ background:#012530; }
.scene--app .scene-copy{ pointer-events:none; }
.scene--app .scene-copy > *{ pointer-events:auto; }

.app-buehne{
  position:absolute; z-index:3;
  top:50%; transform:translateY(-50%);
  /* Abstand zum rechten Rand, damit der Weiter-Pfeil nicht auf dem
     Programmfenster liegt - er ist dort anklickbar, das Fenster aber
     auch, und beides uebereinander ist eine Falle. */
  right:clamp(64px, 6.5vw, 110px);
  width:min(54vw, 820px);
  pointer-events:auto;
}
.app-buehne .app-rahmen{
  margin:0;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75);
  border-color:rgba(175,209,219,.22);
}
.app-buehne .app-rahmen iframe{
  height:min(62vh, 620px);
}
/* Die Textspalte laesst rechts Platz fuer das Fenster. */
.scene--app .scene-copy .scene-step{ padding-right:62%; }
/* Die Kennzeile bleibt einzeilig: umbrochen zerfaellt sie in drei
   Stummel, und Platz bis zum Programmfenster ist reichlich da. */
.scene--app .scene-copy .scene-eyebrow{ padding-right:0; white-space:nowrap; }
@media (max-width:1000px){
  .scene--app .scene-copy .scene-eyebrow{ white-space:normal; }
}

@media (max-width:1000px){
  .app-buehne{
    position:static; transform:none; width:auto;
    margin:22px clamp(16px,4vw,30px) 0;
  }
  .scene--app .scene-stage{
    height:auto; min-height:0; position:static;
    padding:clamp(30px,6vh,60px) 0 clamp(26px,5vh,50px);
  }
  .scene--app .scene-copy{
    position:static; transform:none; padding:0 clamp(16px,4vw,30px);
  }
  .scene--app .scene-copy .scene-step{ padding-right:0; }
  .scene--app .scene-steps{ display:block; }
  .scene--app .scene-step{ position:static; opacity:1; transform:none; }
  .scene--app .scene-step + .scene-step{ margin-top:26px; }
  .scene--app .scene-prog, .scene--app .scene-nav{ display:none; }
  .app-buehne .app-rahmen iframe{ height:min(70vh, 560px); }
}

/* Links im Fliesstext einer Szene. Ohne eigene Regel erben sie das
   dunkle Blau der hellen Seiten und verschwinden auf dem dunklen
   Buehnengrund fast vollstaendig. */
.scene-copy .scene-step p a{
  color:var(--skyblue); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(175,209,219,.45); padding-bottom:1px;
}
.scene-copy .scene-step p a:hover{ color:#fff; border-color:#fff; }


/* Logo als Verweis in der Zeitleiste (Qualitaetsmanagement) */
.tl-logo{
  display:inline-block; margin-top:14px; padding:12px 16px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  width:190px; transition:border-color .2s, transform .2s;
}
.tl-logo:hover{ border-color:var(--accent); transform:translateY(-2px); }
.tl-logo img{ width:100%; height:auto; display:block; }
.tl-mehr{ white-space:nowrap; }

/* ---------------------------------------------------------------------
   Kontaktseite auf einem Bildschirm
   Zwei Spalten: links die Erreichbarkeit, rechts das Formular. Die
   Hoehe ist der sichtbare Bereich, nicht der Inhalt - was darunter
   folgt (Ablauf, Rechtliches), ist Zugabe.
   --------------------------------------------------------------------- */
.kt-seite{
  min-height:var(--vh-rest);
  padding-top:clamp(18px, 3vh, 34px);
  padding-bottom:clamp(18px, 3vh, 34px);
  justify-content:center;
}


.kt-eins{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(26px, 4vw, 60px); align-items:center;
  margin-top:clamp(12px, 2vh, 24px);
}
.kt-seite h1{
  font-size:clamp(28px, 3.6vw, 46px); line-height:1.08; margin-bottom:10px;
}
.kt-seite .page-lead{ margin-bottom:clamp(16px, 2.4vh, 26px); max-width:38ch; }

.kt-kurz{
  display:flex; flex-direction:column; gap:5px; margin-top:16px;
  font-size:13.5px; color:rgba(234,244,247,.82); line-height:1.5;
}
.kt-kurz a{ color:#eaf4f7; }
.kt-kurz a:hover{ color:var(--skyblue); }
.kt-kurz span{ color:rgba(175,209,219,.72); font-size:12.5px; }

.kt-personen{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:clamp(14px,2.2vh,24px); }
.kt-personen .kt-person{ margin:0; padding:0; border:0; }
.kt-personen .kt-person--fach{ margin:0; padding:0; border:0; }
.kt-personen img{ width:44px; height:44px; }

/* Formular gedraengter, damit es ohne Scrollen ganz sichtbar bleibt */
.kt-seite .kt-formkasten{ padding:clamp(18px,2.4vw,28px); }
.kt-seite .kt-formtitel{ font-size:18px; margin-bottom:14px; }
.kt-seite .field{ margin-bottom:12px; }
.kt-seite textarea{ min-height:clamp(90px, 14vh, 140px); }
.kt-seite .consent{ font-size:11px; line-height:1.5; margin-top:10px; }
.kt-zwei{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }

@media (max-width:900px){
  .kt-seite{ min-height:0; }
  .kt-eins{ grid-template-columns:1fr; }
  .kt-zwei{ grid-template-columns:1fr; }
}

/* Namen und Rollen stehen auf der Kontaktseite jetzt auf dunklem
   Grund - die Farben aus dem hellen Abschnitt greifen dort nicht. */
.kt-seite .kt-name{ color:#fff; }
.kt-seite .kt-rolle{ color:rgba(175,209,219,.78); }
.kt-seite .kt-person img{ border:1px solid rgba(175,209,219,.3); }
.kt-seite .kt-person--fach{ border-top:0; padding-top:0; margin-top:0; }
.kt-seite .kt-fach-hinweis{
  color:rgba(175,209,219,.7); font-size:12px; margin-top:12px; max-width:52ch;
}

/* ---------------------------------------------------------------------
   Layout B/C der Leistungsuebersicht
   Die Kurve laeuft ueber die ganze Buehne und wird nach links hin
   ausgeblendet. Sie wirkt dadurch groesser, ohne dem Text ins Gehege
   zu kommen - der steht in der ausgeblendeten Zone.
   --------------------------------------------------------------------- */
[data-layout="voll"] .scene-canvas{
  /* Die Maske muss ueber der Textspalte praktisch geschlossen sein.
     Der Text endet bei rund 44% der Breite - bis dahin ist die Kurve
     nur als Andeutung da und wird erst danach voll sichtbar. */
  -webkit-mask-image:linear-gradient(90deg, transparent 12%, rgba(0,0,0,.06) 34%, rgba(0,0,0,.30) 48%, #000 64%);
          mask-image:linear-gradient(90deg, transparent 12%, rgba(0,0,0,.06) 34%, rgba(0,0,0,.30) 48%, #000 64%);
}
[data-layout="voll"] .scene-step{ padding-right:58%; }

/* Variante C: der Text bekommt zusaetzlich eine eigene Flaeche, damit
   er sich klar vom Hintergrund abhebt. */
[data-akzent="panel"] .scene-steps{
  padding:clamp(20px,2.4vw,32px) clamp(22px,2.6vw,36px);
  border-left:2px solid var(--skyblue);
  background:linear-gradient(90deg, rgba(1,30,40,.82), rgba(1,30,40,.30) 78%, transparent);
  border-radius:0 14px 14px 0;
}
[data-akzent="panel"] .scene-step{ padding-right:50%; }
@media (max-width:860px){
  [data-layout="voll"] .scene-step,
  [data-akzent="panel"] .scene-step{ padding-right:0; }
  [data-akzent="panel"] .scene-steps{ background:none; border-left:0; padding:0; }
}

/* ---------------------------------------------------------------------
   Leistungsuebersicht: linker Rand der Kurve wird ausgeblendet
   Die Kurve beginnt bewusst dicht am Text. Ohne Maske schnitte sie in
   die Zeile; mit Maske laeuft sie weich aus und wirkt trotzdem, als
   reiche sie bis hinter den Satz.
   --------------------------------------------------------------------- */
[data-scene="bausteine"] .scene-canvas{
  /* Die Terzkurve der Analysen-Folie beginnt links mit einem langen
     waagerechten Stueck - das blieb bei der frueheren Maske noch als
     Strich im Satz stehen. Sie oeffnet jetzt spaeter. */
  -webkit-mask-image:linear-gradient(90deg, transparent 36%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.62) 53%, #000 62%);
          mask-image:linear-gradient(90deg, transparent 36%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.62) 53%, #000 62%);
}
@media (max-width:860px){
  [data-scene="bausteine"] .scene-canvas{
    -webkit-mask-image:none; mask-image:none;
  }
}

/* Groessere Fassung des Reglers: Der Wert ist die Hauptsache auf dem
   Panel und war vorher zu klein zum Ablesen. */
.dbx--gross{ padding:clamp(30px,4.4vw,54px); }
.dbx--gross .dbx-val{ font-size:clamp(58px,9vw,112px); }
.dbx--gross .dbx-bar{ height:clamp(64px,9vh,86px); }
.dbx--gross .dbx-what .n{ font-size:clamp(18px,2.1vw,24px); }
.dbx--gross .dbx-what .s{ font-size:14px; }
.dbx--gross .dbx-ticks{ font-size:11px; margin-top:6px; }
.dbx--gross .dbx-hint{ margin-top:16px; }

/* Rechtliches klein und eingeklappt - es gehoert dazu, aber es ist
   nicht das, weswegen jemand am Regler zieht. */
.dbx-bem{
  margin-top:20px; padding-top:16px;
  border-top:1px solid rgba(175,209,219,.16);
}
.dbx-bem summary{
  cursor:pointer; list-style:none;
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(175,209,219,.55);
}
.dbx-bem summary::-webkit-details-marker{ display:none; }
.dbx-bem summary::after{ content:" +"; }
.dbx-bem[open] summary::after{ content:" \2013"; }
.dbx-bem summary:hover{ color:var(--skyblue); }
.dbx-bem p{
  font-size:12.5px; line-height:1.6; color:rgba(175,209,219,.68);
  margin:12px 0 0; max-width:78ch;
}
.dbx-bem a{ color:var(--skyblue); }

/* Kurzfassung der Leistungen als Fliesstext. Die Verweise tragen die
   Aussage - deshalb sind sie hier kraeftiger gesetzt als sonst. */
.leist-satz{ margin-top:16px; }
.leist-satz a{ font-weight:600; color:var(--accent); text-decoration:none;
  border-bottom:1px solid rgba(1,74,98,.25); }
.leist-satz a:hover{ color:var(--petrol); border-color:var(--petrol); }

/* ---------------------------------------------------------------------
   Ansprechpartner als eigener Abschnitt
   Heller Grund im Rhythmus der uebrigen Seite - dunkelblau wirkte an
   dieser Stelle wie ein zweiter Abschluss neben dem Footer. Das
   Portraet kommt aus der Teamseite, hochkant statt rund beschnitten,
   aber bewusst kleiner als der Text: es begleitet ihn, es fuehrt nicht.
   --------------------------------------------------------------------- */
.ansp-gross{
  background:#012530; border-top:0;
  color:#fff; padding:clamp(72px,11vh,124px) 0;
}
.ansp-gross > .wrap{
  display:grid; grid-template-columns:minmax(0,208px) minmax(0,1fr);
  gap:clamp(26px,3.4vw,52px); align-items:center;
}
.ansp-foto-gross{
  margin:0; border-radius:14px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 18px 44px -28px rgba(1,74,98,.5);
  background:#fff;
}
.ansp-foto-gross img{
  width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover;
}
.ansp-inhalt .ansp-k{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px;
}
.ansp-gross h2{
  font-size:clamp(26px,3.4vw,40px); line-height:1.1; color:var(--petrol); margin:0 0 8px;
}
.ansp-rolle{
  font-size:13.5px; font-weight:600; color:var(--accent); margin-bottom:16px;
}
.ansp-gross p{
  color:var(--ink-soft); font-size:clamp(15px,1.6vw,17px); line-height:1.6;
  margin:0; max-width:60ch;
}
.ansp-aktionen{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px;
  margin-top:clamp(20px,2.6vh,30px);
}
.ansp-aktionen .btn-primary.btn-light{
  background:var(--petrol); color:#fff; border-color:var(--petrol);
}
.ansp-aktionen .btn-primary.btn-light:hover{ background:var(--petrol-deep); }
.ansp-tel{
  color:var(--ink-soft); font-size:14.5px; text-decoration:none;
  border-bottom:1px solid rgba(1,74,98,.25); padding-bottom:2px;
}
.ansp-tel b{ color:var(--petrol); }
.ansp-tel:hover{ color:var(--petrol); border-color:var(--petrol); }

@media (max-width:820px){
  .ansp-gross > .wrap{ grid-template-columns:1fr; }
  .ansp-foto-gross{ max-width:190px; }
  .ansp-aktionen .btn-primary{ width:100%; text-align:center; }
}


/* Das eingebettete Programmfenster wird als Ganzes verkleinert. Das
   haelt alle Verhaeltnisse - Reiter, Felder, Diagrammschrift - genau
   so, wie sie im echten Programm stehen, statt nur die Schrift zu
   aendern. Die Buehne rechnet die Groesse zurueck, damit kein Rand
   entsteht. */
.app-buehne .app-rahmen iframe{
  width:125%; height:min(80vh, 820px);
  transform:scale(.8); transform-origin:0 0;
  margin-bottom:calc(-0.2 * min(80vh, 820px));
}
.app-leiste{ padding:8px 13px; }
.app-leiste i{ width:8px; height:8px; }
.app-leiste span{ font-size:10.5px; }

/* Kennzeichnung in der Fensterleiste: das Programm ist keine gekaufte
   Software, sondern im Haus entstanden. Die Marke steht rechts aussen,
   damit sie den Fenstertitel nicht verdraengt. */
.app-leiste .app-eigen{
  margin-left:auto; flex:none;
  padding:3px 9px 4px; border-radius:999px;
  border:1px solid rgba(1,74,98,.22); background:rgba(1,74,98,.07);
  font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--petrol); white-space:nowrap;
}
@media (max-width:520px){ .app-leiste .app-eigen{ display:none; } }

/* ---------------------------------------------------------------------
   Nachhaltigkeit als regulaerer Abschnitt
   Drei Punkte nebeneinander, im hellen Raster der uebrigen Seite. Der
   dunkle Sonderstreifen entfaellt - er unterbrach den Wechsel zwischen
   weissen und getoenten Abschnitten.
   --------------------------------------------------------------------- */
.nh-gitter{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:clamp(20px,2.6vw,34px); margin-top:clamp(26px,4vh,40px);
}
.nh-karte{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:clamp(20px,2.4vw,28px);
  display:flex; flex-direction:column;
}
.nh-bild{
  margin:0 0 18px; height:132px;
  display:flex; align-items:center; justify-content:center;
}
.nh-bild img{ max-height:132px; width:auto; max-width:100%; object-fit:contain; display:block; }
.nh-zahl{
  font-size:clamp(30px,3.6vw,44px); font-weight:700; color:var(--petrol);
  line-height:1; letter-spacing:-.02em;
  height:132px; display:flex; align-items:center; margin-bottom:18px;
}
.nh-karte h3{ font-size:18px; color:var(--petrol); margin:0 0 10px; }
.nh-karte p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin:0; }
.nh-karte strong{ color:var(--petrol); }
.nh-fuss{
  font-size:12.5px; color:var(--ink-soft); margin-top:22px; max-width:78ch; line-height:1.6;
}

/* ---------------------------------------------------------------------
   Pegelbuehne
   Derselbe Auftritt wie eine Scrollszene - dunkler Grund ueber die
   ganze Breite, bildschirmhoch, Marke oben links - aber ohne
   Scrollmechanik. Bewegt wird hier von Hand. Schriftgroessen sind
   bewusst dieselben wie in den Szenen, damit der Abschnitt nicht als
   Fremdkoerper zwischen ihnen steht.
   --------------------------------------------------------------------- */
.pegelbuehne{
  background:linear-gradient(165deg,#02465c 0%,#012530 58%,#01212b 100%);
  color:#fff; position:relative;
  min-height:var(--vh-rest);
  display:flex; align-items:center;
  padding:clamp(40px,6vh,72px) 0;
}

.pegelbuehne > .wrap{ width:100%; }
.pb-kopf{ max-width:46ch; }
/* Aufbau wie eine Szene: Text links in der halben Spalte, die Grafik
   - hier der Regler - nimmt die rechte Haelfte und die untere Bahn.
   Der .wrap bleibt bewusst OHNE position:relative, sonst haengt sich
   die Wissensmarke an ihn statt an den Abschnitt und rutscht in die
   Ueberschrift. */
@media (min-width:861px){
  .pegelbuehne{ padding-top:clamp(70px,11vh,120px); }
  .pb-kopf{ max-width:44%; }
  .dbx--nackt .dbx-top{ align-items:flex-end; }
}
.pegelbuehne .scene-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--skyblue); margin-bottom:12px; display:block;
}
/* wie .scene-step h2 / p */
.pegelbuehne h2{
  font-size:clamp(26px,3vw,38px); color:#fff; line-height:1.12; margin:0 0 14px;
}
.pb-lead{ color:#cfe4ea; font-size:16.5px; line-height:1.6; margin:0; max-width:34em; }

/* Der Regler steht auf der Buehne, nicht in einer eigenen Karte. */
.dbx--nackt{ background:none; padding:clamp(24px,4vh,40px) 0 0; border-radius:0; }
.dbx--nackt .dbx-val{ font-size:clamp(52px,8vw,104px); }
.dbx--nackt .dbx-bar{ height:clamp(58px,8vh,78px); }

/* Alles unterhalb des Reglers ist Beiwerk und entsprechend klein. */
.pb-fuss{
  margin-top:clamp(22px,3vh,34px);
  padding-top:clamp(16px,2.2vh,24px);
  border-top:1px solid rgba(175,209,219,.16);
  max-width:76ch;
}
.pb-notiz{ font-size:13px; line-height:1.6; color:rgba(207,228,234,.8); margin:0; }
.pb-notiz b{ color:#fff; }
.pb-notiz a{
  color:var(--skyblue); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(175,209,219,.4);
}
.pb-notiz a:hover{ color:#fff; border-color:#fff; }
.pegelbuehne .dbx-bem{ margin-top:14px; padding-top:12px; border-top-color:rgba(175,209,219,.12); }
.pegelbuehne .dbx-bem p{ font-size:12px; }

/* Die Wissensmarke sitzt hier wie in den Szenen oben links. */
.pegelbuehne .scene-badge--statisch{
  position:absolute; margin:0;
  top:clamp(14px, 3vh, 34px); left:clamp(16px, 4vw, 42px);
}

@media (max-width:820px){
  .pegelbuehne{ min-height:0; padding-top:clamp(64px,10vh,90px); }
}

/* ---------------------------------------------------------------------
   Beitraege als Karussell
   Drei Karten stehen nebeneinander, weitere liegen rechts daneben.
   Grundlage ist echtes Scrollen mit Snap - die Pfeile schieben nur
   an, wischen und Tastatur funktionieren dadurch von selbst mit.
   --------------------------------------------------------------------- */
.post-karussell{ position:relative; margin-top:30px; }
.pk-spur{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * clamp(16px,2vw,26px)) / 3);
  gap:clamp(16px,2vw,26px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none;
  padding-bottom:4px;
}
.pk-spur::-webkit-scrollbar{ display:none; }
.pk-spur > *{ scroll-snap-align:start; }

.pk-pfeil{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 8px 22px -10px rgba(1,74,98,.45);
  transition:border-color .2s, opacity .25s, background .2s;
}
.pk-pfeil::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:9px; height:9px; border-right:2px solid var(--petrol); border-top:2px solid var(--petrol);
}
.pk-pfeil--vor{ right:-14px; }
.pk-pfeil--vor::before{ transform:rotate(45deg) translate(-2px,2px); }
.pk-pfeil--zurueck{ left:-14px; }
.pk-pfeil--zurueck::before{ transform:rotate(-135deg) translate(-2px,2px); }
.pk-pfeil:hover{ border-color:var(--accent); background:#f4f9fb; }
/* Am Ende der Spur wird der jeweilige Pfeil unbenutzbar - er bleibt
   sichtbar, damit die Karten nicht springen, aber greift nicht mehr. */
.pk-pfeil[disabled]{ opacity:.28; pointer-events:none; }

@media (max-width:900px){
  .pk-spur{ grid-auto-columns:calc((100% - clamp(16px,2vw,26px)) / 2); }
  .pk-pfeil{ display:none; }
}
@media (max-width:620px){
  .pk-spur{ grid-auto-columns:86%; }
}

/* ---------------------------------------------------------------------
   Mitgliedschaften
   Vier grosse Logos nebeneinander, der Text jeweils darunter. Die
   Logos sind hier die Hauptsache - sie werden erkannt, bevor jemand
   liest, welche Organisation dahintersteht.
   --------------------------------------------------------------------- */
.mg-liste{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(20px,3vw,44px); margin-top:clamp(28px,4vh,44px);
}
.mg-eintrag{ display:block; background:none; border:0; padding:0; }
/* Kein Kasten um die Logos: sie liegen direkt auf der Flaeche und
   wachsen beim Ueberfahren leicht an. Ein weisser Rahmen haette sie
   wie Siegel wirken lassen, und genau das sollen sie nicht sein. */
.mg-logo{
  display:flex; align-items:center; justify-content:center;
  /* Dieselbe Hoehe wie auf der Startseite (118px, breite Marken 86px) -
     dort steht das Verhaeltnis von Logo zu Text am besten. */
  height:118px; margin-bottom:22px;
}
/* Gleiche Feldhoehe fuer alle vier Marken - sonst begaennen die
   Titel der breiten Marken weiter oben. Begrenzt wird das Bild, nicht
   das Feld. */
.mg-eintrag--breit .mg-logo{ height:118px; }
.mg-eintrag--breit .mg-logo img{ max-height:86px; }
.mg-logo img{
  max-width:100%; max-height:100%; width:auto; height:auto; display:block;
  transition:transform .3s var(--ease-out, ease);
}
.mg-eintrag:hover .mg-logo img{ transform:scale(1.09); }
@media (prefers-reduced-motion: reduce){
  .mg-eintrag:hover .mg-logo img{ transform:none; }
}
.mg-eintrag h3{ font-size:16px; color:var(--petrol); margin:0 0 8px; line-height:1.3; }
.mg-eintrag p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0; }
@media (max-width:900px){ .mg-liste{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .mg-liste{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------
   Hinweis auf den Weiter-Pfeil
   Wer eine Szene zum ersten Mal sieht, haelt sie leicht fuer ein Bild.
   Der Pfeil bekommt deshalb einen ruhigen Puls, solange noch nicht
   weitergeblaettert wurde - danach hoert er auf und stoert nicht mehr.
   --------------------------------------------------------------------- */
.scene-nav--vor.is-hinweis::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(175,209,219,.75);
  animation:navRing 2.6s ease-out infinite;
  pointer-events:none;
}
/* Der Knopf selbst bewegt sich NICHT. Eine Verschiebung per transform
   verschiebt auch seine Trefferflaeche - man klickt dann ins Leere und
   muss ein zweites Mal zielen. Es bewegt sich nur das Pfeilsymbol
   darin, die Flaeche bleibt, wo sie ist. */
.scene-nav--vor.is-hinweis svg{ animation:navSchub 2.6s ease-in-out infinite; }
@keyframes navRing{
  0%{ transform:scale(1); opacity:.75; }
  65%{ opacity:0; }
  100%{ transform:scale(1.75); opacity:0; }
}
@keyframes navSchub{
  0%, 62%, 100%{ transform:translateX(0); }
  72%{ transform:translateX(5px); }
  82%{ transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .scene-nav--vor.is-hinweis,
  .scene-nav--vor.is-hinweis::after{ animation:none; }
}

/* Die Ansprechpartner auf der Kontaktseite bekommen mehr Gewicht -
   sie sind der Grund, warum jemand hier ueberhaupt schreibt. */
.kt-personen img{ width:64px; height:64px; }
.kt-seite .kt-name{ font-size:17px; }
.kt-seite .kt-rolle{ font-size:13.5px; }
.kt-personen{ gap:14px 34px; }
@media (max-width:700px){ .kt-personen img{ width:52px; height:52px; } }

/* ---------------------------------------------------------------------
   Kontaktabschluss der Startseite
   Dunkelblau hat sich mit dem Footer direkt darunter zu einem einzigen
   dunklen Block addiert. Hellblau setzt den Abschnitt wieder ab und
   laesst die Seite oberhalb des Footers offener enden.
   --------------------------------------------------------------------- */
.contact-compact{
  background:var(--bg-tint); color:var(--ink);
  border-top:1px solid var(--line);
}
.contact-compact h2{ color:var(--petrol); }
.contact-compact .sec-eyebrow{ color:var(--accent); }
.contact-compact .sec-intro{ color:var(--ink-soft); }
.contact-compact .ci{ color:var(--ink-soft); }
.contact-compact .ci a{ color:var(--petrol); font-weight:600; }
.contact-compact .ci svg [stroke]{ stroke:var(--accent); }
.contact-compact .btn-primary.btn-light{
  background:var(--petrol); color:#fff; border-color:var(--petrol);
}
.contact-compact .btn-primary.btn-light:hover{ background:var(--petrol-deep); }
.contact-compact .kt-tel{
  background:#fff; border:1px solid var(--line);
}
.contact-compact .kt-tel b{ color:var(--petrol); }
.contact-compact .kt-tel small{ color:var(--ink-soft); }

/* ---------------------------------------------------------------------
   Projektfilter
   Die Sammlung waechst; sechs Karten untereinander sind noch les-, aber
   dreissig nicht mehr durchsuchbar. Der Filter ordnet nach der Art der
   Untersuchung - das ist die Frage, mit der Besucher herkommen
   ("habt ihr so etwas schon einmal gemacht?").
   --------------------------------------------------------------------- */
.ref-filter{
  display:flex; flex-wrap:wrap; gap:9px;
  margin-top:clamp(20px,3vh,28px);
}
.ref-chip{
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  padding:8px 15px; border-radius:999px;
  background:#fff; color:var(--ink-soft);
  border:1px solid var(--line);
  transition:border-color .18s, color .18s, background .18s;
}
.ref-chip:hover{ border-color:var(--accent); color:var(--petrol); }
.ref-chip[aria-pressed="true"]{
  background:var(--petrol); border-color:var(--petrol); color:#fff;
}
.ref-zaehler{
  font-size:12.5px; color:var(--ink-soft); margin:14px 0 0;
}
.ref-card[hidden]{ display:none; }

/* Quellenangaben unter der Emissionsszene */
.quellen{ list-style:none; padding:0; margin:clamp(20px,3vh,28px) 0 0; max-width:82ch; }
.quellen li{
  font-size:14.5px; line-height:1.65; color:var(--ink-soft);
  padding:14px 0 14px 18px; border-left:2px solid var(--line);
}
.quellen li + li{ margin-top:10px; }
.quellen b{ color:var(--petrol); }

/* ---------------------------------------------------------------------
   Messsystem als Werkzeug, nicht als fuenfte Leistung
   Es stand als "05" in derselben Nummernkette wie die vier Leistungen
   und sah dadurch aus wie ein weiterer Auftragstyp. Es ist aber das
   Mittel, mit dem zwei der vier erbracht werden.
   --------------------------------------------------------------------- */
.svc-werkzeug{
  margin-top:clamp(30px,4.4vh,48px);
  padding-top:clamp(22px,3vh,32px);
  border-top:1px solid var(--line);
}
.svc-werkzeug-k{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:16px;
}
.svc-link--flach{
  grid-template-columns:minmax(0,1fr) auto;
  background:var(--bg-tint); border-radius:12px;
  padding:clamp(18px,2.4vw,26px);
}
.svc-link--flach .svc-n{ display:none; }

/* Die Zeile unter den Mitgliedschaftslogos ist eine Bildunterschrift,
   kein Weiterlesen-Link: sie steht mittig unter der Reihe und in
   derselben Schriftgroesse wie andere Bildlegenden. Als linksbuendiger
   Pfeil-Link stand sie vorher gegen die zentrierte Logoreihe. */
.mship-k{
  text-align:center; font-size:12.5px; line-height:1.6;
  color:var(--ink-soft);
  /* Unten deutlich mehr Luft: darunter beginnt ein neuer Gedanke
     (die Leistungen), und der klebte an der Bildunterschrift. */
  margin:14px auto clamp(34px, 5vh, 56px); max-width:70ch;
}
.mship-k a{ color:var(--accent); font-weight:600; }
.mship-k a:hover{ color:var(--petrol); }

/* Beschreibung links, Zahl rechts. */
.dbx-top--getauscht{ align-items:flex-end; }
.dbx-top--getauscht .dbx-what{ text-align:left; }
.dbx-top--getauscht .dbx-zahl{ text-align:right; margin-left:auto; }
.dbx-top--getauscht .dbx-zahl .dbx-k{ text-align:right; }
.dbx-top--getauscht .dbx-val{ justify-content:flex-end; }

/* Der Abschnitt faehrt beim Hereinscrollen einmal von selbst hoch -
   danach nie wieder. Die Bewegung sagt in einer Sekunde, was ein
   Hinweistext in drei Zeilen sagen muesste: der Balken laesst sich
   ziehen. */
.pegelbuehne .dbx{ opacity:0; transform:translateY(14px); }
/* Nur fuer den einen Sprung auf den Startwert vor dem Vorlauf. */
.dbx--sprung .dbx-fill, .dbx--sprung .dbx-knob{ transition:none; }
.pegelbuehne .dbx.is-da{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s var(--ease-out, ease);
}
@media (prefers-reduced-motion: reduce){
  .pegelbuehne .dbx{ opacity:1; transform:none; }
}

/* Kopf der Beitragsseite: der Zeitstrahl liegt tief im Bild, damit er
   die Ueberschrift nicht stoert, und laeuft nach oben aus. */
.page-head--zeit .head-sig{
  -webkit-mask-image:linear-gradient(180deg, transparent 34%, #000 68%);
          mask-image:linear-gradient(180deg, transparent 34%, #000 68%);
}

/* Einstiegsbild vor der Emissionsszene */
/* Text links, Bild rechts - die Ueberschrift steht damit auf der
   Fluchtlinie aller anderen Ueberschriften der Seite. */
.nh-einstieg{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(30px,4.5vw,68px); align-items:center;
}
/* Die Aufnahme ist freigestellt - Rahmen und weisse Flaeche haetten
   ihr einen Kasten verpasst, den sie nicht braucht. */
.nh-einstieg-bild{ margin:0; background:none; border:0; }
.nh-einstieg-bild img{ width:100%; height:auto; display:block; }
@media (max-width:760px){
  .nh-einstieg{ grid-template-columns:1fr; }
  .nh-einstieg-bild{ max-width:420px; }
}

/* ---------------------------------------------------------------------
   Herleitung als Aufklapper
   Die Quellen gehoeren zur Szene - aber wer sie nicht braucht, soll
   nicht daran vorbeiscrollen muessen.
   --------------------------------------------------------------------- */
.quellen-fold{ border-top:1px solid var(--line); padding-top:20px; }
.quellen-fold summary{
  cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:14px;
}
.quellen-fold summary::-webkit-details-marker{ display:none; }
.qf-k{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.qf-t{ font-size:17px; font-weight:700; color:var(--petrol); }
.quellen-fold summary::after{
  content:"+"; margin-left:auto; font-size:20px; font-weight:400; color:var(--ink-soft);
}
.quellen-fold[open] summary::after{ content:"\2013"; }
.quellen-fold summary:hover .qf-t{ color:var(--accent); }
.qf-inhalt{ margin-top:18px; max-width:82ch; }
.qf-inhalt p{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin:0 0 4px; }
.qf-inhalt .quellen{ margin:18px 0; }

/* ---------------------------------------------------------------------
   Herleitung im Szenenfeld
   Die Quellen stehen innerhalb des dunklen Abschnitts, direkt unter der
   Buehne - sie gehoeren zur Darstellung und nicht in den hellen Teil
   der Seite darunter.
   --------------------------------------------------------------------- */
.scene-fussnote{
  position:relative; z-index:5;
  padding-bottom:clamp(34px,5vh,60px);
}
.scene-fussnote .quellen-fold{
  border-top-color:rgba(175,209,219,.18);
}
.scene-fussnote .qf-k{ color:var(--skyblue); }
.scene-fussnote .qf-t{ color:#fff; }
.scene-fussnote .quellen-fold summary::after{ color:rgba(175,209,219,.6); }
.scene-fussnote .quellen-fold summary:hover .qf-t{ color:var(--skyblue); }
.scene-fussnote .qf-inhalt p{ color:rgba(207,228,234,.78); }
.scene-fussnote .quellen li{
  border-left-color:rgba(175,209,219,.22);
  color:rgba(207,228,234,.78);
}
.scene-fussnote .quellen b{ color:#fff; }
.scene-fussnote .quellen a{ color:var(--skyblue); }

/* Der Abschnitt traegt jetzt zusaetzlich zur Buehne die Fussnote -
   der dunkle Grund muss deshalb ueber beides laufen. */
.scene:has(> .wrap.scene-fussnote){ background:#012530; }

/* =====================================================================
   TOOL-ROW ALS FOTO-VARIANTE
   Gleiche Struktur wie .tool-row, aber breitere Bildspalte und ohne
   den weissen Logo-Rahmen - fuer echte Fotos im Beschreibungsteil.
   ===================================================================== */
.tool-row--foto{ grid-template-columns:minmax(0,0.85fr) minmax(0,1fr); align-items:center; }
.tool-foto{
  margin:0; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 16px 38px rgba(1,74,98,.14);
}
.tool-foto img{ display:block; width:100%; height:100%; max-height:440px; object-fit:cover; }
.tool-foto figcaption{
  font-size:12.5px; color:var(--ink-soft); padding:10px 14px 12px; background:#fff;
}
@media (max-width:820px){ .tool-row--foto{ grid-template-columns:1fr; } }

/* =====================================================================
   STARTSEITE - LEISTUNGSBEREICHE ALS VIER SPALTEN
   Eine Reihe ueber die volle Breite: je Bereich eine Spalte, getrennt
   nur durch Haarlinien. Keine Kacheln, keine Flaechen. Beim Zeigen
   laeuft die Kopflinie von links durch und der Grund toent sich leicht.
   ===================================================================== */
.lsp{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(34px,4.5vw,56px);
}
@media (max-width:1000px){ .lsp{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .lsp{ grid-template-columns:minmax(0,1fr); } }

.lsp a{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(24px,2.6vw,32px) clamp(18px,2vw,28px) clamp(30px,3.4vw,44px);
  text-decoration:none; border-top:1px solid var(--line);
  transition:background .3s ease;
}
/* Senkrechte Trennung ueber einen Innenschatten, damit zwischen den
   Spalten keine doppelte Linie steht. */
.lsp a:not(:first-child){ box-shadow:inset 1px 0 0 var(--line); }
@media (max-width:1000px){ .lsp a:nth-child(3){ box-shadow:none; } }
@media (max-width:560px){ .lsp a{ box-shadow:none !important; } }
.lsp a:hover{ background:var(--bg-tint); }
.lsp a::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:var(--petrol); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.lsp a:hover::before, .lsp a:focus-visible::before{ transform:scaleX(1); }

.lsp-ik{ margin:0 0 clamp(14px,1.6vw,20px); }
.lsp-ik svg{
  width:30px; height:30px; color:var(--petrol); display:block;
  transition:transform .35s var(--ease-out);
}
.lsp a:hover .lsp-ik svg{ transform:translateY(-3px); }
.lsp h3{
  font-size:clamp(16px,1.5vw,18.5px); color:var(--petrol);
  margin:0 0 9px; line-height:1.25; letter-spacing:-.005em;
}
.lsp p{ font-size:14px; color:var(--ink-soft); line-height:1.55; margin:0; }
.lsp-mehr{
  margin-top:auto; padding-top:clamp(16px,2vw,24px);
  font-size:13.5px; font-weight:600; color:var(--line);
  transition:color .25s, transform .3s var(--ease-out);
}
.lsp a:hover .lsp-mehr{ color:var(--accent); transform:translateX(3px); }
/* Balken im Messungen-Icon atmen dezent */
.lsp .ik-bar{ transform-box:fill-box; transform-origin:bottom; }
.lsp a:hover .ik-bar{ animation:ikBar 1.5s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes ikBar{ 0%,100%{ transform:scaleY(.66); } 50%{ transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce){
  .lsp a, .lsp a::before, .lsp-ik svg, .lsp-mehr{ transition:none; }
  .lsp a:hover .ik-bar{ animation:none; }
}

/* =====================================================================
   ANSPRECHPARTNER-BAND auf dunklem Grund
   Das Band steht jetzt im Petrolton der Scrollszene (#012530). Die
   Textfarben ziehen nach, das Foto bekommt einen hellen Rahmen.
   ===================================================================== */
.ansp-gross .ansp-k { color: var(--skyblue) !important; }
.ansp-gross h2 { color: #fff !important; }
.ansp-gross .ansp-rolle { color: var(--skyblue) !important; }
.ansp-gross p { color: #d4e6ec !important; }
.ansp-gross .ansp-foto-gross {
  border-color: rgba(175,209,219,.35);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.75);
}
.ansp-gross .ansp-aktionen .btn-primary.btn-light {
  background: var(--skyblue); color: var(--petrol-deep); border-color: var(--skyblue);
}
.ansp-gross .ansp-aktionen .btn-primary.btn-light:hover { background: #fff; }
.ansp-gross .ansp-tel { color: #d4e6ec; border-bottom-color: rgba(175,209,219,.4); }
.ansp-gross .ansp-tel b { color: #fff; }
.ansp-gross .ansp-tel:hover { color: #fff; border-color: var(--skyblue); }
/* etwas mehr Raum um Foto und Text, damit das Band nicht schmal wirkt */
.ansp-gross > .wrap { grid-template-columns: minmax(0,248px) minmax(0,1fr); align-items: center; }
@media (max-width: 700px) { .ansp-gross > .wrap { grid-template-columns: 1fr; } }

/* =====================================================================
   SCHALLPEGEL-BÜHNE als helles Band (wie das Aussagenband in Variante B)
   Ruhiger als der dunkle Verlauf: gedecktes Blaugrau, weniger Kontrast,
   normale Abschnittshöhe statt Vollbild.
   ===================================================================== */
.pegelbuehne{
  background:#7f9fae !important;
  min-height:0 !important;
  padding:clamp(56px,8vw,96px) 0 !important;
}
.pegelbuehne .scene-eyebrow{ color:rgba(255,255,255,.8); }
.pegelbuehne h2{ color:#fff; }
.pb-lead{ color:rgba(255,255,255,.9) !important; }
.pb-notiz{ color:rgba(255,255,255,.86) !important; }
.pb-notiz a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
/* Regler auf hellem Grund: weniger Leuchtkraft, klarere Kanten */
.pegelbuehne .dbx-k{ color:rgba(255,255,255,.75); }
/* Unterhalb des Richtwerts bleibt die Zahl weiss; wird der Tagwert
   ueberschritten, springt sie samt Einheit in denselben Warnton wie
   die Richtwertmarken. */
.pegelbuehne .dbx-val:not(.over){ color:#fff; }
.pegelbuehne .dbx-val.over{ color:#f3c0b1; }
.pegelbuehne .dbx-what .n{ color:#fff; }
.pegelbuehne .dbx-what .s{ color:rgba(255,255,255,.8); }
.pegelbuehne .dbx-rest{ background:rgba(255,255,255,.28); }
.pegelbuehne .dbx-fill{ background:var(--petrol-deep); }
.pegelbuehne .dbx-knob{ background:#fff; border-color:var(--petrol-deep); }
.pegelbuehne .dbx-lim span{ color:#f3c0b1; }
.pegelbuehne .dbx-lim{
  background:repeating-linear-gradient(to bottom,
    rgba(243,192,177,.9) 0 5px, transparent 5px 10px);
}
.pegelbuehne .dbx-ticks{ color:rgba(255,255,255,.7); }
.pegelbuehne .dbx-bem summary{ color:rgba(255,255,255,.85); }
.pegelbuehne .dbx-bem summary:hover{ color:#fff; }
.pegelbuehne .dbx-bem p{ color:rgba(255,255,255,.82); }
.pegelbuehne .dbx-bem a{ color:#fff; }

/* Foto im Beschreibungsteil ungeschnitten zeigen (Hochformat) */
.tool-foto--voll img{ height:auto; max-height:none; object-fit:contain; }

/* Vierte Heldenfolie (Messsystem): Der Aufbau steht in der unteren
   Bildhaelfte, die Tischplatte darf beim Beschnitt ruhig abreissen. */
.hero-bild--geraet{ object-position:50% 47%; transform-origin:66% 50%; }

/* =====================================================================
   KARUSSELL AUF DER STARTSEITE - RUHIGERE KARTEN
   Nur noch Datum, Rubrik und Titel. Die Rubrik verliert ihre Pille:
   fuenf gerahmte Etiketten nebeneinander sind mehr Unruhe als Nutzen.
   ===================================================================== */
.pk-spur .post-body{ padding:20px 22px 24px; }
.pk-spur .post-meta{ margin-bottom:8px; gap:6px 9px; }
.pk-spur .post-tag{
  background:none; border:0; border-left:1px solid var(--line); border-radius:0;
  padding:1px 0 1px 9px; color:var(--ink-soft); letter-spacing:.08em;
}
.pk-spur .post-body h3{ font-size:17.5px; margin-bottom:0; }

/* Kontaktband der Startseite: nur noch Frage, ein Satz und der Knopf.
   Anschrift und Rufnummer stehen ohnehin gleich darunter im Fuss. */
.contact-compact{ padding:clamp(40px,5vw,54px) 0 !important; }
.contact-compact h2{ margin-bottom:10px !important; }
.ck-zeile{ color:var(--ink-soft); font-size:16px; margin:0; }
.ck-zeile a{ color:var(--petrol); font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--skyblue); }
.ck-zeile a:hover{ border-bottom-color:var(--petrol); }

/* Das Leistungsband steht auf hellgrauem Grund. Auf dem getoenten
   Grund braucht die Spalte beim Zeigen eine hellere Flaeche, sonst
   waere die Hervorhebung dunkler als der Ausgangszustand. */
.lsp-band{ background:var(--bg-tint); }
.lsp-band .lsp a{ border-top-color:var(--line); }
.lsp-band .lsp a:hover{ background:#fff; }

/* =====================================================================
   LEISTUNGSBAND DER STARTSEITE
   Ueber den vier Spalten laeuft ein Punkt die Achse ab und schreibt
   dabei die Kurve des jeweiligen Bereichs auf (leistungsband.js).
   Grafik und Text bilden je Bereich eine senkrechte Einheit: die Fugen
   laufen durch, dazwischen steht keine Querlinie.
   ===================================================================== */
.leistband{
  position:relative; margin-top:clamp(26px,3.4vw,40px);
  height:clamp(150px,17vw,214px);
}
.leistband canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.lsp-band .lsp{ margin-top:0; }
.lsp-band .lsp a{ border-top:0; padding-top:clamp(22px,2.4vw,30px); }
.lsp-band .lsp a::before{ content:none; }

/* Verstecken darf nur, wer auch wieder einblenden kann: die Klasse
   setzt das Skript, sobald es laeuft. */
.lsp-band.hat-laeufer .lsp a{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s ease, transform .65s var(--ease-out), background .3s ease;
}
.lsp-band.hat-laeufer .lsp a.is-da{ opacity:1; transform:none; }

/* Beim Zeigen hebt sich die ganze Einheit hervor - die weisse Flaeche
   setzt sich oben in der Grafik fort. Die Klasse setzt das Skript,
   damit Grafik und Spalte denselben Ausloeser und Takt haben. */
.lsp-band .lsp a.betont{ background:#fff; }
.lsp-band .lsp a h3,
.lsp-band .lsp a p,
.lsp-band .lsp a .lsp-mehr{ transition:color .25s ease; }
.lsp-band .lsp a.betont h3{ color:var(--accent); }
.lsp-band .lsp a.betont p{ color:var(--ink); }
.lsp-band .lsp a.betont .lsp-mehr{ color:var(--accent); }

@media (prefers-reduced-motion:reduce){
  .lsp-band.hat-laeufer .lsp a{ opacity:1; transform:none; transition:none; }
}

/* =====================================================================
   SENKRECHT DURCHLAUFENDE KOPFFOLIE (.scene--rollen)
   Die Folien wechseln nicht mehr an Ort und Stelle, sondern wandern
   durch: die naechste kommt von unten herauf, die vorige schiebt sich
   nach oben aus dem Bild. Zusammen mit den Rastpunkten wirkt es, als
   springe die Seite von Abschnitt zu Abschnitt.
   ===================================================================== */
.scene--rollen{ --weg:clamp(160px, 30vh, 340px); }
.scene--rollen .scene-step{
  transform:translateY(var(--weg));
  transition:opacity .42s ease,
             transform .68s cubic-bezier(.2,.75,.2,1);
}
.scene--rollen .scene-step.is-on{ transform:none; }
.scene--rollen .scene-step.is-vorbei{ opacity:0; transform:translateY(calc(-1 * var(--weg))); }

/* Auch die Bildflaeche zieht ein Stueck mit, sonst bleibt sie als
   einziges stehen und die Bewegung wirkt nur wie ein Textwechsel. */
.scene--rollen .scene-canvas{
  transition:transform .68s cubic-bezier(.2,.75,.2,1);
}

/* Auch die Rubrik oben laeuft ein Stueck mit - sonst steht der einzige
   ruhende Punkt mitten in der Bewegung. */
.scene--rollen .scene-eyebrow{ transition:transform .62s cubic-bezier(.2,.7,.2,1); }

/* Rastpunkte: je Folie eine Marke am oberen Rand des Sichtfensters.
   "proximity" statt "mandatory" - die Seite faengt den Blick ein, wenn
   man in der Naehe stehen bleibt, blockiert aber nicht das Scrollen. */
.rollen-marken{ position:absolute; inset:0; pointer-events:none; }
.rollen-marken i{
  position:absolute; left:0; width:1px; height:1px;
  top:calc(var(--i) * var(--slide-vh));
  scroll-snap-align:start;
}
html:has(.scene--rollen){ scroll-snap-type:y mandatory; }
/* Ohne Rastpunkt hinter der Szene wuerde verbindliches Rasten den
   Leser am Ende der letzten Folie festhalten - der Abspann bekommt
   deshalb einen eigenen. */
html:has(.scene--rollen) footer{ scroll-snap-align:start; }
@media (prefers-reduced-motion: reduce){
  html:has(.scene--rollen){ scroll-snap-type:none; }
  .scene--rollen .scene-step{ transition:none; }
}


/* Vier Klickfelder ueber der Grafik - deckungsgleich mit den Spalten
   darunter. Sie tragen keine eigene Gestalt, nur den Zeiger. */
.leistband-felder{
  position:absolute; inset:0; display:grid;
  grid-template-columns:repeat(4,1fr);
}
.leistband-felder a{ display:block; }
@media (max-width:1000px){ .leistband-felder{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .leistband-felder{ display:none; } }

/* ---------------------------------------------------------------------
   Pfeile der senkrecht durchlaufenden Kopffolie
   Sie stehen oben und unten in der Mitte, weil die Folien senkrecht
   wandern - seitliche Pfeile haetten die falsche Richtung angezeigt.
   --------------------------------------------------------------------- */
.scene-nav--hoch, .scene-nav--runter{
  left:50%; right:auto; top:auto; bottom:auto;
  transform:translateX(-50%);
}
.scene-nav--hoch{ top:calc(var(--nav-h, 72px) + clamp(12px,2vh,26px)); }
.scene-nav--runter{ bottom:clamp(18px,3vh,34px); }
@media (max-width:700px){
  .scene-nav--hoch{ top:calc(var(--nav-h, 72px) + 10px); bottom:auto; }
  .scene-nav--runter{ bottom:14px; top:auto; }
}

/* ---------------------------------------------------------------------
   Weiterfuehrender Verweis der Kopffolie
   Er stand als schmale Textzeile unter dem Absatz und ging dort unter.
   Jetzt ist er ein eigenes Feld mit Rahmen - deutlich als Ziel lesbar,
   ohne die Folie zu dominieren.
   --------------------------------------------------------------------- */
.scene--rollen .scene-step p a{
  /* eigene Zeile, nicht im Textfluss - sonst haengt der Knopf hinter
     dem letzten Satzteil */
  display:flex; width:max-content; max-width:100%;
  align-items:center; gap:12px;
  margin-top:30px; padding:13px 24px;
  font-size:16px; font-weight:600;
  color:#012530; background:var(--skyblue);
  border:0; border-radius:6px;
  transition:background .22s, transform .22s var(--ease-out), gap .22s;
}
.scene--rollen .scene-step p a:hover{
  background:#fff; color:#012530; transform:translateY(-2px); gap:16px;
}
.scene--rollen .scene-step p a:focus-visible{
  outline:2px solid #fff; outline-offset:3px;
}

/* Kleineres Foto im Beschreibungsteil: das Hochformat nahm sonst mehr
   Platz ein als der Text daneben. Die Spalte bleibt, das Bild sitzt
   darin oben und schmaler. */
.tool-row--foto:has(.tool-foto--klein){ grid-template-columns:minmax(0,0.58fr) minmax(0,1fr); }
.tool-foto--klein{ max-width:340px; }
@media (max-width:820px){
  .tool-row--foto:has(.tool-foto--klein){ grid-template-columns:1fr; }
  .tool-foto--klein{ max-width:280px; }
}

/* Querformatige Bildschirmaufnahmen (etwa ein Spektrogramm) duerfen
   nicht beschnitten werden - die Achsen gehoeren dazu. Sie bekommen
   deshalb die breitere Spalte und werden vollstaendig gezeigt. */
.tool-row--foto:has(.tool-foto--breit){ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
.tool-foto--breit img{ height:auto; max-height:none; object-fit:contain; }
@media (max-width:820px){
  .tool-row--foto:has(.tool-foto--breit){ grid-template-columns:1fr; }
}

/* Der Kopf der Leistungsuebersicht bekommt denselben dunklen Schleier
   wie der Kopf der Messungenseite - ohne ihn stand er deutlich heller
   als die Koepfe der Unterseiten. */
.scene--leistung .scene-stage::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(1,37,48,.86) 0%, rgba(1,37,48,.58) 30%,
             rgba(1,45,58,.10) 62%, transparent 84%);
}

/* ---------------------------------------------------------------------
   Sitzmarke Freiburg in Rot
   Auf der Karte sind alle Einsatzorte petrolfarben. Der eigene Sitz
   soll sich davon absetzen - deshalb Punkt, Hof und Puls in einem
   gedeckten Rot, das zum Blau der Karte passt.
   --------------------------------------------------------------------- */
.rm-home .rm-sitz{ fill:#96302a; }
.rm-halo{ fill:rgba(150,48,42,.10); stroke:rgba(150,48,42,.28); }
.rm-puls{ stroke:#96302a; }
.rm-home .rm-home-line{ stroke:rgba(150,48,42,.48); }
.rm-home .rm-home-label{ fill:#8a2b25; }

/* =====================================================================
   ZEITSTRAHL DER UNTERNEHMENSSEITE
   Schiene in der Mitte, Ereignisse abwechselnd links und rechts. Beim
   Scrollen fuellt sich die Schiene bis zur Lesehoehe, die Knoten
   springen an und die Karten laufen von ihrer Seite herein.
   ===================================================================== */
.tlz{
  position:relative; margin-top:clamp(40px,5vw,66px);
  padding:8px 0 4px;
}
/* Die Schiene selbst - blass, darueber die mitwachsende Fuellung. */
.tlz-schiene{
  /* Ebene 1: ueber der Aufnahme, unter den Karten. */
  position:absolute; left:50%; top:0; bottom:0; width:2px; z-index:1;
  transform:translateX(-50%);
  background:rgba(1,74,98,.13); border-radius:2px; overflow:hidden;
}
.tlz-fortschritt{
  position:absolute; inset:0; display:block; transform-origin:top;
  transform:scaleY(var(--fort, 0));
  background:linear-gradient(to bottom, var(--skyblue), var(--accent) 55%, var(--petrol));
  transition:transform .18s linear;
}

.tlz-posten{
  position:relative; width:50%;
  padding:0 clamp(30px,3.6vw,54px) clamp(34px,4.4vw,60px);
  box-sizing:border-box;
}
.tlz-posten--links{ margin-right:50%; text-align:right; }
.tlz-posten--rechts{ margin-left:50%; }

/* Knoten auf der Schiene */
.tlz-knoten{
  position:absolute; top:26px; width:15px; height:15px; border-radius:50%;
  background:#fff; border:2px solid rgba(1,74,98,.30); z-index:3;
  transition:border-color .35s ease, box-shadow .45s ease, transform .35s var(--ease-out);
}
.tlz-posten--links .tlz-knoten{ right:-8px; }
.tlz-posten--rechts .tlz-knoten{ left:-8px; }
.tlz-posten.is-an .tlz-knoten{
  border-color:var(--accent); transform:scale(1.18);
  box-shadow:0 0 0 6px rgba(54,119,169,.14);
}

/* Karte */
.tlz-karte{
  position:relative; z-index:2; display:inline-block; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,28px);
  box-shadow:0 14px 34px -22px rgba(1,74,98,.45);
  transition:box-shadow .35s ease, border-color .35s ease;
}
.tlz-posten.is-an .tlz-karte{
  border-color:rgba(175,209,219,.9);
  box-shadow:0 20px 44px -24px rgba(1,74,98,.42);
}
/* Kleine Spitze, die zur Schiene zeigt */
.tlz-karte::after{
  content:""; position:absolute; top:28px; width:10px; height:10px;
  background:#fff; border:1px solid var(--line);
  transform:rotate(45deg);
}
.tlz-posten--links .tlz-karte::after{
  right:-6px; border-left:0; border-bottom:0;
}
.tlz-posten--rechts .tlz-karte::after{
  left:-6px; border-right:0; border-top:0;
}
.tlz-jahr{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px;
}
.tlz-karte p{ font-size:15px; color:var(--ink-soft); line-height:1.65; margin:0; max-width:44ch; }
.tlz-karte p + p{ margin-top:10px; }
.tlz-karte a{ color:var(--petrol); font-weight:600; }
.tlz-karte .tl-figure{ margin:16px 0 0; }
.tlz-karte .tl-logo{ display:block; margin-top:16px; }

/* Der laufende Punkt bekommt einen ruhigen Puls. */
.tlz-posten--jetzt .tlz-knoten::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--accent); opacity:0;
}
.tlz-posten--jetzt.is-an .tlz-knoten::after{ animation:tlzPuls 2.8s ease-out infinite; }
@keyframes tlzPuls{
  0%{ transform:scale(1); opacity:.7 }
  70%{ transform:scale(2.6); opacity:0 }
  100%{ transform:scale(2.6); opacity:0 }
}

/* Einlaufen von der jeweiligen Seite */
.js .tlz-posten{ opacity:0; transition:opacity .55s ease, transform .7s var(--ease-out); }
.js .tlz-posten--links{ transform:translateX(-38px); }
.js .tlz-posten--rechts{ transform:translateX(38px); }
.js .tlz-posten.is-da{ opacity:1; transform:none; }

/* Schmale Fenster: Schiene an den linken Rand, alles einspaltig. */
@media (max-width:820px){
  .tlz-schiene{ left:9px; }
  .tlz-posten,
  .tlz-posten--links,
  .tlz-posten--rechts{
    width:100%; margin:0; text-align:left;
    padding:0 0 clamp(28px,4vw,42px) 34px;
  }
  .tlz-posten--links .tlz-knoten,
  .tlz-posten--rechts .tlz-knoten{ left:2px; right:auto; }
  .tlz-posten--links .tlz-karte::after{ left:-6px; right:auto; border:1px solid var(--line);
    border-right:0; border-top:0; }
  .js .tlz-posten--links,
  .js .tlz-posten--rechts{ transform:translateY(24px); }
}
@media (prefers-reduced-motion: reduce){
  .js .tlz-posten{ opacity:1; transform:none; transition:none; }
  .tlz-fortschritt{ transition:none; }
  .tlz-posten--jetzt.is-an .tlz-knoten::after{ animation:none; }
}

/* ---------------------------------------------------------------------
   Zwei filmische Momente im Zeitstrahl
   Die beiden Bildschirmaufnahmen stehen nicht mehr klein in der Karte,
   sondern als vollbreites Band dahinter. Damit die Karte lesbar bleibt
   und das Band nicht hart abschneidet, liegt ein Verlauf darueber, der
   zu allen Seiten in den Seitengrund auslaeuft.
   --------------------------------------------------------------------- */
/* Die beiden Filmposten: die Aufnahme liegt als Hintergrund ueber die
   volle Fensterbreite dahinter, die Beschreibung mittig darauf, die
   Schiene laeuft darueber hinweg. Die Hoehe folgt dem Seitenverhaelt-
   nis der Aufnahme - so wird bei keiner Fensterform beschnitten. */
.tlz-posten--film{
  position:relative; width:100%; min-height:0;
  /* Abstand nach unten, sonst klebt der naechste Posten am Bildrand. */
  margin:0 0 clamp(46px,6vw,92px); padding:0;
  text-align:center; display:block;
}
/* Das Band bestimmt die Hoehe des Postens. */
.tlz-film{
  position:relative; left:50%; width:100vw; transform:translateX(-50%);
  /* Das Seitenverhaeltnis der Aufnahme gilt ohne Ausnahme: keine
     Hoehenbegrenzung, die es brechen wuerde, und "contain" als
     Rueckfall - so wird nie beschnitten und nie gestreckt. */
  aspect-ratio:1712 / 1130; z-index:0;
  overflow:hidden; background:#04222d;
  opacity:0; transition:opacity .9s ease;
}
.tlz-posten--film.is-an .tlz-film{ opacity:1; }
.tlz-film .tl-figure{
  margin:0; max-width:none; border:0; border-radius:0; background:#04222d;
  aspect-ratio:auto; position:absolute; inset:0;
}
.tlz-film .tl-figure::after{ content:none; }
.tlz-film figcaption{ display:none; }
.tlz-film video{
  width:100%; height:100%; object-fit:contain; display:block;
  /* Filter, damit die Beschreibung darauf lesbar bleibt. */
  filter:saturate(.8) brightness(.55) contrast(1.05);
}
/* Zusaetzlicher Schleier, der zur Mitte hin dichter wird - dort steht
   die Karte. */
.tlz-film::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(52% 40% at 50% 50%, rgba(1,29,38,.86) 0%,
             rgba(1,29,38,.58) 55%, rgba(1,29,38,.14) 100%);
}

/* Knoten und Beschreibung liegen mittig auf dem Band.
   Genau in der Mitte soll der Beschreibungstext stehen - beim
   Fachzentrum-Video ist das die Luecke zwischen den beiden Zeilen
   "Fachzentrum fuer" und "akustische Messtechnik". Deshalb traegt das
   Raster drei Reihen: zwei gleich hohe aussen, die Karte dazwischen.
   Jahreszahl und Knoten haengen darueber, ohne Platz im Fluss zu
   belegen - sonst rutschte der Text um ihre Hoehe nach unten. */
.tlz-posten--film .tlz-inhalt{
  position:absolute; inset:0; z-index:3;
  display:grid; grid-template-rows:1fr auto 1fr; justify-items:center;
  padding:0 24px; pointer-events:none;
}
.tlz-posten--film .tlz-knoten{
  position:relative; top:auto; left:auto; right:auto; bottom:auto;
  grid-row:1; align-self:end; margin:0 0 64px;
  background:#fff; border-color:rgba(255,255,255,.7);
}
.tlz-posten--film.is-an .tlz-knoten{
  border-color:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.18);
}
.tlz-posten--film .tlz-karte{
  grid-row:2; position:relative;
  pointer-events:auto; display:block; text-align:center; max-width:660px;
  background:none; border:0; box-shadow:none; padding:0;
}
.tlz-posten--film .tlz-karte::after{ content:none; }
.tlz-posten--film .tlz-jahr{
  position:absolute; left:0; right:0; bottom:calc(100% + 14px);
  color:var(--skyblue); font-size:13px; letter-spacing:.2em; margin:0;
}
.tlz-posten--film .tlz-karte p{
  color:#eaf3f6; font-size:clamp(16px,1.7vw,19px); max-width:none;
  margin:0; text-shadow:0 1px 14px rgba(1,25,33,.6);
}
.tlz-posten--film .tlz-karte a{ color:#fff; }

@media (max-width:820px){
  .tlz-posten--film .tlz-karte p{ font-size:15px; }
  .tlz-posten--film .tlz-knoten{ margin-bottom:34px; }
}
@media (prefers-reduced-motion: reduce){
  .tlz-film{ transition:none; }
}
@media (max-width:820px){
  .tlz-posten--film.tlz-posten--links,
  .tlz-posten--film.tlz-posten--rechts{
    padding-left:34px; padding-right:0; text-align:left;
  }
  .tlz-posten--film .tlz-knoten{ left:2px; top:calc(clamp(30px,3.4vw,52px) + 26px); }
}

/* Im Filmband gilt die Kastengestalt der kleinen Figur nicht: kein
   Rahmen, keine feste Breite, kein festes Seitenverhaeltnis - das Band
   fuellt die ganze Flaeche. */
.tlz-film .tl-figure{
  max-width:none; aspect-ratio:auto; border:0; border-radius:0; background:#0b2b36;
}
.tlz-film .tl-figure::after{ content:none; }


/* Zwei Vorschaubilder im Zeitstrahl-Posten der ersten Fachbeitraege.
   Sie zeigen, worum es ging, und fuehren direkt zum Beitrag. */
.tlz-beitraege{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.tlz-beitraege a{
  display:block; text-decoration:none; border:1px solid var(--line);
  border-radius:8px; overflow:hidden; background:#fff;
  transition:border-color .2s, box-shadow .25s, transform .25s var(--ease-out);
}
.tlz-beitraege a:hover{
  border-color:var(--skyblue); transform:translateY(-2px);
  box-shadow:0 12px 26px -18px rgba(1,74,98,.5);
}
.tlz-beitraege img{
  display:block; width:100%; height:172px; object-fit:contain;
  padding:12px; box-sizing:border-box; background:#fff;
}
.tlz-beitraege span{
  display:block; padding:10px 13px 12px; font-size:14.5px; font-weight:600;
  color:var(--petrol); border-top:1px solid var(--line);
}
.tlz-beitraege a:hover span{ color:var(--accent); }
@media (max-width:520px){ .tlz-beitraege{ grid-template-columns:1fr; } }

/* Die Filmposten laufen nicht seitlich ein: ein vollbreites Band, das
   sich um 38 px verschiebt, zieht sichtbar am Fensterrand. Sie blenden
   nur auf. */
.js .tlz-posten--film,
.js .tlz-posten--film.is-da{ transform:none; }