/* Gemeinsame Seitenanlage nach kivanto.ai, im CI von danielschlager.ai.
   Gilt fuer jede Seite, die zusaetzlich zu .dsai die Klasse .seite traegt.

   Diese Datei bringt KEINE Farbe, KEINE Schriftfamilie und KEINEN Abstandswert
   mit. Alles kommt aus den Tokens in dsai-start.css, dem gescopeten
   Designsystem aus
   kDrive/04_umsetzung/marketing/website-redesign-2026/system/dsai.css.

   Die Bauteile, in der Reihenfolge, in der sie auf einer Seite auftreten:

     .kopfbereich      Seitenanfang: Etikett, Schlagzeile, zwei Spalten
     .umriss           zweite Schlagzeilenzeile, nur umrissen
     .spalten          Text links, Tafel oder Bild rechts
     .marke-abschnitt  Ziffer und Rolle an einer Haarlinie
     .abschnitt        Abstand eines Abschnitts
     .zweispalt        Ueberschrift links, Inhalt rechts
     .zeilen           Aufzaehlung als Haarlinienzeilen mit Ziffer
     .schlusssatz      gross gesetzter Schlusssatz eines Abschnitts
     .einschub         randabfallender dunkler Block, mit .dunkel kombinieren
     .karten / .karte  Raster aus Karten, die sich beim Zeigen heben
     .vergleich        zwei Spalten gegeneinander, rechte ist das Ziel

   Fuer Preisstaffeln, Ablaeufe, Phasenmarken und Belege gibt es bereits
   Bauteile im Designsystem: .tafel, .stufen/.stufe, .phasen/.phase, .punkte,
   .beleg. Die werden hier NICHT nachgebaut, sondern verwendet.

   ⚠️ Vite bundelt die Stylesheets aller Seiten in eine Datei, die Klassennamen
   treffen sich darin. Wer hier ein Bauteil ergaenzt, prueft den Namen vorher
   gegen die anderen dsai-*.css. Und Scoping allein hebt eine fremde
   Deklaration nicht auf: sie gilt weiter, solange nichts sie ueberschreibt. */

/* -----------------------------------------------------------------------------
   TYPOGRAFIE UND MACHART NACH KIVANTO
   Entscheidung Daniel am 09.09.2026, nachdem die erste Fassung zwar kivantos
   Abschnittsaufbau hatte, aber wie das CI-Designsystem aussah statt wie
   kivanto. Der Unterschied lag fast vollstaendig in der Schrift.

   Gemessen an kivanto.ai:  h1 = Bricolage Grotesque, 72px, Gewicht 800,
   Laufweite -1.44px. Etiketten und Knoepfe in Space Mono, Versalien, weite
   Laufweite. Das traegt die ganze Wirkung.

   Hier steht dafuer INTER auf Gewicht 800. Inter ist eine Grotesk, liegt
   bereits lokal im Repo und steht im CI-Handbuch. Auf 72px mit -0.02em
   Laufweite deckt sie sich in der Wirkung mit Bricolage, ohne dass eine neue
   Schriftdatei und eine neue Lizenz dazukommen. Die Mono ist die des
   Handbuchs (DejaVu Sans Mono, Abschnitt 4, Rolle „Belegcharakter").

   ⚠️ Damit traegt Inter auf diesen Seiten auch die Schlagzeilen, nicht nur die
   Bedienung. Fraunces bleibt fuer Zitate und Buchtitel. Das weicht vom
   Handbuch ab und ist so entschieden. Wer das zurueckdreht, dreht die ganze
   kivanto-Anmutung zurueck.

   Alles haengt unter .dsai.seite und ueberschreibt damit dsai-start.css, ohne
   sie anzufassen: die Datei ist erzeugt und wird aus der kDrive neu gebaut.
   -------------------------------------------------------------------------- */
.dsai.seite {
  font-family: var(--sans);
  font-size: 17px;
}
.dsai.seite p {
  max-width: 62ch;
}
.dsai.seite h1,
.dsai.seite h2,
.dsai.seite h3 {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dsai.seite h1 {
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1.02;
}
.dsai.seite h2 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
}
.dsai.seite h3 {
  font-size: 21px;
  line-height: 1.2;
}

/* Etiketten: Inter, Versalien, Laufweite .15em, wie im CI-Handbuch Abschnitt
   4.1. Die Mono ist am 09.09.2026 wieder raus, Vorgabe Daniel: der
   Belegcharakter liess den Auftritt nach KI-Startup aussehen. Damit gilt an
   dieser Stelle wieder die Regel des Handbuchs. */
