/* ============================================================
   roana.design - Design-System
   Schriften liegen lokal in assets/fonts/ und werden niemals
   von einem fremden Server geladen (DSGVO).
   ============================================================ */

/* ---------- Schrift: Roboto, lokal ausgeliefert ---------- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Farben und Grundwerte ---------- */
:root {
  --orange:      #ff7a2a;
  --orange-dark: #e8641a;
  --orange-soft: rgba(255, 122, 42, 0.14);

  --ink:      #121212;
  --ink-2:    #1a1a1a;
  --charcoal: #232323;

  --cream:   #f5f2ec;
  --cream-2: #ebe5da;

  --white:      #ffffff;
  --muted:      #6f6a62;
  --muted-dark: #a9a49b;

  --line-dark:  rgba(255, 255, 255, 0.12);
  --line-light: rgba(18, 18, 18, 0.12);

  --wrap: 1280px;
  --pad: 28px;
  --header-h: 96px;
  --radius: 2px;

  --font-display: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Laufweite der Überschriften. Etwas weniger negativ als früher, damit
     die Buchstaben ein wenig mehr Luft bekommen, ohne gesperrt zu wirken. */
  --spur-titel: -0.018em;
  --spur-klein: -0.008em;

  /* Bildlaufleiste */
  --leiste-bahn:  #1b1b1b;
  --leiste-griff: #e9e6e0;
  --leiste-griff-aktiv: #ffffff;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: var(--spur-titel);
  line-height: 1.07;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.9rem); }
h2 { font-size: clamp(1.95rem, 4.2vw, 3.3rem); }
h3 { font-size: clamp(1.18rem, 1.9vw, 1.5rem); font-weight: 700; letter-spacing: var(--spur-klein); line-height: 1.25; }
h4 { font-size: 1.05rem; font-weight: 700; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Markierter Text erscheint in der Markenfarbe statt im Browser-Blau */
::selection { background: var(--orange); color: #1a1005; text-shadow: none; }
::-moz-selection { background: var(--orange); color: #1a1005; text-shadow: none; }

/* ---------- Bausteine ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: clamp(72px, 9vw, 130px); }
.section--dark  { background: var(--ink); color: var(--white); }
.section--dark2 { background: var(--ink-2); color: var(--white); }
.section--cream { background: var(--cream); }
.section--cream2{ background: var(--cream-2); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before { content: ''; width: 38px; height: 2px; background: var(--orange); flex: none; }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head p { margin-top: 20px; font-size: 1.1rem; color: var(--muted); max-width: 62ch; }
.section--dark .section-head p, .section--dark2 .section-head p { color: var(--muted-dark); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--orange); color: var(--ink); padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Überschrift-Optik ohne Überschrift-Ebene (für Kacheln) */
.h3 {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.18rem, 1.9vw, 1.5rem);
  letter-spacing: var(--spur-klein);
  line-height: 1.25;
  margin: 0;
}

/* Brotkrumen */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: baseline; font-size: .84rem; color: var(--muted); }
.breadcrumbs a { text-decoration: none; transition: color .3s var(--ease); }
.breadcrumbs a:hover { color: var(--orange); }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }
.section--dark .breadcrumbs, .section--dark2 .breadcrumbs { color: var(--muted-dark); }
.section--dark .breadcrumbs [aria-current], .section--dark2 .breadcrumbs [aria-current] { color: var(--white); }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}

/* ---------- Buttons ----------
   Die Farbfläche wischt beim Darüberfahren von links herein. Das läuft
   über die Hintergrundgröße und nicht über ein zusätzliches Element,
   damit an der Umrandung keine Kanten oder Ränder aufblitzen. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 15px 30px;
  border: 2px solid transparent; border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  --btn-wisch: transparent;
  background-color: transparent;
  background-image: linear-gradient(var(--btn-wisch), var(--btn-wisch));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0% 100%;
  background-origin: border-box;
  background-clip: border-box;
  transition: color .32s var(--ease), border-color .32s var(--ease),
              transform .32s var(--ease), box-shadow .32s var(--ease),
              background-size .42s var(--ease), background-position 0s .42s;
}
.btn:hover, .btn:focus-visible { background-size: 100% 100%; background-position: left center; transition-delay: 0s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background-color: var(--orange); border-color: var(--orange); color: #1a1005; --btn-wisch: var(--orange-dark); }
.btn--primary:hover, .btn--primary:focus-visible { border-color: var(--orange-dark); box-shadow: 0 12px 26px -16px rgba(255,122,42,.9); }

.btn--ghost { border-color: rgba(255,255,255,.55); color: var(--white); --btn-wisch: var(--white); }
/* Der weiße Button bekommt beim Überfahren denselben dezenten Schein
   wie der orangefarbene, nur in Weiß. */
.btn--ghost:hover, .btn--ghost:focus-visible {
  border-color: var(--white); color: var(--ink);
  box-shadow: 0 12px 26px -16px rgba(255,255,255,.85);
}

.btn--outline { border-color: var(--ink); color: var(--ink); --btn-wisch: var(--ink); }
.btn--outline:hover, .btn--outline:focus-visible {
  color: var(--white);
  box-shadow: 0 12px 26px -16px rgba(18,18,18,.55);
}

.arrow-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  text-decoration: none; color: var(--orange); padding-block: 6px;
}
.arrow-link span:last-child { transition: transform .3s var(--ease); }
.arrow-link:hover span:last-child { transform: translateX(6px); }

/* ============================================================
   KOPFZEILE
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 20px; background: transparent;
  transition: background-color .45s var(--ease), padding .45s var(--ease),
              box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
.site-header::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: var(--fortschritt, 0%);
  background: linear-gradient(90deg, var(--orange-dark), var(--orange));
  opacity: 0; transition: opacity .45s var(--ease); pointer-events: none;
}
.site-header--stuck {
  padding-block: 10px;
  background: rgba(48, 48, 48, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.10), 0 18px 44px -28px rgba(0,0,0,.9);
}
.site-header--stuck::after { opacity: 1; }
.site-header--solid { background: #1c1c1c; box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); }
.site-header--solid.site-header--stuck { background: rgba(48,48,48,.90); }

.header-inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative;
}

/* Menü und Sprachwahl stehen in einer Reihe. Der Umschalter sitzt
   rechts neben den Menüpunkten, wie auf zweisprachigen Websites üblich. */
