/* site.css — Sektions- und Komponentenstyles. */

/* ── Kopf ───────────────────────────────────────────── */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: 1.5rem var(--pad-x);
  max-width: var(--measure-wide); margin-inline: auto;
}
.site-head__mark { display: block; }
.site-head__mark img { width: 168px; height: auto; }
.site-head__nav { display: flex; gap: 1.5rem; font-size: var(--t-meta); }
.site-head__nav a { color: var(--ink-2); text-decoration: none; }
.site-head__nav a:hover { color: var(--ink); text-decoration: underline; }
/* Chart-Surface-Umbau 2026-08-14: Kopf als Full-Bleed-Band auf Dunkel.
   Die Rechts-/404-Seiten behalten den hellen Kopf mit der alten Struktur
   (Flex direkt auf .site-head); die dunkle Variante zentriert ihren Inhalt
   über einen inneren .wrap, damit er mit den Sektionen fluchtet. */
/* UI/UX-Review, Finding 8: sticky — die Seiten sind 6000–8000px lang, ohne
   bleibenden Kopf verschwindet der einzige Preis-Einstieg nach dem Hero.
   Der ScrollTrigger-Pin der Produktseite rechnet die Kopfhöhe in seinen
   start-Wert ein (motion.js), [id]-Anker bekommen scroll-margin (base.css). */
.site-head--dark { display: block; max-width: none; padding: 0; background: var(--ink);
                   position: sticky; top: 0; z-index: 40; }
.site-head__wrap { display: flex; align-items: center; justify-content: space-between;
                   gap: 2rem; padding-block: 1.5rem; }
.site-head--dark .site-head__nav a { color: var(--dark-2); }
.site-head--dark .site-head__nav a:hover { color: var(--ground); }
.site-head--dark :focus-visible { outline-color: var(--link-light); }

/* ── Bänder & gemeinsame Bausteine ──────────────────── */
.band--plate { background: var(--plate); }
.band--dark { background: var(--ink); color: var(--ground); }
.band--dark .meta { color: var(--dark-2); }
.band--dark .obs { color: var(--dark-2); }
.band--dark a { color: var(--link-light); }
.band--dark :focus-visible { outline-color: var(--link-light); }

.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }

/* Buttons — Mono-Beschriftung, scharfe Kanten (Instrument, kein SaaS-Pill).
   Kontraste belegt: Weiß auf Indigo 10.07:1, Ink auf Ground 16.70:1. */
.btn { display: inline-block; padding: 0.75rem 1.5rem; border: 1px solid var(--ink);
       color: var(--ink); text-decoration: none; font-size: var(--t-meta);
       font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em;
       transition: background .2s var(--ease-out), color .2s var(--ease-out),
                   border-color .2s var(--ease-out); }
