/* ============================================================================
   Bridge Buchhaltung — Produktseite unter conwayneurosystems.de/bridge/
   ----------------------------------------------------------------------------
   Eigenständige Datei, die NICHTS von der Hauptseite braucht. Sie übernimmt aber
   deren Verhalten: Sprache (.de/.en wie im Hauptdokument), Hell/Dunkel über den
   gespeicherten Wert conway_theme, Schriftfamilie "Exo 2" (wird bewusst NICHT
   extern nachgeladen — siehe ANLEITUNG_UPDATE_v4_7.md).
   Markenfarben Conway: Navy #102A43, Teal #2BBAB0. Bridge-Akzent: Indigo #4f46e5.
   ============================================================================ */

/* ---------- Sprache: gleiche Regel wie im Hauptdokument ---------- */
body.lang-de .en{display:none !important}
body.lang-en .de{display:none !important}

/* --green-text, neu im v5.0-Nachtrag vom 06.08.2026 (gemessen am 06.08.2026).
   --green traegt zwei Aufgaben: Haken und Symbole (Grafik) und die Schrift in
   den beiden Schildern .badge und .band-col.lokal .tag. Als Schrift reichte
   #16a34a im Tagmodus nicht: 2,95:1 auf --green-bg und 3,30:1 auf --card, bei
   einem Soll von 4,5:1. Als Grafik ist es richtig, ein Haken ist kein Text.
   Deshalb ein zweiter Name statt eines dunkleren --green: sonst waeren auch
   die Haken fast schwarz und die Liste verlaere ihr "erledigt".
   #04171F kommt aus _Organisation/Standards/marke.json, Rolle "Dunkler Text
   auf Teal- und Warnflaeche". Ein dunkles Gruen steht dort nicht; es
   einzutragen waere ein neuer Sollwert, und den setzt eine KI nicht
   (KI-GRENZE Paragraf 8). Im Nachtmodus bleibt --green-text bei --green,
   dort war nie etwas unter dem Soll. */
:root{
  --bg:#f4f6fb; --card:#fff; --ink:#1f2733; --muted:#5A7284; --line:#e6eaf2;
  --accent:#4f46e5; --accent-soft:#eef0fe; --accent-2:#8b5cf6;
  --green:#16a34a; --green-text:#04171F; --green-bg:#e7f6ec; --amber:#b45309; --amber-bg:#fef6e7;
  --navy:#102A43; --teal:#2BBAB0;
  --shadow:0 1px 3px rgba(20,30,60,.08), 0 6px 20px rgba(20,30,60,.06);
  --shadow-lg:0 2px 6px rgba(20,30,60,.10), 0 18px 44px rgba(20,30,60,.10);
  --sans:"Exo 2","Segoe UI",sans-serif;   /* identisch zur Hauptseite */
  --mono:"Space Mono",ui-monospace,Consolas,"SF Mono",monospace;
  --r:14px;
}
/* Dunkel: Standard richtet sich nach dem System, der gespeicherte Conway-Wert
   (data-theme) schlägt es. Dunkel liegt bewusst auf dem Conway-Navy. */
@media (prefers-color-scheme:dark){
  :root{ --bg:#0b1b2a; --card:#132638; --ink:#e8eef5; --muted:#9ab0c2; --line:#22384f;
         --accent:#8b9cf8; --accent-soft:#1c2b48; --accent-2:#a78bfa;
         --green:#4ade80; --green-text:#4ade80; --green-bg:#123420; --amber:#fbbf24; --amber-bg:#33240a;
         --shadow:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 20px 50px rgba(0,0,0,.55); }
}
:root[data-theme="dark"], body.theme-dark{ --bg:#0b1b2a; --card:#132638; --ink:#e8eef5; --muted:#9ab0c2;
  --line:#22384f; --accent:#8b9cf8; --accent-soft:#1c2b48; --accent-2:#a78bfa;
  --green:#4ade80; --green-text:#4ade80; --green-bg:#123420; --amber:#fbbf24; --amber-bg:#33240a;
  --shadow:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 20px 50px rgba(0,0,0,.55); }
