/*
 * PROMPTOPOLY v4 — Token-Orbit
 * Verbindliche Spez: docs/design/DESIGN_SYSTEM_V4.md (2026-07-10)
 * Hybrid: Welt A (hell) = Landingpages, Welt B (dunkel) = Cockpit.
 * Harte Regeln: keine Emojis als Icons, kein Rot (Stop/Cap/Fehler = Gold/Amber).
 *
 * Aufbau: v3 liefert das strukturelle Geruest (bleibt liegen) und wird hier
 * importiert; alles Folgende redefiniert Tokens/Typo/Komponenten auf v4.
 */
@import '/assets/promptopoly-v3.css';

/* ------------------------------------------------------------------ */
/* §2 Typografie (self-hosted, public/assets/fonts/)                   */
/* ------------------------------------------------------------------ */
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations'),
         url('/assets/fonts/archivo-var.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('/assets/fonts/plex-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('/assets/fonts/plex-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------ */
/* §3 Farb-Tokens — Welt A (hell) als Default; redefiniert v3-Tokens   */
/* ------------------------------------------------------------------ */
:root {
    --po-paper:        #F2F4EF; /* Porzellan */
    --po-paper-soft:   #E7EBE2; /* Flaeche-2 */
    --po-paper-deep:   #DCE3D7;
    --po-card:         #F2F4EF;
    --po-card-soft:    #E7EBE2;
    --po-divider:      #C9D6CC; /* Salbei */
    --po-divider-soft: rgba(15, 32, 25, 0.08);

    --po-ink:          #0F2019; /* Tinte */
    --po-ink-2:        #3E4F47;
    --po-ink-3:        #5A6660;
    --po-ink-4:        #7E8B84;

    --po-brand:        #0D5C49; /* Waldgruen */
    --po-brand-hover:  #0A4A3A;
    --po-brand-deep:   #083B2F;
    --po-brand-soft:   rgba(13, 92, 73, 0.10);
    --po-brand-glow:   rgba(13, 92, 73, 0.18);

    --po-petrol:       #17707D;
    --po-gold:         #D8A33F; /* Token-Gold (hell) */
    --po-sage:         #C9D6CC;
    --po-flaeche-2:    #E7EBE2;

    /* Semantik: OK = gruen; Wert/Token = gold; Stop/Cap/Fehler = amber, NIE rot */
    --po-success:      #0D5C49;
    --po-success-soft: rgba(13, 92, 73, 0.10);
    --po-amber:        #B5771A;
    --po-amber-soft:   rgba(181, 119, 26, 0.12);
    --po-danger:       #94600F; /* bewusst kein Rot; AA >= 4.5 auf paper */
    --po-danger-soft:  rgba(148, 96, 15, 0.12);

    /* Typo */
    --po-font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --po-font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --po-font-mono:    'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Radii (Spez §5): Buttons 10, Karten 12–16 */
    --po-r-sm: 8px;
    --po-r-md: 10px;
    --po-r-lg: 14px;
    --po-r-pill: 999px;
}

/* ------------------------------------------------------------------ */
/* §3 Farb-Tokens — Welt B (dunkel), Scope per data-theme="b"          */
/* ------------------------------------------------------------------ */
[data-theme="b"] {
    --po-paper:        #081A1C; /* Tiefsee */
    --po-paper-soft:   #0F2A2C; /* Konsole */
    --po-paper-deep:   #061416;
    --po-card:         #0F2A2C;
    --po-card-soft:    #0C2325;
    --po-divider:      #1B3B3C;
    --po-divider-soft: rgba(233, 241, 234, 0.08);

    --po-ink:          #E9F1EA;
    --po-ink-2:        #B9CCC5;
    --po-ink-3:        #9FB8B2;
    --po-ink-4:        #7E9891;

    --po-brand:        #6FE0B4; /* Mint = Primaeraktion dunkel */
    --po-brand-hover:  #8BEDC6;
    --po-brand-deep:   #4FC49A;
    --po-brand-soft:   rgba(111, 224, 180, 0.12);
    --po-brand-glow:   rgba(111, 224, 180, 0.22);

    --po-petrol:       #3FB6C6; /* Cyan-Petrol */
    --po-gold:         #E0B356; /* Signal-Gold (dunkel) */
    --po-sage:         #1B3B3C;
    --po-flaeche-2:    #0F2A2C;

    --po-success:      #6FE0B4;
    --po-success-soft: rgba(111, 224, 180, 0.12);
    --po-amber:        #E0B356;
    --po-amber-soft:   rgba(224, 179, 86, 0.14);
    --po-danger:       #E0B356; /* kein Rot */
    --po-danger-soft:  rgba(224, 179, 86, 0.14);

    color-scheme: dark;
}

/* ------------------------------------------------------------------ */
/* Basis                                                               */
/* ------------------------------------------------------------------ */
body {
    font-family: var(--po-font-body);
    background: var(--po-paper);
    color: var(--po-ink-2);
}
::selection { background: var(--po-brand); color: var(--po-paper); }

/* ------------------------------------------------------------------ */
/* §2 Typo-Auspraegung (Display breit + schwer, Mono fuer Daten/Label) */
/* ------------------------------------------------------------------ */
.po-h1, .v3-hero__title {
    font-family: var(--po-font-display);
    font-weight: 900;
    font-stretch: 122%;
    letter-spacing: -0.025em;
    line-height: 1.0;
    color: var(--po-ink);
}
.po-h2 {
    font-weight: 800;
    font-stretch: 118%;
    letter-spacing: -0.02em;
    line-height: 1.06;
    color: var(--po-ink);
}
.po-h3, .v3-feature-card__title {
    font-family: var(--po-font-display);
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -0.015em;
    color: var(--po-ink);
}
.po-eyebrow, .v3-hero__eyebrow, .v3-trust__item {
    font-family: var(--po-font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
code, pre, .po-mono, .v3-playground__model {
    font-family: var(--po-font-mono);
}

/* ------------------------------------------------------------------ */
/* §5 Buttons (10px Radius, Primaer gefuellt, Sekundaer 2px Outline)   */
/* ------------------------------------------------------------------ */
.po-btn {
    border-radius: var(--po-r-md);
    font-family: var(--po-font-body);
    font-weight: 700;
}
.po-btn--primary {
    background: var(--po-brand);
    color: var(--po-paper);
    border-color: var(--po-brand);
}
.po-btn--ghost {
    border-width: 2px;
    border-color: var(--po-ink);
    color: var(--po-ink);
    background: transparent;
}
[data-theme="b"] .po-btn--ghost { border-color: #3A5B57; color: var(--po-ink); }
.po-btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--po-brand);
    outline-offset: 2px;
}

/* Karten (12–16px Radius) */
.po-card, .v3-feature-card, .v3-prompt-card, .v3-compare-card, .pp-plan {
    border-radius: var(--po-r-lg);
}
.v3-feature-card__icon { font-family: var(--po-font-mono); }

/* ------------------------------------------------------------------ */
/* §1 Wortmarke (Typo-Logo mit Token-O)                                */
/* ------------------------------------------------------------------ */
.v4-wordmark {
    font-family: var(--po-font-display);
    font-weight: 900;
    font-stretch: 125%;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--po-ink);
    display: inline-flex;
    align-items: center;
    text-transform: lowercase;
    text-decoration: none;
}
.v4-token {
    width: 0.72em;
    height: 0.72em;
    border-radius: 50%;
    background: var(--po-gold);
    /* Kante in ink: grenzt den Token gegen die Flaeche ab (Non-text-Kontrast
       ink/paper statt gold/paper) und haelt die Form auch auf Gold-Flaechen. */
    box-shadow: 0 0 0 1.5px var(--po-ink);
    display: inline-block;
    position: relative;
    top: 0.02em;
    margin: 0 0.04em;
}
.v4-token::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: var(--po-paper);
}

/* ------------------------------------------------------------------ */
/* §4 Token-Orbit (Bewegung aus CSS; reduced-motion => statisch)        */
/* ------------------------------------------------------------------ */
.v4-orbit { position: relative; aspect-ratio: 1; }
.v4-orbit svg { width: 100%; height: 100%; display: block; }
.v4-orbit__center {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    text-align: center; pointer-events: none;
}
.v4-orbit__num {
    font-family: var(--po-font-mono);
    font-weight: 600;
    font-size: clamp(15px, 2vw, 20px);
    color: var(--po-brand);
    font-variant-numeric: tabular-nums;
}
.v4-orbit__lbl {
    font-family: var(--po-font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--po-ink-3);
}
@keyframes v4-spin { to { transform: rotate(360deg); } }
@keyframes v4-spinBack { to { transform: rotate(-360deg); } }
@keyframes v4-pulse { 0%, 88%, 100% { opacity: var(--o, 1); } 92% { opacity: 0.15; } }
.v4-orbit .ring { transform-origin: center; }
.v4-orbit .r1 { animation: v4-spin 140s linear infinite; }
.v4-orbit .r2 { animation: v4-spinBack 200s linear infinite; }
.v4-orbit .r3 { animation: v4-spin 260s linear infinite; }
.v4-orbit .tile { animation: v4-pulse 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .v4-orbit .ring, .v4-orbit .tile { animation: none !important; }
}

/* ------------------------------------------------------------------ */
/* §5 Ledger-/Code-Bloecke (Mono auf Flaeche-2/Konsole)                */
/* ------------------------------------------------------------------ */
.v4-ledger {
    font-family: var(--po-font-mono);
    font-size: 12.5px;
    line-height: 2;
    border-radius: var(--po-r-md);
    padding: 12px 16px;
    background: var(--po-flaeche-2);
    color: var(--po-ink-2);
    overflow-x: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
[data-theme="b"] .v4-ledger { box-shadow: inset 0 0 0 1px var(--po-divider); }
.v4-ledger .ok  { color: var(--po-success); font-weight: 600; }
.v4-ledger .cap { color: var(--po-gold); font-weight: 600; }

/* Mono-Zahlen tabellar (Cockpit/Tabellen) */
.v4-num { font-family: var(--po-font-mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/* Respekt fuer reduzierte Bewegung (global, schonend)                 */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ */
/* W4-P1: Marker statt Emojis (dezenter Token-Punkt + Mono +/-)         */
/* ------------------------------------------------------------------ */
.v4-dot {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--po-gold);
    box-shadow: 0 0 0 1px var(--po-ink);
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
}
.v4-mark {
    font-family: var(--po-font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 1em;
    text-align: center;
}
.v4-mark--yes { color: var(--po-success); }
.v4-mark--no  { color: var(--po-ink-3); }

/* ------------------------------------------------------------------ */
/* W4-P1: Home-Hero — dekorativer Orbit (rein illustrativ, kein Inhalt) */
/* ------------------------------------------------------------------ */
.v3-hero { position: relative; }
.v4-hero-orbit {
    position: absolute;
    top: clamp(8px, 3vw, 32px);
    right: clamp(-40px, -2vw, 16px);
    width: clamp(180px, 26vw, 340px);
    opacity: 0.45;
    pointer-events: none;
    /* Board-Fix: zur Textseite hin aufloesen, damit die Headline nie auf Kacheln liegt */
    -webkit-mask-image: radial-gradient(closest-side at 72% 28%, #000 52%, transparent 98%);
    mask-image: radial-gradient(closest-side at 72% 28%, #000 52%, transparent 98%);
    z-index: 0;
}
.v3-hero__inner { position: relative; z-index: 1; }
@media (max-width: 900px) {
    .v4-hero-orbit { display: none; }
}

/* Ledger-Kostenbalken (Illustrationsbeispiel Kostendeckel) */
.v4-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--po-divider-soft, var(--po-divider));
    overflow: hidden;
    margin: 6px 0 2px;
}
.v4-bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--po-gold);
}

/* ------------------------------------------------------------------ */
/* W4-P1b: Erklaerende USP-Visuals (Inline-SVG, Tokens, reduced-motion) */
/* ------------------------------------------------------------------ */
.v4-vis { width: 100%; height: auto; display: block; overflow: visible; }

@keyframes v4-grow { from { transform: scaleX(0); } }
@keyframes v4-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes v4-pop  { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }

.v4-anim-grow { animation: v4-grow 1.1s cubic-bezier(.2,.7,.2,1) both; }
.v4-anim-draw {
    stroke-dasharray: 1000; stroke-dashoffset: 0;
    animation: v4-draw 1.2s ease-out both; animation-delay: var(--d, 0s);
}
.v4-anim-pop {
    transform-box: fill-box; transform-origin: center;
    animation: v4-pop .5s ease-out both; animation-delay: var(--d, 0s);
}
@media (prefers-reduced-motion: reduce) {
    .v4-anim-grow, .v4-anim-draw, .v4-anim-pop { animation: none !important; }
}

/* A) Cap-Gauge */
.v4-cap__title { font: 600 15px/1 var(--po-font-display); fill: var(--po-ink); letter-spacing: -.01em; }
.v4-cap__note  { font: 400 11px/1 var(--po-font-mono); fill: var(--po-ink-3); letter-spacing: .04em; }
.v4-cap__track { fill: var(--po-flaeche-2); }
.v4-cap__fill  { fill: var(--po-gold); }
.v4-cap__limit { stroke: var(--po-danger); stroke-width: 2.5; stroke-linecap: round; }
.v4-cap__used  { font: 600 12.5px/1 var(--po-font-mono); fill: var(--po-ink-2); font-variant-numeric: tabular-nums; }
.v4-cap__caplbl{ font: 600 12.5px/1 var(--po-font-mono); fill: var(--po-danger); font-variant-numeric: tabular-nums; }

/* B) Key-Fanout */
.v4-fan__keybox { fill: var(--po-brand); }
.v4-fan__keylbl { font: 600 11px/1 var(--po-font-mono); fill: var(--po-paper); letter-spacing: .14em; text-transform: uppercase; }
.v4-fan__key    { font: 600 13px/1 var(--po-font-mono); fill: var(--po-paper); font-variant-numeric: tabular-nums; }
.v4-fan__line   { fill: none; stroke: var(--po-brand); stroke-width: 2; stroke-linecap: round; opacity: .85; }
.v4-fan__prov   { fill: var(--po-card); stroke: var(--po-divider); stroke-width: 1.5; }
.v4-fan__provname { font: 600 13.5px/1 var(--po-font-display); fill: var(--po-ink); }
.v4-fan__provsub  { font: 400 11px/1 var(--po-font-mono); fill: var(--po-ink-3); }

/* C) Audit-Chain */
.v4-chain__block { fill: var(--po-flaeche-2); stroke: var(--po-divider); stroke-width: 1; }
.v4-chain__hash  { font: 600 14px/1 var(--po-font-mono); fill: var(--po-brand); font-variant-numeric: tabular-nums; }
.v4-chain__lbl   { font: 400 10.5px/1 var(--po-font-mono); fill: var(--po-ink-3); letter-spacing: .06em; text-transform: uppercase; }
.v4-chain__link  { font: 600 22px/1 var(--po-font-mono); fill: var(--po-gold); }

/* D) Endpoints */
.v4-ep__row    { fill: var(--po-flaeche-2); }
.v4-ep__method { font: 600 12px/1 var(--po-font-mono); fill: var(--po-petrol); letter-spacing: .04em; }
.v4-ep__path   { font: 600 14px/1 var(--po-font-mono); fill: var(--po-ink); font-variant-numeric: tabular-nums; }
.v4-ep__tag    { font: 600 11.5px/1 var(--po-font-mono); fill: var(--po-brand); letter-spacing: .03em; }

/* Welt B (Cockpit): Visuals an dunkle Flaechen anpassen */
[data-theme="b"] .v4-cap__track,
[data-theme="b"] .v4-chain__block,
[data-theme="b"] .v4-ep__row { fill: var(--po-card); }
[data-theme="b"] .v4-fan__prov { fill: var(--po-paper-soft); }

/* ------------------------------------------------------------------ */
/* W4-P1b: Proof-Sektion (Label links, Visual rechts; mobil gestapelt)  */
/* ------------------------------------------------------------------ */
.v4-proof { display: flex; flex-direction: column; gap: var(--po-7); }
.v4-proof__row {
    display: grid;
    grid-template-columns: minmax(150px, 200px) 1fr;
    gap: var(--po-5);
    align-items: center;
}
.v4-proof__label {
    font-family: var(--po-font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--po-ink-3);
}
.v4-proof__label strong {
    display: block;
    margin-bottom: 6px;
    font: 800 clamp(17px, 2vw, 20px)/1.15 var(--po-font-display);
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--po-ink);
}
.v4-proof__vis { max-width: 620px; }
@media (max-width: 720px) {
    .v4-proof__row { grid-template-columns: 1fr; gap: var(--po-3); }
}

/* ── Board-Nachfix 2026-07-10: Hero in Moodboard-Komposition (Split + Ledger + Orbit) ── */
.v4-hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,56px); align-items:center; text-align:left; }
.v4-hero-grid > .v3-playground, .v4-hero-grid > .v3-hero__proof, .v4-hero-grid > .po-proof-strip { grid-column:1 / -1; }
.v4-hero-copy .v3-hero__title { text-align:left; margin-left:0; }
.v4-hero-copy .v3-hero__sub { text-align:left; margin-left:0; max-width:52ch; }
.v4-hero-copy .v3-hero__eyebrow { text-align:left; }
.v4-hero-copy .v3-hero__cta-row { justify-content:flex-start; }
.v4-hero-orbit-side { position:relative; aspect-ratio:1/1; width:100%; max-width:440px; justify-self:center; }
.v4-hero-orbit-side .v4-orbit { width:100%; height:100%; display:block; }
.v4-orbit-center { position:absolute; inset:0; display:grid; place-items:center; text-align:center; pointer-events:none; }
.v4-orbit-center__num { font-family:var(--po-font-mono); font-weight:600; font-size:clamp(1rem,1.8vw,1.3rem); color:var(--po-brand); }
.v4-orbit-center__lbl { font-family:var(--po-font-mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--po-ink-3); margin-top:2px; }
.v4-ledger { font-family:var(--po-font-mono); font-size:0.8rem; line-height:2; background:var(--po-paper-deep); border-radius:10px; padding:12px 16px; margin-top:var(--po-4); overflow-x:auto; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--po-ink-2); }
.v4-ledger__ok { color:var(--po-brand); font-weight:600; }
.v4-ledger__cap { color:#94600F; font-weight:600; }
.v4-ledger__note { font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--po-ink-4); margin-top:4px; }
@media (max-width: 860px) {
  .v4-hero-grid { grid-template-columns:1fr; }
  .v4-hero-orbit-side { order:-1; max-width:280px; margin:0 auto; }
}