/* ============================================================
   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:            #5C5E5F;   /* Gerüst-Grau auf die Hausfarbe gelegt (Überschriften) */
  --bodycolor:       #5C5E5F;
  --footer-grey:     #909ba5;
  --gray-800:        #3f4252;
  --gray-700:        #5C5E5F;   /* Gerüst-Grau auf die Hausfarbe gelegt (Fliesstext) */
  --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:       1600px;
  --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);
}

/* Kurze Seiten (Informationspflichten, Impressum) fuellten den Bildschirm
   nicht aus — der Fuss rutschte in die Seitenmitte und darunter stand Weiss.
   Anmerkung David 07.10.2026. Der Rumpf ist jetzt eine Spalte ueber volle
   Bildschirmhoehe, der Inhaltsbereich dehnt sich, der Fuss sitzt unten.
   Die Kopfzeile liegt fest und ausserhalb des Flusses, sie bleibt unberuehrt. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.site-main { padding-top: var(--header-h); flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

/* ── 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.
   Die Textspalte selbst ist ausgenommen — dort fliesst Button + Claim direkt unter den Text. */
.wp-block-columns:has(> .wp-block-column[style*="55%"]) > .wp-block-column:not([style*="55%"]) > *: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; }

/* Textspalte (Design 17.08.): MEHR ÜBER UNS linksbuendig in eigener Zeile unter dem Text,
   "WIR SCHAFFEN WOHNRAUM." als eigener Absatz darunter. */
/* Absaetze im Intro der STARTSEITE ohne Zusatzabstand — dort sind im XD alle Zeilen
   gleich weit auseinander. Auf den Unterseiten haben die Absaetze normalen Abstand. */
.home .wp-block-columns:has(> .wp-block-column[style*="55%"]) > .wp-block-column[style*="55%"] > p { margin-bottom: 0; }

.wp-block-columns:has(> .wp-block-column[style*="55%"]) > .wp-block-column[style*="55%"] p:has(> .btn) {
  display: block;
  margin-top: 1.5rem;
  margin-bottom: 0;
  font-family: inherit;
}
.wp-block-columns:has(> .wp-block-column[style*="55%"]) > .wp-block-column[style*="55%"] p:has(> .btn) .btn {
  flex: none;
  min-width: 226px;
}

/* 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" */
/* Zwei Buttons (SonderPROjekte: Alle SonderPROjekte + Jetzt Kontakt aufnehmen) untereinander */
.section-header__links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
  /* Gleicht die Höhendifferenz zwischen Überschrift (Zeilenhöhe 1, also gleich
     der Schriftgröße) und Button (30 px) aus — beide sitzen so auf einer Mittellinie. */
  margin-top: calc((clamp(28px, 3vw, 40px) - 30px) / 2);
}
/* Überschrift nach oben, sonst steht sie zwischen den zwei Buttons statt neben
   dem oberen. Nur dort, wo es die gestapelte Button-Gruppe gibt. */
.section-header:has(> .section-header__links) { align-items: flex-start; }
.section-header__links .btn { text-align: center; }

/* ── 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: 64px; width: auto; filter: brightness(0) invert(1); }
/* Der senkrechte Strich im Logo sitzt bei 196,5 von 700 px Bildbreite; bei 64 px
   Höhe sind das 71 px von der linken Logokante. Um genau so viel wandert das Logo
   nach links, damit der Strich auf einer Linie mit „NEWS", „Was gibt's Neues?" usw.
   steht. Unterhalb von 1700 px fehlt daneben der Platz → dann bündig im Container. */
.site-header__logo { margin-left: -71px; }
@media (max-width: 1700px) {
  .site-header__logo { margin-left: 0; }
}

.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;
}

/* Hover: kursiv */
.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);
}

/* Aktiver Bereich in der Navigation: ein Schnitt fetter (Medium), darunter die
   aufgerufene Unterseite (XD). Gilt auch beim Hovern über den aktiven Punkt,
   deshalb steht die Regel hinter der Hover-Regel. */
.site-nav__item.is-active > .site-nav__link,
.site-nav__item:not(.site-nav__sub-item).is-active:hover > .site-nav__link {
  font-family: 'Klavika-Bold';   /* fetter Schnitt … */
  font-style: italic;            /* … kursiv gestellt (einen Bold-Kursiv-Schnitt gibt es nicht) */
  opacity: 1;
  transform: none;
}
/* Der Name der Unterseite hängt unter dem Menüpunkt, ohne ihn anzuheben —
   deshalb absolut positioniert: er zählt nicht zur Zeilenhöhe. */
.site-nav__item.is-active > .site-nav__link { position: relative; }
.site-nav__unterseite {
  position: absolute;
  /* 100% ist die Unterkante inkl. des 8px-Innenabstands des Links – den ziehen
     wir wieder ab, damit das Label dicht unter dem Menüpunkt sitzt.
     left = Innenabstand des Links, damit es bündig unter dem ersten Buchstaben steht. */
  top: calc(100% - 12px);
  left: 0.75rem;
  right: auto;
  font-family: 'Klavika-Regular';
  font-style: normal;   /* nicht vom kursiven Elternpunkt erben */
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* Dropdown */
.site-nav__dropdown {
  position: absolute;
  /* 12 px hoeher als die Linkkante: genau dort beginnt der Name der
     aufgerufenen Unterseite, den die Box verdecken soll. */
  top: calc(100% - 11px); 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 { font-family: 'Klavika-Regular-Italic'; }
.site-nav__sub-item.is-active .site-nav__link { font-family: 'Klavika-Bold'; font-style: italic; }
.site-nav__sub-item .site-nav__link{
  color: var(--bodycolor);
}

/* Ein Menüpunkt bricht nie um. „DBA LOG-IN" stand sonst auf schmalen Schirmen
   drei Zeilen hoch und mitten im Wort getrennt („DBA / LOG- / IN"). */
.site-nav__link { white-space: nowrap; }

/* Zwischen Handy-Punkt und 1100 px wird es eng: Logo und fünf Menüpunkte
   teilen sich eine Zeile. Logo und Innenabstände rücken dort etwas zusammen,
   damit die volle Leiste länger stehen bleibt, statt vorzeitig zum Burger zu
   wechseln.
   Der Bereich beginnt bei 769 und nicht erst bei 861 px, obwohl die Leiste bis
   860 px als Burger erscheint: sonst wäre das Logo bei 860 px größer als bei
   861 px — es würde beim Breiterziehen des Fensters schrumpfen. Die
   Navigationsregeln darin überschreibt das Mobilmenü weiter unten ohnehin. */
@media (min-width: 769px) and (max-width: 1100px) {
  .site-header__logo .custom-logo { height: 52px; }
  .site-nav__list { gap: 0; }
  .site-nav__link { padding-left: 0.5rem; padding-right: 0.5rem; letter-spacing: 0.05em; }
  .site-nav__unterseite { left: 0.5rem; }
}

/* Mobile toggle */
.site-header__mobile-toggle {
  display: none;
  flex-direction: column;
  /* space-between statt space-around: die drei Balken liegen dann bei 1, 10 und
     19 px — die Verschiebung um 9 px trifft beide genau auf die Mitte, sonst
     schiessen sie darueber hinaus und das Kreuz steht schief. */
  justify-content: space-between;
  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; }

/* Unterseiten von „Unternehmen": Titelbild wie im XD — dort 607 px bei 1920 px
   Breite, also rund ein Drittel niedriger als auf der Startseite. Bezug ist die
   Breite, nicht die Fensterhöhe, damit es auf jedem Schirm gleich aussieht. */
.parent-pageid-8 .hero { height: 32vw; min-height: 300px; max-height: 620px; }
.parent-pageid-8 .hero__bg img { object-position: center 70%; }
/* Team-Titelbild weiter nach unten ziehen, damit das Gesicht im Bild bleibt */
.page-id-23 .hero__bg img { object-position: center 18%; }

@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;
  /* --spalten kommt aus dem Block: die Startseite hat vier Kennzahlen,
     „Über die DBA" fünf Fakten. */
  grid-template-columns: repeat(var(--spalten, 4), minmax(0, 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; }
/* Design 17.08.2026: Kategorie-Label entfällt, stattdessen Zahl gross + Wort daneben. */
.stats-item__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;      /* reicht der Platz nicht, rutscht das ganze Wort in die naechste Zeile */
  gap: 8px;
  margin-bottom: 0.4rem;
}
.stats-item__num {
  font-family: 'Klavika-Medium';
  font-size: 34px;
  line-height: 1.1;
  color: #437183;
}
.stats-item__unit {
  font-size: 16px;
  /* Woerter werden nie getrennt: „Wohneinheiten" stand sonst als
     „Wohneinheit / en" da. Wird der Platz eng, bricht die Zeile zwischen den
     Stuecken um (flex-wrap oben). */
  overflow-wrap: normal;
  color: var(--bodycolor);
}
.stats-item__label {
  font-family: 'Klavika-Light';
  font-size: 16px;
  color: var(--bodycolor);
  line-height: 1.45;
}

/* ── 12. MEDIA CARDS (Broschüre/Film) — Design 17.08.2026 ───── */
/* Karte: Bild formatfüllend, darüber am unteren Rand ein halbtransparentes
   Band mit Icon + Titel + Unterzeile. Karte trägt einen weichen Schatten. */
.media-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  /* XD: beide Karten zusammen ~560 px breit, rechtsbündig in der Spalte */
  max-width: 560px;
  margin-left: auto;
}
.media-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--gray-200, #e5e7eb);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.13);
}
.media-card__media { display: block; aspect-ratio: 6 / 5; }
.media-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.media-card:hover .media-card__media img { transform: scale(1.04); }

.media-card__band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  /* Milchglas: das Bild scheint weichgezeichnet durch das weisse Band */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}
.media-card__icon {
  flex: 0 0 auto;
  color: #5c5e5f;              /* Strichfarbe aus dem XD */
  line-height: 0;
}
.media-card__icon svg { height: 56px; width: auto; display: block; }
.media-card__text { display: block; min-width: 0; }
.media-card__title {
  display: block;
  font-family: 'Klavika-Medium';
  font-size: 16px;
  line-height: 1.3;
  color: var(--bodycolor);
}
.media-card__sub {
  display: block;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.3;
  color: var(--bodycolor);
}

@media (max-width: 480px) {
  .media-cards { grid-template-columns: 1fr; }
}

/* ── BILD-TEXT-REIHE (Unternehmen) ──────────────────────────────
   Abwechselnd Bild/Text. Kundenkommentare 08/2026: Bilder etwas schmaler und
   bündig mit dem Text, Überschriften einheitlich mit Strich. */
