@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }

/* Layout: single left-aligned column, 1120px max. Hero = copy left, live example right.
     Signature: the blue dot (wordmark, hero headline, status tags). Everything else stays quiet. */
  :root {
    --bg: #F5F6F8;
    --surface: #FFFFFF;
    --subtle: #ECEEF2;
    --fg: #0E1116;
    --muted: #5D6572;
    --line: #E2E5EA;
    --accent: #2F55E8;
    --tint: #E8EDFF;
    --btn-bg: #0E1116;
    --btn-fg: #F5F6F8;
    --on-accent: #FFFFFF;
    --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms; --stagger: 80ms;
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --font-display: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0E1116; --surface: #171B22; --subtle: #262C36; --fg: #F5F6F8; --muted: #9AA3B0;
      --line: #262C36; --accent: #8DA2FF; --tint: #1B2550; --btn-bg: #F5F6F8; --btn-fg: #0E1116; --on-accent: #0E1116;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0E1116; --surface: #171B22; --subtle: #262C36; --fg: #F5F6F8; --muted: #9AA3B0;
    --line: #262C36; --accent: #8DA2FF; --tint: #1B2550; --btn-bg: #F5F6F8; --btn-fg: #0E1116; --on-accent: #0E1116;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-block: 0;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .wrap { max-width: 1120px; margin-inline: auto; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--accent); color: var(--on-accent); }

  .mono {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .dot { color: var(--accent); margin-left: -0.2em; }

  /* header */
  .top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 28px; }
  .wordmark { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.04em; text-decoration: none; line-height: 1; }
  .top-right { display: flex; align-items: center; gap: 20px; }
  .top a.link { font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
  .top a.link:hover { border-bottom-color: var(--fg); }

  /* hero */
  .hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; padding-block: 56px 96px; }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; }
  h1 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.14; letter-spacing: -0.035em; margin-top: 20px; }
  .lede { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 46ch; margin: 28px 0 36px; }
  .actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 20px;
    padding: 12px 24px; border-radius: 8px; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
  }
  .btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
  .btn-primary:hover { transform: translateY(-1px); }
  .btn:active, .mini:active { transform: scale(.97); }
  .btn-ghost { border-color: var(--fg); color: var(--fg); background: transparent; }
  .btn-ghost:hover { background: var(--subtle); }

  /* live example */
  .demo { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
  .demo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
  .req { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding-block: 16px; border-top: 1px solid var(--line); }
  .req:first-of-type { border-top: 0; }
  .req b { font-weight: 500; display: block; font-size: 16px; }
  .req span.meta { font-size: 14px; color: var(--muted); }
  .mini {
    font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 20px; cursor: pointer;
    padding: 6px 14px; border-radius: 8px; border: 1px solid var(--fg); background: transparent; color: var(--fg);
  }
  .mini:hover { background: var(--subtle); }
  .mini { transition: transform var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); }
  .tag {
    display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 4px 12px;
    font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
  .tag-open { border: 1px solid var(--line); color: var(--muted); }
  .tag-done { background: var(--tint); color: var(--fg); }
  .tag-done::before { background: var(--accent); }
  .demo-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 8px; }
  .reset { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); font-size: 12px; }
  .reset:hover { color: var(--fg); }

  .top-right { gap: 20px; }
  .team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: 72px; }
  .person { display: grid; gap: 16px; align-content: start; }
  .person img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; border-radius: 16px; display: block; background: var(--subtle); }
  .person h3 { font-size: 26px; line-height: 1.2; letter-spacing: -0.03em; font-weight: 500; margin-bottom: 4px; }
  .person p { margin: 0; color: var(--muted); max-width: 52ch; }
  .pills { display: flex; flex-wrap: wrap; gap: 8px; }
  .pills span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
  .stack { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .stack-card { display: grid; gap: 2px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
  .stack-card svg { margin-bottom: 18px; color: var(--fg); }
  .stack-card b { font-family: var(--font-mono); font-weight: 500; font-size: 15px; }
  .stack-card span { font-size: 13px; color: var(--muted); line-height: 1.4; }
  .stack-card:hover { transform: translateY(-2px); border-color: var(--accent); }

  /* sections */
  section { padding-block: 96px; position: relative; }
  section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left; transition: transform 800ms var(--ease-standard); }
  .sec-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; margin-bottom: 56px; }
  h2 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -0.03em; max-width: 26ch; }

  .signals { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
  .signals li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; align-items: baseline; font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 2vw, 24px); line-height: 1.4; letter-spacing: -0.03em; text-wrap: balance; }
  .signals li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: translateY(-3px); }
  .signals-end { margin: 48px 0 0 40px; color: var(--muted); max-width: 50ch; }

  .tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
  .tool { padding-block: 32px; border-top: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
  .tool-wide { grid-column: 1 / -1; }
  .tool h3 { font-size: 21px; line-height: 1.3; letter-spacing: -0.03em; font-weight: 500; }
  .tool p { margin: 0; color: var(--muted); max-width: 44ch; }

  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin: 0; padding: 0; list-style: none; }
  .step { display: grid; gap: 12px; align-content: start; padding-top: 24px; border-top: 1px solid var(--fg); }
  .step h3 { font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -0.03em; }
  .step p { margin: 0; color: var(--muted); }

  .facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }

  .contact { background: transparent; }
  .contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }
  .contact h2 { font-size: clamp(26px, 3.6vw, 44px); max-width: 20ch; letter-spacing: -0.035em; line-height: 1.18; }
  .contact p { color: var(--muted); max-width: 44ch; margin: 24px 0 0; }
  .mailbox { display: grid; gap: 12px; justify-items: start; }
  .mail { font-family: var(--font-mono); font-size: 18px; word-break: break-all; user-select: all; }
  .copied { min-height: 16px; }

  footer { border-top: 1px solid var(--line); padding-block: 32px 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }

  @media (max-width: 900px) {
    .hero, .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .sec-head { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 40px; }
    .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .team { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 48px; }
    .stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    section { padding-block: 72px; }
    .hero { padding-block: 32px 72px; }
  }
  @media (max-width: 700px) {
    .tools { grid-template-columns: minmax(0, 1fr); }
    .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .top-right { gap: 14px; }
    .signals-end { margin-left: 0; }
    .demo { padding: 20px; }
    body { font-size: 16px; }
    .top { flex-wrap: wrap; }
  }
  /* theme toggle */
  .theme { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--subtle); }
  .theme button { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .04em; padding: 5px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; transition: color var(--dur-base) var(--ease-standard); }
  .theme button[aria-pressed="true"] { color: var(--on-accent); }
  .theme .thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; background: var(--accent); transform: translateX(calc(var(--pos) * 100%)); transition: transform var(--dur-base) var(--ease-standard); }
  html.theme-anim, html.theme-anim *, html.theme-anim *::before { transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard) !important; }

  /* motion: hero entrance (works without JS) */
  .rise { animation: rise var(--dur-slow) var(--ease-out-expo) both; animation-delay: calc(200ms + var(--i, 0) * var(--stagger)); }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  /* caret dot: blinks 6 times, then rests */
  .blink { animation: blink 1.2s steps(2, jump-none) 1s 6; }
  @keyframes blink { 50% { opacity: 0; } }
  /* demo feedback */
  .tag-done.pop { animation: pop var(--dur-base) var(--ease-out-expo) both; }
  @keyframes pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
  .req.flash { animation: flash 700ms var(--ease-standard); }
  @keyframes flash { 0% { background: var(--tint); } 100% { background: transparent; } }
  /* scroll reveal: only active when JS has marked the page */
  .js-reveal .rv { transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); transition-delay: calc(var(--i, 0) * var(--stagger)); }
  .js-reveal .rv:not(.in) { opacity: 0; transform: translateY(16px); }
  .js-reveal section:not(.in)::before { transform: scaleX(0); }


