/* ============================================================
   NEXUP Workspace — Verkaufsseite
   Wird NACH werk.css geladen und ergaenzt sie nur.

   WARUM EINE EIGENE DATEI UND NICHT IN werk.css:
   Der Desktop der Startseite ist abgenommen und wird nicht angefasst.
   Solange werk.css unberuehrt bleibt, ist das nicht nur wahrscheinlich,
   sondern beweisbar - die Datei ist byte-identisch. Alles hier gilt nur
   fuer workspace.html.

   Es gibt KEINE neuen Farben, KEINE neue Schrift, KEINE neuen Radien und
   keine neue Abstandsleiter. Jeder Wert unten kommt aus den Marken in
   werk.css. Neu sind nur drei Bauteile, die es auf der Startseite nicht
   gibt und geben muss: das stehende Produktfenster, die Kostenkurve und
   die Preistafel.
   ============================================================ */

/* ============================================================
   Das stehende Produktfenster
   Auf der Startseite stehen drei Fenster als Stapel, absolut gesetzt und
   von js/werk.js gedreht. Hier steht EINES, und es steht still: es zeigt
   kein Portfolio, sondern das Produkt, um das es auf dieser Seite geht.
   Material und Rundung sind dieselben wie bei .fenster.
   ============================================================ */
.pfenster{
  position:relative;width:100%;margin:0;
  border-radius:var(--r-mittel);overflow:hidden;
  background:
    linear-gradient(158deg, rgba(255,255,255,.072), rgba(255,255,255,.018) 46%, rgba(255,255,255,.042)),
    rgba(12,18,27,.72);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 30px 80px -40px rgba(0,0,0,.95);
}
.pfenster-leiste{
  display:flex;align-items:center;gap:var(--raum-2);
  padding:11px 14px;border-bottom:1px solid var(--linie);
  font-size:var(--fs-micro);color:var(--tinte-3);
}
.pfenster-leiste .punkte{display:inline-flex;gap:5px}
.pfenster-leiste .punkte i{width:8px;height:8px;border-radius:var(--r-pille);background:rgba(255,255,255,.16)}
.pfenster-name{flex:1;text-align:center;letter-spacing:.06em;text-transform:uppercase}
.pfenster-bild{display:block;width:100%;height:auto}

/* ---- Die Szene: ein grosses Fenster mit Merkposten daran ----------------
   Zwischenstand, den man kennen sollte: das Fenster war einen Durchgang lang
   angeschraegt, mit Perspektive und einer Neigung, die dem Zeiger folgte.
   Die ANORDNUNG der Merkposten ist daraus geblieben, die Neigung nicht -
   sie machte die Aufnahme schlechter lesbar, und lesbar ist hier wichtiger
   als eindrucksvoll. Das Fenster steht dafuer jetzt gerade und groesser.

   Tiefe entsteht trotzdem, nur ueber Material statt ueber Geometrie: die
   Karten tragen Glas und einen eigenen Wurf und liegen damit sichtbar VOR
   dem Fenster. */
.szene3d{position:relative;margin-top:var(--raum-6)}
.szene3d-koerper{position:relative;padding:44px 0 50px}
.pfenster--gross{
  width:82%;margin-inline:auto;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 60px 120px -50px rgba(0,0,0,1);
}

.merker{display:contents}
.merker-karte{
  position:absolute;z-index:2;padding:15px 20px;border-radius:var(--r-mittel);
  width:min(27%,272px);min-height:94px;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;text-align:left;
  /* Ein eigener Wurf. Ohne ihn liegen die Karten AUF der Aufnahme statt
     davor, und die ganze Anordnung wird flach. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 6px rgba(0,0,0,.36),
    0 26px 50px -22px rgba(0,0,0,.9);
}
.merker-karte b{display:block;font-size:var(--fs-body);font-weight:600;line-height:1.25}
.merker-karte span{display:block;margin-top:4px;font-size:var(--fs-xs);color:var(--tinte-3);line-height:1.45}
/* Sie ueberlappen die Kanten des Fensters, sitzen aber nie mitten auf der
   Aufnahme: bei 1440 laesst das Fenster links und rechts je 124px frei. */
/* Zwei sitzen buendig am Rand, zwei etwas eingerueckt. Stuenden alle vier
   buendig, laesen sich die beiden linken als Spalte statt als Anordnung um
   das Fenster herum. */
.merker--a{top:0;      left:0}
.merker--b{top:12%;    right:2%}
.merker--c{bottom:15%; left:2%}
.merker--d{bottom:0;   right:0}

@media(max-width:1100px){
  .szene3d-koerper{padding:0;display:flex;flex-direction:column}
  .pfenster--gross{width:100%}
  .merker{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--raum-3);
    margin-top:var(--raum-5)}
  .merker-karte{position:static;width:auto;min-height:0;flex:1 1 220px}
}

