/* =========================================================================
   Nexus Service — gemeinsames Stylesheet aller Seiten
   Aufbau: 1 Kopf · 2 Bausteine · 3 Hero · 4 Merkmale · 5 Lösungen/Netzwerk
           6 Pakete · 7 Partner · 8 Abschluss · 9 Unterseiten · 10 Fuß
           11 Breakpoints
   Breakpoints: 1180 · 980 · 880 · 760 · 640 · 520
   ========================================================================= */

/* ------------------------------- Schrift ------------------------------ */
/* Inter als Variable Font, lokal ausgeliefert. Zwei Subsets: latin deckt
   Deutsch ab, latin-ext kommt nur bei Bedarf dazu (unicode-range). */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-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:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-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-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ----------------------------- Grundlagen ----------------------------- */
:root{
  --ink:        #10305F;
  --ink-tief:   #0C2448;
  --rot:        #E11A3C;
  --rot-tief:   #C10F2E;
  --blau:       #2B84D8;
  --blau-hell:  #E8F3FC;
  --gruen:      #22B36A;
  --text:       #5C6E85;
  --text-leise: #8496AC;
  --linie:      #E4EBF3;
  --soft:       #F4F9FD;
  --rose:       #FFF4F7;
  --weiss:      #FFFFFF;

  /* Die Seite steht als zentrierte Spalte auf weißem Grund.
     --rahmen ist die Außenkante der farbigen Flächen, --wrap die Breite des
     Inhalts darin. Auf breiteren Bildschirmen bleibt links und rechts Weiß. */
  --rahmen:     1440px;
  --wrap:       1200px;
  --gutter:     32px;
  --radius:     14px;
  --radius-gr:  18px;
  --kopf-h:     96px;          /* wie Nexus Service: 96 px, Logo 80 px */

  --schatten:      0 2px 10px rgba(16,48,95,.05);
  --schatten-mid:  0 10px 30px rgba(16,48,95,.08);
  --schatten-rot:  0 8px 20px rgba(225,26,60,.25);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--kopf-h); }

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Liberation Sans",sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--weiss);
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }

h3{ hyphens:none; overflow-wrap:normal; }

h1,h2,h3{
  margin:0;
  color:var(--ink);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.08;
  /* Lange Komposita wie „Datenschutzerklärung" müssen auf schmalen Geräten
     umbrechen dürfen, sonst dehnen sie die Seite. hyphens:auto trennt nach
     deutschen Regeln (das lang-Attribut steht auf <html>). */
  overflow-wrap:break-word;
  hyphens:auto;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --------------------------- Seitenrahmen ---------------------------- */
/* Jede Fläche der Seite — Hero, Sektionen, Fuß — endet bei --rahmen und
   sitzt mittig. Was darüber hinausgeht, ist der weiße Seitenhintergrund.
   Der Kopf bleibt bewusst über die volle Breite stehen: er ist selbst weiß,
   seine untere Linie trennt die Seite vom Browserrand. */
main > section,
.fuss{
  max-width:var(--rahmen);
  margin-inline:auto;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--blau); outline-offset:3px; border-radius:4px; }

/* ------------------------------ Bausteine ----------------------------- */
.kicker{
  margin:0 0 18px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  /* Nicht --rot: Die Zeile ist 13 px fett und zählt damit nicht als große
     Schrift (WCAG 2.2 SC 1.4.3 verlangt dann 4,5:1, nicht 3:1). Gemessen
     auf dem hellblauen Hero-Grund kam #E11A3C auf 4,40:1, #C10F2E auf
     5,53:1. Auf Weiß steigen beide, entschieden hat der schlechteste Ort. */
  color:var(--rot-tief);
}
.kicker--grau{ color:var(--text-leise); }

.titel{ font-size:clamp(30px,3.2vw,44px); margin-bottom:24px; }
.fliess{ margin:0 0 30px; max-width:46ch; color:var(--text); }

.pfeil{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.pfeil--gross{ width:26px; height:26px; stroke-width:2; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px;
  border:2px solid transparent;
  border-radius:10px;
  font-size:16px; font-weight:700; line-height:1.2;
  white-space:nowrap;          /* Buttons bleiben einzeilig wie in der Vorlage */
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease,
             box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.btn--rot{ background:var(--rot); color:#fff; box-shadow:var(--schatten-rot); }
.btn--rot:hover{ background:var(--rot-tief); transform:translateY(-1px); }
.btn--linie{ background:#fff; color:var(--blau); border-color:#BFDDF5; }
.btn--linie:hover{ border-color:var(--blau); background:var(--blau-hell); }
.btn--klein{ padding:12px 22px; font-size:15px; border-radius:9px; }
.btn--gross{ padding:18px 34px; font-size:17px; }
.btn--block{ width:100%; margin-top:auto; }

.punkt{
  width:9px; height:9px; flex:none;
  display:inline-block; border-radius:50%;
  background:var(--gruen);
}
.punkt--gruen{ box-shadow:0 0 0 3px rgba(34,179,106,.18); }

/* ================================ KOPF ================================ */
.kopf{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie);
}
.kopf__innen{
  position:relative;             /* Bezug für das Megamenü */
  display:flex; align-items:center;
  gap:24px;
  min-height:var(--kopf-h);
}
/* Aufbau wie bei Nexus Service: Logo und Menü links, Beratungsknopf rechts. */
.marke{ flex:none; }
.marke__logo{ width:auto; height:80px; }
.kopf__cta{ margin-left:auto; flex:none; }

.nav{ display:flex; align-items:center; gap:34px; margin-left:16px; }
.nav__liste{ display:flex; align-items:center; gap:30px; }
.nav__punkt--mega{ display:flex; align-items:center; }
.nav__punkt > a{
  display:inline-flex; align-items:center;
  min-height:44px;               /* Klickfläche, nicht nur Textzeile */
  font-size:15.5px; font-weight:600; color:var(--text);
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.nav__punkt > a:hover{ color:var(--ink); border-bottom-color:var(--rot); }
.nav__punkt > a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--rot); }
.nav__cta{ display:none; }

/* Pfeil neben „Leistungen": eigener Knopf, damit das Megamenü auch per
   Tastatur aufgeht. Der Link selbst führt weiter auf die Leistungsseite. */
.nav__auf{
  display:grid; place-items:center;
  width:28px; height:44px; margin-left:1px; padding:0;
  background:none; border:0; border-radius:6px;
  color:var(--text); cursor:pointer;
}
.nav__auf svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s ease;
}
.nav__auf:hover{ color:var(--rot); }
.nav__punkt--mega.ist-offen .nav__auf svg{ transform:rotate(180deg); }

/* --- Megamenü (Aufbau Nexus Service) --- */
.mega{
  position:absolute; top:calc(100% - 6px); left:var(--gutter); right:var(--gutter);
  z-index:110;
  padding-top:6px;               /* Brücke: die Maus verliert den Bereich nicht */
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nav__punkt--mega.ist-offen .mega{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s;
}
.mega__innen{
  background:#fff;
  border:1px solid var(--linie);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(16,48,95,.16);
  padding:32px;
}
.mega__raster{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.mega__titel{ margin:0 0 12px; font-size:14px; font-weight:800; color:var(--ink); }
.mega__raster li + li{ margin-top:4px; }
.mega__raster a{
  display:block; padding:4px 0;
  font-size:14.5px; color:var(--text);
  transition:color .16s ease;
}
.mega__raster a:hover{ color:var(--rot-tief); }
.mega__balken{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:24px; padding:20px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--rot-tief), var(--rot));
  color:#fff;
}
.mega__balken p{ margin:0; }
.mega__balken-titel{ font-weight:800; }
.mega__balken-text{ font-size:14px; opacity:.92; }
.mega__balken-knopf{
  display:inline-flex; align-items:center; min-height:40px;
  padding:8px 16px; border-radius:9px;
  background:#fff; color:var(--rot-tief);
  font-size:14px; font-weight:700; white-space:nowrap;
}
.mega__balken-knopf:hover{ background:var(--rose); }

.burger{
  display:none;
  width:46px; height:42px;
  padding:10px;
  background:none; border:1px solid var(--linie); border-radius:9px;
  cursor:pointer;
}
.burger span{
  display:block; height:2.4px; border-radius:2px;
  background:var(--ink);
  transition:transform .22s ease, opacity .18s ease;
}
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.4px) rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:var(--kopf-h) 0 0; z-index:90;
  background:rgba(12,36,72,.42);
}

/* ================================ HERO ================================ */
.hero{
  position:relative;
  /* Farben aus der Vorlage gemessen: linker Rand #F0F9FF, neben der
     Headline #E5F8FF, zur Szene hin #C7EAFE. Der Hero beginnt dort nicht
     mit Weiß, sondern mit einem sehr hellen Blau. */
  background:linear-gradient(100deg,
    #F0F9FF 0%, #ECF8FE 10%, #E1F4FD 20%, #D4EFFD 30%, #C7EAFE 42%, #C2E8FE 100%);
  overflow:hidden;
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:stretch;        /* Bildspalte so hoch wie die Textspalte */
  gap:40px;
  padding-block:0;
}
/* Der Textblock steht bündig mit dem Logo an der linken Inhaltskante —
   wie in der Vorlage. Weiter links läge er außerhalb der Spalte, an der
   alle übrigen Abschnitte ausgerichtet sind. */
.hero__text{
  position:relative; z-index:2;
  align-self:center;
  padding-block:34px 38px;      
}

.hero__titel{
  font-size:clamp(34px,3.4vw,48px);   /* vorher clamp(38px,5.2vw,68px), drei feste Zeilen */
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.03em;
  margin-bottom:18px;
  text-wrap:balance;
}
/* Dunkler als der übrige Fließtext. Der Text steht im Hero nicht auf einer
   Fläche, sondern auf der Illustration; hinter der dritten Zeile liegt das
   Gerüst des Krans. Gemessen am schlechtesten Bildpunkt unter einem
   Buchstaben (nicht am hellsten Feld daneben) ergab #4E6079 dort nur
   4,02:1 — WCAG 2.2 SC 1.4.3 verlangt 4,5:1. #445470 hält den Abstand
   auch dort, wo die Illustration unter dem Text beginnt. */
.hero__fliess{
  color:#445470;
  margin:0 0 22px;
  max-width:44ch;
  font-size:17.5px;
  line-height:1.72;
}

.hero__balken{
  display:inline-flex; align-items:center; justify-content:space-between;
  gap:34px;
  width:min(100%,430px);
  padding:18px 24px;
  background:var(--rot);
  color:#fff;
  border-radius:10px;
  box-shadow:var(--schatten-rot);
  transition:background-color .18s ease, transform .18s ease;
}
.hero__balken:hover{ background:var(--rot-tief); transform:translateY(-1px); }
.hero__balken-text{ display:flex; flex-direction:column; gap:3px; }
.hero__balken-text strong{
  font-size:17px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
}
.hero__balken-text span{ font-size:14.5px; opacity:.92; }

/* Die Illustration steht rechtsbündig in voller Hero-Höhe, ungeschnitten.
   So beginnen Brücke und rotes Gebäude rechts neben dem Fließtext statt
   hinter ihm — wie in der Vorlage. Bei 1440 px: Bild ab x 333, Brücke ab
   631, rotes Gebäude ab 674, Fließtext endet bei 570. Aus dem Textfluss
   genommen, damit die Hero-Höhe vom Text bestimmt wird. */
.hero__bild{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* Heller Schleier nur noch über dem Textbereich. Er endet vor der Brücke
   (bei 1440 px ab x 631 = 44 %), damit sie und das rote Gebäude in voller
   Farbe stehen. Viele Stützstellen statt weniger: Ein linearer Verlauf
   knickt an jeder Stützstelle, das Auge sieht die Knicke als Streifen.
   Den Übergang vom Wasser nach links übernimmt die Maske am Bild. */
.hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(240,249,255,.90)  0%,
    rgba(240,249,255,.88) 20%,
    rgba(240,249,255,.83) 26%,
    rgba(240,249,255,.74) 30%,
    rgba(240,249,255,.61) 33%,
    rgba(240,249,255,.46) 36%,
    rgba(240,249,255,.31) 39%,
    rgba(240,249,255,.18) 42%,
    rgba(240,249,255,.08) 45%,
    rgba(240,249,255,.02) 48%,
    rgba(240,249,255,0)   51%);
}
/* Die linke Bildkante läuft über eine Maske in den Hero-Grund aus. Ohne
   sie stünde unten links das kräftige Wasser als senkrechte Kante neben
   dem hellen Grund. Die Maske reicht über 26 % der Bildbreite: Bis dort
   liegt links nur Himmel und Wasser, die Brücke beginnt bei 27 %. */
