/*!
 * LeineGlück KI-Solutions — Komponenten
 * Aus dem Entwurf erzeugte Klassen. Wird bei einer Neuausgabe des Designs ersetzt.
 *
 * @author    LeineGlück Online-Marketing
 * @link      https://www.leineglueck.de
 * @copyright © 2026 LeineGlück Online-Marketing
 * @license   GPL-2.0-or-later
 */
/* 16x  <div> */
.lg-grid-1 {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
}

/* 16x  <span> */
.lg-label-1 {
  color:var(--plum-300);
}

/* 16x  <div> */
.lg-card-1 {
  background:var(--white);
  border:1px solid var(--neutral-200);
  border-radius:16px;
  padding:28px;
  box-shadow:0 1px 2px rgba(42,21,48,.06);
}

/* 15x  <p> */
.lg-text-1 {
  font-size:.9375rem;
  line-height:1.65;
  margin:0;
}

/* 12x  <div> */
.lg-box-1 {
  font-size:.9375rem;
  color:var(--plum-500);
  line-height:1.5;
}

/* 12x  <h3> */
.lg-head-1 {
  font-family:var(--font-heading);
  font-size:1.125rem;
  font-weight:600;
  color:var(--plum-900);
  margin:14px 0 10px;
}

/* 9x  <a> */
.lg-link-1 {
  color:var(--plum-300);
  text-decoration:none;
  border:none;
}

/* 6x  <img> */
.lg-img-1 {
  width:100%;
  height:84px;
  object-fit:contain;
  object-position:left center;
}

/* 5x  <svg> */
.lg-svg-1 {
  flex:none;
}

/* 5x  <div> */
.lg-box-2 {
  background:var(--white);
  padding:20px 0;
  font-family:var(--font-heading);
  font-size:1.0625rem;
  color:var(--plum-900);
}

/* 5x  <div> */
.lg-box-3 {
  font-family:var(--font-body);
  font-size:.8125rem;
  color:var(--plum-300);
  margin-bottom:16px;
}

/* 5x  <h2> */
.lg-head-2 {
  font-family:var(--font-heading);
  font-size:clamp(1.25rem,1.9vw,1.625rem);
  line-height:1.25;
  letter-spacing:-.015em;
  font-weight:600;
  color:var(--white);
  margin:0 0 20px;
}

/* 5x  <p> */
.lg-text-2 {
  font-size:1.0625rem;
  line-height:1.65;
  color:rgba(255,255,255,.85);
  margin:0;
}

/* 5x  <span> */
.lg-label-2 {
  font-family:var(--font-body);
  font-size:.8125rem;
  color:var(--plum-300);
}

/* 5x  <div> */
.lg-card-2 {
  background:var(--white);
  border:1px solid var(--neutral-200);
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 1px 2px rgba(42,21,48,.06);
  border-top:2px solid var(--plum-300);
}

/* 5x  <div> */
.lg-box-4 {
  font-family:var(--font-body);
  font-size:.8125rem;
  color:var(--plum-500);
}

/* 5x  <h3> */
.lg-head-3 {
  font-family:var(--font-heading);
  font-size:1.0625rem;
  font-weight:600;
  color:var(--plum-900);
  margin:16px 0 10px;
  line-height:1.3;
}

/* 5x  <p> */
.lg-text-3 {
  font-size:.9375rem;
  line-height:1.6;
  margin:0;
}

/* 5x  <div> */
/* Die fünf Fragen unter "Wir beginnen bei Ihrem Problem".
   Vorher: ein zweispaltiges Raster mit einem 20 px langen Haarstrich als
   Marke. Das hatte zwei Fehler, die zusammen auftraten:

     1. Der Strich las sich als abgebrochener Gedankenstrich — eine
        Auszeichnung, die zu Aufzählungen im Fließtext passt, aber nicht
        zu fünf Fragen, die als Liste gelesen werden sollen.
     2. Die Zeilen standen ohne Abstand aufeinander, und das Raster
        machte aus vier der fünf Einträge 40 px hohe Zeilen, in denen die
        Marke 14 px unter ihrer Textzeile hing.

   Jetzt ein schlichter Block mit absolut gesetztem Punkt: keine
   Rasterzeilen, die auseinanderlaufen können, und die Marke sitzt über
   `top` fest auf der optischen Mitte der ERSTEN Zeile — auch wenn eine
   Frage auf schmalen Bildschirmen umbricht. */
