/* ==========================================================================
   LANKom IT-Service
   Gestaltungsidee: das Patchfeld. Eine Firmenseite für jemanden, der
   Netzwerke baut, darf aussehen wie das, was er baut – gerastert,
   beschriftet, ablesbar. Die Portleiste auf der Startseite ist die
   Navigation, nicht Dekoration.

   SCHRIFTEN
   Beide Familien sind frei lizenziert (OFL) und werden lokal
   ausgeliefert. Das ist in Deutschland kein Detail: das Einbinden von
   Google Fonts über Googles CDN überträgt die IP-Adresse des Besuchers
   in die USA und war 2022 Gegenstand einer Abmahnwelle (LG München I,
   3 O 17493/20). Dateien herunterladen, nach /fonts/ legen, fertig.

     Space Grotesk  -> fonts.google.com/specimen/Space+Grotesk
     IBM Plex Sans  -> fonts.google.com/specimen/IBM+Plex+Sans
     IBM Plex Mono  -> fonts.google.com/specimen/IBM+Plex+Mono

   Ohne die Dateien greifen die Fallbacks, die Seite bleibt benutzbar.
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('/fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Farben. Anthrazit und kühles Grau kommen aus dem Serverschrank,
     das Amber ist die Link-LED am Switchport. Sparsam einsetzen –
     es markiert immer nur genau eine Sache pro Blick. */
  --ink:          #12161a;
  --panel:        #1c2228;
  --panel-hell:   #2b333c;
  --stahl:        #6e7c88;
  --stahl-hell:   #9aa7b2;
  --papier:       #f1f4f5;
  --papier-tief:  #e2e8ea;
  --linie:        #cfd8dc;
  --led:          #f2b01e;
  --led-gruen:    #45c07a;
  --weiss:        #ffffff;

  --display: 'Space Grotesk', 'Segoe UI Semibold', system-ui, sans-serif;
  --body:    'Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:    'Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --breite: 1140px;
  --gap:    clamp(1.5rem, 4vw, 3rem);
  --radius: 3px;   /* Rackblenden sind kaum gerundet. Wir auch nicht. */
}

/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ink); text-decoration-color: var(--led); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

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

.wrap {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--weiss);
  padding: .75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* Typo-Skala */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
.fliess { max-width: 62ch; }
.fliess li { margin-bottom: .4em; }

/* Das Portetikett: Mono, versal, gesperrt. Taucht überall dort auf,
   wo im Rack ein Beschriftungsstreifen kleben würde. */
.label {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stahl);
  margin: 0 0 .9rem;
}

/* --------------------------------------------------------------------------
   3. Kopf
   -------------------------------------------------------------------------- */

/* Die gelochte Rackschiene über der Seite. */
.rail {
  height: 9px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 14px,
      rgba(255,255,255,.22) 14px 20px,
      transparent 20px 34px),
    var(--panel);
}

.kopf {
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 50;
}

.kopf-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .9rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}
.marke-zeichen {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
}
.marke-text { display: flex; flex-direction: column; gap: .16rem; }
.marke-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.marke-lan { color: var(--ink); }
.marke-kom { color: var(--stahl); }
.marke-zusatz {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stahl);
  line-height: 1;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  font-size: .95rem;
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--led); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.nav .nav-cta {
  background: var(--ink);
  color: var(--weiss);
  padding: .55rem 1.1rem;
  border-bottom: none;
  border-radius: var(--radius);
}
.nav .nav-cta:hover { background: var(--panel-hell); border-bottom: none; }

/* Menü auf kleinen Geräten – reines CSS, kein JavaScript nötig. */
.navschalter { position: absolute; opacity: 0; pointer-events: none; }
.navknopf { display: none; }

/* --------------------------------------------------------------------------
   4. Bühne
   -------------------------------------------------------------------------- */

.buehne {
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--linie);
}

.buehne-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--gap);
  align-items: center;
}

.buehne h1 { margin-bottom: .45em; }
.buehne h1 em {
  font-style: normal;
  display: block;
  color: var(--stahl);
}

.buehne-lead {
  font-size: 1.15rem;
  max-width: 46ch;
  color: var(--panel);
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.8rem;
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  padding: .8rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--weiss);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.knopf:hover { background: var(--panel-hell); border-color: var(--panel-hell); }

