/* ==========================================================================
   GLOBAL STYLES — vchu theme
   Design tokens first (CSS custom properties), then base element/utility
   classes that consume them. Every template should pull from these tokens
   rather than hardcoding values, so the whole site stays consistent and
   changeable from one place.
   ========================================================================== */

@font-face {
  font-family: "VCHUHeadlines-Regular";
  src: url("../fonts/VCHUHeadlines-Regular.otf") format("opentype-variations");
  font-weight: 200 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CubronGroteskBookItalic";
  src: url("../fonts/CubronGroteskBookItalic/font.woff2") format("woff2-variations");
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CubronGroteskBook";
  src: url("../fonts/CubronGroteskBook/font.woff2") format("woff2-variations");
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CubronGroteskBold";
  src: url("../fonts/CubronGroteskBold/font.woff2") format("woff2-variations");
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "CubronGroteskBook";
  --font-body-bold: "CubronGroteskBold";  /* ASSUMPTION: used for .p-bold — confirm */
  --font-heading: "VCHUHeadlines-Regular";
  --font-zitat: "CubronGroteskBookItalic"; /* ASSUMPTION: used for .zitat instead of --font-heading — confirm */
}

/* --------------------------------------------------------------------------
   2. COLORS
   -------------------------------------------------------------------------- */

