/* IT-Service Albrecht – Stylesheet
   Leitmotiv: das Netzwerkkabel aus dem „A" des Logos zieht sich als Linie durch die Seite. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --rot: #bc3a39;
  --rot-tief: #962d2c;
  --graphit: #24262a;
  --grau: #5b5f66;
  --linie: #d9dbdf;
  --flaeche: #f2f3f5;
  --weiss: #ffffff;
  --led: #2bb463;
  --led-aus: #c9ccd1;

  --schrift: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --rinne: 4.5rem;          /* Platz links für das Kabel */
  --kabel-x: 1.4rem;        /* Lage des Kabels in der Rinne */
  --max: 72rem;
}

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

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

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--graphit);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--rot-tief); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--rot); }

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

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--graphit); color: var(--weiss); padding: 0.6rem 1rem;
}
.skip:focus { top: 1rem; color: var(--weiss); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- Kopf ---------- */

.kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.75rem; }
.logo { display: block; width: clamp(9.5rem, 22vw, 13rem); }
.logo img { width: 100%; }
.logo.ist-gezogen img { animation: zucken 0.35s ease-in-out 2; }

.nav { display: flex; gap: clamp(0.9rem, 2.4vw, 2rem); font-weight: 500; font-size: 0.98rem; }
.nav a { color: var(--graphit); text-decoration: none; padding-block: 0.4rem; }
.nav a:hover { color: var(--rot); }
.nav__kontakt { color: var(--rot) !important; font-weight: 650; }

@media (max-width: 46rem) {
  .nav a:not(.nav__kontakt) { display: none; }
}

/* ---------- Kabel ---------- */

.haupt { position: relative; overflow: hidden; }

.kabel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.kabel path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kabel__mantel { stroke: var(--rot); stroke-width: 7; }
.kabel__ader { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; }
body.ist-getrennt .kabel__mantel { stroke: var(--led-aus); transition: stroke 0.3s; }

.abschnitt, .held { position: relative; z-index: 1; }

/* Messpunkte: kleine LEDs auf dem Kabel, die beim Scrollen grün werden */
.messpunkt {
  position: absolute;
  left: calc(var(--kabel-x) - var(--rinne) - 0.65rem);
  top: 0.15em;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--weiss);
  border: 3px solid var(--rot);
  display: grid; place-items: center;
}
.messpunkt::after {
  content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: var(--led-aus);
  transition: background 0.25s, box-shadow 0.25s;
}
.messpunkt.ist-an::after { background: var(--led); box-shadow: 0 0 0 3px rgba(43, 180, 99, 0.22); }
body.ist-getrennt .messpunkt::after { background: var(--rot); box-shadow: none; }

/* ---------- Held ---------- */