.lg-grid-2 {
  display:block;
  position:relative;
  padding-left:26px;
  margin:0 0 16px;
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--white);
}

.lg-grid-2:last-child {
  margin-bottom:0;
}

.lg-grid-2::before {
  content:"";
  /* !important ausgeschrieben: die Brücke lässt position/left/top/width/
     background sonst bewusst offen, weil die Seitenskripte diese
     Eigenschaften zur Laufzeit inline setzen. Ein Pseudo-Element kann
     keinen Inline-Style bekommen — der Grund für die Ausnahme entfällt
     hier, das Risiko einer Uncode-Regel bleibt. */
  position:absolute !important;
  left:2px !important;
  top:.55em !important;
  width:7px !important;
  height:7px;
  border-radius:50%;
  background:var(--plum-300) !important;
}

/* 5x  <span> — die alte Strichmarke. Der Punkt kommt jetzt aus dem
   ::before oben; die leere Spanne bleibt im Markup stehen, damit Entwurf
   und Baum unangetastet bleiben. */
.lg-label-3 {
  display:none;
}

/* 4x  <a> */
.lg-link-2 {
  border:none;
  font-size:1.0625rem;
  font-weight:500;
  color:var(--white);
  text-decoration:none;
}

/* 4x  <ki-scene> */
.lg-box-5 {
  position:absolute;
  inset:0;
}

/* <ki-scene> setzt sich beim Start per Inline-Style einen deckenden
   Radialverlauf als Hintergrund (ki-scene.js, connectedCallback). Wo ein
   Foto dahinterliegt, verdeckt dieser Verlauf es vollstaendig — deshalb
   war das Hintergrundbild in Variante E nie zu sehen.
   Ein Inline-Style laesst sich nur mit !important ueberschreiben; das
   !important steht hier ausdruecklich, weil die Bruecke background sonst
   bewusst unangetastet laesst (siehe JS_GESTEUERT in uncode-bruecke.py). */
.lg-hero-e .lg-box-5,
.lg-box-37 .lg-box-5 {
  background:transparent !important;
}

/* 4x  <a> */
.lg-btn-1 {
  border:none;
  display:inline-flex;
  align-items:center;
  height:56px;
  padding:0 32px;
  border-radius:10px;
  background:var(--white);
  color:var(--plum-900);
  font-weight:600;
  font-size:1.0625rem;
  text-decoration:none;
}

/* 4x  <a> */
.lg-btn-2 {
  display:inline-flex;
  align-items:center;
  height:56px;
  padding:0 32px;
  border-radius:10px;
  border:1px solid var(--white);
  color:var(--white);
  font-weight:600;
  font-size:1.0625rem;
  text-decoration:none;
}

/* 4x  <strong> */
.lg-box-6 {
  color:var(--plum-900);
}

/* 4x  <div> */
.lg-box-7 {
  position:absolute;
  inset:clamp(20px,3vh,28px);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}

/* 4x  <div> */
.lg-box-8 {
  background:#38213E;
  border:1px solid rgba(192,150,194,.28);
  border-radius:16px;
  padding:28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  grid-row:span 6;
  display:grid;
  grid-template-rows:subgrid;
  gap:16px;
}

/* 4x  <div> */
.lg-box-9 {
  display:flex;
  align-items:baseline;
  gap:10px;
}

/* 4x  <h3> */
.lg-head-4 {
  font-family:var(--font-heading);
  font-size:1.1875rem;
  font-weight:600;
  color:var(--white);
  margin:0;
}

/* 4x  <div> */
.lg-box-10 {
  font-family:var(--font-heading);
  font-size:1rem;
  color:var(--plum-300);
  font-weight:500;
}

/* 4x  <p> */
.lg-text-4 {
  font-size:.9375rem;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  margin:0;
}

