/* ============================================================
   DBA Deutsche Bauwert AG — Main Stylesheet
   ============================================================ */
@font-face {
  font-family: 'Klavika-Light';
  src: url('../fonts/Klavika-Light.eot?#iefix') format('embedded-opentype'),  
    url('../fonts/Klavika-Light.otf')  format('opentype'),
       url('../fonts/Klavika-Light.woff') format('woff'), 
     url('../fonts/Klavika-Light.ttf')  format('truetype'), 
     url('../fonts/Klavika-Light.svg#Klavika-Light') format('svg');
  font-weight: lighter;
}

@font-face {
    font-family: 'Klavika-Light-Italic';
    src: url('../fonts/klavika-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/klavika-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Klavika-Regular-Italic';
    src: url('../fonts/klavika-regularitalic-webfont.woff2') format('woff2'),
         url('../fonts/klavika-regularitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: 'Klavika-Bold';
   src: url('../fonts/klavika-bold-webfont.woff2') format('woff2'),
         url('../fonts/klavika-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Klavika-Medium';
    src: url('../fonts/klavika-medium-webfont.woff2') format('woff2'),
         url('../fonts/klavika-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Klavika-Regular';
    src: url('../fonts/klavika-regular-webfont.woff2') format('woff2'),
         url('../fonts/klavika-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/sourcesanspro-light-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro-light-webfont.woff') format('woff'),
         url('../fonts/sourcesanspro-light-webfont.ttf') format('truetype'),
         url('../fonts/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'source_sans_prosemibold';
    src: url('../fonts/sourcesanspro-semibold-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro-semibold-webfont.woff') format('woff'),
         url('../fonts/sourcesanspro-semibold-webfont.ttf') format('truetype'),
         url('../fonts/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'source_sans_proregular';
    src: url('../fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
         url('../fonts/sourcesanspro-regular-webfont.woff') format('woff'),
         url('../fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('../fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ── 1. DESIGN TOKENS ───────────────────────────────────────── */
:root {
  --purple:          #7B5EA7;
  --purple-hover:    #6a4e96;
  --purple-muted:    #8f88b8;
  --purple-light:    rgba(123, 94, 167, 0.12);

  --dark:            #1e2028;
  --bodycolor:       #5C5E5F;
  --footer-grey:     #909ba5;
  --gray-800:        #3f4252;
  --gray-700:        #4a5568;
  --gray-400:        #9ca3af;
  --gray-200:        #e5e7eb;
  --gray-100:        #f3f4f6;
  --gray-50:         #f9fafb;
  --white:           #ffffff;

  --overlay-dark:    rgba(22, 24, 32, 0.72);
  --overlay-card:    rgba(45, 47, 61, 0.82);

  --font:            'source_sans_proregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease:            0.3s ease;
  --ease-slow:       0.5s ease;

  --radius:          0;
  --container:       1280px;
  --gap:             clamp(1.5rem, 3vw, 2.5rem);

  --header-h:        87px;
}

/* ── 2. RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bodycolor);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
address { font-style: normal; }
svg { display: block; }

/* ── 3. BASE TYPOGRAPHY ─────────────────────────────────────── */
h1, h2, h3, h4, h5 { line-height: 1.2; font-weight: 700; color: var(--dark); }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-family: 'Klavika-Light';}
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-family: 'Klavika-Light';}
h4 { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; font-family: 'Klavika-Light';}
p  { margin-bottom: 0.5rem; }
p:last-child { margin-bottom: 0; }

/* ── 4. LAYOUT ──────────────────────────────────────────────── */
.container, .wp-block-columns {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.site-main { padding-top: var(--header-h); }

/* ── 5. BUTTONS — alle einheitlich grau (wie "ALLE NEWS") ──────── */
.btn {
  display: inline-block;
  padding: 0.5rem 1.75rem;
  font-size: 14px;
  font-family: 'Klavika-Regular';
  font-weight: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  background: #808c9a;
  color: var(--white);
  border: none;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
/* Hover: nur Hintergrundwechsel (kein Font-Swap → kein 1px-Sprung) */
.btn:hover { background: #3d7080; color: var(--white); }

/* alle Varianten-Klassen auf denselben grauen Style vereinheitlichen */
.btn--dark,
.btn--purple,
.btn--outline,
.btn--outline-light,
.btn--grey {
  background: #808c9a;
  color: var(--white);
  border: none;
}
.btn--dark:hover,
.btn--purple:hover,
.btn--outline:hover,
.btn--outline-light:hover,
.btn--grey:hover {
  background: #3d7080;
  color: var(--white);
}

.text-accent { color: var(--purple); }

/* ── 5b. COMPOSABLE BLOCKS ──────────────────────────────────── */

/* lazyblock-button wrapper — full-width in column context */
.dba-btn-wrap { display: block; margin-bottom: 0.5rem; }
.dba-btn-wrap:last-child { margin-bottom: 0; }
.dba-btn-wrap .btn { display: inline-block; width: 100%; text-align: center; }

/* Intro-Buttons in einer Reihe: Media+Button-Gruppe jeder Spalte an die Unterkante,
   Bild und Button bleiben ZUSAMMEN. Gescoped auf die Intro-Columns (55%-Textspalte). */
.wp-block-columns:has(> .wp-block-column[style*="55%"]) > .wp-block-column {
  display: flex;
  flex-direction: column;
}
/* Standard: letztes Element (Button-Absatz bzw. Film-Block) dockt unten an */
.wp-block-columns:has(> .wp-block-column[style*="55%"]) > .wp-block-column > *:last-child { margin-top: auto; }
/* Broschüren-Spalte (figure + button): Bild UND Button als Einheit nach unten —
   margin-top:auto auf die figure, Button klebt direkt drunter */
.wp-block-columns:has(> .wp-block-column[style*="55%"]) > .wp-block-column:has(> .dba-btn-wrap) > figure { margin-top: auto; }
.wp-block-columns:has(> .wp-block-column[style*="55%"]) > .wp-block-column:has(> .dba-btn-wrap) > .dba-btn-wrap { margin-top: 0; }
/* Textspalte: "WIR SCHAFFEN WOHNRAUM" + Button unten bündig nebeneinander */
.wp-block-columns:has(> .wp-block-column[style*="55%"]) .wp-block-column p:has(> .btn) {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0;
  font-family: 'Klavika-Medium';   /* "WIR SCHAFFEN WOHNRAUM" etwas fetter (Button behält Klavika-Regular) */
}
/* Bild-Buttons sind 100% ihrer Spalte → schrumpfen mit den Bildern.
   MEHR ÜBER UNS: schrumpfbar (flex-basis) statt fix, Rest-Margin weg. */
.wp-block-columns:has(> .wp-block-column[style*="55%"]) .wp-block-column p:has(> .btn) .btn { margin: 0; flex: 0 1 226px; text-align: center; }

/* Früherer Umbruch: bevor die Buttons zu schmal werden (Text bräche um),
   Textbox voll oben, die beiden Bild-Elemente nebeneinander darunter. */
@media (min-width: 782px) and (max-width: 1200px) {
  .wp-block-columns:has(> .wp-block-column[style*="55%"]) { flex-wrap: wrap !important; }
  .wp-block-columns:has(> .wp-block-column[style*="55%"]) > .wp-block-column[style*="55%"] { flex: 0 0 100% !important; }
  .wp-block-columns:has(> .wp-block-column[style*="55%"]) > .wp-block-column:not([style*="55%"]) { flex: 1 1 40% !important; }
}

/* lazyblock-image-button */
.image-cta-block { display: flex; flex-direction: column; }
.image-cta-block__figure { margin: 0 0 0.75rem; overflow: hidden; }
.image-cta-block__figure img { width: 100%; height: auto; display: block; }
.image-cta-block .btn { display: block; text-align: center; }

/* lazyblock-image-video */
.image-video-block { display: flex; flex-direction: column; }
.image-video-block__link { display: block; text-decoration: none; color: inherit; }
.image-video-block__figure {
  position: relative;
  margin: 0 0 0.75rem;
  overflow: hidden;
}
.image-video-block__figure img { width: 100%; height: auto; display: block; }
.image-video-block__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  transition: transform var(--ease);
}
.image-video-block__link:hover .image-video-block__play { transform: translate(-50%, -50%) scale(1.08); }
.image-video-block__play img { width: 56px; height: 56px; object-fit: contain; display: block; }
.image-video-block .btn { display: block; text-align: center; }


/* WP native columns — theme integration */
.wp-block-columns {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  margin-top: 2rem;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.wp-block-column { min-width: 0; }
/* When a WP group uses class section-intro, keep existing padding */
.wp-block-group.section-intro { padding: 2rem 0 clamp(3rem, 6vw, 5rem); }
/* Body text inside columns */
.wp-block-column p { font-size: 1rem; line-height: 1.7; }

/* ── 6. SECTION HEADER ──────────────────────────────────────── */
/* Flex row: heading on left, optional "Alle …" button on right */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.section-header .dba-section-header__heading { margin: 0; }
.section-header__link { flex-shrink: 0; } /* Schrift = .btn (14px), wie Referenz „ALLE NEWS" */

/* ── GEWERBEPROJEKTE section ────────────────────────────────── */
.section-gewerbe { padding: clamp(3rem, 6vw, 5rem) 0; }

.section-gewerbe__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}
.section-gewerbe__heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dark);
  margin-top: 0.5rem;
}
.section-gewerbe__body {
  color: var(--gray-700);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.section-gewerbe__body p { margin-bottom: 0.75rem; }
.section-gewerbe__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple);
  text-decoration: none;
  transition: gap 0.2s ease;
}
.section-gewerbe__link:hover { gap: 0.75rem; }

.section-gewerbe__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .section-gewerbe__header { grid-template-columns: 1fr; gap: 1.5rem; }
  .section-gewerbe__grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .section-gewerbe__grid { grid-template-columns: 1fr; }
}

/* ── 7. SITE HEADER ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(110, 120, 129, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 1;
}

.site-header__logo { flex-shrink: 0; display: flex; align-items: center; }
/* Always white: logo works against both transparent overlay and solid dark */
.site-header__logo .custom-logo { display: block; height: 57px; width: auto; filter: brightness(0) invert(1); }

.site-header__logo-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--white);
}
.site-header__logo-icon { flex-shrink: 0; }
.site-header__logo-icon svg { filter: brightness(0) invert(1); }
.site-header__logo-name {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.site-header__logo-name strong { font-weight: 700; font-size: 1.125rem; display: block; }

/* ── 8. NAVIGATION ──────────────────────────────────────────── */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.site-nav__item { position: relative; }
.site-nav__link {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  letter-spacing: 0.075em;
  font-family: 'Klavika-Regular';
  text-transform: uppercase;
  color: var(--white);
  transition: color var(--ease), opacity var(--ease);
  position: relative;
}

.site-nav__item:not(.site-nav__sub-item).is-active > .site-nav__link,
.site-nav__item:not(.site-nav__sub-item):hover > .site-nav__link {
  font-family: 'Klavika-Regular-Italic';
  opacity: 1;
  /* Kursiv-Schnitt sitzt 1px höher als Regular → 1px runter kompensieren, kein Sprung.
     :not(.site-nav__sub-item) → gilt NUR für die Top-Nav, nicht fürs Dropdown (14px, braucht keine Kompensation). */
  transform: translateY(1px);
}

/* Dropdown */
.site-nav__dropdown {
  position: absolute;
  top: 100%; left: 0;
  min-width: 200px;
  padding: 0.5rem 0;
  background: #cecece;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  color: var(--bodycolor);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
  z-index: 10;
}
.site-nav__item.has-dropdown:hover .site-nav__dropdown,
.site-nav__item.has-dropdown:focus-within .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav__dropdown .site-nav__link {
  padding: 0.28rem 1.25rem;
  font-size: 0.875rem;
  letter-spacing: 0.017em;
  font-family: 'Klavika-Regular';
  white-space: nowrap;
}
.site-nav__dropdown .site-nav__link::after { display: none; }

.site-nav__dropdown .site-nav__link:hover, .site-nav__sub-item.is-active .site-nav__link{
  font-family: 'Klavika-Regular-Italic';
}
.site-nav__sub-item .site-nav__link{
  color: var(--bodycolor);
}

/* Mobile toggle */
.site-header__mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 28px;
  height: 20px;
  padding: 0;
}
.site-header__mobile-toggle span {
  display: block;
  height: 2px;
  background: var(--white);
  transition: transform var(--ease), opacity var(--ease);
}
.site-header__mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.site-header__mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ── 9. HERO ────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 80vh;
  min-height: 520px;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h)); /* pull behind fixed header */
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img,
.hero__bg .hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__bg--placeholder { background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-400) 100%); }
.hero__overlay { position: absolute; inset: 0; background: var(--overlay-dark); opacity: 0.3; }

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ── 10. INTRO SECTION ──────────────────────────────────────── */
.section-intro {
  padding: 2rem 0 clamp(3rem, 6vw, 5rem);
  background: var(--white);
}
.section-intro__inner { max-width: 100%; }
/* heading inside intro-text reuses dba-section-header__heading, just adds spacing */
.section-intro__heading { margin-top: 0; margin-bottom: 2rem; }
/* Body layout: two or three columns */
.section-intro__columns { display: block; margin-top: 40px; font-size: 18px; }
.section-intro__columns--two,
.section-intro__columns--three {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  
}
@media (min-width: 768px) {
  .section-intro__col__one{
    margin-left: 20%;
  }
}
.section-intro__columns--two   { grid-template-columns: 1fr 1fr; }
.section-intro__columns--three { grid-template-columns: 1fr 1fr auto; align-items: start; }
.section-intro__col--action {
  align-self: end;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 0.25rem;
}
.section-intro__body { color: var(--gray-700); line-height: 1.75; margin-bottom: 1.5rem; }
.section-intro__body p { margin-bottom: 0.875rem; }

