/* XXL Büroverwaltung, Stylesheet
   Neuaufbau 2026-08-17, statisch, ohne Framework, ohne externe Schriften.
   Markenfarbe #2daae1 aus dem Bestand übernommen.

   Gestaltungsprinzip bewusst anders als projektbau-duisburg.de:
   hell statt dunkel, zweigeteilte Abschnitte statt Fotokacheln,
   knappe Ecken statt starker Rundungen, kühles Blau statt warmem Gold. */

:root {
  --azur:        #2daae1;
  --azur-tief:   #1c87b6;
  --azur-dunkel: #14607f;
  --azur-hauch:  #eaf6fc;
  --azur-zart:   #d3ecf8;

  --tinte:   #0d2233;
  --tinte-2: #33485a;
  --tinte-3: #647787;

  --papier: #ffffff;
  --nebel:  #f5f9fc;
  --linie:  #dfe8ef;

  --schatten:    0 1px 2px rgba(13,34,51,.05), 0 6px 18px rgba(13,34,51,.06);
  --schatten-xl: 0 2px 6px rgba(13,34,51,.06), 0 24px 60px rgba(13,34,51,.13);
  --kante: 4px;
  --breite: 1220px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--tinte-2);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azur-tief); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--azur);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  color: var(--tinte); line-height: 1.2; margin: 0 0 .65em;
  font-weight: 700; letter-spacing: -.02em; text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.75rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }

.wrap {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.abschnitt { padding: clamp(3.5rem, 2rem + 6.5vw, 7rem) 0; }
.abschnitt--nebel { background: var(--nebel); }
.abschnitt--hauch { background: var(--azur-hauch); }
.lead { font-size: 1.1875rem; color: var(--tinte-2); max-width: 66ch; }

.marke {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--azur-tief); margin-bottom: 1rem;
}
.marke::before {
  content: ""; width: 28px; height: 2px; background: var(--azur); flex: 0 0 auto;
}
.marke--hell { color: var(--azur); }

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinte); color: #fff; padding: .85rem 1.25rem;
}
.sprung:focus { left: 0; }

/* ---------------------------------------------------- Kopfbereich */

