/* Grow Amplified, Signal dark. One accent: lime. */
:root {
  --ground: #0A0C10;
  --ground-deep: #06080B;
  --card: #14171F;
  --line: #262A33;
  --ink: #EDF1F7;
  --muted: #98A0B0;
  --accent: #C4F042;
  --accent-ink: #0A0C10;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html { background: var(--ground-deep); }
body { font-family: var(--font-body); color: var(--ink); }
.font-serif-custom { font-family: var(--font-display); letter-spacing: -0.035em; }
.font-mono { font-family: var(--font-mono); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Language: German is the default. Only the active language is shown. */
html[data-lang="en"] [lang="de"] { display: none !important; }
html:not([data-lang="en"]) [lang="en"] { display: none !important; }

.sb-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.sb-lang button { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; padding: 6px 10px; border-radius: 9999px; color: var(--muted); transition: color .2s, background .2s; }
.sb-lang button:hover { color: var(--ink); }
.sb-lang button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* Wordmark: the dot is always lime. */
.sb-wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; font-size: 20px; color: var(--ink); line-height: 1; white-space: nowrap; }
.sb-wordmark .dot { color: var(--accent); }
.sb-mark { width: 30px; height: 30px; border-radius: 9px; background: #000; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
.sb-mark::after { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--accent); }

/* Micro label above every section heading */
.sb-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* Pilot device: four working weeks, one day lit */
.sb-day { display: block; aspect-ratio: 1 / 1; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); }
.sb-day.is-hit { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 24px var(--accent-soft); }

/* Solution rows */
.sb-row summary { list-style: none; cursor: pointer; }
.sb-row summary::-webkit-details-marker { display: none; }
.sb-row .sb-plus { transition: transform .25s ease; }
.sb-row[open] .sb-plus { transform: rotate(45deg); }
.sb-row[open] { border-color: var(--accent-line); }

/* Masked word reveal (headings with data-split) */
.word-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.word { display: inline-block; will-change: transform; }

/* Reveal states only exist when scripts run */
html.js [data-reveal] { opacity: 0; transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .word { transform: none !important; }
  .animate-beam, .animate-float, .animate-pulse, .animate-ping { animation: none !important; }
}

/* Focus that can be seen */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Mobile menu */
#sb-mobile { display: none; }
#sb-mobile.is-open { display: block; }

/* Legal pages: readable long text */
.sb-prose h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); font-size: 1.5rem; margin: 3rem 0 1rem; }
.sb-prose h3 { font-weight: 600; color: var(--ink); margin: 2rem 0 .5rem; }
.sb-prose p, .sb-prose li { color: #B7BDC9; line-height: 1.75; font-weight: 300; }
.sb-prose p + p { margin-top: 1rem; }
.sb-prose ul { list-style: disc; padding-left: 1.25rem; margin: 1rem 0; }
.sb-prose a { color: var(--accent); }
.sb-prose dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: .75rem 1.5rem; margin: 1.5rem 0; }
.sb-prose dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.sb-prose dd { color: var(--ink); }
@media (max-width: 640px) { .sb-prose dl { grid-template-columns: 1fr; gap: .25rem; } .sb-prose dd { margin-bottom: .75rem; } }
.sb-todo { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); padding: 0 .3em; border-radius: 4px; }

/* No sideways scroll on phones */
html, body { overflow-x: clip; }

/* Tap targets: at least 40px tall on touch screens */
@media (max-width: 1023px) {
  nav[data-sb="nav"] > a, footer[data-sb="footer"] a, [data-sb="about"] a.inline-flex { display: inline-flex; align-items: center; min-height: 44px; }
  .sb-lang button, button.h-7 { min-height: 40px; }
}

