/* ============================================================
   Bauknecht Immobilien – Main Stylesheet
   Matching visual style of www.bauknecht-immobilien.de
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* ── Variables ───────────────────────────────────────────── */
:root {
  --accent:       #6eba01;
  --accent-dark:  #5a9e01;
  --accent-light: rgba(110,186,1,.1);
  --black:        #000000;
  --white:        #ffffff;
  --dark:         #1a1a1a;
  --medium:       #555555;
  --light:        #888888;
  --bg-light:     #f5f5f5;
  --border:       #e0e0e0;

  --font-body:   Arial, Helvetica, sans-serif;
  --font-head:   'Montserrat', Arial, sans-serif;

  --max-w:       1440px;
  --section-pad: 100px;

  --radius:  0px;
  --trans:   .3s ease;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--black);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Typography ──────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
}

h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p  { max-width: 72ch; }

.display-text {
  font-family: var(--font-body);
  font-size: clamp(28px, 4vw, 45px);
  font-weight: 300;
  line-height: 1.2em;
  color: var(--black);
}

/* ── Layout ──────────────────────────────────────────────── */
.container {
  width: 90%;
  max-width: var(--max-w);
  margin: 0 auto;
}

.section { padding: var(--section-pad) 0; }
.section-sm { padding: 60px 0; }

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

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.gap-1        { gap: 1rem; }
.gap-2        { gap: 2rem; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 10px 35px;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0;
  border-width: 2px;
  border-style: solid;
  transition: all var(--trans);
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--white);
  color: var(--accent);
  border-color: var(--white);
}

.btn-dark {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn-dark:hover {
  background: var(--black);
  color: var(--white);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--black);
}

.btn-outline {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn-outline:hover {
  background: var(--black);
  color: var(--white);
}

.btn-sm { padding: 7px 20px; font-size: 14px; }

/* ── Divider ─────────────────────────────────────────────── */
.divider {
  width: 48px; height: 3px;
  background: var(--accent);
  margin: 1.25rem 0 2rem;
}
.divider-center { margin: 1.25rem auto 2rem; }
.divider-white  { background: var(--white); }

.label {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
}

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  transition: background var(--trans), box-shadow var(--trans);
}

.site-header.scrolled {
  background: rgba(0,0,0,.92);
  box-shadow: 0 1px 12px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.site-header.transparent { background: transparent; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: var(--max-w);
  margin: 0 auto;
  height: 80px;
  transition: height .3s ease;
}
.site-header.scrolled .header-inner { height: 50px; }

/* Logo */
.logo { display: flex; align-items: center; }
.logo-full {
  height: 42px;
  width: auto;
  display: block;
  transition: height .3s ease;
}
.logo-signet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -14.5px);
  width: 20px;
  height: 29px;
  display: none;
  z-index: 99999999;
}
.site-header.scrolled .logo-full   { display: none; }
.site-header.scrolled .logo-signet { display: block; }

/* ── Burger toggle (always visible) ─────────────────────── */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  background: transparent;
  border: none;
  z-index: 950;
  transition: opacity var(--trans);
}
.nav-toggle:hover { opacity: .75; }

.burger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 0;
  transition: background var(--trans), transform .35s cubic-bezier(.23,1,.32,1), opacity .25s;
  transform-origin: center;
}
.site-header.scrolled .burger-bar { background: var(--white); }

/* X state when nav is open */
.nav-toggle.is-open .burger-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open .burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open .burger-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* Keep bars white when overlay is open regardless of scroll */
.nav-toggle.is-open .burger-bar { background: var(--white); }

/* ── Fullscreen nav overlay ──────────────────────────────── */
.fs-nav {
  position: fixed;
  inset: 0;
  z-index: 910;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 80px 5% 40px;

  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity .4s cubic-bezier(.23,1,.32,1),
              transform .4s cubic-bezier(.23,1,.32,1);
}
/* Remove hidden when JS adds .is-open */
.fs-nav:not([hidden]) {
  opacity: 0;
  pointer-events: none;
}
.fs-nav.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Logo inside overlay */
.fs-nav__logo {
  position: absolute;
  top: 24px; left: 5%;
  display: flex;
  align-items: center;
}
.fs-nav__logo img { height: 36px; width: auto; }

/* Close button (X) */
.fs-nav__close {
  position: absolute;
  top: 18px; right: 5%;
  width: 44px; height: 44px;
  cursor: pointer;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .7;
  transition: opacity var(--trans), transform var(--trans);
}
.fs-nav__close:hover { opacity: 1; transform: rotate(90deg); }
.fs-nav__close span {
  position: absolute;
  display: block;
  width: 28px;
  height: 2px;
  background: var(--white);
}
.fs-nav__close span:nth-child(1) { transform: rotate(45deg); }
.fs-nav__close span:nth-child(2) { transform: rotate(-45deg); }

/* Nav links */
.fs-nav__links {
  width: 60%;
  max-width: 700px;
}
.fs-nav__links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.fs-nav__links li {
  border-top: 1px solid rgba(255,255,255,.15);
  transform: translateY(20px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.23,1,.32,1),
              opacity   .5s cubic-bezier(.23,1,.32,1);
}
.fs-nav.is-open .fs-nav__links li { transform: translateY(0); opacity: 1; }
.fs-nav__links li:nth-child(1) { transition-delay: .05s; }
.fs-nav__links li:nth-child(2) { transition-delay: .10s; }
.fs-nav__links li:nth-child(3) { transition-delay: .15s; }
.fs-nav__links li:nth-child(4) { transition-delay: .20s; }
.fs-nav__links li:nth-child(5) { transition-delay: .25s; }
.fs-nav__links li:nth-child(6) { transition-delay: .30s; }
.fs-nav__links li:nth-child(7) { transition-delay: .35s; }
.fs-nav__links li:nth-child(8) { transition-delay: .40s; }
.fs-nav__links li:nth-child(9) { transition-delay: .45s; }

.fs-nav__links a {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--white);
  letter-spacing: .04em;
  padding: .65rem 0;
  text-transform: uppercase;
  transition: opacity .2s;
}
.fs-nav__links a:hover { opacity: .6; }
.fs-nav__links a.active { font-weight: 700; }

/* Bottom bar */
.fs-nav__footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 5%;
  border-top: 1px solid rgba(255,255,255,.08);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .5s .5s cubic-bezier(.23,1,.32,1),
              opacity   .5s .5s cubic-bezier(.23,1,.32,1);
}
.fs-nav.is-open .fs-nav__footer { transform: translateY(0); opacity: 1; }
.fs-nav__footer-left {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .08em;
}
.fs-nav__footer-left a { color: rgba(255,255,255,.4); transition: color var(--trans); }
.fs-nav__footer-left a:hover { color: var(--white); }
.fs-nav__footer-left span { color: rgba(255,255,255,.15); }
.fs-nav__footer-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.fs-nav__footer-right a { opacity: .5; transition: opacity var(--trans); display: flex; align-items: center; }
.fs-nav__footer-right a:hover { opacity: 1; }
.fs-nav__footer-right img { height: 50px; width: auto; filter: brightness(0) invert(1); }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}

/* Video background */
.hero-video-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  object-fit: cover;
  object-position: center;
  opacity: .75;
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.55) 60%,
    rgba(0,0,0,.65) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 120px 5% 80px;
  max-width: 80%;
  margin: 0 auto;
  width: 100%;
}

/* Typed word + cursor */
.hero-typed {
  color: var(--white);
  display: inline;
  white-space: nowrap;
  font-size: 3em;
  line-height: 1;
}
.hero-typed::after {
  content: '|';
  color: var(--white);
  animation: blink .7s step-end infinite;
  margin-left: 2px;
  font-weight: 300;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.85);
  letter-spacing: .1em;
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeUp .8s .2s forwards;
}

.hero h1 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 2rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeUp .8s .4s forwards;
}

.hero h1 strong {
  font-weight: 700;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--white);
  margin: 0 auto 2.5rem;
  max-width: 800px;
  line-height: 1.4;
  opacity: 0;
  animation: fadeUp .8s .5s forwards;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .8s .7s forwards;
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.5);
  animation: bounce 2s infinite;
}
.hero-scroll svg { display: block; width: 48px; height: 48px; }

/* ── Page Hero (sub-pages) ───────────────────────────────── */
.page-hero {
  padding: 140px 5% 80px;
  background: var(--black);
  position: relative;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); font-weight: 300; }
.page-hero p  { color: rgba(255,255,255,.65); font-size: 1rem; margin-top: .75rem; }

