/* instant-run Website. Schriften liegen lokal (IBM Plex, SIL OFL), keine Anfragen an Dritte. */
@font-face{font-family:"Plex Sans";src:url(/fonts/plex-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(/fonts/plex-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(/fonts/plex-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#F2F4F1;      /* Grund */
  --panel:#E6EAE5;      /* abgesetzte Flächen */
  --ink:#20262E;        /* Text */
  --slate:#58626C;      /* Nebentext */
  --rule:#CDD3CD;       /* Linien */
  --run:#13804A;        /* "läuft": Status, Aktion */
  --run-soft:#D7EBDD;
  --error:#A3271C;
  --sans:"Plex Sans",system-ui,sans-serif;
  --mono:"Plex Mono",ui-monospace,monospace;
  --measure:38rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-text-size-adjust:100%}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--run);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--run);outline-offset:3px;border-radius:2px}
code,.url{font-family:var(--mono);font-size:.94em}

.wrap{max-width:56rem;margin:0 auto;padding:0 1.5rem}
.prose{max-width:var(--measure)}

/* Kopfzeile */
.top{padding:1.5rem 0}
.top .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.mark{white-space:nowrap;font-weight:600;font-size:1.125rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.mark .dot{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--run);margin-right:.4em;vertical-align:.08em}
.top nav a{color:var(--slate);text-decoration:none;margin-left:1.25rem;font-size:.9375rem}
.top nav a:hover{color:var(--ink)}

/* Hero: der Satz an Claude und die laufende App */
.hero{padding:4.5rem 0 4rem}
.hero h1{font-weight:600;font-size:clamp(2.25rem,5.4vw,3.75rem);line-height:1.06;letter-spacing:-.025em;max-width:16ch}
.exchange{margin:3rem 0 2.5rem;max-width:44rem}
.ask{font-size:clamp(1.25rem,2.6vw,1.625rem);line-height:1.4;color:var(--slate);padding-left:1.25rem;border-left:3px solid var(--rule)}
.result{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem;padding-left:1.25rem;font-family:var(--mono);font-size:clamp(1.125rem,2.6vw,1.5rem)}
.status{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-size:.875rem;font-weight:500;color:var(--run);background:var(--run-soft);padding:.2rem .65rem .2rem .55rem;border-radius:99px}
.status i{width:.55rem;height:.55rem;border-radius:50%;background:var(--run)}
.result .url{font-size:1em;color:var(--ink);white-space:nowrap}
.lead{font-size:1.1875rem;max-width:var(--measure)}
.actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}

.btn{display:inline-block;font:500 1rem/1 var(--sans);padding:.95rem 1.35rem;border-radius:6px;border:2px solid var(--run);background:var(--run);color:#fff;text-decoration:none;cursor:pointer}
.btn:hover{background:#0F6B3D;border-color:#0F6B3D}
.btn.quiet{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.quiet:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.6;cursor:wait}

/* Einmaliger Moment beim Laden: erst der Satz, dann geht die App an */
@media (prefers-reduced-motion:no-preference){
  .result{animation:appear .5s ease-out 1.1s both}
  .status i{animation:pulse 2.4s ease-in-out 1.6s 2}
}
@keyframes appear{from{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}
@keyframes pulse{50%{box-shadow:0 0 0 .4rem rgba(19,128,74,.18)}}

/* Abschnitte */
section{padding:3.5rem 0;border-top:1px solid var(--rule)}
h2{font-weight:600;font-size:1.75rem;line-height:1.2;letter-spacing:-.015em;margin-bottom:1rem}
h3{font-weight:600;font-size:1.0625rem;line-height:1.35}
section p+p{margin-top:.9rem}

.video{margin-top:1.5rem;background:var(--ink);border-radius:8px;overflow:hidden;aspect-ratio:16/9}
.video video{display:block;width:100%;height:100%}

.steps{list-style:none;counter-reset:s;margin-top:1.75rem;display:grid;gap:1.75rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.75rem 1fr;gap:0 1rem;max-width:44rem}
.steps li::before{content:counter(s);grid-row:span 2;width:2.25rem;height:2.25rem;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-weight:600}
.steps p{color:var(--slate);margin-top:.2rem}

.facts{margin-top:1.75rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem 2.5rem}
.facts dt{font-weight:600}
.facts dd{color:var(--slate);margin-top:.15rem}

.download{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-top:1.5rem;padding:1.25rem 1.5rem;background:var(--panel);border-radius:8px}
.download .meta{color:var(--slate);font-size:.9375rem}

/* Kontakt */
form{margin-top:1.75rem;max-width:36rem;display:grid;gap:1.25rem}
label{display:grid;gap:.4rem;font-weight:500;font-size:.9375rem}
input,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:6px;padding:.75rem .85rem;width:100%}
input:focus,textarea:focus{border-color:var(--run);outline:2px solid var(--run);outline-offset:0}
textarea{min-height:9rem;resize:vertical}
.hint{font-weight:400;color:var(--slate);font-size:.875rem}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.note{font-size:.875rem;color:var(--slate)}
.msg{padding:.9rem 1rem;border-radius:6px;font-size:.9375rem}
.msg.ok{background:var(--run-soft);color:#0B5A33}
.msg.err{background:#F5DDDA;color:var(--error)}
.msg[hidden]{display:none}

/* Fuß */
footer{border-top:1px solid var(--rule);padding:1.75rem 0 2.5rem;color:var(--slate);font-size:.875rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{color:var(--slate);margin-left:1.25rem}
footer a:first-child{margin-left:0}

/* Rechtsseiten */
.legal{padding:3rem 0 4rem}
.legal h1{font-weight:600;font-size:2.25rem;letter-spacing:-.02em;margin-bottom:.5rem}
.legal .stand{color:var(--slate);font-size:.875rem;margin-bottom:2rem}
.legal h2{font-size:1.25rem;margin:2.25rem 0 .6rem}
.legal p,.legal li{max-width:var(--measure)}
.legal p+p{margin-top:.75rem}
.legal ul{margin:.5rem 0 0 1.25rem}
.legal li{margin-bottom:.3rem}
.legal .block{background:var(--panel);padding:1rem 1.25rem;border-radius:6px;margin:.6rem 0;max-width:var(--measure)}

@media (max-width:600px){
  .hero{padding:2.5rem 0 3rem}
  .top nav a:not(:last-child){display:none}
  .result{font-size:1rem}
  .ask,.result{padding-left:1rem}
  section{padding:2.75rem 0}
}