.section-bildtext { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.section-bildtext__intro {
  max-width: 860px;
  margin: 0 0 2.5rem 92px;   /* eingerueckt wie der Fliesstext */
  line-height: 1.7;
  color: var(--bodycolor);
}
.bildtext-reihe {
  display: grid;
  /* Kundenkorrektur 26.08.: die Bilder duerfen kleiner sein (vorher 38 %). */
  grid-template-columns: 30% 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  /* Anmerkung der Kundin 26.08.: die Bilder sollen buendig mit dem Text sein und
     in der Hoehe gekuerzt werden — sie laufen jetzt genau ueber die Hoehe der
     Textspalte und werden dafuer beschnitten statt unten herauszuragen. */
  align-items: stretch;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.bildtext-reihe--gedreht { grid-template-columns: 1fr 30%; }
.bildtext-reihe--gedreht .bildtext-reihe__bild { order: 2; }
.bildtext-reihe--gedreht .bildtext-reihe__text { order: 1; }
.bildtext-reihe__bild img { width: 100%; height: auto; display: block; }
/* Nebeneinander gibt der Text die Hoehe vor: das Bild liegt frei im Feld und
   wird auf diese Hoehe beschnitten, statt selbst die Zeile zu strecken.
   Untereinander (Handy) bleibt es ein normales Bild. */
@media (min-width: 783px) {
  .bildtext-reihe__bild { position: relative; min-height: 200px; }
  .bildtext-reihe__bild img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
  }
}
/* Ohne Bild soll der Text nicht neben einer leeren Spalte stehen */
.bildtext-reihe--ohne-bild { grid-template-columns: 1fr; }
.bildtext-reihe--ohne-bild .bildtext-reihe__bild { display: none; }
.bildtext-reihe--ohne-bild .bildtext-reihe__text { max-width: 860px; }
.bildtext-reihe__titel {
  /* Eine Stufe unter den Sektions-Ueberschriften (40 px) und in derselben Farbe
     wie diese — das Blau des XD-Entwurfs stand zu stark im Fliesstext.
     Ohne Strich, wie im Design. (Der Kundenkommentar „einheitlich mit Strich" steht unter
     Vorbehalt: „Bitte um Rücksprache mit Sarah Hoffmann".) */
  font-family: 'Klavika-Regular';
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: normal;
  line-height: 1.2;
  color: var(--bodycolor);
  margin: 0 0 20px;
}
.bildtext-reihe__text { max-width: 620px; }
.bildtext-reihe__text p { margin: 0; line-height: 1.7; color: var(--bodycolor); }
/* Liegt das Bild rechts, sitzt der Text im XD rechtsbündig daneben */
.bildtext-reihe--gedreht .bildtext-reihe__text { text-align: right; margin-left: auto; }
@media (max-width: 782px) {
  .bildtext-reihe,
  .bildtext-reihe--gedreht { grid-template-columns: 1fr; }
  .bildtext-reihe--gedreht .bildtext-reihe__bild,
  .bildtext-reihe--gedreht .bildtext-reihe__text { order: 0; }
}

/* Fliesstext in lesbarer Breite, eingerückt wie im XD */
.dba-fliesstext { max-width: 860px; margin: 24px 0 0 92px; line-height: 1.7; color: var(--bodycolor); }

/* Lange Fliesstexte — Impressum, Datenschutz, Informationspflichten.
   Der Reset ganz oben nimmt Links die Farbe und Listen die Punkte; das passt
   für Navigationen und Kacheln, macht im Lauftext aber Verweise unsichtbar
   und Aufzählungen unlesbar. Hier beides zurückholen, eng begrenzt auf diesen
   Textbereich. */
.dba-fliesstext a { color: #437183; text-decoration: underline; }
.dba-fliesstext a:hover { text-decoration: none; }
.dba-fliesstext ul,
.dba-fliesstext ol { list-style: disc outside; padding-left: 1.4em; margin: 0 0 1.1rem; }
.dba-fliesstext ol { list-style: decimal outside; }
.dba-fliesstext li { margin-bottom: 0.45rem; }
.dba-fliesstext p { margin: 0 0 1.1rem; }
.dba-fliesstext h2,
.dba-fliesstext h3 { margin: 2.25rem 0 0.7rem; }
.dba-fliesstext > *:first-child { margin-top: 0; }
.dba-fliesstext > *:last-child { margin-bottom: 0; }
/* Luft zum Fuss, sonst klebt der letzte Absatz am grauen Band. */
.wp-block-group.container > .dba-fliesstext { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Logo-Band der Mitgliedschaften im Impressum: 30 % transparent, damit die
   fremden Zeichen sich dem Fliesstext unterordnen (David 07.10.2026). */
.dba-logoband img { opacity: 0.7; }

/* E-Mail-Adressen: sehen aus wie die uebrigen Verweise im Fliesstext. */
.dba-fliesstext a.dba-mailto { cursor: pointer; }

/* Seiten, die statt Fliesstext eine Liste langer Titel tragen — die
   Informationspflichten etwa. 860 px sind das Mass fuer lesbare Absaetze; ein
   Dokumententitel darf breiter laufen, sonst bricht er mitten im Namen um
   (David 07.10.2026). Der Einzug von 92 px bleibt. */
.dba-fliesstext--breit { max-width: none; }

@media (max-width: 782px) {
  .dba-fliesstext ul,
  .dba-fliesstext ol { padding-left: 1.2em; }
}
/* Buttons am rechten Rand der Sektion, wie im XD.
   Die Spalten werden an der Grundlinie ausgerichtet, damit die Button-Schrift
   auf derselben Linie sitzt wie die erste Zeile des Textes daneben. */
.dba-rechts { text-align: right; margin: 24px 0 0; }
/* Oben ausgerichtet: mit „baseline" zog der Button den Textspalten-Anfang nach
   unten (58 statt 32 px unter der Ueberschrift). Nebeneinander faellt dafuer der
   eigene Abstand des Buttons weg, damit er wieder auf der ersten Textzeile
   sitzt; untereinander bleiben die 24 px als Luft zum Text. */
.wp-block-columns:has(.dba-rechts) > .wp-block-column { align-self: start; }
@media (min-width: 782px) {
  .wp-block-columns:has(.dba-rechts) .dba-rechts { margin-top: 0; }
  /* Stehen zwei Schaltflaechen untereinander, braucht es dazwischen wieder Luft
     — sonst kleben sie zu einem Block zusammen. */
  .wp-block-columns:has(.dba-rechts) .dba-rechts + .dba-rechts { margin-top: 10px; }
}


/* ── STELLEN-LISTE (Karriere) ────────────────────────────────────
   Aufbau wie im XD: Bild links, daneben Ort in Versalien, Titel, Anriss und
   rechts der Link. Die Trennlinie sitzt UNTER der Zeile und beginnt erst beim
   Text — sie läuft nicht unter das Bild. */
.section-stellen { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.stellen-liste { list-style: none; margin: 0; padding: 0; }
.stellen-zeile {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding: 28px 0;
}
/* durchgehende Trennlinie unter der Zeile — beginnt beim Text, nicht beim Bild */
.stellen-zeile::after {
  content: "";
  position: absolute;
  left: calc(200px + clamp(1.5rem, 3vw, 2.5rem));
  right: 0;
  bottom: 0;
  height: 1px;
  background: #e2e7ea;   /* heller als die Sektionslinien */
}
.stellen-zeile__bild { display: block; overflow: hidden; }
.stellen-zeile__bild img { width: 100%; height: 132px; object-fit: cover; display: block; }
.stellen-zeile__ort {
  font-family: 'source_sans_prosemibold', var(--font);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bodycolor);
  margin: 0 0 6px;
}
.stellen-zeile__titel {
  font-family: 'source_sans_prosemibold', var(--font);
  font-size: 18px;
  font-weight: normal;
  color: var(--bodycolor);
  margin: 0 0 10px;
}
.stellen-zeile__titel a { color: inherit; text-decoration: none; }
.stellen-zeile__titel a:hover { color: #527c8d; }
.stellen-zeile__anriss { margin: 0; line-height: 1.6; color: var(--bodycolor); max-width: 58ch; }
.stellen-zeile__link {
  align-self: center;
  font-family: 'source_sans_prosemibold', var(--font);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #527c8d;
  text-decoration: none;
  white-space: nowrap;
}
.stellen-zeile__link:hover { text-decoration: underline; }
@media (max-width: 782px) {
  .stellen-zeile { grid-template-columns: 1fr; }
  .stellen-zeile__bild img { height: 190px; }
  .stellen-zeile::after { left: 0; }
}

/* ── ICON-REIHE (Fakten-Band und Ablauf) ─────────────────────────
   Maße aus dem XD: Icon 114 px, Titel Klavika Medium 18 in #437183,
   Beschreibung erscheint beim Überfahren (Kundenwunsch). */
.section-iconreihe { padding: clamp(2rem, 4vw, 3.5rem) 0; }
/* Reihen ohne Label sitzen direkt unter dem Text darueber und brauchen oben
   mehr Luft — bei den anderen schaffen Label und Linie den Abstand. */
.section-iconreihe:not(:has(.dba-section-header__label)) { padding-top: clamp(3.5rem, 7vw, 7rem); }
/* Abstand zwischen der Sektionslinie und den Icons (Kundenwunsch) */
.section-iconreihe > hr.dba-section-header__line { margin-bottom: 56px; }
/* Steht darunter erst ein Einleitungstext, gilt der uebliche Abstand wie in
   allen anderen Sektionen (16 px). */
.section-iconreihe--mit-intro > hr.dba-section-header__line { margin-bottom: 16px; }
/* Der Raum fuer die Beschreibung entsteht jetzt durch den Text selbst (er steht
   im Fluss). Hier bleibt nur die normale Luft des Abschnitts plus etwas Zugabe. */
.section-iconreihe--band { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
/* Ohne blauen Balken darf der Hovertext dichter unter dem Titel stehen. */
.section-iconreihe--prozess .iconreihe__text { margin-top: 14px; }
/* Kriterien-Reihe: die Beschreibung erschien hier frueher dauerhaft unter dem
   Band. Auf Wunsch der Kundin (29.09.2026) verhaelt sie sich jetzt wie auf der
   ganzen uebrigen Website und kommt erst beim Ueberfahren — die Regeln dafuer
   stehen bei .iconreihe__text weiter unten und gelten nun auch hier.
   Der blaue Streifen bekommt trotzdem eine feste Hoehe, damit er nur Icons und
   Titel umfasst: Punkt 146 px + 20 px Innenabstand − 45 px Anschnitt oben. */
/* Nur solange die Reihe einzeilig ist: sobald sie umbricht, muss das Band
   wieder alle Zeilen umfassen. */
@media (min-width: 1025px) {
  .section-iconreihe--kriterien .section-iconreihe__band::before,
  .section-iconreihe--band .section-iconreihe__band::before { bottom: auto; height: 121px; }
}
/* Platz unter dem Streifen fuer den Text, der beim Ueberfahren erscheint —
   dieselbe Luft wie bei der Band-Variante. */
.section-iconreihe--kriterien { padding-top: 104px; padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.section-iconreihe--kriterien .section-iconreihe__band { padding-bottom: 0; }
.section-iconreihe__intro {
  max-width: 860px;
  margin: 0 0 2.5rem 92px;   /* eingerueckt wie der Fliesstext */
  line-height: 1.7;
  color: var(--bodycolor);
}
/* Im XD beginnt das Band auf halber Icon-Höhe — die Icons ragen oben heraus,
   genau wie bei der Kennzahlen-Reihe der Startseite. */
.section-iconreihe--band .section-iconreihe__band { position: relative; padding-bottom: 20px; }
.section-iconreihe--band .section-iconreihe__band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 45px; bottom: 0;
  background: #d9e5ec;              /* dieselbe Bandfarbe wie die Kennzahlen der Startseite */
}
.section-iconreihe--band .container { position: relative; z-index: 1; }
.iconreihe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* minmax(0,…) statt 1fr: sonst weitet eine lange Beschriftung ihre eigene
     Spalte und die Abstände zwischen den Icons werden ungleich
     (Kundenanmerkung 25.09.2026). */
  grid-template-columns: repeat(var(--spalten, 5), minmax(0, 1fr));
  gap: 1rem;
  position: relative;
  /* gleich hohe Spalten: dadurch beginnt der Hovertext bei jedem Icon auf
     derselben Linie, egal ob der Titel ein-, zwei- oder dreizeilig ist */
  align-items: stretch;
}
/* Verbindungslinie nur im Ablauf */
.section-iconreihe--prozess .iconreihe::before {
  content: "";
  position: absolute;
  top: 45px;
  /* Die Linie läuft bis rechts neben das letzte Icon, damit die Pfeilspitze
     sichtbar bleibt — vorher endete sie darunter. */
  left: 7%;
  right: 2.5%;
  height: 2px;
  background: #527c8d;
  z-index: 0;
}
/* Pfeilspitze am Ende der Linie wie im XD */
.section-iconreihe--prozess .iconreihe::after {
  content: "";
  position: absolute;
  top: 38px;
  right: calc(2.5% - 11px);
  width: 0; height: 0;
  border-left: 12px solid #527c8d;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  z-index: 0;
}
.iconreihe__punkt {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 6px;
}
.iconreihe__punkt--hover { cursor: default; }
.iconreihe__icon {
  /* XD zeichnet 114 px bei 1920 Breite — auf der Seitenskala von 80 % sind das 90 px */
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.iconreihe__icon img,
.iconreihe__icon svg { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Hover-Zustand aus dem XD: der Kreis hinter dem Icon wird heller */
.iconreihe__icon svg .dba-icon-kreis { fill: #527c8d; transition: fill var(--ease); }
.iconreihe__punkt:hover .iconreihe__icon svg .dba-icon-kreis,
.iconreihe__punkt:focus-within .iconreihe__icon svg .dba-icon-kreis { fill: #a2b8c2; }
.iconreihe__nummer {
  width: 90px; height: 90px; border-radius: 50%;
  background: #527c8d; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Klavika-Medium'; font-size: 32px;
}
.iconreihe__titel {
  font-family: 'Klavika-Medium';
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #437183;
  /* Platz fuer zwei Zeilen, auch wenn der Titel nur eine braucht: sonst endet
     jede Spalte woanders und der Hovertext haengt mal naeher, mal weiter weg. */
  min-height: calc(2 * 1.3 * 16px);
  /* Notbremse, falls ein Wort breiter ist als seine Spalte — die eigentliche
     Umbruchstelle setzt die Vorlage hinter jeden Schrägstrich. */
  overflow-wrap: break-word;
}
/* Beschreibung erscheint beim Überfahren bzw. bei Tastaturfokus */
/* Sie steht IM FLUSS unter dem Titel und belegt ihren Platz dauerhaft — nur
   sichtbar wird sie beim Ueberfahren. Vorher war sie absolut gesetzt und zaehlte
   nicht zur Hoehe; sobald die Texte laenger wurden (Karriere, 30.09.2026), legten
   sie sich ueber den Abschnitt darunter. Der blaue Streifen bleibt trotzdem
   schmal, weil seine Hoehe weiter unten fest gesetzt ist. */
.iconreihe__text {
  margin: 52px auto 0;   /* Abstand zum blauen Balken */
  font-size: 16px;
  line-height: 1.5;
  color: var(--bodycolor);
  max-width: min(34ch, 100%);   /* nie breiter als die eigene Spalte */
  overflow-wrap: break-word;    /* bricht nur, wenn ein Wort allein nicht passt */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--ease), transform var(--ease);
  pointer-events: none;
}
.iconreihe__punkt:hover .iconreihe__text,
.iconreihe__punkt:focus-visible .iconreihe__text,
.iconreihe__punkt:focus-within .iconreihe__text { opacity: 1; transform: none; }

/* Ohne Maus und auf schmalen Schirmen steht der Text dauerhaft da — und zwar
   IM FLUSS, nicht absolut. Sonst überlagern sich die Einträge. */
@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
  .iconreihe__text {
    opacity: 1;
    transform: none;
    margin: 6px auto 0;   /* dicht unter dem Titel */
  }
  .section-iconreihe--band { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
  /* das blaue Band umfasst dann den ganzen Eintrag */
  .section-iconreihe--band .section-iconreihe__band { padding-bottom: 32px; }
}
/* Sieben Schritte nebeneinander werden unter ~1400 px zu eng */
@media (max-width: 1400px) {
  .section-iconreihe--prozess .iconreihe { grid-template-columns: repeat(4, 1fr); gap: 3rem 1.5rem; }
  .section-iconreihe--prozess .iconreihe::before,
  .section-iconreihe--prozess .iconreihe::after { display: none; }
  /* Ab hier steht die Reihe in zwei Zeilen — dort ist der Text immer sichtbar,
     wie auf dem Handy. */
  .section-iconreihe--prozess .iconreihe__text {
    opacity: 1;
    transform: none;
    margin: 6px auto 0;   /* dicht unter dem Titel */
  }
}
@media (max-width: 1024px) {
  .iconreihe,
  .section-iconreihe--prozess .iconreihe { grid-template-columns: repeat(2, 1fr); gap: 3rem 1.5rem; }
  .section-iconreihe--prozess .iconreihe::before,
  .section-iconreihe--prozess .iconreihe::after { display: none; }
}
@media (max-width: 560px) {
  .iconreihe,
  .section-iconreihe--prozess .iconreihe { grid-template-columns: 1fr; }
}

/* ── 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; }
/* News-Pfeile stehen immer NEBEN dem Slider, nie auf dem Bild. 48 px entspricht
   genau dem Innenabstand des Containers — damit passen sie bei jeder Fenster-
   breite daneben und werden nicht mehr am Rand abgeschnitten. */
.news-arrows-host .slick-prev { left:  calc(-1 * clamp(1rem, 4vw, 3rem)); }
.news-arrows-host .slick-next { right: calc(-1 * clamp(1rem, 4vw, 3rem)); }
.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. Bild und Textkasten nehmen 81 % der
   Kartenbreite ein, rechts bleiben 19 % Luecke — die Linie steht darin knapp
   links der Mitte, so wie im Entwurf, und nicht an der Kante der naechsten
   Karte (Korrektur 26.08.). Sie endet ueber der grauen Textbox. */
.news-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 12%;
  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: 0;   /* bündig mit der Sektions-Überschrift */
  }
}
.news-card__date {
  font-family: 'Klavika-Medium';   /* XD: Klavika Basic Medium 20px */
  font-size: 16px;
  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%;
    /* linksbündig statt zentriert — sonst steht die erste Karte 5 % eingerückt
       und fluchtet nicht mit „Was gibt's Neues?". Der Abstand zwischen den
       Karten bleibt gleich, er sitzt jetzt komplett rechts. */
    margin: 0 auto 0 0;
    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);
  /* Der Kasten ragt oben in das Bild hinein — der Text beginnt aber erst
     darunter, sonst liegt die Ueberschrift auf dem Foto. Der Innenabstand
     gleicht die Ueberlappung aus (5 % der Breite minus der 20 px) und legt
     24 px Luft dazu. */
  padding-top: calc(5% + 4px);
}
@media (min-width: 768px) {
  .news-card__body {
    max-width: 90%;
    margin-left: 10%;
  }
  /* Im Slider ist das Bild linksbündig → die Textbox rückt entsprechend mit,
     damit der Versatz zum Bild derselbe bleibt wie vorher. */
  /* Textbox schmaler: rechte Kante bleibt (95 %), die linke rückt ein — wie im
     XD, wo die Box links eingerückt ist und rechts über das Bild hinausragt. */
  .news-slider .news-card__body { margin-left: 13%; max-width: 82%; }
  .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. 3 Zeilen begrenzen */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.news-card__more {
  display: inline-block;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 1rem;   /* wie der fette Anleser darueber */
  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 {
  /* Der Text beginnt im Entwurf direkt unter der Ueberschrift — die
     Schaltflaechen rechts daneben stehen zwar tiefer, schieben ihn aber nicht
     nach unten. Eingerueckt wie alle Fliesstexte. */
  margin: 0 0 2rem 92px;
  max-width: 680px;
  color: var(--gray-700, #374151);
  line-height: 1.7;
}
.section-header:has(+ .section-projects__intro) { margin-bottom: 0; }
/* Sonderprojekte-Claim (letzter Absatz) wie Intro-Claim „WIR SCHAFFEN WOHNRAUM." */
.section-projects__intro p:last-child {
  font-family: 'Klavika-Medium';
  margin-top: 1.5rem;
}

/* Fliesstext direkt unter einer Sektions-Ueberschrift ist im Entwurf um 92 px
   eingerueckt — betrifft die Spaltenbloecke der Startseite (Intro, Kontakt) und
   den Kontaktteil der Projektdetailseite. */
.wp-block-lazyblock-section-header + .wp-block-columns > .wp-block-column:first-child {
  padding-left: 92px;
}

/* 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;
  /* --dba-arrow-top wird per JS auf die halbe BILDhöhe gesetzt (die Karte ist
     höher als ihr Bild); 33% ist nur der Notnagel ohne JS. */
  top: var(--dba-arrow-top, 33%);
}
.section-projects .slider-wrapper .slick-prev { left: -80px; }
.section-projects .slider-wrapper .slick-next { right: -80px; }
/* Ab hier reichen die 80 px Abstand nicht mehr neben den Container. Statt die
   Pfeile aufs Bild zu legen, werden sie kleiner (40 px) und rücken auf 48 px —
   das ist genau der Innenabstand des Containers, sie stehen also weiter daneben. */
@media (max-width: 1800px) {
  .section-projects .slider-wrapper .slick-prev,
  .section-projects .slider-wrapper .slick-next { width: 40px; height: 40px; }
  .section-projects .slider-wrapper .slick-prev img,
  .section-projects .slider-wrapper .slick-next img { width: 40px; height: 40px; }
  /* exakt der Innenabstand des Containers (clamp(1rem, 4vw, 3rem)) — so sitzt der
     Pfeil bei jeder Breite genau daneben und ragt nie über den Fensterrand. */
  .section-projects .slider-wrapper .slick-prev { left:  calc(-1 * clamp(1rem, 4vw, 3rem)); }
  .section-projects .slider-wrapper .slick-next { right: calc(-1 * clamp(1rem, 4vw, 3rem)); }
}
.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); }

/* Eck-Banderole (SonderPROjekte, Design 17.08.2026) — goldenes 45°-Band über der oberen rechten Ecke */
.project-card__ribbon {
  position: absolute;
  top: 0; right: 0;
  width: 78%;
  aspect-ratio: 1;
  overflow: hidden;
  pointer-events: none;
}
.project-card__ribbon > span {
  position: absolute;
  /* Bandmitte liegt auf der Eck-Diagonalen: left/top so gewählt, dass der Text
     mittig im sichtbaren Teil sitzt und nur die Bandenden abgeschnitten werden. */
  top: 13%;
  left: -6%;
  width: 164%;
  padding: 16px 0;
  transform: rotate(45deg);
  transform-origin: center;
  background: #e4ae01;
  color: var(--bodycolor);
  font-family: 'Klavika-Regular';
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
}

/* Kurzbeschreibung unter dem Projekttitel (Sonderprojekte).
   Laeuft in unserer Fliesstext-Groesse (1rem/1.65) — im XD ist der Absatz zwar
   groesser, auf der Karte wirkte das aber zu wuchtig. */
.project-card__text {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.4;   /* enger als der Fliesstext — auf der Karte stehen kurze Zeilen */
  color: var(--gray-700, #374151);
}
.project-card__text-lead {
  display: block;
  font-family: 'source_sans_prosemibold', var(--font);
}
.project-card__info {
  padding: 0 0 0 1rem;
  border-left: 1px solid var(--gray-400, #e5e7eb);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

/* SonderPROjekte-Slider: alle Karten auf die Hoehe der laengsten ziehen, damit
   die Linien neben den Kurztexten alle gleich weit runterlaufen. Slick gibt den
   Slides sonst jeweils ihre eigene Hoehe. */
.section-projects--sonder .slick-track { display: flex; align-items: stretch; }
.section-projects--sonder .slick-slide { height: auto; }
/* Achtung: slick haengt .slick-slide an die Karte selbst — eine feste Hoehe
   wuerde das Strecken im Flex-Track aushebeln, deshalb nur flex + flex:1. */
.section-projects--sonder .project-card { display: flex; flex-direction: column; }
.section-projects--sonder .project-card__link { display: flex; flex-direction: column; flex: 1; }
.section-projects--sonder .project-card__info { flex: 1; }
.project-card__city {
  display: block;
  font-weight: 400;
  color: var(--bodycolor);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.project-card__name {
  /* XD: 45 px Klavika Light. Auf unserer Skala 36 px — damit so gross wie die
     Sektions-Überschrift; im XD sind die Namen minimal kleiner (45 zu 50). */
  font-size: clamp(26px, 2vw, 36px);
  overflow-wrap: anywhere;   /* lange Projektnamen brechen, statt die Karte zu sprengen */
  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; }

/* ── Standort-Slider: gleiches Banner-Muster wie der Zitat-Slider ───── */
.section-quote--standort .section-quote__intro {
  max-width: 860px;
  margin: 0 0 2.5rem 92px;   /* eingerueckt wie der Fliesstext */
  line-height: 1.7;
  color: var(--bodycolor);
}
.section-quote--standort .section-quote__panel {
  align-items: center;      /* wie beim Zitat-Slider der Startseite */
  gap: 2.5rem;
}

/* Masse aus dem XD-Artboard (1920 breit gemessen, hier als Anteil der Seite):
   Bild 608 px = 31,7 %, der Kasten ueberdeckt davon genau die Haelfte
   (304 px = 15,8 %) und sitzt 100 px tiefer — bei unserem Massstab 80 px.
   Bild und Kasten sind gleich hoch. */
.section-quote--standort .section-quote__image {
  width: 31.7%;
  margin-right: -15.85%;
  /* Nicht das Bild hochziehen — der Slider schneidet oben ab. Stattdessen den
     Kasten nach unten setzen: Bild oben buendig, Kasten 80 px tiefer. */
  margin-bottom: 80px;
}
.section-quote--standort .section-quote__panel { margin-top: 80px; }
.section-quote--standort .section-quote__image img { margin-top: 0; }
.section-quote--standort .standort-folie__text { flex: 1; min-width: 0; }
.standort-folie__titel {
  font-family: 'Klavika-Light';
  font-size: 32px;
  font-weight: normal;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 14px;
}
/* Kein Breitenlimit: der Absatz laeuft wie im Entwurf bis an die Schaltflaechen. */
.standort-folie__absatz { color: var(--white); line-height: 1.7; margin: 0 0 14px; }
.standort-folie__liste { list-style: none; margin: 0; padding: 0; color: var(--white); }
.standort-folie__liste li { position: relative; padding-left: 18px; line-height: 1.7; }
.standort-folie__liste li::before { content: "–"; position: absolute; left: 0; }
.standort-folie__buttons { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.standort-folie__buttons .btn { text-align: center; min-width: 240px; }

/* Pfeile: dieselben Grafiken und Masse wie beim Zitat-Banner der Startseite.
   Sie sitzen am Rahmen, nicht in einer Folie — sonst wanderten sie beim
   Blaettern mit. Links an der Kante des grauen Kastens: das Bild ist
   clamp(180px,28vw,380px) breit und ragt mit -10rem in den Kasten hinein. */
.standort-banner { position: relative; }
.standort-banner > .slick-prev,
.standort-banner > .slick-next {
  position: absolute;
  /* Mitte des grauen Kastens, nicht des Rahmens: der Kasten sitzt 80 px
     tiefer als das Bild, seine Mitte liegt also 40 px weiter unten. */
  top: calc(50% + 40px);
  transform: translateY(-50%);
  width: 30px;
  height: 72px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 4;
  transition: opacity 0.2s;
}
/* Waehrend des Wechsels ausgeblendet, damit sie nicht ueber der Bewegung stehen. */
.standort-banner.is-wechselnd > .slick-prev,
.standort-banner.is-wechselnd > .slick-next { opacity: 0; pointer-events: none; }
.standort-banner > .slick-prev { left: calc(15.85% + 0.75rem); }   /* linke Kante des Kastens */
.standort-banner > .slick-next { right: 0.75rem; }
.standort-banner > .slick-prev img,
.standort-banner > .slick-next img {
  width: 30px;
  height: 72px;
  display: block;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.standort-banner > .slick-prev img { transform: rotate(180deg); }
.standort-banner > .slick-prev:hover img,
.standort-banner > .slick-next:hover img { opacity: 1; }
.standort-banner > .slick-prev::before,
.standort-banner > .slick-next::before { display: none; }
@media (max-width: 900px) {
  /* ohne Bild beginnt der Kasten am linken Rand und braucht oben keinen Versatz */
  .standort-banner > .slick-prev { left: 0.75rem; }
  /* Nach einer Icon-Reihe steht der folgende Textblock zu tief: Sektionsrand,
     Blockabstand und Fliesstext-Abstand summierten sich auf 88 px unter dem
     Band. Der Blockabstand entfaellt hier. */
  .wp-block-lazyblock-prozess-schritte + .wp-block-columns { margin-top: 0; }
  /* Rechtsbuendige Schaltflaechen stehen auf dem Handy links, wie alle anderen. */
  .dba-rechts { text-align: left; }
  /* Die ins blaue Band verschobene Schaltflaeche (Ankaufsprofil). */
  .section-iconreihe__band > .dba-rechts { margin-top: 64px; }

  /* Icon-Reihen: nur der Text ruecket dichter unter seinen Titel — der Abstand
     zwischen Icon und Titel bleibt, wie er war. */
  .iconreihe__text,
  .section-iconreihe--prozess .iconreihe__text { margin-top: 2px; }
  /* Untereinander braucht der Titel keine reservierte zweite Zeile mehr. Mit
     ihr stand der Text bei einzeiligen Titeln („Standorte") rund 20 px tiefer
     als bei zweizeiligen („30 Jahre Erfahrung"). */
  .iconreihe__titel { min-height: 0; }

  .standort-banner > .slick-prev,
  .standort-banner > .slick-next { top: 50%; }
  .section-quote--standort .section-quote__panel { margin-top: 0; }
}
@media (max-width: 900px) {
  .section-quote--standort .section-quote__image { display: none; }
  .standort-folie__buttons { align-self: stretch; }
}
.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;
}
/* Ab Tabletbreite wie im Entwurf: der Fliesstext laeuft nur ueber gut die halbe
   Kastenbreite, die Schaltflaeche steht rechts daneben und schliesst unten mit
   der letzten Textzeile ab. Die Ueberschrift darf etwas breiter laufen — sie
   steht im Entwurf in zwei Zeilen und bricht nach „Grundstueck". */
@media (min-width: 992px) {
  .section-cta__content {
    display: grid;
    grid-template-columns: minmax(0, 58%) 1fr;
    align-content: center;
    align-items: end;
    column-gap: 2rem;
    row-gap: 1.25rem;
  }
  .section-cta__heading { grid-column: 1 / -1; grid-row: 1; max-width: 700px; }
  .section-cta__text    { grid-column: 1; grid-row: 2; }
  .section-cta__buttons { grid-column: 2; grid-row: 2; align-self: end; }
}
.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;
}

/* Unter jeder Sektions-Ueberschrift beginnt der Inhalt mit 32 px Abstand — die
   Stufe der Startseite. Je nach Verschachtelung kamen vorher 24, 48, 56 oder
   64 px heraus: der Fliesstext bringt eigene 24 px mit, mal zusaetzlich zu den
   32 px des Spaltenblocks, mal als einziger Abstand. */
.wp-block-lazyblock-section-header + .wp-block-columns .dba-fliesstext:first-child { margin-top: 0; }
.wp-block-lazyblock-section-header + .wp-block-group .dba-fliesstext:first-child,
.wp-block-lazyblock-section-header + .dba-fliesstext { margin-top: 32px; }
/* News-Archiv: die Filterzeile folgt direkt auf die Ueberschrift. */
.section-header + .pf-filters { margin-top: 32px; }
/* 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';
  /* XD 50 px — auf der Seitenskala von 80 % sind das 40 px (Projektnamen: 36). */
  font-size: clamp(28px, 3vw, 40px);
  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(--white);
}
.section-contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 0;
  align-items: start;
}
/* Zeile 1: nur die Ueberschrift. Zeile 2: Text links, Formular rechts —
   dadurch startet das Formular buendig mit dem Text. */
.section-contact__inner > .section-contact__heading { grid-area: 1 / 1; }
.section-contact__inner > .section-contact__intro   { grid-area: 2 / 1; }
.section-contact__inner > .section-contact__form    { grid-area: 2 / 2; }
.section-contact__heading {
  /* wie alle Sektions-Überschriften: Klavika Regular 40 px, gemischte Schreibweise (XD) */
  font-size: clamp(28px, 3vw, 40px);
  margin-bottom: 32px;
}
.section-contact__intro { margin-left: 92px; }   /* eingerueckt wie die uebrigen Einleitungen */
.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: 52px; 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: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
/* Die Kreise standen in #808c99 auf dem Fussgrau #909ba5 und waren bei 36 px
   kaum zu finden (Kundenanmerkung 05.10.2026). Jetzt groesser und im
   DBA-Blaugruen, das auch die Icon-Reihen tragen. */
.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: #437183;
  border-radius: 50%;
  transition: background var(--ease), transform var(--ease);
}
.site-footer__social-link:hover { background: var(--white); transform: translateY(-2px); }
.site-footer__social-link img { width: 22px; height: 22px; filter: brightness(0) invert(1); display: block; transition: filter var(--ease); }
.site-footer__social-link:hover img { filter: brightness(0) saturate(100%) invert(42%) sepia(14%) saturate(1200%) hue-rotate(155deg) brightness(92%) contrast(88%); }

/* 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, minmax(0, 1fr)); }
  .section-stats__band-bg  { top: 0; }
  .stats-item              { padding: 1.5rem 1rem 0; }
  /* Auf dem Handy steht neben der grossen Zahl zu wenig Platz: „Quadratmeter"
     wurde Buchstabe fuer Buchstabe umbrochen. Die Einheit steht deshalb unter
     der Zahl und bleibt als Wort zusammen. */
  .stats-item__value       { flex-direction: column; align-items: center; gap: 2px; }
  .stats-item__unit        { overflow-wrap: normal; text-align: center; }
  .stats-item__label       { font-size: 15px; }
  .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; row-gap: clamp(2rem, 5vw, 5rem); }
  /* Untereinander sorgt der Zeilenabstand des Rasters fuer die Luft — die eigene
     Unterkante der Ueberschrift kaeme sonst obendrauf. */
  .section-contact__inner > .section-contact__heading { margin-bottom: 0; }
  .section-contact__inner > .section-contact__heading,
  .section-contact__inner > .section-contact__intro,
  .section-contact__inner > .section-contact__form { grid-area: auto; }
  .projects-table__head,
  .projects-table__row      { grid-template-columns: 1fr 1fr; }
}

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


  /* Kopfzeile faehrt beim Runterscrollen nach oben raus und beim Hochscrollen
     wieder rein — mehr Platz auf dem kleinen Schirm. */
  .site-header { transition: transform 0.3s ease; }
  html.kopf-versteckt .site-header { transform: translateY(-100%); }
  @media (prefers-reduced-motion: reduce) {
    .site-header { transition: none; }
  }

  /* Auf dem Handy nahm das Logo mit 252 px zwei Drittel der Breite und fuellte
     die Kopfzeile bis an beide Kanten. */
  .site-header__logo .custom-logo { height: 42px; }

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

  .news-card { /*flex: 0 0 100%;*/ border-right: none; padding-right: 0; }
  /* Der senkrechte Strich trennt auf dem Desktop die Spalten — bei einer Karte
     je Zeile trennt er nichts mehr. */
  .news-card::after { display: none; }
  /* Luecke zwischen den Karten: die Folie bekommt rechts Innenabstand, die
     Liste gleicht ihn nach aussen wieder aus, damit die erste Karte buendig
     mit dem Rest der Seite beginnt. */
  /* Medien-Karten: auf dem Handy niedriger, das Milchglasband schmaler und
     innen enger — sonst nimmt jede Karte fast eine halbe Bildschirmhoehe ein. */
  .media-card__media { aspect-ratio: 16 / 10; }
  .media-card__band  { height: 42%; gap: 12px; padding: 0 14px; }
  .media-card__icon svg { height: 40px; }
  .media-cards { gap: 16px; }

  .news-slider .slick-slide { padding-right: 14px; }
  .news-slider .slick-list  { margin-right: -14px; }
  .projects-slider .slick-slide { padding-right: 14px; }
  .projects-slider .slick-list  { margin-right: -14px; }
  /* Die Liste steht fuer die Vorschau auf overflow: visible — ohne eine
     schneidende Huelle ragte die ganze Spur aus der Seite heraus. Bei den News
     uebernimmt das .news-slider-clip, hier die Sektion selbst. */
  .section-projects { overflow: hidden; }

  /* Die Schaltflaeche steht neben der Ueberschrift und damit ueber dem Slider.
     Auf dem Handy gehoert sie darunter: der Container wird zur Spalte, die
     Kopfzeile gibt ihre Kinder frei (display: contents), danach bestimmt
     „order" die Reihenfolge. */
  .section-news .container:has(.section-news__header),
  .section-projects .container:has(.section-header) { display: flex; flex-direction: column; }
  .section-news__header,
  .section-projects .section-header { display: contents; }
  .section-news__header .dba-section-header__heading,
  .section-projects .section-header .dba-section-header__heading { order: 1; }
  .section-news .slider-wrapper,
  .section-projects .slider-wrapper { order: 2; }
  .section-news__header .btn { order: 3; align-self: flex-start; margin-top: 1.5rem; }
  .section-projects .section-header__links { order: 3; margin-top: 1.5rem; }
  /* Nach jeder Sektions-Ueberschrift derselbe Abstand wie im Einleitungsteil
     („Wer wir sind"): dort sind es 32 px, bei den Slidern waren es 0. */
  .section-news__header .dba-section-header__heading,
  .section-projects .section-header .dba-section-header__heading { margin-bottom: 32px; }

  /* Schaltflaechen unter den Slidern nur so breit wie ihr Text — wie „Alle News". */
  .section-projects .section-header__links { align-items: flex-start; }
  .section-header__links .btn { width: auto; }

  /* Kein Bildzoom auf Touch: der Effekt springt beim Wischen an und laesst
     die Slider haken. Fluessiges Ziehen geht vor. */
  .project-card__image,
  .project-card__image--placeholder,
  .news-card__image,
  .media-card__media img,
  .news-gallery-section__item img { transition: none; }
  .project-card:hover .project-card__image,
  .news-card:hover .news-card__image,
  .media-card:hover .media-card__media img,
  .news-gallery-section__item:hover img { transform: none; }

  /* Abstand zwischen Einleitungstext und den beiden Boxen so gross wie der
     Abstand unter den Boxen. */
  .wp-block-columns:has(.media-cards) { row-gap: 92px; }


  /* Goldene Banderole dezenter: kleineres Eck, schmaleres Band, kleinere Schrift. */
  .project-card__ribbon { width: 60%; }
  .project-card__ribbon > span { padding: 8px 0; font-size: 13px; }

  /* Zitat-Banner: auf Mobil stand das Bild bisher gar nicht da. Es liegt jetzt
     als Hintergrund hinter der grauen Folie und haengt links 20 % aus dem Rand
     hinaus — die uebrigen rund 80 % fuellen den Banner. */
  .section-quote:not(.section-quote--standort) .section-quote__inner { position: relative; }
  .section-quote:not(.section-quote--standort) { padding-top: 7.5rem; }   /* Platz fuer den Bildueberstand */
  .section-quote:not(.section-quote--standort) .section-quote__image {
    display: block;
    position: absolute;
    /* Breite: der Ueberstand nach links (20 %) plus die Breite der Schaltflaeche
       darueber (255 px) — so schliesst die rechte Bildkante buendig mit
       „Alle aktuellen Projekte" ab. Die Hoehe laeuft ueber aspect-ratio mit,
       das Bild schrumpft also proportional und endet ueber dem Folienboden.
       translateY(-25%) hebt es um ein Viertel seiner eigenen Hoehe an — so viel
       steht oben ueber den grauen Kasten hinaus. */
    top: 0; bottom: auto; left: -20%;
    width: calc(20% + 255px);
    aspect-ratio: 1 / 1;
    height: auto;
    transform: translateY(-25%);
    margin: 0;
    z-index: 1;
  }
  .section-quote:not(.section-quote--standort) .section-quote__image img {
    height: 100%;
    min-height: 0;
    margin-top: 0;
    object-position: center;
  }
  .section-quote:not(.section-quote--standort) .section-quote__panel { z-index: 2; }

  /* Standorte-Banner nach demselben Muster wie der Zitat-Banner der Startseite:
     Bild als Hintergrund links aus dem Rand, ein Viertel steht oben ueber dem
     grauen Kasten. Das Bild kann hier nicht nach oben herausragen — die Folien
     stecken in einem Slider, dessen Rahmen alles abschneidet. Stattdessen
     rutscht der Kasten nach unten; der Abstand rechnet sich aus derselben
     Formel wie die Bildbreite (ein Viertel der Hoehe = ein Viertel der Breite). */
  .section-quote--standort .section-quote__inner {
    position: relative;
    display: block;
    /* Als Innenabstand, nicht als Aussenabstand des Kastens: ein Aussenabstand
       des ersten Kindes faellt mit dem Rahmen zusammen und schoebe das ganze
       Bild mit nach unten. */
    padding-top: calc(5% + 64px);
  }
  .section-quote--standort .section-quote__image {
    display: block;
    position: absolute;
    top: 0; left: -20%;
    width: calc(20% + 255px);
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0;
    z-index: 1;
  }
  .section-quote--standort .section-quote__image img {
    height: 100%;
    min-height: 0;
    margin-top: 0;
    object-position: center;
  }
  .section-quote--standort .section-quote__panel {
    position: relative;
    z-index: 2;
    margin-top: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
  }
  /* Untereinander duerfen die Schaltflaechen so breit sein wie der Kasten. */
  .standort-folie__buttons .btn { min-width: 0; }
  /* Enger gesetzt wie im Zitat-Banner — 1.7 laesst den Kasten auf dem Handy
     auseinanderfallen. */
  .standort-folie__absatz,
  .standort-folie__liste li { line-height: 1.4; }
  /* Die Folie ist genau bildschirmbreit — hier abschneiden heisst am Rand
     abschneiden, und das Bild der Nachbarfolie ragt nicht mehr herein. */
  .standort-folie { overflow: hidden; }
  .standort-banner > .slick-prev,
  .standort-banner > .slick-next {
    width: 16px; height: 38px;
    /* Die halbe Ueberstandshoehe tiefer, damit die Pfeile in der Mitte des
       grauen Kastens sitzen und nicht in der Mitte der ganzen Folie. */
    top: calc(50% + 41px);
  }
  .quote-slide__text { line-height: 1.35; }
  /* Pfeile kleiner — auf dem schmalen Display standen sie zu wuchtig im Text. */
  .section-quote__panel .slick-prev,
  .section-quote__panel .slick-next { width: 16px; height: 38px; }
  .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; }
  /* Mitgliedschafts-Logos kleiner und mittig unter der Zeile „Mitglied der". */
  .site-footer__member-logos { justify-content: center; gap: 1.5rem; }
  .site-footer__member-logo  { max-height: 40px; }

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

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

  /* Verkaufs-Banner genau wie der Zitat-Banner darueber: Bild als Hintergrund
     hinter der Folie, links 20 % aus dem Rand, ein Viertel oben ueberstehend. */
  .section-cta { padding: 7.5rem 0 2rem; }
  .section-cta__inner { position: relative; }
  .section-cta__image-wrap {
    display: block;
    position: absolute;
    top: 0; bottom: auto; left: -20%;
    width: calc(20% + 255px);
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0;
    transform: translateY(-25%);
    z-index: 1;
  }
  .section-cta__image-wrap img {
    height: 100%;
    margin-top: 0;
    object-position: center;
  }
  .section-cta__content { z-index: 2; padding: 2rem 2.5rem; }
  .section-cta__buttons { justify-content: flex-start; }   /* auf Mobil linksbuendig unter dem Text */

  .projects-table { display: none; }

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

/* Ab wann das Mobilmenue greift.
   Frueher lag der Punkt bei 768 px. Zwischen 769 und rund 890 px passten Logo
   und fuenf Menuepunkte aber nicht mehr nebeneinander: „DBA LOG-IN" brach auf
   drei Zeilen um, mitten im Wort. Der Umschaltpunkt liegt deshalb bei 860 px;
   darueber halten ein kleineres Logo und engere Innenabstaende die Leiste
   einzeilig (Block bei 861–1100 px).
   Nur der Umschaltteil steht hier. Kopfhoehe, Logogroesse und das Wegfahren
   beim Scrollen bleiben bei 768 px — das sind reine Handy-Themen. */
@media (max-width: 860px) {
  /* Das geoeffnete Menue reicht bis an den unteren Bildschirmrand und scrollt
     bei Bedarf selbst; overscroll-behavior verhindert, dass die Seite darunter
     mitwandert, wenn man am Ende der Liste weiterwischt. */
  .site-nav {
    display: none;
    /* Achtung: die Kopfzeile hat backdrop-filter und ist damit der Bezugsrahmen
       fuer fest positionierte Kinder — „bottom: 0" endet deshalb an ihrer
       Unterkante. Die Hoehe wird darum ausgerechnet. */
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    background: var(--footer-grey);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 99;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Signet als grosses, angeschnittenes Wasserzeichen in der unteren rechten
     Ecke des offenen Menues. Bewusst als Hintergrundbild und nicht als
     ::after — ein ueberstehendes Element wuerde die Menueflaeche scrollbar
     machen. Die Transparenz steckt in der PNG-Datei. */
  .site-nav.is-open {
    display: block;
    background: var(--footer-grey) url('../images/dba-signet-wasserzeichen.png') no-repeat right -12vw bottom 0;
    background-size: 66vw auto;
  }
  /* Solange das Menue offen ist, steht die Seite dahinter still. */
  html.hat-offenes-menue,
  html.hat-offenes-menue body { overflow: hidden; }
  .site-nav__list   { flex-direction: column; gap: 0; padding: 0.5rem 0 1rem; }
  .site-nav__item   { width: 100%; }
  .site-nav__link   { padding: 0.7rem 1.5rem; font-size: 18px; }
  .site-nav__dropdown .site-nav__link { font-size: 16px; }
  .site-nav__link::after { display: none; }
  /* Im Mobilmenü ist die Unterseite ohnehin in der aufgeklappten Liste markiert */
  .site-nav__unterseite { 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; }
}

@media (max-width: 480px) {
  .section-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  /* News-Detail: Datum und „Alle News" passen nebeneinander — Datum links,
     Schaltflaeche rechts auf derselben Hoehe. */
  .news-detail__section-header { flex-direction: row; align-items: center; }
  .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;
  /* Entwurf: Karte 378 von 1664 px Inhaltsbreite (22,7 %), dazwischen 248 px
     (14,9 %). Als Prozentwerte, damit es in jeder Breite stimmt. */
  grid-template-columns: repeat(3, 1fr);
  column-gap: 14.9%;
  row-gap: 3.5rem;
  margin-bottom: 2rem;
}
/* Trennlinie im Archiv.
   Vorbild ist die Startseite: dort stossen die Karten aneinander, Bild und
   Textkasten belegen 81 % der Karte, und die Linie steht im freien Streifen
   rechts daneben — gemessen 27 px neben der Bildkante bei 384 px Kartenbreite.
   Im Archiv belegt das Bild rund 90 %, der freie Streifen ist nur 32 px breit.
   Mit den allgemeinen 12 % landete die Linie AUF dem Bild (x=325 bei einer
   Karte von 48 bis 363); in der Mitte der Kartenlücke stand sie zu weit rechts.
   6 % setzen sie knapp rechts neben das Bild, wie auf der Startseite. */
.news-archive-grid .news-card::after { right: 6%; }
/* Schmalere Fenster: der Abstand gibt Platz ab, damit die Karten nicht
   unleserlich schmal werden. */
@media (max-width: 1400px) { .news-archive-grid { column-gap: 9%; } }
@media (max-width: 1200px) { .news-archive-grid { column-gap: 5%; } }
@media (max-width: 1000px) { .news-archive-grid { column-gap: 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 0 20px;   /* Luft zur fetten Unterzeile */
}

/* 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 ───────────────────────────────── */
/* Buttons unter dem Text-Kästchen, rechtsbündig mit „ALLE NEWS" (Kundenwunsch 18.08.) */
/* Gescoped, weil single.php dieselbe Klasse mit Trennlinie und mittiger
   Ausrichtung benutzt — hier gilt: rechtsbündig, ohne Linie und ohne Abstände. */
.news-detail-page .news-detail__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
/* Die Buttons sitzen direkt unter dem Kästchen, nicht hinter dem vollen Absatz */
.news-detail__hero-row:has(+ .news-detail__actions) { margin-bottom: 20px; }
@media (max-width: 560px) {
  .news-detail-page .news-detail__actions { flex-direction: column; align-items: stretch; }
  .news-detail-page .news-detail__actions .btn { text-align: center; }
}

.news-gallery-section {
  padding: 3rem 0;
  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;
}
/* Galerie als Slider — die Abstände zwischen den Bildern kommen aus dem
   Innenabstand der Folien, weil Slick selbst keine Lücken setzt. */
.news-gallery-slider { margin-bottom: 1.25rem; }
.news-gallery-slider .slick-slide { padding: 0 4px; }
.news-gallery-slider .slick-list { margin: 0 -4px; }
.news-gallery-arrows-host .slick-prev { left:  calc(-1 * clamp(1rem, 4vw, 3rem)); }
.news-gallery-arrows-host .slick-next { right: calc(-1 * clamp(1rem, 4vw, 3rem)); }
/* In der Galerie sind die Folien reine Bilder — die Pfeile gehoeren auf deren
   Mitte. Die 40 % der allgemeinen Regel stammen von den News-Karten, wo unter
   dem Bild noch der Textkasten sitzt. */
.news-gallery-arrows-host .slick-prev,
.news-gallery-arrows-host .slick-next { top: 50%; }
/* Ohne JavaScript liegen die Bilder nebeneinander statt gestapelt */
.news-gallery-slider:not(.slick-initialized) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.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-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);
}

/* Charity-Kopfbereich: ein Foto von Menschen. Mittig beschnitten fallen die
   Koepfe weg, deshalb oben verankern — beschnitten wird unten. */
.project-detail-hero--charity { background-position: center top; }

/* ── 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, 70%)) 0 0); /* Bild 1 links bis zur Trenn-Position sichtbar */
  will-change: clip-path;
}
/* Trenner nach dem Entwurf: eine haarduenne helle Linie, der Griff ist ein
   kleiner Ring, der unten auf der Bildkante sitzt. Die Linie laeuft im Bild
   hell und unterhalb des Bildes grau weiter, damit sie auf Weiss sichtbar ist. */
.project-detail-hero__trenner {
  position: absolute;
  top: 0;
  bottom: -11px;
  left: var(--pos, 70%);
  width: 1px;
  /* Im Bild eine haarduenne helle Linie, unterhalb des Bildes das Stueck zum
     Griff. Anmerkung David 07.10.2026: dieses Stueck war mit #c2c2c4 auf Weiss
     kaum zu sehen — jetzt im Grauton des Rings statt in dessen Randfarbe, und
     die Linie laeuft bis in den Ring hinein. */
  background: linear-gradient(to bottom,
              rgba(255, 255, 255, 0.85) calc(100% - 11px),
              #8d9aa4 calc(100% - 11px));
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 2px rgba(45, 50, 56, 0.45);
}
.project-detail-hero__trenner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #c2c2c4;
  pointer-events: auto;
  cursor: ew-resize;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
/* Unsichtbare, fingergerechte Trefferflaeche um den Ring. */
.project-detail-hero__trenner::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}
.project-detail-hero__trenner:hover::after,
.project-detail-hero__trenner.wird-gezogen::after {
  transform: translate(-50%, 50%) scale(1.25);
  border-color: #8d9aa4;
}

/* Auszeichnung: rundes Siegel im Kopfbild. Masse aus dem XD-Artboard —
   Durchmesser 8,9 % der Bildbreite, 9,8 % Abstand rechts, 9,7 % nach unten. */
/* Anmerkung der Kundin 26.08.: das Siegel steht links und fluchtet mit dem Logo
   der Kopfzeile. Das Logo haengt am Container und wandert ab 1600 px mit ihm
   nach innen; ueber 1700 px rueckt es zusaetzlich um 71 px nach links (dann
   steht sein senkrechter Strich auf der Inhaltskante). Das Siegel macht beides
   mit, damit die linken Kanten von Logo und Siegel immer uebereinstimmen. */
.project-detail-hero__award {
  position: absolute;
  z-index: 10;
  left: calc((100% - min(var(--container), 100%)) / 2 + clamp(1rem, 4vw, 3rem));
  margin-left: -71px;
  bottom: 9.7%;
  width: 8.9%;
  min-width: 84px;
  height: auto;
  pointer-events: none;
}
@media (max-width: 1700px) {
  .project-detail-hero__award { margin-left: 0; }   /* wie beim Logo der Kopfzeile */
}
@media (max-width: 768px) {
  .project-detail-hero__award { left: 1rem; bottom: 20%; width: 20%; min-width: 0; }
}

/* 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);
}
/* Auf dem Handy ist der Kopf nur 240 px hoch — das Projektlogo nahm darin fast
   die ganze Flaeche ein. Es sitzt klein in der oberen rechten Ecke.
   (Steht hinter den Grundregeln, sonst wuerden die es wieder ueberschreiben.) */
@media (max-width: 768px) {
  .project-detail-hero__logo-wrap { top: 0.75rem; right: 1rem; }
  .project-detail-hero__logo { width: 96px; height: 54px; }
}

/* Charity: Partnerlogo farbig im weissen Kasten unten links (Entwurf 09/2026).
   Die weisse Einfaerbung oben gilt den eigenen Wortmarken und wuerde ein
   fremdes Logo unsichtbar machen. */
.project-detail-hero--charity .project-detail-hero__logo-wrap {
  top: auto;
  right: auto;
  bottom: 3rem;
  left: 2.25rem;
  background: #fff;
  border-radius: 1rem;
  padding: 0.9rem 1.2rem;
}
.project-detail-hero--charity .project-detail-hero__logo {
  filter: none;
  width: 140px;
  height: 105px;
}
@media (max-width: 768px) {
  .project-detail-hero--charity .project-detail-hero__logo-wrap {
    bottom: 0.75rem;
    left: 1rem;
    border-radius: 0.7rem;
    padding: 0.6rem 0.8rem;
  }
  .project-detail-hero--charity .project-detail-hero__logo { width: 92px; height: 69px; }
}

/* Badge — bottom right, matches project card badge */
/* Anmerkung der Kundin 26.08.: das Faehnchen ging im Kopfbild unter — deutlich
   groesser und mit mehr Innenabstand (vorher 0,8 rem). */
.project-detail__badge {
  position: absolute;
  bottom: 1.25rem;
  right: 0;
  padding: 0.55rem 1.1rem;
  font-size: 1.25rem;
  font-family: 'Klavika-Light-Italic';
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--gray-700);
  background: rgba(255,255,255,0.9);
}
@media (max-width: 768px) {
  .project-detail__badge { font-size: 1rem; padding: 0.4rem 0.8rem; bottom: 0.75rem; }
}
.project-detail__badge--active,
.project-detail__badge--done { background: rgba(255,255,255,0.9); }

