/* ================================
   Responsive – Breakpoint-Anpassungen für style.css

   Die Breakpoints entsprechen den Theme-Einstellungen
   (breakpoint_mobile, breakpoint_tablet, breakpoint_wrapper).
   CSS-Media-Queries können keine CSS-Variablen auswerten – die
   px-Werte hier müssen daher manuell zu den Theme-Einstellungen
   passend gehalten werden, falls sich deren Defaults ändern.

   Reihenfolge: vom größten zum kleinsten Breakpoint, damit
   schmalere Viewports bei gleichen Selektoren zuverlässig
   gewinnen (spätere Regel im Source überschreibt frühere).
================================= */

/* --------------------------------
   breakpoint_wrapper (default: 1440px)
-------------------------------- */
@media (max-width: 1440px) {
}

/* --------------------------------
   breakpoint_wrapper (default: 1280px)
-------------------------------- */
@media (max-width: 1280px) {
  .hero-layout-b {
    display: block;
    height: unset !important;
  }

  .hero-layout-b .hero-content {
    width: 100%;
    padding: 0;
  }
  .hero-layout-b .hero-image-wrapper {
    width: 75%;
    margin-top: 24px;
  }
  .hero-layout-b .hero-image-wrapper img {
    position: relative;
    left: unset;
    top: unset;
    transform: unset;
    height: unset;
    width: 100%;
  }

  /* Spalten-Block mit mehr als 4 Spalten (5+): :has() erkennt das 5.
     Spalten-Kind automatisch, ohne zusätzliche Klasse/Markup-Änderung im
     Editor. Ab hier auf 3 Spalten pro Zeile umbrechen, statt die
     Spalten über die normale flex-shrink-Logik immer schmaler werden zu
     lassen. !important nötig, weil (a) der Core-Spalten-Block bei manuell
     angepassten Spaltenbreiten flex-basis als Inline-Style ausgibt und
     (b) WordPress-Core ab 782px per @media mit !important flex-wrap:
     nowrap erzwingt (wp-block-library CSS) – ohne eigenes !important auf
     flex-wrap könnten die Spalten trotz passendem flex-basis gar nicht
     in eine neue Zeile umbrechen. */
  .wp-block-columns:has(> .wp-block-column:nth-child(5)) {
    flex-wrap: wrap !important;
  }
  .wp-block-columns:has(> .wp-block-column:nth-child(5)) > .wp-block-column {
    flex: 1 1 calc((100% - var(--space-small, 16px) * 1.5 * 2) / 3) !important;
  }
}

/* --------------------------------
   Eigener Breakpoint (kein ACF-Theme-Setting wie oben, nur für diese eine
   Komponente): Spalten-Block mit mehr als 4 Spalten wechselt ab hier von
   3 auf 2 Spalten pro Zeile, bevor bei breakpoint_tablet endgültig auf
   1 Spalte gestapelt wird.
-------------------------------- */
@media (max-width: 992px) {
  .wp-block-columns:has(> .wp-block-column:nth-child(5)) > .wp-block-column {
    flex: 1 1 calc((100% - var(--space-small, 16px) * 1.5) / 2) !important;
  }
}