/* ---------- Seiten: Über uns, Ferien und Absenzen ---------- */
.top a.link[aria-current="page"] { border-bottom-color: var(--fg); }
.page-hero { padding-block: 56px 96px; }
.page-hero h1 { max-width: 860px; }
.page-hero .lede { max-width: 600px; }
.team.nomargin { margin-top: 0; }
.team.solo { grid-template-columns: minmax(0, 1fr); }
.team.solo .person { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; row-gap: 16px; align-content: center; align-items: start; }
.team.solo .person img { grid-row: 1 / span 4; aspect-ratio: 1; }
.team.solo .person > :not(img) { grid-column: 2; align-self: start; }
@media (max-width: 800px) { .team.solo .person { grid-template-columns: minmax(0, 1fr); } .team.solo .person img { grid-row: auto; } .team.solo .person > :not(img) { grid-column: 1; } }
.more { justify-self: start; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.hero a { text-decoration: none; border-bottom: 1px solid var(--line); }
.hero .mono a:hover { border-bottom-color: var(--fg); }

/* Animations-Platzhalter (werden später durch Lottie/MP4 ersetzt) */
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; width: 100%; aspect-ratio: var(--ratio, 16 / 10); padding: 16px; background: var(--subtle); color: var(--muted); border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 16px; overflow: hidden; }
.slot-play { position: relative; width: 44px; height: 44px; border: 1px solid var(--muted); border-radius: 50%; flex: none; }
.slot-play::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--accent); }
.slot-idea { font-size: 14px; line-height: 1.4; max-width: 34ch; }
.slot-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; }
.showreel { margin-bottom: 32px; }
.tool .slot, .step .slot { margin-bottom: 4px; }

/* Team-Kalender (Absenzen-Subpage) */
.demo-head .acc { color: var(--accent); }
.cal { display: grid; gap: 10px; align-content: start; }
.cal-days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); padding-inline: 2px; text-transform: none; letter-spacing: 0; font-size: 11px; }
.cal-days span { padding-left: 6px; }
.cal-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: center; height: 34px; padding-block: 4px; background: var(--subtle); border-radius: 8px; }
.bar { grid-column: var(--c) / span var(--l); height: 26px; margin-inline: 2px; padding-inline: 8px; display: flex; align-items: center; border-radius: 6px; font-size: 12px; white-space: nowrap; overflow: hidden; transform-origin: left; }
.bar-acc { background: var(--accent); color: var(--on-accent); }
.bar-tint { background: var(--tint); color: var(--muted); }
.legend { display: flex; gap: 16px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-acc { background: var(--accent); } .dot-tint { background: var(--tint); border: 1px solid var(--line); }
.bar { transition: transform 600ms var(--ease-out-expo); transition-delay: calc(300ms + var(--r, 0) * 80ms); }
.cal-row .bar { --r: 0; }
.cal-row:nth-of-type(2) .bar { --r: 1; } .cal-row:nth-of-type(3) .bar { --r: 2; } .cal-row:nth-of-type(4) .bar { --r: 3; }
.js-reveal .cal:not(.in) .bar { transform: scaleX(0); }

/* Drei Ansichten */
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.screen { display: grid; gap: 14px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.field { display: grid; gap: 4px; }
.field span { font-size: 12px; color: var(--muted); }
.field div { background: var(--subtle); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.screen .btn { width: 100%; }
.screen-note { margin: 0; text-transform: none; letter-spacing: 0; font-size: 12px; }
.mini-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--subtle); border-radius: 8px; padding: 10px 12px; }
.mini-row b { display: block; font-weight: 500; font-size: 14px; }
.mini-row span { font-size: 12px; color: var(--muted); }
.mini-row .mini-btn { color: var(--fg); border: 1px solid var(--fg); border-radius: 8px; padding: 5px 12px; font-weight: 500; }
.mini-row .tag { color: var(--accent); background: var(--tint); }
.stat { display: grid; gap: 6px; }
.stat > div:first-child { display: flex; justify-content: space-between; font-size: 13px; }
.track { height: 6px; border-radius: 3px; background: var(--subtle); overflow: hidden; }
.fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; transform-origin: left; transition: transform 800ms var(--ease-out-expo) 300ms; }
.js-reveal .screen:not(.in) .fill { transform: scaleX(0); }

