/* =====================================================================
   Spido - oeffentliche Website, gemeinsamer Stil

   Bis zum 24.09.2026 stand dieser Block inline in `index.html`. Seit die
   oeffentliche Website aus drei Seiten besteht - Start, Neukundenaufnahme
   und Spido 360 Grad -, braucht er eine gemeinsame Quelle. Dreimal
   dasselbe inline waere die zweite, dritte und vierte Stelle derselben
   Wahrheit.

   Reihenfolge der Einbindung:  spido-tokens -> app.css -> diese Datei.
   ===================================================================== */

/* ------------------------------------------------------------------
   Startseite – VARIANTE A, zweite Fassung 04.09.2026.

   Bewusst NICHT in app.css?v=20260906b: index.html und alle uebrigen Seiten bleiben
   unberuehrt. Erst wenn diese eine Seite sitzt, wird daraus ein
   Designsystem abgeleitet.

   Dritte Fassung 04.09.2026 - oeffentliche Website von der Anwendung
   getrennt: Sidebar raus, schlanke horizontale Navigation oben. Die
   linke App-Navigation gehoert ab jetzt hinter den Login, nicht davor.

   Gegenueber der ersten Fassung geaendert:
   - Serif raus. Sie wirkte nach Editorial-Marke statt nach Kollegen.
     Jetzt eine moderne Sans mit weichen Formen (Segoe UI Variable
     Display auf Windows, SF Pro auf macOS) - kein Webfont, damit keine
     Datenuebertragung an Dritte entsteht.
   - Ueberschrift einzeilig: breitere Spalte, Groesse darauf abgestimmt.
   - Grund warm statt weiss: Creme mit einem kaum wahrnehmbaren
     Lavendel-Unterton. Gegliedert wird ueber getoente Flaechen, nicht
     ueber Rahmen.
   - Lila nur noch als Akzent: Grusspunkt, Schrittzahlen, Knopf.
   - Die drei Schritte gestapelt statt nebeneinander, jeder mit seinem
     Bild - Ottos Flussgrafik aus index.html, in ihre drei natuerlichen
     Teile zerlegt: Quellunterlagen, Spido, Ergebnis. Keine neuen
     Motive erfunden.
------------------------------------------------------------------ */

.va{
  /* Warme, moderne Sans mit weichen Formen. Reihenfolge zaehlt:
     Segoe UI Variable Display ist auf Windows 11 deutlich offener und
     freundlicher als das klassische Segoe UI. */
  --sans:var(--spido-font);

  --creme:var(--spido-bg);        /* Grundton, warm */
  --creme-2:var(--spido-bg-2);      /* zweite Flaeche, etwas tiefer */
  --lavendel:var(--spido-bg-lavendel);     /* dritte Flaeche, kaum wahrnehmbarer Unterton */
  /* Flaeche des Hero-Knopfs: --violet-600 zu 10 % auf Weiss. Eine Stufe
     kraeftiger als --violet-050, damit der Knopf mehr Gewicht bekommt als
     der kleine in der Navigation - dieselbe Familie, kein neues Lila. */
  --lavendel-cta:var(--spido-lavendel-cta);

  /* Die zweite und dritte Ebene der Seite. Sand traegt die Geschichte
     "Beim Patienten aufgenommen", Aubergine den Ausblick auf 360 Grad.
     Beide sind warm gehalten und bleiben in derselben Familie wie der
     Grundton - kein kaltes Grau, kein Schwarz. */
  /* Salbei als zweite grafische Ebene: Mensch und Pflegealltag. */
  --salbei:var(--spido-salbei);
  /* Die Flaeche hinter der Journey traegt jetzt Text und muss deshalb
     decken - ein transparenter Ton wuerde weisse Schrift nicht tragen. */
  --journey-gruen:var(--spido-gruen-dunkel);
  /* Die Welt von Spido 360 Grad. Aus der Violettfamilie des Markentons
     abgeleitet, nur dunkel und entsaettigt - dieselbe Richtung im
     Farbkreis (Blau ueber Rot), damit sie wie eine dunkle Schwester des
     Spido-Lilas wirkt und nicht wie eine zweite Marke. Der Vorgaenger
     #43233f hatte mehr Rot als Blau und kippte dadurch ins Braeunliche. */
  --aubergine:var(--spido-aubergine);
  /* Der Knopf als Kontur statt als Flaeche, wieder im Marken-Lila:
     helle Flaeche, Rand und Schrift in --spido-purple. Erst beim Zeigen
     fuellt er sich. Terrakotta bleibt der Seite als grafischer Akzent
     erhalten - im Bogen hinter der Journey -, traegt aber keine Aktion
     mehr. */
  --knopf-flaeche:var(--lavendel-cta);
  --knopf-flaeche-klein:var(--violet-050);
  --knopf-kontur:var(--spido-purple);
  --knopf-auf:#ffffff;
  --aubergine-text:var(--spido-aubergine-text);
  --dunkel:var(--spido-text);       /* sehr dunkel, leicht warm - traegt die grossen Texte */
  --leise:var(--spido-text-leise);        /* warmes Grau */
  --text:var(--spido-text-2);

  --gruen-akzent:var(--spido-gruen);
  --pad:var(--spido-pad);
  --luft:var(--spido-luft);
  font-family:var(--sans);
}

/* overflow-x:clip statt hidden: es beschneidet, ohne einen
   Scroll-Container zu erzeugen. Noetig, weil das ZEIT. absichtlich
   ueber den Viewportrand hinauslaeuft - ohne das bekaeme die Seite eine
   waagerechte Scrollleiste. */
.va, .va .main{background:var(--creme)}
.va .main{overflow-x:clip}
.va .main{padding:0}
.va .hero-bg{display:none}          /* der warme Grund traegt selbst */

/* Kein Sidebar-Raster mehr: die oeffentliche Seite ist eine Spalte. */
.va.app{display:block}

/* Der Vorschaubalken darf nicht mit der Navigation um top:0 streiten.
   Auf der echten Seite gibt es ihn nicht. */
.previewbar{position:static}

/* --- Navigation oben -------------------------------------------
   Bewusst leicht: kein Rahmen, kein Kasten, nur eine Zeile, die beim
   Scrollen mitgeht. Links die Marke, mittig die Information, rechts
   der Zugang zur Anwendung und die eine Aktion. */
.va .topnav{
  position:sticky;top:0;z-index:40;
  background:rgba(251,249,246,.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px)}

.va .topnav .navinner{
  display:flex;align-items:center;gap:clamp(20px,3vw,48px);
  height:74px}

.va .topnav .marke-logo{
  display:flex;align-items:center;gap:11px;
  font-weight:700;font-size:27px;color:var(--violet-600);
  letter-spacing:-.018em;flex:0 0 auto}
.va .topnav .marke-logo svg{width:29px;height:29px}

.va .hauptnav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.va .hauptnav a{
  font-size:15.5px;font-weight:500;color:var(--leise);
  padding:8px 0;border-bottom:2px solid transparent}
.va .hauptnav a:hover{color:var(--dunkel)}
.va .hauptnav a.active{color:var(--dunkel);font-weight:600}

/* Rechts: "Anmelden" ist der Zugang zur Anwendung, nicht eine
   Inhaltsseite - deshalb abgesetzt und ohne Fuellung. Daneben die
   einzige dominierende Aktion. */
.va .navaktion{margin-left:auto;display:flex;align-items:center;gap:8px}
.va .navaktion .anmelden{
  font-size:15.5px;font-weight:600;color:var(--dunkel);
  padding:10px 16px;border-radius:11px}
.va .navaktion .anmelden:hover{background:rgba(31,28,26,.05)}
/* Gleiche Machart wie der Hero-Knopf, eine Stufe zurueckgenommen:
   feinerer Rand (1px), kleinere Schrift. Padding um die Randstaerke
   verringert, damit die Aussenmasse unveraendert bleiben. */
.va .navaktion .btn{
  font-size:15.5px;font-weight:600;padding:10px 19px;
  border-radius:11px;box-shadow:none;
  background:var(--knopf-flaeche-klein);border:1px solid var(--knopf-kontur);
  color:var(--knopf-kontur);
  transition:background .14s ease,border-color .14s ease}
.va .navaktion .btn:hover{background:var(--knopf-kontur);color:var(--knopf-auf)}

@media(max-width:860px){
  .va .hauptnav{display:none}
  .va .navaktion .anmelden{display:none}
}

/* Content-Achse 04.09.2026: schmaler und mit groesseren Seitenraendern.
   Vorher 1240px/72px - bei 1440px Fenster begann der Text schon bei 100px
   und klebte optisch am Rand. Jetzt 1120px/96px, also 160px Rand. */
.va .wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}

/* --- Gefaerbtes Glas hinter dem Hero ------------------------------
   Kein farbiger Abschnitt, sondern Licht: vier weit auseinanderliegende
   Farbwolken, jede stark weichgezeichnet, die sich zu einer changierenden
   Flaeche ueberlagern. Lavendel, helles Aubergine, ein Hauch Rosa und
   ein warmer Ton - zusammen ergibt das den Eindruck von gefaerbtem Glas
   statt eines Verlaufs.

   Der Unterschied zum Gradient liegt im Blur: die Wolken haben eigene
   Formen und Groessen, ihre Ueberlagerungen sind unregelmaessig. Ein
   linearer Verlauf waere sofort als solcher zu erkennen.

   Sie beginnen ausserhalb des Viewports und laufen unten weich aus -
   keine Kante, kein Rahmen. Das Feld liegt hinter allem (z-index 0),
   der Hero-Inhalt darueber. */
/* Die Hinweisleiste bleibt vorn und behaelt ihren dunklen Grund. Die
   Menueleiste dagegen wird transparent: das Glasfeld ragt hinter ihr
   nach oben hinaus und faerbt sie mit ein. Ihr Inhalt bleibt trotzdem
   davor, weil sie einen eigenen Stapelkontext bekommt - nur ihre
   Flaeche gibt sie ab. Keine Kante, weil die Wolken weichgezeichnet
   sind und die Leiste keine Trennlinie mehr traegt. */
.previewbar{position:relative;z-index:3}
.va .topnav{
  position:relative;z-index:2;
  background:transparent;border-bottom:none;box-shadow:none}

.va .kopf > .glasfeld{
  position:absolute;z-index:0;pointer-events:none;
  left:calc(50% - 50vw);width:100vw;
  /* Weit genug nach oben, dass die Farbe auch hinter der Menueleiste
     liegt und dort nicht abreisst. */
  top:calc(-1 * clamp(190px,24vh,320px));
  height:calc(100% + clamp(290px,38vh,500px))}
.va .glasfeld span{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px)}
/* Oben rechts, weit ueber den Rand hinaus - von dort kommt das Licht. */
.va .glasfeld .w1{
  right:-14%;top:-24%;width:76%;height:96%;
  background:#b9a3f2;opacity:.34}
/* Links, tiefer, in Richtung Aubergine. */
.va .glasfeld .w2{
  left:-18%;top:6%;width:66%;height:88%;
  background:#cfa8e4;opacity:.26}
/* Zartes Rosa in der unteren Mitte - der Uebergang zur Journey. */
.va .glasfeld .w3{
  left:24%;bottom:-30%;width:64%;height:74%;
  background:#f0bed4;opacity:.24}
/* Ein einzelner warmer Ton, klein und hoch gesetzt. */
.va .glasfeld .w4{
  left:6%;top:-16%;width:38%;height:52%;
  background:#f8d2b4;opacity:.22}

/* Der Lichtreflex: eine der Wolken wandert sehr langsam, gut eine
   Minute je Runde, um wenige Prozent. Man bemerkt keine Bewegung -
   die Flaeche wirkt nur nicht ganz statisch. */
@media (prefers-reduced-motion:no-preference){
  .va .glasfeld .w1{animation:glas-a 74s ease-in-out infinite}
  .va .glasfeld .w3{animation:glas-b 92s ease-in-out infinite}
}
@keyframes glas-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3.5%,2.5%,0) scale(1.06)}}
@keyframes glas-b{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%,-2%,0) scale(1.05)}}

/* --- Kopfbereich ------------------------------------------------ */
/* Achtung Kurzschreibweise: diese Regeln stehen nach `.va .wrap` und
   wuerden dessen seitliches Polster auf 0 setzen. Deshalb tragen sie
   var(--pad) selbst - sonst klebt der Inhalt bei schmalen Fenstern am
   Rand, waehrend es bei breiten durch margin:auto unauffaellig bleibt. */
/* Der Uebergang zur Journey, nicht der Hero: sein unteres Polster war
   var(--luft) (90-150px) und schob den Folgeinhalt aus dem ersten
   Bildschirm. Kopfhoehe, Schriftgroessen und Knopf bleiben, wie sie
   sind - gekuerzt wird ausschliesslich der Zwischenraum, damit unten
   schon zu sehen ist, dass es weitergeht. */
.va .kopf{
  position:relative;
  padding:clamp(30px,5.5vh,66px) var(--pad) clamp(14px,2vh,32px)}
/* Der Hero-Inhalt liegt vor dem Signature-Element. */
.va .kopf > *{position:relative;z-index:1}

.va .gruss{
  font-size:18px;font-weight:500;color:var(--leise);margin:0 0 34px;
  display:flex;align-items:center;gap:13px}
.va .gruss::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--violet-600);flex:0 0 9px}

/* Einzeilig auf dem Desktop. Die Groesse ist so gewaehlt, dass
   "Dein digitaler Pflegeexperte." bei 1440px in eine Zeile passt. */
