/* ===================================================================
   HANS — Landingpage, Seitenebene
   ===================================================================

   Diese Datei erfindet keine Elemente. Sie tut drei Dinge:

   1. Sie stellt die senkrechte Ordnung zurueck. Die w-Regeln kommen aus
      der Elementevitrine des CI-Guides, und dort sind die
      Abschnittsabstaende gestaucht — ci.css sagt das selbst im
      Kommentar und nennt den echten Wert: 130 px oben, 140 px unten.
   2. Sie setzt, was eine Seite braucht und ein Element nicht kennt:
      Kopfleiste, Rechtstexte im Overlay, Formularraster, Sprungmarke.
   3. Sie macht aus den Vitrinen-Attrappen bedienbare Dinge. In der
      Vitrine sind Knoepfe <span tabindex="-1"> — absichtlich tot. Hier
      sind es echte <button>, <a>, <input> und <details>; die Klassen
      bleiben, das Aussehen bleibt, die Bedienbarkeit kommt dazu.
   =================================================================== */

/* --- 1  Die echte senkrechte Ordnung ------------------------------ */

.w-abschnitt{padding:130px 0 140px}
@media (max-width:900px){ .w-abschnitt{padding:78px 0 84px} }
@media (max-width:620px){ .w-abschnitt{padding:58px 0 62px} }

/* Zwei Abschnitte in Folge ohne Farbwechsel brauchen nicht die volle
   doppelte Luft dazwischen. */
.w-abschnitt + .w-abschnitt{padding-top:0}

/* --- 2  Kopfleiste ------------------------------------------------
   Element 01 fuehrt Logo, Menue und einen Knopf. Diese Seite hat kein
   Menue — der Content sagt „kein Navigationsmenü, keine externen
   Links" — und keinen Kopf-Knopf: sonst staenden vier Knoepfe auf der
   Seite, und Element 66 erlaubt „einmal im Kopf, hoechstens zwei im
   Inhalt". Der Knopf im Seitenkopf gehoert zum Seitenkopf; damit
   bleiben Abschnitt 05 und 10 als die zwei im Inhalt. */

.kopf{
  position:fixed;top:0;left:0;right:0;z-index:40;
  height:85px;display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(15,15,15,.82),rgba(15,15,15,0));
  pointer-events:none;
}
/* Element 02: dieselbe Leiste auf Schwarz, sobald Inhalt darunter
   durchläuft. Gemessen: Fläche #0F0F0F, Übergang 0,2 s ease-in-out,
   Höhe unverändert. Ohne diesen Zustand liegt das Logo auf dem Text —
   genau das war im ersten Durchgang zu sehen. */
.kopf{transition:background-color .2s var(--kurve),border-color .2s var(--kurve);
      border-bottom:1px solid transparent}
.kopf.dunkel{background-color:#0F0F0F;background-image:none;border-bottom-color:var(--rule)}
.kopf .w-inhalt{display:flex;align-items:center}
.kopf a{pointer-events:auto;display:inline-block}
.kopf img{width:240px;height:auto}
@media (max-width:620px){ .kopf{height:64px} .kopf img{width:168px} }

.sprungmarke{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--signal);color:var(--auf-signal);
  padding:12px 18px;font:400 14px/1 var(--mono);text-transform:uppercase;
  border-radius:var(--radius);
}
.sprungmarke:focus{left:12px;top:12px}

/* --- 3  Seitenkopf mit dem Gebaeudemodell ------------------------- */

.hero{min-height:100svh;padding-top:85px}
.hero .w-bild{
  position:absolute;inset:0;
  background:#0F0F0F center/cover no-repeat;
}
.hero .w-bild img{width:100%;height:100%;object-fit:cover}
/* Der Scrim. Gerechnet, nicht gewaehlt: der Satzspiegel reicht bis rund
   50 Prozent der Fensterbreite, und Fliesstext in 72 Prozent Weiss
   braucht dort auch auf einem reinweissen Bildpunkt 0,687 Deckkraft,
   um 4,5:1 zu halten. Ausgebrannte Fensterbaender im Daemmerungsbild
   sind genau solche Punkte. */
/* Der zweite Schleier ist weg.

   Hier lag ein eigener .scrim ueber dem Seitenkopf — aus der Zeit der
   Bildsequenz, als es .buehne-flor noch nicht gab. Beide haben dasselbe
   getan, und sie haben sich multipliziert: 0,90 aus dem Flor und 0,96
   aus dem Scrim ergeben zusammen 0,996 Deckung. Der Seitenkopf war
   damit praktisch undurchsichtiges Schwarz, egal wie hell das Feld
   dahinter gestellt war. Das war die Ursache dafuer, dass jede
   Aufhellung wirkungslos blieb.

   Die Lesbarkeit haengt jetzt allein am Flor, und der ist je Station
   gemessen. */
.hero .w-inhalt{position:relative;z-index:2;padding-top:40px;padding-bottom:40px}
.hero h1{
  font:400 clamp(34px,4.6vw,64px)/1.06 var(--text);
  letter-spacing:-.02em;margin:0 0 20px;max-width:18ch;   /* „Gebäudesimulation“ hat 17 Zeichen */
}
.hero .unter{font:400 20px/32px var(--text);color:var(--ink-2);max-width:56ch;margin:0 0 30px}


/* --- 4  Laufband mit Vorspann ------------------------------------- */