/* 4x  <div> */
.lg-box-11 {
  display:grid;
  gap:8px;
  font-size:.9375rem;
  color:rgba(255,255,255,.78);
}

/* 4x  <div> */
.lg-box-12 {
  padding-top:16px;
  border-top:1px solid rgba(192,150,194,.28);
  font-size:.875rem;
  color:var(--plum-300);
  line-height:1.5;
}

/* 4x  <h3> */
.lg-head-5 {
  font-family:var(--font-heading);
  font-size:1.125rem;
  font-weight:600;
  color:var(--plum-900);
  margin:0 0 10px;
}

/* 3x  <div> */
.lg-box-13 {
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 12px;
  white-space:nowrap;
  border-radius:999px;
  border:1px solid rgba(192,150,194,.55);
  color:var(--plum-300);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:32px;
}

/* Die Kopfzeile des Hero ist die <h1> der Startseite: sie traegt den
   Suchbegriff, waehrend die grosse Zeile darunter das Versprechen behaelt.
   Als <h1> erbt sie sonst die Ueberschriftenschrift (Sora) und die
   Ueberschriften-Abstaende — beides wird hier zurueckgenommen, damit die
   Pille genauso aussieht wie zuvor als <div>.
   display ausgeschrieben mit !important: die Bruecke laesst es sonst
   offen, weil die Seitenskripte es zur Laufzeit setzen — auf einer
   Ueberschrift tun sie das nie, der Grund fuer die Ausnahme entfaellt. */
h1.lg-box-13 {
  display:inline-flex !important;
  font-family:var(--font-body);
  line-height:1;
  margin-top:0;
}

/* 3x  <div> */
.lg-grid-3 {
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(40px,5vw,80px);
  align-items:start;
}

/* 3x  <p> */
.lg-text-5 {
  font-size:1.0625rem;
  line-height:1.65;
  margin:0;
  max-width:52ch;
}

/* 3x  <strong> */
.lg-box-14 {
  color:var(--white);
}

/* 3x  <div> */
.lg-box-15 {
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* 3x  <div> */
.lg-grid-4 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(32px,4vw,64px);
  align-items:end;
  margin-bottom:56px;
}

/* 3x  <span> */
.lg-label-4 {
  flex:1;
  height:1px;
  min-width:24px;
  background:rgba(192,150,194,.4);
}

/* 3x  <div> */
.lg-box-16 {
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--white);
}

/* 3x  <div> */
.lg-box-17 {
  display:grid;
  gap:12px;
  margin-top:16px;
  font-size:.9375rem;
}

/* 2x  <a> */
.lg-link-3 {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--white);
  text-decoration:none;
  border:none;
  font-weight:500;
}

/* 2x  <img> */
.lg-img-2 {
  /* Die Wortmarke kommt zugeschnitten aus der Mediathek (Verhaeltnis
     1,694). Der Freiraum, den die Originaldatei mitbringt, ist damit aus
     dem Bild heraus statt per negativem Aussenabstand aus dem Layout
     gerechnet — die Hoehe laesst sich jetzt frei setzen, ohne dass vier
     Werte mitgehen muessen. Sichtbare Marke: 64 px hoch wie zuvor. */
  height:64px;
  width:auto;
  max-width:none;
  display:block;
}

/* 2x  <a> — Wortmarke als Verweis auf die Startseite */
.lg-link-7 {
  display:block;
  border:none;
  text-decoration:none;
  flex:none;
}

.lg-link-7:hover {
  opacity:.82;
}

/* 2x  <section> */
.lg-sec-1 {
  position:relative;
  min-height:88vh;
  background:var(--plum-900);
  overflow:hidden;
  display:grid;
  align-items:center;
}

/* 2x  <div> */
.lg-box-18 {
  position:relative;
  width:100%;
  margin:0 auto;
  padding:clamp(96px,12vw,160px) 24px;
  max-width:960px;
}

/* 2x  <h2> */
.lg-head-6 {
  font-family:var(--font-heading);
  font-size:clamp(2.5rem,5vw,4.25rem);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:600;
  color:var(--white);
  margin:0 0 24px;
  max-width:20ch;
  text-wrap:pretty;
}

