/* ==========================================================================
   SODEMANN IT-Systems – Nachbau von gejatec.de, Design an die SODEMANN-CI
   angeglichen (Navy #163970, Akzent #284A99, Montserrat + Oswald).
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/montserrat-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('assets/fonts/oswald-variable.woff2') format('woff2');
}

:root {
  --blue: #163970;
  --blue-accent: #284A99;
  --white: #fff;
  --gray: #858585;
  --text: #1c2433;
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }

body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

a { color: inherit; }
img { max-width: 100%; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--blue); color: #fff; padding: 10px 16px; z-index: 999; }
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 0 10px rgba(0,0,0,0.35);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 67px;
  padding: 0 2.5rem;
}

.site-header__logo img { display: block; height: 30px; width: auto; }

.site-header__nav { display: flex; gap: 2.2rem; }

.site-header__nav a {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  transition: color .3s ease;
}
.site-header__nav a:hover { color: var(--blue-accent); }

/* ---------------------------------------------------------------------- */
/* Hero + Einstiegs-Karten                                                 */
/* ---------------------------------------------------------------------- */

.hero-wrap {
  position: relative;
  overflow: hidden;
  background: var(--blue);
}

.hero-wrap__bg-layer { position: absolute; inset: 0; will-change: transform; }

.hero-wrap__bg {
  position: absolute;
  inset: -6%;
  background: url('assets/bg-hero.jpg') center / cover no-repeat;
  animation: kenburns 34s ease-in-out infinite alternate;
}

@keyframes kenburns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}

.hero-wrap__overlay { position: absolute; inset: 0; background: rgba(8, 22, 48, 0.58); }

.hero {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 67px);
  min-height: calc(100svh - 67px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 3%;
}

.move-banner {
  width: min(100%, 1300px);
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  text-align: center;
}

.move-banner__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(1.4rem, 3.5vw, 3rem) clamp(1rem, 3vw, 3rem);
}

.move-banner__old {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 3.2vw, 3rem);
  color: #4a4a4a;
  text-decoration: line-through;
  text-decoration-thickness: .09em;
  white-space: nowrap;
}

.move-banner__arrow { width: clamp(30px, 4.6vw, 64px); color: var(--blue); flex: none; }
.move-banner__logo { width: min(46%, 560px); height: auto; }

.move-banner__caption {
  margin: 0;
  padding: .9rem 1rem 1.1rem;
  border-top: 1px solid rgba(22,57,112,.18);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.6rem);
  letter-spacing: .01em;
  color: var(--blue);
}

.intro-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 3% 9rem;
}

.intro-card {
  position: relative;
  padding: 2rem 1.8rem 2.2rem;
  background: linear-gradient(180deg, #fff 55%, rgba(255,255,255,.72) 100%);
  border: 6px solid var(--blue);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.3);
  transition: transform .6s var(--ease-apple), box-shadow .6s var(--ease-apple);
}

.intro-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(0,0,0,.4);
}

.intro-card__icon { width: 34px; height: 34px; color: var(--blue-accent); margin-bottom: 1.4rem; display: block; }

.intro-card h3 {
  margin: 0 0 1.1rem;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.3;
  color: #000;
}

.intro-card p {
  margin: 0;
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.7;
  color: #6c7480;
}

/* ---------------------------------------------------------------------- */
/* Sektionen allgemein                                                     */
/* ---------------------------------------------------------------------- */

.section { background: var(--white); padding: 5rem 0 0; }
.section__inner { padding: 0 5%; max-width: 1440px; margin: 0 auto; }
.section__inner--narrow { max-width: 1100px; }

.eyebrow-title { margin-bottom: 2.6rem; }

.eyebrow-title h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.6vw, 3em);
  line-height: 1.1;
  color: var(--blue);
}

.eyebrow-title h2 small {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .38em;
  letter-spacing: .02em;
  margin-bottom: .25em;
  color: var(--blue);
}

.hatch {
  display: block;
  width: 160px;
  height: 10px;
  margin-top: 1rem;
  background: repeating-linear-gradient(-55deg, var(--blue-accent) 0 2px, transparent 2px 6px);
}

/* ---------------------------------------------------------------------- */
/* Slider                                                                  */
/* ---------------------------------------------------------------------- */

.slider {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  background: linear-gradient(110deg, #0e2a57 0%, var(--blue) 45%, var(--blue-accent) 100%);
  color: #fff;
}

.slider__track { display: grid; }

.slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
  padding: 7.5rem 8% 6rem;
  min-height: 460px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(40px,0,0);
  transition: opacity .8s var(--ease-apple), transform .8s var(--ease-apple), visibility 0s .8s;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .8s var(--ease-apple), transform .8s var(--ease-apple);
}

.slide__text h2 {
  margin: 0 0 1rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

.slide__text p { margin: 0 0 1.2rem; font-weight: 300; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.92); }

