/* ===================================
   KODASPEC.DE
   Legal Infrastructure Layer
   =================================== */

:root {
    /* Blue scale — institutional navy/slate */
    --blue-950: #060c1a;
    --blue-900: #0f172a;
    --blue-800: #1e2937;
    --blue-700: #334155;
    --blue-600: #475569;
    --blue-500: #64748b;
    --blue-400: #94a3b8;
    --blue-300: #cbd5e1;
    --blue-200: #e2e8f0;
    --blue-100: #f1f5f9;
    --blue-50:  #f8fafc;

    /* Paper / neutrals */
    --paper:        #fafaf7;
    --paper-pure:   #ffffff;
    --ink:          #0f172a;
    --ink-strong:   #020617;
    --ink-muted:    #475569;
    --ink-subtle:   #94a3b8;
    --line:         #e2e8f0;
    --hairline:     #f1f5f9;

    /* Single accent — used only as status / liveness indicator */
    --emerald:      #10b981;
    --emerald-soft: #34d399;

    /* Type stack — no Google Fonts, no CDNs */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

    --container: 1200px;
    --column:    680px;

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 1rem;
    --s-4: 1.5rem;
    --s-5: 2rem;
    --s-6: 3rem;
    --s-7: 5rem;
    --s-8: 7rem;
    --s-9: 10rem;

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-pill: 9999px;
}

/* ===== Reset ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper-pure);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

/* ===== Typography ===== */
h1, h2, h3, h4 {
    font-weight: 600;
    color: var(--ink-strong);
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.display {
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.0;
}

.h1 {
    font-size: clamp(2rem, 4vw, 2.625rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.lead {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink-muted);
    font-weight: 400;
}

p { color: var(--ink-muted); }

p + p { margin-top: var(--s-3); }

strong { font-weight: 600; color: var(--ink-strong); }

/* Mono labels */
.mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    font-weight: 500;
}

/* ===== Layout primitives ===== */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-4);
}

@media (min-width: 768px) {
    .container { padding: 0 var(--s-6); }
}

/* ===== Header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 1.375rem;
    letter-spacing: -0.025em;
    color: var(--ink-strong);
    text-decoration: none;
}

.wordmark:hover { opacity: 0.7; }

.ks-badge {
    width: 32px;
    height: 32px;
    background: var(--ink-strong);
    color: var(--paper-pure);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.site-nav {
    display: none;
    align-items: center;
    gap: var(--s-5);
}

@media (min-width: 768px) {
    .site-nav { display: flex; }
}

.site-nav a {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-muted);
}

.site-nav a:hover { color: var(--ink-strong); }
.site-nav a.is-current { color: var(--ink-strong); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
}

.btn-primary {
    background: var(--ink-strong);
    color: var(--paper-pure);
}

.btn-primary:hover {
    background: var(--blue-700);
    color: var(--paper-pure);
}

.btn-secondary {
    background: transparent;
    color: var(--paper-pure);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--paper-pure);
}

.btn-light {
    background: var(--paper-pure);
    color: var(--ink-strong);
}

.btn-light:hover {
    background: var(--blue-100);
    color: var(--ink-strong);
}

.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    border-radius: var(--radius-lg);
}

.btn-arrow::after {
    content: "→";
    margin-left: 4px;
    transition: transform 0.15s ease;
}

.btn-arrow:hover::after {
    transform: translateX(2px);
}

/* ===== Hero — Dark Blue ===== */
.hero {
    position: relative;
    background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 100%);
    color: var(--paper-pure);
    padding: clamp(var(--s-7), 12vw, var(--s-9)) 0;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at 20% 30%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 20% 30%, black 0%, transparent 70%);
}

.hero-inner {
    position: relative;
    max-width: 920px;
}

.hero h1 {
    color: var(--paper-pure);
    margin: var(--s-5) 0 var(--s-5);
    max-width: 14ch;
}

.hero-lead {
    font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
    line-height: 1.55;
    color: var(--blue-300);
    max-width: 36rem;
    font-weight: 400;
}

.hero-disclaim {
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 36rem;
}

.hero-disclaim p {
    color: var(--blue-400);
    font-size: 1rem;
}

.hero-disclaim p + p { margin-top: var(--s-1); }

.hero-disclaim .strong-line {
    color: var(--paper-pure);
    font-weight: 500;
    margin-top: var(--s-3);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-meta span {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-400);
}

/* Status pill */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.4375rem 0.875rem 0.4375rem 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    color: var(--paper-pure);
    font-weight: 400;
}

.status-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--emerald-soft);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-pill .dot { animation: none; }
}

/* ===== Section ===== */
.section {
    padding: clamp(var(--s-7), 9vw, var(--s-8)) 0;
    background: var(--paper-pure);
    border-bottom: 1px solid var(--hairline);
}

.section--alt {
    background: var(--blue-50);
}

