/* Google Fonts — Cabin Condensed (body/UI) + Oswald (Zeitstrahl large numbers) */
/* Google Fonts — Cabin Condensed (headings) + Inter (body) + Oswald (Zeitstrahl dates) */
@import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Oswald:wght@700;900&display=swap');

/*
 * main.css — Wedekind WordPress Theme
 * =============================================
 * Design System tokens + global styles + components.
 * Loaded via wp_enqueue_style() in inc/enqueue.php.
 *
 * TABLE OF CONTENTS:
 * ------------------
 * 1. Design System Tokens   (:root)
 * 2. Reset / Base Global
 * 3. Typography
 * 4. Site Layout
 * 5. Site Header
 * 6. Media Queries / Responsive
 */


/* ============================================================
   1. DESIGN SYSTEM TOKENS
   ============================================================ */

:root {

  /* --- Brand Gold (primary accent) --- */
  --color-white: #FFFFFF;
  --color-50: #fef9f3;
  --color-100: #fcecdb;
  --color-200: #fad8b6;
  --color-300: #f7be86;
  --color-400: #f29e49;
  --color-500: #FAA748;
  --color-600: #ca6a0a;
  --color-700: #a75808;
  --color-800: #834507;
  --color-900: #5f3205;
  --color-950: #3c1f03;
  --color-black: #000000;

  /* --- Brand Navy (background/structure) --- */
  --navy-50: #f2f5f8;
  --navy-100: #d9e2ea;
  --navy-200: #b3c6d4;
  --navy-300: #80a0b8;
  --navy-400: #407094;
  --navy-500: #004070;
  --navy-600: #00365f;
  --navy-700: #002d4e;
  --navy-800: #00233e;
  --navy-900: #001a2d;
  --navy-950: #00101c;

  /* --- Neutral --- */
  --neutral-white: #FFFFFF;
  --neutral-50: #f8f8f9;
  --neutral-100: #e9eaec;
  --neutral-200: #d3d5d9;
  --neutral-300: #b5b9c0;
  --neutral-400: #9095a0;
  --neutral-500: #6B7280;
  --neutral-600: #5b616d;
  --neutral-700: #4b505a;
  --neutral-800: #3b3f46;
  --neutral-900: #2b2e33;
  --neutral-950: #1b1d20;

  /* --- Header config --- */
  --header-height: 72px;
  --header-bg: var(--navy-500);
  --header-link-color: var(--neutral-white);
  --header-link-hover: var(--color-500);
  --header-gap: 32px;
  --header-padding-x: 48px;

  /* --- Global typography --- */
  /* Font families */
  --font-heading: 'Cabin Condensed', Arial, sans-serif; /* Encabezados h1–h6 y títulos de componentes */
  --font-body:    'Inter', Arial, sans-serif;            /* Párrafos, a, li, ul, span y todo texto no-encabezado */
  --font-base:    var(--font-heading);                  /* Alias de retrocompatibilidad → --font-heading */
  /* Font sizes */
  --font-size-xs:  0.75rem;    /* 12px — copyright, fine print        */
  --font-size-sm:  0.8125rem;  /* 13px — nav links, footer details    */
  --font-size-md:  0.875rem;   /* 14px — sub-menu, sibling-nav mobile */
  --font-size-nav: 0.9375rem;  /* 15px — mobile nav primary links     */
  --font-size-base: 1rem;      /* 16px — body / paragraph base        */
  --text-p-m: clamp(1.0625rem, 0.9375rem + 0.625vw, 1.25rem); /* ~17px → 20px — body paragraphs */
  --text-p-s: 0.875rem; /* 14px — paragraph small (design system) */
  --text-h1-s: clamp(2.625rem, 2.2729rem + 1.5023vw, 3.625rem); /* H1 small — from design system */
  --text-h2-s: clamp(1.875rem, 1.6109rem + 1.1268vw, 2.625rem); /* H2 small — from design system */
  --text-h2-m: clamp(2.125rem, 1.8609rem + 1.1268vw, 2.875rem); /* H2 / card title */
  /* Hero grid labels — design-system: --text-ui-title-xl */
  --text-hero-cell: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
  /* Hero / home image sliders — horizontal slide transition */
  --hero-slider-slide-dur: 0.5s;

  /* --- Spacing tokens (from design system) --- */
  --space-xl: clamp(40px, 1.50vw + 2.148rem, 56px); /* ~40px → 56px */
  --p-xl:     var(--space-xl);                       /* all-sides padding XL */

}


/* ============================================================
   2. RESET / BASE GLOBAL
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* scroll-behavior: smooth is intentionally NOT set here.
     Smooth scroll-behavior on <html> causes the browser to animate
     scroll-restoration on page reload/back-nav, locking scroll ~1s
     on tall pages. Anchor-link smooth scrolling is handled via JS instead. */
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--neutral-900);
  background-color: var(--neutral-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: clip prevents horizontal scroll at document level
     WITHOUT creating a scroll container (unlike overflow-x: hidden).
     This stops scroll events from being incorrectly routed to page
     wrappers, fixing the ~1s scroll block on tall pages. */
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

p {
  font-size: var(--text-p-m);
}

/* ── Encabezados globales: Cabin Condensed via token ─── */
h1,
h2,
h3 {
  font-family: var(--font-heading);
}


/* ============================================================
   3. SITE LAYOUT
   ============================================================ */

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* ============================================================
   4. SITE HEADER
   ============================================================ */

/* --- Wrapper --- */
.site-header {
  background-color: var(--header-bg);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;

  /* Header leads the fade-in sequence */
  opacity: 0;
  animation: hero-fade-in 0.5s ease forwards;
  animation-delay: 0s;
}

/* --- Inner container: CSS Grid 3 equal columns — logo always centred --- */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-height);
  padding-left: var(--header-padding-x);
  padding-right: var(--header-padding-x);
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* --- Left nav zone --- */
.header-nav--left {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}

/* --- Right nav zone --- */
.header-nav--right {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  gap: var(--header-gap);
}

.header-nav--right .nav-menu {
  flex: 1 1 auto;
  min-width: 0;
}

.header-nav--right .header-translate {
  flex-shrink: 0;
  margin-left: auto;
}

/* --- Site branding (centered logo) --- */
.site-branding {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site-logo-link {
  display: flex;
  align-items: center;
}

.site-logo {
  width: 140px;
  height: auto;
}

/* --- Nav menu list --- */
.nav-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Nav menu items --- */
.nav-menu li {
  display: flex;
  align-items: center;
}

/* --- Nav menu links --- */
.nav-menu li a {
  display: inline-block;
  color: var(--header-link-color);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding-top: 4px;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}

.nav-menu li a:hover,
.nav-menu li a:focus {
  color: var(--header-link-hover);
}

/* Großprojekte: keep ß visible (uppercase transform maps ß → SS in browsers) */
.site-header .nav-label-grossprojekte-eszett {
  text-transform: none;
}

.nav-menu li.current-menu-item>a,
.nav-menu li.current-page-ancestor>a {
  color: var(--color-500);
}

/* --- Split navigation: left shows items 1-3, right shows items 4+ --- */
/* Both nav elements receive all items from WP; CSS controls visibility per side */
.header-nav--left .nav-menu>li:nth-child(n+4) {
  display: none;
}

.header-nav--right .nav-menu>li:nth-child(-n+3) {
  display: none;
}

/* --- Dropdown sub-menu ─────────────────────────────────────── */

/* Parent item with children: show chevron indicator */
.nav-menu li.menu-item-has-children>a::after {
  content: ' ▾';
  font-size: 0.7em;
  letter-spacing: 0;
  opacity: 0.75;
}

/* Position parent as anchor for the dropdown */
.nav-menu li.menu-item-has-children {
  position: relative;
}

/* Invisible hover bridge — keeps :hover on parent while moving to .sub-menu */
.nav-menu li.menu-item-has-children::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  z-index: 199;
}

/* The sub-menu list — hidden by default */
.nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background-color: var(--header-bg);
  border-top: 2px solid var(--color-500);
  border-radius: 0 0 6px 6px;
  padding: 8px 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 200;
  /* override parent width:100% */
  width: auto;
  justify-content: flex-start;
}

/* Overlap bridge — sub-menu hit area meets parent link (no dead zone) */
.nav-menu .sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

/* Reveal on hover/focus */
.nav-menu li.menu-item-has-children:hover>.sub-menu,
.nav-menu li.menu-item-has-children:focus-within>.sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Sub-menu link items */
.nav-menu .sub-menu li {
  width: 100%;
  justify-content: flex-start;
}

.nav-menu .sub-menu li a {
  display: block;
  width: 100%;
  padding: 9px 20px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--header-link-color);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-menu .sub-menu li a:hover {
  color: var(--color-500);
  background-color: rgba(255, 255, 255, 0.06);
}

.nav-menu .sub-menu li.current-menu-item>a {
  color: var(--color-500);
}



/* --- Polylang language switcher --- */
.header-translate {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-translate ul,
.header-translate .header-lang-switcher {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-translate .lang-item a {
  display: flex;
  align-items: center;
  padding: 0;
}

.header-translate img {
  display: inline-block;
  vertical-align: middle;
}


/* ============================================================
   5. MEDIA QUERIES / RESPONSIVE
   ============================================================ */

/* ─── Mobile/Tablet components — hidden on desktop by default ── */
.mobile-topbar,
.mobile-menu-drawer {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════
   TABLET PORTRAIT + MOBILE  (≤ 1024px)
   Switches from desktop grid to hamburger layout.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ── Hide desktop grid columns ─────────────────────────────── */
  .header-inner {
    display: none;
  }

  /* ── Mobile topbar: tres zonas flex ───────────────────────── */
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 16px;
    position: relative;
    /* anchor for logo absolute centering */
  }

  /* ── Hamburger button ── */
  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    z-index: 2;
  }

  .mobile-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .mobile-menu-btn__bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--neutral-white);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
  }

  /* Hamburger → X animation */
  .mobile-menu-btn.is-open .mobile-menu-btn__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-menu-btn.is-open .mobile-menu-btn__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .mobile-menu-btn.is-open .mobile-menu-btn__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ── Logo centrado (absolute trick) ───────────────────────── */
  .mobile-logo-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 1;
  }

  .mobile-logo {
    width: 120px;
    height: auto;
    display: block;
  }

  /* ── Flags (derecha) ───────────────────────────────────────── */
  .mobile-translate {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 2;
    margin-right: -8px;
    /* empuja las banderas hacia el borde derecho */
  }

  .mobile-translate ul,
  .mobile-translate .header-lang-switcher {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-translate .lang-item a {
    display: flex;
    align-items: center;
    padding: 0;
  }

  /* ── Mobile nav drawer (fixed below sticky header) ─────────── */
  .mobile-menu-drawer {
    display: block;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--header-bg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.35s ease;
    z-index: 99;
  }

  .mobile-menu-drawer.is-open {
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  }

  /* ── Mobile nav list ───────────────────────────────────────── */
  .mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 20px;
  }

  .mobile-nav-list>li>a {
    display: block;
    padding: 13px 24px;
    color: var(--neutral-white);
    font-family: var(--font-body);
    font-size: var(--font-size-nav);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  .mobile-nav-list>li>a:hover,
  .mobile-nav-list>li.current-menu-item>a,
  .mobile-nav-list>li.current-page-ancestor>a {
    color: var(--color-500);
    background-color: rgba(255, 255, 255, 0.04);
  }

  /* Sub-menu — siempre visible, indentado */
  .mobile-nav-list .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.18);
  }

  .mobile-nav-list .sub-menu li a {
    display: block;
    padding: 10px 24px 10px 40px;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: color 0.15s ease;
  }

  .mobile-nav-list .sub-menu li a:hover,
  .mobile-nav-list .sub-menu li.current-menu-item>a {
    color: var(--color-500);
  }

}


/* ═══════════════════════════════════════════════════════════════
   DESKTOP ONLY (> 1024px) — garantiza que mobile bits no aparecen
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {

  .mobile-topbar,
  .mobile-menu-drawer {
    display: none !important;
  }
}




/* ============================================================
   7. HERO GRID — Front Page
   ============================================================ */

:root {
  --hero-purple: #6673A9;
  --hero-gold: var(--color-500);
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}

/* Fade-in keyframe */
@keyframes hero-fade-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  overflow: hidden;
  text-decoration: none;
  transition: opacity 0.25s ease;

  /* Staggered fade-in on page load */
  opacity: 0;
  animation: hero-fade-in 0.55s ease forwards;
}

/* Stagger delays — 8 cells */
.hero-cell:nth-child(1) {
  animation-delay: 0.05s;
}

.hero-cell:nth-child(2) {
  animation-delay: 0.15s;
}

.hero-cell:nth-child(3) {
  animation-delay: 0.25s;
}

.hero-cell:nth-child(4) {
  animation-delay: 0.35s;
}

.hero-cell:nth-child(5) {
  animation-delay: 0.45s;
}

.hero-cell:nth-child(6) {
  animation-delay: 0.55s;
}

.hero-cell:nth-child(7) {
  animation-delay: 0.65s;
}

.hero-cell:nth-child(8) {
  animation-delay: 0.75s;
}

.hero-cell:focus-visible {
  outline: 3px solid var(--color-500);
  outline-offset: -3px;
}

/* Gold hover — darken to --color-600 */
.hero-cell--gold:hover {
  background-color: var(--color-600);
}

/* Purple hover — darken slightly */
.hero-cell--purple:hover {
  background-color: #575e96;
}

/* Subtle label scale on hover */
.hero-cell__label {
  transition: transform 0.3s ease;
}

.hero-cell--gold:hover .hero-cell__label,
.hero-cell--purple:hover .hero-cell__label {
  transform: scale(1.04);
}

/* Gold cells — with transition */
.hero-cell--gold {
  background-color: var(--hero-gold);
  transition: background-color 0.3s ease;
}

/* Gold hover — tono 400 (más claro) */
.hero-cell--gold:hover {
  background-color: var(--color-400);
}

/* Purple cells — with transition */
.hero-cell--purple {
  background-color: var(--hero-purple);
  transition: background-color 0.3s ease;
}

/* Purple hover — tono 400 (más claro) */
.hero-cell--purple:hover {
  background-color: #7a87ba;
}

.hero-cell--photo {
  padding: 0;
}

/* Home hero: horizontal slide — outer block + full-width track (flex parent was shrinking the track) */
.hero-cell--photo .hero-cell-slider.gross-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-cell--photo .hero-cell-slider .gross-hero-slider__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 100%;
  /* One “viewport” = 100% of cell; track = N viewports wide (must not flex-shrink) */
  width: calc(100% * var(--gross-slider-slides, 1));
  min-width: calc(100% * var(--gross-slider-slides, 1));
  flex-shrink: 0;
  transition: transform var(--hero-slider-slide-dur) ease-in-out;
  will-change: transform;
}

.hero-cell--photo .hero-cell-slider .gross-hero-slider__slide {
  position: relative;
  flex: 0 0 calc(100% / var(--gross-slider-slides, 1));
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.hero-cell--photo .hero-cell-slider .gross-hero-slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-cell--photo:hover .hero-cell-slider .gross-hero-slider__img {
  transform: scale(1.07);
}

.hero-cell__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Elegant zoom-in on photo hover */
.hero-cell--photo:hover .hero-cell__image {
  transform: scale(1.07);
}

.hero-cell__label {
  position: relative;
  z-index: 1;
  color: var(--neutral-white);
  font-family: var(--font-heading);
  font-size: var(--text-hero-cell);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  text-align: center;
}

.hero-cell__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}

.hero-cell__icon svg {
  width: 100%;
  height: 100%;
}