/* --------------------------------
   breakpoint_tablet (default: 768px)
-------------------------------- */
@media (max-width: 768px) {
  .wp-block-columns {
    flex-direction: column;
  }
  /* Der breitenbasierte flex-basis-Wert aus den 1280px/992px-Regeln bliebe
     sonst aktiv und würde bei flex-direction: column als Höhen- statt
     Breiten-Vorgabe interpretiert (flex-basis bezieht sich immer auf die
     Hauptachse, die hier von horizontal auf vertikal wechselt). */
  .wp-block-columns:has(> .wp-block-column:nth-child(5)) > .wp-block-column {
    flex-basis: auto !important;
  }

  .wp-block-media-text {
    grid-template-columns: 1fr;
  }
  .wp-block-media-text__media,
  .wp-block-media-text__content {
    order: initial;
  }

  /* Header B: Desktop-Navigation + CTA-Button durch Burger-Menü ersetzen */
  .header-a-layout .main-navigation,
  .header-b-layout .main-navigation,
  .header-b-layout .header-cta {
    display: none;
  }
  .header-a-layout .header-left,
  .header-b-layout .header-left {
    display: block;
  }

  /* Überschriften & Abstände: proportional zum admin-konfigurierten Wert
     herunterskaliert (calc() statt fixer px, damit ACF-Einstellungen
     respektiert werden, statt sie zu überschreiben). */
  h1 { font-size: calc(var(--h1-font-size, 48px) * 0.75); margin-bottom: calc(var(--h1-margin-bottom, 32px) * 0.75); }
  h2 { font-size: calc(var(--h2-font-size, 38px) * 0.8); margin-bottom: calc(var(--h2-margin-bottom, 24px) * 0.75); }
  h3 { font-size: calc(var(--h3-font-size, 32px) * 0.85); margin-bottom: calc(var(--h3-margin-bottom, 16px) * 0.8); }
  h4 { font-size: calc(var(--h4-font-size, 26px) * 0.9); margin-bottom: calc(var(--h4-margin-bottom, 12px) * 0.85); }

  .space-base  { margin-bottom: calc(var(--space-base, 8px) * 0.85); }
  .space-small { margin-bottom: calc(var(--space-small, 16px) * 0.85); }
  .space-large { margin-bottom: calc(var(--space-large, 36px) * 0.75); }

  /* HERO A */
  .hero-layout-a .hero-title {
    font-size: calc(100px * 0.6);
    line-height: calc(110px * 0.6);
  }
  .hero-layout-a .hero-link {
    font-size: calc(26px * 0.85);
  }
  .hero-layout-a .hero-content {
    padding: 0 0 calc(var(--space-base, 8px) * 8 * 0.75) 0;
  }

  /* HERO B */
  .hero-layout-b .hero-content {
    font-size: calc(26px * 0.85);
    line-height: calc(36px * 0.85);
    padding: 0 calc(var(--space-base, 8px) * 8 * 0.75) 0 0;
  }
  .hero-layout-b .hero-title {
    font-size: calc(48px * 0.75);
    line-height: calc(54px * 0.75);
    margin: 0 0 calc(var(--space-base, 8px) * 3 * 0.85) 0;
  }
  .hero-layout-b .hero-link {
    font-size: calc(26px * 0.85);
    margin: calc(var(--space-base, 8px) * 3 * 0.85) 0 0 0;
  }

  /* HERO C */
  .hero-layout-c .hero-content {
    font-size: calc(26px * 0.85);
    line-height: calc(36px * 0.85);
    padding: 0 0 0 calc(var(--space-base, 8px) * 4 * 0.85);
  }
  .hero-layout-c .hero-title {
    font-size: calc(48px * 0.75);
    line-height: calc(54px * 0.75);
    margin: 0 0 calc(var(--space-base, 8px) * 3 * 0.85) 0;
  }
  .hero-layout-c .hero-link {
    font-size: calc(26px * 0.85);
    margin: calc(var(--space-base, 8px) * 3 * 0.85) 0 0 0;
  }

  /* HERO D (Slider) */
  .hero-layout-d .hero-slider-content {
    font-size: calc(26px * 0.85);
    line-height: calc(36px * 0.85);
  }
  .hero-layout-d .hero-slider-title {
    font-size: calc(70px * 0.65);
    line-height: calc(80px * 0.65);
    margin: 0 0 calc(var(--space-base, 8px) * 4 * 0.8) 0;
  }
  .hero-layout-d .hero-slider-link {
    font-size: calc(26px * 0.85);
    line-height: calc(36px * 0.85);
    margin: calc(var(--space-base, 8px) * 3 * 0.85) 0 0 0;
  }
  .swiper-thumbnails .hero-slider-folie .hero-slider-content {
    padding: calc(var(--space-base, 8px) * 6 * 0.75) calc(var(--space-base, 8px) * 4 * 0.75)
             calc(var(--space-base, 8px) * 6 * 0.75) calc(var(--space-base, 8px) * 4 * 0.75) !important;
  }
  .swiper-thumbnails .hero-slider-folie .hero-slider-title {
    font-size: calc(22px * 0.9) !important;
    line-height: calc(28px * 0.9) !important;
    margin-bottom: calc(var(--space-base, 8px) * 2 * 0.85) !important;
    padding-top: calc(var(--space-base, 8px) * 3 * 0.85) !important;
  }
  .swiper-thumbnails .hero-slider-folie .hero-slider-text {
    font-size: calc(18px * 0.9) !important;
    line-height: calc(24px * 0.9) !important;
  }

  /* HERO E */
  .hero-layout-e .hero-image-wrapper {
    height: auto;
    aspect-ratio: 2 / 1;
  }
  .hero-layout-e .hero-content {
    position: static;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0;
    background-color: transparent;
  }
  .hero-layout-e .hero-kicker {
    font-size: calc(48px * 0.75);
    line-height: calc(48px * 0.75);
  }
  .hero-layout-e .hero-title {
    font-size: calc(36px * 0.8);
    line-height: calc(48px * 0.8);
  }
  .hero-layout-e .hero-text {
    font-size: calc(26px * 0.9);
    line-height: calc(36px * 0.9);
  }
  .hero-layout-e .hero-link {
    font-size: calc(26px * 0.9);
    line-height: calc(36px * 0.9);
  }

  /* FOOTER */
  .footer-a .footer-top,
  .footer-b .footer-top,
  .footer-c .footer-top,
  .footer-a .footer-top .footer-sections,
  .footer-c .footer-top .footer-sections,
  .footer-b .footer-top .footer-sections {
    gap: calc(var(--space-base, 8px) * 2 * 0.85);
  }
  .footer-devider {
    margin: calc(var(--space-base, 8px) * 4 * 0.8) 0;
  }
  .footer-contact-info {
    margin-top: calc(var(--space-base, 8px) * 3 * 0.85);
  }
  .footer-c .footer-devider {
    margin: calc(var(--space-base, 8px) * 8 * 0.7) 0 calc(var(--space-base, 8px) * 2 * 0.85);
  }

  /* EVENTS A/B/C */
  .section-events .em-event-day {
    font-size: calc(42px * 0.75);
    line-height: calc(56px * 0.75);
  }
  .section-events .em-event-month {
    font-size: calc(16px * 0.95);
    line-height: calc(22px * 0.95);
    padding: calc(4px * 0.9) calc(20px * 0.85);
  }
  .section-events .em-event-time {
    font-size: calc(16px * 0.95);
    line-height: calc(22px * 0.95);
    margin: calc(8px * 0.85) 0 calc(12px * 0.85);
  }
  .section-events.layout-veranstaltungen_layout_a .em-item .em-item-image {
    margin: calc(var(--space-base, 8px) * 2 * 0.85) 0;
  }
  .section-events.layout-veranstaltungen_layout_a .em-item .em-item-content,
  .section-events.layout-veranstaltungen_layout_a .em-item .em-item-meta-time {
    padding: calc(var(--space-base, 8px) * 2 * 0.85);
  }
  .section-events.layout-veranstaltungen_layout_b .em-item .em-item-content,
  .section-events.layout-veranstaltungen_layout_c .em-item .em-item-content {
    padding-top: calc(var(--space-base, 8px) * 3 * 0.85);
  }
  .section-events.layout-veranstaltungen_layout_b .em-item .em-item-taxonomy,
  .section-events.layout-veranstaltungen_layout_b .em-item .em-event-location,
  .section-events.layout-veranstaltungen_layout_c .em-item .em-event-location {
    padding-bottom: calc(var(--space-base, 8px) * 3 * 0.85);
  }
  .section-events.layout-veranstaltungen_layout_c .em-events-list {
    gap: calc(var(--space-base, 8px) * 2 * 0.85);
  }

  /* NEWS C/D/E */
  .layout-news-c .news-item.is-highlight .news-content {
    padding: calc(var(--space-base, 8px) * 5 * 0.8);
  }
  .layout-news-d .inner-wrapper,
  .layout-news-e .inner-wrapper {
    gap: calc(var(--space-base, 8px) * 4 * 0.85);
  }
  .layout-news-d .news-item .news-content,
  .layout-news-e .news-item .news-content {
    padding: calc(var(--space-base, 8px) * 3 * 0.85);
  }
  .layout-news-e .news-item .news-content {
    padding: calc(var(--space-base, 8px) * 1.5 * 0.85) calc(var(--space-base, 8px) * 3 * 0.85);
  }

  /* SEITENKOPF: BILD NEBEN TITEL */
  /* Ab Tablet wird komplett linearisiert statt Bild+Text nebeneinander mit
     absoluter Positionierung: Headline, Subheadline, Teaser, Bild (100%
     Breite), danach endet die Farbfläche. Reihenfolge entspricht bereits der
     DOM-Reihenfolge (Text -> Teaser -> Bild), es muss nichts umsortiert
     werden – nur die Positionierung/Ausrichtung wird auf normalen Textfluss
     umgestellt. Der JS-Höhen-Fix erkennt das (position:static) und schaltet
     sich für diesen Bereich automatisch ab. */
  .entry-header--split .entry-header-row,
  .entry-header--split.is-bild-links .entry-header-row {
    display: block;
    margin-top: 0;
    padding: calc(var(--space-base, 8px) * 4) var(--space-small, 16px) 0;
  }
  .entry-header--split .entry-header-text,
  .entry-header--split.is-bild-links .entry-header-text {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: 100%;
    margin: 0 0 calc(var(--space-base, 8px) * 3) 0;
  }
  .entry-header--split .entry-header-teaser,
  .entry-header--split.is-bild-links .entry-header-teaser {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-width: 100%;
    margin: 0 0 calc(var(--space-base, 8px) * 4) 0;
  }
  .entry-header--split .entry-header-image {
    max-width: 100%;
    width: 100%;
    min-width: 0;
  }
  .entry-header-bg {
    height: 100%;
  }

  /* DOWNLOADS: Datei-Kürzel-Badge ab Tablet ausblenden (spart Breite);
     Grid muss dafür auf die verbleibenden 2 Spalten umgestellt werden,
     sonst rutscht .download-item__info in die schmale "auto"-Spalte. */
  .download-item {
    grid-template-columns: 1fr auto;
  }
  .download-item__badge {
    display: none;
  }
}