/* ── Feature Sections (Homepage) ────────────────────────── */
.feature-section {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.feature-section-inner {
  width: 90%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
}

.feature-section.reverse .feature-section-inner {
  direction: rtl;
}
.feature-section.reverse .feature-section-inner > * {
  direction: ltr;
}

.feature-text {}
.feature-text .display-text { margin-bottom: 1.5rem; }
.feature-text p {
  font-size: 16px;
  line-height: 26px;
  color: rgba(255,255,255,.85);
  max-width: none;
  margin-bottom: 2rem;
}
.feature-text p.dark-text { color: var(--medium); }

.feature-animation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.anim-stack {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.anim-stack img {
  display: block;
  width: 100%;
  height: auto;
}
.anim-stack .anim-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
}

/* ── Feature 1: centred circle layout ───────────────────── */
.feature-circle-centered {
  justify-content: center;
  position: relative;
}
.partnership-cta {
  position: absolute;
  right: 5vw;
  bottom: 5vw;
}
.circle-center-wrap {
  position: relative;
  width: min(85vh, 780px);
  margin: 0 auto;
}
.circle-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(.9rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  color: var(--black);
  pointer-events: none;
}

/* ── Partnership circle animation ───────────────────────── */
.partnership-circle { width: 100%; }
.arc-stage {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
}
.arc-half {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  will-change: transform, opacity;
}
.arc-right {
  transform: translateX(70%);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.65s ease;
}
.arc-left {
  transform: translateX(-70%);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.12s,
              opacity 0.65s ease 0.12s;
}
.partnership-circle.animated .arc-right,
.partnership-circle.animated .arc-left {
  transform: translateX(0);
  opacity: 1;
}

/* ── Management circle animation (4 quadrants) ──────────── */
.management-circle {
  width: 100%;
}
.circle-stage {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* square */
  overflow: hidden;
}
.circle-q {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  will-change: transform, opacity;
}
.q-top    { transform: translateY(-70%); opacity: 0;
            transition: transform 1.0s cubic-bezier(.25,.46,.45,.94),
                        opacity .6s ease; }
.q-right  { transform: translateX(70%);  opacity: 0;
            transition: transform 1.0s cubic-bezier(.25,.46,.45,.94) .07s,
                        opacity .6s ease .07s; }
.q-bottom { transform: translateY(70%);  opacity: 0;
            transition: transform 1.0s cubic-bezier(.25,.46,.45,.94) .14s,
                        opacity .6s ease .14s; }
.q-left   { transform: translateX(-70%); opacity: 0;
            transition: transform 1.0s cubic-bezier(.25,.46,.45,.94) .21s,
                        opacity .6s ease .21s; }
.management-circle.animated .q-top,
.management-circle.animated .q-right,
.management-circle.animated .q-bottom,
.management-circle.animated .q-left {
  transform: translate(0, 0);
  opacity: 1;
}

/* ── Stats circle animation (6 spokes, clock positions) ─── */
.stats-circle {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.stats-stage {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
}
.stats-q {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  will-change: transform, opacity;
}
/* Cardinal directions */
.sq-12 { transform: translateY(-70%);            opacity: 0;
          transition: transform 1.0s cubic-bezier(.25,.46,.45,.94),
                      opacity .6s ease; }
.sq-6  { transform: translateY(70%);             opacity: 0;
          transition: transform 1.0s cubic-bezier(.25,.46,.45,.94) .05s,
                      opacity .6s ease .05s; }
/* Diagonal directions – equal total distance as cardinals */
.sq-2  { transform: translate(50%, -50%);        opacity: 0;
          transition: transform 1.0s cubic-bezier(.25,.46,.45,.94) .1s,
                      opacity .6s ease .1s; }
.sq-4  { transform: translate(50%, 50%);         opacity: 0;
          transition: transform 1.0s cubic-bezier(.25,.46,.45,.94) .15s,
                      opacity .6s ease .15s; }
.sq-8  { transform: translate(-50%, 50%);        opacity: 0;
          transition: transform 1.0s cubic-bezier(.25,.46,.45,.94) .2s,
                      opacity .6s ease .2s; }
.sq-10 { transform: translate(-50%, -50%);       opacity: 0;
          transition: transform 1.0s cubic-bezier(.25,.46,.45,.94) .25s,
                      opacity .6s ease .25s; }
.stats-circle.animated .sq-12,
.stats-circle.animated .sq-2,
.stats-circle.animated .sq-4,
.stats-circle.animated .sq-6,
.stats-circle.animated .sq-8,
.stats-circle.animated .sq-10 {
  transform: translate(0, 0);
  opacity: 1;
}

/* ── Feature 3: Fundiert Aufgestellt stats grid ─────────── */
.fundiert-section {
  align-items: stretch;
  position: relative;
}
.fundiert-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 5vw;
  gap: 4rem;
}
.fundiert-eyebrow {
  font-family: var(--font-head);
  font-size: clamp(.65rem, .9vw, .8rem);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.fundiert-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.1);
  border-left: 1px solid rgba(255,255,255,.1);
}
.fundiert-stat {
  padding: clamp(2rem, 5vh, 4rem) clamp(2rem, 4vw, 5rem);
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fundiert-number {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.fundiert-label {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(.7rem, 1vw, .9rem);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* Feature section backgrounds */
.feature-section.bg-white  { background: var(--white); }
.feature-section.bg-dark   { background: var(--black); }
.feature-section.bg-light  { background: var(--bg-light); }

.feature-section.bg-dark .display-text { color: var(--white); }
.feature-section.bg-dark .feature-text p { color: rgba(255,255,255,.75); }

/* ── Old feature cards (kept for other pages) ────────────── */
.features { padding: var(--section-pad) 0; background: var(--white); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.feature-card {
  background: var(--white);
  padding: 3rem 2rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background var(--trans);
  position: relative;
}
.feature-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans);
}
.feature-card:hover { background: #f9f9f9; }
.feature-card:hover::after { transform: scaleX(1); }
.feature-icon {
  width: 56px; height: 56px;
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
  transition: background var(--trans);
}
.feature-icon svg { width: 26px; height: 26px; stroke: var(--accent); }
.feature-card:hover .feature-icon { background: var(--accent); }
.feature-card:hover .feature-icon svg { stroke: var(--white); }
.feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.feature-card p  { font-size: 14px; color: var(--medium); }

/* ── Section Intro ───────────────────────────────────────── */
.section-intro { max-width: 680px; }
.section-intro.center { margin: 0 auto; text-align: center; }
.section-intro.center .divider { margin: 1.25rem auto 2rem; }

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 32px rgba(0,0,0,.1);
}
.card-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f0f0f0;
}
.card-img img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: 1.5rem; }
.card-meta { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }
.tag {
  font-family: var(--font-head);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  background: var(--accent-light);
  color: var(--accent);
}
.tag-gray { background: #f0f0f0; color: var(--medium); }
.card-title { font-size: 1.05rem; margin-bottom: .4rem; }
.card-title a:hover { color: var(--accent); }
.card-excerpt { font-size: 14px; color: var(--medium); margin-bottom: 1rem; }
.card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
  font-size: 13px;
  color: var(--light);
}

/* ── Project Card ────────────────────────────────────────── */
.project-card {
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans);
}
.project-card:hover { transform: translateY(-4px); box-shadow: 0 6px 32px rgba(0,0,0,.1); }
.project-card-img { aspect-ratio: 4/3; background: var(--black); position: relative; overflow: hidden; }
.project-card-img img { width:100%; height:100%; object-fit:cover; transition: transform .5s; opacity:.85; }
.project-card:hover .project-card-img img { transform: scale(1.05); opacity: 1; }
.project-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%);
}
.project-card-placeholder {
  width:100%; height:100%;
  background: #1a1a1a;
  display:flex; align-items:center; justify-content:center;
}
.project-card-placeholder svg { width:48px; height:48px; stroke: rgba(255,255,255,.2); }
.project-card-body { padding: 1.25rem 1.5rem; }
.project-card h3 { font-size: 1rem; margin-bottom: .4rem; }
.project-tags { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.6rem; }
.project-location { font-size: 13px; color: var(--light); display:flex; align-items:center; gap:.3rem; }
.project-location svg { width:13px; height:13px; }

/* ── News List ───────────────────────────────────────────── */
.news-list { display: flex; flex-direction: column; }
.news-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 1.5rem 2rem;
  align-items: start;
  padding: 2rem 0;
  border-bottom: 1px solid #eee;
  transition: background var(--trans);
}
.news-item:first-child { border-top: 1px solid #eee; }
.news-date {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--light);
  letter-spacing: .03em;
  padding-top: .2rem;
}
.news-title { font-size: 1rem; margin-bottom: .4rem; font-weight: 700; }
.news-title a:hover { color: var(--accent); }
.news-excerpt { font-size: 14px; color: var(--medium); }
.news-arrow { color: var(--light); transition: color var(--trans), transform var(--trans); padding-top: .2rem; }
.news-item:hover .news-arrow { color: var(--accent); transform: translateX(4px); }

/* ── Stats ───────────────────────────────────────────────── */
.stats { background: var(--black); padding: var(--section-pad) 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 3rem;
  text-align: center;
}
.stat-number {
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: .5rem;
}
.stat-number span { color: var(--accent); }
.stat-label {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Parallax / Teaser Sections ──────────────────────────── */
.parallax-section {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.parallax-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.parallax-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
}
.parallax-title {
  position: absolute;
  top: 5vw;
  left: 5vw;
  z-index: 1;
  color: var(--white);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin: 0;
}
.parallax-signet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: clamp(60px, 10vw, 140px);
  opacity: .9;
}

/* ── Three Box Section ────────────────────────────────────── */
.three-box-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.box-item {
  padding: 60px 40px;
  background: #f9f9f9;
  border: 1px solid #eee;
  text-align: center;
  transition: background var(--trans);
}
.box-item:nth-child(odd) { background: var(--white); }
.box-item:hover { background: #f0f0f0; }
.box-item h3 {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--black);
}
.box-item .box-num {
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: .5rem;
}
.box-item p { font-size: 14px; color: var(--medium); max-width: 30ch; margin: 0 auto .75rem; }