/* 2x  <p> */
.lg-text-6 {
  font-size:1.0625rem;
  line-height:1.6;
  color:rgba(255,255,255,.88);
  max-width:52ch;
  margin:0;
}

/* 2x  <div> */
.lg-box-19 {
  display:flex;
  gap:12px;
  margin-top:32px;
  flex-wrap:wrap;
}

/* 2x  <div> */
.lg-box-20 {
  margin-top:32px;
  font-size:.875rem;
  color:var(--plum-300);
}

/* Variante E (und die Kurzcheck-Seite) legen diese Zeile ueber das Foto.
   Plum-300 ist ein helles Violett — auf dem dunklen Verlauf der Variante A
   traegt es, auf beleuchteten Fassaden nicht mehr. Nur dort also Weiss mit
   weichem Schatten; Variante A bleibt wie entworfen. */
.lg-hero-e .lg-box-20 {
  color:rgba(255,255,255,.84);
  text-shadow:0 1px 12px rgba(42,21,48,.8);
}

/* 2x  <p> */
.lg-text-7 {
  font-size:1.0625rem;
  line-height:1.65;
  margin:0 0 16px;
  max-width:52ch;
}

/* 2x  <div> */
.lg-box-21 {
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
}

/* 2x  <section> */
.lg-sec-2 {
  background:var(--white);
  padding:clamp(64px,9vw,128px) 0;
}

/* 2x  <div> */
.lg-box-22 {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--plum-500);
  margin-bottom:16px;
}

/* 2x  <div> */
.lg-box-23 {
  display:grid;
  gap:16px;
}

/* 2x  <div> */
.lg-box-24 {
  display:flex;
  align-items:center;
  gap:16px;
}

/* 2x  <img> */
.lg-img-3 {
  width:132px;
  height:132px;
  border-radius:999px;
  object-fit:cover;
  object-position:center top;
  border:1px solid var(--neutral-200);
  flex:none;
}

/* 2x  <div> */
.lg-box-25 {
  font-family:var(--font-heading);
  font-size:1.0625rem;
  font-weight:600;
  color:var(--plum-900);
}

/* 2x  <div> */
.lg-box-26 {
  font-size:.9375rem;
  line-height:1.45;
  color:var(--plum-500);
}

/* 2x  <h2> */
.lg-head-7 {
  font-family:var(--font-heading);
  font-size:clamp(1.5rem,2.2vw,2rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:600;
  color:var(--plum-900);
  margin:0 0 20px;
}

/* 1x  <div> */
.lg-box-27 {
  background:var(--white);
  font-family:var(--font-body);
  color:var(--neutral-700);
}

/* 1x  <div> */
.lg-box-28 {
  background:var(--plum-900);
  border-bottom:1px solid rgba(192,150,194,.22);
  font-size:.8125rem;
}

/* 1x  <div> */
.lg-grid-5 {
  max-width:1200px;
  margin:0 auto;
  padding:9px 24px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(14px,2vw,28px);
}

/* 1x  <span> */
.lg-label-5 {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--plum-300);
  justify-self:start;
}

/* 1x  <div> */
.lg-box-29 {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,2vw,28px);
  flex-wrap:wrap;
  justify-self:center;
}

/* 1x  <a> */
.lg-link-4 {
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding:0 14px;
  white-space:nowrap;
  border-radius:999px;
  border:1px solid rgba(192,150,194,.55);
  color:var(--white);
  text-decoration:none;
  font-weight:600;
  font-size:.8125rem;
}

/* 1x  <header> */
.lg-box-30 {
  position:sticky;
  top:0;
  z-index:40;
  min-height:76px;
  background:rgba(42,21,48,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(192,150,194,.28);
}

/* 1x  <div> */
.lg-box-31 {
  max-width:1200px;
  margin:0 auto;
  padding:12px 24px;
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,32px);
  flex-wrap:wrap;
}

/* 1x  <nav> */
.lg-box-32 {
  display:flex;
  align-items:center;
  gap:clamp(14px,1.6vw,28px);
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-left:auto;
}