.btn:hover { background: var(--ink); color: var(--ground); }
.btn--primary { background: var(--link); border-color: var(--link); color: #FFFFFF; }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.band--dark .btn { border-color: var(--dark-2); color: var(--ground); }
.band--dark .btn:hover { background: var(--ground); border-color: var(--ground); color: var(--ink); }
/* UI/UX-Review, Finding 9: Primärbutton auf dunklen Bändern in Indigo-Light
   statt Creme — die Markenfarbe steht damit im Hero und im Access-Band.
   Ink auf #A9B4F2: 8.71:1 (belegt). */
.band--dark .btn--primary { background: var(--link-light); border-color: var(--link-light); color: var(--ink); }
.band--dark .btn--primary:hover { background: transparent; color: var(--link-light); }
/* Bewusste Platzhalter (Checkout-URLs fehlen noch): als <span>, nicht als
   Link — ein <a href="#"> mit aria-disabled bleibt fokussier- und klickbar. */
.btn--disabled { border-color: var(--rule); color: var(--ink-2); cursor: not-allowed; }

/* ── Fuß ────────────────────────────────────────────── */
/* Chart-Surface-Umbau: kein margin-top mehr — auf Start- und Produktseite
   endet der Inhalt mit einem dunklen Band, das direkt an den Fuß stoßen soll;
   die Rechtsseiten bringen ihren Abstand über .legal's padding-block mit. */
.site-foot { border-top: 1px solid var(--rule); padding-block: 4rem 3rem; }
.site-foot__claim { font-size: var(--t-lead); font-weight: 300; max-width: 28rem; margin-bottom: 2rem; }
.site-foot__nav { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; font-size: var(--t-meta); }
.site-foot__nav a { color: var(--ink-2); text-decoration: none; }
.site-foot__nav a:hover { color: var(--ink); text-decoration: underline; }
/* Angleichung Fix-Runde: Support-Platzhalter-Zeile nutzt dieselbe Textbreite wie der Disclaimer. */
.site-foot__disclaimer, .site-foot__support { max-width: var(--measure-text); }
/* Review vor Livegang, Fund 2a: TradingView-Profil im Footer, gleiche Textbreite. */
.site-foot__profile { max-width: var(--measure-text); }

/* ── Rechtsseiten ───────────────────────────────────── */
.legal h1 { font-size: var(--t-section); margin-bottom: 2rem; }
.legal h2 { font-size: 1.25rem; margin: 2.5rem 0 0.75rem; }
.legal { padding-block: 4rem; }

/* Entwurfshinweis — Rechtsentwürfe (siehe legal-drafts-report.md).
   Sitzt direkt nach der <h1> auf allen vier Rechtsseiten, EIN <div>. Vor
   Livegang entfernen: auf jeder der vier Seiten das eine
   <div class="draft-notice">…</div> löschen — ein Handgriff pro Seite.
   Diese Regel hier kann danach stehen bleiben, eine nicht mehr referenzierte
   Klasse rendert nichts; sie kann aber ebenso mit entfernt werden. */
.draft-notice {
  background: var(--plate); border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-2); padding: 1rem 1.25rem;
  margin: 0 0 2.5rem; max-width: var(--measure-text);
}
.draft-notice__label {
  display: block; font-family: var(--font-mono); font-size: var(--t-meta);
  color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.draft-notice p { margin: 0; }

/* Lücken, die nur der Betreiber füllen kann — ein einheitliches Muster,
   durchsuchbar über die Klasse "legal-gap" oder den Text "operator to add"
   (grep -rn "operator to add" legal/ tools/). Sichtbar für den Leser, nicht
   nur ein HTML-Kommentar — siehe Bericht, Punkt 1 des Auftrags. */
.legal-gap {
  font-family: var(--font-mono); font-size: var(--t-meta);
  color: var(--ink-2); background: var(--plate);
  border: 1px dashed var(--rule); padding: 0.05em 0.45em;
}

/* ── Startseite: Hero (Chart-Surface, dunkel) ───────── */
/* Die frühere Stance-Sektion ist als dreizeilige Headline in den Hero
   gewandert. Nutzer-Vorgabe 2026-08-14 (dritte Runde): die Session-Leiste
   ist entfallen — stattdessen liegt der Kursverlauf mit den Killzone-Boxen
   gedimmt im Hintergrund (.hero__bg). Der Farbverlauf in die Plate-Sektion
   war dem Betreiber zu viel (vierte Runde) — der Hero endet wieder mit
   harter Kante auf --ink (kommt aus .band--dark); der untere Innenabstand
   bleibt größer als oben, damit der Hintergrund-Graph Raum hat. */
.hero { position: relative; overflow: hidden;
        padding-block: clamp(3rem, 7vw, 5rem) clamp(6rem, 13vw, 9rem); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%;
            pointer-events: none; }
.hero__copy { position: relative; }
.hero__eyebrow { margin-bottom: 1.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.hero__title { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }
.hero__l { display: block; }
.hero__l--dim { color: var(--dark-2); }
.hero__sub { color: var(--dark-2); max-width: 30rem; margin: 1.75rem 0 2.25rem; }
.hero__cta { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 0; }

.tools h2 { margin-bottom: 3rem; }
/* UI/UX-Review, Finding 4: align-items:start statt gestreckter Karten
   (kein totes Weiß unter kurzen Texten); das verfügbare Tool als volle
   Zeile mit Button, die Coming-soon-Kacheln 4-spaltig darunter. */
.tool-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem;
             align-items: start;
             grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); }
/* Karten als echte Boxen. Jede trägt ihre Ebenenfarbe (--edge, gesetzt im
   Markup) als Oberkante und als Punkt vor der Statuszeile — wie eine Ebene
   im Chart ihre Linienfarbe trägt. */
.tool-card { background: var(--card); border: 1px solid var(--rule);
             border-top: 3px solid var(--edge, var(--rule));
             padding: 1.75rem 1.75rem 1.5rem; }