.beleg-intro{
  display:block;font:400 13px/26px var(--text);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;
}

/* --- 5  Zwei Wege: zwei gleichwertige Karten ---------------------- */
/* w-preise steht auf drei Spalten. Hier sind es zwei, und keine der
   beiden traegt „Empfohlen" — der Content sagt ausdruecklich
   „zwei gleichwertige Karten". */
.zwei-wege{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
.zwei-wege .k{padding:30px}
.zwei-wege .art{
  display:block;font:400 13px/26px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal-60);margin-bottom:6px;
}
.zwei-wege .d{margin-top:10px}
@media (max-width:760px){ .zwei-wege{grid-template-columns:minmax(0,1fr)} }

/* --- 6  Akkordeon als echtes <details> ---------------------------- */
/* Die Vitrine zeigt <span class="zeile"> mit einem <i>+</i>. Hier
   traegt <summary> dieselbe Klasse: Tastatur, Aufklappen und
   Vorlesbarkeit kommen dann vom Browser statt aus Skript. */
.w-akkordeon details{border-bottom:1px solid rgba(255,255,255,.12)}
.w-akkordeon summary{list-style:none;cursor:pointer}
.w-akkordeon summary::-webkit-details-marker{display:none}
.w-akkordeon details[open] > summary i{transform:rotate(45deg)}
.w-akkordeon summary i{transition:transform var(--tempo-kurz) var(--kurve)}

/* --- 7  Formular -------------------------------------------------- */

.formular{display:grid;gap:14px;max-width:560px;margin-top:8px}
.formular .reihe{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){ .formular .reihe{grid-template-columns:minmax(0,1fr)} }
/* w-feld ist fuer die Anschlussgruppe gebaut und deshalb links gerundet
   und rechts eckig. Alleinstehend braucht es beide Kanten. */
.formular .w-feld,
.formular select.w-feld,
.formular textarea.w-feld{
  border-radius:var(--radius);width:100%;flex:none;
}
.formular textarea.w-feld{height:auto;min-height:96px;padding:14px 20px;resize:vertical;font-family:var(--text)}
.formular select.w-feld{appearance:none;background-image:none}
.formular label{
  display:block;font:400 13px/20px var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;
}
.formular .w-btn{justify-self:start;margin-top:4px}
.formular .zusatz{font:400 14px/22px var(--text);color:var(--ink-3);margin:2px 0 0}

/* --- 8  Rechtstexte als Overlay ----------------------------------- */
/* Der Content verlangt Impressum und Datenschutz als Overlay, nicht als
   externen Link. <dialog> bringt Fokusfang, Esc und Hintergrundsperre
   mit — alles, was man sonst nachbauen muesste. */
dialog.rechtstext{
  width:min(760px,92vw);max-height:84vh;padding:0;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--rule-2);border-radius:var(--radius);
}
dialog.rechtstext::backdrop{background:rgba(15,15,15,.82);backdrop-filter:blur(3px)}
dialog.rechtstext .kasten{padding:32px 34px 36px;overflow-y:auto;max-height:84vh}
dialog.rechtstext h2{font:400 28px/34px var(--text);letter-spacing:-.4px;margin:0 0 18px}
dialog.rechtstext h3{font:400 18px/24px var(--text);margin:26px 0 8px}
dialog.rechtstext p,dialog.rechtstext li{font:400 15px/24px var(--text);color:var(--ink-2);max-width:62ch}
dialog.rechtstext dt{font:400 13px/20px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-top:14px}
dialog.rechtstext dd{margin:3px 0 0;font:400 15px/24px var(--text)}
dialog.rechtstext .zu{
  position:sticky;top:0;float:right;
  background:none;border:1px solid var(--rule-2);color:var(--ink);
  border-radius:var(--radius);padding:7px 13px;cursor:pointer;
  font:400 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;
}
.offen{
  display:inline-block;padding:1px 7px;
  background:rgba(215,100,45,.16);border:1px solid rgba(215,100,45,.5);
  font:400 12px/1.5 var(--mono);color:#D7642D;text-transform:uppercase;letter-spacing:.05em;
}

/* --- 9  Fuss ------------------------------------------------------ */

/* Element 07 heißt „Fuß, drei Spalten" und ist selbst ein Raster aus
   drei Feldern — Logo/Anschrift, Insights-Links, Newsletter. Diese Seite
   hat nichts davon: der Content verlangt „nur Pflichtangaben, keine
   Navigation, keine Social-Icons". Die drei Spalten werden deshalb
   aufgelöst, sonst bekommt der Abbinder ein Drittel der Breite und die
   Rechtszeile landet in der Mitte. Genau das war zu sehen. */
.w-fuss{display:block;padding:54px 0 40px}
.w-fuss .w-inhalt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.w-fuss .abbinder{font:700 clamp(15px,1.5vw,19px)/1.35 var(--display);text-transform:uppercase;letter-spacing:-.01em;max-width:24ch}
.w-fuss .abbinder span{display:block;color:var(--ink-3);margin-top:8px}
.w-fuss .rechtlich{display:flex;flex-wrap:wrap;gap:18px;align-self:end;justify-content:flex-end}
.w-fuss .rechtlich button{
  background:none;border:0;padding:0;cursor:pointer;
  font:400 14px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
}
.w-fuss .rechtlich button:hover{color:var(--ink)}
.w-fuss .anschrift{font:400 14px/22px var(--text);color:var(--ink-3)}
@media (max-width:760px){
  .w-fuss .w-inhalt{grid-template-columns:minmax(0,1fr)}
  .w-fuss .rechtlich{justify-content:flex-start}
}