.dsai.seite .etikett {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

/* Knoepfe hart und kantig, Inter in Versalien. Kein Radius, keine Pille.
   Die Form bleibt, nur die Mono ist raus. */
.dsai.seite .knopf {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 15px 26px;
  border-radius: 0;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--grund);
}
.dsai.seite .knopf:hover {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}
.dsai.seite .knopf.leer {
  background: transparent;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 25%, transparent);
}
.dsai.seite .knopf.leer:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--grund);
}

/* Zitat im dunklen Einschub bleibt Fraunces. */
.dsai.seite blockquote {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Duoton. Das Bild wird entfaerbt und mit dem Akzent ueberblendet, damit es
   farblich zur Seite gehoert statt danebenzustehen.
   ⚠️ Trifft auch Portraets: Gesichter werden petrolfarben. So entschieden am
   09.09.2026. Zum Zurueckdrehen reicht es, .duotone am Bild zu entfernen. */
.dsai.seite .duotone {
  position: relative;
  overflow: hidden;
  display: block;
}
.dsai.seite .duotone img {
  filter: grayscale(1) contrast(1.06);
  display: block;
  width: 100%;
}
.dsai.seite .duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--akzent);
  mix-blend-mode: color;
  opacity: 0.85;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Preisliste im Seitenanfang
   Steht dort, wo kivanto sein Startprotokoll zeigt. Die Tafel in Monoschrift
   auf dunklem Grund ist am 09.09.2026 entfallen, Vorgabe Daniel: der Form nach
   war sie ein Terminal-Log und damit ein KI-Startup-Zeichen. Jetzt eine
   schlichte Liste auf hellem Grund, Leistung links, Preis rechts.
   -------------------------------------------------------------------------- */
.dsai.seite .preisliste {
  border-top: 1px solid var(--linie-stark);
}
.dsai.seite .preisliste .zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--a4);
  padding: var(--a3) 0;
  border-bottom: 1px solid var(--linie);
}
.dsai.seite .preisliste .was {
  font-size: var(--t-klein);
}
.dsai.seite .preisliste .wert {
  font-weight: 700;
  flex: none;
}
.dsai.seite .preisliste .fuss {
  margin-top: var(--a3);
  font-size: var(--t-meta);
  color: var(--ink-leise);
}

/* -----------------------------------------------------------------------------
   Seitenanfang mit randabfallendem Bild
   Entscheidung Daniel am 09.09.2026: der zweispaltige Seitenanfang mit Text
   links und Kasten rechts ist das Muster, das auf jeder zweiten Seite steht.
   Stattdessen laeuft das Bild ueber die volle Breite und die Schlagzeile liegt
   darauf.

   Das Bild wird entfaerbt und abgedunkelt, damit die Schrift darauf traegt.
   Der Farbverlauf laeuft von links, damit die Schlagzeile auch dann steht,
   wenn das Motiv hell ist.

   ⚠️ Kein KI-erzeugtes Motiv einsetzen, ohne es nach EU AI Act Artikel 50 zu
   kennzeichnen. Zum Stand 09.09.2026 liegt im Repo kein passendes echtes
   Motiv im Querformat, siehe MEMORY.
   -------------------------------------------------------------------------- */
.dsai.seite .kopfbild {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 64vh;
  padding: var(--a9) 0 var(--a8);
}
.dsai.seite .kopfbild > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: grayscale(1) contrast(1.04);
}
.dsai.seite .kopfbild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(24, 23, 19, 0.92) 0%,
    rgba(24, 23, 19, 0.78) 42%,
    rgba(24, 23, 19, 0.42) 100%
  );
}
.dsai.seite .kopfbild .raum {
  position: relative;
  z-index: 1;
}
.dsai.seite .kopfbild h1 {
  max-width: 18ch;
}
/* Auf dem Bild traegt der leise Ton nicht, der Vorspann bekommt den hellen. */
.dsai.seite .kopfbild .fuehrt {
  margin-top: var(--a5);
  max-width: 46ch;
  color: var(--ink-hell);
  font-size: 19px;
}
.dsai.seite .kopfbild .tat {
  margin-top: var(--a6);
}

/* -----------------------------------------------------------------------------
   Seitenanfang
   -------------------------------------------------------------------------- */
