/* ============================================================
   Fachzentrum für akustische Messtechnik – gemeinsames Stylesheet
   Design übernommen von der Landingpage (index.html)
   ============================================================ */

:root {
  /* Aus dem Logo entnommen */
  --petrol: #014a62;
  --petrol-deep: #013a4d;
  --skyblue: #afd1db;
  --skyblue-soft: #dceef3;
  /* Theme-Farbe der Hauptwebsite */
  --accent: #3677a9;
  --accent-deep: #2c6088;
  /* Neutrale */
  --ink: #14222a;
  --ink-soft: #4f6470;
  --bg: #ffffff;
  --bg-tint: #f3f8fa;
  --bg-tint2: #e9f2f5;
  --line: #d8e4e9;
  --white: #ffffff;
  --ease-out: cubic-bezier(.2,.7,.2,1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--bg);
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 30px; }
section[id], footer { scroll-margin-top: 92px; }
::selection { background: var(--petrol); color: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ============ HEADER ============ */
header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .35s ease;
}
header.is-scrolled { box-shadow: 0 10px 30px rgba(1,42,61,.10); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 20px; transition: height .35s var(--ease-out); }
header.is-scrolled .nav { height: 62px; }
.brand-logo { height: 34px; width: auto; display: block; transition: height .35s var(--ease-out); }
header.is-scrolled .brand-logo { height: 29px; }
.nav-right { display: flex; align-items: center; gap: 24px; }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links > a, .nav-item > a {
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  transition: color .18s, background .18s; padding: 9px 11px; border-radius: 7px; display: block; white-space: nowrap;
}
.nav-links > a:hover, .nav-item > a:hover { color: var(--petrol); background: var(--bg-tint); }
.nav-links > a.is-current, .nav-item > a.is-current { color: var(--petrol); font-weight: 600; }
.nav-cta {
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--white); background: var(--petrol);
  padding: 11px 22px; border-radius: 6px; transition: background .2s;
  white-space: nowrap; position: relative; overflow: hidden;
}
.nav-cta:hover { background: var(--accent); }
.nav-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-20deg); pointer-events: none; transition: left .55s ease; }
.nav-cta:hover::after { left: 135%; }

/* Dropdown (Leistungen) */
.nav-item { position: relative; }
.nav-item > a .nav-caret { display: inline-block; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 7px; transition: transform .25s ease; }
.nav-drop {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 44px rgba(1,74,98,.16); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s var(--ease-out), visibility .22s;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item:hover > a .nav-caret, .nav-item:focus-within > a .nav-caret { transform: rotate(225deg) translateY(-2px); }
.nav-drop a {
  display: block; padding: 10px 14px; font-size: 14px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none; border-radius: 8px;
  transition: background .16s, color .16s;
}
.nav-drop a:hover { background: var(--bg-tint); color: var(--petrol); }
.nav-drop a.is-current { color: var(--petrol); font-weight: 600; }
/* Die Fernmessung steht im Aufklappmenue bei den Leistungen, ist aber
   keine eigene Leistung, sondern die Art, wie gemessen wird. Sie bleibt
   deshalb an letzter Stelle, durch eine Linie vom Rest abgesetzt. */
.nav-drop a.nav-drop-extra {
  margin-top: 8px; padding-top: 14px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
}

/* Burger (mobil) */
.nav-burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px; margin: -10px; }
.nav-burger span { display: block; width: 24px; height: 2.4px; border-radius: 2px; background: var(--petrol); margin: 5px 0; transition: transform .3s var(--ease-out), opacity .2s; }
@media (max-width: 1080px) {
  .nav-burger { display: block; }
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(320px, 86vw);
    background: #fff; border-left: 1px solid var(--line); box-shadow: -18px 0 44px rgba(1,42,61,.14);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 88px 22px 30px;
    transform: translateX(100%); transition: transform .35s var(--ease-out); overflow-y: auto;
  }
  body.nav-open .nav-links { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-burger { position: relative; z-index: 80; }
  body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
  body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }
  .nav-links > a, .nav-item > a { font-size: 16px; padding: 12px 10px; }
  .nav-item .nav-drop {
    position: static; min-width: 0; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 6px 16px; background: transparent;
  }
  .nav-item > a .nav-caret { display: none; }
  .nav-drop a { font-size: 14.5px; padding: 9px 10px; }
  .nav-cta { display: none; }
}

/* Scroll-Fortschrittsbalken */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 130; background: linear-gradient(90deg, var(--petrol) 0%, #0f6e88 55%, var(--accent) 100%); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* Zurück nach oben */
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 120; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; background: var(--petrol); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(1,42,61,.30); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .35s ease, transform .35s var(--ease-out), background .2s; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: #0f6e88; }

/* ============ SEITENKOPF (Unterseiten) ============ */
.page-head {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--petrol) 0%, var(--petrol-deep) 55%, #012d3a 100%);
  color: var(--white);
  padding: 74px 0 66px;
}
.page-head-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(175,209,219,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(175,209,219,0.10) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 75% 75% at 72% 32%, #000 25%, transparent 72%);
}
.page-head .wrap { position: relative; z-index: 2; }
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--skyblue); margin-bottom: 18px;
}
.page-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; opacity: .85; }
.page-head h1 { font-size: clamp(30px, 4vw, 44px); max-width: 800px; }
.page-head .page-lead { font-size: clamp(16px, 1.8vw, 19px); color: #d4e6ec; max-width: 680px; margin-top: 18px; }
.page-head-eq { display: flex; align-items: flex-end; gap: 4px; height: 22px; margin-bottom: 22px; opacity: .75; }
.page-head-eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--skyblue); transform: scaleY(.3); transform-origin: bottom; animation: eqBar 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
.page-head-eq i:nth-child(3n) { background: #6fa8bb; }
.page-head-eq i:nth-child(4n) { background: var(--accent); }
@keyframes eqBar { 0%,100% { transform: scaleY(.3); } 25% { transform: scaleY(.6); } 50% { transform: scaleY(.38); } 75% { transform: scaleY(.5); } }

/* Brotkrumen */
.crumbs { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 13px; color: #9dc3cf; margin-bottom: 22px; }
.crumbs a { color: #cfe4ea; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.crumbs .sep { opacity: .55; }

/* ============ SECTION SCAFFOLD ============ */
section.block { padding: 84px 0; }
section.block.tight { padding: 62px 0; }
.sec-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.sec-eyebrow::before { content: ""; flex: 0 0 auto; width: 26px; height: 2px; border-radius: 2px; background: currentColor; opacity: .85; }
.sec-title { font-size: clamp(25px, 3.4vw, 36px); color: var(--petrol); max-width: 680px; margin-bottom: 18px; }
.sec-intro { font-size: 17px; color: var(--ink-soft); max-width: 680px; }
.tinted { background: var(--bg-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Fließtext-Bereiche */
.prose { max-width: 780px; }
.prose p { color: var(--ink-soft); margin-bottom: 18px; }
.prose p strong { color: var(--ink); }
.prose h2 { font-size: clamp(21px, 2.6vw, 27px); color: var(--petrol); margin: 38px 0 14px; }
.prose h3 { font-size: 18.5px; color: var(--petrol); margin: 30px 0 12px; }
.prose ul { list-style: none; margin: 0 0 18px; }
.prose ul li { position: relative; padding-left: 24px; color: var(--ink-soft); margin-bottom: 10px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--skyblue); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--petrol); }

/* Leistungs-Checkliste (Übersicht) */
.svc-over { background: var(--bg-tint); border: 1px solid var(--line); border-radius: 14px; padding: 28px 30px; margin: 8px 0 34px; }
.svc-over-label { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-bottom: 14px; }
.svc-over ul { list-style: none; }
.svc-over li { position: relative; padding-left: 26px; color: var(--ink); font-weight: 500; margin-bottom: 10px; font-size: 15.5px; }
.svc-over li:last-child { margin-bottom: 0; }
.svc-over li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--accent); font-size: 14px; }

/* ============ LEISTUNGS-KARTEN ============ */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 48px; }
.svc {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 30px; transition: transform .18s, box-shadow .2s, border-color .2s;
  text-decoration: none;
}
.svc:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(1,74,98,0.10); border-color: var(--skyblue); }
.svc-icon { width: 46px; height: 46px; border-radius: 10px; background: var(--bg-tint2); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--petrol); }
.svc-icon svg { width: 26px; height: 26px; }
.svc h3 { font-size: 19px; color: var(--petrol); margin-bottom: 14px; }
.svc ul { list-style: none; }
.svc li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--ink-soft); margin-bottom: 9px; line-height: 1.5; }
.svc li:last-child { margin-bottom: 0; }
.svc li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--skyblue); }
.svc-more { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; color: var(--accent); }
.svc:hover .svc-more { color: var(--petrol); }

