/* Sprouto Schwarz-Orange (Karim 27.10.2026): Schriften, Startbereich, Lichtlinie, Laufband, Menü, Einblenden.
   Wird nach sprouto.css geladen; Farben stehen dort als Tokens (hell = Orange auf warmem Weiß, dunkel = Schwarz-Orange). */
@font-face { font-family: Unbounded; font-weight: 600; font-display: swap; src: url(fonts/unbounded-600.woff2) format("woff2"); }
@font-face { font-family: Unbounded; font-weight: 700; font-display: swap; src: url(fonts/unbounded-700.woff2) format("woff2"); }
@font-face { font-family: "Azeret Mono"; font-weight: 500; font-display: swap; src: url(fonts/azeret-mono-500.woff2) format("woff2"); }

h1, h2, .brand span { font-family: Unbounded, Manrope, system-ui, sans-serif; }
h1 { font-weight: 700; font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -0.035em; line-height: 1.07; }
h2 { font-weight: 600; font-size: clamp(25px, 3.4vw, 38px); letter-spacing: -0.03em; line-height: 1.12; }
h1, h2 { text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.brand span { font-weight: 700; letter-spacing: -0.02em; font-size: 19px; }
.num, .formula b, .gp-strip b, .vpd-badge { font-family: "Azeret Mono", ui-monospace, monospace; letter-spacing: -0.02em; }
.eyebrow { letter-spacing: 0.1em; }
.btn-primary { box-shadow: 0 8px 24px var(--glut); }
.btn-primary:hover { filter: brightness(1.06); }

/* Kopf: Menü-Knopf am Handy (wie taktfaden.de) */
.menue-knopf { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 700 14px Manrope, system-ui, sans-serif; cursor: pointer; }
.menue-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menue-knopf:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* sprouto.css blendet am Handy jedes nav aus (Kopf-Links); das aufgeklappte Menü ist auch ein nav und braucht die Id-Regel,
   sonst passiert beim Tippen auf „Menü“ nichts (Karim 29.10.2026). */
#hauptmenue { display: block; border-top: 1px solid var(--line); background: var(--bg); }
#hauptmenue[hidden] { display: none; }
#hauptmenue ul { list-style: none; margin: 0; padding: 8px 0 16px; display: grid; }
#hauptmenue a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; color: var(--text); text-decoration: none; font-family: Unbounded, Manrope, sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; border-bottom: 1px solid var(--line); }
#hauptmenue a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 860px) { .menue-knopf { display: inline-flex; margin-left: auto; } .theme-seg { margin-left: 0; } }
@media (min-width: 861px) { #hauptmenue { display: none !important; } }
@media (max-width: 520px) { .theme-seg { display: none; } }
/* 02.11.: unter 380 px nur das Symbol (Name bleibt für Screenreader), damit Logo, Menü und DE/EN ab 320 px passen */
@media (max-width: 380px) { .menue-knopf { font-size: 0; gap: 0; width: 44px; padding: 0; justify-content: center; } }

/* Startbereich */
.hero-v2 { position: relative; padding: 48px 0 56px; overflow: hidden; }
.hero-v2::before { content: ""; position: absolute; inset: auto -20% -40% 30%; height: 80%; background: radial-gradient(closest-side, var(--glut), transparent); pointer-events: none; }
.hero-v2 .hero-grid { position: relative; grid-template-columns: 1.1fr 0.9fr; }
.hero-v2 h1 { margin: 14px 0 6px; }
/* 02.11. abends: bisheriger Dreiklang als Unterzeile direkt unter der H1 */
.hero-v2 .unterzeile { margin: 0 0 4px; font-family: Unbounded, Manrope, system-ui, sans-serif; font-weight: 600; font-size: clamp(17px, 2vw, 22px); line-height: 1.3; letter-spacing: -0.02em; color: var(--text2); text-wrap: balance; }
.cta .cta-btns { justify-content: center; margin-top: 20px; }
.lichtlinie { display: block; width: min(420px, 80%); height: 14px; margin: 6px 0 22px; overflow: visible; }
.lichtlinie path { fill: none; stroke: url(#licht-verlauf); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,122,47,.75)); }
.hero-telefon { position: relative; justify-self: center; width: min(340px, 82vw); }
.hero-telefon img { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.35)); }
/* 02.11.: hell/dunkel über <picture> (index.html), damit nur das sichtbare Hauptbild lädt, ohne loading=lazy */
.hero-telefon picture { display: block; }
.schwebt { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(12px); font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; }
.schwebt b { font-family: "Azeret Mono", ui-monospace, monospace; font-weight: 500; color: var(--accent); }
.schwebt.s1 { left: -34%; top: 60%; }
.schwebt.s2 { right: -30%; top: 22%; }
@media (max-width: 1100px) { .schwebt { display: none; } }
@media (max-width: 860px) { .hero-v2 .hero-grid { grid-template-columns: 1fr; } }

/* Laufband mit den Kernfunktionen */
.laufband { border-block: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.laufband .spur { display: flex; width: max-content; gap: 0; animation: lauf 38s linear infinite; }
.laufband span { display: inline-flex; align-items: center; gap: 18px; padding: 18px 28px 18px 0; font-family: Unbounded, Manrope, sans-serif; font-weight: 600; font-size: clamp(17px, 2vw, 22px); letter-spacing: -0.02em; white-space: nowrap; }
.laufband span::after { content: ""; width: 26px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #FFB067, #FF7A2F 55%, #E2531A); box-shadow: 0 0 8px rgba(255,122,47,.6); }
@keyframes lauf { to { transform: translateX(-50%); } }

/* Bewegung nur mit JavaScript und ohne „Bewegung reduzieren“ */
@media (prefers-reduced-motion: no-preference) {
  /* 02.11. abends (Karim): Überschrift sofort sichtbar, Wörter gleiten nur leicht hoch, kein Unsichtbar-Start */
  .js .hero-v2 .wort { display: inline-block; transform: translateY(0.28em); transition: transform .6s cubic-bezier(.23,1,.32,1); transition-delay: calc(var(--i) * 60ms + 60ms); }
  .js.bereit .hero-v2 .wort { transform: none; }
  .js .lichtlinie path { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.1s cubic-bezier(.77,0,.175,1) .55s; }
  .js.bereit .lichtlinie path { stroke-dashoffset: 0; }
  /* Hauptbild sofort sichtbar (LCP), nur die Bewegung bleibt */
  .js .hero-telefon { transform: translateY(28px) scale(.98); transition: transform .8s cubic-bezier(.23,1,.32,1) .1s; }
  .js.bereit .hero-telefon { opacity: 1; transform: none; }
  .schwebt { animation: schweben 6s ease-in-out infinite; }
  .schwebt.s2 { animation-delay: -3s; }
  .js [data-zeige] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1); }
  .js [data-zeige="da"] { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .laufband .spur { animation: none; flex-wrap: wrap; width: auto; }
  .js [data-zeige] { opacity: 0; transition: opacity .4s ease; }
  .js [data-zeige="da"] { opacity: 1; }
}
@keyframes schweben { 50% { transform: translateY(-8px); } }

/* Logo „Aufgang mit Keimling“ (27.10.2026): Zeichen + Schriftzug als ein SVG, Schrift in Textfarbe */
.brand svg.logo { height: 30px; width: auto; display: block; color: var(--text); }