@media (max-width: 768px) {
  .section-intro__columns--two,
  .section-intro__columns--three { grid-template-columns: 1fr; }
  .section-intro__col--action { justify-content: flex-start; }
}

/* ── 11. STATS ──────────────────────────────────────────────── */
/* ── 11. STATS SECTION — half-background band pattern ──────── */
.section-stats {
  padding-top: clamp(4rem, 8vw, 7rem);
  background: var(--white);
}
.section-stats__band {
  position: relative;
  width: 100%;
  padding-bottom: 78px;
}
/* Coloured band — startet in der Mitte der Icons (~35px) und endet kurz unter den
   Labels; darunter weißer Abstand (bottom-Offset) vor der News-Sektion. */
.section-stats__band-bg {
  position: absolute;
  top: 35px;
  left: 0; right: 0; bottom: 46px;
  background: #d9e5ec;
  z-index: 0;
}
.section-stats__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
}
/* feste Höhe + Icons vertikal zentriert → alle Headlines darunter auf einer Linie,
   unabhängig von der Icon-Höhe (WOHNRAUM ist kleiner) */
.stats-item__icon {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.stats-item__icon img {
  width: auto;
  height: 70px;
  object-fit: contain;
  display: block;
}
/* WOHNRAUM-Icon wirkt bei gleicher Höhe zu groß → 25% kleiner (70px → 52.5px) */
.stats-item__icon img[src*="Wohnraum-icon"] { height: 52.5px; }
.stats-item__category {
  font-size: 14px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #437183;
  margin-bottom: 0.4rem;
}
.stats-item__label {
  font-family: 'Klavika-Light';
  font-size: 18px;
  color: var(--bodycolor);
  line-height: 1.45;
}
/* führende Zahl in der Kennzahl etwas fetter hervorheben (Kundenwunsch) */
.stats-item__num { font-family: 'Klavika-Medium'; }

/* ── 12. MEDIA CARDS (brochure/film) ────────────────────────── */
.section-media {
  padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--white);
}
.section-media__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 640px;
}
.media-card { display: block; position: relative; overflow: hidden; }
.media-card__image {
  aspect-ratio: 4 / 3;
  background: var(--gray-200);
  overflow: hidden;
}
.media-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.media-card:hover .media-card__image img { transform: scale(1.04); }
.media-card__image--broschure { background: linear-gradient(135deg, #c8ccd8 0%, #a0a8b8 100%); }
.media-card__image--film      { background: linear-gradient(135deg, #b0b8c8 0%, #8890a0 100%); }
.media-card__label {
  display: inline-block;
  margin-top: 0.625rem;
  padding: 0.4rem 0.875rem;
  background: var(--bodycolor);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── 13. SLIDER WRAPPER — Slick-based ──────────────────────── */
/* Outer arrow host: position:relative so absolute arrows are placed here.
   overflow:visible lets arrows extend outside the card area. */
.slider-wrapper {
  position: relative;
  overflow: visible;
  padding: 0;
}

/* Arrow button base — positioned outside the card area via negative offset */
.slider-wrapper .slick-prev,
.slider-wrapper .slick-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  width: 25px;
  height: 60px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
/* Default: arrows sit just outside the slider clip boundary */
.slider-wrapper .slick-prev { left: -60px; } /* links = rechts, damit Bild den Pfeil nicht berührt */
.slider-wrapper .slick-next { right: -60px; }
.slider-wrapper .slick-prev img,
.slider-wrapper .slick-next img {
  width: 25px;
  height: 60px;
  display: block;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.slider-wrapper .slick-prev:hover img,
.slider-wrapper .slick-next:hover img { opacity: 1; }
/* Hide default Slick pseudo-element arrows */
.slider-wrapper .slick-prev::before,
.slider-wrapper .slick-next::before { display: none; }

/* ── 14. NEWS SECTION ───────────────────────────────────────── */
.section-news {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
  background: var(--white);
}
.section-news__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}
.section-news__header .dba-section-header__heading { margin-bottom: 0; }


/* ── News Slick — 3.5 cards visible peek effect ─────────── */

/* Inner clip: hides the peeking half-card beyond the right edge */
.news-slider-clip {
  overflow: hidden;
}

/* overflow is controlled per-breakpoint by dbaNewsSlickPeek() in functions.php */

/* ── News card ────────────────────────────────────────────── */
/* ── Equal-height slider cards via flex track ───────── */
.news-slider .slick-track {
  display: flex !important;
  align-items: stretch;
}
.news-slider .slick-slide {
  height: auto !important;
  display: flex !important;
  flex-direction: column;
}
.news-slider .slick-slide > div {
  display: flex;
  min-width: 0;
}

.news-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  position: relative;
}
/* Vertikale Trennlinie zwischen den Cards — sitzt links-of-center in der Lücke
   und endet mit klarem Abstand ÜBER der grauen Textbox (Box beginnt ~157px), wie im XD. */
.news-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 15px;
  width: 1px;
  height: 128px;
  background: #c3c8ce;
}
.news-card:last-child::after { display: none; }
.news-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
}

/* Date row — above the image, right-aligned */
.news-card__date-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.8rem;
  
}
@media (min-width: 768px) {
  .news-slider .news-card__date-row {
    margin-left: 5%;
  }
}
.news-card__date {
  font-size: 0.9rem;
  color: var(--bodycolor);
  letter-spacing: 0.02em;
}

/* Image + overlapping body wrapper */
.news-card__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (min-width: 768px) {
  .news-card--slider .news-card__visual {
    max-width: 90%;
    margin: auto;
    width: 100%;
  }
}
.news-card__image-wrap {
  overflow: hidden;
}
@media (min-width: 768px) {
  .news-card--slider .news-card__image-wrap {
    max-width: 90%;
  }
  
  .news-card__image-wrap {
    overflow: hidden;
    max-width: 90%;
  }
}
.news-card__image,
.news-card__image--placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.news-detail__image-wrap .news-card__image {
  aspect-ratio: 16 / 9;
}
.news-card__image--placeholder { background: var(--gray-200); }
.news-card:hover .news-card__image { transform: scale(1.03); }

/* Content box — overlaps ~40% of the image from the bottom, grows to fill card height */
.news-card__body {
  background: rgba(85, 100, 115, 0.80);
  padding: 1.25rem 1.5rem 1.5rem;
  color: var(--white);
  margin-top: -22%;
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: background var(--ease);
}
.news-card__body.news-detail__card-body{
  background:rgba(241, 241, 241, 0.8);
  margin-top: calc(-5% + 20px);
}
@media (min-width: 768px) {
  .news-card__body {
    max-width: 90%;
    margin-left: 10%;
  }
  .news-card__body.news-detail__card-body{
    margin-left: 5%;
  }
}
.news-card:hover .news-card__body { background: rgba(85, 100, 115, 0.97); }

.news-card__city {
  display: block;
  font-size: 14px;
  font-family: 'Klavika-Regular';
  font-weight: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.1rem;
  line-height: 1.15;
}

.news-card__title {
  font-size: 18px;
  font-family: 'Klavika-Regular';
  font-weight: 400;
  color: var(--white);
  margin-bottom: 1rem;
  line-height: 1.15;
}

/* Excerpt — bold, truncated in PHP to ~20 words */
.news-card__lead {
  font-size: 1rem;
  font-family: 'Klavika-Medium';
  color: rgba(255,255,255,0.95);
  line-height: 1.35;
  margin-bottom: 1rem;
  /* fetten Anleser auf max. 3 Zeilen begrenzen */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.news-card__lead p { margin: 0; font-size: inherit; font-weight: inherit; }
.excerpt-more { display: none; }

/* Description — regular weight, truncated in PHP to ~35 words */
.news-card__desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.3;
  margin-bottom: 0.5rem;
  /* Anleser auf max. 4 Zeilen begrenzen */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.news-card__more {
  display: inline-block;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.875rem;
  font-family: 'Klavika-Medium';
  color: var(--white);
  transition: opacity var(--ease);
}
.news-card:hover .news-card__more { opacity: 0.7; }

/* News section: ensure container doesn't clip outside arrows */
.section-news .container { overflow: visible; }

/* ── 15. PROJECTS SECTION ───────────────────────────────────── */
.section-projects {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.section-projects--current { background: var(--white); }
.section-projects--realized { background: #d9e5ec; } /* XD-Bandfarbe */

.section-projects__intro {
  margin: 1.25rem 0 2rem;
  max-width: 680px;
  color: var(--gray-700, #374151);
  line-height: 1.7;
}
/* Sonderprojekte-Claim (letzter Absatz) wie Intro-Claim „WIR SCHAFFEN WOHNRAUM." */
.section-projects__intro p:last-child {
  font-family: 'Klavika-Medium';
  margin-top: 1.5rem;
}

/* Project card — Slick controls the width; reset legacy flex sizing */
.project-card {
  min-width: 0;
  display: block;
}

/* Gaps between project slides */
.projects-slider .slick-slide { padding: 0 16px; }
.projects-slider .slick-list  { margin: 0 -16px; }
.projects-slider .slick-track { margin-left: 0; margin-right: 0; }

/* Project arrows — slightly larger than the shared default */
.section-projects .slider-wrapper .slick-prev,
.section-projects .slider-wrapper .slick-next {
  width: 60px;
  height: 60px;
  top: 33%;
}
.section-projects .slider-wrapper .slick-prev { left: -56px; }
.section-projects .slider-wrapper .slick-next { right: -56px; }
.section-projects .slider-wrapper .slick-prev img,
.section-projects .slider-wrapper .slick-next img {
  width: 60px;
  height: 60px;
  opacity: 0.7;
}
.section-projects .slider-wrapper .slick-prev:hover img,
.section-projects .slider-wrapper .slick-next:hover img { opacity: 1; }
/* Allow outside arrows to show — desktop only (arrows at -56px need the room) */
@media (min-width: 1025px) {
  .section-projects .container { overflow: visible; }
}
@media (max-width: 1024px) {
  .projects-arrows-host .slick-prev,
  .projects-arrows-host .slick-next { display: none !important; }
}
.project-card__link { display: block; }
.project-card__image-wrap {
  position: relative;
  overflow: hidden;
}
.project-card__image,
.project-card__image--placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.project-card__image--placeholder { background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300, #d1d5db) 100%); }
.project-card:hover .project-card__image { transform: scale(1.04); }
.project-card__badge {
  position: absolute;
  top: 0.75rem; right: 0;
  padding: 0.3rem 0.625rem;
  font-size: 14px;
  font-family: 'Klavika-Light-Italic';
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--gray-700);
  text-align: center;
}
.project-card__badge--active, .project-card__badge--done { background: rgba(255, 255, 255, 0.9); }
.project-card__info {
  padding: 0 0 0 1rem;
  border-left: 1px solid var(--gray-400, #e5e7eb);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.project-card__city {
  display: block;
  font-weight: 400;
  color: var(--bodycolor);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.project-card__name {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bodycolor);
  transition: color var(--ease);
}

/* ── 16. QUOTE / TESTIMONIAL ────────────────────────────────── */
/* ── 16. QUOTE / TESTIMONIAL ────────────────────────────────── */
.section-quote {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}

/* Flex row inside container: image left, panel right */
.section-quote__inner {
  display: flex;
  align-items: stretch;
}

/* Left image — bleeds into the panel via negative right margin */
.section-quote__image {
  flex-shrink: 0;
  width: clamp(180px, 28vw, 380px);
  position: relative;
  z-index: 2;
  margin-right: -10rem;
}
.section-quote__image img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  object-position: right center;
  display: block;
  margin-top: -3rem;
}

/* Gray panel — takes remaining width, arrows L+R, text centered */
.section-quote__panel {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 3;
  background: rgba(150, 161, 168, 0.88);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  min-height: 280px;
}

.quote-slider { width: 100%; }
.quote-slide  { outline: none; }

.quote-slide__text {
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--white);
  font-family: 'Klavika-Light', var(--font);
  margin-bottom: 1.25rem;
  quotes: none;
  overflow-wrap: break-word;
  word-break: break-word;
}
.quote-slide__author {
  display: block;
  font-family: 'Klavika-Regular-Italic';
  color: rgba(255, 255, 255, 0.85);
}

/* Arrows — large, vertically centered, at left and right of panel */
.section-quote__panel .slick-prev,
.section-quote__panel .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 60px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 4;
}
.section-quote__panel .slick-prev { left: 0.75rem; }
.section-quote__panel .slick-next { right: 0.75rem; }
.section-quote__panel .slick-prev img,
.section-quote__panel .slick-next img {
  width: 25px;
  height: 60px;
  display: block;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.section-quote__panel .slick-prev img { transform: rotate(180deg); }
.section-quote__panel .slick-prev:hover img,
.section-quote__panel .slick-next:hover img { opacity: 1; }
.section-quote__panel .slick-prev::before,
.section-quote__panel .slick-next::before { display: none; }

/* Mobile — hide image, panel full width */
@media (max-width: 640px) {
  .section-quote__inner { flex-direction: column; }
  .section-quote__image { display: none; }
  .section-quote__panel { padding: 2rem 2.5rem; min-height: 0; }

  /* News slider arrows: hide on mobile (rely on swipe) */
  .news-arrows-host .slick-prev,
  .news-arrows-host .slick-next { display: none !important; }
}

/* ── 17. CTA SELL SECTION ───────────────────────────────────── */
.section-cta {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: none;
}
.section-cta__inner {
  display: flex;
  align-items: stretch;
}
.section-cta__image-wrap {
  flex-shrink: 0;
  width: clamp(200px, 26vw, 320px);
  position: relative;
  z-index: 2;
  margin-right: -3rem;
}
.section-cta__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin-top:-30px;
}
.section-cta__content {
  flex: 1;
  position: relative;
  z-index: 2;
  background: rgba(144, 153, 163, 0.8);
  color: var(--white);
  padding: 2.5rem 3rem 2.5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}
.section-cta__heading {
  font-family: 'Klavika-Light';
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--white);
  line-height: 1.25;
  margin: 0;
}
.section-cta__text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem; /* wie Intro-Box */
  line-height: 1.7;
  margin: 0;
}
.section-cta__buttons { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }

/* ── DBA Section-Header block ───────────────────────────────── */
.dba-section-header { padding: 2.5rem 0 0; }
.dba-section-header__label {
  font-family: 'Klavika-Regular';
  font-size: 1.1rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bodycolor);
  margin-bottom: 0.75rem;
}
.dba-section-header__line {
  border: none;
  border-top: 1px solid var(--gray-400);
  width: 100%;
  /* symmetrischer Abstand oben/unten um die Linie (Label ist p:last-child → eigene margin greift nicht) */
  margin: 15px 0 16px;
}
/* NUR die Projektfortschritt-Sektion: Trennlinie auf Container-Breite (nicht full-bleed) */
.project-stages > .dba-section-header__line {
  width: calc(min(var(--container), 100%) - 2 * clamp(1rem, 4vw, 3rem));
  margin-left: auto;
  margin-right: auto;
}
.dba-section-header__heading {
  font-family: 'Klavika-Regular';
  font-size: clamp(26px, 3vw, 36px);
  font-weight: normal;
  color: var(--bodycolor);
  margin: 0 0 20px 0;
  line-height: 1;
}

