/* Laplace Systems – Website
   Farben und Schrift nach Brandbook (Stand 15.07.2024) */

@font-face { font-family: "Roboto"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/roboto-light.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/roboto-regular.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/roboto-bold.woff2") format("woff2"); }

:root {
  --lazur: #006B7B;
  --lazur-light: #2D9EAA;
  --lazur-deep: #004A55;
  --lazur-night: #002128;
  --silver: #A9B8C3;
  --steel: #798C98;
  --deep-gray: #4B5F6A;
  --yellow: #E69531;
  --schwarz: #000;
  --weiss: #fff;
  --nebel: #EEF2F4;         /* aufgehellter Silver-Ton für helle Flächen */

  --schrift: "Roboto", Arial, sans-serif;
  --breite: 74rem;
  --rand: clamp(1rem, 4vw, 3rem);
  --abstand: clamp(4rem, 9vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--schwarz);
  background: var(--weiss);
  text-align: left;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lazur); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--lazur-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: 400; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 300; color: var(--lazur); }
h3 { font-size: 1.3rem; color: var(--lazur); }
h4 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--yellow); color: var(--schwarz); padding: .6rem 1rem; }
.skip:focus { top: 1rem; }

/* ---------- Kopf ---------- */
.kopf { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.kopf__innen {
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin: 0 auto; padding: 1.5rem var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.kopf__logo { display: block; padding: 11px; margin: -11px; } /* Schutzzone 25 % */
.kopf__logo img { width: 40px; height: 40px; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2.25rem; }
.nav a { color: var(--weiss); text-decoration: none; font-size: 1rem; padding: .4rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--silver); }
.nav a[aria-current="page"] { border-bottom-color: var(--lazur-light); }
.nav a.nav__kontakt { border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: .5rem 1.2rem; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.nav a.nav__kontakt:hover, .nav a.nav__kontakt[aria-current="page"] { background: var(--weiss); color: var(--lazur-night); border-color: var(--weiss); }

.kopf__menu { display: none; }

@media (max-width: 760px) {
  .kopf__menu {
    display: inline-flex; align-items: center; gap: .6rem;
    background: none; border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
    color: var(--weiss); font: inherit; font-size: .95rem; padding: .45rem 1rem; cursor: pointer;
  }
  .kopf__menu-linien, .kopf__menu-linien::before { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
  .kopf__menu-linien::before { content: ""; position: absolute; top: 5px; }
  .kopf__menu-linien { top: -2px; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--lazur-night); padding: .5rem var(--rand) 1.5rem; }
  .nav.offen { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: .9rem 0; font-size: 1.2rem; border-bottom: 1px solid rgba(169,184,195,.25); }
  .nav a[aria-current="page"] { color: var(--lazur-light); border-bottom-color: rgba(169,184,195,.25); }
  .nav a.nav__kontakt { border: 0; border-bottom: 1px solid rgba(169,184,195,.25); border-radius: 0; padding: .9rem 0; }
  .nav a.nav__kontakt:hover { background: none; color: var(--weiss); }
}

/* ---------- Hero (Startseite) ---------- */
.hero {
  position: relative; color: var(--weiss); background: var(--lazur-deep);
  min-height: min(100svh, 62rem); display: flex; align-items: center; overflow: hidden;
}
.hero__bild, .hero__bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bild img { object-fit: cover; object-position: 70% 50%; }
.hero__innen {
  position: relative; width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto;
  padding: 7rem var(--rand) clamp(3rem, 8vh, 6rem);
  display: grid; grid-template-columns: minmax(0, 46rem);
}
.hero__titel {
  font-weight: 300; font-size: clamp(2.6rem, 6.4vw, 5.25rem); line-height: 1.04;
  letter-spacing: -.01em; margin: 0 0 1.5rem; color: var(--weiss);
}
.hero__lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 300; max-width: 30em; color: #DCE6EB; margin-bottom: 2.25rem; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: .9rem; margin: 0; }

@media (max-width: 800px) {
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,33,40,.15) 0%, rgba(0,33,40,.75) 70%); }
  .hero__innen { z-index: 1; }
  .hero__bild img { object-position: 78% 50%; }
  .hero__innen { padding-top: 10rem; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-block; font: inherit; font-size: 1rem; font-weight: 700; line-height: 1;
  padding: 1rem 1.6rem; border-radius: 999px; text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.knopf--akzent { background: var(--yellow); color: var(--schwarz); }
.knopf--akzent:hover { background: #F0A64A; color: var(--schwarz); text-decoration: none; }
.knopf--linie { border-color: rgba(255,255,255,.7); color: var(--weiss); font-weight: 400; }
.knopf--linie:hover { background: rgba(255,255,255,.1); color: var(--weiss); }
.knopf[disabled] { opacity: .6; cursor: progress; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--abstand) var(--rand); }
.abschnitt--hell { background: var(--nebel); }
.raster { max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem 4rem; }
.raster > :not(.abschnitt__titel) { grid-column: 2; }
.abschnitt__titel { grid-column: 1; grid-row: 1 / span 3; margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
@media (max-width: 900px) {
  .raster { grid-template-columns: 1fr; }
  .raster > :not(.abschnitt__titel), .abschnitt__titel { grid-column: 1; grid-row: auto; }
}

.einstieg { padding-bottom: 0; }
.einstieg__innen { max-width: var(--breite); margin: 0 auto; }
.einstieg__satz {
  font-size: clamp(1.45rem, 2.6vw, 2.15rem); font-weight: 300; line-height: 1.35;
  color: var(--lazur); max-width: 30em; margin: 0;
}

/* Leistungen: Wabe als Listenmarke */
.leistungen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.5rem; }
@media (max-width: 1000px) { .leistungen { grid-template-columns: 1fr; } }
.leistung { position: relative; padding-top: 1.25rem; border-top: 1px solid var(--silver); }
.leistung::before { content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 3px; background: var(--lazur-light); }
.leistung h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.leistung h3 a { text-decoration: none; }
.leistung h3 a:hover { text-decoration: underline; }
.leistung p { color: var(--deep-gray); margin: 0; }

/* Referenz-Band */
.referenz {
  position: relative; color: var(--weiss); background-color: var(--lazur);
  background-image: linear-gradient(90deg, rgba(0,107,123,.96) 0%, rgba(0,107,123,.85) 40%, rgba(0,107,123,.15) 75%), url("/assets/img/bild-arzt-tablet.webp");
  background-size: cover; background-position: right center; background-attachment: fixed;
  min-height: 78vh; display: flex; align-items: center;
}
.referenz__innen { position: relative; width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: var(--abstand) var(--rand); }
.referenz__innen > * { max-width: 34rem; }
.referenz h2 { color: var(--weiss); font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300; }
.referenz p { font-size: 1.2rem; font-weight: 300; }
.link-hell { color: var(--weiss); font-weight: 700; }
.link-hell:hover { color: var(--weiss); }
@media (hover: none), (max-width: 800px) {
  .referenz { background-attachment: scroll; min-height: 0; background-image: linear-gradient(rgba(0,107,123,.88), rgba(0,107,123,.88)), url("/assets/img/bild-arzt-tablet.webp"); }
}

.spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.spalten > div { border-top: 1px solid var(--silver); padding-top: 1.25rem; }
.spalten p { color: var(--deep-gray); margin: 0; }
@media (max-width: 900px) { .spalten { grid-template-columns: 1fr; } }

.newsliste { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.newsliste li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .25rem 2rem; padding: 1.1rem 0; border-top: 1px solid var(--silver); }
.newsliste li:last-child { border-bottom: 1px solid var(--silver); }
.newsliste time { color: var(--steel); }
.newsliste a { font-size: 1.15rem; text-decoration: none; }
.newsliste a:hover { text-decoration: underline; }
.newsliste p { grid-column: 2; margin: .25rem 0 0; color: var(--deep-gray); }
.newsliste--gross a { font-size: 1.35rem; }
@media (max-width: 640px) { .newsliste li { grid-template-columns: 1fr; } .newsliste p { grid-column: 1; } }

.abschluss { background: var(--lazur-deep); color: var(--weiss); padding: var(--abstand) var(--rand); }
.abschluss__innen { max-width: var(--breite); margin: 0 auto; }
.abschluss h2 { color: var(--weiss); font-size: clamp(2rem, 4vw, 3.2rem); }
.abschluss p { font-size: 1.15rem; font-weight: 300; }
.abschluss a:not(.knopf) { color: var(--weiss); }

/* ---------- Unterseiten ---------- */
.banner { position: relative; background: var(--lazur-night); color: var(--weiss); overflow: hidden; }
.banner__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,33,40,.85) 0%, rgba(0,33,40,.45) 55%, rgba(0,33,40,0) 100%); }
.banner__innen { position: relative; z-index: 1; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 10rem var(--rand) 4.5rem; }
.banner h1 { font-weight: 300; font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1.06; margin: 0; max-width: 16em; }
.banner__lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 300; color: #DCE6EB; max-width: 34em; margin: 1.25rem 0 0; }
.banner--flach h1 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 22em; }
.banner__meta { color: var(--silver); margin: 0 0 1rem; }
.banner__meta a { color: var(--weiss); }