/* --- 10  Kleinigkeiten -------------------------------------------- */

.dreiklang{
  font:700 clamp(20px,2.6vw,34px)/1.2 var(--display);
  text-transform:uppercase;letter-spacing:-.01em;
  margin:34px 0 0;color:var(--ink);
}
.dreiklang b{color:var(--signal);font-weight:inherit}
.sprachregel{font:400 14px/22px var(--text);color:var(--ink-4);margin-top:16px}
.mitte-cta{margin-top:40px}

/* --- 11  Einblenden, ohne JavaScript ------------------------------
   Die Elementebibliothek deckt mit .fx-auf auf: opacity 0, und erst
   eine per Skript gesetzte Klasse .sichtbar animiert ein. Auf einer
   Dokumentationsseite ist das vertretbar. Auf einer Landingpage ist es
   ein Totalausfall — feuert der Beobachter nicht oder stolpert das
   Skript, ist die ganze Seite unter dem Seitenkopf leer. Genau das ist
   beim ersten Durchgang passiert.

   Deshalb hier nativ: Scroll-Timelines kennen kein Skript. Wo der
   Browser sie nicht unterstuetzt, steht der Inhalt einfach da. */

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .w-abschnitt .w-inhalt > *,
    .w-bento .k, .w-leistung .k, .w-preise .k, .w-zahlen .k{
      animation:lp-auf linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 22%;
    }
    @keyframes lp-auf{
      from{opacity:0;transform:translateY(16px)}
      to{opacity:1;transform:none}
    }
  }
}

/* --- 12  Schrift auf der Akzentfläche -----------------------------
   Die Elementschicht setzt .w-voll{color:#FFFFFF} — sie bildet ab, was
   optimuse.com heute tut. Gemessen ergibt das auf Signal Blue #7488F6
   nur 3,18:1 und fällt unter 4,5:1 durch. Die Kontrasttabelle des
   Guides kennt das Paar auch nicht: sie führt ausdrücklich nur
   „Weiss auf Signal Blue Bright 6,4:1 — DER BUTTON IM BRIGHT MODE".

   Abschnitt 03 hat für den Dark Mode eine eigene Antwort und nennt sie
   --auf-signal: Schrift auf der Signal-Fläche ist Schwarz. Das ergibt
   6,0:1. Diese Seite folgt der Farbregel, nicht dem Abzug — auf dem
   wichtigsten Bedienelement der Seite ist das keine Geschmacksfrage.

   Zu melden: entweder optimuse.com zieht nach, oder die Elementschicht
   vermerkt den Befund wie schon beim fehlenden Fokus. */

.w-voll{color:var(--auf-signal)}

/* Dasselbe im CTA-Band: dessen Fläche ist Signal Blue, die --ink-Token
   sind aber für schwarzen Grund gerechnet. Weiß darauf ergibt 3,18:1,
   --ink-3 sogar 1,78:1. */
.w-ctaband,
.w-ctaband h2,
.w-ctaband p{color:var(--auf-signal)}
.w-ctaband .formular label,
.w-ctaband .zusatz{color:rgba(15,15,15,.82)}   /* gerechnet: 4,76:1 */
.w-ctaband .formular .w-feld::placeholder{color:rgba(15,15,15,.55)}

/* --- 13  Rasterbreiten als Klassen, nicht inline ------------------
   Inline gesetzte grid-template-columns schlagen jede Media-Query der
   Elementschicht — das Bento blieb dadurch auch auf 451 px zweispaltig.
   Deshalb hier als Klassen, mit eigenen Umbruchpunkten. */

.bento-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bento-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){ .bento-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){
  .bento-2,.bento-3{grid-template-columns:minmax(0,1fr)}
  .w-leistung{grid-template-columns:minmax(0,1fr)}
  .w-zahlen{grid-template-columns:minmax(0,1fr);gap:18px}
}

   schmalen Fenstern fällt es sonst über die Headline. Der Seitenkopf
   ist ein Grid, also genügt die Reihenfolge. */
@media (max-width:1100px){
  .hero{display:grid}
  .hero .w-inhalt{order:1}
}

/* --- 14  Scrim auf schmalen Fenstern ------------------------------
   Der Scrim verläuft waagrecht: links dunkel, rechts frei — richtig,
   solange der Satzspiegel in der linken Hälfte steht. Einspaltig läuft
   der Text über die ganze Breite und sitzt dann im hellen Teil.

   Gerechnet wie auf dem Desktop: Fließtext in --ink-2 braucht auch auf
   einem reinweißen Bildpunkt 0,687 Deckkraft für 4,5:1. Im Textband
   liegt der senkrechte Verlauf deshalb nicht unter 0,80. */

/* --- 15  Laufband: größer und tatsächlich laufend -----------------
   Zwei Befunde. Erstens stand der Logosatz nur einmal im Markup — die
   Keyframes schieben die Spur um -50 %, das ist nur nahtlos, wenn die
   zweite Hälfte die erste wiederholt. Jetzt steht er doppelt.

   Zweitens trägt .w-laufband .reihe aus der Elementschicht
   flex-wrap:wrap und justify-content:center. Beides ist für eine
   ruhende, zentrierte Zeile gedacht und arbeitet gegen width:max-content
   der Laufspur: die Logos brechen um statt zu laufen.

   Und sie waren zu klein. 88 px sind der gemessene Wert von
   optimuse.com, wo die Leiste weiter unten auf der Seite steht. Hier
   trägt sie direkt unter dem CTA den Vertrauensbeweis — bei sieben
   Logos in dieser Größe liest sie niemand. */