.leiste {
  background: var(--tinte); color: #a8bccc; font-size: .875rem; padding: .55rem 0;
}
.leiste__innen {
  display: flex; flex-wrap: wrap; gap: .4rem 2rem;
  align-items: center; justify-content: flex-end;
}
.leiste a { color: #e6eff5; text-decoration: none; font-weight: 600; }
.leiste a:hover { color: var(--azur); }
.leiste span { color: #7d94a6; }

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.93); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen { display: flex; align-items: center; gap: 1.5rem; min-height: 86px; }
.logo { display: block; margin-right: auto; text-decoration: none; }
.logo img { width: 168px; height: auto; }

.menue ul { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.menue a {
  position: relative; display: block; padding: .65rem .95rem;
  color: var(--tinte-2); text-decoration: none; font-weight: 600; font-size: .97rem;
}
.menue a::after {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .35rem;
  height: 2px; background: var(--azur); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.menue a:hover::after, .menue a[aria-current="page"]::after { transform: scaleX(1); }
.menue a[aria-current="page"] { color: var(--azur-dunkel); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem; border-radius: var(--kante); border: 2px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.knopf__pfeil { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.knopf--voll  { background: var(--azur); color: #fff; }
.knopf--voll:hover { background: var(--azur-dunkel); }
.knopf--rand  { border-color: var(--linie); color: var(--tinte); background: var(--papier); }
.knopf--rand:hover { border-color: var(--azur); color: var(--azur-dunkel); }
.knopf--weiss { background: #fff; color: var(--azur-dunkel); }
.knopf--hell  { border-color: rgba(255,255,255,.5); color: #fff; }
.knopf--hell:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.kopf .knopf { padding: .72rem 1.25rem; font-size: .95rem; }

.klapp { display: none; }
.klapp-schild { display: none; }

@media (max-width: 1000px) {
  .kopf__innen { min-height: 74px; flex-wrap: wrap; }
  .kopf .knopf--voll { margin-left: auto; }
  .klapp-schild {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 44px; padding: 10px; cursor: pointer;
    border: 1px solid var(--linie); border-radius: var(--kante); order: 3;
  }
  .klapp-schild span { display: block; height: 2px; background: var(--tinte); }
  .menue { order: 4; flex-basis: 100%; display: none; }
  .klapp:checked ~ .menue { display: block; }
  .menue ul { flex-direction: column; gap: 0; padding: .4rem 0 1rem; }
  .menue a { padding: .9rem .5rem; border-bottom: 1px solid var(--linie); }
  .menue a::after { display: none; }
}

@media (max-width: 480px) {
  .kopf__innen { gap: .7rem; }
  .logo img { width: 132px; }
  .kopf .knopf--voll { padding: .6rem .9rem; font-size: .875rem; }
  .leiste__innen { justify-content: center; }
}

/* ---------------------------------------------------- Kopfbild, zweigeteilt */

/* Hier lag bis 2026-08-17 ein dekorativer Farbfleck. Er war am Abschnitt
   ausgerichtet statt am Inhaltsbereich und stand deshalb auf breiten
   Bildschirmen frei im Raum statt hinter dem Bild. Ersatzlos entfernt. */
.buehne { position: relative; background: var(--papier); overflow: hidden; }
.buehne__innen {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
}
@media (min-width: 940px) { .buehne__innen { grid-template-columns: 1.02fr .98fr; } }

.buehne h1 { max-width: 15ch; }
.buehne h1 em { font-style: normal; color: var(--azur); }
.buehne__lead { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); max-width: 52ch; margin-bottom: 2rem; }
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: .85rem; }

.buehne__bild { position: relative; }
.buehne__bild img {
  width: 100%; border-radius: var(--kante);
  box-shadow: var(--schatten-xl);
}
/* Versetzter Rahmen hinter dem Bild, rein dekorativ */
.buehne__bild::after {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 2px solid var(--azur); border-radius: var(--kante); z-index: -1;
}

/* Kennzahlenzeile unter der Bühne */
.zahlen {
  display: grid; gap: 1px; background: var(--linie);
  border-block: 1px solid var(--linie);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.zahlen div { background: var(--papier); padding: 1.6rem 1.4rem; }
.zahlen dt {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--azur-tief); font-weight: 700;
}
.zahlen dd { margin: .4rem 0 0; color: var(--tinte); font-weight: 700; font-size: 1.0625rem; }

/* ---------------------------------------------------- Leistungen als Reihen */

.reihe {
  display: grid; gap: clamp(1.75rem, 1rem + 4vw, 4rem); align-items: center;
  grid-template-columns: 1fr; padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) 0;
  border-bottom: 1px solid var(--linie);
}
.reihe:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .reihe { grid-template-columns: 1fr 1fr; }
  .reihe--gedreht .reihe__bild { order: -1; }
}
.reihe__bild img { width: 100%; border-radius: var(--kante); box-shadow: var(--schatten); }
.reihe__nr {
  display: block; font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem); font-weight: 800;
  line-height: 1; color: var(--azur-zart); letter-spacing: -.04em; margin-bottom: .35rem;
}
.reihe h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); margin-bottom: .55rem; }
.reihe p { color: var(--tinte-2); }

.haken { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.haken li { position: relative; padding-left: 1.9rem; margin-bottom: .5rem; }
.haken li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--azur); border-bottom: 2.5px solid var(--azur);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------- Breites Band */

.band { position: relative; overflow: hidden; background: var(--tinte); }
.band img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .3;
}
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,34,51,.93), rgba(13,34,51,.6));
}
.band__innen {
  position: relative; z-index: 2; padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0;
  color: #fff; text-align: center;
}
.band__innen h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.band__innen p { color: #c6d6e2; max-width: 62ch; margin-inline: auto; }

/* ---------------------------------------------------- Branchenliste */

.branchen { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.branchen li {
  padding: .55rem 1.1rem; border: 1px solid var(--linie); border-radius: 100px;
  background: var(--papier); font-size: .95rem; color: var(--tinte-2);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
@media (hover: hover) {
  .branchen li:hover { border-color: var(--azur); color: var(--azur-dunkel); transform: translateY(-2px); }
}

/* ---------------------------------------------------- Detailkacheln */

.kacheln { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .kacheln--3 { grid-template-columns: repeat(3, 1fr); } }
.kachel {
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--kante);
  padding: 1.75rem 1.8rem; position: relative; overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.kachel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--azur); transform: scaleY(0); transform-origin: top;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  .kachel:hover { border-color: var(--azur-zart); box-shadow: var(--schatten); transform: translateY(-3px); }
  .kachel:hover::before { transform: scaleY(1); }
}
.kachel h3 { margin-bottom: .5rem; }
.kachel p { color: var(--tinte-3); margin-bottom: 0; font-size: 1rem; }

/* ---------------------------------------------------- Nutzenliste */

.nutzen { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 820px) { .nutzen { grid-template-columns: 1fr 1fr; } }
.nutzen li {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--kante); padding: 1.15rem 1.35rem;
}
.nutzen li::before {
  content: "+"; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--azur-hauch); color: var(--azur-dunkel);
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem;
}