/* ── Goldene Eck-Banderole im Projektkopf (Sonderprojekte) ─────
   Gleiche Bandenform wie auf der Kachel, hier aber in der unteren rechten
   Bildecke: das Band steigt nach rechts an. Die Werte sind am Entwurf
   gemessen (Eck-Dreieck 244 px Schenkel, Band 92 px breit, Schrift 24 px)
   und auf unseren Massstab von 80 % gebracht.
   Die Bandmitte liegt 100 px von der Bildecke entfernt auf der Diagonalen —
   deshalb wird die zentrierte Flaeche um 27 px in die Ecke geschoben. Weiter
   in die Ecke hinein wird die sichtbare Sehne zu kurz und die untere Zeile
   („zur Vermietung", die laengere) laeuft an. */
.project-detail-hero__ribbon {
  position: absolute;
  right: 0; bottom: 0;
  width: 196px;
  aspect-ratio: 1;
  overflow: hidden;
  pointer-events: none;
}
.project-detail-hero__ribbon > span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;          /* laeuft bewusst ueber die Ecke hinaus, die Enden werden abgeschnitten */
  margin: -37px 0 0 -160px;
  padding: 11px 0;       /* 2 Zeilen à 26 px + 22 px = 74 px Bandbreite */
  transform: translate(27px, 27px) rotate(-45deg);
  transform-origin: center;
  background: #e4ae01;
  color: var(--bodycolor);
  font-family: 'Klavika-Regular';
  font-size: 20px;
  line-height: 1.3;
  text-align: center;
}
@media (max-width: 768px) {
  /* dasselbe Dreieck auf 67 % — alle Masse mitskaliert, sonst schneidet die Ecke an */
  .project-detail-hero__ribbon { width: 132px; }
  .project-detail-hero__ribbon > span {
    width: 216px;
    margin: -25px 0 0 -108px;
    padding: 7px 0;
    font-size: 14px;
    transform: translate(18px, 18px) rotate(-45deg);
  }
}