.site-nav { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; }
.site-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 30px; }
.site-nav li { position: relative; }
.site-nav a {
  position: relative; display: block; padding: 8px 0;
  font-weight: 700; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; color: rgba(255,255,255,.86);
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
  transition: color .3s var(--ease);
}
.site-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease);
}
.site-nav a:hover { color: var(--white); }
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav .current-menu-item > a::after,
.site-nav .current_page_item > a::after,
.site-nav .current-menu-ancestor > a::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a,
.site-nav a[aria-current="page"] { color: var(--orange); }
.site-nav .btn { display: none; }

/* Untermenüs */
.site-nav ul ul {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  flex-direction: column; align-items: stretch; gap: 0;
  background: rgba(20,20,20,.97); padding: 10px 0; margin-top: 10px;
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.site-nav li:hover > ul, .site-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav ul ul a { padding: 10px 18px; text-transform: none; letter-spacing: .02em; font-size: .92rem; }
.site-nav ul ul a::after { display: none; }

/* Sprachumschalter: rechts neben dem Menü, durch eine feine Linie abgesetzt */
.lang-switch {
  display: flex; align-items: center; flex: none;
  padding-left: 24px; position: relative;
}
.lang-switch::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 16px; background: rgba(255, 255, 255, 0.28);
}
.lang-switch ul { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.lang-switch li { list-style: none; display: flex; align-items: center; }
.lang-switch li + li::before {
  content: ''; width: 1px; height: 11px; margin: 0 9px;
  background: rgba(255, 255, 255, 0.3);
}
.lang-switch a {
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  transition: color .3s var(--ease);
  padding: 6px 0;
}
.lang-switch a:hover { color: var(--white); }
.lang-switch .current-lang a { color: var(--orange); }

/* Logo */
.logo { position: relative; z-index: 2; display: block; padding: 2px; line-height: 0; transition: transform .45s var(--ease); }
.logo img { width: 146px; height: auto; filter: drop-shadow(0 2px 16px rgba(0,0,0,.55)); transition: width .45s var(--ease), filter .45s var(--ease); }
.logo:hover { transform: translateY(-1px) scale(1.045); }
.logo:hover img { filter: drop-shadow(0 4px 20px rgba(255,122,42,.45)); }
.site-header--stuck .logo img { width: 112px; filter: drop-shadow(0 1px 6px rgba(0,0,0,.45)); }

.logo img, .site-nav > ul > li, .nav-toggle { animation: kopfEin .75s var(--ease) both; }
.site-nav > ul > li:nth-child(1) { animation-delay: .05s; }
.site-nav > ul > li:nth-child(2) { animation-delay: .12s; }
.site-nav > ul > li:nth-child(3) { animation-delay: .19s; }
.site-nav > ul > li:nth-child(4) { animation-delay: .26s; }
.site-nav > ul > li:nth-child(5) { animation-delay: .33s; }
.logo img { animation-delay: .1s; }
@keyframes kopfEin { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Burger */
.nav-toggle {
  display: none; position: relative; z-index: 2; width: 50px; height: 44px; padding: 0;
  border: 1px solid var(--line-dark); background: rgba(18,18,18,.55);
  border-radius: var(--radius); cursor: pointer;
}
.nav-toggle span {
  position: absolute; left: 13px; width: 24px; height: 2px; background: var(--white);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   KOPFBEREICH (Hero) mit Diashow
   ============================================================ */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: 100svh; padding-top: calc(var(--header-h) + 40px); padding-bottom: 96px;
  background: var(--ink); color: var(--white); overflow: hidden;
}
.hero--inner { min-height: 74svh; padding-bottom: 72px; }

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__media::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(90deg, rgba(18,18,18,.93) 0%, rgba(18,18,18,.72) 42%, rgba(18,18,18,.42) 100%),
    linear-gradient(180deg, rgba(18,18,18,.75) 0%, rgba(18,18,18,.1) 34%, rgba(18,18,18,.85) 100%);
}

/* Diashow: die Bilder liegen übereinander und werden überblendet */
.hero__slide {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { animation: bildRuhig 12s var(--ease) both; }
.hero__slide.is-active img { animation: bildRuhig 12s var(--ease) both; }
@keyframes bildRuhig { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Einzelbild ohne Diashow (Unterseiten) */
.hero__media > img { animation: bildRuhig 22s var(--ease) both; }

.hero .wrap { position: relative; z-index: 3; }
.hero__content { max-width: 900px; }
.hero h1 { margin-bottom: 26px; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero__lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: #ded9d1; max-width: 58ch; margin-bottom: 36px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange); text-decoration: none;
}
.hero__scroll span { transition: color .3s var(--ease), transform .3s var(--ease); }
.hero__scroll svg { animation: nudge 1.9s var(--ease) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(9px); opacity: 1; }
}
/* Zusaetzliche, sehr zurueckhaltende Reaktion beim Ueberfahren:
   der Pfeil wandert kurz weiter nach unten, der Text wird heller. */
.hero__scroll:hover span, .hero__scroll:focus-visible span { color: var(--white); transform: translateY(-1px); }
.hero__scroll:hover svg, .hero__scroll:focus-visible svg { animation: nudge-nah 1.1s var(--ease) infinite; }
@keyframes nudge-nah {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50%      { transform: translateY(13px); opacity: 1; }
}

/* Punkte zur Diashow */
.hero__dots {
  position: absolute; z-index: 3; right: var(--pad); bottom: 34px;
  display: flex; gap: 10px;
}
.hero__dots button {
  width: 30px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255,255,255,.32); transition: background-color .35s var(--ease);
}
.hero__dots button[aria-current="true"] { background: var(--orange); }
.hero__dots button:hover { background: rgba(255,255,255,.7); }

/* ============================================================
   SLOGAN-BAND  MARKE. MESSE. WEBSITE. WIRKUNG.
   ============================================================ */
.slogan-band {
  background: var(--charcoal);
  color: var(--white);
  /* Rund ein Viertel hoeher als zuvor. Gemessen an der Gesamthoehe der
     Section, nicht nur am Innenabstand: 257 auf 321 Pixel bei 1440 px.
     Auf dem Handy faellt der Zuwachs kleiner aus, weil der Slogan dort
     ohnehin zwei Zeilen braucht. */
  padding-block: clamp(56px, 7.9vw, 106px);
  display: flex;
  align-items: center;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}
.slogan-band__intro {
  font-size: .78rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  color: var(--muted-dark); margin: 0 0 20px;
}
.slogan-band__woerter {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 clamp(20px, 3.2vw, 52px);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5.2vw, 3.9rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-transform: uppercase;
}
.slogan-band__woerter span { display: inline-flex; align-items: baseline; }
.slogan-band__woerter i { font-style: normal; color: var(--orange); }

/* ============================================================
   REGIONEN (weltweit)
   ============================================================ */
/* Regionen 01-04
   Feste Spaltenzahl statt auto-fit, damit die Nummern in jeder Zeile
   exakt untereinander stehen. Die jeweils erste Spalte einer Zeile
   sitzt bündig am linken Textrand der Überschrift darüber. */
.regionen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-dark);
}
.regionen__eintrag {
  display: flex; align-items: baseline; gap: 14px;
  padding: 26px 26px;
  border-bottom: 1px solid var(--line-dark);
  border-right: 1px solid var(--line-dark);
  overflow: hidden;
}
.regionen__eintrag:nth-child(4n + 1) { padding-left: 0; }
.regionen__eintrag:nth-child(4n),
.regionen__eintrag:last-child { border-right: none; }
.regionen__nummer,
.regionen__name {
  transition: transform .35s var(--ease);
}
.regionen__eintrag:hover .regionen__nummer,
.regionen__eintrag:hover .regionen__name { transform: translateX(8px); }
.regionen__nummer {
  font-family: var(--font-display); font-weight: 900; font-size: .85rem;
  letter-spacing: .1em; color: var(--orange); flex: none;
}
.regionen__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); letter-spacing: -0.015em; line-height: 1.3;
}