.hero__illu{
  position:absolute; top:0; right:0;
  height:100%; width:auto; max-width:none;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.10) 4%, rgba(0,0,0,.30) 9%,
    rgba(0,0,0,.55) 14%, rgba(0,0,0,.78) 19%, rgba(0,0,0,.93) 23%, #000 26%);
          mask-image:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.10) 4%, rgba(0,0,0,.30) 9%,
    rgba(0,0,0,.55) 14%, rgba(0,0,0,.78) 19%, rgba(0,0,0,.93) 23%, #000 26%);
}
.hero__script{
  position:absolute; top:26px; right:8px; z-index:2;
  width:clamp(120px,13vw,186px); height:auto;
}

/* ============================== MERKMALE ============================== */
.merkmale{ background:var(--weiss); border-bottom:1px solid var(--linie); }
.merkmale__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding-block:42px;
}
/* Die Maße sind eng gerechnet: Bei --wrap 1200 bleiben je Spalte 284 px,
   davon gehen Icon, Spalte und Innenabstand ab. Die längste Unterzeile
   („Direkt in Hamburg. Auf Augenhöhe.") braucht 204 px — mit diesen Werten
   stehen 210 zur Verfügung, alle vier bleiben also einzeilig. */
.merkmal{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:11px;
  align-items:start;
  padding-inline:12px;
  border-left:1px solid var(--linie);
}
.merkmal:first-child{ border-left:0; padding-left:0; }
.merkmal img{ grid-row:1 / span 2; width:38px; height:38px; margin-top:2px; object-fit:contain; }
.merkmal h2{ font-size:17.5px; line-height:1.26; margin-bottom:5px; }
.merkmal p{ margin:0; font-size:12px; color:var(--text-leise); line-height:1.5; }

/* ========================= LÖSUNGEN / NETZWERK ======================== */
.loesungen{
  background:linear-gradient(180deg,#F7FBFE 0%,#EAF4FC 55%,#F4FAFE 100%);
  padding-block:72px 84px;
}
/* Aufbau wie in der Vorlage: Text oben links, die Kette Internet →
   FRITZ!Box → Dream Machine → Switch senkrecht in der Mitte, Statuskarte
   oben rechts — und darunter die Gerätereihe über die GANZE Breite. Der
   Access Point steht dadurch unter dem Text.
   Text und Diagramm liegen dafür in derselben Rasterzelle übereinander:
   Das Diagramm ist so breit wie der Inhalt, der Text belegt nur die linke
   obere Ecke. Die Kette ist höher als der Text, die Geräte beginnen erst
   darunter. */
.loesungen__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"stapel";
}
.loesungen__text,
.loesungen__visual{ grid-area:stapel; }
.loesungen__text{
  position:relative; z-index:3;
  align-self:start;
  max-width:470px;
  padding-top:30px;
}
.loesungen__visual{
  position:relative;
  display:block;
}
.loesungen__visual .status{
  position:absolute;
  top:10px; right:0;
  width:282px;
  z-index:2;
}

/* --- Netzwerkdiagramm --- */
.netz{
  position:relative;
  /* Senkrechte Achse der Kette; das Fächer-SVG startet auf demselben Wert.
     --bildspalte steuert Bildgröße und Linienlage in Kette UND Geräteliste. */
  --achse:52%;
  --bildspalte:162px;
}

/* Die Kette wird als Ganzes so eingerückt, dass die Bildmitte auf --achse
   liegt; das Label sitzt dadurch direkt neben dem Gerät statt am Spaltenrand.
   --achse ist zugleich der Startpunkt des Fächer-SVG (dort x=520 von 1000). */
.netz__kette{
  display:flex; flex-direction:column; align-items:stretch;
  padding-left:calc(var(--achse) - (var(--bildspalte) / 2));
}

.netz__knoten--zeile{
  position:relative;
  display:grid;
  grid-template-columns:var(--bildspalte) minmax(0,1fr);
  align-items:center;
  column-gap:14px;
  padding-block:20px;         /* Lücke zwischen zwei Geräten: 40 px Rohr */
}
.netz__bild{ position:relative; justify-self:center; display:block; }
/* Die weissen Geraete (Dream Machine, Switch, Access Point, FRITZ!Box)
   tragen im Quellbild einen hellen Restrand, den die Freistellung nicht
   entfernen kann, ohne das Geraet selbst anzugreifen. multiply blendet ihn
   auf dem hellen Sektionsgrund aus. */
.netz__bild img{
  width:auto; max-height:84px; margin-inline:auto;
  mix-blend-mode:multiply;
}
.netz__bild .punkt{
  position:absolute; top:2px; right:-6px;
}
/* --- Pipelines ---
   Ein Rohr füllt genau die Lücke zwischen zwei Gerätebildern (Unterkante
   Bild bis Oberkante nächstes Bild = zweimal padding-block der Zeile). Es
   darf nicht in die Bilder hineinragen und auch nicht dahinter liegen: Die
   Bilder sind multiplizierend gemischt, ein Rohr dahinter schiene durch
   die weißen Gehäuse.
   Die Verbindungen sind Rohre: blauer Mantel, heller Glanzstreifen, darin
   wandern weiße Punkte vom Internet zu den Geräten. Senkrecht (Kette, und
   unter 760 px auch die Geräteliste) als CSS-Hintergrund, im Fächer als
   SVG-Strichmuster. Beide Punktfolgen: 4 px Punkt, alle 16 px. */