/* ── Construction stages ─────────────────────────────────────── */
.project-stages {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}
.project-stages__track {
  display: flex;
  align-items: flex-start;
  position: relative;
  /* Ohne Trennlinie steht die Reihe sonst direkt an der Beschriftung — die
     uebliche Stufe von 32 px unter einer Sektions-Ueberschrift. */
  margin-top: 32px;
  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 {
  /* traegt jetzt den Filmkasten (Medien-Karte wie auf der Startseite) */
  width: 300px;
  max-width: 100%;
  padding-top: 0;
  flex-shrink: 0;
}
/* Der Kasten ist im Entwurf flacher als die Karten der Startseite. */
.project-detail-intro__cta .media-card__media { aspect-ratio: 16 / 10; }
.project-detail-intro__cta .media-card__band  { height: 41%; gap: 12px; padding: 0 14px; }
.project-detail-intro__cta .media-card__icon svg { height: 40px; }
/* Schaltflaechen stehen unter dem Text, nicht in der rechten Spalte. */
.project-detail-intro__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.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;
  /* Den Abstand nach unten macht der Zeilenabstand des Rasters (32 px) — eine
     eigene Unterkante kam sonst obendrauf und ergab 56 px. */
  margin-bottom: 0;
}
.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) — die Schaltflaechen
   darunter stehen auf derselben Kante. */
