/* ==========================================================================
   mobileNet — Gestaltung
   ==========================================================================

   Eine eigene Marke, kein Anklang an einen echten Anbieter. Drei Entscheidungen
   tragen das ganze Bild:

   1. ZWEI GRUNDFLÄCHEN. Tiefes Petrolschwarz („Ink") und ein warmes Ivory
      („Papier"). Die Seite wechselt zwischen beiden ab — jeder Abschnitt sitzt
      auf einer der zwei Flächen, nie auf einer dritten. Das gibt Rhythmus ohne
      Farbenlehre.
   2. EINE SIGNALFARBE. Mintgrün, ausschliesslich für Aktion und Akzent.
      Auf Papier nimmt kleiner Text die dunkle Variante — sonst reisst der
      Kontrast (AA).
   3. MONOSPACE FÜR TECHNIK. Kurzwahlen, Tarifkürzel, Zonen, Messwerte. Was
      das Netz betrifft, steht in Mono; was das Unternehmen sagt, in Grotesk.

   Der Signalbalken (vier ansteigende Striche) ist das wiederkehrende Zeichen:
   im Logo, vor Datenmengen, als Trenner.
   ========================================================================== */

:root {
  --ink: #06101a;
  --ink-2: #0b1a26;
  --ink-3: #102636;
  --linie-ink: rgba(153, 199, 214, 0.18);

  --papier: #f5f2ec;
  --papier-2: #ebe6dc;
  --linie-papier: #d8d1c4;

  --signal: #16e3a0;
  --signal-hell: #6cf3c4;
  --signal-dunkel: #00734f; /* kleiner Text auf Papier — 5,2:1 */
  --amber: #ffb454;

  --auf-ink: #e9f2f5;
  --auf-ink-leise: #9db2bd; /* 8:1 auf --ink */
  --auf-papier: #0b1a26;
  --auf-papier-leise: #55636b; /* 5,9:1 auf --papier */

  --grotesk: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --rand: 14px;
  --rand-klein: 9px;
  --spur: 0.16em;

  --breite: 1180px;
  --luft: clamp(64px, 9vw, 128px);

  --schatten: 0 24px 60px -32px rgba(6, 16, 26, 0.55);
  --schatten-stark: 0 40px 90px -40px rgba(6, 16, 26, 0.7);
}

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

html {
  scroll-behavior: smooth;
  /* Die Sprungmarken liegen unter der klebenden Leiste. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--auf-ink);
  font-family: var(--grotesk);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}

h1 {
  font-size: clamp(38px, 6.4vw, 76px);
}
h2 {
  font-size: clamp(30px, 4.2vw, 50px);
}
h3 {
  font-size: clamp(20px, 2.2vw, 25px);
  letter-spacing: -0.02em;
}

p {
  margin: 0 0 1em;
}

::selection {
  background: var(--signal);
  color: var(--ink);
}

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

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Grundraster ---------------------------------------------------------- */

.bahn {
  width: min(100% - 44px, var(--breite));
  margin-inline: auto;
}

.feld {
  padding-block: var(--luft);
}

.feld--papier {
  background: var(--papier);
  color: var(--auf-papier);
}

.feld--ink-2 {
  background: var(--ink-2);
}

/* Der Punktraster der dunklen Flächen — das Netz als Fläche. */
.raster {
  position: relative;
  isolation: isolate;
}

.raster::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    rgba(150, 210, 225, 0.16) 1px,
    transparent 1px
  );
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 5%, transparent 72%);
}

/* --- Abschnittsmarke ------------------------------------------------------ */

.marke {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--signal);
}

.feld--papier .marke {
  color: var(--signal-dunkel);
}

.marke::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  max-width: 120px;
}

.kopfzeile {
  max-width: 62ch;
  margin-bottom: 46px;
}

.kopfzeile p {
  font-size: clamp(17px, 1.7vw, 19px);
  color: var(--auf-ink-leise);
  margin-top: 18px;
  margin-bottom: 0;
}

.feld--papier .kopfzeile p {
  color: var(--auf-papier-leise);
}

/* --- Knöpfe --------------------------------------------------------------- */

