/* ============================================================
   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}

/* .schau kommt aus werk.css und ist dort fuer die gezeichneten Tafeln der
   Startseite gebaut: festes Seitenverhaeltnis, min-height 320px, Inhalt wird
   gestreckt. Hier steckt darin ein echtes Fenster mit einer Aufnahme, die ihr
   eigenes Verhaeltnis mitbringt. Bei 375px war der Rahmen deshalb 320px hoch,
   das Bild 183px, die Leiste 41px - 96px leerer Kasten unter jeder Aufnahme. */
.schau{aspect-ratio:auto;min-height:0;place-items:start stretch}

/* ---- Handy: dieselbe Anordnung wie am Desktop (seit 1.10.2026) -----------
   Bis zum 1.10. standen die Merkposten unter 1100px als Reihe bzw. als
   2x2-Raster UNTER dem Fenster. Leon wollte die Szene ueberall wie am
   Desktop: vier kleine Karten rings um das Fenster, an den Kanten
   ueberlappend. Ab 900px abwaerts die verkleinerten Desktop-Karten, das
   Fenster in Startseiten-Groesse erst ab 700px abwaerts.

   Das Fenster ist am Handy GENAU so gross wie das vordere Fenster der
   Startseite: 86 Prozent der Bildschirmbreite, Seitenverhaeltnis 1200/850,
   gleiche Leiste (Werte aus .fenster/.fenster-leiste in werk.css, Block
   "Handy: derselbe Stapel"). Bei 390px also 335 x 237.

   DIE KARTEN SIND DIE DESKTOP-KARTEN, NUR VERKLEINERT (Leon, 1.10.:
   "wirklich wie auf dem Desktop, nur sauber kleiner skaliert"). Unter
   900px behalten sie Breite, Polster, Schrift und Umbruch des Desktops
   (272px, 15/20px, 16/13px) und werden als Ganzes per transform verkleinert:
     unter 900px  Faktor .58 - genau der Desktop-Anteil am Fenster
                  (272 von 1074px = 25 %, bei 820px Fenster 619px)
     unter 700px  Faktor .45 - der echte Anteil waere .31 (Titel 5px,
                  unlesbar); .45 ist die kleinste Stufe, bei der der Titel
                  mit 7px noch als Schrift erkennbar bleibt
   Vorher wurden Schrift und Polster einzeln verkleinert; die Unterzeilen
   brachen dann anders um als am Desktop, die Karten wirkten nachgebaut
   statt verkleinert.
   Der Ursprung der Verkleinerung liegt in der Ecke, an der die Karte
   haengt, damit die Positionen der Desktop-Regeln (oben links buendig;
   rechts 12 %/2 %; links 15 %/2 %; unten rechts buendig) unveraendert
   gelten. Das Polster oben und unten ist das Desktop-Polster (44/50px)
   mal Faktor: a und d stehen wie dort zur Haelfte ueber der Fensterkante.
   Unter 700px laeuft der Koerper bis 8px an die Bildschirmkante. */
@media(max-width:900px){
  .szene3d-koerper{padding:26px 0 29px}
  .merker-karte{width:272px;--s:.58;transform:scale(var(--s))}
  .merker--a{transform-origin:top left}
  .merker--b{transform-origin:top right}
  .merker--c{transform-origin:bottom left}
  .merker--d{transform-origin:bottom right}
}
@media(max-width:700px){
  .szene3d{margin-top:var(--raum-5)}
  .szene3d-koerper{padding:20px 0 22px;margin-inline:calc(8px - var(--pad))}
  .merker-karte{--s:.45}
  .pfenster--gross{width:86vw;max-width:100%;aspect-ratio:1200/850;
    display:flex;flex-direction:column}
  .pfenster--gross .pfenster-leiste{flex:none;padding:9px 10px}
  .pfenster--gross .pfenster-bild{flex:1;min-height:0;height:100%;object-fit:cover;object-position:top center}
}

/* ============================================================
   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}
/* Schmal passt "Sie behalten nach fuenf Jahren" plus "349,99 EUR statt
   1.314 EUR" nicht mehr nebeneinander: die Beschriftung brach zweizeilig um,
   der Betrag blieb einzeilig oben rechts stehen, und die Zeile sah aus, als
   waere sie zerrissen. Untereinander statt nebeneinander. */
@media(max-width:520px){
  .gegenzeile{flex-direction:column;align-items:flex-start;gap:2px}
  .gegenzeile span{font-size:var(--fs-sm)}
}

/* ============================================================
   „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}}
/* h2 UND h3. Im Auszeichnungscode steht ein h3, weil die Ueberschrift des
   Abschnitts das h2 ist - die Regel griff dadurch nie und die Ueberschrift
   der Karte stand in der Groesse eines gewoehnlichen h3 da, 18,7px statt 37,4. */
.haus h2, .haus h3{font-size:var(--fs-karte);letter-spacing:var(--ls-h2);
  line-height:var(--lh-karte);max-width:18ch;font-weight:600}