.slide__media { display: flex; justify-content: center; }
.slide__media img { max-height: 340px; width: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.slide__media img.is-photo { border-radius: 10px; filter: none; box-shadow: 0 20px 50px rgba(0,0,0,.4); }

.slide__logos, .slide__badge {
  position: absolute;
  top: 2.2rem;
  right: 8%;
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.slide__logos img {
  height: 52px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 6px 12px;
}

.slide__badge img { height: 62px; width: auto; border-radius: 8px; }

.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  transition: background .3s ease, transform .4s var(--ease-apple);
}
.slider__arrow:hover { background: rgba(255,255,255,.28); }
.slider__arrow svg { width: 22px; height: 22px; }
.slider__arrow--prev { left: 1.2rem; }
.slider__arrow--next { right: 1.2rem; }

.slider__dots { position: absolute; left: 0; right: 0; bottom: 1.6rem; display: flex; justify-content: center; gap: .6rem; }
.slider__dots button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: transparent; cursor: pointer; transition: background .3s ease, transform .3s ease; }
.slider__dots button.is-active { background: #fff; transform: scale(1.15); }

.section--element { padding-bottom: 0; }

/* Partner-Logos */
.partners {
  overflow: hidden;
  padding: 2rem 0 4.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partners__track {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  width: max-content;
  animation: marquee 50s linear infinite;
}
.partners:hover .partners__track { animation-play-state: paused; }
.partners__track a { display: block; flex: none; }
.partners__track img { display: block; height: 54px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(100%); opacity: .7; transition: filter .3s ease, opacity .3s ease, transform .4s var(--ease-apple); }
.partners__track img:hover { filter: none; opacity: 1; transform: scale(1.08); }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------- */
/* Über uns / Kontakt                                                      */
/* ---------------------------------------------------------------------- */

.section--about { padding-top: 3rem; }

.about p { margin: 0 0 1.7em; font-size: 1rem; line-height: 1.7; font-weight: 400; }
.about strong { color: var(--blue); font-weight: 700; }

.section--kontakt { padding-bottom: 5rem; }

.contact__links { list-style: none; margin: 0 0 2.2rem; padding: 0; }
.contact__links li { margin-bottom: 1.1rem; }
.contact__links a {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.5rem;
  text-decoration: none; color: var(--blue);
  transition: color .3s ease;
}
.contact__links a:hover { color: var(--blue-accent); }
.contact__links svg { width: 26px; height: 26px; }

.hours { margin: 0; padding-top: 1.6rem; border-top: 1px solid #ccd2dc; }
.hours div { display: flex; justify-content: space-between; padding: .55rem 0; font-size: .9rem; }
.hours div:first-child { font-size: 1rem; }
.hours dt, .hours dd { margin: 0; }
.hours dd { text-align: right; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.site-footer {
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.35);
  padding: 3rem 5% 2.5rem;
  text-align: center;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto 2rem;
  text-align: left;
  padding-bottom: 2rem;
  border-bottom: 1px solid #ccd2dc;
}

.site-footer__logo { height: 24px; width: auto; display: block; margin-bottom: 1.1rem; }
.site-footer__col p { margin: 0; font-weight: 600; line-height: 1.9; color: #333; }
.site-footer__col--links { display: flex; flex-direction: column; gap: .9rem; padding-top: 2.2rem; }
.site-footer__col--links a { font-weight: 600; color: #111; text-decoration: none; transition: color .3s ease; }
.site-footer__col--links a:hover { color: var(--blue-accent); }

.site-footer__copy { margin: 0 0 1rem; font-size: .8rem; letter-spacing: 3px; color: var(--gray); }
.site-footer__legal { display: flex; justify-content: center; gap: 1.6rem; }
.site-footer__legal a { font-size: .8rem; color: var(--gray); text-decoration: none; transition: color .3s ease; }
.site-footer__legal a:hover { color: var(--blue); }

/* ---------------------------------------------------------------------- */
/* Reveal-Animationen                                                      */
/* ---------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.985);
  animation: reveal 1.1s var(--ease-apple) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

.reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .9s var(--ease-apple), transform .9s var(--ease-apple), box-shadow .6s var(--ease-apple);
  transition-delay: var(--d, 0s);
}
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }
.intro-card.reveal-on-scroll.is-visible:hover { transition-delay: 0s; }

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 960px) {
  .intro-cards { grid-template-columns: 1fr; padding-bottom: 5rem; }
  .slide { grid-template-columns: 1fr; gap: 2rem; padding: 6.5rem 12% 5rem; }
  .slide__media img { max-height: 240px; }
  .slide__logos, .slide__badge { right: 12%; top: 1.4rem; }
  .slide__logos img { height: 40px; }
  .slider__arrow { width: 42px; height: 42px; }
  .site-header__inner { padding: 0 1.2rem; }
  .site-header__nav { gap: 1.1rem; }
  .site-header__nav a { font-size: .95rem; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__col--links { padding-top: 0; }
}

@media (max-width: 560px) {
  .site-header__nav a:first-child { display: none; }
  .move-banner__row { flex-wrap: wrap; }
  .move-banner__logo { width: 80%; }
  .slider__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-wrap__bg, .partners__track { animation: none; }
  [data-reveal] { animation: none; opacity: 1; transform: none; }
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
  .slide { transition: none; }
}

/* ==========================================================================
   Apple-Politur (nach Audit): Zugänglichkeit → Konventionen → Handwerk
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Kontrast: Fließ- und Hilfstexte auf >= 4,5:1 */
.intro-card p { color: var(--muted); }
.site-footer__copy, .site-footer__legal a { color: var(--faint); }
.slide__text p { font-weight: 400; }

/* Header: Glas mit Haarlinie statt schwerem Schatten */
.site-header {
  box-shadow: 0 1px 0 rgba(11,27,54,.08);
  transition: box-shadow .4s ease, background-color .4s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(11,27,54,.1), 0 10px 32px rgba(11,27,54,.12); }

/* Ziele mindestens 44 px hoch; Unterstreichung wächst beim Hover */
.site-header__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .2rem;
}
.site-header__nav a::after {
  content: "";
  position: absolute;
  left: .2rem; right: .2rem; bottom: 8px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-apple);
}
.site-header__nav a:hover::after { transform: scaleX(1); }

.site-footer__col--links a, .site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.contact__links a { min-height: 44px; }

/* Hero-Scrub-Wrapper nimmt die Breite des Banners ein */
.hero > .scrub { width: min(100%, 1300px); }
.move-banner { width: 100%; }

/* Typografie: engere Laufweite bei großen Zeilen */
.eyebrow-title h2 { letter-spacing: -.01em; }
.intro-card h3 { letter-spacing: -.012em; }

/* Slider-Steuerung: Pause (WCAG 2.2.2), 44-px-Punkte, Autoplay-Füllung */
.slider__controls {
  position: absolute;
  left: 0; right: 0; bottom: .9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .3rem;
}
.slider__dots { position: static; display: flex; gap: 0; bottom: auto; }

.slider__dots button {
  position: relative;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transform: none;
}
.slider__dots button::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  transition: width .6s var(--ease-apple), background .3s ease;
}
.slider__dots button.is-active { background: transparent; transform: none; }
.slider__dots button.is-active::before { width: 38px; background: rgba(255,255,255,.28); }
.slider__dots button.is-active::after {
  content: "";
  position: absolute;
  left: 3px; top: 50%;
  width: 38px; height: 10px;
  margin-top: -5px;
  border-radius: 999px;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(0);
  animation: dotfill 7s linear forwards;
}
.slider.is-paused .slider__dots button.is-active::after,
.slider.is-offscreen .slider__dots button.is-active::after { animation-play-state: paused; }
.slider.is-stopped .slider__dots button.is-active::after { animation: none; transform: scaleX(1); }
@keyframes dotfill { to { transform: scaleX(1); } }

.slider__toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  transition: background .3s ease, transform .4s var(--ease-apple);
}
.slider__toggle:hover { background: rgba(255,255,255,.28); }
.slider__toggle svg { width: 18px; height: 18px; }
.slider__toggle .icon-play { display: none; }
.slider__toggle[aria-pressed="true"] .icon-play { display: block; }
.slider__toggle[aria-pressed="true"] .icon-pause { display: none; }

.slider__arrow { width: 52px; height: 52px; }

@media (prefers-reduced-motion: reduce) {
  .slider__dots button.is-active::after { animation: none; transform: scaleX(1); }
}

/* ==========================================================================
   Landingpage-Bild: Büro mit Serverraum und Blick auf die Stadt
   ========================================================================== */

.hero { align-items: flex-end; padding-bottom: clamp(2.5rem, 11vh, 7rem); }
.hero > .scrub { position: relative; z-index: 1; width: min(100%, 1180px); }

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Unten weich in den dunklen Bereich der Karten übergehen */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
}

.hero__photo-img {
  position: absolute;
  inset: -4% 0 -2% 0;
  background: url('assets/bg-landing.webp') 50% 45% / cover no-repeat;
  animation: kenburns 38s ease-in-out infinite alternate;
  will-change: transform;
}

/* Verlauf: oben das Bild frei, unten Ruhe für das Banner (Kontrast) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(8,22,48,.28) 0%, rgba(8,22,48,.08) 32%, rgba(8,22,48,.55) 100%);
  pointer-events: none;
}

@media (max-width: 960px) {
  .hero { padding-bottom: 2rem; min-height: 78vh; }
  .hero__photo-img { background-position: 62% 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__photo-img { animation: none; }
}

.hero__photo-shift { position: absolute; inset: -9% 0 0 0; will-change: transform; }
.hero__photo-img { inset: 0; }

/* Weicher Übergang vom Landingpage-Bild in den Kartenbereich */
.hero-wrap__overlay {
  background: linear-gradient(180deg, rgba(8,22,48,.94) 0%, rgba(8,22,48,.9) 46%, rgba(8,22,48,.6) 74%, rgba(8,22,48,.58) 100%);
}

/* Hintergrund unter den Karten: dasselbe Bild, weichgezeichnet – kein Bruch beim Scrollen */
.hero-wrap__bg {
  background: url('assets/bg-landing.webp') 50% 40% / cover no-repeat;
  filter: blur(7px) saturate(1.08);
}
.hero-wrap__overlay {
  background: linear-gradient(180deg, rgba(8,22,48,.5) 0%, rgba(8,22,48,.5) 46%, rgba(8,22,48,.62) 74%, rgba(8,22,48,.66) 100%);
}

/* Karten voll deckend: Textkontrast (5,98:1) bleibt auch über dem Bild erhalten */
.intro-card { background: #fff; }

/* ==========================================================================
   Bildübergang (Korrektur): Das Bild kommt nur EINMAL vor (im Hero) und
   blendet in einen ruhigen Navy-Verlauf aus – keine Dopplung, keine Kante.
   ========================================================================== */

.hero-wrap__bg-layer, .hero-wrap__overlay { display: none; }

.hero-wrap {
  background:
    radial-gradient(70% 38% at 50% 78%, rgba(77,127,224,.28) 0%, transparent 70%),
    linear-gradient(180deg, #0a1a35 0%, #0b2146 45%, #0f2c58 75%, #163970 100%);
}

/* Foto läuft über die gesamte untere Hälfte des Heros weich aus */
.hero__photo {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 55%, rgba(0,0,0,.55) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 55%, rgba(0,0,0,.55) 78%, transparent 100%);
}

/* Abdunklung geht in exakt den Farbton des Verlaufs darunter über */
.hero::before {
  background: linear-gradient(180deg, rgba(10,26,53,.30) 0%, rgba(10,26,53,.06) 30%, rgba(10,26,53,.7) 85%, #0a1a35 100%);
}

/* Korrektur 2: Foto und Abdunklung laufen nur über Transparenz aus (kein Farbsprung) */
.hero::before {
  background: linear-gradient(180deg, rgba(10,26,53,.30) 0%, rgba(10,26,53,.06) 30%, rgba(10,26,53,.38) 70%, rgba(10,26,53,0) 100%);
}
.hero__photo {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 50%, rgba(0,0,0,.7) 66%, rgba(0,0,0,.3) 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 50%, rgba(0,0,0,.7) 66%, rgba(0,0,0,.3) 84%, transparent 100%);
}

/* ==========================================================================
   Voll-responsive Seite: fluide Abstände, Schriften und Raster ohne feste
   Mittel-Blöcke – von 320 px Smartphone bis 4K-Monitor.
   ========================================================================== */

:root {
  --pad: clamp(1.25rem, 5vw, 6.5rem);     /* seitlicher Rand, wächst mit dem Bildschirm */
  --gap: clamp(1rem, 2vw, 2.25rem);       /* Abstand zwischen Karten */
  --maxw: 2000px;                         /* nur Schutz gegen extrem breite Monitore */
}

html { hyphens: manual; }
h1, h2, h3 { overflow-wrap: break-word; }

.section { padding-top: clamp(3.5rem, 7vw, 7rem); }
.section__inner, .section__inner--narrow { max-width: var(--maxw); padding-inline: var(--pad); }

.eyebrow-title { margin-bottom: clamp(1.8rem, 3.5vw, 3.2rem); }
.eyebrow-title h2 { font-size: clamp(1.25rem, .72rem + 1.8vw, 2.82rem); }
.hatch { width: clamp(110px, 12vw, 220px); }

.site-header__inner { padding-inline: clamp(1rem, 3vw, 3.5rem); }

/* ---------- Startbereich ---------- */
.hero { padding-inline: var(--pad); }
.hero > .scrub { width: min(100%, 1500px); }

.intro-cards {
  max-width: var(--maxw);
  padding: clamp(2rem, 4vw, 3rem) var(--pad) clamp(5rem, 9vw, 9rem);
  gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) and (max-width: 999px) {
  .intro-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { .intro-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.intro-card { padding: clamp(1.5rem, 1.2rem + 1vw, 2.4rem); }
.intro-card h3 { font-size: clamp(1rem, .75rem + .6vw, 1.22rem); hyphens: auto; }
.intro-card p { font-size: clamp(.95rem, .9rem + .2vw, 1.1rem); }

/* ---------- Slider ---------- */
.slide__text h2 { font-size: clamp(1.15rem, .8rem + .8vw, 1.8rem); }
.slide__text p { font-size: clamp(1rem, .95rem + .25vw, 1.2rem); }
.slide__logos, .slide__badge { right: var(--pad); }
@media (min-width: 961px) {
  .slide {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 6rem);
    padding: clamp(6.5rem, 9vw, 9rem) max(var(--pad), 88px) clamp(5rem, 6vw, 7rem);
    min-height: clamp(460px, 38vw, 660px);
  }
  .slide__logos, .slide__badge { right: max(var(--pad), 88px); }
  .slide__media img { max-height: clamp(260px, 30vw, 540px); }
}
@media (max-width: 960px) {
  .slide { padding-inline: var(--pad); }
  .slide__media img { max-height: clamp(200px, 40vw, 380px); }
}
@media (max-width: 999px) { .slider__arrow { display: none; } }

/* ---------- Partner-Band ---------- */
.partners__track { gap: clamp(3rem, 5vw, 6rem); }
.partners__track img { height: clamp(44px, 3.4vw, 76px); max-width: clamp(130px, 11vw, 230px); }

/* ---------- „Unser Element“: Prozess-Karten ---------- */
.process {
  list-style: none;
  margin: 0;
  padding: clamp(.5rem, 2vw, 2rem) 0 clamp(2.5rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

.step { position: relative; padding-top: 62px; display: flex; flex-direction: column; }

/* Knoten auf der Faser */
.step__node {
  position: absolute; top: 10px; left: 30px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 3px solid #c5d2ea; color: #fff;
  transition: background .7s var(--ease-apple), border-color .7s var(--ease-apple), box-shadow .7s var(--ease-apple), transform .7s var(--ease-apple);
}
.step__node svg { width: 17px; height: 17px; opacity: 0; transition: opacity .5s ease .3s; }
.step:last-child .step__node { width: 36px; height: 36px; top: 7px; left: 27px; }
.step.is-lit .step__node {
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 0 0 7px rgba(40,74,153,.14), 0 0 24px rgba(77,127,224,.6);
  transform: scale(1.06);
  transition-delay: calc(var(--i) * .28s);
}
.step.is-lit .step__node svg { opacity: 1; }

/* Faser-Segment zum nächsten Knoten */
.step::before, .step::after {
  content: ""; position: absolute; z-index: 1;
  top: 23.5px; left: 45px; height: 3px; border-radius: 3px;
  width: calc(100% + var(--gap));
}
.step::before { background: #d6dff0; }
.step::after {
  background: linear-gradient(90deg, var(--blue), #4d7fe0);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s var(--ease-apple);
}
.step.is-lit::after { transform: scaleX(1); transition-delay: calc(var(--i) * .28s + .2s); }
.step:last-child::before, .step:last-child::after { display: none; }

/* Karte */
.step__card {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 1.1rem + .9vw, 2.3rem);
  border-radius: 28px;
  background: linear-gradient(165deg, #ffffff 0%, #f1f5fc 100%);
  border: 1px solid rgba(22,57,112,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 26px 50px -30px rgba(22,57,112,.5);
  overflow: hidden;
  transition: transform .7s var(--ease-apple), box-shadow .7s var(--ease-apple), border-color .4s ease;
}

/* große Konturziffer im Hintergrund */
.step__no {
  position: absolute; right: -.04em; bottom: -.2em; z-index: 0;
  font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 1;
  font-size: clamp(7rem, 11vw, 12rem);
  color: transparent; -webkit-text-stroke: 2px rgba(22,57,112,.09);
  pointer-events: none; user-select: none;
  transition: -webkit-text-stroke-color .5s ease, transform .8s var(--ease-apple);
}

.step__top { position: relative; z-index: 1; margin-bottom: clamp(1.1rem, 2vw, 1.8rem); }
.step__icon {
  width: 56px; height: 56px; border-radius: 18px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--blue), var(--blue-accent));
  box-shadow: 0 14px 26px -12px rgba(22,57,112,.8), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .7s var(--ease-apple);
}
.step__icon svg { width: 28px; height: 28px; }

.step h3 {
  position: relative; z-index: 1; margin: 0 0 .7rem;
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .005em;
  font-size: clamp(1rem, .75rem + .56vw, 1.25rem); line-height: 1.1; color: var(--blue);
  hyphens: auto;
}
.step p {
  position: relative; z-index: 1; margin: 0; color: var(--muted);
  font-size: clamp(.95rem, .9rem + .2vw, 1.1rem); line-height: 1.7;
}
.step__line {
  position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--blue), #4d7fe0);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-apple);
}

@media (hover: hover) {
  .step__card:hover { transform: translateY(-8px); border-color: rgba(40,74,153,.35); box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 40px 60px -32px rgba(22,57,112,.65); }
  .step__card:hover .step__line { transform: scaleX(1); }
  .step__card:hover .step__icon { transform: rotate(-7deg) scale(1.08); }
  .step__card:hover .step__no { -webkit-text-stroke-color: rgba(40,74,153,.24); transform: translate(-6px, -6px); }
}
.step.reveal-on-scroll.is-visible .step__card:hover { transition-delay: 0s; }

/* Unter 1200 px: senkrechte Zeitleiste statt Spalten */
@media (max-width: 1199px) {
  .process { grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 1.75rem); }
  .step { padding: 0 0 0 clamp(54px, 9vw, 76px); }
  .step__node, .step:last-child .step__node { top: 24px; left: 0; width: 30px; height: 30px; }
  .step:last-child .step__node { width: 36px; height: 36px; top: 21px; left: -3px; }
  .step::before, .step::after { top: 39px; left: 13.5px; width: 3px; height: calc(100% + var(--gap)); }
  .step::after { background: linear-gradient(180deg, var(--blue), #4d7fe0); transform: scaleY(0); transform-origin: top center; }
  .step.is-lit::after { transform: scaleY(1); transition-delay: .15s; }
  .step.is-lit .step__node { transition-delay: 0s; }
}
@media (min-width: 640px) and (max-width: 1199px) {
  .step__card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.2rem, 3vw, 2rem); align-items: start; }
  .step__top { grid-row: 1 / span 2; margin: 0; }
  .step h3, .step p { grid-column: 2; }
}

/* ---------- Über uns: Überschrift links, Text in Spalten ---------- */
.about {
  column-count: 2; column-width: 26rem;
  column-gap: clamp(2rem, 4vw, 5rem);
}
.about p {
  margin: 0 0 1.5em; orphans: 3; widows: 3;
  font-size: clamp(1rem, .94rem + .3vw, 1.18rem); line-height: 1.75;
}
.about p:first-child {
  column-span: all; font-weight: 500; line-height: 1.5;
  font-size: clamp(1.2rem, 1rem + .75vw, 1.7rem); margin-bottom: 1.6em;
}
@media (min-width: 1100px) {
  .section--about .section__inner {
    display: grid; align-items: start;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 2.2fr);
    column-gap: clamp(2rem, 6vw, 8rem);
  }
  .section--about .eyebrow-title { position: sticky; top: 110px; margin-bottom: 0; }
}

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--gap); align-items: start; }
.contact__links { margin: 0; }
.contact__links a { font-size: clamp(1rem, .7rem + .72vw, 1.47rem); }
.contact__links svg { width: clamp(24px, 2.2vw, 36px); height: clamp(24px, 2.2vw, 36px); }
.hours {
  padding: clamp(1.2rem, 2vw, 2rem); border: 1px solid rgba(22,57,112,.1);
  border-radius: 24px; background: #f3f6fc;
}
.hours div { font-size: clamp(.92rem, .88rem + .2vw, 1.05rem); }
@media (min-width: 1100px) {
  .section--kontakt .section__inner {
    display: grid; align-items: start;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 2.2fr);
    column-gap: clamp(2rem, 6vw, 8rem);
  }
  .section--kontakt .eyebrow-title { margin-bottom: 0; }
}