.knopf {
  --knopf-bg: var(--signal);
  --knopf-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--rand-klein);
  background: var(--knopf-bg);
  color: var(--knopf-fg);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease,
    border-color 0.16s ease, box-shadow 0.16s ease;
}

.knopf:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(22, 227, 160, 0.9);
}

.knopf:active {
  transform: translateY(0);
}

.knopf--rand {
  --knopf-bg: transparent;
  --knopf-fg: var(--auf-ink);
  border-color: rgba(153, 199, 214, 0.35);
}

.knopf--rand:hover {
  border-color: var(--signal);
  color: var(--signal);
  box-shadow: none;
}

.feld--papier .knopf--rand {
  --knopf-fg: var(--auf-papier);
  border-color: var(--linie-papier);
}

.feld--papier .knopf--rand:hover {
  border-color: var(--signal-dunkel);
  color: var(--signal-dunkel);
}

.knopf--ink {
  --knopf-bg: var(--ink);
  --knopf-fg: var(--auf-ink);
}

.knopf--ink:hover {
  box-shadow: 0 14px 30px -16px rgba(6, 16, 26, 0.8);
}

.knopf--klein {
  padding: 10px 16px;
  font-size: 14px;
}

.knopf--breit {
  width: 100%;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 620;
  text-decoration: none;
  color: var(--signal);
  border-bottom: 1px solid transparent;
  transition: border-color 0.16s ease, gap 0.16s ease;
}

.feld--papier .textlink {
  color: var(--signal-dunkel);
}

.textlink:hover {
  border-bottom-color: currentColor;
  gap: 12px;
}

.textlink svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* --- Kopfleiste ----------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(6, 16, 26, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.kopf.ist-gescrollt {
  border-bottom-color: var(--linie-ink);
  background: rgba(6, 16, 26, 0.94);
}

.kopf-innen {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 74px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--auf-ink);
  flex: none;
}

.logo-zeichen {
  width: 30px;
  height: 30px;
  flex: none;
}

.logo-wort {
  font-size: 22px;
  letter-spacing: -0.035em;
  font-weight: 300;
  white-space: nowrap;
}

.logo-wort b {
  font-weight: 800;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav a {
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 560;
  text-decoration: none;
  color: var(--auf-ink-leise);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav a:hover {
  color: var(--auf-ink);
  background: rgba(153, 199, 214, 0.1);
}

.nav a[aria-current="page"] {
  color: var(--signal);
}

.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* Sprachumschalter — zwei Kürzel in einem Rahmen, die aktuelle Sprache
   ausgefüllt. Englisch steht links, weil es die Standardsprache ist. */
.sprache {
  display: inline-flex;
  align-items: stretch;
  height: 42px;
  border: 1px solid rgba(153, 199, 214, 0.28);
  border-radius: var(--rand-klein);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  flex: none;
}

.sprache a,
.sprache span {
  display: grid;
  place-items: center;
  padding: 0 10px;
  color: var(--auf-ink-leise);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.sprache a:hover {
  color: var(--auf-ink);
  background: rgba(153, 199, 214, 0.12);
}

.sprache [aria-current] {
  background: var(--signal);
  color: var(--ink);
  font-weight: 700;
}

.korb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(153, 199, 214, 0.28);
  border-radius: var(--rand-klein);
  background: transparent;
  color: var(--auf-ink);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.korb:hover {
  border-color: var(--signal);
  color: var(--signal);
}

.korb svg {
  width: 19px;
  height: 19px;
}

.korb-zahl {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: none;
  place-items: center;
  border-radius: 999px;
  background: var(--signal);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.korb[data-anzahl]:not([data-anzahl="0"]) .korb-zahl {
  display: grid;
}

/* Steht nur im ausgeklappten Menü kleiner Schirme: In der Leiste ist neben
   Logo, Warenkorb und Menüknopf kein Platz für einen dritten Knopf — er hat
   die Seite bei 390 px um 27 px über den Rand geschoben. */
.nav-nur-mobil {
  display: none;
}

.menue-knopf {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(153, 199, 214, 0.28);
  border-radius: var(--rand-klein);
  background: transparent;
  color: var(--auf-ink);
  cursor: pointer;
}

.menue-knopf svg {
  width: 20px;
  height: 20px;
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px) clamp(48px, 7vw, 92px);
}

.hero::after {
  /* Der Signalschein hinter der Grafik. */
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(22, 227, 160, 0.2),
    rgba(22, 227, 160, 0) 62%
  );
  pointer-events: none;
  z-index: -1;
}

.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero-augenbraue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--signal);
  border: 1px solid rgba(22, 227, 160, 0.3);
  border-radius: 999px;
  padding: 7px 15px 7px 11px;
  margin-bottom: 26px;
}