.tool-card__name { font-size: 1.4rem; margin-bottom: 0.25rem; }
.tool-card__name a { color: var(--ink); text-decoration: none; }
.tool-card__name a:hover { text-decoration: underline; text-decoration-color: var(--rule); }
.tool-card__sub { color: var(--ink-2); font-size: var(--t-meta); font-family: var(--font-mono); margin-bottom: 1rem; }
.tool-card__body { margin-bottom: 1rem; }
.tool-card__state { margin: 0; }
.tool-card__state::before { content: ""; display: inline-block; width: 0.55em;
                            height: 0.55em; background: var(--edge, var(--ink-2));
                            margin-right: 0.55em; }
.tool-card--feature { grid-column: 1 / -1; display: grid; gap: 1.5rem 3rem;
                      grid-template-columns: 1fr auto; align-items: center;
                      padding: 2rem; }
.tool-card--feature .tool-card__body { margin-bottom: 0; max-width: var(--measure-text); }
.tool-card__aside { display: grid; gap: 1rem; justify-items: start; }
@media (max-width: 640px) {
  .tool-card--feature { grid-template-columns: 1fr; }
}
/* Coming-soon-Kacheln: schlanker und auf Plate — die Hierarchie
   „kaufbar / in Arbeit" ist eine Flächen-, keine Textentscheidung. */
.tool-card--soon { background: var(--plate); padding: 1.25rem 1.25rem 1.1rem; }
.tool-card--soon .tool-card__name { font-size: 1.1rem; margin-bottom: 0.6rem; }
.tool-card--soon .tool-card__body { font-size: 0.95rem; }
.tools__roadmap { max-width: var(--measure-text); margin-top: 3rem; }

/* ── Startseite: Tool-01-Auszug (statisch, siehe index.html) ── */
.glance h2 { margin-bottom: 1.5rem; }
.glance__lead { max-width: var(--measure-text); margin-bottom: 3rem; }
/* Bühne auf dem getönten Band als weiße Karte — die Grundfläche (plate)
   kommt aus der gruppierten .schema__stage-Regel oben und wird hier
   überschrieben. */
.glance__stage { background: var(--card); border: 1px solid var(--rule); }
.glance__cta { margin-top: 2.5rem; }

/* ── Startseite: Prinzipien ── */
/* UI/UX-Review, Finding 10: statt des Drei-Boxen-Triptychons nutzt die
   Sektion das config-list-Muster der Produktseite (Regeln weiter unten). */
.principles h2 { margin-bottom: 3rem; }

/* ── Startseite: Zugang (dunkles Band, Zahlen wie auf der Produktseite) ── */
.access h2 { margin-bottom: 1.5rem; }
.access__line { font-size: var(--t-lead); font-weight: 300;
                max-width: var(--measure-text); margin-bottom: 2.25rem; }
/* UI/UX-Review, Finding 12: 1.25em statt 1.5em — die Zahl bleibt betont,
   ohne den laufenden Satz zu zerreißen. */
.access__num { font-size: 1.25em; font-variant-numeric: tabular-nums; }
.access__cta { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.access__note { max-width: var(--measure-text); }

/* ── Produktseite ───────────────────────────────────── */
/* Chart-Surface-Umbau: Produkt-Hero auf dunklem Band, mit Button-Zeile
   statt des früheren Sprungverweises (.p-hero__jump entfallen). */
.p-hero { padding-block: clamp(3rem, 7vw, 5rem) clamp(3.5rem, 8vw, 6rem); }
.p-hero__kicker { margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.p-hero__sub { font-size: var(--t-lead); font-weight: 300; color: var(--dark-2); margin-bottom: 2rem; }
.p-hero__line { max-width: var(--measure-text); color: var(--dark-2); }
.p-hero__cta { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 2.25rem 0 0; }
.p-hero__price { margin: 1.25rem 0 0; }

.proof__figure { margin-block: 3rem; }
/* Auf dem getönten Band (band--plate) heben sich die Platzhalter-Rahmen
   als weiße Karten ab; der gestrichelte Rand bleibt als Platzhalter-Signal. */
.proof__frame {
  background: var(--card); border: 1px dashed var(--rule);
  aspect-ratio: 16 / 9; display: grid; place-items: center;
}
.proof__frame p { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--t-meta); margin: 0; }
.proof__caption { margin-top: 0.75rem; }

.engine__figure { margin-top: 3rem; }
.dst { max-width: 40rem; }
.dst__lbl { font-family: var(--font-mono); font-size: 11px; }
.dst__result { font-family: var(--font-mono); font-size: 12px; }
.dst__cap { margin-top: 0.75rem; max-width: 40rem; }
.js-on .dst__result { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js-on .dst__result { opacity: 1 !important; } }

.config-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.config-list li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem;
                  padding-block: 0.9rem; border-top: 1px solid var(--rule); }