.held {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(3rem, 8vw, 6.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

h1, h2, h3 { line-height: 1.08; margin: 0; font-weight: 700; }

h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.9rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.025em;
  line-height: 1;
  max-width: 13ch;
}
.held__lead { font-size: clamp(1.1rem, 1.6vw, 1.28rem); color: var(--grau); max-width: 36rem; margin: 1.5rem 0 2rem; }
.held__aktionen { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; }

.knopf {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.35rem;
  background: var(--rot); color: var(--weiss);
  border: 2px solid var(--rot);
  border-radius: 0.4rem;
  font-weight: 650; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.knopf:hover { background: var(--rot-tief); border-color: var(--rot-tief); color: var(--weiss); }
.knopf--still { background: transparent; color: var(--graphit); border-color: var(--linie); }
.knopf--still:hover { background: var(--flaeche); border-color: var(--grau); color: var(--graphit); }
.knopf--gross { font-size: clamp(1.05rem, 2.4vw, 1.45rem); padding: 1rem 1.6rem; word-break: break-all; }

/* Switch-Frontblende */
.switch { margin: 0; }
.switch__front {
  background: linear-gradient(180deg, #34373c 0%, #26282c 100%);
  border-radius: 0.6rem;
  padding: 1.25rem 1.25rem 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px -22px rgba(36, 38, 42, 0.55);
}
.switch__ports { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem 0.7rem; }
.port { display: grid; justify-items: center; gap: 0.35rem; }
.port b {
  order: 3;
  font: 500 0.68rem/1 var(--mono);
  color: #b9bcc2;
  letter-spacing: 0.02em;
}
.port::before {
  /* RJ45-Buchse */
  content: "";
  order: 2;
  width: 100%; max-width: 3.4rem; aspect-ratio: 1.25;
  background: #0f1012;
  border: 2px solid #4a4d53;
  border-radius: 3px;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 72% 78%, 72% 100%, 28% 100%, 28% 78%, 0 78%);
}
.led {
  order: 1;
  display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: #3b3e44;
}
.switch .led { animation: blinken 3.2s steps(1) infinite; background: #3b3e44; }
.switch .port:nth-child(1) .led { animation-delay: -0.4s; }
.switch .port:nth-child(2) .led { animation-delay: -1.3s; animation-duration: 2.1s; }
.switch .port:nth-child(3) .led { animation-delay: -2.2s; }
.switch .port:nth-child(4) .led { animation-delay: -0.9s; animation-duration: 4.3s; }
.switch .port:nth-child(5) .led { animation-delay: -1.7s; animation-duration: 2.7s; }
.switch .port:nth-child(6) .led { animation-delay: -2.9s; }
.switch .port:nth-child(7) .led { animation-delay: -0.2s; animation-duration: 3.7s; }
.switch .led--an, .switch .port--kabel .led { background: var(--led); animation: none; box-shadow: 0 0 6px rgba(43, 180, 99, 0.8); }
.port--kabel { position: relative; }
.port--kabel b { color: var(--weiss); font-weight: 700; position: relative; z-index: 4; text-shadow: 0 0 3px #26282c, 0 0 3px #26282c; }

/* Eingesteckter RJ45-Stecker: klarer Steckerkörper mit Goldkontakten, rote Knickschutz-Tülle */
.stecker {
  position: absolute; z-index: 3;
  top: 0.85rem; left: 50%;
  width: min(100%, 3.4rem); aspect-ratio: 1.25;
  transform: translateX(-50%);
  transition: transform 0.35s cubic-bezier(.3, 1.6, .5, 1);
}
.stecker::before {
  /* Steckerkörper in der Buchse */
  content: ""; position: absolute; inset: 3px 3px 0;
  clip-path: polygon(0 0, 100% 0, 100% 76%, 0 76%);
  background:
    repeating-linear-gradient(90deg, transparent 0 9%, #d9ac3c 9% 14%) top 4px left 50% / 82% 28% no-repeat,
    linear-gradient(180deg, rgba(236, 240, 245, 0.92), rgba(190, 197, 207, 0.88));
  border-radius: 2px 2px 0 0;
}
.stecker__tuelle {
  position: absolute; left: 50%; top: 58%;
  width: 46%; height: 62%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #9a2e2d, var(--rot) 35%, #d0504f 55%, var(--rot) 75%, #8c2a29);
  border-radius: 3px 3px 5px 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}
.kabel--vorn { z-index: 2; }
.kabel--vorn .kabel__mantel { transition: transform 0.35s cubic-bezier(.3, 1.6, .5, 1); }
body.ist-getrennt .stecker { transform: translate(-50%, 1.6rem) rotate(-8deg); }
.port--kabel::before { border-color: var(--rot); }
body.ist-getrennt .switch .port--kabel .led { background: var(--rot); box-shadow: 0 0 6px rgba(188, 58, 57, 0.8); }

.switch__schild {
  margin-top: 1rem; padding-top: 0.6rem;
  border-top: 1px solid #3f4248;
  display: flex; justify-content: space-between;
  font: 500 0.7rem/1 var(--mono); color: #8d9198;
}

@keyframes blinken {
  0%, 100% { background: var(--led); }
  8% { background: #3b3e44; }
  12% { background: var(--led); }
  55% { background: #e0a31f; }
  60% { background: var(--led); }
}
@keyframes zucken {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-1deg); }
  75% { transform: translateX(4px) rotate(1deg); }
}

/* ---------- Abschnitte ---------- */

.abschnitt {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(1rem, 3vw, 2rem);
  padding-left: calc(clamp(1.25rem, 4vw, 2.5rem) + var(--rinne));
}
.abschnitt h2 {
  position: relative;
  font-size: clamp(1.8rem, 3.4vw, 2.55rem);
  font-weight: 750;
  font-stretch: 108%;
  letter-spacing: -0.015em;
  margin-bottom: 2rem;
  max-width: 24ch;
}
h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.6rem; }
p { margin: 0 0 1rem; max-width: 40rem; }

.leistungen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.leistung { border-top: 3px solid var(--rot); padding-top: 1.25rem; }
.leistung p { color: var(--grau); }
.leistung ul { list-style: none; margin: 0; padding: 0; }
.leistung li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.4rem;
  border-top: 1px solid var(--linie);
  font-size: 0.98rem;
  line-height: 1.45;
}
.leistung li::before {
  content: ""; position: absolute; left: 0.1rem; top: 1.05rem;
  width: 0.55rem; height: 2px; background: var(--rot);
}
.nebenbei { margin-top: 2.25rem; color: var(--grau); font-size: 0.98rem; }

.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.zwei > div { background: var(--flaeche); padding: clamp(1.4rem, 3vw, 2rem); border-radius: 0.5rem; }
.zwei p { margin: 0; color: #3d4046; }

.ablauf {
  list-style: none; margin: 0; padding: 0;
  counter-reset: schritt;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.ablauf li { counter-increment: schritt; position: relative; padding-top: 3.1rem; }
.ablauf li::before {
  content: counter(schritt);
  position: absolute; top: 0; left: 0;
  font-weight: 800; font-stretch: 112%;
  font-size: 2.2rem; line-height: 1;
  color: var(--rot);
}
.ablauf li::after {
  content: ""; position: absolute; top: 1.05rem; left: 2.4rem; right: -1rem;
  border-top: 2px dotted var(--linie);
}
.ablauf li:last-child::after { display: none; }
.ablauf p { color: var(--grau); font-size: 0.98rem; }

.ueber { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.gross { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.4; font-weight: 600; }
.orte { color: var(--grau); font-size: 0.98rem; }
.werte { margin: 0; display: grid; gap: 1.25rem; }
.werte div { border-left: 3px solid var(--rot); padding-left: 1rem; }
.werte dt { font-weight: 750; }
.werte dd { margin: 0.15rem 0 0; color: var(--grau); }

.fragen { max-width: 46rem; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem 2.5rem 1.1rem 0;
  font-weight: 650; font-size: 1.08rem;
  position: relative;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%;
  width: 0.7rem; height: 0.7rem;
  border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}
.fragen details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.fragen details p { color: var(--grau); padding-bottom: 0.6rem; }

.abschnitt--kontakt { padding-bottom: clamp(4rem, 9vw, 7rem); }
.messpunkt--ziel { width: 1.6rem; height: 1.6rem; left: calc(var(--kabel-x) - var(--rinne) - 0.8rem); }
.kontakt__status {
  display: flex; align-items: center; gap: 0.6rem;
  font: 500 0.85rem/1 var(--mono); color: var(--grau);
}
.kontakt__status .led { order: 0; background: var(--led-aus); transition: background 0.3s, box-shadow 0.3s; }
.ist-verbunden .kontakt__status .led { background: var(--led); box-shadow: 0 0 0 4px rgba(43, 180, 99, 0.22); }
.still { color: var(--grau); font-size: 0.95rem; }

/* ---------- Fuß ---------- */

.fuss { border-top: 1px solid var(--linie); background: var(--flaeche); font-size: 0.95rem; }
.fuss__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.75rem; }
.fuss p { margin: 0; color: var(--grau); }
.fuss nav { display: flex; align-items: center; gap: 1.25rem; }
.fuss a { color: var(--graphit); }
.fuss__konsole {
  font: 600 0.85rem/1 var(--mono);
  background: none; border: 1px solid var(--linie); border-radius: 0.3rem;
  color: var(--grau); padding: 0.4rem 0.5rem; cursor: pointer;
}
.fuss__konsole:hover { color: var(--rot); border-color: var(--rot); }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */

.text { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); max-width: 50rem; }
.text h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 2rem; max-width: none; }
.text h2 { font-size: 1.3rem; margin: 2.25rem 0 0.75rem; font-stretch: 105%; }
.text p, .text li { color: #3d4046; }
.text ul { padding-left: 1.2rem; }

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 60;
  transform: translate(-50%, 150%);
  background: var(--graphit); color: var(--weiss);
  padding: 0.85rem 1.25rem; border-radius: 0.45rem;
  font-weight: 550; max-width: calc(100vw - 2rem);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s ease;
}
.toast.ist-sichtbar { transform: translate(-50%, 0); }

/* ---------- Einwilligung Statistik ---------- */

.einwilligung {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 65;
  width: min(26rem, calc(100vw - 2rem));
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--rot);
  border-radius: 0.5rem;
  padding: 1.1rem 1.25rem 0.4rem;
  box-shadow: 0 18px 40px -16px rgba(36, 38, 42, 0.45);
  font-size: 0.95rem;
}
.einwilligung p { margin: 0 0 0.8rem; color: #3d4046; }
.einwilligung__titel { font-weight: 700; color: var(--graphit) !important; font-size: 1.05rem; }
.einwilligung__knoepfe { display: flex; gap: 0.6rem; }
.einwilligung__knoepfe .knopf { flex: 1; justify-content: center; cursor: pointer; font: inherit; font-weight: 650; padding: 0.65rem 1rem; }

.fuss__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--graphit); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
}
.fuss__link:hover { color: var(--rot); }
@media (max-width: 34rem) { .fuss nav { flex-wrap: wrap; } }

/* ---------- Easter Egg: Terminal ---------- */

.term {
  position: fixed; left: 0; right: 0; top: 0; z-index: 70;
  height: min(60vh, 32rem);
  display: flex; flex-direction: column;
  background: rgba(22, 23, 26, 0.97);
  color: #e6e7ea;
  font: 400 0.92rem/1.5 var(--mono);
  border-bottom: 3px solid var(--rot);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  transform: translateY(-105%);
  transition: transform 0.22s ease-out;
}
.term.ist-offen { transform: translateY(0); }
.term__kopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.45rem 1rem; background: #2a2c31; color: #9fa3aa; font-size: 0.8rem;
}
.term__zu { background: none; border: 0; color: #c9ccd1; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.4rem; }
.term__zu:hover { color: var(--weiss); }
.term__ausgabe { flex: 1; overflow-y: auto; padding: 0.9rem 1rem 0.25rem; white-space: pre-wrap; word-break: break-word; }
.term__zeile { min-height: 1.5em; }
.term__eingabe { display: flex; align-items: center; padding: 0.25rem 1rem 0.9rem; }
.term__prompt { color: #ff8a80; white-space: pre; }
.term__eingabe input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--weiss); font: inherit; caret-color: var(--led);
}
.term :focus-visible { outline-color: var(--led); }