/* ================= Phones and tablets ================= */
/* Overrides of utility classes carry one extra element or attribute in the selector,
   because the utility sheet loads after this file. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
a, button, summary, [role="button"] { touch-action: manipulation; }
.sb-actionbar { display: none; }
.sb-dots { display: none; }

@media (max-width: 1023px) {
  /* The frame keeps clipping its content, but no longer traps a sticky header.
     The heavy full-page blur is replaced by a soft blur on the grid alone. */
  body > main[class] { overflow: clip; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #sb-grid { filter: blur(12px); }
  html { scroll-padding-top: calc(var(--sb-head, 68px) + 12px); }

  /* Sticky header */
  nav[data-sb="nav"] {
    position: sticky; top: 0; z-index: 70;
    padding: calc(10px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--ground) 86%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid transparent; transition: border-color .25s ease;
  }
  html.sb-scrolled nav[data-sb="nav"] { border-bottom-color: color-mix(in srgb, var(--ink) 8%, transparent); }
  nav[data-sb="nav"] > a:first-child { min-height: 44px; }
  .sb-lang button { min-height: 40px; min-width: 44px; }
  [data-menu-toggle] { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  [data-menu-toggle] svg path { transition: transform .25s ease, opacity .2s ease; transform-box: view-box; transform-origin: 12px 12px; }
  [data-menu-toggle][aria-expanded="true"] svg path:nth-child(1) { transform: rotate(45deg) translateY(7px); }
  [data-menu-toggle][aria-expanded="true"] svg path:nth-child(2) { opacity: 0; }
  [data-menu-toggle][aria-expanded="true"] svg path:nth-child(3) { transform: rotate(-45deg) translateY(-7px); }

  /* Menu as a full-screen sheet under the header */
  #sb-mobile.is-open {
    display: block; position: fixed; z-index: 65; left: 0; right: 0; top: var(--sb-head, 68px); bottom: 0;
    margin: 0; border: 0; border-radius: 0;
    padding: 8px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--ground) 97%, transparent);
    overflow-y: auto; overscroll-behavior: contain; animation: sb-sheet .28s cubic-bezier(.2, .8, .2, 1);
  }
  #sb-mobile.is-open > div > a:not(:last-child) {
    display: flex; align-items: center; min-height: 60px; padding: 8px 4px;
    font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em;
  }
  #sb-mobile.is-open > div > a:last-child { display: flex; align-items: center; justify-content: center; min-height: 54px; margin-top: 28px; font-size: 1.05rem; }
  html.sb-lock { overflow: hidden; }
  @keyframes sb-sheet { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

  /* Action bar: book or call, always one thumb away */
  .sb-actionbar {
    display: flex; gap: 8px; position: fixed; z-index: 60;
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 6px; border-radius: 9999px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--ground-deep) 80%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom))); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  }
  .sb-actionbar.is-shown { transform: none; }
  html.sb-lock .sb-actionbar { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom))); }
  .sb-actionbar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 9999px; font-weight: 600; font-size: 15px; }
  .sb-ab-book { flex: 1; background: var(--accent); color: var(--accent-ink); }
  .sb-ab-call { padding: 0 20px; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
  footer[data-sb="footer"] { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* Thumb-sized targets */
  main a.inline-flex { min-height: 44px; }
  footer[data-sb="footer"] a { display: inline-flex; align-items: center; min-height: 44px; }
  footer[data-sb="footer"] .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
  .sb-row summary { min-height: 44px; }

  /* Readable small print and no word sticking out of a headline */
  .sb-eyebrow { font-size: 12px; }
  html .text-\[11px\] { font-size: 12px; }
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; hyphenate-limit-chars: 10 4 4; }

  /* Swipe instead of stacking: the three fields */
  main .sb-swipe {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -24px; margin-right: -24px; padding: 4px 24px 6px; scroll-padding-left: 24px;
  }
  main .sb-swipe::-webkit-scrollbar { display: none; }
  main .sb-swipe > * { flex: 0 0 min(84%, 400px); scroll-snap-align: start; min-height: 0; }
  .sb-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .sb-dots span { width: 6px; height: 6px; border-radius: 9999px; background: color-mix(in srgb, var(--ink) 25%, transparent); transition: width .25s ease, background .25s ease; }
  .sb-dots span.is-on { width: 22px; background: var(--accent); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  main .sb-swipe { margin-left: -48px; margin-right: -48px; padding-left: 48px; padding-right: 48px; scroll-padding-left: 48px; }
}

@media (max-width: 767px) {
  /* Tighter rhythm: same content, fewer screens */
  main section[data-sb]:not([data-sb="hero"]) { padding-top: 4rem; padding-bottom: 4rem; }
  main section[data-sb] .mb-16 { margin-bottom: 2.5rem; }
  main section[data-sb] .mb-14, main section[data-sb] .mb-12 { margin-bottom: 2rem; }
  main section[data-sb] .rounded-3xl.p-8 { padding: 1.5rem; }

  /* Principles open one at a time */
  [data-collapse].is-collapsible .sb-cell { padding: 1.25rem 1.5rem; cursor: pointer; }
  [data-collapse].is-collapsible .sb-cell h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: .5rem; margin-bottom: 0; min-height: 32px; }
  [data-collapse].is-collapsible .sb-cell h3::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: 1.25rem; color: var(--accent); transition: transform .25s ease; }
  [data-collapse].is-collapsible .sb-cell.is-open h3::after { transform: rotate(45deg); }
  [data-collapse].is-collapsible .sb-cell p { display: none; margin-top: .75rem; }
  [data-collapse].is-collapsible .sb-cell.is-open p { display: block; }
}

