/* ---------- Produkt-Detailseite (Designlinie Startseite: Band + weiche Karten) ---------- */
  /* Hoehe an die BREITE koppeln, nicht an die Fensterhoehe: sonst wird das Band
     auf dem Telefon hochkant (0.89:1) und schneidet vom Bild seitlich 74% weg.
     So bleibt es ueberall Querformat: 390px -> 1.8:1, 1280px -> 3.1:1, ab 1920px -> 3.4:1. */
  .pd-band { position: relative; height: clamp(216px, calc(22.4vw + 130px), 560px);
             display: flex; align-items: flex-end; color: #fff; }
  @media (min-width: 1960px) {
    .pd-band { max-width: 1920px; margin: 0 auto; border-radius: 0 0 26px 26px; overflow: hidden; }
  }
  /* Gutscheine: hoeheres Band im Kontakt-Verhaeltnis 2.5:1 (Martin 2026-08-01).
     Gleiche Bauart wie oben, nur auf 1920/2.5 = 768px statt 560px gerechnet,
     damit vom gelieferten 3840x1536-Bild oben und unten nichts wegfaellt. */
  body.seite-gutscheine .pd-band,
  body.seite-ablauf .pd-band,
  body.seite-flug-info-davos .pd-band,
  body.seite-faq .pd-band,
  body.seite-ski-and-fly .pd-band,
  body.seite-fluggebiete .pd-band { height: clamp(296px, calc(30.7vw + 178px), 768px); }
  .pd-band .medien { position: absolute; inset: 0; overflow: hidden; background: #232C36; }
  .pd-band .medien img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
  .pd-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;
  }
  .pd-band .inhalt { position: relative; width: 100%; padding-bottom: clamp(32px, 5vw, 56px); }
  .pd-band .eyebrow { color: #fff; opacity: 0.92; }
  .pd-band h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; margin: 6px 0 0; max-width: 22ch; }
  /* Bilder im Fliesstext der Flug-Info-Seiten (Treffpunkt-Fotos, Situationsplaene) */
  .pd-bild { margin: 18px 0 6px; }
  /* Kleidungs-Abschnitte: Hochformat-Foto neben dem Text (stapelt auf schmalen Fenstern) */
  .pd-media { display: flex; gap: 24px; align-items: flex-start; margin-top: 6px; }
  .pd-media > figure { flex: 0 0 210px; margin: 4px 0 0; }
  .pd-media > figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
  @media (max-width: 620px) {
    .pd-media { flex-direction: column; gap: 12px; }
    .pd-media > figure { flex-basis: auto; width: min(240px, 75%); }
  }
  .pd-bild img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
  .pd-bild figcaption { font-size: 0.85rem; color: var(--slate); margin-top: 6px; }
  .pd-wrap { max-width: 860px; padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); }
  .pd-direkt {
    /* Ohne linken Akzent-Strich (Martin 2026-08-11: "nimm generell diese striche raus") */
    font-size: 1.12rem; line-height: 1.6; font-weight: 600; color: var(--ink);
    margin-bottom: 22px;
  }
  /* Ablauf-Seite: die vier Schritte stehen im schmalen Textmass (860px) untereinander,
     vier Spalten waren dort zu schmal zum Lesen (Martin 2026-08-12). */
  .seite-ablauf .steps { grid-template-columns: 1fr; gap: 14px; }
  .seite-ablauf .step p { font-size: 0.95rem; }

  .pd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
  .pd-chips span {
    background: var(--card); border: 1px solid var(--mist); border-radius: 999px;
    padding: 8px 16px; font-size: 0.9rem; color: var(--slate);
    font-variant-numeric: tabular-nums;
  }
  .pd-chips b { color: var(--ink); margin-right: 6px; font-weight: 700; }
  .pd-intro { color: var(--slate); font-size: 1.05rem; margin-bottom: 10px; }
  .pd-abschnitt { padding: 18px 0 0; }
  .pd-abschnitt h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 18px 0 10px; }
  .pd-abschnitt p { color: var(--slate); margin-bottom: 12px; max-width: 70ch; }
  /* Startplatz-Fotos der Fluggebiete-Seite (von der alten Website uebernommen,
     1000x400; das Klosters-Landeplatz-Bild ist hochformatig und bleibt schmaler). */
  .gebiet-bild { margin: 10px 0 14px; }
  .gebiet-bild img { display: block; width: 100%; height: auto; border-radius: 12px; }
  .gebiet-bild img[width="537"] { width: min(420px, 100%); }
  /* Startplatz-Daten auf der Fluggebiete-Seite: kompakte Liste ohne Punkte. */
  .gebiet-daten { list-style: none; margin: 4px 0 18px; padding: 0; }
  .gebiet-daten li { color: var(--slate); font-size: 0.95rem; margin: 2px 0; }
  .gebiet-daten b { color: var(--ink); font-weight: 600; }
  .pd-abschnitt h3 { font-size: 1.08rem; margin: 22px 0 6px; }

  .pd-includes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
  .pd-includes li {
    background: var(--card); border: 1px solid var(--mist); border-radius: var(--radius);
    padding: 12px 16px 12px 42px; position: relative; color: var(--slate); font-size: 0.95rem;
  }
  .pd-includes li::before {
    content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px;
    transform: translateY(-50%); border-radius: 50%;
    background: var(--accent) center / 10px no-repeat
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5.2 5L20 7"/></svg>');
  }
  .pd-cta { display: flex; flex-wrap: wrap; gap: 12px; padding: 30px 0 8px; }
  .pd-cta .btn-zweit { background: var(--card); color: var(--ink); border: 1px solid var(--mist); }
  .pd-cta .btn-zweit:hover { background: var(--mist); transform: translateY(-1px); }
  .seite-faq .faq { padding: 0; }
  .pd-faq { padding-top: 26px; }
  .pd-faq h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 14px; }