:root {
  --color-flieder: #daafff;
  --color-red: #f03326;
  --color-bordeaux: #470024;
  --color-white: #ffffff;
  --color-blue: #1e143d;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY TOKENS
   Values kept in px per the design spec, exposed as custom properties so
   every template/component references the token instead of raw numbers.
   -------------------------------------------------------------------------- */

:root {
  /* Body text */
  --text-p-size: 25px;
  --text-p-line-height: ;
  --text-p-weight: 200;

  /* Bold body text */
  --text-p-bold-size: 24px;
  --text-p-bold-line-height: 32px;
  --text-p-bold-weight: 400;

  /* H1 */
  --text-h1-size: 64px;
  --text-h1-line-height: 58px;
  --text-h1-weight: 400;

   /* H2 */
  --text-h2-size: 56px;
  --text-h2-line-height: 50px;
  --text-h2-weight: 400;

  /* Zitat / quote */
  --text-zitat-size: 56px;
  --text-zitat-line-height: 50px;
  --text-zitat-weight: 400;
  --text-zitat-style: italic;

  /* Menu text */
  --text-menu-size: 38px;
  --text-menu-line-height: 46px;
  --text-menu-weight: 350;

  /* Fixed rhythm: space between a heading, the text under it, and any
     button/CTA that follows. Applied consistently everywhere this pattern
     occurs, so it never has to be re-decided per template. */
  --space-stack: 30px;
}


@media (max-width: 768px){
  :root {
  /* Body text */
  --text-p-size: 18px;
  --text-p-line-height: ;
  --text-p-weight: 200;

  /* Bold body text */
  --text-p-bold-size: 16px;
  --text-p-bold-line-height: ;
  --text-p-bold-weight: 400;

  /* H1 */
  --text-h1-size: 42px;
  --text-h1-line-height: 36px;
  --text-h1-weight: 400;

   /* H2 */
  --text-h2-size: 35px;
  --text-h2-line-height: 32px;
  --text-h2-weight: 400;

  /* Zitat / quote */
  --text-zitat-size: 38px;
  --text-zitat-line-height: 32px;
  --text-zitat-weight: 400;
  --text-zitat-style: italic;

  /* Menu text */
  --text-menu-size: 26px;
  --text-menu-line-height: 32px;
  --text-menu-weight: 200;

  /* Fixed rhythm: space between a heading, the text under it, and any
     button/CTA that follows. Applied consistently everywhere this pattern
     occurs, so it never has to be re-decided per template. */
  --space-stack: 22px;

  --section-grid-columns: 1 !important;
  --section-height-repeat: 460px !important; 
  --section-height-narrow: 180px;
}
}


/* --------------------------------------------------------------------------
   4. SECTION / LAYOUT TOKENS
   -------------------------------------------------------------------------- */

:root {
  --section-height-repeat: 660px;  /* the section type that repeats down the page (desktop) */
  --section-height-narrow: 250px;  /* the taller, white, full-width section */

  --container-padding-inline: 80px; /* left/right padding inside a section's container */
  --container-padding-block: 100px; /* top/bottom padding inside a section's container */

  --section-grid-columns: 2;  /* the repeating section lays out 2 elements side by side */
  --section-grid-gap: 0px;    /* not specified yet — adjust once confirmed */

  /* Mobile fallbacks — not specified yet, sensible defaults, adjust once confirmed */
  --container-padding-inline-mobile: 24px;
  --container-padding-block-mobile: 64px;
  --container-padding-block-mobile-e: 40px;

}

/* --------------------------------------------------------------------------
   5. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  color: var(--color-white);
}

p {
  font-size: var(--text-p-size);
  line-height: var(--text-p-line-height);
  font-weight: var(--text-p-weight);
  font-family: var(--font-body);
  margin: 0 0 var(--space-stack) 0;
}

p.p-bold,
.p-bold {
  font-size: var(--text-p-bold-size);
  line-height: var(--text-p-bold-line-height);
  font-weight: var(--text-p-bold-weight);
  font-family: var(--font-body-bold);
  letter-spacing: 0.8px;
}

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--text-h1-weight);
  font-family: var(--font-heading);
  margin: 0 0 var(--space-stack) 0;
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--text-h2-weight);
  font-family: var(--font-heading);
  margin: 0 0 var(--space-stack) 0;
}

.zitat,
blockquote {
  font-size: var(--text-zitat-size);
  line-height: var(--text-zitat-line-height);
  font-weight: var(--text-zitat-weight);
  font-family: var(--font-heading);
  margin: 0 0 var(--space-stack) 0;
}

.menu-text,
nav a {
  font-size: var(--text-menu-size);
  line-height: var(--text-menu-line-height);
  font-weight: var(--text-menu-weight);
  font-family: var(--font-heading);
}

/* Buttons inherit the same fixed rhythm when stacked under a heading/text */
.btn {
  display: inline-block;
  margin-top: var(--space-stack);
}

/* Utility: enforces the heading → text → button rhythm wherever this
   wrapper is used, regardless of which elements are inside it. */
.stack > * + * {
  margin-top: var(--space-stack);
}

a {
  color: white;
}

/* --------------------------------------------------------------------------
   6. SECTIONS
   -------------------------------------------------------------------------- */

/* The repeating section type: full width, fixed height on desktop,
   laid out as a grid with 2 elements side by side. Each grid item holds
   its own .container (padding) with the actual content inside that. */
.section {
  width: 100%;
  min-height: var(--section-height-repeat);
  display: grid;
  grid-template-columns: repeat(var(--section-grid-columns), 1fr);
  gap: var(--section-grid-gap);
}

.section-fix {
  height: var(--section-height-repeat);
}

/* Each of the two grid items — the .container goes inside one of these.
   min-width/min-height: 0 override grid's default content-based minimum
   size, which otherwise lets a large image force its grid cell (and the
   whole section) taller/wider than the fixed track size. */
.section > * {
  min-width: 0;
  min-height: 0;
}

/* Hero: full viewport height, full width */
.section--hero {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Cover image inside a hero section (e.g. Veranstaltungen) — fills the
   section completely, cropping as needed, regardless of the image's
   native aspect ratio. */
.hero-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Narrow/white section: full width, taller fixed height, white background */
.section--narrow {
  width: 100%;
  height: var(--section-height-narrow);
  background-color: var(--color-white);
  align-content: center;
}

/* Carousel section: full width/height like the repeating section, but no
   grid of its own — each .carousel__card inside is its own 2-col grid.
   position:relative + overflow:hidden makes it the positioning context for
   the absolutely-positioned cards. */
.section--carousel {
  width: 100%;
  height: var(--section-height-repeat);
  position: relative;
  overflow: hidden;
}

/* Container: sits inside any section, applies the fixed padding rhythm */
.container {
  padding-inline: var(--container-padding-inline);
  padding-block: var(--container-padding-block);
}

.container-center{
  justify-content: center;
  display: flex;
}

/* Desktop/tablet only — below 768px the container keeps its normal mobile
   padding (the fixed header offset is handled in header.css). */
@media (min-width: 769px) {
  .extra-padding{
    padding-top: 150px;
  }
}

/* --------------------------------------------------------------------------
   7. COLOR UTILITIES
   Apply as classes on a .container (or any element) rather than inline
   styles, so backgrounds stay easy to find/change from one place.
   -------------------------------------------------------------------------- */

.bg-flieder  { background-color: var(--color-flieder); }
.bg-red      { background-color: var(--color-red); }
.bg-bordeaux { background-color: var(--color-bordeaux); }
.bg-bord     { background-color: var(--color-bordeaux); } /* alias — same as .bg-bordeaux */
.bg-white    { background-color: var(--color-white); }
.bg-blue     { background-color: var(--color-blue); }
.text-white  { color: var(--color-white); }

/* SVG button: icon + label, inline. Gap value is a placeholder — adjust
   once you have the actual button design. */
.btn--svg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn--svg img,
.btn--svg svg {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  position: relative;
  left: -5px;
}

button.btn {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.btn--svg.arrow{  
  transition: transform 0.6s ease;
}

.btn--svg.arrow_d{  
  transition: transform 0.6s ease;
}

.btn--svg.arrow:hover {
  transform: translateX(20px);
  transition: transform 0.3s ease;
}
.btn--svg.arrow_d:hover{
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

/* --------------------------------------------------------------------------
   9. MEMBER CAROUSEL (Home, Section 3)
   -------------------------------------------------------------------------- */

/* One carousel fills its .section--carousel completely */
.carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Each card is a full 2-col grid (zitat container + media container),
   stacked on top of each other; only .is-active is visible */
.carousel__card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--section-grid-columns), 1fr);
  gap: var(--section-grid-gap);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
  align-items: center;
}

.carousel__card.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Same grid min-size fix as .section > * — otherwise a tall member photo
   can force the card taller than the section. */
.carousel__card > * {
  min-width: 0;
  min-height: 0;
}

/* Image side of a carousel card — fills the entire half, no padding,
   unlike a normal .container. This is the "new container for the images"
   referenced in the request. */
.container--media {
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.container--media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dot navigation */
.carousel__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 2;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-white);
  opacity: 0.4;
  border: none;
  cursor: pointer;
  padding: 0;
  display: none; 
}