/* ============================================================
   BILDVERGROESSERUNG (Lightbox)
   ============================================================ */
.galerie button.galerie__knopf {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  overflow: hidden; border-radius: var(--radius);
}
.galerie__lupe {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(18, 18, 18, 0.72); color: var(--white);
  border-radius: 999px; opacity: 0;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  transform: translateY(6px);
  pointer-events: none;
}
.galerie figure { position: relative; }
.galerie figure:hover .galerie__lupe,
.galerie button:focus-visible .galerie__lupe { opacity: 1; transform: translateY(0); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(10, 10, 10, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__bild {
  max-width: 100%; max-height: calc(100vh - clamp(120px, 18vw, 190px));
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
.lightbox__unterschrift {
  margin: 18px auto 0; max-width: 70ch; text-align: center;
  color: #d6d1c9; font-size: .92rem; line-height: 1.5;
}
.lightbox__zaehler {
  display: block; margin-top: 6px;
  font-size: .74rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--orange);
}
.lightbox__knopf {
  position: absolute; z-index: 2;
  width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(24, 24, 24, 0.72);
  color: var(--white); cursor: pointer;
  border-radius: 999px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__knopf:hover { background: var(--orange); border-color: var(--orange); color: #1a1005; }
.lightbox__zu { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.lightbox__prev { left: clamp(10px, 2.4vw, 30px); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(10px, 2.4vw, 30px); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
body.lightbox-offen { overflow: hidden; }

/* ============================================================
   PROJEKTE
   ============================================================ */
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.project-grid--three { grid-template-columns: repeat(3, 1fr); }

.project {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--charcoal); text-decoration: none; color: var(--white); aspect-ratio: 3 / 2;
}
.project img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.project::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,18,18,0) 28%, rgba(18,18,18,.58) 62%, rgba(18,18,18,.94) 100%);
  transition: background .45s var(--ease);
}
.project:hover img { transform: scale(1.07); }
.project:hover::after { background: linear-gradient(180deg, rgba(18,18,18,.18) 18%, rgba(18,18,18,.68) 58%, rgba(18,18,18,.96) 100%); }
.project__body {
  display: block;
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 26px 28px;
  transition: transform .5s var(--ease);
}
.project:hover .project__body { transform: translateY(-6px); }
.project__meta {
  display: block;
  font-size: .74rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 8px;
}
.project__title { font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.project__line { display: block; width: 0; height: 2px; background: var(--orange); margin-top: 14px; transition: width .5s var(--ease); }
.project:hover .project__line { width: 62px; }
.project--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
figure.project { margin: 0; }

/* Platzhalter, wenn ein Projekt noch kein Bild hat */
.project__platzhalter {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(120% 100% at 20% 0%, rgba(255,122,42,.22), transparent 62%), var(--charcoal);
  color: var(--orange);
}
.project__platzhalter svg { width: 74px; height: 74px; opacity: .85; }

/* Filter */
.filter {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.filter button {
  padding: 10px 20px; min-height: 44px;
  border: 1px solid var(--line-light); background: transparent; color: inherit;
  border-radius: 999px; cursor: pointer;
  font-size: .86rem; font-weight: 700; letter-spacing: .04em;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.section--dark .filter button, .section--dark2 .filter button { border-color: var(--line-dark); }
.filter button:hover { border-color: var(--orange); color: var(--orange); }
.filter button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #1a1005; }
.project.is-versteckt { display: none; }

/* Textliste weiterer Projekte */
.reflist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); }
.section--cream .reflist, .section--cream2 .reflist { border-top-color: var(--line-light); }
.reflist li {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 28px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line-dark);
  transition: padding-left .35s var(--ease);
}
.section--cream .reflist li, .section--cream2 .reflist li { border-bottom-color: var(--line-light); }
.reflist li:hover { padding-left: 14px; }
.reflist a { text-decoration: none; display: contents; }
.reflist strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.28rem); letter-spacing: -0.015em; }
.reflist span { color: var(--muted-dark); font-size: .93rem; }
.section--cream .reflist span, .section--cream2 .reflist span { color: var(--muted); }

