/* ============================================================
   eCURA — Abschnitte der Startseite
   Hero, Trust-Leiste, Zahlen, Abgrenzung, Leistungsmodell,
   Lösungen, Partner, Referenzen, Team, Regulatorik, Abschluss.
   ============================================================ */

/* ---------- Hero ----------
   Text auf dem Seitenraster links, Bildpanel randlos rechts.
   Der Übergang zwischen beiden läuft über einen Verlauf, damit
   kein harter Schnitt entsteht und der Text frei steht. */

.hero{
  position:relative;
  overflow:hidden;
  background:var(--hero-bg);
  color:var(--hero-fg);
  padding:calc(var(--head-h) + 92px) 0 100px;
}

.hero-inner{position:relative;z-index:1;}
.hero-content{max-width:600px;}

/* Die Zeile über der Headline ist keine Abschnittsmarkierung,
   sondern eine Herkunftsangabe. Deshalb ohne Versalien und
   ohne Akzentfarbe — sie soll einordnen, nicht rufen. */
.hero .eyebrow{
  text-transform:none;
  letter-spacing:.03em;
  font-size:13px;
  color:var(--hero-dim);
}
.hero h1{
  font-size:clamp(34px,4.6vw,52px);
  line-height:1.07;
  margin-top:14px;
  color:var(--hero-fg);
}
.hero .sub{
  font-size:18px;line-height:1.6;
  color:var(--hero-dim);
  max-width:520px;margin-top:20px;
}

.hero-content > .eyebrow,
.hero h1,
.hero .sub,
.hero .scan,
.hero .scan-note,
.hero .hero-alt{
  animation:hero-in 420ms var(--ease-out) both;
  animation-delay:var(--hero-in-delay,0ms);
}
.hero h1{--hero-in-delay:45ms;}
.hero .sub{--hero-in-delay:90ms;}
.hero .scan{--hero-in-delay:135ms;}
.hero .scan-note{--hero-in-delay:160ms;}
.hero .hero-alt{--hero-in-delay:190ms;}

