/* chester: Responsive-Ergänzungen (Mobile/Tablet).
   Regel: AUSSCHLIESSLICH @media (max-width: …)-Blöcke: Desktop bleibt von
   dieser Datei garantiert unberührt. Wird im Root-Layout nach allen anderen
   Stylesheets (inkl. Seiten-CSS) geladen, damit die Overrides die Kaskade
   gewinnen. Die Original-Export-CSS-Dateien werden dafür NICHT angefasst. */

/* ===== Global: Grid-/Flex-Kinder dürfen schrumpfen (≤1080px) =====
   Grid-Items haben min-width:auto, lange Wörter (z. B. "Einkaufs-
   sachbearbeiter:in") blähen sonst den Track über den Viewport auf. */
@media (max-width: 1080px) {
  .home-hero-grid > *,
  .hn-team > *,
  .pf-grid > *,
  .ln-bausteine > *,
  .ln-cards > *,
  .ln-shared > *,
  .km-cards > *,
  .k-born-step > *,
  .ig-bausteine > *,
  .ig-access > *,
  .pn-blocks > *,
  .pn-duel > *,
  .pn-ask > *,
  .pn-weg > *,
  .pn-hub > *,
  .ke-ways > *,
  .ke-lim > *,
  .ke-weg > *,
  .ke-roles > *,
  .so-zulauf > *,
  .so-hero-grid > *,
  .so-gabel-aus > *,
  .so-diffs > *,
  .so-wege > *,
  .so-ver > *,
  .so-ausgang > *,
  .arch-side-cards > * { min-width: 0; }

  /* Drawer-CTA: ".nav-drawer a" (site.css) gewinnt sonst gegen ".btn-primary"
     und färbt Text + Pfeil dunkel, der Button bleibt weiß auf Violett. */
  .nav-drawer a.btn-primary { color: #fff; }
  .nav-drawer a.btn-primary:hover { background: var(--primary); }

  /* Drawer-Akkordeons: Inhalt spiegelt die Desktop-Mega-Menüs,
     Sektionen sind auf-/zuklappbar (Verhalten in nav2.js). */
  .nav-drawer .nd-acc { border-bottom: 1px solid var(--border-1); }
  .nav-drawer .nd-acc-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px 4px; background: transparent; border: 0; cursor: pointer;
    font-family: inherit; font-size: 18px; font-weight: 600; color: var(--fg-1);
    text-align: left;
  }
  .nav-drawer .nd-acc-head svg { flex: 0 0 auto; transition: transform .25s ease; color: var(--fg-3); }
  .nav-drawer .nd-acc.open .nd-acc-head svg { transform: rotate(180deg); }
  .nav-drawer .nd-acc-body { display: none; padding: 0 4px 16px; }
  .nav-drawer .nd-acc.open .nd-acc-body { display: block; }
  .nav-drawer .nd-sub {
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--fg-3); margin: 16px 0 4px; padding: 0 8px;
  }
  .nav-drawer .nd-sub:first-child { margin-top: 4px; }
  .nav-drawer .nd-acc-body a { font-size: 15px; padding: 10px 8px; }
  .nav-drawer .nd-acc-body a.nd-acc-cta { color: var(--primary); font-weight: 600; margin-top: 10px; }
  .nav-drawer .nd-soon {
    display: flex; align-items: center; gap: 12px; padding: 10px 8px;
    font-size: 15px; font-weight: 500; color: var(--fg-3);
  }
  .nav-drawer .nd-soon em {
    font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--primary); background: var(--accent);
    border-radius: 999px; padding: 2px 8px;
  }
}

/* ===== Startseite: Hero-Visual (≤640px) ===== */
@media (max-width: 640px) {
  .tlv-systems-row { grid-template-columns: repeat(2, 1fr); }

  /* Variante "Neu": Kopfzeile der KI-Mitarbeiter-Karte darf umbrechen,
     sonst schiebt der Badge (margin-left:auto) die Seite breit. */
  .hnh-head { flex-wrap: wrap; }
  .hnh-name { min-width: 0; overflow-wrap: anywhere; }
}