/* ── Tablet portrait: 2 cols — Color ABOVE paired photo ── */
@media (max-width: 1024px) {

  .hero-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: auto;
    min-height: 100vh;
  }

  /*
   * HTML order: Gold(1) Photo1(2) Purple-Ref(3) Photo2(4) Photo3(5) Purple-Priv(6) Photo4(7) Gold-Untern(8)
   * Desired 2-col layout:
   *   Row1: Gold | Purple-Ref
   *   Row2: Photo1 | Photo2
   *   Row3: Purple-Priv | Gold-Untern
   *   Row4: Photo3 | Photo4
   */
  .hero-cell:nth-child(1) {
    order: 1;
  }

  /* Gold/Groß */
  .hero-cell:nth-child(2) {
    order: 3;
  }

  /* Photo1 */
  .hero-cell:nth-child(3) {
    order: 2;
  }

  /* Purple/Ref */
  .hero-cell:nth-child(4) {
    order: 4;
  }

  /* Photo2 */
  .hero-cell:nth-child(5) {
    order: 7;
  }

  /* Photo3 */
  .hero-cell:nth-child(6) {
    order: 5;
  }

  /* Purple/Priv */
  .hero-cell:nth-child(7) {
    order: 8;
  }

  /* Photo4 */
  .hero-cell:nth-child(8) {
    order: 6;
  }

  /* Gold/Untern */

}

/* ── Mobile: 1 col — Color ABOVE its photo (interleaved pairs) ── */
@media (max-width: 560px) {

  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }

  /*
   * Desired order: Gold, Photo1, Purple-Ref, Photo2, Purple-Priv, Photo3, Gold-Untern, Photo4
   */
  .hero-cell:nth-child(1) {
    order: 1;
  }

  /* Gold/Groß */
  .hero-cell:nth-child(2) {
    order: 2;
  }

  /* Photo1 */
  .hero-cell:nth-child(3) {
    order: 3;
  }

  /* Purple/Ref */
  .hero-cell:nth-child(4) {
    order: 4;
  }

  /* Photo2 */
  .hero-cell:nth-child(5) {
    order: 6;
  }

  /* Photo3 */
  .hero-cell:nth-child(6) {
    order: 5;
  }

  /* Purple/Priv */
  .hero-cell:nth-child(7) {
    order: 8;
  }

  /* Photo4 */
  .hero-cell:nth-child(8) {
    order: 7;
  }

  /* Gold/Untern */

  .hero-cell {
    min-height: 220px;
  }

  .hero-cell__label {
    font-size: clamp(1.125rem, 3.5vw, 1.25rem);
  }

}


/* ============================================================
   8. SITE FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--navy-500);
  width: 100%;
  padding: 3rem 0 2rem;
}

/* 4-column inner grid */
.footer-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--header-padding-x);
  padding-right: var(--header-padding-x);
}

/* Each column */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--neutral-white);
}

.footer-col--location {
  flex: 1.2;
}

.footer-col--social-legal {
  flex: 1;
}

.footer-col--brand {
  flex: 1;
  align-items: flex-end;
  justify-content: space-between;
}

/* ── Location title (icon + label) ── */
.footer-location-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--font-size-nav);
  font-weight: 600;
  color: var(--neutral-white);
  margin: 0;
}

.footer-location-icon svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--neutral-white);
}

/* ── Address ── */
.footer-address {
  font-size: var(--font-size-sm);
  line-height: 1.65;
  color: var(--navy-100);
  font-style: normal;
  padding-left: 1.4rem;
}

/* ── Contact list ── */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-left: 0;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.footer-contact-icon svg {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  color: var(--navy-100);
}

.footer-contact-link {
  font-size: var(--font-size-sm);
  color: var(--navy-100);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact-link:hover {
  color: var(--color-400);
}

/* ── Social title ── */
.footer-social-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--neutral-white);
  margin: 0 0 0.25rem;
}

/* ── Social icons row ── */
.footer-social-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  color: var(--neutral-white);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.footer-social-link:hover {
  border-color: var(--color-400);
  background-color: rgba(242, 158, 73, 0.15);
}

.footer-social-link svg {
  width: 1rem;
  height: 1rem;
}

/* ── Legal nav ── */
.footer-legal-nav {
  margin-top: 0.5rem;
}

.footer-legal-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-legal-link {
  font-size: var(--font-size-sm);
  color: var(--navy-100);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-link:hover {
  color: var(--color-400);
}

/* ── Brand column ── */
.footer-logo-link {
  display: flex;
}

.footer-logo {
  width: 130px;
  height: auto;
}

.footer-copyright {
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--navy-100);
  text-align: right;
  margin-top: auto;
}

/* ── Responsive: tablet ── */
@media (max-width: 1024px) {

  .footer-inner {
    flex-wrap: wrap;
  }

  .footer-col--location {
    flex: 1;
    min-width: calc(50% - 1.25rem);
  }

  .footer-col--social-legal {
    flex: 1;
    min-width: calc(50% - 1.25rem);
  }

  .footer-col--brand {
    flex: 1 0 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
  }

  .footer-copyright {
    text-align: right;
  }

}

/* ── Responsive: mobile ── */
@media (max-width: 560px) {

  .footer-inner {
    flex-direction: column;
    gap: 2rem;
  }

  .footer-col--location,
  .footer-col--social-legal {
    min-width: 100%;
  }

  .footer-col--brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer-copyright {
    text-align: left;
  }

}


/* ============================================================
   9. PROJECT GRID — Grossprojekte
   ============================================================ */

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}

.project-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  text-decoration: none;
}

.project-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card:hover .project-card__image {
  transform: scale(1.06);
}

.project-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(238, 125, 12, 0);
  transition: background-color 0.35s ease;
}

.project-card:hover .project-card__overlay {
  background-color: rgba(238, 125, 12, 0.75);
}

.project-card__title {
  color: var(--neutral-white);
  font-family: var(--font-heading);
  font-size: var(--text-h2-m);
  font-weight: 700;
  text-align: center;
  padding: 0 1.5rem;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}

.project-card:hover .project-card__title {
  opacity: 1;
  transform: scale(1);
}

/* ── Touch devices: título siempre visible ─────────────────────
   En tablet / mobile el usuario no puede hacer hover con el ratón.
   El título se ancla al fondo con un degradado naranja permanente.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 6 cards en 3 filas: cada card ocupa exactamente 1/3 del alto visible */
  .project-card {
    aspect-ratio: unset;
    height: calc( (100vh - var(--header-height, 60px)) / 3 );
  }

  /* overlay: degradado de abajo (naranja) a transparente arriba — siempre visible */
  .project-card__overlay {
    align-items:    flex-end;
    justify-content: center;
    background:     linear-gradient(
                      to top,
                      rgba(238, 125, 12, 0.88) 0%,
                      rgba(238, 125, 12, 0.45) 40%,
                      rgba(238, 125, 12, 0.00) 100%
                    ) !important;
    transition: none;
  }

  /* anular override hover del overlay en touch */
  .project-card:hover .project-card__overlay {
    background: linear-gradient(
                  to top,
                  rgba(238, 125, 12, 0.88) 0%,
                  rgba(238, 125, 12, 0.45) 40%,
                  rgba(238, 125, 12, 0.00) 100%
                ) !important;
  }

  /* título: siempre visible, anclado al bottom-center */
  .project-card__title {
    font-size:  clamp(0.95rem, 3.5vw, 1.35rem); /* cabe en una sola línea sin salir de la caja */
    text-align: center;
    padding:    0.5rem 1rem 0.85rem;
    opacity:    1;
    transform:  none;
    transition: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  }

  /* anular scale del hover (innecesario en touch) */
  .project-card:hover .project-card__title {
    opacity:   1;
    transform: none;
  }
}
/* ── PRIVATPROJEKTE — overlay azul (override del naranja global) ──
   Solo afecta a .project-grid--privat; grossprojekte queda sin cambios.
   ─────────────────────────────────────────────────────────────────── */

/* Desktop: estado rest — transparente */
.project-grid--privat .project-card__overlay {
  background-color: rgba(0, 64, 112, 0);   /* --navy-500 a 0% */
}

/* Desktop: hover — azul semi-transparente */
.project-grid--privat .project-card:hover .project-card__overlay {
  background-color: rgba(0, 64, 112, 0.75); /* --navy-500 a 75% */
}

/* Mobile: gradiente siempre visible, de azul (abajo) a transparente (arriba) */
@media (max-width: 768px) {

  .project-grid--privat .project-card__overlay {
    background: linear-gradient(
                  to top,
                  rgba(0, 64, 112, 0.88) 0%,
                  rgba(0, 64, 112, 0.45) 40%,
                  rgba(0, 64, 112, 0.00) 100%
                ) !important;
  }

  .project-grid--privat .project-card:hover .project-card__overlay {
    background: linear-gradient(
                  to top,
                  rgba(0, 64, 112, 0.88) 0%,
                  rgba(0, 64, 112, 0.45) 40%,
                  rgba(0, 64, 112, 0.00) 100%
                ) !important;
  }

}


/* ============================================================
   10. GROSS-HERO — Sub-page fullscreen hero
   ============================================================ */

.gross-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height));
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gross-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 1;
}

.gross-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.gross-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 2rem;
  max-width: 760px;
}

.gross-hero__title {
  color: var(--neutral-white);
  font-family: var(--font-heading);
  font-size: var(--text-h1-s);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.gross-hero__excerpt {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  line-height: 1.65;
  max-width: 560px;
}

.gross-hero__scroll-arrow {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--neutral-white);
  text-decoration: none;
  animation: hero-arrow-bounce 1.8s ease-in-out infinite;
}

.gross-hero__scroll-arrow svg {
  width: 2rem;
  height: 2rem;
}

@keyframes hero-arrow-bounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(6px);
  }
}


/* ============================================================
   11. SIBLING NAV — Horizontal navigation between sub-pages
   ============================================================ */

.sibling-nav {
  width: 100%;
  background-color: var(--neutral-white);
  border-bottom: 1px solid var(--neutral-100);
}

.sibling-nav__list {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--header-padding-x);
  padding-right: var(--header-padding-x);
  gap: 0;
}

.sibling-nav__link {
  display: block;
  padding: 1.125rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--font-size-nav);
  font-weight: 500;
  color: var(--navy-500);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sibling-nav__link:hover {
  color: var(--color-500);
  border-bottom-color: var(--color-500);
}

.sibling-nav__item--active .sibling-nav__link {
  color: var(--color-500);
  border-bottom-color: var(--color-500);
  font-weight: 700;
}

/* ── Back button ─────────────────────────────────────────────── */
.sibling-nav__back-item {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
}

.sibling-nav__back {
  display: inline-flex;
  align-items: center;
  padding: 8px 28px;
  background-color: var(--color-500);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  border-radius: 24px;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.sibling-nav__back:hover {
  opacity: 0.85;
}


/* ============================================================
   12. SCHWIMM GRID — 3-col content mosaic
   ============================================================ */

.schwimm-grid {
  display: grid;
  /*
   * 4 internal columns = 3 visual columns:
   *   col1     col2 (full)  col3-left  col3-right
   * Areas:
   *   photo1  photo2  photo3  orange   (row 1)
   *   purple  photo2  content content  (row 2)
   * photo2 spans both rows = full height
   */
  grid-template-columns: 1fr 1fr 0.5fr 0.5fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "photo1  photo2  photo3  orange"
    "purple  photo2  content content";
  width: 100%;
  min-height: 560px;
}

/* ── Grid area assignments ── */
.schwimm-area--photo1 {
  grid-area: photo1;
}

.schwimm-area--photo2 {
  grid-area: photo2;
}

.schwimm-area--photo3 {
  grid-area: photo3;
}

.schwimm-area--orange {
  grid-area: orange;
  background-color: var(--color-500);
}

.schwimm-area--purple {
  grid-area: purple;
  background-color: var(--hero-purple);
}

.schwimm-area--content {
  grid-area: content;
}

.schwimm-cell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.schwimm-cell--photo {
  background-color: var(--neutral-100);
}

.schwimm-cell__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}

.schwimm-cell--photo:hover .schwimm-cell__img {
  transform: scale(1.04);
}

.schwimm-cell--photo {
  background-color: var(--neutral-100);
}

/* Gold text cell (orange bg) — kept for future use */
.schwimm-cell--text {
  background-color: var(--color-500);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2.5rem 2rem;
  gap: 1rem;
}

/* White text cell — bg white, text dark, right-aligned */
.schwimm-cell--text-white {
  background-color: var(--neutral-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding: 2.5rem 2.5rem;
  gap: 1rem;
}

.schwimm-text__title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin: 0;
  color: var(--neutral-white);
  /* default: orange cell */
}

.schwimm-cell--text-white .schwimm-text__title {
  color: var(--navy-500);
}

.schwimm-text__excerpt {
  font-size: var(--font-size-nav);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  /* default: orange cell */
}

.schwimm-cell--text-white .schwimm-text__excerpt {
  color: var(--navy-400);
}

.schwimm-text__body {
  font-size: var(--text-p-m);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  /* default: orange cell */
}

.schwimm-cell--text-white .schwimm-text__body {
  color: var(--navy-500);
}

.schwimm-text__body p {
  margin: 0;
}

/* ── Responsive: tablet ── */
@media (max-width: 900px) {

  .schwimm-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "photo1 photo2"
      "photo3 orange"
      "purple content";
    min-height: unset;
  }

  .schwimm-area--content {
    aspect-ratio: unset;
    min-height: 260px;
  }

}

@media (max-width: 560px) {

  .schwimm-grid {
    grid-template-columns: 1fr;
  }

  .sibling-nav__list {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sibling-nav__item {
    flex-shrink: 0;
  }

  .sibling-nav__link {
    padding: 0.875rem 1rem;
    font-size: var(--font-size-md);
    white-space: nowrap;
  }

}


/* ============================================================
   13. SW-LAYOUT — Schwimmbäder content section (Flexbox)
   ============================================================ */

/* Outer row: 3 equal columns */
.sw-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 560px;   /* crece con el contenido en lugar de altura fija */
  align-items: stretch;
}

/* Each column */
.sw-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Column width proportions: 25% / 25% / 50% */
.sw-col--1 {
  flex: 0 0 25%;
}

.sw-col--2 {
  flex: 0 0 25%;
}

.sw-col--3 {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  overflow: visible;   /* permite que sw-text empuje la altura */
}


/* ── Photo cells ── */
.sw-photo {
  flex: 0 0 50%;
  /* exactly half of parent column height */
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Full-height photo (col 2) */
.sw-photo--full {
  flex: 1;
}

.sw-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}

.sw-photo:hover .sw-photo__img {
  transform: scale(1.04);
}

/* ── Color blocks ── */
.sw-purple {
  flex: 0 0 50%;
  /* exactly half of parent column height */
  min-height: 0;
  background-color: var(--hero-purple);
}

.sw-orange {
  flex: 1;
  background-color: var(--color-500);
}

/* ── Col 3 internals ── */

/* Top row: photo (left) + orange (right) */
.sw-col3-top {
  flex: 0 0 auto;        /* no depende del porcentaje del padre */
  min-height: 280px;     /* altura mínima visual garantizada */
  display: flex;
  flex-direction: row;
  overflow: hidden;      /* recorta las fotos correctamente */
}

/* Bottom: white text, right-aligned */
.sw-text {
  flex: 1 1 auto;        /* crece con el contenido */
  height: auto;          /* no forzar altura fija */
  overflow: visible;     /* no recortar padding ni texto */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding: var(--p-xl);
  gap: 0.75rem;
  background-color: var(--neutral-white);
}

.sw-text__title {
  color: var(--navy-800);
  font-family: var(--font-heading);
  font-size: var(--text-h2-s);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
}

h2.sw-text__title {
  text-transform: uppercase;
}