@keyframes hero-in{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes hero-fade{
  from{opacity:0;}
  to{opacity:1;}
}

/* ---------- Domain-Analyse im Hero ---------- */

.scan{display:flex;margin-top:32px;max-width:500px;}
.scan input{
  flex:1;min-width:0;
  font-family:var(--font-mono);font-size:14.5px;
  color:var(--hero-fg);
  padding:13px 16px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(238,241,246,.32);
  border-right:0;
  border-radius:2px 0 0 2px;
}
.scan input::placeholder{color:rgba(238,241,246,.42);}
.scan input:hover{border-color:rgba(238,241,246,.5);}
.scan input:focus{
  outline:none;
  background:rgba(255,255,255,.1);
  border-color:var(--accent-hero);
}
.scan input:focus-visible{outline:2px solid var(--accent-hero);outline-offset:2px;}
.scan .btn{border-radius:0 2px 2px 0;padding:0 22px;}

.scan-note{
  margin-top:12px;
  font-size:14px;
  color:var(--hero-dim);
}

.hero-alt{
  display:inline-block;margin-top:28px;
  font-family:var(--font-head);font-size:14px;font-weight:600;
  color:var(--hero-fg);text-decoration:none;
  border-bottom:1.5px solid var(--accent-hero);
  padding-bottom:3px;
}
.hero-alt:hover{color:var(--accent-hero);}
.hero-alt:focus-visible{outline:2px solid var(--accent-hero);outline-offset:3px;}

/* ---------- Bildpanel ---------- */

.hero-media{
  position:absolute;top:0;right:0;bottom:0;
  width:42%;
  overflow:hidden;
  z-index:0;
  /* Platzhalter, solange kein Bild vorliegt */
  background:linear-gradient(160deg,#12203a 0%,var(--hero-bg) 70%);
}
.hero-media img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* Verlauf nach links, damit das Bild in die Textfläche ausläuft */
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(
    90deg,
    var(--hero-bg) 0%,
    rgba(10,18,30,.72) 26%,
    rgba(10,18,30,.18) 62%,
    rgba(10,18,30,0) 100%
  );
}

/* ---------- Beleg: Kundenlogos und Zahlen ----------
   Ein Abschnitt statt zwei dünner Bänder. Die Logos stehen frei
   im offenen Raster, die Zahlen darunter im Haarlinienraster —
   dieser Wechsel gibt dem Abschnitt inneren Kontrast. */

.proof{padding:60px 0 64px;border-bottom:1px solid var(--line);}

.proof-line{
  font-size:19px;line-height:1.5;
  max-width:600px;
}

.logo-wall{
  list-style:none;margin:46px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:44px 48px;
}
.logo-wall li{
  display:flex;align-items:center;justify-content:flex-start;
  min-height:56px;
}
.logo-wall img{
  display:block;
  width:auto;height:auto;
  max-width:100%;
  max-height:calc(var(--h,40px) * var(--logo-scale,1));
  filter:grayscale(1);
  /* Einige Dateien haben einen weißen Hintergrund statt Transparenz.
     Multiplizieren lässt reines Weiß mit der Papierfläche verschmelzen,
     ohne dass die Dateien bearbeitet werden müssen. */
  mix-blend-mode:multiply;
}

/* Ausnahmen wegen der gelieferten Dateien.
   Sauberer wäre es, diese beiden Logos als dunkle Fassung auf
   transparentem Grund zu bekommen — dann können die Regeln entfallen. */
.l-tiwag img{
  /* Vollflächige Quadratmarke mit ausgestanztem Schriftzug. In Graustufen
     wird daraus ein sehr dunkler Kasten, der die Reihe dominiert — deshalb
     aufgehellt. Besser wäre TIWAGs waagrechte Wortmarke, falls vorhanden. */
  filter:grayscale(1) brightness(2.1);
}
.l-apg img{
  /* sehr heller Verlauf, in Graustufen sonst kaum sichtbar */
  filter:grayscale(1) contrast(1.4) brightness(.72);
}

/* Optische Angleichung.
   Die Seitenverhältnisse reichen von 1:1 bis 12,6:1 — eine einheitliche
   Höhe würde die quadratische Marke riesig und die lange Wortmarke
   winzig erscheinen lassen. Deshalb ist jede Höhe so gewählt, dass alle
   Logos ungefähr dieselbe Fläche einnehmen: h = √(Fläche / Verhältnis).
   Wert je Logo bei Bedarf einzeln nachziehen. */
.l-tiwag       img{--h:40px;}   /* 1,00 : 1 — Vollfläche, wirkt schwerer */
.l-apg         img{--h:50px;}   /* 1,99 : 1 */
.l-burgenland  img{--h:44px;}   /* 2,51 : 1 */
.l-vav         img{--h:42px;}   /* 2,98 : 1 */
.l-donau       img{--h:40px;}   /* 3,44 : 1 */
.l-hdb         img{--h:30px;}   /* 7,30 : 1 */
.l-bundeskanzleramt img{--h:22px;} /* 12,60 : 1 — Breite begrenzt hier */

.proof-more{
  display:block;margin-top:34px;
  font-family:var(--font-head);font-size:13.5px;font-weight:700;
  color:var(--accent);text-decoration:none;
}
.proof-more:hover{text-decoration:underline;}

.proof .stats{margin-top:46px;}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
}
.stat{padding:24px 20px;border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat .n{
  display:block;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:30px;font-weight:700;color:var(--accent);
}
.stat .l{
  font-family:var(--font-head);
  font-size:12.5px;color:var(--muted);margin-top:6px;
}

/* ---------- Abschnittsgerüst ---------- */

section.block{padding:76px 0;border-bottom:1px solid var(--line);}
.block .eyebrow{display:block;margin-bottom:14px;}
.block h2{font-size:clamp(24px,3vw,32px);line-height:1.16;max-width:680px;}
.block .lede{font-size:17px;max-width:640px;margin-top:18px;color:var(--ink);}

/* ---------- Abgrenzung ----------
   Getönte Fläche, weil dieser Abschnitt das Positionierungsargument
   trägt und sich vom Rhythmus der übrigen absetzen soll. */

section.block.toned{
  background:var(--panel);
  border-bottom:none;
}

/* Gegenüberstellung.
   Echte Tabelle, weil es echte Vergleichsdaten sind — Screenreader
   können Zeilen- und Spaltenköpfe dadurch korrekt zuordnen. */
.vs{
  width:100%;
  border-collapse:collapse;
  /* Feste Spaltenbreiten. Ohne das verteilt der Browser nach Inhalt,
     und ein langes Kompositum wie „Herstellerpartnerschaften“ zieht
     eine Spalte auf Kosten der anderen auseinander. */
  table-layout:fixed;
  margin-top:42px;
  text-align:left;
}
.vs col.c-axis{width:19%;}
.vs col.c-them{width:39%;}
.vs col.c-us{width:42%;}

.vs th,.vs td{
  vertical-align:top;
  padding:22px 32px 22px 0;
  overflow-wrap:break-word;
}

.vs thead th,
.vs thead td{
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:400;color:var(--muted);
  padding-top:0;padding-bottom:16px;
}
/* Linien auf den Zellen, nicht auf der Zeile — das rendert zuverlässiger */
.vs tbody th,
.vs tbody td{border-top:1px solid var(--line-2);}

/* Achsenbezeichnung */
.vs tbody th{
  font-family:var(--font-head);
  font-weight:800;font-size:15px;
}

/* Linke Spalte: Beschreibung eines anderen Geschäftsmodells,
   deshalb zurückgenommen — nicht abgewertet. */
.vs td{font-size:15px;line-height:1.5;color:var(--muted);}

/* Rechte Spalte: eigene Antwort, durch die Akzentlinie geführt */
.vs .vs-us{
  color:var(--ink);
  border-left:2px solid var(--accent);
  padding-left:30px;padding-right:0;
}
.vs thead .vs-us{
  color:var(--accent);
  font-weight:700;
}

/* ---------- Wie wir arbeiten ----------
   Nummerierter Ablauf. Die Nummerierung ist hier keine Dekoration:
   Beratung → Umsetzung → Betrieb ist eine echte Reihenfolge, und
   die Schiene macht sichtbar, dass man an jedem Punkt aussteigen kann. */

.steps{
  position:relative;
  list-style:none;margin:48px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:44px;
}
/* durchgehende Schiene hinter den Nummern */
.steps::before{
  content:"";position:absolute;left:0;right:0;top:9px;
  height:1px;background:var(--line);
}

.step{position:relative;padding-top:42px;}

.step-n{
  position:absolute;top:0;left:0;
  height:18px;line-height:18px;
  padding-right:16px;
  background:var(--paper);
  font-family:var(--font-mono);
  font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--accent);
}