.inhalt { max-width: calc(46rem + 2 * var(--rand)); margin: 0 auto; padding: var(--abstand) var(--rand); }
.inhalt--breit { max-width: calc(var(--breite) + 2 * var(--rand)); }
.inhalt h2 { margin-top: 2.5rem; }
.inhalt > h2:first-child, .inhalt h2:first-child { margin-top: 0; }
.inhalt h3 { margin-top: 2rem; }
.inhalt ul { padding-left: 1.2rem; }
.inhalt li { margin-bottom: .4rem; }
.gross { font-size: 1.35rem; font-weight: 300; line-height: 1.5; color: var(--lazur); }

.artikel p { font-size: 1.125rem; }
.artikel__zurueck { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--silver); }

ul.punkte { list-style: none; padding: 0; margin: 0 0 1.5rem; }
ul.punkte li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; }
ul.punkte li::before { content: ""; position: absolute; left: .25rem; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--lazur-light); }

.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 5rem; align-items: start; margin-bottom: 3rem; }
@media (max-width: 900px) { .zweispaltig { grid-template-columns: 1fr; } }

/* Lösungen */
.loesungen { padding: 0 var(--rand) var(--abstand); }
.sprungmarken { max-width: var(--breite); margin: 0 auto; border-bottom: 1px solid var(--silver); }
.sprungmarken ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 2rem; }
.sprungmarken a { display: block; padding: 1.1rem 0; text-decoration: none; color: var(--deep-gray); }
.sprungmarken a:hover { color: var(--lazur); }
.loesung { max-width: var(--breite); margin: 0 auto; padding-top: var(--abstand); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem 5rem; align-items: center; }
.loesung--gespiegelt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.loesung--gespiegelt .loesung__text { order: 2; }
.loesung__text { max-width: 40rem; }
.loesung__bild { margin: 0; }
.loesung__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
@media (max-width: 900px) {
  .loesung, .loesung--gespiegelt { grid-template-columns: 1fr; }
  .loesung--gespiegelt .loesung__text { order: 0; }
  .loesung__bild img { aspect-ratio: 16 / 9; }
}