/* 1x  <a> */
.lg-btn-3 {
  border:none;
  display:inline-flex;
  align-items:center;
  height:40px;
  padding:0 18px;
  white-space:nowrap;
  border-radius:10px;
  background:var(--white);
  color:var(--plum-900);
  font-weight:600;
  font-size:.9375rem;
  text-decoration:none;
}

/* 1x  <a> */
.lg-btn-4 {
  display:inline-flex;
  align-items:center;
  height:40px;
  padding:0 18px;
  white-space:nowrap;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.55);
  background:transparent;
  color:var(--white);
  font-weight:600;
  font-size:.9375rem;
  text-decoration:none;
}

/* 1x  <div> */
.lg-box-33 {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 25% 45%,rgba(42,21,48,.94) 0%,rgba(42,21,48,.72) 40%,rgba(42,21,48,.25) 75%);
  pointer-events:none;
}

/* 1x  <section> */
.lg-sec-3 {
  background:linear-gradient(135deg,var(--plum-900) 0%,var(--plum-700) 100%);
  padding:clamp(72px,9vw,120px) 0;
  position:relative;
  overflow:hidden;
}

/* 1x  <div> */
.lg-grid-6 {
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(32px,4vw,64px);
  align-items:center;
}

/* 1x  <h2> */
.lg-head-8 {
  font-family:var(--font-heading);
  font-size:clamp(2rem,3.2vw,2.75rem);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:600;
  color:var(--white);
  margin:0 0 24px;
  max-width:24ch;
  text-wrap:pretty;
}

/* 1x  <p> */
.lg-text-8 {
  font-size:1.0625rem;
  line-height:1.6;
  color:rgba(255,255,255,.88);
  max-width:48ch;
  margin:0 0 32px;
}

/* 1x  <div> */
.lg-box-34 {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* 1x  <div> */
.lg-box-35 {
  display:flex;
  gap:32px;
  margin-top:40px;
  flex-wrap:wrap;
}

/* 1x  <div> */
.lg-box-36 {
  font-size:.875rem;
  color:var(--plum-300);
  margin-top:4px;
}

/* 1x  <div> */
.lg-box-37 {
  position:relative;
  aspect-ratio:1/1;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(192,150,194,.28);
  background:var(--plum-900);
}

/* 1x  <div> */
.lg-box-38 {
  position:absolute;
  left:24px;
  bottom:24px;
  font-family:var(--font-body);
  font-size:.8125rem;
  color:var(--plum-300);
  pointer-events:none;
  /* Seit die Skyline hinter der Animation liegt, steht diese Marke ueber
     hellen Fassaden. Dieselbe Pille wie die Beschriftungen in der Szene
     selbst (ki-scene.js) — gleiche Sprache, wieder lesbar. */
  padding:5px 12px;
  border-radius:999px;
  background:rgba(42,21,48,.72);
  border:1px solid rgba(192,150,194,.28);
}

/* 1x  <img> */
.lg-img-4 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Die Hannover-Skyline ist ein 2,5:1-Panorama. In der hohen Hero-Flaeche
     wird sie ueber die Hoehe skaliert und seitlich beschnitten — die Mitte
     traegt das Motiv, "bottom" (fuer das alte Bueromotiv gesetzt) schnitte
     die Silhouette weg. */
  object-position:center center;
  pointer-events:none;
}

/* 1x  <img> — Skyline hinter der Animation im Rahmen der Variante B */
.lg-img-7 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  /* Der Rahmen liegt auf plum-900. Bei 42 % Deckkraft mischt sich das Foto
     mit diesem Grund zu einem gedaempften, pflaumefarbenen Motiv — die
     Animation davor bleibt lesbar, die Skyline bleibt erkennbar. Die
     Saettigung nimmt das Orange der Strassenlampen zurueck. */
  opacity:.42;
  filter:saturate(.72);
  pointer-events:none;
}

