/* ==========================================================================
   GROWIT — GRUND
   --------------------------------------------------------------------------
   Warum es diese Datei gibt.

   Bis hierher hat fast jede Stilebene ihren eigenen Hintergrund mitgebracht:
   atmo.css eine fixierte Fläche plus einen weißen Lichtkegel pro Abschnitt,
   leistungen.css eine zweite fixierte Fläche mit zwei Farbschleiern,
   rhythmus.css einen Verlauf auf dem body und darüber weiße Bögen,
   charakter.css noch einmal einen Ton je Seite.

   Vier Systeme auf derselben Fläche. Überall dort, wo zwei davon
   aneinanderstoßen, entsteht eine sichtbare Kante — und genau die waren zu
   sehen. Das ist kein Fehler in einem einzelnen Wert, den man nachjustiert;
   es ist eine Frage der Zuständigkeit.

   Ab hier gilt: EINE Ebene besitzt den Hintergrund. Diese hier. Alle anderen
   werden abgeschaltet. Abschnitte tragen keinen eigenen Grund mehr, keine
   Lichtkegel, keine Trennlinien. Tiefe entsteht nur noch durch das, was
   wirklich Inhalt ist: Schrift, Bilder, Karten, die man anklicken kann.

   Der Ton ist bewusst zurückhaltend — fast weiß mit einem Hauch Blau. Ein
   flacher Verlauf kann kaum Streifen bilden, und das Growit-Blau wirkt
   stärker, wenn es nicht mit dem eigenen Hintergrund konkurriert.

   Diese Datei wird auf allen hellen Seiten ALS LETZTE geladen.
   Die Unterseite „KI & Automatisierung" bleibt dunkel und lädt sie nicht.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Die Farben
   -------------------------------------------------------------------------- */
:root {
  /* Der Grund — drei Stufen, sehr eng beieinander */
  --grund-hell:  #FCFDFF;
  --grund-mitte: #F3F7FC;
  --grund-tief:  #E8EFF8;

  /* Schriftfarben mit geprüftem Kontrast.
     Die Marken-Blautöne #5271FF und #27E6FF bleiben unangetastet — sie sind
     Flächenfarben für Buttons, Verläufe und Grafiken. Als kleine Schrift auf
     hellem Grund erreichen sie nur 3,4 : 1 beziehungsweise 1,3 : 1 und sind
     damit nicht lesbar. Dafür gibt es diese beiden Ableitungen, die auf
     mindestens 4,5 : 1 kommen und trotzdem eindeutig Growit-Blau bleiben. */
  --royal-text: #3348D9;   /* 5,9 : 1 — Augenbrauen, Links, Ziffern */
  --cyan-text:  #0A6E7C;   /* 5,3 : 1 — überall dort, wo Cyan Schrift war */

  /* Ein Verlauf, der weiße Schrift trägt.
     Der Marken-Verlauf #5271FF → #27E6FF sieht großartig aus, solange
     nichts darauf steht. Weiß auf #27E6FF kommt auf 1,5 : 1 — das ist
     nicht schwach, das ist unlesbar. Selbst der Anfang bei #5271FF
     schafft nur 4,1 : 1. Für alles, was weiße Schrift trägt, gibt es
     deshalb diese Fassung: dieselbe Bewegung von Blau nach Cyan, nur
     zwei Stufen tiefer. Sie hält an jedem Punkt mindestens 4,7 : 1.
     Überall sonst bleibt der helle Marken-Verlauf unangetastet. */
  --grad-akzent-text: linear-gradient(135deg, #4258E6 0%, #0E7F91 100%);
}

/* Die beiden leisen Grautöne waren zu blass. Sie bleiben leise, werden aber
   lesbar: --muted von 5,1 auf 6,1 und --light von 2,6 auf 4,9. */
body:not(.ki-page) {
  --muted: #4F5872;
  --light: #5C6580;
}

/* --------------------------------------------------------------------------
   2 · Der Grund
   Eine einzige Fläche, fest hinter der Seite. Sie scrollt nicht mit, also
   kann sie sich auch nicht mit einem Abschnitt überschneiden.
   -------------------------------------------------------------------------- */
html { background: var(--grund-mitte); }

/* Die Aufzählung wirkt umständlich, ist aber nötig: atmo.css, rhythmus.css
   und charakter.css setzen ihren Grund jeweils auf body MIT Klasse. Ein
   schlichtes „body" käme dagegen nicht an. Alle Varianten bekommen deshalb
   hier dieselbe eine Fläche. */
body,
body.atmo,
body.mappe,
body.leistungen-page,
body[data-charakter] {
  background:
    /* ein einziger, sehr leiser Markenhauch oben rechts */
    radial-gradient(72% 46% at 88% 0%, rgba(82, 113, 255, .07), rgba(82, 113, 255, 0) 62%),
    linear-gradient(180deg, var(--grund-hell) 0%, var(--grund-mitte) 46%, var(--grund-tief) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
}

/* Das Filmkorn liegt über allem und bricht die letzten Reste von
   Streifenbildung im Verlauf — 8 Bit reichen für weiche Verläufe sonst
   nicht aus. Es ist so schwach, dass man es nicht als Korn wahrnimmt. */
.grain { opacity: .035 !important; }

/* --------------------------------------------------------------------------
   3 · Die alten Hintergründe abschalten
   -------------------------------------------------------------------------- */

/* atmo.css — die fixierte Fläche und ihre beiden wandernden Lichtfelder */
.atmo-ground { display: none !important; }

/* leistungen.css — die zweite fixierte Fläche samt Aura */
.lbg { display: none !important; }

/* atmo.css — der Lichtkegel je Abschnitt und die Haarlinie dazwischen.
   Beides war als weiche Trennung gedacht und wurde als Kante gelesen. */
.stage::before,
.stage::after,
.stage + .stage::after { display: none !important; }

/* rhythmus.css — die weißen Bögen.
   Der Bogen bleibt als Behälter erhalten, damit Abstände und Reiter sitzen.
   Sichtbar ist er nicht mehr: auf einem fast weißen Grund wäre ein weißes
   Blatt ohnehin nur eine Kante ohne Aussage. */
.bogen {
  background: none !important;
  box-shadow: none !important;
  margin-inline: 0 !important;
}
.bogen::before,
.bogen::after { display: none !important; }
.bogen + .bogen,
.bogen + .grund + .bogen { margin-top: 0 !important; }

/* Der Registerreiter war die Lasche AM Bogen. Ohne Bogen hing er als
   angeschnittenes Kärtchen am linken Seitenrand — sichtbar falsch.
   Die Information dahinter ist aber echt: die Leistungsseiten laufen in
   drei Kapiteln (Richtung → Vorgehen → Fragen), und das ist eine Reihen-
   folge, keine Aufzählung. Also bleibt die Marke und bekommt die Form,
   die dazu passt: eine ruhige Kapitelzeile im Textraster, mit einer
   feinen Linie darunter, die den Beginn eines Kapitels anzeigt. */
.reiter {
  position: static !important;
  transform: none !important;
  left: auto !important;
  display: flex !important;
  align-items: baseline;
  gap: 14px;
  width: min(100% - 48px, var(--shell));
  max-width: none;
  margin: 0 auto clamp(26px, 4vh, 52px);
  padding: 0 0 12px;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  overflow: visible;
}
.reiter b { color: var(--royal-text) !important; }
/* Die Kapitelziffer bekommt die Linie zugeschoben: Text links, Strich
   füllt den Rest. So liest man die Ordnung, ohne dass sie laut wird. */
.reiter::after {
  content: "";
  flex: 1;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, var(--line), rgba(40, 15, 145, 0));
}

/* leistung-plus.css — die Farbkugeln im Kopf jeder Leistungsseite.
   Sie bleiben: sie geben jeder der fünf Seiten ihren eigenen Ton und sind
   auf den Kopfbereich begrenzt, also keine konkurrierende Grundfläche.
   Auf dem alten, kräftigeren Grund sind sie untergegangen; auf dem neuen,
   fast weißen stehen sie plötzlich als Farbflecken da. Deshalb leiser. */
.lx-orb--a { opacity: .3; }
.lx-orb--b { opacity: .24; }
.lx-orb--c { opacity: .2; }
.lx-atmo__grid { opacity: .38; }

/* woge.css und die Leistungsseiten — Abschnitte, die sich selbst einfärben.
   Ausgenommen sind die dunklen Abschnitte: deren Schrift ist weiß und
   braucht ihren Grund. Sie bekommen ihn weiter unten neu. */
.lsec:not([data-theme="dark"]),
.lsec--alt,
.lsec--cta:not([data-theme="dark"]),
section[data-bg]:not([data-theme="dark"]) { background: none !important; }

/* --------------------------------------------------------------------------
   3b · Der eine dunkle Abschnitt auf hellem Grund
   Auf „Leistungen" liegt der KI-Block als einziger im Dunkeln. Er stand hier
   bis zuletzt als abgerundete, eingerückte Tafel auf dem hellen Grund. Genau
   diese Form soll es auf der Seite nicht mehr geben: ein dunkles Kästchen
   mitten im Weiß wirkt wie ein aufgeklebtes Werbefeld. Dunkel läuft ab jetzt
   immer über die volle Bildschirmbreite und trägt denselben Farbverlauf wie
   das Band am Seitenfuß. Damit ist der Wechsel eine Zäsur im Lesefluss und
   keine Kachel.
   -------------------------------------------------------------------------- */
.lsec--ki[data-theme="dark"] {
  position: relative;
  width: 100%;
  margin-inline: 0;
  border-radius: 0;
  background:
    radial-gradient(56% 68% at 84% 6%, rgba(39, 230, 255, .17), rgba(39, 230, 255, 0) 62%),
    linear-gradient(132deg, #150A52 0%, #280F91 40%, #3348D9 78%, #2F5FC4 100%) !important;
  overflow: hidden;
}
/* Ein sehr feiner Lichtsaum an der Oberkante — dieselbe Geste wie beim
   Fuß, damit die Tafel nicht wie aufgeklebt wirkt. */
.lsec--ki[data-theme="dark"]::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, rgba(39, 230, 255, 0), rgba(39, 230, 255, .5), rgba(39, 230, 255, 0));
}

