/* ===========================================
   HOME: CSS (Seite ID 5)
   Design-System: Royal Sapphire
   Prefix: kpn-
   =========================================== */


/* Seit 20.10.2026 neu aufgebaut: Hero mit Anruf, blaues Band (layout.css),
   zwei Werkzeuge, Ueber mich, FAQ als Liste, Kontakt ohne Kasten.
   Weggefallen: Anbieter-Kasten, drei Karten, "Zwei Wege", alter FAQ-Kasten. */

/* Hero: Ueberschrift ueber die ganze Breite */
.kpn-hero {
  width: min(896px, 100% - 64px);
  margin: 0 auto;
  /* Oben 88 statt 48 px, Marc am 21.10.2026: "zwischen Header und
     Ueberschrift etwas mehr Abstand". Gemessen: Kopf bis Ueberschrift vorher
     40 px, jetzt rund 80 px, aehnlich wie die Unterseiten (64 bis 126). */
  padding: 88px 0 64px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: 64px;
  row-gap: 32px;
  align-items: start;
}

.kpn-hero h1 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.kpn-hero h1 .kpn-hero-zeile {
  display: block;
  margin-top: 20px;
  font-size: 0.34em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.kpn-hero-links {
  grid-column: 1;
  padding-top: 8px;
}

/* Am Desktop rueckt der Anruf nach oben neben die blaue Zeile der
   Ueberschrift. Die Ueberschrift bleibt dort einzeilig, rechts ist frei. */
.kpn-hero .kpn-anruf-buehne {
  grid-column: 2;
}

@media (min-width: 961px) {
  .kpn-hero .kpn-anruf-buehne {
    margin-top: -48px;
  }
}

.kpn-hero .kpn-hero-subtitle {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  max-width: 440px;
  margin: 0 0 32px;
}

.kpn-hero-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-bottom: 32px;
}

.kpn-hero-haken {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.kpn-hero-haken li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}

.kpn-hero-haken .material-symbols-outlined {
  font-size: 18px !important;
  color: var(--ok);
}

/* Zwei Werkzeuge: Rechnen und Anhoeren.
   Die Karten sind gleich gebaut wie der Anruf im Hero. */
.kpn-aktionen {
  width: min(896px, 100% - 64px);
  margin: 0 auto;
  padding: 80px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Drei gemeinsame Zeilen: Ueberschrift, Satz, Karte. Ueber subgrid
     beginnen und enden beide Karten auf derselben Hoehe, egal wie lang der
     Satz darueber ist. */
  grid-template-rows: auto auto 1fr;
  column-gap: 64px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.kpn-aktion {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  position: relative;
}

/* Feiner Strich mittig zwischen den beiden */
.kpn-aktion + .kpn-aktion::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}

.kpn-aktion h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
}

.kpn-aktion > p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
}

.kpn-aktion > .kpn-weiter {
  align-self: flex-start;
  margin-top: 16px;
}

.kpn-karte {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

/* Rechnung */
.kpn-rechnung-zeile,
.kpn-rechnung-summe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  color: var(--ink-soft);
}

.kpn-rechnung-zeile {
  padding: 6px 0;
}

.kpn-rechnung-zeile b {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.kpn-rechnung-summe {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  color: var(--ink);
  font-weight: 600;
}

.kpn-rechnung-summe b {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

.kpn-vergleich {
  margin: auto 0 20px;
  padding-top: 24px;
  display: grid;
  gap: 12px;
}

.kpn-vergleich-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  grid-template-areas: "name name" "spur wert";
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
}

.kpn-vergleich-name {
  grid-area: name;
  font-size: 13px;
  color: var(--ink-soft);
}

.kpn-vergleich-spur {
  grid-area: spur;
  height: 10px;
  border-radius: 5px;
  background: var(--bg-low);
  /* clip statt hidden: hidden waere ein eigener Scrollbereich, dann misst
     die Zeitleiste der Balken gegen diesen statt gegen die Seite. */
  overflow: clip;
}

.kpn-vergleich-balken {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 5px;
  background: var(--line-strong);
  transform-origin: left center;
}

.kpn-vergleich-balken--gut {
  background: var(--ok);
}

.kpn-vergleich-wert {
  grid-area: wert;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Die Zahl laeuft von 0 auf 240 hoch und die Balken wachsen, waehrend die
   Karte ins Bild scrollt. Nur in Browsern mit animation-timeline, alle
   anderen zeigen den fertigen Stand. Die echte Zahl bleibt fuer
   Vorleseprogramme im Text, die Zaehlziffern sind nur gezeichnet. */
@property --kpn-zahl {
  syntax: '<integer>';
  initial-value: 240;
  inherits: false;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Eine gemeinsame Zeitleiste fuer Zahl und Balken: die Karte selbst. */
    .kpn-rechnung {
      view-timeline: --kpn-rechnung block;
    }
    .kpn-zaehler {
      position: relative;
      counter-reset: kpn-z var(--kpn-zahl);
      animation: kpn-zaehlen linear both;
      animation-timeline: --kpn-rechnung;
      /* Fertig, sobald die Karte ganz im Bild ist: eine halbe Zahl darf
         nie stehen bleiben, wenn jemand die ganze Karte sieht. */
      animation-range: entry 0% entry 100%;
    }
    .kpn-zaehler-text {
      color: transparent;
    }
    .kpn-zaehler::after {
      content: counter(kpn-z) "\00a0€" / "";
      position: absolute;
      right: 0;
      top: 0;
    }
    .kpn-vergleich-balken {
      animation: kpn-wachsen linear both;
      animation-timeline: --kpn-rechnung;
      animation-range: entry 30% entry 100%;
    }
  }
}

@keyframes kpn-zaehlen {
  from { --kpn-zahl: 0; }
  to   { --kpn-zahl: 240; }
}

@keyframes kpn-wachsen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Anhoeren: gezeichnete Sprachnachricht */
.kpn-sprachnachricht {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
  background: var(--accent-bg);
  border-radius: 16px;
}

.kpn-sprach-knopf {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--card);
  display: grid;
  place-items: center;
}