.sw-text__body {
  color: var(--navy-800);
  font-size: var(--text-p-m);
  line-height: 1.7;
  text-align: right;
}

.sw-text__body p {
  margin: 0 0 0.5rem;
  color: var(--navy-800);
}

/* ── Responsive: tablet portrait ── */
@media (max-width: 900px) {

  .sw-layout {
    height: auto;
    flex-wrap: wrap;
    align-items: stretch;
    overflow: visible;
    /* expande el flujo del documento — empuja el footer */
  }

  /* Col 1 y Col 2: lado a lado al 50%, misma altura por flex stretch */
  .sw-col {
    flex: 0 0 50%;
    min-height: 260px;
  }

  /* Bloques de color: altura fija para que no colapsen */
  .sw-purple,
  .sw-orange:not(.sw-col3-top .sw-orange) {
    min-height: 120px;
    flex: none;
  }

  /* Col 3: fila completa — overflow visible para que el texto empuje el footer */
  .sw-col--3 {
    flex: 0 0 100%;
    height: auto;
    overflow: visible;
    /* ← clave: no recortar el contenido de sw-text */
  }

  /* sw-col3-top: altura explícita (no porcentaje de padre auto) */
  .sw-col3-top {
    height: 220px;
    flex: none;
    flex-shrink: 0;
  }

  /* Bloque de texto: altura libre + padding en todos los lados */
  .sw-text {
    flex: none;
    height: auto;
    overflow: visible;
    min-height: 160px;
    padding: var(--p-xl);
    text-align: center;
    align-items: center;
  }

}

/* ── Responsive: mobile portrait ── */
@media (max-width: 560px) {

  .sw-layout {
    overflow: visible;
    /* idem — el contenido empuja el footer */
  }

  /* Cols 1 y 2: 2 columnas lado a lado */
  .sw-col {
    flex: 0 0 50%;
    min-height: 200px;
  }

  /* Col 3: fila completa — no clipear */
  .sw-col--3 {
    flex: 0 0 100%;
    height: auto;
    overflow: visible;
    /* ← clave */
  }

  /* sw-col3-top: altura fija — no depender de 50% de padre auto */
  .sw-col3-top {
    height: 180px;
    flex: none;
    flex-shrink: 0;
  }

  /* Bloque de texto: padding uniforme visible en todos los lados */
  .sw-text {
    flex: none;
    height: auto;
    overflow: visible;
    padding: var(--p-xl);
    text-align: center;
    align-items: center;
  }

}

/* ============================================================
   14. FADE-IN SEQUENCE — shared animation class
   ============================================================ */


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Invisible until JS adds .is-visible (IntersectionObserver) */
.fade-seq {
  opacity: 0;
  transform: translateY(20px);
  transition: none;
  /* JS controls timing via animation */
}

/* Triggered by IntersectionObserver in main.js */
.fade-seq.is-visible {
  animation: fadeInUp 0.65s ease both;
}

.fade-seq--delay-0.fade-seq.is-visible {
  animation-delay: 0s;
}

.fade-seq--delay-065.fade-seq.is-visible {
  animation-delay: 0.65s;
}


/* ============================================================
   15. WOHN-LAYOUT — Wohnbauprojekte content section
   ============================================================ */

/* Outer wrapper: flex column (img-row on top, text below) */
.wohn-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ── Image row: 3 equal columns side by side ── */
.wohn-img-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 480px;
  /* grows taller if col 1 text needs more space */
  align-items: stretch;
}

.wohn-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Column width proportions: 50% / 25% / 25% */
.wohn-col--1 {
  flex: 0 0 50%;
}

.wohn-col--2 {
  flex: 0 0 25%;
}

.wohn-col--3 {
  flex: 0 0 25%;
}


/* Col 1: flex column — top row (inner flex row) + text bottom */
.wohn-col--1 {
  flex-direction: column;
}