/* v5.0: body.theme-light dazugenommen. Der Conway-Einstellungsknopf setzt eine
   KLASSE am body, kein data-theme am Wurzelelement. Diese Regel kannte den
   Klassenweg nicht, also blieb bei "System dunkel, Schalter hell" --card auf
   #132638 stehen, waehrend die kopierten Conway-Regeln den Text dunkelblau
   faerbten. Gemessen am 31.07.2026: .karte h3 1,05:1, .fact .v 1,12:1, ein
   Element bei 1,00:1. Das Gegenstueck body.theme-dark steht schon in Zeile 34,
   es lief nur ins Leere, weil die Klasse nie gesetzt wurde (jetzt behoben). */
:root[data-theme="light"], body.theme-light{ --bg:#f4f6fb; --card:#fff; --ink:#1f2733; --muted:#5A7284; --line:#e6eaf2;
  --accent:#4f46e5; --accent-soft:#eef0fe; --accent-2:#8b5cf6; --green:#16a34a; --green-text:#04171F; --green-bg:#e7f6ec;
  --amber:#b45309; --amber-bg:#fef6e7;
  --shadow:0 1px 3px rgba(20,30,60,.08), 0 6px 20px rgba(20,30,60,.06);
  --shadow-lg:0 2px 6px rgba(20,30,60,.10), 0 18px 44px rgba(20,30,60,.10); }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(32px,5.4vw,54px);line-height:1.06;font-weight:800}
h2{font-size:clamp(23px,3vw,32px);line-height:1.18;font-weight:750}
h3{font-size:18px;font-weight:700;letter-spacing:-.005em}
p{margin:0}
.muted{color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- Knöpfe ----------
   Der Hauptknopf trägt jetzt das Conway-Teal auf dunklem Text: das ist die
   Farbe, die auf der Startseite die Aufruf-Knöpfe trägt, und sie hebt sich in
   hell wie dunkel deutlich ab. Weiß auf Indigo tat das nicht. */
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:11px;padding:15px 26px;
     font-size:16px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;
     transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn-primary{background:var(--teal);color:#04171f;
     box-shadow:0 8px 22px rgba(43,186,176,.32)}
.btn-primary:hover{background:#3fd3c8;transform:translateY(-1px);
     box-shadow:0 12px 28px rgba(43,186,176,.42)}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--teal)}
.btn small{display:block;font-size:11.5px;font-weight:500;opacity:.85;font-family:var(--mono)}
.btn.is-todo{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.is-todo:hover{transform:none;box-shadow:none}
/* schlichter Textlink statt eines zweiten Knopfes */
.btn-text{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600;
     color:var(--accent);text-decoration:none;padding:6px 2px;border-bottom:1px solid transparent}
.btn-text:hover{border-bottom-color:currentColor}
.hint-todo{font-size:12.5px;color:var(--amber);background:var(--amber-bg);border-radius:8px;
     padding:6px 11px;font-family:var(--mono)}

/* ---------- Status / Pille ---------- */
.status{display:inline-flex;align-items:flex-start;gap:11px;background:var(--amber-bg);
        color:var(--ink);border:1px solid var(--line);border-radius:12px;
        padding:12px 16px;font-size:14.5px;line-height:1.5;max-width:66ch}
.status b{color:var(--amber)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);
      color:var(--accent);border-radius:999px;padding:6px 14px;
      font-size:12.5px;font-weight:650}

/* ---------- Held ---------- */
.hero{padding:clamp(34px,5vw,62px) 0 0}
.hero h1{margin:18px 0 18px;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(17px,1.9vw,19.5px);color:var(--muted);max-width:60ch;line-height:1.62}