.puls {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(22, 227, 160, 0.7);
  animation: puls 2.4s ease-out infinite;
}

@keyframes puls {
  70% {
    box-shadow: 0 0 0 9px rgba(22, 227, 160, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22, 227, 160, 0);
  }
}

.hero h1 .betont {
  color: var(--signal);
}

.hero-text {
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--auf-ink-leise);
  max-width: 52ch;
  margin: 24px 0 32px;
}

.hero-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-fussnote {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--auf-ink-leise);
}

.hero-werte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid var(--linie-ink);
}

.wert strong {
  display: block;
  font-family: var(--mono);
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--auf-ink);
}

.wert span {
  display: block;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--auf-ink-leise);
  margin-top: 6px;
}

/* Die Hero-Grafik: Netzbögen mit zwei aufgesetzten Karten. */
.hero-bild {
  position: relative;
}

.hero-bild svg {
  width: 100%;
  height: auto;
}

.schwebe-karte {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 17px;
  border-radius: var(--rand);
  background: rgba(11, 26, 38, 0.86);
  border: 1px solid var(--linie-ink);
  backdrop-filter: blur(10px);
  box-shadow: var(--schatten-stark);
  animation: schweben 7s ease-in-out infinite;
}

.schwebe-karte:nth-of-type(2) {
  animation-delay: -3.5s;
}

@keyframes schweben {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

.schwebe-karte--oben {
  top: 6%;
  left: -4%;
}

.schwebe-karte--unten {
  bottom: 7%;
  right: -3%;
}

.schwebe-karte b {
  display: block;
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: -0.02em;
}

/* `:not(.balken)` ist nicht kosmetisch: ohne die Ausnahme gewinnt diese Regel
   gegen `.balken { display: inline-flex }` — und die vier Striche stapeln sich
   zu einem einzigen senkrechten Balken. */
.schwebe-karte span:not(.balken) {
  display: block;
  font-size: 12px;
  color: var(--auf-ink-leise);
}

.balken {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 18px;
}

.balken i {
  width: 3.5px;
  border-radius: 1px;
  background: var(--signal);
  display: block;
}

.balken i:nth-child(1) {
  height: 25%;
}
.balken i:nth-child(2) {
  height: 50%;
}
.balken i:nth-child(3) {
  height: 75%;
}
.balken i:nth-child(4) {
  height: 100%;
}

.balken--leise i {
  background: var(--auf-ink-leise);
  opacity: 0.5;
}

/* --- Laufband der Kunden (Hero-Fuss) -------------------------------------- */

.streifen {
  border-top: 1px solid var(--linie-ink);
  border-bottom: 1px solid var(--linie-ink);
  background: rgba(11, 26, 38, 0.5);
  padding-block: 18px;
  overflow: hidden;
}

.streifen-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--auf-ink-leise);
}

/* Umbrechen statt abschneiden: die Zeile ist bei 1280 px genau so lang, dass
   der letzte Eintrag sonst hinter dem Rand verschwindet. */
.streifen-innen span {
  white-space: nowrap;
}

.streifen-innen span:not(:last-child)::after {
  content: "·";
  margin-left: 18px;
  color: var(--signal);
}

/* --- Tarifkarten ---------------------------------------------------------- */

.tarif-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
}

.schalter {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--papier-2);
  border: 1px solid var(--linie-papier);
}

.schalter button {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--auf-papier-leise);
  font: inherit;
  font-size: 14px;
  font-weight: 620;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.schalter button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--auf-ink);
}

.tarife {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.tarif {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--linie-papier);
  border-radius: var(--rand);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tarif:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten);
  border-color: #c3bcae;
}

.tarif--hervor {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--auf-ink);
}

.tarif--hervor:hover {
  border-color: var(--ink);
}

.tarif-kuerzel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--auf-papier-leise);
}