.project-detail-intro__lead,
.project-detail-intro__body,
.project-detail-intro__buttons {
  padding-left: clamp(1.5rem, 9%, 7.5rem);
}
/* Laufweite wie im Entwurf: dort sind es rund 85 Zeichen je Zeile (780 px bei
   1920 px Artboard), bei uns waeren es sonst ueber 140. */
.project-detail-intro__lead,
.project-detail-intro__body {
  max-width: calc(640px + clamp(1.5rem, 9%, 7.5rem));
}
.project-detail-intro__body p { color: var(--gray-700); line-height: 1.6; margin-bottom: 1.25rem; }

/* ── Highlights-Liste im Intro (Sonderprojekte, Entwurf 17.08.) ──
   Steht unter der Schaltflaeche und laeuft im selben Einzug wie der
   Fliesstext. Der Strich gehoert zur Zeile, nicht zum Listenpunkt — im
   Entwurf sitzt er buendig unter dem Text darueber. */
.project-detail-intro__hl {
  padding-left: clamp(1.5rem, 9%, 7.5rem);
  max-width: calc(640px + clamp(1.5rem, 9%, 7.5rem));
  margin-top: 56px;
}
.project-detail-intro__hl-label {
  margin: 0 0 8px;
  color: var(--bodycolor);
  line-height: 1.6;
}
.project-detail-intro__hl-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.project-detail-intro__hl-list li {
  color: var(--bodycolor);
  line-height: 1.6;
}
.project-detail-intro__hl-list li::before { content: '- '; }
@media (max-width: 782px) {
  .project-detail-intro__hl { margin-top: 32px; }
}