/* Partnerlösungen: abgesetzt von den Eigenentwicklungen */
.partnerband { background: var(--lazur-deep); color: var(--weiss); margin: var(--abstand) calc(-1 * var(--rand)) calc(-1 * var(--abstand)); padding: var(--abstand) var(--rand); }
.partnerband__innen { max-width: var(--breite); margin: 0 auto; }
.partnerband__kopf { max-width: 42rem; margin-bottom: 3rem; }
.partnerband h2 { color: var(--weiss); }
.partnerband__kopf p { color: #D3E0E5; font-size: 1.1rem; font-weight: 300; margin: 0; }
.partnerband__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 800px) { .partnerband__kacheln { grid-template-columns: 1fr; } }
.partnerkachel { border: 1px solid rgba(169,184,195,.35); border-radius: 4px; padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; }
.partnerkachel h3 { color: var(--weiss); font-size: 1.4rem; font-weight: 300; margin: 0 0 .75rem; }
.partnerkachel p { color: #D3E0E5; }
.partnerkachel__partner { font-size: .9rem; color: var(--silver) !important; margin: 0 0 1rem; }
.partnerkachel__link { margin: auto 0 0; padding-top: .5rem; }
.partnerkachel__link a { color: var(--weiss); font-weight: 700; }
.partnerkachel__link a:hover { color: var(--weiss); }

.partnerzeile { margin: 3rem 0 0; padding: 1.1rem 1.4rem; background: var(--nebel); border-radius: 4px; color: var(--deep-gray); }
.partnerzeile span { font-weight: 700; color: var(--lazur-deep); margin-right: .5rem; }

/* G.A.L.L. */
.merkmale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 3rem; margin-bottom: 4rem; }
.merkmale > div { border-top: 1px solid var(--silver); padding-top: 1.1rem; }
.merkmale h3 { margin-top: 0; font-size: 1.15rem; }
.merkmale p { color: var(--deep-gray); margin: 0; }
@media (max-width: 1000px) { .merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .merkmale { grid-template-columns: 1fr; } }
.partnerhinweis { display: inline-block; font-size: .95rem; color: var(--deep-gray); border: 1px solid var(--silver); border-radius: 999px; padding: .35rem 1rem; margin-bottom: 1.5rem; }
.hinweisbox { background: var(--nebel); padding: clamp(1.5rem, 4vw, 3rem); border-left: 4px solid var(--lazur-light); }
.hinweisbox h2 { margin-top: 0; }

