/* ===========================================
   LAYOUT: Header und Footer
   Royal Sapphire Design System
   =========================================== */


/* ===========================================
   HEADER: Fixed Navigation mit Glass-Effekt
   =========================================== */

/* ===========================================
   KEINE SCHUSTERJUNGEN
   Ein einzelnes Wort in der letzten Zeile sieht nach Fehler aus. Mit
   text-wrap: pretty zieht der Browser dafuer ein Wort aus der vorletzten
   Zeile nach unten. Gemessen am 17.09.2026: Der Absatz im Empfehlungsblock
   liess bei 470px Spaltenbreite genau ein Wort uebrig ("geht.").

   Chrome, Edge und Safari koennen das. Wo es fehlt, passiert nichts: der
   Umbruch bleibt einfach so, wie er ohne die Regel waere.

   Bewusst NICHT auf Ueberschriften. Die H1 der Startseite ist von Hand mit
   <br class="br-desktop"> gebrochen und ihre Oberkante ist auf 150px
   eingemessen. Ein automatischer Ausgleich koennte beides verschieben.
   =========================================== */
p,
li,
figcaption {
    text-wrap: pretty;
}

/* ===========================================
   LANGE WOERTER IN UEBERSCHRIFTEN
   Deutsch baut lange Woerter, und eine Ueberschrift bricht sie nicht von
   selbst um. "Datenschutzerklaerung" brauchte bei 28px 300 Pixel, auf einem
   320px-Handy sind nach dem Polster 241 uebrig: die Ueberschrift ragte hinaus
   und die ganze Seite liess sich seitlich schieben. Gemessen am 18.09.2026.

   hyphens: auto trennt nach den Regeln der Dokumentsprache, dafuer steht das
   lang-Attribut am html-Element. overflow-wrap ist das Netz darunter, falls
   der Browser keine Trennstelle kennt: dann bricht er hart statt ueberzulaufen.
   =========================================== */
h1, h2, h3, h4 {
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ===========================================
   ABSTAND BEI ANKERSPRUENGEN
   Die Kopfzeile steht fix und ist 62px hoch (Handy 56px). Ohne diese Regel
   landet ein Sprung wie /#kontakt genau unter der Kopfzeile und klebt daran,
   die Ueberschrift des Ziels ist halb verdeckt. scroll-margin-top schiebt nur
   den Zielpunkt nach unten und aendert am Layout nichts.
   =========================================== */
:target,
#kontakt,
#faq,
#ueber-uns,
#groessere-volumen,
#vertrag,
#was-extra-kostet {
    scroll-margin-top: 104px;
}

@media (max-width: 768px) {
    :target,
    #kontakt,
    #faq,
    #ueber-uns,
    #groessere-volumen,
    #vertrag,
    #was-extra-kostet {
        scroll-margin-top: 88px;
    }
}

/* --- Header Container --- */
.kpn-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Scrolled: subtiler Shadow statt Border */
.kpn-header.is-scrolled {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 32px rgba(4, 75, 185, 0.06);
}

/* --- Inner Layout --- */
.kpn-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 48px;
}

/* --- Logo --- */
.kpn-header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.kpn-logo-img {
    width: auto;
    height: 47px;
    object-fit: contain;
}

/* --- Desktop Navigation --- */
.kpn-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 40px;
}

.kpn-nav-link {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.kpn-nav-link:hover {
    color: var(--brand);
}

.kpn-nav-link.is-active {
    color: var(--brand);
    font-weight: 600;
    border-bottom-color: var(--brand);
}

/* --- Actions (CTA + Mobile Toggle) --- */
.kpn-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    justify-self: end;
}