/* ============ TEAM ============ */
/* Team als Liste: Bild links (in seiner Groesse), Text rechts daneben */
.tm-grid { display: flex; flex-direction: column; gap: 28px; margin-top: 48px; max-width: 860px; }
.tm-card { display: flex; align-items: flex-start; gap: 32px; text-align: left; }
.tm-photo { flex: 0 0 auto; width: 186px; aspect-ratio: 4/5; border-radius: 14px; overflow: hidden; background: var(--bg-tint2); box-shadow: 0 14px 32px rgba(1,74,98,.12); margin: 0; transition: transform .3s var(--ease-out), box-shadow .3s ease; will-change: transform; }
.tm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.tm-card:hover .tm-photo { transform: scale(1.03); box-shadow: 0 22px 44px rgba(1,74,98,.2); }
.tm-text { flex: 1; padding-top: 8px; }
.tm-name { font-size: 20px; color: var(--petrol); margin-bottom: 4px; }
.tm-role { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 12px; }
.tm-bio { font-size: 15px; color: var(--ink-soft); line-height: 1.65; max-width: 620px; margin: 0; }
@media (max-width: 560px) { .tm-card { gap: 20px; } .tm-photo { width: 128px; } }

/* ============ AKTUELLES / BEITRAGSLISTE ============ */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.post-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  text-decoration: none;
  transition: transform .28s var(--ease-out), box-shadow .28s ease, border-color .28s ease;
}
@media (hover:hover) and (pointer:fine) {
  .post-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 26px 50px rgba(1,74,98,.18); border-color: var(--skyblue); z-index: 2; }
  .post-card:hover .post-media img { transform: scale(1.07); }
}
.post-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--petrol), var(--accent) 55%, var(--skyblue)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); pointer-events: none; }
.post-card:hover::after { transform: scaleX(1); }
.post-media { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-tint2); display: flex; align-items: center; justify-content: center; }
.post-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.post-media.contain { background: #fff; border-bottom: 1px solid var(--line); }
.post-media.contain img { object-fit: contain; padding: 18px; }
.post-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; }
.post-date { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-size: 11.5px; }
.post-tag { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--petrol); background: var(--bg-tint2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.post-body h3 { font-size: 19px; color: var(--petrol); line-height: 1.3; margin-bottom: 10px; }
.post-body p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.post-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.post-more { font-size: 14px; font-weight: 600; color: var(--accent); }
.post-card:hover .post-more { color: var(--petrol); }
.post-author { font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 1040px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .post-grid { grid-template-columns: 1fr; } }

/* PDF-Chip */
.pdf-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--petrol); text-decoration: none;
  background: var(--bg-tint2); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 15px; transition: background .2s, border-color .2s, color .2s;
}
.pdf-chip:hover { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.pdf-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ============ FACHBEITRAG (wissenschaftlicher Artikel) ============ */
.article-head { background: linear-gradient(160deg, var(--petrol) 0%, var(--petrol-deep) 55%, #012d3a 100%); color: #fff; padding: 66px 0 58px; position: relative; overflow: hidden; }
.article-head .wrap { position: relative; z-index: 2; }
.article-kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--skyblue); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.article-kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; opacity: .85; }
.article-head h1 { font-size: clamp(27px, 3.6vw, 40px); max-width: 860px; margin-bottom: 20px; }
.article-byline { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 14px; color: #cfe4ea; }
.article-byline .b-item { display: inline-flex; align-items: center; gap: 8px; }
.article-byline svg { width: 15px; height: 15px; opacity: .8; }
.article-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.article-actions .pdf-chip { background: rgba(255,255,255,.1); border-color: rgba(175,209,219,.4); color: #fff; }
.article-actions .pdf-chip:hover { background: #fff; color: var(--petrol); border-color: #fff; }

article.fach { padding: 70px 0 84px; }
.article-cols { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 64px; align-items: start; }
@media (max-width: 980px) { .article-cols { grid-template-columns: 1fr; gap: 40px; } }
.article-body { max-width: 760px; font-size: 16.5px; }
.article-body > p:first-of-type { font-size: 18px; color: var(--ink); }
.article-body p { color: #33454f; margin-bottom: 20px; }
.article-body h2 { font-size: clamp(21px, 2.6vw, 26px); color: var(--petrol); margin: 42px 0 16px; }
.article-body h3 { font-size: 19px; color: var(--petrol); margin: 34px 0 12px; }
.article-body h4 { font-size: 16.5px; color: var(--petrol); margin: 26px 0 10px; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.article-body a:hover { color: var(--petrol); }
.article-body ul { list-style: none; margin: 0 0 20px; }
.article-body ul li { position: relative; padding-left: 24px; color: #33454f; margin-bottom: 10px; }
.article-body ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--skyblue); }
.article-body blockquote { border-left: 3px solid var(--skyblue); background: var(--bg-tint); border-radius: 0 10px 10px 0; padding: 18px 22px; margin: 0 0 20px; color: var(--ink-soft); font-style: italic; }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.article-body var, .article-body .math { font-style: italic; font-family: Georgia, 'Times New Roman', serif; }

.article-lede { font-size: 14px; color: var(--ink-soft); border-left: 3px solid var(--skyblue); padding: 4px 0 4px 16px; margin-bottom: 34px; font-style: italic; }

/* Abbildungen */
.article-body figure { margin: 30px 0; }
.article-body figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 10px; }
.article-body figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 10px; text-align: center; line-height: 1.5; }
.article-body figcaption strong { color: var(--ink); }
.fig-row { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: 30px; align-items: center; margin: 30px 0; }
.fig-row figure { margin: 0; }
.fig-row p { margin-bottom: 0 !important; }
.fig-row + .fig-row { margin-top: 36px; }
@media (max-width: 760px) { .fig-row { grid-template-columns: 1fr; gap: 18px; } }

/* Tabellen */
.article-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.article-body table td, .article-body table th { border: 1px solid var(--line); padding: 9px 13px; text-align: center; color: var(--ink); }
.article-body table tr:first-child td { background: var(--bg-tint); font-weight: 600; color: var(--petrol); }
.table-scroll { overflow-x: auto; }

/* Ergebnis-Zeilen (Experiment) */
.result-list { border-top: 1px solid var(--line); margin: 14px 0 24px; }
.result-row { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.result-row .r-db { font-weight: 700; color: var(--petrol); font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-row .r-txt { color: var(--ink-soft); font-size: 15px; }

/* Seitenleiste im Artikel */
.article-aside { position: sticky; top: 106px; display: flex; flex-direction: column; gap: 26px; }
.aside-box { background: var(--bg-tint); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.aside-box h4 { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.aside-box p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 10px; }
.aside-box p:last-child { margin-bottom: 0; }
.aside-box a { color: var(--accent); text-decoration: none; }
.aside-box a:hover { color: var(--petrol); text-decoration: underline; text-underline-offset: 2px; }
.aside-links { list-style: none; }
.aside-links li { margin-bottom: 10px; font-size: 14px; line-height: 1.5; }
.aside-links li:last-child { margin-bottom: 0; }
.aside-author { display: flex; gap: 14px; align-items: center; }
.aside-author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: 0 0 auto; box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(1,74,98,.12); }
.aside-author .a-name { font-size: 13.5px; font-weight: 600; color: var(--petrol); line-height: 1.3; text-wrap: balance; }
.aside-author .a-role { font-size: 12px; color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }

/* Autor-Box am Artikelende */
.author-box { display: flex; gap: 26px; align-items: center; background: var(--bg-tint); border: 1px solid var(--line); border-radius: 14px; padding: 26px 30px; margin-top: 46px; }
.author-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 15%; flex: 0 0 auto; box-shadow: 0 0 0 1px var(--line), 0 8px 20px rgba(1,74,98,.14); }
.author-box .ab-label { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.author-box .ab-name { font-size: 17px; font-weight: 700; color: var(--petrol); margin-bottom: 6px; }
.author-box p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
@media (max-width: 640px) { .author-box { flex-direction: column; text-align: center; } }

/* Weiterlesen / Pager */
.article-pager { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.article-pager a { font-size: 14.5px; font-weight: 600; color: var(--accent); text-decoration: none; max-width: 46%; }
.article-pager a:hover { color: var(--petrol); }
.article-pager .pg-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }

/* ============ FAQ ============ */
.faq-list { max-width: 820px; margin-top: 42px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq-item:hover { border-color: var(--skyblue); }
.faq-item[open] { box-shadow: 0 14px 32px rgba(1,74,98,.08); border-color: var(--skyblue); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; cursor: pointer; list-style: none; font-weight: 600; font-size: 16px; color: var(--petrol); transition: color .2s; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q:hover { color: var(--accent); }
.faq-toggle { flex: 0 0 auto; width: 11px; height: 11px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform .3s ease; margin-top: -3px; }
.faq-item[open] .faq-toggle { transform: rotate(-135deg); margin-top: 3px; }
.faq-a { padding: 0 24px 24px; overflow: hidden; box-sizing: border-box; }
.js .faq-a { transition: height .36s cubic-bezier(.4,0,.2,1); }
.faq-a p { font-size: 15px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 12px; }
.faq-a p:last-child, .faq-a ul:last-child { margin-bottom: 0; }
.faq-a ul { list-style: none; margin: 0 0 12px; }
.faq-a li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.55; }
.faq-a li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--skyblue); }

/* ============ LINKS ============ */
.link-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 42px; }
.link-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px;
  text-decoration: none; transition: transform .18s, box-shadow .2s, border-color .2s;
}
.link-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(1,74,98,.10); border-color: var(--skyblue); }
.link-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; background: var(--bg-tint2); display: flex; align-items: center; justify-content: center; color: var(--petrol); }
.link-ico svg { width: 20px; height: 20px; }
.link-card h3 { font-size: 15.5px; color: var(--petrol); line-height: 1.35; margin-bottom: 5px; }
.link-card .link-src { font-size: 12.5px; color: var(--ink-soft); }
.link-card:hover h3 { color: var(--accent); }
@media (max-width: 760px) { .link-list { grid-template-columns: 1fr; } }