/* ── CTA Band ─────────────────────────────────────────────── */
.cta-band { background: var(--accent); padding: 80px 0; }
.cta-band-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.cta-band h2 { color: var(--white); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; }
.cta-band p  { color: rgba(255,255,255,.8); margin-top: .5rem; font-size: 16px; }
.cta-band .btn-outline-white { border-color: var(--white); }
.cta-band .btn-outline-white:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* ── Karriere / Kontakt Boxen ─────────────────────────────── */
.kk-section {
  background: var(--white);
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.75rem);
  padding: var(--section-pad) 20px;
}

.kk-box {
  flex: 0 1 420px;
  max-width: 420px;
  aspect-ratio: 420 / 292;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: transparent;
  color: var(--black);
  border: 1px solid var(--black);
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Höhere Spezifität als .reveal, damit dessen transition den Hover nicht überschreibt */
.kk-section .kk-box {
  transition: opacity .7s ease, transform .7s ease,
              background-color var(--trans), color var(--trans);
}

.kk-box:hover,
.kk-box:focus-visible {
  background: var(--black);
  color: var(--white);
}

@media (max-width: 768px) {
  .kk-box { flex-basis: 100%; max-width: 420px; }
}

/* ── DGNB Section ─────────────────────────────────────────── */
.dgnb-section {
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 5rem 0;
}
.dgnb-label {
  font-family: var(--font-head);
  font-size: clamp(.65rem, .9vw, .8rem);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--medium);
}
.dgnb-logo {
  height: 100px;
  width: auto;
}