/* --- CTA Button --- */
.kpn-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: var(--brand);
    color: var(--card);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.kpn-header-cta:hover {
    background: var(--brand-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(4, 75, 185, 0.20);
    color: var(--card);
}

/* Ruhiges Pulsieren, damit der Knopf auffaellt, ohne zu zappeln: nur der
   Schatten atmet, die Flaeche bleibt still. Ein wanderndes Element im festen
   Kopf zieht sonst bei jedem Scrollen den Blick weg vom Text.
   Beim Ueberfahren haelt es an, sonst kaempft es mit dem Hover-Schatten. */
@keyframes kpn-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(4, 75, 185, 0.45); }
    70%      { box-shadow: 0 0 0 10px rgba(4, 75, 185, 0); }
}

.kpn-header-cta,
.kpn-mobile-cta {
    animation: kpn-puls 2.4s ease-out infinite;
}

.kpn-header-cta:hover,
.kpn-mobile-cta:hover {
    animation: none;
}

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    .kpn-header-cta,
    .kpn-mobile-cta {
        animation: none;
    }
}

/* --- Mobile Toggle --- */
.kpn-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--ink);
}

.kpn-menu-toggle .material-symbols-outlined {
    font-size: 28px;
}

/* --- Mobile Navigation --- */
.kpn-mobile-nav {
    display: none;
    flex-direction: column;
    padding: 0 32px 24px;
    gap: 4px;
    background: rgba(247, 249, 251, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.kpn-mobile-nav.is-open {
    display: flex;
}

.kpn-mobile-link {
    display: block;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.kpn-mobile-link:hover {
    background: var(--bg-low);
    color: var(--brand);
}

.kpn-mobile-link.is-active {
    color: var(--brand);
    font-weight: 800;
    background: var(--accent-bg);
}

.kpn-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 14px 24px;
    background: var(--brand);
    color: var(--card);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 8px;
    text-decoration: none;
}

/* --- Header Responsive --- */
@media (max-width: 768px) {
    .kpn-header-inner {
        grid-template-columns: 1fr auto;
        padding: 12px 20px;
    }

    .kpn-header-nav {
        display: none;
    }

    .kpn-header-cta {
        display: none;
    }

    .kpn-menu-toggle {
        display: flex;
    }

    .kpn-header-actions {
        justify-self: end;
    }

    .kpn-mobile-nav {
        padding: 0 20px 20px;
    }
}

/* --- Body Offset (Platz für Fixed Header) --- */
html {
    scrollbar-gutter: stable;
}

body {
    padding-top: 62px;
}

@media (max-width: 768px) {
    body {
        padding-top: 56px;
    }
}


/* ===========================================
   GENERATEPRESS OVERRIDES: Transparenz
   =========================================== */
.site-content,
.inside-article,
article,
.entry-content,
.entry-header,
.page-header {
    background: transparent !important;
    box-shadow: none !important;
}

.site-content {
    padding: 0 !important;
}


/* ===========================================
   ANIMATED BACKGROUND: Floating Gradient Blobs
   =========================================== */
.kpn-bg-blobs {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.kpn-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.18;
    will-change: transform;
}

/* Blob 1: Großer blauer Blob oben links */
.kpn-blob-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
    top: -10%;
    left: -5%;
    animation: kpn-float-1 25s ease-in-out infinite;
}

/* Blob 2: Mittlerer heller Blob rechts */
.kpn-blob-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    top: 30%;
    right: -8%;
    animation: kpn-float-2 30s ease-in-out infinite;
}

/* Blob 3: Kleiner Akzent-Blob Mitte */
.kpn-blob-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
    top: 60%;
    left: 25%;
    opacity: 0.12;
    animation: kpn-float-3 20s ease-in-out infinite;
}

/* Blob 4: Subtiler Blob unten rechts */
.kpn-blob-4 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    bottom: -5%;
    right: 15%;
    opacity: 0.14;
    animation: kpn-float-4 35s ease-in-out infinite;
}

@keyframes kpn-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(80px, 60px) scale(1.05); }
    50%      { transform: translate(40px, 120px) scale(0.95); }
    75%      { transform: translate(-30px, 50px) scale(1.02); }
}