.va h1.gross{
  font-family:var(--sans);
  font-size:clamp(34px,5.2vw,76px);
  line-height:1.04;letter-spacing:-.035em;font-weight:600;
  color:var(--dunkel);margin:0 0 8px;max-width:none}

/* Eng an die Ueberschrift gebunden - beide zusammen sind EINE Aussage.
   Der groessere Abstand kommt erst danach, vor der Aktion. */
.va .fuer{
  font-size:clamp(17px,1.5vw,21px);font-weight:500;color:var(--leise);
  margin:0 0 clamp(32px,4.4vh,50px)}

/* Knopf: nur so breit wie noetig, ohne Glanz.

   Farbigkeit 04.09.2026 - die Marke wirkt ueber Rand, Schrift und
   Interaktion statt ueber eine grosse gefuellte Flaeche. Das Lila ist
   unveraendert (--violet-600); die Flaeche ist --violet-050, der
   hellste Ton derselben Familie, den app.css?v=20260906b bereits fuehrt - also
   keine neue Farbe. Erst beim Zeigen fuellt sich der Knopf.

   Groesse bleibt: das Padding ist um die Randstaerke verringert
   (17/30 -> 15.5/28.5 bei 1.5px Rand), die Aussenmasse sind dieselben. */
.va .aktion{margin:0 0 14px}
/* Groesse, Polsterung, Radius und Schriftgewicht sind unveraendert -
   getauscht sind nur die Farben: dunkle Flaeche, helle Schrift. Die
   Outline ist eine Spur heller als der Grund, mehr nicht; einen Schatten
   traegt er nicht.

   overflow:hidden haelt das Hoverlicht in der Rundung,
   isolation:isolate macht den Knopf zu einem eigenen Stapelkontext -
   sonst laege der Text unter dem Pseudoelement. */
.va .aktion .btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;font-size:17px;font-weight:650;padding:15px 28px;
  border-radius:14px;box-shadow:none;
  background:var(--knopf-flaeche);border:2px solid var(--knopf-kontur);
  color:var(--knopf-kontur);
  transition:background .18s ease,border-color .18s ease}
.va .aktion .btn .txt{position:relative;z-index:2;display:inline-flex;gap:9px}
.va .aktion .btn .pfeil{
  display:inline-block;transition:transform .2s cubic-bezier(.3,.7,.4,1)}

/* Beim Zeigen: eine Spur heller, der Pfeil geht mit, und ein weiches
   Licht legt sich von oben ueber die Flaeche. Kein Groessensprung. */
.va .aktion .btn:hover{background:var(--knopf-kontur);color:var(--knopf-auf)}
.va .aktion .btn:hover .pfeil{transform:translateX(5px)}


/* Der erklaerende Satz - ruhig, unter dem Knopf, ohne Konkurrenz. */
.va .erklaerung{
  font-size:16.5px;line-height:1.55;color:var(--leise);margin:0;max-width:46ch}

/* Kopfbereich mittig, 04.09.2026. Kleine, bewusst gut sichtbare und in
   einem Commit ruecknehmbare Aenderung - sie dient dem Nachweis, dass
   ein Push auf `redesign` auf vorschau.myspido.de ankommt. */
.va .kopf{text-align:center}
.va .kopf .gruss{justify-content:center}
.va .kopf .erklaerung{margin-left:auto;margin-right:auto}

/* --- Nutzen-Catcher zwischen Hero und Ablauf --------------------
   Nach der Vorlage `85_Webauftritt-Design/Ansicht_Vor Ort beim
   Patienten aufgenommen, im Buero fertig.png`: fuenf Stationen in zwei
   Phasen, Texte woertlich uebernommen. Die Vorlage arbeitet mit
   gerenderten Szenen in Beige - hier steht dieselbe Aussage in Spidos
   eigenen Mitteln: Lavendelkreise, Strichikonen, das vorhandene Lila.

   Bewusst kein eigener Abschnitt mit eigener Flaeche: keine Toenung,
   kein Rahmen, keine Karte. Er bleibt deutlich flacher als die Schritte
   01-03 - innen enge Abstaende, danach viel Luft, damit die Gruppe
   "Hero + Catcher" gegen den Ablauf steht.

   Phasen, Bahn und Stationen liegen in EINEM Raster und sind damit
   Geschwister. Das ist der Grund fuer den Aufbau: nur so laesst sich die
   zweite Phase auf schmalen Displays per `order` zwischen Station 3 und
   4 schieben, wo sie hingehoert - stuende sie in einem eigenen
   Container, klebte sie dort an der ersten. */
.va .buehne{padding:0 0 clamp(28px,4.2vh,58px)}

/* Die Flaechen liegen genau hinter der Journey - nicht hinter dem Text
   darunter. Deshalb sitzen sie in einem eigenen Feld, das nur die
   Stationen umschliesst; der Erklaertext bleibt ausserhalb, auf dem
   blanken Grund der Seite.

   Das SVG bricht auf Viewportbreite aus (left/right ueber die halbe
   Differenz), damit Form und Bogen wie vorgesehen an den Raendern
   angeschnitten werden. overflow:hidden am Feld haelt sie vertikal
   zusammen, overflow-x:clip auf .main faengt die Breite ab. */
.va .journeyfeld{
  position:relative;order:-1;
  padding:clamp(8px,1.2vh,20px) 0 clamp(8px,1.2vh,20px)}
/* Die Ebene ragt nach oben weit in den Hero hinein - die Journey gehoert
   dorthin, nicht in einen eigenen Abschnitt darunter. Der Bogen wird
   dadurch am oberen Rand angeschnitten und die Form legt sich unter den
   Hero-Text; der liegt mit z-index 1 darueber und bleibt unberuehrt.
   Nach unten schliesst die Ebene dicht ab. */
/* Wichtig: die Hoehe muss ausdruecklich gesetzt werden. Ein <svg> ist
   ein Ersatzelement mit eigenem Seitenverhaeltnis - mit top und bottom
   allein ignoriert es das bottom und rechnet sich die Hoehe aus der
   viewBox. Genau daran lag es, dass die Flaeche bis unter die
   Ueberschrift reichte, obwohl bottom sie darueber enden lassen sollte.

   Hoehe = Feldhoehe + Ueberstand nach oben + ein kleiner Rest, damit die
   Unterkante zwischen den Stationsbeschriftungen und "Beim Patienten
   aufgenommen." liegt. */
/* Der Bogen ist das Bindeglied: er beginnt hinter dem Hero und setzt
   sich in der Journey fort. Dadurch liest sich der obere Teil als eine
   Komposition und nicht als zwei aufeinanderfolgende Abschnitte. Der
   Ueberstand ist deshalb bewusst gross. */
.va .journeyfeld{--ueber:clamp(190px,27vh,360px)}
.va .journeyfeld > .hintergrund{
  position:absolute;z-index:0;top:calc(-1 * var(--ueber));
  /* Weit genug nach unten, dass "Beim Patienten aufgenommen. Im Buero
     fertig." noch darauf liegt. Die Unterkante bleibt die geschwungene
     Kontur der Form - keine gerade Linie. */
  height:calc(100% + var(--ueber) + clamp(162px,21.5vh,272px));
  z-index:0;pointer-events:none;
  /* Auch die Breite muss ausdruecklich stehen - aus demselben Grund wie
     die Hoehe. Mit left und right allein rechnet sich das SVG die Breite
     aus Hoehe und Seitenverhaeltnis und blieb rechts zu kurz. */
  left:calc(50% - 50vw);width:100vw}
.va .journeyfeld > .mini{position:relative;z-index:1}
/* Bis 840 px gilt die Desktop-Form, darunter die mobile. */
.va .journeyfeld > .hintergrund-mobil{display:none}

.va .catcher{
  padding:0 var(--pad);text-align:center;
  display:flex;flex-direction:column}