.dsai.seite .kopfbereich {
  padding: var(--a6) 0 var(--a8);
}
/* Die Augenbraue ueber der Schlagzeile ist am 09.09.2026 entfallen, Vorgabe
   Daniel. Die Seite beginnt direkt mit der Schlagzeile, deshalb kein Abstand
   nach oben mehr. */
.dsai.seite .kopfbereich h1 {
  max-width: 22ch;
}

/* Zweite Zeile nur umrissen. Der Zug stammt von kivanto und traegt hier die
   Tinte statt des Teals. Wo der Browser die Kontur nicht kennt, bleibt die
   Zeile normal gesetzt und lesbar. */
.dsai.seite .umriss {
  color: var(--ink);
}
@supports (-webkit-text-stroke: 1px black) {
  .dsai.seite .umriss {
    -webkit-text-stroke: 2.2px var(--ink);
    color: transparent;
  }
}

.dsai.seite .spalten {
  margin-top: var(--a7);
  display: grid;
  gap: var(--a7);
  align-items: start;
}
@media (min-width: 900px) {
  .dsai.seite .spalten {
    grid-template-columns: 1fr 1fr;
    gap: var(--a8);
  }
}
.dsai.seite .fuehrt {
  color: var(--ink-leise);
}

/* -----------------------------------------------------------------------------
   Abschnitte
   -------------------------------------------------------------------------- */
.dsai.seite .marke-abschnitt {
  display: flex;
  align-items: baseline;
  gap: var(--a4);
  border-top: 1px solid var(--linie);
  padding-top: var(--a4);
}
/* Abschnitte trennen sich ueber die FLAECHE, nicht ueber Linien. Vorgabe
   Daniel am 09.09.2026: die Seite hatte zu viele waagrechte Linien. Jeder
   zweite Abschnitt traegt .getoent und damit den abgesetzten Kalkton. Die
   Reihenfolge wird in der Seite gesetzt, nicht per :nth-child: der dunkle
   Einschub und das Akzentband zaehlen mit und wuerden die Zaehlung verschieben.

   Linien bleiben nur dort, wo sie Spalten trennen: in Tabellen. */
.dsai.seite .abschnitt {
  padding: var(--a8) 0;
}
.dsai.seite .abschnitt.getoent {
  background: var(--grund-2);
}
.dsai.seite .zweispalt {
  margin-top: var(--a6);
  display: grid;
  gap: var(--a6);
}
@media (min-width: 900px) {
  .dsai.seite .zweispalt {
    grid-template-columns: 2fr 3fr;
    gap: var(--a8);
  }
}
.dsai.seite .zweispalt h2 {
  max-width: 14ch;
}

/* -----------------------------------------------------------------------------
   Aufzaehlung als Haarlinienzeilen mit mitlaufender Ziffer
   -------------------------------------------------------------------------- */
.dsai.seite .zeilen {
  list-style: none;
}
.dsai.seite .zeilen li {
  display: flex;
  align-items: baseline;
  gap: var(--a5);
  padding-bottom: var(--a6);
}
.dsai.seite .zeilen li:last-child {
  padding-bottom: 0;
}
.dsai.seite .zeilen .laufnr {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--akzent);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.dsai.seite .zeilen p {
  color: var(--ink-leise);
  margin: 0;
}
.dsai.seite .zeilen b {
  color: var(--ink);
  font-weight: 600;
}

.dsai.seite .schlusssatz {
  margin-top: var(--a7);
  font-size: var(--t-frage);
  line-height: var(--zeile-mit);
  max-width: 46ch;
}

/* -----------------------------------------------------------------------------
   Dunkler Einschub
   Randabfallend, deshalb steht er ausserhalb von .raum und bringt den
   Innenabstand selbst mit. Immer zusammen mit .dunkel setzen, das Bauteil
   dreht die Tokens um, statt Farben von Hand zu setzen.
   -------------------------------------------------------------------------- */
.dsai.seite .einschub {
  padding: var(--a8) 0;
}
.dsai.seite .einschub blockquote {
  font-size: var(--t-kopf);
  line-height: 1.22;
  max-width: 22ch;
  margin-top: var(--a5);
}
.dsai.seite .einschub .quelle {
  margin-top: var(--a5);
  color: var(--ink-leise);
}
/* Im Einschub stehen die Spalten nebeneinander, ohne den Abstand nach oben,
   den .spalten im Seitenanfang braucht. */
