/* 02-base.css — Reset, Basis-Typografie, Scroll-Progress-Bar
   Teil von css/living-canvas (aufgeteilt). Ladereihenfolge = Dateiname.
   Siehe docs/components/ fuer die Zuordnung Sektion -> Datei. */
/* 3. Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
  background-color: var(--paper);
  color: var(--ink);
  transition: background-color var(--dur-normal), color var(--dur-normal);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Skip-Link (siehe index.html/projekt.html, direkt nach <body>) — ausserhalb
   des sichtbaren Bereichs geparkt, springt bei Tastaturfokus sichtbar ein.
   Barrierefreiheits-Audit, Stand 25.09.2026. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 10000;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: top 0.2s var(--ease-smooth);
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Sektions-Headlines (Portfolio, Kontakt, …). Seit 25.09.2026 weniger eng:
   -0.04em / 1.05 liess Woerter und Zeilen ineinanderlaufen. */
.huge-headline {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.01em;   /* Plus Jakarta Sans 800 ist von sich aus eng */
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 28px;
}

.section-header {
  text-align: center;
}
@media (max-width: 760px) {
  .section-header {
    text-align: left;
  }
  .section-header .section-lead {
    margin-left: 0 !important; /* Override inline margin: 0 auto */
  }
}
.bg-grid {
  background-image: 
    linear-gradient(rgba(185, 216, 214, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 216, 214, 0.25) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
}
[data-theme='dark'] .bg-grid {
  background-image: 
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}
@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 4. Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--electric), var(--apricot));
  z-index: 100;
  width: 0%;
  transition: none;
}