/* ══════════════════════════════════════════════════════════════════
   HighResTOC — Landingpage
   Ziel: https://miontec.de/highlights/highrestoc/

   Farben, Schrift und Button-Form sind von miontec.de uebernommen,
   damit die Unterseite nicht wie ein Fremdkoerper wirkt:
     Navy   #133462   (dunkle Sektionen der Hauptseite)
     Verlauf 135deg #3862DE -> #038C59  (Button "Kontaktieren")
     Schrift Montserrat
   Die Wortmarke traegt die Logofarben aus "HighResTOC Logo 2026.svg":
     HighRes #008040 (gruen) · TOC #004FE8 (blau)

   Kein Build-Tool, keine Abhaengigkeiten — die Datei wird so hochgeladen.
   ══════════════════════════════════════════════════════════════════ */

/* ── Schrift, lokal ausgeliefert ─────────────────────────────────
   Variable Schrift: EINE Datei traegt alle Schnitte von 400 bis 700.
   Deshalb `font-weight: 400 700` statt vier @font-face-Bloecke.
   `swap` — lieber sofort Systemschrift als 100 ms leere Flaeche. */
@font-face {
  font-family: Montserrat; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(assets/font/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Montserrat; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(assets/font/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy:      #133462;
  --navy-2:    #0d2547;
  --ink:       #16202b;
  --ink-sf:    #566473;
  --ink-mute:  #8a98a6;
  --line:      #e3e8ee;
  --bg:        #ffffff;
  --bg-alt:    #f5f8fa;
  --accent:    #007F4F;
  --acc2:      #0051DB;
  --hrt-g:     #008040;
  --hrt-b:     #004FE8;
  --grad:      linear-gradient(135deg, #3862DE 0%, #038C59 100%);
  --r:         14px;
  --r-pill:    50px;
  --wrap:      1180px;
  --ease:      cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: Montserrat, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; }

.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 32px); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #fff; color: var(--ink); padding: 12px 20px;
}
.skip:focus { left: 8px; top: 8px; }

/* ── Wortmarke ────────────────────────────────────────────────────
   Wie im Showreel: HighRes gruen, TOC blau. `!important` ist hier
   Absicht — die Marke darf von keiner Layoutregel eingefaerbt werden. */
.hrt b { color: var(--hrt-g) !important; font-weight: inherit; }
.hrt i { color: var(--hrt-b) !important; font-style: normal; font-weight: inherit; }
.hrt-on-dark b { color: #2fd48a !important; }
.hrt-on-dark i { color: #6ea2ff !important; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border: 0; cursor: pointer; text-decoration: none;
  font: inherit; font-weight: 500; line-height: 1;
  padding: 13px 26px; border-radius: var(--r-pill);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s;
}
.btn-grad { background: var(--grad); color: #fff; }
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(19,52,98,.22); }
.btn-ghost {
  background: transparent; color: var(--navy);
  box-shadow: inset 0 0 0 2px rgba(19,52,98,.22);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--navy); transform: translateY(-2px); }
.btn-ghost.on-dark { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.btn-ghost.on-dark:hover { box-shadow: inset 0 0 0 2px #fff; }
.btn-lg { padding: 16px 34px; font-size: 17px; }
.linklike {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Kopf ───────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 90; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.hdr.stuck { border-bottom-color: var(--line); box-shadow: 0 4px 20px rgba(19,52,98,.06); }
.hdr-in { display: flex; align-items: center; gap: 28px; padding: 14px 0; }
.hdr-logo { display: flex; align-items: center; flex: 0 0 auto; }
.hdr-logo img { height: 38px; width: auto; }
.hdr-nav { display: flex; gap: 26px; margin-left: auto; }
.hdr-nav a {
  color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 500;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.hdr-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.hdr-cta { padding: 11px 24px; font-size: 15.5px; }
.hdr-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.hdr-burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }

@media (max-width: 960px) {
  .hdr-burger { display: block; order: 3; }
  .hdr-cta { margin-left: auto; order: 1; }
  .hdr-nav {
    order: 4; width: 100%; margin-left: 0; flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
  }
  .hdr-nav.open { max-height: 340px; }
  .hdr-nav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .hdr-in { flex-wrap: wrap; gap: 14px; }
}
@media (max-width: 520px) { .hdr-cta { display: none; } }

/* ── Reveal beim Scrollen ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero { padding: 76px 0 84px; background:
  radial-gradient(1200px 520px at 78% 18%, rgba(56,98,222,.07), transparent 62%),
  radial-gradient(900px 420px at 12% 84%, rgba(3,140,89,.07), transparent 60%); }
.hero-in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.04fr); gap: 52px; align-items: center; }
@media (max-width: 980px) { .hero-in { grid-template-columns: minmax(0,1fr); gap: 38px; } .hero { padding: 48px 0 56px; } }

.eyebrow {
  margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.hero h1 {
  margin: 0 0 20px; font-size: clamp(32px, 3.9vw, 50px); line-height: 1.12;
  font-weight: 700; letter-spacing: -.015em;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.lead { margin: 0 0 30px; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-sf); }
.lead b { color: var(--ink); font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-note { margin: 22px 0 0; font-size: 14.5px; color: var(--ink-mute); }

.hero-fig { margin: 0; }
.hero-fig figcaption, .wide figcaption, .ion figcaption {
  margin-top: 14px; font-size: 14px; color: var(--ink-mute); line-height: 1.5;
}

/* ── Charts ─────────────────────────────────────────────────────── */
.chart { width: 100%; max-width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }

/* Linien zeichnen sich, sobald die Sektion sichtbar wird.
   --len wird in app.js aus getTotalLength() gesetzt. */
.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.in .draw { animation: draw 1.8s var(--ease) forwards; }
.in .draw.d2 { animation-delay: .45s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.fade { opacity: 0; }
.in .fade { animation: fade .7s var(--ease) forwards; }
@keyframes fade { to { opacity: 1; } }
.in .fade.f1 { animation-delay: .9s; }
.in .fade.f2 { animation-delay: 1.2s; }
.in .fade.f3 { animation-delay: 1.5s; }
.in .fade.f4 { animation-delay: 1.8s; }

@media (prefers-reduced-motion: reduce) {
  .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .fade { opacity: 1; }
  .in .draw, .in .fade { animation: none; }
}

/* Gemeinsame Chart-Typografie */
.c-num  { font: 600 15px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; fill: var(--ink-mute); }
.c-lbl  { font: 700 17px/1 Montserrat, sans-serif; fill: var(--ink-sf); }
.c-ax   { stroke: #c9d3dc; stroke-width: 1.5; }
.c-grid { stroke: #e8edf2; stroke-width: 1; stroke-dasharray: 3 5; }

/* ── Sektionen ──────────────────────────────────────────────────── */
.sec { padding: 92px 0; }
.sec-alt { background: var(--bg-alt); }
.sec-navy { background: var(--navy); color: #e8eef7; }
.sec-navy .sub { color: #b4c4da; }
.sec-navy .kicker { color: #4fd49a; }
@media (max-width: 720px) { .sec { padding: 62px 0; } }

.sec-hd { max-width: 760px; margin: 0 0 44px; }
.kicker {
  margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.sec h2 {
  margin: 0 0 16px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15;
  font-weight: 700; letter-spacing: -.012em;
}
.sec h2 em { font-style: normal; color: var(--accent); }
.sec-navy h2 em { color: #4fd49a; }
.sub { margin: 0; font-size: 18px; color: var(--ink-sf); }

.wide { margin: 0; }
.fazit {
  margin: 42px auto 0; max-width: 860px; text-align: center;
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1.4; color: var(--ink);
}
.sec-navy .fazit { color: #fff; }
.fazit b { font-weight: 700; }
.fn { margin: 18px 0 0; font-size: 14px; color: var(--ink-mute); }

/* ── Claim-Band mit Tablet-Foto ──────────────────────────────────
   Das Foto zeigt den Techniker links, die Rohrleitung rechts. Der Text
   steht deshalb RECHTS, wo das Bild ruhig ist, und der Verlauf dunkelt
   genau dort am staerksten ab — sonst traegt weisse Schrift nicht. */
.claim { position: relative; overflow: hidden; isolation: isolate;
         background: var(--navy); color: #fff;
         /* oben viel, unten wenig: der Text soll UEBER dem Tablet stehen,
            nicht darauf — das Geraet ist das Motiv des Fotos. */
         padding: 76px 0 218px; }
/* Fuer den Parallax ragt das Bild oben und unten UEBER die Bahn hinaus
   (inset -14%). Nur so bleibt beim Verschieben an keiner Kante eine
   Luecke — ein Bild, das die Bahn genau ausfuellt, gibt beim ersten
   Pixel Versatz einen weissen Streifen frei. */
.claim-bg { position: absolute; inset: -14% 0; z-index: -2; overflow: hidden; }
.claim-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 26% 42%;
  will-change: transform;
}
/* ZWEI Verlaeufe statt einem: der senkrechte traegt den Kontrast fuer den
   Text oben, der waagerechte nur die Grundstimmung. Ein einzelner starker
   Verlauf von rechts hat das Tablet mit abgedunkelt — genau das Motiv. */
.claim::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,20,42,.62) 0%, rgba(7,20,42,.30) 38%, rgba(7,20,42,0) 62%),
    linear-gradient(90deg,  rgba(9,24,48,.22) 0%, rgba(9,24,48,.34) 44%, rgba(11,32,64,.60) 100%);
}
.claim-in { display: flex; flex-direction: column; align-items: flex-end;
            gap: 22px; text-align: right; }
.claim-logo { height: 66px; width: auto; filter: brightness(0) invert(1); }
.claim p { margin: 0; font-size: clamp(21px, 2.5vw, 32px); line-height: 1.35;
           text-shadow: 0 2px 16px rgba(5,15,32,.45); }
.claim b { font-weight: 700; }

@media (max-width: 860px) {
  /* Hochkant wuerde der Ausschnitt den Techniker abschneiden — deshalb
     Bild oben in voller Breite, Text darunter auf Navy. */
  .claim { padding: 0 0 46px; }   /* hochkant steht der Text unter dem Bild */
  /* Hochkant kein Parallax: das Bild steht oben in voller Breite, da
     gibt es nichts zu verschieben. app.js prueft dieselbe Breite. */
  .claim-bg { position: static; inset: auto; z-index: auto; margin-bottom: 34px; }
  .claim-bg img { transform: none !important; }
  .claim-bg img { height: 230px; object-position: 30% 45%; }
  .claim::after { content: none; }
  .claim-in { align-items: center; text-align: center; }
  .claim-logo { height: 52px; }
}

/* ── Ionenbilanz ────────────────────────────────────────────────── */
.ion { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 48px; align-items: center; }
.ion figure { margin: 0; }
@media (max-width: 860px) { .ion { grid-template-columns: minmax(0,1fr); gap: 34px; } }

/* ── Messprinzip ────────────────────────────────────────────────── */
.prinzip-txt { max-width: 820px; margin: 40px auto 0; text-align: center; }
.prinzip-txt p { margin: 0; font-size: 19px; line-height: 1.5; }
.pat {
  margin-top: 16px !important; font-size: 13.5px; letter-spacing: .06em;
  text-transform: uppercase; color: #8fa5c2 !important;
}

/* ── Modellvarianten ────────────────────────────────────────────── */
.modelle { display: grid; gap: 30px; }
.modell {
  display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 30px; align-items: center;
  padding: 26px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
.modell h3 { margin: 0 0 6px; font-size: 26px; font-weight: 700; }
/* Die Wassertypen sind die eigentliche Aussage der Karte — blau
   hervorgehoben wie die zweite Zeile gruen, nicht als Fliesstext grau. */
.modell p  { margin: 0; font-size: 15.5px; color: var(--acc2); font-weight: 600; }
.modell .fuer { margin-top: 8px; color: var(--accent); font-weight: 600; }
@media (max-width: 860px) { .modell { grid-template-columns: minmax(0,1fr); gap: 18px; } }

/* ── Split-Sektionen ────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.split-wide { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
.split.reverse .split-fig { order: 2; }
.split-fig { margin: 0; }
.split-txt h2 { margin-top: 0; }
@media (max-width: 900px) {
  .split, .split-wide { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .split.reverse .split-fig { order: 0; }
}

.shot {
  width: 100%; border-radius: var(--r); border: 1px solid var(--line);
  box-shadow: 0 22px 50px rgba(19,52,98,.14);
}

.ticks { margin: 24px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 11px; color: var(--ink-sf); }
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: .55em; width: 9px; height: 5px;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

.nums { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: n; }
.nums li {
  counter-increment: n; position: relative; padding: 16px 0 16px 56px;
  border-bottom: 1px solid var(--line);
}
.nums li:last-child { border-bottom: 0; }
.nums li::before {
  content: counter(n); position: absolute; left: 0; top: 14px;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; font-weight: 700; color: var(--accent);
  box-shadow: inset 0 0 0 2px rgba(0,127,79,.28);
}
.nums b { display: block; font-size: 17.5px; }
.nums span { font-size: 15px; color: var(--ink-sf); }

.adv { margin: 26px 0 0; padding: 0; list-style: none; }
.adv li { display: grid; grid-template-columns: 46px 1fr; gap: 0 16px; padding: 14px 0; }
.adv i {
  grid-row: span 2; width: 46px; height: 46px; border-radius: 11px; font-style: normal;
  display: grid; place-items: center; font-size: 22px;
  background: rgba(0,127,79,.10); color: var(--accent);
}
.adv b { font-size: 17.5px; }
.adv span { font-size: 15px; color: var(--ink-sf); }

/* ── Schnittstellen ─────────────────────────────────────────────── */
.kanaele { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.kanal {
  display: grid; grid-template-columns: 190px 1fr auto; gap: 22px; align-items: center;
  padding: 18px 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  opacity: 0; transform: translateX(-14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .2s;
}
.in .kanal { opacity: 1; transform: none; }
.kanal:hover { border-color: var(--accent); }
.kanal-port { font: 600 13.5px/1.3 ui-monospace, Menlo, monospace; color: var(--ink-mute); }
.kanal-lbl  { font-size: 19px; font-weight: 700; }
.kanal-to   { font-size: 15px; color: var(--ink-sf); text-align: right; }
@media (max-width: 760px) {
  .kanal { grid-template-columns: 1fr; gap: 4px; }
  .kanal-to { text-align: left; }
}

/* ── Rollen ─────────────────────────────────────────────────────── */
.dial {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 24px; margin-bottom: 40px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
}
.dial-l { font-weight: 700; }
.dial-track {
  position: relative; display: flex; background: var(--bg-alt);
  border-radius: var(--r-pill); padding: 4px;
}
.dial-track span {
  position: relative; z-index: 2; padding: 8px 20px; font-size: 14.5px;
  font-weight: 600; color: var(--ink-sf); transition: color .4s;
}
.dial-track span:last-of-type { color: #fff; }
.dial-knob {
  position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px;
  width: calc(33.333% - 2.7px); border-radius: var(--r-pill); background: var(--grad);
  transform: translateX(0); transition: transform 1.1s var(--ease);
}
.in .dial-knob, .dial.in .dial-knob { transform: translateX(200%); }
.dial-n { font-size: 14.5px; color: var(--ink-mute); }
@media (max-width: 640px) { .dial-track span { padding: 8px 12px; font-size: 13px; } }

.rollen { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
.rollen figure { margin: 0; }
.rollen img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: var(--r); box-shadow: 0 16px 36px rgba(19,52,98,.13);
}
.rollen figcaption { margin-top: 16px; }
.rollen figcaption b { display: block; font-size: 19px; }
.rollen figcaption span { font-size: 15px; color: var(--ink-sf); }
.rollen-note {
  margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--accent);
}
@media (max-width: 860px) { .rollen { grid-template-columns: minmax(0,1fr); gap: 30px; } }

/* ── Galerie ────────────────────────────────────────────────────── */
.gal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.gal-tabs button {
  border: 1px solid var(--line); background: #fff; color: var(--ink-sf);
  padding: 10px 20px; border-radius: var(--r-pill); cursor: pointer;
  font: 500 15px/1 Montserrat, sans-serif; transition: .2s;
}
.gal-tabs button:hover { border-color: var(--accent); color: var(--accent); }
.gal-tabs button.on { background: var(--grad); border-color: transparent; color: #fff; }
.gal-stage { position: relative; }
.gal-stage img {
  width: 100%; border-radius: var(--r); border: 1px solid var(--line);
  box-shadow: 0 22px 50px rgba(19,52,98,.14);
  display: none;
}
.gal-stage img.on { display: block; animation: fade .45s var(--ease) both; }

/* ── Abschluss-CTA ──────────────────────────────────────────────── */
.cta {
  padding: 92px 0; color: #fff; text-align: center;
  background: linear-gradient(135deg, #133462 0%, #0c2a52 55%, #0a3d33 100%);
}
.cta-logo { height: 70px; width: auto; filter: brightness(0) invert(1); margin-bottom: 26px; }
.cta h2 { margin: 0 0 14px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; font-weight: 400; }
.cta h2 b { font-weight: 700; }
.cta p { margin: 0 0 30px; font-size: 18px; color: #bccbdd; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-pat {
  margin: 34px 0 0 !important; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: #7f96b4 !important;
}

/* ── Fuss ───────────────────────────────────────────────────────── */
.ft { background: var(--navy-2); color: #b7c6d8; padding: 62px 0 26px; font-size: 15px; }
.ft-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.ft-brand img { height: 42px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.ft-brand p { margin: 16px 0 0; line-height: 1.6; }
.ft-kontakt a { color: #fff; text-decoration: none; }
.ft-kontakt a:hover { text-decoration: underline; }
.ft-nav { display: flex; flex-direction: column; gap: 9px; }
.ft-nav h3 { margin: 0 0 6px; font-size: 15px; color: #fff; font-weight: 700; }
.ft-nav a { color: #b7c6d8; text-decoration: none; }
.ft-nav a:hover { color: #fff; }
.ft-btm {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13.5px; color: #8ea1b8;
}
@media (max-width: 860px) { .ft-in { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .ft-in { grid-template-columns: 1fr; } }

/* ── Anfrage-Dialog ─────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-bd { position: absolute; inset: 0; background: rgba(10,22,40,.55); animation: fade .25s both; }
.modal-card {
  position: relative; width: min(100%, 640px); background: #fff; border-radius: 18px;
  padding: 46px 40px 40px; box-shadow: 0 30px 80px rgba(10,22,40,.35);
  animation: pop .3s var(--ease) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-x {
  position: absolute; top: 14px; right: 18px; background: none; border: 0;
  font-size: 30px; line-height: 1; color: var(--ink-sf); cursor: pointer; padding: 6px 10px;
}
.modal-x:hover { color: var(--ink); }
.modal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; text-align: center; }
.modal-col h3 { margin: 14px 0 10px; font-size: 22px; font-weight: 600; }
.modal-ic { width: 46px; height: 46px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.modal-col:nth-child(2) .modal-ic { stroke: var(--accent); }
.modal-val { margin: 0 0 22px; font-size: 17px; color: var(--ink); }
.modal-col .btn { width: 100%; max-width: 210px; }
@media (max-width: 560px) {
  .modal-card { padding: 42px 22px 30px; }
  .modal-cols { grid-template-columns: 1fr; gap: 26px; }
}

/* ── Diagramme auf kleinen Schirmen ──────────────────────────────
   FRUEHER: `min-width: 600px` + seitliches Scrollen. Das war falsch —
   auf einer Seite scrollt man senkrecht, und abgeschnittene Diagramme
   sieht niemand. JETZT: die Diagramme passen in die Breite, dafuer
   skaliert app.js die Schrift im SVG hoch (Faktor 1,9) und baut die
   Fliessbilder senkrecht auf.

   Die beiden Klassen unten werden im CSS gesetzt, nicht im SVG —
   deshalb muessen sie hier mitwachsen. Faktor identisch zu FS in
   app.js: wer den dort aendert, aendert ihn hier mit. */
@media (max-width: 760px) {
  .c-num { font-size: 28.5px; }
  .c-lbl { font-size: 32.3px; }
}

/* ── Sprachumschalter ────────────────────────────────────────────
   Zwei Flaggen wie auf miontec.de. Die aktive ist voll deckend, die
   andere zurueckgenommen — kein zusaetzlicher Rahmen, das Ding soll
   im Kopf nicht lauter sein als die Navigation. */
.lang { display: flex; gap: 8px; align-items: center; }
.lang a {
  /* 40x28 statt 30x21 — bei 30 px waren die Flaggen auf dem gelieferten
     Stand schlicht zu klein, um sie als Sprachwahl zu erkennen. */
  width: 40px; height: 28px; padding: 0; border: 0; cursor: pointer;
  background: none; border-radius: 3px; overflow: hidden; line-height: 0;
  opacity: .38; transition: opacity .2s, transform .2s;
  box-shadow: 0 0 0 1px rgba(19,52,98,.18);
}
.lang a svg { width: 100%; height: 100%; display: block; }
.lang a:hover { opacity: .8; transform: translateY(-1px); }
.lang a.on { opacity: 1; box-shadow: 0 0 0 2.5px var(--accent); }
@media (max-width: 960px) { .lang { order: 2; } }
/* Ohne den Knopf (unter 520 px) muessen die Flaggen den Platz einnehmen,
   sonst kleben sie am Logo. */
@media (max-width: 520px) { .lang { margin-left: auto; } }
/* Auf 390 px ist das Logo 217 px breit — zusammen mit den Flaggen bleiben
   39 px, der Burger braucht 40, und rutschte in eine zweite Zeile. Logo
   kleiner: 16+160+14+88+14+40+16 = 348 von 358 verfuegbaren Pixeln. */
@media (max-width: 460px) {
  .hdr-logo img { height: 28px; }
  .hdr-in { gap: 12px; }
}