/* ── Service / Promise ────────────────────────────────────── */
/* ── Versprechen Page ─────────────────────────────────────── */
.vp-hero {
  position: relative;
  width: 100vw;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vp-hero-signet {
  width: clamp(40px, 6vw, 80px);
  opacity: .9;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}
.vp-hero-title {
  font-family: var(--font-head);
  font-size: clamp(.7rem, 1.2vw, 1rem);
  font-weight: 400;
  letter-spacing: .4em;
  color: var(--white);
  position: relative;
  z-index: 1;
}
/* B (Signet) und Seitentitel fahren beim Laden gleichzeitig von oben herein. */
.vp-hero-signet { animation: vp-hero-drop-signet 1s cubic-bezier(.22, .61, .36, 1) both; }
.vp-hero-title  { animation: vp-hero-drop-title  1s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes vp-hero-drop-signet {
  from { opacity: 0; transform: translateY(-70px); }
  to   { opacity: .9; transform: translateY(0); }
}
@keyframes vp-hero-drop-title {
  from { opacity: 0; transform: translateY(-70px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vp-hero-signet, .vp-hero-title { animation: none; }
}
.vp-intro {
  max-width: 900px;
  margin: 0 auto;
  padding: 6rem 5% 4rem;
  text-align: left;
  font-size: 15px;
  line-height: 1.85;
  color: var(--black);
}
/* Abstand zwischen mehreren Absaetzen im Intro. Der globale Reset (*{margin:0})
   nimmt <p> jeden Abstand, dadurch liefen mehrere Absaetze sonst ineinander.
   p + p -> Abstand nur ZWISCHEN Absaetzen, nie vor dem ersten oder nach dem letzten. */
.vp-intro p + p { margin-top: 1.5em; }
/* Intro faehrt beim Erscheinen von unten herein (JS setzt .vp-reveal, Observer
   .is-in). Echte Keyframe-Animation statt Transition -> laeuft immer komplett
   ab, auch wenn der Intro beim Oeffnen schon im Bild ist. */
.vp-intro.vp-reveal { opacity: 0; will-change: opacity, transform; }
.vp-intro.vp-reveal.is-in {
  animation: vp-intro-up 1.2s cubic-bezier(.16, .7, .3, 1) both;
}
@keyframes vp-intro-up {
  from { opacity: 0; transform: translateY(130px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vp-intro.vp-reveal { opacity: 1; }
  .vp-intro.vp-reveal.is-in { animation: none; }
}
/* Versprechen-Sektionen: Inhalt jeder Sektion faehrt beim Hinscrollen von
   unten herein (die durchgehende Mittellinie bleibt stehen). */
.vp-item.vp-reveal .vp-content > * { opacity: 0; will-change: opacity, transform; }
.vp-item.vp-reveal.is-in .vp-content > * {
  animation: vp-intro-up 1.1s cubic-bezier(.16, .7, .3, 1) both;
}
/* zuerst der Titel (h2), dann zeitverzoegert die Texte/Buttons darunter */
.vp-item.vp-reveal.is-in .vp-content > h2 ~ * { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .vp-item.vp-reveal .vp-content > * { opacity: 1; }
  .vp-item.vp-reveal.is-in .vp-content > * { animation: none; }
}
/* Versprechen & Über uns: Fließtext insgesamt etwas größer (Intro passend zum Body). */
.page-ueber-uns .vp-intro {
  width: 92%;
  max-width: 1200px;
  padding-left: 0;
  padding-right: 0;
  font-size: clamp(19px, 2.05vw, 27px);
  font-weight: 300;
  text-align: justify;
}
/* Versprechen: Text im Stil der Originalseite (Arial, leicht, groß, Blocksatz, breit) */
.page-versprechen .vp-intro {
  width: 80%;
  max-width: 1080px;
  padding-left: 0;
  padding-right: 0;
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  font-size: 27px;
  line-height: 48px;
  text-align: justify;
}
/* Projektgalerie: Intro 1:1 wie im Original / wie Versprechen (80% breit,
   max 1080, Arial 27px leicht, Blocksatz). */
.page-projektgalerie .vp-intro {
  width: 80%;
  max-width: 1080px;
  padding-left: 0;
  padding-right: 0;
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  font-size: 27px;
  line-height: 48px;
  text-align: justify;
}
/* Nachhaltigkeit & Karriere & Kontakt: Intro wie die anderen Seiten (80%, 27px). */
.page-nachhaltigkeit .vp-intro,
.page-karriere .vp-intro,
.page-kontakt .vp-intro {
  width: 80%;
  max-width: 1080px;
  padding-left: 0;
  padding-right: 0;
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  font-size: 27px;
  line-height: 48px;
  text-align: justify;
}
.vp-sections {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
}
.vp-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* Durchgehende vertikale Mittellinie: pro Block gezeichnet, die Blöcke
   grenzen direkt aneinander und ergeben so eine ununterbrochene Linie */
.vp-item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e0e0e0;
}
/* Der Text hat einen schmalen Gutter zur Mittellinie, ABER die Titel-Linie
   (border-bottom der h2) reicht bis an die Mittellinie – wie im Original.
   Deshalb liegt der Gutter auf den Text-Elementen, nicht auf .vp-content:
   so füllt die .vp-content-Box die halbe Spalte bis zur Mitte und die
   Überschriften-Linie berührt die Mittellinie. */
.vp-item.vp-right .vp-content { grid-column: 2; }
.vp-item.vp-left  .vp-content { grid-column: 1; }
.vp-content {
  padding: 5rem 0;
}
.vp-item.vp-right .vp-content > * { padding-left: clamp(1.5rem, 4vw, 3.25rem); }
.vp-item.vp-left  .vp-content > * { padding-right: clamp(1.5rem, 4vw, 3.25rem); }
/* Button: Gutter über margin statt padding, sonst würde der Rahmen innen
   um den Gutter mitwachsen statt den Button eng zu umschließen. */
.vp-item.vp-right .vp-content > .vp-cta { padding-left: 34px; margin-left: clamp(1.5rem, 4vw, 3.25rem); }
.vp-item.vp-left  .vp-content > .vp-cta { padding-right: 34px; margin-right: clamp(1.5rem, 4vw, 3.25rem); }
.vp-content h2 {
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-size: clamp(23px, 2.9vw, 34px);
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.28;
  color: var(--black);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 2rem;
}
.vp-content p {
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--black);
  text-align: justify;   /* Blocksatz wie im Original */
}
.vp-cta {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  /* Rahmen einmal komplett um den Button – wie im Original (.et_pb_button) */
  border: 2px solid var(--black);
  padding: 11px 34px;
  background: transparent;
  transition: background .2s ease, color .2s ease;
}
.vp-cta:hover { background: var(--black); color: #fff; }

/* ── Leistungsfelder Page ─────────────────────────────────── */
/* Intro 1:1 wie Original (Arial 27px, leicht) – nur auf dieser Seite, da
   .vp-intro auf mehreren Seiten genutzt wird. */
.page-leistungsfelder .vp-intro {
  width: 92%;
  max-width: 1200px;
  /* mehr Luft nach dem Hero (oben) und vor dem Kästen-Grid (unten) */
  padding: clamp(5rem, 8vw, 9rem) 0 clamp(3.5rem, 5.5vw, 6rem);
  font-size: clamp(19px, 2.05vw, 27px);
  font-weight: 300;
  line-height: 1.78;
  text-align: justify;
}
/* Intro-Text auf die vollen 900px bringen – bündig mit Kästen/Service darunter
   (Basis-.vp-intro hat 5% Seiten-Padding; auf Mobil bleibt der Abstand erhalten). */
@media (min-width: 769px) {
  .page-leistungsfelder .vp-intro { padding-left: 0; padding-right: 0; }
}
/* Globale Regel p{max-width:72ch} aufheben: Intro-Text soll die volle Breite
   der Box-Section / Service-Blöcke füllen (wie im Original). */
.page-leistungsfelder .vp-intro p { max-width: none; }
.lf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* mehr Abstand zwischen den Boxen (weißer Grund dazwischen) */
  gap: clamp(12px, 1.8vw, 22px);
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
  /* weiß, damit beim Reveal die grauen Boxen sichtbar über weißen Grund
     in ihre Zellen gleiten */
  background: #fff;
}
.lf-box {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  /* eigener Hintergrund, damit beim Reveal die ganze Box (nicht nur der Text)
     als Einheit von unten hereinfährt */
  background: #e1e1e1;
}
.lf-box p {
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.5;
  font-weight: 600;
  color: #646464;
  margin: 0;
}
/* Zeilenweises Einblenden: erste Zeile zuerst, dann jede weitere Zeile
   nacheinander. Nur aktiv, wenn JS die Klasse .lf-anim setzt (No-JS-sicher). */
.lf-grid.lf-anim .lf-box {
  opacity: 0;
  transform: translateY(95px);
  /* laengere, langsamere Bewegung; opacity zuerst, damit man die graue Box die
     ganze Strecke nach oben in die Zelle gleiten sieht */
  transition: opacity .7s ease, transform 1.5s cubic-bezier(.16,.7,.3,1);
  will-change: opacity, transform;
}
.lf-grid.lf-anim.is-in .lf-box {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .lf-grid.lf-anim .lf-box {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.lf-service {
  width: 92%;
  max-width: 1200px;
  /* Abstand OBERHALB jeder Sektion: sorgt für Grid→Asset und die Trennung
     zwischen Asset / Bau / Property / Facility (jede Sektion = eigener Block). */
  margin: clamp(5rem, 10vw, 11rem) auto 0;
}
.lf-service:last-of-type {
  margin-bottom: clamp(5rem, 10vw, 11rem);   /* großzügiger Abstand zum Footer */
}
.lf-service-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  align-items: start;   /* Kreis oben auf Höhe der Überschrift, Text fließt darunter */
}
.lf-service.lf-reverse .lf-service-inner {
  grid-template-columns: 1.6fr 1fr;
}
.lf-circle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.lf-circle-img {
  width: clamp(110px, 14vw, 190px);
  height: auto;
  display: block;
}
.lf-service-text {
  padding: clamp(3rem, 6vh, 5rem) clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lf-service-text h2 {
  font-family: var(--font-body);   /* Arial wie im Original (schmaler, einzeilig) */
  font-size: clamp(26px, 2.7vw, 35px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: normal;
  margin-bottom: 1.75rem;
}
.lf-service-text p {
  font-size: clamp(15px, 1.35vw, 17px);
  font-weight: 500;
  line-height: 1.76;
  text-align: justify;
  color: var(--black);
}

/* ── Karriere ─────────────────────────────────────────────── */
.kar-jobs {
  width: 80%;                 /* gleiche Breite wie der Intro-Text oben */
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--white);
}
.kar-job {
  background: #f4f4f4;
  transition: background .2s ease;
}
.kar-job:has(.kar-job-header[aria-expanded="true"]) { background: #f0f0f0; }

.kar-job-header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.kar-job-headtext {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.kar-job-title {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  color: var(--black);
  line-height: 1.35;
}
/* Kurztext bleibt auch im zugeklappten Zustand sichtbar */
.kar-job-excerpt {
  font-size: 13px;
  line-height: 1.75;
  color: #444;
  font-weight: 400;
}
.kar-job-icon {
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--black);
  line-height: 1;
  flex-shrink: 0;
}

.kar-job-body {
  padding: 0 clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* MUSS nach der display-Regel stehen: sonst gewinnt display:flex gegen das
   hidden-Attribut und das Akkordeon bleibt dauerhaft offen. */
.kar-job-body[hidden] { display: none; }
.kar-job-section {
  border-top: 1px solid #d8d8d8;
  padding-top: 1.75rem;
}
.kar-job-subheading {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--black);
  margin: 0 0 1rem;
}
.kar-job-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.kar-job-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 13px;
  line-height: 1.8;
  color: #333;
}
.kar-job-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--black);
}
.kar-job-closing {
  border-top: 1px solid #d8d8d8;
  padding-top: 1.75rem;
  font-size: 13px;
  line-height: 1.8;
  font-weight: 700;
  color: var(--black);
  margin: 0;
}

.kar-apply-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white);
}
.kar-apply-heading {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--black);
  text-align: center;
  width: 80%;                 /* gleiche Breite wie der Intro-Text / die Jobs */
  max-width: 1080px;
  margin: 0 0 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e0e0e0;
}
.kar-apply-sub {
  font-size: 14px;
  line-height: 1.85;
  color: #444;
  text-align: center;
  max-width: 680px;
  margin: 0 0 3.5rem;
}

.kar-form {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* Vor- und Nachname teilen sich eine Zeile */
.kar-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.kar-field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.kar-label {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
}
.kar-label sup { color: var(--medium); }

.kar-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--black);
  background: #fafafa;
  border: 1px solid #d8d8d8;
  border-radius: 0;
  padding: .85rem 1rem;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.kar-input::placeholder { color: #999; }
.kar-input:hover { border-color: #b0b0b0; }
/* deutlich sichtbarer Fokus - wichtig fuer Tastaturbedienung */
.kar-input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.kar-select { cursor: pointer; }
.kar-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.7;
}

/* Datei-Auswahl mit eigenem Schalter statt des nativen Buttons */
.kar-filewrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: #fafafa;
  border: 1px dashed #c8c8c8;
  padding: 1rem;
  transition: border-color .2s ease, background .2s ease;
}
.kar-filewrap:hover { border-color: #999; background: var(--white); }
/* Input bleibt bedienbar und fokussierbar, ist aber unsichtbar */
.kar-file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.kar-file-button {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--black);
  padding: .65rem 1.25rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.kar-file-button:hover { background: var(--black); color: var(--white); }
/* Fokus des versteckten Inputs am Schalter sichtbar machen */
.kar-file-input:focus-visible + .kar-file-button {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
.kar-file-name {
  font-size: 13px;
  color: #666;
}

.kar-field-check { margin-top: .5rem; }
.kar-check-label {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  cursor: pointer;
}
.kar-check-label input[type="checkbox"] {
  margin-top: .25rem;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--black);
  cursor: pointer;
}
/* normale Schreibweise statt Grossbuchstaben - als Fliesstext deutlich lesbarer */
.kar-check-label span {
  font-size: 12px;
  line-height: 1.7;
  color: #555;
}
.kar-check-label a { color: var(--black); text-decoration: underline; }

.kar-submit {
  align-self: flex-start;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--black);
  background: transparent;
  border: 1px solid var(--black);
  padding: 1rem 2.5rem;
  margin-top: 1rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.kar-submit:hover { background: var(--black); color: var(--white); }

/* ── Nachhaltigkeit ───────────────────────────────────────── */
/* ── SDG-Slideshow ────────────────────────────────────────────
   Der Track ist 680% breit = 34 Kacheln bei 5 sichtbaren.
   Jede Kachel misst 100/34 des Tracks, also exakt ein Fuenftel
   der sichtbaren Flaeche. Die Animation laeuft bis -50%, das
   entspricht genau den ersten 17 Kacheln -> nahtloser Rundlauf. */
.nk-sdg-slider {
  --gap: 16px;                 /* Abstand zwischen zwei Kacheln */
  overflow: hidden;
  width: 80%;                  /* gleiche Breite wie die Intro-Texte */
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 0;
  background: var(--white);
}
.nk-sdg-track {
  display: flex;
  width: 680%;
  animation: nk-sdg-scroll 60s linear infinite;
}
/* beim Draufzeigen anhalten, damit ein Ziel in Ruhe angesehen werden kann */
.nk-sdg-slider:hover .nk-sdg-track { animation-play-state: paused; }
/* Kein gap! Der Platzbedarf je Kachel muss exakt 100/34 des Tracks bleiben,
   sonst passt die 50%-Verschiebung nicht mehr und der Rundlauf springt.
   Deshalb: Breite um den Abstand verringern, Abstand als margin wieder zugeben. */
.nk-sdg-tile {
  flex: 0 0 calc(100% / 34 - var(--gap));
  width: calc(100% / 34 - var(--gap));
  margin: 0 calc(var(--gap) / 2);
  height: auto;
  display: block;
}
@keyframes nk-sdg-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Wer Bewegung reduziert haben will, scrollt die Reihe selbst */
@media (prefers-reduced-motion: reduce) {
  .nk-sdg-track { animation: none; }
  .nk-sdg-slider { overflow-x: auto; }
}

/* Zickzack wie auf Versprechen/Ueber uns: linke Spalte Schritte,
   rechte Spalte der Beitrags-Text, dazwischen eine durchgehende Linie. */
.nk-zigzag {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* nicht breiter als der Intro-Text darüber (gleiche 80% / max 1080) */
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
}
.nk-zigzag::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e0e0e0;
}
/* Linke Schritte-Spalte bleibt beim Scrollen stehen, während der lange Text
   rechts durchscrollt (Header ist ~50px hoch fixiert). */
.nk-col-left  { grid-column: 1; position: sticky; top: 5rem; align-self: start; }
.nk-col-right { grid-column: 2; }
/* Gutter zur Mittellinie auf die Kinder -> Inhalt schmal an der Mitte; die
   Beitrag-Überschrift-Linie reicht dadurch bis an die Mittellinie. */
.nk-col-left  > * { padding-right: clamp(1.5rem, 4vw, 3.25rem); }
.nk-col-right > * { padding-left:  clamp(1.5rem, 4vw, 3.25rem); }

.nk-steps {
  padding: clamp(3rem, 6vh, 5rem) 0;
}
.nk-steps-intro {
  font-size: 17px;
  line-height: 1.75;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 2.5rem;
  /* Linie bis zur Mittellinie (wie die Beitrag-Überschrift gegenüber) */
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e0e0e0;
}
.nk-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  counter-reset: steps;
}
.nk-steps-list li {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  font-weight: 400;
  color: var(--black);
  line-height: 1.3;
  counter-increment: steps;
}
.nk-steps-list li::before {
  content: counter(steps) '. ';
  font-weight: 700;
}