/* ── 18. CONTACT FORM SECTION ───────────────────────────────── */
.section-contact {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}
.section-contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.section-contact__heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}
.section-contact__intro p { color: var(--gray-700); margin-bottom: 1rem; }

/* Contact form */
.contact-form { display: flex; flex-direction: column; gap: 0.875rem; }
.contact-form__row { display: flex; flex-direction: column; gap: 0.875rem; }
.contact-form__row--2col { flex-direction: row; }
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  background: var(--white);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bodycolor);
  outline: none;
  transition: border-color var(--ease);
  appearance: none;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: var(--gray-400); }
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus { border-color: var(--purple); }
.contact-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.contact-form__textarea { resize: vertical; min-height: 120px; }
.contact-form__row--submit { align-items: flex-start; }

/* ── 19. PAGE TEMPLATES ─────────────────────────────────────── */
.page-hero {
  position: relative;
  height: 480px;
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__overlay { position: absolute; inset: 0; background: var(--overlay-dark); opacity: 0.5; }
.page-hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 3rem;
}
.page-hero__city {
  display: block;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0.4rem;
}
.page-hero__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
}
.page-hero__title--highlight {
  display: inline;
  background: var(--purple);
  padding: 0.1em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.page-hero__badge {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.35rem 0.875rem;
  background: var(--purple-muted);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.page-content { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.page-content__inner { max-width: 860px; }
.page-content__inner p { color: var(--gray-700); margin-bottom: 1.25rem; }

/* Progress bars (Bautenstände) */
.progress-list { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1rem; }
.progress-item__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
  color: var(--bodycolor);
}
.progress-item__bar {
  height: 4px;
  background: var(--gray-200);
  border-radius: 2px;
  overflow: hidden;
}
.progress-item__fill {
  height: 100%;
  background: var(--purple);
  border-radius: 2px;
  transition: width 1s ease;
}

/* Project highlights grid */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.highlight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.highlight-item__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--purple);
}
.highlight-item__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-700); }