/* ============================================================
   Die Kostenkurve
   Das einzige Bauteil dieser Seite, das es auf der Startseite nicht als
   Vorbild gibt. Begruendung: der Preis ist hier das Argument, und eine
   Zahl im Fliesstext beweist nichts. Die Kurve zeigt, was ein Abo ueber
   fuenf Jahre tut und was ein einmaliger Kauf tut - und wo sich beides
   kreuzt. Genau dieser Kreuzungspunkt ist das Verkaufsargument.
   ============================================================ */
.rechnung{padding:clamp(26px,3vw,52px)}
.rechnung-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--raum-3)}
.rechnung-kopf h3{font-size:var(--fs-h3);letter-spacing:var(--ls-h3)}
.kurve-legende{display:flex;flex-wrap:wrap;gap:var(--raum-3);font-size:var(--fs-xs);color:var(--tinte-2)}
.kurve-legende span{display:inline-flex;align-items:center;gap:8px}
.kurve-legende i{width:14px;height:3px;border-radius:2px;flex:none}
/* Auf dem Handy ist die Kurve 298px breit. Sechs Jahresmarken und eine
   Beschriftung am Kreuzungspunkt sind darin nicht mehr zu lesen - und der
   Kreuzungspunkt IST das Argument dieser Seite. Statt die Kurve dort
   wegzulassen, bekommt sie eine Mindestbreite und laesst sich schieben.
   Dieselbe Antwort wie beim Fensterstapel der Startseite, der am Handy zur
   wischbaren Reihe wird. */