/* ── 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;
}

.project-img-slider-wrap:has(.slick-dots) .slick-prev,
.project-img-slider-wrap:has(.slick-dots) .slick-next { top: calc(50% - 23px); }

/* Label unten rechts im Bild (Entwurf 18.08.): voller Kasten im Buttongrau,
   Text rechtsbuendig weiss, Ueberschrift in Versalien. Masse aus dem XD —
   Kasten rund ein Viertel der Bildbreite, buendig in der Ecke. */
.project-img-slider__label {
  /* Sitzt im Rahmen des Sliders, nicht in einer Folie — so bleibt es beim
     Blaettern stehen. Der Abstand nach unten laesst die Punktreihe (46 px) frei
     und entspricht den 8 % Bildhoehe aus dem Entwurf. */
  position: absolute;
  right: 0;
  bottom: calc(42px + 8%);
  z-index: 3;
  max-width: 46%;
  padding: 12px 16px;
  background: #808c99;
  color: #fff;
  text-align: right;
  font-size: 15px;
  line-height: 1.35;
  /* Loest den Kasten minimal vom Bild ab, ohne aufzufallen. */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.project-img-slider__label strong {
  display: block;
  font-family: 'Klavika-Medium', var(--font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .project-img-slider__label { max-width: 70%; padding: 8px 12px; font-size: 13px; }
}

/* 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;
  /* Die Punktreihe (26 px + 20 px Abstand) gehoert zur Hoehe des Sliders — ohne
     den Ausgleich saessen die Pfeile 23 px unter der Bildmitte. */
  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;
}
/* Der Textblock ist im Entwurf eingerueckt und schmaler als der Container:
   im XD beginnt er 286 von 1710 Punkten nach dem Rand (16,7 %) und ist 798
   Punkte breit (46,7 %). */
.project-standort__text {
  color: var(--gray-700);
  line-height: 1.6;
  margin-left: 16.7%;
  max-width: 46.7%;
}
/* Ortsname ueber der Ueberschrift (im Entwurf „FRANKENTHAL") */
.project-standort__ort {
  font-family: 'Klavika-Regular';
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bodycolor);
  margin: 0 0 0.5rem;
}
@media (max-width: 1024px) {
  .project-standort__text { margin-left: 0; max-width: 100%; }
}
/* 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 ─────────────────────────────────────────
   Laeuft auf der gemeinsamen Icon-Reihe (.section-iconreihe--band) wie auf den
   uebrigen Seiten — eigene Regeln braucht der Bereich nicht mehr. */