/* Beitrags-Block: weiss mit schwarzer Schrift. Grosser oberer Abstand -> der
   lange Text startet deutlich weiter unten (wie im Original), waehrend die
   Schritte links dank position:sticky oben stehen bleiben. */
.nk-beitrag {
  padding: clamp(10rem, 60vh, 40rem) 0 clamp(3rem, 6vh, 5rem);
}
.nk-beitrag-heading {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.75;
  margin: 0 0 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e0e0e0;
}
.nk-beitrag-heading strong { font-weight: 700; }
.nk-beitrag-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.nk-beitrag-body p {
  font-size: 17px;
  line-height: 1.75;
  text-align: justify;
  color: var(--black);
  margin: 0;
}
/* "Unser Ansatz"-Leitsatz oben im Beitragsblock */
.nk-beitrag-body .nk-ansatz {
  font-size: 19px;
  line-height: 1.6;
  font-weight: 400;
  text-align: left;
  color: var(--black);
}
.nk-beitrag-body .nk-ansatz strong { font-weight: 700; }
/* Roboter-Bild + Bildunterschrift (ersetzt das frühere Förderlogo) */
.nk-beitrag-robot {
  margin: 2.5rem 0 0;
}
.nk-robot-img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 4px;
}
.nk-robot-caption {
  margin-top: 1rem;
  font-size: 17px;
  line-height: 1.75;
  text-align: justify;
  color: var(--black);
}
/* GEG-Notiz unter den drei Schritten – gleiche Groesse/Farbe wie der uebrige
   Fliesstext in der linken Spalte (wie .nk-steps-intro). */
.nk-steps-note {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: 1.4;
  color: var(--black);
  margin: 2.5rem 0 0;
}

.nk-esg-section {
  padding: clamp(4rem, 8vw, 7rem) 5vw;
  background: var(--white);
  text-align: center;
}
.nk-esg-heading {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--black);
  max-width: 900px;
  margin: 0 auto 4rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e0e0e0;
}
.nk-esg-heading strong { font-weight: 700; }
.nk-esg-circles {
  display: flex;
  justify-content: center;
  gap: 3vw;
  flex-wrap: wrap;
}
.nk-esg-item {
  flex: 0 0 auto;
  width: clamp(200px, 28vw, 380px);
}
.nk-esg-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Newsroom ─────────────────────────────────────────────── */
.nr-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* gleiche zentrierte, gedeckelte Breite wie Versprechen/Über Uns */
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
}
/* Durchgehende vertikale Mittellinie über die gesamte Liste */
.nr-grid::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e0e0e0;
}
/* Zickzack: ungerade Artikel rechts, gerade links – der Textblock liegt
   jeweils nah an der Mittellinie, der Weissraum faellt nach aussen. */
.nr-article {
  /* --row kommt aus dem PHP: jeder Artikel bekommt eine eigene Zeile,
     sonst ruecken ein linker und ein rechter nebeneinander */
  grid-row: var(--row);
  padding: clamp(3rem, 7vh, 5.5rem) 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* Artikel füllt seine halbe Spalte bis zur Mittellinie; der Gutter zur Mitte
   liegt auf den Kindern -> die Titel-Unterlinie berührt die Mittellinie. */
.nr-article.nr-right { grid-column: 2; }
.nr-article.nr-left  { grid-column: 1; }
.nr-article.nr-right > * { padding-left: clamp(1.5rem, 4vw, 3.25rem); }
.nr-article.nr-left  > * { padding-right: clamp(1.5rem, 4vw, 3.25rem); }
/* Button: Gutter über margin, damit der Rahmen den Button eng umschließt */
.nr-article.nr-right > .nr-btn { padding-left: 1.5rem; margin-left: clamp(1.5rem, 4vw, 3.25rem); }
.nr-article.nr-left  > .nr-btn { padding-right: 1.5rem; margin-right: clamp(1.5rem, 4vw, 3.25rem); }

.nr-date {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--black);
  text-transform: uppercase;
  margin: 0;
}
.nr-title {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.2;
  margin: 0;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e0e0e0;
}
/* Absaetze untereinander – enger als der Abstand der Artikel-Bausteine */
.nr-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nr-excerpt {
  font-size: 14px;
  line-height: 1.85;
  text-align: left;
  color: var(--black);
  margin: 0;
}
.nr-btn {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--black);
  text-decoration: none;
  border: 1px solid var(--black);
  padding: .8rem 1.5rem;
  align-self: flex-start;
  transition: background .2s ease, color .2s ease;
}
.nr-btn::before { content: '\2192\00a0\00a0'; }
/* mehrere benannte Quellenlinks untereinander */
.nr-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}
.nr-btn:hover { background: var(--black); color: var(--white); }
.nr-btn-dl { border-color: #666; color: #666; }
.nr-btn-dl:hover { background: #666; color: var(--white); }
.nr-btn-muted { border-color: #ccc; color: #ccc; pointer-events: none; }

/* ── News-Detail (Baukasten-Blöcke) ───────────────────────── */
.nd-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 6rem) 5%;
}
.nd-meta-date {
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--black); margin: 0;
}
.nd-meta-title {
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.4;
  color: var(--black);
  margin: .8rem 0 1.6rem; padding-bottom: 1.6rem; border-bottom: 1px solid #e0e0e0;
}
.nd-block { margin: 1.6rem 0; }
.nd-image img { width: 100%; display: block; }
.nd-caption { font-size: 12px; color: #999; text-align: right; margin-top: .45rem; }
.nd-heading {
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin: 2.4rem 0 1rem;
}
.nd-text { font-size: 15px; line-height: 1.85; text-align: justify; color: var(--black); }
.nd-btnwrap { margin: 1.8rem 0; }
.nd-ti {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin: 2.4rem 0;
}
.nd-ti-right .nd-ti-text  { order: 1; } .nd-ti-right .nd-ti-media { order: 2; }
.nd-ti-left  .nd-ti-text  { order: 2; } .nd-ti-left  .nd-ti-media { order: 1; }
.nd-ti-media img { width: 100%; display: block; }
.nd-divider { border: none; border-top: 1px solid #e0e0e0; margin: 2.8rem 0; }
/* Slideshow */
.nd-slideshow { position: relative; }
.nd-slide { display: none; margin: 0; }
.nd-slide.is-active { display: block; }
.nd-slide img { width: 100%; display: block; }
.nd-dots { display: flex; gap: .45rem; justify-content: center; margin-top: .7rem; }
.nd-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--black); background: transparent; cursor: pointer; padding: 0; transition: background .2s; }
.nd-dot.is-active { background: var(--black); }
.nd-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.85); color: var(--black);
  cursor: pointer; font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.nd-nav:hover { background: #fff; }
.nd-prev { left: .6rem; } .nd-next { right: .6rem; }
@media (max-width: 768px) {
  .nd-ti { grid-template-columns: 1fr; }
  .nd-ti-left .nd-ti-text, .nd-ti-left .nd-ti-media,
  .nd-ti-right .nd-ti-text, .nd-ti-right .nd-ti-media { order: 0; }
}

/* ── Projektgalerie ───────────────────────────────────────── */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem);
}

/* Versetztes Muster, wiederholt sich alle drei Karten:
   eine breite Karte, darunter zwei quadratische nach rechts eingerückt. */
.pg-card {
  position: relative;
  margin: 0;
  perspective: 1400px;
}
.pg-card:nth-child(3n+1) { grid-column: 2 / span 7; aspect-ratio: 16 / 9; }
.pg-card:nth-child(3n+2) { grid-column: 5 / span 3; aspect-ratio: 1 / 1; }
.pg-card:nth-child(3n+3) { grid-column: 8 / span 3; aspect-ratio: 1 / 1; }