/* ── 20. NEWS ARCHIVE / LISTING ─────────────────────────────── */
.news-archive { padding: clamp(3rem, 5vw, 4.5rem) 0; background: var(--white); }
.news-archive__filters {
  display: flex;
  gap: 0;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--gray-200);
  flex-wrap: wrap;
}
.news-archive__filter-btn {
  padding: 0.625rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bodycolor);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ease), border-color var(--ease);
  cursor: pointer;
}
.news-archive__filter-btn.is-active,
.news-archive__filter-btn:hover { color: var(--purple); border-color: var(--purple); }

.news-archive__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.news-archive__year {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
}
.news-archive__year:first-child { border-top: none; padding-top: 0; }


/* ── 21. PROJECTS LISTING PAGE ──────────────────────────────── */
.projects-page { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.projects-table { margin-bottom: 3rem; border: 1px solid var(--gray-200); }
.projects-table__head,
.projects-table__row {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 2fr;
  align-items: center;
  padding: 0.75rem 1.25rem;
  gap: 1rem;
  border-bottom: 1px solid var(--gray-200);
}
.projects-table__head { background: var(--gray-50); }
.projects-table__th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bodycolor);
}
.projects-table__row:hover { background: var(--gray-50); }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* ── 22. NEWS DETAIL PAGE ───────────────────────────────────── */
.news-detail { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.news-detail__header { margin-bottom: 2.5rem; }
.news-detail__date {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--bodycolor);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.news-detail__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 1.25rem;
  line-height: 1.1;
}
.news-detail__lead {
  font-size: 1rem;
  color: var(--bodycolor);
  margin-bottom: 1.5rem;
  line-height: 1.65;
}
.news-detail__featured { margin-bottom: 2.5rem; }
.news-detail__featured img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.news-detail__body { max-width: 100%; }
.news-detail__body p { color: var(--gray-700); margin-bottom: 1.25rem; line-height: 1.75; }
.news-detail__body h2 { margin: 2rem 0 1rem; }
.news-detail__body h3 { margin: 1.5rem 0 0.75rem; }

.news-detail__gallery { margin: 3rem 0; }
.news-detail__gallery-label {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--bodycolor);
}
.news-detail__gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.news-detail__gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.news-detail__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2.5rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
  justify-content: center;
}
.news-detail__social {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin: 1.5rem 0;
}
.social-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--bodycolor);
  font-size: 1rem;
  transition: border-color var(--ease), color var(--ease);
}
.social-icon:hover { border-color: var(--purple); color: var(--purple); }

/* ── 23. FOOTER ─────────────────────────────────────────────── */
/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer { background: var(--footer-grey, #909ba5); }

.site-footer__main { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

/* Brand col */
.site-footer__col--brand { display: flex; flex-direction: column; gap: 1rem; }
.site-footer__logo img { max-height: 64px; width: auto; filter: brightness(0) invert(1); }
.site-footer__company {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
}

/* Headings */
.site-footer__heading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1rem;
}

/* Address */
.site-footer__address {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  font-style: normal;
}
.site-footer__address a { color: rgba(255,255,255,0.85); text-decoration: none; }
.site-footer__address a:hover { color: var(--white); }

/* Nav links */
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-footer__links li a {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color var(--ease);
  display: block;
  padding: 0.02rem 0;
  line-height: 1.5;
}
.site-footer__links li a:hover { color: var(--white); }

/* Social icons — col 5, pinned to bottom of the grid row */
.site-footer__col--social { display: flex; align-items: flex-end; align-self: end; padding-top: 0; }
.site-footer__social {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #808c99;
  border-radius: 50%;
  transition: border-color var(--ease), background var(--ease);
}
.site-footer__social-link:hover { border-color: var(--white); background: rgba(255,255,255,0.15); }
.site-footer__social-link img { width: 16px; height: 16px; filter: brightness(0) invert(1); display: block; }

/* Bottom bar — membership logos */
.site-footer__bottom {
  background: var(--white);
  padding: 1.25rem 0;
}
.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.site-footer__member-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bodycolor);
  white-space: nowrap;
}
.site-footer__member-logos {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.site-footer__member-logo {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

/* ── 24. PAGE TEMPLATE (generic) ────────────────────────────── */
.page-layout { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.page-layout .entry-content { max-width: 860px; }
.page-layout .entry-content p { color: var(--gray-700); margin-bottom: 1.25rem; }
.page-layout .entry-content h2 { margin: 2rem 0 0.75rem; }
.page-layout .entry-content h3 { margin: 1.5rem 0 0.5rem; }
.page-layout .entry-content ul { list-style: disc; padding-left: 1.5rem; }
.page-layout .entry-content ul li { margin-bottom: 0.4rem; color: var(--gray-700); }

/* ── 25. 404 ────────────────────────────────────────────────── */
.error-404 { min-height: 60vh; display: flex; align-items: center; }
.error-404__inner { text-align: center; }
.error-404__code {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 700;
  color: var(--gray-200);
  line-height: 1;
}
.error-404__message { font-size: 1.25rem; margin: 1rem 0 2rem; color: var(--gray-700); }

/* ── 26. WORDPRESS ALIGNMENT CLASSES ────────────────────────── */
.alignleft   { float: left; margin: 0 1.5rem 1rem 0; }
.alignright  { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; text-align: center; }
.alignwide   { margin-inline: calc(-1 * clamp(1rem, 4vw, 3rem)); }
.alignfull   { margin-inline: calc(-50vw + 50%); max-width: 100vw; }

/* ── 27. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .section-stats__grid     { grid-template-columns: repeat(2, 1fr); }
  .section-stats__band-bg  { top: 0; }
  .stats-item              { padding: 1.5rem 1rem 0; }
  .projects-grid            { grid-template-columns: repeat(2, 1fr); }
  .news-archive__grid       { grid-template-columns: 1fr; }
  .section-cta__inner       { grid-template-columns: 1fr; }
  .section-cta__image-wrap  { display: none; }
  .site-footer__grid        { grid-template-columns: repeat(2, 1fr); }
  .site-footer__col--social { grid-column: 1 / -1; }
  .section-contact__inner   { grid-template-columns: 1fr; }
  .projects-table__head,
  .projects-table__row      { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }

  .site-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--footer-grey); box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 99; }
  .site-nav.is-open { display: block; }
  .site-nav__list   { flex-direction: column; gap: 0; padding: 0.5rem 0 1rem; }
  .site-nav__item   { width: 100%; }
  .site-nav__link   { padding: 0.5rem 1.5rem;}
  .site-nav__link::after { display: none; }
  .site-nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; margin-left: 1.5rem; background: none; }
  .site-nav__dropdown .site-nav__link { border-bottom: none; color:var(--white); }

  .site-header__mobile-toggle { display: flex; }

  .hero { height: calc(60vh - var(--header-h)); }

  .news-card { /*flex: 0 0 100%;*/ border-right: none; padding-right: 0; }
  .project-card { min-width: 0; }

  .section-stats__grid   { grid-template-columns: 1fr 1fr; }
  .projects-grid         { grid-template-columns: 1fr; }
  .site-footer__grid     { grid-template-columns: 1fr; }

  .contact-form__row--2col { flex-direction: column; }

  .news-detail__gallery-grid { grid-template-columns: 1fr; }

  .section-cta { padding: 2rem 0; }

  .projects-table { display: none; }

  .page-hero { height: 300px; }
}

@media (max-width: 480px) {
  .section-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .section-media__grid { grid-template-columns: 1fr; max-width: 300px; }
}

/* ============================================================
   NEWS MODULE — archive, cards, detail, filters
   ============================================================ */

/* ── News archive page wrapper ──────────────────────────────── */
.news-archive-page { padding: clamp(3rem, 5vw, 4.5rem) 0; background: var(--white); }

.news-archive-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-200);
}
.news-archive-header__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Filter tab system ──────────────────────────────────────── */
.news-filter { margin-bottom: 2.5rem; }

.news-filter__tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200);
  gap: 0;
  flex-wrap: wrap;
}
.news-filter__tab {
  padding: 0.625rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bodycolor);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ease), border-color var(--ease);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.news-filter__tab.is-active,