/* ---------- Easter Egg: DVD-Logo ---------- */

html.ist-dvd { overflow: hidden; }
.dvd {
  position: fixed; inset: 0; z-index: 80;
  background: var(--weiss);
  cursor: pointer;
  transition: background 0.3s;
}
.dvd--rot { background: var(--rot); }
.dvd__logo { position: absolute; left: 0; top: 0; width: min(40vw, 22rem); will-change: transform; pointer-events: none; }
.dvd__zaehler, .dvd__hinweis { position: absolute; left: 1rem; margin: 0; font: 600 0.9rem/1.3 var(--mono); color: var(--rot); }
.dvd__zaehler { bottom: 3.4rem; }
.dvd__hinweis { bottom: 1.2rem; font-weight: 400; color: var(--grau); }
.dvd--rot .dvd__zaehler, .dvd--rot .dvd__hinweis { color: var(--weiss); }
.dvd__zu {
  position: absolute; right: 1rem; bottom: 1rem;
  font: 600 0.9rem/1 var(--schrift);
  background: var(--graphit); color: var(--weiss);
  border: 0; border-radius: 0.35rem; padding: 0.7rem 1rem; cursor: pointer;
}
.dvd--jubel .dvd__zaehler { animation: jubel 0.8s ease-out; }
@keyframes jubel {
  0% { transform: scale(1); }
  30% { transform: scale(1.6); }
  100% { transform: scale(1); }
}

