/* Nur Text, eine Schriftgröße, Absatz für Absatz, hell wie Papier. Schrift wie auf manhagen.ai (Inter), Befehle in Menlo. */
@font-face { font-family: Inter; src: url(/assets/landing-inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: light;
  --bg: #ffffff; --ink: #161616; --mute: #7a7a76; --blue: #161616;
  --font: Inter, Arial, sans-serif;
  --mono: Menlo, "SF Mono", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; -webkit-font-smoothing: antialiased; }
.page { max-width: calc(64ch + 48px); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); padding-block: 7vh 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7vh; align-items: start; }
main { min-width: 0; display: flex; flex-direction: column; gap: 1.6em; }
b { font-weight: 760; letter-spacing: -.01em; }
/* Stichpunkte sind die Minions selbst; beim Darüberfahren hüpft der Minion der Zeile */
.film { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; margin-top: .6em; }
.list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .15em; }
.list li { position: relative; padding-left: 1.9em; line-height: 1.5; }
.list li::before { content: ""; position: absolute; left: 0; top: .05em; width: 1.3em; height: 1.3em; background: var(--m) center / contain no-repeat; image-rendering: pixelated; transform-origin: 50% 50%; }
.list li:nth-child(7n+1) { --m: url(/assets/home-minion-0.png); }
.list li:nth-child(7n+2) { --m: url(/assets/home-minion-1.png); }
.list li:nth-child(7n+3) { --m: url(/assets/home-minion-2.png); }
.list li:nth-child(7n+4) { --m: url(/assets/home-minion-3.png); }
.list li:nth-child(7n+5) { --m: url(/assets/home-minion-4.png); }
.list li:nth-child(7n+6) { --m: url(/assets/home-minion-5.png); }
.list li:nth-child(7n+7) { --m: url(/assets/home-minion-6.png); }
.list li { cursor: default; transition: font-weight .25s ease; }
@keyframes li-spin { to { rotate: 360deg; } }
@keyframes li-puls { 50% { scale: 1.08; } }
.list li:hover { font-weight: 700; }
.list li.spin::before { animation: li-spin 1s cubic-bezier(.45, 0, .3, 1), li-puls 1s ease-in-out; image-rendering: auto; will-change: rotate; }
@media (prefers-reduced-motion: reduce) { .list li.spin::before { animation: none; } }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 11; background: var(--bg); }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .25s; }
.bar.scrolled { border-bottom-color: #ececea; }
.top .name { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; opacity: 0; margin-left: 0; font-weight: 760; letter-spacing: -.01em; transition: max-width .45s cubic-bezier(.4, 0, .2, 1), opacity .3s, margin-left .45s; }
.bar.scrolled .top .name { max-width: 12em; opacity: 1; margin-left: .55em; }
.top .brand { align-items: center; }
.menu { display: flex; align-items: center; gap: 22px; }
.menu > a, .menu > .soon { font-size: .85em; }
.top { max-width: calc(64ch + 48px); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); padding-block: 16px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.top .brand { margin-right: auto; display: inline-flex; }
.top .brand img { width: 1.3em; height: 1.3em; image-rendering: pixelated; transition: transform .6s cubic-bezier(.45, 0, .25, 1); }
.top .brand:hover img { transform: rotate(360deg); }
.top .brand:hover { text-decoration: none; }
.top a { text-decoration: none; } .top a:hover, .top a:focus-visible { text-decoration: underline; }
.cmd { align-self: flex-start; max-width: 100%; overflow-x: auto; background: var(--ink); color: #e8e8e6; border-radius: 10px; padding: 12px 16px; font-family: var(--mono); font-size: 13.5px; line-height: 1.6; white-space: pre; }
.cmd i { font-style: normal; color: #8a8a86; user-select: none; }
.blue { color: var(--blue); }
a { color: var(--ink); }
.mute { color: var(--mute); }
@media (max-width: 640px) { .top { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); gap: 14px; } .page { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

/* Sprachwahl klein in der Kopfzeile, wie auf manhagen.ai */
.lang { position: relative; font-size: .85em; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; font-size: 1.25em; line-height: 1; }
.lang .fl { margin-right: .5em; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang summary:focus-visible { transform: scale(1.1); }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 6px; background: var(--bg); border: 1px solid #e3e3df; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.08); min-width: 9.5em; z-index: 20; }
.lang ul a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.lang ul a:hover, .lang ul a:focus-visible { background: #f2f2f0; }
.lang ul a[aria-current="true"] { font-weight: 700; }

/* Abschluss und Fußzeile */
.foot { display: flex; flex-wrap: wrap; gap: .4em 1.4em; margin-top: 2.4em; padding-top: 1em; border-top: 1px solid #ececea; font-size: .85em; color: var(--mute); }
.foot a { color: var(--mute); text-decoration: none; } .foot a:hover, .foot a:focus-visible { color: var(--ink); text-decoration: underline; }
.foot > :first-child { margin-right: auto; }

/* Was es noch nicht gibt (Docs, GitHub), steht leise da und ist nicht klickbar */
.soon { color: var(--mute); cursor: default; }
/* Kontakt ist ein Knopf (contact.js baut die Adresse erst beim Klick), sieht aber aus wie die Links daneben */
.foot .link { all: unset; color: var(--mute); cursor: pointer; }
.foot .link:hover, .foot .link:focus-visible { color: var(--ink); text-decoration: underline; }

/* Burger nur auf dem Handy: zwei Striche oben rechts, die zum X werden; darunter klappt das Menü schlicht auf */
.burger { all: unset; display: none; position: relative; width: 26px; height: 26px; cursor: pointer; border-radius: 6px; }
.burger span { position: absolute; left: 3px; right: 3px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s cubic-bezier(.4, 0, .2, 1), top .3s cubic-bezier(.4, 0, .2, 1); }
.burger span:first-child { top: 9px; } .burger span:last-child { top: 15px; }
.top.open .burger span:first-child { top: 12px; transform: rotate(45deg); }
.top.open .burger span:last-child { top: 12px; transform: rotate(-45deg); }
.flags { display: none; }
.burger:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 640px) {
  .burger { display: block; }
  .menu { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 14px; padding: 6px 0 10px; }
  .top.open .menu { display: flex; animation: menu-in .25s ease-out; }
  .menu > a, .menu > .soon { font-size: 1em; }
  .menu .lang { display: none; }
  .menu .soon::after { content: " · " attr(data-soon); }
  .cookie { left: calc(16px + env(safe-area-inset-left, 0px)); width: auto; }
  .flags { display: flex; flex-wrap: wrap; gap: 14px; font-size: 1.35em; line-height: 1; }
  .flags a { text-decoration: none; opacity: .45; transition: opacity .2s, transform .2s; }
  .flags a[aria-current="true"], .flags a:hover, .flags a:focus-visible { opacity: 1; text-decoration: none; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .top.open .menu { animation: none; } .burger span { transition: none; } }

/* Cookie-Hinweis: kleine Karte unten rechts, wie die Seite selbst */
.cookie { position: fixed; z-index: 30; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(22em, calc(100vw - 32px)); background: var(--bg); border: 1px solid #e3e3df; border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.1); padding: 14px 16px; font-size: .85em; line-height: 1.5; display: flex; flex-direction: column; gap: .5em; }
.cookie button { all: unset; align-self: flex-start; margin-top: .3em; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 6px 16px; font-weight: 700; cursor: pointer; }
.cookie button:hover, .cookie button:focus-visible { opacity: .85; }
.cookie[hidden] { display: none; }

/* /poem: nur der Text, Kopf- und Fußzeile wie die Startseite mit gelbem Minion */
.poem { font-style: italic; }
/* Wort für Wort: wo die Maus ist, wird das Wort fett (wie die Stichpunkte) */
.poem .verse { display: block; cursor: default; }
.poem .w { transition: font-weight .25s ease; }
.poem .w:hover { font-weight: 700; }
.poem .gap { display: block; height: 1.65em; }

/* Kontakt-Popup: nur die Adresse und „Kopieren“, schlicht wie der Rest */
.contact-pop { margin: auto; border: 1px solid #e3e3df; border-radius: 12px; padding: 20px 44px 18px 22px; max-width: calc(100vw - 32px); background: var(--bg); color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,.1); font: inherit; }
.contact-pop[open] { display: flex; flex-direction: column; align-items: flex-start; gap: .35em; animation: menu-in .2s ease-out; }
.contact-pop::backdrop { background: rgba(22,22,22,.18); }
.contact-pop a { word-break: break-all; }
.contact-copy { all: unset; font-size: .85em; color: var(--mute); cursor: pointer; }
.contact-copy:hover, .contact-copy:focus-visible { color: var(--ink); text-decoration: underline; }
.contact-close { all: unset; position: absolute; top: 10px; right: 14px; font-size: 1.3em; line-height: 1; color: var(--mute); cursor: pointer; }
.contact-close:hover, .contact-close:focus-visible { color: var(--ink); }

/* Ablauf unter dem Video: Überschrift dicht an der Liste */
.flow { display: flex; flex-direction: column; gap: .6em; margin-top: 1.8em; }
/* Ablauf als Aufklapp-Liste: Zahl links, Pfeil rechts. Beim Darüberfahren dreht sich an der Stelle der Zahl ein Minion herein. */
.steps { list-style: none; padding: 0; counter-reset: step; display: flex; flex-direction: column; border-bottom: 1px solid #ececea; }
.steps li { counter-increment: step; position: relative; border-top: 1px solid #ececea; line-height: 1.5; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: calc(.62em / .72); width: 1.75em; height: 1.75em; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .72em; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; transition: opacity .14s ease, transform .2s ease; }
.steps li::after { content: ""; position: absolute; left: -.12em; top: .5em; width: 1.5em; height: 1.5em; background: var(--m) center / contain no-repeat; image-rendering: pixelated; opacity: 0; transform: scale(.4) rotate(-140deg); transition: opacity .12s ease, transform .4s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.steps li:hover::before { opacity: 0; transform: scale(.5); }
.steps li:hover::after { opacity: 1; transform: none; }
.steps summary { list-style: none; cursor: pointer; position: relative; padding: .5em 2.2em .5em 2.1em; border-radius: 6px; }
.steps summary::-webkit-details-marker { display: none; }
.steps summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.steps summary::after { content: ""; position: absolute; right: .35em; top: .95em; width: .5em; height: .5em; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); transition: transform .25s cubic-bezier(.4, 0, .2, 1), border-color .15s ease; }
.steps li:hover summary::after { border-color: var(--ink); }
.steps details[open] summary::after { transform: translateY(.22em) rotate(-135deg); }
.steps details > p { padding: 0 2.2em .85em 2.1em; color: #55554f; animation: faq-auf .25s ease-out; }
@keyframes faq-auf { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.steps li:nth-child(7n+1) { --m: url(/assets/home-minion-0.png); } .steps li:nth-child(7n+2) { --m: url(/assets/home-minion-1.png); } .steps li:nth-child(7n+3) { --m: url(/assets/home-minion-2.png); } .steps li:nth-child(7n+4) { --m: url(/assets/home-minion-3.png); } .steps li:nth-child(7n+5) { --m: url(/assets/home-minion-4.png); } .steps li:nth-child(7n+6) { --m: url(/assets/home-minion-5.png); } .steps li:nth-child(7n+7) { --m: url(/assets/home-minion-6.png); }
@media (prefers-reduced-motion: reduce) { .steps li::before, .steps li::after, .steps summary::after { transition: none; } .steps li::after { transform: none; } .steps details > p { animation: none; } }

/* Kernsatz als letzter Satz vor der Fußzeile */
.slogan { margin-top: 1.6em; }

/* Reiter über dem Film: schlicht wie die Links oben, der aktive fett */
.filmbox { display: flex; flex-direction: column; gap: .7em; margin-top: .6em; min-width: 0; }
.filmbox .film { margin-top: 0; }
.film-hoch { display: none; }
@media (max-width: 640px) {
  .film-hoch { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #e3e3df, 0 14px 40px rgba(0,0,0,.08); }
  .filmbox.mit-hoch { display: none; }
  .page { padding-top: 26px; } .intro > p:not(.headline) { margin-top: .45em; }
  .cmd { font-size: 11.5px; padding: 12px 14px; }
  .list { gap: .4em; }
  .intro .headline { font-size: 1.75em; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
  .intro .headline b { font-weight: 760; }
}
.filmtabs { display: flex; gap: 1.4em; }
.filmtabs button { all: unset; cursor: pointer; color: var(--mute); padding-bottom: .15em; border-bottom: 2px solid transparent; transition: color .15s ease; }
.filmtabs button:hover, .filmtabs button:focus-visible { color: var(--ink); }
.filmtabs button[disabled], .filmtabs button[disabled]:hover { cursor: default; color: #b4b4ae; }
.filmtabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }