/* ==========================================================================
   ASD & Co. GmbH — Stylesheet
   Hell & industriell-clean. Alle Farben und Abstände als Custom Properties,
   damit ein Rebrand an genau einer Stelle passiert.
   ========================================================================== */

/* --- Design-Tokens ------------------------------------------------------ */
:root {
  --surface:        #ffffff;
  --surface-muted:  #f4f6f8;
  --surface-sunken: #eaeef2;
  --surface-deep:   #0b1a26;
  --surface-deep-2: #12293c;

  --text:           #111820;
  --text-muted:     #5b6773;
  --text-invert:    #ffffff;
  --text-invert-mut:#adc0cf;

  --border:         #d7dde3;
  --border-strong:  #b9c4cd;

  --accent:         #0f3b5c;
  --accent-light:   #1d5c8a;
  --accent-soft:    #e8eff5;

  --danger:         #b3261e;
  --success:        #1c6b46;

  /* Abstandsskala */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --radius:    4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(17, 24, 32, .06);
  --shadow-md: 0 4px 16px rgba(17, 24, 32, .08);
  --shadow-lg: 0 18px 48px rgba(17, 24, 32, .14);

  --container: 1240px;
  --header-h:  76px;

  /* Systemschriften mit vollständiger kyrillischer Abdeckung.
     Bewusst keine Google Fonts vom Google-CDN (DSGVO). */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", "Noto Sans", Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Bewegung — bewusst kurz gehalten: die Seite soll lebendig wirken,
     nicht auf sich warten lassen. */
  --dur-fast: .3s;
  --dur:      .45s;
  --stagger:  .06s;
}

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

html {
  scroll-behavior: smooth;
  /* Ankerziele nicht unter die fixierte Kopfzeile schieben */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  /* Verhindert horizontales Scrollen durch überstehende Dekoration */
  overflow-x: hidden;
}

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

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

a { color: var(--accent-light); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Typografie --------------------------------------------------------- */
h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.02em;
  /* Lange deutsche und russische Komposita dürfen umbrechen statt zu überlaufen.
     Bewusst ohne hyphens:auto — das zerhackt Wörter wie "Lebensmitteltechnik"
     mitten in der Überschrift. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Obergrenze so gewählt, dass "Lebensmitteltechnik" in die Hero-Spalte passt
   und nicht mitten im Wort umbricht. */
h1 { font-size: clamp(2rem, 1.3rem + 2.3vw, 3.35rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.7rem); }
h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); letter-spacing: -.01em; }

p { overflow-wrap: break-word; }

/* --- Layout-Bausteine --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.section--muted  { background: var(--surface-muted); }
.section--deep   { background: var(--surface-deep); color: var(--text-invert); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
}
.section--deep .eyebrow { color: #7fb4d9; }

.lead {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
  color: var(--text-muted);
  margin-top: var(--sp-4);
}
.section--deep .lead { color: var(--text-invert-mut); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .85rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-light); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn--on-dark {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
}
.btn--on-dark:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); }

.btn--sm { padding: .55rem 1rem; font-size: .875rem; }
.btn--block { width: 100%; }

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease), height .25s var(--ease);
}
.header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

/* Wortmarke */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand__mark {
  display: inline-block;
  width: 10px; height: 22px;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  border-radius: 2px;
  transform: translateY(2px);
}

/* Navigation */
.nav { margin-inline-start: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
}
.nav__link {
  color: var(--text);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__link:hover { color: var(--accent); }
.nav__link.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; }

/* Sprachumschalter */
.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.lang__btn {
  padding: .38rem .6rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.lang__btn + .lang__btn { border-inline-start: 1px solid var(--border); }
.lang__btn:hover { background: var(--surface-muted); color: var(--text); }
.lang__btn[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Burger */
.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  background: var(--text);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   1 — Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-8);
  background: var(--surface-deep);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Das Bild setzt sich beim Laden langsam — ruhiger, tiefer Einstieg
     statt eines harten Standbilds. */
  animation: heroSettle 2.4s cubic-bezier(.2, .6, .2, 1) backwards;
}
@keyframes heroSettle {
  from { transform: scale(1.06); }
  to   { transform: none; }
}

/* Hero-Inhalt fährt beim Laden nacheinander ein */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero__title,
.hero__sub,
.hero__location,
.hero__actions { animation: riseIn .55s var(--ease) backwards; }
.hero__title    { animation-delay: .08s; }
.hero__sub      { animation-delay: .18s; }
.hero__location { animation-delay: .28s; }
.hero__actions  { animation-delay: .36s; }

.hero-card { animation: riseIn .5s var(--ease) backwards; }
.hero-card:nth-child(1) { animation-delay: .42s; }
.hero-card:nth-child(2) { animation-delay: .50s; }
.hero-card:nth-child(3) { animation-delay: .58s; }
.hero-card:nth-child(4) { animation-delay: .66s; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Zwei Ebenen: ein kräftiger Verlauf von links für die Lesbarkeit der
     Überschrift, darüber ein leichter Grundton, damit helle Fotos nicht
     ausbrennen. */
  background:
    linear-gradient(100deg, rgba(4,13,20,.95) 0%, rgba(4,13,20,.88) 38%, rgba(4,13,20,.55) 72%, rgba(4,13,20,.62) 100%),
    linear-gradient(180deg, rgba(4,13,20,.35), rgba(4,13,20,.25));
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
  width: 100%;
}
.hero__content { color: #fff; max-width: 52ch; }
.hero__title { color: #fff; }
.hero__sub {
  margin-top: var(--sp-5);
  font-size: clamp(1.02rem, .96rem + .4vw, 1.2rem);
  color: #cddae4;
  max-width: 52ch;
}

.hero__location {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: .4rem .85rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  font-size: .84rem;
  letter-spacing: .04em;
  color: #dbe6ee;
  background: rgba(255,255,255,.06);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Vier Kärtchen rechts */
.hero__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.hero-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  color: #eef4f9;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.4;
}
.hero-card svg { flex-shrink: 0; width: 20px; height: 20px; color: #7fd4ff; margin-top: 1px; }

/* ==========================================================================
   2 — Wer wir sind
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
/* Radius und Beschnitt liegen am Container, nicht am Bild: sonst würde das
   beim Erscheinen leicht vergrößerte Bild über seine Ecken hinauslaufen und
   auf schmalen Fenstern die Seite verbreitern. */
.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.split__media img,
.split__media svg {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split--reverse .split__media { order: 2; }

.about__name { margin-bottom: var(--sp-2); }
.about__role {
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  color: var(--accent-light);
  font-weight: 500;
  margin-bottom: var(--sp-5);
}
.about__text + .about__text { margin-top: var(--sp-4); }
.about__text { color: var(--text-muted); }

/* ==========================================================================
   3 — Warum Unternehmen uns vertrauen
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.card {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover {
  border-color: var(--accent-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--sp-4);
  transition: background-color .22s var(--ease), color .22s var(--ease),
              transform .22s var(--ease);
}
.card:hover .card__icon {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.card__icon svg { width: 22px; height: 22px; }
.card__title { margin-bottom: var(--sp-2); }
.card__text { font-size: .92rem; color: var(--text-muted); line-height: 1.55; }

/* ==========================================================================
   4 — Hauptbereiche (Bildkacheln, ohne Beschreibungstext)
   ========================================================================== */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.tile {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-deep);
  text-decoration: none;
}
.tile {
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile:hover img { transform: scale(1.06); }
.tile__label { transition: transform .3s var(--ease); }
.tile:hover .tile__label { transform: translateY(-3px); }
.tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,17,26,0) 38%, rgba(6,17,26,.82) 100%);
}
.tile__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-5);
  color: #fff;
  font-size: clamp(1rem, .95rem + .35vw, 1.22rem);
  font-weight: 600;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.tile__label svg { width: 22px; height: 22px; flex-shrink: 0; color: #7fd4ff; }

/* ==========================================================================
   5 — Was wir liefern
   ========================================================================== */
.supply__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-5);
  list-style: none;
  padding: 0;
  margin-top: var(--sp-5);
}
.supply__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  transition: border-color .22s var(--ease);
}
.supply__item svg {
  width: 20px; height: 20px;
  color: var(--accent-light);
  flex-shrink: 0;
  transition: transform .22s var(--ease);
}
.supply__item:hover { border-bottom-color: var(--accent-light); }
.supply__item:hover svg { transform: translateX(3px); }

/* ==========================================================================
   6 — Europäische Qualität
   ========================================================================== */
.checks { list-style: none; padding: 0; margin-top: var(--sp-5); display: grid; gap: var(--sp-4); }
.checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
  font-weight: 500;
}
.checks svg { width: 24px; height: 24px; color: #7fd4ff; flex-shrink: 0; margin-top: 2px; }

.pullquote {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-inline-start: 3px solid #7fd4ff;
  background: rgba(255,255,255,.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-invert-mut);
  font-size: 1.02rem;
}

/* ==========================================================================
   7 — Wie wir arbeiten (Timeline)
   ========================================================================== */
.timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-4);
  counter-reset: step;
  position: relative;
  margin-top: var(--sp-7);
}
/* Blasse Grundschiene hinter den Punkten */
.timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--border-strong);
  z-index: 0;
}

/* Der Strahl, der beim Hereinscrollen von links nach rechts über die Schiene
   läuft. Bewusst per width statt scaleX animiert, damit der Leuchtpunkt an der
   Spitze scharf bleibt und nicht mitverzerrt wird. */
.timeline::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 8%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  box-shadow: 0 0 12px 1px rgba(29, 92, 138, .55);
  z-index: 0;
}
/* Gleichmäßiges Tempo: nur so trifft die Strahlspitze jeden Punkt genau dann,
   wenn dessen Verzögerung abläuft. Mit Ease-out würde der Strahl den Punkten
   in der Mitte davonlaufen. */
.timeline.is-visible::after {
  animation: beam .75s linear forwards;
}
@keyframes beam { to { width: 84%; } }

/* Der Container selbst blendet nicht mit ein — sonst würde er die gestaffelten
   Schritte überdecken. Ausgelöst wird trotzdem über .reveal / .is-visible. */
.timeline.reveal { opacity: 1; transform: none; transition: none; }

.step { position: relative; z-index: 1; text-align: center; opacity: 0; }
.timeline.is-visible .step { animation: stepIn .3s var(--ease) forwards; }
.timeline.is-visible .step__dot { animation: dotIn .3s var(--ease) backwards; }

/* Die Punkte sitzen bei 0 / 20 / 40 / 60 / 80 / 100 % der Strahlstrecke.
   Bei 750 ms Laufzeit erreicht die Spitze sie nach 0 / 150 / 300 / 450 / 600 /
   750 ms — die Verzögerungen liegen minimal davor, damit der Punkt im Moment
   des Vorbeilaufens fertig ist. Gesamtdauer rund eine Sekunde. */
.timeline.is-visible .step:nth-child(1),
.timeline.is-visible .step:nth-child(1) .step__dot { animation-delay: 0s; }
.timeline.is-visible .step:nth-child(2),
.timeline.is-visible .step:nth-child(2) .step__dot { animation-delay: .14s; }
.timeline.is-visible .step:nth-child(3),
.timeline.is-visible .step:nth-child(3) .step__dot { animation-delay: .28s; }
.timeline.is-visible .step:nth-child(4),
.timeline.is-visible .step:nth-child(4) .step__dot { animation-delay: .42s; }
.timeline.is-visible .step:nth-child(5),
.timeline.is-visible .step:nth-child(5) .step__dot { animation-delay: .56s; }
.timeline.is-visible .step:nth-child(6),
.timeline.is-visible .step:nth-child(6) .step__dot { animation-delay: .70s; }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dotIn {
  0%   { transform: scale(.4); }
  60%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.step__dot {
  width: 44px; height: 44px;
  margin: 0 auto var(--sp-4);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  font-size: .95rem;
}
.step__title { font-size: 1rem; margin-bottom: var(--sp-1); }
.step__text { font-size: .86rem; color: var(--text-muted); line-height: 1.5; }

/* ==========================================================================
   8 — Kontakt
   ========================================================================== */
.contact { position: relative; background: var(--surface-deep); color: #fff; overflow: hidden; }
.contact__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .22;
}
.contact__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,26,38,.90), rgba(11,26,38,.97));
}
.contact__inner { position: relative; z-index: 2; }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.contact__facts { list-style: none; padding: 0; display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
.contact__fact { display: flex; gap: var(--sp-3); align-items: flex-start; }
.contact__fact svg { width: 22px; height: 22px; color: #7fd4ff; flex-shrink: 0; margin-top: 3px; }
.contact__fact-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #8fa9bd; }
.contact__fact-value { font-weight: 500; }
.contact__fact-value a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.contact__fact-value a:hover { border-bottom-color: #7fd4ff; }

/* --- Formular ----------------------------------------------------------- */
.form {
  background: var(--surface);
  color: var(--text);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field--full { grid-column: 1 / -1; }

.field__label { font-size: .86rem; font-weight: 600; }
.field__req { color: var(--danger); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(29, 92, 138, .16);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); }
.field.has-error .field__error { display: block; }

.field__error {
  display: none;
  font-size: .8rem;
  color: var(--danger);
  font-weight: 500;
}

/* Einwilligung */
.consent { display: flex; gap: var(--sp-3); align-items: flex-start; }
.consent input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.consent label { font-size: .86rem; color: var(--text-muted); line-height: 1.5; }

/* Erfolgs- und Hinweiszustand */
.form__note {
  margin-top: var(--sp-4);
  font-size: .8rem;
  color: var(--text-muted);
  text-align: center;
}
.form__sendError {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: #fdecea;
  border: 1px solid #f3b4ac;
  border-radius: var(--radius);
  color: var(--danger);
  font-size: .85rem;
  text-align: center;
}
.form__sendError a { color: inherit; text-decoration: underline; }
.form__success {
  display: none;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
}
.form__success svg { width: 56px; height: 56px; color: var(--success); margin: 0 auto var(--sp-4); }
.form__success h3 { margin-bottom: var(--sp-3); }
.form__success p { color: var(--text-muted); }
.form.is-sent .form__body { display: none; }
.form.is-sent .form__success { display: block; }

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.footer {
  background: #06111a;
  color: var(--text-invert-mut);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: .9rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer .brand { color: #fff; }
.footer__about { margin-top: var(--sp-4); max-width: 42ch; }
.footer__title {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: #fff; margin-bottom: var(--sp-4); font-weight: 600;
}
.footer__list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.footer__list a { color: var(--text-invert-mut); text-decoration: none; }
.footer__list a:hover { color: #fff; text-decoration: underline; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-5);
  font-size: .84rem;
}
.footer .lang { background: transparent; border-color: rgba(255,255,255,.25); }
.footer .lang__btn { color: #8fa9bd; }
.footer .lang__btn + .lang__btn { border-color: rgba(255,255,255,.25); }
.footer .lang__btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.footer .lang__btn[aria-pressed="true"] { background: #fff; color: #06111a; }

/* ==========================================================================
   Rechtsseiten (Impressum / Datenschutz)
   ========================================================================== */
.page-head {
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-7);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}
.legal { padding-block: var(--sp-8); }
.legal__body { max-width: 74ch; }
.legal__body h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.legal__body p, .legal__body ul { color: var(--text-muted); margin-bottom: var(--sp-4); }
.legal__body ul { padding-inline-start: var(--sp-5); display: grid; gap: var(--sp-2); }
.legal__body address { font-style: normal; color: var(--text-muted); margin-bottom: var(--sp-4); }

/* ==========================================================================
   Hilfsklassen
   ========================================================================== */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

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

/* Einblendungen beim Scrollen */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --- Gestaffeltes Erscheinen -------------------------------------------- */
/* Auf ein Raster gesetzt, erscheinen dessen Kinder nacheinander statt als
   ein Block. Der Container selbst blendet dann nicht mit ein — sonst würde
   sein eigenes Einblenden die Staffelung überdecken. */
.reveal.stagger { opacity: 1; transform: none; transition: none; }

.stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stagger.is-visible > * { opacity: 1; transform: none; }

.stagger.is-visible > *:nth-child(1)  { transition-delay: 0s;   }
.stagger.is-visible > *:nth-child(2)  { transition-delay: .06s; }
.stagger.is-visible > *:nth-child(3)  { transition-delay: .12s; }
.stagger.is-visible > *:nth-child(4)  { transition-delay: .18s; }
.stagger.is-visible > *:nth-child(5)  { transition-delay: .24s; }
.stagger.is-visible > *:nth-child(6)  { transition-delay: .30s; }
.stagger.is-visible > *:nth-child(7)  { transition-delay: .36s; }
.stagger.is-visible > *:nth-child(8)  { transition-delay: .42s; }
.stagger.is-visible > *:nth-child(9)  { transition-delay: .48s; }
.stagger.is-visible > *:nth-child(10) { transition-delay: .54s; }
.stagger.is-visible > *:nth-child(11) { transition-delay: .60s; }
.stagger.is-visible > *:nth-child(12) { transition-delay: .66s; }

/* Die Akzentlinie vor den Überschriften zieht sich auf */
.reveal .eyebrow::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease) .12s;
}
.reveal.is-visible .eyebrow::before { transform: none; }

/* Bilder setzen sich beim Erscheinen leicht — gibt Tiefe statt hartem Auftauchen */
.split .split__media img {
  transform: scale(1.04);
  transition: transform .9s var(--ease);
}
.split.is-visible .split__media img { transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-6); }
  /* Ohne durchgehende Zeile ergibt auch der Strahl keinen Sinn — die Schritte
     erscheinen weiterhin nacheinander. */
  .timeline::before, .timeline::after { display: none; }
}

@media (max-width: 960px) {
  /* Navigation wandert ins Ausklappmenü */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: var(--sp-5);
    margin: 0;
    display: none;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
  }
  .nav__link.is-active { border-bottom-color: var(--border); }
  /* Der Kopfbereich bricht in zwei Zeilen um: oben Logo + Menü-Symbol, darunter
     Sprachumschalter + Angebots-Knopf. Bei 375px passen sonst nicht alle vier
     Elemente nebeneinander — der Knopf soll aber immer sichtbar bleiben,
     nicht im Ausklappmenü verschwinden. */
  :root { --header-h: 116px; }
  .header__inner { flex-wrap: wrap; row-gap: var(--sp-3); }
  .brand { order: 1; }
  .burger { display: block; order: 2; margin-inline-start: auto; }
  .header__actions {
    order: 3;
    flex-basis: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
  }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { max-width: none; }
  .hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .footer__brand-col { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; text-align: start; }
  .step { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); text-align: start; }
  .step__dot { margin: 0; }

  .form__grid { grid-template-columns: 1fr; }
  .supply__list { grid-template-columns: 1fr; }
  .hero__cards { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Bewegung reduzieren
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .tile:hover img, .tile:hover, .tile:hover .tile__label { transform: none; }
  /* Ablauf ohne Bewegung: alles sofort sichtbar, kein Strahl */
  .step { opacity: 1; }
  .timeline::after { display: none; }
  /* Gestaffelte Inhalte sofort sichtbar, ohne Verzögerung */
  .stagger > * { opacity: 1; transform: none; transition-delay: 0s !important; }
  .reveal .eyebrow::before { transform: none; }
  .split .split__media img { transform: none; }
  .hero__bg, .hero__title, .hero__sub, .hero__location,
  .hero__actions, .hero-card { animation: none; }
}

/* ==========================================================================
   Druck
   ========================================================================== */
@media print {
  .header, .footer, .hero__bg, .hero__scrim, .contact__bg, .burger, .lang { display: none !important; }
  body { color: #000; }
  .section { padding-block: 1rem; }
}