@keyframes kpn-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(-60px, 80px) scale(1.08); }
    50%      { transform: translate(-100px, 30px) scale(0.96); }
    75%      { transform: translate(-40px, -40px) scale(1.04); }
}

@keyframes kpn-float-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(100px, -60px) scale(1.1); }
    66%      { transform: translate(-50px, -30px) scale(0.9); }
}

@keyframes kpn-float-4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20%      { transform: translate(-70px, -50px) scale(1.06); }
    40%      { transform: translate(-30px, -100px) scale(0.94); }
    60%      { transform: translate(50px, -60px) scale(1.03); }
    80%      { transform: translate(30px, 20px) scale(0.97); }
}

/* Reduced Motion: Keine Animationen */
@media (prefers-reduced-motion: reduce) {
    .kpn-blob {
        animation: none !important;
    }
}


/* ===========================================
   FOOTER: Dark Footer mit Logo, Links, Region
   =========================================== */

.kpn-footer {
    background: var(--ink);
    padding: 40px 32px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.kpn-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Oberer Bereich: Logo links, Links rechts --- */
.kpn-footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 48px;
}

/* Logo + Beschreibung */
.kpn-footer-brand {
    flex-shrink: 0;
}

.kpn-footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 20px;
}

.kpn-footer-logo-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.kpn-footer-logo-text {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.85);
}

.kpn-footer-desc {
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.70);
    margin: 0;
}

/* Navigation Links */
.kpn-footer-nav {
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

/* Die Polsterung ist Tippflaeche, kein Abstand.
 *
 * Gemessen am 18.09.2026 auf einem 375px-Geraet: die Links waren 12px hoch.
 * Sechs Stueck dicht nebeneinander, mit einem Finger kaum zu treffen.
 * Empfohlen sind mindestens 32px, Apple nennt 44. Mit 10px oben und unten
 * kommt der Link auf 32px, ohne dass die Schrift groesser wird oder sich am
 * Aussehen etwas aendert: der Abstand zwischen den Links wird um dieselbe
 * Polsterung verringert, damit die Reihe gleich breit bleibt.
 */
.kpn-footer-link {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 0;
}

.kpn-footer-link:hover {
    /* War var(--brand): dunkles Blau auf dem dunklen Fuss, Kontrast 1,59.
       Der Link verschwand beim Ueberfahren. Weiss ist 12,3:1. */
    color: var(--card);
}

/* Back-to-Top Link */
.kpn-back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.kpn-back-to-top .material-symbols-outlined {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.70);
    transition: color 0.2s ease;
}

.kpn-back-to-top:hover .material-symbols-outlined {
    /* Gleicher Fall wie .kpn-footer-link:hover: --brand ist auf dem dunklen
       Fuss nicht zu sehen. */
    color: var(--card);
}

/* --- Separator --- */
.kpn-footer-sep {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Unterer Bereich --- */
.kpn-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 0;
}

/* "Nach oben" stand bis 19.09.2026 als sechster Eintrag in der Navigation
   darueber. Die Reihe brauchte 786px und hatte nie mehr als 740, auch auf
   einem 1440er Bildschirm nicht. Der Link brach deshalb auf jeder Breite in
   eine zweite Zeile um und fing dort wieder links an, was wie eine mittige
   Ausrichtung aussah. Jetzt steht er unten rechts, wo man ihn sucht, und die
   Navigation kommt mit fuenf Eintraegen in eine Zeile. */
.kpn-footer-bottom-rechts {
    display: flex;
    align-items: center;
    gap: 28px;
}

.kpn-footer-copy {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.70);
    margin: 0;
}

.kpn-footer-region {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.70);
}

.kpn-footer-region .material-symbols-outlined {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.70);
}

/* --- Footer Responsive --- */

/* Logoblock und Navigation untereinander, schon ab 1100px.
   Nebeneinander bekommt die Navigation dort zu wenig Platz: bei 1024px sind
   es 585px, die fuenf Links brauchen 636. Bei 900px reicht nicht einmal der
   reine Text ohne Abstaende. Ein kleinerer Abstand loest das also nicht, es
   bricht in jedem Fall ein Link in eine zweite Zeile und faengt dort wieder
   links an. Untereinander hat die Navigation die volle Breite. */