.carousel__dot.is-active {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   10. EVENT EXPAND/COLLAPSE (Veranstaltungen, Section 2)
   Uses the existing .section (fixed height, 2-col grid) as its base —
   .event-section only adds the expanded-state override. The image and the
   details block are both in the DOM at all times; only one shows, toggled
   by event-toggle.js adding/removing .is-expanded. Desktop/tablet only —
   see below for the phone-only single-container variant.
   -------------------------------------------------------------------------- */

.event-section.is-expanded {
  height: auto; /* section grows to fit the details content */
}

.event-media {
  display: block;
}

.event-section.is-expanded .event-media {
  display: none;
}

.event-details {
  display: none;
  font-size: var(--text-p-size);
  line-height: var(--text-p-line-height);
  font-weight: var(--text-p-weight);
  font-family: var(--font-body);
  margin: 0 0 var(--space-stack) 0;
}

.event-section.is-expanded .event-details {
  display: block;
}

/* Block-editor content inside event text/details — lists, headings, spacing */
.event-text ul,
.event-details ul {
  list-style: disc;
  padding-left: 1.4em;
  margin: 0 0 var(--space-stack) 0;
}
.event-text ol,
.event-details ol {
  list-style: decimal;
  padding-left: 1.4em;
  margin: 0 0 var(--space-stack) 0;
}
.event-text li,
.event-details li {
  margin-bottom: 0.3em;
}
.event-details p,
.event-details h2,
.event-details h3,
.event-details h4 {
  margin: 0 0 var(--space-stack) 0;
}
.event-details > :last-child {
  margin-bottom: 0;
}

/* Phone-only variant (event-mobile-only): single stacked container —
   image, then main text, then the toggle button trailing last. The image
   always stays visible here (not swapped for the details like desktop);
   .event-details instead appears between the text and the button, pushing
   the button down the page — same trailing-button pattern as the
   older-event cards below. No fixed-height grid cell to fill anymore, so
   the image gets its own explicit height. */
.event-mobile-media {
  width: 100%;
  height: var(--section-height-repeat);
  overflow: hidden;
}

.event-mobile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-details1{
   padding-inline: var(--container-padding-inline-mobile);
}
.event-button1{
  padding-inline: var(--container-padding-inline-mobile);
  padding-bottom: var(--space-stack);
}

/* Toggle button: rotate the plus into an "x" when expanded, swap label */
.event-toggle img {
  transition: transform 0.3s ease;
}

.event-toggle.is-expanded img {
  transform: rotate(45deg);
}

.event-toggle-label-less {
  display: none;
}

.event-toggle.is-expanded .event-toggle-label-more {
  display: none;
}

.event-toggle.is-expanded .event-toggle-label-less {
  display: inline;
}



/* Desktop/tablet vs. phone-only show/hide for Section 2's two variants —
   same pattern as .verband-desktop-tablet-only / .verband-mobile-only.
   !important because these are one-purpose show/hide utilities that must
   win regardless of whatever other display rules (grid, etc.) apply to
   the same element at other widths. */
.event-mobile-only {
  display: none;
}

/* Latest event switches to the single merged container + dropdown already
   at 1140px (not 768px like the rest of the page). */
@media (max-width: 1140px) {
  .event-desktop-tablet-only {
    display: none !important;
  }

  .event-mobile-only {
    display: block !important;
  }

  .container--last-event {
    padding-inline: var(--container-padding-inline-mobile);
    padding-block: var(--container-padding-block-mobile-e);
  }
}

/* --------------------------------------------------------------------------
   11. OLDER EVENTS LIST (Veranstaltungen, Section 3+)
   Pairs of events, 2 per row. Unlike .section, height is auto (not fixed)
   since either card can independently expand — align-items: start keeps
   each column at its own natural height instead of stretching to match a
   taller sibling.
   -------------------------------------------------------------------------- */

.section--event-pair {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(var(--section-grid-columns), 1fr);
  gap: var(--section-grid-gap);
  align-items: stretch; /* both cards in a row always share the taller card's height */
}

.section--event-pair > * {
  min-width: 0;
  min-height: 0;
}

/* Card = column, so the plus button sits at the bottom of every card and
   buttons line up across a row, however long each text is. The extra
   space goes into the last content block (text, or details when open),
   so the button keeps its normal spacing above it. */
.event-card {
  display: flex;
  flex-direction: column;
}
.event-card > .stack {
  flex-grow: 1;
}
.event-card.is-expanded > .stack {
  flex-grow: 0;
}
.event-card.is-expanded > .event-details {
  flex-grow: 1;
}
.event-card > .event-toggle {
  align-self: flex-start; /* don't stretch the button to full width */
}

/* Hidden rows, revealed by the Load more button (event-load-more.js) */
.event-list__row.is-hidden {
  display: none;
}

/* Individual card (no image — just text). Its own expand/collapse scope,
   independent from any sibling card in the same row. */
.event-card .event-details {
  display: none;
  height: var(--section-height-repeat);
}

.event-card.is-expanded .event-details {
  display: block;
  height: auto;
}

/* --------------------------------------------------------------------------
   13. VERBAND PAGE
   -------------------------------------------------------------------------- */
.section--verband-1{
  min-height: 70vh;

}
/* Section 2 — red-dot bullet list (adjust size/color to match nav dot
   once I can see header.css) */
.list--dot {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list--dot li {
position: relative;
  padding-left: 58px;
  margin-bottom: 54px;
  font-size: var(--text-p-size);
}

.list--dot li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-red);
}