/* Drehbarer Koerper: haelt Vorder- und Rueckseite im 3D-Raum */
.pg-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .2, .2, 1);
}
/* ── Klapp-Richtung (Klasse pro .pg-card, im Admin je Bild einstellbar) ──────
   rotateX = Kippen um die waagerechte Achse (oben/unten),
   rotateY = Kippen um die senkrechte Achse (links/rechts).
   Die Rueckseite wird um dieselbe Achse um 180° vorgedreht, damit der
   Text nach der Drehung aufrecht (nicht gespiegelt) steht. */
.pg-flip-tb .pg-info,
.pg-flip-bt .pg-info { transform: rotateX(180deg); }
.pg-flip-lr .pg-info,
.pg-flip-rl .pg-info { transform: rotateY(180deg); }

.pg-flip-tb:hover .pg-flip,
.pg-flip-tb:focus-visible .pg-flip { transform: rotateX(-180deg); }  /* von oben nach unten */
.pg-flip-bt:hover .pg-flip,
.pg-flip-bt:focus-visible .pg-flip { transform: rotateX(180deg); }   /* von unten nach oben */
.pg-flip-lr:hover .pg-flip,
.pg-flip-lr:focus-visible .pg-flip { transform: rotateY(180deg); }   /* von links nach rechts */
.pg-flip-rl:hover .pg-flip,
.pg-flip-rl:focus-visible .pg-flip { transform: rotateY(-180deg); }  /* von rechts nach links */

/* Wer Bewegung reduziert haben will, bekommt den Wechsel ohne Drehanimation */
@media (prefers-reduced-motion: reduce) {
  .pg-flip { transition: none; }
}

.pg-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pg-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rueckseite: Vordrehung erfolgt pro Klapp-Richtung (siehe .pg-flip-* oben) */
.pg-info {
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.pg-info-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--white);
  margin: 0;
}
/* Trennstrich zwischen Projektname und den Eckdaten */
.pg-info-name::after {
  content: '\2013';
  display: block;
  margin: .9rem 0;
}
.pg-info-meta {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--white);
  margin: 0;
  line-height: 1.6;
}

/* ── Über Uns Page ────────────────────────────────────────── */
/* Gleiches Breiten-/Gutter-System wie Versprechen: 90% zentriert, max 1240,
   Text jeder Spalte schmal an der Mittellinie (Gutter) statt volle Hälfte. */
.ou-sections {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
}
.ou-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
}
/* Gutter zur Mittellinie liegt auf den Kindern (damit die Titel-Linie die
   Mitte berührt); linke Spalte = Gutter rechts, rechte Spalte = Gutter links. */
.ou-item > :first-child > * { padding-right: clamp(1.5rem, 4vw, 3.25rem); }
.ou-item > :last-child  > * { padding-left:  clamp(1.5rem, 4vw, 3.25rem); }
.ou-quote-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 6vh, 5rem) 0;
  border-right: 1px solid #e0e0e0;
}
.ou-item.ou-reverse .ou-quote-col {
  border-right: none;
  border-left: 1px solid #e0e0e0;
}
.ou-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: .75;
  color: #e0e0e0;
  display: block;
  user-select: none;
}
.ou-quote-block {
  margin: 0;
  width: 100%;
}
.ou-quote-text {
  font-size: 17px;
  line-height: 1.75;
  text-align: justify;
  color: #dcdcdc;   /* hellgrau wie im Original (#e1e1e1) */
  margin: .75rem 0 .25rem;
}
/* schließendes Zeichen rechtsbündig unter dem Zitat */
.ou-quote-close { text-align: right; }
.ou-quote-author {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .04em;
  color: #b0b0b0;
  margin-top: 1.25rem;
}
.ou-content-col {
  padding: clamp(3rem, 6vh, 5rem) 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* Der Gutter (oben, positionsabhängig) rückt den Text ein; die h2-Box reicht
   dagegen über die volle Spaltenbreite -> die Unterlinie berührt die Mitte. */
.ou-content-col h2 {
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-size: clamp(23px, 2.9vw, 34px);
  font-weight: 300;
  letter-spacing: normal;
  color: var(--black);
  line-height: 1.28;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e0e0e0;
}
.ou-content-col p {
  font-size: 17px;
  line-height: 1.75;
  text-align: justify;
  color: var(--black);
  margin: 0;
}
.ou-img-wrap {
  flex: 1;
  overflow: hidden;
}
.ou-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 320px;
}

/* ESG sitzt in der rechten Hälfte des gleichen 1240-Bereichs; linke Kante an
   der Mittellinie (Linie setzt die Mittellinie fort). */
.ou-esg {
  margin-left: 50%;
  width: min(45%, 620px);
  border-left: 1px solid #e0e0e0;
  padding: clamp(3rem, 6vh, 5rem) 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.ou-esg > * { padding-left: clamp(1.5rem, 4vw, 3.25rem); }
.ou-esg-heading {
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-size: clamp(23px, 2.9vw, 34px);
  font-weight: 300;
  letter-spacing: normal;
  color: var(--black);
  line-height: 1.28;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e0e0e0;
}
.ou-esg p {
  font-size: 17px;
  line-height: 1.75;
  text-align: justify;
  color: var(--black);
  max-width: 900px;
}
/* .ou-esg a deckt auch Links ab, die über den CMS-Editor eingefügt werden
   (dort wird keine Klasse gesetzt) */
.ou-esg-link,
.ou-esg a {
  color: var(--black);
  font-weight: 600;
  border-bottom: 1px solid var(--black);
  text-decoration: none;
}
.ou-esg-link:hover,
.ou-esg a:hover { opacity: .6; }

/* ── Service Areas ────────────────────────────────────────── */
.service-grid { display: grid; grid-template-columns: repeat(2,1fr); }
.service-card {
  background: var(--white);
  padding: 3.5rem;
  border: 1px solid #eee;
  position: relative;
  transition: background var(--trans);
}
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--accent);
  transition: height var(--trans);
}
.service-card:hover { background: #fafafa; }
.service-card:hover::before { height: 100%; }
.service-number {
  font-family: var(--font-body);
  font-size: 5rem;
  font-weight: 700;
  color: #eee;
  line-height: 1;
  margin-bottom: 1rem;
  transition: color var(--trans);
}
.service-card:hover .service-number { color: var(--accent-light); }
.service-card h3 { margin-bottom: 1rem; }
.service-card p  { color: var(--medium); font-size: 14px; }

/* ── Job Cards ────────────────────────────────────────────── */
.job-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 2.5rem;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.job-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  border-color: var(--accent);
}
.job-header { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.job-title  { font-size: 1.1rem; font-weight: 700; margin-bottom: .25rem; }
.job-meta   { display:flex; gap:.75rem; flex-wrap:wrap; }
.job-meta-item { display:flex; align-items:center; gap:.35rem; font-size: 13px; color:var(--medium); }
.job-meta-item svg { width:14px; height:14px; flex-shrink:0; }
.job-desc   { color:var(--medium); font-size:14px; margin-bottom:1.5rem; white-space:pre-line; }
.job-apply  {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  transition: gap var(--trans);
}
.job-apply:hover { gap:.8rem; }
.job-apply svg { width:16px; height:16px; }

/* ── Benefits ─────────────────────────────────────────────── */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1.5rem; }
.benefit-item {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  text-align: center;
}
.benefit-icon {
  width: 52px; height: 52px;
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.benefit-icon svg { width:24px; height:24px; stroke:var(--accent); }
.benefit-item h4 { font-size: .9rem; font-weight: 700; }
.benefit-item p  { font-size: 13px; color:var(--medium); max-width:none; }

/* ── ESG ──────────────────────────────────────────────────── */
.esg-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 2.5rem;
  text-align: center;
}
.esg-icon {
  width: 72px; height: 72px;
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.esg-icon svg { width:32px; height:32px; stroke:var(--accent); }

.steps { display:flex; flex-direction:column; gap:0; }
.step {
  display:flex; gap:2rem; align-items:flex-start;
  padding: 2.5rem 0;
  border-bottom: 1px solid #eee;
}
.step:last-child { border-bottom: none; }
.step-num {
  font-family: var(--font-body);
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent-light);
  line-height: 1;
  flex-shrink: 0;
  width: 60px;
}
.step h4 { margin-bottom: .5rem; font-weight: 700; }
.step p  { color:var(--medium); font-size:14px; max-width:none; }