.kurve-rahmen{margin-top:var(--raum-4);overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kurve-rahmen::-webkit-scrollbar{display:none}
.kostenkurve{width:100%;height:auto;overflow:visible}
.kurve-wisch{display:none;margin-top:var(--raum-2);font-size:var(--fs-xs);color:var(--tinte-3)}
@media(max-width:760px){
  .kostenkurve{min-width:560px}
  .kurve-wisch{display:block}
  /* Die Schriftgroessen im SVG sind BENUTZEREINHEITEN, keine Pixel: bei
     560px Darstellung und 800 Einheiten Sichtfeld schrumpfen 13 Einheiten
     auf 9 Pixel. Der Kreuzungspunkt ist das Argument dieser Seite und muss
     lesbar bleiben. */
  .kostenkurve .achsentext{font-size:15px}
  .kostenkurve .kreuz-text{font-size:17px}
}
.kostenkurve .achse{stroke:var(--linie);stroke-width:1}
.kostenkurve .achsentext{fill:var(--tinte-3);font-size:12px;font-family:var(--schrift)}
.kostenkurve .linie{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.kostenkurve .linie--wir{stroke:var(--blau-hell);stroke-width:3}
.kostenkurve .linie--a{stroke:#d9765a}
.kostenkurve .linie--b{stroke:#8d99b0}
.kostenkurve .flaeche{fill:url(#sparfeld);opacity:.85}
.kostenkurve .kreuz{fill:var(--blau-hell)}
.kostenkurve .kreuz-ring{fill:none;stroke:var(--blau-hell);stroke-width:1.5;opacity:.5}
.kostenkurve .kreuz-text{fill:var(--tinte);font-size:13px;font-weight:600;font-family:var(--schrift)}
/* Die Linien zeichnen sich beim Hereinscrollen. Ohne Bewegung sind sie
   sofort da - die Laenge steht in js/produkt.js, nicht hier, weil sie
   je Pfad anders ist. */
.kostenkurve.zeichnet .linie{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:strich 1.5s var(--ease) forwards}
.kostenkurve.zeichnet .linie--a{animation-delay:.15s}
.kostenkurve.zeichnet .linie--b{animation-delay:.3s}
.kostenkurve.zeichnet .flaeche,
.kostenkurve.zeichnet .kreuz,
.kostenkurve.zeichnet .kreuz-ring,
.kostenkurve.zeichnet .kreuz-text{opacity:0;animation:auf .6s var(--ease) 1.4s forwards}
@keyframes strich{to{stroke-dashoffset:0}}
@keyframes auf{to{opacity:1}}
.kostenkurve.zeichnet .flaeche{--ziel:.85}
@media(prefers-reduced-motion:reduce){
  .kostenkurve.zeichnet .linie,
  .kostenkurve.zeichnet .flaeche,
  .kostenkurve.zeichnet .kreuz,
  .kostenkurve.zeichnet .kreuz-ring,
  .kostenkurve.zeichnet .kreuz-text{animation:none;stroke-dashoffset:0;opacity:1}
}

/* Die Zeile unter der Kurve: woher die Zahlen kommen. Eine Behauptung ueber
   fremde Preise ohne Quelle und Datum ist auf einer Verkaufsseite eine
   Angriffsflaeche. Mit Quelle und Datum ist sie ein Beleg. */
.quelle{margin-top:var(--raum-4);padding-top:var(--raum-3);border-top:1px solid var(--linie);
  font-size:var(--fs-xs);color:var(--tinte-3);line-height:1.6}

/* ============================================================
   Die Preistafel
   ============================================================ */
/* Eine zweite Ueberschrift INNERHALB eines Abschnitts. Sie braucht nach oben
   den vollen Abschnittsabstand, sonst klebt der neue Gedanke am alten. */
.kopf--zwischen{margin-top:var(--luft)}
.preis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--raum-5);align-items:stretch}
@media(max-width:900px){.preis{grid-template-columns:1fr}}
.preis-karte{padding:clamp(26px,3vw,46px);display:flex;flex-direction:column}
.preis-art{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--blau-hell)}
.preis-zahl{margin-top:var(--raum-3);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.preis-zahl b{font-size:clamp(2.6rem,5vw,4rem);font-weight:700;letter-spacing:var(--ls-display);line-height:1}
.preis-zahl span{font-size:var(--fs-sm);color:var(--tinte-2)}
.preis-sub{margin-top:var(--raum-2);color:var(--tinte-2);font-size:var(--fs-sm);line-height:1.6}
.preis-liste{margin-top:var(--raum-4);padding-top:var(--raum-4);border-top:1px solid var(--linie);
  display:grid;gap:var(--raum-2)}
.preis-liste li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-sm);color:var(--tinte-2);line-height:1.55}
.preis-liste svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--blau-hell)}
.preis-karte .tat{margin-top:var(--raum-5)}
.preis-fuss{margin-top:var(--raum-3);font-size:var(--fs-xs);color:var(--tinte-3);line-height:1.6}

/* Die zweite Karte ist die Gegenrechnung, nicht ein zweites Angebot.
   Sie traegt deshalb kein Glas, sondern nur einen Ring: sonst lesen sich
   die beiden als zwei Tarife, zwischen denen man waehlt. */
.preis-gegen{padding:clamp(26px,3vw,46px);border-radius:var(--r-gross);
  box-shadow:inset 0 0 0 1px var(--linie)}
.preis-gegen h3{font-size:var(--fs-h3);letter-spacing:var(--ls-h3)}
.gegenzeile{display:flex;align-items:baseline;justify-content:space-between;gap:var(--raum-3);
  padding:var(--raum-3) 0;border-bottom:1px solid var(--linie);font-size:var(--fs-sm)}
.gegenzeile:last-of-type{border-bottom:0}
.gegenzeile span{color:var(--tinte-2)}
.gegenzeile b{font-variant-numeric:tabular-nums;white-space:nowrap}
.gegenzeile--wir b{color:var(--blau-hell)}
.gegenzeile--spar{border-top:1px solid var(--linie-2);margin-top:var(--raum-2)}
.gegenzeile--spar b{color:#5cc48f}

/* ============================================================
   „Was sie nicht kann"
   Die eine Stelle, an der diese Seite gegen ihr eigenes Interesse
   schreibt. Sie steht bewusst VOR dem Kaufknopf, nicht danach:
   hinterher ist sie ein Reklamationsgrund, vorher ein Beweis.
   ============================================================ */
.grenzen{margin-top:var(--luft);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--raum-4)}
@media(max-width:820px){.grenzen{grid-template-columns:1fr}}
.grenze{padding:clamp(20px,2.2vw,30px);border-radius:var(--r-mittel);
  box-shadow:inset 0 0 0 1px var(--linie);display:flex;gap:var(--raum-3)}