/* --------------------------------
   Eigener Breakpoint (kein ACF-Theme-Setting wie oben, nur für diese eine
   Komponente): Downloads-Liste linearisiert bereits ab 600px, weil
   Titel/Untertitel + Dateigröße/Button bei dieser Breite zweispaltig zu eng
   werden – unabhängig vom allgemeinen Tablet/Mobile-Breakpoint.
-------------------------------- */
@media (max-width: 600px) {
  .download-item {
    grid-template-columns: 1fr;
  }
  .download-item__meta {
    justify-content: space-between;
  }
}

/* --------------------------------
   breakpoint_mobile (default: 480px)
-------------------------------- */
@media (max-width: 480px) {
  h1 { font-size: calc(var(--h1-font-size, 48px) * 0.55); margin-bottom: calc(var(--h1-margin-bottom, 32px) * 0.6); }
  h2 { font-size: calc(var(--h2-font-size, 38px) * 0.6); margin-bottom: calc(var(--h2-margin-bottom, 24px) * 0.6); }
  h3 { font-size: calc(var(--h3-font-size, 32px) * 0.65); margin-bottom: calc(var(--h3-margin-bottom, 16px) * 0.65); }
  h4 { font-size: calc(var(--h4-font-size, 26px) * 0.75); margin-bottom: calc(var(--h4-margin-bottom, 12px) * 0.7); }

  .space-base  { margin-bottom: calc(var(--space-base, 8px) * 0.7); }
  .space-small { margin-bottom: calc(var(--space-small, 16px) * 0.7); }
  .space-large { margin-bottom: calc(var(--space-large, 36px) * 0.55); }

  /* HERO A */
  .hero-layout-a .hero-title {
    font-size: calc(100px * 0.4);
    line-height: calc(110px * 0.4);
  }
  .hero-layout-a .hero-link {
    font-size: calc(26px * 0.7);
  }
  .hero-layout-a .hero-content {
    padding: 0 0 calc(var(--space-base, 8px) * 8 * 0.55) 0;
  }

  /* HERO B */
  .hero-layout-b .hero-content {
    font-size: calc(26px * 0.7);
    line-height: calc(36px * 0.7);
    padding: 0 calc(var(--space-base, 8px) * 8 * 0.55) 0 0;
  }
  .hero-layout-b .hero-title {
    font-size: calc(48px * 0.55);
    line-height: calc(54px * 0.55);
    margin: 0 0 calc(var(--space-base, 8px) * 3 * 0.7) 0;
  }
  .hero-layout-b .hero-link {
    font-size: calc(26px * 0.7);
    margin: calc(var(--space-base, 8px) * 3 * 0.7) 0 0 0;
  }

  /* HERO C */
  .hero-layout-c .hero-content {
    font-size: calc(26px * 0.7);
    line-height: calc(36px * 0.7);
    padding: 0 0 0 calc(var(--space-base, 8px) * 4 * 0.7);
  }
  .hero-layout-c .hero-title {
    font-size: calc(48px * 0.55);
    line-height: calc(54px * 0.55);
    margin: 0 0 calc(var(--space-base, 8px) * 3 * 0.7) 0;
  }
  .hero-layout-c .hero-link {
    font-size: calc(26px * 0.7);
    margin: calc(var(--space-base, 8px) * 3 * 0.7) 0 0 0;
  }

  /* HERO D (Slider) */
  .hero-layout-d .hero-slider-content {
    font-size: calc(26px * 0.7);
    line-height: calc(36px * 0.7);
  }
  .hero-layout-d .hero-slider-title {
    font-size: calc(70px * 0.4);
    line-height: calc(80px * 0.4);
    margin: 0 0 calc(var(--space-base, 8px) * 4 * 0.6) 0;
  }
  .hero-layout-d .hero-slider-link {
    font-size: calc(26px * 0.7);
    line-height: calc(36px * 0.7);
    margin: calc(var(--space-base, 8px) * 3 * 0.7) 0 0 0;
  }
  .swiper-thumbnails .hero-slider-folie .hero-slider-content {
    padding: calc(var(--space-base, 8px) * 6 * 0.55) calc(var(--space-base, 8px) * 4 * 0.55)
             calc(var(--space-base, 8px) * 6 * 0.55) calc(var(--space-base, 8px) * 4 * 0.55) !important;
  }
  .swiper-thumbnails .hero-slider-folie .hero-slider-title {
    font-size: calc(22px * 0.8) !important;
    line-height: calc(28px * 0.8) !important;
    margin-bottom: calc(var(--space-base, 8px) * 2 * 0.7) !important;
    padding-top: calc(var(--space-base, 8px) * 3 * 0.7) !important;
  }
  .swiper-thumbnails .hero-slider-folie .hero-slider-text {
    font-size: calc(18px * 0.8) !important;
    line-height: calc(24px * 0.8) !important;
  }

  /* HERO E */
  .hero-layout-e .hero-content {
    padding: calc(var(--space-base, 8px) * 3);
  }
  .hero-layout-e .hero-kicker {
    font-size: calc(48px * 0.6);
    line-height: calc(48px * 0.6);
  }
  .hero-layout-e .hero-title {
    font-size: calc(36px * 0.65);
    line-height: calc(48px * 0.65);
  }
  .hero-layout-e .hero-text {
    font-size: calc(26px * 0.85);
    line-height: calc(36px * 0.85);
  }
  .hero-layout-e .hero-link {
    font-size: calc(26px * 0.85);
    line-height: calc(36px * 0.85);
  }

  /* FOOTER */
  .footer-a .footer-top,
  .footer-b .footer-top,
  .footer-c .footer-top,
  .footer-a .footer-top .footer-sections,
  .footer-c .footer-top .footer-sections,
  .footer-b .footer-top .footer-sections {
    gap: calc(var(--space-base, 8px) * 2 * 0.7);
  }
  .footer-devider {
    margin: calc(var(--space-base, 8px) * 4 * 0.6) 0;
  }
  .footer-contact-info {
    margin-top: calc(var(--space-base, 8px) * 3 * 0.7);
  }
  .footer-c .footer-devider {
    margin: calc(var(--space-base, 8px) * 8 * 0.5) 0 calc(var(--space-base, 8px) * 2 * 0.7);
  }

  /* EVENTS A/B/C */
  .section-events .em-event-day {
    font-size: calc(42px * 0.55);
    line-height: calc(56px * 0.55);
  }
  .section-events .em-event-month {
    font-size: calc(16px * 0.85);
    line-height: calc(22px * 0.85);
    padding: calc(4px * 0.8) calc(20px * 0.7);
  }
  .section-events .em-event-time {
    font-size: calc(16px * 0.85);
    line-height: calc(22px * 0.85);
    margin: calc(8px * 0.7) 0 calc(12px * 0.7);
  }
  .section-events.layout-veranstaltungen_layout_a .em-item .em-item-image {
    margin: calc(var(--space-base, 8px) * 2 * 0.7) 0;
  }
  .section-events.layout-veranstaltungen_layout_a .em-item .em-item-content,
  .section-events.layout-veranstaltungen_layout_a .em-item .em-item-meta-time {
    padding: calc(var(--space-base, 8px) * 2 * 0.7);
  }
  .section-events.layout-veranstaltungen_layout_b .em-item .em-item-content,
  .section-events.layout-veranstaltungen_layout_c .em-item .em-item-content {
    padding-top: calc(var(--space-base, 8px) * 3 * 0.7);
  }
  .section-events.layout-veranstaltungen_layout_b .em-item .em-item-taxonomy,
  .section-events.layout-veranstaltungen_layout_b .em-item .em-event-location,
  .section-events.layout-veranstaltungen_layout_c .em-item .em-event-location {
    padding-bottom: calc(var(--space-base, 8px) * 3 * 0.7);
  }
  .section-events.layout-veranstaltungen_layout_c .em-events-list {
    gap: calc(var(--space-base, 8px) * 2 * 0.7);
  }

  /* NEWS C/D/E */
  .layout-news-c .news-item.is-highlight .news-content {
    padding: calc(var(--space-base, 8px) * 5 * 0.6);
  }
  .layout-news-d .inner-wrapper,
  .layout-news-e .inner-wrapper {
    gap: calc(var(--space-base, 8px) * 4 * 0.65);
  }
  .layout-news-d .news-item .news-content,
  .layout-news-e .news-item .news-content {
    padding: calc(var(--space-base, 8px) * 3 * 0.65);
  }
  .layout-news-e .news-item .news-content {
    padding: calc(var(--space-base, 8px) * 1.5 * 0.65) calc(var(--space-base, 8px) * 3 * 0.65);
  }

  /* SEITENKOPF: BILD NEBEN TITEL — etwas engerer Abstand als bei Tablet */
  .entry-header--split .entry-header-row,
  .entry-header--split.is-bild-links .entry-header-row {
    padding: calc(var(--space-base, 8px) * 3) var(--space-small, 16px) 0;
  }
  .entry-header--split .entry-header-text,
  .entry-header--split.is-bild-links .entry-header-text {
    margin: 0 0 calc(var(--space-base, 8px) * 2) 0;
  }
  .entry-header--split .entry-header-teaser,
  .entry-header--split.is-bild-links .entry-header-teaser {
    margin: 0 0 calc(var(--space-base, 8px) * 3) 0;
  }

  /* DOWNLOADS: Button-Innenabstand vereinheitlichen, um auf schmalen
     Screens Platz zu sparen (statt 10px/32px). */
  .download-item__button {
    padding: 10px 14px;
  }
}