.dsai.seite .einschub .spalten {
  margin-top: 0;
  align-items: center;
}

/* Kopfpaar. Die beiden Portraets nebeneinander, neutrales Schwarzweiss.
   ⚠️ Das Paar ist aufeinander abgestimmt (gleiche Kopfgroesse, Scheitelhoehe,
   Hintergrund). Wer eines tauscht, laesst die Scripts in
   kDrive/Vertrieb/07_sales-enablement/ki-workshop-infoblatt/scripts/ neu
   laufen, sonst passen sie nicht mehr zusammen. */
.dsai.seite .koepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a4);
  max-width: 420px;
}
.dsai.seite .koepfe figure {
  margin: 0;
}
.dsai.seite .koepfe img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-klein);
  filter: grayscale(1);
  display: block;
}
.dsai.seite .koepfe figcaption {
  margin-top: var(--a3);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.dsai.seite .koepfe .rolle {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-leise);
  margin-top: 2px;
}

/* -----------------------------------------------------------------------------
   Preishinweis
   „Alle Preise netto, zuzueglich 20 % USt." stand bis 09.09.2026 im Vorspann
   der Abschnitte und damit im selben Grad wie der Fliesstext. Das ist zu laut
   fuer eine Selbstverstaendlichkeit, die jeder Unternehmer kennt. Jetzt eine
   Randnotiz unter dem Inhalt.
   -------------------------------------------------------------------------- */
.dsai.seite .preishinweis {
  margin-top: var(--a5);
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--ink-leise);
  max-width: none;
}

/* -----------------------------------------------------------------------------
   Karten
   -------------------------------------------------------------------------- */
.dsai.seite .karten {
  margin-top: var(--a6);
  display: grid;
  gap: var(--a4);
}
@media (min-width: 760px) {
  .dsai.seite .karten {
    grid-template-columns: 1fr 1fr;
  }
}
.dsai.seite .karten.drei {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .dsai.seite .karten.drei {
    grid-template-columns: repeat(3, 1fr);
  }
}
.dsai.seite .karte {
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: var(--r-mittel);
  padding: var(--a5);
  transition:
    transform var(--z-objekt) var(--kurve),
    box-shadow var(--z-objekt) var(--kurve),
    border-color var(--z-objekt) var(--kurve);
}
@media (prefers-reduced-motion: no-preference) {
  .dsai.seite .karte:hover {
    transform: translateY(-3px);
    box-shadow: var(--schatten-karte);
    border-color: var(--linie-stark);
  }
}
.dsai.seite .karte .laufnr {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 700;
  color: var(--akzent);
}
.dsai.seite .karte h3 {
  font-size: var(--t-gross);
  margin-top: var(--a2);
}
.dsai.seite .karte p {
  margin-top: var(--a3);
  font-size: var(--t-klein);
  color: var(--ink-leise);
}

/* -----------------------------------------------------------------------------
   Schichten
   Zeilen mit Titel und Text. Die grossen Mono-Ziffern sind am 09.09.2026
   entfallen, Vorgabe Daniel: sie waren das auffaelligste KI-Startup-Zeichen
   der Seite. Die Reihenfolge traegt jetzt der Aufbau selbst.
   -------------------------------------------------------------------------- */
.dsai.seite .schichten {
  margin-top: var(--a6);
  display: grid;
  gap: var(--a3);
}
.dsai.seite .schichten .schicht {
  display: grid;
  gap: var(--a2) var(--a5);
  padding: var(--a5);
  background: var(--grund-2);
}
/* Auf getoentem Grund kehrt sich die Flaeche um, sonst verschwindet die Karte. */
.dsai.seite .abschnitt.getoent .schichten .schicht {
  background: var(--grund);
}
@media (min-width: 760px) {
  .dsai.seite .schichten .schicht {
    grid-template-columns: 210px 1fr;
    align-items: baseline;
  }
}
.dsai.seite .schichten h3 {
  font-size: 19px;
}
.dsai.seite .schichten p {
  font-size: var(--t-klein);
  color: var(--ink-leise);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Bausteine
   Haarlinienzeilen: Titel links, Preis rechts, Text darunter. Die Mono-Ziffer
   ist am 09.09.2026 entfallen, siehe Schichten.
   -------------------------------------------------------------------------- */
.dsai.seite .bausteine {
  margin-top: var(--a6);
}
.dsai.seite .bausteine .baustein {
  padding-bottom: var(--a6);
}
.dsai.seite .bausteine .baustein:last-child {
  padding-bottom: 0;
}
.dsai.seite .bausteine .kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a4);
  flex-wrap: wrap;
}
.dsai.seite .bausteine .preis {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--akzent);
  flex: none;
}
.dsai.seite .bausteine p {
  margin-top: var(--a3);
  font-size: var(--t-klein);
  color: var(--ink-leise);
  max-width: 70ch;
}