.news-filter__tab:hover { color: #3d7080; border-bottom-color: #3d7080; }

.news-filter__panel {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 0 0;
}
.news-filter__panel.is-active { display: flex; }

.news-filter__option {
  display: inline-block;
  padding: 0.35rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bodycolor);
  border: 1px solid var(--gray-200);
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.news-filter__option:hover    { background: var(--gray-100); border-color: var(--gray-400); }
.news-filter__option.is-active {
  background: #808c9a;
  color: var(--white);
  border-color: #808c9a;
}
.news-filter__option.is-active:hover { background: #3d7080; border-color: #3d7080; }

/* ── Year section divider ───────────────────────────────────── */
.news-archive-year {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  padding: 2rem 0 1rem;
  border-top: 1px solid var(--gray-200);
  margin-top: 1rem;
}
.news-archive-grid:first-of-type + .news-archive-year { border-top: none; }

/* ── Archive 3-column grid ──────────────────────────────────── */
.news-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

/* ── Archive grid: override card width (grid handles columns) ── */
.news-archive-grid .news-card {
  flex: none; /* grid controls width, not flex */
  width: 100%;
}

.news-card__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.625rem;
  color: var(--gray-500, #6b7280);
  transition: color var(--ease);
  width: 32px;
  height: 32px;
}
.news-card__download:hover { color: var(--purple); }

/* ── Pagination ─────────────────────────────────────────────── */
.news-archive-pagination {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.news-archive-pagination .page-numbers {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bodycolor);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
  flex-shrink: 0;
}
/* Bullet separator between consecutive page items */
.news-archive-pagination .page-numbers + .page-numbers:not(.prev):not(.next) {
  margin-left: 18px;
}
.news-archive-pagination .page-numbers + .page-numbers:not(.prev):not(.next)::before {
  content: '•';
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.45rem;
  color: var(--gray-400);
  line-height: 1;
  pointer-events: none;
}
/* Current page: filled dark circle */
.news-archive-pagination .page-numbers.current {
  font-weight: 700;
}
/* Hover on linked page numbers */
.news-archive-pagination a.page-numbers:not(.prev):not(.next):hover {
  background: var(--gray-100);
  color: var(--dark);
}
/* Ellipsis: no background, smaller */
.news-archive-pagination .page-numbers.dots {
  background: none;
  color: var(--gray-400);
  cursor: default;
  width: auto;
  padding: 0 2px;
}
/* Prev / next arrows: no circle */
.news-archive-pagination .prev,
.news-archive-pagination .next {
  width: auto;
  padding: 0 6px;
  border-radius: 0;
  color: var(--gray-400);
  font-size: 1rem;
}
.news-archive-pagination .prev { margin-right: 8px; }
.news-archive-pagination .next { margin-left:  8px; }

/* ── Section background utility classes ─────────────────────── */
/* Usage: add class in block → Advanced → Additional CSS class(es) */
.bg-lightblue { background-color: #d9e5ec; }
.bg-lightgray { background-color: var(--gray-100); }
.bg-dark      { background-color: var(--dark); color: var(--white); }
.bg-purple    { background-color: var(--purple); color: var(--white); }

.bg-lightblue,
.bg-lightgray,
.bg-dark,
.bg-purple {
  padding-top:    clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ── News detail page ───────────────────────────────────────── */
.news-detail-page { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Section header row inside detail page */
.news-detail__section-header {
  padding-top: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 1rem;
}
.news-detail__topbar-date {
  font-family: 'Klavika-Light', sans-serif;
  color: var(--bodycolor);
  margin: 0;
}

/* Hero row: card (left) + PDF icon (right) */
.news-detail__hero-row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.news-detail__card {
  flex-shrink: 0;
  width:100%;
}

/* Force image and body to fill card width (override slider max-width rules) */
.news-detail__image-wrap {
  max-width: 100% !important;
}
@media (min-width: 768px) {
  .news-detail__image-wrap {
    max-width: 34% !important;
  }
}
.news-detail__card-body {
  max-width: 100% !important;
}

/* Title inside the dark card overlay */
.news-detail__card-title {
  font-family: 'Klavika-Light', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--bodycolor);
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}

/* PDF download icon */
.news-detail__pdf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-top: 2rem;
  border: 1px solid var(--gray-400);
  border-radius: 50%;
  color: var(--bodycolor);
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.news-detail__pdf-icon:hover {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

/* Grey content section — full viewport width */
.news-detail__content-section {
  background: var(--gray-100);
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  margin: 2rem 0;
}

.news-detail__lead {
  font-family: 'Klavika-Medium', sans-serif;
  font-size: 1rem;
  font-weight: normal;
  color: var(--bodycolor);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.news-detail__body p   { color: var(--gray-700); margin-bottom: 1.25rem; line-height: 1.75; }
.news-detail__body h2  { margin: 2rem 0 1rem; }
.news-detail__body h3  { margin: 1.5rem 0 0.75rem; }

/* ── Visualisierungen gallery ───────────────────────────────── */
.news-gallery-section {
  padding: 3rem 0;
  border-top: 1px solid var(--gray-200);
  margin-top: 2rem;
}
.news-gallery-section__title {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bodycolor);
  margin-bottom: 1.25rem;
}
.news-gallery-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.news-gallery-section__item { display: block; overflow: hidden; }
.news-gallery-section__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.news-gallery-section__item:hover img { transform: scale(1.04); }
.news-gallery-section__project-link { display: flex; justify-content: flex-end; margin-top: 1rem; }

/* ── Actions row ────────────────────────────────────────────── */
.news-detail-page__actions {
  padding: 2.5rem 0;
  border-top: 1px solid var(--gray-200);
  margin-top: 2rem;
}
.news-detail-page__cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.news-detail-page__social {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}
.btn--disabled { opacity: 0.4; pointer-events: none; cursor: default; }

/* ── Related news grid ──────────────────────────────────────── */
.news-related { padding: clamp(3rem, 5vw, 4rem) 0; background: var(--gray-50); border-top: 1px solid var(--gray-200); }
.news-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* ── Responsive additions ───────────────────────────────────── */
@media (max-width: 768px) {
  .news-archive-grid  { grid-template-columns: repeat(2, 1fr); }
  .news-related__grid { grid-template-columns: 1fr; }
  .news-gallery-section__grid { grid-template-columns: 1fr 1fr; }
  .news-detail-page__cta-row { flex-direction: column; align-items: center; }
  .news-detail__card { width: 80%; }
}
@media (max-width: 600px) {
  .news-detail__hero-row { flex-direction: column; }
  .news-detail__card { width: 100%; }
  .news-detail__pdf-icon { margin-top: 0; }
}
@media (max-width: 480px) {
  .news-gallery-section__grid { grid-template-columns: 1fr; }
  .news-filter__tab { padding: 0.5rem 0.875rem; font-size: 0.75rem; }
  .news-archive-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   PROJECT DETAIL PAGE
   ════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────── */
.project-detail-hero {
  position: relative;
  width: 100%;
  height: clamp(420px, 52vw, 700px);
  background-size: cover;
  background-position: center;
  background-color: var(--gray-100);
}

/* ── Reveal-Slider im Header (Before/After, Bild 1 links · Bild 2 rechts) ── */
.project-detail-hero.is-reveal { background: none; }
.dba-reveal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: ew-resize;
}
.dba-reveal__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.dba-reveal__base { position: absolute; inset: 0; }
.dba-reveal__top {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); /* Bild 1 links bis zur Trenn-Position sichtbar */
  will-change: clip-path;
}
.dba-reveal__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 3;
}
.dba-reveal__handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dba-reveal__handle span::before,
.dba-reveal__handle span::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.dba-reveal__handle span::before { border-right: 7px solid #5a7f96; margin-right: 5px; }
.dba-reveal__handle span::after  { border-left: 7px solid #5a7f96; margin-left: 5px; }

/* Logo — top right, white card */
.project-detail-hero__logo-wrap {
  position: absolute;
  z-index: 10;
  top: 2rem;
  right: 2.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-detail-hero__logo {
  width: 240px;
  height: 136px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Logo weiß (über dunklem Color-Bild) */
  transition: filter 0.2s ease;
}
/* Logo schwarz, wenn der Trenner es passiert hat und es über der hellen S/W-Skizze liegt */
.project-detail-hero.logo-on-light .project-detail-hero__logo {
  filter: brightness(0);
}

/* Badge — bottom right, matches project card badge */
.project-detail__badge {
  position: absolute;
  bottom: 0.75rem;
  right: 0;
  padding: 0.3rem 0.625rem;
  font-size: 0.8rem;
  font-family: 'Klavika-Light-Italic';
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--gray-700);
  background: rgba(255,255,255,0.9);
}
.project-detail__badge--active,
.project-detail__badge--done { background: rgba(255,255,255,0.9); }

/* ── Construction stages ─────────────────────────────────────── */
.project-stages {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.project-stages__track {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-bottom: 1.5rem;
}
.project-stages__line {
  position: absolute;
  top: 26px;
  left: 16.67%;
  right: 16.67%;
  height: 1px;
  background: #b8c6d0;
  z-index: 0;
}
.project-stages__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}
.project-stages__icon {
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;          /* weißer Puffer bricht die Verbindungslinie */
  background: var(--white, #fff);
  position: relative;
  z-index: 1;
}
.project-stages__icon img {
  width: 52px;
  height: auto;
  display: block;
}
.project-stages__icon svg {
  width: 42px;
  height: 48px;
  overflow: visible;
}
.project-stages__icon .house-body {
  fill: none;
  stroke: var(--bodycolor, #333);
  stroke-width: 1.5;
  transition: fill 0.2s, stroke 0.2s;
}
.project-stages__icon .house-door {
  fill: white;
  stroke: none;
}
.project-stages__step.is-done .project-stages__icon .house-body,
.project-stages__step.is-active .project-stages__icon .house-body {
  fill: #8fa3b1;
  stroke: #8fa3b1;
}
.project-stages__step.is-done .project-stages__icon .house-door,
.project-stages__step.is-active .project-stages__icon .house-door {
  fill: white;
  stroke: none;
}
.project-stages__name {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: var(--bodycolor);
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.project-stages__step.is-active .project-stages__name { font-weight: 700; }
@media (max-width: 480px) {
  .project-stages__name { font-size: 0.65rem; }
  .project-stages__icon { width: 40px; height: 44px; }
  .project-stages__icon svg { width: 32px; height: 36px; }
}

/* ── Intro section ───────────────────────────────────────────── */
.project-detail-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem 4rem;
  align-items: start;
}
.project-detail-intro__text { min-width: 0; }
.project-detail-intro__cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 220px;
  padding-top: 0;
  flex-shrink: 0;
}
.project-detail-intro__cta .btn { text-align: center; white-space: nowrap; }
.project-detail-intro__city {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}
.project-detail-intro__title {
  /* Style von .dba-section-header__heading, auf der Detailseite etwas kleiner */
  grid-column: 1 / -1; /* Titel über beide Spalten → Body + CTA starten darunter auf gleicher Höhe */
  font-family: 'Klavika-Regular';
  font-size: clamp(26px, 3vw, 36px);
  font-weight: normal;
  text-transform: none;
  color: var(--bodycolor);
  line-height: 1;
  margin-bottom: 1.5rem;
}
.project-detail-intro__lead {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--bodycolor);
  margin-bottom: 1.5rem;
}
/* Beschreibung gegenüber dem Titel eingerückt (wie XD) */
.project-detail-intro__lead,
.project-detail-intro__body {
  padding-left: clamp(1.5rem, 9%, 7.5rem);
}
.project-detail-intro__body p { color: var(--gray-700); line-height: 1.6; margin-bottom: 1.25rem; }

/* ── Projektkennzahlen ───────────────────────────────────────── */
.project-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  padding: 1.75rem 2rem;
  background: var(--gray-800);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.project-stat-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.project-stat-item__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.project-stat-item__text {
  display: flex;
  flex-direction: column;
}
.project-stat-item__value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
}
.project-stat-item__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* ── Project detail image slider ────────────────────────────── */
.project-detail-slider {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

/* Bild auf volle Container-Breite (Logo → letzter Menüpunkt), Pfeile außerhalb */
.project-img-slider-wrap {
  position: relative;
  margin-inline: 0;
}

.project-img-slider__slide {
  position: relative;
}

.project-img-slider__slide img {
  width: 100%;
  /* etwas höher als ein Galerie-Quadrat: (Container-Content − Gap) / 2 + Zuschlag */
  height: calc((min(var(--container), 100vw) - 2 * clamp(1rem, 4vw, 3rem) - 2rem) / 2 + 70px);
  object-fit: cover;
  display: block;
}

/* Bildunterschrift (z.B. „Unverbindliche Beispieldarstellung …") — dezent unten rechts */
.project-img-slider__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 70%;
  padding: 8px 14px;
  font-family: 'Klavika-Light', sans-serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.3;
  color: #fff;
  text-align: right;
  background: rgba(20, 28, 34, 0.42);
  pointer-events: none;
}

/* Slick arrows — sit outside the image */
.project-img-slider-wrap .slick-prev,
.project-img-slider-wrap .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}
.project-img-slider-wrap .slick-prev { left:  -70px; }
.project-img-slider-wrap .slick-next { right: -70px; }
/* schmale Viewports: kein Platz außerhalb → Pfeile an die Bildkante holen (kein H-Overflow) */
@media (max-width: 1360px) {
  .project-img-slider-wrap .slick-prev { left:  12px; }
  .project-img-slider-wrap .slick-next { right: 12px; }
  /* Pfeile liegen jetzt auf dem Bild → weiß mit dezentem Schatten für Lesbarkeit */
  .project-img-slider-wrap .slick-prev img,
  .project-img-slider-wrap .slick-next img {
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
  }
}
.project-img-slider-wrap .slick-prev img,
.project-img-slider-wrap .slick-next img { width: 60px; height: 60px; display: block; }
.project-img-slider-wrap .slick-prev:before,
.project-img-slider-wrap .slick-next:before { display: none; } /* hide default slick arrows */

/* Slick dots */
.project-img-slider-wrap .slick-dots {
  position: static;
  margin-top: 1.25rem;
  display: flex !important;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}
.project-img-slider-wrap .slick-dots li { margin: 0; width: auto; height: auto; }
.project-img-slider-wrap .slick-dots li button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c3d3dc;            /* inaktiv: helles Slate-Blau */
  border: none;
  padding: 0;
  font-size: 0;
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease, border-radius 0.25s ease;
}
.project-img-slider-wrap .slick-dots li button:before { display: none; }
.project-img-slider-wrap .slick-dots li.slick-active button {
  width: 26px;                    /* aktiv: längliche Pille wie XD */
  border-radius: 5px;
  background: #5a7f96;            /* aktiv: Marken-Slate */
}

/* ── Impressionen galleries ──────────────────────────────────── */
.project-impressionen {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--gray-200);
}
.project-impressionen__title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 2rem;
}
.project-impressionen__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 3rem;
}
.project-impressionen__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}
.project-impressionen__circle {
  width: clamp(120px, 16vw, 180px);
  height: clamp(120px, 16vw, 180px);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gray-200);
  transition: border-color 0.2s;
}
.project-impressionen__item:hover .project-impressionen__circle { border-color: var(--purple); }
.project-impressionen__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.project-impressionen__item:hover .project-impressionen__circle img { transform: scale(1.06); }
.project-impressionen__circle-placeholder { width: 100%; height: 100%; background: var(--gray-100); }
.project-impressionen__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bodycolor);
  text-align: center;
}

