/* Laroni Tech, Stylesheet
   Neuaufbau 2026-08-20, PHP ohne Framework, ohne externe Schriften.

   Farben aus der Logodatei ausgezaehlt, nicht geschaetzt:
   Laroni-Final-Positiv-2400px.jpg und Laroni-Logo-Komplett-LT-Negativ.svg.
   Der Verlauf im Logo laeuft von #d30535 nach #c10b25, das Wortzeichen
   traegt zusaetzlich #343333.

   Kontraste auf Weiss, berechnet nach WCAG:
     #d30535  5,5:1   Flaechen und feine Linien, auch fuer Text zulaessig
     #c10b25  6,3:1   Links und Auszeichnungen
     #9c0a1e  8,5:1   Knopf im Hover
   Damit ist kein Ton unterhalb der Schwelle von 4,5:1, anders als beim
   Schwesterprojekt Laroni Homes, wo das Orange nur auf Flaechen darf. */

:root {
  --rot:        #d30535;
  --rot-tief:   #c10b25;
  --rot-dunkel: #9c0a1e;
  --rot-hauch:  #fdeef1;
  --rot-zart:   #f7d2d9;

  --tinte:   #1c1b1b;
  --tinte-2: #43413f;
  --tinte-3: #6d6a67;

  --papier: #ffffff;
  --nebel:  #f7f6f5;
  --linie:  #e4e1de;

  --schatten:    0 1px 2px rgba(28,27,27,.05), 0 6px 18px rgba(28,27,27,.07);
  --schatten-xl: 0 2px 6px rgba(28,27,27,.07), 0 24px 60px rgba(28,27,27,.15);
  --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(--rot-tief); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--rot);
  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.6rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.35rem); }
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(--rot-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(--rot-tief); margin-bottom: 1rem;
}
.marke::before {
  content: ""; width: 28px; height: 2px; background: var(--rot); flex: 0 0 auto;
}

.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: #a9a4a0; 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: #efeae6; text-decoration: none; font-weight: 600; }
.leiste a:hover { color: var(--rot); }
.leiste span { color: #928d89; }

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

.menue ul { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.menue a {
  position: relative; display: block; padding: .65rem .9rem;
  color: var(--tinte-2); text-decoration: none; font-weight: 600; font-size: .97rem;
}
.menue a::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .35rem;
  height: 2px; background: var(--rot); 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(--rot-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(--rot-tief); color: #fff; }
.knopf--voll:hover { background: var(--rot-dunkel); }
.knopf--rand  { border-color: var(--linie); color: var(--tinte); background: var(--papier); }
.knopf--rand:hover { border-color: var(--rot); color: var(--rot-dunkel); }
.knopf--weiss { background: #fff; color: var(--rot-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: 150px; }
  .kopf .knopf--voll { padding: .6rem .9rem; font-size: .875rem; }
  .leiste__innen { justify-content: center; }
}

/* ---------------------------------------------------- Buehne mit Formular */

.buehne { position: relative; overflow: hidden; background: var(--tinte); }
.buehne__hg {
  position: absolute; inset: 0; width: 100%; height: 120%; top: -10%;
  object-fit: cover;
}
/* Verdunklung. Links, wo die Ueberschrift steht, bleibt sie hoch genug fuer
   weissen Text auf jedem Motiv. Nach rechts laeuft sie deutlich auf, damit
   die Wohnung im Bild ueberhaupt erkennbar bleibt: Das Motiv ist bei einer
   Seite fuer Vermieter Teil der Aussage und nicht blosse Tapete. */
.buehne::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(24,23,23,.92) 0%, rgba(24,23,23,.84) 38%,
              rgba(24,23,23,.62) 62%, rgba(124,10,28,.48) 100%);
}
.buehne::before {
  content: ""; position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 54% at 24% 40%, rgba(211,5,53,.20), transparent 70%);
}
.buehne__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) {
  .buehne__innen { grid-template-columns: minmax(0, 1fr) 480px; }
}
.buehne__innen::before {
  content: ""; position: absolute; inset: -22% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 50% at 78% 62%, rgba(211,5,53,.17), transparent 72%);
}