/* -----------------------------------------------------------------------------
   Aussageband
   Volle Breite, Akzent als Flaeche, Text darin weiss und fett. Genau eines je
   Seite. Traegt den Satz, auf den der Abschnitt hinauslaeuft.
   -------------------------------------------------------------------------- */
.dsai.seite .aussage {
  background: var(--akzent);
  color: #fff;
  padding: var(--a6) var(--a5);
  margin-top: var(--a5);
}
.dsai.seite .aussage p {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 34ch;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Bildbruch
   Randabfallendes Bild mit Zeile darueber. Steht ausserhalb von .raum.
   Das Bild ist entfaerbt und abgedunkelt, damit die Zeile darauf traegt.
   -------------------------------------------------------------------------- */
.dsai.seite .bildbruch {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dsai.seite .bildbruch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.62);
}
.dsai.seite .bildbruch p {
  position: relative;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  max-width: 24ch;
  padding: 0 var(--rand);
}
.dsai.seite .bildbruch .akzentwort {
  color: var(--akzent-hell);
}

/* -----------------------------------------------------------------------------
   Bildblock
   Duoton-Bild mit Mono-Bildunterschrift, wie kivanto es neben Textspalten setzt.
   -------------------------------------------------------------------------- */
.dsai.seite .bildblock .bildunterschrift {
  margin-top: var(--a3);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-leise);
  line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   Vergleich
   Zwei Spalten als Tabelle, Kopfzeilen als Mono-Etikett. Links steht, was der
   Betrieb heute kennt, rechts, was daraus wird. Die rechte Spalte traegt einen
   Hauch Akzent, weil sie der empfohlene Weg ist. Reihenfolge nicht umdrehen.
   -------------------------------------------------------------------------- */
.dsai.seite .vergleich {
  margin-top: var(--a6);
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--linie);
}
.dsai.seite .vergleich th {
  text-align: left;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-leise);
  padding: var(--a3) var(--a4);
  border-bottom: 1px solid var(--linie);
  width: 50%;
}
.dsai.seite .vergleich th.ziel,
.dsai.seite .vergleich td.ziel {
  background: var(--akzent-hauch);
}
.dsai.seite .vergleich th.ziel {
  color: var(--akzent);
}
.dsai.seite .vergleich td {
  padding: var(--a4);
  border-bottom: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
  font-size: var(--t-klein);
  color: var(--ink-leise);
  vertical-align: top;
}
.dsai.seite .vergleich td:first-child {
  border-left: 0;
}
.dsai.seite .vergleich tr:last-child td {
  border-bottom: 0;
}
.dsai.seite .vergleich .marke {
  margin-right: 8px;
  font-weight: 700;
}
.dsai.seite .vergleich td.ziel .marke {
  color: var(--akzent);
}
.dsai.seite .vergleich td:not(.ziel) .marke {
  color: var(--stopp);
}

/* -----------------------------------------------------------------------------
   Tafel, waagrecht rollbar
   Eine Preisstaffel bricht auf dem Telefon sonst die Seite auf. Die Tafel
   selbst kommt aus dem Designsystem, nur der Rahmen steht hier.
   -------------------------------------------------------------------------- */
.dsai.seite .tafel-rahmen {
  margin-top: var(--a6);
  overflow-x: auto;
  border: 1px solid var(--linie);
}
.dsai.seite .tafel-rahmen .tafel {
  min-width: 620px;
}

/* -----------------------------------------------------------------------------
   Abschluss
   Ohne Trennlinie, der Abschnitt traegt seine eigene Flaeche.
   -------------------------------------------------------------------------- */
.dsai.seite .abschluss {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  max-width: var(--spalte);
}

/* -----------------------------------------------------------------------------
   Terminauswahl
   Zwei Personen zur Wahl, darunter der Kalender. Der aktive Knopf traegt den
   Akzent als Rahmen, damit die Wahl auch ohne Farbe erkennbar bleibt.
   -------------------------------------------------------------------------- */