/* ── Standort ────────────────────────────────────────────────── */
.project-standort {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.project-standort__title {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 1.75rem;
}
.project-standort__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.project-standort__text { color: var(--gray-700); line-height: 1.6; max-width: 860px; }
/* Standort-Überschrift (h2 im Content) = Startseiten-Headline-Style (.dba-section-header__heading) */
.project-standort__text h2 {
  font-family: 'Klavika-Regular';
  font-size: clamp(26px, 3vw, 36px);
  font-weight: normal;
  color: var(--bodycolor);
  line-height: 1;
  margin: 0 0 1.25rem 0;
}
/* Kontaktformular auf der Projekt-Detailseite (identisch zur Startseite) */
.project-detail-contact {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1rem, 3vw, 2rem);
}
/* Kontakt-Heading auf der Detailseite etwas kleiner (Startseite unangetastet) */
.project-detail-contact .dba-section-header__heading {
  font-size: clamp(26px, 3vw, 36px);
}
/* ── map section (full-width, outside .container) ─────────── */
.project-standort__map-wrap {
  position: relative;
  width: 100%;
  height: 620px;
  margin-top: 2rem;
  overflow: hidden;
}

/* canvas that Google Maps renders into */
.dba-map-canvas {
  width: 100%;
  height: 100%;
}

/* GDPR overlay — sits on top of the canvas */
.dba-map-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  margin:0 0 clamp(2.5rem, 5vw, 4rem) 0;
  overflow: hidden;
}
/* weichgezeichnetes Poster-Bild (XD/Hero) hinter dem Consent-Button */
.dba-map-bg-wrap::before {
  content: "";
  position: absolute;
  inset: -24px; /* Overscan, damit die Blur-Kanten nicht durchscheinen */
  background-image: var(--map-poster, none);
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  transform: scale(1.06);
  z-index: 0;
}
/* Lesbarkeits-Overlay über dem Blur */
.dba-map-bg-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(240, 242, 244, 0.35);
  z-index: 1;
}
.dba-mapsbutwrap {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 380px;
  padding: 2rem;
}
.dba-mapsbutwrap p {
  font-size: 0.875rem;
  color: var(--bodycolor);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* ── Projekthighlights ───────────────────────────────────────── */
.project-highlights {
  padding-top: clamp(3rem, 5vw, 4.5rem); /* Abstand oben wie Startseiten-Sektionen */
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* City-Label + Titel (FRANKENTHAL / STRANDBAD QUARTIER) etwas höher ziehen */
.project-detail-cityhead {
  margin-top: -1.75rem;
}
.project-highlights__intro {
  max-width: 820px;
  margin: 1.25rem 0 3rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700, #4a5568);
}

/* full-width band: position relative so band-bg can bleed to viewport edges */
.project-highlights__band {
  position: relative;
  padding-top: 2.75rem;
  padding-bottom: 1rem;
}

/* full-viewport-width grey band — starts at circle midpoint, covers circle bottom + label */
.project-highlights__band-bg {
  position: absolute;
  top: calc(2.75rem + 38px); /* padding-top + half of 76px circle */
  left: 0;
  right: 0;
  height: calc(38px + 0.9rem + 3.5rem + 1.25rem); /* bottom-half circle + gap + label rows + padding */
  background: #d9e5ec;
  z-index: 0;
}

/* unified card grid — each card = icon-col + desc, stays paired on responsive */
.project-highlights__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* overridden by inline style */
  column-gap: 0;
}

.project-highlights__item {
  display: flex;
  flex-direction: column;
  cursor: default;
}

/* icon+label — transparent so band-bg shows through */
.project-highlights__icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 0 0.75rem 1.25rem;
  text-align: center;
  background: none;
}
.project-highlights__item:hover .project-highlights__circle {
  transform: scale(1.06);
}

/* teal circle */
.project-highlights__circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: none; /* kein CSS-Kreis mehr — Icons bringen eigenen Kreis + Symbol mit */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--ease);
}
.project-highlights__circle img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  display: block;
}

/* label */
.project-highlights__label {
  font-size: 0.8rem;
  font-family: 'Klavika-Medium';
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #437183;
  line-height: 1.4;
  margin-top:12px;
  min-height: 40px;
}

/* description — hidden, revealed on hover via CSS */
.project-highlights__desc {
  padding: 1.1rem 0.75rem 0;
  font-size: 0.8rem;
  color: var(--gray-700);
  line-height: 1.65;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  text-align: center;
}
.project-highlights__item:hover .project-highlights__desc {
  opacity: 1;
  visibility: visible;
}

/* ── Projektkennzahlen ───────────────────────────────────────── */
/* same full-width band pattern as Projekthighlights */
.project-kennzahlen__band {
  position: relative;
  width: 100%;
  margin-top: 2.5rem;
  padding-bottom: 2rem;                       /* Innenabstand der blauen Box (unverändert) */
  margin-bottom: clamp(2rem, 4vw, 3.5rem);    /* zusätzlicher Abstand NACH der Box (verdoppelt den Gap zum Slider) */
}
.project-kennzahlen__band-bg {
  position: absolute;
  top: 24px;           /* half of 48px icon height */
  left: 0;
  right: 0;
  bottom: 0;
  background: #d9e5ec;
  z-index: 0;
}
.project-kennzahlen__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 0;
}

/* each column */
.project-kennzahlen__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
  text-align: center;
}