/* ============ KONTAKT ============ */
.contact { background: linear-gradient(160deg, var(--petrol) 0%, var(--petrol-deep) 100%); color: var(--white); }
.contact-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 58px; align-items: start; }
.contact h2, .contact h1 { font-size: clamp(27px, 3.7vw, 39px); color: var(--white); margin-bottom: 18px; letter-spacing: -0.01em; }
.contact .sec-intro { color: #d4e6ec; }
.contact .sec-eyebrow { color: var(--skyblue); }
.contact-info { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.ci { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; color: #e3eff2; }
.ci svg { flex-shrink: 0; margin-top: 2px; }
.ci a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(175,209,219,0.4); overflow-wrap: anywhere; }
.ci a:hover { border-color: var(--skyblue); }
.contact .team { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(175,209,219,0.22); }
.contact .team-label { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--skyblue); margin-bottom: 20px; }
.contact .team-list { display: flex; gap: 34px; flex-wrap: wrap; }
.contact .team-member { display: flex; align-items: center; gap: 14px; }
.contact .team-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(175,209,219,0.45), 0 6px 16px rgba(0,0,0,0.25); }
.contact .team-name { font-size: 15px; font-weight: 600; color: var(--white); line-height: 1.3; }
.contact .team-role { font-size: 13px; color: #aecdd8; line-height: 1.3; }
.contact form { background: var(--white); border-radius: 14px; padding: 34px; color: var(--ink); }
.field { margin-bottom: 19px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--ink); }
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: 15px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg-tint);
  transition: border-color .2s, box-shadow .2s; color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(54,119,169,0.16); }
.field textarea { resize: vertical; min-height: 120px; }
.submit {
  width: 100%; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--white); background: var(--petrol); border: none; padding: 16px; border-radius: 7px;
  cursor: pointer; transition: background .2s; text-transform: uppercase;
  position: relative; overflow: hidden;
}
.submit:hover { background: var(--accent); }
.consent { font-size: 12px; color: var(--ink-soft); margin-top: 15px; line-height: 1.5; }
.consent a { color: var(--accent); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 38px; } }

/* ============ CTA-BAND (Unterseiten) ============ */
.cta-band { background: linear-gradient(160deg, var(--petrol) 0%, var(--petrol-deep) 100%); color: #fff; padding: 58px 0; }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.cta-band h2 { font-size: clamp(21px, 2.6vw, 27px); color: #fff; max-width: 560px; }
.cta-band p { color: #d4e6ec; font-size: 15px; margin-top: 8px; max-width: 560px; }
.btn-primary {
  font-size: 15px; font-weight: 600; text-decoration: none;
  color: #fff; background: var(--accent);
  padding: 15px 30px; border-radius: 7px; display: inline-block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2); transition: transform .15s, box-shadow .2s, background .2s;
  position: relative; overflow: hidden;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.28); background: #4285bb; }
.btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-20deg); pointer-events: none; transition: left .55s ease; }
.btn-primary:hover::after { left: 135%; }
.btn-light { background: #fff; color: var(--petrol); }
.btn-light:hover { background: var(--skyblue-soft); }

/* ============ FOOTER ============ */
footer { background: #04222d; color: #9fbcc6; padding: 56px 0 36px; }
.foot-top { display: grid; grid-template-columns: 1.35fr 1fr 1fr .85fr 1.15fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(175,209,219,0.16); }
.foot-logo { height: 30px; width: auto; margin-bottom: 18px; opacity: 0.95; }
.foot-about { font-size: 14px; color: #8fb0bb; max-width: 320px; }
.foot-col h4 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--skyblue); margin-bottom: 16px; font-weight: 600; }
.foot-col p, .foot-col a { font-size: 14px; color: #9fbcc6; text-decoration: none; display: block; margin-bottom: 9px; line-height: 1.5; }
.foot-col a:hover { color: var(--white); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 26px; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { color: #9fbcc6; text-decoration: none; font-size: 13.5px; }
.foot-links a:hover { color: var(--white); }
.foot-copy { font-size: 13px; color: #6f939e; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; } }

/* ============ REVEALS ============ */
.js [data-rvl] { opacity: 0; transform: translateY(26px); transition: opacity .75s ease var(--rd,0s), transform .75s var(--ease-out) var(--rd,0s); }
.js [data-rvl="l"] { transform: translateX(-34px); }
.js [data-rvl="r"] { transform: translateX(34px); }
.js [data-rvl="s"] { transform: translateY(16px) scale(.95); }
.js [data-rvl].is-in { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; }
  section.block { padding: 62px 0; }
  .page-head { padding: 58px 0 52px; }
}
@media (max-width: 480px) {
  .nav-cta { padding: 10px 16px; font-size: 13px; }
  .brand-logo { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rvl] { opacity: 1; transform: none; transition: none; }
  .page-head-eq i { animation: none; transform: scaleY(.42); }
  .page-head-eq i:nth-child(odd) { transform: scaleY(.68); }
  .nav-cta::after, .btn-primary::after, .submit::after { display: none; }
  .nav, .brand-logo { transition: none; }
}

/* ============================================================
   ANIMATIONEN & AUFLOCKERNDE BAUSTEINE (Leistungsseiten)
   Signatur-Animationen sitzen IM Seitenkopf (Basis-Streifen),
   nicht als separates Band darunter.
   ============================================================ */

/* ---- Leistungs-Seitenkopf mit integrierter Signatur ---- */
.lhead { padding: 64px 0 208px; }
.lhead .wrap { z-index: 3; }
.lhead-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lhead-strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 172px; z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 78%, transparent 100%);
          mask-image: linear-gradient(to top, #000 78%, transparent 100%);
}
.lhead-cap {
  position: absolute; left: 0; right: 0; bottom: 13px; z-index: 2; pointer-events: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px 26px; flex-wrap: wrap;
  max-width: 1120px; margin: 0 auto; padding: 0 30px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(175,209,219,.62);
}
.lhead-cap b { color: var(--skyblue); font-weight: 600; }
.lhead-cap--top { bottom: auto; top: calc(100% - 160px); }
.lhead-strip--nomask { -webkit-mask-image: none; mask-image: none; overflow: visible; }
/* Techn. Schallschutz: Hero nach unten erweitert, damit zwischen Text und
   der Animation am unteren Rand etwas Luft entsteht. */
.lhead--schutz { padding-bottom: 300px; }
@media (max-width: 700px) {
  .lhead { padding-bottom: 156px; }
  .lhead-strip { height: 122px; }
  .lhead-cap--top { top: calc(100% - 114px); }
  .lhead--schutz { padding-bottom: 210px; }
}

/* ============================================================
   A - PEGELSCHRIEB (Messungen-Hero) - STELLSCHRAUBEN
   Farben, Groessen und Position hier anpassen. Die Form/Bewegung der
   Kurve (Grundlinie, Spitzenhoehe, Tempo ...) steckt in site.js im
   CONFIG-Block "PEGELSCHRIEB - STELLSCHRAUBEN".
   ============================================================ */
.lhead--pegel {
  --pgl-hero-pad: 200px;             /* Hero-Hoehe: Abstand nach unten (groesser = hoeher) */
  --pgl-line-color: var(--skyblue);  /* Farbe des Pegellaufs */
  --pgl-line-width: 2;               /* Dicke des Pegellaufs */
  --pgl-glow: rgba(175,209,219,.4);  /* Schein um Kurve & Schreibkopf */
  --pgl-dash-color: #e23b34;         /* Farbe der gestrichelten Linie */
  --pgl-dash-pos: 71%;               /* Hoehe der gestrichelten Linie (% von oben) */
  padding-bottom: var(--pgl-hero-pad);
}
/* ====================== Ende Stellschrauben ================= */
/* Der Schrieb belegt den ganzen Hero: ruhige Grundlinie, kraeftige
   Ausschlaege rechts (dort, wo der Text aufhoert). */
.pgl { top: 0; height: auto;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 84%, transparent 100%);
}
.pgl svg { width: 100%; height: 100%; display: block; }
.pgl-base {
  position: absolute; left: 0; right: 0; top: var(--pgl-dash-pos);
  border-top: 1.3px dashed var(--pgl-dash-color); opacity: .6;
}
.pgl .pgl-line { fill: none; stroke: var(--pgl-line-color); stroke-width: var(--pgl-line-width);
  stroke-linejoin: round; filter: drop-shadow(0 0 7px var(--pgl-glow)); }
.pgl-pen {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px 4px var(--pgl-glow);
}
@media (max-width: 700px) { .lhead--pegel { --pgl-hero-pad: 130px; } }

/* ---- B - Laermkarte (Immissionsprognosen) ---- */
.lhead--nogrid .page-head-grid { display: none; }
.lkarte-bg { animation: karteDrift 26s ease-in-out infinite alternate; }
.lkarte-bg svg { width: 100%; height: 100%; display: block; }
.lkarte-bg path { fill: none; stroke: rgba(153,205,217,.20); stroke-width: 1.4; }
.lkarte-bg path.iso-fill { fill: rgba(99,183,202,.05); }
.lkarte-bg text { fill: rgba(175,209,219,.55); font-size: 19px; letter-spacing: .08em; font-weight: 500; }
@keyframes karteDrift { from { transform: translate3d(0,0,0) scale(1.02); } to { transform: translate3d(-24px,10px,0) scale(1.06); } }
/* Atmende Isophonen: gestaffeltes Pulsieren von innen nach aussen */
.lkarte-bg path.iso-b {
  transform-box: fill-box; transform-origin: center;
  animation: isoBreathe 6s ease-in-out infinite; animation-delay: var(--ib, 0s);
}
@keyframes isoBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: .72; }
}
/* Volldeckende Karte (Option B): kraeftigere Linien, staerkerer Drift */
.lkarte-bg--full path { stroke: rgba(153,205,217,.26); }
.lkarte-bg--full { animation: karteDriftFull 22s ease-in-out infinite alternate; }
@keyframes karteDriftFull { from { transform: translate3d(0,0,0) scale(1.03); } to { transform: translate3d(-38px,16px,0) scale(1.09); } }
.lkarte-bg .iso-dim { opacity: .5; }
.lkarte-glow { fill: rgba(175,209,219,.28); }
.lkarte-src { fill: var(--skyblue); }
.lkarte-ring {
  fill: none; stroke: rgba(175,209,219,.55); stroke-width: 1.6;
  transform-box: fill-box; transform-origin: center;
  animation: lkRing 7s linear infinite; animation-delay: var(--rd);
}
@keyframes lkRing {
  0% { transform: scale(.15); opacity: 0; }
  8% { opacity: .85; }
  100% { transform: scale(9); opacity: 0; }
}