/* ── Contact ─────────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
}
.contact-info-item { display:flex; gap:1rem; margin-bottom:2rem; }
.contact-info-item:last-child { margin-bottom: 0; }
.contact-info-icon {
  width: 44px; height: 44px;
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-icon svg { width:20px; height:20px; stroke:var(--accent); }
.contact-info-text h4 { font-size: 13px; text-transform:uppercase; letter-spacing:.08em; color:var(--light); margin-bottom:.25rem; }
.contact-info-text p { color:var(--dark); font-size:14px; }
.contact-info-text a { color:var(--dark); transition:color var(--trans); }
.contact-info-text a:hover { color:var(--accent); }

.map-container {
  margin-top: 2rem;
  overflow: hidden;
  border: 1px solid var(--border);
  height: 260px;
  background: #f0f0f0;
  display: flex; align-items: center; justify-content: center;
}
.map-placeholder { text-align:center; color:var(--medium); }
.map-placeholder svg { width:40px; height:40px; stroke:var(--light); margin: 0 auto 1rem; }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom: 1.5rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.form-group label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--medium);
  margin-bottom: .5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  display: block;
  width: 100%;
  padding: .875rem 1rem;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: border-color var(--trans), box-shadow var(--trans);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(110,186,1,.15);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 13px; color:var(--light); margin-top:.4rem; }

.alert { padding:1rem 1.25rem; font-size:14px; margin-bottom:1.5rem; }
.alert-success { background: #f0f7e6; color:#3d7a00; border:1px solid #b5d97a; }
.alert-error   { background: #ffeaea; color:#c62828; border:1px solid #ef9a9a; }

.checkbox-group { display:flex; gap:.75rem; align-items:flex-start; }
.checkbox-group input[type=checkbox] { width:16px; height:16px; flex-shrink:0; margin-top:.2rem; accent-color:var(--accent); }
.checkbox-group label { font-size:13px; color:var(--medium); font-family:var(--font-body); text-transform:none; letter-spacing:0; }
.checkbox-group label a { color:var(--accent); text-decoration:underline; }

/* ── Impressum / Datenschutz prose ───────────────────────── */
.ip-content {
  width: 80%;                 /* gleiche Breite wie der Intro-Text der anderen Seiten */
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) 0;
}
.ip-content h2 {
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-size: clamp(24px, 2.9vw, 35px);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;       /* gemischte Gross-/Kleinschreibung wie im Original */
  color: var(--black);
  margin: 3rem 0 1.25rem;
}
.ip-content h2:first-child { margin-top: 0; }
.ip-content h3 {
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--black);
  margin: 2.25rem 0 .75rem;
}
.ip-content h4 {
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--black);
  margin: 1.75rem 0 .6rem;
}
.ip-content p {
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--black);
  margin-bottom: 1.25rem;
}
.ip-content strong, .ip-content b { font-weight: 700; }
.ip-content a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.ip-content a:hover { color: var(--accent); }
.ip-list {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.ip-list li {
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--black);
}
.ip-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}
.ip-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-size: 13px;
  color: var(--black);
}
.ip-table th {
  background: #f4f4f4;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: left;
  padding: .6rem .75rem;
  border: 1px solid #e0e0e0;
}
.ip-table td {
  padding: .6rem .75rem;
  border: 1px solid #e0e0e0;
  vertical-align: top;
  line-height: 1.6;
}