/* Projekt-Einzelseite: Eckdaten und Galerie */
.projekt-daten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px 28px;
  padding: 30px 0; border-block: 1px solid var(--line-light); margin-bottom: 44px;
}
.projekt-daten dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.projekt-daten dd { margin: 0; font-weight: 600; font-size: 1.02rem; }

.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; margin-top: 44px; }
.galerie figure { overflow: hidden; border-radius: var(--radius); background: var(--charcoal); }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.galerie figure:hover img { transform: scale(1.04); }

.projekt-nav {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 34px; margin-top: 44px; border-top: 1px solid var(--line-light);
}

/* ============================================================
   LEISTUNGSKARTEN
   ============================================================ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.card {
  display: flex; flex-direction: column; padding: 34px 30px 30px;
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: rgba(255,122,42,.5); }
.section--cream .card, .section--cream2 .card { background: var(--white); border-color: var(--line-light); }
.card__icon {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 22px;
  color: var(--orange); background: var(--orange-soft); border-radius: var(--radius);
  transition: transform .45s var(--ease), background-color .45s var(--ease);
}
.card:hover .card__icon { transform: translateY(-3px) rotate(-6deg); background: rgba(255,122,42,.26); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--muted-dark); font-size: 1rem; }
.section--cream .card p, .section--cream2 .card p { color: var(--muted); }
.card__foot { margin-top: auto; padding-top: 22px; }

.ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 28px; font-size: 1rem; line-height: 1.6; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 11px; height: 11px;
  border-left: 2.5px solid var(--orange); border-top: 2.5px solid var(--orange); transform: rotate(45deg);
}

/* ============================================================
   SCHRITTE, ZAHLEN, TEAM
   ============================================================ */
/* Ablauf: gleiche Aufteilung und gleiche Innenabstaende wie die Section
   "Weltweit", damit der Text nicht an den Trennlinien klebt. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-dark); }
.section--cream .steps, .section--cream2 .steps { border-top-color: var(--line-light); }
.step { padding: 34px 26px; border-right: 1px solid var(--line-dark); }
.step:nth-child(4n + 1) { padding-left: 0; }
.section--cream .step, .section--cream2 .step { border-right-color: var(--line-light); }
.step:nth-child(4n), .step:last-child { border-right: none; }
.step__num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 900; color: var(--orange); line-height: 1; margin-bottom: 16px; letter-spacing: -0.04em; }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--muted-dark); font-size: .99rem; }
.section--cream .step p, .section--cream2 .step p { color: var(--muted); }


.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.person { padding: 34px 32px; background: var(--white); border: 1px solid var(--line-light); border-left: 3px solid var(--orange); border-radius: var(--radius); }
.person__role { font-size: .76rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.person h3 { margin-bottom: 14px; }
.person blockquote { margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; line-height: 1.3; letter-spacing: -0.02em; }
.person p { color: var(--muted); font-size: 1rem; }

/* ============================================================
   HAEUFIGE FRAGEN
   ============================================================ */
.faq { max-width: 860px; border-top: 1px solid var(--line-light); }
.section--dark .faq, .section--dark2 .faq { border-top-color: var(--line-dark); }
.faq details { border-bottom: 1px solid var(--line-light); }
.section--dark .faq details, .section--dark2 .faq details { border-bottom-color: var(--line-dark); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  letter-spacing: -0.015em; line-height: 1.3; transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange); }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 32px; width: 13px; height: 13px;
  border-right: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 36px; }
.faq details p { padding: 0 44px 26px 0; color: var(--muted); max-width: 68ch; }
.section--dark .faq details p, .section--dark2 .faq details p { color: var(--muted-dark); }
.faq details[open] > *:not(summary) { animation: antwortAuf .38s var(--ease) both; }
@keyframes antwortAuf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   HANDLUNGSAUFFORDERUNG
   ============================================================ */
.cta-band { position: relative; background: var(--orange); color: #180d02; padding-block: clamp(58px, 7vw, 92px); overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px;
  border: 2px solid rgba(24,13,2,.13); transform: rotate(45deg); pointer-events: none;
}
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; position: relative; }
.cta-band h2 { max-width: 18ch; }
.cta-band p { margin-top: 14px; font-size: 1.1rem; max-width: 46ch; opacity: .82; }
.cta-band .btn--primary { background-color: var(--ink); border-color: var(--ink); color: var(--white); --btn-wisch: #000; }
.cta-band .btn--primary:hover, .cta-band .btn--primary:focus-visible { border-color: #000; box-shadow: 0 14px 30px -18px rgba(0,0,0,.9); }

/* ============================================================
   TEXT + BILD
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.split--flip .split__media { order: -1; }
.split--top { align-items: start; }
.split__lead { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.5; }
.split__body p { color: var(--muted); }
.section--dark .split__body p, .section--dark2 .split__body p { color: var(--muted-dark); }

.service-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center;
  padding-block: clamp(48px, 6vw, 76px); border-top: 1px solid var(--line-light);
}
.section--dark .service-block, .section--dark2 .service-block { border-top-color: var(--line-dark); }
.service-block:first-of-type { border-top: none; padding-top: 0; }
.service-block__num { font-family: var(--font-display); font-size: .9rem; font-weight: 900; letter-spacing: .16em; color: var(--orange); margin-bottom: 14px; }
.service-block h2 { margin-bottom: 18px; }
.service-block > div > p { color: var(--muted); max-width: 56ch; }
.section--dark .service-block > div > p, .section--dark2 .service-block > div > p { color: var(--muted-dark); }
.service-block__media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--charcoal); }
.service-block__media img { width: 100%; height: 100%; object-fit: cover; }

.tile-graphic {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: radial-gradient(120% 100% at 15% 0%, rgba(255,122,42,.22), transparent 62%), var(--charcoal);
  border: 1px solid var(--line-dark); color: var(--orange);
}
.tile-graphic svg { width: 84px; height: 84px; opacity: .9; }

/* ============================================================
   NEWS / BLOG
   ============================================================ */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 26px; }
.post-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.post-card:hover { transform: translateY(-5px); border-color: rgba(255,122,42,.5); box-shadow: 0 22px 44px -34px rgba(0,0,0,.6); }
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--charcoal); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.post-card__date { font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.post-card h3 { margin-bottom: 12px; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a:hover { color: var(--orange); }
.post-card p { color: var(--muted); font-size: .98rem; }
.post-card__foot { margin-top: auto; padding-top: 20px; }

.post-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .88rem; color: var(--muted); margin-bottom: 28px; }
.post-meta span { display: inline-flex; align-items: center; gap: 8px; }

.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 46px; padding: 0 14px;
  border: 1px solid var(--line-light); border-radius: var(--radius);
  text-decoration: none; font-weight: 700; font-size: .92rem;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--orange); color: var(--orange); }