.step h3{font-size:17px;}
.step p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--muted);}

/* Abschluss: löst das Versprechen der Überschrift ein */
.steps-note{
  margin-top:48px;padding-top:26px;
  border-top:1px solid var(--line);
  font-size:16.5px;line-height:1.55;
  max-width:700px;
}
.steps-note .dim{color:var(--muted);}

/* ---------- Lösungen ----------
   Fünf Zeilen: links die Frage, rechts die zugehörigen Bereiche.
   Dadurch fallen die beiden einzelnen Antworten nicht als Lücken
   auf — im Rasterkasten sähe das wie ein Fehler aus. */

.areas{margin-top:46px;border-top:1px solid var(--line);}

.area-row{
  display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:0 60px;
  padding:36px 0;
  border-bottom:1px solid var(--line);
}

.area-q{
  font-size:20px;line-height:1.25;
  padding-right:20px;
}

.area-list{display:flex;flex-direction:column;}

.area{
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:24px;
  padding:15px 0;
  text-decoration:none;color:inherit;
  border-top:1px solid var(--line);
}
.area:first-child{border-top:0;padding-top:0;}
.area:last-child{padding-bottom:0;}
.area:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

.area-name{
  display:block;
  font-family:var(--font-head);
  font-weight:700;font-size:16px;
  transition:color .15s ease;
}
.area-desc{display:block;font-size:14.5px;color:var(--muted);margin-top:3px;}