.w-laufband{padding:38px 0}
.w-laufband .reihe{flex-wrap:nowrap;justify-content:flex-start;gap:72px}
.w-laufband img{width:132px;height:132px;opacity:.72;transition:opacity var(--tempo) var(--kurve)}
.w-laufband img:hover{opacity:1}
@media (max-width:760px){
  .w-laufband .reihe{gap:44px}
  .w-laufband img{width:96px;height:96px}
}

/* ===================================================================
   16  Die Bühne — das Gebäude hinter der ganzen Seite
   ===================================================================

   Drei Schichten, von hinten nach vorn:

   .buehne-grund   Farbfeld. Nie reines Schwarz — der Grund der Marke ist
                   #0F0F0F, und darüber liegen zwei sehr weite, langsam
                   wandernde Verläufe aus der Signal-Blue-Skala. Deckkraft
                   unter fünf Prozent, damit Abschnitt 03 gewahrt bleibt:
                   Signal Blue ist Akzent, nicht Fläche.
   canvas          Das Gebäude in WebGL2.
   .buehne-flor    Der Schleier darüber. Er hält den Text lesbar und wird
                   je Station aus dem Skript nachgeregelt.

   Das Standbild liegt als Hintergrundbild im Grund: fällt WebGL aus oder
   ist die Verbindung zu schmal, steht dort weiterhin ein Bild.
   =================================================================== */

.buehne{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.buehne-grund{
  position:absolute;inset:0;
  background:
    radial-gradient(1100px 760px at 78% 18%, rgba(116,136,246,.10), transparent 62%),
    radial-gradient(900px 700px at 12% 82%, rgba(93,85,234,.08), transparent 60%),
    linear-gradient(180deg, #14151C 0%, #101119 45%, #0F0F12 100%);
  animation:grund-wandern 48s var(--kurve) infinite alternate;
}
@keyframes grund-wandern{
  from{background-position:0% 0%, 0% 0%, 0 0}
  to  {background-position:14% 8%, -12% -6%, 0 0}
}

.buehne canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.1s var(--kurve);
}
.buehne canvas.da{opacity:1}

/* Solange WebGL nicht übernommen hat, trägt das Standbild. */
.buehne-grund::after{
  content:"";position:absolute;inset:0;
  /* Die Seite lädt das AVIF vor, benutzt hat sie bisher nur das JPG —
     also 16 KB umsonst geholt und das Doppelte noch einmal. image-set
     nimmt, was der Browser kann, und fällt sonst auf das JPG zurück. */
  background:image-set(url("../media/poster/akt1.avif") type("image/avif"),
                       url("../media/poster/akt1.jpg")  type("image/jpeg"))
             center/cover no-repeat;
  opacity:.5;transition:opacity 1.1s var(--kurve);
}
.buehne.lebt .buehne-grund::after{opacity:0}

.buehne-flor{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(15,15,18,calc(.90 * var(--flor,1))) 0%,
      rgba(15,15,18,calc(.86 * var(--flor,1))) 40%,
      rgba(15,15,18,calc(.80 * var(--flor,1))) 70%,
      rgba(15,15,18,calc(.68 * var(--flor,1))) 92%,
      rgba(15,15,18,calc(.52 * var(--flor,1))) 100%);
  transition:opacity .8s var(--kurve);
}
@media (max-width:1100px){
  .buehne-flor{
    background:linear-gradient(180deg,
      rgba(15,15,18,calc(.60 * var(--flor,1))) 0%,
      rgba(15,15,18,calc(.86 * var(--flor,1))) 26%,
      rgba(15,15,18,calc(.93 * var(--flor,1))) 100%);
  }
}

/* --- Die Seite wird durchsichtig ---------------------------------
   Die Elementschicht setzt .w-abschnitt{background:#0F0F0F}, weil sie
   Abzüge zeigt, die auf sich selbst stehen. Hier liegt das Gebäude
   dahinter — also bleibt nur der Text. */
main, .w-abschnitt, .w-laufband{background:transparent;position:relative;z-index:1}
.w-hero{background:transparent}
footer.w-fuss{position:relative;z-index:1;background:rgba(13,13,16,.82);backdrop-filter:blur(8px)}
.w-ctaband{position:relative;z-index:1}

/* Das Laufband hat Ränder in #0F0F0F, die jetzt neben dem Farbfeld
   stehen würden. Auf den Grund abgestimmt. */