.pagination .page-numbers.current { background: var(--orange); border-color: var(--orange); color: #1a1005; }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(34px, 5vw, 70px); align-items: start; }
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field label { font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--white);
  border: 1px solid var(--line-light); border-radius: var(--radius);
  padding: 15px 16px; min-height: 54px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { min-height: 168px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 24px; font-size: .93rem; line-height: 1.55; color: var(--muted); }
.consent input { width: 21px; height: 21px; margin: 2px 0 0; flex: none; accent-color: var(--orange); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 16px; font-size: .88rem; color: var(--muted); }

.contact-card { background: var(--white); border: 1px solid var(--line-light); border-top: 3px solid var(--orange); border-radius: var(--radius); padding: 32px 30px; }
.contact-card + .contact-card { margin-top: 20px; }
.contact-card h3 { margin-bottom: 18px; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-list a { text-decoration: none; font-weight: 600; }
.contact-list a:hover { color: var(--orange); }
.contact-list__label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

.form-status { padding: 16px 18px; border-radius: var(--radius); margin-bottom: 24px; font-weight: 600; }
.form-status--ok  { background: rgba(46,125,50,.1);  border: 1px solid rgba(46,125,50,.45);  color: #1e5c22; }
.form-status--err { background: rgba(198,40,40,.08); border: 1px solid rgba(198,40,40,.4);  color: #a12525; }

/* ============================================================
   INHALTSSEITEN
   ============================================================ */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 48px 0 16px; }
.prose h3 { margin: 32px 0 12px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.1em; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--orange); }
.prose img { border-radius: var(--radius); margin: 26px 0; }
.prose blockquote {
  margin: 26px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--orange);
  font-size: 1.12rem; line-height: 1.55;
}
.prose figure { margin: 26px 0; }
.prose figcaption { font-size: .88rem; color: var(--muted); margin-top: 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 26px 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-light); }
.notice { background: var(--white); border-left: 3px solid var(--orange); padding: 22px 26px; margin-bottom: 44px; font-size: 1rem; }
.wp-caption { max-width: 100%; }
.alignwide { max-width: min(100%, 1100px); margin-inline: auto; }
.alignfull { width: 100%; }
.aligncenter { margin-inline: auto; }

/* ============================================================
   FUSSZEILE
   ============================================================ */
.site-footer { background: var(--ink); color: var(--white); padding-block: clamp(64px, 7vw, 96px) 0; }
.footer-claim { font-family: var(--font-display); font-size: clamp(1.7rem, 3.6vw, 2.9rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; max-width: 16ch; margin: 0 0 34px; }
.footer-claim span { color: var(--orange); }

.locations__label { font-size: .75rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 16px; }
.locations__list { list-style: none; margin: 0 0 54px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.locations__list li {
  font-size: .88rem; font-weight: 600; padding: 7px 14px;
  border: 1px solid var(--line-dark); border-radius: 999px; color: #d6d1c9;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.locations__list li:hover { border-color: var(--orange); color: var(--orange); }

.footer-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding-top: 46px; border-top: 1px solid var(--line-dark); }
.footer-cols h4 { font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--orange); margin: 0 0 18px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-cols a { text-decoration: none; color: #d6d1c9; transition: color .3s var(--ease); }
.footer-cols a:hover { color: var(--orange); }
.footer-cols address { font-style: normal; color: #d6d1c9; line-height: 1.75; }
.footer-logo { width: 118px; margin-bottom: 20px; }

.footer-bottom {
  margin-top: 52px; padding-block: 26px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between;
  font-size: .87rem; color: var(--muted-dark);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--orange); }

/* ============================================================
   ANIMATIONEN
   ============================================================ */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 60px, 0); } to { opacity: 1; transform: none; } }

[data-anim] { opacity: 0; }
[data-anim].is-visible { animation-duration: 1.15s; animation-fill-mode: both; animation-timing-function: var(--ease); }
[data-anim="fade"].is-visible { animation-name: fadeIn; }
[data-anim="up"].is-visible   { animation-name: fadeInUp; }

[data-delay="1"].is-visible { animation-delay: .16s; }
[data-delay="2"].is-visible { animation-delay: .32s; }
[data-delay="3"].is-visible { animation-delay: .48s; }
[data-delay="4"].is-visible { animation-delay: .64s; }
[data-delay="5"].is-visible { animation-delay: .80s; }