/* ---------------------------------------------------- Testfeld */

.test {
  background: var(--azur); color: #fff; border-radius: var(--kante);
  padding: clamp(1.9rem, 1.2rem + 3vw, 3.25rem);
  display: grid; gap: 1.5rem 3rem; align-items: center; grid-template-columns: 1fr;
}
@media (min-width: 880px) { .test { grid-template-columns: 1.5fr auto; } }
.test h2 { color: #fff; margin-bottom: .4rem; }
.test p { color: rgba(255,255,255,.9); margin-bottom: 0; }

/* ---------------------------------------------------- Fragen */

.fragen { max-width: 940px; }
.fragen details {
  border-bottom: 1px solid var(--linie); background: transparent;
}
.fragen details:first-child { border-top: 1px solid var(--linie); }
.fragen summary {
  cursor: pointer; list-style: none; padding: 1.35rem 3.25rem 1.35rem 0;
  font-weight: 700; color: var(--tinte); position: relative; font-size: 1.0625rem;
  transition: color .2s ease;
}
.fragen summary:hover { color: var(--azur-dunkel); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::before,
.fragen summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; background: var(--azur);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.fragen summary::before { width: 16px; height: 2px; transform: translateY(-50%); }
.fragen summary::after  { width: 2px; height: 16px; transform: translate(-7px,-50%); }
.fragen details[open] summary::after { transform: translate(-7px,-50%) rotate(90deg); opacity: 0; }
.fragen .antwort { padding: 0 3.25rem 1.5rem 0; color: var(--tinte-3); }
.fragen .antwort > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------- Weiterführend */

.weiter { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .weiter { grid-template-columns: 1fr 1fr; } }
.weiter a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 1.6rem; border: 1px solid var(--linie); border-radius: var(--kante);
  background: var(--papier); text-decoration: none; color: var(--tinte); font-weight: 700;
  transition: border-color .2s ease, transform .2s ease;
}
.weiter a span { display: block; font-weight: 400; font-size: .94rem; color: var(--tinte-3); margin-top: .25rem; }
.weiter a em { font-style: normal; color: var(--azur); font-size: 1.4rem; transition: transform .25s ease; }
@media (hover: hover) {
  .weiter a:hover { border-color: var(--azur); transform: translateX(3px); }
  .weiter a:hover em { transform: translateX(5px); }
}

/* ---------------------------------------------------- Kontakt */

.kontakt { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 920px) { .kontakt { grid-template-columns: .8fr 1.2fr; } }

.daten { list-style: none; margin: 0 0 2rem; padding: 0; }
.daten li { padding: 1rem 0; border-bottom: 1px solid var(--linie); }
.daten strong {
  display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--azur-tief); margin-bottom: .3rem;
}
.daten a { color: var(--tinte); text-decoration: none; font-weight: 700; font-size: 1.0625rem; }
.daten a:hover { color: var(--azur-dunkel); }

form {
  background: var(--nebel); border: 1px solid var(--linie); border-radius: var(--kante);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.feld { margin-bottom: 1.15rem; }
.feld-reihe { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .feld-reihe { grid-template-columns: 1fr 1fr; } }
label { display: block; font-weight: 600; font-size: .94rem; color: var(--tinte); margin-bottom: .4rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; padding: .85rem 1rem; font: inherit; color: var(--tinte);
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--kante);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--azur); box-shadow: 0 0 0 4px var(--azur-hauch); outline: none;
}
textarea { min-height: 150px; resize: vertical; }
.zustimmung { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400; font-size: .94rem; color: var(--tinte-3); }
.zustimmung input { margin-top: .3rem; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--azur); }
.falle { position: absolute; left: -9999px; }
.hinweis-klein { font-size: .875rem; color: var(--tinte-3); margin: 1rem 0 0; }

/* ---------------------------------------------------- Karte */