.shot{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--card);
      box-shadow:var(--shadow-lg)}
.shot img{width:100%}
.shot-cap{font-size:13.5px;color:var(--muted);margin-top:10px}

/* ---------- Abschnitte ---------- */
section{padding:clamp(44px,6.5vw,78px) 0 0}
.head{max-width:62ch;margin-bottom:26px}
.head .eye{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
           color:var(--accent);font-weight:600}
.head h2{margin:10px 0 10px}
.head p{color:var(--muted);font-size:16.5px}

/* ---------- Funktionsreihe ---------- */
.reihe{display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
       gap:clamp(24px,4vw,52px);align-items:center;
       padding:clamp(30px,4.5vw,52px) 0;border-top:1px solid var(--line)}
.reihe:first-of-type{border-top:0}
.reihe.gedreht .txt{order:2}
.reihe .eye{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
            color:var(--accent);font-weight:600}
.reihe h3{font-size:clamp(21px,2.4vw,27px);line-height:1.2;margin:9px 0 12px;letter-spacing:-.015em}
.reihe p{color:var(--muted);font-size:16px;line-height:1.62}
.reihe .liste{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:9px}
.reihe .liste li{display:flex;gap:10px;font-size:15px;line-height:1.5}
.reihe .liste svg{flex:none;margin-top:4px;color:var(--green)}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.galerie figure{margin:0}
.galerie figcaption{font-size:14px;color:var(--muted);margin-top:9px}
.galerie b{color:var(--ink);display:block;font-size:15px;font-weight:650;margin-bottom:2px}

/* ---------- Zwei-Spalten-Band (Chat) ---------- */
.band{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
      box-shadow:var(--shadow-lg)}
.band-cols{display:grid;grid-template-columns:1fr 1fr}
.band-col{padding:clamp(22px,3vw,32px)}
.band-col+.band-col{border-left:1px solid var(--line);background:var(--accent-soft)}
.band-col .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
      letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:12px}
.band-col.lokal .tag{color:var(--green-text)}
.band-col.eigen .tag{color:var(--accent)}
.band-col h3{margin-bottom:8px}
.band-col>p{color:var(--muted);font-size:15px}
.band-liste{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:9px}
.band-liste li{display:flex;gap:9px;font-size:14.5px;line-height:1.5}
.band-liste svg{flex:none;margin-top:3px}
.band-note{padding:16px clamp(22px,3vw,30px);border-top:1px solid var(--line);
      font-size:14px;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.band-note b{color:var(--ink)}

/* ---------- Zahlen, Karten, Grenzen ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(30px,5vw,46px)}
.fact{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      padding:18px 18px 16px;box-shadow:var(--shadow)}
.fact .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:28px;
         font-weight:700;letter-spacing:-.02em;line-height:1}
.fact .v.good{color:var(--green)} .fact .v.acc{color:var(--accent)}
.fact .l{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.4}
.karte{background:var(--card);border:1px solid var(--line);border-radius:18px;
       padding:clamp(24px,3.5vw,36px);box-shadow:var(--shadow-lg)}
.zwei{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:22px}
.zwei .t p{color:var(--muted);font-size:15px;margin-top:6px}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--green-bg);color:var(--green-text);
       border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:650}
.limits{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.lim{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--card)}
.lim b{display:block;font-size:15px;margin-bottom:4px}
.lim span{color:var(--muted);font-size:14.5px}

/* ---------- Abschluss ---------- */
.schluss{margin-top:clamp(44px,6vw,78px);border-radius:20px;padding:clamp(30px,5vw,54px);
  color:#fff;text-align:center;
  background:radial-gradient(700px 420px at 80% 15%,rgba(43,186,176,.30),transparent 60%),
             linear-gradient(128deg,#102A43 0%,#1c3d5c 48%,#4f46e5 100%);
  box-shadow:var(--shadow-lg)}
.schluss h2{margin-bottom:12px}
.schluss p{color:rgba(255,255,255,.88);max-width:56ch;margin:0 auto;font-size:16.5px}
.schluss .cta{justify-content:center}
.schluss .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.34)}
.schluss .hint-todo{background:rgba(255,255,255,.14);color:#fff}

.kleingedrucktes{font-size:13px;color:var(--muted);line-height:1.6;margin-top:26px;max-width:80ch}

@media (max-width:900px){
  .galerie{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .reihe{grid-template-columns:1fr;gap:20px}
  .reihe.gedreht .txt{order:0}
  .zwei,.limits,.band-cols{grid-template-columns:1fr}
  .band-col+.band-col{border-left:0;border-top:1px solid var(--line)}
  .galerie{grid-template-columns:1fr}
  .hero h1{max-width:none}
}
/* ---------- Bildbetrachter (Lupe) ----------
   Jedes Bild lässt sich groß öffnen: klicken oder scrollen zoomt, ziehen
   verschiebt, Esc oder Klick auf ✕ schließt. */
[data-lupe]{cursor:zoom-in}
#lupe{position:fixed;inset:0;z-index:3000;background:rgba(4,12,20,.94);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#lupe[hidden]{display:none}
#lupe img{max-width:96vw;max-height:92vh;width:auto;height:auto;display:block;
  border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6);cursor:zoom-in;
  transform-origin:center center;transition:transform .18s ease;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
#lupe.gezoomt img{cursor:grab;max-width:none;max-height:none;transition:none}
#lupe.zieht img{cursor:grabbing}
#lupe-zu{position:fixed;top:16px;right:18px;z-index:3002;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:20px;line-height:1;cursor:pointer}
#lupe-zu:hover{background:rgba(43,186,176,.35);border-color:var(--teal)}
#lupe-hinweis{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:3002;
  font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.75);
  background:rgba(4,12,20,.6);border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:7px 16px;pointer-events:none;text-align:center}