/* ---------- Easter Egg: Neustart und rm -rf ---------- */

html.ist-neustart body { animation: neustart 1.4s ease-in-out; }
@keyframes neustart {
  0% { filter: none; opacity: 1; }
  25% { filter: brightness(0); opacity: 1; }
  60% { filter: brightness(0); opacity: 1; }
  75% { filter: brightness(1.6) saturate(0); }
  100% { filter: none; }
}
body.ist-wackelig { animation: wackeln 0.12s linear 5; }
@keyframes wackeln {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  75% { transform: translate(3px, -2px); }
}

/* ---------- Responsiv ---------- */

@media (max-width: 62rem) {
  .leistungen { grid-template-columns: 1fr; max-width: 40rem; }
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .ablauf li:nth-child(2)::after { display: none; }
  .ueber { grid-template-columns: 1fr; }
}

@media (max-width: 46rem) {
  :root { --rinne: 2.4rem; --kabel-x: 0.75rem; }
  .held { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .switch { max-width: 24rem; }
  .zwei { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr; }
  .ablauf li::after { display: none; }
  .kabel__mantel { stroke-width: 5; }
  .messpunkt { width: 1.1rem; height: 1.1rem; left: calc(var(--kabel-x) - var(--rinne) - 0.55rem); border-width: 2.5px; }
  .messpunkt--ziel { width: 1.3rem; height: 1.3rem; left: calc(var(--kabel-x) - var(--rinne) - 0.65rem); }
}

@media (prefers-reduced-motion: reduce) {
  .switch .led { animation: none; background: var(--led); }
  .toast, .messpunkt::after, .kontakt__status .led { transition: none; }
  .logo.ist-gezogen img { animation: none; }
}

@media print {
  .kopf, .kabel, .switch, .fuss__konsole, .held__aktionen { display: none !important; }
  .abschnitt { padding-left: 0; }
  .messpunkt { display: none; }
}
body.ist-getrennt .kabel--vorn path { transform: translateY(1.6rem); }
.kabel--vorn path { transition: transform 0.35s cubic-bezier(.3, 1.6, .5, 1), stroke 0.3s; }
@media (prefers-reduced-motion: reduce) { .stecker, .kabel--vorn path { transition: none; } }
/* Beschriftung neben dem Kabel statt darunter */
.port--kabel b { justify-self: start; }
.switch__schild { justify-content: flex-start; gap: 1.25rem; }