/* ---- C - Terzband-Spektrum (Analysen) ---- */
.terz {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  max-width: 1120px; margin: 0 auto; padding: 0 30px 26px;
}
.terz-bars { display: flex; align-items: stretch; gap: 4px; height: calc(100% - 44px); }
.terz-cell { flex: 1; position: relative; display: flex; align-items: flex-end; min-width: 2px; }
.terz-cell .bar {
  width: 100%; border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, rgba(175,209,219,.14), rgba(175,209,219,.8));
  height: calc(var(--h) * 1%); transform-origin: bottom;
  animation: terzPulse 3.2s ease-in-out infinite; animation-delay: var(--d);
}
.terz-cell.is-peak .bar { background: linear-gradient(to top, rgba(232,146,127,.22), #e8927f); }
.terz-cell .hold {
  position: absolute; left: 12%; right: 12%; height: 2px; border-radius: 1px;
  bottom: calc(var(--h) * 1% + 4px); background: rgba(255,255,255,.28);
}
.terz-cell.is-peak .hold { background: rgba(232,146,127,.75); }
.terz-flag {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--h) * 1% + 13px);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #e8927f; white-space: nowrap;
}
@keyframes terzPulse { 0%,100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
.terz-labels {
  display: flex; justify-content: space-between; list-style: none; margin-top: 11px;
  font-size: 10.5px; letter-spacing: .06em; color: rgba(223,238,243,.5);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) { .terz-labels li:nth-child(even) { display: none; } }

/* ---- D - Schallschutz: Quelle, Barriere, Immissionsort ---- */
.schutz { position: absolute; inset: 0; max-width: 1120px; margin: 0 auto; padding: 0 30px; }
.sz-wave {
  position: absolute; bottom: 22px; width: 46px; height: 114px; border-radius: 50%;
  border-right: 2.2px solid rgba(175,209,219,.75);
  animation: szL 3.4s linear infinite; animation-delay: var(--d); opacity: 0;
}
@keyframes szL { 0% { left: 8%; opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { left: 46%; opacity: 0; } }
.sz-wave--out {
  height: 60px; bottom: 50px; border-right-width: 1.4px;
  border-right-color: rgba(175,209,219,.45); animation-name: szR;
}
@keyframes szR { 0% { left: 53%; opacity: 0; } 12% { opacity: .5; } 100% { left: 80%; opacity: 0; } }
.sz-glyph { position: absolute; bottom: 24px; color: rgba(175,209,219,.9); }
.sz-glyph svg { display: block; }
.sz-glyph--src { left: 30px; }
.sz-glyph--rec { right: 30px; }
.sz-wall {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: 15px; height: 130px; border: 1.6px solid var(--skyblue); border-radius: 4px;
  background: rgba(175,209,219,.14)
    repeating-linear-gradient(45deg, rgba(175,209,219,.45) 0 2px, transparent 2px 9px);
}
.sz-badge {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 156px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #e8927f;
  background: rgba(2,44,58,.85); border: 1px solid rgba(232,146,127,.5);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.sz-tag { position: absolute; bottom: 148px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(223,238,243,.55); }
.sz-tag b { display: block; font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--skyblue); margin-top: 2px; text-transform: none; }
.sz-tag--src { left: 30px; }
.sz-tag--rec { right: 30px; text-align: right; }
@media (max-width: 700px) {
  .sz-wave { height: 76px; width: 34px; }
  .sz-wave--out { height: 42px; bottom: 42px; }
  .sz-wall { height: 88px; }
  .sz-badge { bottom: 108px; }
  .sz-tag { display: none; }
  .sz-glyph svg { width: 36px; height: 36px; }
}

/* ---- Leistungs-Icons: ambiente Miniatur-Signaturen ---- */
.svc-icon svg { overflow: visible; }
.ico-rip, .ico-iso {
  transform-box: fill-box; transform-origin: center; opacity: .45;
  animation: icoRip 2.8s ease-out infinite; animation-delay: var(--rd, 0s);
}
@keyframes icoRip {
  0% { opacity: 0; transform: scale(.86); }
  30% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.14); }
}
.svc:hover .ico-rip, .svc:hover .ico-iso { animation-duration: 1.5s; }
.ico-bar {
  transform-box: fill-box; transform-origin: bottom;
  animation: icoBar 3s ease-in-out infinite; animation-delay: var(--bd, 0s);
}
@keyframes icoBar { 0%,100% { transform: scaleY(.62); } 50% { transform: scaleY(1); } }
.svc:hover .ico-bar { animation-duration: 1.4s; }
.ico-szw {
  transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: icoTravel 2.6s linear infinite; animation-delay: var(--rd, 0s);
}
@keyframes icoTravel {
  0% { opacity: 0; transform: translateX(-3px); }
  25% { opacity: .9; }
  85% { opacity: .8; }
  100% { opacity: 0; transform: translateX(9px); }
}
.ico-szo { animation: icoFade 2.6s linear infinite; opacity: .25; }
@keyframes icoFade { 0%,100% { opacity: .15; } 50% { opacity: .55; } }

