/* ═══════════════════════════════════════════════════════════════════
   GuyGotAI_ — Basisschicht
   Reset, Grundtypografie und die Komponenten, die auf JEDER Seite
   gleich aussehen. Braucht tokens.css davor.

   Komponentennamen folgen DESIGN.md § 6. Wer eine neue Seite baut,
   nimmt diese Klassen — und erfindet keine zweite Variante desselben
   Bausteins.
   ═══════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

/* ── Container ───────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)}
.wrap-text{max-width:var(--wrap-text);margin:0 auto;padding:0 var(--wrap-pad)}
@media(max-width:768px){
  .wrap,.wrap-text{padding:0 var(--wrap-pad-mobil)}
}

/* ── Typografie (DESIGN.md § 3.3) ────────────────────────────────── */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.035em}
h1{font-size:clamp(34px,4.6vw,58px);line-height:1.0}
h2{font-size:clamp(30px,4vw,52px);line-height:1.02}
h3{font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:-.02em}
p{margin:0 0 18px}
.lead{font-size:19px;color:var(--text-muted)}
.micro,.microcopy{font-size:14px;color:var(--text-muted)}
a{color:inherit}

/* ── Eyebrow (DESIGN.md § 6.2) ───────────────────────────────────── */
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 16px;
}
.eyebrow.on-ink{color:var(--text-faint-on-ink)}

/* ── Marker-Highlight (DESIGN.md § 5.1) ──────────────────────────── */
.mk{position:relative;display:inline-block;z-index:0}
.mk::before{
  content:"";position:absolute;z-index:-1;left:-.06em;right:-.06em;top:28%;bottom:4%;
  background:var(--accent);transform:rotate(-.8deg);
}
.mark{
  display:inline-block;background:var(--accent);color:var(--text-on-accent);
  padding:2px 8px;font-weight:700;
}

/* ── Buttons (DESIGN.md § 6.3/6.4) ───────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--text-on-accent);
  font-family:var(--body);font-size:16px;font-weight:600;
  border:none;border-radius:var(--radius);
  padding:16px 28px;cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:var(--accent-press)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-sekundaer{
  background:transparent;color:var(--text);
  border:1px solid var(--border-strong);
}
.btn-sekundaer:hover{background:var(--surface-hover)}

/* ── Sichtbarer Fokus, ueberall (DESIGN.md § 9.2) ────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}

/* ── Abschnittsrhythmus (DESIGN.md § 4.3) ────────────────────────── */
.band{padding:var(--section-y) 0}
.band-ink{background:var(--ink);color:var(--text-on-ink)}
.band-ink a{color:var(--text-on-ink)}
.band-lime{background:var(--accent);color:var(--text-on-accent)}
.band-alt{background:var(--bg-alt)}

/* ── Footer, auf allen Seiten gleich ─────────────────────────────── */
footer{
  background:var(--ink);color:var(--text-muted-on-ink);
  padding:34px 0;font-size:14px;margin-top:80px;
}
footer a{color:var(--text-muted-on-ink)}
footer .foot-links a{margin-right:18px}

/* ── Bewegung nur, wenn gewuenscht (DESIGN.md § 9.4) ─────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}