.kpn-sprach-knopf .material-symbols-outlined {
  font-size: 22px !important;
}

.kpn-welle {
  flex: 1;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  overflow: hidden;
}

.kpn-welle span {
  flex: 1;
  max-width: 4px;
  min-width: 2px;
  height: var(--h);
  border-radius: 2px;
  background: var(--line-strong);
}

/* Die ersten Balken sind schon "abgespielt" */
.kpn-welle span:nth-child(-n+12) {
  background: var(--brand);
}

.kpn-sprach-zeit {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.kpn-schritte {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: kpn-schritt;
}

.kpn-schritte li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ink);
  counter-increment: kpn-schritt;
}

.kpn-schritte li::before {
  content: counter(kpn-schritt);
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  background: var(--accent-bg);
}

.kpn-hoeren .kpn-leise {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: auto 0 16px;
}

.kpn-karte > .kpn-knopf {
  align-self: flex-start;
}

/* Ueber mich: ein Satz gross */
.kpn-ich {
  width: min(896px, 100% - 64px);
  margin: 0 auto;
  padding: 64px 0 72px;
  border-top: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  column-gap: 64px;
  align-items: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.kpn-ich-bild {
  display: block;
  width: 100%;
  max-width: 272px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.kpn-ich-satz {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.kpn-ich-text p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.kpn-ich-text p.kpn-ich-name {
  font-weight: 700;
  color: var(--ink);
}

.kpn-ich-text .kpn-weiter {
  margin-top: 8px;
}

.kpn-ich-text p a {
  color: var(--brand);
  text-underline-offset: 3px;
}

/* FAQ (.kpn-fragen) steht seit 21.10.2026 in layout.css, auch die
   Rabattseite und /kosten/ nutzen sie. */

/* ===========================================
   CONTACT: Anfrage-Formular
   =========================================== */
.kpn-contact {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 32px 96px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.kpn-contact-inner {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--shadow-soft);
}

.kpn-contact-head {
  text-align: center;
  margin: 0 0 36px;
}

.kpn-contact-head h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.2;
}

.kpn-contact-head p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 560px;
}

/* Knopf, der die Nummer erst auf Klick zeigt. Sieht aus wie ein Link, ist
   aber ein Knopf, weil er etwas tut statt irgendwohin zu fuehren. */
/* min-height ist Trefferflaeche, kein Abstand. Gemessen am 18.09.2026 war
   der Knopf 16px hoch. */
.kpn-tel-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px 0;
  min-height: 32px;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kpn-tel-btn:hover { color: var(--brand); }

.kpn-tel-nummer {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.kpn-tel-nummer:hover { text-decoration: underline; }

.kpn-contact-alt {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 24px 0 0;
}

.kpn-contact-alt a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.kpn-contact-alt a:hover {
  text-decoration: underline;
  color: var(--brand);
}

/* CF7-Formular Styling */
.kpn-contact-form .wpcf7 {
  margin: 0;
}

.kpn-contact-form .wpcf7-form {
  display: grid;
  gap: 14px;
}

.kpn-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.kpn-form-field {
  display: block;
  width: 100%;
}

.kpn-form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.kpn-contact-form input[type="text"],
.kpn-contact-form input[type="email"],
.kpn-contact-form input[type="tel"],
.kpn-contact-form select,
.kpn-contact-form textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(4, 75, 185, 0.02);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
}

.kpn-contact-form input[type="text"]:hover,
.kpn-contact-form input[type="email"]:hover,
.kpn-contact-form input[type="tel"]:hover,
.kpn-contact-form select:hover,
.kpn-contact-form textarea:hover {
  border-color: var(--line);
  background: var(--bg-low);
}

.kpn-contact-form input[type="text"]:focus,
.kpn-contact-form input[type="email"]:focus,
.kpn-contact-form input[type="tel"]:focus,
.kpn-contact-form select:focus,
.kpn-contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(0, 94, 240, 0.15);
}