/* Der Pfeil steht dauerhaft, nicht erst beim Überfahren — sonst
   ist nicht erkennbar, dass die Einträge überhaupt Links sind. */
.area-arrow{
  font-family:var(--font-head);
  font-size:15px;color:var(--muted);
  transition:color .15s ease;
}
.area:hover .area-name,
.area:hover .area-arrow{color:var(--accent);}

@media (prefers-reduced-motion: reduce){
  .area-name,.area-arrow{transition:none;}
  .hero-content > .eyebrow,
  .hero h1,
  .hero .sub,
  .hero .scan,
  .hero .scan-note,
  .hero .hero-alt{
    animation:hero-fade 200ms ease both;
    transform:none;
  }
}

/* ---------- Technologiepartner ----------
   Bewusst anders als die Kundenleiste: dort offene Logos, links
   ausgerichtet, auf Papier. Hier gerasterte Zellen, zentriert, auf
   getönter Fläche. Beide Leisten sollen sich unterscheiden lassen,
   ohne dass man die Überschrift liest — sonst hält ein flüchtiger
   Leser einen Hersteller für einen Kunden. */

.partner-grid{
  list-style:none;margin:44px 0 0;padding:0;
  display:grid;
  /* Spaltenzahl richtet sich nach der Breite. Die Linien liegen auf den
     Zellen selbst, deshalb bleibt auch eine unvollständige letzte Reihe
     sauber — es entsteht kein farbiges Loch im Raster. */
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  border-top:1px solid var(--line-2);
  border-left:1px solid var(--line-2);
}
.partner-cell{
  background:var(--paper);
  border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px;min-height:98px;
}
.partner-cell img{
  display:block;
  width:auto;height:auto;
  max-width:100%;
  max-height:var(--h,24px);
  filter:grayscale(1);
  mix-blend-mode:multiply;
}

/* Optische Angleichung: gleiche Fläche statt gleicher Höhe.
   Die Verhältnisse reichen von 3,5 : 1 (LocateRisk) bis 7,7 : 1
   (Darktrace) — bei einheitlicher Höhe wäre Darktrace doppelt so
   breit wie LocateRisk und würde die Reihe dominieren. */
.p-locaterisk img{
  --h:29px;                   /* 3,51 : 1 */
  /* helles Logo mit Unterzeile, in Graustufen sonst deutlich blasser
     als die übrigen. Eine dunkle Fassung wäre die sauberere Lösung. */
  filter:grayscale(1) contrast(1.35) brightness(.78);
}
.p-cymulate   img{--h:28px;}  /* 3,71 : 1 */
.p-fudo       img{--h:28px;}  /* 3,76 : 1 */
/* Hornetsecurity ist als einziges Logo der Leiste gestapelt —
   Signet über der Wortmarke, 1,55 : 1 statt der 3,5 bis 7,7 : 1
   der übrigen. Nach der Flächenformel h = √(Fläche / Verhältnis)
   ergibt das 43 px Höhe: deutlich höher als die anderen und
   trotzdem gleich groß in der Fläche. Das ist der Zweck der
   Formel; wer hier auf eine einheitliche Höhe zurückgeht, macht
   das Logo optisch winzig.

   Die Datei ist eine umgefärbte Fassung: Das gelieferte Logo
   trägt weiße Schrift auf transparentem Grund und wäre auf der
   hellen Leiste unsichtbar; das Grün des Signets ergibt unter
   dem grayscale-Filter der Zelle 74 % Helligkeit und
   verschwände unter mix-blend-mode: multiply fast. Deshalb liegt
   es einfarbig in --ink vor. Das Original steht in
   _originalbilder/partner/. */