.stack2{
  display: grid;
  gap: 3rem;
}


/* Section 3 — werde teil der VCHU */

.list-verband-3{
  list-style: decimal;
  font-size: var(--text-p-size);
}

.list-verband-3 li{
  line-height: var(--text-p-line-height);
  margin: 0 0 var(--space-stack) 0;
  list-style: decimal;
}

/* Section 4 — download links list */
.list--downloads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 8rem;
  padding-top: var(--space-stack);
}
.list--downloads li {
  margin-bottom: 12px;
}
.list--downloads a {
  color: var(--color-white);
  text-decoration: none;
  font-size: var(--text-p-size);
}

/*smaller icon variant for download links */
.list--downloads .btn--svg {
  gap: 15px;
  display: flex;
  flex-direction: column;
}
.list--downloads .btn--svg img {
  width: 75px;
  height: 75px;
  left: 0;
  transform: rotate(90deg);
}

/* Section 6 — member info dropdown */
.verband-dropdown {
  width: 100%;
  font-size: var(--text-p-size);
}

.verband-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 24px 0;
}
.verband-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.verband-row__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
}

.verband-row__heading {
  display: flex;
  flex-direction: column;
}

.verband-row__name {
  font-style: italic;
}

.verband-row__icon--close {
  display: none;
}
.verband-row.is-expanded .verband-row__icon--chevron {
  display: none;
}
.verband-row.is-expanded .verband-row__icon--close {
  display: block;
}

.verband-row__info {
  display: none;
}
.verband-row.is-expanded .verband-row__info {
  display: block;
}

/* Mobile dropdown toggle (Sections 2 + 3) — hidden on desktop, the
   collapsed content it controls (.mobile-collapsible) always shows there.
   Icon-only button (.btn.btn--svg handles sizing/reset), same rotate-the-
   plus-into-an-"x" animation as .event-toggle (Veranstaltungen). Show/hide
   across breakpoints is overridden in section 14 below. */