.no-js [data-anim] { opacity: 1; }
.no-js .hero__slide { opacity: 1; }
.no-js .hero__slide ~ .hero__slide { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] { opacity: 1 !important; }
  .hero__media img, .hero__slide img { transform: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   MOBIL
   ============================================================ */
@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { border-bottom: 1px solid var(--line-dark); padding: 30px 24px; }
  .section--cream .step, .section--cream2 .step { border-bottom-color: var(--line-light); }
  .step:nth-child(4n + 1) { padding-left: 24px; }
  .step:nth-child(2n + 1) { padding-left: 0; }
  .step:nth-child(4n) { border-right: 1px solid var(--line-dark); }
  .section--cream .step:nth-child(4n), .section--cream2 .step:nth-child(4n) { border-right-color: var(--line-light); }
  .step:nth-child(2n) { border-right: none; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { padding: 26px 0; border-right: none; }
  .step:nth-child(4n + 1), .step:nth-child(2n + 1) { padding-left: 0; }
}

@media (max-width: 860px) {
  :root { --pad: 20px; --header-h: 78px; }

  .nav-toggle { display: block; order: -1; }
  .site-header { padding-block: 14px; }
  .site-header--stuck { padding-block: 10px; }

  .site-nav {
    position: fixed; inset: 0; background: var(--ink); padding: 96px 24px 40px;
    transform: translateX(-100%); transition: transform .38s var(--ease); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .lang-switch { padding-left: 0; margin-top: 28px; }
  .lang-switch::before { display: none; }
  .lang-switch a { font-size: 1rem; text-shadow: none; }
  .site-nav li { border-bottom: 1px solid var(--line-dark); }
  .site-nav a {
    padding: 21px 0 21px 20px; font-size: 1.12rem; letter-spacing: .06em;
    text-shadow: none; color: var(--white);
  }
  .site-nav a::after {
    left: 0; right: auto; top: 50%; bottom: auto; width: 3px; height: 22px;
    transform: translateY(-50%) scaleY(0); transform-origin: center;
    transition: transform .32s var(--ease);
  }
  .site-nav a:hover::after,
  .site-nav .current-menu-item > a::after,
  .site-nav .current_page_item > a::after,
  .site-nav a[aria-current="page"]::after { transform: translateY(-50%) scaleY(1); }
  .site-nav ul ul {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; margin: 0; padding: 0 0 0 18px;
  }
  .site-nav .btn { display: inline-flex; margin-top: 26px; width: 100%; order: 9; }

  .logo img { width: 104px; }
  .site-header--stuck .logo img { width: 92px; }

  .hero { min-height: 88svh; padding-bottom: 76px; }
  .hero--inner { min-height: 56svh; padding-bottom: 52px; }
  .hero__media::after {
    background: linear-gradient(180deg, rgba(18,18,18,.82) 0%, rgba(18,18,18,.5) 40%, rgba(18,18,18,.94) 100%);
  }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__scroll { display: none; }
  .hero__dots { right: 50%; transform: translateX(50%); bottom: 24px; }

  .project-grid, .project-grid--three { grid-template-columns: 1fr; }
  .project { aspect-ratio: 16 / 10; }
  .project--wide { aspect-ratio: 16 / 10; }

  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; padding-right: 0; }

  .split, .service-block { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .service-block__media { order: -1; }

  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band .btn { width: 100%; }
  .cta-band::before { display: none; }

  .footer-cols { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom ul { gap: 16px; }

  .faq summary { padding-right: 36px; }
  .faq details p { padding-right: 0; }

  .reflist li { grid-template-columns: 1fr; }
  .projekt-daten { grid-template-columns: 1fr 1fr; }

  .regionen { grid-template-columns: 1fr; }
  .regionen__eintrag { border-right: none; padding-right: 0; }

  .slogan-band__woerter { font-size: clamp(1.6rem, 8.5vw, 2.4rem); gap: 0 18px; }

  .lightbox__prev, .lightbox__next { top: auto; bottom: clamp(14px, 4vw, 26px); transform: none; }
  .lightbox__prev:hover, .lightbox__next:hover { transform: scale(1.06); }
  .lightbox__bild { max-height: calc(100vh - 210px); }
}

@media (max-width: 480px) {
  .locations__list { gap: 7px 8px; }
  .locations__list li { font-size: .82rem; padding: 6px 12px; }
  .card { padding: 28px 22px 26px; }
  .contact-card { padding: 26px 22px; }
  .filter button { padding: 9px 16px; font-size: .82rem; }
}

/* ============================================================
   TEAM MIT PORTRAITS
   Das Foto steht unter dem Text der jeweiligen Person und sitzt
   in allen Karten auf gleicher Hoehe, auch wenn die Texte
   unterschiedlich lang sind.
   ============================================================ */
.person { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.person__text { padding: 32px 32px 26px; }
.person__foto { margin: auto 32px 32px; width: 240px; max-width: calc(100% - 64px); }
.person__foto img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%;
  border-radius: var(--radius); background: var(--cream-2);
  transition: transform .6s var(--ease);
}
.person:hover .person__foto img { transform: scale(1.02); }

/* ============================================================
   REGIONEN, KLEINE BILDSCHIRME
   ============================================================ */
@media (max-width: 900px) {
  .regionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regionen__eintrag { padding: 22px 20px; }
  .regionen__eintrag:nth-child(4n + 1) { padding-left: 20px; }
  .regionen__eintrag:nth-child(2n + 1) { padding-left: 0; }
  .regionen__eintrag:nth-child(4n) { border-right: 1px solid var(--line-dark); }
  .regionen__eintrag:nth-child(2n) { border-right: none; }
}
@media (max-width: 560px) {
  .regionen { grid-template-columns: minmax(0, 1fr); }
  .regionen__eintrag { padding: 20px 0; border-right: none; }
  .regionen__eintrag:nth-child(4n + 1),
  .regionen__eintrag:nth-child(2n + 1) { padding-left: 0; }
}

@media (max-width: 640px) {
  .person__text { padding: 26px 24px 22px; }
  .person__foto { margin: auto 24px 26px; width: 200px; max-width: calc(100% - 48px); }
}

/* ============================================================
   BILDLAUFLEISTE
   Dunkle Bahn, schmaler orangener Griff mit runden Enden.
   Nur die Darstellung wird verändert, das Scrollverhalten und
   die Bedienung mit Tastatur bleiben unangetastet.
   ============================================================ */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--leiste-griff) var(--leiste-bahn);
}

/* Chrome, Edge, Safari und andere auf WebKit-Basis */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--leiste-bahn); }
::-webkit-scrollbar-thumb {
  background: var(--leiste-griff);
  border-radius: 999px;
  border: 3px solid var(--leiste-bahn);   /* schmalerer Griff mit Luft zur Bahn */
}
::-webkit-scrollbar-thumb:hover { background: var(--leiste-griff-aktiv); }
::-webkit-scrollbar-corner { background: var(--leiste-bahn); }