.fx-lauf::before{background:linear-gradient(90deg,#101119,transparent)}
.fx-lauf::after{background:linear-gradient(270deg,#101119,transparent)}

/* --- Kein WebGL, schmales Fenster, Bewegung abbestellt ------------
   Dann bleibt es beim Standbild, und der Schleier wird dichter, weil
   kein Modell mehr für Tiefe sorgt. */
.buehne.still .buehne-grund::after{opacity:.42}
@media (prefers-reduced-motion:reduce){
  .buehne-grund{animation:none}
}


/* --- 17  Schleierform je Station ----------------------------------
   Ein Faktor allein reicht nicht. Im Seitenkopf muss der Schleier links
   dicht bleiben, damit die Headline trägt, und rechts früh aufmachen,
   damit das Gebäude hell dasteht. Ein global gedimmter Schleier macht
   beides gleichzeitig falsch. */

.buehne[data-station="aussen-nah"] .buehne-flor{
  background:linear-gradient(100deg,
    rgba(15,15,18,calc(.95 * var(--flor,1))) 0%,
    rgba(15,15,18,calc(.92 * var(--flor,1))) 34%,
    rgba(15,15,18,calc(.86 * var(--flor,1))) 54%,
    rgba(15,15,18,calc(.46 * var(--flor,1))) 68%,
    rgba(15,15,18,calc(.14 * var(--flor,1))) 84%,
    rgba(15,15,18,calc(.02 * var(--flor,1))) 100%);
}
/* Weite Stationen dürfen ebenfalls mehr zeigen. */
.buehne[data-station="weit"] .buehne-flor,
.buehne[data-station="abschied"] .buehne-flor{
  background:linear-gradient(100deg,
    rgba(15,15,18,calc(.92 * var(--flor,1))) 0%,
    rgba(15,15,18,calc(.89 * var(--flor,1))) 36%,
    rgba(15,15,18,calc(.85 * var(--flor,1))) 64%,
    rgba(15,15,18,calc(.76 * var(--flor,1))) 88%,
    rgba(15,15,18,calc(.60 * var(--flor,1))) 100%);
}
@media (max-width:1100px){
  .buehne[data-station]  .buehne-flor{
    background:linear-gradient(180deg,
      rgba(15,15,18,calc(.52 * var(--flor,1))) 0%,
      rgba(15,15,18,calc(.84 * var(--flor,1))) 26%,
      rgba(15,15,18,calc(.93 * var(--flor,1))) 100%);
  }
}

/* --- 18  HubSpot-Formular ----------------------------------------
   Das Embed rendert in einen iframe. Von hier aus ist deshalb nur der
   Container erreichbar — die Gestaltung der Felder reicht js/hsform.js
   über cssRequired in den iframe hinein. Ein erster Anlauf stand hier
   als .hs-input-Regelwerk und war wirkungslos. */

.formularfeld{max-width:620px;margin-top:6px;min-height:300px}
.formularfeld .laedt{
  font:400 14px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.015em;
  color:rgba(15,15,15,.84);   /* gerechnet: 4,98:1 auf Signal Blue */
}
.formularfeld .fallback{font-size:16px;color:var(--ink-2)}
.formularfeld .fallback a{color:var(--ink);text-decoration:underline}
.formularfeld iframe{width:100%!important;border:0;display:block}

/* Sprachumschalter im Kopf. Element 04 der Bibliothek, auf zwei Kürzel
   reduziert — mehr Sprachen gibt es nicht. */
.kopf .sprache{
  margin:0 0 0 auto;display:flex;gap:2px;pointer-events:auto;
  font:400 14px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;
}
.kopf .sprache a,.kopf .sprache span{padding:8px 9px;color:var(--ink-2)}
.kopf .sprache [aria-current]{color:var(--ink)}
.kopf .sprache a:hover{color:var(--ink);text-decoration:none}

/* ===================================================================
   19  Kacheln, Laufband, Produktwege
   =================================================================== */

/* --- Hover über Fläche und Linie, nicht über Schatten -------------
   Abschnitt 13 der Quelle ist eindeutig: „Keine Rahmen, keine Schatten.
   Hierarchie über Flächenkontrast und Radius." fx-heben bringt nur
   3 px Hub und einen Randwechsel mit — als Rückmeldung zu wenig. Hier
   kommt der Flächenkontrast dazu, der laut Regel das Mittel der Wahl
   ist, plus der Lichtstreifen aus fx-licht. */

.w-bento .k,
.w-leistung .k,
.w-preise .k,
.belastbar .k{
  /* Gedeckt statt durchscheinend: der Text soll auf einer Flaeche
     stehen, nicht auf dem Gebaeude dahinter. Feldfarbe bei 86 %,
     darueber die bisherige leichte Weisstoenung. */
  background:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.045)), rgba(16,17,25,.86);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  transition:background-color var(--tempo) var(--kurve),
             border-color var(--tempo) var(--kurve),
             transform var(--tempo) var(--kurve);
}
.w-bento .k:hover,
.w-leistung .k:hover,
.w-preise .k:hover,
.belastbar .k:hover{
  background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09)), rgba(16,17,25,.86);
  border-color:rgba(116,136,246,.58);
  transform:translateY(-4px);
}
/* Tastatur bekommt dieselbe Rückmeldung wie die Maus. */
.w-bento .k:focus-within,
.w-leistung .k:focus-within,
.w-preise .k:focus-within,
.belastbar .k:focus-within{
  background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09)), rgba(16,17,25,.86);
  border-color:var(--signal);
}
@media (prefers-reduced-motion:reduce){
  .w-bento .k:hover,.w-leistung .k:hover,.w-preise .k:hover{transform:none}
}

/* --- Laufband: schneller und ohne Bremse -------------------------- */
.fx-lauf .spur{animation-duration:21.6s;will-change:transform}   /* 26 s ÷ 1,2 */
/* Der Guide hält das Band beim Überfahren an. Auf einer Landingpage ist
   das ein stehendes Band, sobald der Zeiger irgendwo darüber ruht —
   deshalb hier nicht. */