/* Der Block lag früher auf einem durchgehend sehr dunklen Grund. Seit er den
   Bandverlauf trägt, hellt er nach rechts unten bis #2F5FC4 auf. Gegen diese
   hellste Stelle gerechnet fiel weißer Text unter die 4,5:1, die für Fließtext
   gefordert sind: .78 ergab 4,28, .62 nur 3,31. Zwei Stufen ersetzen das —
   .88 für Fließtext (4,98), .82 für untergeordnete Kleintexte (4,55).

   Bewusst hier in grund.css und nicht in leistungen.css: die Klassen stehen
   auch auf leistung-ki.html, und die Automatisierungsseite lädt grund.css
   nicht. So bleibt sie unverändert.

   Der Fließtext steht als p ohne Klasse im Kopf des Blocks; :not([class])
   trifft genau ihn und lässt .ki-head__hint in Cyan unberührt. */
.lsec--ki[data-theme="dark"] p:not([class]),
.lsec--ki[data-theme="dark"] .ki-benefit span { color: rgba(255, 255, 255, .88); }
.lsec--ki[data-theme="dark"] .node__txt small { color: rgba(255, 255, 255, .82); }

/* Der Weiterlesen-Link stand im Cyan #27E6FF und kam auf dem helleren Teil des
   Bandes auf 4,47:1 — drei Hundertstel unter der Grenze. Der Bandton #8FE9F8,
   den die Seite für Schrift auf Dunkel schon führt, half nicht: bei 375 Pixeln
   wird das Band schmal und hoch, der Verlauf staucht sich, und der Link liegt
   dann am hellsten Ende #2F5FC4. Dort sind es wieder 4,47:1.

   Der Link bekommt deshalb #B4F1FB, denselben Cyan eine Stufe heller. Das
   trägt am hellsten Punkt mit 4,76:1 und damit an jeder Fenstergröße. Die
   Hausfarbe #27E6FF bleibt unangetastet, sie führt weiter alle Flächen,
   Rahmen und Symbole.

   Das !important ist nötig, weil .link-arrow--light in leistungen.css selbst
   mit !important gesetzt ist. */