@media (max-width:620px){ #lupe-hinweis{font-size:11px;padding:6px 12px;max-width:92vw} }

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Preis im Held ----------
   Prominent statt im Kleingedruckten: Die Einmalzahlung ist das staerkste
   Verkaufsargument gegenueber Buchhaltungssoftware im Abo, und ein Preis, der
   klein und weit unten steht, liest sich wie etwas, das man lieber verstecken
   moechte. Der Wert selbst kommt aus konfig.js, nicht von hier. */
.preis-block{
  margin:26px 0 4px; padding:18px 22px;
  background:var(--accent-soft); border:1px solid var(--accent);
  border-radius:var(--r); max-width:520px;
}
.preis-block > .preis-zeile,
.preis-block > .preis-dazu{ margin-bottom:0 !important; }
.preis-zeile{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.preis-wert{
  font-size:2.5rem; font-weight:800; line-height:1.05;
  color:var(--accent); letter-spacing:-.02em;
}
.preis-einmal{ font-size:1.05rem; font-weight:600; color:var(--ink); }
.preis-dazu{ margin-top:10px !important; font-size:.95rem; line-height:1.5; color:var(--muted); }
.preis-dazu strong{ color:var(--ink); }
@media (max-width:600px){
  .preis-block{ padding:15px 17px; margin:22px 0 4px; }
  .preis-wert{ font-size:2.1rem; }
}

/* ════════ Held und Kennzahlen, Nacharbeit 29.07.2026 ════════
   Drei Befunde von Jannik, alle drei am Bildschirm entstanden und nicht an einer Zahl:

   1. Der Fliesstext im Held stand ZENTRIERT zwischen linksbuendigen Elementen.
      Ursache: Die Produktseite uebernimmt den Stil der Conway-Hauptseite, und deren
      Held ist mittig gesetzt. Auf dieser Seite ist alles linksbuendig, ein zentrierter
      Absatz mittendrin liest sich deshalb wie ein Fehler. Hier hart auf links gesetzt.
   2. Der Preis wirkte unscheinbar. Groesser, kraeftiger, mit deutlicherem Rahmen.
   3. Die Zahlen in den vier Kaesten waren schlecht lesbar. Sie liefen in Space Mono,
      einer Schreibmaschinenschrift: gut fuer Tabellen, schlecht fuer grosse Zahlen,
      weil jede Ziffer gleich breit ist und die Null einen Strich traegt. Jetzt Exo 2. */

.hero, .hero h1, .hero .lede, .hero .cta, .hero .pill,
.hero .shot-cap, .hero .preis-block{ text-align:left; }
.hero .cta{ justify-content:flex-start; }
.hero .lede{ margin-left:0; margin-right:0; }
/* 17 Zeichen brachen die Ueberschrift unnoetig frueh um und liessen den Held schmal
   und gedrungen wirken. */
.hero h1{ max-width:24ch; }

/* Preis: die Einmalzahlung ist das staerkste Argument dieser Seite und darf das
   auch aussehen. */
.preis-block{
  margin:28px 0 6px; padding:22px 26px; max-width:560px;
  background:var(--accent-soft); border:2px solid var(--accent);
  border-radius:var(--r); box-shadow:var(--shadow);
}
.preis-wert{ font-size:3.4rem; font-weight:800; line-height:1; letter-spacing:-.025em; }
.preis-einmal{ font-size:1.15rem; font-weight:700; }
.preis-dazu{ font-size:1rem; }

/* Kennzahlen: gleiche Schrift wie die Ueberschriften, dadurch runder und groesser
   lesbar. tabular-nums bleibt, damit die vier Kaesten gleich ausgerichtet stehen. */
.fact .v{
  font-family:var(--sans); font-size:36px; font-weight:800;
  letter-spacing:-.015em; line-height:1.05;
}
@media (max-width:900px){ .fact .v{ font-size:30px; } }
@media (max-width:600px){
  .preis-block{ padding:17px 19px; }
  .preis-wert{ font-size:2.6rem; }
  .fact .v{ font-size:27px; }
}

/* ============================================================================
   v5.0-Nachtrag vom 06.08.2026 · Tagmodus: gedaempfter Text auf der getoenten Flaeche
   ----------------------------------------------------------------------------
   Gemessen am 06.08.2026 ueber JEDES sichtbare Textelement, nicht ueber eine
   Selektorliste (pruefe-kontrast.js, 174 Elemente auf dieser Seite).

   --muted #5A7284 kommt aus _Organisation/Standards/marke.json, Rolle
   "Gedaempfte Beschriftung auf hellem Grund". Auf --bg #f4f6fb ergibt es
   4,65:1 und ist damit richtig. Auf --accent-soft #eef0fe sind es aber nur
   4,44:1, und dort steht gedaempfter Text an zwei Stellen: im Preiskasten und
   in der rechten Bandspalte. Der Wert ist auf helles Weiss geeicht, die
   getoente Flaeche ist dunkler.

   #33505f ist keine neue Farbe: es ist die zweitrangige Textfarbe des
   Conway-Hellmodus und steht bereits in dieser Seite (uebernommen aus der
   Hauptseite als rgb(51,80,95), unter anderem fuer .produkt-desc und .chain li).
   Auf --accent-soft ergibt es 7,55:1.

   Warum nicht einfach --muted dunkler machen: dann waere die gesamte
   zweitrangige Schrift der Seite von 4,65:1 auf 7,9:1 gesprungen, also rund
   zehn Textrollen wegen zweier Flaechen. Eine Stufe dunkler NUR auf der
   getoenten Flaeche ist die kleinere Aussage.
   ============================================================================ */
body.theme-light .preis-dazu, body.theme-light .band-col.eigen>p,
:root[data-theme="light"] .preis-dazu, :root[data-theme="light"] .band-col.eigen>p{ color:#33505f; }