/* ---------- Fußzeile über die volle Breite ---------- */
.site-footer {
  text-align: left;
  padding: clamp(2.5rem, 4vw, 4.5rem) var(--pad) clamp(1.75rem, 3vw, 2.5rem);
  display: grid; grid-template-columns: 1fr; gap: .9rem 2rem; align-items: center;
}
.site-footer__inner { max-width: none; margin: 0 0 .6rem; grid-template-columns: 1fr; }
.site-footer__copy { margin: 0; }
.site-footer__legal { justify-content: flex-start; flex-wrap: wrap; }
@media (min-width: 700px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
  .site-footer__col--links { padding-top: 2.2rem; }
}
@media (min-width: 900px) {
  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer__inner { grid-column: 1 / -1; }
  .site-footer__legal { justify-content: flex-end; }
}

/* Feinschliff */
.about { column-width: 20rem; }

.step__top { position: static; display: flex; }
.step__icon { position: relative; z-index: 1; }
.step__no {
  top: clamp(.7rem, 1.2vw, 1.2rem); right: clamp(1rem, 1.6vw, 1.6rem); bottom: auto;
  font-size: clamp(3.4rem, 4.6vw, 5.4rem);
  -webkit-text-stroke: 1.5px rgba(22,57,112,.2);
}
@media (hover: hover) {
  .step__card:hover .step__no { -webkit-text-stroke-color: rgba(40,74,153,.45); transform: translateY(-4px); }
}

.site-footer__inner { gap: 1.1rem 2rem; }
@media (max-width: 699px) { .site-footer__col--links { padding-top: 0; } }

/* Keine feste Maximalbreite: Inhalt nutzt die ganze Breite, Lesbarkeit über fluide Schrift und Spalten */
:root { --maxw: none; }
.slide__text { max-width: 62ch; }