.dsai.seite .terminwahl {
  margin-top: var(--a6);
  display: grid;
  gap: var(--a4);
  max-width: 640px;
}
@media (min-width: 620px) {
  .dsai.seite .terminwahl {
    grid-template-columns: 1fr 1fr;
  }
}
.dsai.seite .terminwahl .wahl {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--a4);
  align-items: center;
  text-align: left;
  padding: var(--a4);
  background: var(--grund);
  border: 1.5px solid var(--linie);
  border-radius: var(--r-mittel);
  cursor: pointer;
  font-family: var(--sans);
  transition:
    border-color var(--z-zustand) var(--kurve),
    background var(--z-zustand) var(--kurve);
}
.dsai.seite .terminwahl .wahl:hover {
  border-color: var(--linie-stark);
}
.dsai.seite .terminwahl .wahl.aktiv {
  border-color: var(--akzent);
  background: var(--akzent-hauch);
}
.dsai.seite .terminwahl .wahl img {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--r-klein);
  filter: grayscale(1);
}
.dsai.seite .terminwahl .wer {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.dsai.seite .terminwahl .rolle {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-leise);
}
.dsai.seite .terminwahl .wahl.aktiv .rolle {
  color: var(--akzent-tief);
}

/* Der Kalender kommt von Calendly und bringt eigene Masse mit. */
.dsai.seite .kalender {
  margin-top: var(--a6);
  min-height: 760px;
  background: var(--grund);
  border: 1px solid var(--linie);
}
@media (max-width: 620px) {
  .dsai.seite .kalender {
    min-height: 1040px;
  }
}

/* -----------------------------------------------------------------------------
   Fragen
   Frage fett, Antwort darunter. Kein Aufklappen: bei acht Fragen kostet das
   nur Klicks, und aufgeklappter Text wird von Antwortmaschinen zuverlaessiger
   gelesen.
   -------------------------------------------------------------------------- */
.dsai.seite .fragen .frage + .frage {
  margin-top: var(--a6);
}
.dsai.seite .fragen dt {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dsai.seite .fragen dd {
  margin-top: var(--a3);
  font-size: var(--t-klein);
  line-height: 1.62;
  color: var(--ink-leise);
  max-width: 70ch;
}

/* -----------------------------------------------------------------------------
   Logoleiste und Blog-Karten
   -------------------------------------------------------------------------- */
.dsai.seite .logoleiste {
  margin-top: var(--a6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a4);
}
@media (min-width: 760px) {
  .dsai.seite .logoleiste {
    grid-template-columns: repeat(4, 1fr);
  }
}
.dsai.seite .logoleiste .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--a5);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--r-mittel);
  min-height: 110px;
}
.dsai.seite .abschnitt.getoent .logoleiste .logo {
  background: var(--grund);
}
.dsai.seite .logoleiste img {
  max-width: 100%;
  max-height: 62px;
  object-fit: contain;
  /* Die Logos kommen in verschiedenen Bunttoenen. Entfaerbt gehoeren sie zur
     Seite statt gegen den Akzent zu arbeiten. */
  filter: grayscale(1);
  opacity: 0.78;
}

.dsai.seite .karte.beitrag {
  display: block;
  text-decoration: none;
  color: inherit;
}
.dsai.seite .karte.beitrag h3 {
  margin-top: var(--a2);
}
.dsai.seite .karte.beitrag:hover h3 {
  color: var(--akzent);
}

.dsai.seite .ausweichweg {
  margin-top: var(--a5);
  font-size: var(--t-klein);
  color: var(--ink-leise);
}

/* -----------------------------------------------------------------------------
   Eckdaten, Videorahmen, grosser Preis
   -------------------------------------------------------------------------- */
.dsai.seite .eckdaten {
  margin-top: var(--a8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--a5) var(--a4);
}
@media (min-width: 760px) {
  .dsai.seite .eckdaten {
    grid-template-columns: repeat(4, 1fr);
  }
}
.dsai.seite .eckdaten .wert {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.02em;
  color: var(--akzent);
}
.dsai.seite .eckdaten .label {
  margin-top: var(--a1);
  font-size: var(--t-klein);
  line-height: 1.45;
  color: var(--ink-leise);
}

/* Zum Ladeverhalten siehe Kopfkommentar der Workshop-Seite: preload="none"
   plus Poster, weil die Datei 6 MB hat und die Seite Anzeigenziel ist. */