/* ---- Bild-Text-Reihen, abwechselnd (Messungen) ---- */
.feature-rows { display: flex; flex-direction: column; gap: 44px; margin-top: 44px; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature-media {
  position: relative; margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 16px 38px rgba(1,74,98,.14);
  aspect-ratio: 16 / 10; background: var(--bg-tint2);
}
.feature-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .feature-media:hover img { transform: scale(1.05); }
}
/* Text-Overlay unten links auf dem Bild (Titel + Kurztext) */
.feature-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 48px 22px 18px;
  background: linear-gradient(to top, rgba(1,42,61,.92) 0%, rgba(1,42,61,.5) 52%, transparent 100%);
  color: #fff;
}
.feature-cap .fc-title { font-size: 18px; font-weight: 700; line-height: 1.25; }
.feature-cap .fc-sub { font-size: 13.5px; color: #d4e6ec; margin-top: 4px; line-height: 1.4; }
/* Platzhalter, solange ein Bild noch fehlt */
.feature-media.placeholder { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0a3646, #06232e); }
.feature-ph { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(175,209,219,.6); display: inline-flex; align-items: center; gap: 9px; }
.feature-ph::before { content: ""; width: 26px; height: 20px; border: 1.5px solid currentColor; border-radius: 3px;
  background:
    radial-gradient(circle at 8px 7px, currentColor 2px, transparent 2.5px),
    linear-gradient(135deg, transparent 55%, currentColor 55% 68%, transparent 68%); }
.feature-text h3 { font-size: clamp(20px, 2.4vw, 25px); color: var(--petrol); margin-bottom: 14px; line-height: 1.2; }
.feature-text p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.65; }
/* Umgekehrte Reihe: Bild rechts (per order), Text links */
.feature-row.rev .feature-media { order: 2; }
@media (max-width: 820px) {
  .feature-row { grid-template-columns: 1fr; gap: 22px; }
  .feature-row.rev .feature-media { order: 0; }
}

/* ---- Interaktive 3D-Laermkarte (iframe-Einbettung) ---- */
.viz3d-frame {
  position: relative; margin-top: 40px; aspect-ratio: 4 / 3;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(1,74,98,.14); background: var(--bg-tint2);
}
@media (min-width: 760px) { .viz3d-frame { aspect-ratio: 16 / 9; } }
.viz3d-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viz3d-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-soft); }
.viz3d-hints { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.viz3d-hints span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft);
}
.viz3d-hints svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }

/* ---- Auf einen Blick: Faktenkarten statt Aufzaehlung ---- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 40px; }
.fact {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px 24px 26px;
  transition: transform .18s, box-shadow .2s, border-color .2s;
}
.fact:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(1,74,98,.10); border-color: var(--skyblue); }
.fact-ico { width: 38px; height: 38px; border-radius: 9px; background: var(--bg-tint2); color: var(--petrol); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.fact-ico svg { width: 20px; height: 20px; }
.fact h3 { font-size: 16px; color: var(--petrol); margin-bottom: 8px; line-height: 1.35; }
.fact p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ---- Ablauf: nummerierte Schritte ---- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 20px; margin-top: 40px; counter-reset: step; }
.step { position: relative; padding-top: 20px; border-top: 2px solid var(--line); transition: border-color .25s; }
.step:hover { border-color: var(--skyblue); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  color: var(--accent); margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 16.5px; color: var(--petrol); margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ---- Normen-Chips ---- */
.norm-chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 28px; }
.norm-chips .nc-label { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.norm-chip {
  font-size: 13px; font-weight: 600; color: var(--petrol);
  background: var(--bg-tint2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px;
  transition: background .2s, border-color .2s, color .2s;
}
.norm-chip:hover { background: var(--petrol); border-color: var(--petrol); color: #fff; }

/* ---- Zweispalter Text + Merkkasten ---- */
.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 54px; align-items: start; margin-top: 8px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.note-box { background: var(--bg-tint); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; padding: 24px 26px; }
.note-box h3 { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.note-box p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 10px; }
.note-box p:last-child { margin-bottom: 0; }
.note-box ul { list-style: none; }
.note-box li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--ink-soft); margin-bottom: 9px; line-height: 1.55; }
.note-box li:last-child { margin-bottom: 0; }
.note-box li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--skyblue); }

@media (prefers-reduced-motion: reduce) {
  .lkarte-bg, .lkarte-ring, .terz-cell .bar, .sz-wave { animation: none !important; }
  .terz-cell .bar { transform: scaleY(.8); }
  .sz-wave { opacity: .5; left: 30% !important; }
  .sz-wave--out { opacity: .3; left: 62% !important; }
  .ico-rip, .ico-iso, .ico-bar, .ico-szw, .ico-szo { animation: none !important; }
  .ico-rip, .ico-iso { opacity: .45; transform: none; }
  .ico-bar { transform: scaleY(.8); }
  .ico-szw { opacity: .5; }
}

/* ===== STARTSEITE & UEBERNOMMENE BAUSTEINE (aus der alten Startseite) ===== */