.verband-mobile-toggle {
  display: none;
}

.verband-mobile-toggle img {
  transition: transform 0.3s ease;
}
.verband-mobile-toggle.is-expanded img {
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   14. VERBAND MOBILE OVERRIDES (append inside the existing section 12
   @media (max-width: 768px) block, or as its own block — either works
   since single-class specificity + later source order wins either way)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* Section 2 + 3 dropdowns: show the toggle, hide the content it
     controls until the section it sits in is marked .is-expanded
     (toggled by verband-mobile-toggle.js). Phone-only: from 769px up to
     1110px the columns are already stacked (see the 1110px block below),
     but the dropdown content just shows in full, no toggle. */
  .verband-mobile-toggle {
    display: inline-flex;
  }

  .mobile-collapsible {
    display: none;
  }
  .section--verband-2.is-expanded .mobile-collapsible,
  .section--verband-3.is-expanded .mobile-collapsible {
    display: block;
  }

    .container.container--merge-next {
    padding-block-end: 0;
  }
  .container.container--merge-prev {
    padding-block-start: 0;
  }
}

/* Columns stack + containers reorder from 1110px down — this covers both
   tablet and phone widths. The dropdown collapsing above is phone-only
   (768px), so between 769–1110px a dropdown pair's content all shows at
   once, just stacked. */
@media (max-width: 1110px) {
  .verband-mobile-order-1 { order: 1; }
  .verband-mobile-order-2 { order: 2; }
  .verband-mobile-order-3 { order: 3; }
  .verband-mobile-order-4 { order: 4; }
  .verband-mobile-order-5 { order: 5; }
  .verband-mobile-order-6 { order: 6; }
  .verband-mobile-order-7 { order: 7; }
  .verband-mobile-order-8 { order: 8; }

  /* Sections 3–6 share one grid so each container can be given its own
     position, independent of source order (see .verband-mobile-grid
     wrapper in page-verband.php). Section 3 stays one grid item
     (order 2); sections 4–6 use display:contents so their two
     containers become independent items, each with its own order. */
  .verband-mobile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--section-grid-gap);
  }

  .verband-mobile-contents {
    display: contents;
  }

  .container.container--merge-next {
    padding-block-end: 60px;
  }
    .container.container--merge-next-t {
    padding-block-end: 0px;
  }
    .container.container--merge-prev {
    padding-block-start: 0;
  }

}

/* Sections 2, 3 + 6 render twice in the markup: the desktop/tablet
   two-container version above, and a phone-only single-container version
   with the same content (see page-verband.php). Splitting padding across
   two stacked grid items never quite reads as one block on the phone, so
   below 768px we swap to a single container instead — one set of padding,
   one dropdown, no seam to fix. Tablet (769–1110px) keeps the two-container
   version from above. !important because these are one-purpose show/hide
   utilities that must win regardless of whatever other display rules
   (grid, display:contents) apply to the same element at other widths. */
.verband-mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .verband-desktop-tablet-only {
    display: none !important;
  }

  .verband-mobile-only {
    display: block !important;
  }

  /* Anchor targets (e.g. #mitglied-mobile) land below the fixed header */
  .verband-mobile-only[id] {
    scroll-margin-top: 60px;
  }
}

/* Section 7 on Verband: a lone .container--media with no sibling to form a
   grid row alongside it, so its `height: 100%` has nothing to resolve
   against once .verband-mobile-only forces the section to display:block.
   Explicit height instead — same fix as .event-mobile-media. */
.verband-mobile-only .container--media {
  height: var(--section-height-repeat);
}

/* --------------------------------------------------------------------------
   15. kontakt PAGE
   -------------------------------------------------------------------------- */

   .list--contact{
    list-style: none;
    font-size: var(--text-p-size);
    padding: 0;
   }

   /* --------------------------------------------------------------------------
   16. Firmen PAGE
   -------------------------------------------------------------------------- */



.firmen-cell {
    position: relative;
}

.firmen-cell--circles {
    overflow: hidden; /* keep scattered circles strictly inside this container */
}


.firmen-bullets {
    list-style: none;
    margin-top: 24px;
    padding: 0;
}

.firmen-bullets li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 12px;
    font-size: var(--text-p-size);
}

.firmen-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--flieder, #daafff);
}

.firmen-cell__title {
    position: relative;
    z-index: 10; /* always stays above scattered circles */
}