.karte { margin-top: 3rem; }
.karte figure { margin: 0; }
.karte img { width: 100%; border-radius: var(--kante); border: 1px solid var(--linie); }
.karte figcaption {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center;
  justify-content: space-between; margin-top: .85rem; font-size: .875rem; color: var(--tinte-3);
}
.karte .routen { display: flex; flex-wrap: wrap; gap: .6rem; }
.karte .routen a {
  display: inline-flex; align-items: center; padding: .5rem 1rem;
  border: 1px solid var(--linie); border-radius: var(--kante); background: var(--papier);
  color: var(--tinte); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.karte .routen a:hover { border-color: var(--azur); color: var(--azur-dunkel); }

/* ---------------------------------------------------- Fließtext */

.text { max-width: 78ch; }
.text h2 { margin-top: 2.6rem; font-size: 1.5rem; }
.text h3 { margin-top: 1.8rem; }
.text ul, .text ol { padding-left: 1.35rem; margin-bottom: 1.2rem; }
.text li { margin-bottom: .4rem; }
.text table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .96rem; }
.text th, .text td { text-align: left; padding: .75rem .85rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.text th { background: var(--nebel); font-weight: 700; color: var(--tinte); }
.hinweis {
  border-left: 3px solid var(--azur); background: var(--azur-hauch);
  padding: 1.15rem 1.35rem; border-radius: 0 var(--kante) var(--kante) 0; margin-bottom: 1.5rem;
}
.hinweis > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------- Fußbereich */

.fuss { background: var(--tinte); color: #94aabb; padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 2rem; font-size: .96rem; }
.fuss__oben { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .fuss__oben { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h2 { color: #fff; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem; }
.fuss img { width: 158px; margin-bottom: 1.2rem; opacity: .92; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .55rem; }
.fuss a { color: #dce8f0; text-decoration: none; }
.fuss a:hover { color: var(--azur); text-decoration: underline; }
.fuss__unten {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: .88rem;
}

/* ---------------------------------------------------- Brotkrumen */

.krumen { background: var(--nebel); border-bottom: 1px solid var(--linie); font-size: .875rem; }
.krumen ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: .85rem 0; }
.krumen li { display: flex; align-items: center; gap: .45rem; color: var(--tinte-3); }
.krumen li + li::before { content: "/"; color: var(--azur); }
.krumen a { color: var(--tinte-3); text-decoration: none; }
.krumen a:hover { color: var(--azur-dunkel); text-decoration: underline; }
.krumen [aria-current="page"] { color: var(--tinte); font-weight: 600; }

/* ---------------------------------------------------- Aktionsleiste Handy */

.aktion { display: none; }
@media (max-width: 900px) {
  .aktion {
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: .7rem max(.9rem, env(safe-area-inset-left))
             calc(.7rem + env(safe-area-inset-bottom)) max(.9rem, env(safe-area-inset-right));
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--linie); box-shadow: 0 -4px 20px rgba(13,34,51,.10);
  }
  .aktion a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 50px; border-radius: var(--kante); text-decoration: none;
    font-weight: 700; font-size: 1rem; border: 2px solid transparent;
  }
  .aktion__ruf { background: var(--azur); color: #fff; }
  .aktion__frage { border-color: var(--linie); color: var(--tinte); background: var(--papier); }
  body { padding-bottom: 84px; }
  .footer, .fuss { padding-bottom: 2rem; }
  .fuss__unten { margin-bottom: 1rem; }
}

@media (max-width: 900px) {
  .daten a, .fuss li a, .leiste a, .krumen a { display: inline-block; min-height: 44px; line-height: 44px; }
  .fuss li { margin-bottom: 0; }
  .fragen summary { padding-block: 1.5rem; }
}

/* ==========================================================
   Bewegung
   Animiert werden nur 'transform' und 'opacity', deshalb kein
   Layoutsprung. Scroll-Effekte stehen in einem @supports-Block,
   ohne Unterstützung bleibt alles sichtbar.
   ========================================================== */

@keyframes auf     { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes vonlinks{ from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: none; } }
@keyframes vonrechts{ from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: none; } }
@keyframes setzen  { from { transform: translateY(14px); } to { transform: none; } }
@keyframes zoom    { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes langsam { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes ring    { 0% { box-shadow: 0 0 0 0 rgba(45,170,225,.55); } 60% { box-shadow: 0 0 0 18px rgba(45,170,225,0); } 100% { box-shadow: 0 0 0 0 rgba(45,170,225,0); } }
@keyframes strich  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kopfschatten { from { box-shadow: 0 0 0 rgba(13,34,51,0); } to { box-shadow: 0 6px 22px rgba(13,34,51,.09); } }

@media (prefers-reduced-motion: no-preference) {

  /* Bühne: Text staffelt sich, Bild kommt von rechts */
  .buehne__innen > div > * { animation: auf .75s cubic-bezier(.22,.61,.36,1) both; }
  .buehne__innen > div > *:nth-child(1) { animation-delay: .06s; }
  .buehne__innen > div > *:nth-child(2) { animation-delay: .16s; }
  .buehne__innen > div > *:nth-child(3) { animation-delay: .28s; }
  .buehne__innen > div > *:nth-child(4) { animation-delay: .40s; }
  .buehne__bild { animation: vonrechts .95s cubic-bezier(.22,.61,.36,1) .2s both; }

  .zahlen > div { animation: auf .6s ease-out both; }
  .zahlen > div:nth-child(1) { animation-delay: .55s; }
  .zahlen > div:nth-child(2) { animation-delay: .65s; }
  .zahlen > div:nth-child(3) { animation-delay: .75s; }
  .zahlen > div:nth-child(4) { animation-delay: .85s; }

  /* Band: das Bild zieht sehr langsam an */
  .band img { animation: langsam 30s ease-in-out infinite alternate; }

  /* Aufmerksamkeitsring, getrennt nach Gerät */
  @media (min-width: 901px) and (hover: hover) {
    .buehne__knoepfe .knopf--voll { animation: ring 6s ease-out 2.4s infinite; }
  }
  @media (max-width: 900px) {
    .aktion__ruf { animation: ring 6s ease-out 3s infinite; }
  }

  /* Pfeil im Knopf wandert beim Zeigen */
  @media (hover: hover) {
    .knopf:hover { transform: translateY(-2px); }
    .knopf:hover .knopf__pfeil { transform: translateX(5px); }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .abschnitt > .wrap > .marke,
    .abschnitt > .wrap > h2,
    .abschnitt > .wrap > .lead,
    .abschnitt > .wrap > p,
    .abschnitt > .wrap.text > *,
    .kacheln > .kachel,
    .nutzen > li,
    .branchen > li,
    .fragen > details,
    .weiter > a,
    .karte figure,
    .kontakt > *,
    .test,
    .band__innen > * {
      animation: auf .85s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 48%;
    }

    /* Leistungsreihen laufen abwechselnd von links und rechts ein */
    .reihe > div:first-child { animation: vonlinks .9s linear both; animation-timeline: view(); animation-range: entry 0% entry 52%; }
    .reihe > div:last-child  { animation: vonrechts .9s linear both; animation-timeline: view(); animation-range: entry 0% entry 52%; }
    .reihe--gedreht > div:first-child { animation-name: vonrechts; }
    .reihe--gedreht > div:last-child  { animation-name: vonlinks; }

    /* Die große Nummer wächst beim Erscheinen */
    .reihe__nr { animation: zoom .8s linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }

    /* Versatz innerhalb einer Reihe, damit nicht alles gleichzeitig kommt */
    .kacheln > .kachel:nth-child(2n)   { animation-range: entry 5% entry 55%; }
    .kacheln > .kachel:nth-child(3n)   { animation-range: entry 9% entry 60%; }
    .branchen > li:nth-child(3n+2)     { animation-range: entry 4% entry 52%; }
    .branchen > li:nth-child(3n)       { animation-range: entry 8% entry 56%; }

    .kopf { animation: kopfschatten linear both; animation-timeline: scroll(root); animation-range: 0 150px; }
  }
}

@media print {
  .aktion, .kopf, .leiste, .band img { display: none !important; }
}

/* ==========================================================
   Geteilte Bühne mit Anfrageformular
   Links Bild mit Überlagerung, rechts dunkle Fläche mit
   heller Formularkarte. Die Innenabstände richten sich am
   Inhaltsbereich aus, damit Text und Karte auf einer Linie
   mit dem übrigen Seiteninhalt stehen.
   ========================================================== */

/* Ein durchgehendes Hintergrundbild ueber die volle Breite. Der fruehere
   harte Schnitt in der Mitte wirkte wie ein Darstellungsfehler. Text und
   Formularkarte liegen jetzt beide auf dem Bild, ausgerichtet am normalen
   Inhaltsbereich ueber die Klasse .wrap. Damit entfaellt auch jede
   Sonderrechnung fuer die Innenabstaende. */
.buehne2 { position: relative; overflow: hidden; background: var(--tinte); }
.buehne2__hg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.buehne2::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(13,34,51,.93) 0%, rgba(13,34,51,.86) 38%,
              rgba(13,34,51,.70) 62%, rgba(20,96,127,.62) 100%);
}
.buehne2__innen {
  position: relative; z-index: 2;
  display: grid; gap: clamp(2rem, 1.5rem + 3vw, 3.5rem); align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0;
}
@media (min-width: 1000px) {
  .buehne2__innen { grid-template-columns: minmax(0, 1fr) 480px; }
}

.buehne2__text { color: #fff; }
.buehne2__text h1 { color: #fff; max-width: 22ch; margin-bottom: .7rem; }
/* 22ch statt 16ch: die H1 traegt seit 2026-08-18 das Hauptkeyword und ist
   dadurch laenger. Bei 16ch waere daraus eine sehr schmale hohe Saeule geworden. */
/* In dieser Buehne ist die Ueberschrift bewusst einfarbig. Das farbige
   Einzelwort war das Erkennungsmerkmal der projektbau-Seite. */
.buehne2__text h1 em { font-style: normal; color: inherit; }
.buehne2__text .marke { color: var(--azur); }
.buehne2__text .marke::before { background: var(--azur); }
.buehne2__unter { color: #cddbe6; font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); max-width: 46ch; }

.vorteile-kurz { list-style: none; margin: 1.6rem 0 2rem; padding: 0; display: grid; gap: .55rem; }
.vorteile-kurz li { position: relative; padding-left: 1.9rem; color: #e3edf4; font-weight: 600; }
.vorteile-kurz li::before {
  content: ""; position: absolute; left: 2px; top: .5em;
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--azur); border-bottom: 2.5px solid var(--azur);
  transform: rotate(-45deg);
}

.buehne2__aktion { display: flex; flex-wrap: wrap; gap: 1.35rem 1.9rem; align-items: center; }
.buehne2__tel { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
.buehne2__tel span { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--azur); font-weight: 700; }
.buehne2__tel:hover { color: var(--azur); }

.buehne2__karte {
  background: var(--papier); border-radius: var(--kante);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.buehne2__karte form { background: transparent; border: 0; padding: 0; }
.buehne2__karte h2 { font-size: 1.6rem; margin-bottom: .35rem; }
.buehne2__karte input[type="text"], .buehne2__karte input[type="email"] { background: var(--nebel); }
.buehne2__karte .hinweis-klein { margin-top: .9rem; }
/* Uebersichtskarte der Leistungsseiten: dieselbe Karte, statt des Formulars
   der Leistungsumfang in Kurzform. */
.buehne2__karte .haken { margin-bottom: 0; }
.buehne2__karte .haken li { margin-bottom: .7rem; }
.buehne2__karte .haken li:last-child { margin-bottom: 0; }
.karte-marke {
  display: inline-block; background: var(--azur-hauch); color: var(--azur-dunkel);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 100px; margin-bottom: .9rem;
}

/* Vertrauensleiste, bewusst mit belegbaren Aussagen statt Bewertungssiegeln */
.vertrauen { background: var(--papier); border-bottom: 1px solid var(--linie); }
.vertrauen ul {
  list-style: none; margin: 0; padding: 1.5rem 0; display: grid; gap: .9rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.vertrauen li {
  position: relative; padding-left: 2rem; color: var(--tinte-2);
  font-size: .96rem; font-weight: 600;
}
.vertrauen li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 12px; height: 7px;
  border-left: 2.5px solid var(--azur); border-bottom: 2.5px solid var(--azur);
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .buehne2__hg { animation: langsam 34s ease-in-out infinite alternate; }
  /* Die Buehne animiert bewusst NUR die Position, nicht die Deckkraft.
     Ein Text, der bei Deckkraft null startet, ist unsichtbar, solange das
     Stylesheet noch laedt. Bei der wichtigsten Aussage der Seite ist das
     nicht hinnehmbar. Hier ist der Text sofort da und setzt sich nur. */
  .buehne2__text > * { animation: setzen .5s cubic-bezier(.22,.61,.36,1) both; }
  .buehne2__text > *:nth-child(1) { animation-delay: .02s; }
  .buehne2__text > *:nth-child(2) { animation-delay: .07s; }
  .buehne2__text > *:nth-child(3) { animation-delay: .12s; }
  .buehne2__text > *:nth-child(4) { animation-delay: .17s; }
  .buehne2__text > *:nth-child(5) { animation-delay: .22s; }
  .buehne2__karte { animation: vonrechts .6s cubic-bezier(.22,.61,.36,1) .12s both; }
  @media (min-width: 901px) and (hover: hover) {
    .buehne2__karte .knopf--voll { animation: ring 6s ease-out 2.6s infinite; }
  }
}

/* ==========================================================
   Mehr Bewegung, ergänzt 2026-08-18
   Weiterhin ohne JavaScript. Getrennte Transform-Eigenschaften
   ('translate' und 'scale') statt 'transform', damit Dauerlauf
   und Scroll-Effekt nebeneinander auf demselben Element laufen
   können, ohne sich zu überschreiben.
   ========================================================== */

@keyframes hg-schweben { from { translate: 0 -6%; } to { translate: 0 6%; } }
@keyframes licht       { from { translate: -4% -3%; } to { translate: 6% 4%; } }
@keyframes setzen-weit { from { translate: 0 26px; } to { translate: 0 0; } }
@keyframes karte-auf   { from { opacity: 0; translate: 0 34px; scale: .97; }
                         to   { opacity: 1; translate: 0 0;   scale: 1; } }
@keyframes nr-auf      { from { opacity: 0; scale: .88; } to { opacity: 1; scale: 1; } }
@keyframes nr-drift    { from { translate: 0 30px; }      to { translate: 0 -30px; } }
@keyframes bild-heran  { from { scale: 1.08; }            to { scale: 1; } }

/* ---------- Bühne: Hintergrund bekommt Reserve für den Versatz ---------- */

.buehne2__hg { height: 120%; top: -10%; bottom: auto; }

/* Ein sehr langsam wanderndes Licht, damit die dunkle Fläche nicht tot wirkt.
   Liegt zwischen Verlauf (::after) und Inhalt (z-index 2). */
.buehne2::before {
  content: ""; position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 54% at 24% 40%, rgba(45,170,225,.20), transparent 70%);
}

/* Das Schlüsselwort bekommt einen Strich, der sich aufzieht. */
.buehne2__text h1 em { position: relative; display: inline-block; }
.buehne2__text h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: 4px;
  background: var(--azur); border-radius: 2px; transform-origin: left center;
  transform: scaleX(0);
}

/* ---------- Leistungsreihen: Nummer als Wasserzeichen ---------- */

.reihe > div:first-child { position: relative; padding-top: 1.7rem; }
.reihe__nr {
  position: absolute; top: -.18em; left: -.04em; z-index: 0; margin: 0;
  font-size: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  color: var(--azur-hauch); pointer-events: none; user-select: none;
}
.reihe > div:first-child > *:not(.reihe__nr) { position: relative; z-index: 1; }

/* Rahmen, damit das heranfahrende Bild nicht übersteht */
.reihe__bild { overflow: hidden; border-radius: var(--kante); }
.reihe__bild img { display: block; border-radius: 0; }

@media (prefers-reduced-motion: no-preference) {

  /* Bühne: deutlichere Staffelung als zuvor. Weiterhin ohne Deckkraft,
     der wichtigste Text der Seite darf nie unsichtbar starten. */
  .buehne2__text > * { animation: setzen-weit .62s cubic-bezier(.22,.61,.36,1) both; }
  .buehne2__text > *:nth-child(1) { animation-delay: .05s; }
  .buehne2__text > *:nth-child(2) { animation-delay: .15s; }
  .buehne2__text > *:nth-child(3) { animation-delay: .25s; }
  .buehne2__text > *:nth-child(4) { animation-delay: .35s; }
  .buehne2__text > *:nth-child(5) { animation-delay: .45s; }

  .buehne2__text h1 em::after { animation: strich .7s cubic-bezier(.22,.61,.36,1) .6s both; }

  /* Die Formularkarte kommt eigenständig, nicht mehr im Gleichschritt */
  .buehne2__karte { animation: karte-auf .8s cubic-bezier(.22,.61,.36,1) .38s both; }

  .buehne2::before { animation: licht 18s ease-in-out infinite alternate; }
}

/* Ohne Bewegungswunsch bleibt der Strich sichtbar statt zusammengezogen */
@media (prefers-reduced-motion: reduce) {
  .buehne2__text h1 em::after { transform: scaleX(1); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Der Bühnenhintergrund wandert langsamer als die Seite.
       Dauerzoom über 'scale', Versatz über 'translate', kein Konflikt. */
    .buehne2__hg {
      animation: langsam 34s ease-in-out infinite alternate, hg-schweben linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }

    /* Nummer: erscheint und driftet danach gegen die Scrollrichtung */
    .reihe__nr {
      animation: nr-auf .8s linear both, nr-drift linear both;
      animation-timeline: view(), view();
      animation-range: entry 0% entry 42%, cover 0% cover 100%;
    }

    /* Bild fährt beim Durchscrollen sanft heran */
    .reihe__bild img {
      animation: bild-heran linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }

    /* Hakenliste erscheint Punkt für Punkt */
    .haken li {
      animation: auf .55s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
    .haken li:nth-child(2) { animation-range: entry 5% entry 43%; }
    .haken li:nth-child(3) { animation-range: entry 10% entry 48%; }
    .haken li:nth-child(4) { animation-range: entry 15% entry 53%; }
  }
}

/* ==========================================================
   Bühne verstärken, 2026-08-18
   Der Dauerzoom lief über 34 s auf nur 1,09 und war damit kaum
   wahrnehmbar. Ersetzt durch einen echten Schwenk. Weiterhin
   ohne JavaScript.
   ========================================================== */

@property --winkel { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

@keyframes kenburns {
  from { transform: scale(1.04) translate(-1.6%, -1%); }
  to   { transform: scale(1.16) translate(1.6%,  1%); }
}
@keyframes licht2  { from { translate:  5%  3%; } to { translate: -6% -4%; } }
@keyframes haken   { from { transform: rotate(-45deg) scale(0); }
                     to   { transform: rotate(-45deg) scale(1); } }
@keyframes punkt   { from { opacity: 0; translate: 0 16px; }
                     to   { opacity: 1; translate: 0 0; } }
@keyframes winkel  { to { --winkel: 360deg; } }

/* Zweiter, gegenläufiger Lichtpunkt. Liegt im Stapel von .buehne2__innen
   hinter Text und Karte, aber über Bild und Verlauf. */
.buehne2__innen::before {
  content: ""; position: absolute; inset: -22% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 50% at 78% 62%, rgba(45,170,225,.17), transparent 72%);
}

/* Wandernder Lichtrand an der Formularkarte. Der Farbring wird über eine
   Maske auf die Randstärke beschnitten, deshalb kein zusätzliches Element. */
.buehne2__karte { position: relative; }
.buehne2__karte::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--winkel), transparent 0%,
              rgba(45,170,225,.85) 11%, rgba(255,255,255,.6) 15%, transparent 27%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

@media (prefers-reduced-motion: no-preference) {

  /* Echter Ken-Burns statt kaum sichtbarem Zoom: 22 s, Schwenk und Zoom.
     Nutzt 'transform', der Scroll-Versatz nutzt 'translate', kein Konflikt. */
  .buehne2__hg { animation: kenburns 22s ease-in-out infinite alternate; }

  .buehne2__innen::before { animation: licht2 24s ease-in-out infinite alternate; }

  .buehne2__karte::after { animation: winkel 7s linear infinite; }

  /* Die drei Vorteilspunkte kommen einzeln, der Haken zeichnet sich dabei */
  .vorteile-kurz li { animation: punkt .5s cubic-bezier(.22,.61,.36,1) both; }
  .vorteile-kurz li:nth-child(1) { animation-delay: .42s; }
  .vorteile-kurz li:nth-child(2) { animation-delay: .54s; }
  .vorteile-kurz li:nth-child(3) { animation-delay: .66s; }

  .vorteile-kurz li::before { transform-origin: left bottom;
                              animation: haken .38s cubic-bezier(.22,.61,.36,1) both; }
  .vorteile-kurz li:nth-child(1)::before { animation-delay: .60s; }
  .vorteile-kurz li:nth-child(2)::before { animation-delay: .72s; }
  .vorteile-kurz li:nth-child(3)::before { animation-delay: .84s; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Schwenk und Scroll-Versatz laufen gemeinsam weiter */
    .buehne2__hg {
      animation: kenburns 22s ease-in-out infinite alternate, hg-schweben linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
  }
}