.p-hornetsecurity img{--h:43px;}  /* 1,55 : 1 */
.p-proofpoint img{--h:24px;}  /* 4,98 : 1 */
.p-groupib    img{--h:24px;}  /* 5,11 : 1 */
.p-knowbe4    img{--h:24px;}  /* 5,20 : 1 */
.p-zerofox    img{--h:23px;}  /* 5,48 : 1 */
.p-extrahop   img{--h:22px;}  /* 5,88 : 1 */
.p-darktrace  img{--h:20px;}  /* 7,74 : 1 */

/* ---------- Branchen ----------
   Arbeitsteilung mit der Logoleiste: dort steht, wer Kunde ist,
   hier steht, was dort läuft. Ohne Rahmen, damit die fünfte Zelle
   in der letzten Reihe nicht als Lücke auffällt. */

.sectors{
  list-style:none;margin:46px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:42px 44px;
}
.sector{border-top:2px solid var(--accent);padding-top:16px;}
.sector-name{
  display:block;
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.sector p{margin-top:12px;font-size:15px;line-height:1.55;}

.sectors-more{
  display:inline-block;margin-top:40px;
  font-family:var(--font-head);font-size:13.5px;font-weight:700;
  color:var(--accent);text-decoration:none;
}
.sectors-more:hover{text-decoration:underline;}

/* ---------- Bildband ----------
   Randlos über die volle Breite, dunkel wie der Hero. Trennt die
   längste Textstrecke der Seite und nimmt den Auftakt formal auf. */

.band{
  position:relative;
  height:300px;
  overflow:hidden;
  background:linear-gradient(160deg,#12203a 0%,var(--hero-bg) 70%);
}
.band img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  /* Der gesamte Bildinhalt — Masten, Grat, Horizont — liegt im unteren
     Drittel der Datei. An der Unterkante verankert bleibt er vollständig
     sichtbar und rückt in der Fläche nach oben; ein mittiger Ausschnitt
     würde nur leeren Himmel zeigen. */
  object-position:center bottom;
}

/* ---------- Ansprechpartner ----------
   Eine Person, keine Teamkachel-Wand. Das ist die Einlösung der
   Achse „Nähe“ aus der Gegenüberstellung weiter oben. */

.contact-person{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:0 44px;
  align-items:start;
  margin-top:42px;
}
.cp-photo{
  aspect-ratio:4/5;
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden;
}
.cp-photo img{display:block;width:100%;height:100%;object-fit:cover;}

.cp-name{
  font-family:var(--font-head);
  font-weight:800;font-size:22px;letter-spacing:-.01em;
}
.cp-role{
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:8px;
}
.cp-text{
  font-size:16px;line-height:1.6;
  margin-top:20px;max-width:560px;
}
.cp-contact{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line);
}
.cp-contact a,
.cp-contact span{
  font-family:var(--font-mono);
  font-size:13.5px;color:var(--muted);text-decoration:none;
}
.cp-contact a:hover{color:var(--accent);}

/* ---------- Regulatorik ----------
   Zwei Wege der Betroffenheit, getrennt durch eine senkrechte Linie.
   Die Linie markiert die Gabelung — sie ist hier kein Zierrat,
   sondern die Aussage: es gibt genau zwei Wege hinein. */

.routes{
  display:grid;grid-template-columns:1fr 1fr;
  margin-top:48px;
}
.route{padding-right:56px;}
.route + .route{
  padding-right:0;padding-left:56px;
  border-left:1px solid var(--line-2);
}

.route-label{
  display:block;
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
  padding-bottom:14px;margin-bottom:20px;
  border-bottom:1px solid var(--line-2);
}
/* Der zweite Weg ist der übersehene — deshalb der einzige Akzent */
.route-indirect .route-label{color:var(--accent);}

.route p{font-size:15.5px;line-height:1.6;}
.route-em{
  font-family:var(--font-head);
  font-weight:700;font-size:15px;line-height:1.45;
  margin-top:18px;
}