@media (max-width: 1100px) {
    .kpn-footer-top {
        flex-direction: column;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .kpn-footer {
        padding: 28px 20px 0;
    }

    .kpn-footer-top {
        padding-bottom: 32px;
    }

    .kpn-footer-nav {
        gap: 24px;
    }

    .kpn-footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 24px 0;
    }
    .kpn-footer-bottom-rechts {
        gap: 20px;
    }
}


/* ===========================================
   VERTRAUENSZEILE IM KOPF
   Schliesst die Kopfzone ab: H1, graue Zeile, dann diese Reihe. Sie ist dort
   das einzige Element, das kein Text ist, und trennt den Kopf vom Inhalt.
   Am 19.09.2026 stand sie kurz ueber dem Abschluss-Kasten. Das war zu weit
   unten, die Zaesur wird oben gebraucht.
   Liegt hier und nicht in einer Seiten-CSS, weil sie auf Loesungen,
   Neukundenrabatt und ROI-Rechner vorkommt, und layout.css ist die einzige
   Datei, die ueberall geladen wird.
   =========================================== */
.kpn-trustbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.kpn-trustbar-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.kpn-trustbar-item .material-symbols-outlined {
    font-size: 18px !important;
    padding: 6px;
    background: var(--accent-bg);
    border-radius: 8px;
    color: var(--brand);
    line-height: 1;
    flex-shrink: 0;
}

/* 10px, nicht die 9px von frueher. Bei Grossbuchstaben mit Sperrung war das
   am Handy kaum zu entziffern, und die Zeile traegt drei Aussagen, auf die
   es ankommt. --ink-soft ohne Deckkraft sind 6,3:1 auf dem Seitengrund. */
.kpn-trustbar-item span:last-child {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    line-height: 1;
}

@media (max-width: 768px) {
    .kpn-trustbar {
        gap: 10px 14px;
    }
    .kpn-trustbar-item {
        gap: 6px;
    }
    .kpn-trustbar-item .material-symbols-outlined {
        font-size: 14px !important;
        padding: 5px;
    }
    .kpn-trustbar-item span:last-child {
        letter-spacing: 0.04em;
    }
}

/* ===========================================
   HINWEIS UNTER KI-ERZEUGTEN BILDERN
   Art. 50 KI-Verordnung verlangt die Kennzeichnung. Die Regel steht hier
   global, weil solche Bilder auf mehreren Seiten stehen und layout.css als
   einzige Datei ueberall geladen wird. Rechtsbuendig seit 15.09.2026.
   =========================================== */
.kpn-bildhinweis {
  display: block;
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: right;
}

/* Liegt der Hinweis IM Bildrahmen, wird er dort gebraucht und nicht darunter.
   Beide Bildrahmen der Seite haben overflow: hidden und feste Proportionen,
   der Hinweis wurde deshalb entweder abgeschnitten (Startseite) oder vom
   absolut gesetzten Bild verdeckt (Loesungen). Gemessen am 15.09.2026:
   auf beiden Seiten war die Kennzeichnung nie zu sehen.
   Dunkle Pille statt blosser Schrift, damit sie auf jedem Bild lesbar ist. */
.kpn-hero-visual .kpn-bildhinweis,
.kpn-usecase-featured-visual .kpn-bildhinweis {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 8px;
  margin: 0;
  padding: 2px 7px;
  border-radius: 6px;
  /* rgba(42, 54, 68) ist --ink als Zahlenwert. Eine CSS-Variable laesst sich
     hier nicht mit Deckkraft mischen, deshalb steht die Farbe ausnahmsweise
     ausgeschrieben. Die alten 15, 23, 42 stammten aus der abgeloesten Palette.
     Am 17.09.2026 blasser gestellt: die Kennzeichnung sprang ins Auge und zog
     Aufmerksamkeit vom Bild ab. Sichtbar bleibt sie. */
  background: rgba(42, 54, 68, 0.75);
  color: var(--card);
  font-size: 10px;
  letter-spacing: 0.01em;
  opacity: 1;
}