/* Bereiche, die innerhalb der Seite scrollen, folgen demselben Muster. */
.prose table,
.tabelle-scroll,
.galerie-scroll { scrollbar-width: thin; scrollbar-color: #8f8a82 rgba(0, 0, 0, .12); }
.prose table::-webkit-scrollbar-track,
.tabelle-scroll::-webkit-scrollbar-track,
.galerie-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, .10); }
.prose table::-webkit-scrollbar-thumb,
.tabelle-scroll::-webkit-scrollbar-thumb,
.galerie-scroll::-webkit-scrollbar-thumb {
  border-color: transparent; background-clip: padding-box; background-color: #8f8a82;
}
.section--dark .tabelle-scroll,
.section--dark2 .tabelle-scroll { scrollbar-color: var(--leiste-griff) rgba(255, 255, 255, .12); }

/* ============================================================
   FUSSZEILE: ADRESSE UND SOCIAL-ICONS
   ============================================================ */
.footer-logo-text { margin: 0; color: #d6d1c9; max-width: 34ch; }

.footer-adresse {
  font-style: normal; color: #d6d1c9; line-height: 1.75; margin: 0 0 18px;
}
.footer-adresse strong { color: var(--white); font-weight: 700; }

/* Spezifischer als .footer-cols ul, damit die Icons nebeneinander stehen */
.footer-cols ul.social-icons,
.social-icons {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.social-icons a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line-dark); border-radius: 50%;
  color: #d6d1c9; text-decoration: none;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.social-icons a:hover,
.social-icons a:focus-visible { color: var(--ink); background: var(--white); border-color: var(--white); }
.social-icons svg { width: 20px; height: 20px; }

/* Cookie-Einstellungen sehen aus wie die anderen Punkte der Zeile */
.cookie-link button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
  transition: color .3s var(--ease);
}
.cookie-link button:hover { color: var(--orange); }

/* ============================================================
   COOKIEBOT
   Nur die Optik wird angepasst. Cookiebot selbst bleibt ein
   eigenes Plugin und behaelt die volle Kontrolle ueber Consent
   und Script-Blocking. Ohne Cookiebot greift hier nichts.
   ============================================================ */
#CybotCookiebotDialog {
  font-family: var(--font-body) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--line-dark) !important;
  box-shadow: 0 28px 70px -30px rgba(0, 0, 0, .8) !important;
  background: var(--ink) !important;
  color: var(--white) !important;
}
#CybotCookiebotDialog *,
#CybotCookiebotDialogBodyContent * { font-family: var(--font-body) !important; }

#CybotCookiebotDialogBodyContentTitle,
#CybotCookiebotDialogBodyContentTitle * {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: var(--spur-klein) !important;
  color: var(--white) !important;
}
#CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialogDetailBodyContentTextOverview,
#CybotCookiebotDialogBodyContentText * { color: #d6d1c9 !important; }

#CybotCookiebotDialog a,
#CybotCookiebotDialogBodyContentText a { color: var(--orange) !important; text-underline-offset: 3px; }

/* Knöpfe im Stil der Website */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogBodyLevelButtonAccept,
#CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialogBodyLevelButtonCustomize,
#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
  min-height: 48px !important;
  padding: 13px 26px !important;
  border-radius: var(--radius) !important;
  border: 2px solid transparent !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  letter-spacing: .02em !important;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), box-shadow .3s var(--ease) !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogBodyLevelButtonAccept {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #1a1005 !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover,
#CybotCookiebotDialogBodyButtonAccept:hover,
#CybotCookiebotDialogBodyLevelButtonAccept:hover {
  background: var(--orange-dark) !important;
  border-color: var(--orange-dark) !important;
  box-shadow: 0 12px 26px -16px rgba(255, 122, 42, .9) !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
#CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialogBodyLevelButtonCustomize {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .55) !important;
  color: var(--white) !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover,
#CybotCookiebotDialogBodyButtonDecline:hover,
#CybotCookiebotDialogBodyLevelButtonCustomize:hover {
  background: var(--white) !important;
  border-color: var(--white) !important;
  color: var(--ink) !important;
  box-shadow: 0 12px 26px -16px rgba(255, 255, 255, .85) !important;
}

/* Reiter und Schalter */
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink { color: #d6d1c9 !important; border-bottom-color: transparent !important; }
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
  color: var(--white) !important; border-bottom-color: var(--orange) !important;
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSliderWrapper input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: var(--orange) !important;
}
#CybotCookiebotDialog input:focus-visible,
#CybotCookiebotDialog button:focus-visible,
#CybotCookiebotDialog a:focus-visible { outline: 3px solid var(--orange) !important; outline-offset: 3px !important; }

/* Branding von Cookiebot ausblenden, ueber die dafuer vorgesehenen Kennungen */
#CybotCookiebotDialogPoweredbyLink,
#CybotCookiebotDialogPoweredByText,
.CybotCookiebotDialogPoweredbyLink,
#CybotCookiebotDialogPoweredbyCybot,
#CybotCookiebotDialogPoweredbyImage { display: none !important; }

/* Der schwebende Einstellungsknopf entfaellt. Der Zugang laeuft ueber
   den Punkt „Cookie-Einstellungen“ in der Fusszeile. */
#CookiebotWidget,
.CookiebotWidget-consent-details,
#CybotCookiebotDialogBodyButtonDetails ~ #CookiebotWidget { display: none !important; }

@media (max-width: 640px) {
  #CybotCookiebotDialog { border-radius: 0 !important; }
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,
  #CybotCookiebotDialogBodyButtonAccept,
  #CybotCookiebotDialogBodyButtonDecline { width: 100% !important; }
}