.reg-more{
  display:inline-block;margin-top:44px;
  font-family:var(--font-head);font-size:13.5px;font-weight:700;
  color:var(--accent);text-decoration:none;
}
.reg-more:hover{text-decoration:underline;}

/* ---------- Abschluss ----------
   Dunkel wie der Hero: Die Seite schließt, wie sie geöffnet hat,
   und wiederholt dasselbe Angebot — für jemanden, der bis hierher
   gelesen hat, ist es jetzt deutlich näher an einer Entscheidung. */

.close{
  background:var(--hero-bg);
  color:var(--hero-fg);
  padding:84px 0;
}
.close-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:0 64px;align-items:start;
}
.close .eyebrow{color:var(--hero-dim);}
.close h2{color:var(--hero-fg);}
/* Der Abschluss ist kein .block, erbt die Regeln für .lede also nicht */
.close .lede{
  font-size:17px;line-height:1.55;
  margin-top:18px;max-width:460px;
  color:var(--hero-dim);
}

.close-alt{
  margin-top:38px;padding-top:26px;
  border-top:1px solid rgba(238,241,246,.16);
  max-width:460px;
}
.close-alt p{font-size:15px;color:var(--hero-dim);}
.close-alt .hero-alt{margin-top:16px;}

/* Was die Analyse findet — macht das Angebot greifbar.
   Bewusst als Auszeichnung statt als Bild: Beschriftungen bleiben
   scharf, durchsuchbar und in der Farbwelt der Seite. */
.findings{
  border:1px solid rgba(238,241,246,.2);
  background:rgba(255,255,255,.035);
  padding:26px 28px 22px;
}
.findings-head{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hero-dim);
}
.findings-domain{
  font-family:var(--font-mono);
  font-size:16px;color:var(--accent-hero);
  margin-top:8px;padding-bottom:18px;
  border-bottom:1px solid rgba(238,241,246,.18);
  transition:opacity .18s var(--ease-out), transform .18s var(--ease-out), color .18s var(--ease-out);
}
.findings-domain.is-updating{
  opacity:.55;
  transform:translateY(2px);
}
.findings ul{list-style:none;margin:0;padding:0;}
.findings li{
  position:relative;
  padding:13px 0 13px 22px;
  font-size:14.5px;line-height:1.45;
  border-bottom:1px solid rgba(238,241,246,.09);
}
.findings li:last-child{border-bottom:0;padding-bottom:0;}
.findings li::before{
  content:"";position:absolute;left:0;top:20px;
  width:7px;height:7px;
  background:var(--accent-hero);
}
.findings-note{
  margin-top:18px;
  font-size:13px;color:var(--hero-dim);
}

/* ---------- Umbrüche ---------- */

@media (max-width:960px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .sectors{grid-template-columns:repeat(2,1fr);gap:36px 36px;}
  .band{height:230px;}
  .close-inner{grid-template-columns:1fr;gap:44px 0;}
  .close .lede,.close-alt{max-width:none;}
  .contact-person{grid-template-columns:200px minmax(0,1fr);gap:0 32px;}
  .cp-name{font-size:20px;}

  /* Bildpanel rückt unter den Text */
  .hero{padding-top:calc(var(--head-h) + 64px);padding-bottom:0;}
  .hero-content{max-width:none;}
  .hero-media{
    position:relative;top:auto;right:auto;bottom:auto;
    width:auto;height:210px;margin-top:40px;
  }
  .hero-media img{object-position:center 62%;}
  .hero-media::after{display:none;}

  .logo-wall{grid-template-columns:repeat(3,1fr);gap:38px 40px;}
}

/* Der Ablauf stapelt sich, die waagrechte Schiene entfällt —
   untereinander trennen die Linien der einzelnen Schritte. */