/* Kontakt */
.kontaktdaten address { font-style: normal; font-size: 1.15rem; margin-bottom: 1.5rem; }
.kontaktdaten dl { display: grid; grid-template-columns: 6rem 1fr; gap: .5rem 1rem; margin: 0; font-size: 1.15rem; }
.kontaktdaten dt { color: var(--steel); }
.kontaktdaten dd { margin: 0; }
.stellen { list-style: none; padding: 0; }
.stellen li { padding: 1rem 0; border-top: 1px solid var(--silver); display: flex; flex-direction: column; }
.stellen span { color: var(--steel); }

/* ---------- Formulare ---------- */
.formular { background: var(--nebel); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 4px; }
.formular h2 { margin-top: 0; font-size: 1.6rem; }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 520px) { .feldpaar { grid-template-columns: 1fr; } }
.feld { margin: 0 0 1.1rem; }
.feld label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.optional { font-weight: 400; color: var(--steel); }
.feld input:not([type=checkbox]), .feld textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .75rem .85rem; color: var(--schwarz);
  background: var(--weiss); border: 1px solid var(--steel); border-radius: 3px;
}
.feld input[type=file] { padding: .6rem; }
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--lazur); outline-offset: 0; border-color: var(--lazur); }
.feld textarea { resize: vertical; }
.feld__hilfe { display: block; font-size: .9rem; color: var(--deep-gray); margin-top: .35rem; }
.feld--check { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.feld--check input { width: 1.2rem; height: 1.2rem; margin: .2rem 0 0; accent-color: var(--lazur); }
.feld--check label { font-weight: 400; font-size: .95rem; margin: 0; }
.feld [aria-invalid="true"] { border-color: #A3231B; }
.feld__fehler { display: block; color: #A3231B; font-size: .9rem; margin-top: .3rem; }
.formular__status:empty { display: none; }
.formular__status { padding: .9rem 1rem; border-radius: 3px; margin: 1rem 0 0; }
.formular__status.ok { background: #E3F1F2; color: var(--lazur-deep); }
.formular__status.fehler { background: #FBE9E7; color: #A3231B; }
.cf-turnstile { margin: .5rem 0 0; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Fuß ---------- */
.fuss { background: var(--lazur-night); color: var(--silver); padding: 4.5rem var(--rand) 2rem; font-size: .975rem; }
.fuss a { color: var(--weiss); text-decoration: none; }
.fuss a:hover { text-decoration: underline; color: var(--weiss); }
.fuss__innen { max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: 10rem 1fr 1fr 1.2fr; gap: 2.5rem; align-items: start; }
.fuss__marke img { width: 96px; height: auto; }
.fuss__adresse { font-style: normal; }
.fuss__adresse strong { color: var(--weiss); }
.fuss__links { display: flex; gap: 3rem; }
.fuss__links ul { list-style: none; margin: 0; padding: 0; }
.fuss__links li { margin-bottom: .35rem; }
.fuss__copy { max-width: var(--breite); margin: 3.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(169,184,195,.2); font-size: .875rem; }
@media (max-width: 900px) { .fuss__innen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss__innen { grid-template-columns: 1fr; } }

/* ---------- Bewegung ---------- */
/* Kopfleiste läuft beim Scrollen mit */
.kopf { position: fixed; transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; }
.kopf__innen { transition: padding .35s ease; }
.kopf.fest { background: rgba(0, 33, 40, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(169,184,195,.15); }
.kopf.fest .kopf__innen { padding-top: .8rem; padding-bottom: .8rem; }
.kopf__logo img { transition: transform .35s ease; }
.kopf.fest .kopf__logo img { transform: scale(.82); }

/* Parallax-Bilder: etwas größer, damit beim Verschieben keine Kante sichtbar wird */
.parallax { will-change: transform; transform: translate3d(0, var(--py, 0px), 0) scale(1.14); }

@media (prefers-reduced-motion: no-preference) {
  /* Einstieg im Hero */
  .hero__titel, .hero__lead, .hero__aktionen { animation: hoch .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero__titel { animation-delay: .35s; }
  .hero__lead { animation-delay: .55s; }
  .hero__aktionen { animation-delay: .75s; }
  .banner h1, .banner__lead, .banner__meta { animation: hoch .8s cubic-bezier(.2,.7,.2,1) both; }
  .banner__lead { animation-delay: .15s; }

  /* Einblenden beim Scrollen */
  .zeigen { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--verzug, 0s); }
  .zeigen.sichtbar { opacity: 1; transform: none; }
  .loesung__bild.zeigen { transform: translateY(40px) scale(.97); }
  .loesung__bild.zeigen.sichtbar { transform: none; }

  /* Hover */
  .leistung::before { transition: width .5s cubic-bezier(.2,.7,.2,1); }
  .leistung:hover::before { width: 100%; }
  .spalten > div { position: relative; }
  .spalten > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 3px; background: var(--lazur-light); transition: width .5s cubic-bezier(.2,.7,.2,1); }
  .spalten > div:hover::before { width: 100%; }
  .loesung__bild { overflow: hidden; border-radius: 4px; }
  .loesung__bild img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .loesung__bild:hover img { transform: scale(1.05); }
  .partnerkachel { transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, background-color .4s ease; }
  .partnerkachel:hover { transform: translateY(-6px); border-color: var(--lazur-light); background: rgba(255,255,255,.04); }
  .newsliste li { transition: padding-left .35s ease, background-color .35s ease; }
  .newsliste li:hover { padding-left: .75rem; }
  .knopf { transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; }
  .knopf:hover { transform: translateY(-2px); }
  .knopf--akzent:hover { box-shadow: 0 8px 22px rgba(230,149,49,.35); }
}

@keyframes hoch { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hero-zoom { from { transform: scale(1.12); opacity: .4; } to { transform: none; opacity: 1; } }

/* Netz im Hero */
.hero__netz { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Satz füllt sich beim Scrollen */
.einstieg__satz .wort { color: var(--silver); transition: color .35s ease; }
.einstieg__satz .wort.an { color: var(--lazur); }

/* ---------- Feststehende Hintergründe: Inhalt scrollt darüber ---------- */
.hero, .banner, .abschluss, .partnerband {
  background-size: cover; background-repeat: no-repeat; background-attachment: fixed;
}
.hero { background-image: url("/assets/img/hero-waben.webp"); background-position: 70% center; }
.banner { background-image: linear-gradient(90deg, rgba(0,33,40,.85) 0%, rgba(0,33,40,.45) 55%, rgba(0,33,40,0) 100%), url("/assets/img/banner-welle.webp"); background-position: center 60%; }
.banner::after { display: none; }
.abschluss { background-image: linear-gradient(rgba(0,74,85,.88), rgba(0,74,85,.88)), url("/assets/img/banner-welle.webp"); background-position: center; }
.partnerband { background-image: linear-gradient(rgba(0,74,85,.92), rgba(0,74,85,.92)), url("/assets/img/hero-waben.webp"); background-position: center; }
.abschluss { min-height: 60vh; display: flex; align-items: center; }
.abschluss__innen { width: 100%; }

/* Smartphones und Tablets können feste Hintergründe nicht zuverlässig darstellen */
@media (hover: none), (max-width: 800px) {
  .hero, .banner, .abschluss, .partnerband { background-attachment: scroll; }
  .hero { background-image: url("/assets/img/hero-waben-1200.webp"); background-position: 78% center; }
  .banner { background-image: linear-gradient(90deg, rgba(0,33,40,.85) 0%, rgba(0,33,40,.5) 100%), url("/assets/img/banner-welle-1200.webp"); }
  .abschluss { min-height: 0; }
}