/* Kopfzeile auf kleinen Smartphones */
@media (max-width: 480px) {
  .site-header__logo img { height: 21px; }
  .site-header__nav { gap: .8rem; }
  .site-header__nav a { font-size: .85rem; }
}

/* ==========================================================================
   Eye-Catcher im Startbereich: spricht Geschäftskunden direkt an
   ========================================================================== */

.hero {
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(2rem, 5vh, 4rem);
  padding-top: clamp(2.5rem, 7vh, 5rem);
}
.hero > .hero__intro { align-self: flex-start; width: 100%; max-width: 780px; }
.hero > .scrub:not(.hero__intro) { align-self: center; }

/* Abdunklung von links: Text liegt ruhig auf dem Foto, rechts bleibt das Bild frei */
.hero::before {
  background:
    linear-gradient(90deg, rgba(8,22,48,.80) 0%, rgba(8,22,48,.52) 38%, rgba(8,22,48,0) 74%),
    linear-gradient(180deg, rgba(10,26,53,.30) 0%, rgba(10,26,53,.10) 30%, rgba(10,26,53,.38) 70%, rgba(10,26,53,0) 100%);
}

.hero__eyebrow {
  display: inline-flex; align-items: center; margin: 0 0 1.1rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
}

.hero__title {
  margin: 0 0 1.1rem;
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 1.15rem + 3.1vw, 3.9rem); line-height: 1.04; letter-spacing: -.005em;
  color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35);
  text-wrap: balance;
}
.hero__title span { display: block; color: #a9c4ff; }

.hero__lead {
  margin: 0 0 1.8rem; max-width: 40ch;
  font-size: clamp(1rem, .92rem + .4vw, 1.25rem); line-height: 1.6; font-weight: 500;
  color: rgba(255,255,255,.94); text-shadow: 0 1px 18px rgba(0,0,0,.4);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.hero__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.6rem; border-radius: 22px;
  font-weight: 800; font-size: .9rem; letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  transition: transform .5s var(--ease-apple), background .3s ease, box-shadow .5s var(--ease-apple);
}
.hero__btn svg { width: 20px; height: 20px; flex: none; }
.hero__btn--primary { background: #fff; color: var(--blue); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.hero__btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0,0,0,.34); }
.hero__btn--ghost { color: #fff; border: 2px solid rgba(255,255,255,.75); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__btn--ghost:hover { background: rgba(255,255,255,.2); transform: translateY(-3px); }
.hero__btn:active { transform: scale(.97); }

.hero__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.hero__chips li { display: inline-flex; align-items: center; gap: .45rem; color: #fff; font-weight: 600; font-size: .88rem; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.hero__chips svg { width: 18px; height: 18px; color: #7fd0a4; flex: none; }

@media (max-width: 760px) {
  .hero::before {
    background: linear-gradient(180deg, rgba(8,22,48,.74) 0%, rgba(8,22,48,.58) 55%, rgba(8,22,48,.22) 100%);
  }
  .hero__btn { width: 100%; }
  .hero__lead { max-width: none; }
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(8,22,48,.88) 0%, rgba(8,22,48,.62) 42%, rgba(8,22,48,0) 80%),
    linear-gradient(180deg, rgba(10,26,53,.30) 0%, rgba(10,26,53,.10) 30%, rgba(10,26,53,.38) 70%, rgba(10,26,53,0) 100%);
}
.hero__title { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); }
@media (max-width: 760px) {
  .hero::before { background: linear-gradient(180deg, rgba(8,22,48,.78) 0%, rgba(8,22,48,.62) 55%, rgba(8,22,48,.24) 100%); }
}

/* ==========================================================================
   Startbereich neu geordnet: Text auf ruhigem Grund, Foto als eigene Karte,
   Umzugs-Banner darunter – nichts liegt mehr übereinander.
   ========================================================================== */

.hero {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  min-height: 0;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--pad) clamp(2.5rem, 6vh, 4rem);
}
.hero::before { display: none; }               /* keine Abdunklung über dem Foto mehr nötig */

.hero__grid {
  position: relative; z-index: 1;
  display: grid; align-items: center;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.hero > .hero__intro, .hero__grid > .hero__intro { max-width: none; width: auto; align-self: auto; }
.hero__lead { max-width: 44ch; }
.hero__title { text-shadow: none; }
.hero__lead, .hero__chips li { text-shadow: none; }

/* Foto als Karte */
.hero__photo {
  position: relative; inset: auto; z-index: 1;
  overflow: hidden;
  border-radius: clamp(22px, 2.6vw, 36px);
  aspect-ratio: 4 / 3;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.12);
  -webkit-mask-image: none; mask-image: none;
}
@media (min-width: 1000px) { .hero__photo { aspect-ratio: auto; min-height: clamp(380px, 34vw, 560px); align-self: stretch; } }

.hero > .scrub:not(.hero__intro) { align-self: center; width: 100%; max-width: 1500px; position: relative; z-index: 1; }


/* ==========================================================================
   Startbereich: Foto gedämpft im Hintergrund + ruhige „Auf einen Blick“-Karte
   ========================================================================== */

/* Foto als dunkler Hintergrund hinter der ganzen Fläche */
.hero__photo.hero__photo--bg {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 0; aspect-ratio: auto; min-height: 0; align-self: auto;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
}
.hero__photo--bg .hero__photo-img { opacity: .38; filter: saturate(.7) brightness(.9); }
.hero__photo--bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,26,53,.92) 0%, rgba(10,26,53,.66) 55%, rgba(10,26,53,.5) 100%);
}

/* Raster: Text links, Karte rechts */
.hero__lead { max-width: 46ch; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); }
}