.knopf.knopf-leer {
  background: transparent;
  color: var(--ink);
}
.knopf.knopf-leer:hover { background: var(--papier-tief); }

/* --------------------------------------------------------------------------
   5. Das Patchfeld – Signaturelement und zugleich Einstieg
   -------------------------------------------------------------------------- */

.patchfeld {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1.3rem;
  box-shadow: 0 18px 40px -22px rgba(18,22,26,.75);
}

.patchfeld-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .35rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: .9rem;
}
.patchfeld-kopf .label { color: var(--stahl-hell); margin: 0; }

.patchfeld-status {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--led-gruen);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.patchfeld-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--led-gruen);
  box-shadow: 0 0 8px var(--led-gruen);
}

.ports { list-style: none; margin: 0; padding: 0; }

.port a {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .78rem .35rem;
  text-decoration: none;
  color: var(--weiss);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .16s ease;
}
.port:last-child a { border-bottom: none; }
.port a:hover { background: rgba(255,255,255,.05); }

.port-nr {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--stahl-hell);
  letter-spacing: .05em;
}
.port-name { font-weight: 600; font-size: 1rem; }

/* Die LED. Aus im Ruhezustand, leuchtet beim Überfahren und bei
   Tastaturfokus – die einzige Stelle, an der die Seite blinkt. */
.port-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  transition: background .16s ease, box-shadow .16s ease;
}
.port a:hover .port-led,
.port a:focus-visible .port-led {
  background: var(--led);
  box-shadow: 0 0 10px var(--led);
}

/* --------------------------------------------------------------------------
   6. Abschnitte und Kacheln
   -------------------------------------------------------------------------- */

.block { padding-block: clamp(3rem, 7vw, 4.75rem); }
.block + .block { border-top: 1px solid var(--linie); }
.block-dunkel {
  background: var(--panel);
  color: var(--papier);
  border-top: none;
}
.block-dunkel h2 { color: var(--weiss); }
.block-dunkel a  { color: var(--weiss); }
.block-dunkel .label { color: var(--stahl-hell); }

.block-kopf { max-width: 58ch; margin-bottom: 2.5rem; }

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}

.kachel {
  background: var(--papier);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: background .18s ease;
}
.kachel:hover { background: var(--weiss); }
.kachel h3 { margin-bottom: .5rem; }
/* :not(.label) ist hier entscheidend. Ohne die Einschränkung greift
   .kachel p auch auf das Etikett – der Selektor ist spezifischer als
   .label und überschreibt dessen Schriftgröße und Farbe. Zusätzlich
   erbt das Etikett dann flex-grow und wächst mit, was die Überschriften
   benachbarter Kacheln gegeneinander verschiebt. */
.kachel p:not(.label) { color: var(--panel); font-size: .97rem; flex-grow: 1; }

.kachel-mehr {
  font-family: var(--mono);
  font-size: .73rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--led);
  padding-bottom: 2px;
  align-self: flex-start;
}

/* Kacheln im dunklen Abschnitt. Ohne diese Regeln erben Überschriften
   und Text die helle Schriftfarbe des dunklen Blocks, während die Kachel
   selbst hell bleibt – hell auf hell, also unlesbar. */
.block-dunkel .kacheln { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.block-dunkel .kachel { background: var(--panel); }
.block-dunkel .kachel:hover { background: var(--panel-hell); }
.block-dunkel .kachel h3 { color: var(--weiss); }
.block-dunkel .kachel p:not(.label) { color: var(--stahl-hell); }
.block-dunkel .kachel .label { color: var(--stahl); }
.block-dunkel .kachel-mehr { color: var(--papier); }

/* Bildbänder.
   Randlos über die volle Breite, weil die Fotos Querformate mit sehr
   flachem Seitenverhältnis sind – als eingerückte Kästen mit Rand würden
   sie wie Werbebanner wirken. So wirken sie wie ein Blick in den Schrank.

   Die Höhe ist nach oben gedeckelt: Ohne Deckel füllt ein 3:1-Bild auf
   einem breiten Monitor den halben Bildschirm und schiebt den Text
   hinaus. object-fit: cover schneidet dann mittig zu, statt zu verzerren.

   aspect-ratio steht als style-Attribut am Bild selbst und kommt aus der
   Bilddatei. Damit reserviert der Browser den Platz, bevor das Bild da
   ist – die Seite springt beim Laden nicht. */
.bildband {
  margin: 0;
  width: 100%;
  background: var(--panel);
}

.bildband img {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  object-position: center;
}

.bildband figcaption {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
  padding-block: .75rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stahl-hell);
}

