/* ========================================================================
   POWER-FERIEN | Gestaltungsbasis fuer Joomla + Helix Ultimate + SP Page Builder
   Datei: custom.css                Version: 0.1 / 04.11.2026
   Zweck: Wiederverwendbare Bausteine, nicht Helix-/SPPB-Kerndateien ersetzen.

   Einbau: /templates/<AKTIVER_TEMPLATE_ORDNER>/css/custom.css
   Achtung: Eine bereits existierende custom.css ZUERST sichern und zusammenfuehren.

   Klassen in SP Page Builder (Feld "CSS Class", ohne Punkt) vergeben:
   pf-section, pf-section--cream, pf-section--blue, pf-hero,
   pf-lead, pf-copy, pf-card, pf-card__image, pf-card__meta,
   pf-button, pf-button--outline, pf-facts, pf-fact, pf-eyebrow.

   Typografie (Fredoka/Nunito Sans) in Helix zentral laden/einstellen.
   Diese Datei laedt KEINE externen Google-Schriften oder Bilddateien.
   ======================================================================== */

/* 01. Designvariablen / Tokens. Werte an EINER Stelle anpassen. */
:root {
  --pf-ink: #173b5f;
  --pf-blue: #0056a0;
  --pf-orange: #ff7700;
  --pf-teal: #159a9c;
  --pf-green: #008f4c;
  --pf-purple: #800080;
  --pf-cream: #fff7f0;
  --pf-pale-blue: #eaf2fb;
  --pf-pale-teal: #e4f7f6;
  --pf-white: #ffffff;
  --pf-line: #dbe5ec;
  --pf-muted: #476277;

  /* Kompatible Bezeichner zum Gestaltungsleitfaden V1.0. */
  --pf-link: var(--pf-blue);
  --pf-accent: var(--pf-orange);

  --pf-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-font-display: "Fredoka", "Nunito Sans", system-ui, sans-serif;

  --pf-max-width: 1200px;
  --pf-text-width: 70ch;
  --pf-radius: 18px;
  --pf-radius-sm: 12px;
  --pf-radius-lg: 22px;
  --pf-shadow-soft: 0 10px 30px rgb(23 59 95 / 7%);
  --pf-shadow-hover: 0 16px 36px rgb(23 59 95 / 11%);

  --pf-space-1: 8px;
  --pf-space-2: 16px;
  --pf-space-3: 24px;
  --pf-space-4: 32px;
  --pf-space-5: 48px;
  --pf-space-6: 64px;
}

/* 02. Global nur das Notwendigste: Fokus und Link-Bedienbarkeit. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--pf-blue);
  outline-offset: 3px;
}

/* 03. Abschnitte: CSS Class auf der SPPB-Section/Row. */
.pf-section {
  padding-block: clamp(44px, 5.5vw, 88px);
}

.pf-section--cream { background-color: var(--pf-cream); }
.pf-section--blue { background-color: var(--pf-pale-blue); }
.pf-section--teal { background-color: var(--pf-pale-teal); }

/* Lesebreite: auf Textblock-Addon oder innere Spalte anwenden. */
.pf-copy { max-width: var(--pf-text-width); }

/* 04. Einstiegsbereich und redaktionelle Typografie. */
.pf-hero {
  background-color: var(--pf-cream);
  padding-block: clamp(48px, 7vw, 104px);
}

.pf-hero h1,
.pf-title {
  color: var(--pf-ink);
  font-family: var(--pf-font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.1vw, 3.3rem);
  line-height: 1.13;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pf-section-title h2,
h2.pf-section-title {
  color: var(--pf-ink);
  font-family: var(--pf-font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  line-height: 1.2;
  text-wrap: balance;
}

.pf-lead,
.pf-lead p {
  color: var(--pf-ink);
  font-family: var(--pf-font-body);
  font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  line-height: 1.6;
}

.pf-eyebrow,
.pf-eyebrow p {
  color: var(--pf-ink);
  font-family: var(--pf-font-body);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* 05. Einheitliche Programmkarten. Class auf Spalte/Div setzen. */
.pf-card {
  height: 100%;
  padding: clamp(18px, 2vw, 26px);
  background: var(--pf-white);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow-soft);
  transition: box-shadow 180ms ease;
}

.pf-card h3,
.pf-card h4 {
  color: var(--pf-ink);
  font-family: var(--pf-font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.52rem);
  line-height: 1.24;
}

.pf-card__image img,
img.pf-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--pf-radius-sm);
}