.va h2.catch{
  font-family:var(--sans);
  font-size:clamp(22px,2.35vw,31px);line-height:1.2;letter-spacing:-.025em;
  /* Schwarz statt --dunkel (#1f1c1a): die Zeile steht jetzt allein und
     soll klar gesetzt sein. */
  font-weight:600;color:#000;margin:clamp(30px,4.4vh,58px) 0 12px}
.va .mini{
  position:relative;margin:0 auto;max-width:920px;
  display:grid;grid-template-columns:repeat(5,1fr)}

/* Zeile 1: die beiden Phasen ueber den Stationen, die sie zusammenfassen
   - drei vor Ort, zwei auf dem Rueckweg. */
.va .phase{
  justify-self:center;align-self:center;margin-bottom:15px;
  font-size:12px;font-weight:600;color:var(--violet-600);
  background:var(--violet-050);border-radius:999px;padding:5px 14px;
  white-space:nowrap}
.va .phase.p1{grid-area:1 / 1 / 2 / 4}
.va .phase.p2{grid-area:1 / 4 / 2 / 6}

/* Zeile 2: die Stationen. Fuenf gleich breite Spalten - die Mittelpunkte
   der aeusseren liegen damit bei 10 % und 90 %, und genau dort beginnt
   und endet die Bahn. */
/* Jede Station bekommt ihre Spalte ausdruecklich zugewiesen. Ohne das
   weicht das automatische Platzieren in neu erfundene Spalten aus,
   sobald Bahn und Spur die zweite Zeile schon ueber die volle Breite
   belegen - das Raster laeuft dann nach rechts aus dem Tritt. */
.va .stat{
  grid-row:2;position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:7px;padding:0 6px}
.va .stat:nth-of-type(1){grid-column:1}
.va .stat:nth-of-type(2){grid-column:2}
.va .stat:nth-of-type(3){grid-column:3}
.va .stat:nth-of-type(4){grid-column:4}
.va .stat:nth-of-type(5){grid-column:5}
/* Jede Station zeigt eine kleine Szene statt eines Symbols: das Handy
   mit Wellenform, der Unterlagenstapel mit Kamera, das Auto auf der
   Strasse. Die Vorlage lebt davon, dass man den Vorgang sieht - eine
   Strichikone in einem Kreis erzaehlt ihn nicht. Gezeichnet in Spidos
   Farben und aus denselben Bausteinen wie die Bilder in 01 bis 03:
   weisse Blaetter, Wellenform, der Stern aus der Wortmarke.

   Kein Rahmen, kein Grund, kein Schatten - die Szenen stehen frei. */
.va .stat .pkt{
  width:126px;height:88px;flex:0 0 126px;display:block}
.va .stat .pkt svg{width:100%;height:100%;display:block;overflow:visible}
.va .stat b{display:block;font-size:13px;font-weight:600;color:var(--dunkel);
  line-height:1.3}
.va .stat small{display:block;font-size:12px;color:var(--leise);
  line-height:1.4;margin-top:2px}

/* Die Route. Sie liegt als eigenes Rasterfeld in Zeile 2, damit ihre
   Lage an den Stationen haengt und nicht an der Hoehe der Phasenzeile.
   margin-top setzt sie auf die Standlinie der Motive.

   Zwischen Unterlagen, Auto und Ergebnis schwingt sie leicht - eine
   Route zurueck ins Buero, nicht mehr ein Strich. An den Stationsmitten
   (10/30/50/70/90 %) liegt sie exakt auf der Standlinie, dazwischen
   weicht sie ab; die Motive stehen also weiter richtig.

   viewBox 1000x48 bei 48px Darstellungshoehe: der Y-Massstab ist damit
   1:1 und die Strichstaerke bleibt unverfaelscht, obwohl das SVG in der
   Breite gestaucht wird. Deshalb hier KEIN non-scaling-stroke - das
   wuerde stroke-dasharray wieder in Bildschirmpixeln rechnen und den
   Aufbau der Route zerreissen. */
.va .route{
  grid-area:2 / 1 / 3 / 6;align-self:start;z-index:0;
  width:80%;height:48px;margin:57px auto 0;display:block}
.va .route path{fill:none;stroke-linecap:round}
.va .route .bahn{stroke:rgba(109,40,217,.22);stroke-width:1.6}
.va .route .spur{stroke:rgba(109,40,217,.5);stroke-width:1.8;
  stroke-dasharray:100;stroke-dashoffset:0}

/* Beim ersten Sichtwerden baut sich die Route von links nach rechts auf.
   Ohne Skript oder bei abgewaehlter Bewegung liegt sie fertig da. */
.va .mini.bereit .route .spur{stroke-dashoffset:100}
.va .mini.bereit.laeuft .route .spur{
  animation:route-auf 1.9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes route-auf{to{stroke-dashoffset:0}}

/* Das Auto faehrt wirklich: es kommt von links ins Bild, zieht durch
   und verschwindet nach rechts, dann beginnt es von vorn. Die vorige
   Fassung wippte nur um drei Einheiten - das war als Fahrt nicht zu
   erkennen.

   Sieben Sekunden je Durchfahrt, mit weichem Ein- und Ausblenden an
   den Raendern, damit es nicht springt. Der Stern daneben gehoert zu
   Spido und bleibt stehen. Ohne Skript und bei abgewaehlter Bewegung
   steht auch das Auto. */
@media (prefers-reduced-motion:no-preference){
  .va .mini.bereit.laeuft .auto{
    animation:auto-fahrt 7s cubic-bezier(.45,0,.55,1) infinite}
}
@keyframes auto-fahrt{
  0%{transform:translateX(-30px);opacity:0}
  14%{opacity:1}
  84%{opacity:1}
  100%{transform:translateX(30px);opacity:0}}

/* Ohne JavaScript und bei abgewaehlter Bewegung gilt genau das oben: die
   Spur liegt fertig da, der Laeufer ist unsichtbar. Erst das Skript
   setzt `bereit` und damit den Startzustand - so kann nie ein halber
   Zustand stehenbleiben, wenn etwas nicht laedt. */


/* --- Schrift auf der dunklen Journeyflaeche -----------------------
   Alles, was auf der gruenen Form liegt, wird hell. Die Werte sind
   gestuft wie zuvor auf hellem Grund: Titel voll, Unterzeile
   zurueckgenommen, damit die Hierarchie erhalten bleibt. */
.va .journeyfeld .stat b{color:#ffffff}
.va .journeyfeld .stat small{color:rgba(255,255,255,.72)}
/* Die Ueberschrift muss ausdruecklich vor die Flaeche gelegt werden.
   Sie ist ein Geschwister des Journeyfeldes und nicht positioniert -
   nicht positionierte Elemente werden vor positionierten gemalt, das
   Feld mit seinem SVG lag also darueber. Solange die Flaeche
   durchsichtig war, fiel das nicht auf; deckend verschwand die Zeile
   dahinter. */
.va .catcher h2.catch{position:relative;z-index:1;color:#ffffff}
/* Route und Knoten waren auf Lila abgestimmt und verschwaenden auf dem
   dunklen Grund - sie werden hell. */
.va .route .bahn{stroke:rgba(255,255,255,.28)}
.va .route .spur{stroke:rgba(255,255,255,.6)}

/* --- Abschnitt "So funktioniert Spido" -------------------------- */
.va .marke{
  font-size:13.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;
  color:var(--violet-600);margin:0 0 16px}
.va h2.abschnitt{
  font-family:var(--sans);
  font-size:clamp(28px,3.2vw,44px);line-height:1.14;letter-spacing:-.028em;
  font-weight:600;color:var(--dunkel);margin:0 0 18px}
.va .abschnitt-sub{
  font-size:18.5px;line-height:1.55;color:var(--text);margin:0;max-width:46ch}

/* z-index 1: die Einleitung liegt vor dem Wort, das von oben in sie
   hineinragt. */
.va .einleitung{position:relative;z-index:1;
  padding:clamp(28px,4.2vh,58px) var(--pad) clamp(30px,4.2vh,52px)}

/* Ein Schritt ist eine Flaeche, kein Kasten. Die Toenung wechselt und
   grenzt die Schritte voneinander ab - ohne Rahmen und ohne Karte.

   Hoehe 04.09.2026 deutlich zurueckgenommen (vorher 56-100px Polsterung):
   die drei Schritte sollen beim Scrollen als EIN Ablauf lesbar bleiben.
   position:relative traegt die Verbindungslinie. */
.va .schritt{padding:clamp(34px,4.6vh,58px) 0;position:relative}
/* Die drei Schritte sind wieder gestaffelt: Grundton, dann --lavendel
   fuer den Moment, in dem Spido uebernimmt, dann --creme-2. Bewusst
   drei verschiedene Werte - bekaemen 02 und 03 denselben, verschmelzen
   sie zu einer Flaeche und die Staffelung geht verloren. Getoente
   Flaechen, keine Karten. */
.va .schritt.t1{background:var(--creme)}
.va .schritt.t2{background:var(--lavendel)}
.va .schritt.t3{background:var(--creme-2)}

.va .schritt .inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,3.4vw,58px);align-items:center}
/* Text an das Bild heranruecken, damit beide als ein Block gelesen
   werden und nicht als zwei Spalten nebeneinander. */
.va .schritt .text{max-width:44ch;justify-self:end}
.va .schritt.dreh .text{justify-self:start}
.va .schritt.dreh .inner > .bild{order:-1}

/* --- Die Verbindung zwischen 01, 02 und 03 -----------------------
   EINE Kurve ueber alle drei Flaechen, nicht drei Segmente. Der
   Unterschied ist sichtbar: bei einem SVG je Schritt streckt jede
   Sektion ihre viewBox auf die eigene Hoehe, und weil die Sektionen
   unterschiedlich hoch sind, springt die Steigung an jeder Grenze - die
   Linie wirkt gebrochen. Ueber den gemeinsamen Container gestreckt
   laeuft sie durch; die beiden Kubiken stossen bei 38/45 mit gleicher
   (senkrechter) Tangente aneinander und knicken deshalb nicht.

   Die Fuehrung meidet die Textspalten: im oberen Drittel (Schritt 01,
   Text links bis 42.7 %) liegt sie rechts bei 44-50, im mittleren
   (Schritt 02, Text rechts ab 47.9 %) links bei 38-42, im unteren
   (Schritt 03, Text wieder links) rechts bei 46-50.

   Das SVG ist so breit wie die Content-Achse - an der Fensterbreite
   ausgerichtet wanderte die Linie bei breiten Monitoren in den Text.
   z-index:1, weil die Sektionen eigene Hintergrundtoene malen; der
   Inhalt liegt mit derselben Stufe darueber, weil er spaeter im Markup
   steht. */
.va .ablauf{position:relative}
.va .flow{
  position:absolute;top:0;height:100%;left:50%;transform:translateX(-50%);
  width:min(1120px,calc(100% - 2*var(--pad)));z-index:1;pointer-events:none}
.va .flow svg{display:block;width:100%;height:100%}
.va .flow path{
  fill:none;stroke:var(--violet-600);stroke-opacity:.34;stroke-width:1.7;
  vector-effect:non-scaling-stroke;stroke-linecap:round}

/* Zwei Knoten auf der Kurve, an den Uebergaengen 01->02 und 02->03. Die
   Werte sind aus der Bezierkurve gerechnet, nicht geschaetzt - sonst
   sitzen sie neben der Linie statt darauf. */
.va .flow .knoten{
  position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--violet-600);opacity:.5;transform:translate(-50%,-50%)}
.va .flow .k1{left:40.08%;top:33%}
.va .flow .k2{left:46.02%;top:67%}

/* Beim Scrollen wachsen sie nacheinander auf - der Ablauf laeuft
   sichtbar durch, waehrend die Linie ruhig stehen bleibt. Ohne
   Unterstuetzung oder bei abgewaehlter Bewegung stehen sie in
   Endgroesse da. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .va .ablauf{view-timeline:--ablauf block}
    .va .flow .knoten{
      opacity:.12;transform:translate(-50%,-50%) scale(.35);
      animation:kn-auf linear both;animation-timeline:--ablauf}
    .va .flow .k1{animation-range:cover 20% cover 40%}
    .va .flow .k2{animation-range:cover 50% cover 70%}
  }
}
@keyframes kn-auf{to{opacity:.5;transform:translate(-50%,-50%) scale(1)}}

.va .schritt .n{
  font-size:15px;font-weight:700;letter-spacing:.09em;color:var(--violet-600);
  margin:0 0 18px}
.va .schritt h3{
  font-family:var(--sans);
  font-size:clamp(24px,2.4vw,34px);line-height:1.18;letter-spacing:-.022em;
  font-weight:600;color:var(--dunkel);margin:0 0 16px}
.va .schritt p{
  font-size:17.5px;line-height:1.62;color:var(--text);margin:0}
/* Die fuenf Ergebnisse als ruhige Zeile - der Stapel daneben zeigt sie,
   diese Zeile benennt sie. */
.va .schritt p.ergebnisse{
  margin:18px 0 0;font-size:15.5px;line-height:1.6;color:var(--leise)}

/* --- Die Bilder: Ottos Flussgrafik, in drei Teile zerlegt --------
   Uebernommen aus site/index.html und nur vergroessert und beruhigt -
   weniger Schatten, waermeres Weiss, mehr Luft. Keine neuen Motive. */
.va .bild{display:flex;justify-content:center}
.va .sf-ic{display:inline-flex;width:30px;height:30px;border-radius:9px;
  align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 30px}
.va .sf-ic svg{width:17px;height:17px}
.va .sf-ic.v{background:var(--violet-050);color:var(--violet-600)}
.va .sf-ic.g{background:#e6f6ea;color:#16a34a}
.va .sf-ic.a{background:#fdf1dc;color:#c2760a}
.va .sf-ic.b{background:#e4edfb;color:#2563eb}
.va .sf-ic.d{background:#e9e6e2;color:#4a4441}

.va .sf-docs{position:relative;height:376px;width:376px}
.va .sf-doc{position:absolute;width:150px;background:#fff;border:none;
  border-radius:15px;box-shadow:0 6px 20px rgba(60,45,30,.07);padding:13px;
  transform:rotate(var(--r))}
.va .sf-doc b{display:block;font-size:12.5px;margin:9px 0;color:var(--dunkel);font-weight:600}
.va .sf-doc em{display:block;font-style:normal;font-size:11px;color:var(--leise);
  margin:-5px 0 9px}
.va .sf-doc i{display:block;height:5px;border-radius:3px;background:#f0ece6;margin:6px 0}
.va .sf-doc.audio{width:196px;display:flex;align-items:center;gap:10px}
.va .sf-doc.audio b{margin:0 0 5px}
.va .sf-wave{color:var(--violet-500);flex:1}

/* Schritt 02 traegt den Moment "jetzt uebernimmt Spido" und darf dafuer
   etwas mehr Praesenz haben als die beiden Nachbarn - eine Spur groesser
   und minimal deutlicher abgehoben. Kein neues Element, keine neue
   Form. */
.va .sf-spido{background:#fff;border:none;border-radius:22px;
  box-shadow:0 10px 30px rgba(60,45,30,.10);padding:34px 30px;width:300px}
.va .sf-spido .brandrow{display:flex;flex-direction:column;align-items:center;
  gap:10px;margin-bottom:22px}
.va .sf-spido .logo{width:56px;height:56px;border-radius:17px;
  background:linear-gradient(135deg,var(--violet-500),var(--violet));
  display:flex;align-items:center;justify-content:center}
.va .sf-spido .wordmark{font-weight:650;font-size:23px;color:var(--dunkel)}
.va .sf-spido ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:14px}
.va .sf-spido li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text)}
.va .sf-check{color:var(--violet-500);flex:0 0 18px}

/* Der Bearbeitungszustand: die drei Zeilen erscheinen nacheinander,
   waehrend der Schritt in den Blick kommt - Spido arbeitet gerade die
   Liste ab. Keine Dauerschleife, kein Leuchten, keine KI-Optik: die
   Bewegung haengt an der Scrollposition und steht still, sobald der
   Leser stillsteht.

   Bewusst ohne JavaScript ueber scroll-driven animations. Der
   @supports-Rahmen ist die halbe Miete: wo die Technik fehlt, wird die
   Startregel (opacity:0) gar nicht erst angewandt und die Liste steht
   einfach da. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .va .sf-spido li{
      opacity:0;transform:translateY(7px);
      animation:sf-einlauf linear both;
      animation-timeline:view();}
    .va .sf-spido li:nth-child(1){animation-range:entry 26% entry 52%}
    .va .sf-spido li:nth-child(2){animation-range:entry 34% entry 60%}
    .va .sf-spido li:nth-child(3){animation-range:entry 42% entry 68%}
  }
}
@keyframes sf-einlauf{to{opacity:1;transform:none}}

/* --- Schritt 03: der Dokumentenstapel ----------------------------
   Das Gegenstueck zum Faecher aus Schritt 01: dort gehen lose Unterlagen
   hinein, hier kommt ein geordneter Stapel heraus.

   Vorn liegt die SIS(R) ambulant V2.0 - angedeutet nach der Vorlage
   `60_Vorlagen-und-Formulare/SIS-ambulant-V2.0_FINAL.pdf`: Kopfzeile und
   vor allem die Farbfolge der Themenfelder, an der das Formular sofort
   erkennbar ist. Die Farben sind aus dem PDF gemessen, nicht geschaetzt.
   Das Blatt ist blanko - es gibt keine Eintraege und damit keine
   personenbezogenen Inhalte.

   HOCHFORMAT, obwohl das Original zweiseitig quer liegt (842 x 595 pt).
   Das ist Absicht und die Entscheidung vom 04.09.2026: Die Datei, die
   Spido erzeugt, bleibt das Original im Querformat - nur diese Abbildung
   auf dem Stapel steht hochkant, weil fuenf quer liegende Blaetter im
   Stapel nebeneinander keine Ordnung mehr ergeben. Das Blattverhaeltnis
   ist exakt DIN A4 hochkant (260 x 368, also 1:1,414).

   Siehe SPIDO_DOKUMENTARCHITEKTUR.md, Abschnitt 2.

   Der Urhebervermerk des Originals (Konzept Beikirch/Roes,
   Nutzungsrechte BMG) steht wie dort seitlich am Rand. Ob die
   Abbildung des Formularlayouts als Werbedarstellung zulaessig ist,
   ist damit NICHT geklaert und vor dem Livegang zu pruefen. */
.va .sf-stapel{position:relative;width:min(326px,100%);aspect-ratio:326/413}
.va .sf-blatt{
  position:absolute;width:79.8%;height:89.1%;background:#fff;
  border-radius:10px;box-shadow:0 7px 22px rgba(60,45,30,.09);
  transform:rotate(var(--r))}
.va .sf-blatt.b4{top:0;left:20.2%;--r:-2.4deg;opacity:.74}
.va .sf-blatt.b3{top:3.6%;left:13.5%;--r:-1.4deg;opacity:.83}
.va .sf-blatt.b2{top:7.3%;left:6.7%;--r:-.6deg;opacity:.92}
.va .sf-blatt.b1{top:10.9%;left:0;--r:.4deg;
  padding:11px 12px 11px 17px;display:flex;flex-direction:column;
  font-family:Arial,Helvetica,sans-serif}

/* Kopfzeile: links die Wortmarke, rechts die vier Eintragfelder. */
.va .sis-kopf{display:flex;align-items:flex-end;gap:10px;margin-bottom:5px}
.va .sis-titel{flex:0 0 auto;line-height:1.15}
.va .sis-titel b{font-size:11.5px;font-weight:700;color:#1a1a1a;letter-spacing:-.01em}
.va .sis-titel sup{font-size:6px;vertical-align:super}
.va .sis-titel em{font-style:normal;font-weight:700;color:#d12229}
.va .sis-titel span{display:block;font-size:5px;color:#333;margin-top:1px}
.va .sis-felder{flex:1;display:flex;gap:5px;align-items:flex-end;padding-bottom:2px}
.va .sis-felder i{flex:1;height:0;border-bottom:.5px solid #9a9a9a}

/* Ein Themenfeld: farbiger Balken, darunter die leere Flaeche. */
.va .sis-block{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:3px}
.va .sis-balken{
  font-size:4.4px;font-weight:700;color:#fff;padding:1.6px 3px;
  white-space:nowrap;overflow:hidden}
.va .sis-feld{flex:1;border:.5px solid #b9b9b9;border-top:none;min-height:0}
/* Dieselben gemessenen Farben, nur zurueckgenommen: auf einer
   Marketingseite sollen sie das Formular erkennbar machen, nicht die
   Seite dominieren. Alpha statt hellerer Werte, damit der Farbton
   derselbe bleibt. */
.va .sis-balken.f0{background:rgba(209,34,41,.78)}
.va .sis-balken.f1{background:rgba(242,112,82,.78)}
.va .sis-balken.f2{background:rgba(254,193,13,.78)}
.va .sis-balken.f3{background:rgba(105,192,122,.78)}

/* Wie im Original: der Urhebervermerk laeuft senkrecht am linken Rand. */
.va .sis-quelle{
  position:absolute;left:4px;bottom:9px;transform:rotate(180deg);
  writing-mode:vertical-rl;font-size:3.6px;color:#777;letter-spacing:.02em}

/* Die grosse 360 Grad im Hintergrund: reines Grafikelement, bewusst
   angeschnitten und so leise, dass sie nie mit dem Text konkurriert. */
.va .gross360{
  position:absolute;top:-.18em;right:-.1em;z-index:0;pointer-events:none;
  font-family:var(--sans);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(168px,24vw,380px);line-height:.8;
  color:#fff;opacity:.07;user-select:none}
.va h2.produkt{
  font-family:var(--sans);
  font-size:clamp(34px,4.4vw,58px);line-height:1.05;letter-spacing:-.03em;
  font-weight:600;color:var(--aubergine-text);margin:0 0 10px}
.va .frag{
  font-size:clamp(20px,2.2vw,30px);line-height:1.25;letter-spacing:-.02em;
  font-weight:500;color:rgba(241,236,243,.78);margin:0 0 clamp(28px,4.2vh,50px)}

/* Deutlich sekundaer gegenueber dem Knopf der Neukundenaufnahme: ein
   Link, kein Knopf - hier gibt es noch nichts zu starten. */
.va .vormerken{
  display:inline-block;margin-top:clamp(24px,3.6vh,42px);
  font-size:15.5px;font-weight:600;color:var(--aubergine-text);
  border-bottom:1.5px solid rgba(241,236,243,.4);padding-bottom:3px}
.va .vormerken:hover{border-bottom-color:var(--aubergine-text)}

@media(max-width:700px){
  .va .gross360{font-size:clamp(180px,52vw,300px);opacity:.06}
}

/* --- Abschluss --------------------------------------------------- */
.va .schluss{padding:var(--luft) var(--pad) clamp(64px,9vh,110px)}
.va .schluss p{font-size:19px;color:var(--dunkel);margin:0 0 26px;max-width:40ch}
.va .trust{margin-top:44px;color:var(--leise)}

.va .fuss{
  max-width:1120px;margin:clamp(46px,6.5vh,80px) auto 0;
  padding:26px var(--pad) 60px;border-top:1px solid #eee7de;
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  color:var(--leise);font-size:14px}
.va .fuss a:hover{color:var(--violet-600)}
.va .fuss .sep{opacity:.35}
/* Der Fuss kommt aus bausteine/footer.html und traegt dort eine Klasse
   statt eines Inline-Stils - eine gemeinsame Quelle vertraegt keine
   seitenspezifischen Attribute. */
.va .fuss-rechts{margin-left:auto}

/* Fuenf Spalten tragen bis etwa 840px. Darunter untereinander mit dem
   Symbol links - fuenf Stationen gehen in kein sauberes Zweierraster
   auf. Die Ikonen halten die Gliederung, es liest sich also weiter als
   Ablauf und nicht als Textblock. Die Phasen behalten ihren Platz im
   Verlauf: `order` schiebt die zweite zwischen Station 3 und 4. Die
   waagerechte Bahn entfaellt - ueber einen Umbruch hinweg fuehrt sie
   nicht mehr. */
@media(max-width:840px){
  /* --- RESPONSIVE STORY CONTINUITY -----------------------------------
     Untereinander gestapelt bleibt der Ablauf nur dann ein Ablauf, wenn
     die Flaeche darunter ihn zusammenhaelt. Deshalb hier eine eigene
     Geometrie statt der gestauchten Desktop-Form. Inhalte, Reihenfolge,
     Farben und Typografie bleiben unveraendert - nur die Flaeche. */
  .va .journeyfeld > .hintergrund{display:none}
  .va .journeyfeld > .hintergrund-mobil{display:block}
  /* Der Ueberstand nach oben ist auf dem Telefon kleiner: Der Hero
     darueber ist schmal und hoch, die Flaeche soll ihn nicht verdecken,
     sondern kurz darunter anfangen.

     Der Aussenrand schiebt Flaeche UND erste Station gemeinsam nach
     unten - der Satz "Ich nehme dir die Neukundenaufnahme ab ..." klebte
     sonst an der Kante. Er gehoert zum Hero, die Flaeche faengt danach
     an; ohne Luft dazwischen lesen sie sich als ein Block. */
  .va .journeyfeld{--ueber:34px;margin-top:0.5cm}
  .va .journeyfeld > .hintergrund-mobil{
    /* Nach unten so weit, dass "Beim Patienten aufgenommen. Im Buero
       fertig." noch auf der Flaeche steht. */
    height:calc(100% + var(--ueber) + 132px);
  }

  .va .mini{display:flex;flex-direction:column;align-items:stretch;
    gap:15px;max-width:400px}
  .va .route{display:none}
  .va .phase{align-self:flex-start;margin:0}
  .va .phase.p1{order:0}
  .va .stat:nth-of-type(1){order:1}
  .va .stat:nth-of-type(2){order:2}
  .va .stat:nth-of-type(3){order:3}
  .va .phase.p2{order:4;margin-top:10px}
  .va .stat:nth-of-type(4){order:5}
  .va .stat:nth-of-type(5){order:6}
  .va .stat{flex-direction:row;align-items:center;gap:14px;
    text-align:left;padding:0}
  .va .stat .pkt{width:88px;height:61px;flex:0 0 88px}
}

@media(max-width:900px){
  /* Einspaltig gibt es kein Links und Rechts mehr, zwischen dem die Linie
     vermitteln koennte - sie wuerde nur quer durch den Text laufen. */
  .va .flow{display:none}
  .va .schritt .inner{grid-template-columns:1fr;gap:32px}
  .va .schritt .text{max-width:none;justify-self:start}
  .va .schritt.dreh .inner > .bild{order:0}
  .va .sf-docs{width:330px;height:340px}
}

/* --- Produktweiche und Spido 360 Grad, 24.09.2026 -----------------
   Die Seite kennt bisher Flaechen, keine Kaesten. Fuer die Weiche
   verlangt der Auftrag zwei gleichwertige Karten - sie sind deshalb so
   leise wie moeglich gehalten: heller Grund, eine Haarlinie, der Radius
   der Dokumentblaetter. Keine Schatten, keine zweite Designsprache.
   Farben, Abstaende und Schriftgroessen kommen ausnahmslos aus den
   vorhandenen Token. */
.va .weiche{padding:clamp(10px,1.6vh,22px) var(--pad) clamp(28px,4vh,52px)}
.va .weiche .abschnitt-sub{margin-bottom:clamp(16px,2.2vh,26px)}

.va .wegkarten{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,2.2vw,28px);align-items:stretch}
.va .wegkarte{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid #eee7de;border-radius:15px;
  padding:clamp(22px,2.6vw,32px)}
/* Die Produktnamen tragen die Karten - sie sind Produktueberschriften,
   keine Zwischenzeilen. Beide exakt gleich gross und gleich schwer, aber
   jeder in der Farbe seines Produkts: damit steht oben ohne ein weiteres
   Wort Violett = Neukundenaufnahme, Aubergine = Spido 360 Grad. */
.va .wegkarte h3{
  font-family:var(--sans);font-size:clamp(29px,3.4vw,44px);line-height:1.06;
  letter-spacing:-.034em;font-weight:700;color:var(--violet-600);margin:0 0 6px}
.va .wegkarte .wegsatz{
  font-size:17.5px;line-height:1.3;font-weight:600;color:var(--dunkel);
  margin:0 0 8px}
.va .wegkarte p{font-size:16px;line-height:1.46;color:var(--text);margin:0 0 7px}
.va .wegkarte .wegliste{
  font-size:15px;line-height:1.5;color:var(--leise);margin:8px 0 0}
.va .wegkarte .wegaktion{margin:auto 0 0;padding-top:clamp(16px,2.4vh,26px)}
.va .wegkarte .wegmehr{margin:12px 0 0}
.va .wegkarte .wegmehr a{
  font-size:15px;font-weight:600;color:var(--violet-600);
  border-bottom:1.5px solid rgba(109,40,217,.28);padding-bottom:2px}
.va .wegkarte .wegmehr a:hover{border-bottom-color:var(--violet-600)}
.va .wegkarte .wegaktion .btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;font-size:17px;font-weight:650;padding:15px 28px;
  border-radius:14px;box-shadow:none;
  background:var(--knopf-flaeche);border:2px solid var(--knopf-kontur);
  color:var(--knopf-kontur);
  transition:background .18s ease,border-color .18s ease}
.va .wegkarte .wegaktion .btn .txt{position:relative;z-index:2;display:inline-flex;gap:9px}
.va .wegkarte .wegaktion .btn .pfeil{
  display:inline-block;transition:transform .2s cubic-bezier(.3,.7,.4,1)}
.va .wegkarte .wegaktion .btn:hover{background:var(--knopf-kontur);color:var(--knopf-auf)}
.va .wegkarte .wegaktion .btn:hover .pfeil{transform:translateX(5px)}
/* Der zweite Weg fuehrt nur an eine Stelle derselben Seite - ein Link,
   kein Knopf. Er darf den Start der Neukundenaufnahme nicht doppeln. */
.va .wegkarte .wegsprung{
  display:inline-block;font-size:16px;font-weight:600;color:var(--aubergine);
  border-bottom:1.5px solid rgba(58,35,80,.3);padding-bottom:3px}
.va .wegkarte .wegsprung:hover{border-bottom-color:var(--aubergine)}
/* Die 360-Karte traegt einen Hauch ihrer eigenen Welt, ohne die Seite
   an dieser Stelle schon umzufaerben. */
.va .wegkarte.ist360{background:#faf8fb;border-color:#ece5ef}

/* --- Der vollbreite 360-Bereich ---------------------------------- */
/* Die Navigationsleiste ist 74px hoch und klebt oben - ohne
   scroll-margin landet das Sprungziel darunter. */
.va #neukundenaufnahme{scroll-margin-top:84px}
.va .s360{
  position:relative;overflow:hidden;color:var(--aubergine-text);
  background:var(--aubergine);padding:clamp(54px,7.5vh,96px) 0;
  scroll-margin-top:84px}
.va .s360 .wrap{position:relative;z-index:1}
.va .s360 .profil{max-width:62ch;margin:0 0 clamp(34px,4.6vh,56px)}
.va .s360 .profil p{
  font-size:16.5px;line-height:1.6;color:rgba(241,236,243,.78);margin:0 0 12px}
.va .s360 .profil .profil-leit{
  font-size:18.5px;line-height:1.5;font-weight:600;
  color:var(--aubergine-text);margin:0 0 16px}

.va .s360 .wegkarte.dunkel{
  background:rgba(255,255,255,.06);border:1px solid rgba(241,236,243,.16)}
.va .s360 .wegkarte.dunkel h3,
.va .s360 .wegkarte.dunkel .wegsatz{color:var(--aubergine-text)}
.va .s360 .wegkarte.dunkel p{color:rgba(241,236,243,.78)}
.va .s360 .wegkarte.dunkel .wegliste{color:rgba(241,236,243,.6)}
.va .s360 .bereichsliste{
  margin:4px 0 14px;padding:0 0 0 18px;
  font-size:16px;line-height:1.7;color:rgba(241,236,243,.78)}
.va .s360 .bereichsliste li{margin:0}

.va .s360 .fragkopf{
  font-family:var(--sans);font-size:clamp(24px,2.8vw,36px);line-height:1.15;
  letter-spacing:-.025em;font-weight:600;color:var(--aubergine-text);
  margin:clamp(40px,5.4vh,72px) 0 clamp(18px,2.4vh,28px)}
.va .s360 .fragen{
  display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(18px,2.2vw,28px)}
.va .s360 .fragsatz{
  font-size:clamp(17px,1.6vw,21px);line-height:1.4;letter-spacing:-.012em;
  color:var(--aubergine-text);margin:0;
  padding:14px 18px;border-radius:15px;
  background:rgba(255,255,255,.06);border:1px solid rgba(241,236,243,.14)}
.va .s360 .fragschluss{
  font-size:16.5px;line-height:1.6;color:rgba(241,236,243,.78);
  margin:clamp(18px,2.4vh,28px) 0 0;max-width:62ch}

.va .s360 .radar-leit{
  font-size:18px;line-height:1.55;color:var(--aubergine-text);
  margin:0 0 18px;max-width:62ch}
.va .s360 .radar-kette{
  font-size:16px;line-height:1.9;color:rgba(241,236,243,.78);margin:0;
  max-width:62ch}
.va .s360 .radar-kette span{color:rgba(241,236,243,.5);padding:0 4px}
.va .s360 .alpha{margin-top:clamp(34px,4.6vh,56px)}

@media(max-width:820px){
  .va .wegkarten{grid-template-columns:1fr}
  .va .s360 .fragen{grid-template-columns:1fr}
}
@media(max-width:700px){
  .va .s360 .gross360{font-size:clamp(180px,52vw,300px);opacity:.06}
}

/* --- Drei Seiten, 24.09.2026 --------------------------------------
   Der Hero ohne Aktion braucht unten weniger Luft: Die Weiche soll
   dicht darunter stehen, damit die Entscheidung im ersten Bild liegt. */
.va .kopf.ohneaktion{padding-top:clamp(22px,3.4vh,44px);
                     padding-bottom:clamp(8px,1.2vh,18px)}
.va .kopf.ohneaktion .erklaerung{margin-top:6px}

/* Die ganze Karte ist der Link. Deshalb `a`: ein Link IN einer Karte,
   die selbst Link ist, waere ungueltiges HTML und fuer die Tastatur ein
   zweites Ziel am selben Ort. */
.va a.wegkarte{
  color:inherit;text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.va a.wegkarte:hover{
  border-color:#e0d5e8;box-shadow:0 10px 30px rgba(58,35,80,.08);
  transform:translateY(-2px)}
.va a.wegkarte:focus-visible{outline:2px solid var(--knopf-kontur);outline-offset:3px}

/* Drei Stationen in der linken Karte - dieselben Strichsymbole wie in
   der Vertrauenszeile, kein neues Bildvokabular. */

/* Die Breite von Spido: das Markenzeichen und vier Felder darum. Kein
   Diagramm - vier Beschriftungen, die zeigen, worum es geht. */
.va .rundum{
  display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;
  gap:8px 10px;margin:18px 0 6px}
.va .rundum .mitte{
  grid-row:span 2;display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:#efe7f2;color:var(--aubergine)}
.va .rundum .mitte svg{width:26px;height:26px;display:block}
.va .rundum .feld{
  font-size:15px;color:var(--text);background:#fff;
  border:1px solid #ece5ef;border-radius:999px;padding:7px 13px;
  text-align:center}

/* Ueber Spido: drei Merkmale, flach. Nach der Kartenoekonomie sind das
   keine Karten - sie tragen keine eigene Aktion. */
.va .ueberspido{padding:clamp(34px,5vh,70px) var(--pad) clamp(40px,6vh,86px)}
.va .ueberspido .abschnitt-sub{max-width:68ch;margin-bottom:clamp(26px,3.6vh,44px)}
.va .dreikarten{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.va .merkmal h3{
  font-family:var(--sans);font-size:20px;line-height:1.25;letter-spacing:-.018em;
  font-weight:650;color:var(--dunkel);margin:0 0 8px}
.va .merkmal p{font-size:16.5px;line-height:1.55;color:var(--text);margin:0}
.va .merkmal{border-top:2px solid #e8dfef;padding-top:16px}

@media(max-width:820px){
  .va .dreikarten{grid-template-columns:1fr;gap:clamp(16px,2.6vh,26px)}
  .va .rundum{grid-template-columns:auto 1fr}
  .va .rundum .mitte{grid-row:span 4}
}

/* --- Produktkarten, dritte Fassung 24.09.2026 ---------------------
   Zurueck zur Weiche: zwei gleichwertige, ruhige Karten. 50/50, gleiche
   Hoehe, gleiche Polsterung, derselbe Umrissknopf. Die Inhaltsmenge ist
   so austariert, dass beide von sich aus aehnlich viel Platz brauchen -
   Leerraum nur zum Ausgleichen waere die schlechtere Loesung. */
.va .wegkarten{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,2.2vw,28px);align-items:stretch}
.va .wegkarte{padding:clamp(18px,1.8vw,22px)}
.va .wegkarte.ist360{background:var(--lavendel);border-color:#ece7f5}

.va .wegkarte .nebensatz{font-size:15.5px;color:var(--leise);margin:-6px 0 0}
.va .wegkarte .kleinkopf{
  display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--leise);margin:14px 0 8px}

/* Eine Zeile: Unterlagen und Ton, Spido, Dokumentation. */
.va .wegkarte .zu{color:#cfc4bb;font-size:16px}

/* Die fuenf Dokumente kompakt - zwei Zeilen, Namen fett, Blatt davor. */
.va .wegkarte .dokzeile{display:flex;flex-wrap:wrap;gap:7px 13px}
.va .wegkarte .dok{
  display:inline-flex;align-items:center;gap:6px;
  font-size:15.5px;color:var(--text)}
.va .wegkarte .dok svg{width:16px;height:16px;flex:0 0 16px;color:var(--violet-600)}
.va .wegkarte .dok b{font-weight:700;color:var(--dunkel)}

/* Vier Begriffe, sehr hell. */
.va .wegkarte .pills{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.va .wegkarte .pill{
  background:#fff;border:1px solid #ece5ef;border-radius:999px;
  padding:8px 14px;font-size:15px;color:var(--text)}

/* Ein Beispiel, keine Antwort. */
.va .wegkarte .zeichen{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:#efe7f2;color:var(--aubergine)}
.va .wegkarte .zeichen svg{width:15px;height:15px;display:block}

.va .wegkarte .fussnote{
  font-size:15px;line-height:1.45;color:var(--leise);margin:10px 0 0}

/* Derselbe Umrissknopf in beiden Karten - keine darf wichtiger wirken. */
.va .wegkarte .wegknopf{
  display:inline-flex;margin:auto 0 0;
  font-size:17px;font-weight:650;padding:13px 24px;
  border-radius:14px;background:var(--knopf-flaeche);
  border:2px solid var(--knopf-kontur);color:var(--knopf-kontur);
  transition:background .18s ease,color .18s ease}
.va .wegkarte .wegknopf .txt{display:inline-flex;gap:9px;align-items:center}
.va .wegkarte .wegknopf .pfeil{
  display:inline-block;transition:transform .2s cubic-bezier(.3,.7,.4,1)}
.va a.wegkarte:hover .wegknopf{background:var(--knopf-kontur);color:var(--knopf-auf)}
.va a.wegkarte:hover .wegknopf .pfeil{transform:translateX(5px)}
/* Die Luft ueber dem Knopf gehoert an das Element darueber - ein
   `margin-top` am Knopf schlaegt das `auto` und er rutscht nach oben. */
.va .wegkarte .fussnote{margin-bottom:clamp(10px,1.3vh,14px)}

/* --- Ueber Spido: vollbreit, dann drei Spalten -------------------- */
.va .ueberspido .breittext{
  font-size:19px;line-height:1.6;color:var(--text);
  margin:0 0 clamp(28px,4vh,48px);max-width:none}

@media(max-width:820px){
  .va .wegkarten{grid-template-columns:1fr}
}

/* --- Symbol am Absatz, wechselnde Frage, 24.09.2026 ---------------
   Das Symbol vor dem Text ist kein Bauteil - es schwimmt im Absatz und
   traegt keine eigene Flaeche. */
.va .wegkarte .mitikon .ikon{
  float:left;display:inline-flex;margin:2px 9px 0 0;color:var(--leise)}
.va .wegkarte .mitikon .ikon svg{width:19px;height:19px;display:block}

.va .wegkarte .starkzeile{
  font-size:16.5px;line-height:1.4;font-weight:650;color:var(--aubergine);
  margin:2px 0 0}

/* Eine Frage, gross und frei stehend - keine Box, kein Verlauf.
   Die Mindesthoehe traegt die laengste Frage, damit beim Wechsel nichts
   springt. */
/* Die Frage bleibt gross - nur die Luft um ihre Anrede wird nach
   Vorgabe gesetzt: rund 36 px ueber dem Kleinkopf, 16 px darunter
   (bisher 32 und 8). */
.va .fragwechsel{margin:22px 0 0}
.va .fragwechsel .kleinkopf{margin:14px 0 16px}
.va .grossefrage{
  font-family:var(--sans);
  font-size:clamp(18px,1.8vw,23px);line-height:1.32;letter-spacing:-.018em;
  font-weight:600;color:var(--aubergine);margin:0 0 10px;
  min-height:4.2em;
  transition:opacity .4s ease,transform .4s ease}
.va .grossefrage.aus{opacity:0;transform:translateY(8px)}
.va .fragfuss{
  font-size:15px;line-height:1.5;color:var(--leise);margin:0}

/* --- Dieselbe Frage, gross, auf der 360-Seite --------------------- */
.va .zeichen.gross{width:38px;height:38px;flex:0 0 38px;margin-top:4px}
.va .zeichen.gross svg{width:21px;height:21px}
.va .grossefrage.weit{
  font-size:clamp(22px,2.8vw,38px);line-height:1.26;min-height:3.4em;
  color:var(--dunkel);max-width:22ch;margin:0}

@media(max-width:820px){
  .va .grossefrage{min-height:5.4em}
  .va .grossefrage.weit{min-height:4.6em;max-width:none}
}

/* --- Stimmen als Kartenstapel, 24.09.2026 ------------------------
   Kraeftige Farben, echte Portraits, leicht schraeg und ueberlappend.
   Keine Bildlaufleiste: geschoben wird mit Finger, Trackpad und Maus.
   Die Farben kommen aus der vorhandenen Palette - Violett und das dunkle
   Spido-Gruen -, nur diesmal als Flaeche statt als Akzent. Dieser eine
   Abschnitt darf bunter sein als alles darueber. */
.va .stimmen{padding:clamp(40px,6vh,86px) 0 clamp(44px,6.5vh,96px)}
.va .stimmen .breittext{
  font-size:19px;line-height:1.6;color:var(--text);margin:0 0 6px;max-width:68ch}

.va .stimmenbahn{
  --achse:calc(max(0px, (100vw - 1120px) / 2) + var(--pad));
  --zug:0;
  display:flex;gap:0;
  margin:clamp(30px,4.4vh,56px) 0 0;
  padding:26px var(--pad) 30px var(--achse);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-left:var(--achse);
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  /* Keine Leiste: sie macht aus dem Stapel wieder ein Bedienelement. */
  scrollbar-width:none;-ms-overflow-style:none}
.va .stimmenbahn::-webkit-scrollbar{display:none}
.va .stimmenbahn.zieht{cursor:grabbing;scroll-snap-type:none}

/* 25.09.2026: breiter und flacher. 78 % der Contentbreite, Foto 39 %,
   Text 61 %. Keine feste Proportion mehr - die Hoehe folgt dem Inhalt,
   damit ein langes Zitat nie abgeschnitten wird. Gleich hoch sind die
   Karten trotzdem: die Bahn streckt alle auf die hoechste. Das Beschneiden
   der Ecken macht die Bildseite, nicht die Karte. */
.va .stimme{
  scroll-snap-align:start;
  flex:0 0 min(calc(min(100vw, 1120px) * .78), 100%);min-width:0;
  display:grid;grid-template-columns:39% 61%;
  min-height:clamp(280px,25vw,340px);
  border-radius:26px;
  box-shadow:0 18px 40px rgba(31,28,26,.13);
  transition:transform .28s cubic-bezier(.3,.7,.4,1),
             box-shadow .28s ease}
/* Leicht schraeg und ueberlappend - wie Karten, die uebereinanderliegen. */
.va .stimme:nth-child(odd){transform:rotate(-1.5deg)}
.va .stimme:nth-child(even){transform:rotate(1.5deg)}
.va .stimme:nth-child(3n){transform:rotate(-1deg)}
.va .stimme + .stimme{margin-left:-3.5%}
.va .stimme:hover{z-index:2;box-shadow:0 22px 52px rgba(31,28,26,.18)}
/* Beim Ziehen richten sich die Karten auf und neigen sich in die
   Zugrichtung. */
.va .stimmenbahn.zieht .stimme{
  transition:none;
  transform:rotate(calc(var(--zug) * -0.9deg))}

.va .stimme .bildseite{
  position:relative;overflow:hidden;border-radius:26px 0 0 26px}
/* Absolut, damit das Foto die Kartenhoehe nicht mitbestimmt - die
   bestimmt allein der Text. */
.va .stimme .portrait{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 28%;
  display:block;user-select:none;-webkit-user-drag:none}
.va .stimme .wortseite{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,3vw,46px)}
.va .stimme .zitat{
  font-family:var(--sans);
  font-size:clamp(22px,2.2vw,31px);line-height:1.16;letter-spacing:-.026em;
  font-weight:650;margin:0 0 16px}
.va .stimme .dazu{
  font-size:16.5px;line-height:1.55;margin:0 0 22px;opacity:.86}
.va .stimme .wer{
  display:flex;flex-direction:column;gap:2px;font-size:15.5px;margin:0}
.va .stimme .wer b{font-weight:700}
.va .stimme .wer span{opacity:.72}

/* Zwei kraeftige Welten, beide aus der vorhandenen Palette. */
/* Terrakotta und Salbei - beide stehen seit jeher im Token-Satz, hier
   zum ersten Mal als Flaeche. Die Schriftfarbe folgt dem Kontrast: auf
   dem warmen Orange weiss, auf dem hellen Gruen das dunkle Warmgrau. */
.va .stimme.violett{background:var(--spido-terracotta-tief);color:#fff}
.va .stimme.violett .bildseite{background:var(--spido-terracotta-hell)}
.va .stimme.gruen{background:var(--spido-salbei);color:var(--dunkel)}
.va .stimme.gruen .bildseite{background:var(--spido-salbei-050)}
.va .stimme.gruen .dazu{opacity:.78}
.va .stimme.gruen .wer span{opacity:.66}

.va .stimmenkontakt{
  display:flex;align-items:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap;
  margin-top:clamp(26px,3.6vh,46px)}
.va .stimmenkontakt p{font-size:17px;color:var(--text);margin:0}
.va .schreibknopf{
  display:inline-flex;font-size:16px;font-weight:650;padding:11px 22px;
  border-radius:13px;background:var(--knopf-flaeche);
  border:2px solid var(--knopf-kontur);color:var(--knopf-kontur);
  transition:background .18s ease,color .18s ease}
.va .schreibknopf .txt{display:inline-flex;gap:9px;align-items:center}
.va .schreibknopf .pfeil{
  display:inline-block;transition:transform .2s cubic-bezier(.3,.7,.4,1)}
.va .schreibknopf:hover{background:var(--knopf-kontur);color:var(--knopf-auf)}
.va .schreibknopf:hover .pfeil{transform:translateX(5px)}

/* Gedruckt wird nicht geschoben - sonst faehlen die Stimmen ganz. */
@media print{
  .va .stimmenbahn{display:block;overflow:visible;padding-left:0;padding-right:0}
  .va .stimme{
    flex:none;width:auto;margin:0 0 18px;transform:none;
    aspect-ratio:auto;break-inside:avoid}
}

@media(max-width:820px){
  .va .stimme{
    flex-basis:86%;grid-template-columns:1fr;aspect-ratio:auto;
    margin-left:0}
  .va .stimme + .stimme{margin-left:-2%}
  .va .stimme .bildseite{height:220px;border-radius:26px 26px 0 0}
  .va .stimme:nth-child(odd){transform:rotate(-1deg)}
  .va .stimme:nth-child(even){transform:rotate(1deg)}
}
@media(prefers-reduced-motion: reduce){
  .va .stimme{transform:none !important;transition:none}
}

/* --- Spido 360 Grad als eigene Welt, 24.09.2026 -------------------
   Dieselbe Karte, dieselbe Groesse, derselbe Text - nur traegt sie jetzt
   ihre eigene Farbe. Aubergine statt des Standard-Lilas, und dahinter
   das Produktzeichen als reine Grafik: sehr gross, durchscheinend, vom
   Kartenrand angeschnitten. */
.va .wegkarte.ist360{position:relative;overflow:hidden;isolation:isolate}
.va .wegkarte.ist360 > *:not(.welt360){position:relative;z-index:1}
.va .welt360{
  position:absolute;top:-.22em;right:-.12em;z-index:0;pointer-events:none;
  font-family:var(--sans);font-weight:700;letter-spacing:-.05em;
  font-size:clamp(190px,26vw,330px);line-height:.78;
  color:var(--aubergine);opacity:.07;user-select:none;
  transition:transform .5s cubic-bezier(.3,.7,.4,1),opacity .5s ease}
.va a.wegkarte.ist360:hover .welt360{
  transform:rotate(-5deg) scale(1.04);opacity:.1}

/* Ueberschrift und Zeichen der Welt folgen ihrer Farbe. */
.va .wegkarte.ist360 h3{color:var(--aubergine)}
.va .wegkarte.ist360 .zeichen{
  transition:transform .35s cubic-bezier(.3,.7,.4,1)}
.va a.wegkarte.ist360:hover .zeichen{transform:scale(1.12) rotate(-8deg)}

/* Die wechselnde Frage traegt die Karte - also darf sie groesser sein. */
.va .wegkarte.ist360 .grossefrage{
  font-size:clamp(20px,2.1vw,27px);line-height:1.24;letter-spacing:-.022em;
  font-weight:650;color:var(--aubergine)}

/* Der Knopf vollflaechig in der Farbe der Welt. */
.va .wegkarte.ist360 .wegknopf{
  background:var(--aubergine);border-color:var(--aubergine);color:#fff}
.va a.wegkarte.ist360:hover .wegknopf{
  background:var(--spido-aubergine);border-color:var(--spido-aubergine);
  color:#fff;filter:brightness(1.18)}

/* Eine einzelne Stimme braucht keinen Anschnitt - sie steht fuer sich. */
.va .stimmenbahn:has(.stimme:only-child){padding-right:var(--achse)}

/* =====================================================================
   Seite Spido 360 Grad - 24.09.2026, neu erzaehlt

   Der Rhythmus traegt die Aussage: Aubergine, hell, creme, Aubergine,
   hell, Flieder, hell, Aubergine. Keine Kastenwueste - gewechselt wird
   zwischen freier Typografie, Farbflaechen, Dokumenten und ganz wenigen
   Karten. Uebergeordnete Saetze laufen ueber die volle Inhaltsbreite;
   schmal wird es nur, wo das Lesen es verlangt.
   ===================================================================== */

/* --- Wiederkehrendes --------------------------------------------- */
.va .breit{padding:clamp(40px,6vh,86px) var(--pad)}
.va .breittext{
  font-size:19px;line-height:1.62;color:var(--text);margin:0 0 22px;max-width:none}
.va .breit .abschnitt{margin-bottom:16px}
.va h2.abschnitt.klein{font-size:clamp(23px,2.4vw,32px)}
.va .kleinkopf{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;
  color:var(--leise);margin:0 0 14px}
.va .kleinkopf.hell{color:rgba(241,236,243,.68)}
.va .zeichen{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  background:#efe7f2;color:var(--aubergine)}
.va .zeichen svg{width:16px;height:16px;display:block}
.va .zeichen.gross{width:42px;height:42px;flex:0 0 42px}
.va .zeichen.gross svg{width:23px;height:23px}
.va .kleinkopf.hell .zeichen{background:rgba(241,236,243,.16);color:#fff}

/* --- Hero und Abschluss: die Welt in ihrer Farbe ------------------ */
.va .h360,.va .abschluss360{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--aubergine);color:var(--aubergine-text)}
.va .h360{padding:clamp(54px,9vh,120px) 0 clamp(50px,8vh,104px)}
.va .abschluss360{padding:clamp(50px,8vh,110px) 0}
.va .h360 .wrap,.va .abschluss360 .wrap{position:relative;z-index:1;padding:0 var(--pad)}
.va .welt360{
  position:absolute;top:-.24em;right:-.1em;z-index:0;pointer-events:none;
  font-family:var(--sans);font-weight:700;letter-spacing:-.05em;
  font-size:clamp(230px,32vw,520px);line-height:.78;
  color:#fff;opacity:.06;user-select:none}
.va .label360{
  display:inline-block;font-size:15px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(241,236,243,.72);margin:0 0 18px}
.va h1.riesig,.va h2.riesig{
  font-family:var(--sans);
  font-size:clamp(40px,6.4vw,92px);line-height:1.02;letter-spacing:-.036em;
  font-weight:600;color:var(--aubergine-text);margin:0 0 14px}
.va .unter360{
  font-size:clamp(19px,2.1vw,27px);line-height:1.4;
  color:rgba(241,236,243,.82);margin:0 0 clamp(30px,4.6vh,58px);max-width:34ch}
.va .abschluss360 .unter360{max-width:60ch;margin-bottom:clamp(26px,3.6vh,42px)}
.va .fragzeile{display:flex;align-items:flex-start;gap:16px}
.va .riesefrage{
  font-family:var(--sans);
  font-size:clamp(24px,3.4vw,50px);line-height:1.2;letter-spacing:-.028em;
  font-weight:600;color:var(--aubergine-text);margin:0;max-width:26ch;
  min-height:4.9em;
  transition:opacity .45s ease,transform .45s ease}
.va .riesefrage.aus{opacity:0;transform:translateY(10px)}
/* Der helle Knopf auf dunklem Grund - die Umkehr des ueblichen. */
.va .abschluss360 .btn.hell{
  display:inline-flex;font-size:17px;font-weight:650;padding:15px 28px;
  border-radius:14px;background:#fff;border:2px solid #fff;
  color:var(--aubergine);
  transition:background .18s ease,color .18s ease}
.va .abschluss360 .btn.hell .txt{display:inline-flex;gap:9px;align-items:center}
.va .abschluss360 .btn.hell .pfeil{
  display:inline-block;transition:transform .2s cubic-bezier(.3,.7,.4,1)}
.va .abschluss360 .btn.hell:hover{background:transparent;color:#fff}
.va .abschluss360 .btn.hell:hover .pfeil{transform:translateX(5px)}

/* --- Drei Prinzipien: Zahlen statt Karten ------------------------- */
.va .prinzipien{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,54px);
  margin:clamp(24px,3.4vh,44px) 0 0}
.va .prinzip .zahl{
  display:block;font-family:var(--sans);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(48px,5.4vw,78px);line-height:1;color:var(--aubergine);
  opacity:.22;margin:0 0 6px}
.va .prinzip h3{
  font-family:var(--sans);font-size:clamp(20px,2vw,25px);line-height:1.22;
  letter-spacing:-.02em;font-weight:650;color:var(--dunkel);margin:0 0 8px}
.va .prinzip p{font-size:17px;line-height:1.55;color:var(--text);margin:0}

/* --- Flaechen ----------------------------------------------------- */
.va .creme{background:var(--creme-2);padding:clamp(44px,6.5vh,92px) 0}
.va .flieder{background:var(--lavendel);padding:clamp(44px,6.5vh,92px) 0}
.va .creme .wrap,.va .flieder .wrap{padding:0 var(--pad)}

/* --- Themenlandschaft: Gewicht statt Raster ----------------------- */
.va .landschaft{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(10px,1.4vw,18px);margin:clamp(20px,3vh,38px) 0 0}
.va .thema{
  background:#fff;border-radius:999px;color:var(--text);
  border:1px solid #efe7ea;line-height:1.25}
.va .thema.gross{
  font-size:clamp(20px,2.2vw,29px);font-weight:650;color:var(--aubergine);
  padding:16px 28px;letter-spacing:-.018em}
.va .thema.mittel{font-size:17.5px;padding:12px 20px}
.va .thema.klein{font-size:15.5px;padding:10px 17px;color:var(--leise)}

/* --- Der Bruch ----------------------------------------------------- */
.va .bruch360{
  background:var(--aubergine);color:var(--aubergine-text);
  padding:clamp(52px,8vh,110px) 0;margin:clamp(20px,3vh,40px) 0}
.va .bruch360 .wrap{padding:0 var(--pad)}
.va .bruch360 .riesefrage{max-width:30ch;min-height:5.2em}
.va .bruchsatz{
  font-size:17.5px;line-height:1.55;color:rgba(241,236,243,.72);
  margin:clamp(20px,2.6vh,32px) 0 0;max-width:62ch}

/* --- Das Beispiel -------------------------------------------------- */
.va .beispiel360{padding:clamp(30px,4.6vh,64px) var(--pad) clamp(40px,6vh,86px)}
.va .spidofrage{
  display:flex;align-items:flex-start;gap:12px;
  font-size:clamp(20px,2.3vw,30px);line-height:1.26;letter-spacing:-.02em;
  font-weight:600;color:var(--aubergine);margin:0 0 10px}
.va .spidofrage.klein{font-size:18px;font-weight:600}
.va .antwort360{
  font-size:18px;line-height:1.4;color:var(--text);margin:0 0 6px;
  padding-left:40px}
.va .strecke360{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:clamp(20px,3vh,34px) 0 0}
.va .strecke360 .stufe,.va .hilfekette .stufe{
  background:#fff;border:1px solid #ece5ef;border-radius:999px;
  padding:10px 18px;font-size:16px;color:var(--text)}
.va .strecke360 .stufe.spido{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--aubergine);border-color:var(--aubergine);color:#fff}
.va .strecke360 .stufe.spido svg{width:18px;height:18px}
.va .strecke360 .zu,.va .hilfekette .zu{color:#c8bcd0;font-size:20px;line-height:1}
.va .ergebnisse{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:14px 0 0}
.va .dokblatt{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:1px solid #ded3e6;border-radius:12px;
  padding:14px 18px;font-size:16px;color:var(--text);
  box-shadow:0 2px 8px rgba(58,35,80,.06)}
.va .dokblatt svg{width:18px;height:18px;flex:0 0 18px;color:var(--aubergine)}
.va .dokblatt b{font-weight:650;color:var(--dunkel)}
.va .dokblatt.gross{max-width:300px;align-items:flex-start}
.va .dokblatt.fertig{border-color:var(--aubergine)}
.va .nachsatz{margin-top:clamp(22px,3vh,36px)}

/* --- Hilfekette und grosse Aussage --------------------------------- */
.va .hilfekette{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:clamp(18px,2.6vh,30px) 0 0}
.va .grossaussage{
  font-family:var(--sans);
  font-size:clamp(24px,3vw,42px);line-height:1.14;letter-spacing:-.03em;
  font-weight:600;color:var(--aubergine);
  margin:clamp(26px,3.6vh,46px) 0 10px;max-width:22ch}
.va .grossaussage.dunkel{color:var(--dunkel);max-width:none}

/* --- Heute und spaeter --------------------------------------------- */
.va .dannjetzt{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);
  margin:clamp(24px,3.4vh,44px) 0 0}

/* --- Bereiche des Profils ------------------------------------------ */
.va .bereiche{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0}
.va .bereich{
  background:#fff;border:1px solid #ece5ef;border-radius:999px;
  padding:10px 17px;font-size:16px;color:var(--text)}

/* --- Aus Vorlage wird Dokument ------------------------------------- */
.va .mischung{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;gap:clamp(12px,1.8vw,24px);
  margin:clamp(22px,3vh,40px) 0 clamp(24px,3.4vh,42px)}
.va .mischung .teil{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.va .mischung .plus{
  font-size:clamp(22px,2.6vw,34px);font-weight:600;color:var(--aubergine);
  opacity:.45}

.va .formate{
  font-size:clamp(20px,2.2vw,28px);font-weight:650;letter-spacing:.02em;
  color:var(--aubergine);margin:6px 0 0}
.va .kette{font-size:17px;line-height:1.9;color:var(--text);margin:8px 0 0}
.va .kette span{color:var(--aubergine);opacity:.5;padding:0 6px}

@media(max-width:980px){
  .va .prinzipien{grid-template-columns:1fr;gap:clamp(20px,3vh,32px)}
  .va .mischung{grid-template-columns:1fr;justify-items:start}
  .va .mischung .plus{justify-self:center}
}
@media(max-width:820px){
  .va .dannjetzt{grid-template-columns:1fr}
  .va .riesefrage{min-height:5.2em}
  .va .bruch360 .riesefrage{min-height:4.4em}
  .va .thema.gross{font-size:19px;padding:13px 20px}
}

/* --- Die beiden Motive der Weiche, 24.09.2026 ---------------------
   Links Verwandlung: Unterlagen, ein Spido-Moment, echte Dokumente.
   Rechts Dialog: Frage, Wissen, Unterstuetzung. Gleichwertig, aber
   nicht gleichfoermig - deshalb bekommt links das kraeftige Violett,
   was rechts das Aubergine ist. */

/* Der Moment dazwischen ist eine Querzeile, kein eigener Abschnitt:
   ein Kreis von 44 px, die Zeile insgesamt unter 56 px. Der stehende
   Block davor war 119 px hoch und machte die Karte unnoetig lang. */
.va .wegkarte .momentzeile{
  display:flex;align-items:center;gap:13px;
  margin:clamp(9px,1.1vh,12px) 0 clamp(7px,.9vh,10px);
  font-size:15.5px;line-height:1.35;color:var(--leise)}
.va .wegkarte .momentzeichen{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  background:var(--lavendel-cta);color:var(--violet-600);
  box-shadow:0 0 0 7px rgba(109,40,217,.05);
  transition:transform .35s cubic-bezier(.3,.7,.4,1),box-shadow .35s ease}
.va .wegkarte .momentzeichen svg{width:23px;height:23px;display:block}
.va a.wegkarte:hover .momentzeichen{
  transform:scale(1.08) rotate(-8deg);box-shadow:0 0 0 11px rgba(109,40,217,.07)}

/* Das Ergebnis: links der Stapel, rechts die Namen. */
.va .wegkarte .ergebnis{
  display:flex;align-items:center;gap:clamp(20px,2.4vw,30px);margin:0}
/* Der Kasten ist breiter als das Blatt: der schraege Stapel braucht
   den Rand, sonst steht das hinterste Blatt im Text daneben. */
.va .wegkarte .dokstapel{
  position:relative;flex:none;width:118px;height:146px}
/* Der Stapel ist dieselbe Zeichnung wie auf der Unterseite, nur auf
   45 Prozent verkleinert und ein wenig gedreht. */
.va .wegkarte .dokstapel .sf-stapel{
  /* 10 px tiefer, weil die Drehung um die obere linke Ecke das Blatt
     sonst ueber den Kasten hinaus nach oben hebt. */
  position:absolute;top:7px;left:0;width:326px;
  transform:scale(.34) rotate(-4.5deg);transform-origin:top left;
  transition:transform .35s cubic-bezier(.3,.7,.4,1)}
.va a.wegkarte:hover .dokstapel .sf-stapel{transform:scale(.35) rotate(-2.6deg)}
/* Klein, aber auffaellig: staerkere Schraege und ein deutlicher Faecher
   hinten. Die Werte gelten nur in dieser Karte, die Unterseite bleibt. */
.va .wegkarte .dokstapel .sf-blatt.b4{--r:-6.5deg}
.va .wegkarte .dokstapel .sf-blatt.b3{--r:-4.2deg}
.va .wegkarte .dokstapel .sf-blatt.b2{--r:-2.1deg}
.va .wegkarte .dokstapel .sf-blatt.b1{--r:.5deg}
/* Ein sehr zarter violetter Schein dahinter. */
.va .wegkarte .dokstapel::before{
  content:"";position:absolute;left:3px;top:14px;width:102px;height:116px;
  border-radius:24px;background:radial-gradient(
     ellipse at 40% 45%, rgba(109,40,217,.16), rgba(109,40,217,0) 68%);
  filter:blur(6px);z-index:0}

.va .wegkarte .doknamen{flex:1;min-width:0}
.va .wegkarte .doknamen h4{
  font-family:var(--sans);font-size:clamp(19px,1.9vw,23px);line-height:1.2;
  letter-spacing:-.02em;font-weight:650;color:var(--dunkel);margin:0 0 6px}
/* Zwei Zeilen statt fuenf: fuenf Zeilen mit Blattzeichen waren 237 px
   hoch und damit hoeher als der Stapel daneben - sie bestimmten die
   Hoehe der ganzen Karte. */
.va .wegkarte .dokliste{
  font-size:15.5px;line-height:1.5;color:var(--dunkel);font-weight:650;
  margin:0}
.va .wegkarte .dokliste i{
  font-style:normal;color:var(--violet-600);opacity:.55;padding:0 3px}
.va .wegkarte .dokliste sup{font-size:.62em;vertical-align:super}

@media(max-width:1100px){
  .va .wegkarte .ergebnis{flex-direction:column;align-items:flex-start}
  .va .wegkarte .dokstapel{align-self:center}
}

/* ===================================================================
   Sechs Momente - Seite Spido 360 Grad, 24.09.2026
   -------------------------------------------------------------------
   Bewegung hat hier eine Bedeutung, sonst faellt sie weg:
     Tippen            man spricht mit Spido, wie man reden wuerde
     wechselnde Wolke  da ist viel Wissen, mehr als eine Liste
     wechselnde Frage  die Karte steht fuer alles, was man fragen kann
     Antwort, Treffer  eine Auskunft, drei Ergebnisse
     Dokumentwandel    aus der Vorlage wird euer Dokument
   Am Ende jeder Gruppe steht der ruhige Endzustand fuer alle, die
   Bewegung abgewaehlt haben - er steht auch ohne Skript im HTML.
   =================================================================== */

/* --- 1 Hero: leichter, das Zeichen dahinter fast nur noch geahnt --- */
.va .h360.leicht{
  min-height:72vh;display:flex;align-items:center;
  padding:clamp(48px,7vh,86px) 0 clamp(44px,6vh,78px)}
.va .h360.leicht .welt360{opacity:.05;font-size:clamp(210px,28vw,460px)}
.va .h360.leicht .unter360{margin-bottom:clamp(22px,3.2vh,38px)}
/* Als Flex-Kind wuerde der Satzspiegel sonst auf seinen Inhalt
   schrumpfen statt mittig in voller Breite zu stehen. */
.va .h360.leicht > .wrap{width:100%}

/* Die Frage entsteht. Sie wird nicht geloescht, sondern weggewischt -
   Loeschen Buchstabe fuer Buchstabe dauert doppelt so lange und sagt
   nichts. */
.va .tippzeile{display:flex;align-items:flex-start;gap:16px}
.va .tippfeld{
  max-width:26ch;min-height:4.9em;
  clip-path:inset(0 0 0 0);
  transition:clip-path .42s cubic-bezier(.4,0,.2,1),opacity .42s ease}
.va .tippfeld.weg{clip-path:inset(0 0 0 100%);opacity:.2}
.va .cursor{
  display:inline-block;width:3px;height:.92em;margin-left:.1em;
  vertical-align:-.08em;background:currentColor;opacity:.85;
  animation:spidoblink 1.05s steps(1,end) infinite}
@keyframes spidoblink{0%,49%{opacity:.85}50%,100%{opacity:0}}

/* --- 4 Geteilter Schirm: links die Vorfuehrung, rechts die Aussage --
   Eine Antwort, drei Ergebnisse. Das laeuft genau einmal - eine
   Endlosschleife waere Dekoration, keine Aussage. */
.va .demozeile{padding:clamp(34px,5vh,72px) 0 clamp(40px,6vh,86px)}
.va .demoraster{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;padding:0 var(--pad)}
.va .demoschirm{
  background:#fff;border:1px solid #ece5ef;border-radius:22px;
  padding:clamp(22px,2.8vw,34px);
  box-shadow:0 22px 50px -28px rgba(43,26,48,.32)}
.va .demofrage{
  display:flex;align-items:flex-start;gap:12px;
  font-size:clamp(18px,1.9vw,23px);line-height:1.28;letter-spacing:-.018em;
  font-weight:600;color:var(--aubergine);margin:10px 0 12px}
.va .demoantwort{
  font-size:18px;line-height:1.45;color:var(--text);
  margin:0 0 clamp(16px,2.2vh,26px);padding-left:40px;min-height:1.45em}
.va .demoergebnisse{display:flex;flex-direction:column;gap:9px;padding-left:40px}
.va .treffer{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--creme-2);border:1px solid #ece5ef;border-radius:12px;
  padding:11px 15px;font-size:16px;color:var(--text);
  opacity:0;transform:translateY(9px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.3,.7,.4,1)}
.va .treffer.an{opacity:1;transform:none}
.va .treffer::before{
  content:"✓";color:var(--aubergine);font-weight:700;font-size:15px;
  line-height:1;flex:0 0 auto}
.va .treffer svg{width:17px;height:17px;flex:0 0 17px;color:var(--aubergine)}
.va .treffer b{font-weight:650;color:var(--dunkel)}
.va .demoaussage .grossaussage{margin-top:0;max-width:16ch}
.va .demoaussage .nachsatz{max-width:44ch}

/* --- 5 Aus der Vorlage wird euer Dokument --------------------------
   Statt einer Gleichung mit Plus und Gleich: das rechte Blatt liegt
   blass da und wird erst voll, wenn die Merkmale angekommen sind. */
.va .wandel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(14px,2vw,30px);
  margin:clamp(24px,3.2vh,44px) 0 clamp(26px,3.6vh,46px)}
.va .wandel .wandelseite,.va .wandel .wandelmitte{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.va .wandel .merkmale{display:flex;flex-wrap:wrap;gap:8px}
.va .merkmalchip{
  background:#fff;border:1px solid var(--aubergine);border-radius:999px;
  padding:9px 15px;font-size:15.5px;color:var(--aubergine);
  opacity:0;transform:translateX(-10px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.3,.7,.4,1)}
.va .merkmalchip.an{opacity:1;transform:none}
.va .wandel .dokblatt.fertig{
  opacity:.34;transform:translateY(6px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.3,.7,.4,1),
             box-shadow .55s ease}
.va .wandel.fertig .dokblatt.fertig{
  opacity:1;transform:none;
  box-shadow:0 16px 36px -22px rgba(43,26,48,.5)}

@media(max-width:980px){
  .va .demoraster{grid-template-columns:minmax(0,1fr)}
  .va .demoaussage .grossaussage{max-width:none}
  .va .wandel{grid-template-columns:minmax(0,1fr);justify-items:start}
}
@media(max-width:820px){
  .va .h360.leicht{min-height:auto}
  .va .tippfeld{min-height:5.2em}
}

/* Wer Bewegung abgewaehlt hat, sieht ueberall den Endzustand: die erste
   Frage steht, die Begriffe stehen, Antwort und Treffer stehen, das
   Dokument ist fertig. Nichts blinkt, nichts wandert. */
@media(prefers-reduced-motion: reduce){
  .va .cursor{animation:none;opacity:0}
  .va .tippfeld,.va .blatt,.va .demospido,.va .treffer,.va .merkmalchip,
  .va .wandel .dokblatt.fertig{transition:none}
  .va .treffer,.va .merkmalchip{opacity:1;transform:none}
  .va .wandel .dokblatt.fertig{opacity:1;transform:none}
}

/* Im Druck steht alles gleichzeitig da - Zustaende gibt es auf Papier
   nicht, und ein blasses Dokument waere schlicht ein Fehler. */
@media print{
  .va .cursor{display:none}
  .va .treffer,.va .merkmalchip{opacity:1;transform:none}
  .va .wandel .dokblatt.fertig{opacity:1;transform:none}
  .va .demoraster{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   Spido 360 - Politur 25.09.2026
   Der Hero blockiert nicht mehr fast einen ganzen Schirm, das Wissen
   bewegt sich ruhig, und die Flaechen wechseln zwischen Weiss, Creme,
   Flieder und einem hellen Gruen. Aubergine bleibt Anfang und Ende.
   ===================================================================== */

/* --- Hero: rund ein Viertel flacher, das 360 nur noch geahnt ------- */
.va .h360.leicht{
  min-height:52vh;
  padding:clamp(38px,5.4vh,70px) 0 clamp(34px,4.8vh,60px)}
.va .h360.leicht .welt360{opacity:.022}
.va .h360.leicht .unter360{margin-bottom:clamp(18px,2.6vh,30px)}
.va .h360 .tippfeld{
  font-size:clamp(21px,2.5vw,36px);max-width:40ch;min-height:3.7em}
/* Der Cursor begleitet die Eingabe, er drängt sich nicht vor. */
.va .h360 .cursor{width:2px;opacity:.55}

/* --- Flaechen -------------------------------------------------------- */
.va .weiss{background:#fff}
.va .gruenflaeche{background:var(--spido-salbei-050)}
.va .flaeche{padding:clamp(44px,6.5vh,92px) 0}
.va .flaeche .wrap{padding:0 var(--pad)}

/* Der kleine Nachsatz am Ende eines Abschnitts. */
.va .nachtrag{
  font-size:17px;line-height:1.6;color:var(--text);
  margin:clamp(22px,3vh,34px) 0 0;max-width:68ch}
.va .nachtrag b{color:var(--aubergine);font-weight:650}

/* =====================================================================
   Spido 360 - angeglichen an die Neukundenaufnahme, 25.09.2026
   Weniger grosse Bloecke, mehr feine Produktdetails: Haarlinien, kleine
   Ueberschriften, schwebende Blaetter, einzelne Spido-Momente. Die
   grossen Ueberschriften bleiben - filigraner wird ihr Umfeld. Weniger
   Abstand ZWISCHEN den Abschnitten, mehr Luft IN ihnen.
   ===================================================================== */

/* --- Rhythmus ------------------------------------------------------- */
.va .breit{padding:clamp(34px,5vh,70px) var(--pad)}
.va .creme,.va .flieder,.va .flaeche{padding:clamp(38px,5.4vh,76px) 0}
.va .cremeton{background:var(--creme-2)}
/* Organisation und Vorfuehrung stehen auf derselben Flaeche - dazwischen
   kein zweiter Abschnittsabstand. */
.va .demozeile.cremeton{padding-top:0}

/* --- Kleine Ueberschriften wie in der Neukundenaufnahme ------------- */
.va .kleinkopf{color:var(--violet-600);letter-spacing:.14em;font-weight:700}
.va .kleinkopf.hell{color:rgba(241,236,243,.68)}

/* --- Drei Prinzipien: Haarlinie und kleine Ziffer statt Riesenzahl -- */
.va .prinzip{border-top:1px solid #e6dcea;padding-top:18px}
.va .prinzip .zahl{
  font-size:15px;font-weight:700;letter-spacing:.09em;line-height:1;
  color:var(--violet-600);opacity:1;margin:0 0 14px}

/* --- Das Wissensnetz -------------------------------------------------
   Der zentrale Moment der Seite. Oben das Typografie-Spiel: eine Zeile
   normal und dunkel, darunter gross in Aubergine. Darunter das Netz:
   Spido in der Mitte, Fachwissen und der eigene Pflegedienst darum,
   verbunden untereinander - nicht nur sternfoermig.
   Spido ist das einzige kraeftige Element; darum zwei leise Ebenen:
   `pill` (feine Pills) und `punkt` (Wort mit Punkt, in drei Groessen
   s1-s3). Patienten und Mitarbeiter sind Pills wie Hygiene oder QM. Jeder Knoten liegt auf der Flaeche wie ein Ausschnitt
   aus ihr - Linien, die dahinter entlanglaufen, verschwinden sauber. */
.va .netzkopf{
  font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.08;
  margin:clamp(34px,5vh,64px) 0 0}
.va .netzkopf span{display:block}
.va .netzkopf span:first-child{font-size:clamp(24px,2.7vw,38px);color:var(--dunkel)}
.va .netzkopf span:last-child{
  font-size:clamp(42px,5.6vw,80px);color:var(--aubergine);margin-top:6px}
.va .netzunter{
  font-size:17.5px;line-height:1.6;color:var(--leise);max-width:62ch;
  margin:clamp(14px,2vh,22px) 0 0}
.va .netz{
  position:relative;height:clamp(470px,40vw,520px);
  margin:clamp(22px,3.4vh,44px) 0 0}
.va .netz-linien{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.va .netz-linie{
  stroke:var(--aubergine);stroke-width:1;stroke-opacity:.2;opacity:0;
  transition:opacity 1.8s ease,stroke-opacity .7s ease,stroke-width .7s ease}
.va .netz-linie.an{opacity:1}
/* Spido atmet - seine Speichen werden fuer einen Moment kraeftiger. */
.va .netz-linie.puls{stroke-opacity:.5;stroke-width:1.4}
/* Ein Zusammenhang leuchtet auf. */
.va .netz-linie.hell{stroke-opacity:.9;stroke-width:2}
.va .netz.ruhend .netz-linie{transition:none}
.va .netz-mitte{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  background:var(--aubergine);color:#fff;border-radius:999px;
  padding:10px 26px 10px 10px;
  font-size:24px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 0 0 8px rgba(109,40,217,.07),0 12px 36px rgba(76,29,149,.28);
  transition:box-shadow 1.2s ease}
.va .netz-mitte .zeichen{
  width:40px;height:40px;flex:0 0 40px;background:rgba(255,255,255,.16);color:#fff}
.va .netz-mitte .zeichen svg{
  width:23px;height:23px;transition:filter 1.2s ease,transform 1.2s ease}
/* Spido atmet: der Glow weitet sich weich, das Zeichen leuchtet auf. */
.va .netz-mitte.atmet{
  box-shadow:0 0 0 16px rgba(109,40,217,.06),0 14px 54px rgba(124,58,237,.48)}
.va .netz-mitte.atmet .zeichen svg{
  filter:drop-shadow(0 0 5px rgba(255,255,255,.95));transform:scale(1.1)}
.va .netz-knoten{
  position:absolute;left:var(--x);top:var(--y);z-index:1;
  transform:translate(-50%,-50%) translateY(6px);
  white-space:nowrap;line-height:1.3;color:var(--text);
  background:var(--lavendel);border-radius:999px;padding:3px 7px;
  opacity:0;transition:opacity 2s ease,transform 2s ease,color .9s ease,border-color .9s ease}
.va .netz-knoten.an{opacity:1;transform:translate(-50%,-50%)}
.va .netz-knoten.punkt::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--aubergine);opacity:.4;margin-right:8px;vertical-align:.18em;
  transition:opacity .9s ease}
.va .netz-knoten.s1{font-size:17px}
.va .netz-knoten.s2{font-size:16px}
.va .netz-knoten.s3{font-size:15px;color:var(--leise)}
.va .netz-knoten.pill{
  font-size:15.5px;background:#fff;border:1px solid #ddd0e6;padding:5px 12px}
/* Ein Pfad leuchtet: die Woerter werden Aubergine, der Punkt kraeftig. */
.va .netz-knoten.hell{color:var(--aubergine)}
.va .netz-knoten.pill.hell{border-color:rgba(58,35,80,.45)}
.va .netz-knoten.punkt.hell::before{opacity:.95}
.va .netz-funke{
  position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;
  transform:translate(-50%,-50%);color:var(--aubergine);opacity:.3;
  animation:netzfunke 7s ease-in-out infinite}
.va .netz-funke svg{width:100%;height:100%;display:block}
.va .netz-funke:nth-of-type(2){animation-delay:-2.4s}
.va .netz-funke:nth-of-type(3){animation-delay:-4.6s}
@keyframes netzfunke{0%,100%{opacity:.18}50%{opacity:.45}}
@media(max-width:600px){
  .va .netz{height:580px}
  .va .netz-knoten,.va .netz-funke{left:var(--mx);top:var(--my)}
  .va .netz-mitte{font-size:21px;padding:8px 20px 8px 8px;gap:10px}
  .va .netz-mitte .zeichen{width:34px;height:34px;flex:0 0 34px}
  .va .netz-knoten.pill{font-size:15px;padding:4px 10px}
  .va .netz-knoten.s1{font-size:16px}
  .va .netz-knoten.s2,.va .netz-knoten.s3{font-size:15px}
}

/* Die Formate klein unter den Blaettern - kein eigener Abschnitt. */
.va .formate360{
  font-size:15px;letter-spacing:.06em;color:var(--leise);
  margin:clamp(16px,2.4vh,26px) 0 0 40px}
@media(max-width:600px){.va .formate360{margin-left:0}}

/* --- Die Geschichte --------------------------------------------------
   Links gross die Frage, rechts klein, was dann passiert. Eine feine
   Linie haelt den Verlauf zusammen. */
.va .gesch-raster{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:start;
  margin:clamp(26px,4vh,52px) 0 0}
.va .gesch-frage{
  font-family:var(--sans);font-size:clamp(28px,3.4vw,46px);line-height:1.16;
  letter-spacing:-.03em;font-weight:600;color:var(--dunkel);margin:0;max-width:18ch}
.va .gesch-verlauf{
  position:relative;padding:6px 0 0 22px;border-left:1px solid #e6dcea}
.va .gesch-mensch{
  display:inline-block;margin:0 0 18px;padding:8px 15px;
  background:var(--creme-2);border-radius:14px 14px 14px 4px;
  font-size:17px;color:var(--leise);transform:rotate(-1deg)}
.va .gesch-spido{
  display:flex;align-items:center;gap:10px;margin:0 0 20px;
  font-size:19px;font-weight:650;color:var(--aubergine)}
.va .gesch-schritte{list-style:none;margin:0;padding:0}
.va .gesch-schritte li{font-size:17px;line-height:1.4;color:var(--text)}
.va .gesch-schritte li + li::before{
  content:"↓";display:block;color:#c8bcd0;font-size:15px;line-height:1;
  margin:9px 0 9px 2px}
.va .gesch-schluss{margin-top:clamp(34px,5vh,64px);max-width:none}
/* Takt fuer Takt - nur wenn das Skript den Ablauf uebernimmt. */
.va .geschichte.bereit [data-takt]{
  opacity:0;translate:0 8px;
  transition:opacity .7s ease,translate .7s cubic-bezier(.3,.7,.4,1)}
.va .geschichte.bereit [data-takt].an{opacity:1;translate:0 0}
@media(max-width:820px){
  .va .gesch-raster{grid-template-columns:minmax(0,1fr)}
}

/* --- Die Vorfuehrung: keine Box, eine Linie und echte Blaetter ------- */
.va .demoschirm{background:none;border:0;box-shadow:none;padding:0}
.va .demoantwort{position:relative}
.va .demospido{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  margin:0 0 0 40px;padding:6px 15px 6px 7px;border-radius:999px;background:#fff;
  box-shadow:0 6px 20px rgba(60,45,30,.07);
  font-size:16px;font-weight:650;color:var(--aubergine);
  opacity:0;translate:0 8px;transition:opacity .45s ease,translate .45s ease}
.va .demospido.an{opacity:1;translate:0 0}
/* Die feine Linie: von der Antwort zu Spido, von Spido zu den Blaettern. */
.va .demospido::before,.va .demospido::after{
  content:"";position:absolute;left:21px;width:1px;background:#d9cde2}
.va .demospido::before{bottom:100%;height:clamp(12px,1.8vh,20px)}
.va .demospido::after{top:100%;height:clamp(14px,2vh,24px)}
.va .blaetter{
  position:relative;display:flex;align-items:flex-start;
  margin:clamp(14px,2vh,24px) 0 0 40px;min-height:200px}
.va .blatt{
  position:relative;flex:0 0 33%;min-width:0;aspect-ratio:1 / 1.3;
  margin-right:-4%;padding:14px 13px;
  background:#fff;border-radius:9px;box-shadow:0 7px 22px rgba(60,45,30,.09);
  opacity:0;translate:0 10px;transform:rotate(0deg);
  transition:opacity .45s ease,translate .45s ease,transform .7s cubic-bezier(.3,.7,.4,1)}
.va .blatt.an{opacity:1;translate:0 0}
.va .blatt::before{
  content:"";display:block;width:26px;height:3px;border-radius:2px;
  background:var(--aubergine);opacity:.55;margin:0 0 10px}
.va .blatt b{
  display:block;font-size:15px;line-height:1.28;font-weight:650;
  color:var(--dunkel);hyphens:manual;overflow-wrap:break-word;margin:0 0 12px}
.va .blatt i{display:block;height:5px;border-radius:3px;background:#f0ece6;margin:7px 0}
.va .blatt i:last-child{width:62%}
/* Aufgefaechert: jedes Blatt nimmt seine Lage ein. */
.va .blaetter.offen .blatt.b1{transform:rotate(-5deg) translateY(6px)}
.va .blaetter.offen .blatt.b2{transform:rotate(-.5deg);z-index:1}
.va .blaetter.offen .blatt.b3{transform:rotate(4.5deg) translateY(8px);z-index:2}
@media(max-width:600px){
  .va .blaetter{margin-left:0}
  .va .demospido{margin-left:0}
  .va .demospido::before,.va .demospido::after{left:21px}
  .va .blatt{flex-basis:36%;padding:12px 10px}
}

/* --- Heute und spaeter: zwei Spalten an einer Haarlinie ------------- */
.va .dannjetzt .spalte{border-left:1px solid #e6dcea;padding-left:18px}

/* Wer Bewegung abgewaehlt hat, sieht auch hier sofort den Endzustand.
   Diese Regel muss HINTER den Definitionen oben stehen - sonst gewinnen
   deren Uebergaenge bei gleicher Spezifitaet. */
@media(prefers-reduced-motion: reduce){
  .va .netz-knoten,.va .netz-linie,.va .blatt,.va .demospido,
  .va .geschichte [data-takt]{transition:none}
  .va .netz-funke{animation:none}
  .va .netz-mitte,.va .netz-mitte .zeichen svg{transition:none}
}

/* --- Mobilstandard auf den oeffentlichen Seiten, 25.09.2026 --------
   probe-mobil: Seitenrand 16 px, Knopfschrift 17, Touchflaeche 44.
   Nur unter 600 px - der Desktop bleibt, wie er ist. */
@media(max-width:600px){
  .va{--pad:16px}
  .va .navaktion .btn{font-size:17px;padding:10px 16px}
  .va .topnav .marke-logo{min-height:44px}
}