.haus-lead{margin-top:var(--raum-3);font-size:var(--fs-lead);font-weight:600;line-height:1.5;color:var(--tinte-1)}
.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}
/* Der Vorspann ist selbst ein p und faellt sonst unter die Regel darueber. */
.haus > div > p.haus-lead + p{margin-top:var(--raum-3)}
.haus > div > h3 + p.haus-lead{font-size:var(--fs-lead);line-height:1.5}
/* 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. */
/* Vorher ein nackter Textlink mit Pfeil davor. Er stand ueber der grossen
   Ueberschrift und sah aus wie vergessen. Jetzt eine kleine Pille im Material
   der Seite, in der Form der uebrigen Knoepfe, nur leiser: der Weg zurueck ist
   ein Angebot, kein Aufruf. */
.zurueck{display:inline-flex;align-items:center;gap:9px;margin-bottom:var(--raum-5);
  padding:8px 16px 8px 12px;border-radius:var(--r-pille);
  font-size:var(--fs-xs);color:var(--tinte-2);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px var(--linie);
  transition:color var(--d-schnell) var(--ease),
             background var(--d-schnell) var(--ease),
             box-shadow var(--d-schnell) var(--ease),
             transform var(--d-schnell) var(--ease)}
.zurueck b{font-weight:600;color:var(--tinte)}
/* Der Pfeil geht beim Zeigen einen Schritt nach links: die Richtung, in die
   der Verweis fuehrt. */
.zurueck svg{width:14px;height:14px;flex:none;
  transition:transform var(--d-schnell) var(--ease)}
@media(hover:hover){
  .zurueck:hover{color:var(--tinte);background:rgba(255,255,255,.07);
    box-shadow:inset 0 0 0 1px var(--linie-2)}
  .zurueck:hover svg{transform:translateX(-3px)}
}
.zurueck:active{transform:scale(.97)}
/* 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)}

/* ===================== Die drei Beweise =====================
   HIER FEHLTEN DIE REGELN GANZ. Die drei Karten trugen nur .glas, standen
   deshalb ohne Polsterung und ohne Raster untereinander, und der Text lief
   ueber die Glaskante hinaus. Gemessen: 1178 px breit, 72 px hoch, padding 0.

   Gebaut wie .wege auf der Startseite, weil es dieselbe Sache ist: drei
   gleichrangige Karten nebeneinander. */
.beweise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--raum-4);align-items:stretch}
.beweis{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,2.8vw,40px) clamp(22px,2.4vw,32px)}
.beweis-nr{display:grid;place-items:center;width:clamp(38px,3.4vw,46px);aspect-ratio:1;
  border-radius:var(--r-mittel);margin-bottom:var(--raum-3);
  background:linear-gradient(150deg,rgba(127,178,238,.20),rgba(61,119,187,.07));
  box-shadow:inset 0 0 0 1px rgba(127,178,238,.34);
  font-size:var(--fs-sm);font-weight:600;color:var(--blau-hell)}
.beweis h3{margin-bottom:var(--raum-2);font-size:var(--fs-h3);
  letter-spacing:var(--ls-h3);line-height:var(--lh-klein);font-weight:600}
.beweis p{color:var(--tinte-2);font-size:var(--fs-sm);line-height:1.6}
/* Der Verweis sitzt unten, damit die Karten trotz verschieden langer Texte
   auf einer Linie schliessen. */
.beweis .tat{margin-top:var(--raum-4);align-self:flex-start}
.beweis-schluss{margin-top:auto;padding-top:var(--raum-3)}
@media(max-width:1000px){
  .beweise{grid-template-columns:1fr}
}

/* Der Hinweis unter den Fragen. Wer bis hierher gelesen hat und seine Frage
   nicht gefunden hat, soll nicht wieder nach oben scrollen muessen. */
.fragen-fuss{margin-top:var(--raum-5);text-align:center;
  font-size:var(--fs-sm);color:var(--tinte-3)}
.fragen-fuss a{color:var(--tinte);text-decoration:underline;text-underline-offset:3px}

/* Der Kopf ueber dem Formular. Auf der Startseite braucht das Formular keinen,
   dort steht die Ueberschrift daneben. Hier sagt er, worum es geht: eine
   Anfrage zum Produkt, nicht zu einem Projekt. */
.form-kopf{margin-bottom:var(--raum-3);padding-bottom:var(--raum-3);
  border-bottom:1px solid var(--linie);
  font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--tinte-3)}
.form-kopf b{color:var(--tinte);font-weight:600}
/* Die beiden Knoepfe standen mittig, weil der alte Kasten mittig war. Im
   zweispaltigen Aufbau steht der Text links, also auch der Knopf. */
.kontakt .holen-tat{justify-content:flex-start;margin-top:var(--raum-4);margin-bottom:var(--raum-5)}
/* Schmal loest werk.css .kontakt-text mit display:contents auf, damit das
   Formular vor die drei Wege rutschen kann. Der Knopf wird dadurch selbst ein
   Rasterfeld und stand als einziges Element links, waehrend Ueberschrift,
   Vorspann und Wege mittig stehen. */
@media(max-width:900px){
  .kontakt .holen-tat{justify-content:center;margin-bottom:0}
}