.config-list li:last-child { border-bottom: 1px solid var(--rule); }
.config-list__k { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--ink-2); padding-top: 0.2em; }

.plan-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
             max-width: 44rem; margin-block: 3rem; }
/* Chart-Surface-Umbau: Pläne als Boxen; Lifetime trägt die Akzentfarbe als
   Oberkante. Die Button-Grundstyles stehen im Komponenten-Block oben —
   .btn--solid ist durch .btn--primary ersetzt. */
.plan { background: var(--card); border: 1px solid var(--rule); padding: 2rem 2rem 1.75rem; }
.plan--lifetime { border-top: 3px solid var(--link); }
.plan__name { font-size: 1.25rem; margin-bottom: 0.75rem; }
.plan__num { font-size: 2.25rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.plan__price { margin-bottom: 1.25rem; }
.plan__list { list-style: none; margin: 0 0 1.75rem; padding: 0; font-size: var(--t-meta); color: var(--ink-2); }
.plan__list li { padding-block: 0.3rem; }
.pricing__note { max-width: var(--measure-text); }

.faq details { border-top: 1px solid var(--rule); padding-block: 1rem; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-2); font-family: var(--font-mono); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0.9rem 0 0.3rem; color: var(--ink-2); }
.risk { padding-block: 0 var(--gap-section); }

/* ── Chart-Schema ───────────────────────────────────── */
.schema { padding-block: var(--gap-section); }
/* UI/UX-Review, Findings 1+11: Diagramm-Bühnen im breiten Figuren-Maß. */
.schema__wrap { max-width: var(--measure-figure); }
.wrap--figure { max-width: var(--measure-figure); }
/* Landing-Ausbau 2026-08-14: die .glance__*-Selektoren der Startseite teilen
   sich Bühne, SVG-Label- und Listen-Styles mit dem Produktseiten-Schema —
   gruppiert statt kopiert, damit beide Darstellungen nicht auseinanderlaufen.
   Bewusst NICHT geteilt: .schema__caption, das Pinning-Grid und alles unter
   .js-on in motion.css — der Landing-Auszug ist statisch. */
.schema__stage, .glance__stage { background: var(--plate); border: 1px solid var(--rule);
                                 padding: clamp(1rem, 3vw, 2rem); position: relative; }
.schema__svg, .glance__svg { width: 100%; height: auto; }
/* Review vor Livegang, Fund 1: die aktive Zeile der Liste unten in die Bühne
   geholt (siehe HTML-Kommentar dort für die Messung/Begründung). Structural
   hier; das Ein-/Ausblenden je Zeile (nur ab 768px, nur unter .js-on) steht in
   motion.css, analog zum bestehenden Split bei .schema__labels li. `display:
   none` als Grundzustand — ohne motion.css bleibt der Block schlicht weg.
   Release-Blocker-Audit, Punkt 3: `margin-top` durch `margin-bottom` ersetzt —
   die Beschriftung steht im Markup jetzt VOR statt NACH dem SVG (oberer statt
   unterer Bühnenrand, siehe HTML-Kommentar dort), der Luftraum muss deshalb
   danach statt davor liegen. */
.schema__caption {
  display: none; margin-bottom: 1rem; font-family: var(--font-mono);
  font-size: var(--t-meta); color: var(--ink); line-height: 1.5;
}
.schema__caption b { font-weight: 400; }
/* Task 7, Schritt 1: Bühne pinnbar machen. Ein-Spalten-Grid ab 768px —
   dieselbe Fließ-Reihenfolge (Bühne, dann Liste) wie ohne JS/im Fallback.
   Fix-Runde 1: kein `gap` hier — `.schema__labels` trägt bereits
   `margin-top: 2rem` aus Task 5. Grid-`gap` kollabiert nicht mit dem
   Margin eines Grid-Items — beide hätten sich addiert und der Abstand
   wäre ab 768px doppelt so groß gewesen wie darunter. */