@media (max-width: 700px) {
  .bildband img { max-height: 220px; }
}

/* Logowand.
   Zwei Zustände in einem Raster: Wo eine offizielle Logodatei vorliegt,
   steht ein Bild, sonst die Textnennung. Beide Zustände sind gleich hoch
   und gleich breit, damit die Reihe ruhig bleibt, egal wie viele Dateien
   schon da sind.

   Die Logos liegen im Ruhezustand entsättigt und leicht zurückgenommen.
   Das ist keine Spielerei: Dreizehn bunte Fremdlogos in voller Sättigung
   ziehen mehr Aufmerksamkeit auf sich als das eigene Angebot. Beim
   Überfahren kommt die Originalfarbe zurück. */
.logowand {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Trennlinien über box-shadow statt über Rasterabstände: So entsteht
   keine leere Restzelle am Ende, wenn die Anzahl der Hersteller nicht
   glatt in die Spalten aufgeht. */
.logowand-feld {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 1.1rem 1.3rem;
  background: var(--papier);
  box-shadow: 0 0 0 1px var(--linie);
  transition: background .18s ease;
}
.logowand-feld:hover { background: var(--weiss); }

.logowand-feld img {
  /* --breit gleicht aus, dass Wortmarken breiter bauen als Bildmarken */
  max-width: calc(100% * var(--breit, 1));
  max-height: 42px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}
.logowand-feld:hover img { filter: none; opacity: 1; }

/* Zustand ohne Logodatei: Textnennung, markenrechtlich immer zulässig. */
.logowand-text {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--panel);
  text-align: center;
}