.circle-scatter {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;  /* fallback until circle-jitter.js sizes/positions it via inline styles */
    height: 150px;
    overflow: hidden; /* keep logo images from ever overflowing the circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease-out;
    will-change: transform;
}

.circle--logo img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

/* contrast colors per container */
.circle--red    { background: #f03326; }
.circle--flieder{ background: #daafff; }
.circle--bord   { background: #470024; }

.firmen-load-more {
    position: absolute;
    bottom: 40px;
    right: 80px;
    z-index: 10;
}

@media (max-width: 768px) {
    .firmen-grid {
        grid-template-columns: 1fr;
        height: auto;
    }
    .firmen-cell {
        height: 500px;
        padding: 40px;
    }
}

@media (max-width: 1110px){
  .section {
    grid-template-columns: 1fr; /* stack the two grid elements on mobile */
  }

  .mobile-bg-flieder{
    background: #daafff;
  }
  .mobile-bg-red{
    background: var(--color-red);
  }
  .mobile-bg-bord{
    background: var(--color-bordeaux);
  }

  /* Firmen: mobile circle colors follow the swapped container backgrounds */
  .mobile-circles--flieder .circle { background: var(--color-flieder); }
  .mobile-circles--red .circle     { background: var(--color-red); }
  .mobile-circles--bord .circle    { background: var(--color-bordeaux); }

  /* Firmen text cell turns flieder — bullets go red so they stay visible */
  .mobile-bg-flieder .firmen-bullets li::before { background-color: var(--color-red); }
  .stack2{
  display: grid;
  gap: 0;
}
.list--dot li::before{
  width: 15px;
  height: 15px;
}
.list--dot li {
  padding-left: 32px;
}

}

/* --------------------------------------------------------------------------
   12. RESPONSIVE (mobile defaults — confirm exact breakpoint/values later)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .section,
  .section--narrow {
    min-height: auto; /* fixed heights assumed desktop-only per spec */
  }
  .section--hero {
    height: 95vh;
  }
  .veranstaltungen--hero{
    display: none;
  }

  /* .container--last-event padding moved to the 1140px event block above */

  /* Column stacking itself already happens at 1110px (see section 14) */

  .container {
    padding-inline: var(--container-padding-inline-mobile);
    padding-block: var(--container-padding-block-mobile);
  }
  .container--media {
  padding: 0;
  height: 100%;
  overflow: hidden;
  min-height: var(--section-height-repeat);
}

/* Member carousel: on desktop every card is absolutely positioned and
   stretched to exactly fill a fixed-height box, so inactive cards can
   overlap without adding height — the crossfade depends on that fixed
   box. Once the grid collapses to one column, the zitat text has to
   stack under the image inside that same fixed, overflow-hidden box;
   the image alone already claims the box's full height (see
   .container--media above), leaving zero room for the text, which gets
   pushed past the bottom and clipped away. Below 768px, drop the
   overlay: only .is-active stays in flow, and the section grows to fit
   whichever card is showing — text and image both stay visible. */
.section--carousel {
  height: auto;
}
.carousel {
  height: auto;
  padding-bottom: 48px; /* room for .carousel__dots so it doesn't sit over the text */
}
.carousel__card {
  position: relative;
  inset: auto;
  display: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.carousel__card.is-active {
  display: grid;
}
.carousel__card .container--media {
  height: var(--section-height-repeat);
  min-height: var(--section-height-repeat);
}

.mobile-collapsible hl{
  display: none;
}

.btn--svg img, .btn--svg svg{
  width: 50px;
  height: 50px;
  left: -6px;
}
.btn{
  margin:0;
}
.button.btn{
  margin-left: -10px;
}
.btn-wrapper{
  padding-block: 2rem;
}
.firmen-bullets li::before {
    width: 15px;
    height: 15px;
    background-color: var(--color-red);
}
.firmen-bullets li {
  padding-left: 30px;
}
.verband-row{
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: none;
}
.verband-row:last-child{
  border-bottom: none;
}

/* containers that were left, now goes second, and the other way around */
  .left{
    order: 2;
  }
  .right{
    order: 1;
  }
  .not-kursiv{
    font-style: normal !important;
  }

  .no-padding-b{
    padding-bottom: 0;
    margin-bottom: -40px;
  }
    .extra-padding-b{
    padding-bottom: 30px;
  }

  .container-events-mobile{
  padding-inline: var(--container-padding-inline-mobile);
    padding-block: var(--container-padding-block-mobile-e);
}
}