.fx-lauf:hover .spur{animation-play-state:running}

/* --- Luft vor dem Dreiklang --------------------------------------- */
.dreiklang{margin:clamp(58px,7vw,108px) 0 0}

/* --- Zwei Wege: Premium in Gold, Direct in Platinum ----------------
   Die Produktlogos kommen aus dem CI-Guide, Abschnitt 02: Wortmarke,
   Schrägstrich, Produktwort — „die Farbe endet am Schrägstrich".
   Premium trägt Gold #C2A468, Direct Platinum #B4B8C2, beides die
   Töne für dunklen Grund.

   Warum die Direct-Kachel nur *heller dunkel* ist und nicht hellgrau:
   der Guide rechnet vor, dass auf hellem Grund kein Metallic als
   Textfarbe taugt — Platinum erreicht dort 2,82:1. Auf Schwarz sind es
   9,65:1. Die Staffelung passiert deshalb innerhalb des Dunklen.

   Und ein Befund zur Regel „Ein Produkt pro Auftritt": hier stehen
   zwei nebeneinander, weil der Content ausdrücklich zwei gleichwertige
   Wege zeigt. Das ist eine bewusste Abweichung, keine Unachtsamkeit. */

.zwei-wege .k{padding:32px 30px 30px}
.zwei-wege .produktlogo{display:block;width:auto;height:26px;margin:0 0 18px}

.zwei-wege .premium{
  background:linear-gradient(155deg, rgba(194,164,104,.10), rgba(194,164,104,.02) 58%, transparent), rgba(16,17,25,.86);
  border-color:rgba(194,164,104,.42);
}
.zwei-wege .premium:hover{
  background:linear-gradient(155deg, rgba(194,164,104,.17), rgba(194,164,104,.05) 58%, transparent), rgba(16,17,25,.86);
  border-color:rgba(194,164,104,.72);
}
.zwei-wege .premium .art{color:#C2A468}

.zwei-wege .direct{
  background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)), rgba(16,17,25,.86);
  border-color:rgba(180,184,194,.34);
}
.zwei-wege .direct:hover{
  background:linear-gradient(rgba(255,255,255,.11),rgba(255,255,255,.11)), rgba(16,17,25,.86);
  border-color:rgba(180,184,194,.62);
}
.zwei-wege .direct .art{color:#B4B8C2}

.zwei-wege .d{color:var(--ink-2);font:400 16px/25px var(--text)}


/* --- 20  Formularfenster ------------------------------------------
   Der Content verlangt im CTA-Band nur einen Knopf. Das Formular liegt
   deshalb im Overlay — gleicher Bau wie die Rechtstexte, damit
   Fokusfang, Escape und Hintergrundsperre vom <dialog> kommen und nicht
   von Hand nachgebaut werden. */
dialog.formularfenster{
  width:min(560px,92vw);max-height:88vh;padding:0;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--rule-2);border-radius:var(--radius);
}
dialog.formularfenster::backdrop{background:rgba(15,15,15,.82);backdrop-filter:blur(3px)}
dialog.formularfenster .kasten{padding:30px 32px 34px;overflow-y:auto;max-height:88vh}
dialog.formularfenster h2{font:400 26px/32px var(--text);letter-spacing:-.4px;margin:0 0 22px}
dialog.formularfenster .zu{
  position:sticky;top:0;float:right;
  background:none;border:1px solid var(--rule-2);color:var(--ink);
  border-radius:var(--radius);padding:7px 13px;cursor:pointer;
  font:400 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;
}
dialog.formularfenster .formularfeld{max-width:none;margin-top:0;min-height:340px}

/* Der Knopf im Band steht jetzt allein — er braucht die Luft, die
   vorher das Formular gefüllt hat.

   Und er braucht eine andere Farbe: .w-voll ist Signal Blue, das Band
   ist Signal Blue. Solange dort ein Formular stand, trugen die weißen
   Felder den Kontrast; mit dem Knopf allein stand schwarze Schrift auf
   blauer Fläche ohne erkennbare Knopfform. Weiß auf Signal Blue ergibt
   3,18:1 und trägt damit die Schwelle für Bedienelemente. */