.tarif--hervor .tarif-kuerzel {
  color: var(--signal);
}

.tarif h3 {
  margin: 8px 0 2px;
}

.tarif-zusatz {
  font-size: 14px;
  color: var(--auf-papier-leise);
  margin: 0 0 20px;
  min-height: 2.8em;
}

.tarif--hervor .tarif-zusatz {
  color: var(--auf-ink-leise);
}

.preis {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--mono);
  letter-spacing: -0.04em;
}

.preis b {
  font-size: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.preis span {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--auf-papier-leise);
  font-family: var(--grotesk);
}

.tarif--hervor .preis span {
  color: var(--auf-ink-leise);
}

.preis-fuss {
  font-size: 12.5px;
  color: var(--auf-papier-leise);
  margin: 6px 0 22px;
}

.tarif--hervor .preis-fuss {
  color: var(--auf-ink-leise);
}

.daten {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--rand-klein);
  background: var(--papier);
  margin-bottom: 20px;
}

.tarif--hervor .daten {
  background: rgba(153, 199, 214, 0.1);
}

.daten b {
  display: block;
  font-family: var(--mono);
  font-size: 19px;
  letter-spacing: -0.03em;
}

/* Menge und Erläuterung stehen untereinander — ohne `display: block` klebt
   „danach 1 Mbit/s" direkt an den „15 GB". Der Signalbalken bleibt aussen vor,
   sonst stapeln sich seine vier Striche senkrecht. */
.daten span:not(.balken) {
  display: block;
  font-size: 12.5px;
  color: var(--auf-papier-leise);
  line-height: 1.3;
}

.tarif--hervor .daten span {
  color: var(--auf-ink-leise);
}

.liste {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
}

.liste li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

.liste svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--signal-dunkel);
  flex: none;
}

.tarif--hervor .liste svg {
  color: var(--signal);
}

.tarif .knopf {
  margin-top: auto;
}

.fahne {
  position: absolute;
  top: -11px;
  right: 18px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--spur);
  text-transform: uppercase;
}

.tarif-hinweis {
  margin: 28px 0 0;
  font-size: 13.5px;
  color: var(--auf-papier-leise);
  max-width: 78ch;
}

/* --- Zonen-Tabelle -------------------------------------------------------- */

.zonen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.zone {
  padding: 24px;
  border: 1px solid var(--linie-ink);
  border-radius: var(--rand);
  background: rgba(11, 26, 38, 0.6);
}

.zone--inklusiv {
  border-color: rgba(22, 227, 160, 0.45);
  background: linear-gradient(
    180deg,
    rgba(22, 227, 160, 0.1),
    rgba(11, 26, 38, 0.6) 60%
  );
}

.zone-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 14px;
}

.zone h3 {
  margin-bottom: 10px;
}

/* Die Zonenzeile ist selbst ein Absatz und hat ihre eigene Schrift — ohne die
   Ausnahme gewinnt diese Regel und färbt sie grau statt mint. */
.zone p:not(.zone-name) {
  font-size: 14.5px;
  color: var(--auf-ink-leise);
}

.zone dl {
  margin: 18px 0 0;
  display: grid;
  gap: 0;
  font-size: 14.5px;
}

.zone dl > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--linie-ink);
}

.zone dt {
  color: var(--auf-ink-leise);
}

.zone dd {
  margin: 0;
  font-family: var(--mono);
  font-weight: 650;
  white-space: nowrap;
}

.zone-inklusiv-text {
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--signal);
  margin-top: 18px;
}

.laender {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.laender span {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(153, 199, 214, 0.12);
  color: var(--auf-ink-leise);
}

.sms-kasten {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  padding: 24px 26px;
  border-radius: var(--rand);
  border: 1px dashed rgba(255, 180, 84, 0.5);
  background: rgba(255, 180, 84, 0.07);
}

.sms-kasten h3 {
  margin-bottom: 8px;
}

.sms-kasten p {
  margin: 0;
  font-size: 15px;
  color: var(--auf-ink-leise);
  max-width: 70ch;
}

.kurzwahl {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--amber);
}

/* --- Netzabdeckung -------------------------------------------------------- */

.netz-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}