.section--dark {
    background: var(--blue-900);
    color: var(--blue-300);
    border-bottom: 0;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark .h1,
.section--dark .h2,
.section--dark strong {
    color: var(--paper-pure);
}

.section--dark p { color: var(--blue-400); }
.section--dark .lead { color: var(--blue-300); }

/* Section grid: sticky label left, body right */
.section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
}

@media (min-width: 768px) {
    .section-grid {
        grid-template-columns: 5fr 7fr;
        gap: var(--s-6);
        align-items: start;
    }

    .section-grid .section-label {
        position: sticky;
        top: 7rem;
        align-self: start;
    }
}

@media (min-width: 1024px) {
    .section-grid { gap: var(--s-7); }
}

.section-number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--ink-subtle);
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--s-3);
}

.section--dark .section-number { color: var(--blue-400); }

.section-title { margin-bottom: var(--s-3); }

.section-body { max-width: 44rem; }

.section-body p { line-height: 1.7; }

.section-body p + p,
.section-body p + ul,
.section-body ul + p,
.section-body p + .callout,
.section-body .callout + p {
    margin-top: var(--s-3);
}

/* ===== Em-dash list ===== */
.dash-list {
    list-style: none;
    padding: 0;
    margin: var(--s-3) 0;
}

.dash-list li {
    position: relative;
    padding-left: 1.5em;
    line-height: 1.7;
    margin-bottom: var(--s-1);
    color: var(--ink-muted);
}

.dash-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--ink-subtle);
}

.section--dark .dash-list li { color: var(--blue-400); }
.section--dark .dash-list li::before { color: var(--blue-500); }

/* ===== Callout box ===== */
.callout {
    margin-top: var(--s-5);
    padding: var(--s-5);
    background: var(--blue-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
}

.callout-title {
    font-weight: 600;
    color: var(--ink-strong);
    margin-bottom: var(--s-2);
}

.callout ul.dash-list { margin: 0; }

.section--dark .callout {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ===== Numbered list — Ansatz section ===== */
.numbered-list {
    list-style: none;
    padding: 0;
    margin: var(--s-5) 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

.numbered-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-4);
    align-items: start;
}

.numbered-list .num {
    font-family: var(--font-mono);
    color: var(--emerald-soft);
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 500;
}

.numbered-list strong {
    display: block;
    color: var(--paper-pure);
    margin-bottom: 4px;
}

.numbered-list .meta {
    color: var(--blue-400);
    font-size: 0.9375rem;
}

/* ===== Pull statement ===== */
.statement {
    margin: var(--s-5) 0 0;
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink-strong);
    letter-spacing: -0.015em;
}

.section--dark .statement {
    color: var(--paper-pure);
    border-top-color: rgba(255, 255, 255, 0.15);
}

.statement-accent {
    color: var(--emerald);
    font-weight: 500;
}

.section--dark .statement-accent { color: var(--emerald-soft); }

/* ===== Prose (legal pages, long-text) ===== */
.prose {
    max-width: 44rem;
    margin: 0 auto;
}

.prose-header {
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--line);
}

.prose-header .section-number {
    margin-bottom: var(--s-3);
}

.prose-header h1 {
    font-size: clamp(2rem, 4vw, 2.625rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
}

.prose h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink-strong);
    letter-spacing: -0.005em;
    line-height: 1.4;
    margin: var(--s-6) 0 var(--s-2);
}

.prose h2:first-of-type { margin-top: 0; }

.prose p {
    line-height: 1.7;
    margin-bottom: var(--s-3);
}

.prose ul.dash-list {
    margin: var(--s-3) 0 var(--s-4);
}

.prose strong {
    color: var(--ink-strong);
    font-weight: 600;
}