.buehne__text { color: #fff; }
.buehne__text h1 { color: #fff; max-width: 22ch; margin-bottom: .7rem; }
.buehne__text .marke { color: var(--rot); }
.buehne__text .marke::before { background: var(--rot); }
.buehne__unter { color: #ddd6d2; font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); max-width: 48ch; }

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

.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: #f0ebe8; font-weight: 600; }
.vorteile-kurz li::before {
  content: ""; position: absolute; left: 2px; top: .5em;
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--rot); border-bottom: 2.5px solid var(--rot);
  transform: rotate(-45deg);
}

.buehne__aktion { display: flex; flex-wrap: wrap; gap: 1.35rem 1.9rem; align-items: center; }
/* Auf schmalen Schirmen stehen Knopf und Adresse untereinander. Nebeneinander
   ruecken die zweizeilige Adresse und der Knopf sonst so eng zusammen, dass
   die Kleinschrift darueber am Knopfrand klebt. */
@media (max-width: 620px) {
  .buehne__aktion { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .buehne__aktion .knopf { width: 100%; }
}
.buehne__mail { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.buehne__mail span { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rot); font-weight: 700; }
.buehne__mail:hover { color: var(--rot); }

.buehne__karte {
  position: relative;
  background: var(--papier); border-radius: var(--kante);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  box-shadow: 0 20px 50px rgba(0,0,0,.32);
}
.buehne__karte form { background: transparent; border: 0; padding: 0; }
.buehne__karte h2 { font-size: 1.6rem; margin-bottom: .35rem; }
.buehne__karte input[type="text"], .buehne__karte input[type="email"] { background: var(--nebel); }
.buehne__karte .hinweis-klein { margin-top: .9rem; }
.buehne__karte .haken { margin-bottom: 0; }
.buehne__karte .haken li { margin-bottom: .7rem; }
.buehne__karte .haken li:last-child { margin-bottom: 0; }

/* Wandernder Lichtrand an der Formularkarte. */
.buehne__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(211,5,53,.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;
}

.karte-marke {
  display: inline-block; background: var(--rot-hauch); color: var(--rot-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 Siegeln */
.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(--rot); border-bottom: 2.5px solid var(--rot);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------- Kopf der Unterseiten */

.buehne--schmal .buehne__innen { grid-template-columns: 1fr; padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.buehne--schmal .buehne__text h1 { max-width: 20ch; }
/* Die Übersichtskarte der Unterseiten steht allein in der Spalte. Ohne Grenze
   liefe sie über die volle Seitenbreite und wirkte dadurch leer. */
.buehne--schmal .buehne__karte { max-width: 760px; }

/* Jede Unterseite trägt ein eigenes Motiv.
   Die Deckkraft ist bewusst niedriger als auf der Startseite: Dort liegt die
   helle Formularkarte über der rechten Bildhälfte, hier steht das Bild frei
   und darf gesehen werden. Links, unter der Überschrift, bleibt sie hoch
   genug für weißen Text (0,88 auf einem hellen Motiv ergibt rund 12:1). */
.buehne--bild::after {
  background: linear-gradient(100deg,
              rgba(24,23,23,.90) 0%, rgba(24,23,23,.84) 44%,
              rgba(24,23,23,.50) 72%, rgba(124,10,28,.36) 100%);
}
.buehne--bild .buehne__innen { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
/* Der Text darf nicht über die ganze Breite laufen, sonst stünde die
   Kleinschrift über der Adresse auf dem hellen Teil des Bildes. Die dunkle
   Zone des Verlaufs reicht bis 44 Prozent, der Text bleibt darin. */
.buehne--bild .buehne__text { max-width: 56ch; }
.buehne--bild .buehne__text h1 { max-width: 24ch; }

/* ---------------------------------------------------- Bildgruppe, versetzt */

/* Drei gleich große Bilder, treppenartig versetzt. Das Seitenverhältnis ist
   fest gesetzt, damit die Höhe nicht vom Rasterfluss abhängt: Ein Bild über
   zwei Zeilen zu spannen streckte es auf die Summe beider Zeilenhöhen. */
.bildgruppe {
  display: grid; gap: 1rem; grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 720px) {
  .bildgruppe { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
  .bildgruppe figure:nth-child(2) { margin-top: clamp(1.5rem, 3vw, 3rem); }
  .bildgruppe figure:nth-child(3) { margin-top: clamp(3rem, 6vw, 6rem); }
}
.bildgruppe figure {
  margin: 0; overflow: hidden; border-radius: var(--kante); position: relative;
  aspect-ratio: 3 / 2; box-shadow: var(--schatten);
}
.bildgruppe img { width: 100%; height: 100%; object-fit: cover; }
.bildgruppe figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.1rem .85rem; color: #fff; font-size: .9rem; font-weight: 600;
  background: linear-gradient(transparent, rgba(24,23,23,.85));
}

/* ---------------------------------------------------- Ablauf als Strang */

.schritte { list-style: none; margin: 2.5rem 0 0; padding: 0; position: relative; }
.schritte::before {
  content: ""; position: absolute; left: 23px; top: .5rem; bottom: .5rem;
  width: 2px; background: linear-gradient(var(--rot), var(--rot-zart));
}
.schritte li { position: relative; padding: 0 0 2rem 4.25rem; }
.schritte li:last-child { padding-bottom: 0; }
.schritte b {
  position: absolute; left: 0; top: -.15rem;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--rot);
  color: var(--rot-dunkel); font-size: 1rem; font-weight: 800;
  display: grid; place-items: center;
}
.schritte h3 { margin-bottom: .35rem; font-size: 1.2rem; }
.schritte p { color: var(--tinte-3); margin-bottom: 0; }

@media (min-width: 980px) {
  /* Auf breiten Schirmen läuft der Strang waagerecht. Der gleiche Inhalt,
     eine andere Leserichtung als in den Kachelabschnitten darüber. */
  .schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  /* Die Linie endet an der Mitte des vierten Kreises, nicht am Containerrand.
     Die Kreise sitzen am linken Rand ihrer Spalte, die vierte beginnt bei
     75 Prozent, der Kreisradius sind 24 Pixel. */
  .schritte::before { left: 24px; right: calc(25% - 24px); top: 24px; bottom: auto;
                      width: auto; height: 2px;
                      background: linear-gradient(90deg, var(--rot), var(--rot-zart)); }
  .schritte li { padding: 4.5rem 1rem 0 0; }
  .schritte b { top: 0; left: 0; }
}

/* ---------------------------------------------------- Aussage über Bild */

.aussage { position: relative; overflow: hidden; border-radius: var(--kante); background: var(--tinte); }
.aussage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.aussage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(104deg, rgba(24,23,23,.9) 12%, rgba(124,10,28,.55) 100%);
}
.aussage__innen {
  position: relative; z-index: 2; color: #fff;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  /* Grenze in rem, nicht in ch: ch bezieht sich auf die Schriftgröße dieses
     Elements, nicht auf die viel größere des Absatzes darin. Mit 60ch wäre
     die Aussage nur rund 480 Pixel breit und bräche nach vier Wörtern um. */
  max-width: 46rem;
}
.aussage__innen p {
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.35; font-weight: 700; letter-spacing: -.02em;
  color: #fff; margin-bottom: 1rem; text-wrap: balance;
}
.aussage__innen p em { font-style: normal; color: var(--rot); }
.aussage__quelle { font-size: .95rem; color: #d5cdc9; margin: 0; font-weight: 400; }

/* ---------------------------------------------------- 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; }
}
/* Der obere Abstand hält die Wasserzeichen-Nummer über der Überschrift.
   Fällt er kleiner aus, schneidet die Ziffer in die erste Zeile. */
.reihe > div:first-child { position: relative; padding-top: clamp(2.6rem, 1rem + 4vw, 5rem); }
.reihe > div:first-child > *:not(.reihe__nr) { position: relative; z-index: 1; }
.reihe__bild { overflow: hidden; border-radius: var(--kante); }
.reihe__bild img { width: 100%; box-shadow: var(--schatten); }
.reihe__nr {
  position: absolute; top: -.52em; left: -.04em; z-index: 0; margin: 0;
  display: block; font-weight: 800; line-height: 1; letter-spacing: -.04em;
  font-size: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  /* Zart statt Hauch: Auf dem Nebelgrund der Leistungsabschnitte war der
     helle Ton praktisch unsichtbar und die Nummer damit wirkungslos. */
  color: var(--rot-zart); pointer-events: none; user-select: none;
}
.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(--rot); border-bottom: 2.5px solid var(--rot);
  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: .28;
}
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(24,23,23,.93), rgba(24,23,23,.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: 24ch; margin-inline: auto; }
.band__innen p { color: #d9d2ce; max-width: 62ch; margin-inline: auto; }

/* ---------------------------------------------------- Zielgruppenliste */

.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(--rot); color: var(--rot-dunkel); transform: translateY(-2px); }
}

/* ---------------------------------------------------- Kacheln */

.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); } }
@media (min-width: 1080px) { .kacheln--4 { grid-template-columns: repeat(4, 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(--rot); transform: scaleY(0); transform-origin: top;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  .kachel:hover { border-color: var(--rot-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; }
.kachel__nr {
  display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rot-tief); font-weight: 700; margin-bottom: .35rem;
}

/* ---------------------------------------------------- Referenzkarten */

.referenz {
  border: 1px solid var(--linie); border-radius: var(--kante); background: var(--papier);
  padding: 1.9rem 2rem; display: grid; gap: 1.2rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
@media (min-width: 900px) { .referenz { grid-template-columns: 1fr 1fr; align-items: start; } }
.referenz + .referenz { margin-top: 1.5rem; }
.referenz:hover { border-color: var(--rot-zart); box-shadow: var(--schatten); }
.referenz h3 { margin-bottom: .3rem; }
.referenz .kurz { color: var(--tinte-3); margin-bottom: 0; }
.referenz .haken { margin-bottom: 0; }
.referenz .adresse {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem;
  font-weight: 700; text-decoration: none; color: var(--rot-tief);
}
.referenz .adresse:hover { color: var(--rot-dunkel); text-decoration: underline; }

/* ---------------------------------------------------- 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(--rot-hauch); color: var(--rot-dunkel);
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem;
}

/* ---------------------------------------------------- Aufruffeld */

.aufruf {
  background: var(--rot-tief); 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) { .aufruf { grid-template-columns: 1.5fr auto; } }
.aufruf h2 { color: #fff; margin-bottom: .4rem; }
.aufruf p { color: rgba(255,255,255,.92); 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(--rot-dunkel); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::before,
.fragen summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; background: var(--rot);
  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; }

/* ---------------------------------------------------- Weiterfuehrend */

.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(--rot); font-size: 1.4rem; transition: transform .25s ease; }
@media (hover: hover) {
  .weiter a:hover { border-color: var(--rot); transform: translateX(3px); }
  .weiter a:hover em { transform: translateX(5px); }
}

/* ---------------------------------------------------- Kontakt und Formular */

.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(--rot-tief); margin-bottom: .3rem; font-weight: 700;
}
.daten a { color: var(--tinte); text-decoration: none; font-weight: 700; font-size: 1.0625rem; }
.daten a:hover { color: var(--rot-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="url"], 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(--rot); box-shadow: 0 0 0 4px var(--rot-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(--rot-tief); }
.falle { position: absolute; left: -9999px; }
.hinweis-klein { font-size: .875rem; color: var(--tinte-3); margin: 1rem 0 0; }

.meldung {
  border-left: 3px solid var(--rot); background: var(--rot-hauch);
  padding: 1.15rem 1.35rem; border-radius: 0 var(--kante) var(--kante) 0; margin-bottom: 2rem;
}
.meldung--gut { border-left-color: #1e7a48; background: #eaf6ef; }
.meldung > :last-child { margin-bottom: 0; }
.meldung ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* ---------------------------------------------------- Lexikon */

.lexikon { margin: 2.5rem 0 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 820px)  { .lexikon { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; } }
@media (min-width: 1180px) { .lexikon { grid-template-columns: repeat(3, 1fr); } }
.lexikon > div {
  border-top: 2px solid var(--rot); padding-top: .9rem;
  transition: border-color .2s ease;
}
.lexikon dt {
  font-weight: 700; color: var(--tinte); font-size: 1.0625rem; margin-bottom: .3rem;
}
.lexikon dd { margin: 0; color: var(--tinte-3); font-size: .98rem; }
@media (hover: hover) {
  .lexikon > div:hover { border-color: var(--tinte); }
}

/* ---------------------------------------------------- Fliesstext */

.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(--rot); background: var(--rot-hauch);
  padding: 1.15rem 1.35rem; border-radius: 0 var(--kante) var(--kante) 0; margin-bottom: 1.5rem;
}
.hinweis > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------- Fussbereich */

.fuss { background: var(--tinte); color: #a09a96; 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: 200px; margin-bottom: 1.2rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .55rem; }
.fuss a { color: #ece6e2; text-decoration: none; }
.fuss a:hover { color: var(--rot); 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;
}
.fuss__anschrift { font-style: normal; line-height: 1.7; }

/* ---------------------------------------------------- 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(--rot); }
.krumen a { color: var(--tinte-3); text-decoration: none; }
.krumen a:hover { color: var(--rot-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(28,27,27,.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__haupt { background: var(--rot-tief); color: #fff; }
  .aktion__neben { border-color: var(--linie); color: var(--tinte); background: var(--papier); }
  body { padding-bottom: 84px; }
  .fuss { padding-bottom: 2rem; }
  .fuss__unten { margin-bottom: 1rem; }
  .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 Deckkraft, deshalb kein
   Layoutsprung. Scroll-Effekte stehen in einem @supports-Block,
   ohne Unterstuetzung bleibt alles sichtbar.
   ========================================================== */

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

@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 zoom         { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ring         { 0% { box-shadow: 0 0 0 0 rgba(193,11,37,.55); } 60% { box-shadow: 0 0 0 18px rgba(193,11,37,0); } 100% { box-shadow: 0 0 0 0 rgba(193,11,37,0); } }
@keyframes strich       { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kopfschatten { from { box-shadow: 0 0 0 rgba(28,27,27,0); } to { box-shadow: 0 6px 22px rgba(28,27,27,.10); } }
@keyframes kenburns     { from { transform: scale(1.04) translate(-1.6%, -1%); }
                          to   { transform: scale(1.16) translate(1.6%, 1%); } }
@keyframes licht        { from { translate: -4% -3%; } to { translate: 6% 4%; } }
@keyframes licht2       { from { translate: 5% 3%; } to { translate: -6% -4%; } }
@keyframes hg-schweben  { from { translate: 0 -6%; } to { translate: 0 6%; } }
@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; } }
@keyframes punkt        { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes haken        { from { transform: rotate(-45deg) scale(0); } to { transform: rotate(-45deg) scale(1); } }
@keyframes winkel       { to { --winkel: 360deg; } }
@keyframes langsam      { from { transform: scale(1); } to { transform: scale(1.09); } }

/* Langsames Pulsieren des wichtigsten Knopfes. Bewusst über dreieinhalb
   Sekunden und mit weichem Übergang: Ein schnelles Blinken wäre aufdringlich
   und bei mehr als drei Wechseln je Sekunde sogar ein Barrierefreiheitsproblem.
   Hier ist es knapp ein Wechsel alle dreieinhalb Sekunden. */
@keyframes knopf-puls {
  0%, 100% { background-color: var(--rot-tief); box-shadow: 0 0 0 0 rgba(211,5,53,0); }
  42%      { background-color: var(--rot);      box-shadow: 0 0 0 9px rgba(211,5,53,.20); }
  72%      { background-color: var(--rot-tief); box-shadow: 0 0 0 0 rgba(211,5,53,0); }
}

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

  /* 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. */
  .buehne__text > * { animation: setzen-weit .62s cubic-bezier(.22,.61,.36,1) both; }
  .buehne__text > *:nth-child(1) { animation-delay: .05s; }
  .buehne__text > *:nth-child(2) { animation-delay: .15s; }
  .buehne__text > *:nth-child(3) { animation-delay: .25s; }
  .buehne__text > *:nth-child(4) { animation-delay: .35s; }
  .buehne__text > *:nth-child(5) { animation-delay: .45s; }

  .buehne__text h1 em::after { animation: strich .7s cubic-bezier(.22,.61,.36,1) .6s both; }
  .buehne__karte { animation: karte-auf .8s cubic-bezier(.22,.61,.36,1) .38s both; }
  .buehne__karte::after { animation: winkel 7s linear infinite; }
  .buehne__hg { animation: kenburns 22s ease-in-out infinite alternate; }
  .buehne::before { animation: licht 18s ease-in-out infinite alternate; }
  .buehne__innen::before { animation: licht2 24s ease-in-out infinite alternate; }
  .band img { animation: langsam 30s ease-in-out infinite alternate; }

  .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; }

  /* Der Knopf mit dem wichtigsten Weg pulsiert dauerhaft, aber langsam.
     Beim Zeigen hört er auf, sonst kämpfte die Animation mit dem Hover. */
  .knopf--puls { animation: knopf-puls 3.6s ease-in-out infinite; }
  .knopf--puls:hover, .knopf--puls:focus-visible { animation: none; }

  @media (min-width: 901px) and (hover: hover) {
    .buehne__karte .knopf--voll { animation: ring 6s ease-out 2.6s infinite; }
  }
  @media (max-width: 900px) {
    .aktion__haupt { animation: ring 6s ease-out 3s infinite; }
  }
  @media (hover: hover) {
    .knopf:hover { transform: translateY(-2px); }
    .knopf:hover .knopf__pfeil { transform: translateX(5px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .buehne__text h1 em::after { transform: scaleX(1); }
}

@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,
    .referenz,
    .kontakt > *,
    .aufruf,
    .band__innen > * {
      animation: auf .85s linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 48%;
    }

    .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; }

    .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%;
    }

    .reihe__bild img {
      animation: bild-heran linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }

    .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%; }

    .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; }

    .buehne__hg {
      animation: kenburns 22s ease-in-out infinite alternate, hg-schweben linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
  }
}

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