.pruefer {
  padding: 26px;
  border-radius: var(--rand);
  border: 1px solid var(--linie-papier);
  background: #fff;
}

.pruefer label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--auf-papier-leise);
  margin-bottom: 10px;
}

.pruefer-zeile {
  display: flex;
  gap: 10px;
}

.pruefer input {
  flex: 1;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--linie-papier);
  border-radius: var(--rand-klein);
  background: var(--papier);
  font: inherit;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--auf-papier);
}

.pruefer input::placeholder {
  color: #9a9284;
  letter-spacing: 0.08em;
}

.pruefer-ergebnis {
  margin: 18px 0 0;
  font-size: 14.5px;
  min-height: 1.6em;
}

.pruefer-ergebnis[data-stand="laeuft"] {
  color: var(--auf-papier-leise);
  font-family: var(--mono);
}

.pruefer-ergebnis[data-stand="treffer"] {
  color: var(--signal-dunkel);
  font-weight: 620;
}

.pruefer-ergebnis[data-stand="fehler"] {
  color: #a8341f;
}

.netz-werte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie-papier);
  border: 1px solid var(--linie-papier);
  border-radius: var(--rand);
  overflow: hidden;
}

.netz-wert {
  background: var(--papier);
  padding: 24px;
}

.netz-wert b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.netz-wert span {
  display: block;
  font-size: 14px;
  color: var(--auf-papier-leise);
  margin-top: 4px;
}

/* --- Leistungskacheln ----------------------------------------------------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.kachel {
  padding: 26px 24px;
  border: 1px solid var(--linie-ink);
  border-radius: var(--rand);
  background: rgba(11, 26, 38, 0.55);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.kachel:hover {
  border-color: rgba(22, 227, 160, 0.4);
  transform: translateY(-3px);
}

.kachel-zeichen {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(22, 227, 160, 0.12);
  color: var(--signal);
  margin-bottom: 18px;
}

.kachel-zeichen svg {
  width: 22px;
  height: 22px;
}

.kachel h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

.kachel p {
  margin: 0;
  font-size: 14.5px;
  color: var(--auf-ink-leise);
}

/* --- Shop ----------------------------------------------------------------- */

.waren {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ware {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie-papier);
  border-radius: var(--rand);
  background: #fff;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ware:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten);
}

.ware-bild {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--ink-2), var(--ink));
  color: var(--signal);
  position: relative;
}

.ware-bild svg {
  width: 58%;
  height: auto;
}

.lager {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(6, 16, 26, 0.72);
  border: 1px solid rgba(22, 227, 160, 0.4);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
}

.lager::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
}

.lager--knapp {
  border-color: rgba(255, 180, 84, 0.5);
  color: var(--amber);
}

.lager--knapp::before {
  background: var(--amber);
}

.ware-text {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ware-text h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.ware-text p:not(.ware-preis) {
  font-size: 14.5px;
  color: var(--auf-papier-leise);
  margin-bottom: 20px;
}

.ware-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}

.ware-preis {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ware-preis small {
  display: block;
  font-family: var(--grotesk);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--auf-papier-leise);
}

/* --- Kundenwand ----------------------------------------------------------- */

.kundenwand {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie-ink);
  border: 1px solid var(--linie-ink);
  border-radius: var(--rand);
  overflow: hidden;
}

.kunde {
  background: var(--ink);
  min-height: 128px;
  display: grid;
  place-items: center;
  padding: 26px 22px;
  position: relative;
  transition: background-color 0.2s ease;
}

.kunde:hover {
  background: var(--ink-2);
}

.kunde img {
  max-height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* Eine Wand, ein Ton: jedes Logo wird auf Weiss gebracht — gleich, ob es
     als weisse, schwarze oder farbige Datei vorliegt. */
  filter: brightness(0) invert(1);
  opacity: 0.62;
  transition: opacity 0.2s ease;
}

.kunde:hover img {
  opacity: 1;
}

.kunde-branche {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auf-ink-leise);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.kunde:hover .kunde-branche {
  opacity: 0.85;
}

.stimme {
  margin: 34px 0 0;
  padding: 32px;
  border: 1px solid var(--linie-ink);
  border-radius: var(--rand);
  background: rgba(11, 26, 38, 0.55);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.stimme blockquote {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.stimme figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--auf-ink-leise);
}