@media (max-width: 900px) {
  .page-hero { padding-block: 32px 72px; }
  .screens { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .slot { aspect-ratio: var(--ratio-m, 16 / 10); }
  .showreel .slot { --ratio: 16 / 10; }
}


/* ---------- Hero-Showreel: Excel-Chaos wird zu einem Tool (reines CSS, 10 s Loop) ---------- */
.reel { --T: 10s; position: relative; container-type: inline-size; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 16px; background: var(--subtle); border: 1px solid var(--line); font-size: max(8px, 1.15cqw); line-height: 1.3; }
.reel-grid { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 6.4% 14%; }
.chip { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r, 0deg); opacity: 0; }
.chip-i { display: block; font-style: normal; font-family: var(--font-mono); font-size: 1em; padding: .55em .9em; border-radius: .5em; background: var(--surface); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; box-shadow: 0 .2em .8em rgb(0 0 0 / .06); }
.chip-hot .chip-i { color: var(--accent); border-color: var(--accent); background: var(--tint); }
.reel-ui { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 44cqw; padding: 2.2em; border-radius: 1.6em; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1.2em 3em rgb(0 0 0 / .08); }
.ui-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6em; font-family: var(--font-mono); font-size: .95em; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ui-count { position: relative; display: inline-grid; justify-items: end; }
.ui-count b { grid-area: 1 / 1; font-weight: 400; opacity: 0; }
.ui-count b:last-child { opacity: 1; }
.ui-row { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-block: 1.1em; border-top: 1px solid var(--line); }
.ui-head + .ui-row { border-top: 0; }
.ui-row strong { display: block; font-weight: 500; font-size: 1.25em; }
.ui-row small { font-size: 1.05em; color: var(--muted); }
.ui-act { position: relative; display: inline-grid; justify-items: end; }
.ui-act em { grid-area: 1 / 1; font-style: normal; white-space: nowrap; }
.ui-btn { font-weight: 500; font-size: 1.1em; padding: .35em 1em; border: 1px solid var(--fg); border-radius: .6em; opacity: 0; }
.ui-tag { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-mono); font-size: .95em; letter-spacing: .06em; text-transform: uppercase; padding: .35em 1em; border-radius: 999px; background: var(--tint); }
.ui-tag::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--accent); }
.reel-ring { position: absolute; left: 50%; top: 50%; width: 30cqw; aspect-ratio: 1; translate: -50% -50%; border: 1px solid var(--accent); border-radius: 50%; opacity: 0; }
.reel-cap { position: absolute; left: 2.2em; bottom: 1.8em; display: grid; font-size: .95em; }
.reel-cap span { grid-area: 1 / 1; }
.cap-a { opacity: 0; }
.cap-b { color: var(--accent); }
.reel.is-paused, .reel.is-paused * { animation-play-state: paused !important; }
.reel.is-live .reel-grid { animation: r-grid var(--T) linear infinite; }
.reel.is-live .chip { animation: r-chip var(--T) cubic-bezier(.4,0,.2,1) infinite; }
.reel.is-live .chip-i { animation: r-wob 2.6s ease-in-out infinite alternate; }
.reel.is-live .chip:nth-child(even) .chip-i { animation-duration: 3.1s; animation-delay: -1s; }
.reel.is-live .reel-ui { animation: r-ui var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.reel.is-live .reel-ring { animation: r-ring var(--T) ease-out infinite; }
.reel.is-live .cap-a { animation: r-capa var(--T) linear infinite; }
.reel.is-live .cap-b { animation: r-capb var(--T) linear infinite; }
.reel.is-live .ui-row:nth-child(2) .ui-btn { animation: r-btn0 var(--T) linear infinite; }
.reel.is-live .ui-row:nth-child(2) .ui-tag { animation: r-tag0 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.reel.is-live .ui-row:nth-child(3) .ui-btn { animation: r-btn1 var(--T) linear infinite; }
.reel.is-live .ui-row:nth-child(3) .ui-tag { animation: r-tag1 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.reel.is-live .ui-row:nth-child(4) .ui-btn { animation: r-btn2 var(--T) linear infinite; }
.reel.is-live .ui-row:nth-child(4) .ui-tag { animation: r-tag2 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.reel.is-live .ui-count b:nth-child(1) { animation: r-c0 var(--T) linear infinite; }
.reel.is-live .ui-count b:nth-child(2) { animation: r-c1 var(--T) linear infinite; }
.reel.is-live .ui-count b:nth-child(3) { animation: r-c2 var(--T) linear infinite; }
.reel.is-live .ui-count b:nth-child(4) { animation: r-c3 var(--T) linear infinite; }
.reel:not(.is-live) .ui-btn { opacity: 0; }
.reel:not(.is-live) .cap-b { opacity: 1; }
@keyframes r-grid {
  0%, 28% { opacity: .7; }
  42%, 96% { opacity: 0; }
  100% { opacity: .7; }
}
@keyframes r-chip {
  0%, 28% { left: var(--x); top: var(--y); opacity: 1; scale: 1; }
  42% { left: 50%; top: 50%; opacity: 0; scale: .25; }
  96% { left: 50%; top: 50%; opacity: 0; scale: .25; }
  100% { left: var(--x); top: var(--y); opacity: 1; scale: 1; }
}
@keyframes r-wob {
  from { translate: -.3em -.2em; rotate: -1.2deg; }
  to { translate: .35em .25em; rotate: 1.4deg; }
}
@keyframes r-ui {
  0%, 36% { opacity: 0; scale: .94; translate: -50% -44%; }
  48% { opacity: 1; scale: 1; translate: -50% -50%; }
  92% { opacity: 1; scale: 1; translate: -50% -50%; }
  97%, 100% { opacity: 0; scale: .98; translate: -50% -52%; }
}
@keyframes r-ring {
  0%, 38% { opacity: 0; scale: .3; }
  40% { opacity: .55; scale: .3; }
  52% { opacity: 0; scale: 1.7; }
  100% { opacity: 0; scale: 1.7; }
}
@keyframes r-capa {
  0%, 30% { opacity: 1; }
  38%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes r-capb {
  0%, 42% { opacity: 0; }
  50%, 92% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes r-btn0 {
  0%, 42% { opacity: 0; scale: 1; }
  50%, 52% { opacity: 1; scale: 1; }
  53% { opacity: 1; scale: .92; }
  54%, 100% { opacity: 0; scale: 1; }
}
@keyframes r-tag0 {
  0%, 54% { opacity: 0; scale: .9; }
  57%, 100% { opacity: 1; scale: 1; }
}
@keyframes r-btn1 {
  0%, 42% { opacity: 0; scale: 1; }
  50%, 61% { opacity: 1; scale: 1; }
  62% { opacity: 1; scale: .92; }
  63%, 100% { opacity: 0; scale: 1; }
}
@keyframes r-tag1 {
  0%, 63% { opacity: 0; scale: .9; }
  66%, 100% { opacity: 1; scale: 1; }
}
@keyframes r-btn2 {
  0%, 42% { opacity: 0; scale: 1; }
  50%, 70% { opacity: 1; scale: 1; }
  71% { opacity: 1; scale: .92; }
  72%, 100% { opacity: 0; scale: 1; }
}
@keyframes r-tag2 {
  0%, 72% { opacity: 0; scale: .9; }
  75%, 100% { opacity: 1; scale: 1; }
}
@keyframes r-c0 {
  0%, 55% { opacity: 1; }
  55.5%, 100% { opacity: 0; }
}
@keyframes r-c1 {
  0%, 55% { opacity: 0; }
  55.5%, 64% { opacity: 1; }
  64.5%, 100% { opacity: 0; }
}
@keyframes r-c2 {
  0%, 64% { opacity: 0; }
  64.5%, 73% { opacity: 1; }
  73.5%, 100% { opacity: 0; }
}
@keyframes r-c3 {
  0%, 73% { opacity: 0; }
  73.5%, 100% { opacity: 1; }
}
@media (max-width: 700px) {
  .reel { aspect-ratio: 4 / 3; font-size: max(8px, 2.4cqw); }
  .reel-ui { width: 80cqw; padding: 1.6em; }
  .reel-cap { left: 1.4em; bottom: 1.2em; }
  .chip-i { padding: .45em .7em; }
}


/* ---------- Animationen (Tool-Beispiele und Ablauf), reines CSS ---------- */
.anim { --T: 6s; position: relative; container-type: inline-size; width: 100%; aspect-ratio: var(--ratio, 16 / 10); overflow: hidden; border-radius: 16px; background: var(--subtle); border: 1px solid var(--line); display: grid; place-items: center; line-height: 1.3; }
.anim > * { font-size: max(8px, 2.25cqw); }
.anim-step { --T: 4s; }
.anim-step > * { font-size: max(8px, 2.8cqw); }
.an-card { width: 88%; display: grid; gap: .7em; padding: 1.4em 1.6em; border-radius: 1.1em; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 .8em 2.4em rgb(0 0 0 / .06); }
.an-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .9em; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.an-count { display: inline-grid; justify-items: end; } .an-count b { grid-area: 1 / 1; font-weight: 400; }
.an-count b:nth-child(1) { opacity: 0; }
.anim-tool.is-paused *, .anim.is-paused, .anim.is-paused * { animation-play-state: paused !important; }
/* A Absenzen */
.an-days, .an-row { display: grid; grid-template-columns: 4.2em repeat(5, minmax(0, 1fr)); align-items: center; gap: 0; }
.an-days { font-family: var(--font-mono); font-size: .85em; color: var(--muted); } .an-days i { font-style: normal; padding-left: .5em; }
.an-row { background: var(--subtle); border-radius: .6em; height: 2.4em; padding-block: .25em; }
.an-row u { text-decoration: none; padding-left: .7em; font-weight: 500; }
.an-bar { grid-column: var(--g) / span var(--l); height: 100%; margin-inline: .15em; border-radius: .4em; background: var(--accent); transform-origin: left; }
/* B Onboarding */
.an-item { display: flex; align-items: center; gap: .8em; padding-block: .35em; border-top: 1px solid var(--line); }
.an-head + .an-item { border-top: 0; }
.an-box { position: relative; flex: none; width: 1.4em; height: 1.4em; border: 1.5px solid var(--accent); border-radius: .4em; background: var(--accent); }
.an-box::after { content: ""; position: absolute; left: .42em; top: .16em; width: .38em; height: .7em; border: solid var(--on-accent); border-width: 0 .17em .17em 0; rotate: 40deg; opacity: var(--ck, 1); }
.an-t { flex: 1; opacity: .55; } .an-item em { font-style: normal; font-family: var(--font-mono); font-size: .85em; letter-spacing: .06em; color: var(--muted); }
.an-prog { height: .5em; border-radius: .25em; background: var(--subtle); overflow: hidden; margin-top: .3em; } .an-prog i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.an-done { font-family: var(--font-mono); font-size: .9em; letter-spacing: .04em; color: var(--accent); }
/* C Bewerber */
.kb { position: relative; width: 92%; height: 76%; }
.kb-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3%; }
.kb-col { background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--line); border-radius: .9em; padding: .8em; font-family: var(--font-mono); font-size: .85em; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kb-card { position: absolute; width: 31%; padding: .6em .8em; border-radius: .7em; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 .4em 1.2em rgb(0 0 0 / .08); display: grid; gap: .1em; }
.kb-card b { font-weight: 500; } .kb-card small { font-size: .85em; color: var(--muted); }
.k1 { left: 68%; top: 22%; } .k2 { left: 34%; top: 46%; } .k3 { left: 0%; top: 22%; }
.k1 b::before, .k2 b::before, .k3 b::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .5em; border-radius: 50%; background: var(--accent); }
/* D Dienstplan */
.ds-head, .ds-row { display: grid; grid-template-columns: 4.4em repeat(5, minmax(0, 1fr)); align-items: center; }
.ds-head { font-family: var(--font-mono); font-size: .85em; color: var(--muted); } .ds-head i { font-style: normal; padding-left: .5em; }
.ds-row { background: var(--subtle); border-radius: .6em; height: 2.4em; padding-block: .25em; } .ds-row u { text-decoration: none; padding-left: .7em; font-weight: 500; }
.ds-chip { grid-column: var(--g); height: 100%; margin-inline: .15em; border-radius: .4em; display: grid; place-items: center; font-size: .85em; font-family: var(--font-mono); background: var(--accent); color: var(--on-accent); }
.ds-chip.late { background: var(--tint); color: var(--accent); }
.ds-ok { justify-self: start; font-family: var(--font-mono); font-size: .85em; letter-spacing: .04em; color: var(--accent); background: var(--tint); border-radius: 999px; padding: .3em .9em; }
/* E Gespräch */
.sk { width: 90%; display: grid; grid-template-columns: 1fr auto 1.1fr; align-items: center; gap: 1em; }
.sk-notes { display: grid; gap: .8em; justify-items: start; }
.bub { padding: .6em .9em; border-radius: .9em; background: var(--surface); border: 1px solid var(--line); font-size: .95em; } .b2 { justify-self: end; background: var(--tint); }
.sk-arrow { width: 2.6em; height: 2px; background: var(--accent); position: relative; transform-origin: left; } .sk-arrow::after { content: ""; position: absolute; right: -1px; top: -.3em; border: solid var(--accent); border-width: 2px 2px 0 0; width: .6em; height: .6em; rotate: 45deg; }
.sk-box { display: grid; gap: .6em; padding: 1em; border: 1.5px dashed var(--accent); border-radius: .9em; background: var(--surface); }
.sk-l { height: .8em; border-radius: .4em; background: var(--subtle); transform-origin: left; } .sk-l2 { width: 70%; } .sk-l3 { width: 45%; background: var(--tint); }
/* F Prototyp */
.win { position: relative; width: 86%; height: 82%; border-radius: .9em; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 .8em 2.4em rgb(0 0 0 / .06); padding: .9em 1.2em; display: grid; align-content: start; gap: .6em; }
.win-bar { display: flex; gap: .35em; } .win-bar i { width: .6em; height: .6em; border-radius: 50%; background: var(--line); }
.pt-head { height: 1.1em; width: 45%; border-radius: .3em; background: var(--fg); opacity: .85; }
.pt-row { display: flex; justify-content: space-between; align-items: center; height: 1.7em; padding-inline: .7em; border-radius: .5em; background: var(--subtle); font-size: .9em; }
.pt-tag { font-family: var(--font-mono); font-size: .8em; color: var(--accent); background: var(--tint); border-radius: 999px; padding: .15em .7em; }
.pt-btn { position: absolute; right: 8%; bottom: 14%; padding: .35em 1em; border: 1px solid var(--fg); border-radius: .5em; font-weight: 500; font-size: .9em; }
.ripple { position: absolute; left: 71%; top: 61%; width: 3.2em; height: 3.2em; translate: -1.6em -1.6em; border: 1.5px solid var(--accent); border-radius: 50%; opacity: 0; }
.cursor { position: absolute; left: 71%; top: 61%; width: 1.1em; height: 1.5em; background: var(--fg); clip-path: polygon(0 0, 0 82%, 28% 62%, 48% 100%, 64% 92%, 44% 56%, 82% 56%); opacity: 0; }
/* G Betrieb */
.op { width: 86%; display: grid; gap: .9em; padding: 1.2em 1.4em; border-radius: 1em; background: var(--surface); border: 1px solid var(--line); }
.op-top { display: flex; align-items: center; gap: .7em; font-family: var(--font-mono); font-size: .9em; letter-spacing: .06em; text-transform: uppercase; }
.op-dot { position: relative; width: .8em; height: .8em; border-radius: 50%; background: var(--accent); } .op-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0; }
.op-bars { display: flex; align-items: flex-end; gap: .3em; height: 2.6em; } .op-bar { flex: 1; border-radius: .2em; background: var(--accent); transform-origin: bottom; opacity: .9; }
.op-line { display: flex; align-items: center; gap: .6em; font-size: .95em; color: var(--muted); } .op-line::before { content: ""; width: .9em; height: .9em; border-radius: 50%; background: var(--tint); border: 1px solid var(--accent); }
@media (max-width: 700px) { .anim-tool > * { font-size: max(9px, 3cqw); } .anim-step > * { font-size: max(8px, 3.2cqw); } .an-card { width: 94%; padding: 1em; } }
.anim.sa.is-live .an-row:nth-child(3) .an-bar { animation: sa-bar0 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sa.is-live .an-row:nth-child(4) .an-bar { animation: sa-bar1 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sa.is-live .an-row:nth-child(5) .an-bar { animation: sa-bar2 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sa.is-live .an-count b:nth-child(1) { animation: sa-c1 var(--T) linear infinite; }
.anim.sa.is-live .an-count b:nth-child(2) { animation: sa-c2 var(--T) linear infinite; }
.anim.sb.is-live .an-item:nth-child(2) .an-box { animation: sb-box0 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sb.is-live .an-item:nth-child(2) .an-t { animation: sb-txt0 var(--T) ease infinite; }
.anim.sb.is-live .an-item:nth-child(3) .an-box { animation: sb-box1 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sb.is-live .an-item:nth-child(3) .an-t { animation: sb-txt1 var(--T) ease infinite; }
.anim.sb.is-live .an-item:nth-child(4) .an-box { animation: sb-box2 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sb.is-live .an-item:nth-child(4) .an-t { animation: sb-txt2 var(--T) ease infinite; }
.anim.sb.is-live .an-item:nth-child(5) .an-box { animation: sb-box3 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sb.is-live .an-item:nth-child(5) .an-t { animation: sb-txt3 var(--T) ease infinite; }
.anim.sb.is-live .an-item:nth-child(6) .an-box { animation: sb-box4 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sb.is-live .an-item:nth-child(6) .an-t { animation: sb-txt4 var(--T) ease infinite; }
.anim.sb.is-live .an-prog i { animation: sb-prog var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sb.is-live .an-done { animation: sb-done var(--T) ease infinite; }
.anim.sc.is-live .k1 { animation: sc-a var(--T) cubic-bezier(.4,0,.2,1) infinite; }
.anim.sc.is-live .k2 { animation: sc-b var(--T) cubic-bezier(.4,0,.2,1) infinite; }
.anim.sc.is-live .k3 { animation: sc-c var(--T) cubic-bezier(.4,0,.2,1) infinite; }
.anim.sd.is-live .ds-chip.c1 { animation: sd-1 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sd.is-live .ds-chip.c2 { animation: sd-2 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sd.is-live .ds-chip.c3 { animation: sd-3 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sd.is-live .ds-chip.c4 { animation: sd-4 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sd.is-live .ds-chip.c5 { animation: sd-5 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sd.is-live .ds-chip.c6 { animation: sd-6 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sd.is-live .ds-chip.c7 { animation: sd-7 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sd.is-live .ds-chip.c8 { animation: sd-8 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sd.is-live .ds-chip.c9 { animation: sd-9 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sd.is-live .ds-ok { animation: sd-ok var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.se.is-live .b1 { animation: se-b1 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.se.is-live .b2 { animation: se-b2 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.se.is-live .sk-arrow { animation: se-arr var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.se.is-live .sk-box { animation: se-box var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.se.is-live .sk-l1 { animation: se-l1 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.se.is-live .sk-l2 { animation: se-l2 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.se.is-live .sk-l3 { animation: se-l3 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sf.is-live .pt-head { animation: sf-h var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sf.is-live .pt-row:nth-child(3) { animation: sf-r1 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sf.is-live .pt-row:nth-child(4) { animation: sf-r2 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sf.is-live .pt-row:nth-child(5) { animation: sf-r3 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sf.is-live .pt-btn { animation: sf-btn var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sf.is-live .cursor { animation: sf-cur var(--T) cubic-bezier(.4,0,.2,1) infinite; }
.anim.sf.is-live .ripple { animation: sf-rip var(--T) ease-out infinite; }
.anim.sf.is-live .pt-tag { animation: sf-tag var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(1) { animation: sg-b1 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(2) { animation: sg-b2 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(3) { animation: sg-b3 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(4) { animation: sg-b4 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(5) { animation: sg-b5 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(6) { animation: sg-b6 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(7) { animation: sg-b7 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(8) { animation: sg-b8 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(9) { animation: sg-b9 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(10) { animation: sg-b10 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(11) { animation: sg-b11 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-bar:nth-child(12) { animation: sg-b12 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-line:nth-child(3) { animation: sg-l1 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-line:nth-child(4) { animation: sg-l2 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.sg.is-live .op-line:nth-child(5) { animation: sg-l3 var(--T) cubic-bezier(.16,1,.3,1) infinite; }
.anim.is-live .op-dot::after { animation: op-pulse 1.6s ease-out infinite; }
@keyframes sa-bar0 {
  0%, 14% { scale: 0 1; opacity: 1; }
  28%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 0 1; opacity: 0; }
}
@keyframes sa-bar1 {
  0%, 30% { scale: 0 1; opacity: 1; }
  44%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 0 1; opacity: 0; }
}
@keyframes sa-bar2 {
  0%, 46% { scale: 0 1; opacity: 1; background: var(--tint); color: var(--muted); }
  58%, 68% { scale: 1 1; opacity: 1; background: var(--tint); color: var(--muted); }
  73%, 93% { scale: 1 1; opacity: 1; background: var(--accent); color: var(--on-accent); }
  97%, 100% { scale: 1 1; opacity: 0; background: var(--accent); color: var(--on-accent); }
}
@keyframes sa-c1 {
  0%, 68% { opacity: 1; }
  69%, 100% { opacity: 0; }
}
@keyframes sa-c2 {
  0%, 68% { opacity: 0; }
  69%, 100% { opacity: 1; }
}
@keyframes sb-box0 {
  0%, 14% { background: transparent; border-color: var(--muted); --ck: 0; }
  18%, 92% { background: var(--accent); border-color: var(--accent); --ck: 1; }
  96%, 100% { background: transparent; border-color: var(--muted); --ck: 0; }
}
@keyframes sb-txt0 {
  0%, 14% { opacity: 1; }
  18%, 92% { opacity: .55; }
  96%, 100% { opacity: 1; }
}
@keyframes sb-box1 {
  0%, 28% { background: transparent; border-color: var(--muted); --ck: 0; }
  32%, 92% { background: var(--accent); border-color: var(--accent); --ck: 1; }
  96%, 100% { background: transparent; border-color: var(--muted); --ck: 0; }
}
@keyframes sb-txt1 {
  0%, 28% { opacity: 1; }
  32%, 92% { opacity: .55; }
  96%, 100% { opacity: 1; }
}
@keyframes sb-box2 {
  0%, 42% { background: transparent; border-color: var(--muted); --ck: 0; }
  46%, 92% { background: var(--accent); border-color: var(--accent); --ck: 1; }
  96%, 100% { background: transparent; border-color: var(--muted); --ck: 0; }
}
@keyframes sb-txt2 {
  0%, 42% { opacity: 1; }
  46%, 92% { opacity: .55; }
  96%, 100% { opacity: 1; }
}
@keyframes sb-box3 {
  0%, 56% { background: transparent; border-color: var(--muted); --ck: 0; }
  60%, 92% { background: var(--accent); border-color: var(--accent); --ck: 1; }
  96%, 100% { background: transparent; border-color: var(--muted); --ck: 0; }
}
@keyframes sb-txt3 {
  0%, 56% { opacity: 1; }
  60%, 92% { opacity: .55; }
  96%, 100% { opacity: 1; }
}
@keyframes sb-box4 {
  0%, 70% { background: transparent; border-color: var(--muted); --ck: 0; }
  74%, 92% { background: var(--accent); border-color: var(--accent); --ck: 1; }
  96%, 100% { background: transparent; border-color: var(--muted); --ck: 0; }
}
@keyframes sb-txt4 {
  0%, 70% { opacity: 1; }
  74%, 92% { opacity: .55; }
  96%, 100% { opacity: 1; }
}
@keyframes sb-prog {
  0%, 14% { scale: 0 1; }
  18%, 28% { scale: .2 1; }
  32%, 42% { scale: .4 1; }
  46%, 56% { scale: .6 1; }
  60%, 70% { scale: .8 1; }
  74%, 92% { scale: 1 1; }
  97%, 100% { scale: 0 1; }
}
@keyframes sb-done {
  0%, 74% { opacity: 0; }
  82%, 93% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes sc-a {
  0% { left: 0%; opacity: 0; }
  4% { left: 0%; opacity: 1; }
  18% { left: 0%; opacity: 1; }
  28% { left: 34%; opacity: 1; }
  48% { left: 34%; opacity: 1; }
  58% { left: 68%; opacity: 1; }
  93% { left: 68%; opacity: 1; }
  97% { left: 68%; opacity: 0; }
  100% { left: 0%; opacity: 0; }
}
@keyframes sc-b {
  0% { left: 0%; opacity: 0; }
  4% { left: 0%; opacity: 1; }
  32% { left: 0%; opacity: 1; }
  42% { left: 34%; opacity: 1; }
  93% { left: 34%; opacity: 1; }
  97% { left: 34%; opacity: 0; }
  100% { left: 0%; opacity: 0; }
}
@keyframes sc-c {
  0% { left: 0%; opacity: 0; }
  4% { left: 0%; opacity: 1; }
  93% { left: 0%; opacity: 1; }
  97% { left: 0%; opacity: 0; }
  100% { left: 0%; opacity: 0; }
}
@keyframes sd-1 {
  0%, 10% { opacity: 0; translate: 0 -1.2em; scale: .9; }
  18%, 93% { opacity: 1; translate: 0 0; scale: 1; }
  97%, 100% { opacity: 0; translate: 0 0; scale: 1; }
}
@keyframes sd-2 {
  0%, 16% { opacity: 0; translate: 0 -1.2em; scale: .9; }
  24%, 93% { opacity: 1; translate: 0 0; scale: 1; }
  97%, 100% { opacity: 0; translate: 0 0; scale: 1; }
}
@keyframes sd-3 {
  0%, 22% { opacity: 0; translate: 0 -1.2em; scale: .9; }
  30%, 93% { opacity: 1; translate: 0 0; scale: 1; }
  97%, 100% { opacity: 0; translate: 0 0; scale: 1; }
}
@keyframes sd-4 {
  0%, 28% { opacity: 0; translate: 0 -1.2em; scale: .9; }
  36%, 93% { opacity: 1; translate: 0 0; scale: 1; }
  97%, 100% { opacity: 0; translate: 0 0; scale: 1; }
}
@keyframes sd-5 {
  0%, 34% { opacity: 0; translate: 0 -1.2em; scale: .9; }
  42%, 93% { opacity: 1; translate: 0 0; scale: 1; }
  97%, 100% { opacity: 0; translate: 0 0; scale: 1; }
}
@keyframes sd-6 {
  0%, 40% { opacity: 0; translate: 0 -1.2em; scale: .9; }
  48%, 93% { opacity: 1; translate: 0 0; scale: 1; }
  97%, 100% { opacity: 0; translate: 0 0; scale: 1; }
}
@keyframes sd-7 {
  0%, 46% { opacity: 0; translate: 0 -1.2em; scale: .9; }
  54%, 93% { opacity: 1; translate: 0 0; scale: 1; }
  97%, 100% { opacity: 0; translate: 0 0; scale: 1; }
}
@keyframes sd-8 {
  0%, 52% { opacity: 0; translate: 0 -1.2em; scale: .9; }
  60%, 93% { opacity: 1; translate: 0 0; scale: 1; }
  97%, 100% { opacity: 0; translate: 0 0; scale: 1; }
}
@keyframes sd-9 {
  0%, 58% { opacity: 0; translate: 0 -1.2em; scale: .9; }
  66%, 93% { opacity: 1; translate: 0 0; scale: 1; }
  97%, 100% { opacity: 0; translate: 0 0; scale: 1; }
}
@keyframes sd-ok {
  0%, 72% { opacity: 0; scale: .8; }
  80%, 93% { opacity: 1; scale: 1; }
  97%, 100% { opacity: 0; scale: 1; }
}
@keyframes se-b1 {
  0%, 6% { opacity: 0; scale: .8; }
  16%, 93% { opacity: 1; scale: 1; }
  97%, 100% { opacity: 0; scale: 1; }
}
@keyframes se-b2 {
  0%, 20% { opacity: 0; scale: .8; }
  30%, 93% { opacity: 1; scale: 1; }
  97%, 100% { opacity: 0; scale: 1; }
}
@keyframes se-arr {
  0%, 36% { scale: 0 1; opacity: 1; }
  46%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 0 1; opacity: 0; }
}
@keyframes se-box {
  0%, 44% { opacity: 0; scale: .9; }
  54%, 93% { opacity: 1; scale: 1; }
  97%, 100% { opacity: 0; scale: 1; }
}
@keyframes se-l1 {
  0%, 54% { scale: 0 1; opacity: 1; }
  64%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 0 1; opacity: 0; }
}
@keyframes se-l2 {
  0%, 60% { scale: 0 1; opacity: 1; }
  70%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 0 1; opacity: 0; }
}
@keyframes se-l3 {
  0%, 66% { scale: 0 1; opacity: 1; }
  76%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 0 1; opacity: 0; }
}
@keyframes sf-h {
  0%, 6% { opacity: 0; translate: 0 .7em; }
  16%, 93% { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes sf-r1 {
  0%, 14% { opacity: 0; translate: 0 .7em; }
  24%, 93% { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes sf-r2 {
  0%, 20% { opacity: 0; translate: 0 .7em; }
  30%, 93% { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes sf-r3 {
  0%, 26% { opacity: 0; translate: 0 .7em; }
  36%, 93% { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes sf-btn {
  0%, 34% { opacity: 0; scale: .8; }
  42%, 93% { opacity: 1; scale: 1; }
  97%, 100% { opacity: 0; scale: 1; }
}
@keyframes sf-cur {
  0%, 40% { left: 88%; top: 96%; opacity: 0; scale: 1; }
  46% { left: 80%; top: 80%; opacity: 1; scale: 1; }
  66% { left: 71%; top: 61%; opacity: 1; scale: 1; }
  69% { left: 71%; top: 61%; opacity: 1; scale: .85; }
  73% { left: 71%; top: 61%; opacity: 1; scale: 1; }
  90% { left: 71%; top: 61%; opacity: 1; scale: 1; }
  96%, 100% { left: 71%; top: 61%; opacity: 0; scale: 1; }
}
@keyframes sf-rip {
  0%, 67% { opacity: 0; scale: .3; }
  69% { opacity: .6; scale: .3; }
  80% { opacity: 0; scale: 1.6; }
  100% { opacity: 0; scale: 1.6; }
}
@keyframes sf-tag {
  0%, 72% { opacity: 0; scale: .8; }
  80%, 93% { opacity: 1; scale: 1; }
  97%, 100% { opacity: 0; scale: 1; }
}
@keyframes sg-b1 {
  0%, 8% { scale: 1 0; opacity: 1; }
  18%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-b2 {
  0%, 10% { scale: 1 0; opacity: 1; }
  20%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-b3 {
  0%, 12% { scale: 1 0; opacity: 1; }
  22%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-b4 {
  0%, 14% { scale: 1 0; opacity: 1; }
  24%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-b5 {
  0%, 16% { scale: 1 0; opacity: 1; }
  26%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-b6 {
  0%, 18% { scale: 1 0; opacity: 1; }
  28%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-b7 {
  0%, 20% { scale: 1 0; opacity: 1; }
  30%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-b8 {
  0%, 22% { scale: 1 0; opacity: 1; }
  32%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-b9 {
  0%, 24% { scale: 1 0; opacity: 1; }
  34%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-b10 {
  0%, 26% { scale: 1 0; opacity: 1; }
  36%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-b11 {
  0%, 28% { scale: 1 0; opacity: 1; }
  38%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-b12 {
  0%, 30% { scale: 1 0; opacity: 1; }
  40%, 93% { scale: 1 1; opacity: 1; }
  97%, 100% { scale: 1 0; opacity: 0; }
}
@keyframes sg-l1 {
  0%, 44% { opacity: 0; translate: 0 .7em; }
  54%, 93% { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes sg-l2 {
  0%, 56% { opacity: 0; translate: 0 .7em; }
  66%, 93% { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes sg-l3 {
  0%, 68% { opacity: 0; translate: 0 .7em; }
  78%, 93% { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes op-pulse {
  0% { opacity: .6; scale: .6; }
  100% { opacity: 0; scale: 2.4; }
}


/* ---- Unterseiten: Hero-Loops (.hl), Related, Dein Tool ---- */
.dstack { display: grid; gap: 8px; margin-top: 8px; }
.swap { display: inline-grid; justify-items: end; align-items: center; }
.swap > * { grid-area: 1 / 1; }
.swap .sw-a { opacity: 0; }
.swap .sw-b { opacity: 1; }
.cal-week .cal-days, .cal-week .cal-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cal-week .bar { transform-origin: left center; }
.cal-week .cal-row:nth-of-type(2) .bar { --r: 0; }
.related { padding-block: 48px; display: grid; gap: 16px; }
.rel-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.tool.custom { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 64px; padding: 56px; margin-top: 8px; border: 0; border-radius: 24px; background: var(--tint); }
.custom-copy { display: grid; gap: 20px; justify-items: start; }
.custom-copy .acc { color: var(--accent); }
.tool.custom h3 { font-size: clamp(26px, 3.3vw, 38px); line-height: 1.15; letter-spacing: -0.03em; }
.tool.custom p { max-width: 46ch; font-size: 17px; line-height: 1.55; }
.ticks { list-style: none; margin: 0; padding: 4px 0 8px; display: grid; gap: 10px; }
.ticks li { display: flex; align-items: center; gap: 12px; }
.ticks li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.draft { display: grid; gap: 16px; padding: 24px; background: var(--surface); border: 1px dashed var(--accent); border-radius: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-family: var(--font-mono); font-size: 12px; padding: 6px 12px; border-radius: 999px; background: var(--subtle); color: var(--fg); }
.chips .chip-acc { background: var(--accent); color: var(--on-accent); }
.lines { display: grid; gap: 8px; }
.lines i { display: block; height: 12px; border-radius: 6px; background: var(--subtle); transform-origin: left center; }
.lines i:nth-child(2) { width: 70%; } .lines i:nth-child(3) { width: 85%; }
@media (max-width: 800px) {
  .tool.custom { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 24px; }
  .tool.custom p { font-size: 16px; }
}
@keyframes hl-a { 0%, 38% { opacity: 1; } 42%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hl-b { 0%, 38% { opacity: 0; } 42%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes hl-a2 { 0%, 56% { opacity: 1; } 60%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hl-b2 { 0%, 56% { opacity: 0; } 60%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes hl-w0 { 0%, 6% { scale: 0 1; opacity: 1; } 18%, 93% { scale: 1 1; opacity: 1; } 97%, 100% { scale: 0 1; opacity: 0; } }
@keyframes hl-w1 { 0%, 16% { scale: 0 1; opacity: 1; } 28%, 93% { scale: 1 1; opacity: 1; } 97%, 100% { scale: 0 1; opacity: 0; } }
@keyframes hl-w2 { 0%, 26% { scale: 0 1; opacity: 1; } 38%, 93% { scale: 1 1; opacity: 1; } 97%, 100% { scale: 0 1; opacity: 0; } }
@keyframes hl-w3 { 0%, 36% { scale: 0 1; opacity: 1; } 48%, 93% { scale: 1 1; opacity: 1; } 97%, 100% { scale: 0 1; opacity: 0; } }
@keyframes hl-line { 0%, 10% { scale: 0 1; } 40%, 90% { scale: 1 1; } 96%, 100% { scale: 0 1; } }
@keyframes hl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(47 85 232 / 0); } 50% { box-shadow: 0 0 0 6px rgb(47 85 232 / .18); } }
.hl.is-paused, .hl.is-paused * { animation-play-state: paused !important; }
.hl.is-live .swap .sw-a { animation: hl-a var(--T) ease infinite; }
.hl.is-live .swap .sw-b { animation: hl-b var(--T) ease infinite; }
.hl-dp.is-live .swap .sw-a { animation-name: hl-a2; }
.hl-dp.is-live .swap .sw-b { animation-name: hl-b2; }
.hl-dp.is-live .cal-row:nth-child(3) .bar { animation: hl-w0 var(--T) var(--ease-out-expo) infinite; }
.hl-dp.is-live .cal-row:nth-child(4) .bar { animation: hl-w1 var(--T) var(--ease-out-expo) infinite; }
.hl-dp.is-live .cal-row:nth-child(5) .bar { animation: hl-w2 var(--T) var(--ease-out-expo) infinite; }
.hl-dp.is-live .cal-row:nth-child(6) .bar { animation: hl-w3 var(--T) var(--ease-out-expo) infinite; }
.custom.is-live .lines i { animation: hl-line var(--T) var(--ease-out-expo) infinite; }
.custom.is-live .lines i:nth-child(2) { animation-delay: 120ms; }
.custom.is-live .lines i:nth-child(3) { animation-delay: 240ms; }
.custom.is-live .chip-acc { animation: hl-pulse 2.4s ease-in-out infinite; }

  
/* ---- FAQ ---- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.qa { padding-block: 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.qa h3 { font-size: 18px; line-height: 1.35; letter-spacing: -0.02em; font-weight: 500; }
.qa p { margin: 0; color: var(--muted); max-width: 52ch; }
@media (max-width: 800px) { .faq { grid-template-columns: minmax(0, 1fr); } }


/* ---- Impressum ---- */
.legal { display: grid; margin: 0; }
.legal > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding-block: 20px; border-top: 1px solid var(--line); }
.legal dd { margin: 0; }
.legal-text { display: grid; gap: 8px; max-width: 64ch; margin-left: auto; }
.legal-text h3 { font-size: 18px; letter-spacing: -0.02em; font-weight: 500; margin-top: 16px; }
.legal-text p { margin: 0; color: var(--muted); }
.todo { background: #FFE48A; color: #0E1116; padding: 0 4px; border-radius: 4px; }
@media (max-width: 800px) { .legal > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } .legal-text { margin-left: 0; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before { animation: none !important; transition: none !important; }
    .js-reveal .rv:not(.in) { opacity: 1; transform: none; }
    .js-reveal section:not(.in)::before { transform: none; }
  }

[hidden] { display: none !important; }