/* Inner top row: orange (left half) + photo (right half) */
.wohn-col1-top {
  height: 240px;
  /* fixed — matches col 2 blocks */
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.wohn-col1-top .wohn-orange,
.wohn-col1-top .sw-photo {
  flex: 0 0 50%;
  min-width: 0;
  height: 100%;
}

/* Text block inside col 1 — grows with content */
.wohn-col--1 .wohn-text {
  flex: 1;
  min-height: 0;
  overflow: visible;
}

/* Col 2: color block 240px (purple or orange) + photo fills rest */
.wohn-col--2 .wohn-purple,
.wohn-col--2 .wohn-orange {
  height: 240px;
  flex-shrink: 0;
}

.wohn-col--2 .sw-photo {
  flex: 1;
  min-height: 0;
}

/* Col 3 photo takes full column height */
.wohn-col--3 .sw-photo--full {
  flex: 1;
}

/* Color accent blocks */
.wohn-orange {
  background-color: var(--color-500);
}

.wohn-purple {
  background-color: var(--hero-purple);
}

/* ── Content row: full width, white bg, left-aligned ── */
.wohn-text {
  width: 100%;
  background-color: var(--neutral-white);
  padding: var(--p-xl);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.wohn-text__title {
  color: var(--navy-800);
  font-family: var(--font-heading);
  font-size: var(--text-h2-s);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
}

.wohn-text__body {
  color: var(--navy-800);
  font-size: var(--text-p-m);
  line-height: 1.75;
  max-width: 520px;
}

.wohn-text__body p {
  margin: 0 0 0.5rem;
  color: var(--navy-800);
}

/* ── Responsive: tablet ── */
@media (max-width: 900px) {

  .wohn-img-row {
    flex-wrap: wrap;
    min-height: unset;
  }

  /* Col 1: full width, height auto so text shows completely */
  .wohn-col--1 {
    flex: 0 0 100%;
    height: auto;
  }

  .wohn-col1-top {
    height: 220px;
  }

  .wohn-col--1 .wohn-text {
    flex: none;
    height: auto;
    overflow: visible;
  }

  /* Col 2 and 3: side by side at 50% each */
  .wohn-col--2 {
    flex: 0 0 50%;
    height: 280px;
  }

  .wohn-col--2 .wohn-purple,
  .wohn-col--2 .wohn-orange {
    height: 140px;
  }

  .wohn-col--3 {
    flex: 0 0 50%;
    height: 280px;
  }

  .wohn-text {
    padding: var(--p-xl);
    max-width: 100%;
  }

}

/* ── Responsive: mobile portrait ── */
@media (max-width: 560px) {

  /* Col 1 sigue full-width — contiene el bloque de texto */
  .wohn-col--1 {
    flex: 0 0 100%;
    height: auto;
  }

  .wohn-col1-top {
    height: 180px;
  }

  .wohn-col--1 .wohn-text {
    flex: none;
    height: auto;
    overflow: visible;
  }

  /* Col 2 y 3: lado a lado al 50% — 2 columnas */
  .wohn-col--2 {
    flex: 0 0 50%;
    height: 220px;
  }

  .wohn-col--2 .wohn-purple,
  .wohn-col--2 .wohn-orange {
    height: 110px;
  }

  .wohn-col--3 {
    flex: 0 0 50%;
    height: 220px;
  }

  .wohn-text {
    padding: var(--p-xl);
  }

}




/* ============================================================
   15b. FASS-LAYOUT — Fassaden content section (2-col 50/50)
   ============================================================ */

/* ── Outer wrapper: 2 columns 50/50, crece con el contenido ── */
.fass-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 500px;
  align-items: stretch;  /* ambas columnas igualan su altura */
}

/* ── LEFT COLUMN (50%) ──────────────────────── */
.fass-left {
  flex: 0 0 50%;
  display: flex;
  flex-direction: row;
  align-self: stretch;   /* se estira para igualar la columna derecha */
  overflow: hidden;      /* solo para recortar las imágenes */
  min-height: 400px;     /* altura mínima visual para las imágenes */
}

/* Sub-col A: img1 ocupa todo el alto disponible */
.fass-left__img--a {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

/* Sub-col B: purple + img2 apilados en columna */
.fass-left__subcol {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Bloque morado: ocupa el 50% de la sub-col */
.fass-left__purple {
  flex: 0 0 50%;
  background-color: var(--hero-purple);
  min-height: 200px;
}

/* img2: ocupa el 50% restante */
.fass-left__img--b {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

/* ── RIGHT COLUMN (50%) ─────────────────────── */
.fass-right {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  overflow: visible;     /* permite que el texto crezca libremente */
}

/* Top row: img3 (izq) + naranja (der) — altura mínima fija para las imágenes */
.fass-right__top {
  flex: 0 0 auto;
  min-height: 260px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.fass-right__img {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.fass-right__orange {
  flex: 0 0 40%;
  background-color: var(--color-500);
}

/* Bloque de texto: se expande con el contenido, sin scroll */
.fass-right__text {
  flex: 1 1 auto;
  overflow: visible;
  height: auto;
  text-align: right;
  align-items: flex-end;
}

/* ── Shared image style ── */
.fass-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}

.fass-left__img:hover .fass-img,
.fass-right__img:hover .fass-img {
  transform: scale(1.04);
}

/* ── Responsive: tablet ≤900px ── */
@media (max-width: 900px) {

  .fass-layout {
    flex-direction: column;
    min-height: unset;
  }

  .fass-left {
    flex: none;
    min-height: 320px;
  }

  .fass-left__img--a {
    min-height: 320px;
  }

  .fass-left__purple {
    min-height: 160px;
  }

  .fass-left__img--b {
    min-height: 160px;
  }

  .fass-left__subcol {
    flex: 0 0 45%;
  }

  .fass-right {
    flex: none;
  }

  .fass-right__top {
    flex: none;
    min-height: 220px;
  }

  .fass-right__text {
    text-align: left;
    align-items: flex-start;
  }

}

/* ── Responsive: mobile ≤560px ── */
@media (max-width: 560px) {

  .fass-left {
    min-height: 260px;
  }

  .fass-left__img--a {
    min-height: 260px;
  }

  .fass-left__subcol {
    flex: 0 0 50%;
  }

  .fass-left__purple {
    min-height: 130px;
  }

  .fass-left__img--b {
    min-height: 130px;
  }

  .fass-right__top {
    min-height: 180px;
  }

  .fass-right__orange {
    flex: 0 0 35%;
  }

}


/* ============================================================
   15c. PRIVAT-FASS-LAYOUT — /privatprojekte/fassaden/
   Two columns 50/50: [ img2 + text ] | [ orange+img3 | img4 ]
   ============================================================ */

.privat-fass-layout {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: stretch;
  min-height: 500px;
}

.privat-fass-layout__main {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: stretch;
}

.privat-fass-layout__media-top {
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.privat-fass-layout__text {
  flex: 0 0 auto;
}

.privat-fass-layout__text.wohn-text {
  text-align: left;
  align-items: flex-start;
}

.privat-fass-layout__aside {
  flex: 0 0 50%;
  display: flex;
  flex-direction: row;
  min-width: 0;
  align-self: stretch;
  overflow: hidden;
}

.privat-fass-layout__split {
  display: flex;
  flex-direction: row;
  flex: 1;
  width: 100%;
  align-items: stretch;
  min-height: 400px;
}

.privat-fass-layout__stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.privat-fass-layout__orange {
  flex: 0 0 50%;
  background-color: var(--color-500);
  min-height: 200px;
}

.privat-fass-layout__stack-image {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

.privat-fass-layout__tall-image {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 400px;
}

.privat-fass-layout__media-top:hover .fass-img,
.privat-fass-layout__stack-image:hover .fass-img,
.privat-fass-layout__tall-image:hover .fass-img {
  transform: scale(1.04);
}

@media (max-width: 900px) {

  .privat-fass-layout {
    flex-direction: column;
    min-height: unset;
  }

  .privat-fass-layout__main {
    flex: none;
    width: 100%;
  }

  .privat-fass-layout__media-top {
    min-height: 280px;
  }

  .privat-fass-layout__aside {
    flex: none;
    width: 100%;
  }

  .privat-fass-layout__split {
    min-height: 300px;
  }

  .privat-fass-layout__orange {
    min-height: 160px;
  }

  .privat-fass-layout__stack-image {
    min-height: 160px;
  }

  .privat-fass-layout__tall-image {
    min-height: 260px;
  }

}

@media (max-width: 560px) {

  .privat-fass-layout__media-top {
    min-height: 220px;
  }

  .privat-fass-layout__split {
    flex-direction: column;
    min-height: unset;
  }

  .privat-fass-layout__stack {
    flex: none;
    min-height: 280px;
  }

  .privat-fass-layout__orange {
    min-height: 130px;
  }

  .privat-fass-layout__stack-image {
    min-height: 130px;
  }

  .privat-fass-layout__tall-image {
    flex: none;
    min-height: 240px;
  }

}


/* ============================================================
   16. UNTERNEHMEN PAGE — /page-unternehmen
   ============================================================ */


/*
 * Design-system tokens used:
 *   --hero-purple  (#6673A9) — purple accent (defined in §7)
 *   --navy-500     (#004070) — dark blue
 *   --color-500    (#FAA748) — orange accent
 *   --neutral-white (#FFFFFF)
 *
 * Page-scoped extra tokens (not in :root):
 */
:root {
  --untern-purple: #5b6ab1;
  /* hero left-col + Grevenmacher bg */
  --untern-navy: #1a3a6b;
  /* 1960 Mehring content bg          */
}

/* ── Fade animation (Unternehmen-scoped) ─────────────────── */
@keyframes untern-fade-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.untern-fade {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.untern-fade.is-visible {
  opacity: 1;
  transform: translateY(0) !important;
  animation: untern-fade-in 0.75s ease forwards;
}

/* ── Page wrapper ─────────────────────────────────────────── */
.untern-page {
  width: 100%;
  max-width: 100%;
  /* overflow-x removed: body uses overflow-x: clip globally */
}

/* ──────────────────────────────────────────────────────────
   §16.1 HERO — text left (purple) | image right
   ────────────────────────────────────────────────────────── */
.untern-hero {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 420px;
  background: var(--neutral-white);
  transform: translateY(28px);
  overflow: visible;
  /* lets image overlap purple column */
}

.untern-hero__text {
  flex: 0 0 45%;
  max-width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 96px 60px 64px;
  /* right padding increased to avoid image overlap */
  box-sizing: border-box;
  background: var(--untern-purple);
}

/* WP editor output inside hero */
.untern-hero__body {
  color: var(--neutral-white);
}

.untern-hero__body h1,
.untern-hero__body h2,
.untern-hero__body h3 {
  font-size: clamp(2rem, 5.8vw, 5.3125rem);
  /* max = 85px */
  font-weight: 800;
  line-height: 1.05;
  color: var(--neutral-white);
  margin: 0 0 28px 0;
}

.untern-hero__body p {
  font-size: var(--text-p-m);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Image shifts left to overlap the purple column */
.untern-hero__image {
  flex: 0 0 58%;
  max-width: 58%;
  position: relative;
  margin-left: -80px;
  z-index: 2;
  overflow: visible;
}

.untern-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ──────────────────────────────────────────────────────────
   §16.2 PHILOSOPHIE — full-width centred
   ────────────────────────────────────────────────────────── */
.untern-philosophy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 64px;
  background: var(--neutral-white);
  box-sizing: border-box;
  transform: translateY(28px);
}

.untern-philosophy__title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 32px 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.untern-philosophy__title .line-dark {
  display: block;
  color: var(--navy-500);
}

.untern-philosophy__title .line-orange {
  display: block;
  color: var(--color-500);
}

.untern-philosophy__body {
  max-width: 800px;
  font-size: var(--text-p-m);
  line-height: 1.8;
  color: var(--neutral-600);
}

/* ──────────────────────────────────────────────────────────
   §16.3 HISTORY — Mehring & Grevenmacher blocks
   ────────────────────────────────────────────────────────── */
.untern-history {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 400px;
  background: var(--neutral-white);
  transform: translateY(28px);
}

.untern-history__image {
  flex: 0 0 50%;
  max-width: 50%;
  overflow: hidden;
}

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

.untern-history__content {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 56px;
  box-sizing: border-box;
  background: var(--neutral-white);
}

/* Mehring: dark navy bg + text right */
.untern-history--navy .untern-history__content {
  background: var(--untern-navy);
  text-align: right;
}

.untern-history--navy .untern-history__year,
.untern-history--navy .untern-history__subtitle,
.untern-history--navy .untern-history__body,
.untern-history--navy .untern-history__body p {
  color: var(--neutral-white);
}

/* Grevenmacher: purple bg + text left */
.untern-history--purple .untern-history__content {
  background: var(--untern-purple);
}

.untern-history--purple .untern-history__year,
.untern-history--purple .untern-history__subtitle,
.untern-history--purple .untern-history__body,
.untern-history--purple .untern-history__body p {
  color: var(--neutral-white);
}

/* Shared typography */
.untern-history__year {
  font-size: clamp(2rem, 5.8vw, 5.3125rem);
  font-weight: 900;
  line-height: 1;
  color: var(--navy-500);
  margin: 0;
  letter-spacing: -0.01em;
}

.untern-history__subtitle {
  font-size: clamp(2rem, 5.8vw, 5.3125rem);
  font-weight: 800;
  color: var(--navy-500);
  text-transform: uppercase;
  margin: 0 0 28px 0;
  letter-spacing: 0.04em;
}

.untern-history__body {
  font-size: var(--text-p-m);
  line-height: 1.75;
  color: var(--neutral-600);
}

/* ── Responsive: 1024px ──────────────────────────────────── */
@media (max-width: 1024px) {
  .untern-hero__text {
    padding: 48px 36px 48px 48px;
  }

  .untern-history__content {
    padding: 48px 40px;
  }
}

/* ── Responsive: 768px ───────────────────────────────────── */
@media (max-width: 768px) {

  /* Image on top, purple text below */
  .untern-hero {
    flex-direction: column-reverse;
  }

  .untern-hero__text,
  .untern-hero__image {
    flex: 1 1 100%;
    max-width: 100%;
    margin-left: 0;
    /* cancel negative overlap margin */
  }

  .untern-hero__text {
    padding: 40px 28px;
  }

  .untern-hero__image {
    min-height: 280px;
  }

  .untern-philosophy {
    padding: 56px 28px;
  }

  /* History blocks stack */
  .untern-history {
    flex-direction: column;
  }

  .untern-history__image,
  .untern-history__content {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .untern-history__image {
    min-height: 260px;
    order: 0;
  }

  .untern-history__content {
    padding: 40px 28px;
    order: 1;
  }

  /* Navy section: restore left-align on mobile */
  .untern-history--navy .untern-history__content {
    text-align: left;
  }
}

/* ── Responsive: 480px ───────────────────────────────────── */
@media (max-width: 480px) {
  .untern-hero__text {
    padding: 32px 20px;
  }

  .untern-philosophy {
    padding: 40px 20px;
  }

  .untern-history__content {
    padding: 32px 20px;
  }
}


/* ============================================================
   17. ZEITSTRAHL PAGE — /page-zeitstrahl
   ============================================================ */

/*
 * Design tokens used (from :root):
 *   --navy-500     (#004070) — left bottom row bg
 *   --untern-purple (#5b6ab1) — right block bg (reuses §16 token)
 *   --neutral-white (#FFFFFF) — left top row bg
 */

/* ── Fade animation (shared .zs-fade pattern) ─────────────── */
@keyframes zs-fade-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.zs-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  /* Initial downward offset kept intentionally small (16px instead
     of 24px) so that before JS triggers .is-visible the section
     never causes a visible scroll extension at page bottom.       */
}

.zs-fade.is-visible {
  opacity: 1;
  transform: translateY(0) !important;
  animation: zs-fade-in 0.75s ease forwards;
}

/* ── Page wrapper ─────────────────────────────────────────── */
.zs-page {
  width: 100%;
  max-width: 100%;
  /* overflow-x removed: body uses overflow-x: clip globally */
}

/* Zeitstrahl paragraphs — S (mobile / tablet / laptop), M (desktop ≥1440px) */
.zs-page p {
  font-size: var(--text-p-s);
}

@media (min-width: 1440px) {
  .zs-page p {
    font-size: var(--text-p-m);
  }
}

/* ──────────────────────────────────────────────────────────
   §17.1  HERO — two-column flex
   Left : white-row (top) + navy-row (bottom) + portrait PNG
   Right: purple block — page content (h1 HEUTE + paragraph)
   ────────────────────────────────────────────────────────── */
.zs-hero {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  height: auto;
  transform: translateY(24px);
  position: relative;
  /* anchor for the portrait, which overlaps both columns */
  overflow: visible;
}

/* Left column — no position:relative so portrait anchors to .zs-hero instead */
.zs-hero__left {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Top half: white */
.zs-hero__left-top {
  flex: 0 0 50%;
  background-color: var(--neutral-white);
}

/* Bottom half: dark navy */
.zs-hero__left-bottom {
  flex: 0 0 50%;
  background-color: var(--navy-500);
}

/* Portrait spans from left edge to ~60% of hero width,
   so it overlaps the purple block on the right */
.zs-hero__portrait {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
  /* wider than 50% — overlaps purple column */
  height: 100%;
  object-fit: contain;
  object-position: bottom left;
  display: block;
  pointer-events: none;
  z-index: 2;
}

/* ── Right column: purple ────────────────────────────────── */
.zs-hero__right {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--untern-purple);
  padding: 64px 56px;
  box-sizing: border-box;
}

.zs-hero__content {
  max-width: 480px;
  text-align: right;
}

/* h1/h2 rendered from WP editor inside the purple block */
.zs-hero__content h1,
.zs-hero__content h2,
.zs-hero__content h3 {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 1;
  color: var(--neutral-white);
  letter-spacing: -0.01em;
  margin: 0 0 32px 0;
  text-transform: uppercase;
}

.zs-hero__content p {
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

/* ── Responsive: tablet portrait + mobile portrait (≤1024px) ── */
@media (max-width: 1024px) {

  /* column-reverse: el bloque morado (right) queda arriba,
     el bloque blanco (left) queda abajo — sin tocar el HTML */
  .zs-hero {
    flex-direction: column-reverse;
    min-height: auto;
  }

  .zs-hero__left,
  .zs-hero__right {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Bloque blanco (abajo): portrait se ancla aquí */
  .zs-hero__left {
    min-height: 340px;
    position: relative;
    /* portrait now anchors to left, not .zs-hero */
  }

  /* Portrait: más grande y centrado horizontalmente */
  .zs-hero__portrait {
    left: 50%;
    transform: translateX(-50%);
    width: 88%;
    height: 100%;
    object-position: bottom center;
  }

  /* Bloque morado (arriba) */
  .zs-hero__right {
    padding: 48px 32px;
  }

  /* Texto centrado dentro del bloque morado */
  .zs-hero__content {
    text-align: center;
    max-width: 100%;
  }

}

/* ── Responsive: mobile portrait estrecho (≤480px) ── */
@media (max-width: 480px) {

  .zs-hero__left {
    min-height: 280px;
  }

  .zs-hero__right {
    padding: 40px 24px;
  }

}



/* ──────────────────────────────────────────────────────────
   §17.2  ZEITSTRAHL — Timeline Block (section 2, 3, 4…)
          .zs-section .zs-s2
   ────────────────────────────────────────────────────────── */

/*
 * Overall layout:
 *   LEFT  50%: flex column
 *              ├── .zs-s2__top  (flex row — height controlled)
 *              │     ├── .zs-s2__date      (orange, ~30–35% width)
 *              │     └── .zs-s2__top-right (flex column, white top + navy bottom)
 *              └── .zs-s2__content (white bg, title + paragraph)
 *   RIGHT 50%: tall photo
 */

/* Outer section row */
.zs-section {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  height: auto;
  transform: translateY(24px);
}

/* ── LEFT column ─────────────────────────────────────────── */
.zs-s2__left {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
}

/* ── Top row inside left column ──────────────────────────── */
.zs-s2__top {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 55%;
  /* top portion is taller than content */
  min-height: 280px;
}

/* Orange block: large vertical date number */
.zs-s2__date {
  flex: 0 0 50%;
  background-color: var(--color-500);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
}

.zs-s2__date-num {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 13vw, 12.5rem);
  /* unified date size */
  font-weight: 700;
  color: var(--neutral-white);
  line-height: 1;
  letter-spacing: -0.02em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* read bottom → top */
  white-space: nowrap;
}

/* Right inset: flex column — white (top) + navy (bottom) */
.zs-s2__top-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.zs-s2__top-white {
  flex: 0 0 45%;
  background-color: var(--neutral-white);
}

.zs-s2__top-navy {
  flex: 1;
  background-color: var(--navy-500);
}

/* ── Content row (bottom of left column) ─────────────────── */
.zs-s2__content {
  flex: 1;
  background-color: var(--neutral-white);
  padding: 40px 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.zs-s2__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  color: var(--navy-500);
  margin: 0;
  line-height: 1.2;
}

.zs-s2__para {
  line-height: 1.75;
  color: var(--neutral-600);
  margin: 0;
}

/* ── RIGHT column: photo ─────────────────────────────────── */
.zs-s2__image {
  flex: 0 0 50%;
  max-width: 50%;
  overflow: hidden;
  position: relative;
}

.zs-s2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Responsive: 768px ───────────────────────────────────── */
@media (max-width: 768px) {

  /* Stack: left on top, image below */
  .zs-section {
    flex-direction: column;
  }

  .zs-s2__left,
  .zs-s2__image {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .zs-s2__image {
    min-height: 260px;
  }

  .zs-s2__top {
    min-height: 240px;
  }

  .zs-s2__date-num {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .zs-s2__content {
    padding: 32px 28px;
  }
}

/* ── Responsive: 480px ───────────────────────────────────── */
@media (max-width: 480px) {

  .zs-s2__top {
    min-height: 200px;
  }

  .zs-s2__content {
    padding: 28px 20px;
  }
}


/* ──────────────────────────────────────────────────────────
   §17.3  ZEITSTRAHL — Section 3 (.zs-s3)
          Left (50%): full photo
          Right (50%): 3 rows — navy date / white PNG / navy content
   ────────────────────────────────────────────────────────── */

/* ── LEFT: full-height photo ─────────────────────────────── */
.zs-s3__left {
  flex: 0 0 50%;
  max-width: 50%;
  height: 100%;
  /* allow img height:100% to resolve */
  overflow: hidden;
}

.zs-s3__left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── RIGHT column: 3 flex rows ───────────────────────────── */
.zs-s3__right {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  position: relative;
  /* anchor for the overflowing portrait */
  overflow: visible;
  /* allow portrait to spill into date row above */
}

/* Row 1: navy bg + large date number */
.zs-s3__row-date {
  flex: 0 0 33.333%;
  background-color: var(--navy-500);
  display: flex;
  align-items: center;
  padding: 24px 40px;
  box-sizing: border-box;
}

.zs-s3__date-num {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 13vw, 12.5rem);
  /* unified date size */
  font-weight: 700;
  color: var(--neutral-white);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Row 2: white bg — serves as layout spacer & z-context for portrait */
.zs-s3__row-img {
  flex: 0 0 33.333%;
  background-color: var(--neutral-white);
  position: relative;
  /* containing block for the portrait */
  overflow: visible;
  /* portrait can extend above */
}

/* Portrait: positioned absolute so it overflows up into the date row */
.zs-s3__row-img img {
  position: absolute;
  bottom: 0;
  /* anchor to bottom of white row */
  right: 0;
  height: 220%;
  /* spans all 3 rows, reduced 10% */
  width: auto;
  max-width: 85%;
  object-fit: contain;
  object-position: bottom right;
  display: block;
  z-index: 2;
  pointer-events: none;
}

/* Row 3: navy bg + title + paragraph — text aligned RIGHT */
.zs-s3__content {
  flex: 1;
  background-color: var(--navy-500);
  padding: 36px 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: right;
  gap: 14px;
  position: relative;
  z-index: 1;
  /* below portrait (z-index:2) */
}

.zs-s3__title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: var(--neutral-white);
  margin: 0;
  line-height: 1.2;
}

.zs-s3__title,
.zs-s3__para {
  width: 100%;
  min-width: 0;
}

.zs-s3__para {
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* ── Responsive: 768px ───────────────────────────────────── */
@media (max-width: 768px) {

  .zs-s3__left,
  .zs-s3__right {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .zs-s3__left {
    min-height: 260px;
  }

  .zs-s3__row-date,
  .zs-s3__row-img,
  .zs-s3__content {
    flex: 0 0 auto;
    min-height: 140px;
  }

  .zs-s3__content {
    padding: 28px 24px;
  }
}

/* ── Responsive: 480px ───────────────────────────────────── */
@media (max-width: 480px) {

  .zs-s3__row-date {
    padding: 20px 24px;
  }

  .zs-s3__content {
    padding: 24px 20px;
  }
}


/* ──────────────────────────────────────────────────────────
   §17.4  ZEITSTRAHL — Section 4 (.zs-s4)
          Left  (50%): orange date row / white content / blue+white deco squares
          Right (50%): image top / orange+white deco squares bottom
   ────────────────────────────────────────────────────────── */

/* ── LEFT column: 3 rows (date / content / deco) ────────── */
.zs-s4__left {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
}

/* Row 1 — orange bg with huge date number (horizontal) */
.zs-s4__date-row {
  flex: 0 0 40%;
  background-color: var(--color-500);
  /* orange */
  display: flex;
  align-items: center;
  padding: 24px 48px;
  box-sizing: border-box;
  overflow: hidden;
}

.zs-s4__date-num {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 13vw, 12.5rem);
  /* unified date size */
  font-weight: 700;
  color: var(--neutral-white);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

/* Row 2 — white bg: title + paragraph */
.zs-s4__content {
  flex: 1;
  background-color: var(--neutral-white);
  padding: 36px 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.zs-s4__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  color: var(--navy-500);
  margin: 0;
  line-height: 1.2;
}

.zs-s4__para {
  line-height: 1.75;
  color: var(--neutral-600);
  margin: 0;
}

/* Row 3 — decorative squares row (left col): navy blue + white */
.zs-s4__left .zs-s4__deco-row {
  flex: 0 0 22%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 100px;
}

.zs-s4__sq-blue {
  flex: 0 0 50%;
  background-color: var(--navy-500);
}

.zs-s4__sq-white {
  flex: 0 0 50%;
  background-color: var(--neutral-white);
}

/* ── RIGHT column: image top + deco squares bottom ───────── */
.zs-s4__right {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
}

/* Image wrapper — takes up most of the column height */
.zs-s4__img-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.zs-s4__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Decorative squares row (right col): orange + white */
.zs-s4__right .zs-s4__deco-row {
  flex: 0 0 22%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 100px;
}

.zs-s4__sq-orange {
  flex: 0 0 50%;
  background-color: var(--color-500);
  /* orange */
}

/* ── Responsive: 768px ───────────────────────────────────── */
@media (max-width: 768px) {

  .zs-s4__left,
  .zs-s4__right {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Stack: left on top, right below */
  .zs-s4 {
    flex-direction: column;
    height: auto;
    min-height: fit-content;
  }

  .zs-s4__date-row {
    flex: 0 0 auto;
    min-height: 160px;
    padding: 20px 32px;
  }

  .zs-s4__date-num {
    font-size: clamp(4rem, 22vw, 7rem);
  }

  .zs-s4__content {
    padding: 32px 28px;
  }

  .zs-s4__left .zs-s4__deco-row,
  .zs-s4__right .zs-s4__deco-row {
    flex: 0 0 auto;
    min-height: 80px;
  }

  .zs-s4__img-wrap {
    min-height: 260px;
  }
}

/* ── Responsive: 480px ───────────────────────────────────── */
@media (max-width: 480px) {

  .zs-s4__date-row {
    padding: 16px 24px;
    min-height: 130px;
  }

  .zs-s4__content {
    padding: 28px 20px;
  }

  .zs-s4__left .zs-s4__deco-row,
  .zs-s4__right .zs-s4__deco-row {
    min-height: 64px;
  }
}


/* ──────────────────────────────────────────────────────────
   §17.5  ZEITSTRAHL — Section 5 (.zs-s5)  [REVISED]
          Left  (50%): image centred on column boundary (overlaps both sides)
          Right (50%): top row  (stacked white+blue sub-col | orange date)
                       bottom row (white bg — title + paragraph RIGHT-aligned)
   ────────────────────────────────────────────────────────── */

/* Section: relative so the image can be placed absolutely if needed */
.zs-s5 {
  overflow: visible;
  position: relative;
}

/* ── LEFT column — carries the image, overflows into right ── */
.zs-s5__left {
  flex: 0 0 50%;
  max-width: 50%;
  position: relative;
  /* img uses absolute positioning inside */
  z-index: 2;
  overflow: visible;
}

/* Image: anchored to the section, bleeds past the 50% column mark
   so it sits centred on the boundary between the two columns.
   - right edge sits ~10% into the right column
   - left edge starts from the left edge of the section             */
.zs-s5__left img {
  position: absolute;
  top: 0;
  left: 0;
  width: 115%;
  /* ~15% overflow into right column */
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── RIGHT column: flex column (top | bottom) ────────────── */
.zs-s5__right {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* ── Top row: 2 items — stacked sub-col | orange date ───── */
.zs-s5__top {
  flex: 0 0 55%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/* Left sub-column: white (top) + blue (bottom) stacked */
.zs-s5__stacked-col {
  flex: 0 0 30%;
  /* ~30% of the right column width */
  display: flex;
  flex-direction: column;
}

.zs-s5__sq-white {
  flex: 1;
  /* equal halves */
  background-color: var(--neutral-white);
}

.zs-s5__sq-blue {
  flex: 1;
  /* equal halves */
  background-color: var(--navy-500);
}

/* Orange date block: fills remaining 70% */
.zs-s5__date-block {
  flex: 1;
  background-color: var(--color-500);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* push date to the right edge */
  padding: 16px 28px;
  box-sizing: border-box;
  overflow: hidden;
}

.zs-s5__date-num {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 13vw, 12.5rem);
  /* unified date size */
  font-weight: 700;
  color: var(--neutral-white);
  line-height: 1;
  letter-spacing: -0.04em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* read bottom → top */
  white-space: nowrap;
}

/* ── Bottom row: white bg — RIGHT-aligned title + paragraph  */
.zs-s5__content {
  flex: 1;
  background-color: var(--neutral-white);
  padding: 40px 48px 40px 22%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: right;
  gap: 16px;
  min-width: 0;
  /* left padding clears overlapping left-column image */
}

.zs-s5__title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: var(--navy-500);
  margin: 0;
  line-height: 1.3;
}

.zs-s5__title,
.zs-s5__para {
  width: 100%;
  min-width: 0;
}

.zs-s5__para {
  line-height: 1.75;
  color: var(--neutral-600);
  margin: 0;
}

/* ── Responsive: 768px ───────────────────────────────────── */
@media (max-width: 768px) {

  /* Stack: left image on top, right content below */
  .zs-s5 {
    flex-direction: column;
    height: auto;
    min-height: fit-content;
    overflow: hidden;
    /* cancel bleed on mobile */
  }

  .zs-s5__left,
  .zs-s5__right {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .zs-s5__left {
    min-height: 280px;
  }

  /* On mobile: image fills column normally — no bleed */
  .zs-s5__left img {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .zs-s5__top {
    flex: 0 0 auto;
    min-height: 200px;
  }

  .zs-s5__stacked-col {
    flex: 0 0 28%;
  }

  .zs-s5__date-num {
    font-size: clamp(4rem, 20vw, 6rem);
  }

  .zs-s5__content {
    padding: 32px 28px;
    padding-left: 28px;
    text-align: right;
  }
}

/* ── Responsive: 480px ───────────────────────────────────── */
@media (max-width: 480px) {

  .zs-s5__top {
    min-height: 160px;
  }

  .zs-s5__date-num {
    font-size: clamp(3rem, 18vw, 5rem);
  }

  .zs-s5__content {
    padding: 28px 20px;
    padding-left: 20px;
  }
}


/* ──────────────────────────────────────────────────────────
   §17.6  ZEITSTRAHL — Section 6 (.zs-s6)
          Left  (50%): top row (white + floating doc img + orange date)
                       bottom row (navy bg + title + paragraph)
          Right (50%): top row (white spacer, no content)
                       bottom row (white sq + navy sq)
                       + collage image floating over both right rows
   ────────────────────────────────────────────────────────── */

/* ── LEFT column ─────────────────────────────────────────── */
.zs-s6__left {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
}

/* Top row — white bg, relative for absolute children */
.zs-s6__top {
  flex: 0 0 50%;
  background-color: var(--neutral-white);
  position: relative;
  overflow: visible;
  /* doc image can bleed slightly */
  display: flex;
  align-items: center;
  /* vertically centre the date */
  padding: 24px 48px;
  box-sizing: border-box;
}

/* Document image: absolute, left-anchored, slightly rotated */
.zs-s6__doc-img {
  position: absolute;
  top: 8%;
  left: 10%;
  width: 34%;
  /* occupies ~38% of the row width */
  height: auto;
  object-fit: contain;
  transform: rotate(10deg);
  z-index: 1;
  pointer-events: none;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .18));
}

/* Large orange date — sits to the right of the doc */
.zs-s6__date-num {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 13vw, 12.5rem);
  /* unified date size */
  font-weight: 700;
  color: var(--color-500);
  /* orange */
  line-height: 1;
  letter-spacing: -0.04em;
  margin-left: auto;
  /* push date to right side */
  z-index: 2;
  position: relative;
}

/* Bottom row — navy bg: title + paragraph */
.zs-s6__content {
  flex: 1;
  background-color: var(--navy-500);
  padding: 40px 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.zs-s6__title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: var(--neutral-white);
  margin: 0;
  line-height: 1.3;
}

.zs-s6__para {
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

/* ── RIGHT column ─────────────────────────────────────────── */
.zs-s6__right {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  position: relative;
  /* anchor for the floating collage */
  overflow: visible;
}

/* Top row — plain white spacer */
.zs-s6__top-white {
  flex: 0 0 50%;
  background-color: var(--neutral-white);
}

/* Bottom row — white sq + navy sq side by side */
.zs-s6__bottom {
  flex: 0 0 50%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.zs-s6__sq-white {
  flex: 0 0 50%;
  background-color: var(--neutral-white);
}

.zs-s6__sq-navy {
  flex: 0 0 50%;
  background-color: var(--navy-500);
}

/* Collage image: absolutely positioned on the .zs-s6__right column,
   centred vertically at the boundary between top-white and bottom rows.
   It spans ~130% of the column height, overlapping both rows.          */
.zs-s6__collage-img {
  position: absolute;
  top: 5%;
  /* start near the top of the right column */
  left: 50%;
  transform: translateX(-50%);
  /* centre horizontally only */
  width: 88%;
  height: auto;
  object-fit: contain;
  z-index: 3;
  pointer-events: none;
  display: block;
}

/* ── Responsive: 768px ───────────────────────────────────── */
@media (max-width: 768px) {

  /* Stack: left on top, right below */
  .zs-s6 {
    flex-direction: column;
    height: auto;
    min-height: fit-content;
    overflow: hidden;
  }

  .zs-s6__left,
  .zs-s6__right {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .zs-s6__top {
    flex: 0 0 auto;
    min-height: 220px;
    padding: 20px 28px;
  }

  .zs-s6__doc-img {
    width: 30%;
    left: 16px;
  }

  .zs-s6__date-num {
    font-size: clamp(3.5rem, 18vw, 6rem);
  }

  .zs-s6__content {
    padding: 36px 28px;
  }

  .zs-s6__top-white {
    flex: 0 0 180px;
    min-height: 180px;
  }

  .zs-s6__bottom {
    flex: 0 0 180px;
    min-height: 180px;
  }

  .zs-s6__collage-img {
    width: 80%;
  }
}

/* ── Responsive: 480px ───────────────────────────────────── */
@media (max-width: 480px) {

  .zs-s6__top {
    min-height: 180px;
    padding: 16px 20px;
  }

  .zs-s6__doc-img {
    width: 28%;
  }

  .zs-s6__date-num {
    font-size: clamp(3rem, 20vw, 5rem);
  }

  .zs-s6__content {
    padding: 28px 20px;
  }

  .zs-s6__top-white {
    flex: 0 0 140px;
    min-height: 140px;
  }

  .zs-s6__bottom {
    flex: 0 0 140px;
    min-height: 140px;
  }
}


/* ──────────────────────────────────────────────────────────
   §17.7  ZEITSTRAHL — Section 7 (.zs-s7)
          FLEX-COLUMN layout (2 rows stacked, full viewport height)

          ROW 1 (~40%): wide photo (image_6, 75%) | white square (25%)
          ROW 2 (~60%): LEFT 50% — floating newspaper img (image_6_2)
                        RIGHT 50% — [top-bar: date + office photo]
                                    [bottom: purple content block]

          Newspaper image is absolutely positioned spanning both rows.
   ────────────────────────────────────────────────────────── */

/* ── Section container: flex-COLUMN ─────────────────────── */
.zs-section-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  height: auto;
  transform: translateY(24px);
  position: relative;
  overflow: visible;
}

/* ── ROW 1: group photo + white square ───────────────────── */
.zs-s7__row1 {
  flex: 0 0 38%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

/* Wide group photo (~75% of row width) */
.zs-s7__row1-img {
  flex: 0 0 75%;
  overflow: hidden;
}

.zs-s7__row1-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* White decorative square (~25% of row width) */
.zs-s7__row1-white {
  flex: 1;
  background-color: var(--neutral-white);
}

/* ── ROW 2: two 50/50 columns ─────────────────────────────── */
.zs-s7__row2 {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  overflow: visible;
}

/* ── LEFT column: white bg + floating newspaper anchor ────── */
.zs-s7__row2-left {
  flex: 0 0 50%;
  background-color: var(--neutral-white);
  position: relative;
  overflow: visible;
}

/* Newspaper image: absolute, starts slightly inside row 1,
   fills the full height of row2 + overflows 40% upward     */
.zs-s7__newspaper-img {
  position: absolute;
  top: -40%;
  /* overlaps into row 1 */
  left: 0;
  width: 100%;
  height: 140%;
  /* taller than the column to bridge both rows */
  object-fit: contain;
  object-position: bottom left;
  display: block;
  z-index: 3;
  pointer-events: none;
}

/* ── RIGHT column: flex-column (top-bar | purple content) ── */
.zs-s7__row2-right {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
}

/* Sub-row A: orange date number + office photo side by side */
.zs-s7__top-bar {
  flex: 0 0 45%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: var(--neutral-white);
}

/* Orange date — left portion of the bar */
.zs-s7__date-num {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 13vw, 12.5rem);
  /* unified date size */
  font-weight: 700;
  color: var(--color-500);
  line-height: 1;
  letter-spacing: -0.04em;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 12px 24px 12px 32px;
  white-space: nowrap;
}

/* Office photo — right portion of the bar */
.zs-s7__office-img {
  flex: 1;
  overflow: hidden;
}

.zs-s7__office-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Sub-row B: purple/lavender content block */
.zs-s7__content {
  flex: 1;
  background-color: var(--untern-purple);
  padding: 32px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  /* right-align block items */
  text-align: right;
  gap: 14px;
}

.zs-s7__title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: var(--neutral-white);
  margin: 0;
  line-height: 1.3;
}

.zs-s7__para {
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 360px;
}

/* ── Responsive: 768px ───────────────────────────────────── */
@media (max-width: 768px) {

  /* Full section: stack rows, auto height */
  .zs-section-col {
    height: auto;
    min-height: fit-content;
    overflow: hidden;
  }

  .zs-s7__row1 {
    flex: 0 0 auto;
    min-height: 220px;
  }

  .zs-s7__row1-img {
    flex: 0 0 100%;
    /* take full width on mobile */
  }

  .zs-s7__row1-white {
    display: none;
    /* hide white square on small screens */
  }

  .zs-s7__row2 {
    flex: 0 0 auto;
    flex-direction: column;
  }

  .zs-s7__row2-left,
  .zs-s7__row2-right {
    flex: 1 1 100%;
  }

  .zs-s7__row2-left {
    min-height: 280px;
    overflow: hidden;
  }

  /* Newspaper image fills its column on mobile without overflow */
  .zs-s7__newspaper-img {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    object-position: center;
  }

  .zs-s7__top-bar {
    flex: 0 0 auto;
    min-height: 160px;
  }

  .zs-s7__date-num {
    font-size: clamp(3rem, 18vw, 6rem);
    padding: 12px 16px;
  }

  .zs-s7__content {
    padding: 32px 24px;
  }
}

/* ── Responsive: 480px ───────────────────────────────────── */
@media (max-width: 480px) {

  .zs-s7__row1 {
    min-height: 180px;
  }

  .zs-s7__top-bar {
    min-height: 130px;
  }

  .zs-s7__date-num {
    font-size: clamp(2.5rem, 16vw, 4.5rem);
    padding: 10px 12px;
  }

  .zs-s7__content {
    padding: 24px 20px;
  }
}


/* ──────────────────────────────────────────────────────────
   Contact Form 7 — two-column row layout (.cf-row--two)
   ────────────────────────────────────────────────────────── */

/* Row wrapper: flex on desktop */
.cf-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
}

/* Each label inside a two-col row takes equal space */
.cf-row--two>.cf-label {
  flex: 1 1 0;
  min-width: 0;
  /* prevents flex children from overflowing */
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
  .cf-row {
    flex-direction: column;
    gap: 0;
  }
}


/* ═══════════════════════════════════════════════════════════
   KONTAKT PAGE  (.kt-*)
   ═══════════════════════════════════════════════════════════ */

/* ── Fade animation ──────────────────────────────────────── */
.kt-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.kt-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Page wrapper ─────────────────────────────────────────── */
.kt-page {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  /* overflow-x removed: body uses overflow-x: clip globally */
}

/* ── MAIN: 2-col row ─────────────────────────────────────── */
.kt-main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 60px;
  padding: 56px 80px 72px;
  box-sizing: border-box;
  background-color: #fff;
}

/* Form column ~55% */
.kt-form-col {
  flex: 0 0 55%;
  max-width: 55%;
}

/* Info column: remaining space */
.kt-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Info block (Öffnungszeiten / Kontakt) ───────────────── */
.kt-info-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kt-info-title {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 700;
  color: var(--navy-500, #004070);
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kt-info-icon {
  font-size: 1.25rem;
  color: var(--color-500, #e87722);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ── Opening hours table ─────────────────────────────────── */
.kt-hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.7;
}

.kt-hours-table td {
  padding: 2px 0;
  color: #333;
  vertical-align: top;
}

.kt-day {
  font-weight: 600;
  color: var(--navy-500, #004070);
  width: 2.4rem;
  padding-right: 12px;
}

.kt-closed {
  color: #999;
  font-style: italic;
}

/* ── Location grid ──────────────────────────────────────── */
.kt-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.kt-location__name {
  font-weight: 700;
  color: var(--navy-500, #004070);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px 0;
}

.kt-contact-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: #444;
  text-decoration: none;
  padding: 3px 0;
  transition: color 0.18s ease;
  word-break: break-all;
}

.kt-contact-link .material-symbols-outlined {
  font-size: 1rem;
  color: var(--color-500, #e87722);
  flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.kt-contact-link:hover,
.kt-contact-link:focus {
  color: var(--navy-500, #004070);
  text-decoration: underline;
  outline: none;
}

/* ═══════════════════════════════════════════════════════════
   CF7 FORM STYLING — all selectors scoped to .kt-form-col
   ═══════════════════════════════════════════════════════════ */

/* CF7 form element itself */
.kt-form-col .wpcf7-form {
  display: flex;
  flex-direction: column;
}

/* WordPress wpautop() wraps block-level content in <p> tags — make them
   invisible to layout so .cf-row children participate in the flex flow */
.kt-form-col .wpcf7-form p {
  display: contents;
}

/* Label row wrapper */
.kt-form-col .cf-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy-500, #004070);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 10px;
  width: 100%;
}

/* Two-col row */
.kt-form-col .cf-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
}

.kt-form-col .cf-row--two>.cf-label {
  flex: 1 1 0;
  min-width: 0;
}

/* Input / textarea base */
.kt-form-col .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-family: inherit;
  color: #222;
  background-color: #e5e7eb;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  display: block;
}

/* Hover */
.kt-form-col .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):hover {
  background-color: #ecedf0;
  border-color: #d0d3da;
}

/* Focus */
.kt-form-col .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):focus {
  background-color: #fff;
  border-color: var(--color-500, #e87722);
  box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.12);
}

/* Valid */
.kt-form-col .wpcf7-form-control.wpcf7-validates-as-valid {
  border-color: #2e9e6b;
  background-color: #f0faf5;
}

/* Invalid */
.kt-form-col .wpcf7-form-control.wpcf7-not-valid {
  border-color: #d94040;
  background-color: #fdf2f2;
  box-shadow: 0 0 0 3px rgba(217, 64, 64, 0.09);
}

/* Inline error tip */
.kt-form-col .wpcf7-not-valid-tip {
  color: #d94040;
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 3px;
  display: block;
}

/* Textarea */
.kt-form-col .wpcf7-textarea {
  min-height: 130px;
  resize: vertical;
}

/* DSGVO header */
.kt-form-col .cf-dsgvo-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy-500, #004070);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 6px 0 4px;
}

/* Acceptance row */
.kt-form-col .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8125rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 20px;
}

.kt-form-col .wpcf7-acceptance input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--navy-500, #004070);
  flex-shrink: 0;
  cursor: pointer;
}

/* Submit button */
.kt-form-col .btn-senden,
.kt-form-col input[type="submit"],
.kt-form-col .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 32px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.04em;
  color: #fff;
  background-color: var(--color-500, #e87722);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 3px 10px rgba(232, 119, 34, 0.28);
}

.kt-form-col .btn-senden:hover,
.kt-form-col input[type="submit"]:hover,
.kt-form-col .wpcf7-submit:hover {
  background-color: #c96610;
  box-shadow: 0 5px 16px rgba(201, 102, 16, 0.32);
  transform: translateY(-1px);
}

.kt-form-col .btn-senden:active,
.kt-form-col input[type="submit"]:active,
.kt-form-col .wpcf7-submit:active {
  transform: translateY(0);
  background-color: #b55c0e;
  box-shadow: 0 2px 6px rgba(201, 102, 16, 0.22);
}

.kt-form-col .btn-senden:focus-visible,
.kt-form-col input[type="submit"]:focus-visible,
.kt-form-col .wpcf7-submit:focus-visible {
  outline: 3px solid var(--navy-500, #004070);
  outline-offset: 3px;
}

/* CF7 response banner */
.kt-form-col .wpcf7-response-output {
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.5;
  border: none;
}

.kt-form-col .wpcf7-mail-sent-ok {
  background-color: #edfaf4;
  color: #1d6b47;
  border-left: 4px solid #2e9e6b;
}

.kt-form-col .wpcf7-mail-sent-ng,
.kt-form-col .wpcf7-spam-blocked,
.kt-form-col .wpcf7-validation-errors,
.kt-form-col .wpcf7-acceptance-missing {
  background-color: #fdf2f2;
  color: #a02020;
  border-left: 4px solid #d94040;
}

/* ── Responsive: 960px ──────────────────────────────────── */
@media (max-width: 960px) {
  .kt-main {
    padding: 48px 40px 60px;
    gap: 40px;
  }

  .kt-form-col {
    flex: 0 0 52%;
    max-width: 52%;
  }
}

/* ── Responsive: 768px (tablet portrait + mobile) ───────── */
@media (max-width: 768px) {
  .kt-main {
    flex-direction: column;
    padding: 36px 24px 48px;
    gap: 32px;
  }

  .kt-form-col,
  .kt-info-col {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .kt-form-col .cf-row {
    flex-direction: column;
    gap: 0;
  }

  .kt-locations {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* CF7 inyecta <br> dentro de cada .cf-label — se ocultan
     en tablet/mobile portrait para evitar el exceso de espacio vertical */
  .kt-form-col .wpcf7-form br {
    display: none;
  }

  /* Con los <br> ocultos, reducimos también el margin-bottom
     del label para un formulario más compacto */
  .kt-form-col .cf-label {
    margin-bottom: 16px;
  }
}

/* ── Responsive: 480px (mobile portrait) ────────────────── */
@media (max-width: 480px) {
  .kt-main {
    padding: 28px 16px 40px;
  }

  /* Espacio mínimo entre campos en mobile pequeño */
  .kt-form-col .cf-label {
    margin-bottom: 14px;
  }
}

/* ── Page wrapper ─────────────────────────────────────────── */
.kt-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--neutral-white, #fff);
}

/* ── HERO STRIP ───────────────────────────────────────────── */
.kt-hero {
  background-color: var(--navy-500, #004070);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 64px 80px;
  box-sizing: border-box;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}

.kt-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1;
  position: relative;
}

.kt-hero__icon {
  font-size: 2.5rem;
  color: var(--color-500, #e87722);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

.kt-hero__title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
}

.kt-hero__sub {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* Decorative accent block on the right */
.kt-hero__accent {
  position: absolute;
  right: 0;
  top: 0;
  width: 22%;
  height: 100%;
  background-color: var(--color-500, #e87722);
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: 0;
}

/* ── MAIN CONTENT: 2-col grid ────────────────────────────── */
.kt-main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
  padding: 64px 80px;
  box-sizing: border-box;
  background-color: #f8f8f9;
}

/* Form column */
.kt-form-col {
  flex: 0 0 55%;
  max-width: 55%;
}

.kt-form-wrap {
  background-color: #fff;
  border-radius: 8px;
  padding: 40px 40px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
}

/* Info column */
.kt-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Section title inside form wrap ──────────────────────── */
.kt-section-title {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: var(--navy-500, #004070);
  margin: 0 0 28px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kt-section-icon {
  font-size: 1.4rem;
  color: var(--color-500, #e87722);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

/* ── Cards (opening hours + contact) ─────────────────────── */
.kt-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 28px 32px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
}

.kt-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f0f0f2;
}

.kt-card__icon {
  font-size: 1.5rem;
  color: var(--color-500, #e87722);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

.kt-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-500, #004070);
  margin: 0;
}

/* ── Opening hours table ─────────────────────────────────── */
.kt-hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.6;
}

.kt-hours-table td {
  padding: 3px 0;
  color: #333;
  vertical-align: top;
}

.kt-day {
  font-weight: 600;
  color: var(--navy-500, #004070);
  width: 2.5rem;
  padding-right: 12px;
}

.kt-closed {
  color: #999;
  font-style: italic;
}

/* ── Location contact links ──────────────────────────────── */
.kt-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.kt-location__name {
  font-weight: 700;
  color: var(--navy-500, #004070);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px 0;
}

.kt-contact-link {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: #444;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.2s ease;
  word-break: break-all;
}

.kt-contact-link .material-symbols-outlined {
  font-size: 1.05rem;
  color: var(--color-500, #e87722);
  flex-shrink: 0;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.kt-contact-link:hover,
.kt-contact-link:focus {
  color: var(--navy-500, #004070);
  text-decoration: underline;
  outline: none;
}

/* ═══════════════════════════════════════════════════════════
   CF7 FORM STYLING  — fields, states, submit button
   Applied inside .kt-form-wrap to scope to Kontakt page
   ═══════════════════════════════════════════════════════════ */

/* Label text */
.kt-form-wrap .cf-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy-500, #004070);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 18px;
  width: 100%;
}

/* All input / textarea base */
.kt-form-wrap .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-family: inherit;
  color: #222;
  background-color: #f8f8f9;
  border: 1px solid #e9eaec;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  display: block;
}

/* Hover */
.kt-form-wrap .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):hover {
  border-color: #aab0bc;
  background-color: #f2f3f6;
}

/* Focus */
.kt-form-wrap .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):focus {
  border-color: var(--color-500, #e87722);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.12);
}

/* Valid / success */
.kt-form-wrap .wpcf7-form-control.wpcf7-validates-as-valid {
  border-color: #2e9e6b;
  background-color: #f0faf5;
}

/* Invalid / error */
.kt-form-wrap .wpcf7-form-control.wpcf7-not-valid {
  border-color: #d94040;
  background-color: #fdf2f2;
  box-shadow: 0 0 0 3px rgba(217, 64, 64, 0.10);
}

/* Validation tip (inline error message) */
.kt-form-wrap .wpcf7-not-valid-tip {
  color: #d94040;
  font-size: 0.78rem;
  margin-top: 4px;
  font-weight: 500;
  display: block;
}

/* Textarea */
.kt-form-wrap .wpcf7-textarea {
  min-height: 140px;
  resize: vertical;
}

/* DSGVO label */
.kt-form-wrap .cf-dsgvo-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy-500, #004070);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 8px 0 4px;
}

/* Acceptance checkbox row */
.kt-form-wrap .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.83rem;
  color: #555;
  line-height: 1.55;
  margin-bottom: 24px;
}

.kt-form-wrap .wpcf7-acceptance input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--navy-500, #004070);
  flex-shrink: 0;
  cursor: pointer;
}

/* Submit button */
.kt-form-wrap .btn-senden,
.kt-form-wrap input[type="submit"],
.kt-form-wrap .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 36px;
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.04em;
  color: #fff;
  background-color: var(--color-500, #e87722);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(232, 119, 34, 0.30);
}

.kt-form-wrap .btn-senden:hover,
.kt-form-wrap input[type="submit"]:hover,
.kt-form-wrap .wpcf7-submit:hover {
  background-color: #c96610;
  box-shadow: 0 6px 18px rgba(201, 102, 16, 0.35);
  transform: translateY(-1px);
}

.kt-form-wrap .btn-senden:active,
.kt-form-wrap input[type="submit"]:active,
.kt-form-wrap .wpcf7-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(201, 102, 16, 0.25);
  background-color: #b55c0e;
}

.kt-form-wrap .btn-senden:focus-visible,
.kt-form-wrap input[type="submit"]:focus-visible,
.kt-form-wrap .wpcf7-submit:focus-visible {
  outline: 3px solid var(--navy-500, #004070);
  outline-offset: 3px;
}

/* CF7 response output */
.kt-form-wrap .wpcf7-response-output {
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  border: none;
}

/* Success */
.kt-form-wrap .wpcf7-mail-sent-ok {
  background-color: #edfaf4;
  color: #1d6b47;
  border-left: 4px solid #2e9e6b;
}

/* Error */
.kt-form-wrap .wpcf7-mail-sent-ng,
.kt-form-wrap .wpcf7-spam-blocked,
.kt-form-wrap .wpcf7-validation-errors,
.kt-form-wrap .wpcf7-acceptance-missing {
  background-color: #fdf2f2;
  color: #a02020;
  border-left: 4px solid #d94040;
}

/* ── Responsive: 960px ──────────────────────────────────── */
@media (max-width: 960px) {

  .kt-hero {
    padding: 48px 40px;
  }

  .kt-main {
    padding: 48px 40px;
    gap: 32px;
  }

  .kt-form-col {
    flex: 0 0 52%;
    max-width: 52%;
  }
}

/* ── Responsive: 768px ──────────────────────────────────── */
@media (max-width: 768px) {

  .kt-hero {
    padding: 40px 28px;
    min-height: auto;
  }

  .kt-hero__accent {
    width: 14%;
  }

  .kt-main {
    flex-direction: column;
    padding: 36px 24px;
    gap: 24px;
    background-color: #f8f8f9;
  }

  .kt-form-col,
  .kt-info-col {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .kt-form-wrap {
    padding: 28px 24px;
  }

  .kt-locations {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ── Responsive: 480px ──────────────────────────────────── */
@media (max-width: 480px) {

  .kt-hero {
    padding: 32px 20px;
  }

  .kt-hero__title {
    font-size: 1.6rem;
  }

  .kt-hero__accent {
    display: none;
  }

  .kt-main {
    padding: 28px 16px;
  }

  .kt-form-wrap {
    padding: 24px 18px;
  }

  .kt-card {
    padding: 22px 20px;
  }
}


/* ═══════════════════════════════════════════════════════════
   KARRIERE PAGE  (.kar-*)
   ═══════════════════════════════════════════════════════════ */

/* ── Fade animation ──────────────────────────────────────── */
.kar-fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.kar-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Page wrapper ─────────────────────────────────────────── */
.kar-page {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  /* overflow-x removed: body uses overflow-x: clip globally */
}

/* ── Shared inner container — matches nav header width ──────
   max-width: 1440px  |  padding-x: 48px (same as header-inner)
   ─────────────────────────────────────────────────────────── */
.kar-inner {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════
   1. HERO
   ══════════════════════════════════════════════════════ */
.kar-hero {
  position: relative;
  width: 100%;
  height: clamp(280px, 45vw, 520px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kar-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.kar-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Uniform dark overlay for centered title legibility */
.kar-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.42);
}

.kar-hero__inner {
  position: relative;
  z-index: 2;
  padding: 40px 80px;
  text-align: center;
  width: 100%;
}

.kar-hero__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ══════════════════════════════════════════════════════
   2. CONTENT
   ══════════════════════════════════════════════════════ */
.kar-content {
  padding-top: 64px;
  padding-bottom: 64px;
  background-color: #fff;
  width: 100%;
}

/* WP editor content typography */
.kar-content__body h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--navy-500, #004070);
  line-height: 1.25;
  margin: 0 0 20px 0;
  text-align: center;
}

.kar-content__body p {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.78;
  color: #444;
  margin: 0 0 16px 0;
  text-align: center;
}

.kar-content__body p:last-child {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════
   3. IMAGE — full-width decorative section
   ══════════════════════════════════════════════════════ */
.kar-image {
  width: 100%;
  height: clamp(260px, 38vw, 480px);
  overflow: hidden;
}

.kar-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ══════════════════════════════════════════════════════
   4. JOBS LOOP
   ══════════════════════════════════════════════════════ */
.kar-jobs {
  padding-top: 64px;
  padding-bottom: 64px;
  background-color: #f8f8f9;
}

.kar-jobs__title {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: var(--navy-500, #004070);
  margin: 0 0 28px 0;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--color-500, #e87722);
  display: inline-block;
}

.kar-jobs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each job row — horizontal rule between items */
.kar-jobs__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #e4e5e9;
  gap: 16px;
}

.kar-jobs__item:first-child {
  border-top: 1px solid #e4e5e9;
}

.kar-jobs__item-title {
  font-size: clamp(0.9rem, 1.15vw, 1rem);
  font-weight: 500;
  color: #004070;
  flex: 1;
  line-height: 1.4;
}

/* "Jetzt bewerben" pill button */
.kar-jobs__btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.03em;
  color: var(--color-500, #e87722);
  background-color: transparent;
  border: 2px solid var(--color-500, #e87722);
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.kar-jobs__btn:hover,
.kar-jobs__btn:focus {
  background-color: var(--color-500, #e87722);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.kar-jobs__btn:active {
  transform: translateY(0);
  background-color: #c96610;
  border-color: #c96610;
  color: #fff;
}

/* Empty state */
.kar-jobs__empty {
  font-size: 0.9375rem;
  color: #666;
  font-style: italic;
  margin: 0;
}

/* ══════════════════════════════════════════════════════
   5. CTA REQUEST
   ══════════════════════════════════════════════════════ */
.kar-cta {
  padding-top: 64px;
  padding-bottom: 64px;
  background-color: #fff;
}

/* Inner flex row for CTA (lives inside .kar-inner) */
.kar-cta__wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 60px;
}

/* Left info column */
.kar-cta__info {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kar-cta__title {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--navy-500, #004070);
  line-height: 1.2;
  margin: 0;
}

.kar-cta__name {
  font-size: clamp(1.9rem, 2.4vw, 2.1rem);
  font-weight: 600;
  color: #004070;
  margin: 0;
}

.kar-cta__contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.kar-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-size: 1.875rem;
  color: #004070;
  text-decoration: none;
  transition: color 0.18s ease;
}

.kar-cta__link:hover,
.kar-cta__link:focus {
  color: var(--color-500, #e87722);
  outline: none;
}

.kar-cta__icon {
  font-size: 1.1rem;
  color: var(--color-500, #e87722);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  flex-shrink: 0;
}

/* Right image column */
.kar-cta__image {
  flex: 0 0 40%;
  max-width: 40%;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 3;
}

.kar-cta__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── Responsive: 960px ──────────────────────────────────── */
@media (max-width: 960px) {

  .kar-hero__inner {
    padding: 32px 48px;
  }

  .kar-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .kar-content {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .kar-jobs {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .kar-cta {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .kar-cta__wrap {
    gap: 40px;
  }

  .kar-cta__image {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ── Responsive: 768px ──────────────────────────────────── */
@media (max-width: 768px) {

  .kar-hero {
    height: clamp(220px, 50vw, 360px);
  }

  .kar-hero__inner {
    padding: 24px 24px;
  }

  .kar-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .kar-content {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .kar-jobs {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .kar-cta {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .kar-cta__wrap {
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
  }

  /* Liberar el ancho completo cuando el wrap cambia a columna */
  .kar-cta__info {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .kar-cta__image {
    flex: none;
    max-width: 100%;
    width: 100%;
    max-height: 320px;
  }

  .kar-cta__image img {
    height: 320px;
    object-position: top center;
  }
}

/* ── Responsive: 480px ──────────────────────────────────── */
@media (max-width: 480px) {

  .kar-hero {
    height: clamp(200px, 55vw, 300px);
  }

  .kar-hero__inner {
    padding: 20px 16px;
  }

  .kar-content {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .kar-jobs {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .kar-jobs__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 0;
  }

  .kar-cta {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* Reducir tamaño del link para que el teléfono quepa en una línea */
  .kar-cta__link {
    font-size: 1.5rem;
  }
}


/* ============================================================
   SINGLE JOB — single-job.php
   Prefix: sjob-*
   Theme: dark navy throughout (matches design mockups)
   ============================================================ */

/* ── Design tokens (single job) ────────────────────────────── */
:root {
  --sjob-bg: #0b1728;
  /* deep navy background            */
  --sjob-accent: #e87722;
  /* orange accent (same as site)    */
  --sjob-white: #ffffff;
  --sjob-muted: rgba(255, 255, 255, 0.75);
  --sjob-divider: rgba(255, 255, 255, 0.18);
}

/* ── Fade animation ─────────────────────────────────────────── */
.sjob-fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.sjob-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Page wrapper ───────────────────────────────────────────── */
.sjob-page {
  width: 100%;
  background-color: var(--sjob-bg);
}

/* ── Shared inner container — same 1440px as header-inner ───── */
.sjob-inner {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════
   1. HERO — 100vh, featured image + dark overlay
   ══════════════════════════════════════════════════════ */
.sjob-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sjob-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sjob-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.sjob-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
      rgba(11, 23, 40, 0.45) 0%,
      rgba(11, 23, 40, 0.70) 60%,
      rgba(11, 23, 40, 1.00) 100%);
}

.sjob-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 48px;
  width: 100%;
}

.sjob-hero__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  color: var(--sjob-white);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* Chevron scroll indicator */
.sjob-hero__chevron {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sjob-white);
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.sjob-hero__chevron:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

.sjob-hero__chevron svg {
  width: 38px;
  height: 38px;
  animation: sjob-bounce 2s ease-in-out infinite;
}

@keyframes sjob-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

/* ══════════════════════════════════════════════════════
   DARK WRAP — shared container for sections 2 + 3
   Watermark background image rendered via ::before so
   its opacity can be controlled independently of text.
   ══════════════════════════════════════════════════════ */
.sjob-dark-wrap {
  position: relative;
  background-color: var(--sjob-bg);
  /* isolate stacking context so ::before stays behind content */
  isolation: isolate;
}

/* Watermark pseudo-element */
.sjob-dark-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--dt-karriere-watermark, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.20;
  pointer-events: none;
}

/* Ensure section content sits above the watermark */
.sjob-dark-wrap>* {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════
   2. CONTENT — two-column dark navy
   ══════════════════════════════════════════════════════ */
.sjob-content {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: transparent;
  /* bg handled by .sjob-dark-wrap */
}

.sjob-content__cols {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}

/* Vertical divider between columns */
.sjob-content__divider {
  flex: 0 0 1px;
  align-self: stretch;
  background-color: var(--sjob-divider);
  margin: 0 52px;
}

/* Each column */
.sjob-col {
  flex: 1 1 0;
  min-width: 0;
}

.sjob-col__title {
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-weight: 800;
  color: var(--sjob-white);
  line-height: 1.2;
  margin: 0 0 28px 0;
}

.sjob-page ul.sjob-col__list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0;
  padding: 0;
  padding-inline-start: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Sin viñetas del navegador; solo cubo naranja (::before) */
.sjob-page ul.sjob-col__list > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.7;
  color: var(--sjob-muted);
  padding-left: 0;
  margin-left: 0;
  list-style: none !important;
  list-style-type: none !important;
}

.sjob-page ul.sjob-col__list > li::marker {
  content: '';
  font-size: 0;
}

.sjob-page ul.sjob-col__list > li::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  min-width: 10px;
  background-color: var(--sjob-accent);
  margin-top: 6px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   3. PROMISE — bullet list + CTA
   ══════════════════════════════════════════════════════ */
.sjob-promise {
  padding-top: 64px;
  padding-bottom: 80px;
  background-color: transparent;
  /* bg handled by .sjob-dark-wrap */
}

.sjob-promise__title {
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-weight: 800;
  color: var(--sjob-white);
  margin: 0 0 28px 0;
  line-height: 1.2;
}

/* Bullet list with orange square markers (sin disco ::marker del UA) */
.sjob-page ul.sjob-promise__list {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 0 40px 0;
  padding: 0;
  padding-inline-start: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sjob-page ul.sjob-promise__list > li.sjob-promise__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  color: var(--sjob-muted);
  line-height: 1.65;
  margin-left: 0;
  list-style: none !important;
  list-style-type: none !important;
}

.sjob-page ul.sjob-promise__list > li.sjob-promise__item::marker {
  content: '';
  font-size: 0;
}

/* Orange square bullet */
.sjob-page ul.sjob-promise__list > li.sjob-promise__item::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  min-width: 10px;
  background-color: var(--sjob-accent);
  margin-top: 6px;
  flex-shrink: 0;
}

/* "Kontakt aufnehmen" CTA button */
.sjob-promise__btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.03em;
  color: var(--sjob-white);
  background-color: var(--sjob-accent);
  border: 2px solid var(--sjob-accent);
  border-radius: 3px;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.sjob-promise__btn:hover,
.sjob-promise__btn:focus {
  background-color: #c96610;
  border-color: #c96610;
  color: var(--sjob-white);
  outline: none;
  transform: translateY(-1px);
}

.sjob-promise__btn:active {
  transform: translateY(0);
  background-color: #a85510;
  border-color: #a85510;
}

/* Sin mailto en ACF: mismo aspecto, no enlazado */
.sjob-promise__btn.sjob-promise__btn--no-email {
  cursor: default;
  pointer-events: none;
  opacity: 0.78;
}

/* ── Responsive: 960px ─────────────────────────────────────── */
@media (max-width: 960px) {

  .sjob-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .sjob-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .sjob-content__divider {
    margin: 0 36px;
  }
}

/* ── Responsive: 768px — stack columns ─────────────────────── */
@media (max-width: 768px) {

  .sjob-hero {
    min-height: 360px;
    height: 70vh;
  }

  .sjob-hero__inner {
    padding: 0 24px;
  }

  .sjob-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sjob-content {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Stack columns vertically */
  .sjob-content__cols {
    flex-direction: column;
    gap: 48px;
  }

  /* Horizontal divider when stacked */
  .sjob-content__divider {
    flex: 0 0 1px;
    align-self: auto;
    width: 100%;
    height: 1px;
    margin: 0;
  }

  .sjob-promise {
    padding-top: 48px;
    padding-bottom: 60px;
  }
}

/* ── Responsive: 480px ─────────────────────────────────────── */
@media (max-width: 480px) {

  .sjob-hero {
    min-height: 300px;
    height: 60vh;
  }

  .sjob-hero__chevron svg {
    width: 28px;
    height: 28px;
  }

  .sjob-content {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .sjob-promise {
    padding-top: 36px;
    padding-bottom: 48px;
  }
}


/* ============================================================
   REFERENZEN PAGE — page-referenzen.php
   Prefix: ref-*
   ============================================================ */

/* ── Fade animation ─────────────────────────────────────────── */
.ref-fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ref-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Page wrapper ───────────────────────────────────────────── */
.ref-page {
  width: 100%;
  background-color: #fff;
}

/* ══════════════════════════════════════════════════════
   1. TAB BAR — sticky filter strip
   ══════════════════════════════════════════════════════ */
.ref-tabs {
  position: sticky;
  top: var(--header-height, 60px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 48px;
  background-color: #fff;
  border-bottom: 1px solid #e4e5e9;
  height: 48px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ref-tabs__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 20px;
  white-space: nowrap;
}

.ref-tabs__btn {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  height: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  color: #555;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease,
    background-color 0.18s ease;
  margin-bottom: -1px;
  /* overlap the border-bottom of .ref-tabs */
}

.ref-tabs__btn:hover {
  color: var(--color-500, #e87722);
}

.ref-tabs__btn--active {
  color: #fff;
  background-color: var(--color-500, #e87722);  /* naranja por defecto */
  border-bottom-color: transparent;
}

/* ══════════════════════════════════════════════════════
   2. HERO — switching banners
   ══════════════════════════════════════════════════════ */
.ref-heroes {
  position: relative;
  width: 100%;
}

.ref-hero {
  position: relative;
  width: 100%;
  height: clamp(320px, 50vw, 600px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Hidden by default — JS reveals active */
  display: none;
}

.ref-hero--active {
  display: flex;
}

.ref-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ref-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.ref-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.25) 0%,
      rgba(0, 0, 0, 0.60) 100%);
}

.ref-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 48px;
  max-width: 720px;
}

.ref-hero__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
}

.ref-hero__desc {
  font-size: var(--text-p-m);
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  line-height: 1.6;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Chevron */
.ref-hero__chevron {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: #fff;
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.ref-hero__chevron:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

.ref-hero__chevron svg {
  width: 34px;
  height: 34px;
  animation: ref-bounce 2s ease-in-out infinite;
}

@keyframes ref-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

/* ══════════════════════════════════════════════════════
   3. GRID — 2-column photo grid
   ══════════════════════════════════════════════════════ */
.ref-grid-section {
  background-color: #fff;
}

.ref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.ref-grid__empty {
  padding: 64px 48px;
  font-size: 1rem;
  color: #888;
  text-align: center;
}

/* Each card — square-ish photo tile */
.ref-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: #111;
  text-decoration: none;
}

.ref-card--hidden,
.ref-grid--hidden {
  display: none;
}

.ref-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s ease;
}

/* Filter animation states */
.ref-card--filter-out {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.ref-card--filter-in {
  animation: refCardIn 0.4s ease both;
  animation-delay: var(--delay, 0ms);
}

@keyframes refCardIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ref-card:hover .ref-card__img {
  transform: scale(1.05);
}

/* Hover overlay with title */
.ref-card__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(238, 125, 12, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: background-color 0.35s ease;
}

.ref-card:hover .ref-card__overlay {
  background-color: rgba(238, 125, 12, 0.75);
}

.ref-card__title {
  font-size: var(--text-h2-m);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  text-align: center;
  padding: 0 1rem;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}

.ref-card:hover .ref-card__title {
  opacity: 1;
  transform: scale(1);
}

.ref-card__placeholder {
  width: 100%;
  height: 100%;
  background-color: #1a2a3a;
}

/* ── Responsive: 768px ─────────────────────────────────────── */
@media (max-width: 768px) {

  .ref-tabs {
    padding: 0 16px;
    top: var(--header-height, 56px);
  }

  .ref-tabs__label {
    display: none;
    /* hide label on small screens */
  }

  .ref-hero {
    height: clamp(260px, 55vw, 400px);
  }

  .ref-hero__inner {
    padding: 0 24px;
  }

  /* ── Grid: mantener 2 columnas en tablet/mobile ──────────────
     6 card en 3 filas × 2 cols = pantalla completa            */
  .ref-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas siempre */
  }

  /* Altura calculada: (viewport - header - ref-tabs) / 3 filas */
  .ref-card {
    aspect-ratio: unset;
    height: calc( (100vh - var(--header-height, 60px) - 48px) / 3 );
  }

  /* overlay: degradado naranja permanente de abajo ↑ arriba */
  .ref-card__overlay {
    align-items:     flex-end;
    justify-content: center;
    padding:         0;
    background: linear-gradient(
                  to top,
                  rgba(238, 125, 12, 0.88) 0%,
                  rgba(238, 125, 12, 0.45) 40%,
                  rgba(238, 125, 12, 0.00) 100%
                ) !important;
    transition: none;
  }

  /* anular hover del overlay (no cambia en touch) */
  .ref-card:hover .ref-card__overlay {
    background: linear-gradient(
                  to top,
                  rgba(238, 125, 12, 0.88) 0%,
                  rgba(238, 125, 12, 0.45) 40%,
                  rgba(238, 125, 12, 0.00) 100%
                ) !important;
  }

  /* título: siempre visible anclado al bottom-center */
  .ref-card__title {
    font-size:   clamp(0.85rem, 3vw, 1.2rem);
    text-align:  center;
    padding:     0.5rem 0.75rem 0.85rem;
    opacity:     1;
    transform:   none;
    transition:  none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  }

  /* anular scale del hover en touch */
  .ref-card:hover .ref-card__title {
    opacity:   1;
    transform: none;
  }
}

/* ── Responsive: 480px ─────────────────────────────────────── */
@media (max-width: 480px) {

  .ref-tabs__btn {
    padding: 0 14px;
    font-size: 0.8125rem;
  }

  .ref-hero {
    height: clamp(220px, 60vw, 320px);
  }
}


/* ── REFERENZEN ARCHIVE — Privatprojekte: overlay azul ────────
   Solo se activa cuando el grid tiene .ref-grid--privat,
   que PHP añade automáticamente en la categoría privatprojekte.
   ─────────────────────────────────────────────────────────────── */

/* Desktop: reposo — transparente */
.ref-grid--privat .ref-card__overlay {
  background-color: rgba(0, 64, 112, 0);    /* --navy-500 a 0% */
}

/* Desktop: hover — azul semi-transparente */
.ref-grid--privat .ref-card:hover .ref-card__overlay {
  background-color: rgba(0, 64, 112, 0.75); /* --navy-500 a 75% */
}

/* Tablet portrait y mobile portrait: gradiente azul permanente */
@media (max-width: 768px) {

  .ref-grid--privat .ref-card__overlay {
    background: linear-gradient(
                  to top,
                  rgba(0, 64, 112, 0.88) 0%,
                  rgba(0, 64, 112, 0.45) 40%,
                  rgba(0, 64, 112, 0.00) 100%
                ) !important;
  }

  .ref-grid--privat .ref-card:hover .ref-card__overlay {
    background: linear-gradient(
                  to top,
                  rgba(0, 64, 112, 0.88) 0%,
                  rgba(0, 64, 112, 0.45) 40%,
                  rgba(0, 64, 112, 0.00) 100%
                ) !important;
  }

}

@media (max-width: 480px) {

  .ref-grid--privat .ref-card__overlay {
    background: linear-gradient(
                  to top,
                  rgba(0, 64, 112, 0.88) 0%,
                  rgba(0, 64, 112, 0.45) 40%,
                  rgba(0, 64, 112, 0.00) 100%
                ) !important;
  }

  .ref-grid--privat .ref-card:hover .ref-card__overlay {
    background: linear-gradient(
                  to top,
                  rgba(0, 64, 112, 0.88) 0%,
                  rgba(0, 64, 112, 0.45) 40%,
                  rgba(0, 64, 112, 0.00) 100%
                ) !important;
  }

}


/* ══════════════════════════════════════════════════════
   REFERENZEN LANDING — page-referenzen.php
   ══════════════════════════════════════════════════════ */

/* Landing hero — reuses .ref-hero__* sub-elements */
.ref-landing-hero {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Archive hero (taxonomy-referenzen-category.php) */
.ref-archive-hero {
  position: relative;
  width: 100%;
  height: clamp(320px, 50vw, 600px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 600px;
  opacity: 1;
  transition: max-height 0.45s ease, opacity 0.35s ease;
}

.ref-archive-hero--hidden {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* ── Category cards — two large photo tiles ─────────── */
.ref-landing-cats {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: clamp(320px, 45vw, 560px);
}

.ref-cat-card {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  background-color: #111;
}

.ref-cat-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.ref-cat-card:hover .ref-cat-card__img {
  transform: scale(1.06);
}

.ref-cat-card__placeholder {
  position: absolute;
  inset: 0;
  background-color: #1a2a3a;
}

.ref-cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.72) 100%);
  transition: background 0.35s ease;
}

.ref-cat-card:hover .ref-cat-card__overlay {
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.82) 100%);
}

.ref-cat-card__body {
  position: relative;
  z-index: 2;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ref-cat-card__title {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.ref-cat-card__desc {
  font-size: var(--text-p-m);
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  line-height: 1.5;
  max-width: 380px;
}

.ref-cat-card__btn {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-500, #e87722);
  letter-spacing: 0.03em;
  transition: letter-spacing 0.2s ease;
}

.ref-cat-card:hover .ref-cat-card__btn {
  letter-spacing: 0.06em;
}

/* Divider between the two cards */
.ref-cat-card+.ref-cat-card {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* ── Responsive: 768px ──────────────────────────────── */
@media (max-width: 768px) {

  .ref-landing-hero,
  .ref-archive-hero {
    height: clamp(260px, 55vw, 400px);
  }

  .ref-landing-cats {
    flex-direction: column;
    min-height: unset;
  }

  .ref-cat-card {
    flex: none;
    height: clamp(260px, 55vw, 380px);
  }

  .ref-cat-card+.ref-cat-card {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .ref-cat-card__body {
    padding: 28px 24px;
  }
}


/* ══════════════════════════════════════════════════════
   REFERENZEN ARCHIVE — taxonomy-referenzen-category.php
   ══════════════════════════════════════════════════════ */

/* Archive tab bar — anchor links instead of buttons */
.ref-tabs--archive .ref-tabs__btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Großprojekte activo — fondo naranja */
.ref-tabs--gross .ref-tabs__btn--active {
  background-color: var(--color-500, #FAA748);
  color: #fff;
  border-bottom-color: transparent;
}

/* Privatprojekte activo — fondo azul navy */
.ref-tabs--privat .ref-tabs__btn--active {
  background-color: var(--navy-500, #004070);
  color: #fff;
  border-bottom-color: transparent;
}

/* Hover en botón NO activo: color de la categoría activa */
.ref-tabs--gross .ref-tabs__btn:not(.ref-tabs__btn--active):hover {
  color: var(--color-500, #FAA748);
}

.ref-tabs--privat .ref-tabs__btn:not(.ref-tabs__btn--active):hover {
  color: var(--navy-500, #004070);
}

/* ── Subcategory filter row ─────────────────────────── */
.ref-subbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* always one single row */
  align-items: stretch;
  gap: 0;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  position: sticky;
  top: calc(var(--header-height, 60px) + 48px);
  z-index: 89;
}

/* Orange theme — Großprojekte */
.ref-subbar--gross {
  background-color: var(--color-500, #e87722);
}

/* Blue/navy theme — Privatprojekte */
.ref-subbar--privat {
  background-color: #1e3a6e;
}

/* Each subcategory button */
.ref-subbar__btn {
  flex: 1 1 0;
  /* equal width, always in one row */
  min-width: 120px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.ref-subbar__btn:first-child {
  border-left: none;
}

.ref-subbar__btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.ref-subbar__btn--active {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.ref-subbar__name {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  display: block;
}

/* ── Responsive: 768px ──────────────────────────────── */
@media (max-width: 768px) {

  .ref-subbar {
    padding: 0 16px;
    top: calc(var(--header-height, 56px) + 48px);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ref-subbar__btn {
    flex: 0 0 auto;
    min-width: 140px;
  }
}


/* ══════════════════════════════════════════════════════
   SINGLE REFERENZEN — single-referenzen.php   (rsp-*)
   ══════════════════════════════════════════════════════ */

/* ── Page fade-in ────────────────────────────────────── */
.rsp-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.rsp-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════
   1. HERO
   ═══════════════════════════ */
.rsp-hero {
  position: relative;
  width: 100%;
  height: clamp(360px, 55vw, 620px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rsp-hero__bg {
  position: absolute;
  inset: 0;
}

.rsp-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.rsp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.62) 100%);
}

.rsp-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
}

.rsp-hero__title {
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.rsp-hero__location {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  font-size: clamp(0.9rem, 1.5vw, 1.125rem);
  font-weight: 600;
  color: var(--neutral-white);
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* ── Scroll chevron: bottom-center of hero ── */
.rsp-hero__chevron {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
  animation: rsp-chevron-bounce 2.2s ease-in-out infinite;
}

.rsp-hero__chevron svg {
  width: 32px;
  height: 32px;
  display: block;
}

.rsp-hero__chevron:hover {
  color: #fff;
  animation-play-state: paused;
  transform: translateX(-50%) translateY(3px);
}

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


@keyframes rsp-subnav-fadein {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rsp-subnav {
  position: sticky;
  top: var(--header-height, 60px);
  z-index: 99;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 32px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  /* ── Fade-in al cargar la página ── */
  animation: rsp-subnav-fadein 0.5s ease both;
  animation-delay: 0.3s;
}


.rsp-subnav__arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #1a1a1a;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 24px;
  transition: background 0.2s ease, color 0.2s ease;
}

.rsp-subnav__arrow:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--color-500, #e87722);
}

.rsp-subnav__arrow--disabled {
  visibility: hidden;
  width: 80px;
  /* keeps layout balanced */
}

.rsp-subnav__arrow svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rsp-subnav__back {
  display: inline-flex;
  align-items: center;
  padding: 8px 28px;
  background-color: var(--color-500, #e87722);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  border-radius: 24px;
  transition: opacity 0.2s ease;
}

.rsp-subnav__back:hover {
  opacity: 0.85;
}

/* ═══════════════════════════
   2. CONTENT
   ═══════════════════════════ */
.rsp-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 60px;
  padding: 64px 80px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  /* Compensa header + rsp-subnav al hacer scroll desde el chevron */
  scroll-margin-top: calc(var(--header-height, 60px) + 52px);
}

/* Left column */
.rsp-content__left {
  flex: 1 1 45%;
  min-width: 0;
}

.rsp-content__title {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 800;
  color: var(--color-500, #e87722);
  margin: 0 0 20px;
  line-height: 1.1;
}

.rsp-content__desc {
  font-size: var(--text-p-m);
  line-height: 1.7;
  color: #3a3a3a;
}

.rsp-content__desc p {
  margin: 0 0 1em;
}

/* Right column — espacio stats→línea = línea→meta (comparte token con .rsp-meta). */
.rsp-content__right {
  --rsp-meta-divider-space: 12px;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rsp-meta-divider-space);
}

/* Stats grid — value | label, aligned left (same edge as .rsp-meta below) */
.rsp-stats {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 12px;
  align-items: baseline;
  justify-content: start;
  min-width: 0;
  width: 100%;
}

.rsp-stat {
  display: contents;
  line-height: 1.2;
}

.rsp-stat__value {
  grid-column: 1;
  justify-self: start;
  text-align: left;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 800;
  color: #132054;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

.rsp-stat__label {
  grid-column: 2;
  justify-self: start;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #132054;
  white-space: nowrap;
}

/* El valor permanece invisible hasta que el contador JS lo activa */
.rsp-stat__value[data-counter] {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* ── Campo Fliesen: valor multilínea en columna 1 ─ */
.rsp-stat__value--tiles {
  display: block;
  line-height: 1.45;
}

/* Meta */
.rsp-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
  padding-top: var(--rsp-meta-divider-space, 12px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.rsp-meta__item {
  display: contents;
  color: #8E8E8E;
}

.rsp-meta__item--full {
  display: contents;
}

.rsp-meta__label {
  grid-column: 1;
  font-weight: 700;
  color: #8E8E8E;
  white-space: nowrap;
}

.rsp-meta__val {
  grid-column: 2;
  min-width: 0;
  color: #8E8E8E;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ═══════════════════════════
   3. SLIDER
   ═══════════════════════════ */
.rsp-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0a0a;
}

.rsp-slider__track {
  display: flex;
  flex-direction: row;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.rsp-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: clamp(320px, 55vw, 680px);
  overflow: hidden;
}

/* Landscape / square: fill slide (unchanged behavior). */
.rsp-slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Portrait: center in slide, fit without forcing full width upscale. */
.rsp-slider__slide--portrait {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.rsp-slider__slide--portrait .rsp-slider__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Arrow buttons */
.rsp-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-500, #e87722);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 16px rgba(232, 119, 34, 0.45);
}

.rsp-slider__btn:hover {
  opacity: 0.85;
  transform: translateY(-50%) scale(1.08);
}

.rsp-slider__btn svg {
  width: 22px;
  height: 22px;
}

.rsp-slider__btn--prev {
  left: 20px;
}

.rsp-slider__btn--next {
  right: 20px;
}

/* Dots */
.rsp-slider__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 8px;
  z-index: 4;
}

.rsp-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.rsp-slider__dot--active {
  background: var(--color-500, #e87722);
  transform: scale(1.35);
}

/* ── Responsive: 900px ──────────────────────────────── */
@media (max-width: 900px) {
  .rsp-content {
    flex-direction: column;
    gap: 36px;
    padding: 48px 32px;
  }

  .rsp-content__left,
  .rsp-content__right {
    flex: none;
    width: 100%;
  }
}

/* ── Responsive: 560px ──────────────────────────────── */
@media (max-width: 560px) {
  .rsp-hero__nav {
    display: none;
  }

  .rsp-content {
    padding: 36px 20px;
  }

  .rsp-slider__btn {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================
   BILDQUELLE — Fuente de imagen (campo ACF)
   Aparece debajo del párrafo de contenido en sub-páginas de
   Grossprojekte y Privatprojekte.
   ============================================================ */

.page-bildquelle {
  margin-top: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: #8E8E8E;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* El enlace hereda el color gris y cambia a naranja al hover */
.bildquelle-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bildquelle-link:hover,
.bildquelle-link:focus {
  color: var(--color-500);
  text-decoration: underline;
}

/* ============================================================
   RECHTLICHES — Legal pages (Impressum, Datenschutzerklärung)
   Template: templates/page-rechtliches.php
   ============================================================ */

.recht-page {
  background-color: var(--color-white);
}

/* ── Hero (navy band + title + excerpt) ─────────────────────── */

.recht-hero {
  background-color: var(--navy-700);
  color: var(--color-white);
  padding: clamp(2.5rem, 4vw + 1rem, 4.5rem) var(--header-padding-x);
}

.recht-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.recht-hero__main {
  width: 100%;
}

.recht-hero__kicker {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-400);
  text-align: center;
}

.recht-hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h1-s);
  font-weight: 700;
  line-height: 1.08;
  color: var(--color-white);
  text-align: center;
}

.recht-hero__excerpt {
  max-width: 640px;
  margin: 0 auto;
}

.recht-hero__excerpt p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-p-s);
  line-height: 1.65;
  color: var(--navy-100);
  text-align: center;
}

/* ── Sub-navigation bar ─────────────────────────────────────── */

.recht-subnav {
  background-color: var(--navy-50);
  border-bottom: 1px solid var(--navy-100);
}

.recht-subnav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--header-padding-x);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.recht-subnav__link {
  display: inline-flex;
  align-items: center;
  padding: 1rem 1.5rem;
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy-500);
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.recht-subnav__link:hover,
.recht-subnav__link:focus {
  color: var(--navy-700);
}

.recht-subnav__link--active {
  color: var(--navy-700);
  border-bottom-color: var(--color-500);
}

/* ── Content area ───────────────────────────────────────────── */

.recht-content {
  padding: clamp(2.5rem, 4vw + 1rem, 4rem) var(--header-padding-x) clamp(3rem, 5vw, 5rem);
}

.recht-content__inner {
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: var(--text-p-s);
  line-height: 1.75;
  color: var(--neutral-800);
}

.recht-content__inner > *:first-child {
  margin-top: 0;
}

.recht-content__inner > *:last-child {
  margin-bottom: 0;
}

.recht-content__inner h2,
.recht-content__inner h3,
.recht-content__inner h4 {
  font-family: var(--font-heading);
  color: var(--navy-700);
  line-height: 1.25;
  margin: 2rem 0 0.85rem;
}

.recht-content__inner h2 {
  font-size: var(--text-h2-s);
}

.recht-content__inner h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}

.recht-content__inner p {
  margin: 0 0 1rem;
}

.recht-content__inner ul,
.recht-content__inner ol {
  margin: 0 0 1.25rem 1.25rem;
  padding: 0;
}

.recht-content__inner li {
  margin-bottom: 0.45rem;
}

.recht-content__inner a {
  color: var(--navy-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.recht-content__inner a:hover,
.recht-content__inner a:focus {
  color: var(--color-600);
}

.recht-content__inner strong {
  color: var(--navy-800);
  font-weight: 600;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .recht-subnav__inner {
    justify-content: center;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .recht-subnav__link {
    flex: 0 0 auto;
    padding: 0.85rem 1.1rem;
  }
}

@media (max-width: 600px) {
  .recht-hero,
  .recht-content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .recht-subnav__inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}