/* icon + badge wrapper */
.project-kennzahlen__icon-wrap {
  position: relative;
  width: auto;
  min-width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.project-kennzahlen__icon-wrap img {
  width: auto;
  height: 42px; /* feste Höhe → alle Kennzahlen-Icons gleich hoch (Breite automatisch), etwas kleiner wie XD */
  max-width: 92px;
  object-fit: contain;
  display: block;
}

/* number badge — top-right corner of icon */
.project-kennzahlen__badge {
  position: absolute;
  top: -4px;
  right: -10px;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #8fa8b8;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* value (bold) and label (subtitle) */
.project-kennzahlen__value {
  display: block;
  margin-top: 0.75rem;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #5a7f96; /* Stahlblau wie XD/Icon */
  line-height: 1.3;
}
.project-kennzahlen__label {
  display: block;
  margin-top: 0.25rem;
  font-size: 16px;
  color: #6b7d88; /* helleres Steel-Grey wie XD */
  line-height: 1.4;
}

/* ── CTA row ─────────────────────────────────────────────────── */
.project-detail-cta {
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.project-detail-cta__row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* ════════════════════════════════════════════════════════════════
   PROJECT ARCHIVE PAGE
   ════════════════════════════════════════════════════════════════ */
.projects-archive-page { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.project-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.project-list-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 2rem;
}

/* ── Project / News list block wrappers ─────────────────────── */
.projects-list-block,
.news-list-block { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.projects-list__empty,
.news-archive-empty { color: var(--gray-400); padding: 2rem 0; }

/* ── Dropdown filter bar ────────────────────────────────────── */
.pf-filters {
  display: flex;
  gap:15px;
  margin-bottom: 2.5rem;
  position: relative;
}

.pf-dropdown {
  position: relative;
  min-width: 0;
  border-top: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  border-left: 0;
}

.pf-dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bodycolor);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--ease);
}
.pf-dropdown.has-active .pf-dropdown__toggle {  font-weight: 600; font-family: 'Klavika-Regular-Italic'; }
.pf-dropdown.is-open    .pf-dropdown__toggle {  font-weight: 600;font-family: 'Klavika-Regular-Italic'; }

.pf-arrow {
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.pf-dropdown.is-open .pf-arrow { transform: rotate(180deg); }

.pf-dropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  left: -1px;
  min-width: calc(100% + 2px);
  background: #cecece;
  border: 1px solid #cecece;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  min-width: 180px;
}
.pf-dropdown.is-open .pf-dropdown__panel { display: block; }

.pf-dropdown__option {
  display: block;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-family: 'Klavika-Regular';
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bodycolor);
  text-decoration: none;
  transition: background var(--ease);
  white-space: nowrap;
}
.pf-dropdown__option:hover, .pf-dropdown__option.is-active   {
  font-family: 'Klavika-Regular-Italic';
  font-weight: 600;
}
button.pf-dropdown__option {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
@media (max-width: 680px) {
  .pf-filters { flex-direction: column; }
  .pf-dropdown + .pf-dropdown { border-left: none; border-top: 1px solid var(--gray-200); }
  .pf-dropdown__panel { position: static; box-shadow: none; border-left: none; border-right: none; }
}

/* ════════════════════════════════════════════════════════════════
   GALERIE CARDS (project detail)
   ════════════════════════════════════════════════════════════════ */
.project-galerie {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.project-galerie__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
/* genau 3 Galerien → alle drei in einer Reihe (bei 2 bleibt es groß in 2 Spalten) */
@media (min-width: 900px) {
  .project-galerie__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
}
.project-galerie__card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.project-galerie__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gray-100);
}
.project-galerie__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.project-galerie__card:hover .project-galerie__thumb img {
  transform: scale(1.04);
}
.project-galerie__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--gray-100);
}
.project-galerie__label {
  margin: 8px 0 0 0;
  padding: 1rem 0 0 1.25rem;
  border-left: 1px solid var(--gray-400);
  font-family: 'Klavika-Light', sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--bodycolor);
  text-transform: none;
  line-height: 1.2;
}

/* ════════════════════════════════════════════════════════════════
   GALLERY DETAIL PAGE
   ════════════════════════════════════════════════════════════════ */
.gallery-detail {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.gallery-detail__topbar {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}
.gallery-detail__back {
  font-size: 0.85rem;
  color: var(--bodycolor);
  text-decoration: none;
  letter-spacing: 0.04em;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.gallery-detail__back:hover { opacity: 1; }

.gallery-detail__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 2rem;
}
.gallery-detail__title {
  font-family: 'Klavika-Light', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 400;
  color: var(--bodycolor);
  margin: 0;
}
.gallery-detail__filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.gallery-filter {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--gray-300);
  background: transparent;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--bodycolor);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gallery-filter.is-active,
.gallery-filter:hover {
  background: var(--bodycolor);
  color: var(--white);
  border-color: var(--bodycolor);
}

/* filter bar (native selects) */
.gallery-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.25rem 0 1.5rem;
}
.gallery-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gallery-filter-label {
  font-family: 'Klavika-Light', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-600, #6b7280);
}
.gallery-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 2px;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  font-family: 'Klavika-Light', sans-serif;
  font-size: 0.875rem;
  color: var(--bodycolor);
  cursor: pointer;
  min-width: 140px;
  transition: border-color 0.15s;
}
.gallery-filter-select:focus {
  outline: none;
  border-color: var(--bodycolor);
}

/* month-grouped content wrapper */
.gallery-detail__content { padding-bottom: 3rem; }
.gallery-month-group { margin-bottom: 2.5rem; }
.gallery-month-heading {
  font-family: 'Klavika-Light', sans-serif;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bodycolor);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-300);
}

/* image grid */
.gallery-detail__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.gallery-detail__item {
  overflow: hidden;
  background: var(--gray-100);
  position: relative;
}
.gallery-detail__img-link {
  display: block;
  position: relative;
}
.gallery-detail__img-link img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.gallery-detail__item:hover .gallery-detail__img-link img {
  transform: scale(1.03);
}
.gallery-detail__caption {
  display: block;
  font-size: 0.78rem;
  color: var(--gray-500);
  margin: 0.35rem 0 0;
  padding: 0 0.25rem;
}

/* video items inside unified grid */
.gallery-detail__item--video .gallery-detail__video-link {
  display: block;
  position: relative;
}
.gallery-detail__video-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bodycolor);
}
.gallery-detail__video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.gallery-detail__video-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--gray-200);
}
.gallery-detail__item--video:hover .gallery-detail__video-thumb img {
  opacity: 0.7;
}
.gallery-detail__play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.gallery-detail__play-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

/* ════════════════════════════════════════════════════════════════
   STANDORT IMAGE-ICON-GALLERY (exact port from strandbad-quartier.com)
   ════════════════════════════════════════════════════════════════ */

/* Utility shims (reference site uses Bootstrap; we ship these here) */
.overflow-hid          { overflow: hidden; }
.position-relative     { position: relative; }
.d-flex                { display: flex; }
.justify-content-center{ justify-content: center; }
.align-items-center    { align-items: center; }

/* facilities-image — reference base circle class */
.facilities-image {
  border-radius: 50%;
  border: 1px solid #04325b;
  width: 50px;
  height: 50px;
  padding: 0;
  background-color: #03325b;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.image-icon-gallery .facilities-image {
  position: absolute;
  top: -50px;
  left: -25px;
}

.image-icon-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-top: 60px;
  margin-bottom: 75px;
}

.gallery-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 2px;
}

.gallery-image-wrapper { position: relative; }
.gallery-image-wrap-inner { overflow: hidden; }

.gallery-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-icon { width: 30px; height: 30px; display: block; filter: brightness(0) invert(1); }

.gallery-text {
  font-size: 14px;
  color: #437083;
  line-height: 1.4;
  padding: 10px 10px 15px 10px;
  position: relative;
}

.gallery-text p { margin-bottom: 0; font-weight: 500; }
.gallery-text-wrap { overflow: hidden; }

/* Icon circle — base */
.gallery-icon-overlay {
  border-radius: 50%;
  border: 1px solid #437083;
  width: 55px;
  height: 55px;
  padding: 0px;
  background-color: #437083;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* Absolutely positioned within .gallery-text (position:relative) */
.image-icon-gallery .gallery-icon-overlay {
  position: absolute;
  top: -62px;
  left: -25px;
}

/* ── Desktop 5-item layout (992px+) ─────────────────────────── */
@media (min-width: 992px) {
  .image-icon-gallery {
      max-width: 75%;
      margin: 50px auto 0 auto;
  }
  .gallery-item:nth-child(1) { align-items: flex-end; width: 60%; margin-left: 35%; }
  .gallery-item:nth-child(1) .gallery-image-wrapper { width: 34%; }
  .gallery-item:nth-child(1) .gallery-image-wrap-inner { aspect-ratio: 1.3; }
  .gallery-item:nth-child(1) .gallery-text { width: 58%; }

  .gallery-item:nth-child(2) { flex-direction: column; position: absolute; left: 0; top: 15%; width: 35%; }
  .gallery-item:nth-child(2) .gallery-image-wrapper { width: 60%; margin-left: auto; }
  .gallery-item:nth-child(2) .gallery-image-wrap-inner { aspect-ratio: 8/9; }
  .gallery-item:nth-child(2) .gallery-text { text-align: right; margin-right: 25%; }
  .gallery-item:nth-child(2) .gallery-icon-overlay { right: 125px; left: auto; top: -58px; }

  .gallery-item:nth-child(3) { align-items: center; width: 65%; margin-left: 35%; }
  .gallery-item:nth-child(3) .gallery-image-wrapper { width: 52%; }
  .gallery-item:nth-child(3) .gallery-image-wrap-inner { aspect-ratio: 1.52; }
  .gallery-item:nth-child(3) .gallery-text { width: 38%; align-self: flex-end; margin-bottom: 20px; }

  .gallery-item:nth-child(4) { flex-direction: column; width: 25%; margin-left: 27%; }
  .gallery-item:nth-child(4) .gallery-image-wrap-inner { aspect-ratio: 1.47; }
  .gallery-item:nth-child(4) .gallery-icon-overlay { top: -58px; }

  .gallery-item:nth-child(5) { width: 48%; }
  .gallery-item:nth-child(5) .gallery-image-wrapper { width: 54%; }
  .gallery-item:nth-child(5) .gallery-image-wrap-inner { aspect-ratio: 1.18; }
  .gallery-item:nth-child(5) .gallery-text { width: 46%; margin-top: 80px; }
}

@media (min-width: 992px) and (max-width: 1400px) {
  .gallery-item:nth-child(2) .gallery-icon-overlay { top: -52px; }
  .gallery-item:nth-child(4) .gallery-icon-overlay { top: -52px; }
}

/* ── Mobile (< 992px) ──────────────────────────────────────── */
@media (max-width: 991.9px) {
  .image-icon-gallery { margin-top: 30px; }
  .gallery-item { width: 100%; }
  .image-icon-gallery .gallery-icon-overlay { top: -52px; }
  /* odd items: icon on right */
  .gallery-item:nth-child(2n+1) .gallery-icon-overlay { right: 15px; left: auto; }
  .gallery-item:nth-child(2n+1) .gallery-text { padding-right: 20px; }
  /* even items: icon on left, text right-aligned */
  .gallery-item:nth-child(2n) .gallery-icon-overlay { left: 15px; }
  .gallery-item:nth-child(2n) .gallery-text { padding-left: 20px; text-align: right; }
  .gallery-item:nth-child(2n) .gallery-text-inner { margin-left: auto; }
}

/* ── project-standort section-header style ── */
.project-standort { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.project-standort__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
  align-items: start;
}


/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .project-detail-hero { height: clamp(240px, 55vw, 400px); }
  .project-standort__layout { grid-template-columns: 1fr; }
  .project-archive-grid { grid-template-columns: repeat(2, 1fr); }
  .project-galerie__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-detail__grid { grid-template-columns: repeat(2, 1fr); }
  /* intro: stack on tablet */
  .project-detail-intro { grid-template-columns: 1fr; }
  .project-detail-intro__cta { flex-direction: row; flex-wrap: wrap; }
  /* highlights: collapse to 3-col on tablet */
  .project-highlights__grid { grid-template-columns: repeat(3, 1fr) !important; }
  .project-kennzahlen__grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .project-highlights__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .project-kennzahlen__grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* band-bg doesn't work at 2-col wrap — use per-card grey instead */
  .project-highlights__band-bg { display: none; }
  .project-highlights__icon-col { background: #d9e5ec; padding-top: 1.25rem; }
  /* always show descriptions on touch */
  .project-highlights__desc { opacity: 1 !important; visibility: visible !important; }
}
@media (max-width: 600px) {
  .project-archive-grid { grid-template-columns: 1fr; }
  .project-detail-stats { padding: 1.25rem; gap: 1rem; }
  .project-impressionen__grid { gap: 1.5rem 2rem; }
  .project-galerie__grid { grid-template-columns: 1fr; }
  .gallery-detail__grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .gallery-detail__video-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TEAM BLOCK
   ============================================================ */
.section-team {
  padding: 1rem 0 4rem;
}

.team-grid {
  display: grid;
  gap: 2.5rem 2rem;
  margin-top: 2rem;
}
.team-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.team-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.team-member__photo-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.team-member__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  /* Warm-Stich reduzieren → neutraler, wie die Startseiten-Fotos */
  filter: saturate(0.85) contrast(1.02);
}

.team-member__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.team-member__name {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  line-height: 1.2;
}
.team-member__position {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #444;
  margin: 0;
}
.team-member__email {
  display: inline-block;
  font-size: 0.875rem;
  text-decoration: none;
  margin-top: 0.3rem;
  word-break: break-all;
}
.team-member__email:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .team-grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .team-grid--cols-3,
  .team-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .team-grid--cols-3,
  .team-grid--cols-4 { grid-template-columns: 1fr; }
  .team-member__photo-wrap { aspect-ratio: 4 / 3; }
}

