/* Code Noah — Designsystem, abgeleitet aus gannaca.com v3.1 */
:root {
  --ink:#0A0A0A; --ink-deep:#000; --surface:#111;
  --hairline:rgba(255,255,255,0.08); --line:rgba(255,255,255,0.14); --line-strong:rgba(255,255,255,0.24);
  --text-on-ink:rgba(255,255,255,0.96); --text-mute:rgba(255,255,255,0.58); --text-dim:rgba(255,255,255,0.55);
  --paper:#EDEAE4; --paper-warm:#E5E1D9; --paper-hair:rgba(26,24,21,0.10); --paper-line:rgba(26,24,21,0.18);
  --on-paper:#1A1815; --on-paper-mute:#5A5249; --on-paper-dim:#67604D;
  --copper:#9A6A36; --copper-on-ink:#C68A4E; --copper-ink:#7A4A1E;
  --font-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'DM Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --font-hand:'Caveat',cursive;
  --t-micro:0.6875rem; --t-meta:0.75rem; --t-small:0.875rem; --t-body:1rem; --t-lead:1.1875rem;
  --t-h4:1.375rem; --t-h3:clamp(1.5rem,2.3vw,2rem); --t-h2:clamp(2rem,4.5vw,3.5rem);
  --t-h1:clamp(2.4rem,5.6vw,4.6rem); --t-display:clamp(2.5rem,7vw,5.6rem);
  --tk-wide:0.16em; --grid-max:1180px; --gutter:clamp(20px,4.5vw,64px); --section:clamp(88px,12vw,168px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ink);color:var(--text-on-ink);font-family:var(--font-sans);font-size:var(--t-body);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{max-width:100%;height:auto}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--copper);color:#fff;padding:.6rem 1rem;z-index:100;font-family:var(--font-mono);font-size:var(--t-small)}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--copper-on-ink);outline-offset:3px}