/* ---- Hero der Startseite (reduziert) ---- */
.home-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--petrol) 0%, var(--petrol-deep) 55%, #012d3a 100%);
  color: var(--white); padding: 96px 0 104px;
}
.home-hero-bg {
  position: absolute; inset: 0; z-index: 0; opacity: .16;
  background: url('assets/img/hero-grundriss.webp') center center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 68% 46%, #000 18%, transparent 76%);
          mask-image: radial-gradient(ellipse 78% 82% at 68% 46%, #000 18%, transparent 76%);
}
.home-hero .wrap { position: relative; z-index: 2; }
.home-hero h1 { font-size: clamp(31px, 4.4vw, 50px); max-width: 15em; margin-bottom: 20px; }
.home-hero .home-lead {
  font-size: clamp(17px, 2vw, 21px); color: #d4e6ec; max-width: 40em; font-weight: 400;
}
/* Equalizer im dunklen Hero: helle Balken, dezent zurueckgenommen */
.home-hero .hero-eq { opacity: .34; margin-bottom: 26px; }
.home-hero .hero-eq i { background: var(--skyblue); }
.home-hero .hero-eq i:nth-child(3n) { background: #7fb3c4; }
.home-hero .hero-eq i:nth-child(4n) { background: #9ec8d6; }
.home-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.home-actions .btn-primary { background: var(--white); color: var(--petrol); }
.home-actions .btn-primary:hover { background: var(--skyblue-soft); }
.btn-ghost {
  display: inline-block; font-size: 15px; font-weight: 600; text-decoration: none;
  color: var(--white); padding: 15px 26px; border-radius: 7px;
  border: 1px solid rgba(175,209,219,.45); transition: background .2s, border-color .2s;
}
.btn-ghost:hover { background: rgba(175,209,219,.14); border-color: rgba(175,209,219,.75); }
@media (max-width: 700px) { .home-hero { padding: 66px 0 74px; } }

/* Startseite: zweizeilige Beschreibung in den Leistungskarten */
.svc-lead { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }

/* Startseite: Kurzprofil, Teaser, kompakter Kontakt */
.home-split { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 56px; align-items: center; }
@media (max-width: 860px) { .home-split { grid-template-columns: 1fr; gap: 32px; } }
.home-media { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 16px 38px rgba(1,74,98,.14); }
.home-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.more-link { display: inline-block; margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.more-link:hover { color: var(--petrol); }
.contact-compact { background: linear-gradient(160deg, var(--petrol) 0%, var(--petrol-deep) 100%); color: #fff; padding: 62px 0; }
.contact-compact .wrap { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: center; }
@media (max-width: 820px) { .contact-compact .wrap { grid-template-columns: 1fr; gap: 26px; } }
.contact-compact h2 { font-size: clamp(23px, 2.8vw, 30px); color: #fff; margin-bottom: 20px; }
.contact-compact .ci { color: #e3eff2; }
.contact-compact .contact-info { margin-top: 0; }

/* ---- Mitgliedschaften, dB-Regler, Referenzen, Messsystem, Nachhaltigkeit ---- */
.about-grid {display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 60px; align-items: stretch;}
.about-copy p {color: var(--ink-soft); margin-bottom: 18px;}
.about-copy p:last-child {margin-bottom: 0;}
.norms {margin-top: 30px;}
.norms-label {font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin-bottom: 14px;}
.norms-list {border-top: 1px solid var(--line);}
.norm-row {display: grid; grid-template-columns: 22px 118px 1fr; align-items: baseline; gap: 4px; padding: 11px 0; border-bottom: 1px solid var(--line);}
.norm-check {color: var(--accent); font-size: 13px; line-height: 1.4;}
.norm-code {font-weight: 600; color: var(--petrol); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;}
.norm-desc {font-size: 14px; color: var(--ink-soft);}
.about-visual {border-radius: 14px; overflow: hidden; align-self: stretch; min-height: 440px; box-shadow: 0 18px 40px rgba(1,74,98,0.14);}
.about-visual img {width: 100%; height: 100%; object-fit: cover; display: block;}
.duo-main {border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 18px 40px rgba(1,74,98,0.16);}
.duo-main img {width: 100%; height: 100%; object-fit: cover; display: block;}
.duo-inset {position: absolute; top: -22px; right: -22px; width: 46%; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; border: 5px solid var(--white); box-shadow: 0 16px 32px rgba(1,42,61,0.30); background: var(--white);}
.duo-inset img {width: 100%; height: 100%; object-fit: cover; display: block;}
.duo-claim {margin-top: 28px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent);}
.eco {background: var(--bg-tint); border-top: 1px solid var(--line); padding: 54px 0;}
.eco-inner {display: flex; align-items: center; gap: 34px; max-width: 880px; margin: 0 auto;}
.eco-icon {flex-shrink: 0; width: 104px; height: 104px;}
.eco-icon img {width: 100%; height: 100%; object-fit: contain; display: block;}
.eco-text {font-size: 16.5px; color: var(--ink); line-height: 1.6;}
.eco-text strong {color: var(--petrol); font-weight: 700;}
.eco-text a {color: var(--accent); text-decoration: underline; text-underline-offset: 2px;}
.eco-text a:hover {color: var(--petrol);}
@media (max-width: 900px) {
  .eco-inner {flex-direction: column; text-align: center; gap: 22px;}
}
@media (max-width: 480px) {
  .norm-row {grid-template-columns: 20px 96px 1fr;}
  .duo-inset {position: static; width: 58%; margin: 16px auto 0; top: auto; right: auto;}
}
.eco {background:linear-gradient(180deg,#033341 0%,#04222d 100%); border-top:1px solid rgba(175,209,219,.20); border-bottom:none; padding:62px 0 66px;}
.eco-inner {gap:30px; align-items:center;}
.eco-icon {width:86px; height:86px; flex:0 0 86px; background:#fff; border-radius:50%; padding:17px; box-shadow:0 10px 26px rgba(0,0,0,.30);}
.eco-icon img {width:100%; height:100%; object-fit:contain;}
.eco-eyebrow {font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--skyblue); margin-bottom:8px;}
.eco-text {color:#d9e9ee; font-size:16.5px;}
.eco-text strong {color:#fff;}
.eco-text a {color:var(--skyblue); text-decoration:underline; text-underline-offset:2px;}
.eco-text a:hover {color:#fff;}
@media (max-width:900px) {
  .eco-inner {flex-direction:column; text-align:center;}
}
.refs {background:var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.ref-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; align-items:start;}
.ref-card {background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease; will-change:transform;}
@media (hover:hover) and (pointer:fine) {
  .ref-card:hover {transform:translateY(-8px) scale(1.025); box-shadow:0 26px 50px rgba(1,74,98,.18); border-color:var(--skyblue); z-index:2;}
  .ref-card:hover .ref-media img {transform:scale(1.08);}
}
.ref-media {aspect-ratio:4/3; overflow:hidden; background:var(--bg-tint2);}
.ref-media img {width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.ref-media.placeholder {display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--petrol) 0%, #0f6e88 60%, #2c6088 100%); position:relative;}
.ref-media.placeholder::before {content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 32% 60%, rgba(175,209,219,.35), transparent 55%), radial-gradient(circle at 70% 30%, rgba(175,209,219,.22), transparent 50%);}
.ref-media.placeholder span {position:relative; z-index:1; color:#fff; font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; opacity:.9;}
.ref-body {padding:24px 24px 28px;}
.ref-body h3 {font-size:18px; color:var(--petrol); margin-bottom:12px; line-height:1.3;}
.ref-body p {font-size:14px; color:var(--ink-soft); line-height:1.62;}
@media (max-width:900px) {
  .ref-grid {grid-template-columns:1fr;}
}
.ref-media.diagram {background:#fff;}
.ref-media.diagram img {object-fit:contain;}
.system-grid {display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center;}
.system-media {border-radius:14px; overflow:hidden; box-shadow:0 18px 40px rgba(1,74,98,.16);}
.system-media img {width:100%; height:100%; object-fit:cover; display:block;}
.system-copy .sec-title {margin-bottom:18px;}
.system-copy--center {max-width:820px; margin:0 auto; text-align:center;}
.system-copy--center .sec-title {max-width:none; margin-left:auto; margin-right:auto;}
.system-copy--center .sec-intro {margin-left:auto; margin-right:auto;}
.system-wide {max-width:1120px; margin:38px auto 0; padding:0 30px; box-sizing:border-box;}
.system-wide img {display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 18px 40px rgba(1,74,98,.16);}
.system-duo {display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:38px 0 0;}
.system-duo img {display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 18px 40px rgba(1,74,98,.16);}
@media (max-width:700px) {
  .system-duo {grid-template-columns:1fr;}
}
.refnote--wide {margin-top:20px;}
.system-tags {display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.system-tags span {font-size:13px; font-weight:600; color:var(--petrol); background:var(--bg-tint2); border:1px solid var(--line); border-radius:999px; padding:8px 16px;}
@media (max-width:900px) {
  .system-grid {grid-template-columns:1fr; gap:30px;}
}
.system {background:var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.system {background:#ffffff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.eco {background:#e7f0f4; border-top:1px solid var(--line); border-bottom:none; padding:52px 0;}
.eco-inner {gap:28px; align-items:center;}
.eco-icon {width:78px; height:78px; flex:0 0 78px; background:#fff; border:1px solid var(--line); border-radius:50%; padding:15px; box-shadow:0 8px 20px rgba(1,74,98,.10);}
.eco-eyebrow {color:#0f6e88;}
.eco-text {color:var(--ink);}
.eco-text strong {color:var(--petrol);}
.eco-text a {color:var(--accent);}
.eco-text a:hover {color:var(--petrol);}
.refs {background:#e7f0f6; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.system-note {display:flex; align-items:center; gap:18px; margin-top:40px; padding-top:30px; border-top:1px solid var(--line);}
.system-note-icon {width:54px; height:54px; flex:0 0 54px; background:#fff; border:1px solid var(--line); border-radius:50%; padding:11px; box-shadow:0 6px 16px rgba(1,74,98,.08);}
.system-note-icon img {width:100%; height:100%; object-fit:contain; display:block;}
.system-note-text {font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0;}
.system-note-text strong {color:var(--petrol);}
.system-note-text a {color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
.system-note-text a:hover {color:var(--petrol);}
@media (max-width:600px) {
  .system-note {flex-direction:column; align-items:flex-start; gap:12px;}
}
.eco {background:linear-gradient(180deg,#033341 0%,#04222d 100%); border:none; padding:50px 0;}
.eco-grid {display:grid; grid-template-columns:0.9fr 1.1fr; gap:54px; align-items:center;}
.eco-media {background:transparent;}
.eco-media img {display:block; max-width:100%; max-height:330px; margin:0 auto; object-fit:contain; filter:drop-shadow(0 16px 30px rgba(0,0,0,.45));}
.eco-eyebrow {font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--skyblue); margin-bottom:14px;}
.eco-title {color:#fff; font-size:clamp(24px,3vw,33px); line-height:1.15; letter-spacing:-.01em; margin-bottom:16px;}
.eco-text {color:#d9e9ee; font-size:16.5px; line-height:1.6;}
.eco-text strong {color:#fff;}
.eco-text a {color:var(--skyblue); text-decoration:underline; text-underline-offset:2px;}
.eco-text a:hover {color:#fff;}
@media (max-width:900px) {
  .eco-grid {grid-template-columns:1fr; gap:28px;}
}
.ref-head {display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:18px 24px 20px; font:inherit; color:inherit; list-style:none;}
.ref-head::-webkit-details-marker {display:none;}
.ref-head::marker {content:"";}
.ref-head--static {cursor:default;}
.ref-head-txt {display:block;}
.ref-cat {display:block; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:6px;}
.ref-head h3 {font-size:18px; color:var(--petrol); line-height:1.3; margin:0; transition:color .2s;}
.ref-head:hover h3 {color:var(--accent);}
.ref-filter {display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:40px;}
.ref-filter-label {font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--petrol); margin-right:6px;}
.ref-filter-dot {color:var(--accent); font-size:16px; font-weight:900; line-height:0;}
.ref-chip {display:inline-flex; align-items:center; gap:7px; padding:7px 14px; font-size:13px; font-weight:500; font-family:inherit; color:var(--petrol); background:transparent; border:1px solid var(--line); border-radius:999px; cursor:pointer; transition:all .2s ease;}
.ref-chip:hover {border-color:var(--petrol);}
.ref-chip.is-active {background:var(--petrol); color:#fff; border-color:var(--petrol);}
.ref-chip-n {font-size:11px; font-weight:400; color:var(--ink-soft);}
.ref-chip.is-active .ref-chip-n {color:rgba(255,255,255,.6);}
.ref-card.is-hidden {display:none;}
.ref-filter + .ref-grid {margin-top:22px;}
.block.refs {padding-top:48px;}
.ref-toggle {flex:0 0 auto; width:11px; height:11px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .3s ease; margin-top:-3px;}
.ref-fold[open] .ref-toggle {transform:rotate(-135deg); margin-top:3px;}
.ref-detail {padding:0 24px 26px; overflow:hidden; box-sizing:border-box;}
.js .ref-detail, .js .mship-detail, .js .refnote-detail {transition:height .36s cubic-bezier(.4,0,.2,1);}
.ref-detail p {font-size:14px; color:var(--ink-soft); line-height:1.62; margin:0;}
.system-grid {align-items:start;}
.system-media-col {display:flex; flex-direction:column;}
.system-refnote {font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:0;}
.eco-badge {width:58px; height:58px; background:#fff; border-radius:50%; padding:9px; box-shadow:0 8px 20px rgba(0,0,0,.28); margin-bottom:20px;}
.eco-badge img {width:100%; height:100%; object-fit:contain; display:block;}
.memberships {background:#ffffff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; padding:30px 0;}
.memberships .sec-intro {max-width:720px;}
.mship-logos {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:52px;
  /* Oben und unten derselbe Abstand. Vorher sass die Logoreihe mit 14px
     fast am Fliesstext (optisch sogar darin, weil die Grafiken keinen
     Innenrand haben), waehrend unten 41px zum Weiterlesen-Link standen. */
  margin-top:63px; margin-bottom:16px;}
.mship-logo {height:118px; width:auto; max-width:320px; object-fit:contain; display:block; transition:transform .25s ease;}
.mship-logo--wide {height:86px; max-width:380px;}
.mship-logo:hover {transform:scale(1.05);}
@media (max-width:600px) {
  .mship-logos {flex-wrap:nowrap; gap:3vw;}
  .mship-logo {height:13vw; width:auto; max-width:none; min-width:0;}
  .mship-logo--wide {height:9.5vw;}
}
.mship-toggle {display:inline-flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:14px; letter-spacing:.02em; color:var(--accent); padding:4px 2px; list-style:none;}
.mship-toggle::-webkit-details-marker {display:none;}
.mship-toggle::marker {content:"";}
.mship-toggle:hover {color:var(--petrol);}
.mship-chevron {width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .3s ease; margin-top:-3px;}
.mship-fold[open] .mship-chevron {transform:rotate(-135deg); margin-top:2px;}
.mship-detail {padding-top:2px; overflow:hidden; box-sizing:border-box;}
.mship-text {max-width:720px; margin:16px auto 0; text-align:left; font-size:15px; color:var(--ink-soft); line-height:1.62;}
section.memberships {padding:30px 0;}
.eco-head {display:flex; align-items:center; gap:16px; margin-bottom:16px;}
.eco-head .eco-badge {margin-bottom:0; flex:0 0 auto;}
.eco-head .eco-title {margin-bottom:0;}
.refnote {margin-top:14px;}
.refnote-toggle {display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:12.5px; color:var(--accent); padding:2px 0; list-style:none;}
.refnote-toggle::-webkit-details-marker {display:none;}
.refnote-toggle::marker {content:"";}
.refnote-toggle:hover {color:var(--petrol);}
.refnote-chevron {width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .3s ease; margin-top:-2px;}
.refnote[open] .refnote-chevron {transform:rotate(-135deg); margin-top:2px;}
.refnote-detail {padding-top:4px; overflow:hidden; box-sizing:border-box;}
.de-wrap {display:grid; grid-template-columns:0.82fr 1fr; gap:56px; align-items:center;}
.de-title {font-size:clamp(22px,2.6vw,28px); line-height:1.2; color:var(--petrol); margin:8px 0 14px; max-width:9em;}
.de-sub {font-size:15px; color:var(--ink-soft); max-width:440px;}
.de-mapwrap {display:flex; justify-content:center;}
.de-map {width:100%; max-width:290px; height:auto; overflow:visible;}
.de-state {fill:#ffffff; stroke:var(--skyblue); stroke-width:0.6; stroke-opacity:.35; stroke-linejoin:round;}
.de-outline {fill:none; stroke:var(--skyblue); stroke-width:1.8; stroke-linejoin:round;}
.de-dot {fill:#0f6e88; stroke:#ffffff; stroke-width:2.5; transform-box:fill-box; transform-origin:center;}
.js .de-dot {transform:scale(0); transition:transform .55s cubic-bezier(.34,1.56,.64,1);}
.js .de-map.in .de-dot {transform:scale(1);}
@media (max-width:820px) {
  .de-wrap {grid-template-columns:1fr; gap:26px;}
  .de-map {max-width:240px;}
}
@media (prefers-reduced-motion:reduce) {
  .js .de-dot {transition:none; transform:none;}
}
.system-duo .duo-item {position:relative; margin:0; overflow:hidden; border-radius:14px; box-shadow:0 18px 40px rgba(1,74,98,.16);}
.system-duo .duo-item img {display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; border-radius:0; box-shadow:none; transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.duo-cap {position:absolute; left:0; right:0; bottom:0; margin:0; padding:16px 18px; background:linear-gradient(to top, rgba(1,58,77,.92) 0%, rgba(1,58,77,.55) 55%, transparent 100%); color:#fff; font-weight:600; font-size:15px; opacity:0; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease; pointer-events:none;}
@media (hover:hover) and (pointer:fine) {
  .system-duo .duo-item:hover img {transform:scale(1.07);}
  .system-duo .duo-item:hover .duo-cap {opacity:1; transform:translateY(0);}
}
.system-methodik {text-align:center; margin-top:26px;}
.system-methodik .refnote-detail {max-width:640px; margin:0 auto; text-align:left;}
.memberships .sec-eyebrow {justify-content:center;}
.hero-eq {display:flex; align-items:flex-end; gap:4px; height:22px; margin-bottom:22px; opacity:.75;}
.hero-eq i {width:3px; height:100%; border-radius:2px; background:var(--petrol); transform:scaleY(.3); transform-origin:bottom; animation:eqBar 3.6s ease-in-out infinite; animation-delay:calc(var(--i) * -.45s);}
.hero-eq i:nth-child(3n) {background:#0f6e88;}
.hero-eq i:nth-child(4n) {background:var(--accent);}
@keyframes eqBar { 0%,100%{ transform:scaleY(.3); } 25%{ transform:scaleY(.6); } 50%{ transform:scaleY(.38); } 75%{ transform:scaleY(.5); } }
.ref-card {position:relative;}
.ref-card::after {content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3; background:linear-gradient(90deg, var(--petrol), var(--accent) 55%, var(--skyblue)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out); pointer-events:none;}
.ref-card:hover::after {transform:scaleX(1);}
.js .de-outline.draw {stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.6s ease .1s;}
.js .de-map.in .de-outline.draw {stroke-dashoffset:0;}
@media (prefers-reduced-motion:reduce) {
  .hero-eq i {animation:none; transform:scaleY(.42);}
  .hero-eq i:nth-child(odd) {transform:scaleY(.68);}
  .js .de-outline.draw {stroke-dasharray:none; stroke-dashoffset:0; transition:none;}
}
.db-scale {margin-top: 52px; background: var(--petrol-deep); border-radius: 16px;
  padding: 38px 36px 32px; color: #dfeef3; position: relative; overflow: hidden;
  box-shadow: 0 20px 46px rgba(1,58,77,.22);}
@media (max-width: 560px) {
  .db-scale {padding: 26px 20px 24px;}
}
.db-head {display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; margin-bottom: 26px;}
.db-head h2 {color: #fff; font-size: clamp(20px, 2.4vw, 25px);}
.db-hint {font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--skyblue);}
.db-readout {display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; min-height: 66px; flex-wrap: wrap;}
.db-value {font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.1rem); color: var(--skyblue); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em;}
.db-value small {font-size: .40em; font-weight: 600; color: rgba(223,238,243,.7); margin-left: 5px;}
.db-example {font-size: 1.02rem; color: #fff; line-height: 1.4;}
.db-example .db-note {display: block; font-size: .82rem; color: rgba(223,238,243,.65); margin-top: 3px;}
.db-track {position: relative; padding: 26px 0 44px;}
input[type="range"].db-input {-webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #1b6f83 0%, #3f97ad 45%, #d9a441 72%, #c4573b 100%);
  outline-offset: 6px; cursor: pointer; border: none; padding: 0;}
input[type="range"].db-input::-webkit-slider-thumb {-webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 4px solid var(--skyblue);
  box-shadow: 0 2px 10px rgba(0,0,0,.4); cursor: grab;}
input[type="range"].db-input::-moz-range-thumb {width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--skyblue);
  box-shadow: 0 2px 10px rgba(0,0,0,.4); cursor: grab;}
.db-marks {position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none;}
.db-mark {position: absolute; top: 0; transform: translateX(-50%); font-size: .68rem; letter-spacing: .04em; color: rgba(223,238,243,.55); white-space: nowrap;}
.db-mark::after {content: ""; position: absolute; left: 50%; top: 16px; width: 1px; height: 12px; background: rgba(223,238,243,.35);}
.db-mark.rw {color: var(--skyblue); font-weight: 600;}
.db-mark.rw::after {background: var(--skyblue); height: 14px;}
.db-ticks {position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: space-between; font-size: .68rem; color: rgba(223,238,243,.45); font-variant-numeric: tabular-nums;}
.db-legal {font-size: .78rem; color: rgba(223,238,243,.5); margin-top: 6px; line-height: 1.55;}

/* =====================================================================
   KONTAKT ALS HERVORGEHOBENER MENUEPUNKT
   Der Knopf oben rechts ist entfallen. Seine Gestalt uebernimmt der
   Menuepunkt "Kontakt" - gleiche Farbe, gleiche Form, gleicher
   Lichtstreif beim Zeigen, nur an seinem Platz in der Navigation.
   ===================================================================== */
.nav-links > a.nav-kontakt{
  color:#fff !important; background:var(--petrol);
  font-weight:600; padding:10px 20px; border-radius:6px;
  margin-left:10px; white-space:nowrap;
  position:relative; overflow:hidden;
  transition:background .2s;
}
.nav-links > a.nav-kontakt:hover{ background:var(--accent); }
.nav-links > a.nav-kontakt::after{
  content:""; position:absolute; top:0; bottom:0; left:-75%; width:45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent);
  transform:skewX(-20deg); pointer-events:none; transition:left .55s ease;
}
.nav-links > a.nav-kontakt:hover::after{ left:135%; }
/* Die Kennzeichnung der laufenden Seite arbeitet sonst mit einer
   Unterlinie - auf dem gefuellten Feld waere sie nicht zu sehen. */
.nav-links > a.nav-kontakt.is-current{ background:var(--petrol-deep); }
.nav-links > a.nav-kontakt.is-current::before{ content:none; }

@media (max-width:900px){
  /* Im ausgeklappten Menue steht der Punkt in der Reihe, nicht als
     Knopf - dort traegt die Flaeche nicht. */
  .nav-links > a.nav-kontakt{
    background:none; color:var(--petrol) !important; font-weight:600;
    margin-left:0; padding:12px 10px; border-radius:0;
  }
  .nav-links > a.nav-kontakt::after{ content:none; }
  .nav-links > a.nav-kontakt.is-current{ background:none; }
}

/* ---------------------------------------------------------------------
   Mitgliedschaften: gleiche Grundlinie fuer Titel und Text
   Die beiden breiten Marken standen in einem niedrigeren Logofeld,
   dadurch begannen ihre Titel weiter oben als die der anderen. Jetzt
   ist das Feld fuer alle gleich hoch; die breiten Marken werden ueber
   die Bildhoehe begrenzt statt ueber das Feld.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Rubrik einer Szene oben links
   In der Vollbildszene sitzt die Rubrik sonst mitten im Bild, weil sie
   im senkrecht zentrierten Textblock steht. Mit dieser Klasse steht sie
   oben links wie die Rubrik jedes anderen Abschnitts.
   --------------------------------------------------------------------- */
.scene-eyebrow--oben{
  position:absolute; left:0; right:0; z-index:5; pointer-events:none;
  top:calc(var(--nav-h, 72px) + clamp(52px,8vh,88px));
  max-width:1120px; margin:0 auto; padding:0 30px;
}
@media (max-width:860px){
  .scene-eyebrow--oben{ top:calc(var(--nav-h, 72px) + clamp(40px,6vh,64px)); }
}

/* ---------------------------------------------------------------------
   Referenzband der Startseite
   Hellblauer Grund, damit sich die weissen Karten absetzen. Die Karten
   selbst sind unveraendert die der Referenzseite.
   --------------------------------------------------------------------- */
.ref-band{ background:var(--bg-tint); }
.ref-band .ref-grid{ margin-top:clamp(30px,4vw,44px); }
.ref-band .more-link{ margin-top:34px; }

/* ---------------------------------------------------------------------
   Kopffolie im Scrollbetrieb
   Kopfbereiche laufen sonst von selbst und sind einen Bildschirm hoch.
   Mit dieser Klasse bekommt die Folie wieder die Geometrie einer
   Scrollszene: hoher Track, klebende Buehne - der Wechsel haengt dann
   am Scrollbalken statt an einer Uhr.
   --------------------------------------------------------------------- */
.scene--hero.scene--rollen .scene-track{
  height:calc(var(--vh-voll) + (var(--slides,4) - 1) * var(--slide-vh));
}
.scene--hero.scene--rollen .scene-stage{
  position:sticky; top:0; height:var(--vh-voll);
}

/* ---------------------------------------------------------------------
   Ansprechpartner: mehr Raum und eine klare Fuge nach oben
   Der Block steht im selben Dunkelton wie die Szene darueber und ging
   deshalb nahtlos in sie ueber. Eine feine Linie in Himmelblau trennt
   beide, das Foto wird groesser und der Block insgesamt luftiger.
   --------------------------------------------------------------------- */
.ansp-gross{
  padding:clamp(88px,13vh,148px) 0 !important;
  border-top:1px solid rgba(175,209,219,.28) !important;
  position:relative;
}
.ansp-gross > .wrap{
  grid-template-columns:minmax(0,268px) minmax(0,1fr);
  gap:clamp(34px,4.4vw,68px);
}
.ansp-gross .ansp-inhalt h2{ font-size:clamp(26px,3vw,36px); }
.ansp-gross .ansp-inhalt p{ max-width:56ch; }
@media (max-width:820px){
  .ansp-gross{ padding:clamp(64px,9vh,96px) 0 !important; }
  .ansp-gross > .wrap{ grid-template-columns:1fr; }
}

/* =====================================================================
   ABSPANN AUF DER NACHTAUFNAHME
   Der Fuss stand auf einer glatten Flaeche. Jetzt liegt die naechtliche
   Stadt darunter - stark abgedunkelt, damit die Schrift ihren Kontrast
   behaelt und das Bild als Untergrund wirkt, nicht als Motiv.
   ===================================================================== */
footer{
  position:relative;
  background:#04222d url("assets/img/footer-freiburg-nacht.jpg") center 62% / cover no-repeat;
  isolation:isolate;
}
footer::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(4,34,45,.94) 0%, rgba(4,34,45,.86) 45%,
             rgba(3,26,35,.93) 100%);
}
/* Auf schmalen Fenstern ist von der Stadt ohnehin nichts mehr zu
   erkennen - dort bleibt der Verlauf allein. */
@media (max-width:700px){
  footer{ background-image:none; }
}