/* ============================================================
   NEWS: WEITERE BEITRÄGE
   Ohne JavaScript ist die Liste sichtbar und der Knopf verborgen,
   damit kein Inhalt unerreichbar wird.
   ============================================================ */
.news-mehr { margin-top: clamp(30px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 14px; }
.reflist--news { margin-top: clamp(26px, 3vw, 40px); }

html:not(.js) [data-news-mehr] { display: none; }
html.js [data-news-liste] { display: none; }
html.js [data-news-liste].ist-offen { display: block; }
html.js [data-news-alle] { display: none; }
html.js [data-news-alle].ist-offen { display: inline-flex; }
html.js [data-news-mehr].ist-weg { display: none; }

/* ============================================================
   KOPFBEREICH OHNE BILD
   Ein Beitrag ohne Foto bekommt eine ruhige dunkle Fläche statt
   eines leeren Rahmens.
   ============================================================ */
.hero--ohne-bild {
  min-height: 0;
  padding-top: calc(var(--header-h) + clamp(46px, 6vw, 86px));
  padding-bottom: clamp(46px, 6vw, 80px);
  background: var(--ink);
}
.hero--ohne-bild .hero__content { max-width: 62ch; }
.hero--ohne-bild::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line-dark);
}

/* ============================================================
   GUTENBERG-BLÖCKE IM TEXT
   Damit ein Beitrag beliebig viele Unterthemen, Listen, Zitate,
   Bilder und Galerien haben kann, ohne Seitenbaukasten.
   ============================================================ */
.prose h4 { margin: 26px 0 10px; font-size: 1.06rem; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

.prose .wp-block-image { margin: 30px 0; }
.prose .wp-block-image img { margin: 0; }
.prose .wp-block-image figcaption { margin-top: 10px; }

.prose .wp-block-quote {
  margin: 30px 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--orange);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.42;
  letter-spacing: var(--spur-klein);
}
.prose .wp-block-quote cite,
.prose .wp-block-quote .wp-block-quote__citation {
  display: block; margin-top: 12px;
  font-family: var(--font-body); font-weight: 600; font-style: normal;
  font-size: .9rem; color: var(--muted);
}
.prose .wp-block-pullquote {
  margin: 34px 0; padding: 26px 0; border-block: 1px solid var(--line-light);
  text-align: left;
}

.prose .wp-block-separator {
  margin: 40px 0; border: 0; border-top: 1px solid var(--line-light); max-width: 100%;
}

.prose .wp-block-list { padding-left: 22px; }
.prose .wp-block-list li::marker { color: var(--orange); }

.prose .wp-block-table { margin: 30px 0; overflow-x: auto; }
.prose .wp-block-table table { width: 100%; border-collapse: collapse; }
.prose .wp-block-table th,
.prose .wp-block-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-light); }
.prose .wp-block-table th { font-weight: 700; }

.prose .wp-block-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px; margin: 30px 0; list-style: none; padding: 0;
}
.prose .wp-block-gallery figure { margin: 0; }
.prose .wp-block-gallery img { margin: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.prose .wp-block-embed { margin: 30px 0; }
.prose .wp-block-embed__wrapper { position: relative; }
.prose .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0; }
.prose .wp-block-button__link {
  display: inline-flex; align-items: center; min-height: 50px; padding: 13px 26px;
  border: 2px solid var(--orange); border-radius: var(--radius);
  background: var(--orange); color: #1a1005;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.prose .wp-block-button__link:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.prose .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--ink); border-color: var(--ink);
}

.prose .wp-block-code, .prose pre {
  margin: 26px 0; padding: 16px 18px; overflow-x: auto;
  background: var(--cream-2); border-radius: var(--radius);
  font-size: .92rem; line-height: 1.6;
}

.prose .has-text-align-center { text-align: center; }
.prose .has-text-align-right { text-align: right; }
.prose .wp-block-columns { display: flex; flex-wrap: wrap; gap: 26px; margin: 30px 0; }
.prose .wp-block-column { flex: 1 1 260px; min-width: 0; }

.prose .wp-block-media-text { display: grid; gap: 24px; margin: 30px 0; align-items: center; }
@media (min-width: 720px) {
  .prose .wp-block-media-text { grid-template-columns: 1fr 1fr; }
}

/* Dunkle Abschnitte: Textfarben nachziehen */
.section--dark .prose blockquote cite,
.section--dark2 .prose blockquote cite,
.section--dark .prose figcaption,
.section--dark2 .prose figcaption { color: var(--muted-dark); }
.section--dark .prose .wp-block-separator,
.section--dark2 .prose .wp-block-separator { border-top-color: var(--line-dark); }

/* ============================================================
   SEHR SCHMALE ANSICHTEN UND STARKER ZOOM
   Bei 200 Prozent Browser-Zoom auf einem schmalen Handy bleibt für
   ein langes Wort wie „Messeauftritte“ zu wenig Platz. Damit dabei
   nie eine Querscrollleiste entsteht, dürfen lange Wörter dort
   umbrechen. Im Normalfall greift das nie.
   ============================================================ */
h1, h2, h3, h4,
.footer-claim,
.slogan-band__woerter,
.reflist strong,
.projekt-karte__titel { overflow-wrap: break-word; }

@media (max-width: 400px) {
  .footer-claim { font-size: clamp(1.45rem, 8vw, 2.9rem); max-width: 100%; hyphens: auto; }
  .slogan-band__woerter { font-size: clamp(1.6rem, 9.5vw, 3.9rem); }

  /* Buttons duerfen umbrechen statt ueberzustehen */
  .btn { padding-inline: 20px; text-align: center; }
  .hero__actions .btn, .news-mehr .btn { width: 100%; }

  /* Lange Telefonnummern und Adressen umbrechen lassen */
  .footer-cols, .footer-cols a, .footer-adresse,
  .contact-card, .contact-card a { overflow-wrap: anywhere; }
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
}