.wrap{max-width:var(--grid-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.eyebrow{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:var(--tk-wide);text-transform:uppercase;color:var(--copper-on-ink)}
.paper .eyebrow{color:var(--copper-ink)}
.serif{font-family:var(--font-serif)}
h1,h2,h3{font-family:var(--font-serif);font-weight:500;line-height:1.12;margin:0 0 .5em;letter-spacing:-0.01em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
p.lead{font-size:var(--t-lead);line-height:1.6}
.mute{color:var(--text-mute)} .paper .mute{color:var(--on-paper-mute)}
section{padding:var(--section) 0}
.paper{background:var(--paper);color:var(--on-paper)}
.paper-warm{background:var(--paper-warm);color:var(--on-paper)}
.hairline-top{border-top:1px solid var(--hairline)}
.paper .hairline-top{border-top:1px solid var(--paper-hair)}
/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
.brand{font-family:var(--font-mono);font-size:var(--t-small);letter-spacing:var(--tk-wide);text-transform:uppercase;text-decoration:none;color:var(--text-on-ink)}
.brand b{color:var(--copper-on-ink);font-weight:500}
.head-cta{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--copper-on-ink);padding:.55rem 1rem;border-radius:2px;white-space:nowrap}
.head-cta:hover{background:#d79a5e}
/* hero */
.hero{padding:calc(var(--section)*1.05) 0 var(--section)}
.hero h1{max-width:22ch}
.hero .lead{max-width:58ch;color:var(--text-mute)}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.4rem;font-family:var(--font-mono);font-size:var(--t-meta);color:var(--text-dim);letter-spacing:.06em}
.hero-meta span b{color:var(--text-on-ink);font-weight:500}
/* buttons */
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.btn{display:inline-block;text-decoration:none;font-family:var(--font-mono);font-size:var(--t-small);letter-spacing:.06em;padding:.9rem 1.5rem;border-radius:2px}
.btn-primary{background:var(--copper-on-ink);color:var(--ink)}
.btn-primary:hover{background:#d79a5e}
.btn-ghost{border:1px solid var(--line-strong);color:var(--text-on-ink)}
.btn-ghost:hover{border-color:var(--copper-on-ink);color:var(--copper-on-ink)}
.paper .btn-primary{background:var(--copper-ink);color:var(--paper)}
.paper .btn-primary:hover{background:#8a5526}
.paper .btn-ghost{border:1px solid var(--paper-line);color:var(--on-paper)}
.paper .btn-ghost:hover{border-color:var(--copper-ink);color:var(--copper-ink)}
/* grids & cards */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.4rem,3vw,3rem)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1.2rem,2.5vw,2.2rem)}
.card{border:1px solid var(--line);padding:1.6rem;border-radius:2px}
.paper .card{border-color:var(--paper-line)}
.card .num{font-family:var(--font-mono);color:var(--copper-on-ink);font-size:var(--t-meta);letter-spacing:var(--tk-wide)}
.paper .card .num{color:var(--copper-ink)}
.card h3{font-size:var(--t-h4);margin-top:.6rem}
/* quote */
.pull{font-family:var(--font-serif);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.35;font-style:italic;max-width:30ch;margin:0}
.pull-src{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.08em;margin-top:1.2rem;color:var(--text-mute)}
.paper .pull-src{color:var(--on-paper-mute)}
/* price block */
.price-figure{font-family:var(--font-serif);font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1}
.price-note{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.06em;color:var(--on-paper-mute)}
/* faq */
details{border-top:1px solid var(--paper-hair)}
details:last-of-type{border-bottom:1px solid var(--paper-hair)}
summary{cursor:pointer;padding:1.2rem 2.4rem 1.2rem 0;font-family:var(--font-serif);font-size:var(--t-h4);position:relative;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);font-family:var(--font-mono);color:var(--copper-ink)}
details[open] summary::after{content:"–"}
details .a{padding:0 0 1.4rem;max-width:68ch;color:var(--on-paper-mute)}
/* footer */
.site-foot{background:var(--ink-deep);border-top:1px solid var(--hairline);padding:4rem 0 3rem;font-size:var(--t-small);color:var(--text-mute)}
.site-foot h2{font-size:var(--t-h4);color:var(--text-on-ink)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.4rem}
.site-foot a{color:var(--text-mute)}
.site-foot a:hover{color:var(--copper-on-ink)}
.foot-legal{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between}
/* prose (artikel) */
.prose{max-width:66ch}
.prose p{margin:0 0 1.4em;font-size:var(--t-lead);line-height:1.75;font-family:var(--font-serif)}
.prose .standfirst{font-size:var(--t-h4);line-height:1.5}
/* cockpit */
.cockpit-field{margin-bottom:2.2rem}
.cockpit-field label{display:block;font-family:var(--font-serif);font-size:var(--t-h4);margin-bottom:.6rem}
.cockpit-field .hint{font-size:var(--t-small);color:var(--on-paper-mute);margin-bottom:.8rem;max-width:60ch}
.cockpit-field textarea,.cockpit-field input[type=text]{width:100%;background:#fff;border:1px solid var(--paper-line);border-radius:2px;padding:.9rem 1rem;font-family:var(--font-sans);font-size:var(--t-body);color:var(--on-paper);min-height:3.2rem}
.cockpit-field textarea{min-height:7rem;resize:vertical}
.choice-row{display:flex;flex-wrap:wrap;gap:.6rem}
.choice-row input{position:absolute;opacity:0;pointer-events:none}
.choice-row label{display:inline-block;border:1px solid var(--paper-line);border-radius:2px;padding:.55rem 1rem;font-family:var(--font-mono);font-size:var(--t-small);cursor:pointer}
.choice-row input:checked + label{background:var(--copper-ink);color:var(--paper);border-color:var(--copper-ink)}
.choice-row input:focus-visible + label{outline:2px solid var(--copper-ink);outline-offset:2px}
.save-state{font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:.06em;color:var(--copper-ink);min-height:1.4em}
@media (max-width:640px){
  .hero-meta{gap:1rem;flex-direction:column}
  .btn{width:100%;text-align:center}
}
@media (min-width:900px){.cards4{grid-template-columns:1fr 1fr}}