.dsai.seite .videorahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-mittel);
  background: var(--dunkel);
}
.dsai.seite .videorahmen video {
  width: 100%;
  height: 100%;
  display: block;
}
.dsai.seite .videorahmen > button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 23, 19, 0.22);
  border: 0;
  cursor: pointer;
  transition: background var(--z-zustand) var(--kurve);
}
.dsai.seite .videorahmen > button:hover {
  background: rgba(24, 23, 19, 0.08);
}
.dsai.seite .videorahmen .knauf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  transition: transform var(--z-objekt) var(--kurve);
}
.dsai.seite .videorahmen > button:hover .knauf {
  transform: scale(1.08);
}
.dsai.seite .videorahmen .knauf svg {
  width: 34px;
  height: 34px;
  margin-left: 3px;
  fill: currentColor;
}
.dsai.seite .videorahmen .dauer {
  position: absolute;
  right: var(--a4);
  bottom: var(--a4);
  padding: 5px 11px;
  border-radius: var(--r-klein);
  background: rgba(24, 23, 19, 0.8);
  color: var(--ink-hell);
  font-family: var(--sans);
  font-size: 12.5px;
}

.dsai.seite .grosspreis {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}

.dsai.seite .karte.beitrag .beitragsbild {
  width: calc(100% + 2 * var(--a5));
  margin: calc(-1 * var(--a5)) calc(-1 * var(--a5)) var(--a5);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--r-mittel) var(--r-mittel) 0 0;
  filter: grayscale(1);
  transition: filter var(--z-objekt) var(--kurve);
}
.dsai.seite .karte.beitrag:hover .beitragsbild {
  filter: grayscale(0);
}

/* -----------------------------------------------------------------------------
   Formular
   Felder ohne Rundung, wie die Knoepfe. Der Fokusring kommt aus dem
   Designsystem (.dsai :focus-visible).
   -------------------------------------------------------------------------- */
.dsai.seite .formular {
  display: grid;
  gap: var(--a4);
}
.dsai.seite .formular .paar {
  display: grid;
  gap: var(--a4);
}
@media (min-width: 520px) {
  .dsai.seite .formular .paar {
    grid-template-columns: 1fr 1fr;
  }
}
.dsai.seite .formular label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-leise);
  margin-bottom: var(--a2);
}
.dsai.seite .formular input,
.dsai.seite .formular textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--grund);
  border: 1.5px solid var(--linie);
  border-radius: 0;
  padding: 11px 13px;
  transition: border-color var(--z-zustand) var(--kurve);
}
.dsai.seite .formular input:hover,
.dsai.seite .formular textarea:hover {
  border-color: var(--linie-stark);
}
.dsai.seite .formular input:focus,
.dsai.seite .formular textarea:focus {
  border-color: var(--akzent);
}
.dsai.seite .formular textarea {
  resize: vertical;
  line-height: 1.55;
}
.dsai.seite .formular .knopf {
  justify-self: start;
  margin-top: var(--a2);
}

/* -----------------------------------------------------------------------------
   Fokuswahl
   Zwei Suchabsichten auf einer Seite. Der aktive Knopf traegt den Akzent als
   Flaeche, damit die Wahl auch bei Farbschwaeche erkennbar bleibt.
   -------------------------------------------------------------------------- */
.dsai.seite .fokuswahl {
  display: inline-flex;
  gap: 0;
  border: 1.5px solid var(--linie-stark);
}
.dsai.seite .fokuswahl .wahl {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 10px 18px;
  background: transparent;
  border: 0;
  color: var(--ink-leise);
  cursor: pointer;
  transition:
    background var(--z-zustand) var(--kurve),
    color var(--z-zustand) var(--kurve);
}
.dsai.seite .fokuswahl .wahl:hover {
  color: var(--ink);
}
.dsai.seite .fokuswahl .wahl.aktiv {
  background: var(--ink);
  color: var(--grund);
}

/* Rubrik innerhalb der Fragen. Die Menge ist fuer AEO gewollt, die Rubriken
   halten sie lesbar. */
.dsai.seite .fragenblock {
  margin-top: var(--a7);
}
.dsai.seite .fragenblock h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--akzent);
  padding-bottom: var(--a3);
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--a5);
}
@media (min-width: 900px) {
  .dsai.seite .fragenblock .fragen {
    columns: 2;
    column-gap: var(--a8);
  }
  .dsai.seite .fragenblock .frage {
    break-inside: avoid;
  }
  .dsai.seite .fragenblock .frage + .frage {
    margin-top: 0;
    padding-top: var(--a6);
  }
}