/* Die Beschreibungen sind hier laenger als in den Icon-Reihen der
   Unternehmensseiten. Sie laufen deshalb im Fluss mit, damit die Sektion ihre
   Hoehe daraus bekommt und der Text nicht in die naechste Sektion ragt —
   sichtbar wird er trotzdem erst beim Ueberfahren. Damit der blaue Streifen
   dabei schmal bleibt, bekommt er eine feste Hoehe: Punkt 146 px + 20 px
   Innenabstand − 45 px Anschnitt oben. Auf schmalen Schirmen bleibt alles wie
   gehabt, dort umfasst das Band den ganzen Eintrag. */
@media (min-width: 1025px) {
  .project-highlights .section-iconreihe__band { padding-bottom: 0; }
  .project-highlights .section-iconreihe__band::before { bottom: auto; height: 121px; }
  .project-highlights .iconreihe__text { position: static; }
  /* Der mitlaufende Text bringt die Hoehe schon mit — der Abstand zur naechsten
     Sektion kommt aus deren eigenem Innenabstand. */
  .project-highlights.section-iconreihe--band { padding-bottom: 0; }
}

/* City-Label (FRANKENTHAL) beginnt 40 px unter dem Vorangegangenen — dieselbe
   Stufe wie auf allen anderen Seiten zwischen Bild und Label. Steht es direkt
   unter dem Kopfbild, muss es den Abstand selbst mitbringen. */
.project-detail-cityhead {
  margin-top: 0;
}
.project-detail-hero + .project-detail-cityhead {
  margin-top: 80px;   /* doppelte Stufe: nach dem Reveal-Kopf darf mehr Luft stehen */
}

/* ── Projektkennzahlen ───────────────────────────────────────── */
/* same full-width band pattern as Projekthighlights */
.project-kennzahlen__band {
  position: relative;
  width: 100%;
  margin-top: 80px;                           /* wie der Abstand unter dem Kopfbild */
  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;
}
/* Drei Kacheln nebeneinander werden unter 900 px zu schmal — die Namen brechen
   dann Wort fuer Wort um. Deshalb zwei Spalten, auf dem Handy eine. */
@media (max-width: 900px) {
  .project-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .project-list-grid { grid-template-columns: 1fr; }
}

/* ── 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;
  /* Im Entwurf stossen die vier Felder aneinander, die senkrechten Striche
     dazwischen sind ihre rechten Rahmen. Jedes Feld ist rund 300 von 1920 px
     breit, also gut 18 % der Inhaltsbreite. */
  gap: 0;
  flex-wrap: wrap;
  margin-top: 4rem;
  margin-bottom: 4.5rem;
  position: relative;
}

.pf-dropdown {
  position: relative;
  flex: 0 0 18%;
  min-width: 170px;
  /* Rahmen wie die Felder im Kontaktformular */
  border-top: 1px solid #c8c8c8;
  border-right: 1px solid #c8c8c8;
  border-left: 0;
}

.pf-dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  /* Masse wie das Auswahlfeld im Kontaktformular: 44 px hoch, 14 px Schrift */
  padding: 10px 18px;
  font-size: 14px;
  letter-spacing: 0.08em;
  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;
  /* Einträge wie im Auswahlfeld des Kontaktformulars */
  padding: 8px 18px;
  font-size: 14px;
  font-family: 'Klavika-Regular';
  letter-spacing: 0.08em;
  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; }
}

/* ════════════════════════════════════════════════════════════════
   BAUABSCHNITTE — Kachelreihe unter dem Bild-Slider (Entwurf 18.08.)
   Kachelbreite und Luecke stehen im Verhaeltnis zum Slider wie im XD
   (312 bzw. 37 von 1689). Der Text liegt als heller Schleier ueber dem
   Bild und kommt erst beim Ueberfahren.
   ════════════════════════════════════════════════════════════════ */
.project-detail-slider:has(+ .project-bauabschnitte) { padding-bottom: 0; }
.project-bauabschnitte {
  /* 42 px unter der Punktreihe wie im Entwurf (52 XD-Pixel). */
  padding: clamp(1.5rem, 2.9vw, 2.625rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.project-bauabschnitte__reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2.19%;
  /* Bricht die Reihe um, stiess die naechste Kachel fast an die Beschriftung
     darueber (der Spaltenabstand galt auch fuer die Zeilen, rund 20 px). Der
     Titel steht 19 px unter seinem Bild und gehoert sichtbar dorthin. */
  row-gap: 56px;
}
/* Fuenf Kacheln muessen in eine Reihe passen: 5 × 18.24 + 4 × 2.19 = 100 %.
   Mit den frueheren 18.47 % kam die Reihe auf 101,15 % — die fuenfte Kachel
   rutschte immer nach unten, auch auf breiten Bildschirmen. */
.bauabschnitt {
  flex: 0 1 18.24%;
  min-width: 0;
  margin: 0;
}
.bauabschnitt__bild {
  position: relative;
  overflow: hidden;
  aspect-ratio: 312 / 211;
  background: var(--gray-200);
  /* Bezugsgroesse fuer die Schrift des Hovertextes (siehe unten). */
  container-type: inline-size;
}
.bauabschnitt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Textschleier — im XD weiss mit 92 % Deckung, Schrift in unserer Fliesstextfarbe */
.bauabschnitt__text {
  position: absolute;
  inset: 0;
  padding: 8px 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  color: var(--bodycolor);
  /* Die Schrift haengt an der Kachel, nicht am Fenster: 5,75 % der Kachelbreite
     ergeben bei der vollen Kachel (278 px) die 16 px des Entwurfs und schrumpfen
     danach im gleichen Verhaeltnis wie die Kachel. Vorher stand hier vw — der
     Text blieb bei 12 px stehen, waehrend die Kachel weiter schrumpfte, und wurde
     unten abgeschnitten (bis zu 45 px fehlten). */
  font-size: clamp(11px, 5.75cqw, 16px);
  line-height: 1.35;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
/* Die Ueberschrift steht im Entwurf in derselben Schrift und Groesse wie die
   Punkte darunter — sie ist nur in Versalien gesetzt. */
.bauabschnitt__text strong {
  display: block;
  font-weight: inherit;
  font-family: inherit;
  text-transform: uppercase;
}
.bauabschnitt.has-text:hover .bauabschnitt__text,
.bauabschnitt.has-text:focus-visible .bauabschnitt__text,
.bauabschnitt.has-text.is-offen .bauabschnitt__text { opacity: 1; }
.bauabschnitt.has-text { cursor: pointer; outline: none; }
.bauabschnitt__titel {
  margin-top: 19px;
  font-family: 'Klavika-Medium', var(--font);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--bodycolor);
  text-align: center;
}
/* Unter 1400 px wird die einzelne Kachel zu schmal fuer den Hovertext —
   ab hier stehen hoechstens drei nebeneinander (3 × 31.87 + 2 × 2.19 = 100 %).
   Die Deckelung haelt sie dabei so gross wie im Entwurf: ohne sie waere eine
   Kachel im kleineren Fenster ploetzlich groesser als im grossen (416 statt
   274 px). Die Reihe rueckt stattdessen in die Mitte. */
@media (max-width: 1400px) {
  .bauabschnitt { flex: 0 1 31.87%; }
  /* Gedeckelt wird die Reihe, nicht die Kachel: eine schmalere Kachel liesse
     sonst eine vierte in die Zeile rutschen und die fuenfte staende allein. */
  .project-bauabschnitte__reihe { max-width: 941px; margin-inline: auto; }
}
@media (max-width: 768px) {
  /* Drei Kacheln nebeneinander waeren auf dem Handy zu klein zum Lesen. */
  .bauabschnitt { flex: 0 1 100%; }
  .project-bauabschnitte__reihe { column-gap: 28px; row-gap: 48px; }
  .bauabschnitt__text { font-size: 15px; padding: 10px 14px; }
}

/* ════════════════════════════════════════════════════════════════
   GALERIE ohne Unterseite (Projektdetail, Entwurf Charity 09/2026)
   Bilder und Pfeile kommen aus der News-Galerie; hier stehen nur die
   Abstaende der Sektion.
   ════════════════════════════════════════════════════════════════ */
.project-bildergalerie {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.project-bildergalerie .news-gallery-arrows-host {
  margin-top: 2rem;
}

/* ════════════════════════════════════════════════════════════════
   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); }
  /* Nur eine Galerie (so bei den realisierten Projekten): das Vorschaubild
     laeuft ueber die ganze Breite. Quadratisch waere es dabei ueber 1300 px
     hoch — deshalb im Breitformat, etwa so hoch wie zwei Karten nebeneinander. */
  .project-galerie__grid[data-count="1"] { grid-template-columns: 1fr; }
  .project-galerie__grid[data-count="1"] .project-galerie__thumb { aspect-ratio: 21 / 9; }
}
.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: #437183;
  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 #437183;
  width: 55px;
  height: 55px;
  padding: 0px;
  background-color: #437183;
  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; }
}

/* Projektfortschritt auf dem Handy untereinander: Icon links, Beschriftung
   daneben, die Verbindungslinie laeuft senkrecht durch die Icon-Mitte.
   Ausserdem faengt die Karte direkt unter dem Standortteil an. */
@media (max-width: 768px) {
  .project-stages__track { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 0; }
  .project-stages__step  { flex-direction: row; align-items: center; gap: 14px; width: 100%; }
  .project-stages__name  { font-size: 16px; }
  /* Untereinander duerfen die Icons wieder gross sein — die 40 px der
     Schmalschirm-Regel waren fuer drei nebeneinander gedacht. */
  .project-stages__icon { width: 40px; height: auto; padding: 6px 0; }
  .project-stages__icon img { width: 40px; height: auto; }
  .project-stages__line  { top: 21px; bottom: 21px; left: 20px; right: auto; width: 1px; height: auto; }
  /* Karte weiter hoch: Polster unter der Bildergalerie und im Standortteil runter. */
  .image-icon-gallery { margin-bottom: 16px; }
  .project-standort { padding-bottom: 1rem; }
  .project-standort__map-wrap { margin-top: 0; }
}

/* Auf dem Handy sitzt das Icon im Bild unten links (mit Abstand zu beiden
   Kanten), der Text steht darunter linksbuendig und etwas groesser.
   Steht hinter dem Block oben, damit es dessen Wechselseiten aufhebt. */
@media (max-width: 768px) {
  .image-icon-gallery .gallery-icon-overlay,
  .gallery-item:nth-child(2n+1) .gallery-icon-overlay,
  .gallery-item:nth-child(2n) .gallery-icon-overlay {
    /* 55 px Icon + 16 px Abstand zur Bildunterkante */
    top: -71px;
    bottom: auto;
    left: 16px;
    right: auto;
  }
  .gallery-item .gallery-text,
  .gallery-item:nth-child(2n) .gallery-text,
  .gallery-item:nth-child(2n+1) .gallery-text {
    font-size: 16px;
    text-align: left;
    padding: 12px 16px 24px;
  }
  .gallery-item:nth-child(2n) .gallery-text-inner { margin-left: 0; }
}