.block-dunkel .logowand-feld { background: var(--panel); box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.block-dunkel .logowand-feld:hover { background: var(--panel-hell); }
.block-dunkel .logowand-text { color: var(--papier); }

/* Partner-Auszeichnungen. Bewusst größer und farbig: Ein Badge, das man
   sich verdient hat, wird nicht entsättigt. */
.partnerwand {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.2rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.partnerwand-feld img { max-height: 76px; width: auto; }
.partnerwand-text {
  font-family: var(--display);
  font-size: 1.05rem;
  padding: .8rem 1.3rem;
  border: 2px solid var(--led);
  border-radius: var(--radius);
  display: inline-block;
}

/* Alte Textzeile – bleibt für Fließtextstellen erhalten. */
.hersteller {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hersteller li {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  padding: .4rem .8rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  color: var(--panel);
  background: var(--weiss);
}
.block-dunkel .hersteller li {
  border-color: rgba(255,255,255,.18);
  background: transparent;
  color: var(--papier);
}

/* Haltungs-Abschnitt: die drei Versprechen. */
.versprechen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
}
.versprechen h3 {
  padding-top: 1rem;
  border-top: 2px solid var(--led);
}
/* Standardfarbe fuer den hellen Block; der dunkle ueberschreibt sie.
   Ohne diese Trennung waere der Text auf hellem Grund kaum lesbar,
   sobald .versprechen einmal ausserhalb von .block-dunkel steht. */
.versprechen p { color: var(--panel); margin-bottom: 0; }
.block-dunkel .versprechen p { color: var(--stahl-hell); }

/* Handlungsaufforderung am Seitenende. */
.abschluss {
  padding-block: clamp(3rem, 7vw, 4.5rem);
  background: var(--papier-tief);
  border-top: 1px solid var(--linie);
}
.abschluss-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.abschluss h2 { margin-bottom: .2em; }
.abschluss p  { margin-bottom: 0; color: var(--panel); }

/* --------------------------------------------------------------------------
   7. Formular
   -------------------------------------------------------------------------- */

.formular {
  display: grid;
  gap: 1.15rem;
  max-width: 34rem;
}

.feld { display: flex; flex-direction: column; gap: .4rem; }
.feld label { font-weight: 600; font-size: .93rem; }

.feld input,
.feld textarea {
  font-family: var(--body);
  font-size: 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--ink);
}
.feld input:focus,
.feld textarea:focus { border-color: var(--ink); outline-offset: 0; }
.feld textarea { min-height: 9rem; resize: vertical; }

/* Honigtopf: für Menschen unsichtbar, für einfache Bots verlockend.
   Bewusst nicht display:none – manche Bots erkennen das. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hinweis {
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--led);
  background: var(--weiss);
  margin-bottom: 1.75rem;
}
.hinweis-fehler { border-left-color: #d2382c; }
.hinweis-ok     { border-left-color: var(--led-gruen); }
.hinweis p:last-child { margin-bottom: 0; }

.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--gap);
  align-items: start;
}

.direktdraht {
  background: var(--panel);
  color: var(--papier);
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius);
}
.direktdraht .label { color: var(--stahl-hell); }
.direktdraht a { color: var(--weiss); }
.direktdraht-neben { font-size: .92rem; color: var(--stahl-hell); margin-bottom: .25rem; }
.direktdraht-nr {
  font-family: var(--display);
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: .9rem;
}

/* --------------------------------------------------------------------------
   8. Fuß
   -------------------------------------------------------------------------- */

.fuss {
  background: var(--ink);
  color: var(--stahl-hell);
  padding-top: 3rem;
  font-size: .95rem;
}
.fuss a { color: var(--papier); text-decoration: none; }
.fuss a:hover { text-decoration: underline; text-decoration-color: var(--led); }

.fuss-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--gap);
  padding-bottom: 2.5rem;
}
.fuss-gross { font-family: var(--display); font-size: 1.3rem; margin-bottom: .3rem; }
.fuss-adresse { color: var(--stahl); margin-top: .9rem; margin-bottom: 0; }
.fuss-mobil { margin-bottom: 0; font-size: .9rem; color: var(--stahl); }
.fuss-mobil a { color: var(--stahl-hell); }
.fuss-liste { list-style: none; margin: 0; padding: 0; }
.fuss-liste li { margin-bottom: .45rem; }

.fuss-zeile {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  font-size: .85rem;
}
.fuss-zeile p { margin: 0; }
.fuss-mono { font-family: var(--mono); font-size: .74rem; letter-spacing: .05em; color: var(--stahl); }

/* --------------------------------------------------------------------------
   9. Kleine Geräte
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .buehne-grid,
  .kontakt-grid { grid-template-columns: 1fr; }
  .patchfeld { order: -1; }

  .navknopf {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    padding: .5rem .3rem;
  }
  .navknopf span {
    width: 20px;
    height: 12px;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
  }

  .nav {
    display: none;
    flex-basis: 100%;
  }
  .navschalter:checked ~ .nav { display: block; }
  .navschalter:focus-visible ~ .navknopf { outline: 3px solid var(--led); outline-offset: 2px; }

  .kopf-inner { flex-wrap: wrap; }
  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: .8rem;
  }
  .nav li { border-top: 1px solid var(--linie); }
  .nav a { display: block; padding: .85rem .2rem; border-bottom: none; }
  .nav a:hover { border-bottom: none; background: var(--papier-tief); }
  .nav .nav-cta { margin-top: .8rem; text-align: center; }
}

/* --------------------------------------------------------------------------
   10. Bewegung nur, wenn erwünscht
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .port { opacity: 0; animation: einblenden .5s ease forwards; }
  .port:nth-child(1) { animation-delay: .05s; }
  .port:nth-child(2) { animation-delay: .13s; }
  .port:nth-child(3) { animation-delay: .21s; }
  .port:nth-child(4) { animation-delay: .29s; }
  .port:nth-child(5) { animation-delay: .37s; }
}

@keyframes einblenden {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   11. Druck
   -------------------------------------------------------------------------- */

@media print {
  .kopf, .fuss, .abschluss, .patchfeld { display: none; }
  body { background: #fff; font-size: 11pt; }
}