.w-ctaband .w-btn[data-oeffnet]{
  margin-bottom:26px;
  background:#FFFFFF;color:#171B25;
}
.w-ctaband .w-btn[data-oeffnet]:hover{background:#0F0F0F;color:#FFFFFF}


/* --- 21  Heller, ohne die Farbregel zu verlassen -------------------
   Zwei Farben haben die Seite dunkel wirken lassen, und beide stehen so
   in der Elementebibliothek, weil die für einen Abzug auf massivem
   #0F0F0F gedacht ist — nicht für Text über einem belichteten Gebäude.

   Die Kapitelmarken tragen Signal Blue #7488F6. Der Guide führt dafür
   eine eigene Skala, und --signal-60 (#A9B4F9) ist genau der Ton für
   dunklen Grund. Das ist keine neue Farbe, sondern die vorgesehene.
   Nebeneffekt: der zulässige Hintergrund steigt von 42 auf 72, und
   genau das ist die Luft, die der Schleier braucht, um dünner zu
   werden und das Gebäude durchzulassen.

   --ink-3 mit 46 % Weiss ist die schwächste Schrift der Seite und war
   in jeder Messung der schlechteste Punkt. Auf 62 % gehoben. */
.w-eyebrow,
.w-bento .k b,
.w-leistung .k b,
.w-preise .k b,
.dreiklang b,
.w-akkordeon .zeile i{color:var(--signal-60)}

:root{--ink-3:rgba(255,255,255,.68)}

/* Fliesstext eine Spur heller: 80 % war der Wert der Vitrine, die auf
   massivem Schwarz steht. */
.w-abschnitt p,.w-bento .k p,.w-leistung .k p{color:rgba(255,255,255,.88)}
/* Die Subline im Seitenkopf ist jetzt eine einzige kurze Zeile und liegt
   dort, wo der Schleier aufmacht — gemessen 4,51:1 bei Schwelle 4,5.
   Zu knapp. Sie wird weiss; die Hierarchie trägt die Größe, nicht die
   Deckkraft: 20 px gegen 64 px. */
.w-hero .unter{color:var(--ink)}


/* ==================================================================
   23  Die Seite auf das Wesentliche
   ================================================================== */

/* --- Ergebniszahlen in der Signalfarbe ---------------------------- */
/* Die Elementschicht setzt die Zahlen weiss. Auf der Akzentfarbe
   tragen sie den Blick — bei 48 px fett gilt die Schwelle 3:1. */
.w-zahlen .k b{color:var(--signal)}


/* --- Zwei Wege: mittig und ruhiger -------------------------------- */
.zwei-wege{margin-left:auto;margin-right:auto;max-width:880px;gap:20px}
.zwei-wege .k{
  padding:40px 34px 36px;text-align:center;justify-items:center;gap:0;
  /* Ein feiner Lichtsaum an der Oberkante. Die Marke kennt keine
     Schatten — Tiefe entsteht über Fläche und Kante, Abschnitt 13. */
  position:relative;
}
.zwei-wege .k::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
}
.zwei-wege .produktlogo{height:46px;max-width:88%;object-fit:contain;margin:0 auto 22px}
.zwei-wege .art{
  display:inline-block;margin:0 auto 16px;padding:7px 14px;
  border-radius:var(--radius-pille);border:1px solid rgba(255,255,255,.18);
  font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
}
.zwei-wege .premium .art{border-color:rgba(194,164,104,.42);color:#C2A468}
.zwei-wege .direct  .art{border-color:rgba(180,184,194,.38);color:#B4B8C2}
.zwei-wege .d{margin:0 auto;max-width:36ch;font:400 15px/25px var(--text)}
#wege .w-text{text-align:center;max-width:56ch;margin-left:auto;margin-right:auto}

/* --- Belastbarkeit als Bento -------------------------------------- */
/* Aus der Hakenliste wird ein Raster aus sechs Spalten: eine breite
   Kachel für die Solver, darunter drei gleiche. Die vier Solvernamen
   stehen als Chips in SemiMono — das ist die Schrift, die die CI für
   Technisches vorsieht, und sie tragen die Aussage ohne einen Satz. */
.belastbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.belastbar .k{
  grid-column:span 2;padding:26px 24px 26px;
  display:flex;flex-direction:column;
}
.belastbar .weit{grid-column:span 6}
.belastbar b{
  display:block;font:400 13px/26px var(--text);letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal-60);margin-bottom:8px;
}
.belastbar p{margin:0;font:400 16px/25px var(--text);color:rgba(255,255,255,.88);max-width:62ch}
.werkzeuge{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.werkzeuge i{
  font-style:normal;font:400 12px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;padding:8px 13px;border-radius:var(--radius-pille);
  border:1px solid rgba(116,136,246,.38);background:rgba(116,136,246,.09);
  color:var(--signal-60);
}
@media (max-width:900px){
  .belastbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .belastbar .k{grid-column:span 1}
  .belastbar .weit{grid-column:span 2}
}
@media (max-width:560px){
  .belastbar{grid-template-columns:minmax(0,1fr)}
  .belastbar .k,.belastbar .weit{grid-column:span 1}
}

/* ==================================================================
   24  Zielgruppen — nach dem Vorbild von optimuse.com
   ================================================================== */
/* Dort ausgemessen (1440 px): drei Kacheln à 480 × 550 ohne Abstand,
   Bild randlos mit object-fit:cover, darüber ein Schleier rgb(23,27,37)
   bei 0,45, der Titel weiss unten links mit 60 px Polster. Beim Hover
   geht der Schleier auf 0,85, der Titel-Block blendet aus und ein
   zweiter Block mit Titel und Text blendet ein — opacity 0,4 s
   ease-in-out. Hier vier Kacheln in der Satzbreite, sonst derselbe Bau.

   Nicht übernommen: die 3D-Neigung, die der Kachel dort dem Zeiger
   folgt. Sie ist Theme-Effekt, kein CI-Element, und sie kostet ein
   Skript für etwas, das die Aussage nicht trägt. */
.profile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.profile .k.profil{
  position:relative;margin:0;padding:0;overflow:hidden;
  aspect-ratio:480/550;
  background:#171B25;border:0;border-radius:0;
  /* fx-heben kommt hier nicht zum Einsatz: die Rückmeldung ist der
     Schleier, nicht der Hub. */
  transform:none;
}
.profile .k.profil picture,
.profile .k.profil img{position:absolute;inset:0;width:100%;height:100%;display:block}
.profile .k.profil img{object-fit:cover;object-position:center}

/* Der Schleier liegt als ::before über dem Bild, unter dem Text. */
.profile .k.profil::before{
  content:"";position:absolute;inset:0;background:#171B25;opacity:.45;
  transition:opacity .4s ease-in-out;
}
/* Verlauf hinter dem Titel. Auf optimuse.com steht der Titel direkt auf
   dem 0,45-Schleier — gemessen 2,98:1 auf „Generalunternehmer", knapp
   unter 3:1. Statt den Schleier überall zu verdichten, verdichtet er sich
   nur dort, wo Schrift steht: das Bild bleibt oben offen. */
.profile .k.profil::after{
  content:"";position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(to top,rgba(23,27,37,.92) 0%,rgba(23,27,37,.55) 45%,transparent 100%);
  pointer-events:none;
}
.profile .k.profil figcaption{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(18px,2.2vw,32px);color:#FFFFFF;
}
.profile .k.profil b{
  display:block;font:400 clamp(20px,2.05vw,30px)/1.15 var(--text);letter-spacing:-.4px;
  color:#FFFFFF;text-transform:none;hyphens:auto;overflow-wrap:anywhere;
  transition:transform .4s ease-in-out;
}
.profile .k.profil p{
  margin:0;font:400 15px/23px var(--text);color:#FFFFFF;
  /* Ruhe: unsichtbar und ohne Platz. Der Titel steht unten. */
  max-height:0;opacity:0;overflow:hidden;
  transition:opacity .4s ease-in-out,max-height .4s ease-in-out,margin .4s ease-in-out;
}
.profile .k.profil:hover::before,
.profile .k.profil:focus-within::before{opacity:.85}
.profile .k.profil:hover p,
.profile .k.profil:focus-within p{max-height:12em;opacity:1;margin-top:12px}

/* Ohne Hover — Touch — gibt es kein Darüberfahren: der Text steht dann
   dauerhaft, und der Schleier dazu gleich bei 0,85. */
@media (hover:none){
  .profile .k.profil::before{opacity:.85}
  .profile .k.profil p{max-height:none;opacity:1;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){
  .profile .k.profil::before,.profile .k.profil p,.profile .k.profil b{transition:none}
}
@media (max-width:1100px){
  .profile .k.profil p{font-size:14px;line-height:21px}
}
@media (max-width:760px){
  .profile .k.profil{aspect-ratio:3/4}
  .profile .k.profil figcaption{padding:12px}
  .profile .k.profil b{font-size:15px;letter-spacing:-.2px}
  .profile .k.profil p{font-size:12px;line-height:17px}
}
@media (max-width:480px){ .profile{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:360px){ .profile{grid-template-columns:minmax(0,1fr)} }

/* --- Laufband: Logos wachsen zur Mitte (js/laufband.js) ---------------
   Die Groesse setzt das Skript je Frame als transform. Damit das Bild
   nicht bei jedem Schritt neu gerastert wird, bleibt die Ebene stehen;
   der Ursprung ist die Logomitte, gewachsen wird in Ruhe an Ort und
   Stelle. Kein Uebergang auf transform — das Skript ist der Uebergang. */
.w-laufband img{transform-origin:50% 50%;will-change:transform}


/* ==================================================================
   25  Kartentitel als h3
   ================================================================== */
/* Die 18 Kartentitel waren <b> — für die Suche unsichtbar, die Seite
   hatte unter den H2 keine Ebene. Jetzt <h3>, mit exakt den
   Deklarationen der bisherigen b-Regeln (w-elemente.css:170,185 und
   die Überschreibungen oben), damit sich im Bild nichts bewegt. Ohne
   diesen Block rendern die h3 in Browser-Größe: es gibt keinen
   globalen h3-Reset. */
.w-leistung .k h3,.w-bento .k h3,.belastbar h3{
  display:block;margin:0;
  font:400 13px/26px var(--text);letter-spacing:.12em;text-transform:uppercase;
  color:var(--signal-60);
}
.w-leistung .k h3{margin-bottom:10px}
.belastbar h3{margin-bottom:8px}
.profile .k.profil h3{
  display:block;margin:0;font:400 clamp(20px,2.05vw,30px)/1.15 var(--text);letter-spacing:-.4px;
  color:#FFFFFF;text-transform:none;hyphens:auto;overflow-wrap:anywhere;
  transition:transform .4s ease-in-out;
}
@media (max-width:760px){ .profile .k.profil h3{font-size:15px;letter-spacing:-.2px} }
@media (prefers-reduced-motion:reduce){ .profile .k.profil h3{transition:none} }

/* --- 26  Demo-Feld ----------------------------------------------------
   Das Modell zum Anfassen, als iframe in einem Rahmen aus der Kachel-
   sprache: gedeckte Fläche, Haarlinie, Radius. Das Seitenverhältnis
   reserviert den Platz vor dem Laden. */
.demo-feld{
  margin-top:36px;aspect-ratio:16/9;max-height:640px;
  background:rgba(16,17,25,.86);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);overflow:hidden;
}
.demo-feld iframe{display:block;width:100%;height:100%;border:0;background:transparent}
@media (max-width:760px){ .demo-feld{aspect-ratio:4/3} }

/* info.optimuse.com: Impressum/Datenschutz sind Links auf optimuse.com
   in neuem Tab statt Knöpfe für Overlays */
.w-fuss .rechtlich a{
  font:400 14px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  text-decoration:none;
}
.w-fuss .rechtlich a:hover{color:var(--ink)}