/* ── Ankaufsprofil ────────────────────────────────────────── */
.ap-mockup-wrap {
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}
.ap-mockup-img {
  max-width: min(500px, 80vw);
  height: auto;
  display: block;
}
.ap-cta-wrap {
  display: flex;
  justify-content: center;
  padding: 0 2rem clamp(4rem, 8vw, 7rem);
}
.ap-dl-btn {
  display: inline-block;
  border: 2px solid var(--black);
  background: transparent;
  color: var(--black);
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 11px 34px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
/* Pfeil davor – wie beim Ankaufsprofil-Button im Original */
.ap-dl-btn::before { content: '\2192\00a0\00a0'; }
.ap-dl-btn:hover {
  background: var(--black);
  color: var(--white);
}

/* ── Cookie-Consent (eigene Umsetzung) ─────────────────────── */
:root { --cc-green: #5aa95e; --cc-green-dark: #4f9a53; --cc-link: #6ea63f; }
.cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, .55);
}
.cc-overlay[hidden] { display: none; }
.cc-modal {
  background: #fff;
  width: 100%;
  max-width: 740px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  font-family: 'Arial', Helvetica, Arial, Lucida, sans-serif;
  color: #4a4a4a;
}
.cc-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.5rem;
}
.cc-head-b {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--black);
}
.cc-head-title {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 400;
  color: #6a6a6a;
}
.cc-intro { font-size: 15px; line-height: 1.6; margin: 0 0 1rem; }
.cc-intro + .cc-intro { margin-top: 0; }
.cc-link { color: var(--cc-link); text-decoration: none; }
.cc-link:hover { text-decoration: underline; }
.cc-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.cc-btn {
  border: none;
  border-radius: 5px;
  padding: .85rem 1.75rem;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.cc-btn-accept { background: var(--cc-green); color: #fff; }
.cc-btn-accept:hover { background: var(--cc-green-dark); }
.cc-btn-save { background: #f1f1f1; color: #555; }
.cc-btn-save:hover { background: #e4e4e4; }
/* Kategorie-Karten */
.cc-cat {
  background: #f6f6f6;
  padding: 1.25rem 1.5rem 1.5rem;
  margin-top: .6rem;
}
.cc-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.cc-cat-title { font-size: clamp(1.1rem, 2vw, 1.4rem); color: #5a5a5a; }
.cc-cat-desc { font-size: 15px; line-height: 1.55; margin: 0 0 .75rem; color: #6a6a6a; }
.cc-info-btn {
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  color: var(--cc-link);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.cc-info-btn:hover { text-decoration: underline; }
.cc-info-detail {
  margin-top: .75rem;
  font-size: 13px;
  line-height: 1.5;
  color: #777;
  border-top: 1px solid #e2e2e2;
  padding-top: .75rem;
}
.cc-info-detail[hidden] { display: none; }
/* Toggle-Schalter */
.cc-switch { display: inline-flex; align-items: center; gap: .6rem; }
.cc-switch-label { font-size: 15px; color: #6a6a6a; }
.cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-slider {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: #c4c4c4;
  transition: background .2s;
  flex: 0 0 auto;
  cursor: pointer;
}
.cc-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.cc-switch input:checked + .cc-slider { background: var(--cc-green); }
.cc-switch input:checked + .cc-slider::before { transform: translateX(24px); }
.cc-switch input:focus-visible + .cc-slider { outline: 2px solid var(--black); outline-offset: 2px; }
.cc-switch.is-locked .cc-slider { background: var(--cc-green); opacity: .6; cursor: not-allowed; }
.cc-foot {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.75rem;
  font-size: 14px;
}
.cc-foot a { color: #9a9a9a; text-decoration: none; }
.cc-foot a:hover { color: #555; }

/* ── Kontakt ──────────────────────────────────────────────── */
.kt-section {
  display: grid;
  grid-template-columns: 1fr 2fr;   /* Kreis links, Inhalt rechts (wie Original) */
  width: 80%;                        /* gleiche Breite wie der Intro-Text */
  max-width: 1080px;
  margin: 0 auto;
}
.kt-circle-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2rem, 4vh, 4rem) 0;
}
.kt-circle {
  width: clamp(100px, 14vw, 190px);
  aspect-ratio: 1;
  border: 1px solid #bbb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kt-icon {
  width: 38%;
  height: 38%;
  stroke: #999;
}
.kt-content {
  padding: clamp(2rem, 4vh, 4rem) 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.kt-heading {
  font-family: var(--font-body);
  font-size: clamp(24px, 2.9vw, 35px);
  font-weight: 600;
  letter-spacing: normal;
  color: var(--black);
  margin: 0;
}
.kt-address {
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 25px);
  font-style: normal;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--black);
}
.kt-map-wrap { width: 100%; max-width: 680px; }
.kt-map-iframe {
  display: block;
  width: 100%;
  max-width: 680px;
  height: 400px;
  border: 0;
}
.kt-links {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.kt-link {
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.4;
  color: var(--black);
  text-decoration: none;
  transition: color .2s;
}
a.kt-link:hover { color: var(--accent); }

@media (max-width: 768px) {
  .kt-section { grid-template-columns: 1fr; width: 88%; }
  .kt-circle-col { padding: 2rem 0 1rem; }
  .kt-circle { width: 90px; }
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--black);
  color: rgba(255,255,255,.6);
}
.footer-inner {
  width: 90%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 60px 0 60px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-logo-img { height: 50px; width: auto; display: block; }
.footer-partners-right {
  display: flex;
  align-items: center;
  gap: 3rem;
}
.footer-partners-right a { opacity: .7; transition: opacity var(--trans); display: flex; align-items: center; }
.footer-partners-right a:hover { opacity: 1; }
.footer-partners-right img { height: 80px; width: auto; filter: brightness(0) invert(1); }

.footer-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 2rem;
}
.footer-address-col {
  font-family: var(--font-head);
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255,255,255,.6);
  letter-spacing: .02em;
}
.footer-address-col p { margin-bottom: 1rem; }
.footer-address-col a { color: rgba(255,255,255,.6); transition: color var(--trans); }
.footer-address-col a:hover { color: var(--white); }
.footer-links-col {
  display: flex;
  flex-direction: column;
  font-family: var(--font-head);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .02em;
}
.footer-links-col a { color: rgba(255,255,255,.6); transition: color var(--trans); }
.footer-links-col a:hover { color: var(--white); }
.footer-copy {
  margin-top: 1rem;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  line-height: 1.9;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-size: 13px;
  color: rgba(255,255,255,.4);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color:rgba(255,255,255,.5); transition:color var(--trans); }
.breadcrumb a:hover { color:rgba(255,255,255,.9); }
.breadcrumb svg { width:12px; height:12px; }

/* ── Article / Content ────────────────────────────────────── */
.article-body { font-size: 14px; line-height: 1.8; color: var(--dark); }
.article-body p { margin-bottom: 1.25rem; max-width: none; }
.article-body h2, .article-body h3 { margin: 2rem 0 1rem; }
.article-body ul { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-body li { margin-bottom: .5rem; list-style: disc; }
.article-body strong { color: var(--black); }

/* ── Pagination ───────────────────────────────────────────── */
.pagination { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:3rem; }
.page-btn {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--border);
  border-radius: 0;
  font-size:14px;
  font-weight: 600;
  color: var(--medium);
  transition: all var(--trans);
}
.page-btn:hover, .page-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

/* ── Two-column ───────────────────────────────────────────── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.two-col.wide { grid-template-columns: 1.2fr 1fr; }
.hr { border:none; border-top:1px solid #eee; margin:3rem 0; }

/* ── Back link ────────────────────────────────────────────── */
.back-link {
  display: inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--medium);
  transition: color var(--trans), gap var(--trans);
  margin-bottom: 2rem;
}
.back-link:hover { color: var(--black); gap: .75rem; }
.back-link svg { width:16px; height:16px; }

/* ── Testimonials ────────────────────────────────────────── */
.testimonials { background: var(--black); padding: var(--section-pad) 0; }
.testimonial-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.testimonial-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 2.5rem;
}
.testimonial-quote {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1.5rem;
  max-width: none;
}
.testimonial-quote::before { content:'\201E'; font-size:3rem; color:var(--accent); line-height:0; vertical-align:-.5em; margin-right:.2em; }
.testimonial-author { font-size:13px; font-weight:600; color:rgba(255,255,255,.4); letter-spacing:.1em; text-transform:uppercase; }

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  .two-col { gap: 3rem; }
  .promise-item { grid-template-columns: 1fr; gap: 2.5rem; }
  .promise-item.reverse .promise-text,
  .promise-item.reverse .promise-visual { order: unset; }
  .service-grid { grid-template-columns: 1fr; }
  .feature-section-inner { grid-template-columns: 1fr; gap: 2rem; }
  .feature-section.reverse .feature-section-inner { direction: ltr; }
  .three-box-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --section-pad: 60px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  /* Karriere: Vor-/Nachname untereinander, Absenden ueber volle Breite */
  .kar-field-row { grid-template-columns: 1fr; }
  .kar-submit { align-self: stretch; text-align: center; }
  /* einspaltig: Jobs/Formular etwas breiter + seitlicher Abstand fuer das Formular */
  .kar-jobs { width: 88%; }
  .kar-apply-section { padding-left: 1.5rem; padding-right: 1.5rem; }
  .kar-apply-heading { width: 100%; }
  /* Ankaufsprofil-Button auf schmalen Schirmen kleiner -> passt auf eine Zeile */
  .ap-cta-wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
  .ap-dl-btn { font-size: 14px; padding: 11px 20px; letter-spacing: .5px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  /* Footer einspaltig: Haupt-Logo oben, Partner-Logos gestapelt darunter (eigene
     Spalte, nicht neben dem Logo), darunter Adresse und Links untereinander. */
  .footer-top-row { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .footer-partners-right { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .footer-partners-right img { height: 56px; }
  .footer-bottom-row { grid-template-columns: 1fr; gap: 2.5rem; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  /* Kennzahlen-Sektion: auf Mobil 2 statt 3 Spalten (sonst zu breit + abgeschnitten),
     kleinere Zahlen, weniger Padding, lange Labels umbrechen lassen. */
  .fundiert-inner { padding: 4rem 5vw; }
  .fundiert-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fundiert-number { font-size: clamp(2rem, 10vw, 3rem); }
  .fundiert-stat { padding: 1.5rem; }
  .fundiert-label { overflow-wrap: break-word; hyphens: auto; }
  .news-item { grid-template-columns: 1fr; gap: .5rem; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  /* Nur das animierte Tipp-Wort verkleinern, damit lange Wörter (ENTWICKELN,
     VERWALTEN …) aufs Handy passen. "Wir" und der Untertitel bleiben unverändert. */
  .hero-typed { font-size: clamp(2rem, 11vw, 3.5rem); }
  .hero-sub { font-size: 20px; }
  .hero-content { max-width: 95%; }
  .lf-grid { grid-template-columns: 1fr; }
  /* Spezifität muss .lf-service.lf-reverse .lf-service-inner schlagen */
  .lf-service .lf-service-inner,
  .lf-service.lf-reverse .lf-service-inner { grid-template-columns: 1fr; }
  .lf-service .lf-circle-wrap { order: -1; }
  .lf-service.lf-reverse .lf-circle-wrap { order: -1; }
  .lf-circle-img { width: clamp(120px, 40vw, 220px); }
  .ou-item { grid-template-columns: 1fr; min-height: auto; }
  .ou-quote-col { display: none; }
  /* einspaltig: seitliches Padding auf die Spalte, Gutter der Kinder zurücksetzen */
  .ou-content-col { padding: 3rem 1.5rem; }
  .ou-item > :first-child > *,
  .ou-item > :last-child  > * { padding-left: 0; padding-right: 0; }
  .ou-img { max-height: 200px; }
  /* ESG über die volle Breite, die Mittellinie entfällt einspaltig */
  .ou-esg { width: 100%; margin-left: 0; border-left: none; padding: 3rem 1.5rem; }
  .ou-esg > * { padding-left: 0; padding-right: 0; }
  .nr-grid { grid-template-columns: 1fr; }
  .nr-grid::before { display: none; }          /* Mittellinie entfaellt einspaltig */
  /* grid-column zuruecksetzen, sonst legt der Browser eine implizite 2. Spalte an */
  .nr-article.nr-right,
  .nr-article.nr-left {
    grid-column: 1;
    grid-row: auto;          /* Zeilenzuweisung aufheben, sonst stapeln sie sich */
    margin: 0;
    max-width: 100%;
    padding: 2.5rem 1.5rem;
  }
  .nr-article + .nr-article { border-top: 1px solid #e0e0e0; }
  /* einspaltig: Gutter der Kinder + Button-Margin zurücksetzen */
  .nr-article.nr-right > *,
  .nr-article.nr-left  > * { padding-left: 0; padding-right: 0; }
  .nr-article.nr-right > .nr-btn,
  .nr-article.nr-left  > .nr-btn { padding-left: 1.5rem; padding-right: 1.5rem; margin-left: 0; margin-right: 0; }
  /* auf schmalen Schirmen 3 statt 5 Kacheln: 34/3 = 1133.333% Trackbreite */
  .nk-sdg-track { width: 1133.333%; }
  .nk-sdg-slider { --gap: 10px; padding: 2rem 1rem; }
  /* einspaltig: Mittellinie entfaellt, Bloecke untereinander */
  .nk-zigzag { grid-template-columns: 1fr; }
  .nk-zigzag::before { display: none; }
  .nk-col-left, .nk-col-right { grid-column: 1; }
  .nk-col-left { position: static; }   /* einspaltig kein Sticky */
  .nk-steps, .nk-beitrag { padding: 2.5rem 1.5rem; }
  .nk-col-left > *, .nk-col-right > * { padding-left: 0; padding-right: 0; }
  .nk-beitrag { border-top: 1px solid #e0e0e0; }
  .nk-esg-item { width: clamp(140px, 40vw, 260px); }
  /* Versprechen: einspaltig – die Mittellinie hätte sonst quer durch den Text gelegen */
  .vp-item { grid-template-columns: 1fr; }
  .vp-item::before { display: none; }
  .vp-item + .vp-item { border-top: 1px solid #e0e0e0; }
  .vp-item.vp-right .vp-content,
  .vp-item.vp-left  .vp-content { grid-column: 1; }
  .vp-item .vp-content > * { padding-left: 0; padding-right: 0; }
  .vp-item .vp-content > .vp-cta { padding-left: 34px; padding-right: 34px; margin-left: 0; margin-right: 0; }
  .vp-content { padding: 3rem 1.5rem; }
  .vp-intro { padding: 3rem 1.5rem 2rem; }
  .pg-grid { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 1.5rem; }
  /* einspaltig: das versetzte Muster entfällt, alle Karten volle Breite */
  .pg-card:nth-child(3n+1),
  .pg-card:nth-child(3n+2),
  .pg-card:nth-child(3n+3) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  /* Kein Hover auf Touch: Flip abschalten, sonst bliebe die Rueckseite unerreichbar.
     Gleiche Spezifitaet wie die Hover-Regel, steht spaeter -> gewinnt. */
  .pg-card { perspective: none; }
  .pg-flip { transform-style: flat; transition: none; }
  /* .pg-grid-Praefix hebt die Spezifitaet der Richtungs-Regeln auf, damit
     der Flip auf Touch garantiert aus bleibt (Rueckseite waere sonst gedreht). */
  .pg-grid .pg-card:hover .pg-flip,
  .pg-grid .pg-card:focus-visible .pg-flip { transform: none; }
  .pg-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  /* Info dauerhaft als Overlay – Verlauf reicht bis nach oben durch,
     sonst steht der Textblock im transparenten Bereich. */
  .pg-grid .pg-info {
    transform: none;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.3) 100%);
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
  }
  .pg-info-name,
  .pg-info-meta { font-size: 14px; }
  .pg-info-name::after { margin: .5rem 0; }
}

@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: center; }
}