:root{--paper: #F7F7F5;--surface: #FFFFFF;--ink: #1A1A1A;--graphite: #4A4A4A;--concrete: #8A8A8A;--wire: #E2E2DF;--wash: #F0F0ED;--teal: #0D9488;--teal-hover: #0F766E;--teal-muted: #CCFBF1;--green: #16A34A;--green-bg: rgba(22,163,74,.1);--shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);--shadow-elevated: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-16: 64px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--font-display: "Satoshi", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-display);font-size:1rem;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}::selection{background:var(--teal-muted);color:var(--ink)}.skip-link{position:absolute;top:-100%;left:var(--space-4);background:var(--teal);color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:500;z-index:200;text-decoration:none}.skip-link:focus{top:var(--space-2)}:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:2px}.mono{font-family:var(--font-mono)}.label{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-hover);line-height:1.33}h1{font-size:clamp(2.5rem,5vw,3.75rem);font-weight:700;line-height:1.05;letter-spacing:-.03em}h2{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;line-height:1.15;letter-spacing:-.025em}h3{font-size:1.25rem;font-weight:600;line-height:1.3;letter-spacing:-.015em;overflow-wrap:break-word;word-break:break-word}.body-large{font-size:1.125rem;line-height:1.7;color:var(--graphite);max-width:50ch}.container{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}section{padding:clamp(4rem,8vw,7rem) 0}nav{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--wire);padding:var(--space-4) 0}nav .container{display:flex;align-items:center;justify-content:space-between}.nav-brand{font-weight:700;font-size:1.125rem;color:var(--ink);text-decoration:none;white-space:nowrap}.nav-links{display:flex;gap:var(--space-6);list-style:none}.nav-links a{font-size:.875rem;font-weight:500;color:var(--graphite);text-decoration:none;transition:color .15s ease;white-space:nowrap}.nav-links a:hover{color:var(--ink)}.nav-toggle{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;color:var(--ink);font-size:1.5rem}.btn-primary{display:inline-flex;align-items:center;gap:var(--space-2);padding:12px 20px;min-height:44px;background:var(--teal-hover);color:#fff;font-family:var(--font-display);font-size:.875rem;font-weight:500;letter-spacing:.01em;border:none;border-radius:var(--radius-md);text-decoration:none;cursor:pointer;transition:background-color .15s ease,transform .1s ease;will-change:transform}.btn-primary:hover{background:#115e59;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{display:inline-flex;align-items:center;gap:var(--space-2);padding:12px 20px;min-height:44px;background:transparent;color:var(--ink);font-family:var(--font-display);font-size:.875rem;font-weight:500;border:1px solid var(--wire);border-radius:var(--radius-md);text-decoration:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.btn-secondary:hover{background:var(--wash);border-color:var(--concrete)}.metrics-strip{display:flex;gap:var(--space-10)}.metric{display:flex;flex-direction:column;min-width:0}.metric-value{font-family:var(--font-mono);font-size:1.75rem;font-weight:700;color:var(--ink);line-height:1.1}.metric-label{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;color:var(--graphite);text-transform:uppercase;letter-spacing:.02em;margin-top:var(--space-1)}.metric-card{background:var(--wash);border-radius:var(--radius-lg);padding:var(--space-6);min-width:0}.metric-card .metric-value{font-size:2.25rem}.metric-card .metric-label{margin-top:var(--space-2)}.terminal-block{background:#1a1a1a;border:1px solid #2A2A28;border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);font-family:var(--font-mono);font-size:.8125rem;line-height:1.7;color:#ededeb;position:relative;overflow-x:auto;overflow-y:hidden}.terminal-block:before{position:absolute;top:var(--space-3);right:var(--space-4);font-family:var(--font-mono);font-size:.6875rem;text-transform:uppercase;color:#8a8a86}.hero-visual:before{content:"architektur"}.results-detail:before{content:"tests"}.terminal-line{white-space:pre}.terminal-teal{color:#2dd4bf}.terminal-dim{color:#8a8a86}.terminal-green{color:#4ade80}.terminal-amber{color:#fcd34d}.status-badge{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--green-bg);color:var(--green);font-family:var(--font-mono);font-size:.6875rem;font-weight:500;padding:2px 8px;border-radius:var(--radius-sm);border:1px solid rgba(22,163,74,.3)}.status-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.tech-badge{background:var(--teal-muted);color:var(--teal-hover);font-family:var(--font-mono);font-size:.6875rem;font-weight:500;padding:2px 8px;border-radius:var(--radius-sm)}.hero{padding:clamp(5rem,10vw,8rem) 0 clamp(4rem,8vw,6rem);background:var(--paper)}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}.hero-content{max-width:560px;min-width:0}.hero-label{margin-bottom:var(--space-4)}.hero h1{margin-bottom:var(--space-5)}.hero .body-large{margin-bottom:var(--space-8)}.hero-cta{display:flex;gap:var(--space-4);margin-bottom:var(--space-10)}.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-top:var(--space-10)}.flow-step{background:var(--surface);border:1px solid var(--wire);border-radius:var(--radius-lg);padding:var(--space-5);position:relative;min-width:0;transition:box-shadow .2s ease,border-color .2s ease;will-change:box-shadow}.flow-step:hover{box-shadow:var(--shadow-elevated);border-color:var(--concrete)}.flow-step-number{font-family:var(--font-mono);font-size:.6875rem;font-weight:700;color:var(--teal);margin-bottom:var(--space-2)}.flow-step h3{margin-bottom:var(--space-2)}.flow-step p{font-size:.875rem;color:var(--graphite);line-height:1.55}.flow-arrow{position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--concrete);font-size:1.25rem;z-index:2}.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-10)}.stack-card{background:var(--wash);border-radius:var(--radius-lg);padding:var(--space-6);min-width:0}.stack-category{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--teal);margin-bottom:var(--space-4)}.stack-items{display:flex;flex-wrap:wrap;gap:var(--space-2)}.results-grid{display:grid;grid-template-columns:55% 45%;gap:var(--space-8);align-items:start;margin-top:var(--space-10)}.results-metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-10)}.decision-card{background:var(--surface);border:1px solid var(--wire);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-card);min-width:0;transition:box-shadow .2s ease,transform .2s ease;will-change:transform,box-shadow}.decision-card:hover{box-shadow:var(--shadow-elevated);transform:translateY(-2px)}.decision-label{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--teal);margin-bottom:var(--space-3)}.decision-card h3{margin-bottom:var(--space-3)}.decision-card p{color:var(--graphite);font-size:.875rem;line-height:1.55}.project-grid{display:grid;grid-template-columns:55% 45%;gap:var(--space-6);margin-top:var(--space-8)}.project-card{background:var(--surface);border:1px solid var(--wire);border-radius:var(--radius-lg);padding:var(--space-6);text-decoration:none;color:inherit;box-shadow:var(--shadow-card);min-width:0;transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease;will-change:transform,box-shadow;display:flex;flex-direction:column;gap:var(--space-3)}.project-card:hover{box-shadow:var(--shadow-elevated);border-color:var(--teal);transform:translateY(-3px)}.project-card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-width:0}.project-card h3{font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-card p{font-size:.875rem;color:var(--graphite);line-height:1.5;flex-grow:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.project-card-meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:auto}.lang-badge{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;padding:2px 8px;border-radius:var(--radius-sm);background:var(--wash);color:var(--graphite);border:1px solid var(--wire);white-space:nowrap}.cat-badge{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;padding:2px 8px;border-radius:var(--radius-sm);background:var(--teal-muted);color:var(--teal-hover);white-space:nowrap}.filter-bar{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-6)}.filter-btn{font-family:var(--font-mono);font-size:.75rem;font-weight:500;padding:6px 14px;border-radius:var(--radius-md);min-height:44px;background:var(--wash);color:var(--graphite);border:1px solid var(--wire);cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center}.filter-btn:hover{border-color:var(--teal);color:var(--teal)}.filter-btn.active{background:var(--teal);color:#fff;border-color:var(--teal)}.hub-hero{padding:clamp(5rem,10vw,8rem) 0 clamp(3rem,6vw,5rem)}.hub-hero h1{margin-bottom:var(--space-4)}.hub-hero .body-large{margin-bottom:var(--space-8);max-width:50ch}footer{padding:var(--space-10) 0;border-top:1px solid var(--wire);background:var(--paper)}.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4)}.footer-text{font-size:.75rem;color:var(--graphite)}.footer-links{display:flex;gap:var(--space-6)}.footer-links a{font-size:.875rem;color:var(--graphite);text-decoration:none;transition:color .15s ease}.footer-links a:hover{color:var(--teal)}.reveal{opacity:0;transform:translateY(12px);transition:opacity .25s cubic-bezier(.25,.1,.25,1),transform .25s cubic-bezier(.25,.1,.25,1);will-change:opacity,transform}.reveal.visible{opacity:1;transform:translateY(0);will-change:auto}@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;will-change:auto}.status-dot{animation:none;opacity:1}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-width:1024px){.hero-grid{grid-template-columns:1fr;gap:var(--space-8)}.flow-grid{grid-template-columns:1fr 1fr}.flow-arrow{display:none}.results-grid{grid-template-columns:1fr}.stack-grid,.project-grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.flow-grid,.decision-grid,.stack-grid,.project-grid{grid-template-columns:1fr}.results-metrics{grid-template-columns:1fr 1fr}.metrics-strip{flex-wrap:wrap;gap:var(--space-6)}.metric{min-width:calc(50% - var(--space-3))}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:var(--space-4);padding:var(--space-6);background:var(--paper);border-bottom:1px solid var(--wire);box-shadow:var(--shadow-elevated)}.nav-links.nav-open{display:flex}.nav-toggle{display:inline-flex}.hero-cta{flex-direction:column}.btn-primary,.btn-secondary{width:100%;justify-content:center}.filter-bar{gap:var(--space-1)}.filter-btn{font-size:.6875rem;padding:4px 10px;min-height:44px}.terminal-block{font-size:.75rem;padding:var(--space-4)}.footer-inner{flex-direction:column;align-items:flex-start}}@media print{nav,.skip-link,.hero-cta,.filter-bar,.nav-toggle{display:none}.reveal{opacity:1;transform:none}body{background:#fff;color:#000}.project-card{break-inside:avoid;box-shadow:none;border:1px solid #ccc}}:root{--atlas-gap: 24px}.layer-section{padding:clamp(3.5rem,7vw,5.5rem) 0;border-top:1px solid var(--wire)}.layer-section .label{margin-bottom:var(--space-3)}.layer-section h2{font-size:clamp(1.75rem,3.5vw,2.5rem);margin-bottom:var(--space-5);max-width:28ch}.layer-section .body-large{margin-bottom:var(--space-8);max-width:65ch}.layer-section .metrics-strip{margin:var(--space-8) 0}.three-layer{display:grid;gap:var(--space-3);margin-top:var(--space-8)}.layer-band{display:grid;grid-template-columns:auto auto 1fr;gap:var(--space-5);align-items:center;padding:var(--space-5) var(--space-6);background:var(--wash);border:1px solid var(--wire);border-radius:var(--radius-lg);text-decoration:none;transition:all .16s ease}.layer-band:hover{border-color:var(--teal);transform:translate(4px)}.band-num{font-size:.75rem;color:var(--teal-hover);font-weight:700;letter-spacing:.04em}.band-name{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--ink)}.band-tag{font-size:.875rem;color:var(--graphite);line-height:1.5}.hero-card{display:block;padding:var(--space-6);background:var(--wash);border:1px solid var(--wire);border-radius:var(--radius-lg);text-decoration:none;margin-bottom:var(--space-6)}.hero-card.project-card:hover{transform:translateY(-2px);border-color:var(--teal)}.hero-card .project-card-header h3{font-size:1.25rem}.hero-card-provisional{border-left:4px solid #d97706}.provisional-banner{font-size:.75rem;color:#92400e;background:#fef3c7;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);margin-bottom:var(--space-4)}.callout-heading{font-size:.6875rem;color:var(--graphite);text-transform:uppercase;letter-spacing:.06em;margin:var(--space-8) 0 var(--space-4);font-weight:600}.callout-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}@media(max-width:640px){.callout-grid{grid-template-columns:1fr;gap:var(--space-4)}}.atlas{display:grid;grid-template-columns:1fr;gap:var(--atlas-gap);margin-top:var(--space-6)}.atlas-meta .terminal-line{font-size:.875rem}.atlas-meta strong{color:#fff;font-weight:600}.atlas-link{display:inline-block;font-size:.75rem;color:#2dd4bf;margin-top:var(--space-3);text-decoration:none;font-weight:500}.atlas-link:hover{text-decoration:underline;color:#5eead4}.atlas-row{display:grid;grid-template-columns:100px 2fr 2fr 1fr;gap:var(--atlas-gap);align-items:stretch;padding:var(--space-4);background:var(--paper);border:1px solid var(--wire);border-radius:var(--radius-lg)}.area-label{font-size:.6875rem;color:var(--teal-hover);text-transform:uppercase;letter-spacing:.08em;font-weight:700;align-self:center}.atlas-cells{display:grid;gap:var(--space-3);align-content:start}.atlas-cell{display:block;padding:var(--space-3) var(--space-4);background:var(--wash);border:1px solid var(--wire);border-radius:var(--radius-md);text-decoration:none;transition:all .14s ease}.atlas-cell:hover{border-color:var(--teal);background:var(--paper);transform:translateY(-1px)}.atlas-cell .cell-name{display:block;font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--ink);margin-bottom:2px}.atlas-cell .cell-tag{display:block;font-size:.6875rem;color:var(--graphite);font-weight:500}.atlas-cell.cross-cut{border-left:3px solid var(--teal);background:var(--teal-muted)}.atlas-cell.cross-cut:hover{background:var(--paper)}@media(max-width:1024px){.atlas-row{grid-template-columns:1fr;gap:var(--space-3)}.area-label{padding-bottom:var(--space-2);border-bottom:1px solid var(--wire)}}html,body{overflow-x:clip;max-width:100vw}.atlas,.atlas-row,.atlas-cells,.atlas-cell,.layer-band,.three-layer{min-width:0}.atlas-cell .cell-name,.atlas-cell .cell-tag,.layer-band .band-tag,.layer-band .band-name{word-break:break-word}.terminal-block{max-width:100%;box-sizing:border-box}.atlas-meta{overflow-wrap:anywhere}@media(max-width:480px){.terminal-block{font-size:.7rem;padding:var(--space-3)}.atlas-row{padding:var(--space-3)}.atlas-cell{padding:var(--space-2) var(--space-3)}.layer-band{grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-4)}.layer-band .band-num{font-size:.6875rem}.hero h1{font-size:clamp(1.75rem,8vw,2.25rem)}.layer-section h2{font-size:clamp(1.5rem,6vw,1.875rem)}}