/* ===== Deliverables (border-l blocks) ===== */
.deliverables {
    list-style: none;
    padding: 0;
    margin: var(--s-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.deliverables li {
    padding: var(--s-2) 0 var(--s-2) var(--s-4);
    border-left: 3px solid var(--ink-strong);
}

.deliverables strong {
    display: block;
    color: var(--ink-strong);
    margin-bottom: 2px;
    font-size: 1.0625rem;
}

.deliverables .meta {
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

/* ===== Horizon (Wo wir hingehen) ===== */
.horizon {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    margin-top: var(--s-5);
}

.horizon-item .label {
    color: var(--emerald);
    font-weight: 500;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: var(--s-2);
    display: block;
}

.horizon-item p {
    line-height: 1.65;
    color: var(--ink-muted);
}

/* ===== Footer ===== */
.site-footer {
    background: var(--blue-950);
    color: var(--blue-400);
    padding: var(--s-7) 0 var(--s-5);
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    margin-bottom: var(--s-7);
}

@media (min-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr 2fr;
        gap: var(--s-7);
    }
}

.footer-brand .wordmark {
    color: var(--paper-pure);
    margin-bottom: var(--s-3);
}

.footer-brand .ks-badge {
    background: var(--paper-pure);
    color: var(--ink-strong);
}

.footer-brand p {
    color: var(--blue-400);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
}

@media (min-width: 640px) {
    .footer-links-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-col .mono {
    color: var(--blue-500);
    margin-bottom: var(--s-3);
    display: block;
}

.footer-col a,
.footer-col p {
    display: block;
    color: var(--blue-300);
    font-size: 0.9375rem;
    line-height: 1.9;
}

.footer-col a:hover { color: var(--paper-pure); }

.footer-col a.contact-link {
    color: var(--paper-pure);
    border-bottom: 1px solid var(--blue-700);
}

.footer-col a.contact-link:hover {
    border-bottom-color: var(--paper-pure);
}

.footer-bottom {
    padding-top: var(--s-4);
    border-top: 1px solid var(--blue-800);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
}

.footer-bottom > div {
    color: var(--blue-500);
    font-size: 0.8125rem;
}

.footer-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-500);
}

/* =================================== */
/*  POSITION PAGE — Full Dark           */
/* =================================== */

[data-theme="dark"] {
    --bg-page: var(--blue-950);
}

[data-theme="dark"] body {
    background: var(--blue-950);
    color: var(--blue-300);
}

[data-theme="dark"] .site-header {
    background: rgba(6, 12, 26, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .wordmark { color: var(--paper-pure); }

[data-theme="dark"] .ks-badge {
    background: var(--paper-pure);
    color: var(--blue-950);
}

[data-theme="dark"] .site-nav a { color: var(--blue-400); }
[data-theme="dark"] .site-nav a:hover { color: var(--paper-pure); }
[data-theme="dark"] .site-nav a.is-current { color: var(--paper-pure); }

[data-theme="dark"] .hero {
    background: var(--blue-950);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .hero-grid {
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
}

[data-theme="dark"] .position-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}

[data-theme="dark"] .position-eyebrow .marker {
    width: 32px;
    height: 1px;
    background: var(--blue-500);
}

[data-theme="dark"] .position-tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--blue-300);
    text-transform: uppercase;
}

[data-theme="dark"] .position-display {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.0;
    color: var(--paper-pure);
    max-width: 16ch;
    margin: var(--s-5) 0 var(--s-5);
}

[data-theme="dark"] .position-lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    line-height: 1.55;
    color: var(--blue-300);
    max-width: 36rem;
}

[data-theme="dark"] .position-lead.muted { color: var(--blue-400); }
[data-theme="dark"] .position-lead.strong { color: var(--paper-pure); font-weight: 500; }

[data-theme="dark"] .position-lead + .position-lead { margin-top: var(--s-3); }

/* Position section — large numbered blocks */
[data-theme="dark"] .position-section {
    padding: clamp(var(--s-7), 10vw, var(--s-8)) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .position-section:first-of-type { border-top: 0; }

[data-theme="dark"] .position-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
}

[data-theme="dark"] .position-num {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--paper-pure);
    letter-spacing: -0.02em;
    line-height: 1;
}

[data-theme="dark"] .position-body { max-width: 44rem; }

[data-theme="dark"] .position-headline {
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--paper-pure);
    margin-bottom: var(--s-4);
}

[data-theme="dark"] .position-headline .dim {
    display: block;
    color: var(--blue-400);
    font-weight: 400;
}

[data-theme="dark"] .position-body p {
    color: var(--blue-300);
    font-size: 1.0625rem;
    line-height: 1.7;
}

[data-theme="dark"] .position-body p + p { margin-top: var(--s-2); }

[data-theme="dark"] .position-body p.spacer { margin-top: var(--s-4); }

[data-theme="dark"] .position-body p.muted { color: var(--blue-500); }

[data-theme="dark"] .position-body p.strong {
    color: var(--paper-pure);
    font-weight: 500;
}

[data-theme="dark"] .position-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-5);
    margin: var(--s-4) 0;
    padding: var(--s-3) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .position-tags span {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--paper-pure);
    text-transform: uppercase;
}

[data-theme="dark"] .position-statement {
    margin: var(--s-5) 0 0;
    padding-top: var(--s-4);
    border-top: 1px solid var(--paper-pure);
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--paper-pure);
    letter-spacing: -0.015em;
}

[data-theme="dark"] .position-statement em {
    font-style: normal;
    color: var(--blue-400);
}

@media (min-width: 768px) {
    [data-theme="dark"] .position-grid {
        grid-template-columns: 200px 1fr;
        gap: var(--s-6);
        align-items: start;
    }

    [data-theme="dark"] .position-num {
        position: sticky;
        top: 7rem;
    }
}

@media (min-width: 1024px) {
    [data-theme="dark"] .position-grid {
        grid-template-columns: 240px 1fr;
        gap: var(--s-7);
    }
}

/* Position page footer */
[data-theme="dark"] .site-footer {
    background: var(--blue-950);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== Selection / Focus ===== */
::selection {
    background: var(--ink-strong);
    color: var(--paper-pure);
}

[data-theme="dark"] ::selection {
    background: var(--paper-pure);
    color: var(--blue-950);
}

:focus-visible {
    outline: 2px solid var(--emerald);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}