/* 1x  <div> */
.lg-box-39 {
  position:absolute;
  inset:0;
  /* Zwei Lagen: ein diagonaler Grundschleier und ein Fuss, der nach oben
     ausblendet. Der Entwurf hatte nur die erste Lage — sie war auf ein
     dunkles Bueromotiv abgestimmt. Die Skyline ist im unteren Drittel
     deutlich heller (beleuchtete Fassaden, Strassenlampen), dort verlor
     die Unterzeile ihren Kontrast. */
  background:
    linear-gradient(160deg,rgba(42,21,48,.9) 0%,rgba(42,21,48,.62) 55%,rgba(42,21,48,.45) 100%),
    linear-gradient(to top,rgba(42,21,48,.82) 0%,rgba(42,21,48,.28) 38%,rgba(42,21,48,0) 62%);
  pointer-events:none;
}

/* 1x  <section> */
.lg-sec-4 {
  background:var(--white);
  padding:clamp(64px,9vw,128px) 0 clamp(48px,6vw,80px);
}

/* 1x  <h2> */
.lg-head-9 {
  font-family:var(--font-heading);
  font-size:clamp(1.75rem,2.6vw,2.375rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:600;
  color:var(--plum-900);
  margin:0 0 24px;
}

/* 1x  <div> */
.lg-box-40 {
  display:grid;
  gap:1px;
  background:var(--neutral-200);
  border-top:1px solid var(--neutral-200);
  border-bottom:1px solid var(--neutral-200);
}

/* 1x  <div> */
.lg-box-41 {
  max-width:1200px;
  margin:clamp(48px,6vw,80px) auto 0;
  padding:0 24px;
}

/* 1x  <div> */
.lg-box-42 {
  height:1px;
  background:linear-gradient(90deg,rgba(192,150,194,.9) 0%,rgba(192,150,194,0) 65%);
}

/* 1x  <p> */
.lg-text-9 {
  font-family:var(--font-heading);
  font-size:clamp(1.75rem,4vw,3.25rem);
  line-height:1.1;
  letter-spacing:-.025em;
  font-weight:600;
  color:var(--plum-900);
  margin:28px 0 0;
  max-width:26ch;
  text-wrap:pretty;
}

/* 1x  <section> */
.lg-sec-5 {
  position:relative;
  height:500vh;
  background:var(--plum-900);
}

/* 1x  <div> */
.lg-box-43 {
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}

/* 1x  <div> */
.lg-box-44 {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(42,21,48,.92) 0%,rgba(42,21,48,.55) 45%,rgba(42,21,48,0) 75%);
  pointer-events:none;
}

/* 1x  <div> */
.lg-box-45 {
  position:absolute;
  inset:0;
  display:grid;
  align-content:center;
  overflow:hidden;
  pointer-events:none;
}

/* 1x  <div> */
.lg-box-46 {
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:0 24px;
}

/* 1x  <div> */
.lg-box-47 {
  max-width:44ch;
  margin:0 0 clamp(20px,3vh,40px);
}

/* 1x  <h2> */
.lg-head-10 {
  font-family:var(--font-heading);
  font-size:clamp(1.875rem,3.2vw,2.75rem);
  line-height:1.14;
  letter-spacing:-.02em;
  font-weight:600;
  color:var(--white);
  margin:0 0 14px;
  text-wrap:pretty;
}

/* 1x  <p> */
.lg-text-10 {
  font-size:1.0625rem;
  line-height:1.6;
  color:rgba(255,255,255,.82);
  margin:0;
}

/* 1x  <div> */
.lg-box-48 {
  position:relative;
  max-width:44ch;
  min-height:clamp(220px,34vh,340px);
  border:1px solid rgba(192,150,194,.34);
  border-radius:18px;
  /* Kartenfeld der Scroll-Buehne: waermeres plum-700 statt plum-900, damit
     es sich vom Sektionsgrund abhebt. Halbtransparent, damit das Netz der
     Animation weiter durchscheint. */
  background:rgba(66,39,90,.58);
}

/* 1x  <div> */
.lg-box-49 {
  position:absolute;
  inset:clamp(20px,3vh,28px);
  opacity:1;
  transform:translateY(0);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}

/* 1x  <div> */
.lg-box-50 {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:clamp(20px,3vh,40px);
  max-width:520px;
}