.netz{
  --rohr:#2B84D8;
  --rohr-glanz:#8CC8F7;
  --rohr-breite:8px;
}
.netz__knoten--zeile::after,          /* senkrechtes Rohr zur nächsten Zeile */
.netz__geraet::after{
  content:"";
  position:absolute; left:calc(var(--bildspalte) / 2); top:calc(100% - 20px);
  width:var(--rohr-breite); height:40px; margin-left:calc(var(--rohr-breite) / -2);
  border-radius:calc(var(--rohr-breite) / 2);
  background:
    radial-gradient(circle, #fff 0 1.7px, rgba(255,255,255,0) 2.3px) 50% 0 / 100% 16px repeat-y,
    linear-gradient(90deg, var(--rohr) 0 22%, var(--rohr-glanz) 42% 55%, var(--rohr) 78% 100%);
  animation:netz-fluss-senkrecht .8s linear infinite;
}
.netz__geraet::after{ display:none; }   /* nur in der senkrechten Liste */
@keyframes netz-fluss-senkrecht{
  to{ background-position:50% 16px, 0 0; }
}
.netz__knoten--zeile::before,        /* Verbindungspunkt auf der Linie */
.netz__faecher i{
  content:"";
  position:absolute; z-index:1;
  width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%;
  background:var(--blau);
  border:2px solid #fff;
  box-shadow:0 0 0 3px rgba(43,132,216,.18);
}
.netz__knoten--zeile::before{ left:calc(var(--bildspalte) / 2); top:100%; }
.netz__knoten--switch::after,
.netz__knoten--switch::before{ display:none; }

/* Die Labels enden vor der Statuskarte, die oben rechts darüberliegt. */
.netz__label{
  display:flex; flex-direction:column; justify-self:start;
  max-width:172px;
}
.netz__label strong{ font-size:15px; font-weight:700; color:var(--ink); line-height:1.3; }
.netz__label small{ font-size:13.5px; color:var(--text-leise); line-height:1.35; }

/* Beginnt an der Unterkante des Switch-Bildes, nicht seiner Zeile. */
.netz__faecher{ position:relative; display:block; width:100%; height:112px; margin-top:-20px; }
.netz__faecher svg{ display:block; width:100%; height:100%; overflow:visible; }
.netz__faecher use{ fill:none; stroke-linecap:round; }
.netz__faecher .rohr use{ stroke:var(--rohr); stroke-width:var(--rohr-breite); }
.netz__faecher .rohr-glanz use{ stroke:var(--rohr-glanz); stroke-width:2.5px; opacity:.9; }
/* Strich der Länge 0 mit runder Kappe = runder Punkt. Das Muster wandert,
   weil der Versatz um eine Musterlänge (16 px) weiterläuft. */
.netz__faecher .fluss use{
  stroke:#fff; stroke-width:4px;
  stroke-dasharray:0 16px;
  animation:netz-fluss-bogen .8s linear infinite;
}
@keyframes netz-fluss-bogen{
  to{ stroke-dashoffset:-16px; }
}

/* WLAN: Funkwellen gehen vom Access Point aus — zwei Ringe, versetzt. */
.netz__geraet--wlan .netz__bild::before,
.netz__geraet--wlan .netz__bild::after{
  content:"";
  position:absolute; left:50%; top:50%; z-index:0;
  width:88px; height:88px; margin:-44px 0 0 -44px;
  border:2px solid var(--rohr);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  animation:netz-wlan 2.6s ease-out infinite;
}
.netz__geraet--wlan .netz__bild::after{ animation-delay:1.3s; }
.netz__geraet--wlan .netz__bild img{ position:relative; z-index:1; }
@keyframes netz-wlan{
  0%  { opacity:.75; transform:scale(.8); }
  100%{ opacity:0;   transform:scale(1.9); }
}
/* Anhalten (WCAG 2.2 SC 2.2.2): Knopf unter dem Diagramm, rechtsbündig. */
.netz__pause{
  display:flex; align-items:center; gap:8px;
  margin:22px 0 0 auto;
  min-height:40px; padding:8px 14px;
  font:inherit; font-size:14px; font-weight:600; color:var(--text);
  background:#fff;
  border:1px solid var(--linie); border-radius:9px;
  cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.netz__pause[hidden]{ display:none; }
.netz__pause:hover{ color:var(--ink); border-color:var(--blau); }
.netz__pause svg{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.netz-angehalten .netz__knoten--zeile::after,
.netz-angehalten .netz__geraet::after,
.netz-angehalten .netz__faecher .fluss use,
.netz-angehalten .netz__geraet--wlan .netz__bild::before,
.netz-angehalten .netz__geraet--wlan .netz__bild::after{
  animation-play-state:paused;
}
@keyframes netz-wlan-klein{
  0%  { opacity:.75; transform:scale(.85); }
  100%{ opacity:0;   transform:scale(1.35); }
}
/* Lage der Punkte auf den Bögen, berechnet (siehe Kommentar im HTML). */
.netz__faecher i:nth-of-type(1){ left:41.5%; top:18%; }
.netz__faecher i:nth-of-type(2){ left:30.5%; top:35%; }
.netz__faecher i:nth-of-type(3){ left:14.8%; top:51%; }
.netz__faecher i:nth-of-type(4){ left:40%;   top:40%; }
.netz__faecher i:nth-of-type(5){ left:50.9%; top:45%; }
.netz__faecher i:nth-of-type(6){ left:61.8%; top:42%; }
.netz__faecher i:nth-of-type(7){ left:62.7%; top:19%; }
.netz__faecher i:nth-of-type(8){ left:76%;   top:38%; }

.netz__geraete{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-top:4px;
}
.netz__geraet{ text-align:center; padding-inline:4px; }
.netz__geraet .netz__bild{ display:inline-block; margin-bottom:12px; }
.netz__geraet .netz__bild img{ max-height:88px; }
.netz__geraet strong{
  display:block; font-size:15px; font-weight:700; color:var(--ink);
  line-height:1.3;
}
.netz__geraet small{ display:block; font-size:13px; color:var(--text-leise); line-height:1.4; margin-top:2px; }

/* --- Systemstatus --- */
.status{
  background:#fff;
  border:1px solid var(--linie);
  border-radius:var(--radius-gr);
  box-shadow:var(--schatten-mid);
  overflow:hidden;
}
.status__kopf{ padding:16px 20px 14px; border-bottom:1px solid var(--linie); }
.status__titel{
  display:flex; align-items:center; gap:9px;
  margin:0 0 4px;
  font-size:16px; font-weight:800; color:var(--ink);
}
.status__alle{
  display:flex; align-items:center; gap:9px;
  margin:0; font-size:13.5px; font-weight:600; color:var(--gruen);
}
.status__liste{ padding:8px 12px 14px; }
.status__liste li{
  display:flex; align-items:center; gap:12px;
  padding:9px 8px;
}
.status__icon{
  display:grid; place-items:center;
  width:34px; height:34px; flex:none;
  border-radius:9px;
  background:var(--blau-hell);
}
.status__icon svg{
  width:18px; height:18px;
  fill:none; stroke:var(--blau); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.status__zeile{ display:flex; flex-direction:column; min-width:0; }
.status__zeile strong{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.35; }
.status__zeile small{ font-size:12.5px; color:var(--text-leise); line-height:1.35; }

/* =============================== PAKETE =============================== */
.pakete{ background:var(--weiss); padding-block:88px; }
.pakete__grid{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:34px;
  align-items:start;
}
.pakete__intro{ padding-top:16px; }
.pakete__intro .titel{ font-size:clamp(28px,2.7vw,38px); }
.pakete__intro .fliess{ font-size:15.5px; }
.pakete__karten{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

.paket{
  position:relative;
  display:flex; flex-direction:column;
  padding:26px 24px 24px;
  background:#fff;
  border:1px solid var(--linie);
  border-radius:var(--radius-gr);
  box-shadow:var(--schatten);
  transition:transform .2s ease, box-shadow .2s ease;
}
.paket:hover{ transform:translateY(-3px); box-shadow:var(--schatten-mid); }
.paket--start{ background:var(--rose); border-color:#FBD9E1; }

.paket__kicker{
  margin:0 0 10px;
  font-size:11.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rot);
}
.paket__name{ font-size:25px; margin-bottom:9px; }
/* Das Badge sitzt wie in der Vorlage auf Höhe der Kicker-Zeile, oberhalb
   des Titels. Die Business-Karte hat dort keinen Text, die Zeile wird aber
   reserviert — sonst rutscht der Titel hoch und muss um das Badge herum
   umbrechen ("IT" / "BUSINESS"). 29 px = Kicker-Zeile plus ihr Abstand. */
.paket--business .paket__name{ margin-top:29px; }
.paket__sub{
  margin:0 0 20px;
  font-size:14.5px; line-height:1.5; color:var(--text-leise);
  min-height:44px;
}
.paket__preis{
  display:flex; align-items:baseline; gap:8px;
  margin:0;
}
.paket__ab{ font-size:17px; font-weight:700; color:var(--rot); }
.paket__zahl{ font-size:43px; font-weight:900; letter-spacing:-.03em; color:var(--rot); line-height:1.05; }
.paket__zahl--wort{ font-size:31px; color:var(--ink); }
.paket__takt{ margin:2px 0 20px; font-size:13.5px; color:var(--text-leise); }

.paket .btn{ font-size:15px; padding:15px 20px; }
.paket__liste{ margin-bottom:24px; }
.paket__liste li{
  position:relative;
  padding:0 0 0 26px;
  margin-bottom:9px;
  font-size:14.5px; line-height:1.5; color:var(--text);
}
.paket__liste li::before{          /* rotes Häkchen */
  content:"";
  position:absolute; left:2px; top:5px;
  width:13px; height:9px;
  border-left:2.4px solid var(--rot);
  border-bottom:2.4px solid var(--rot);
  transform:rotate(-45deg);
  border-radius:1px;
}

.badge{
  position:absolute; top:18px; right:18px;
  padding:5px 10px;
  background:var(--blau); color:#fff;
  border-radius:6px;
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}

/* ============================== PARTNER ============================== */
.partner{ background:var(--weiss); padding-block:20px 76px; }
.partner .kicker{ margin-bottom:30px; }
.partner__leiste{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:center;
  gap:26px;
}
.partner__leiste li{ display:grid; place-items:center; }
.partner__leiste img{
  width:auto; max-width:100%; max-height:58px;
  filter:grayscale(1);
  opacity:.72;
  mix-blend-mode:multiply;     /* blendet den hellen Restrand der Freistellung aus */
  transition:filter .2s ease, opacity .2s ease;
}
.partner__leiste img:hover{ filter:grayscale(0); opacity:1; }

/* ============================= ABSCHLUSS ============================= */
/* Farben und Höhe aus der Vorlage gemessen: Grund #EBF7FF bis #F0F9FE,
   Sektion 0,248-mal so hoch wie breit (bei 1440 px rund 358 px). */
.abschluss{
  position:relative;
  background:linear-gradient(180deg,#EAF6FE 0%,#EFF9FE 100%);
  padding-block:58px 62px;
  overflow:hidden;
}
/* Heller Wasserstreifen unter der Skyline, wie in der Vorlage: läuft nach
   links aus, damit er unter dem Text nicht als Kante steht. */
.abschluss::before{
  content:"";
  position:absolute; left:28%; right:0; bottom:0; z-index:0;
  height:38px;
  background:linear-gradient(90deg,
    rgba(210,232,249,0) 0%, rgba(210,232,249,.45) 22%, rgba(210,232,249,.6) 100%);
  border-top:1px solid rgba(255,255,255,.7);
  pointer-events:none;
}
/* Die Skyline ist per Farbe-zu-Alpha freigestellt (bin/assets-extrahieren.js):
   kein Rechteck mehr, Wolken halbtransparent. Die Vorlage zeigt sie blasser
   und grauer als das Asset-Blatt — dunkelste Stelle dort rgb(166,194,219).
   Deckkraft und Sättigung sind darauf abgestimmt. Der Fernsehturm steht wie
   in der Vorlage rechts über dem Knopf. */
.abschluss__skyline{
  position:absolute; right:0; bottom:30px; z-index:0;
  width:min(70%,1000px); height:auto;
  opacity:.58;
  filter:saturate(.62);
  pointer-events:none;
}
.abschluss__grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:48px;
  align-items:center;
}
.abschluss__text .fliess{ margin-bottom:0; max-width:40ch; }
.abschluss__aktion{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.abschluss__termin{
  display:flex; align-items:center; gap:10px;
  margin:0;
  /* Dunkel wie in der Vorlage. Die Zeile steht über dem Fernsehturm der
     Skyline; in --text kam sie dort gemessen nur auf 3,06:1. */
  font-size:14.5px; font-weight:600; color:var(--ink);
}
.abschluss__termin img{ width:20px; height:20px; }

/* ============================ UNTERSEITEN ============================ */

/* Schmaler Seitenkopf statt des grossen Hero der Startseite. */
.seitenkopf{
  background:linear-gradient(100deg,#F0F9FF 0%,#E8F7FE 40%,#D4F0FD 100%);
  padding-block:54px 58px;
  border-bottom:1px solid var(--linie);
}
.seitenkopf__titel{ font-size:clamp(32px,4vw,52px); font-weight:900; letter-spacing:-.03em; }
.seitenkopf .fliess{ margin:20px 0 0; font-size:17.5px; max-width:56ch; }

/* Seitenkopf mit Bild — Aufbau wie der Hero von Nexus Service (Startseite
   und IT-Leistungen): heller Grund, Text links, Illustration rechts,
   Beratungsknopf mit drei Stichworten. */
.seitenkopf--bild{ background:#FAFBFC; padding-block:40px 40px; }
/* Hero und Kontaktkarten bilden eine Fläche — keine Linie dazwischen. */
.seitenkopf--bild:has(+ .schnellkontakt){ border-bottom:0; }
.seitenkopf__raster{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
}
.seitenkopf--bild .seitenkopf__titel{ font-size:clamp(32px,3.4vw,44px); font-weight:800; line-height:1.15; }
.seitenkopf--bild .fliess{ margin:22px 0 32px; font-size:19px; line-height:1.65; max-width:none; }
.seitenkopf__aktion{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.seitenkopf__haken{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; font-weight:600; color:var(--text); }
.seitenkopf__haken li{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.seitenkopf__haken svg{
  width:16px; height:16px; flex:none;
  fill:none; stroke:var(--rot-tief); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.seitenkopf__bild{ display:flex; justify-content:center; }
/* Beide Bilder tragen am linken Rand ein abgeschnittenes Textstück aus der
   Nexus-Vorlage („cher" / „er"). Die Dateien bleiben unverändert, der
   Streifen wird nur ausgeblendet. */
.seitenkopf__bild img{
  width:100%; height:auto; max-height:460px; object-fit:contain;
  clip-path:inset(0 0 0 4%);
}

/* Drei Kontaktkarten unter dem Hero (wie auf der Startseite von Nexus). */
.schnellkontakt{ background:#FAFBFC; padding-block:4px 40px; border-bottom:1px solid var(--linie); }
.schnellkontakt__raster{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.schnellkontakt__karte{
  display:flex; align-items:center; gap:16px;
  padding:20px;
  background:#fff; border-radius:12px;
  box-shadow:0 4px 12px rgba(16,48,95,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.schnellkontakt__karte:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(16,48,95,.16); }
.schnellkontakt__icon{
  display:grid; place-items:center; flex:none;
  width:56px; height:56px; border-radius:12px;
  background:#ECEEF3; color:var(--rot-tief);
}
.schnellkontakt__icon svg{
  width:28px; height:28px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.schnellkontakt__karte > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.schnellkontakt__karte strong{ font-size:16px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.schnellkontakt__karte strong + span{ margin-top:2px; font-size:14px; color:var(--text); }

/* Brotkrumen */
.krumen{ margin:0 0 18px; font-size:13.5px; color:var(--text-leise); }
.krumen a{ color:var(--text-leise); }
.krumen a:hover{ color:var(--rot); text-decoration:underline; }
.krumen span{ padding-inline:7px; opacity:.6; }
.krumen [aria-current]{ color:var(--ink); font-weight:600; }

/* Abschnitte */
.abschnitt{ padding-block:76px; }
.abschnitt--hell{ background:var(--soft); }
.abschnitt--blau{ background:linear-gradient(180deg,#F7FBFE 0%,#EAF4FC 55%,#F4FAFE 100%); }
.abschnitt__kopf{ max-width:60ch; margin-bottom:44px; }
.abschnitt__kopf .titel{ margin-bottom:18px; }
.abschnitt__kopf .fliess{ margin-bottom:0; max-width:60ch; }
.abschnitt__kopf--mitte{ margin-inline:auto; text-align:center; }
.abschnitt__kopf--mitte .fliess{ margin-inline:auto; }

/* Karten-Raster */
/* min(…,100%) verhindert, dass die Mindestbreite den Viewport sprengt:
   auf einem 320-px-Gerät wird aus 280px die volle Spaltenbreite. */
.karten{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:22px;
}
.karten--zwei{ grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); }
.karte{
  display:flex; flex-direction:column;
  padding:28px 26px;
  background:#fff;
  border:1px solid var(--linie);
  border-radius:var(--radius-gr);
  box-shadow:var(--schatten);
  transition:transform .2s ease, box-shadow .2s ease;
}
.karte:hover{ transform:translateY(-3px); box-shadow:var(--schatten-mid); }
.karte__icon{
  display:grid; place-items:center;
  width:52px; height:52px; margin-bottom:18px;
  border-radius:13px;
  background:var(--blau-hell);
}
.karte__icon svg{
  width:26px; height:26px;
  fill:none; stroke:var(--blau); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.karte__icon--rot{ background:#FDE8EC; }
.karte__icon--rot svg{ stroke:var(--rot); }
.karte__icon img{ width:30px; height:30px; mix-blend-mode:multiply; }

/* Karte mit Geräteabbildung statt Icon (Lösungsseite) */
.karte__bild{
  display:grid; place-items:center;
  height:120px; margin-bottom:20px;
  border-radius:12px;
  background:var(--soft);
}
.karte__bild img{ max-height:92px; width:auto; max-width:86%; height:auto; mix-blend-mode:multiply; }
.karte h3{ font-size:19px; margin-bottom:10px; }
.karte p{ margin:0 0 14px; font-size:15px; line-height:1.65; }
.karte p:last-child{ margin-bottom:0; }
.karte ul{ margin-top:auto; }
.karte li{
  position:relative;
  padding-left:24px; margin-bottom:8px;
  font-size:14.5px; line-height:1.55;
}
.karte li::before{
  content:""; position:absolute; left:2px; top:6px;
  width:12px; height:8px;
  border-left:2.2px solid var(--rot); border-bottom:2.2px solid var(--rot);
  transform:rotate(-45deg); border-radius:1px;
}

/* Nummerierter Ablauf */
.ablauf{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:26px;
  counter-reset:schritt;
}
.ablauf__schritt{ position:relative; padding-top:14px; }
.ablauf__schritt::before{
  counter-increment:schritt;
  content:counter(schritt);
  display:grid; place-items:center;
  width:44px; height:44px; margin-bottom:16px;
  border-radius:50%;
  background:var(--rot); color:#fff;
  font-size:18px; font-weight:800;
}
.ablauf__schritt h3{ font-size:18px; margin-bottom:8px; }
.ablauf__schritt p{ margin:0; font-size:15px; line-height:1.6; }

/* Zweispaltig: Text neben Bild */
.paar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:52px;
  align-items:center;
}
.paar--schmal{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.paar__bild{ display:grid; place-items:center; }
/* Variante mit farbigem Grund: lässt eine Illustration mit hellem Himmel
   als gesetztes Bild wirken statt als Kasten auf weißer Fläche. */
.paar__bild--blau{
  background:linear-gradient(180deg,#F2F9FE,#E4F1FB);
  border-radius:var(--radius-gr);
  padding:30px 24px;
}
.paar__bild img{ max-height:300px; width:auto; mix-blend-mode:multiply; }

/* Kennzahlen-/Merkmalsleiste innerhalb einer Unterseite */
.streifen{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:0;
}
.streifen__feld{ padding:6px 28px; border-left:1px solid var(--linie); }
.streifen__feld:first-child{ border-left:0; padding-left:0; }
.streifen__feld strong{ display:block; font-size:18px; color:var(--ink); margin-bottom:6px; }
.streifen__feld span{ font-size:14px; color:var(--text-leise); }

/* Fließtextseiten (Impressum, Datenschutz) */
.rechtstext{ padding-block:60px 84px; }
.rechtstext__innen{ max-width:74ch; }
.rechtstext h2{
  font-size:23px; margin:42px 0 14px;
  padding-top:22px; border-top:1px solid var(--linie);
}
.rechtstext h2:first-of-type{ margin-top:8px; border-top:0; padding-top:0; }
.rechtstext h3{ font-size:17px; margin:26px 0 10px; }
.rechtstext p{ margin:0 0 15px; font-size:15.5px; line-height:1.75; }
.rechtstext ul{ margin:0 0 16px; }
.rechtstext li{
  position:relative; padding-left:20px; margin-bottom:8px;
  font-size:15.5px; line-height:1.7;
}
.rechtstext li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--blau);
}
.rechtstext a{ color:var(--blau); text-decoration:underline; text-underline-offset:2px; }
.rechtstext a:hover{ color:var(--rot); }
.rechtstext dl{ margin:0 0 18px; font-size:15.5px; line-height:1.75; }
.rechtstext dt{ font-weight:700; color:var(--ink); margin-top:12px; }
.rechtstext dd{ margin:0; }

/* Ein Feld, das der Betreiber noch ausfüllen muss — sichtbar markiert,
   damit es nicht versehentlich live geht. */
.offen{
  background:#FFF6D9;
  border-bottom:2px solid #E8C34A;
  padding:1px 5px;
  border-radius:3px;
  font-style:normal;
  color:#6B5310;
  overflow-wrap:anywhere;
}

/* ============================== FORMULAR ============================== */
.formular{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 22px;
  padding:32px;
  background:#fff;
  border:1px solid var(--linie);
  border-radius:var(--radius-gr);
  box-shadow:var(--schatten-mid);
}
.feld{ display:flex; flex-direction:column; gap:7px; }
.feld--breit{ grid-column:1 / -1; }
.feld label{ font-size:14px; font-weight:700; color:var(--ink); }
.feld .pflicht{ color:var(--rot); }
.feld .optional{ font-weight:400; color:var(--text-leise); }
.feld input,
.feld select,
.feld textarea{
  width:100%;
  padding:13px 14px;
  font:inherit; font-size:15px;
  color:var(--ink);
  background:#fff;
  border:1.5px solid var(--linie);
  border-radius:9px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.feld textarea{ min-height:148px; resize:vertical; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus{
  outline:none;
  border-color:var(--blau);
  box-shadow:0 0 0 3px rgba(43,132,216,.15);
}
.feld input:invalid:not(:placeholder-shown){ border-color:var(--rot); }
.feld small{ font-size:12.5px; color:var(--text); }   /* --text-leise: nur 3,2:1 */
/* Bot-Falle außerhalb des Sichtbereichs — nicht display:none, das lassen
   viele Bots aus. */
.formular__falle{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formular{ position:relative; }

.zustimmung{
  grid-column:1 / -1;
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  align-items:start;
}
.zustimmung input{ width:20px; height:20px; margin-top:2px; accent-color:var(--rot); }
.zustimmung label{ font-size:14px; font-weight:400; line-height:1.6; color:var(--text); }
.zustimmung a{ color:var(--blau); text-decoration:underline; }

.formular__fuss{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.formular__hinweis{ margin:0; font-size:13px; color:var(--text); }

/* Rückmeldung nach dem Absenden (per aria-live angekündigt) */
.meldung{
  grid-column:1 / -1;
  display:none;
  padding:16px 18px;
  border-radius:11px;
  font-size:15px; line-height:1.6;
}
.meldung.ist-sichtbar{ display:block; }
.meldung--warnung{ background:#FFF6D9; border:1px solid #E8C34A; color:#6B5310; }
.meldung--gut{ background:#E8F8EF; border:1px solid #9BDCBA; color:#186B44; }
.meldung--fehler{ background:#FFF1F2; border:1px solid #F4B4BE; color:#8A1328; }
.meldung a{ color:inherit; text-decoration:underline; }
.meldung strong{ display:block; margin-bottom:4px; }

/* Kontaktdaten neben dem Formular */
.kontaktliste li{
  display:grid; grid-template-columns:44px minmax(0,1fr);
  gap:14px; align-items:start;
  padding:16px 0;
  border-bottom:1px solid var(--linie);
}
.kontaktliste li:last-child{ border-bottom:0; }
.kontaktliste .karte__icon{ width:44px; height:44px; margin:0; }
.kontaktliste .karte__icon svg{ width:21px; height:21px; }
.kontaktliste strong{ display:block; font-size:15px; color:var(--ink); margin-bottom:3px; }
.kontaktliste span,
.kontaktliste a{ font-size:15px; line-height:1.6; }
.kontaktliste a{ color:var(--blau); }
.kontaktliste a:hover{ color:var(--rot); text-decoration:underline; }

/* ================================ FUSS ================================ */
/* Aufbau wie bei Nexus Service: hell, vier Spalten, Kontakt mit roten
   Symbolen, Zeile mit © und Rechtlichem darunter. Abweichung: Grautöne in
   --text statt #64748b — das Nexus-Grau kam auf #F1F5F9 nur auf 4,4:1. */
.fuss{
  background:#F1F5F9;
  color:var(--text);
  padding-block:48px 0;
  font-size:14.5px;
}
.fuss a{ color:var(--text); transition:color .16s ease; }
.fuss a:hover{ color:var(--ink); }

.fuss__grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:32px;
  padding-bottom:40px;
}
.fuss__name{ margin:0 0 14px; font-size:18px; font-weight:800; color:var(--ink); }
.fuss__marke p{ line-height:1.7; max-width:36ch; }
.fuss__marke p:not(.fuss__name){ margin:0 0 16px; }
.fuss__icons{ display:flex; gap:10px; }
.fuss__icons a{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:10px;
  background:#fff; border:1px solid var(--linie);
}
.fuss__icons a:hover{ border-color:var(--rot); color:var(--rot-tief); }

.fuss svg{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

.fuss h2{
  font-size:12px; font-weight:800; color:var(--ink);
  letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:16px;
}
.fuss__liste li{ margin-bottom:8px; }
.fuss__liste a{ display:inline-block; padding-block:2px; transition:color .16s ease, transform .16s ease; }
.fuss__liste a:hover{ transform:translateX(3px); }

.fuss__kontakt li{
  display:flex; align-items:flex-start; gap:12px;
  margin-bottom:14px; line-height:1.55;
}
.fuss__kontakt svg{ color:var(--rot-tief); margin-top:2px; }

.fuss__unten{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-block:24px 28px;
  border-top:1px solid #E2E8F0;
}
.fuss__recht{ display:flex; gap:22px; flex-wrap:wrap; }
.fuss__unten p{ margin:0; }

/* ============================ BREAKPOINTS ============================ */

/* --- ab 1180: Statuskarte unter das Diagramm --- */
@media (max-width:1180px){
  /* Unter 1180 px reicht der Platz links neben der Kette nicht mehr für
     den Text: Text oben, Diagramm darunter, Statuskarte darunter. */
  .loesungen__grid{ grid-template-areas:none; row-gap:44px; }
  .loesungen__text,
  .loesungen__visual{ grid-area:auto; }
  .loesungen__text{ max-width:none; padding-top:0; }
  .loesungen__visual{ display:block; }
  .loesungen__visual .status{
    position:static; width:100%;
    max-width:460px; margin:28px auto 0;
  }
}

/* --- ab 1200: Hero einspaltig --- */
/* Zweispaltig ist der Hero nur so lange, wie die Bildspalte breit genug
   bleibt: Die Illustration ist 1,37-mal so breit wie hoch und wird sonst
   zu stark seitlich beschnitten (bei 1024 px wären es 29 %). Untereinander
   steht sie in voller Breite und ungeschnitten. */
@media (max-width:1200px){
  .hero__grid{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:0;
    padding-block:0;
  }
  .hero__text{ align-self:auto; padding-block:52px 40px; }
  .hero::before{ display:none; }
  .hero__bild{
    position:static;
    width:auto;                 /* sonst blieben die 68 % der Desktop-Regel */
    margin-inline:calc(var(--gutter) * -1);
  }
  .hero__illu{
    position:static; width:100%; height:auto; max-width:100%;
    -webkit-mask-image:none; mask-image:none;
  }
}

/* --- ab 1180: Navigation enger, Statusspalte schmaler --- */
@media (max-width:1180px){
  .nav__liste{ gap:24px; }
  .nav{ gap:24px; }
  .pakete__grid{ grid-template-columns:300px minmax(0,1fr); gap:34px; }
  .merkmal{ padding-inline:16px; }
  /* Die Skyline beginnt rechts vom Abschlusstext. Mit 70 % reichte sie bei
     1024 px bis unter den Text (Kontrast dort gemessen 3,33:1). */
  .abschluss__skyline{ width:54%; }
}

/* --- ab 1100: Paket-Intro über die Karten, Karten auf volle Breite --- */
@media (max-width:1100px){
  .pakete__grid{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .pakete__intro{ padding-top:0; }
  .pakete__intro .fliess{ max-width:62ch; }
}

/* --- ab 980: einspaltige Sektionen, Status unter das Diagramm --- */
@media (max-width:980px){
  :root{ --gutter:24px; --kopf-h:84px; }
  .marke__logo{ height:64px; }

  /* Kopf → Burger-Menü */
  .kopf__cta{ display:none; }
  .burger{ display:block; margin-left:auto; }
  .nav{
    position:fixed; inset:var(--kopf-h) 0 auto; z-index:95;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 24px 24px;
    background:#fff;
    border-bottom:1px solid var(--linie);
    box-shadow:var(--schatten-mid);
    transform:translateY(-12px);
    opacity:0; visibility:hidden;
    /* visibility darf NICHT mitanimiert werden: sonst bleibt das Menü nach
       dem Öffnen für die Dauer der Animation unbedienbar. Stattdessen beim
       Schließen verzögert umschalten, beim Öffnen sofort. */
    transition:transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
  }
  .nav.ist-offen{
    transform:translateY(0); opacity:1; visibility:visible;
    transition:transform .22s ease, opacity .22s ease, visibility 0s;
  }
  .nav__liste{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__punkt > a{
    display:block; padding:15px 4px;
    font-size:17px; color:var(--ink);
    border-bottom:1px solid var(--linie);
  }
  .nav__punkt > a:hover{ border-bottom-color:var(--linie); color:var(--rot); }
  .nav__cta{ display:inline-flex; margin-top:18px; justify-content:center; }
  .nav{ margin-left:0; max-height:calc(100vh - var(--kopf-h)); overflow-y:auto; }

  /* Megamenü → Akkordeon: Link und Pfeil in einer Zeile, die Spalten
     darunter untereinander. Der Beratungsbalken entfällt, der Knopf
     „Jetzt beraten lassen" steht ohnehin am Ende des Menüs. */
  .nav__punkt--mega{ flex-wrap:wrap; border-bottom:1px solid var(--linie); }
  .nav__punkt--mega > a{ flex:1; border-bottom:0; }
  .nav__auf{ width:48px; }
  .mega{
    position:static; flex-basis:100%;
    padding:0 0 12px 12px;
    display:none;
    opacity:1; visibility:visible; transform:none; transition:none;
  }
  .nav__punkt--mega.ist-offen .mega{ display:block; }
  .mega__innen{ border:0; box-shadow:none; padding:0; border-radius:0; }
  .mega__raster{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .mega__titel{ margin:0 0 4px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text); }
  .mega__raster a{ padding:8px 4px; font-size:15.5px; border-bottom:0; min-height:40px; }
  .mega__balken{ display:none; }

  .hero__fliess{ max-width:58ch; }
  .hero__script{ top:-24px; right:20px; }

  .seitenkopf__raster{ gap:32px; }
  .schnellkontakt__raster{ gap:14px; }
  .schnellkontakt__karte{ padding:16px; gap:12px; }
  .schnellkontakt__icon{ width:46px; height:46px; }

  /* Merkmale 4 → 2 */
  .merkmale__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 0; padding-block:36px; }
  .merkmal{ padding-inline:24px; }
  .merkmal:nth-child(odd){ border-left:0; padding-left:0; }

  /* Lösungen */
  .loesungen{ padding-block:64px; }
  .loesungen__grid{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .loesungen__text .fliess{ max-width:58ch; }
  .loesungen__visual{ display:block; }
  /* Einspaltig steht die Statuskarte wieder unter dem Diagramm — als
     Überlagerung würde sie dort die Kettenlabels verdecken. */
  .loesungen__visual .status{
    position:static; width:100%;
    max-width:460px; margin:28px auto 0;
  }

  /* Pakete */
  .pakete{ padding-block:64px; }
  .pakete__grid{ grid-template-columns:minmax(0,1fr); gap:38px; }
  .pakete__intro{ padding-top:0; }
  .pakete__intro .fliess{ max-width:58ch; }

  /* Partner 6 → 3 */
  .partner{ padding-block:8px 60px; }
  .partner__leiste{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 20px; }

  /* Abschluss */
  .abschluss{ padding-block:60px 64px; }
  .abschluss__grid{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .abschluss__aktion{ align-items:flex-start; }
  .abschluss__skyline{ width:min(90%,620px); opacity:.55; }

  /* Unterseiten */
  .seitenkopf{ padding-block:40px 44px; }
  .abschnitt{ padding-block:56px; }
  .abschnitt__kopf{ margin-bottom:34px; }
  .paar,
  .paar--schmal{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .paar__bild img{ max-height:240px; }
  .streifen__feld{ padding:14px 0; border-left:0; border-top:1px solid var(--linie); }
  .streifen__feld:first-child{ border-top:0; padding-top:0; }

  /* Fuß: vier Spalten → zwei */
  .fuss__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px; }
  .fuss__marke{ grid-column:1 / -1; }
}

/* --- ab 880: Pakete 3 → 2 Spalten (drei Karten nebeneinander werden zu eng) --- */
@media (max-width:880px){
  .pakete__karten{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .paket__sub{ min-height:0; }
}

/* --- ab 760: Netzwerk vertikal --- */
@media (max-width:760px){
  /* Seitenkopf mit Bild: wie bei Nexus ohne Illustration auf dem Handy. */
  .seitenkopf__raster{ grid-template-columns:minmax(0,1fr); }
  .seitenkopf__bild{ display:none; }
  .seitenkopf--bild .fliess{ font-size:17.5px; }
  .schnellkontakt__raster{ grid-template-columns:minmax(0,1fr); }

  body{ font-size:16px; }

  .hero__text{ padding-block:44px 34px; }
  .hero__balken{ width:100%; gap:18px; padding:16px 20px; }
  .hero__script{ width:118px; top:-18px; right:12px; }

  /* Netzwerk: Kette und Geräte werden EINE durchgehende senkrechte Spalte.
     Der Fächer entfällt; jede Zeile trägt ihre Verbindungslinie selbst. */
  .netz{ --bildspalte:104px; }
  .netz__kette{ padding-left:0; }
  .netz__knoten--zeile{ column-gap:16px; padding-block:8px; }
  .netz__knoten--zeile::after{ top:calc(100% - 8px); height:16px; }
  .netz__knoten--zeile::before{ display:none; }
  .netz__knoten--switch::after{ display:block; }   /* Switch → erstes Gerät */
  .netz__bild img{ max-height:60px; }

  .netz__faecher{ display:none; }

  .netz__geraete{
    display:block;
    gap:0;
    margin:0;
    padding:0;
  }
  .netz__geraet{
    position:relative;
    display:grid;
    grid-template-columns:var(--bildspalte) minmax(0,1fr);
    column-gap:16px;
    align-items:center;
    text-align:left;
    padding-block:8px;
    padding-inline:0;
  }
  .netz__geraet::after{                   /* Rohr zur nächsten Zeile */
    display:block;
    top:calc(100% - 8px); height:16px;
  }
  .netz__geraet:last-child::after{ display:none; }
  .netz__geraet .netz__bild{
    grid-row:1 / span 2;
    margin-bottom:0;
    justify-self:center;
  }
  .netz__geraet .netz__bild img{ max-height:64px; }
  /* In der senkrechten Liste stehen die Geräte dicht; die Funkwellen
     bleiben dort innerhalb der eigenen Zeile. */
  .netz__geraet--wlan .netz__bild::before,
  .netz__geraet--wlan .netz__bild::after{
    width:60px; height:60px; margin:-30px 0 0 -30px;
    animation-name:netz-wlan-klein;
  }
  .netz__geraet strong{ grid-column:2; font-size:14.5px; }
  .netz__geraet small{ grid-column:2; font-size:13px; }

  /* Partner 3 → 2 */
  .partner__leiste{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 18px; }

  .btn--gross{ width:100%; }
  .abschluss__aktion{ align-self:stretch; }
}

/* --- ab 640: Pakete 2 → 1 Spalte, Formular und Fuß einspaltig --- */
@media (max-width:640px){
  .pakete__karten{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .formular{ grid-template-columns:minmax(0,1fr); padding:24px 20px; }
  .fuss__grid{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .fuss__unten{ flex-direction:column; align-items:flex-start; gap:12px; }
  .abschnitt{ padding-block:48px; }
  .karte{ padding:24px 20px; }
}

/* --- ab 520: kleinste Stufe --- */
@media (max-width:520px){
  :root{ --gutter:18px; --kopf-h:74px; }

  .marke__logo{ height:56px; }

  .hero__titel{ font-size:clamp(32px,10vw,42px); }
  .hero__script{ width:104px; top:-10px; }
  .hero__balken{ align-items:center; }
  .hero__balken-text strong{ font-size:15px; }
  .hero__balken-text span{ font-size:13px; }

  /* Merkmale 2 → 1 */
  .merkmale__grid{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .merkmal{ border-left:0; padding-inline:0; }

  .netz{ --bildspalte:80px; }
  .netz__knoten--zeile{ column-gap:12px; }
  .netz__bild img{ max-height:50px; }
  .netz__geraet{ column-gap:12px; }
  .netz__geraet .netz__bild img{ max-height:54px; }
  .netz__geraet strong{ font-size:13.5px; }
  .netz__geraet small{ font-size:12px; }

  .paket{ padding:22px 20px; }
  .paket__zahl{ font-size:34px; }

  /* Auf sehr schmalen Geräten darf der Button umbrechen — sonst sprengt
     ein langer Aufruf wie „Jetzt kostenlos beraten lassen" den Viewport. */
  .btn{ white-space:normal; text-align:center; }
  .btn--gross{ font-size:16px; padding:16px 20px; }

  .partner__leiste img{ max-height:38px; }
}

/* ---------------------------- Bewegungsarm --------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    /* Sonst liefen Endlos-Animationen (Pipelines, Funkwellen) mit
       0,01 ms je Durchgang weiter — ein Flackern statt Stillstand. */
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* Hier steht ohnehin nichts still zu halten. */
  .netz__pause{ display:none; }
}

/* ------------------------------- Druck ------------------------------- */
@media print{
  .kopf,.burger,.nav,.nav-overlay{ display:none !important; }
  .hero,.loesungen,.abschluss{ background:#fff !important; }
  .btn{ box-shadow:none; }
}

.hero__knoepfe{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 18px; }

/* Ersetzt das style-Attribut in referenzen.html, damit die CSP ohne unsafe-inline auskommt */
.partner--eng{ padding-block:56px; }

.stufen{ display:grid; gap:36px; }
.stufe{ background:var(--weiss); border:1px solid var(--linie); border-radius:16px; padding:32px; box-shadow:var(--schatten-mid); }
.stufe--beliebt{ border-color:#BFDDF5; }
.stufe__kopf{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 32px; margin-bottom:20px; }
.stufe__kopf .kicker{ margin-bottom:6px; }
.stufe__name{ font-size:clamp(26px,2.4vw,34px); margin:0 0 8px; }
.stufe__fuerwen{ margin:0; max-width:52ch; color:var(--text); }
.stufe__preis{ margin:0; font-size:15.5px; color:var(--text); white-space:nowrap; }
.stufe__preis strong{ color:var(--rot); font-size:22px; }
.stufe__bild{ margin:0 0 24px; }
.stufe__bild img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--linie); }
.stufe__bild--netz{
  padding:28px 28px 20px;
  border:1px solid var(--linie); border-radius:12px;
  background:linear-gradient(180deg,#F7FBFE 0%,#EAF4FC 55%,#F4FAFE 100%);
}
.stufe__bild--netz .loesungen__visual .status{ left:0; right:auto; }
.stufe__bild--netz img{ width:auto; border:0; border-radius:0; }
.stufe__spalten{ display:grid; grid-template-columns:1fr 1fr; gap:24px 40px; margin-bottom:24px; }
.stufe__spalten h4{ font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-leise); margin:0 0 10px; }
.stufe__liste{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.stufe__liste li{ padding-left:26px; position:relative; color:var(--text); }
.stufe__liste li::before{ content:""; position:absolute; left:0; top:.45em; width:14px; height:8px; border-left:3px solid var(--rot); border-bottom:3px solid var(--rot); transform:rotate(-45deg); }
.stufe__liste--klein{ font-size:14.5px; }
.stufe__geraete{ border:1px solid var(--linie); border-radius:10px; padding:12px 16px; background:var(--blau-hell); align-self:start; }
.stufe__geraete summary{ cursor:pointer; font-weight:600; color:var(--blau); list-style:none; display:flex; align-items:center; gap:10px; }
.stufe__geraete summary::-webkit-details-marker{ display:none; }
.stufe__geraete summary::before{ content:""; width:8px; height:8px; border-right:2px solid var(--blau); border-bottom:2px solid var(--blau); transform:rotate(-45deg); transition:transform .2s; }
.stufe__geraete[open] summary::before{ transform:rotate(45deg); }
.stufe__geraete[open] summary{ margin-bottom:12px; }
@media (max-width:760px){
  .stufe{ padding:20px; }
  .stufe__spalten{ grid-template-columns:1fr; }
}
.stufe__svg{ display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--linie); font-family:inherit; }

/* Fachseiten unter Leistungen (26.09.2026): Fließtext mit Zwischenüberschriften, Schrittliste, Hakenliste */
.fachtext{ max-width:72ch; }
.fachtext h2{ font-size:clamp(22px,2.2vw,28px); margin:36px 0 12px; }
.fachtext h2:first-child{ margin-top:0; }
.fachtext h3{ font-size:19px; margin:24px 0 8px; }
.fachtext p{ margin:0 0 16px; color:var(--text); line-height:1.7; }
.fachtext__schritte{ margin:0 0 16px; padding-left:0; list-style:none; counter-reset:schritt; display:grid; gap:14px; }
.fachtext__schritte li{ position:relative; padding:16px 18px 16px 62px; background:var(--blau-hell); border-radius:12px; color:var(--text); line-height:1.65; counter-increment:schritt; }
.fachtext__schritte li::before{ content:counter(schritt); position:absolute; left:18px; top:16px; width:30px; height:30px; border-radius:50%; background:var(--rot); color:#fff; font-weight:800; display:grid; place-items:center; }
.fachtext__schritte strong{ color:var(--navy, #0B2F6B); }
.fachtext__haken{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:8px; }
.fachtext__haken li{ padding-left:26px; position:relative; color:var(--text); }
.fachtext__haken li::before{ content:""; position:absolute; left:0; top:.45em; width:14px; height:8px; border-left:3px solid var(--rot); border-bottom:3px solid var(--rot); transform:rotate(-45deg); }
.fachtext__hinweis{ font-weight:600; }
.fachtext__verwandt{ margin-top:32px; padding-top:20px; border-top:1px solid var(--linie); font-size:15px; }
.karte__link{ margin-top:14px; font-weight:700; color:var(--blau); display:inline-flex; align-items:center; gap:6px; }

.fach .fachtext{ max-width:none; }
.fachtext strong{ color:var(--ink); font-weight:700; }
.fachtext__schritte strong{ color:var(--ink); }

/* Zweispaltig: Text links, freigestelltes Bild rechts (umgekehrt: Bild links) */
.fach-zweispaltig{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:32px 56px;
  align-items:center;
}
.fach-zweispaltig + .fach-zweispaltig{ margin-top:56px; padding-top:56px; border-top:1px solid var(--linie); }
.fach-zweispaltig--umgekehrt{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); }
.fach-zweispaltig--umgekehrt .fach-zweispaltig__text{ order:2; }
.fach-zweispaltig--umgekehrt .fach-bild{ order:1; }
.fach-zweispaltig__text h2:first-child{ margin-top:0; }
.fach-zweispaltig__text p:last-child{ margin-bottom:0; }
.fach-bild{
  margin:0;
  display:grid; place-items:center;
  min-height:280px; padding:28px;
  background:var(--soft);
  border:1px solid var(--linie);
  border-radius:16px;
}
.fach-bild img{ width:auto; max-width:100%; max-height:240px; height:auto; }

/* Drei Lösungen als nummerierte Karten (die Nummer bleibt: der Text verweist auf „Punkt 2“) */
.fach-loesungen{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  counter-reset:loesung;
}
.fach-karte{ position:relative; counter-increment:loesung; padding-top:26px; }
.fach-karte::before{
  content:counter(loesung);
  position:absolute; left:22px; top:22px; z-index:1;
  width:32px; height:32px; border-radius:50%;
  background:var(--rot); color:var(--weiss);
  font-weight:800; font-size:15px;
  display:grid; place-items:center;
}
.fach-karte__bild{
  display:flex; justify-content:center; align-items:center; gap:18px;
  height:160px; margin-bottom:20px; padding:16px;
  border-radius:12px;
  background:var(--soft);
}
.fach-karte__bild img{ width:auto; height:auto; max-height:120px; max-width:100%; }
.fach-karte__bild--zwei img{ max-height:96px; max-width:46%; }
.fach-karte__titel{ display:block; margin:0 0 10px; font-size:19px; line-height:1.25; color:var(--ink); font-weight:800; letter-spacing:-.01em; }
.fach-karte p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--text); }
.fach-karte p strong{ font-weight:700; }

/* Verweise am Ende: Touch-Ziel mindestens 44 px hoch (gemessen 19 px, ansicht.mjs 26.09.2026) */
.fachtext__verwandt a{ display:inline-block; padding-block:13px; color:var(--blau); font-weight:600; }

/* Vorteile zweispaltig */
.fachtext__haken--zwei{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 40px; margin-bottom:36px; }
.fachtext__haken--zwei li{ line-height:1.5; }

/* Hinweis und Knopf nebeneinander */
.fach-aktion{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px;
  padding:24px 28px;
  background:var(--blau-hell);
  border-radius:16px;
}
.fach-aktion p{ margin:0; }
.fach-aktion .fachtext__hinweis{ max-width:52ch; color:var(--ink); }

@media (max-width:980px){
  .fach-loesungen{ grid-template-columns:minmax(0,1fr); }
  .fach-zweispaltig,
  .fach-zweispaltig--umgekehrt{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 32px; }
}
@media (max-width:760px){
  .fach-zweispaltig,
  .fach-zweispaltig--umgekehrt{ grid-template-columns:minmax(0,1fr); }
  .fach-zweispaltig--umgekehrt .fach-zweispaltig__text{ order:1; }
  .fach-zweispaltig--umgekehrt .fach-bild{ order:2; }
  .fach-zweispaltig + .fach-zweispaltig{ margin-top:40px; padding-top:40px; }
  .fach-bild{ min-height:0; padding:20px; }
  .fach-bild img{ max-height:180px; }
  .fachtext__haken--zwei{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .fach-aktion{ padding:20px; }
  .fach-aktion .btn{ width:100%; justify-content:center; }
}

.seitenkopf--fach .seitenkopf__titel{ font-size:clamp(28px,2.9vw,40px); line-height:1.15; }
.seitenkopf--fach{ padding-block:22px 26px; }
.seitenkopf--fach .seitenkopf__titel{ margin-bottom:0; }
.seitenkopf--fach .fliess{ margin-top:12px; }

.abschnitt.fach{ padding-block:40px; }
.fach-zweispaltig + .fach-zweispaltig{ margin-top:36px; padding-top:36px; }

.branchen{ background:var(--weiss); padding-block:64px; border-top:1px solid var(--linie); }
.branchen .abschnitt__kopf{ margin-bottom:32px; }
.karten--drei{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.branchen .karte p{ margin-bottom:0; }
.branchen__mehr{ margin:28px 0 0; font-weight:700; }
.branchen__mehr a{ color:var(--blau); display:inline-flex; align-items:center; gap:6px; }

.karten--branchen{ grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.karten--branchen .karte{ border-radius:18px; padding:30px 30px 34px; }
.karten--branchen .karte__icon{ display:none; }
.karten--branchen h3{ font-size:22px; line-height:1.2; margin-bottom:12px; }
.karte--blau{ background:linear-gradient(160deg,#FFFFFF 0%,#F2F7FE 55%,#DCE9FB 100%); border-color:#D3E3F6; }
.karte--gruen{ background:linear-gradient(160deg,#FFFFFF 0%,#F1FBF6 55%,#D6F3E4 100%); border-color:#CFEBDD; }
.karte--rot{ background:linear-gradient(160deg,#FFFFFF 0%,#FEF3F5 55%,#FADDE3 100%); border-color:#F5D3DA; }
.karte--lila{ background:linear-gradient(160deg,#FFFFFF 0%,#F6F3FE 55%,#E4DCFA 100%); border-color:#DED5F5; }
.karte--gelb{ background:linear-gradient(160deg,#FFFFFF 0%,#FFFBEE 55%,#FBEFC8 100%); border-color:#F3E6BE; }
.karte--tuerkis{ background:linear-gradient(160deg,#FFFFFF 0%,#EFFAFD 55%,#D3EEF7 100%); border-color:#CBE6F0; }
.karte--grau{ background:linear-gradient(160deg,#FFFFFF 0%,#F5F7FA 55%,#E3E8EF 100%); border-color:#D9E0E8; }
.branchen .kicker{ display:inline-flex; align-items:center; gap:14px; }
.branchen .kicker::after{ content:""; width:56px; height:2px; background:var(--rot); }
.titel__blau{ color:var(--blau); }
.btn--blau{ background:var(--blau); color:#fff; border-color:var(--blau); border-radius:999px; }
.btn--blau:hover{ background:#1F6FBF; }
.branchen .abschnitt__kopf{ max-width:none; }
.branchen__satz{ max-width:none; font-size:19px; font-weight:700; color:var(--ink, #0B2F6B); line-height:1.5; }
.branchen__mehr .btn--blau{ color:#fff; }
@media (min-width:1100px){ .karten--branchen{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .karten--branchen .karte{ padding:26px 24px 30px; } .karten--branchen h3{ font-size:20px; } }
.branchen .abschnitt__kopf .branchen__satz{ max-width:none; }

.abschnitt__kopf, .abschnitt__kopf .fliess{ max-width:none; }
.abschnitt__kopf .titel{ hyphens:manual; -webkit-hyphens:manual; text-wrap:balance; }
.abschnitt__kopf .fliess{ font-size:18px; font-weight:600; color:var(--ink, #10305F); }
.abschnitt__kopf .kicker{ display:inline-flex; align-items:center; gap:14px; }
.abschnitt__kopf .kicker::after{ content:""; width:56px; height:2px; background:var(--rot); }

.karten--leistungen .karte__icon{ display:none; }
.karten--leistungen .karte{ border-radius:6px; padding:24px 24px 28px; }
.karten--leistungen h3{ font-size:19px; margin:0 0 16px; padding:12px 16px; border-radius:0; background:var(--blau-hell); color:var(--ink, #10305F); border:1px solid #BFDDF5; }
.karten--leistungen .karte__link{ white-space:nowrap; }

.stufen__tabs{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px; }
.stufen__tab{ min-width:150px; }
.stufen--reiter .stufe{ display:none; }
.stufen--reiter .stufe--aktiv{ display:block; }

.abschnitt{ padding-block:48px; }
.abschnitt.fach{ padding-block:36px; }
.pakete{ padding-block:56px; }
.loesungen{ padding-block:48px 56px; }
.abschluss{ padding-block:44px 48px; }
.branchen{ padding-block:48px; }
.merkmale{ padding-block:28px; }
.abschnitt__kopf{ margin-bottom:28px; }
.branchen .abschnitt__kopf{ margin-bottom:24px; }
.karte, .karten--branchen .karte, .karten--leistungen .karte{ padding:20px 20px 22px; }
.karten{ gap:16px; }
.stufe{ padding:22px; }
.stufen{ gap:20px; }
.stufe__kopf{ margin-bottom:14px; }
.stufe__bild{ margin-bottom:16px; }
.stufe__spalten{ gap:16px 28px; margin-bottom:16px; }
.paket{ padding:20px 20px 20px; }
.fach-aktion{ padding:20px; }
.fach-zweispaltig{ gap:20px 32px; }
.fach-bild{ padding:16px; }
@media (min-width:1100px){ .karten--branchen .karte{ padding:20px 20px 22px; } }
@media (max-width:760px){ .stufe{ padding:16px; } .karte, .karten--branchen .karte, .karten--leistungen .karte{ padding:18px 16px; } }
.stufe__h3{ font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-leise); margin:0 0 10px; }
.stufen__tabs{ margin-top:4px; }
section[hidden]{ display:none !important; }
@media (max-width:760px){ .stufe__preis{ white-space:normal; } .stufe__kopf{ align-items:flex-start; } }

/* Lösungen: Kopf = Ausbaustufen (Vorschlag 26.09.2026) */
.stufen__leiste{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin-bottom:28px; }
.stufen__leiste .stufen__tabs{ margin-bottom:0; }
.stufen__hilfe{ margin:0; font-size:15.5px; color:var(--text); }
.stufen__hilfe a{ font-weight:700; color:var(--blau); white-space:nowrap; }
#ausbaustufen{ padding-top:36px; }

.hero__titel--box{ color:#111827; }
.hero__balken{ background:rgba(43,132,216,.82); box-shadow:0 10px 30px rgba(43,132,216,.25); backdrop-filter:blur(3px); }
.hero__balken:hover{ background:rgba(31,111,191,.92); }

.hero__aktionen{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:10px; width:max-content; max-width:calc(100vw - 2*var(--gutter)); position:relative; z-index:2; }
.hero__aktionen .hero__balken{ width:auto; min-width:0; flex:0 0 auto; gap:12px; padding:12px 16px; }
.hero__aktionen .hero__balken-text strong{ font-size:15px; white-space:nowrap; }
.hero__aktionen .hero__balken-text span{ font-size:13px; white-space:nowrap; }
.hero__aktionen .hero__knoepfe{ display:flex; flex-direction:row; align-items:stretch; gap:10px; margin:0; flex:0 0 auto; }
.hero__aktionen .hero__knoepfe .btn{ justify-content:center; padding:11px 16px; font-size:14.5px; white-space:nowrap; }
@media (max-width:1200px){ .hero__aktionen{ flex-wrap:wrap; width:auto; } .hero__aktionen .hero__balken{ flex:1 1 100%; } }
@media (max-width:760px){ .hero__aktionen .hero__knoepfe{ flex:1 1 100%; flex-wrap:wrap; } .hero__aktionen .hero__knoepfe .btn{ flex:1 1 100%; } }

@media (min-width:1200px){ .hero__grid{ min-height:540px; } .hero__text{ padding-block:40px 44px; } }

@media (min-width:1200px){ .hero__text{ display:flex; flex-direction:column; align-self:stretch; padding-block:40px 28px; } .hero__aktionen{ margin-top:auto; padding-top:18px; } }

.merkmale{ padding-block:14px; }
.merkmale__grid{ padding-block:0; }
.merkmal{ padding-block:8px; }
.loesungen{ padding-block:32px 48px; }

.hero__fliess{ margin-bottom:22px; }


@media (min-width:1200px){ .hero .wrap{ max-width:none; padding-inline:32px; } }

:root{ --rahmen:1200px; }

/* Tablet 26.09.2026 */

/* 1. Hero 981–1199 px: Text und Bild nebeneinander. Das Bild füllt die
   Spaltenhöhe (object-fit:cover), der Ausschnitt liegt rechts der Mitte
   (Elbphilharmonie, Schiff), die linke Kante läuft wie auf dem Desktop
   in den Hero-Grund aus. Rechts läuft es bis an den Rand. */
@media (min-width:981px) and (max-width:1199px){
  .hero__grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:stretch;
    gap:24px;
  }
  .hero__text{ align-self:center; padding-block:40px; }
  .hero__bild{
    position:relative;
    width:auto;
    margin-inline:0 calc(var(--gutter) * -1);
    min-height:320px;
    overflow:hidden;
  }
  .hero__illu{
    position:absolute; inset:0;
    width:100%; height:100%; max-width:none;
    object-fit:cover; object-position:68% 50%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 10%, #000 22%);
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 10%, #000 22%);
  }
}

/* 2. Hero bis 980 px: Bild bleibt unter dem Text, aber höchstens 320 px
   hoch; cover zeigt den mittleren Streifen (Skyline und Schiff), Himmel
   oben und Wasser unten werden beschnitten. Bei 390 px ist das Bild
   ohnehin nur 219 px hoch, dort ändert sich nichts. */
@media (max-width:980px){
  .hero__text{ padding-block:40px 28px; }
  .hero__illu{ max-height:320px; object-fit:cover; object-position:50% 56%; }
}

/* 3. Hero 761–980 px: Balken und beide Knöpfe in einer Reihe, wenn sie
   passen (gemessen bei 768: 312 + 10 + 394 = 716 px von 720 px). Der
   Balken füllt den Rest der Zeile; passt die Reihe nicht, bricht sie um. */
@media (min-width:761px) and (max-width:980px){
  .hero__aktionen .hero__balken{ flex:1 1 auto; min-width:280px; }
}

/* 4. Touch-Ziele mindestens 44 px hoch (WCAG 2.2 SC 2.5.8; gemessen:
   Hero-Knöpfe 43, „Animation anhalten" 41, „Mehr erfahren" 26–28,
   „Geräte im Einzelnen" 26–28). Die Summary bekommt ihre Fläche über
   negative Ränder, der Kasten bleibt gleich groß. */
.hero__aktionen .hero__knoepfe .btn{ min-height:44px; }
.netz__pause{ min-height:44px; }
.karte__link{ margin-top:5px; min-height:44px; align-items:center; }
.stufe__geraete summary{ margin:-8px -16px; padding:8px 16px; min-height:44px; }
.stufe__geraete[open] summary{ margin-bottom:4px; }

/* 5. Links im Fließtext (Telefon, Mail, Verweise auf Impressum, Datenschutz,
   Kontakt, Lösungen, Backup): Fläche 44 px hoch ohne Zeilenversatz. Ein
   inline-block mit Innenabstand oben/unten und gleich großem negativem
   Außenabstand hält die Zeilenhöhe, die Klickfläche wächst trotzdem. */
.rechtstext p a, .rechtstext dd a, .rechtstext li a,
.kontaktliste a, .zustimmung label a, .stufen__hilfe a, .fachtext p a{
  display:inline-block; padding-block:12px; margin-block:-12px;
}

/* 6. Branchen: sieben Karten, unter 1100 px zwei- oder dreispaltig. Die
   siebte Karte stand allein in der letzten Zeile (bei 768 eine, bei 1024
   zwei leere Zellen daneben); sie füllt jetzt die letzte Zeile. */
@media (max-width:1099px){
  .karten--branchen > .karte:nth-child(7):last-child{ grid-column:1 / -1; }
}

/* 7. Fachseiten 761–980 px: Text-Bild-Paare im Desktop-Verhältnis 3:2
   statt 1:1 (bei 768 war die Textspalte 344 px breit, die Bildspalte
   gleich breit und halb leer). Seitenkopf mit Bild: Bild mittig zur
   Textspalte statt oben rechts mit Leere darunter. */
@media (min-width:761px) and (max-width:980px){
  .fach-zweispaltig{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
  .fach-zweispaltig--umgekehrt{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); }
  .seitenkopf__raster{ align-items:center; }
}

.sicherheit__unter{ margin:14px 0 0; font-size:16px; color:var(--text); }
.sicherheit__karten{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px; align-items:stretch; margin-top:36px;
}
.sicherheit__paket{ padding:28px 26px 26px; }
.sicherheit__paket:hover{ transform:none; }
.sicherheit__paket--empfohlen{ border-color:#BFDDF5; box-shadow:var(--schatten-mid); }
.sicherheit__paket--empfohlen .paket__name{ margin-top:29px; }
.sicherheit__paket .paket__sub{ min-height:0; margin-bottom:12px; color:var(--text); }
/* Kontrast: --text-leise 3,0:1 und Weiß auf --blau 3,9:1 liegen unter 4,5:1 */
.sicherheit__paket--empfohlen .badge{ background:var(--ink); }
.sicherheit__preis{ margin:0 0 18px; font-size:17px; font-weight:800; color:var(--ink); }
.sicherheit__zwischen{
  margin:4px 0 10px; font-size:14px; font-weight:800; color:var(--ink);
}
.sicherheit__paket .paket__liste{ margin-bottom:18px; }
.sicherheit__hardware{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:6px; }
.sicherheit__hardware li{
  position:relative; padding-left:16px;
  font-size:14px; line-height:1.5; color:var(--text);
}
.sicherheit__hardware li::before{
  content:""; position:absolute; left:2px; top:.6em;
  width:6px; height:6px; border-radius:50%; background:var(--blau);
}
.sicherheit__fuer{ margin:0 0 22px; font-size:14px; line-height:1.55; color:var(--text); }
.sicherheit__fuer strong{ color:var(--ink); }
.sicherheit__paket .btn{ margin-top:auto; }
.sicherheit__extras{
  margin-top:40px; padding:28px;
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius-gr);
}
.sicherheit__extras-titel{ font-size:21px; margin:0 0 18px; }
.sicherheit__extras-liste{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 28px;
}
.sicherheit__extras-liste li{ display:flex; flex-direction:column; gap:4px; }
.sicherheit__extras-liste strong{ font-size:15px; color:var(--ink); }
.sicherheit__extras-liste span{ font-size:14px; line-height:1.55; color:var(--text); }
.sicherheit__hinweis{ margin:22px 0 0; font-size:13.5px; line-height:1.6; color:var(--text); max-width:80ch; }
@media (max-width:1100px){
  .sicherheit__karten{ grid-template-columns:minmax(0,1fr); max-width:640px; margin-inline:auto; }
  .sicherheit__extras-liste{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .sicherheit__paket{ padding:22px 18px; }
  .sicherheit__extras{ padding:22px 18px; }
  .sicherheit__extras-liste{ grid-template-columns:minmax(0,1fr); }
}

.stufe__preisblock{ text-align:right; }
.stufe__preiszusatz{ margin:4px 0 0; font-size:14px; color:var(--text); }
.schutz{ list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.schutz__block{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px; background:var(--soft); border:1px solid var(--linie); border-radius:12px;
}
.schutz__block .status__icon{ flex:none; }
.schutz__block strong{ display:block; margin-bottom:4px; font-size:16px; color:var(--ink); }
.schutz__block span:last-child{ font-size:14.5px; line-height:1.55; color:var(--text); }
.netz__marke{
  display:inline-block; margin-bottom:4px; padding:2px 8px; border-radius:6px;
  background:var(--ink); color:#fff; font-size:11px; font-weight:800; letter-spacing:.06em;
}
.netz__knoten--schutz .netz__bild::after{
  content:""; position:absolute; inset:-8px -10px; border:2px solid var(--blau);
  border-radius:12px; opacity:.55; pointer-events:none;
}
.stufe__hardware{ margin:0 0 20px; font-size:14.5px; font-weight:700; color:var(--ink); }
.stufe__aktion{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.stufe__mehr{ font-size:15px; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px){
  .schutz{ grid-template-columns:minmax(0,1fr); }
  .stufe__preisblock{ text-align:left; }
}
/* Mobil kompakt: In den Paketen wiederholt die Statuskarte nur den Plan. */
@media (max-width:760px){
  .stufe__bild--netz .status{ display:none; }
  .schutz__block{ padding:14px; }
}
/* FAQ zu den Sicherheitspaketen (Frage 100) */
.fragen{ margin-top:40px; max-width:860px; }
.fragen__titel{ font-size:21px; margin:0 0 14px; }
.fragen__eintrag{ background:#fff; border:1px solid var(--linie); border-radius:12px; margin-bottom:10px; }
.fragen__eintrag summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px;
  min-height:44px; padding:14px 18px; font-weight:700; color:var(--ink);
}
.fragen__eintrag summary::-webkit-details-marker{ display:none; }
.fragen__eintrag summary::before{
  content:""; flex:none; width:8px; height:8px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(-45deg); transition:transform .2s;
}
.fragen__eintrag[open] summary::before{ transform:rotate(45deg); }
.fragen__eintrag summary:focus-visible{ outline:3px solid var(--blau); outline-offset:2px; border-radius:12px; }
.fragen__eintrag p{ margin:0; padding:0 18px 16px 38px; font-size:15px; line-height:1.65; color:var(--text); }
.stufe__betreuung{
  margin:-4px 0 22px; padding:12px 16px;
  background:var(--soft); border-left:3px solid var(--rot); border-radius:0 8px 8px 0;
  font-size:14.5px; line-height:1.6; color:var(--text);
}
.stufe__betreuung strong{ color:var(--ink); }
.karte__hinweis{ margin:14px 0 0; font-size:13.5px; line-height:1.55; color:var(--text); }
.karte li strong{ color:var(--ink); }
.schutz__block span:last-child strong:only-child{ margin-bottom:0; }
.sicherheit__extras-intro{ margin:-8px 0 20px; font-size:15px; color:var(--text); }
.sicherheit__optional{
  align-self:flex-start; margin-bottom:2px; padding:1px 7px; border-radius:5px;
  border:1px solid var(--linie); background:var(--soft);
  font-size:11.5px; font-weight:700; color:var(--ink);
}
.stufe__name{ hyphens:manual; -webkit-hyphens:manual; text-wrap:balance; }
/* Lösungsseite: Stichpunkte direkt unter dem Text statt am Kartenboden */
#gateway ~ .karte ul, #gateway ul{ margin-top:0; }
.stufe__preisblock{ max-width:300px; }
.schutz{ grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
.karte--schwerpunkt{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:20px 40px; align-items:center;
  margin-bottom:22px; padding:32px;
  border:2px solid #BFDDF5; border-left:4px solid var(--rot);
  box-shadow:var(--schatten-mid);
}
.karte--schwerpunkt .karte__bild{ height:180px; margin-bottom:0; }
.karte--schwerpunkt .karte__bild img{ max-height:110px; }
.karte--schwerpunkt h3{ font-size:clamp(22px,2vw,26px); }
.karte--schwerpunkt p{ font-size:16px; }
.karte--schwerpunkt ul{ margin:4px 0 0; }
.karte--schwerpunkt li{ font-size:15px; }
.karte__hinweis a{ color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.karten--bausteine{ grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:18px; }
.karten--bausteine .karte{ padding:22px 20px; }
.karten--bausteine .karte__bild{ height:96px; margin-bottom:16px; }
.karten--bausteine .karte__bild img{ max-height:72px; }
.karten--bausteine h3{ font-size:17.5px; margin-bottom:8px; }
.karten--bausteine .karte p{ font-size:14.5px; line-height:1.6; margin-bottom:12px; }
.karten--bausteine li{ font-size:14px; margin-bottom:0; }
@media (max-width:900px){
  .stufe__preisblock{ max-width:none; }
  .karte--schwerpunkt{ grid-template-columns:minmax(0,1fr); padding:24px 20px; }
  .karte--schwerpunkt .karte__bild{ height:130px; }
  .karte--schwerpunkt .karte__bild img{ max-height:84px; }
}
/* Vier Schutzblöcke als 2 × 2, sonst werden die Spalten zu schmal für den Text */
@media (min-width:901px){
  .schutz:has(> li:nth-child(4)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.karten--bausteine .karte{ overflow-wrap:break-word; }
/* Mobil: Bausteine einspaltig, Bild links klein, Text rechts */
@media (max-width:520px){
  .karten--bausteine{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .karten--bausteine .karte{
    display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:14px; align-items:start;
    padding:16px 14px;
  }
  .karten--bausteine .karte > *{ grid-column:2; }
  .karten--bausteine .karte__bild{ grid-column:1; grid-row:1 / span 3; height:64px; margin:0; }
  .karten--bausteine .karte__bild img{ max-height:44px; max-width:90%; }
  .karten--bausteine h3{ font-size:16.5px; margin-bottom:4px; }
  .karten--bausteine .karte p{ font-size:14px; margin-bottom:6px; }
  .karten--bausteine .karte ul{ margin-top:0; }
}
/* Mobil: Schutzblöcke als eine zusammenhängende Liste statt einzelner Kästen */
@media (max-width:760px){
  .schutz{ gap:0; background:var(--soft); border:1px solid var(--linie); border-radius:12px; }
  .schutz__block{ padding:12px 14px; background:none; border:0; border-radius:0; }
  .schutz__block + .schutz__block{ border-top:1px solid var(--linie); }
  .schutz__block strong{ font-size:15.5px; margin-bottom:2px; }
  .schutz__block span:last-child{ font-size:14px; line-height:1.5; }
}
/* Fünf Bausteine ohne einzelne Waise: breit fünf in einer Reihe, mittel 3 + 2 */
@media (min-width:1101px){
  .karten--bausteine{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (min-width:521px) and (max-width:1100px){
  .karten--bausteine{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .karten--bausteine .karte{ grid-column:span 2; }
  .karten--bausteine .karte:nth-child(n+4){ grid-column:span 3; }
}
.karten--bausteine li{ font-size:13.5px; line-height:1.5; }
.karten--bausteine li::before{ border-color:var(--text); }
/* Lösungsseite, finale Runde (12.10.2026): schematische Diagramme, Vergleichstabelle,
   FAQ als eigener Abschnitt. Nur Klassen, die allein auf /loesungen/ vorkommen. */
.stufe__schema{
  margin:0 0 14px; font-size:13.5px; font-weight:700; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.stufe__schema::before{
  content:""; flex:none; width:10px; height:10px; border-radius:2px;
  border:2px dashed var(--ink);
}
.stufe__bild--netz .netz__bild .punkt{ display:none; }   /* keine „online“-Punkte in Schemata */
.status--schema .status__titel{ margin:0; }
.status--schema .status__zeile small{ color:var(--text); }
ol.status__liste{ list-style:none; margin:0; }
.paar__bild .status--schema{ max-width:440px; }
.paar__bild .status--schema .status__liste li{ align-items:flex-start; }
/* Erweitert: Anbindung über das Internet */
.netz-extern{
  margin-top:18px; padding:16px 18px;
  border:1px dashed #BFDDF5; border-radius:12px; background:#fff;
}
.netz-extern__titel{ margin:0 0 12px; font-size:14px; font-weight:800; color:var(--ink); }
.netz-extern__liste{ list-style:none; margin:0 0 10px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.netz-extern__liste li{ display:flex; align-items:center; gap:12px; min-width:0; }
.netz-extern__liste img{ width:52px; height:44px; object-fit:contain; flex:none; }
.netz-extern__liste span{ display:flex; flex-direction:column; min-width:0; }
.netz-extern__liste strong{ font-size:14.5px; color:var(--ink); }
.netz-extern__liste small{ font-size:13px; color:var(--text); }
.netz-extern__text{ margin:0; font-size:13.5px; line-height:1.55; color:var(--text); }
@media (max-width:640px){
  .netz-extern__liste{ grid-template-columns:minmax(0,1fr); gap:8px; }
}
/* Sicherheitspakete: Hardware im Akkordeon, Vergleichstabelle */
.sicherheit__geraete{ margin:0 0 20px; border:1px solid var(--linie); border-radius:10px; background:var(--soft); }
.sicherheit__geraete summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px;
  min-height:44px; padding:10px 14px; font-size:14.5px; font-weight:700; color:var(--ink);
}
.sicherheit__geraete summary::-webkit-details-marker{ display:none; }
.sicherheit__geraete summary::before{
  content:""; flex:none; width:7px; height:7px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(-45deg); transition:transform .2s;
}
.sicherheit__geraete[open] summary::before{ transform:rotate(45deg); }
.sicherheit__geraete summary:focus-visible{ outline:3px solid var(--blau); outline-offset:2px; }
.sicherheit__geraete .sicherheit__hardware{ margin:0; padding:0 14px 12px; }
.vergleich{ position:relative; margin-top:32px; overflow-x:auto; border:1px solid var(--linie); border-radius:14px; background:#fff; }
.vergleich:focus-visible{ outline:3px solid var(--blau); outline-offset:2px; }
.vergleich__tabelle{ width:100%; min-width:680px; border-collapse:collapse; font-size:14px; line-height:1.5; }
.vergleich__tabelle caption{ text-align:left; padding:16px 18px 8px; font-size:19px; font-weight:800; color:var(--ink); }
.vergleich__tabelle th, .vergleich__tabelle td{ padding:10px 14px; border-top:1px solid var(--linie); text-align:left; vertical-align:top; color:var(--text); }
.vergleich__tabelle thead th{ background:var(--soft); color:var(--ink); font-weight:800; }
.vergleich__tabelle tbody th{ color:var(--ink); font-weight:700; width:26%; }
.vergleich__tabelle td:nth-child(3){ background:#F7FBFE; }
.vergleich__ja{ font-weight:700; color:var(--ink); }
.vergleich__nein{ color:var(--text); }
.vergleich__hinweis{ margin:12px 0 0; max-width:860px; font-size:14px; line-height:1.6; color:var(--text); }
.nur-vorlesen{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.abschnitt--fragen .fragen{ margin-top:0; }
.abschnitt--fragen .fragen__titel{ font-size:clamp(26px,2.4vw,34px); margin-bottom:18px; }
/* Gerätebilder: nie verzerren */
.karten--bausteine .karte__bild img, .karte--schwerpunkt .karte__bild img{ object-fit:contain; }
.stufe__schema{ align-items:flex-start; line-height:1.5; }
.stufe__schema::before{ margin-top:.3em; }
/* Vergleich mobil: jede Leistung als Block, Paketname vor dem Wert */
@media (max-width:640px){
  .vergleich{ overflow:visible; }
  .vergleich__tabelle{ min-width:0; }
  .vergleich__tabelle thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .vergleich__tabelle, .vergleich__tabelle tbody, .vergleich__tabelle tr, .vergleich__tabelle th, .vergleich__tabelle td{ display:block; width:auto; }
  .vergleich__tabelle caption{ display:block; padding:14px 14px 6px; }
  .vergleich__tabelle tr{ padding:10px 14px 12px; border-top:1px solid var(--linie); }
  .vergleich__tabelle tbody th, .vergleich__tabelle td{ border:0; padding:2px 0; width:auto; }
  .vergleich__tabelle tbody th{ margin-bottom:4px; }
  .vergleich__tabelle td:nth-child(3){ background:none; }
  .vergleich__tabelle td::before{ content:attr(data-paket) ": "; font-weight:700; color:var(--ink); }
}

/* ===== Leistungen in drei Gruppen, gemeinsame Anfrage (nexus-service-website#100, 17.10.2026) ===== */
.verbgruppe{ margin-top:48px; }
.verbgruppe:first-of-type{ margin-top:8px; }
.verbgruppe__kopf{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--linie); }
.verbgruppe__kopf h3{ margin:0; font-size:28px; font-weight:800; color:var(--ink); }
.verbgruppe__kopf p{ margin:0; font-size:16px; color:var(--text); }
.schilder{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.schild{ font-size:12px; font-weight:700; line-height:1.4; border-radius:999px; padding:3px 10px; background:var(--blau-hell); color:#1C67AE; }
.schild--paket{ background:#E9F8F0; color:#13703F; }
.schild--neu{ background:var(--rose); color:var(--rot-tief); }
.karte__aktionen{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:auto; padding-top:8px; }
.karten--leistungen .karte{ display:flex; flex-direction:column; }
.karte__aktionen .btn:focus-visible, .karte__aktionen .karte__link:focus-visible{ outline:3px solid var(--blau); outline-offset:2px; }
.auswahl{ border:1px solid var(--linie); border-radius:var(--radius); padding:16px 18px; margin:0; }
.auswahl legend{ padding:0 6px; font-weight:600; color:var(--ink); }
.auswahl__liste{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px 16px; margin-top:8px; }
.auswahl__liste label{ display:flex; gap:10px; align-items:flex-start; font-size:15px; font-weight:400; color:var(--text); cursor:pointer; }
.auswahl__liste input{ width:20px; height:20px; margin-top:1px; accent-color:var(--rot); flex:none; }
.auswahl__liste input:focus-visible{ outline:3px solid var(--blau); outline-offset:2px; }
/* Schützen hat vier Karten: 4 / 2 / 1 Spalten statt 3 + 1 allein (wie .karten--branchen) */
.karten--leistungen.karten--vier{ grid-template-columns:minmax(0,1fr); }
@media (min-width:600px){ .karten--leistungen.karten--vier{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .karten--leistungen.karten--vier{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } }
.karten--vier .karte__aktionen{ flex-direction:column; align-items:flex-start; }
.karten--vier .karte__aktionen .btn{ margin-top:auto; }

/* ---------------------------------------------------------------
   Aufklappmenü „Lösungen“ (18.10.2026, nexus-service-website#102):
   kleineres Feld mit zwei Spalten direkt unter dem Menüpunkt.
   --------------------------------------------------------------- */
.nav__punkt--klein{ position:relative; }
.mega--klein{ left:0; right:auto; width:min(560px, calc(100vw - 2*var(--gutter))); }
.mega--klein .mega__innen{ padding:26px 28px; }
.mega--klein .mega__raster{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
@media (max-width:980px){
  .mega--klein{ width:auto; }
}

/* Lösungen nach Branche auf /loesungen/ (18.10.2026, #102) */
.branche{ scroll-margin-top:calc(var(--kopf-h, 80px) + 16px); }
.branchen-loesungen .karten--branchen{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.branchen-loesungen .karten--branchen .karte{ display:flex; flex-direction:column; }
@media (max-width:999px){ .branchen-loesungen .karten--branchen{ grid-template-columns:minmax(0,1fr); } }
.branchen-loesungen .karte .kicker{ margin-bottom:10px; }
.branchen-loesungen .karte ul{ margin:14px 0 0; padding-left:0; list-style:none; }
.branchen-loesungen .karte li{ color:var(--text); }
.branchen-loesungen .karte__aktionen{ margin-top:auto; padding-top:18px; }
.kamera__liste{ margin:0 0 24px; padding-left:0; list-style:none; display:grid; gap:10px; max-width:52ch; }
.kamera__liste li{ padding-left:24px; position:relative; font-size:15.5px; line-height:1.55; color:var(--text); }
.kamera__liste li strong{ color:var(--ink); }
.kamera__liste li::before{ content:""; position:absolute; left:2px; top:7px; width:12px; height:8px; border-left:2.2px solid var(--rot); border-bottom:2.2px solid var(--rot); transform:rotate(-45deg); border-radius:1px; }
.kamera__datenschutz{ font-size:14.5px; }
#kamerasystem .paar__bild img{ max-width:min(100%, 360px); height:auto; }