/* Haelt einen Begriff in einer Zeile. Stand bis 16.09.2026 nur in home.css
   und wirkte deshalb auf keiner Unterseite. */
.kpn-nowrap { white-space: nowrap; }

/* ===========================================
   REDUCED MOTION: Accessibility Fallback
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .kpn-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.95);
    }

    .kpn-mobile-nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(247, 249, 251, 1);
    }
}


/* ===========================================
   HANDY-DURCHSICHT 19.09.2026
   Sechs Befunde aus echten Screenshots eines 360px-Geraets. Alles steht in
   der 768er-Abfrage, der Desktop bleibt unberuehrt.
   =========================================== */
@media (max-width: 768px) {

    /* --- Keine Trennstriche in Ueberschriften ---
       Die Regel weiter oben setzt hyphens: auto. Auf dem Handy erzeugte das
       "Wenn die Da-ten das Haus", "Warum es Kipho-naut gibt" und
       "Ihr KI-Te-lefonassistent". Ein Wort gehoert dann in die naechste Zeile,
       nicht zerschnitten.

       Die Trennung kam am 18.09.2026 rein, weil "Datenschutzerklaerung" bei
       320px ueberlief. Das Polster weiter unten gibt 60 bis 68 Pixel zurueck,
       damit ist der Grund weg: am 19.09.2026 auf allen sechs Seiten bei 360px
       nachgemessen, keine Ueberschrift ragt mehr hinaus.

       manual statt none, damit die weichen Trennstellen im Text weiter gelten.
       Die Datenschutzseite traegt eine in ihrer H1.
       overflow-wrap: break-word aus der Regel oben bleibt als Netz. */
    h1, h2, h3, h4 {
        hyphens: manual;
        -webkit-hyphens: manual;
    }

    /* --- Seitliches Polster ---
       Gemessen am 19.09.2026 auf /neukundenrabatt/ bei 360px: vom Bildschirm
       blieben 204 Pixel Inhalt uebrig, 156 waren Rand. Vier Ebenen legten
       nacheinander Polster auf:

         .site-content          8px   -> 344
         .inside-article       30px   -> 284   (von GeneratePress)
         .page-wrapper         20px   -> 244
         .vmehr / Kartenblock  20px   -> 204

       Die 30px von GeneratePress fallen hier weg, die inneren Ebenen gehen in
       vergleich.css auf 16px. Danach bleiben je nach Seite 296 bis 328 Pixel.
       Die Blockebenen behalten ihr Polster, sonst klebt der Text am Rand: auf
       Impressum und Datenschutz sind es deshalb weiter 32px. */
    .inside-article,
    article {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .vh-hero {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* --- Fuss: die Links standen kreuz und quer ---
       .kpn-footer-nav ist eine Flex-Reihe mit Umbruch. Fuenf Links ergaben bei
       360px drei oben und zwei unten, linksbuendig, mit Luecken von 24px an
       wechselnden Stellen. Ein Raster mit zwei Spalten stellt sie untereinander
       auf zwei Fluchten. Fuenf einzeln untereinander waeren 160 Pixel hoch. */
    .kpn-footer-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 16px;
    }

    /* --- Werbehinweis in der Vertrauenszeile ---
       "Rabatt ueber den Link" stand in 10px. Ein Hinweis auf eine Provision
       muss sich ohne Muehe lesen lassen. Der Selektor braucht :last-child,
       sonst gewinnt die Grundregel der Trustbar mit ihrer hoeheren Gewichtung.
       Die drei Pillen stehen am Handy ohnehin untereinander, sie werden nur
       hoeher und laufen nicht aus der Zeile. */
    .kpn-trustbar-item span:last-child {
        font-size: 12px;
    }
}