/* ===== /ai-mitarbeiter (Konzept-Seite) ===== */
@media (max-width: 640px) {
  /* Mini-Prozessfluss (mfx) passt nicht neben den Prozessnamen,
     auf eine Spalte stapeln statt rechts rauslaufen. */
  .k-seat-step.is-flow { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .k-seat-step.is-flow .mfx { max-width: 100%; }
}

/* ===== Architektur-Diagramm (Version A, jetzt über den Varianten-
       Schalter auf /plattform/ai-mitarbeiter-einsetzen) ===== */
@media (max-width: 640px) {
  /* System-Karten: Badge (LEGACY etc.) unter den Namen umbrechen lassen */
  .arch-sys-card { flex-wrap: wrap; }
}

/* ===== /plattform/process-management + enterprise-architecture:
   Mockup-Chrome-Leisten umbrechen lassen statt rechts rauslaufen ===== */
@media (max-width: 640px) {
  .dm-chrome { flex-wrap: wrap; }
  .rg-chrome { flex-wrap: wrap; }
  .rg-url { flex: 1 1 auto; min-width: 0; }
  .rg-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ===== /plattform/sicherheit: Dokument-Zeilen ===== */
@media (max-width: 640px) {
  .sec-doc > * { min-width: 0; }
  .sec-doc-body h3 { overflow-wrap: anywhere; }
}

/* ===== /preise: Preistabelle ===== */
@media (max-width: 640px) {
  /* Tabellen können nicht unter ihre Min-Breite schrumpfen:
     Karte wird zum horizontalen Scroll-Container statt zu clippen. */
  .price-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .price-table { min-width: 480px; }
}

/* ===== /ai-mitarbeiter/[rolle] (Stellenprofil-Template) ===== */
@media (max-width: 640px) {
  /* "Als Lösung im Detail: …"-Link ist nowrap und läuft rechts raus */
  .cv-proc-link { white-space: normal; flex-wrap: wrap; }
}


/* ===== /loesungen (Version B): Katalog + Bausteine ===== */
@media (max-width: 1080px) {
  /* Vier Bausteine und drei Fundament-Punkte auf zwei Spalten, Karten
     einspaltig, die Lösungs-Karte trägt zu viel Text für zwei Spalten
     unter 1080px. */
  .ln-bausteine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ln-shared { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ln-cards { grid-template-columns: minmax(0, 1fr); }
  /* Abteilungs-Kopf: Zähler rutscht unter die Headline statt sie zu quetschen. */
  .ln-dept-head { flex-wrap: wrap; }
  .ln-dept-head-text { flex: 1 1 100%; order: 2; }
  .ln-dept-count { order: 1; margin-top: 4px; }
}

@media (max-width: 640px) {
  .ln-bausteine { grid-template-columns: minmax(0, 1fr); }
  .ln-shared { grid-template-columns: minmax(0, 1fr); }
  /* Sprungmarken und Karten-Kopf: nichts darf nowrap rechts rauslaufen. */
  .ln-jump-chip { white-space: normal; }
  .ln-card-top { flex-wrap: wrap; }
  .ln-card-live { margin-left: 0; white-space: normal; }
  .ln-card-result { font-size: 17px; }
  .ln-card-fact { overflow-wrap: anywhere; }
  .ln-hero-cta .btn,
  .ln-final-cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== /ai-mitarbeiter/alle: Rollen-Katalog ===== */
/* Die Seite teilt Hero, Bausteine, Abteilungs-Köpfe und Fundament-Kacheln mit
   /loesungen, die Regeln darüber greifen also mit. Hier nur die Stellen-Karte
   (drei Spalten) und der Bauplan-Hinweis. */
@media (max-width: 1080px) {
  .km-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .km-cards { grid-template-columns: minmax(0, 1fr); }
  /* Der Prozess-Zähler und die Faktenzeilen dürfen nicht nowrap rausragen. */
  .km-card-count { white-space: normal; }
  .km-card-fact { overflow-wrap: anywhere; }
  .km-card-name { font-size: 18px; }
  .km-bauplan-note { flex-wrap: wrap; }
  .km-bauplan-note a { white-space: normal; }
}

/* ===== /ai-mitarbeiter: „So entsteht einer" ===== */
@media (max-width: 640px) {
  /* Chip-Zeile: lange Ergebnis-Labels brechen, statt den Track zu sprengen. */
  .k-born-chips .k-chip { white-space: normal; }
  .k-born-out { padding: 14px 16px; }
  .k-born-footcta { width: 100%; justify-content: center; }
}

/* ===== /plattform/integrationen (Version B) ===== */
@media (max-width: 1080px) {
  .ig-bausteine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-access { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ig-bausteine { grid-template-columns: minmax(0, 1fr); }
  .ig-access { grid-template-columns: minmax(0, 1fr); }
  .ig-final-cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== Varianten-Schalter: auf schmalen Viewports kompakter ===== */
@media (max-width: 640px) {
  .hn-switch { right: 10px; bottom: 10px; left: 10px; justify-content: center;
    padding: 5px 6px; flex-wrap: wrap; }
  .hn-switch-lbl { margin-right: 2px; }
  .hn-switch button { padding: 6px 10px; font-size: 12px; }
}

/* ===== Rechtstexte (Impressum, Datenschutz) ===== */
@media (max-width: 640px) {
  /* Die Empfänger-Tabelle hat vier Spalten und kann nicht unter ihre
     Min-Breite schrumpfen: Wrapper wird zum Scroll-Container statt zu clippen.
     Gleiches Muster wie bei .price-table-card. */
  .rt-tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rt-tabelle { min-width: 480px; }
  /* Zweispaltige Definitionsliste wird einspaltig, sonst quetschen sich
     „Vertreten durch den Geschäftsführer" und der Wert nebeneinander. */
  .rt-dl { grid-template-columns: minmax(0, 1fr); }
  .rt-dl dt { padding-bottom: 2px; border-bottom: 0; }
  .rt-dl dd { padding-top: 0; }
  .rt-h2 { font-size: 21px; }
  /* „Datenschutzerklärung." ist ein einzelnes langes Wort und bricht nicht
     von allein: Trennung erlauben und die Displaygröße mitskalieren. */
  .rt-hero .h-display { font-size: clamp(27px, 7.6vw, 44px); hyphens: auto;
    overflow-wrap: break-word; }
  .rt-adresse,
  .rt-p,
  .rt-ul li { overflow-wrap: anywhere; }
}

/* ===== /plattform (Version B): Bausteine, Duell, Fragen, Weg, Hub ===== */
/* Der Hero (Sprungmarken, Trustline, CTA) teilt die Seite mit /loesungen,
   die .ln-*-Regeln oben greifen also mit. */
@media (max-width: 1080px) {
  /* Zwei Spalten Text tragen unter 1080px nicht mehr: Duell und Bausteine
     einspaltig, Fragen und Weg auf zwei Spalten. */
  .pn-duel { grid-template-columns: minmax(0, 1fr); }
  .pn-blocks { grid-template-columns: minmax(0, 1fr); }
  .pn-ask { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-weg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-hub { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Die Verbindungs-Hairline zwischen den Weg-Schritten gilt nur für die
     eine Desktop-Reihe, im Umbruch zeigt sie ins Leere. */
  .pn-weg-step + .pn-weg-step::before { display: none; }
}

@media (max-width: 640px) {
  .pn-ask { grid-template-columns: minmax(0, 1fr); }
  .pn-weg { grid-template-columns: minmax(0, 1fr); }
  /* Fundament-Leiste und Baustein-Kopf: Icon über den Text statt daneben. */
  .pn-fundament { flex-direction: column; gap: 14px; padding: 22px 20px; }
  .pn-block { padding: 24px 20px 20px; }
  .pn-block-title { font-size: 21px; }
  .pn-duel-col { padding: 22px 20px; }
  .pn-hub-sub { overflow-wrap: anywhere; }
}

/* ===== /plattform/ai-mitarbeiter-einsetzen (Version B) ===== */
@media (max-width: 1080px) {
  .ke-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ke-weg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ke-weg-step + .ke-weg-step::before { display: none; }
  /* Arbeitsschleife: das Werkzeug-Panel wandert unter die Schritte und darf
     dort nicht mehr kleben. */
  .ke-loop { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ke-tools { position: static; top: auto; }
  .ke-roles { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .ke-ways { grid-template-columns: minmax(0, 1fr); }
  .ke-weg { grid-template-columns: minmax(0, 1fr); }
  .ke-lim { grid-template-columns: minmax(0, 1fr); }
  .ke-lim-note { flex-direction: column; gap: 14px; padding: 20px; }
  .ke-way { padding: 20px 18px 18px; }
  .ke-step { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
  .ke-step-num { width: 34px; height: 34px; }
  .ke-step:not(:last-child)::before { left: 16px; top: 38px; }
  .ke-step-title { font-size: 17.5px; }
  .ke-role-chip { white-space: normal; }
}

/* ===== /kontakt (Version B) ===== */
@media (max-width: 900px) {
  /* Zwei Spalten passen erst ab Tablet, darunter wird die Frage zum
     Zweizeiler und der Block unruhig. */
  .faq-zwei, .det-faq-zwei { grid-template-columns: minmax(0, 1fr); }
  .faq-zwei .faq-item:nth-child(2) { border-top: 0; }
  .det-faq-zwei .det-faq-item:nth-last-child(-n + 2) { border-bottom: 0; }
  .det-faq-zwei .det-faq-item:last-child { border-bottom: 1px solid var(--border-1); }
}

@media (max-width: 640px) {
  .kn-topic-chips { gap: 6px; }
  .kn-topic { font-size: 12.5px; padding: 6px 11px; }
  .kn-preset { display: flex; }
  .kn-hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .kn-error { flex-direction: column; gap: 10px; }

  /* Auswahlfelder: aus dem Popover wird ein Sheet am unteren Rand. Es ist
     so hoch wie seine Liste und hoechstens 85vh hoch, also fuellt die kurze
     Rollenliste nicht den ganzen Bildschirm, waehrend die 47 Anlaesse ihn
     nutzen. Darueber bleibt der abgedunkelte Hintergrund sichtbar und
     schliesst beim Tippen. Der Hintergrund wird festgehalten, solange das
     Sheet offen ist (auswahl.jsx). */
  .ap-backdrop { display: block; position: fixed; inset: 0; z-index: 90;
    background: hsl(240 10% 10% / .45); }
  .ap-panel, .ap-panel.is-oben { position: fixed; inset: auto 0 0 0; z-index: 91; width: auto;
    max-height: 85vh; border: 0; border-radius: 18px 18px 0 0; box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom); }
  /* Unter 16px zoomt iOS beim Fokus in das Suchfeld hinein. */
  .ap-suche input.ap-suche-feld { font-size: 16px; }
  .ap-opt { padding: 11px 10px; }
}

/* ============================================================
   Ueberlauf bei 375px, gefunden im QM-Durchgang 2026-09-08.
   Drei Seiten liefen seitlich ueber: /loesungen/lieferanten-ab-abgleich
   (scrollWidth 433), /loesungen/rechnungs-erfassung (396) und
   /plattform/integrationen (383).

   Zwei Ursachen, beide der Klassiker aus responsive-first.md:
   1. `.det-outcomes` faellt bei 880px auf `1fr`, und ein Grid-Item hat
      `min-width: auto`. Ein langes Wort blaeht den Track ueber den Viewport.
   2. Die Display-Ueberschriften erben `hyphens: manual` aus dem Export. Bei
      Clamp-Minima von 32 bis 40px passt "Anmeldeverfahren" (330px) nicht in
      eine 269px-Spalte und wird nicht getrennt.
   ============================================================ */
@media (max-width: 640px) {
  .det-outcomes > *,
  .det-systems > *,
  .det-pricing > *,
  .det-wf-acc > * { min-width: 0; }

  .det-outcomes,
  .det-systems,
  .det-pricing { grid-template-columns: minmax(0, 1fr); }

  /* Lange Fachwoerter duerfen umbrechen, sonst sprengen sie die Spalte. */
  .h-display,
  .det-outcome-metric,
  .det-outcome-title,
  .det-systems-cat-title,
  .det-pricing-title,
  .faq-zwei .faq-q h3 {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* ============================================================
   Hero-CTA ueber die Falz holen, plus iOS-Zoom im Formular.

   1. `.sub-hero` traegt aus dem Export `padding: 200px 0 96px`. Das war eine
      Desktop-Zahl und stand ohne Override auf jeder Unterseite: bei 375x812
      begann die H1 erst bei y 244 bis 277, und der Hero-CTA lag mit 770 bis
      870px auf JEDER Unterseite unter der Falz. Der Besucher scrollt also
      erst einmal ins Leere, bevor er die erste Handlungsaufforderung sieht.
      Die Navigation ist 64px hoch, 112px Abstand nach oben reichen.

   2. Safari auf iOS zoomt in jedes Feld, dessen Schrift kleiner als 16px ist.
      `.kn-form`-Felder stehen auf 15px, also zoomt die Seite bei jedem
      Feldklick auf /kontakt und der Besucher richtet das Bild von Hand wieder
      her, mitten im Formular. 16px ist die kleinste Groesse ohne diesen
      Effekt, deshalb genau 16px und nicht mehr.
   ============================================================ */
@media (max-width: 640px) {
  .sub-hero { padding: 112px 0 56px; }
  .sub-hero-rule { margin-top: 48px; }

  .kn-form input[type="text"],
  .kn-form input[type="email"],
  .kn-form input[type="tel"],
  .kn-form select,
  .kn-form textarea { font-size: 16px; }
}

/* Abgrenzung auf /plattform: drei Spalten untereinander. */
@media (max-width: 1080px) {
  .pn-alt { grid-template-columns: minmax(0, 1fr); }
}

/* Bauplan-Block auf den Stellenprofilen: vier Teile untereinander. */
@media (max-width: 1080px) {
  .tpl2-bauplan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tpl2-bauplan-grid { grid-template-columns: minmax(0, 1fr); }
  .tpl2-bauplan { padding: 22px 20px 20px; }
}

/* Rollen-Raster (/ai-mitarbeiter/alle, Version B): die Kacheln fassen sich
   ueber auto-fill von selbst, das Panel wird auf Telefonen ein Sheet am
   unteren Rand statt eines Dialogs in der Mitte. */
@media (max-width: 640px) {
  .kr-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kr-kachel { padding: 14px 12px 13px; }
  .kr-kachel-av { width: 34px; height: 34px; border-radius: 11px; margin-bottom: 10px; }
  .kr-kachel-name { font-size: 15px; }
  .kr-kachel-task { font-size: 12.5px; -webkit-line-clamp: 4; }

  .kr-lay { align-items: flex-end; padding: 0; }
  .kr-panel { max-width: none; max-height: 88vh;
    border-radius: 20px 20px 0 0; border-bottom: none; }
  .kr-panel-kopf { padding: 22px 20px 18px; }
  .kr-panel-name { font-size: 21px; }
  .kr-panel-body { padding-left: 20px; padding-right: 20px; }
  .kr-panel-fuss { flex-direction: column-reverse; align-items: stretch; gap: 12px;
    padding: 16px 20px 20px; }
  .kr-panel-cta { justify-content: center; }
  .kr-panel-nav { justify-content: space-between; }
  .kr-fuss { flex-direction: column; gap: 8px; }
  .kr-fuss a { white-space: normal; }
}


/* Selbstoptimierung (Version B): Der Vorschlag im Hero rutscht unter den
   Text, die Zulauf-Spalten und die Regel-Tafel werden zu Zeilen. Die Tafel
   verliert dabei ihren Kopf, jede Zeile traegt ihre Beschriftung selbst. */
@media (max-width: 1080px) {
  .so-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .so-zulauf { grid-template-columns: minmax(0, 1fr); }
  .so-diffs,
  .so-gabel-aus,
  .so-wege,
  .so-ausgang { grid-template-columns: minmax(0, 1fr); }
  .so-ver { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .so-ver-schritt + .so-ver-schritt::before { display: none; }

  .so-rw-kopf { display: none; }
  .so-rw-zeile { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 20px; }
  .so-rw-wer::before { content: "Freigabe durch: "; font-weight: 700; color: var(--fg-1); }
}

@media (max-width: 640px) {
  .so-karte { padding: 20px 18px 18px; }
  .so-karte-h { font-size: 20px; }
  .so-karte-zahlen { grid-template-columns: minmax(0, 1fr); }
  .so-kz { flex-direction: row; align-items: baseline; gap: 10px; }
  .so-akt { font-size: 12px; padding: 7px 11px; }

  .so-ziel { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  /* Signal-Zeilen: die Nummer faellt weg, der Befund rueckt unter den Text
     und darf umbrechen (er stand auf `nowrap` und waere sonst der eine
     Ueberlaeufer dieser Seite). */
  .so-signal { grid-template-columns: 36px minmax(0, 1fr); align-items: start;
    column-gap: 14px; }
  .so-signal-n { display: none; }
  .so-signal-befund { grid-column: 2; justify-self: start; margin-top: 10px;
    white-space: normal; }

  .so-gabel-start, .so-gabel-tor { grid-template-columns: 40px minmax(0, 1fr); gap: 14px;
    padding: 16px 18px; }

  .so-diff { padding: 20px 18px 18px; }
  .so-diff-paar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .so-diff-pfeil { justify-self: center; transform: rotate(90deg); }

  .so-rw-tabs { grid-template-columns: minmax(0, 1fr); }
  .so-rw-tab { border-right: 0; border-bottom: 1px solid var(--border-1); }
  /* Untereinander markiert eine Kante links die Wahl besser als eine
     Unterstreichung, die im Stapel wie ein Trenner aussieht. */
  .so-rw-tab.is-on { border-bottom: 1px solid var(--border-1);
    border-left: 3px solid var(--dept-automate-ink); padding-left: 17px; }
  .so-grenzen { padding: 20px 18px; }
  .so-grenzen ul { grid-template-columns: minmax(0, 1fr); }

  .so-ver { grid-template-columns: minmax(0, 1fr); }
  .so-note { padding: 16px 18px; }
}

/* ============================================================
   Klickziele auf Mobile (WCAG 2.5.8: 24x24 CSS-Pixel).

   Vier Stellen aus dem Export lagen darunter, alle mit Maus gebaut und nie
   mit dem Daumen geprueft. Korrigiert wird nur unterhalb von 640px: Am
   Desktop stimmt die Optik, und der Export bleibt unberuehrt.

   Der Griff ist ueberall derselbe: senkrechtes Padding statt groesserer
   Schrift, damit die Zeile hoeher wird, ohne dass sich das Schriftbild
   aendert.
   ============================================================ */
@media (max-width: 640px) {
  /* Footer-Links: 20px hoch mit 11px Abstand, auf allen 56 Seiten. */
  .ft-col a { padding-top: 4px; padding-bottom: 4px; min-height: 24px; }

  /* Hub-Liste auf /plattform: 20px Zeilen mit 8px Abstand. */
  .pn-hub-links { gap: 14px; }

  /* Aktionszeilen auf den 18 Stellenprofilen: 7px Abstand. */
  .cv-act-link { display: inline-flex; align-items: center; min-height: 24px; }

  /* Die Einwilligung ist das einzige Pflichtfeld, das man treffen muss. */
  .kn-consent input[type="checkbox"] { width: 24px; height: 24px; margin-top: 0; }
}