/* ---------- Kontaktseite ---------- */
  body { background: var(--page); }

  /* Porsche-Band (Designlinie der Startseite): niedriges Bild-Band mit
     fester Hoehe und kraeftiger Abdunklung, Titel unten links. Der wandernde
     Bildausschnitt faellt durch die Abdunklung nicht auf. */
  /* Hoehe wie die FAQ-/Gutschein-Baender (Martin 2026-08-08: «orientiere dich
     z.B. an der faq seite, mach die kontaktseite genauso»). Vorher hing die
     Hoehe an der FENSTERHOEHE (64vh) und wirkte dadurch auf breiten, flachen
     Fenstern zu niedrig; jetzt haengt sie wie ueberall sonst an der BREITE und
     rechnet auf 1920/2.5 = 768px, damit vom 3840x1536-Bild nichts wegfaellt. */
  .kt-band { position: relative; height: clamp(296px, calc(30.7vw + 178px), 768px);
             display: flex; align-items: flex-end; color: #fff; }
  /* Ultrabreite Bildschirme: Band auf 1920px deckeln (fester Maximal-Ausschnitt). */
  @media (min-width: 1960px) {
    .kt-band {
      max-width: 1920px; margin-left: auto; margin-right: auto;
      border-radius: 0 0 26px 26px; overflow: hidden;
    }
  }
  .kt-band .medien { position: absolute; inset: 0; overflow: hidden; background: #232C36; }
  .kt-band .medien img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
  .kt-band .scrim {
    position: absolute; inset: 0;
    /* Kein Verlauf mehr im Bild (Martin 2026-07-27): das Foto bleibt unangetastet,
       die Lesbarkeit von Logo/Menue macht der Header-eigene Verlauf. */
    background: none;
  }
  .kt-band .inhalt { position: relative; width: 100%; padding-bottom: clamp(40px, 5vw, 64px); }
  .kt-band .eyebrow { color: #fff; opacity: 0.92; }
  .kt-band h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin: 6px 0 8px; max-width: 16ch; }
  .kt-band p { max-width: 52ch; opacity: 0.94; font-size: 1.02rem; }
  @media (max-width: 700px) {
    /* Auf dem Telefon an die Breite koppeln, sonst wird das Band hochkant
       und schneidet seitlich fast das ganze Bild weg. */
    /* keine eigene Mobil-Hoehe mehr: die clamp-Formel oben gilt wie bei FAQ ueberall. */
    .kt-band .inhalt { padding-bottom: 40px; }
    body { padding-bottom: 0; }  /* kein Sticky-CTA auf dieser Seite */
  }

  /* Kanal-Karten: weich und rund, ragen ins Band hinein */
  .kt-kanaele {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: clamp(28px, 4vw, 44px);   /* stehen unter dem Bild, nicht darin */
  }
  .kt-kanal {
    display: flex; align-items: center; gap: 14px;
    background: var(--card); border: 1px solid var(--mist); border-radius: 16px;
    padding: 18px 20px; text-decoration: none; color: inherit;
    box-shadow: 0 18px 44px rgba(16, 21, 28, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }
  .kt-kanal:hover, .kt-kanal:focus-visible {
    transform: translateY(-3px); box-shadow: 0 24px 54px rgba(16, 21, 28, 0.18);
    border-color: var(--kanal); background: color-mix(in srgb, var(--kanal) 9%, var(--card));
  }
  .kt-kanal:hover .ikon { transform: scale(1.06); }
  .kt-kanal:hover b { color: var(--kanal-ink); }
  .kt-kanal .ikon {
    width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
    display: grid; place-items: center; color: #fff;
    transition: transform 0.2s ease;
  }
  .kt-kanal .ikon svg { width: 24px; height: 24px; }
  /* Kanalfarbe einmal je Karte, Icon und Hover greifen darauf zu */
  .kt-kanal.-wa   { --kanal: #25D366; --kanal-ink: #0E7C3A; }
  .kt-kanal.-tel  { --kanal: var(--brand); --kanal-ink: var(--brand-deep); }
  .kt-kanal.-mail { --kanal: var(--accent-btn); --kanal-ink: var(--accent-ink); }
  .kt-kanal.-wa .ikon { background: #25D366; }
  .kt-kanal.-tel .ikon { background: var(--night); }
  .kt-kanal.-mail .ikon { background: var(--accent-btn); }
  .kt-kanal b { transition: color 0.2s ease; }
  .kt-kanal b { display: block; font-size: 1rem; }
  .kt-kanal span { color: var(--slate); font-size: 0.88rem; }

  /* Zentrierte Formular-Spalte; Ansprechpartner als Streifen im Kasten */
  .kt-mitte { max-width: 760px; margin: clamp(32px, 5vw, 52px) auto 0; }
  .kt-ansprech {
    display: flex; align-items: center; gap: 16px;
    background: color-mix(in srgb, #1C3049 6%, var(--card));
    border: 1px solid var(--mist); border-radius: 14px;
    padding: 14px 16px; margin-bottom: 22px;
  }
  .kt-ansprech img { width: 84px; height: 84px; object-fit: cover; flex-shrink: 0; border-radius: 10px; }
  .kt-ansprech .eyebrow { color: var(--accent-ink); font-size: 0.68rem; }
  .kt-ansprech b { display: block; font-size: 1.05rem; margin: 2px 0; }
  .kt-ansprech p { color: var(--slate); font-size: 0.88rem; margin: 0; }
  .kt-formwrap {
    background: var(--card); border: 1px solid var(--mist); border-radius: 18px;
    box-shadow: var(--shadow-rest); padding: clamp(20px, 4vw, 32px);
  }
  .kt-formwrap h2 { font-size: 1.4rem; margin-bottom: 6px; }
  .kt-formwrap .hinweis { color: var(--slate); font-size: 0.95rem; margin-bottom: 20px; }
  .kt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .kt-form .field { padding: 0; }
  .kt-form .feld-voll { grid-column: 1 / -1; }
  .kt-form textarea {
    appearance: none; background: #FFFFFF; color: #1D232A;
    border: 1px solid #D8DEE5; border-radius: 8px; padding: 10px 12px;
    font: inherit; font-size: max(16px, 0.92rem); min-height: 140px; resize: vertical;
  }
  .kt-form .btn { width: 100%; padding: 14px 26px; font-size: 1.05rem; }
  .hp-feld { position: absolute; left: -9999px; top: auto; height: 1px; overflow: hidden; }
  .kt-status { display: none; border-radius: 14px; padding: 18px 20px; margin-top: 4px; grid-column: 1 / -1; }
  .kt-status.zeigen { display: block; }
  .kt-status.-ok { background: color-mix(in srgb, #2E7D32 12%, var(--card)); border: 1px solid color-mix(in srgb, #2E7D32 35%, var(--mist)); }
  .kt-status.-fehler { background: color-mix(in srgb, #C62828 10%, var(--card)); border: 1px solid color-mix(in srgb, #C62828 30%, var(--mist)); }
  .kt-status b { display: block; margin-bottom: 4px; }
  .kt-status p { color: var(--slate); font-size: 0.93rem; }
  .demo-chip {
    display: none; margin-top: 10px; font-size: 0.78rem; color: #46535F;
    background: #EDF1F5; border-radius: 999px; padding: 5px 12px; width: max-content;
  }
  .demo-chip.zeigen { display: inline-block; }
  .kt-schluss { height: clamp(56px, 8vw, 96px); }

  @media (max-width: 860px) {
    .kt-kanaele { grid-template-columns: 1fr; margin-top: -44px; }
    .kt-form { grid-template-columns: 1fr; }
  }