.pf-card__meta,
.pf-card__meta p {
  color: var(--pf-muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.pf-card a:not(.sppb-btn) {
  text-underline-offset: 0.18em;
}

@media (hover: hover) and (pointer: fine) {
  .pf-card:hover { box-shadow: var(--pf-shadow-hover); }
}

/* 06. Buttons / CTA.
   Class "pf-button" auf das SP Page Builder Button-Addon setzen.
   Dort gerendeter Link hat in der Regel die Klasse .sppb-btn.
   Auch ein spaeteres Joomla-Component-Template kann <a class="pf-button"> nutzen.
*/
:is(a.pf-button, button.pf-button, .pf-button .sppb-btn, .pf-button.sppb-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 23px;
  border: 2px solid var(--pf-ink);
  border-radius: var(--pf-radius-sm);
  background-color: var(--pf-ink);
  color: var(--pf-white);
  font-family: var(--pf-font-body);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

:is(a.pf-button, button.pf-button, .pf-button .sppb-btn, .pf-button.sppb-btn):hover {
  background-color: #0e2e4c;
  border-color: #0e2e4c;
  color: var(--pf-white);
}

:is(a.pf-button--outline, button.pf-button--outline,
    .pf-button--outline .sppb-btn, .pf-button--outline.sppb-btn) {
  border-color: var(--pf-blue);
  background: transparent;
  color: var(--pf-blue);
}

:is(a.pf-button--outline, button.pf-button--outline,
    .pf-button--outline .sppb-btn, .pf-button--outline.sppb-btn):hover {
  background: var(--pf-pale-blue);
  border-color: var(--pf-blue);
  color: var(--pf-ink);
}

/* 07. Faktenblöcke (Ort, Alter, Termin): Klasse am Wrapper/Spalte. */
.pf-facts {
  padding: clamp(20px, 3vw, 32px);
  background: var(--pf-pale-blue);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
}

.pf-fact {
  padding-block: 10px;
  border-bottom: 1px solid var(--pf-line);
}
.pf-fact:last-child { border-bottom: 0; }
.pf-fact strong { color: var(--pf-ink); }

/* 08. Bilder und Links als bewusst benannte Varianten. */
.pf-image-round img,
img.pf-image-round {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--pf-radius-lg);
}

.pf-text-link a,
a.pf-text-link {
  color: var(--pf-blue);
  font-weight: 800;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

/* 09. Kleine Mobilkorrekturen, ohne SPPB-Spaltensystem zu ersetzen. */
@media (max-width: 767.98px) {
  .pf-section { padding-block: 44px; }
  .pf-hero { padding-block: 56px; }
  .pf-card { padding: 20px; }
  .pf-facts { padding: 20px; }
  :is(a.pf-button, button.pf-button, .pf-button .sppb-btn, .pf-button.sppb-btn) {
    white-space: normal;
  }
}

/* 10. Bewegungsarmut respektieren. */
@media (prefers-reduced-motion: reduce) {
  .pf-card,
  :is(a.pf-button, button.pf-button, .pf-button .sppb-btn, .pf-button.sppb-btn) {
    transition: none;
  }
}

/* ========================================================================
   ERWEITERUNGEN AB VERSION 0.2:
   - Anpassungen nur nach Test auf einer echten SP Page Builder-Musterseite.
   - Keine pauschalen .sppb- oder #sp-header-Overrides ohne HTML-Pruefung.
   - Neue Klassen als pf-* dokumentieren; alte Klassen nicht still entfernen.
   ======================================================================== */


/* POWER-FERIEN | Schrift-Einbindung V0.2
   Diesen Block AN DAS ENDE der bereits vorhandenen custom.css anfuegen.
   NICHT die gesamte custom.css durch diese Datei ersetzen.

   Erwartete Dateien relativ zur custom.css:
   ../fonts/fredoka-600.woff2
   ../fonts/nunito-sans-400.woff2
   ../fonts/nunito-sans-700.woff2
*/

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Globale Grundschrift: Template und Page Builder. */
body,
body p,
body li,
button,
input,
select,
textarea,
.sp-megamenu-parent > li > a,
.offcanvas-menu .offcanvas-inner ul.menu li a {
  font-family: var(--pf-font-body, "Nunito Sans", system-ui, sans-serif);
}

/* Ueberschriften: die vereinbarte Display-Schrift. */
h1,
h2,
h3,
h4,
h5,
h6,
.sppb-addon-title,
.pf-title {
  font-family: var(--pf-font-display, "Fredoka", system-ui, sans-serif);
}

/* Erwartete Typografiewerte aus dem Gestaltungsleitfaden.
   Schriftgroessen und Abstaende weiter in Helix / SPPB pflegen.
   Die hier registrierten Schriftfamilien koennen von Helix-Styles
   ueberschrieben werden: im Browser unter 'Computed' kontrollieren.
*/

/* ========================================================================
   POWER-FERIEN | CSS-Erweiterung 0.4 | 05.11.2026
   Nur AM ENDE der funktionierenden custom.css V0.3 einfuegen.
   Nicht den bestehenden @font-face-Block ersetzen oder duplizieren.

   Zweck:
   - weisser Helix-Header, lesbare Navigation
   - Hamburger nur auf grossen Desktop-Bildschirmen ausblenden
   - kurzer Erklaerungsabschnitt nach dem Hero
   - fuenf gleichwertige, responsive Programmkarten (3 + 2)

   Genutzte Designvariablen stammen aus custom.css V0.3.
   ======================================================================== */

/* 11. Helix Header: ruhig, hell und mit klarer Navigation. */
#sp-header,
#sp-header.header-sticky {
  background: var(--pf-white) !important;
  box-shadow: 0 1px 0 var(--pf-line);
}

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
  color: var(--pf-ink);
}

#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li > a:focus-visible {
  color: var(--pf-blue);
}