@media (max-width: 479px) {
  /* Diagrams scale to the card instead of being cut at its edges */
  .sb-tri-box { padding: 1rem; min-height: 0; }
  .sb-tri { transform: scale(.72); transform-origin: center; margin: -1.5rem 0; }
  .sb-flow { transform: scale(.8); transform-origin: center; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 374px) {
  .sb-flow { transform: scale(.72); }
  .sb-tri { transform: scale(.64); }
}

@media (max-width: 1023px) {
  .sb-lang button { font-size: 12px; }
  main dd a, .sb-prose a, main li > a[target="_blank"] { display: inline-flex; align-items: center; min-height: 44px; }
  main li > a[target="_blank"] { justify-content: flex-end; }
  main a[href^="#"].rounded-full { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 479px) {
  main p, main li, main dd { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}
@media (max-width: 767px) {
  /* Shorter page on phones: tighter visuals, same content */
  #pruefstrasse .h-\[320px\] { height: 240px; }
  #ablauf .grid.gap-16 { gap: 2.5rem; }
  #ablauf [data-stack] { transform: scale(.82); margin: -1.5rem auto; }
  #gruender .sb-portrait { max-width: 220px; }
  #ablauf .aspect-square.max-w-lg { aspect-ratio: auto; height: 320px; }
}

/* ================= V6 ================= */
/* Skip link: hidden until a keyboard reaches it */
.sb-skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 9999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; transition: top .2s ease; }
.sb-skip:focus { top: 12px; }
h1:focus { outline: none; }

/* The slogan's YOU in lime */
.sb-accent { color: var(--accent); }

/* Career strip: names drift slowly, pause on hover */
.sb-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent); mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent); }
.sb-marquee-track { display: flex; width: max-content; animation: sb-marquee 32s linear infinite; }
.sb-marquee:hover .sb-marquee-track { animation-play-state: paused; }
.sb-marquee-set { display: flex; align-items: center; gap: 1.1rem; padding-right: 1.1rem; }
.sb-marquee-set span { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; color: color-mix(in srgb, var(--ink) 72%, transparent); white-space: nowrap; }
.sb-marquee-set span[aria-hidden="true"] { color: var(--accent); }
@keyframes sb-marquee { to { transform: translateX(-50%); } }

/* Motto band */
.sb-band-line { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.05em; line-height: .9; text-align: center; font-size: clamp(3.4rem, 13.5vw, 11rem); white-space: nowrap; }
.sb-band-a { color: color-mix(in srgb, var(--ink) 38%, transparent); }
.sb-band-b { color: var(--accent); text-shadow: 0 0 60px var(--accent-soft); }
.sb-band-word { position: relative; display: inline-block; }
.sb-strike { position: absolute; left: -2%; right: -2%; top: 54%; height: .07em; background: var(--accent); border-radius: 9999px; transform-origin: left center; }

/* Footer motto */
.sb-footclaim { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; font-size: 1.25rem; color: var(--ink); }
.sb-footclaim span { color: var(--accent); }

/* Action bar icon buttons (phones and tablets) */
@media (max-width: 1023px) {
  .sb-ab-icon { width: 48px; flex: none; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
}
@media (max-width: 639px) {
  .sb-hide-phone { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-marquee-track { animation: none; }
}

/* The drifting career strip must never widen the hero */
[data-hero-copy] { width: 100%; min-width: 0; }
.sb-stations { width: 100%; min-width: 0; overflow: hidden; }

/* ================= V7: sound button ================= */
.sb-sound[hidden] { display: none !important; }
.sb-sound {
  position: fixed; z-index: 58; left: max(20px, env(safe-area-inset-left)); bottom: calc(20px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 14px; border-radius: 9999px;
  background: color-mix(in srgb, var(--card) 90%, transparent); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .25s ease, bottom .35s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
  animation: sb-breathe 3.2s ease-in-out infinite;
}
.sb-sound:hover { border-color: var(--accent); }
.sb-sound.is-on { animation: none; border-color: var(--accent); box-shadow: 0 0 24px var(--accent-soft); }
.sb-when-on { display: none; }
.sb-sound.is-on .sb-when-on { display: inline; }
.sb-sound.is-on .sb-when-off { display: none; }
.sb-sound-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.sb-sound-bars i { display: block; width: 3px; height: 5px; border-radius: 2px; background: var(--accent); transform-origin: bottom; }
.sb-sound.is-on .sb-sound-bars i { animation: sb-eq 1.1s ease-in-out infinite; }
.sb-sound.is-on .sb-sound-bars i:nth-child(2) { animation-delay: -.35s; }
.sb-sound.is-on .sb-sound-bars i:nth-child(3) { animation-delay: -.7s; }
.sb-sound.is-on .sb-sound-bars i:nth-child(4) { animation-delay: -.2s; }
@keyframes sb-eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@keyframes sb-breathe { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 18px var(--accent-soft); } }

/* Phones and tablets: a round icon button that sits above the action bar when it shows */
@media (max-width: 1023px) {
  .sb-sound { left: max(12px, env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); width: 44px; padding: 0; justify-content: center; }
  .sb-sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.sb-bar-on .sb-sound { bottom: calc(80px + env(safe-area-inset-bottom)); }
  html.sb-lock .sb-sound { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-sound, .sb-sound.is-on .sb-sound-bars i { animation: none; }
  .sb-sound.is-on .sb-sound-bars i { height: 12px; }
}

/* Desktop: sound button bottom right, away from the hero's booklet strip */
@media (min-width: 1024px) { .sb-sound { left: auto; right: max(28px, env(safe-area-inset-right)); bottom: 28px; } }