/* 1x  <div> */
.lg-box-51 {
  flex:1;
  height:2px;
  background:rgba(192,150,194,.25);
  position:relative;
  overflow:hidden;
  border-radius:999px;
}

/* 1x  <span> */
.lg-label-6 {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:8%;
  background:linear-gradient(90deg,var(--plum-700) 0%,var(--plum-300) 100%);
}

/* 1x  <section> */
.lg-sec-6 {
  background:var(--white);
  padding:clamp(64px,9vw,128px) 0 clamp(64px,9vw,128px);
}

/* 1x  <div> */
.lg-box-52 {
  max-width:680px;
  margin:0 0 48px;
}

/* 1x  <h2> */
.lg-head-11 {
  font-family:var(--font-heading);
  font-size:clamp(1.75rem,2.6vw,2.375rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:600;
  color:var(--plum-900);
  margin:0 0 16px;
  text-wrap:pretty;
}

/* 1x  <p> */
.lg-text-11 {
  font-size:1.0625rem;
  line-height:1.65;
  margin:0;
}

/* 1x  <div> */
.lg-grid-7 {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}

/* 1x  <section> */
.lg-sec-7 {
  background:var(--plum-900);
  padding:clamp(64px,9vw,128px) 0;
  position:relative;
  overflow:hidden;
}

/* 1x  <div> */
.lg-box-53 {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--plum-300);
  margin-bottom:16px;
}

/* 1x  <h2> */
.lg-head-12 {
  font-family:var(--font-heading);
  font-size:clamp(1.75rem,2.6vw,2.375rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:600;
  color:var(--white);
  margin:0;
  text-wrap:pretty;
}

/* 1x  <p> */
.lg-text-12 {
  font-size:1.0625rem;
  line-height:1.65;
  color:rgba(255,255,255,.82);
  margin:0;
  max-width:48ch;
}

/* 1x  <div> */
.lg-box-54 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
  flex-wrap:wrap;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--plum-300);
}

/* 1x  <div> */
.lg-grid-8 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  grid-template-rows:auto auto auto 1fr auto auto;
  gap:16px;
}

/* 1x  <a> */
.lg-link-5 {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:start;
  height:44px;
  padding:0 20px;
  white-space:nowrap;
  border-radius:10px;
  border:1px solid rgba(192,150,194,.55);
  color:var(--white);
  font-weight:600;
  font-size:.9375rem;
  text-decoration:none;
}

/* 1x  <h2> */
.lg-head-13 {
  font-family:var(--font-heading);
  font-size:clamp(1.75rem,2.6vw,2.375rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:600;
  color:var(--plum-900);
  margin:0;
}

/* 1x  <div> */
.lg-grid-9 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}

/* 1x  <p> */
.lg-text-13 {
  font-size:.9375rem;
  line-height:1.65;
  margin:0 0 14px;
}

/* 1x  <div> */
.lg-box-55 {
  font-family:var(--font-body);
  font-size:.8125rem;
  line-height:1.7;
  color:var(--plum-700);
}

/* 1x  <section> */
.lg-sec-8 {
  background:var(--plum-900);
  padding:clamp(64px,9vw,128px) 0;
}