#sp-header #offcanvas-toggler .burger-icon > span {
  background-color: var(--pf-ink);
}

/* Offcanvas-Ausloeser auf grossem Desktop verbergen.
   Mobile/Tablet bleiben unter Kontrolle von Helix Ultimate. */
@media (min-width: 992px) {
  #sp-header #offcanvas-toggler {
    display: none !important;
  }
}

/* 12. Kurzer Erklaerungsabschnitt zwischen Hero und Programmen. */
.pf-intro {
  background: var(--pf-white);
  padding-block: clamp(52px, 6vw, 88px);
}

.pf-intro .pf-intro__copy,
.pf-intro__copy {
  max-width: 68ch;
}

.pf-intro__copy p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--pf-ink);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.7;
}

.pf-intro__copy p:last-child { margin-bottom: 0; }

/* 13. Programm-Section: sanfter Kontrast zu Intro und weissen Karten. */
.pf-programs {
  background: #f3f8fc;
  padding-block: clamp(60px, 7vw, 104px);
}

.pf-programs__heading { max-width: 750px; margin-bottom: 32px; }
.pf-programs__heading p { color: var(--pf-muted); }

/* Flex statt komplizierter separater Rows: 3 oben, 2 mittig unten.
   Funktioniert mit normalen Div-Kindern und gaengigen SPPB-Addon-Wrappern. */
.pf-program-grid,
.pf-program-grid > .sppb-addon-content {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
}

/* Falls SPPB eine zusaetzliche Inhaltsebene um die Kinder erzeugt. */
.pf-program-grid > .sppb-addon-content {
  flex: 1 1 100%;
  width: 100%;
}

.pf-program-grid > :not(.sppb-addon-content),
.pf-program-grid > .sppb-addon-content > * {
  flex: 0 1 calc((100% - 48px) / 3);
  min-width: 0;
}

.pf-program-card {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--pf-white);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow-soft);
  transition: box-shadow 180ms ease;
}

.pf-program-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 170px;
  aspect-ratio: 16 / 9;
  padding: 20px;
  background: var(--pf-pale-blue);
  color: var(--pf-ink);
  text-align: center;
  overflow: hidden;
}

.pf-program-card__visual p { margin: 0; font-size: .875rem; }

