/* J.A.M.E.S · eigene Gestaltungsschicht über marke.css (Spartan Intelligence, Stand 2026-10-10)
   Wird von bauen.py nach dist/assets/james-design.css kopiert und NACH marke.css geladen.
   Gilt für /james/ (body.j-seite), Rechts-/Danke-Seiten (body.r-seite), Sicherheits-Check (body.c-seite) und das Matomo-Banner.
   Die Startseite (dist/index.html) lädt diese Datei NICHT. Farben nur über die --si-Variablen aus marke.css.
   Grün nur für „geschafft“ und im Logo-Wort INTELLIGENCE (marke.css). Keine allgemeinen span-Regeln. */

/* ---------- 1. /james/: Variablen der Seite auf die Marke umstellen ---------- */
body.j-seite{
  --bg:var(--si-bg); --weiss:var(--si-weiss); --karte:var(--si-weiss); --karte2:var(--si-alt);
  --text:var(--si-text); --hell:var(--si-schwarz); --blass:var(--si-grau);
  --linie:var(--si-linie); --linie2:var(--si-linie2);
  --gruen:var(--si-gold2); --blau:var(--si-gold2); --gelb:var(--si-gold-text);
  --nacht:#07111f;
  --serif:var(--si-sans); --schmal:var(--si-sans);
  background:var(--si-bg); color:var(--si-text); font-size:16.5px;
}
html:has(body.j-seite){scroll-padding-top:140px}
.j-seite .innen{max-width:1360px;padding:0 20px}
.j-seite h1{letter-spacing:-.025em;font-weight:600}
.j-seite h2{letter-spacing:-.02em;font-weight:600}
.j-seite .gross-satz,.j-seite .schluss-satz{letter-spacing:-.015em}

/* Kicker wie auf der Hauptseite (Versalien, Gold, Laufweite .16em) */
.j-seite .etikett{font:600 11.5px/1.4 var(--si-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--si-gold-text);margin-bottom:14px}
.j-seite .etikett b{color:inherit;font-weight:700}
.j-seite .verlauf{background:none;color:var(--si-gold-text);-webkit-text-fill-color:currentColor}

/* Kleine Beschriftungen: Systemschrift statt Monospace (Terminal und Kostentabelle bleiben Monospace) */
.j-seite .typ,.j-seite .band,.j-seite .klammer,.j-seite .zeit .wer,.j-seite .stile,.j-seite .dauer,.j-seite .wisch,
.j-seite .gratis-kopf span,.j-seite .vergleich thead th,.j-seite .baustein .bild,.j-seite .station .zugang,.j-seite .vergleich td::before{font-family:var(--si-sans);font-weight:600}
.j-seite .zeit .uhr{font-family:var(--si-sans);font-weight:650}