.hero__facts {
  position: relative; z-index: 1;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  border-radius: 28px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
  color: #fff;
}
.hero__facts-title {
  margin: 0 0 1.2rem; font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.hero__facts-list { margin: 0; }
.hero__facts-list > div { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.hero__facts-list > div:first-child { border-top: 0; padding-top: 0; }
.hero__facts-list > div:last-child { padding-bottom: 0; }
.hero__facts-list dt {
  flex: none; min-width: 3.4rem;
  font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 1;
  font-size: clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem); color: #a9c4ff;
}
.hero__facts-list dt svg { width: 2rem; height: 2rem; display: block; }
.hero__facts-list dd { margin: 0; font-size: .95rem; line-height: 1.5; font-weight: 500; color: rgba(255,255,255,.9); }

.hero__facts-list dt { width: 4.2rem; min-width: 0; }
.hero__cta { margin-bottom: 0; }

/* Startbildschirm: Der Umzugs-Banner schließt am unteren Bildschirmrand ab */
.hero {
  min-height: calc(100vh - 67px);
  min-height: calc(100svh - 67px);
  padding-bottom: clamp(1.25rem, 3.5vh, 2.75rem);
}
.hero__grid { flex: 1; align-content: center; }

/* ==========================================================================
   Einstiegskarten im Design der Prozess-Karten („Beratung. Planung. …“)
   ========================================================================== */

.intro-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 1.1rem + .9vw, 2.3rem);
  border-radius: 28px;
  background: linear-gradient(165deg, #ffffff 0%, #f1f5fc 100%);
  border: 1px solid rgba(22,57,112,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 34px 60px -30px rgba(0,0,0,.65);
  overflow: hidden;
  transition: transform .7s var(--ease-apple), box-shadow .7s var(--ease-apple), border-color .4s ease;
}

/* Symbol in der Kachel wie bei den Prozess-Karten */
.intro-card__icon {
  width: 56px; height: 56px; padding: 14px; margin: 0 0 clamp(1.1rem, 2vw, 1.8rem);
  border-radius: 18px; color: #fff;
  background: linear-gradient(145deg, var(--blue), var(--blue-accent));
  box-shadow: 0 14px 26px -12px rgba(22,57,112,.8), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .7s var(--ease-apple);
}

.intro-card h3 { font-weight: 600; letter-spacing: -.005em; color: var(--blue); }
.intro-card p { color: var(--muted); }

/* Fortschrittsstrich unten */
.intro-card::before {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--blue), #4d7fe0);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-apple);
}

@media (hover: hover) {
  .intro-card:hover {
    transform: translateY(-8px); border-color: rgba(40,74,153,.35);
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 44px 70px -32px rgba(0,0,0,.75);
  }
  .intro-card:hover::before { transform: scaleX(1); }
  .intro-card:hover .intro-card__icon { transform: rotate(-7deg) scale(1.08); }
}

/* Kennzahlen: feste Breite, damit beim Hochzählen nichts springt */
.hero__facts-list dt { width: 5.6rem; font-variant-numeric: tabular-nums; }
.hero__facts-list dt .count { display: inline-block; min-width: 100%; }

/* ==========================================================================
   Smartphone/Tablet (< 1000px): Umzugs-Banner direkt unter dem Text,
   „Auf einen Blick“ darunter; kein Ausblenden/Überlappen beim Scrollen
   ========================================================================== */