/* -----------------------------------------------------------------------------
   Aufklapper
   Fuenf Fragen stehen offen, die uebrigen liegen hier. Native <details>: der
   Text steht im ausgelieferten HTML und wird von Crawlern und Sprachmodellen
   gelesen, auch zugeklappt. Teuer waere nur ein Aufklapper, der den Inhalt
   erst beim Klick nachlaedt.
   -------------------------------------------------------------------------- */
.dsai.seite .aufklapper {
  margin-top: var(--a7);
  max-width: var(--spalte);
}
/* Steht der Aufklapper in der Inhaltsspalte eines .zweispalt, gibt die Spalte
   das Mass vor. Sonst zieht --spalte ihn schmaler als die Fragen darueber. */
.dsai.seite .zweispalt .aufklapper {
  max-width: none;
}
.dsai.seite .aufklapper h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--akzent);
  padding-bottom: var(--a3);
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--a2);
}
.dsai.seite .aufklapper details {
  border-bottom: 1px solid var(--linie);
}
.dsai.seite .aufklapper summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a4);
  padding: var(--a4) 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  transition: color var(--z-zustand) var(--kurve);
}
.dsai.seite .aufklapper summary::-webkit-details-marker {
  display: none;
}
.dsai.seite .aufklapper summary::after {
  content: "+";
  flex: none;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--akzent);
}
.dsai.seite .aufklapper details[open] summary::after {
  content: "\2212";
}
.dsai.seite .aufklapper summary:hover {
  color: var(--akzent);
}
.dsai.seite .aufklapper .antwort {
  padding: 0 0 var(--a5);
  font-size: var(--t-klein);
  line-height: 1.62;
  color: var(--ink-leise);
  max-width: 74ch;
}

/* -----------------------------------------------------------------------------
   Rechtstext
   Impressum und Datenschutz. Schlichte Abfolge aus h2, p und Listen, damit der
   Text unveraendert bleiben kann. ⚠️ Inhalte hier sind Rechtstext, nicht
   umformulieren.
   -------------------------------------------------------------------------- */
.dsai.seite .rechtstext {
  max-width: var(--spalte);
}
.dsai.seite .rechtstext h2 {
  font-size: 21px;
  margin-top: var(--a7);
  padding-top: var(--a5);
  border-top: 1px solid var(--linie);
}
.dsai.seite .rechtstext h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.dsai.seite .rechtstext h3 {
  font-size: 17px;
  margin-top: var(--a5);
}
.dsai.seite .rechtstext p {
  margin-top: var(--a3);
  font-size: var(--t-klein);
  line-height: 1.62;
  color: var(--ink-leise);
  max-width: 74ch;
}
.dsai.seite .rechtstext ul,
.dsai.seite .rechtstext ol {
  margin-top: var(--a3);
  padding-left: 1.2em;
  max-width: 74ch;
}
.dsai.seite .rechtstext li {
  font-size: var(--t-klein);
  line-height: 1.62;
  color: var(--ink-leise);
  margin-top: var(--a2);
  list-style: disc;
}
.dsai.seite .rechtstext strong {
  color: var(--ink);
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   BALKEN
   Anteilswerte als liegende Balken, fuer Statistikabschnitte. Der Balken ist
   ein reines Anzeigemittel, die Zahl steht daneben und traegt die Aussage
   allein. Deshalb kein aria-Getue: die Zeile ist schon lesbar.
   -------------------------------------------------------------------------- */
.dsai.seite .balken {
  display: grid;
  gap: var(--a4);
  margin-top: var(--a5);
}
.dsai.seite .balken .zeile {
  display: grid;
  gap: 6px;
}
.dsai.seite .balken .kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--a3);
  font-size: var(--t-klein);
  color: var(--ink-leise);
}
.dsai.seite .balken .kopf b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dsai.seite .balken .spur {
  height: 6px;
  background: var(--linie);
}
.dsai.seite .balken .fuellung {
  height: 100%;
  background: var(--akzent);
}
.dsai.seite .balken .quelle {
  margin-top: var(--a4);
  font-size: var(--t-winzig, 12px);
  color: var(--ink-hell-leise, var(--ink-leise));
}