@media (min-width: 768px) {
  .schema__wrap { display: grid; grid-template-columns: 1fr; }
}
/* UI/UX-Review, Finding 1: Größen in viewBox-Einheiten angehoben (13→15,
   12→14). Zusammen mit dem Figuren-Maß (76rem, s. u.) rendern die Labels
   real bei ~13px statt der gemessenen ~7,8px im alten 58rem-Wrap. */
.schema__svg .s-lbl, .glance__svg .s-lbl { font-family: var(--font-mono); font-size: 15px; }
.schema__svg .l-lbl, .glance__svg .l-lbl { font-family: var(--font-mono); font-size: 14px; }
.schema__labels, .glance__list {
  list-style: none; margin: 2rem 0 0; padding: 0; max-width: var(--measure-text);
  counter-reset: lyr;
}
/* Fix-Runde 1 (vorbestehender Fehler aus Task 5, in dieser Runde behoben):
   Kein Grid für die Zeile mehr — `li` hatte drei Grid-Kinder: den Zähler aus
   ::before, das <b> und den Textknoten dahinter. Der Textknoten landete
   dadurch in der schmalen Zählerspalte und brach nach fast jedem Wort um.
   Der Zähler wird stattdessen absolut in den Einzug gesetzt, der Fließtext
   bleibt ein Textfluss. */
.schema__labels li, .glance__list li {
  border-top: 1px solid var(--rule); padding-block: 0.8rem;
  padding-left: 2.5rem; position: relative;
}
.schema__labels li::before, .glance__list li::before {
  position: absolute; left: 0; top: 0.8rem;
  counter-increment: lyr; content: counter(lyr, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--t-meta); color: var(--ink-2);
  line-height: 1.65;
}
.schema__labels b, .glance__list b { font-weight: 400; }
/* Koordinator-Entscheidung (Task 5, Schritt-4-Erlaubnis des Briefs): Das SVG skaliert
   proportional zur Wrap-Breite. Unter ~640px schrumpft die 12px-Randbeschriftung
   (.l-lbl) rechnerisch unter 8px reale Größe und wird unleserlich. Die nummerierte
   Liste unter dem Diagramm trägt dieselbe Information wörtlich, darum werden nur die
   kleinen Rand-Labels ausgeblendet — die Session-Labels (.s-lbl, größer, im Bild
   verortet) und die Liste bleiben unangetastet. */
/* Task 9, Schritt 2 (Brief): config-list und site-head unter 640px anpassen.
   Die .l-lbl-Regel oben stammt bereits aus Task 5 — hier nur ergänzt statt
   verdoppelt (Abweichung vom Brief-Snippet, das eine eigene, zweite
   @media-Regel mit derselben .l-lbl-Zeile vorschlägt; siehe Bericht). Am Bild
   geprüft (_dev/shots, 320–768px, zwei- und einspaltig): die zweispaltige
   config-list bricht bis 767px nirgends um und läuft nirgends über — die
   Zeilen werden vorher nicht eng, sie sind über den ganzen Bereich lesbar.
   640px ist trotzdem der richtige Punkt für den Wechsel: darunter macht die
   einspaltige Form die langen Beschreibungstexte deutlich luftiger (volle
   Breite statt einer schmalen 1fr-Spalte neben der festen 7rem-Schlüssel-
   spalte), ohne dass die zweispaltige Form vorher schon eng gewirkt hätte. */
/* UI/UX-Review, Finding 1: Ausblende-Schwelle der kleinen Rand-Labels von
   640 auf 900px angehoben. Mit den größeren SVG-Schriftgraden (s. oben)
   rendern sie ab ~900px Containerbreite lesbar; darunter trägt die
   nummerierte Liste dieselbe Information wörtlich (Begründung wie Task 5). */
@media (max-width: 900px) {
  .schema__svg .l-lbl, .glance__svg .l-lbl { display: none; }
}
@media (max-width: 640px) {
  .config-list li { grid-template-columns: 1fr; gap: 0.15rem; }
  /* UI/UX-Review, Finding 12: Regel auf beide Kopf-Strukturen — auf dem
     dunklen Kopf ist .site-head display:block, dort flext .site-head__wrap. */
  .site-head, .site-head__wrap { flex-wrap: wrap; gap: 1rem; }
}