@media (max-width: 999px) {
  .hero { min-height: 0; gap: clamp(1.25rem, 4vw, 2rem); padding-bottom: clamp(1.5rem, 5vw, 2.5rem); }
  .hero__grid { display: contents; }
  .hero__grid > .hero__intro { order: 1; }
  .hero > .scrub:not(.hero__intro) { order: 2; }
  .hero__grid > .hero__facts { order: 3; }
  .hero .scrub { transform: none !important; opacity: 1 !important; }
  .move-banner { background: #fff; }
}

/* Smartphone: Einstiegskarten kompakter */
@media (max-width: 600px) {
  .intro-cards { gap: .8rem; }
  .intro-card { padding: 1.1rem 1.15rem 1.2rem; border-radius: 22px; }
  .intro-card__icon { width: 42px; height: 42px; padding: 10px; border-radius: 14px; margin-bottom: .85rem; }
  .intro-card h3 { font-size: .98rem; line-height: 1.3; }
  .intro-card p { font-size: .88rem; line-height: 1.5; }
}

/* ==========================================================================
   Lesbarkeit & Bedienbarkeit (WCAG 2.2 / Apple HIG / Material)
   – Fließtext mind. 16 px, Zusatztext mind. 14 px, Labels mind. 12–13 px
   – Zeilenlänge 45–75 Zeichen, Zeilenabstand 1,5–1,7
   – Tippflächen mind. 44 × 44 px, Fokus sichtbar, Text zoombar
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* Kleine Labels über Überschriften: nie unter 13 px */
.eyebrow-title h2 small { font-size: max(.8rem, .38em); letter-spacing: .04em; line-height: 1.3; margin-bottom: .45em; }
.hero__eyebrow { font-size: max(.8rem, 12.5px); }
.hero__facts-title { font-size: max(.78rem, 12.5px); }

/* Fließtext: angenehme Zeilenlänge und -abstand */
.slide__text p, .about p, .step__card p, .intro-card p { line-height: 1.6; }
.slide__text p { max-width: 62ch; }
.about p { max-width: 68ch; }

/* Rechtstexte / Fußzeile: lesbar und gut tippbar */
.site-footer__copy { font-size: .85rem; letter-spacing: .06em; }
.site-footer__legal a { font-size: .9rem; padding-inline: .4rem; }
.site-footer a, .contact__links a { min-height: 44px; }
.site-footer__col--links a, .site-footer__col a { display: inline-flex; align-items: center; }
.site-header__logo { display: inline-flex; align-items: center; min-height: 44px; }

/* Öffnungszeiten einheitlich */
.hours dt, .hours dd { font-size: 1rem; }

/* Bedienelemente: Buttons mit komfortabler Höhe */
.hero__btn { min-height: 48px; }

/* ---------- Smartphone ---------- */
@media (max-width: 600px) {
  /* Abschnittsüberschriften („Das machen wir.“, „Beratung. Planung …“) deutlich lesbar */
  .eyebrow-title h2 { font-size: clamp(1.7rem, 7.6vw, 2.1rem); line-height: 1.12; }
  .eyebrow-title { margin-bottom: 1.6rem; }

  /* Folien */
  .slide__text h2 { font-size: clamp(1.3rem, 5.6vw, 1.55rem); line-height: 1.2; }
  .slide__text p { font-size: 1rem; line-height: 1.65; }

  /* Karten */
  .intro-card h3 { font-size: 1.02rem; }
  .intro-card p { font-size: .95rem; line-height: 1.55; }
  .step__card h3 { font-size: 1.1rem; }
  .step__card p { font-size: .98rem; line-height: 1.65; }

  /* Hero */
  .hero__lead { font-size: 1.05rem; line-height: 1.6; }
  .hero__btn { font-size: .95rem; }
  .hero__facts-list dd { font-size: 1rem; }
  .move-banner__caption { font-size: 1.02rem; line-height: 1.4; }

  /* Über uns */
  .about p { font-size: 1.05rem; line-height: 1.7; }

  /* Kontakt: große, gut tippbare Links */
  .contact__links a { font-size: 1.15rem; padding-block: .4rem; }
}

/* ---------- Tablet ---------- */
@media (min-width: 601px) and (max-width: 999px) {
  .eyebrow-title h2 { font-size: clamp(1.9rem, 4.2vw, 2.4rem); }
  .slide__text p, .about p { font-size: 1.05rem; }
}

/* Bewegung/Kontrast respektieren */
@media (prefers-contrast: more) {
  .site-footer__copy, .site-footer__legal a { color: #3b4452; }
}
.fiber{display:none!important}

/* Weißes Überschriften-Band („Das machen wir.“): oben und unten gleicher Abstand */
.section--slider { --band: clamp(2.5rem, 5vw, 4.5rem); padding-top: var(--band); }
.section--slider .eyebrow-title { margin-bottom: var(--band); }

/* ==========================================================================
   Fußzeile im Stil der Netzbau-Seite: zentriert, weiß, Links · Copyright · Slogan
   ========================================================================== */
.site-footer.site-footer--center {
  display: block; text-align: center;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  padding: clamp(2.25rem, 4vw, 3.25rem) 5% clamp(2.5rem, 4vw, 3.75rem);
}
.site-footer__nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .25rem 2rem; margin: 0 0 1.4rem;
}
.site-footer__nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.1rem;
  text-transform: uppercase; text-decoration: none; color: #000;
  transition: color .3s ease;
}
.site-footer__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-apple);
}
.site-footer__nav a:hover { color: var(--blue-accent); }
.site-footer__nav a:hover::after { transform: scaleX(1); }
.site-footer--center .site-footer__copy { margin: 0 0 .3rem; font-size: .85rem; letter-spacing: 3px; color: var(--faint, #4a5568); }
.site-footer__address { margin: 0 0 1rem; font-size: .85rem; letter-spacing: .04em; color: var(--faint, #4a5568); }
.site-footer__tagline {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 1.4rem; text-transform: uppercase; color: var(--blue);
}
@media (max-width: 560px) {
  .site-footer__nav { gap: 0 1.4rem; }
  .site-footer--center .site-footer__copy { letter-spacing: 1.5px; }
}

/* Fußzeile: Rechtliches als eigener, ruhiger Absatz */
.site-footer--center .site-footer__copy { margin: 0 0 1rem; }
.site-footer__tagline { margin: 0 0 1.6rem; }
.site-footer__legal2 {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.6rem;
  padding-top: .9rem; border-top: 1px solid rgba(22,57,112,.12);
  max-width: 320px; margin-inline: auto;
}
.site-footer__legal2 a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: .9rem;
  color: #6b7280; text-decoration: none; transition: color .3s ease;
}
.site-footer__legal2 a:hover { color: var(--blue); text-decoration: underline; }

/* ==========================================================================
   Kontakt: Hintergrund wie der Startbereich (Navy + gedämpftes Foto)
   ========================================================================== */
.section--kontakt {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #0b2146 0%, #0a1a35 100%);
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}
.section--kontakt::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url('assets/bg-landing.webp') 50% 55% / cover no-repeat;
  opacity: .38; filter: saturate(.7) brightness(.9);
}
.section--kontakt::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,26,53,.92) 0%, rgba(10,26,53,.66) 55%, rgba(10,26,53,.5) 100%);
}

/* Überschrift hell */
.section--kontakt .eyebrow-title h2, .section--kontakt .eyebrow-title h2 small { color: #fff; }
.section--kontakt .eyebrow-title h2 small { color: #a9c4ff; }
.section--kontakt .hatch { background: repeating-linear-gradient(-55deg, #a9c4ff 0 2px, transparent 2px 6px); }

/* Kontaktlinks hell */
.section--kontakt .contact__links a { color: #fff; }
.section--kontakt .contact__links a:hover { color: #a9c4ff; }
.section--kontakt .contact__links svg { color: #a9c4ff; }

/* Öffnungszeiten als Glaskarte wie „Auf einen Blick“ */
.section--kontakt .hours {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
  color: #fff;
}
.section--kontakt .hours dt, .section--kontakt .hours dd { color: rgba(255,255,255,.92); }

/* Mehr Luft zwischen dem Über-uns-Text und dem Kontaktbereich */
.section--about { padding-bottom: clamp(4rem, 8vw, 7.5rem); }

/* Öffnungszeiten: lange Angaben sauber umbrechen */
.hours div { gap: 1.25rem; align-items: baseline; }
.hours dt { flex: none; }
.hours dd { text-wrap: balance; }