.stimme .anfuehrung {
  font-family: var(--mono);
  font-size: 64px;
  line-height: 1;
  color: var(--signal);
  opacity: 0.5;
}

/* --- Aufruf --------------------------------------------------------------- */

.aufruf {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--ink-2), var(--ink) 65%);
  border-top: 1px solid var(--linie-ink);
}

.aufruf-innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}

.aufruf h2 {
  max-width: 18ch;
}

.aufruf p {
  color: var(--auf-ink-leise);
  max-width: 56ch;
  margin: 18px 0 0;
}

/* --- Fussbereich ---------------------------------------------------------- */

.fuss {
  background: var(--ink);
  border-top: 1px solid var(--linie-ink);
  padding-block: 56px 34px;
  font-size: 14.5px;
}

.fuss-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--linie-ink);
}

/* Nur die Spalten des Rasters, nicht jeder Absatz im Fussbereich: sonst erbt
   auch der Spielhinweis darunter die 34 Zeichen und wird zur Säule. */
.fuss-raster p {
  color: var(--auf-ink-leise);
  max-width: 34ch;
  margin: 16px 0 0;
}

.fuss h4 {
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 14px;
  font-weight: 500;
}

.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.fuss ul a {
  color: var(--auf-ink-leise);
  text-decoration: none;
}

.fuss ul a:hover {
  color: var(--auf-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fuss-unten {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  color: var(--auf-ink-leise);
  font-size: 13px;
}

.fuss-unten nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.fuss-unten a {
  color: inherit;
  text-decoration: none;
}

.fuss-unten a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.spiel-hinweis {
  margin-top: 18px;
  padding: 12px 16px;
  border-left: 2px solid var(--amber);
  background: rgba(255, 180, 84, 0.07);
  color: var(--auf-ink-leise);
  font-size: 13px;
  max-width: 96ch;
}

/* --- Meldung (Warenkorb) -------------------------------------------------- */

.meldung {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 90;
  transform: translate(-50%, 24px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--ink-2);
  border: 1px solid rgba(22, 227, 160, 0.45);
  box-shadow: var(--schatten-stark);
  color: var(--auf-ink);
  font-size: 14.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.meldung.ist-sichtbar {
  opacity: 1;
  transform: translate(-50%, 0);
}

.meldung svg {
  width: 18px;
  height: 18px;
  color: var(--signal);
  flex: none;
}

/* --- Einblenden beim Scrollen --------------------------------------------- */

.zeigt {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.zeigt.ist-da {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Unterseite: Roaming
   ========================================================================== */

.brotkrumen {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auf-ink-leise);
  padding-top: 34px;
}

.brotkrumen a {
  text-decoration: none;
  color: inherit;
}

.brotkrumen a:hover {
  color: var(--signal);
}

.brotkrumen span {
  margin: 0 8px;
  color: var(--signal);
}

.seiten-kopf {
  padding-block: 34px clamp(46px, 6vw, 78px);
}

.seiten-kopf h1 {
  max-width: 20ch;
}

.seiten-kopf .hero-text {
  margin-bottom: 0;
}

/* Kopf der Roaming-Seite: Text links, die SMS daneben — sonst steht die halbe
   Breite leer und die Nachricht, um die es geht, weit unten. */
.kopf-zwei {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}

.kopf-zwei .sms-vorschau {
  margin-top: 0;
  max-width: none;
}

@media (max-width: 900px) {
  .kopf-zwei {
    grid-template-columns: minmax(0, 1fr);
  }
  .kopf-zwei .sms-vorschau {
    margin-top: 30px;
  }
}

.sms-vorschau {
  margin-top: 40px;
  max-width: 560px;
  padding: 20px 22px;
  border-radius: 20px 20px 20px 6px;
  background: var(--ink-2);
  border: 1px solid var(--linie-ink);
  position: relative;
}

.sms-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 12px;
}

.sms-vorschau p {
  margin: 0;
  font-size: 15px;
  color: var(--auf-ink-leise);
}

.sms-vorschau mark {
  background: rgba(22, 227, 160, 0.18);
  color: var(--signal);
  padding: 1px 4px;
  border-radius: 4px;
}

/* Schritte */

.schritte {
  display: grid;
  gap: 18px;
  counter-reset: schritt;
}

.schritt {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 26px;
  align-items: center;
  padding: 26px;
  border: 1px solid var(--linie-papier);
  border-radius: var(--rand);
  background: #fff;
}

.schritt-zahl {
  counter-increment: schritt;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linie-papier);
  background: var(--papier);
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  color: var(--auf-papier);
}

.schritt-zahl::before {
  content: counter(schritt, decimal-leading-zero);
}

.schritt h3 {
  margin-bottom: 10px;
}

.schritt p {
  margin: 0;
  font-size: 15px;
  color: var(--auf-papier-leise);
}

.schritt p + p {
  margin-top: 10px;
}

.schritt kbd {
  font-family: var(--mono);
  font-size: 13.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--papier-2);
  border: 1px solid var(--linie-papier);
  color: var(--auf-papier);
  white-space: nowrap;
}

/* Die kleine iPad-Nachbildung neben jedem Schritt. */
.pad {
  border-radius: 14px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  padding: 7px;
  box-shadow: var(--schatten);
}

.pad-schirm {
  border-radius: 9px;
  overflow: hidden;
  background: #12161c;
  color: #f2f5f7;
  font-size: 11px;
  line-height: 1.35;
}

.pad-statusleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  color: #f2f5f7;
}