/* Knöpfe wie si-knopf: schwarz bzw. umrandet */
.j-seite .knopf{border-radius:6px;padding:13px 24px;font:600 15px var(--si-sans);border-width:1.5px}
.j-seite .knopf.primaer{background:var(--si-schwarz);color:#fff;border-color:var(--si-schwarz)}
.j-seite .knopf.primaer:hover{background:#1a3a63}
.j-seite .knopf.zweit{background:transparent;color:var(--si-text);border-color:var(--si-text)}
.j-seite .knopf.zweit:hover{background:#fff}
.j-seite .knopf.primaer.video-knopf,.j-seite .knopf.primaer.check-knopf{background:var(--si-schwarz)}
.j-seite .knopf:focus-visible{outline:2px solid var(--si-gold2);outline-offset:2px}

/* Text-Links: schwarz mit goldener Unterstreichung */
.j-seite .video-mehr a,.j-seite .grenzen a,.j-seite .preis li a{color:var(--si-text);text-decoration:underline;text-decoration-color:var(--si-gold);text-underline-offset:3px;text-decoration-thickness:1.5px}
.j-seite .video-mehr a:hover,.j-seite .grenzen a:hover,.j-seite .preis li a:hover{text-decoration-color:var(--si-text)}

/* Karten: weiß mit feiner Linie */
.j-seite .karte{border-radius:12px;box-shadow:none}

/* Band „AI Marketing OS“ */
.j-seite .os-band{background:var(--si-schwarz);color:#c9d1dc;font:14px/1.5 var(--si-sans)}
.j-seite .os-band b{color:var(--si-gold)}

/* In-Seiten-Navigation unter dem Kopf */
.j-leiste{position:sticky;top:var(--kopf-h,77px);z-index:49;background:var(--si-weiss);border-bottom:1px solid var(--si-linie);font-family:var(--si-sans)}
.j-leiste-innen{max-width:1360px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:22px}
.j-marke{font:600 13px var(--si-mono);letter-spacing:.16em;color:var(--si-schwarz);white-space:nowrap}
.j-marke small{font:600 10.5px var(--si-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--si-gold-text);margin-left:8px}
.j-links{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.j-links::-webkit-scrollbar{display:none}
.j-links a{color:var(--si-text);text-decoration:none;font-size:14px;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
.j-links a:hover{border-bottom-color:var(--si-gold)}
.j-leiste .si-knopf{flex:none}
@media(max-width:760px){.j-marke small{display:none}.j-leiste-innen{gap:14px;padding:8px 16px}.j-links{gap:16px;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent);padding-right:18px}}
@media(max-width:520px){.j-marke{display:none}.j-links a{font-size:13.5px}}

/* Held und Bühne */
.j-seite .buehne,.j-seite .kern-klein{background:radial-gradient(120% 90% at 50% 30%,#132a47 0%,#07111f 70%)}
.j-seite .buehne-kopf b{color:#fff}
.j-seite .zustaende span{color:#9aa6b5;border-color:rgba(255,255,255,.18)}
.j-seite .zustaende span.an{color:var(--si-schwarz)}
.j-seite .blase.du{background:rgba(77,148,232,.14);border-color:rgba(77,148,232,.45);color:#fff}
.j-seite .blase.er{background:#12223a;color:#e8eaed}
.j-seite .blase .wer{color:#9aa6b5}
.j-seite .kern-klein span{color:#9aa6b5}
.j-seite .belege li::before{color:var(--si-gold-text)}
.j-seite .zahl b{font-weight:600;letter-spacing:-.02em}

/* Vier Regeln, Einstiege */
.j-seite .regeln-leiste{border-radius:12px}
.j-seite .regeln-leiste i{background:var(--si-schwarz);color:var(--si-gold)}
.j-seite .regeln-leiste:hover,.j-seite .einstieg:hover{border-color:var(--si-text)}
.j-seite .einstieg{border-radius:12px}
.j-seite .einstieg i{color:var(--si-gold-text)}
.j-seite .einstieg-start{border-color:var(--si-gold);box-shadow:0 0 0 1px var(--si-gold) inset;background:var(--si-goldt)}

/* Architektur, Gedächtnis, Regeln */
.j-seite .typ.s,.j-seite .typ.e{color:var(--si-gold-text)} .j-seite .typ.h{color:var(--si-schwarz)} .j-seite .typ.r{color:var(--si-gold-text)}
.j-seite .gedaechtnis{border-color:var(--si-gold);background:var(--si-goldt);border-radius:12px}
.j-seite .regel3.wichtig{border-color:var(--si-gold);background:var(--si-goldt)}
.j-seite .chip{border-color:var(--si-linie2)}
.j-seite .ehrlich{border-left:4px solid var(--si-gold);background:var(--si-goldt)}

/* Bauplan-Bausteine: Nummern wie Symbolkreise */
.j-seite .baustein .n{background:var(--si-schwarz);color:var(--si-gold)}
.j-seite .bauplan-buehne{background:radial-gradient(90% 80% at 50% 40%,#fff 0%,var(--si-alt) 100%)}
.j-seite #iso .tunnel{stroke:var(--si-gold)}

/* Vergleich */
.j-seite .vergleich{border-radius:12px}
.j-seite .vergleich td:last-child{background:var(--si-goldt)}

/* Welten: Symbolkreise schwarz mit goldenem Symbol */
.j-seite .station::before{background:var(--si-gold);opacity:.6}
.j-seite .knoten{background:var(--si-schwarz);border-color:var(--si-schwarz);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.j-seite .station.frei .knoten,.j-seite .station.paket .knoten{border-color:var(--si-schwarz)}
.j-seite .station.frei .knoten svg,.j-seite .station.paket .knoten svg{stroke:var(--si-gold)}
.j-seite .knoten .nr{background:var(--si-gold);color:var(--si-schwarz)}
.j-seite .klammer.frei{color:var(--si-gold-text)} .j-seite .klammer.paket{color:var(--si-schwarz)}
.j-seite .station .zugang,.j-seite .station.paket .zugang{color:var(--si-gold-text)}
@media(max-width:900px){.j-seite .station::before{background:var(--si-gold)}}
.j-seite .gratis{border:1px solid var(--si-gold);background:linear-gradient(180deg,var(--si-goldt),rgba(236,239,243,0));border-radius:12px}
.j-seite .gratis-kopf span{color:var(--si-schwarz);background:var(--si-goldt);border-color:var(--si-gold);border-radius:4px}
.j-seite .terminal{background:#121212}
.j-seite .terminal .leiste{background:#232323}
.j-seite .terminal .p,.j-seite .terminal .blass,.j-seite .terminal .leiste span{color:#9aa6b5}
.j-seite .terminal .er{color:var(--si-gold)}
.j-seite .gratis-hinweis svg{stroke:var(--si-gold2)}
.j-seite .welten-fuss .karte svg{stroke:var(--si-gold2)}

/* Preise */
.j-seite .preis li::before{color:var(--si-gold-text)}
.j-seite .preis.empfohlen{border:2px solid var(--si-gold);background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.12)}
.j-seite .band{background:var(--si-gold);color:var(--si-schwarz);border-radius:4px}
.j-seite .preis .termin,.j-seite .empf{background:var(--si-goldt)}
.j-seite .grenzen,.j-seite .check-kasten{border-radius:12px}

/* FAQ wie auf der Hauptseite */
.j-seite #fragen details{border-color:var(--si-linie2)}
.j-seite #fragen summary{font-size:17.5px;font-weight:650}
.j-seite #fragen summary::after{font-size:24px;line-height:1;font-weight:300;color:var(--si-text)}

/* ---------- 2. Rechts- und Danke-Seiten (body.r-seite) ---------- */
body.r-seite,body.c-seite{margin:0;background:var(--si-bg);color:var(--si-text);font:16.5px/1.65 var(--si-sans)}
.r-inhalt{max-width:820px;margin:0 auto;padding:48px 20px 88px}
.r-inhalt h1{font:600 clamp(32px,4.4vw,44px)/1.1 var(--si-sans);letter-spacing:-.025em;color:var(--si-text);margin:8px 0 24px}
.r-inhalt h2{font:600 21px/1.3 var(--si-sans);letter-spacing:-.01em;color:var(--si-text);margin:32px 0 6px}
.r-inhalt h3{font:650 18px/1.3 var(--si-sans);color:var(--si-text);margin:28px 0 6px}
.r-inhalt a{color:var(--si-text);text-decoration:underline;text-decoration-color:var(--si-gold);text-underline-offset:3px;text-decoration-thickness:1.5px}
.r-inhalt a:hover{text-decoration-color:var(--si-text)}
.r-inhalt a.knopf{display:inline-block;background:var(--si-schwarz);color:#fff;text-decoration:none;font-weight:600;padding:13px 24px;border-radius:6px;margin:6px 0 4px}
.r-inhalt a.knopf:hover{background:#1a3a63}
.r-inhalt ol{padding-left:1.4em} .r-inhalt li{margin:4px 0}
.r-inhalt .tabelle{overflow-x:auto;margin:12px 0}
.r-inhalt table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5;background:#fff;border:1px solid var(--si-linie)}
.r-inhalt th,.r-inhalt td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--si-linie)}
.r-inhalt th{color:var(--si-text);background:var(--si-alt)}
.r-inhalt .stand{color:var(--si-grau);font-size:15px}
.r-inhalt .unterschrift{display:flex;gap:32px;flex-wrap:wrap;margin-top:56px}
.r-inhalt .unterschrift span{flex:1 1 240px;border-top:1px solid var(--si-text);padding-top:6px;font-size:14px;color:var(--si-grau)}
@media print{body.r-seite{background:#fff;font-size:12pt}.si-kopfleiste,.si-fuss,.r-inhalt .drucken{display:none}.r-inhalt a{color:inherit;text-decoration:none}}

/* ---------- 3. Matomo-Einwilligungsbanner im Marken-Design (Verhalten unverändert; beide Knöpfe gleich) ---------- */
html #si-banner{background:#fff;color:var(--si-text);border:1px solid var(--si-linie2);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.16);font:15px/1.55 var(--si-sans);padding:20px 22px}
html #si-banner .si-titel{font:600 18px/1.3 var(--si-sans);letter-spacing:-.01em;color:var(--si-text)}
html #si-banner a{color:var(--si-text);text-decoration:underline;text-decoration-color:var(--si-gold);text-underline-offset:3px}
html #si-banner button{border:1.5px solid var(--si-schwarz);border-radius:6px;background:#fff;color:var(--si-schwarz);font:600 15px/1.2 var(--si-sans)}
html #si-banner button:hover,html #si-banner button:focus-visible{background:var(--si-schwarz);color:#fff}
html #si-banner button:focus-visible{outline:2px solid var(--si-gold2);outline-offset:2px}