@media (max-width:860px){
  .steps{grid-template-columns:1fr;gap:0;margin-top:40px;}
  .steps::before{display:none;}
  .step{
    padding-top:24px;margin-top:24px;
    border-top:1px solid var(--line);
  }
  .step:first-child{margin-top:0;}
  .step-n{
    position:static;display:block;
    height:auto;line-height:1;
    padding:0;margin-bottom:10px;background:none;
  }
  .steps-note{margin-top:36px;}

  /* Frage rückt über die Bereiche */
  .area-row{grid-template-columns:1fr;gap:0;padding:30px 0;}
  .area-q{font-size:19px;padding-right:0;margin-bottom:18px;}

  .partner-cell{min-height:92px;padding:22px 18px;}
}

/* Gegenüberstellung stapelt sich: die Spaltenköpfe wandern
   als Beschriftung in die einzelnen Zellen. */
@media (max-width:760px){
  /* Die Gabelung stapelt sich, die senkrechte Linie wird waagrecht */
  .routes{grid-template-columns:1fr;}
  .route{padding-right:0;}
  .route + .route{
    padding-left:0;border-left:0;
    margin-top:34px;padding-top:34px;
    border-top:1px solid var(--line-2);
  }

  .vs,.vs thead,.vs tbody,.vs tr,.vs th,.vs td{
    display:block;width:auto;
  }
  .vs thead{display:none;}
  /* Erst in schmalen Spalten lohnt die Silbentrennung —
     bei voller Breite erzeugt sie nur unnötige Trennstriche. */
  .vs td{hyphens:auto;}
  .vs{margin-top:34px;}
  .vs tbody tr{padding:24px 0;}
  .vs tbody th{padding:0 0 14px;font-size:16px;}
  .vs td{padding:0 0 16px;}
  .vs td:last-child{padding-bottom:0;}
  .vs .vs-us{padding-left:16px;}
  .vs td::before{
    content:attr(data-label);
    display:block;margin-bottom:6px;
    font-family:var(--font-mono);
    font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--muted);
  }
  .vs td.vs-us::before{color:var(--accent);}
}

@media (max-width:560px){
  .stats{grid-template-columns:1fr;}
  .sectors{grid-template-columns:1fr;gap:32px;}
  .band{height:170px;}
  .close{padding:60px 0;}
  .findings{padding:22px 20px 18px;}
  .contact-person{grid-template-columns:1fr;gap:24px 0;}
  .cp-photo{max-width:220px;}
  .stat{border-right:none;border-bottom:1px solid var(--line);}
  .stat:last-child{border-bottom:none;}
  .hero{
    padding-top:calc(var(--head-h) + 38px);
    padding-bottom:48px;
  }
  .hero h1{font-size:32px;line-height:1.08;margin-top:12px;}
  .hero .sub{font-size:16.5px;line-height:1.52;margin-top:16px;}
  /* Auf kleinen Displays bleibt das Bild Atmosphäre statt eigener
     Abschnitt: sichtbar genug für Tiefe, dunkel genug für Text. */
  .hero-media{
    display:block;
    position:absolute;inset:0;
    width:auto;height:auto;margin:0;
  }
  .hero-media img{
    object-position:72% center;
    opacity:.38;
  }
  .hero-media::after{
    display:block;
    background:linear-gradient(
      90deg,
      var(--hero-bg) 0%,
      rgba(10,18,30,.94) 46%,
      rgba(10,18,30,.72) 100%
    );
  }
  .scan{flex-direction:column;max-width:none;margin-top:24px;}
  .scan input{border-right:1.5px solid rgba(238,241,246,.32);border-radius:2px;}
  .scan .btn{border-radius:2px;margin-top:10px;padding:14px 22px;}
  .scan-note{margin-top:10px;font-size:13px;line-height:1.45;}
  .hero-alt{margin-top:20px;font-size:13.5px;}
  section.block{padding:56px 0;}
  .proof{padding:48px 0 52px;}
  .proof-line{font-size:17.5px;}
  .logo-wall{grid-template-columns:repeat(2,1fr);gap:34px;}
  .logo-wall img{max-height:40px;}
  .partner-cell{min-height:86px;}
}

@media (prefers-reduced-motion: reduce){
  .findings-domain{
    transition:opacity .18s ease, color .18s ease;
  }
  .findings-domain.is-updating{
    transform:none;
  }
}