/* 1x  <h2> */
.lg-head-14 {
  font-family:var(--font-heading);
  font-size:clamp(1.75rem,2.6vw,2.375rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:600;
  color:var(--white);
  margin:0 0 24px;
  text-wrap:pretty;
}

/* 1x  <p> */
.lg-text-14 {
  font-size:1.0625rem;
  line-height:1.65;
  margin:0;
  max-width:50ch;
  color:rgba(255,255,255,.82);
}

/* 1x  <section> */
.lg-sec-9 {
  background:var(--plum-050);
  padding:clamp(64px,9vw,128px) 0;
}

/* 1x  <div> */
.lg-box-56 {
  font-family:var(--font-body);
  font-size:.8125rem;
  color:var(--plum-500);
  margin-bottom:20px;
}

/* 1x  <h2> */
.lg-head-15 {
  font-family:var(--font-heading);
  font-size:clamp(1.75rem,2.6vw,2.375rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:600;
  color:var(--plum-900);
  margin:0;
  text-wrap:pretty;
}

/* 1x  <p> */
.lg-text-15 {
  font-size:1.0625rem;
  line-height:1.65;
  margin:0;
  max-width:50ch;
}

/* 1x  <div> */
.lg-grid-10 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}

/* 1x  <div> */
.lg-grid-11 {
  margin-top:16px;
  background:var(--white);
  border:1px solid var(--neutral-200);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(42,21,48,.06);
  padding:clamp(24px,3vw,36px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(24px,3vw,48px);
  align-items:center;
}

/* 1x  <p> */
.lg-text-16 {
  font-size:1.0625rem;
  line-height:1.65;
  margin:0 0 20px;
  max-width:60ch;
}

/* 1x  <div> */
.lg-box-57 {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}

/* 1x  <img> */
.lg-img-5 {
  width:160px;
  height:auto;
  display:block;
  flex:none;
}

/* 1x  <a> */
.lg-link-6 {
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 18px;
  white-space:nowrap;
  border-radius:10px;
  border:1px solid var(--plum-300);
  color:var(--plum-700);
  font-weight:600;
  font-size:.9375rem;
  text-decoration:none;
}

/* 1x  <div> */
.lg-box-58 {
  display:grid;
  gap:20px;
  justify-items:start;
}

/* 1x  <div> */
.lg-box-59 {
  margin-top:32px;
  height:1px;
  background:linear-gradient(90deg,rgba(192,150,194,.9) 0%,rgba(192,150,194,0) 65%);
}

/* 1x  <p> */
.lg-text-17 {
  font-family:var(--font-heading);
  font-size:clamp(1.5rem,2.6vw,2.25rem);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:600;
  color:var(--plum-900);
  margin:28px 0 0;
  max-width:24ch;
  text-wrap:pretty;
}

/* 1x  <div> */
.lg-box-60 {
  margin-top:32px;
  border-top:1px solid var(--neutral-200);
  padding-top:24px;
}

/* 1x  <div> */
.lg-box-61 {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--plum-500);
  margin-bottom:20px;
}

/* 1x  <div> */
.lg-grid-12 {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 12px;
  align-items:center;
  justify-items:start;
}

/* 1x  <section> */
.lg-sec-10 {
  background:linear-gradient(135deg,var(--plum-700) 0%,var(--plum-500) 100%);
  padding:clamp(64px,9vw,128px) 0;
}

/* 1x  <div> */
.lg-box-62 {
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  text-align:center;
}

/* 1x  <h2> */
.lg-head-16 {
  font-family:var(--font-heading);
  font-size:clamp(2rem,3.6vw,3rem);
  line-height:1.15;
  letter-spacing:-.015em;
  font-weight:600;
  color:var(--white);
  margin:0 auto 20px;
  max-width:26ch;
  text-wrap:pretty;
}

/* 1x  <p> */
.lg-text-18 {
  font-size:1.0625rem;
  line-height:1.65;
  color:rgba(255,255,255,.88);
  margin:0 auto;
  max-width:58ch;
}

/* 1x  <div> */
.lg-box-63 {
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:32px;
  flex-wrap:wrap;
}

/* 1x  <footer> */
.lg-box-64 {
  background:var(--plum-900);
  padding:96px 0 32px;
  position:relative;
  overflow:hidden;
}

/* 1x  <div> */
.lg-grid-13 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:48px;
}

/* 1x  <p> */
.lg-text-19 {
  margin:16px 0 0;
  color:var(--plum-300);
  font-size:.9375rem;
  max-width:280px;
  line-height:1.6;
}

/* 1x  <div> */
.lg-box-65 {
  height:1px;
  background:linear-gradient(90deg,rgba(192,150,194,0) 0%,rgba(192,150,194,.75) 50%,rgba(192,150,194,0) 100%);
  margin:48px 0 24px;
}

/* 1x  <div> */
.lg-box-66 {
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  font-size:.8125rem;
  color:var(--plum-300);
}

/* 1x  <img> */
.lg-img-6 {
  position:absolute;
  bottom:-60px;
  right:-60px;
  width:520px;
  opacity:.05;
  pointer-events:none;
}