.kpn-contact-form textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.55;
}

.kpn-contact-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23475569'><path d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

.kpn-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 4px 0 0;
  cursor: pointer;
}

.kpn-form-consent .wpcf7-acceptance {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Das Haekchen ist Pflicht, also muss es sich treffen lassen. Gemessen am
   18.09.2026 waren es 18x18 Pixel. Empfohlen sind mindestens 32, Apple nennt
   44. Das Kaestchen selbst bleibt optisch klein, die Trefferflaeche wird ueber
   die Polsterung vergroessert: dadurch faengt auch der Rand um das Kaestchen
   den Finger ab. */
.kpn-form-consent input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 5px;
  accent-color: var(--accent);
  cursor: pointer;
}

.kpn-form-consent a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kpn-form-consent a:hover {
  color: var(--brand);
}

/* Seit 25.09.2026 kein Haekchen mehr, sondern ein Hinweis. Die Anfrage
   laeuft auf Vertrag und berechtigtem Interesse, so steht es in der
   Datenschutzerklaerung. Ein Pflichthaken "Ich stimme zu" behauptete eine
   Einwilligung, die gar nicht die Grundlage ist. */
.kpn-form-hinweis {
  display: block;
  cursor: auto;
}

.kpn-form-submit {
  width: 100%;
  padding: 14px 28px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--card) !important;
  background: var(--brand) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(4, 75, 185, 0.18) !important;
}

.kpn-form-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(4, 75, 185, 0.28) !important;
  background: var(--brand-hover) !important;
}

/* Gesperrt heisst grau, nicht durchscheinend. Ein halbtransparenter
   Button sieht aus wie ein Fehler, ein grauer sagt: da fehlt noch etwas. */
.kpn-form-submit:disabled {
  background: var(--line) !important;
  color: var(--ink-soft) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none;
}

/* CF7 Response-Messages */
.kpn-contact-form .wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  border: none !important;
  font-size: 14px;
  line-height: 1.5;
}

.kpn-contact-form .wpcf7 form.sent .wpcf7-response-output {
  background: var(--ok-bg);
  color: var(--ok);
}

.kpn-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.kpn-contact-form .wpcf7 form.unaccepted .wpcf7-response-output {
  background: var(--alert-bg);
  color: var(--alert);
}