.lsec--ki[data-theme="dark"] .link-arrow--light { color: #B4F1FB !important; }

/* --------------------------------------------------------------------------
   4 · Schriftfarben nachziehen
   Überall dort, wo bisher --royal oder --cyan als kleine Schrift stand.
   -------------------------------------------------------------------------- */
.eyebrow,
.lsec__tag,
.link-arrow,
.teaser__more,
.ldx-related a svg,
.crumbs a,
.stage__fakt a { color: var(--royal-text); }

.eyebrow::before,
.lsec__tag::before { background: var(--royal-text); }

.teaser__k,
.step__k,
.lx-num,
.pk-gruppe__num { color: var(--royal-text); }

.hero__stars,
.wl-plot__hint,
.wl-tip__idx,
.journey__idx,
.check-list li::before,
.link-arrow { color: var(--royal-text); }

/* Die Frage-Nummern in den Fragenlisten und die Augenbraue über dem
   Sponsoring-Block standen noch im hellen Marken-Blau. Beide sind klein
   gesetzt und blieben damit unter der Lesbarkeitsschwelle. */
.faq-q .qnum,
.spons__eyebrow { color: var(--royal-text); }

/* Cyan war als Schrift praktisch unsichtbar. Als Fläche bleibt es.
   Die Höhepunkte der Wertlinie behalten ihren eigenen, wärmeren Ton —
   nur eben in einer Tiefe, die man auch bei Tageslicht lesen kann. */
.wl-point--win .wl-tip__idx,
.journey__step--win .journey__idx,
.vl-tip__desc strong { color: var(--cyan-text); }

.wertlinie .peak-lab { fill: var(--cyan-text); }
.wertlinie .y-lab,
.wertlinie .x-lab { fill: var(--muted); opacity: .85; }

/* Die Verlaufs-Überschriften enden bisher in einem Cyan, das auf hellem
   Grund fast verschwindet. Der Verlauf bleibt, das Ende wird tiefer. */
.stage__head h2 em,
.ldx-head h2 em,
h2 em {
  font-style: normal;
  color: var(--royal-text);
}

/* Die dunklen Bereiche: dort ist Cyan auf Navy hervorragend lesbar.
   Gebunden an den Abschnitt, nicht an den body — die Klasse
   .lsec-dark-active haengt am body, solange der Kopf ueber einem
   dunklen Abschnitt steht, und faerbte damit auch Ueberschriften und
   Marken weiter unten auf hellem Grund. */
[data-theme="dark"] h2 em,
.footer h2 em {
  color: var(--cyan);
}
[data-theme="dark"] .check-list li::before { color: var(--cyan); }
.footer .eyebrow,
[data-theme="dark"] .lsec__tag,
[data-theme="dark"] .link-arrow,
[data-theme="dark"] .eyebrow { color: var(--cyan); }
.footer .eyebrow::before,
[data-theme="dark"] .lsec__tag::before { background: var(--cyan); }

/* Die Flächen, auf denen weiße Schrift steht: Schrittziffern, Rang im
   Suchergebnis, die Marker am Vorher/Nachher-Bild, die Chips im
   Redaktionsplan und die Live-Marke am 3D-Fenster. */
.proc-step__num,
.ch-treffer--sie .ch-treffer__rang,
.lx-cal__tag--reel { background-image: var(--grad-akzent-text) !important; }

/* Die beiden anderen Chips im Redaktionsplan tragen ebenfalls weiße Schrift.
   Sie behalten ihre eigene Farbnote, nur eine Stufe tiefer angesetzt. */
.lx-cal__tag--foto  { background: linear-gradient(120deg, #280F91, #4258E6) !important; }
.lx-cal__tag--story { background: linear-gradient(120deg, #5B2FD9, #4258E6) !important; }

/* Die Live-Marke am 3D-Fenster ist ein Glas-Chip über einem Foto. Sie behält
   das Glas, wird aber dichter — sonst entscheidet das Foto darunter über die
   Lesbarkeit, und das ist keine Entscheidung, die man dem Foto überlässt. */
.lx-render__tag { color: #fff; background: rgba(9, 5, 34, .82); }

/* Die Live-Marke am Handy: Weiß auf hellem Rot ist zu wenig. Dasselbe Rot,
   nur satter — die Signalwirkung bleibt, die Schrift wird lesbar. */
.phone__live { background: #C81E3C; }

/* Die Marken-Fläche unter weißer Schrift: Hauptbutton und die Auszeichnung
   im Hero. Dieselbe Bewegung von Royal nach Navy, nur einen Schritt tiefer
   angesetzt. Optisch kaum zu unterscheiden, in der Messung 5,5 : 1 statt 4,1. */
.btn--primary,
.hero__badge .pill { background: linear-gradient(135deg, #4258E6, var(--navy)); }

/* Die beiden Beschriftungen im SEO-Werkzeug standen im hellen Marken-Blau
   auf fast weißem Grund. */
.seo-tool__kicker,
.seo-tool__gap { color: var(--royal-text); }

/* Pflichtfeld-Sternchen und Textlinks im Formular sowie die Beschriftung an
   der Naht auf der Genossenschaftsseite — überall dieselbe Ursache: helles
   Marken-Blau, klein gesetzt, auf hellem Grund. */
.field .req,
.form-note a,
.field a,
.wg-riss__naht b { color: var(--royal-text); }

/* Auf der Genossenschaftsseite hängt fast jede kleine Auszeichnung am selben
   Ton (--wg-blau, #5271FF). Als Fläche trägt er, als kleine Schrift auf fast
   weißem Grund erreicht er nur 4,1 : 1. Die Textstellen gehen deshalb eine
   Stufe tiefer — die Flächen und Verläufe bleiben, wie sie sind.
   Der dunkle Abschnitt (.wg-eins) hat eigene, höher gewichtete Regeln. */
.wg-label,
.wg-hebel__nr,
.wg-akte__ort,
.wg-akte__daten dt,
.wg-akte__daten b { color: var(--royal-text); }

/* „Platz 1“ in der Ergebnisliste stand im hellen Cyan. */
.ch-serp__stand b { color: var(--cyan-text); }

/* Zwei Zeichen, die nur schmücken, aber auf dem hellen Grund verschwunden
   sind: die Beschriftung am Maßband und das Anführungszeichen vor dem Zitat.
   Beide bleiben zurückhaltend — sie werden nur wieder sichtbar. */
.ch-mass b { color: var(--royal-text) !important; }

/* Die Marke „Nachher" liegt auf einem Foto. Sie war zu 90 % deckend im hellen
   Marken-Blau — was darunter durchscheint, entscheidet dann über die
   Lesbarkeit. Dichter und einen Ton tiefer: die Schrift steht fest. */
.lx-ba__label--after { background: rgba(51, 72, 217, .94); }
.lpage .lx-quote__mark,
.lx-quote__mark { color: var(--royal-text); opacity: .34; }

/* Der Bank-Abschnitt der Startseite ist hell (siehe atmo.css). Zwei Reste aus
   seiner dunklen Vergangenheit standen noch drin: eine cyanfarbene Augenbraue
   und ein weißer Button — beides auf hellem Grund praktisch unsichtbar. */
body.atmo .bank__head .eyebrow--light { color: var(--cyan-text); }
body.atmo .bank__head .eyebrow--light::before { background: var(--cyan-text); }
body.atmo .bank__cta .btn--light {
  background: linear-gradient(135deg, #4258E6, var(--navy));
  color: #fff;
  box-shadow: 0 16px 34px -14px rgba(66, 88, 230, .55);
}

/* --------------------------------------------------------------------------
   4b · Woher die Zahlen kommen
   Die Richtwerte auf der Startseite sind Erfahrungswerte der Branche, keine
   Messung an einzelnen Projekten. Das steht jetzt dabei — leise, aber
   lesbar. Eine Zahl ohne Herkunft ist eine Behauptung.
   -------------------------------------------------------------------------- */
.valueline__stats--3 { grid-template-columns: repeat(3, 1fr); }
/* site.css bricht die Kennzahlen unter 860 Pixeln auf zwei Spalten um und gibt
   der dritten deshalb eine Trennlinie oben — als wäre sie die zweite Zeile.
   Weil diese Reihe hier bei drei Spalten bleibt, war die Linie falsch: die
   dritte Zahl stand einen Tick tiefer als ihre beiden Nachbarn und hatte
   einen Strich über sich, der ins Nichts zeigte. Also zurücknehmen — und den
   senkrechten Trenner links davon wieder einschalten. */
@media (max-width: 860px) and (min-width: 641px) {
  .valueline__stats--3 .vstat:nth-child(3) { padding-top: 4px; border-top: 0; }
  .valueline__stats--3 .vstat:nth-child(3)::before { display: block; }
}
/* Drei Spalten sind auf 375 Pixern rund 96 Pixel breit — dort steht keine
   Zahl mehr neben ihrer Beschriftung, die Wörter laufen ineinander. Ab hier
   untereinander. Diese Regel steht bewusst hinter der Zeile darüber: die
   Grundregel ist spezifischer als die alten Umbrüche und würde sie sonst
   auch auf dem Handy überstimmen. */
@media (max-width: 640px) {
  .valueline__stats--3 { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 28px); }
}

.stats-quelle {
  margin: clamp(14px, 2vw, 20px) 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--light);
  max-width: 62ch;
}
.stats-quelle--dark { color: rgba(255, 255, 255, .62); }
/* Sammel-Fußnote am Ende einer Seite: sie gehört nicht an einen Abschnitt,
   sondern unter alle — deshalb mit Abstand nach oben und im Seitenraster. */
.stats-quelle--seite { margin-top: clamp(38px, 5vw, 60px); }
/* Im Bank-Abschnitt steht alles mittig — die Fußnote auch. */
body.atmo .bank .stats-quelle { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   4c · Der Kopf der Startseite
   Vorher stand der Logo-Streifen zwischen Fließtext und Button — er trennte
   den Gedanken von der Handlung und lief dabei ins Teamfoto hinein. Und der
   Weg zu den Leistungen hing als Schild mitten auf dem Foto, ohne Halt.
   Jetzt liest sich der Kopf in einer Richtung: Aussage, Handlung, Beleg.
   Der Beleg sind die Namen der Partner — mit einer Zeile darüber, die sagt,
   was man sieht, und die zur Partnerseite führt.
   -------------------------------------------------------------------------- */
/* Der Schleier über dem Gebäudefoto war noch im alten Himmelblau (#EDF7FF)
   gemischt. Der Grund darunter ist jetzt fast weiß — dadurch endete der
   Schleier in einer anderen Farbe, als er traf, und genau da sah man eine
   Kante. Derselbe Schleier, nur in der Farbe des Grundes. */
body.atmo .hero__bg::after {
  background:
    linear-gradient(100deg, var(--grund-hell) 0%, rgba(252, 253, 255, .94) 26%,
                            rgba(252, 253, 255, .66) 52%, rgba(252, 253, 255, .44) 100%),
    linear-gradient(180deg, rgba(252, 253, 255, .3) 0%, rgba(252, 253, 255, .06) 40%,
                            rgba(252, 253, 255, .2) 100%);
}
@media (max-width: 860px) {
  body.atmo .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(252, 253, 255, .96) 0%, rgba(252, 253, 255, .8) 24%,
                              rgba(252, 253, 255, .76) 60%, rgba(252, 253, 255, .84) 100%);
  }
}

.hero__proof {
  margin-top: clamp(30px, 4vh, 46px);
  padding-top: clamp(18px, 2.4vh, 26px);
  border-top: 1px solid var(--line);
  max-width: 480px;
}
/* Nur eine leise Zeile darüber: sie sagt, wessen Logos gleich kommen. Kein
   Link, keine Zahl — die Namen sind der Beleg, nicht ihre Anzahl. */
.hero__proof-lab {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__proof .hero__logos { margin-top: 14px; }

/* Kundenlogos in ihrer eigenen Farbe. Ein Kunde hat sich sein Logo bewusst
   so gegeben — es entsättigt zu zeigen nimmt ihm die Wiedererkennung, und
   genau darum geht es bei einer Referenz. */
.hero__logos-track img {
  filter: none;
  opacity: 1;
  transition: transform .3s var(--ease);
}

/* Zwei gleich große Buttons nebeneinander sind zwei Hauptwege — und damit
   keiner. Der zweite Weg bleibt ein Link: gleiche Zeile, klar leiser. */
.hero__actions { align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.hero__second { font-size: .98rem; font-weight: 600; }
.hero__second svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.hero__second:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5 · Karten
   Wenn der Grund fast weiß ist, kann eine Karte nicht mehr durch Helligkeit
   auffallen. Sie tut es durch eine feine Kante und einen tiefen, weichen
   Schatten — so wie ein Blatt, das wenige Millimeter über dem Tisch liegt.
   -------------------------------------------------------------------------- */
body.atmo .teaser,
body.atmo .step,
body.atmo .journey__step,
body.atmo .stage__fakt,
body.atmo .fakten li {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(40, 15, 145, .09);
  box-shadow: 0 2px 4px -2px rgba(40, 15, 145, .1),
              0 18px 40px -30px rgba(40, 15, 145, .5);
  backdrop-filter: none;
}
body.atmo .teaser:hover,
body.atmo .step:hover {
  background: #fff;
  border-color: rgba(51, 72, 217, .28);
  box-shadow: 0 3px 6px -3px rgba(40, 15, 145, .14),
              0 30px 60px -30px rgba(40, 15, 145, .45);
}

/* --------------------------------------------------------------------------
   5b · Die Wertlinie — die Meilensteine kommen ans Licht
   Die vier Stationen standen bisher in Sprechblasen, die man erst öffnen
   musste. Eine Kurve, deren Beschriftung man suchen muss, erklärt nichts:
   man sah eine lange, flache Linie und einen Hinweis, man möge tippen.
   Jetzt steht jeder Meilenstein dauerhaft unter seinem Punkt — die Spalten
   liegen bei 12,5 / 37,5 / 62,5 / 87,5 %, also genau unter den Punkten der
   Kurve. Das gepunktete Lot verbindet beide. Auf dem Handy bleibt es beim
   senkrechten Zeitstrahl (siehe atmo.css), dort ist das die bessere Form.
   -------------------------------------------------------------------------- */
@media (min-width: 701px) {
  body.atmo .journey {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 4px;
  }
  body.atmo .journey__step {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0 clamp(10px, 1.4vw, 22px);
    text-align: center;
  }
  body.atmo .journey__step::before { display: none; }
  body.atmo .journey__step h4 { margin-top: 5px; font-size: .98rem; }
  body.atmo .journey__step p { margin-top: 5px; font-size: .855rem; }
}
/* Zwischen 701 und 900 Pixeln sind die vier Spalten rund 160 Pixel breit.
   Bei der Ausgangsgröße lief die zweite Station auf drei Zeilen, die anderen
   auf eine — die Reihe wirkte dadurch schief. Etwas kleiner gesetzt, und die
   vier Stationen stehen wieder auf Augenhöhe. */
@media (min-width: 701px) and (max-width: 900px) {
  body.atmo .journey__step { padding: 0 8px; }
  body.atmo .journey__step h4 { font-size: .9rem; }
  body.atmo .journey__step p { font-size: .8rem; line-height: 1.4; }
}

/* Auf dem Handy wird aus der Kurve ein senkrechter Zeitstrahl (atmo.css).
   Dort setzt atmo.css den Karten-Hintergrund der Schritte bewusst auf none —
   die Regel oben in Abschnitt 5 hat ihn aber wieder gesetzt, weil grund.css
   später lädt. Ergebnis war ein durchgehendes weißes Feld mit harter Kante
   hinter dem Zeitstrahl. Hier steht die Absicht noch einmal, damit sie hält. */
@media (max-width: 700px) {
  body.atmo .journey__step {
    background: none;
    box-shadow: none;
    border-color: transparent;
  }
}

/* Der Hinweis „Punkte antippen" ist überflüssig, sobald alles dasteht. */
.wl-plot__hint { display: none; }

/* Das Lot vom Punkt zur Beschriftung darf man sehen — es ist die Verbindung
   zwischen Kurve und Zeile, nicht nur ein Hilfsstrich. */
.wertlinie .grid-line.drop { stroke: rgba(51, 72, 217, .34); }

/* --------------------------------------------------------------------------
   6 · Der Fuß
   Der dunkle Abbinder braucht keinen Anlauf mehr — der Grund ist an dieser
   Stelle hell und ruhig, die Kante zum Navy ist gewollt und liest sich als
   Abschluss, nicht als Fehler.
   -------------------------------------------------------------------------- */
body.atmo .footer::before { display: none; }

/* Wenn man auf dem Handy über das Seitenende hinaus zieht, kommt darunter
   die Farbe von <html> zum Vorschein — bisher der helle Grund, direkt unter
   dem dunklen Fuß. Der Fuß zieht seine Farbe deshalb selbst nach unten
   weiter, so weit man auch zieht. Oben bleibt der Grund hell. */
.footer { box-shadow: 0 50vh 0 50vh #150750; }


/* ==========================================================================
   7 · Die Startseite atmet
   Der Grund steht. Was fehlte, war Bewegung: Licht, das mitläuft, Abstände,
   die nicht überall gleich sind, und ein Diagramm, das etwas tut.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7a · Abstände
   Der Hero und die Kurve gehören inhaltlich zusammen: das eine ist das
   Versprechen, das andere der Beleg. Zwischen ihnen standen bisher zwei
   volle Abschnittsabstände. Sie rücken zusammen.
   -------------------------------------------------------------------------- */
.hero + .stage { padding-top: clamp(56px, 6.4vw, 104px); }

/* Die Kopfzeile der Kurve braucht danach etwas weniger Anlauf nach unten. */
body.atmo .valueline__head { margin-bottom: clamp(22px, 3vw, 38px); }


/* --------------------------------------------------------------------------
   7b · Das Diagramm
   Vorher lagen hinter der Kurve zwei weiche Lichtfelder und eine Wolke aus
   ziehenden Partikeln, dazu lief ein Licht die Linie entlang. Das war viel
   Bewegung für eine Aussage, die still ist: es geht nach oben.
   Die Bewegung ist raus. Was bleibt, ist Präzision — eine ruhige Fläche,
   eine klare Rangfolge im Raster und ein Rand, der ausläuft statt
   abzuschneiden. Das wirkt teurer als jeder Nebel.
   -------------------------------------------------------------------------- */
/* Die Kurve bleibt ohne Kasten auf dem Grund liegen — kein weißes Feld.
   „Hochwertig" kommt hier nicht aus einer Karte, sondern aus der Genauigkeit
   der Grafik selbst. */

/* Rangfolge im Raster: die Nulllinie ist die Bezugsgröße und darf man sehen,
   die Zwischenlinien sind nur Orientierung und treten zurück. Vorher waren
   alle fünf gleich stark — dadurch las sich das Raster wie Papier statt wie
   eine Achse. */
.wertlinie .grid-line { stroke: rgba(40, 15, 145, .07); }
.wertlinie .grid-line:nth-of-type(1) { stroke: rgba(40, 15, 145, .2); }
.wertlinie .grid-line--top { stroke: rgba(39, 230, 255, .5); }
.wertlinie .grid-line.drop { stroke: rgba(82, 113, 255, .3); }

/* Der Schein an der Kurve war ein Glühen. Jetzt ist es ein Schatten: die
   Linie liegt über der Fläche, statt zu leuchten. */
body.atmo .wertlinie .curve {
  filter: drop-shadow(0 4px 12px rgba(40, 15, 145, .22));
}

/* Ein stiller Ring um den letzten Punkt. Er markiert das Ziel der Kurve,
   ohne zu blinken. */
.wertlinie .tick-hof {
  fill: rgba(39, 230, 255, .16);
  opacity: 0; transition: opacity 1s var(--ease) 3.3s;
}
.valueline__chart.in .wertlinie .tick-hof { opacity: 1; }

/* Das Raster baut sich auf, statt fertig dazustehen. Erst die Nulllinie,
   dann nach oben — die Grafik erklärt sich damit selbst von unten her. */
.wertlinie .grid-line { opacity: 0; transition: opacity .9s var(--ease); }
.valueline__chart.in .wertlinie .grid-line { opacity: 1; }
.wertlinie .grid-line:nth-of-type(1) { transition-delay: .05s; }
.wertlinie .grid-line:nth-of-type(2) { transition-delay: .17s; }
.wertlinie .grid-line:nth-of-type(3) { transition-delay: .29s; }
.wertlinie .grid-line:nth-of-type(4) { transition-delay: .41s; }
.wertlinie .grid-line:nth-of-type(5) { transition-delay: .53s; }
/* Die vier Lote gehören zu ihrem Punkt und kommen mit ihm. */
.wertlinie .grid-line:nth-of-type(6) { transition-delay: 1.45s; }
.wertlinie .grid-line:nth-of-type(7) { transition-delay: 2.15s; }
.wertlinie .grid-line:nth-of-type(8) { transition-delay: 2.85s; }
.wertlinie .grid-line:nth-of-type(9) { transition-delay: 3.45s; }

.wertlinie .y-lab { opacity: 0; transition: opacity .9s var(--ease) .3s; }
.valueline__chart.in .wertlinie .y-lab { opacity: .85; }

/* Hier lief früher ein Licht endlos die Kurve entlang. Es hat die Aussage
   nicht ergänzt, sondern von ihr abgelenkt. Die Kurve zeichnet sich einmal
   beim Hereinscrollen — das ist die Bewegung, die dazugehört. */


/* --------------------------------------------------------------------------
   7d · Verläufe in der Schrift
   Ein Verlauf von Royal nach Türkis wandert quer durch den Farbkreis. In
   kleiner Schrift sieht das schnell nach Effekt aus. Der Bogen bleibt, aber
   er bleibt im Blau — von tief nach hell, nicht von blau nach grün.
   -------------------------------------------------------------------------- */
.stage__head h2 em,
.ldx-head h2 em,
h2 em {
  font-style: normal;
  color: var(--royal-text, #3348D9);
}
/* Die großen Kennzahlen tragen denselben, ruhigeren Bogen. */
:root { --grad-akzent-text: linear-gradient(135deg, #2A1580 0%, #3B2FC9 58%, #4A5AEC 100%); }


/* --------------------------------------------------------------------------
   7e · Bewegung beim Scrollen
   Ein Abschnitt kommt nicht als fertiger Block, sondern hebt sich leicht an
   und wird scharf. Der Weg ist kurz — man soll es spüren, nicht sehen.
   -------------------------------------------------------------------------- */
body.atmo .reveal {
  opacity: 0;
  transform: translateY(30px) scale(.985);
  filter: blur(6px);
  transition: opacity .85s var(--ease), transform .95s var(--ease), filter .85s var(--ease);
}
body.atmo .reveal.in { opacity: 1; transform: none; filter: blur(0); }

/* Das Teamfoto und der Hintergrund im Hero wandern beim Scrollen minimal
   unterschiedlich schnell. Die Werte setzt das Skript.
   Der Hintergrund reicht dafür oben und unten über den Hero hinaus — sonst
   käme beim Verschieben eine leere Kante zum Vorschein. Der Hero schneidet
   den Überstand ohnehin ab (overflow: hidden). */
.hero__bg { inset: -70px 0; will-change: transform; }
.hero__media img { will-change: transform; }

/* Die Kachelreihe: beim Darüberfahren hebt sich nur die eine Kachel, die
   anderen treten leicht zurück. Das lenkt, ohne zu blinken. */
body.atmo .teaser-grid:hover .teaser:not(:hover) { opacity: .74; }
body.atmo .teaser { transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  body.atmo .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  body.atmo .teaser-grid:hover .teaser:not(:hover) { opacity: 1; }
}


/* ==========================================================================
   8 · Die Leistungsseiten
   Die fünf hellen Unterseiten hatten bisher jede Abschnittsüberschrift
   linksbündig auf halber Breite stehen. Daneben blieb die andere Hälfte
   leer — kein bewusster Weißraum, sondern eine Lücke. Hier bekommen sie
   denselben Auftritt wie die Startseite.
   ========================================================================== */

/* --------------------------------------------------------------------------
   8a · Abschnittsköpfe in der Mitte
   Eyebrow, Überschrift und Einleitung stehen zentriert über der vollen
   Breite. Die Zeilenlänge bleibt begrenzt — zentriert heißt nicht, dass
   der Text über 1180 px läuft; das liest niemand gern.
   -------------------------------------------------------------------------- */
.lpage .ldx-head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.lpage .ldx-head p {
  max-width: 62ch;
  margin-inline: auto;
}
/* Die Quellenhinweise unter Zahlenreihen gehören optisch zum Kopf darüber. */
.lpage .stats-quelle,
.lpage .ch-quelle {
  margin-inline: auto;
  text-align: center;
}

/* Auf schmalen Geräten ist zentrierter Fließtext schwerer zu lesen: das
   Auge findet den Zeilenanfang nicht wieder. Ab hier wieder linksbündig. */
@media (max-width: 640px) {
  .lpage .ldx-head { text-align: left; }
  .lpage .ldx-head p,
  .lpage .stats-quelle,
  .lpage .ch-quelle { margin-inline: 0; text-align: left; }
}

/* --------------------------------------------------------------------------
   8b · Bewegung beim Scrollen
   Dieselbe Geste wie auf der Startseite: ein Abschnitt hebt sich an und
   wird scharf, statt einfach da zu sein.
   -------------------------------------------------------------------------- */
.lpage .reveal {
  opacity: 0;
  transform: translateY(28px) scale(.988);
  filter: blur(5px);
  transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease);
}
.lpage .reveal.in { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .lpage .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* --------------------------------------------------------------------------
   8c · Die Zusage
   Hier stand vorher ein anonymes Kundenzitat. Ein Satz ohne Namen belegt
   nichts — er klingt nur so. An seiner Stelle steht jetzt, wofür wir
   geradestehen: drei Punkte, die man nachhalten kann.
   Kein Kasten, keine Karte: eine Reihe unter einer Linie, damit der
   Abschnitt ruhig bleibt und die Aussage vorne steht.
   -------------------------------------------------------------------------- */
.zusage { max-width: 980px; margin-inline: auto; }
.zusage__kopf { text-align: center; margin-bottom: clamp(26px, 3.4vw, 40px); }
.zusage__kopf h2 {
  margin-top: 10px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800; letter-spacing: -.035em; color: var(--navy);
}

.zusage__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.zusage__liste li {
  padding-top: 18px;
  border-top: 2px solid var(--royal, #5271FF);
}
.zusage__liste b {
  display: block; font-size: 1.02rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--navy);
}
.zusage__liste span {
  display: block; margin-top: 8px;
  font-size: .95rem; line-height: 1.6; color: var(--muted);
}

@media (max-width: 760px) {
  .zusage__liste { grid-template-columns: 1fr; gap: 22px; }
  .zusage__kopf { text-align: left; }
}


/* ==========================================================================
   9 · Die Mitte
   Die Startseite war unterhalb des Kopfes an vielen Stellen linksbündig,
   obwohl alle Überschriften darüber mittig stehen. Das liest sich als
   Schieflage, nicht als Absicht. Ab hier hat jeder Abschnitt eine Achse:
   die Mitte. Dazu bekommt die Kurve wieder Bewegung — sie ist die einzige
   Stelle, an der etwas passieren soll.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9a · Luft zwischen Kopf und Kurve
   Abschnitt 7a hatte die beiden zusammengezogen, bis sie aneinander klebten.
   Sie gehören zusammen, aber sie sind zwei Gedanken.
   -------------------------------------------------------------------------- */
.hero + .stage { padding-top: clamp(76px, 8.4vw, 132px); }
body.atmo .valueline__head { margin-bottom: clamp(30px, 3.8vw, 50px); }


/* --------------------------------------------------------------------------
   9b · Die Kurve leuchtet
   Bisher zeichnete sie sich einmal und stand dann still. Jetzt atmet ein
   Schein um sie herum, und ein Lichtabschnitt läuft sie entlang — in
   Leserichtung, von der Null zum Ziel. Beides setzt erst ein, wenn die
   Kurve fertig gezeichnet ist (3,4 s), damit sich die Bewegungen nicht
   überlagern.
   Die Pfadlänge beträgt rund 1096 Einheiten; die Strichmuster unten sind
   darauf gerechnet.
   -------------------------------------------------------------------------- */
.wertlinie .curve-schein,
.wertlinie .curve-lauf {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
}

/* Der Hof um die ganze Kurve — er wird heller und wieder dunkler. */
.wertlinie .curve-schein {
  stroke: #27E6FF;
  stroke-width: 7;
  filter: url(#wlWeich);
}
.valueline__chart.in .wertlinie .curve-schein {
  animation: wl-atem 4.6s ease-in-out 3.4s infinite;
}

/* Der durchlaufende Abschnitt. Strich 118, Lücke 1200: weil die Lücke
   länger ist als die Kurve, ist immer nur ein Licht unterwegs. */
.wertlinie .curve-lauf {
  stroke-dasharray: 118 1200;
  stroke-dashoffset: 140;
}
.wertlinie .curve-lauf--hof {
  stroke: #7FE9FF;
  stroke-width: 9;
  filter: url(#wlWeich);
}
.wertlinie .curve-lauf--kern {
  stroke: #F2FEFF;
  stroke-width: 3.2;
  filter: url(#wlWeichFein);
}
.valueline__chart.in .wertlinie .curve-lauf--hof {
  opacity: .5;
  animation: wl-lauf 5.4s cubic-bezier(.42, 0, .58, 1) 3.4s infinite;
}
.valueline__chart.in .wertlinie .curve-lauf--kern {
  opacity: .9;
  animation: wl-lauf 5.4s cubic-bezier(.42, 0, .58, 1) 3.4s infinite;
}

@keyframes wl-atem {
  0%, 100% { opacity: .12; }
  50%      { opacity: .34; }
}
/* 140 → das Licht steht noch vor dem Anfang; −1100 → es ist hinter dem Ende
   verschwunden. Die letzten 28 % der Zeit bleibt es dort: eine Atempause,
   damit es nicht hetzt. */
@keyframes wl-lauf {
  0%       { stroke-dashoffset: 140; }
  72%      { stroke-dashoffset: -1100; }
  100%     { stroke-dashoffset: -1100; }
}

/* Wer Bewegung im System abgestellt hat, bekommt hier keine. Der Schein
   bleibt als stiller Zustand stehen, das Lauflicht entfällt ganz. */
@media (prefers-reduced-motion: reduce) {
  .valueline__chart.in .wertlinie .curve-schein {
    animation: none;
    opacity: .16;
  }
  .wertlinie .curve-lauf { display: none; }
}


/* --------------------------------------------------------------------------
   9c · Die Kennzahlen stehen mittig
   Sie standen linksbündig in ihren drei Spalten. Dadurch saß jede Zahl am
   linken Rand ihrer Säule, und die ganze Reihe zog nach links — obwohl das
   Diagramm darüber symmetrisch ist. Jetzt steht jede Zahl über der Mitte
   ihrer Säule, und die Beschriftung darunter genauso.
   -------------------------------------------------------------------------- */
.valueline__stats .vstat { text-align: center; }
.valueline__stats .vstat__label {
  max-width: 22ch;
  margin-inline: auto;
}

/* Der Quellenhinweis gehört unter die drei Zahlen, nicht an den linken Rand.
   Er sitzt jetzt auf derselben Achse wie Überschrift, Kurve und Kennzahlen. */
.valueline .stats-quelle {
  margin-inline: auto;
  text-align: center;
  max-width: 64ch;
}


/* --------------------------------------------------------------------------
   9d · Die Leistungskacheln enden auf einer Linie
   Zwei Ursachen für die Treppe: Die zweite Reihe war 25 Pixel flacher als die
   erste, weil dort kürzere Texte stehen. Und innerhalb einer Reihe begannen
   die Aufzählungen auf verschiedenen Höhen — je nachdem, ob der Fließtext
   zwei oder drei Zeilen braucht. Beides fällt sofort auf, weil sechs gleiche
   Kacheln nebeneinander stehen.
   -------------------------------------------------------------------------- */
.teaser-grid { grid-auto-rows: 1fr; }

/* Drei Zeilen Platz für den Fließtext — so beginnt die Aufzählung in jeder
   Kachel an derselben Stelle. Nur dort, wo drei Kacheln nebeneinander
   stehen: schmaler umbricht der Text anders, und der reservierte Platz
   stünde leer. */
@media (min-width: 901px) {
  .teaser p { min-height: 4.7rem; }
}


/* --------------------------------------------------------------------------
   10 · Der Bank-Abschnitt bleibt auf dem Grund
   Ein Zwischenstand hatte diesen Abschnitt auf eine dunkle Tafel gestellt,
   um der Startseite mehr Rhythmus zu geben. Das ist zurückgenommen: die Seite
   trägt keine Felder, ausgenommen die Leistungskacheln. Gewicht bekommt der
   Abschnitt jetzt aus der Typografie und dem Raum um ihn herum, nicht aus
   einer Fläche.

   Die drei Schritte sind damit auch keine Karten mehr. Sie stehen als drei
   Spalten nebeneinander, jede unter ihrer eigenen kurzen Linie — dieselbe
   Ordnung wie bei den vier Meilensteinen der Wertlinie, damit die Seite
   zweimal dieselbe Sprache spricht statt zweier verschiedener.
   -------------------------------------------------------------------------- */
body.atmo .bank__panel {
  background: none;
  color: inherit;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  box-shadow: none;
}
body.atmo .bank__panel::before,
body.atmo .bank__panel::after { display: none; }

/* Die Schrittkarte wird zur Spalte: keine Fläche, keine Kante, kein
   Schatten. Oben eine kurze Linie, die den Anfang markiert. */
body.atmo .bank .step {
  background: none;
  border: 0;
  border-top: 1px solid rgba(40, 15, 145, .14);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: clamp(20px, 2.4vw, 28px) 0 0;
}
body.atmo .bank .step:hover {
  background: none;
  border-color: rgba(51, 72, 217, .34);
  box-shadow: none;
  transform: none;
}

/* Ohne Karte gibt es keinen Innenabstand mehr, der die Kennzahl vom Text
   trennt. Die Linie darüber übernimmt das — sie steht auf gleicher Höhe,
   weil `margin-top: auto` aus site.css die Kennzahlen nach unten drückt. */
body.atmo .bank .step__metric {
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(40, 15, 145, .09);
}

/* Die Fußnote steht mit Luft darunter, mittig und schmal genug, dass sie als
   Randnotiz lesbar bleibt. */
body.atmo .bank .stats-quelle {
  margin: clamp(26px, 3.4vw, 40px) auto 0;
  max-width: 58ch;
  text-align: center;
}

body.atmo .bank__cta {
  margin-top: clamp(28px, 3.6vw, 44px);
  padding-top: clamp(24px, 3.2vw, 34px);
  border-top-color: var(--line);
}

/* Damit der Abschnitt nicht an seine Nachbarn stößt. */
body.atmo .bank.stage { padding-block: clamp(46px, 6vw, 92px); }


/* ==========================================================================
   11 · Die Leistungskacheln bekommen eine echte Fassung

   Bisher: ein weißes Feld mit Haarlinie. Sechs davon nebeneinander ergeben
   eine Tabelle, kein Erzeugnis. Jetzt sitzt jede Kachel wie eine Glasplatte
   in einer Wanne: der Rahmen ist ein transparenter Rand, dessen Fläche über
   `border-box` gefüllt wird, der Kern über `padding-box`. Den inneren Radius
   rechnet der Browser selbst aus Außenradius minus Randbreite — die Rundungen
   sind dadurch konzentrisch, ohne dass eine Zahl doppelt gepflegt wird.

   Alles unter body.atmo, das trägt nur die Startseite.
   ========================================================================== */

body.atmo .teaser {
  --schale: 7px;
  border: var(--schale) solid transparent;
  border-radius: 26px;
  padding: 30px 26px;
  background:
    /* Kern */
    linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, .88) 100%) padding-box,
    /* Schale */
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .16)) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(40, 15, 145, .05),
    0 2px 6px -3px rgba(40, 15, 145, .14),
    0 42px 84px -52px rgba(40, 15, 145, .6);
  backdrop-filter: none;
}

body.atmo .teaser:hover {
  transform: translateY(-8px);
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%) padding-box,
    linear-gradient(180deg, rgba(82, 113, 255, .3), rgba(39, 230, 255, .16)) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(82, 113, 255, .1),
    0 3px 8px -4px rgba(40, 15, 145, .18),
    0 56px 96px -48px rgba(40, 15, 145, .5);
}

/* Beim Drücken gibt die Kachel nach — eine Fläche, die man anfasst,
   antwortet mit Masse, nicht mit einem Farbwechsel. */
body.atmo .teaser:active { transform: translateY(-3px) scale(.988); }

/* Der Lichtschein lag auf dem Außenradius, sitzt aber im Kern. */
body.atmo .teaser::after { border-radius: calc(26px - var(--schale)); }
/* Der obere Farbakzent folgt der schmaleren Innenkante. */
body.atmo .teaser::before { left: 26px; right: 26px; }

/* Der Pfeil steht nicht nackt neben dem Text, sondern in seinem eigenen
   Kreis — und der Kreis ist es, der beim Hover kippt. */
body.atmo .teaser__more svg {
  width: 27px; height: 27px; padding: 6px;
  border-radius: 50%;
  background: rgba(82, 113, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(82, 113, 255, .16);
  transition: transform .4s var(--ease), background .4s var(--ease),
              box-shadow .4s var(--ease), color .4s var(--ease);
}
body.atmo .teaser:hover .teaser__more svg {
  background: var(--grad-royal);
  box-shadow: 0 10px 20px -10px rgba(82, 113, 255, .8);
  color: #fff;
  transform: translate(3px, -1px) scale(1.06);
}


/* --------------------------------------------------------------------------
   12 · Die Wertlinie steht frei
   Ein Zwischenstand hatte Kurve, Meilensteine, Kennzahlen und Quellenhinweis
   auf eine gemeinsame weiße Fläche gestellt, um sie als eine Aussage zu
   fassen. Das ist zurückgenommen: die Seite soll ohne Felder auskommen, nur
   die Leistungskacheln sind Kacheln. Zusammengehalten wird der Block jetzt
   durch das, was ihn ohnehin zusammenhält — gemeinsame Breite, gemeinsame
   Mitte, gestufte Abstände und eine Haarlinie vor den Kennzahlen.
   Der Hinweis aus Abschnitt 7b gilt damit wieder: kein Kasten, kein weißes
   Feld. Was hier hochwertig wirkt, kommt aus der Grafik selbst.
   -------------------------------------------------------------------------- */
body.atmo .valueline__chart {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}

/* Ein kalter Schein dort, wo die Kurve ihren Höchststand erreicht. Er liegt
   frei auf dem Grund und läuft nach außen aus, statt an einer Kante
   abgeschnitten zu werden — dadurch ist er Atmosphäre und kein Kasten. */
body.atmo .valueline__chart::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -6% -12% 22% 34%;
  background: radial-gradient(50% 56% at 66% 34%, rgba(39, 230, 255, .13), transparent 70%);
  pointer-events: none;
}
body.atmo .valueline__chart > * { position: relative; z-index: 1; }

/* Ohne Fläche darf die Trennung vor den Kennzahlen nicht härter werden als
   nötig — eine Linie, die in der Mitte am dichtesten ist, genügt. */
body.atmo .valueline__stats {
  border-top: 0;
  background:
    linear-gradient(90deg, transparent, rgba(40, 15, 145, .16) 22%, rgba(40, 15, 145, .16) 78%, transparent)
    top left / 100% 1px no-repeat;
}

/* Der Quellenhinweis gehört zur selben Fläche, aber eine Stufe leiser. */
body.atmo .valueline .stats-quelle { margin-top: clamp(18px, 2.4vw, 28px); }

/* --------------------------------------------------------------------------
   13 · Die Ordnungszahl auf den Leistungskacheln
   Sechs gleich gebaute Kacheln nebeneinander lesen sich als Wand. Die Ziffer
   in der Ecke gibt jeder Kachel eine Adresse — und beim Überfahren tritt sie
   hervor, so wie das Symbol links oben. Die Grundgestalt steht in site.css;
   hier sitzt nur, was auf dem hellen Grund anders sein muss.
   -------------------------------------------------------------------------- */
body.atmo .teaser__idx {
  top: clamp(18px, 2vw, 26px);
  right: clamp(20px, 2.2vw, 30px);
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  opacity: .16;
}
body.atmo .teaser:hover .teaser__idx { opacity: .36; }


/* ==========================================================================
   14 · Die Fragenliste bekommt Tiefe

   Sechs gleich aussehende Zeilen sind korrekt, aber leblos. Die Ziffer wird
   zur gesetzten Marke, und das Plus-Zeichen sitzt in einem eigenen Kreis.

   Die geöffnete Frage bekam zwischenzeitlich eine weiße Fassung. Auch die
   ist raus — die Seite trägt keine Felder. Dass eine Frage offen ist, zeigt
   jetzt die Ziffer: sie füllt sich mit dem Marken-Verlauf. Das ist die
   gleiche Geste wie auf den Leistungskacheln und kommt ohne Fläche aus.
   ========================================================================== */
body.atmo .faq-item {
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: border-color .45s var(--ease);
}
body.atmo .faq-item.open { border-top-color: rgba(51, 72, 217, .3); }

body.atmo .faq-q .qnum {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .72rem;
  background: rgba(82, 113, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(82, 113, 255, .14);
  transition: background .4s var(--ease), color .4s var(--ease),
              box-shadow .4s var(--ease);
}
body.atmo .faq-item.open .faq-q .qnum {
  background: var(--grad-royal);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(82, 113, 255, .85);
}

body.atmo .faq-q .ico {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(82, 113, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(82, 113, 255, .13);
  transition: background .4s var(--ease), box-shadow .4s var(--ease),
              transform .4s var(--ease);
}
body.atmo .faq-item.open .faq-q .ico {
  background: rgba(82, 113, 255, .14);
  transform: rotate(180deg);
}

/* ==========================================================================
   15 · Feinschliff der Abschnitte

   Die Seiten standen inhaltlich. Was gefehlt hat, war die letzte Stufe:
   gleich gesetzte Kapitelköpfe, saubere Zeilenumbrüche in den Überschriften
   und Flächen, die nicht wie aufgeklebte Kästen wirken.

   Diese Datei liegt auf allen Seiten hinter site.css, leistungen.css,
   leistung-detail.css, leistung-plus.css, leistung-pro.css und charakter.css.
   Sie liegt VOR band.css, woge-pro.css und cockpit.css — was dort geregelt
   ist, bleibt dort geregelt. leistung-ki.html lädt diese Datei nicht.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15.1 · Kein Strich mehr vor dem Kapitel-Label

   Der 20-Pixel-Strich vor jedem .lsec__tag war eine Verzierung ohne Aussage.
   Das Label trägt sich über Größe, Sperrung und Farbe von allein.
   -------------------------------------------------------------------------- */
.lsec__tag::before { content: none; }
.lsec__tag { gap: 0; }

/* Der Punkt am 3D-Fenster hatte ein Leuchten um sich. Der Punkt bleibt,
   das Leuchten geht — es war der einzige Glow, der noch stand. */
.lx-render__tag::before { box-shadow: none; width: 6px; height: 6px; }

/* --------------------------------------------------------------------------
   15.2 · Merkmale im Kopf der Leistungsseiten

   Vorher standen dort vier Pillen mit Icons. Jetzt ist es eine Zeile aus
   vier Angaben, getrennt durch Haarlinien — die Form, in der ein Datenblatt
   seine Eckwerte nennt.
   -------------------------------------------------------------------------- */
.lx-merkmale {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--muted, #4F5872);
}
.lx-merkmale li {
  padding: 0 20px;
  border-left: 1px solid rgba(40, 15, 145, .15);
}
.lx-merkmale li:first-child { padding-left: 0; border-left: 0; }

/* Nebeneinander wird untereinander, sobald vier Angaben nicht mehr in eine
   Zeile passen. Die Trennung wandert dabei von links nach oben. */
@media (max-width: 720px) {
  .lx-merkmale { display: grid; grid-template-columns: 1fr 1fr; row-gap: 0; }
  .lx-merkmale li {
    padding: 11px 0;
    border-left: 0;
    border-top: 1px solid rgba(40, 15, 145, .1);
  }
  .lx-merkmale li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  .lx-merkmale li:nth-child(odd) { padding-right: 18px; }
}
@media (max-width: 420px) {
  .lx-merkmale { grid-template-columns: 1fr; }
  .lx-merkmale li:nth-child(2) { border-top: 1px solid rgba(40, 15, 145, .1); padding-top: 11px; }
  .lx-merkmale li:nth-child(odd) { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   15.3 · Zeilenumbruch

   Große Überschriften brachen bisher dort um, wo die Zeile gerade voll war.
   Dabei blieb regelmäßig ein einzelnes Wort in der letzten Zeile stehen.
   balance verteilt die Wörter gleichmäßig auf die Zeilen, pretty verhindert
   im Fließtext die einzelne Restzeile. Browser ohne Unterstützung brechen
   wie bisher um — es geht nichts verloren.
   -------------------------------------------------------------------------- */
h1, h2,
.ldx-head h2,
.lsec__body h2 { text-wrap: balance; }

.lead,
.ldx-head p,
.lsec__body p,
.ch-kopf p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   15.4 · Die Flächen

   Zwei Dinge waren uneinheitlich: die Kante und der Schatten. Manche Fläche
   trug einen 1-Pixel-Ring, andere gar keinen; die Schatten reichten von
   hart bis unsichtbar.

   Einheitlich gilt jetzt: eine Haarlinie als Kante, ein sehr weit gestreuter
   Schatten weit unterhalb der Fläche und ein zweiter, sehr kurzer direkt
   darunter. Zwei Lagen deshalb, weil eine einzelne entweder hart aussieht
   oder gar nicht.
   -------------------------------------------------------------------------- */
:root {
  --flaeche-kante: 0 0 0 1px rgba(40, 15, 145, .07);
  --flaeche-nah:   0 2px 4px -2px rgba(40, 15, 145, .07);
  --flaeche-fern:  0 40px 84px -56px rgba(40, 15, 145, .42);
}

.ch-serp {
  box-shadow: var(--flaeche-kante), var(--flaeche-nah), var(--flaeche-fern);
}

/* Die Kennzahlkarten tragen bereits eine echte Kante (border in
   leistung-detail.css). Sie bekommen nur die beiden Schattenlagen, sonst
   stünde die Linie doppelt. */
.stat-card { box-shadow: var(--flaeche-nah), var(--flaeche-fern); }

/* Die Ergebnisliste lag auf einer halbdurchsichtigen Fläche mit Weichzeichner
   dahinter. Der Weichzeichner rechnet bei jedem Scrollschritt neu und war auf
   dem Telefon deutlich zu spüren. Die Fläche ist jetzt deckend weiß —
   dasselbe Bild, ohne die Dauerlast. */
.ch-serp {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Die Leiste über der Liste war ein zweiter Kasten im Kasten. Sie wird zur
   Zeile mit Haarlinie darunter. */
.ch-serp__leiste {
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 2px 2px 14px;
  border-bottom: 1px solid rgba(40, 15, 145, .09);
}

/* Der eigene Eintrag hatte einen 1,5 Pixel starken Ring in Cyan. Auf Weiß
   war das eine harte Linie. Ein Pixel und derselbe Ton als Fläche darunter
   heben ihn genauso deutlich heraus. */
.ch-treffer--sie {
  box-shadow: 0 0 0 1px rgba(15, 185, 206, .55),
              0 24px 48px -30px rgba(16, 58, 110, .45);
}

/* --------------------------------------------------------------------------
   15.5 · Der Kapitelkopf bekommt Luft nach unten

   Zwischen Kopf und Inhalt standen bisher je nach Seite 28 bis 46 Pixel. Bei
   Überschriften dieser Größe ist das zu wenig: der Inhalt klebte am Text.
   -------------------------------------------------------------------------- */
.ldx-head { margin-bottom: clamp(34px, 4.6vw, 58px); }

/* --------------------------------------------------------------------------
   15.6 · Die Einblendung wird ruhiger

   Bisher kam jeder Abschnitt aus einem Weichzeichner von 5 bis 9 Pixeln,
   verbunden mit einem Maßstabssprung. Bei Fließtext heißt das: die ersten
   Zehntelsekunden ist er nicht lesbar, und der Weichzeichner muss über die
   ganze Fläche gerechnet werden — auf dem Telefon sichtbar ruckelig.

   Übrig bleibt, was die Bewegung ausmacht: ein kurzer Weg nach oben und die
   Deckkraft. Beides läuft auf der Grafikkarte. Vier Dateien haben dafür
   eigene Fassungen mitgebracht (grund, leistungen, leistung-pro); sie werden
   hier auf einen Wert gebracht.
   -------------------------------------------------------------------------- */
body.atmo .reveal,
.lpage .reveal,
.leistungen-page:not(.ldetail-page) .reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: none;
  transition: opacity .62s var(--ease), transform .72s var(--ease);
}
body.atmo .reveal.in,
.lpage .reveal.in,
.leistungen-page:not(.ldetail-page) .reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  body.atmo .reveal,
  .lpage .reveal,
  .leistungen-page:not(.ldetail-page) .reveal {
    opacity: 1; transform: none; transition: none;
  }
}

/* Der Kopf einer Seite steht beim Aufschlagen schon im Bild. Die Reihenfolge
   Label, Überschrift, Text, Schaltflächen bleibt — sie führt das Auge. Nur
   Dauer und Abstände werden kürzer, damit der Kopf nicht noch arbeitet,
   während man ihn bereits liest. */
.ldx-hero .reveal,
.hero .reveal { transition-duration: .5s, .58s; }

.ldx-hero .reveal[data-d="1"], .hero .reveal[data-d="1"] { transition-delay: .05s; }
.ldx-hero .reveal[data-d="2"], .hero .reveal[data-d="2"] { transition-delay: .10s; }
.ldx-hero .reveal[data-d="3"], .hero .reveal[data-d="3"] { transition-delay: .15s; }
.ldx-hero .reveal[data-d="4"], .hero .reveal[data-d="4"] { transition-delay: .20s; }
.ldx-hero .reveal[data-d="5"], .hero .reveal[data-d="5"] { transition-delay: .25s; }

/* --------------------------------------------------------------------------
   15.7 · Schluss mit dem Verlaufstext

   Das Stylesheet kannte dreizehn Stellen, an denen Schrift durch einen
   Farbverlauf lief. Nachgezählt im HTML sind davon drei noch im Einsatz:
   das hervorgehobene Wort in der Abschnittsüberschrift der Startseite, die
   Kennzahlen auf den Leistungsseiten und die Kennzahlen im dunklen Band.
   Der Rest hängt an Klassen, die auf keiner Seite mehr stehen — die bleiben
   unberührt, damit hier nichts geregelt wird, was es nicht gibt.

   Der Verlauf hat drei Nachteile. Er macht den Kontrast über die Wortlänge
   ungleich: der Anfang ist dunkel, das Ende hell. Er zwingt zu
   -webkit-text-fill-color: transparent, was bei fehlender Unterstützung
   unsichtbare Schrift ergibt. Und er ist die auffälligste Stelle, an der
   eine Seite nach Vorlage aussieht statt nach Absicht.

   Ersatz ist eine Volltonfarbe. Die Hervorhebung bleibt erhalten, weil sie
   sich weiterhin von der Navy-Überschrift absetzt: Royal auf hellem Grund,
   Weiß auf dunklem.

   leistung-ki.html nutzt .stat-card ebenfalls, lädt diese Datei aber nicht.
   Die Automatisierungsseite behält ihre Kennzahlen unverändert.
   -------------------------------------------------------------------------- */
.stage__head h2 em {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--royal-text, #3348D9);
}

/* Kennzahlen: sie sind die Aussage, nicht die Verzierung. In Navy stehen sie
   fest auf der Seite und lassen sich auch bei 3,5 Rem sauber lesen. */
.stat-card b,
.lpage .stat-card b {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ck-navy, #280F91);
}

/* Im dunklen Band gilt dasselbe in Weiß. */
.lx-band__stats div b {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   15.8 · Schluss mit der Glasoptik
   Zwei Gründe, und der zweite wiegt schwerer als der erste.

   Erstens die Optik: .lx-glass ist eine milchige Scheibe mit Weichzeichner
   dahinter. Auf der Genossenschaftsseite war das schon einmal aufgefallen und
   dort in woge-pro.css:736 einzeln zurückgenommen worden. Dieselbe Klasse
   steht aber auch auf leistung-seo, leistung-social, leistung-strategie und
   leistung-3d. Was auf der einen Seite nicht passt, passt auf den anderen
   ebenso wenig.

   Zweitens die Rechenlast: backdrop-filter zwingt den Browser, bei jedem
   Bildlauf den Bereich hinter der Fläche neu zu zeichnen. Bei einer
   Kopfleiste, die stehen bleibt, ist das ein einmaliger Aufwand. Bei einer
   Karte, die mitwandert, fällt er auf jedem einzelnen Bild an — und das
   ausgerechnet auf dem Telefon, wo am wenigsten Reserve da ist.

   Der Weichzeichner hatte hier ohnehin nichts zu tun: hinter diesen Karten
   liegt weißer Seitenhintergrund. Man zeichnet also Weiß über Weiß weich.
   -------------------------------------------------------------------------- */
.lx-glass {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(40, 15, 145, .1);
  box-shadow: var(--flaeche-nah), var(--flaeche-fern);
}

/* Die weiße Oberkante war der Glanz auf der Scheibe. Ohne Scheibe kein Glanz. */
.lx-glass::after { box-shadow: none; }

/* --------------------------------------------------------------------------
   15.9 · Die Knoten in der Karte
   Diese beiden liegen auf dunklem Grund, dort hätte der Weichzeichner also
   tatsächlich etwas zu tun. Sie wandern aber mit dem Bildlauf, und der Aufwand
   steht in keinem Verhältnis: .node__pop deckt zu 94 Prozent, da bleibt vom
   Weichzeichner nichts sichtbar. Bei .node ersetzt etwas mehr Deckweiß, was
   die Unschärfe an Trennung geleistet hat.
   -------------------------------------------------------------------------- */
.node {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, .14);
}
.node__pop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgb(24, 12, 74);
}

/* Dieselbe Sache in der Taktleiste: 78 Prozent Weiß auf weißem Grund, der
   Weichzeichner dahinter hat nichts zu zeigen. Volles Weiß spart die
   Neuzeichnung und lässt die Haarlinien zwischen den Feldern klarer stehen. */
.ch-takt > div {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   15.10 · Sprungmarken landen unter der Kopfleiste
   Die Kopfleiste steht fest oben und ist im gescrollten Zustand 84 Pixel hoch.
   Ein Klick auf "Ablauf" oder "Vergleich" schiebt die Überschrift aber genau
   an den oberen Rand des Fensters — also hinter die Leiste. Der Besucher
   landet mitten im ersten Absatz und sieht die Überschrift nicht, zu der er
   springen wollte.

   scroll-margin-top hält den Platz frei. 104 Pixel: die 84 der Leiste plus
   20 Luft, damit die Überschrift nicht an der Kante klebt.

   Betroffen sind nur die Marken, auf die im Menü und in den Seiten wirklich
   verwiesen wird. #top liegt ganz oben, dort ändert die Regel nichts.
   -------------------------------------------------------------------------- */
#ablauf, #vergleich, #loesung, #landkarte, #funktionen, #faq {
  scroll-margin-top: 104px;
}
@media (max-width: 720px) {
  /* Auf dem Telefon ist die Leiste flacher. */
  #ablauf, #vergleich, #loesung, #landkarte, #funktionen, #faq {
    scroll-margin-top: 86px;
  }
}

/* --------------------------------------------------------------------------
   15.11 · Zeilenumbruch auch bei den Zwischenüberschriften
   15.3 hatte nur h1 und h2 erfasst. Die Messung über alle Seiten zeigt, dass
   fast jede h3 zweizeilig läuft und dabei ungleich bricht — bei "Ticket-
   Management für alles, was Mieter melden" stand in der zweiten Zeile ein
   einziges Wort. text-wrap: balance verteilt die Wörter gleichmäßig auf die
   Zeilen. Der Browser rechnet das nur für kurze Blöcke, Überschriften sind
   genau der vorgesehene Fall.
   -------------------------------------------------------------------------- */
h3, h4,
.faq-q > span,
.st-story h3 {
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   15.12 · Lesebreite der Antworten im Fragenteil
   Gemessen: 111 Zeichen je Zeile. Bei so langen Zeilen findet das Auge beim
   Rücksprung die nächste Zeile nicht zuverlässig wieder; man verliert die
   Stelle. Angenehm sind 60 bis 75. .faq bleibt 860 Pixel breit, damit die
   Fragezeile und der Rahmen unverändert stehen — begrenzt wird nur der
   Antworttext.
   -------------------------------------------------------------------------- */
.faq-a p { max-width: 68ch; }

/* --------------------------------------------------------------------------
   15.13 · Die letzten Glasscheiben
   --------------------------------------------------------------------------
   In 15.8 und 15.9 habe ich die grossen Glasflaechen abgeraeumt. Uebrig
   geblieben sind die kleinen: Bildschildchen, Hinweispillen, schwebende
   Kaertchen. Der Pruefdurchlauf hat sie nicht gemeldet, weil er erst ab
   20000 Quadratpixeln anschlaegt — auf dem Bildschirm sieht man sie
   trotzdem, und sie kosten dieselbe Rechenzeit: der Browser zeichnet den
   Weichzeichner bei jedem Bildlauf neu.

   Zwei Regeln fuer den Ersatz. Liegt das Schildchen auf einem Foto, bleibt
   es durchscheinend, nur ohne Unschaerfe — Durchsicht allein ist billig,
   der Weichzeichner ist es nicht. Liegt es auf hellem Grund, wird es
   deckend weiss; dort gab es ohnehin nichts zu verwischen.

   Was nicht angefasst wird: die feste Kopfleiste und ihr Menue. Die liegen
   ueber der Seite, dort ist die Milchscheibe richtig und kostet nichts,
   weil sie sich nicht mitbewegt.
   -------------------------------------------------------------------------- */

/* Auf dem Foto: Nummernschild in den Leistungsbildern. Statt Milchglas eine
   dunkle Scheibe — die weisse Schrift steht darauf ruhiger, weil der
   Hintergrund nicht mehr je nach Bildmotiv durchschlaegt. */
.lmedia-photo__badge {
  background: rgba(24, 12, 74, .74);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: rgba(255, 255, 255, .16);
}

/* Auf hellem Grund: deckend weiss. */
.model3d__hint,
.lx-shot__pin,
.lx-float,
.ch-geraet__marke,
.ch-serp {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Vorher/Nachher-Regler: die beiden Marken sitzen auf dem Bild. */
.lx-ba__label {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.lx-ba__label--before { background: #FFFFFF; }
.lx-ba__label--after  { background: rgb(82, 113, 255); }

/* Startseite: die Kacheln und Schritte im Atmosphaeren-Aufbau. Die zwei
   Klassen im Selektor sind noetig, weil atmo.css genauso schreibt. */
body.atmo .teaser,
body.atmo .step,
body.atmo .journey__step {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.atmo .teaser:hover,
body.atmo .step:hover {
  background: #FFFFFF;
}