.grenze-zeichen{width:26px;height:26px;flex:none;border-radius:var(--r-pille);
  display:grid;place-items:center;color:var(--tinte-3);
  box-shadow:inset 0 0 0 1px var(--linie-2)}
.grenze-zeichen svg{width:13px;height:13px}
.grenze h3{font-size:var(--fs-body);font-weight:600;letter-spacing:var(--ls-h3);line-height:1.35}
.grenze p{margin-top:7px;font-size:var(--fs-sm);color:var(--tinte-2);line-height:1.6}

/* ============================================================
   Der Souveraenitaetsblock
   ============================================================ */
.haus{padding:clamp(28px,3.4vw,56px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.4vw,60px);align-items:center}
@media(max-width:900px){.haus{grid-template-columns:1fr}}
.haus h2{font-size:var(--fs-karte);letter-spacing:var(--ls-h2);line-height:var(--lh-karte);max-width:18ch}
.haus-lead{margin-top:var(--raum-3);font-size:var(--fs-lead);font-weight:600;line-height:1.5}
.haus-lead em{font-style:normal;color:var(--blau-hell)}
/* p + p, nicht :last-of-type. Mit :last-of-type bekam nur der LETZTE Absatz
   seinen Abstand - der mittlere klebte am Vorspann. */
.haus > div > p + p{margin-top:var(--raum-3);color:var(--tinte-2);font-size:var(--fs-sm);line-height:1.65}
.haus > div > .haus-lead + p{color:var(--tinte-2)}
/* Die Gegenueberstellung: dort liegen die Daten, hier liegen sie.
   Zwei Kaesten, gleicher Bau, damit der Unterschied im INHALT liegt. */
.wo{display:grid;gap:var(--raum-3)}
.wo-karte{padding:var(--raum-4);border-radius:var(--r-mittel);box-shadow:inset 0 0 0 1px var(--linie)}
.wo-karte--wir{box-shadow:inset 0 0 0 1px rgba(127,178,238,.34);background:rgba(61,119,187,.09)}
.wo-art{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--tinte-3)}
.wo-karte--wir .wo-art{color:var(--blau-hell)}
.wo-karte b{display:block;margin-top:9px;font-size:var(--fs-body);font-weight:600}
.wo-karte p{margin-top:6px;font-size:var(--fs-sm);color:var(--tinte-2);line-height:1.55}

/* ============================================================
   Kaufaufruf am Fuss der Seite
   ============================================================ */
.holen{padding:clamp(30px,4vw,64px);text-align:center}
.holen h2{font-size:var(--fs-h2);letter-spacing:var(--ls-h2);line-height:var(--lh-karte)}
.holen h2 em{font-style:normal;color:var(--blau-hell)}
.holen p{margin:var(--raum-3) auto 0;max-width:56ch;color:var(--tinte-2);font-size:var(--fs-lead);line-height:1.6}
.holen-tat{margin-top:var(--raum-5);display:flex;flex-wrap:wrap;gap:var(--raum-3);justify-content:center}
.holen-fuss{margin-top:var(--raum-4);font-size:var(--fs-xs);color:var(--tinte-3)}

/* ============================================================
   Kleinigkeiten
   ============================================================ */
/* Die Zurueckleiste. Eine Unterseite braucht einen sichtbaren Weg zurueck,
   und die Wortmarke allein ist keiner - sie sieht auf jeder Seite gleich
   aus und sagt nicht, dass man gerade tiefer steht. */
.zurueck{display:inline-flex;align-items:center;gap:9px;margin-bottom:var(--raum-4);
  font-size:var(--fs-xs);color:var(--tinte-3);
  transition:color var(--d-schnell) var(--ease)}
.zurueck:hover{color:var(--tinte)}
.zurueck svg{width:14px;height:14px}
/* Auf der Startseite steht das Produkt nicht in der Navigation. Hier schon,
   und es ist die aktive Seite. */
.nav a[aria-current="page"]{color:var(--tinte)}