/* ── 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(320px, 80vw, 400px); }   /* 240 px waren auf dem Handy zu flach */
  .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; }
  .project-kennzahlen__grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .project-kennzahlen__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  /* Filmkasten nutzt auf dem Handy die volle Breite. */
  .project-detail-intro__cta { width: 100%; }

  /* Der Bildslider laeuft auf dem Handy von Rand zu Rand und darf hoeher sein. */
  .project-detail-slider .project-img-slider-wrap { margin-inline: -16px; }
  .project-img-slider__slide img { height: auto; aspect-ratio: 4 / 3; }

  /* Auf der Projektseite steht die Kennzahl in einer Zeile — die Startseite
     bricht sie um, weil dort lange Einheiten stehen. */
  .project-kennzahlen .stats-item__value { flex-direction: row; flex-wrap: wrap; gap: 6px; }

  /* Kennzahlen genauso untereinander wie die Highlights darueber. */
  .project-kennzahlen__grid { grid-template-columns: 1fr !important; row-gap: 48px; }
  .project-kennzahlen__band { padding-top: 2rem; padding-bottom: 2rem; }
  .project-kennzahlen__band-bg { top: 0; }
  .project-kennzahlen__col { padding: 0; }
}
@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
   ============================================================ */
/* Team-Bereich liegt im XD auf hellblauem Grund, die Porträts sind kleiner
   und stehen weiter auseinander. */
.section-team {
  /* Abstand oben wie bei den Sektionen der Startseite (dort 72 px bis zum Label) */
  padding: clamp(3rem, 5vw, 4.5rem) 0 4rem;
  background: #d9e5ec;   /* gleicher Blauton wie das Kennzahlen-Band der Startseite (XD) */
}
.section-team + .section-team { padding-top: clamp(2rem, 4vw, 3.5rem); }
.section-team__heading { margin: 0 0 32px; }   /* eine Stufe wie ueberall unter den Sektions-Ueberschriften */

.team-grid {
  display: grid;
  /* volle Breite; die Porträts werden über die grossen Spaltenabstände kleiner
     — im XD sind es rund 385 px Bild bei 250 px Abstand */
  gap: 4rem 15%;
  margin-top: 0;
}
.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: var(--bodycolor);
  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; }
/* Unter dem bildschirmbreiten Foto wirkten Name und Funktion zu klein. */
@media (max-width: 768px) {
  .team-member__name     { font-size: 24px; line-height: 1.2; }
  .team-member__position { font-size: 17px; line-height: 1.45; }
  .team-member__email    { font-size: 17px; }
}

@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;
  color: var(--bodycolor) !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; }

/* Einwilligungen und Pflichtfeld-Hinweis (Anmerkung Kundin 06.10.2026).
   Stehen zwischen Nachrichtenfeld und Absenden-Zeile; bewusst schlicht, damit
   sie die ruhige Formularflaeche nicht zerschneiden. */
.wpcf7 .cf7-consent {
  padding: 0 28px 0 18px;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-700);
}
.wpcf7 .cf7-consent:first-of-type { margin-top: 20px; }
.wpcf7 .cf7-consent .wpcf7-form-control-wrap { display: block; margin: 0; width: 100%; }
.wpcf7 .cf7-consent .wpcf7-list-item { margin: 0; }
.wpcf7 .cf7-consent label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.wpcf7 .cf7-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  flex: 0 0 auto;
  accent-color: #437183;
  cursor: pointer;
}
.wpcf7 .cf7-consent .wpcf7-list-item-label { display: block; }
/* Dieselbe Falle wie beim Absenden-Knopf weiter unten: die Regel fuer alle
   Formularfelder (.wpcf7-form-control) zieht oben und rechts eine Linie, und
   Contact Form 7 haengt diese Klasse auch an die Huelle der Einwilligungen.
   Dort stand dann ein kurzer Strich rechts neben der ersten Textzeile. */
.wpcf7 form.wpcf7-form .cf7-consent .wpcf7-form-control { border: none; }
.wpcf7 .cf7-consent a { color: #437183; text-decoration: underline; }
.wpcf7 .cf7-consent a:hover { text-decoration: none; }
.wpcf7 .cf7-hint {
  padding: 0 18px;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--gray-400);
}

/* 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);
}
/* Die Regel fuer alle Formularfelder (.wpcf7-form-control) setzt oben und
   rechts eine Linie und ist spezifischer als die Schaltflaechen-Regel — beim
   Absenden-Knopf gehoert sie weg. */
.wpcf7 form.wpcf7-form input[type="submit"].wpcf7-form-control { border: none; }

/* Der Ladekringel steht sonst rechts neben der Schaltflaeche und schiebt sie
   von der Kante weg. Er wird aus dem Fluss genommen und sitzt links davon. */
.wpcf7 .cf7-footer { position: relative; }
.wpcf7 .wpcf7-spinner {
  position: absolute;
  left: 0;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 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(--bodycolor); 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: #527c8d; 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: #527c8d; }

/* 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-family: 'source_sans_prosemibold'; font-size: 14px; letter-spacing: 0.1em; 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(--bodycolor); margin: 0 0 1.5rem; }
.job-detail__intro { font-size: 16px; line-height: 1.7; color: var(--bodycolor); 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(--bodycolor); 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(--bodycolor); 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(--bodycolor); }
.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(--bodycolor); margin: 0 0 2rem; }
.job-detail__back { display: inline-block; font-family: 'source_sans_prosemibold'; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bodycolor); text-decoration: none; }
.job-detail__back:hover { color: #527c8d; }

/* 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(--bodycolor); 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; }
}

/* ── Einzug der Fliess- und Einleitungstexte ─────────────────────
   Auf schmalen Bildschirmen faellt er weg. Dieser Block steht bewusst am
   Ende: die betroffenen Regeln stehen ueber die ganze Datei verteilt, und
   bei gleicher Spezifitaet gewinnt die spaetere. */
@media (max-width: 782px) {
  .dba-fliesstext,
  .section-bildtext__intro,
  .section-iconreihe__intro,
  .section-contact__intro,
  .section-quote--standort .section-quote__intro { margin-left: 0; }
}

/* Kriterien-Reihe auf schmalen Bildschirmen: Luft zum Fussbereich behalten. */
@media (max-width: 1024px) {
  .section-iconreihe--kriterien { padding-top: 64px; padding-bottom: 64px; }
}

/* ── Projekte-Uebersicht: Einleitung und Schaltflaechen ──────────
   Aufbau wie auf den Unternehmensseiten: Text eingerueckt links, die beiden
   Schaltflaechen rechts untereinander. */
.projects-list__intro-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
.projects-list__intro {
  flex: 1;
  min-width: 0;
  max-width: 860px;
  margin-left: 92px;
  line-height: 1.7;
  color: var(--bodycolor);
}
.projects-list__intro p { margin: 0 0 1rem; }
.projects-list__intro p:last-child { margin-bottom: 0; }
.projects-list__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  /* Der Text ist auf 860 px begrenzt — ohne das blieben die Schaltflaechen
     direkt daneben stehen statt an der rechten Kante. */
  margin-left: auto;
}
.projects-list__buttons .btn { text-align: center; min-width: 240px; }
@media (max-width: 900px) {
  .projects-list__intro-row { flex-direction: column; gap: 1.5rem; }
  .projects-list__intro { margin-left: 0; }
  /* Untereinander stehen die Schaltflaechen links auf der Textkante und nur so
     breit wie ihr Text — der automatische linke Rand haette sie weiter rechts
     gehalten. */
  .projects-list__buttons { align-self: stretch; align-items: flex-start; margin-left: 0; }
  .projects-list__buttons .btn { min-width: 0; }
}

/* Realisierte Projekte stehen im Entwurf auf hellblauem Grund (#d9e5ec),
   ueber die ganze Breite von der Kopf- bis zur Fusszeile. */
.projects-list-block--band {
  background: #d9e5ec;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.projects-list-block--band .dba-section-header__line { border-color: rgba(92, 94, 95, 0.18); }

/* ── Wischen auf Touchgeraeten ───────────────────────────────────
   Ohne touch-action kann der Browser die erste waagerechte Geste noch fuer
   das Scrollen beanspruchen — der erste Wisch lief dann ins Leere. „pan-y"
   heisst: senkrecht scrollt die Seite, waagerecht gehoert dem Slider.
   Bilder in den Folien sind Links; ohne user-drag startet sonst ein
   Ziehen des Links statt des Wischens. */
.news-slider .slick-list,
.quote-slider .slick-list,
.standort-slider .slick-list,
.news-gallery-slider .slick-list,
.projects-slider .slick-list,
.slider-wrapper .slick-list { touch-action: pan-y; }

.slick-slide img { -webkit-user-drag: none; user-drag: none; }

/* „ALLE NEWS" und die uebrigen Schaltflaechen bleiben einzeilig. */
.btn { white-space: nowrap; }


/* Der Einzug der Fliesstexte faellt auf schmalen Schirmen weg. Steht bewusst
   am Dateiende, damit die Regel nicht von spaeteren ueberholt wird. */
@media (max-width: 782px) {
  .wp-block-lazyblock-section-header + .wp-block-columns > .wp-block-column:first-child { padding-left: 0; }
  .section-projects__intro { margin-left: 0; }
}

/* Sprungmarken (z. B. „Team Wiesbaden" aus dem Standort-Slider) sollen unter der
   festen Kopfzeile stehen bleiben und nicht dahinter verschwinden. */
html { scroll-padding-top: calc(var(--header-h) + 24px); }

/* ── Einwilligung vor eingebetteten Vimeo-Filmen ─────────────────
   Erscheint erst nach dem Klick im Overlay, Vorbild strandbad-quartier.com.
   Nur bei eingebettetem Vimeo — eigene MP4-Dateien und der Verweis in der
   Fusszeile bleiben unberuehrt. */
.dba-video-consent {
  max-width: 540px;
  padding: 2.5rem 2rem;
  background: #fff;
  text-align: center;
}
.dba-video-consent p {
  margin: 0 0 1.5rem;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bodycolor);
}
.dba-video-consent a { color: inherit; text-decoration: underline; }
.dba-video-consent__btn { display: inline-block; }
@media (max-width: 560px) {
  .dba-video-consent { padding: 2rem 1.25rem; }
  .dba-video-consent p { font-size: 15px; }
}

/* Zahl und zugehöriges Wort als eine Einheit im Kennzahlen-Flex: sonst bricht
   die Zeile zwischen beiden („… und 2" / „Neubauten"). */
.stats-item__paar { display: inline-flex; align-items: baseline; gap: 8px; }
@media (max-width: 1024px) { .stats-item__paar { gap: 6px; } }

/* Film in der Lightbox: schwarzer Grund statt weisser Flaeche, damit um das
   16:9-Bild kein heller Rand steht. */
.fancybox-slide--iframe .fancybox-content { background: #000; }
.fancybox-slide--iframe .fancybox-iframe { background: #000; }

/* Film auf dem Handy ueber die volle Breite.
   Fancybox legt von sich aus 44 px Abstand auf allen vier Seiten um die Folie;
   bei 390 px Bildschirm blieben dem Film dadurch nur 302 px und ringsum ein
   breiter schwarzer Rand. Seitlich faellt der Abstand jetzt weg, oben und unten
   bleibt er — dort sitzt der Schliessen-Knopf. Die Groesse selbst rechnet
   flaecheSetzen() in main.js aus der verbleibenden Flaeche aus.
   Gilt nur fuer das Video-Overlay (eigene Grundklasse), die Bildergalerien
   behalten ihren Abstand. */
@media (max-width: 767px) {
  .dba-video-fancybox .fancybox-slide--iframe {
    padding-left: 0;
    padding-right: 0;
  }
}

/* News-Kopfbild oben verankern: hochformatige Fotos wurden sonst mittig
   beschnitten und die Koepfe lagen ausserhalb (Meldung vom 29.09.2026). */
.news-detail__image-wrap .news-card__image { object-position: top center; }
/* Hochformate mittig anschneiden — oben waere dort nur Himmel bzw. Zimmerdecke. */
.news-detail__image-wrap .news-card__image--hoch { object-position: center center; }