/* PCS Zusatzcode: Feinschliff-CSS für die Landingpage (wird von pcs-zusatzcode.php geladen) */

/* =====================================================================
   PCS LANDINGPAGE: FEINSCHLIFF AN DEN FIGMA-MASTER „Landingpage Mix“
   ---------------------------------------------------------------------
   Wofür:   Die Startseite ist komplett aus Breakdance-Elementen gebaut.
            Einige Details (Schriftgrößen, Kartenstile, Abstände) lassen
            sich in den Element-Einstellungen nicht 1:1 wie im Entwurf
            einstellen. Diese Regeln gleichen das an den Master an.
   Geladen: über functions.php (Funktion pcs_enqueue_feinschliff), nach
            dem Breakdance-CSS. Alle Regeln beginnen mit „body“, damit sie
            die Breakdance-Element-CSS sicher überschreiben.
   Achtung: Die Datei gehört zum Breakdance Zero Theme. Bei einem
            Theme-Update wird sie überschrieben. Vorher sichern!
   Stand:   05.11.2026, mylapo / Claude
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. SECTION-INHALT VOLLE BREITE (Hero + Bildband „B311“)
   Die Breakdance-Section packt ihren Inhalt in .section-container. Bei
   Hero und Bildband schrumpft dieser Container sonst auf Inhaltsbreite;
   im Bildband sitzt das Foto dann nur in einem schmalen Streifen.
   --------------------------------------------------------------------- */
body .bde-section.hero > .section-container,
body .bde-section.band > .section-container {
  width: 100%;
  max-width: none;
}
/* Foto + Abdunklung im Bildband beziehen sich auf die ganze Section */
body .bde-section.band > .section-container {
  position: static;
}


/* ---------------------------------------------------------------------
   2. HERO
   --------------------------------------------------------------------- */
/* Headline breiter, damit „DEINE NEUE PADEL-“ wie im Entwurf in eine Zeile passt */
body .hero .hero-content { max-width: 1240px; }
body .hero .hero-title   { max-width: 980px; letter-spacing: 0.01em; }
/* Schriftgröße 56 px nur auf großen Bildschirmen; Tablet/Handy behalten die Breakdance-Werte */
@media (min-width: 1024px) { body .hero .hero-title { font-size: 56px; } }
/* Dachzeile im Hero weiß statt orange (Entwurf) */
body .hero .hero-eyebrow {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  letter-spacing: 0.12em;
}
body .hero .hero-text { font-size: 20px; line-height: 1.6; }
/* Eröffnungs-Badge: Schrift im Entwurf nicht gestreckt */
body .opening-badge-label,
body .opening-badge-year { font-stretch: 100%; font-weight: 800; }
body .opening-badge-label { font-size: 18px; letter-spacing: 0.12em; }


/* ---------------------------------------------------------------------
   3. BUTTONS (Hero, „Route planen“, Newsletter „Anmelden“)
   Entwurf: 56 px hoch, Manrope 19 px ExtraBold, Pillenform.
   --------------------------------------------------------------------- */
body .bde-button .button-atom,
body .breakdance-form-button {
  min-height: 56px;
  padding: 0 28px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}


/* ---------------------------------------------------------------------
   4. HEADER-NAVIGATION: Menüpunkte 16 px wie im Entwurf
   --------------------------------------------------------------------- */
body .bde-header-builder .breakdance-menu-link { font-size: 16px; }


/* ---------------------------------------------------------------------
   5. FAKTENLEISTE unter dem Hero (Icon Boxes)
   --------------------------------------------------------------------- */
body .facts .bde-icon-box .ee-iconbox-title { font-size: 16px; font-weight: 700; }
body .facts .bde-icon-box .ee-iconbox-text  { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }


/* ---------------------------------------------------------------------
   6. ABSCHNITTSKÖPFE
   Dachzeile „Was ist Padel?“ war grau/18 px (erbt vom Fließtext).
   Bei „Regeln“ und „Bautagebuch“ steht der Einleitungstext im Entwurf
   rechts neben der Überschrift (zweispaltig, unten bündig, nur Desktop).
   --------------------------------------------------------------------- */
body .intro-text .eyebrow {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.18em;
  color: #C8380B;
}
@media (min-width: 1024px) {
  body #regeln .section-head,
  body #baustelle .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 60px;
    align-items: end;
  }
  body #regeln .section-head .eyebrow,
  body #regeln .section-head .section-title,
  body #baustelle .section-head .eyebrow,
  body #baustelle .section-head .section-title { grid-column: 1; }
  body #regeln .section-head .lead,
  body #baustelle .section-head .lead {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin: 0;
    max-width: none;
  }
}


/* ---------------------------------------------------------------------
   7. KARTEN
   --------------------------------------------------------------------- */
/* „Was ist Padel?“: drei weiße Karten mit Icon */
body #padel .bde-icon-box {
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(23, 55, 91, 0.06);
}
body #padel .bde-icon-box .ee-iconbox-title {
  font-size: 19px;
  font-weight: 700;
  font-stretch: 100%;
}

/* Regelkarten (01–04): Titel in Versalien, nicht gestreckt */
body .rule-card { border-radius: 22px; }
body .rule-card .card-title {
  font-size: 17px;
  font-weight: 700;
  font-stretch: 100%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* „Deine erste Stunde“: Schritt-Titel in Versalien */
body .step .card-title {
  font-size: 19px;
  font-weight: 700;
  font-stretch: 100%;
  text-transform: uppercase;
}

/* Anlage: Court-Karten + Ausstattung */
body .court-card { border-radius: 24px; }
body .court-title { font-stretch: 100%; }
body .court-count { font-size: 22px; font-stretch: 100%; }
body .court-card .bde-icon-list__text {
  font-size: 17px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}
body #anlage .bde-icon-box { border-radius: 18px; }
body #anlage .bde-icon-box .ee-iconbox-title { font-size: 15px; font-weight: 800; }

/* Bautagebuch: Titel der Zeitleisten-Schritte */
body .timeline-step .card-title,
body .timeline-title { font-size: 18px; font-weight: 700; font-stretch: 100%; }


/* ---------------------------------------------------------------------
   8. NEWSLETTER (Formular Builder)
   --------------------------------------------------------------------- */
body .newsletter h2 { font-size: 42px; }
body .newsletter .breakdance-form-field__input {
  height: 58px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 17px;
}
body .newsletter .breakdance-form-button { min-height: 58px; }


/* ---------------------------------------------------------------------
   9. FAQ (Breakdance „Frequently Asked Questions“)
   Entwurf: weiße Karten, Frage in Archivo 18 px, Antwort 17 px.
   --------------------------------------------------------------------- */
body .bde-faq__item { border-radius: 16px; overflow: hidden; }
body .bde-faq__title {
  font-family: 'Archivo', sans-serif;
  font-size: 18px;
  font-weight: 700;
  font-stretch: 100%;
}
body .bde-faq__answer-content,
body .bde-faq__answer-content p { font-size: 17px; line-height: 1.6; }


/* ---------------------------------------------------------------------
   10. KONTAKT: Adress-Karten hellgrau ohne Schatten (wie Entwurf)
   --------------------------------------------------------------------- */
body #kontakt .bde-icon-box {
  background: #F0F0F7;
  box-shadow: none;
  border-radius: 16px;
  padding: 20px 22px;
}
body #kontakt .bde-icon-box .ee-iconbox-title { font-size: 16px; font-weight: 700; }


/* ---------------------------------------------------------------------
   11. MOBIL: Headlines etwas kleiner, damit nichts überläuft
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  body .hero .hero-title { font-size: 28px; }
  body .newsletter h2 { font-size: 30px; }
}