.pad-status-rechts {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pad-balken {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 9px;
}

.pad-balken i {
  width: 2.5px;
  border-radius: 1px;
  background: rgba(242, 245, 247, 0.3);
}

.pad-balken i.an {
  background: #f2f5f7;
}

.pad-balken i:nth-child(1) {
  height: 30%;
}
.pad-balken i:nth-child(2) {
  height: 52%;
}
.pad-balken i:nth-child(3) {
  height: 76%;
}
.pad-balken i:nth-child(4) {
  height: 100%;
}

.pad-flugzeug {
  width: 11px;
  height: 11px;
  color: #f2f5f7;
}

.pad-inhalt {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  min-height: 172px;
}

.pad-leiste {
  background: #1b1f26;
  padding: 8px 7px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.pad-suche {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px 8px;
  color: rgba(242, 245, 247, 0.5);
  font-size: 10px;
  margin-bottom: 8px;
}

.pad-zeile {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 7px;
  color: #f2f5f7;
}

.pad-zeile.ist-aktiv {
  background: rgba(255, 255, 255, 0.14);
}

.pad-zeile.ist-blass {
  color: rgba(242, 245, 247, 0.55);
}

.pad-kaestchen {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 9px;
  color: #fff;
  flex: none;
}

.pad-schalter {
  margin-left: auto;
  width: 26px;
  height: 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  position: relative;
  transition: background-color 0.2s ease;
  flex: none;
}

.pad-schalter::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.pad-schalter.ist-an {
  background: #30d158;
}

.pad-schalter.ist-an::after {
  transform: translateX(11px);
}

.pad-schalter.ist-an-orange {
  background: #ff9f0a;
}

.pad-schalter.ist-an-orange::after {
  transform: translateX(11px);
}

.pad-tafel {
  padding: 12px;
  color: rgba(242, 245, 247, 0.72);
}

.pad-tafel h4 {
  font-size: 12px;
  color: #f2f5f7;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.pad-hinweis {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 8px 10px;
  font-size: 10.5px;
}

.pad-home {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 14px;
  padding: 16px 14px;
}

.pad-app {
  display: grid;
  justify-items: center;
  gap: 5px;
  font-size: 9px;
  color: rgba(242, 245, 247, 0.85);
  text-align: center;
}

.pad-app i {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 15px;
  color: #fff;
}

.pad-app.ist-ziel i {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* Merksatz-Kasten */

.merke {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 26px;
  border-radius: var(--rand);
  background: rgba(22, 227, 160, 0.09);
  border: 1px solid rgba(22, 227, 160, 0.32);
  margin-top: 28px;
}

.merke--warnung {
  background: rgba(255, 180, 84, 0.09);
  border-color: rgba(255, 180, 84, 0.35);
}

.merke-zeichen {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(22, 227, 160, 0.16);
  color: var(--signal);
  flex: none;
}

.merke--warnung .merke-zeichen {
  background: rgba(255, 180, 84, 0.16);
  color: var(--amber);
}

.merke-zeichen svg {
  width: 18px;
  height: 18px;
}

.merke h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.merke p {
  margin: 0;
  font-size: 15px;
  color: var(--auf-ink-leise);
}

.feld--papier .merke p {
  color: var(--auf-papier-leise);
}

/* Fragen und Antworten */

.fragen {
  display: grid;
  gap: 10px;
  max-width: 900px;
}

.frage {
  border: 1px solid var(--linie-ink);
  border-radius: var(--rand-klein);
  background: rgba(11, 26, 38, 0.5);
  overflow: hidden;
}

.frage summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-weight: 620;
  font-size: 16.5px;
}

.frage summary::-webkit-details-marker {
  display: none;
}

.frage summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 21px;
  color: var(--signal);
  flex: none;
  transition: transform 0.2s ease;
}

.frage[open] summary::after {
  transform: rotate(45deg);
}

.frage-inhalt {
  padding: 0 22px 20px;
  color: var(--auf-ink-leise);
  font-size: 15px;
  max-width: 78ch;
}

.frage-inhalt p:last-child {
  margin-bottom: 0;
}

/* Zweispaltiger Abschluss der Unterseite */

.zwei-spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* --- Impressum ------------------------------------------------------------ */

.text-seite {
  max-width: 74ch;
}

.text-seite h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 44px 0 14px;
}