/* ============================================================
   CONTACT FORM 7 — DBA STYLE
   ============================================================ */

/* Response messages */
.wpcf7 form .wpcf7-response-output { border: none; padding: 0; margin: 1rem 0 0; font-size: 0.875rem; }
.wpcf7 form.sent .wpcf7-response-output    { color: #3d7080; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output { color: #3d7080; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 12px; color: #3d7080; margin-top: 3px; }

/* Outer form border */
.wpcf7 form.wpcf7-form .wpcf7-form-control { 
  border: 1px solid #c8c8c8; 
  border-bottom:none;
  border-left:none;
}
.wpcf7 form.wpcf7-form .wpcf7-form-control.wpcf7-textarea{
  border-bottom: 1px solid #c8c8c8; 
}

/* 2-col row */
.wpcf7 .cf7-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.wpcf7 .cf7-row .wpcf7-form-control-wrap { display: block; }

/* All field controls — no individual border; borders come from the outer box + row borders */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid #c8c8c8;
  border-radius: 0;
  background: #fff;
  padding: 11px 18px;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: .08em;
  color: #1d2327;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
/* Left cell in 2-col row gets a right border */
.wpcf7 .cf7-row .wpcf7-form-control-wrap:first-child input,
.wpcf7 .cf7-row .wpcf7-form-control-wrap:first-child select { border-right: 1px solid #c8c8c8; }

/* Textarea: no bottom border (it's the last field before submit) */
.wpcf7 textarea { border-bottom: none; resize: vertical; min-height: 150px; }

/* Placeholder */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 14px;
}

/* ── CF7 custom select widget ─────────────────────────────── */
.wpcf7 .cf7-select-wrap { position: relative; display: block; margin-bottom: 10px; }

@media (min-width: 768px) {
  .wpcf7 .cf7-select-wrap { width: 49.3%; }
}

.cf7-row { margin-bottom: 10px; }

.cf7-custom-select { position: relative; }

/* Use !important to win over any theme button resets */
.wpcf7 .cf7-custom-select__toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  background: #fff !important;
  border: 1px solid #c8c8c8 !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  text-align: left !important;
  font-size: 14px !important;
  font-family: inherit !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #9ca3af !important;
  gap: 12px !important;
  line-height: 1.4 !important;
}
.wpcf7 .cf7-custom-select__toggle svg { flex-shrink: 0; transition: transform .2s; color: #666; }
.wpcf7 .cf7-custom-select.is-open .cf7-custom-select__toggle svg { transform: rotate(180deg); }
.wpcf7 .cf7-custom-select.has-value .cf7-custom-select__toggle { color: #1d2327 !important; }

.wpcf7 .cf7-custom-select__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #cecece;
  border: none;
  z-index: 200;
}
.wpcf7 .cf7-custom-select.is-open .cf7-custom-select__panel { display: block; }

.wpcf7 .cf7-custom-select__option {
  display: block !important;
  width: 100% !important;
  padding: 8px 18px !important;
  background: none !important;
  border: none !important;
  text-align: left !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .1s !important;
  border-radius: 0 !important;
}
.wpcf7 .cf7-custom-select__option:first-child { border-top: none !important; }
/* Hover wie Nav-Submenu: nur Kursiv (kein Bold → kein Zappeln) + dezenter Hintergrund */
.wpcf7 .cf7-custom-select__option:hover, .wpcf7 .cf7-custom-select__option.is-active { font-family: 'Klavika-Regular-Italic'; background: #bfc4c9 !important; }

/* Submit row */
.wpcf7 .cf7-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 0 0;
  margin-bottom:40px;
}
/* Submit garantiert rechtsbündig (Sicherheitsnetz, falls flex-end ausgehebelt wird) */
.wpcf7 .cf7-footer input[type="submit"] { margin-left: auto; }
.wpcf7 input[type="submit"] {
  display: inline-block;
  padding: 0.5rem 1.75rem;
  font-size: 14px;
  font-family: 'Klavika-Regular';
  font-weight: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  background: #808c9a;
  border: none;
  color: var(--white);
  cursor: pointer;
  transition: background 0.3s ease;
}
.wpcf7 input[type="submit"]:hover {
  background: #3d7080;
  color: var(--white);
}
.wpcf7 .wpcf7-spinner { margin-left: 10px; }

/* Claim-Zeile (wie Intro „WIR SCHAFFEN WOHNRAUM.") */
.dba-claim { font-family: 'Klavika-Medium'; margin-top: 1.5rem; }

/* ── Scroll-Reveal: Sektionen faden beim Scrollen sanft nach oben ein ── */
.reveal-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── KARRIERE / Stellenangebote ─────────────────────────────── */
.jobs-list { display: flex; flex-direction: column; margin-top: 1.5rem; }
.job-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; border-top: 1px solid var(--gray-200, #e5e7eb);
  text-decoration: none; color: inherit; transition: padding var(--ease), background var(--ease);
}
.jobs-list .job-card:last-child { border-bottom: 1px solid var(--gray-200, #e5e7eb); }
.job-card:hover { background: #f5f8fa; padding-left: 1rem; padding-right: 1rem; }
.job-card__meta { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bodycolor); margin: 0 0 0.25rem; }
.job-card__title { font-family: 'Klavika-Regular'; font-size: 22px; font-weight: 400; color: var(--dark); margin: 0 0 0.35rem; line-height: 1.2; }
.job-card__teaser { font-size: 16px; line-height: 1.5; color: var(--gray-700, #4a5568); margin: 0; max-width: 60ch; }
.job-card__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: #3d7080; white-space: nowrap; }
.job-card__arrow { transition: transform var(--ease); }
.job-card:hover .job-card__arrow { transform: translateX(4px); }
.jobs-empty { font-size: 16px; line-height: 1.6; color: var(--gray-700); padding: 1rem 0; }
.jobs-empty a, .job-detail__apply-hint a { color: #3d7080; }

/* Detailseite */
.section-job { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.job-detail { max-width: 800px; margin-top: 1.5rem; }
.job-detail__meta { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bodycolor); margin: 0 0 0.4rem; }
.job-detail__title { font-family: 'Klavika-Regular'; font-weight: 400; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; color: var(--dark); margin: 0 0 1.5rem; }
.job-detail__intro { font-size: 16px; line-height: 1.7; color: var(--gray-700); margin-bottom: 1.5rem; }
.job-detail__intro p { margin: 0 0 0.75rem; }
.job-detail__h { font-family: 'Klavika-Regular'; font-weight: 400; font-size: 20px; color: var(--dark); margin: 1.75rem 0 0.6rem; }
.job-detail__list { margin: 0 0 1rem; padding-left: 1.25rem; list-style: disc; }
.job-detail__list li { font-size: 16px; line-height: 1.6; color: var(--gray-700); margin-bottom: 0.4rem; }
.job-detail__note { background: #d9e5ec; padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 16px; line-height: 1.6; color: var(--gray-800); }
.job-detail__note p { margin: 0; }
.job-detail__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0 1rem; }
.job-detail__apply-hint { font-size: 16px; color: var(--gray-700); margin: 0 0 2rem; }
.job-detail__back { display: inline-block; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bodycolor); text-decoration: none; }
.job-detail__back:hover { color: var(--dark); }

/* Karriere-Body auf der Unternehmen-Seite */
.dba-section-body { max-width: var(--container); margin-inline: auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.dba-section-body > p { font-size: 16px; line-height: 1.7; color: var(--gray-700, #4a5568); margin: 0 0 1rem; max-width: 75ch; }
.dba-jobs-heading { font-family: 'Klavika-Regular'; font-weight: 400; font-size: 20px; color: var(--dark); margin: 2rem 0 0.25rem; }

@media (max-width: 600px) {
  .wpcf7 .cf7-row { grid-template-columns: 1fr; }
  .wpcf7 .cf7-row .wpcf7-form-control-wrap:first-child input { border-right: none; border-bottom: 1px solid #c8c8c8; }
}