.kpn-contact-form .wpcf7-not-valid-tip {
  color: var(--alert);
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.kpn-contact-form .wpcf7-spinner {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

/* Contact Mobile */
@media (max-width: 768px) {
  .kpn-contact {
    padding: 20px 20px 72px;
  }
  .kpn-contact-inner {
    padding: 24px 20px;
  }
  .kpn-contact-head h2 {
    font-size: 24px;
  }
  .kpn-form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Kontakt: derselbe Aufbau wie .kpn-teil, ohne Kasten */
.kpn-contact {
  max-width: none;
  padding: 0 0 96px;
}

.kpn-contact .kpn-contact-inner {
  width: min(896px, 100% - 64px);
  margin: 0 auto;
  padding: 64px 0 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  column-gap: 64px;
}

.kpn-contact .kpn-contact-head {
  grid-row: 1 / 3;
  text-align: left;
  margin: 0;
}

.kpn-contact .kpn-contact-head h2 {
  font-size: 26px;
  margin: 0 0 8px;
}

.kpn-contact .kpn-contact-head p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.kpn-contact .kpn-contact-form,
.kpn-contact .kpn-contact-alt {
  grid-column: 2;
  max-width: 560px;
}

.kpn-contact .kpn-contact-alt {
  text-align: left;
  font-size: 14px;
  margin-top: 16px;
}

.kpn-contact .kpn-contact-form input[type="text"],
.kpn-contact .kpn-contact-form input[type="email"],
.kpn-contact .kpn-contact-form input[type="tel"],
.kpn-contact .kpn-contact-form select,
.kpn-contact .kpn-contact-form textarea {
  background: var(--card);
  border-color: var(--line-strong);
}

@media (max-width: 960px) {
  .kpn-hero {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .kpn-hero-links,
  .kpn-hero .kpn-anruf-buehne {
    grid-column: 1;
  }
  .kpn-hero .kpn-anruf-buehne {
    max-width: 380px;
  }
  .kpn-ich {
    grid-template-columns: 160px minmax(0, 1fr);
    column-gap: 40px;
  }
  .kpn-contact .kpn-contact-inner {
    grid-template-columns: 1fr;
  }
  .kpn-contact .kpn-contact-head {
    margin-bottom: 24px;
  }
  .kpn-contact .kpn-contact-form,
  .kpn-contact .kpn-contact-alt {
    grid-column: 1;
  }
}

@media (max-width: 768px) {
  /* Am Handy gibt es nur zwei H2-Groessen: 24px fuer Abschnitte, dazu das
     Band. Seit 21.10.2026, vorher standen hier 26px. */
  .kpn-aktion h2 {
    font-size: 24px;
  }
  .kpn-hero,
  .kpn-ich {
    width: calc(100% - 40px);
  }
  .kpn-hero {
    /* Am Handy waren es nur 10 px bis zur Ueberschrift, jetzt rund 42 px wie
       auf den Unterseiten (34 bis 43). */
    padding: 64px 0 64px;
  }
  .kpn-hero h1 {
    font-size: 2.6rem;
  }
  .kpn-hero h1 .kpn-hero-zeile {
    font-size: 0.42em;
    margin-top: 14px;
  }
  .kpn-hero .kpn-hero-subtitle {
    font-size: 17px;
    margin-bottom: 24px;
  }
  .kpn-hero .kpn-anruf-buehne {
    max-width: none;
  }
  .kpn-hero-aktionen {
    gap: 12px;
  }
  .kpn-hero-aktionen .kpn-weiter {
    width: 100%;
    justify-content: center;
    padding: 10px 0;
  }
  .kpn-ich {
    grid-template-columns: 1fr;
    row-gap: 24px;
    padding: 48px 0 56px;
  }
  .kpn-ich-bild {
    max-width: 120px;
  }
  .kpn-contact .kpn-contact-inner {
    width: calc(100% - 40px);
    padding-top: 48px;
  }
  .kpn-contact .kpn-contact-head h2 {
    font-size: 24px;
  }
  .kpn-contact {
    padding-bottom: 72px;
  }
}

@media (max-width: 768px) {
  .kpn-aktionen {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 56px;
    padding: 56px 0;
  }
  .kpn-aktion {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }
  .kpn-aktion + .kpn-aktion::before {
    left: 0;
    right: 0;
    top: -28px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .kpn-karte {
    padding: 20px;
  }
  .kpn-karte > .kpn-knopf {
    align-self: stretch;
    justify-content: center;
    padding-inline: 16px;
    white-space: nowrap;
  }
}

/* ===========================================
   HANDY-DURCHSICHT 19.09.2026
   =========================================== */
@media (max-width: 768px) {

    /* --- Das Pflicht-Haekchen groesser ---
       Am 18.09.2026 wurde es von 18 auf 22 Pixel gesetzt, dazu padding: 5px,
       um die Trefferflaeche zu weiten. Das Polster wirkt bei einer Checkbox
       nicht: am 19.09.2026 gemessen waren es weiterhin 22x22.

       Jetzt 26 Pixel. Die eigentliche Trefferflaeche ist ohnehin groesser, weil
       .kpn-form-consent ein <label> ist und damit der ganze Block samt Text
       schaltet, gemessen 218x117. Das Kaestchen ist aber die Stelle, auf die
       der Finger zielt, und die soll er treffen. */
    .kpn-form-consent input[type="checkbox"] {
        width: 26px;
        height: 26px;
    }
}

/* Blaues Band "Fonio passt fuer die meisten Betriebe": rechts beginnt "10 %
   Rabatt" auf der Hoehe der Ueberschrift links, nicht senkrecht zentriert.
   Links steht ueber der Ueberschrift das Logo (38 px hoch, 24 px Abstand),
   deshalb wirkte die rechte Spalte nach oben gerutscht. Marc, 21.10.2026:
   "der Block gehoert etwas nach unten verschoben". Nur nebeneinander: bis
   960 px steht beides untereinander (layout.css), dort kein Abstand oben. */
@media (min-width: 961px) {
  .kpn-band:not(.kpn-band--ende) .kpn-band-innen {
    align-items: start;
  }
  .kpn-band:not(.kpn-band--ende) .kpn-band-aktion {
    padding-top: 62px;
  }
}