.text-seite p,
.text-seite li {
  color: var(--auf-ink-leise);
  font-size: 16px;
}

/* Der Vorlauf steht über den Abschnitten und nimmt die volle Spaltenbreite —
   `.hero-text` mit seinen 52 Zeichen sähe hier wie eine Randnotiz aus. */
.text-seite .vorlauf {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  color: var(--auf-ink);
  max-width: none;
  margin-bottom: 0;
}

.text-seite ul {
  padding-left: 20px;
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

/* ==========================================================================
   Kleinere Schirme
   ========================================================================== */

@media (max-width: 1080px) {
  .tarife {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kundenwand {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kacheln,
  .waren,
  .zonen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fuss-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .kopf-innen {
    height: 66px;
  }
  .nav {
    position: fixed;
    inset: 66px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 22px 22px;
    background: rgba(6, 16, 26, 0.98);
    border-bottom: 1px solid var(--linie-ink);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav.ist-offen {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .nav a {
    padding: 13px;
    font-size: 17px;
    border-bottom: 1px solid var(--linie-ink);
    border-radius: 0;
  }
  .menue-knopf {
    display: inline-flex;
    order: 3;
  }
  .kopf-aktionen {
    margin-left: auto;
  }
  .nav-nur-mobil {
    display: block;
  }
  .hero-raster,
  .netz-raster,
  .aufruf-innen,
  .sms-kasten {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-bild {
    order: -1;
    margin-inline: -6px;
  }
  .schwebe-karte--oben {
    left: 0;
  }
  .schwebe-karte--unten {
    right: 0;
  }
  .schritt {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 18px;
  }
  .schritt-zahl {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
  .pad {
    grid-column: 1 / -1;
  }
  .stimme {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  .bahn {
    width: min(100% - 32px, var(--breite));
  }
  .tarife,
  .kacheln,
  .waren,
  .zonen,
  .netz-werte,
  .zwei-spalten,
  .fuss-raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .kundenwand {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-werte {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .schwebe-karte {
    position: static;
    animation: none;
    margin-top: 12px;
  }
  /* Nur freistehende Aufrufe über die volle Breite — nicht der Knopf neben dem
     Eingabefeld der Netzabfrage, der drückte es sonst auf Null. */
  .hero-knoepfe .knopf,
  .sms-kasten .knopf,
  .text-seite .knopf {
    width: 100%;
  }
  .hero-knoepfe {
    flex-direction: column;
    align-items: stretch;
  }
  /* In der Kopfleiste bleiben Warenkorb und Menü; „Mein mobileNet" steht dann
     als erster Eintrag im ausgeklappten Menü. */
  .kopf-aktionen > .knopf {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .zeigt {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .kopf,
  .meldung,
  .aufruf {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}