/* Programmfarben nur als sanfte Platzhalter bis echte Fotos da sind. */
.pf-program-card--ostern .pf-program-card__visual  { background: linear-gradient(135deg, #ffedd8, #f8dfed); }
.pf-program-card--pfingsten .pf-program-card__visual { background: linear-gradient(135deg, #e2f2da, #dff4ee); }
.pf-program-card--team .pf-program-card__visual { background: linear-gradient(135deg, #dceef5, #e7e0f8); }
.pf-program-card--abenteuer .pf-program-card__visual { background: linear-gradient(135deg, #ffe8d2, #f9dbbe); }
.pf-program-card--taekwondo .pf-program-card__visual { background: linear-gradient(135deg, #dce8f7, #deeced); }

/* Spaetere echte Bilder passen sich der gleichen Bildflaeche an. */
.pf-program-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pf-program-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  padding: clamp(18px, 2.3vw, 26px);
}

.pf-program-card__season,
.pf-program-card__season p {
  color: var(--pf-blue);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.pf-program-card__title h3,
h3.pf-program-card__title,
.pf-program-card h3 {
  color: var(--pf-ink);
  font-family: var(--pf-font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.9vw, 1.48rem);
  line-height: 1.24;
  margin: 0;
}

.pf-program-card__teaser,
.pf-program-card__teaser p {
  color: var(--pf-ink);
  font-size: 1rem;
  line-height: 1.58;
}

.pf-program-card__meta,
.pf-program-card__meta p {
  color: var(--pf-muted);
  font-size: .9rem;
  line-height: 1.5;
}

.pf-program-card__more a {
  color: var(--pf-blue);
  font-weight: 700;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
}

.pf-programs__note,
.pf-programs__note p {
  color: var(--pf-muted);
  font-size: .88rem;
  line-height: 1.55;
}

@media (hover: hover) and (pointer: fine) {
  .pf-program-card:hover { box-shadow: var(--pf-shadow-hover); }
}

@media (max-width: 1099.98px) {
  .pf-program-grid > :not(.sppb-addon-content),
  .pf-program-grid > .sppb-addon-content > * {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 699.98px) {
  .pf-intro { padding-block: 48px; }
  .pf-programs { padding-block: 56px; }
  .pf-program-grid,
  .pf-program-grid > .sppb-addon-content { gap: 18px; }
  .pf-program-grid > :not(.sppb-addon-content),
  .pf-program-grid > .sppb-addon-content > * {
    flex-basis: 100%;
  }
  .pf-program-card__visual { min-height: 150px; }
  .pf-program-card__body { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-program-card { transition: none; }
}

/* ========================================================================
   POWER-FERIEN | CSS-Erweiterung V0.5 - Elternstimmen | 05.11.2026
   NUR am ENDE der bestehenden, funktionierenden custom.css V0.3 + V0.4
   einfuegen. Nicht die bisherigen Regeln oder @font-face-Bloecke ersetzen.

   Section-Klassen: pf-section pf-section--teal pf-voices
   Section-ID: stimmen
   Einleitung (Text Block): pf-voices__intro
   Karten-Container (Div): pf-voices-grid
   Einzelne Karten (Div): pf-voice
   Zitat-Textblock: pf-voice__quote
   Herkunft-Textblock: pf-voice__source
   ======================================================================== */

/* Ausgeglichenes Raster mit hellen Karten vor sanftem Tuerrkis. */
.pf-voices-grid,
.pf-voices-grid > .sppb-addon-content {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
}

.pf-voices__intro,
.pf-voices__intro p {
  max-width: 730px;
}
.pf-voices__intro {
  margin-bottom: 32px;
}

/* Auch dann, wenn SPPB ein zusaetzliches Content-Element erzeugt. */
.pf-voices-grid > .sppb-addon-content {
  flex: 1 1 100%;
  width: 100%;
}

.pf-voices-grid > :not(.sppb-addon-content),
.pf-voices-grid > .sppb-addon-content > * {
  flex: 0 1 calc((100% - 48px) / 3);
  min-width: 0;
}

.pf-voice {
  position: relative;
  display: flex !important;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  padding: 42px 27px 25px;
  background: var(--pf-white);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-lg);
  box-shadow: var(--pf-shadow-soft);
}

/* Manche SPPB-Versionen legen ein weiteres Inhaltselement an. */
.pf-voice > .sppb-addon-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Ein ruhiges typografisches Zitatzeichen, keine Sterne oder Avatare. */
.pf-voice::before {
  content: "\201C";
  position: absolute;
  left: 25px;
  top: 6px;
  color: #93c6c6;
  font-family: Georgia, serif;
  font-size: 3.65rem;
  line-height: 1;
  pointer-events: none;
}

.pf-voice__quote {
  flex: 1 1 auto;
}
.pf-voice__quote,
.pf-voice__quote p {
  margin: 0;
  color: var(--pf-ink);
  font-family: var(--pf-font-body);
  font-size: 1.04rem;
  line-height: 1.65;
}

.pf-voice__source {
  margin-top: 22px;
}
.pf-voice__source,
.pf-voice__source p {
  color: var(--pf-muted);
  font-family: var(--pf-font-body);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.45;
}
.pf-voice__source p { margin: 0; }

@media (max-width: 1099.98px) {
  .pf-voices-grid > :not(.sppb-addon-content),
  .pf-voices-grid > .sppb-addon-content > * {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 699.98px) {
  .pf-voices__intro { margin-bottom: 26px; }
  .pf-voices-grid,
  .pf-voices-grid > .sppb-addon-content { gap: 18px; }
  .pf-voices-grid > :not(.sppb-addon-content),
  .pf-voices-grid > .sppb-addon-content > * {
    flex-basis: 100%;
  }
  .pf-voice { padding: 39px 22px 23px; }
  .pf-voice::before { left: 20px; }
}


/* Programmkarten: Inhalt und Links gleichmäßig anordnen */
.pf-program-card__body,
.pf-program-card__body > .sppb-addon-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pf-program-card__body > :last-child,
.pf-program-card__body > .sppb-addon-content > :last-child {
  margin-top: auto;
}


/* =====================================================================
   POWER-FERIEN | CSS-Erweiterung V0.6 | Seite "Power-Ferien entdecken"
   Einbau: NUR am Ende der bestehenden, funktionierenden custom.css (V0.3-
   V0.5) anhaengen. Keine vorhandenen Schrift- oder Farbregeln ersetzen.

   CSS-Klassen im SP Page Builder (ohne Punkt):
   Hero Section:             pf-discover-hero
   Hero Intro Text Block:    pf-discover-hero__copy
   Hero Medien-Div:          pf-discover-hero__media
   Geschichte Section:       pf-section pf-discover-story
   Geschichte Text Block:    pf-discover-story__copy
   Vier Schritte Section:    pf-section pf-section--blue pf-discover-steps
   Vier Schritte Raster Div: pf-discover-steps-grid
   Vier Schritte Karte Div:  pf-discover-step
   Schrittnummer Text Block: pf-discover-step__number
   Hinweis unter Karten:     pf-discover-steps__note
   Grundsaetze Section:      pf-section pf-discover-principles
   Grundsaetze Panel Div:    pf-facts (bestehende Klasse)
   Grundsatz Text Blocks:    pf-fact (bestehende Klasse)
   Schluss Section:          pf-section pf-discover-cta
   Schluss Link-Gruppe:      pf-discover-cta__actions
   Buttons:                  pf-button (bestehende Klasse)
   ===================================================================== */

/* 01. Einstieg mit Bildplatzhalter (wird spaeter durch freigegebenes Motiv ersetzt). */
.pf-discover-hero {
  background: var(--pf-cream);
  padding-block: clamp(56px, 7vw, 104px);
}
.pf-discover-hero h1 {
  max-width: 15ch;
  color: var(--pf-ink);
  font-family: var(--pf-font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.1vw, 3.3rem);
  line-height: 1.13;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pf-discover-hero__copy,
.pf-discover-hero__copy p {
  max-width: 66ch;
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
  line-height: 1.65;
}
.pf-discover-hero__media {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 30px;
  border-radius: var(--pf-radius-lg);
  background: linear-gradient(140deg, #e0edf7 0%, #dff5f0 100%);
  text-align: center;
}
.pf-discover-hero__media p {
  color: var(--pf-muted);
  font-size: 0.93rem;
  line-height: 1.5;
  margin: 0;
}

/* 02. Ruhige Erzaehlpassage. */
.pf-discover-story__copy,
.pf-discover-story__copy p {
  max-width: 68ch;
  line-height: 1.72;
}
.pf-discover-story__copy p:last-child { margin-bottom: 0; }

/* 03. Vier Schritte als eigenstaendiger, adaptiver Raster. */
.pf-discover-steps-grid,
.pf-discover-steps-grid > .sppb-addon-content {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.pf-discover-steps-grid > .sppb-addon-content {
  grid-column: 1 / -1;
  width: 100%;
}
.pf-discover-step {
  height: 100%;
  min-width: 0;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  background: var(--pf-white);
  box-shadow: var(--pf-shadow-soft);
}
.pf-discover-step__number,
.pf-discover-step__number p {
  color: var(--pf-teal);
  font-family: var(--pf-font-body);
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 12px;
}
.pf-discover-step h3 {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 1.9vw, 1.48rem);
}
.pf-discover-step p {
  font-size: 1rem;
  line-height: 1.63;
}
.pf-discover-step > .sppb-addon-content > :last-child p:last-child,
.pf-discover-step > :last-child p:last-child { margin-bottom: 0; }
.pf-discover-steps__note,
.pf-discover-steps__note p {
  max-width: 74ch;
  margin: 28px 0 0;
  color: var(--pf-muted);
  font-size: 0.95rem;
  line-height: 1.62;
}

/* 04. Der bestehende Fakten-Block bekommt nur in dieser Section Abstand. */
.pf-discover-principles .pf-facts {
  padding: clamp(22px, 3vw, 34px);
}
.pf-discover-principles .pf-fact { padding-block: 13px; }
.pf-discover-principles .pf-fact:first-child { padding-top: 0; }
.pf-discover-principles .pf-fact:last-child { padding-bottom: 0; }

/* 05. Abschluss mit klarem Weg zu Angeboten und Ferienablauf. */
.pf-discover-cta { background: var(--pf-pale-teal); }
.pf-discover-cta__actions,
.pf-discover-cta__actions > .sppb-addon-content {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

@media (max-width: 1099.98px) {
  .pf-discover-steps-grid,
  .pf-discover-steps-grid > .sppb-addon-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .pf-discover-hero { padding-block: 56px; }
  .pf-discover-hero h1 { max-width: none; }
  .pf-discover-hero__media { min-height: 225px; margin-top: 20px; }
}
@media (max-width: 639.98px) {
  .pf-discover-steps-grid,
  .pf-discover-steps-grid > .sppb-addon-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .pf-discover-step { padding: 22px; }
}


/* ====================================================================
   POWER-FERIEN | CSS-Erweiterung V0.7 | Seite "So sind unsere Ferien"
   Nur AM ENDE der funktionierenden custom.css (V0.3 bis V0.6) ergaenzen.
   Keine vorhandenen Farb-, Schrift- oder Headerregeln ersetzen.

   Abschnitt 01: pf-day-hero
     Leadeinleitung: pf-day-hero__lead
     Faktenpanel: pf-day-hero__facts
     Fakteneintrag: pf-day-hero__fact
   Abschnitt 02: pf-section pf-day-rhythm
     Timeline-Container: pf-day-timeline
     Timeline-Eintrag: pf-day-timeline__item
     Zeitlabel: pf-day-timeline__time
     Schlussnote: pf-day-timeline__note
   Abschnitt 03: pf-section pf-section--blue pf-day-participation
     Rechter Kasten: pf-facts; Inhalte: pf-fact (existierende Klassen)
   Abschnitt 04: pf-section pf-day-care
     Rechter Kasten: pf-facts; Inhalte: pf-fact (existierende Klassen)
   Abschnitt 05: pf-section pf-day-memory
     Medienplatzhalter: pf-day-memory__media
   Abschnitt 06: pf-section pf-day-practical
     Faktenraster: pf-day-info-grid
     Fakt-Karte: pf-day-info
     CTA-Gruppe: pf-day-actions
   ==================================================================== */

/* 01: Ruhiger Einstieg, optisch verwandt mit der Startseite. */
.pf-day-hero {
  background: var(--pf-cream);
  padding-block: clamp(52px, 7vw, 100px);
}
.pf-day-hero h1 {
  max-width: 17ch;
  color: var(--pf-ink);
  font-family: var(--pf-font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.1vw, 3.3rem);
  line-height: 1.13;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pf-day-hero__lead,
.pf-day-hero__lead p {
  max-width: 66ch;
  font-size: clamp(1.04rem, 1.5vw, 1.18rem);
  line-height: 1.66;
}
.pf-day-hero__facts {
  min-height: 275px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 3vw, 36px);
  background: linear-gradient(140deg, #e2eef7 0%, #def4ef 100%);
  border-radius: var(--pf-radius-lg);
}
.pf-day-hero__facts > .sppb-addon-content {
  display: flex;
  flex-direction: column;
}
.pf-day-hero__fact {
  padding: 13px 0;
  border-bottom: 1px solid rgb(23 59 95 / 13%);
}
.pf-day-hero__fact:first-child { padding-top: 0; }
.pf-day-hero__fact:last-child { padding-bottom: 0; border-bottom: 0; }
.pf-day-hero__fact p {
  color: var(--pf-ink);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}
.pf-day-hero__fact strong { font-weight: 700; }

/* 02: Vertikale Tagesablauf-Zeitleiste mit zuganglichen Textkarten. */
.pf-day-rhythm__intro,
.pf-day-rhythm__intro p { max-width: 72ch; }
.pf-day-timeline {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  margin-top: 32px;
}
.pf-day-timeline > .sppb-addon-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pf-day-timeline::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 13px;
  width: 2px;
  background: #b1d6d6;
  pointer-events: none;
}
.pf-day-timeline__item {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 48px);
  margin-left: 48px;
  padding: clamp(19px, 2.6vw, 28px);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  background: var(--pf-white);
  box-shadow: var(--pf-shadow-soft);
}
.pf-day-timeline__item::before {
  content: "";
  position: absolute;
  top: 25px;
  left: -42px;
  width: 16px;
  height: 16px;
  background: var(--pf-teal);
  border: 4px solid var(--pf-white);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #b1d6d6;
  box-sizing: border-box;
}
.pf-day-timeline__time,
.pf-day-timeline__time p {
  color: var(--pf-blue);
  font-family: var(--pf-font-body);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 9px;
}
.pf-day-timeline__item h3 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}
.pf-day-timeline__item > :last-child p:last-child,
.pf-day-timeline__item > .sppb-addon-content > :last-child p:last-child { margin-bottom: 0; }
.pf-day-timeline__note,
.pf-day-timeline__note p {
  max-width: 74ch;
  margin-top: 22px;
  color: var(--pf-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 03: Konkrete Wahlmoeglichkeiten statt abstrakter Werteliste. */
.pf-day-participation .pf-facts {
  background: var(--pf-white);
  border: 1px solid var(--pf-line);
  box-shadow: var(--pf-shadow-soft);
}
.pf-day-participation .pf-fact { padding-block: 13px; }
.pf-day-participation .pf-fact:first-child { padding-top: 0; }
.pf-day-participation .pf-fact:last-child { padding-bottom: 0; }

/* 04: Verantwortung der Erwachsenen erkennbar und sachlich. */
.pf-day-care .pf-facts {
  padding: clamp(22px, 3vw, 34px);
}
.pf-day-care .pf-fact { padding-block: 13px; }
.pf-day-care .pf-fact:first-child { padding-top: 0; }
.pf-day-care .pf-fact:last-child { padding-bottom: 0; }

/* 05: Ruhiges Erinnerungs-Motiv; Bild erst am Ende der Website-Arbeit. */
.pf-day-memory { background: var(--pf-cream); }
.pf-day-memory__media {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 285px;
  padding: 26px;
  border-radius: var(--pf-radius-lg);
  background: linear-gradient(135deg, #f7e6d5 0%, #e5eff5 100%);
  text-align: center;
}
.pf-day-memory__media p {
  color: var(--pf-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

/* 06: Praktische Fakten als adapatives Zweispaltenraster. */
.pf-day-practical { background: var(--pf-pale-teal); }
.pf-day-info-grid,
.pf-day-info-grid > .sppb-addon-content {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.pf-day-info-grid > .sppb-addon-content {
  grid-column: 1 / -1;
  width: 100%;
}
.pf-day-info {
  min-width: 0;
  height: 100%;
  padding: 22px 24px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  background: var(--pf-white);
}
.pf-day-info h3 { margin: 0 0 10px; font-size: 1.25rem; }
.pf-day-info p { line-height: 1.6; }
.pf-day-info > :last-child p:last-child,
.pf-day-info > .sppb-addon-content > :last-child p:last-child { margin-bottom: 0; }
.pf-day-actions,
.pf-day-actions > .sppb-addon-content {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

@media (max-width: 767.98px) {
  .pf-day-hero { padding-block: 52px; }
  .pf-day-hero h1 { max-width: none; }
  .pf-day-hero__facts { min-height: 0; margin-top: 22px; }
  .pf-day-memory__media { min-height: 200px; margin-top: 22px; }
}
@media (max-width: 639.98px) {
  .pf-day-timeline { gap: 14px; }
  .pf-day-timeline > .sppb-addon-content { gap: 14px; }
  .pf-day-timeline__item { margin-left: 40px; width: calc(100% - 40px); padding: 18px; }
  .pf-day-timeline__item::before { left: -34px; }
  .pf-day-timeline::before { left: 13px; }
  .pf-day-info-grid,
  .pf-day-info-grid > .sppb-addon-content { grid-template-columns: minmax(0, 1fr); }
  .pf-day-info { padding: 20px; }
  .pf-day-actions, .pf-day-actions > .sppb-addon-content { align-items: stretch; }
}


/* =====================================================================
   POWER-FERIEN | V0.8 | Feinschliff "So sind unsere Ferien"
   Append below V0.7 at the END of the existing custom.css.
   This patch is scoped to the current page components.
   ===================================================================== */

/* 01: Hero facts - independent rows with icon addon + text addon. */
.pf-day-hero__fact {
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 17px 0;
  border: 0;
}
.pf-day-hero__fact > .sppb-addon-content {
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.pf-day-hero__fact > .sppb-addon-content > :first-child {
  flex: 0 0 42px;
}
.pf-day-hero__fact > .sppb-addon-content > :last-child {
  flex: 1 1 auto;
  min-width: 0;
}
.pf-day-hero__fact--time,
.pf-day-hero__fact--place {
  border-bottom: 1px solid rgba(23, 59, 95, 0.17);
}
.pf-day-hero__fact--activity { border-bottom: 0; }
.pf-day-hero__icon {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  background: #fff;
  border: 1px solid rgba(21, 154, 156, 0.18);
  border-radius: 12px;
}
.pf-day-hero__icon .sppb-addon-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-day-hero__content,
.pf-day-hero__content p {
  margin: 0;
  color: var(--pf-ink);
  font-size: 1rem;
  line-height: 1.5;
}
.pf-day-hero__content strong {
  display: block;
  font-weight: 700;
}

/* 02: Give the four practical info cards room below the heading. */
.pf-day-practical .pf-day-info-grid {
  margin-top: 32px;
}
.pf-day-practical .pf-day-actions {
  margin-top: 36px;
}

/* 03: Limit reading line length inside the wide timeline cards. */
.pf-day-rhythm .pf-day-timeline__item p {
  max-width: 75ch;
}

@media (max-width: 767.98px) {
  .pf-day-hero__fact { padding: 14px 0; }
  .pf-day-hero__fact > .sppb-addon-content { gap: 12px; }
  .pf-day-practical .pf-day-info-grid { margin-top: 26px; }
  .pf-day-practical .pf-day-actions { margin-top: 30px; }
}


/* =====================================================================
   POWER-FERIEN | V0.9 | Mehr Raum auf "So sind unsere Ferien"
   An das ENDE der bestehenden custom.css (nach V0.8) anfuegen.
   Ausschliesslich auf Klassen dieser Unterseite bezogen.
   Keine Aenderungen an Fonts, Farben, Menues oder anderen Seiten.
   ===================================================================== */

/* 1. Ausgewogenere Abschnittsabstaende. */
.pf-day-hero {
  padding-block: clamp(68px, 7.5vw, 108px);
}
.pf-day-rhythm,
.pf-day-participation,
.pf-day-care,
.pf-day-memory,
.pf-day-practical {
  padding-block: clamp(68px, 6.5vw, 100px);
}
.pf-day-hero h1 {
  margin-bottom: 22px;
}
.pf-day-hero__lead p {
  line-height: 1.72;
  margin-bottom: 18px;
}

/* 2. Hero-Infobox: drei vollwertige Zeilen, nicht ein enger Textblock. */
.pf-day-hero .pf-day-hero__facts {
  min-height: 342px;
  padding: 28px 34px;
}
.pf-day-hero .pf-day-hero__facts > .sppb-addon-content {
  gap: 0;
}
.pf-day-hero .pf-day-hero__fact {
  position: relative;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto;
  width: 100%;
  min-height: 88px;
  gap: 16px;
  padding: 20px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-sizing: border-box;
}
/* SP Page Builder may wrap child addons in an extra content layer. */
.pf-day-hero .pf-day-hero__fact > .sppb-addon-content,
.pf-day-hero .pf-day-hero__fact > .sppb-addon-wrapper,
.pf-day-hero .pf-day-hero__fact > .sppb-addon-wrapper > .sppb-addon-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  w/*idth: 100%;*/
}
.pf-day-hero .pf-day-hero__fact--time::after,
.pf-day-hero .pf-day-hero__fact--place::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(23, 59, 95, 0.18);
  pointer-events: none;
}
.pf-day-hero .pf-day-hero__icon {
  width: 44px;
  min-width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 13px;
}
.pf-day-hero .pf-day-hero__content,
.pf-day-hero .pf-day-hero__content p {
  font-size: 1.03rem;
  line-height: 1.62;
}
.pf-day-hero .pf-day-hero__content strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

/* 3. Zeitleiste: mehr Luft zwischen den Stationen und im Text. */
.pf-day-rhythm .pf-day-timeline,
.pf-day-rhythm .pf-day-timeline > .sppb-addon-content {
  gap: 26px;
}
.pf-day-rhythm .pf-day-timeline {
  margin-top: 44px;
}
.pf-day-rhythm .pf-day-timeline__item {
  padding: clamp(27px, 3vw, 36px);
}
.pf-day-rhythm .pf-day-timeline__time,
.pf-day-rhythm .pf-day-timeline__time p {
  margin-bottom: 14px;
}
.pf-day-rhythm .pf-day-timeline__item h3 {
  margin-bottom: 13px;
  line-height: 1.3;
}
.pf-day-rhythm .pf-day-timeline__item p {
  max-width: 82ch;
  line-height: 1.72;
}
.pf-day-rhythm .pf-day-timeline__note,
.pf-day-rhythm .pf-day-timeline__note p {
  margin-top: 28px;
}

/* 4. Textabschnitte: Ueberschriften besser vom Fliesstext trennen. */
.pf-day-participation h2,
.pf-day-care h2,
.pf-day-memory h2 {
  margin-bottom: 21px;
}
.pf-day-participation .pf-facts,
.pf-day-care .pf-facts {
  padding: clamp(26px, 3.2vw, 38px);
}
.pf-day-participation .pf-fact,
.pf-day-care .pf-fact {
  padding-block: 19px;
}
.pf-day-participation .pf-fact p,
.pf-day-care .pf-fact p {
  line-height: 1.72;
}

/* 5. Infokarten im Abschlussbereich staerker entflechten. */
.pf-day-practical .pf-day-info-grid,
.pf-day-practical .pf-day-info-grid > .sppb-addon-content {
  gap: 24px;
}
.pf-day-practical .pf-day-info-grid {
  margin-top: 40px;
}
.pf-day-practical .pf-day-info {
  padding: 28px 30px;
}
.pf-day-practical .pf-day-info h3 {
  margin-bottom: 13px;
}
.pf-day-practical .pf-day-info p {
  line-height: 1.72;
}
.pf-day-practical .pf-day-actions {
  margin-top: 40px;
}

@media (max-width: 767.98px) {
  .pf-day-hero {
    padding-block: 54px;
  }
  .pf-day-rhythm,
  .pf-day-participation,
  .pf-day-care,
  .pf-day-memory,
  .pf-day-practical {
    padding-block: 56px;
  }
  .pf-day-hero .pf-day-hero__facts {
    min-height: 0;
    padding: 22px 24px;
  }
  .pf-day-hero .pf-day-hero__fact {
    min-height: 78px;
    padding: 15px 0 !important;
  }
  .pf-day-rhythm .pf-day-timeline,
  .pf-day-rhythm .pf-day-timeline > .sppb-addon-content {
    gap: 18px;
  }
  .pf-day-rhythm .pf-day-timeline__item {
    padding: 23px 21px;
  }
  .pf-day-participation .pf-facts,
  .pf-day-care .pf-facts {
    padding: 22px;
  }
  .pf-day-practical .pf-day-info {
    padding: 23px 22px;
  }
}


/* V0.10 – Hero-Infobox: Abstand zwischen Icon und Text */

.pf-day-hero .pf-day-hero__fact > .sppb-addon-content,
.pf-day-hero .pf-day-hero__fact > .sppb-addon-wrapper > .sppb-addon-content {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  column-gap: 14px !important;
  align-items: center !important;
  justify-content: start !important;
}

/* Icon-Spalte */
.pf-day-hero .pf-day-hero__fact > .sppb-addon-content > :first-child,
.pf-day-hero .pf-day-hero__fact > .sppb-addon-wrapper > .sppb-addon-content > :first-child {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  margin: 0 !important;
}

/* Text-Spalte */
.pf-day-hero .pf-day-hero__fact > .sppb-addon-content > :last-child,
.pf-day-hero .pf-day-hero__fact > .sppb-addon-wrapper > .sppb-addon-content > :last-child {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}