/* ===================================================================
   MY-AI.WORKS — Website
   Farben, Schriften und Logoregeln: my-ai-works/brand/CI.md
   Schriften werden selbst gehostet (assets/fonts/) — es darf beim
   Seitenaufruf keine Verbindung zu Dritten entstehen.
   =================================================================== */

/* --- Schriften ---------------------------------------------------- */
/* Selbst gehostet — beim Seitenaufruf darf keine Verbindung zu Dritten
   entstehen (siehe datenschutz.html). Beides sind Variable Fonts: eine
   Datei je Familie deckt den ganzen Gewichtsbereich ab.
   Lizenz: SIL Open Font License 1.1, siehe assets/fonts/LICENSE.md      */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-variable.woff2') format('woff2-variations'),
       url('../fonts/outfit-variable.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-variable.woff2') format('woff2-variations'),
       url('../fonts/source-sans-3-variable.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* --- Marke -------------------------------------------------------- */
:root {
  --zinnober: #E0521A;
  --zinnober-tief: #CD4B18;
  --anthrazit: #4B4A49;
  --tief: #1B1B1A;
  --hellgrau: #999999;

  --ground: #141413;
  --panel: #1B1B1A;
  --panel-2: #232321;
  --line: #302F2C;
  --line-2: #3E3D39;
  --ink: #F4F2ED;
  --ink-2: #A9A69F;

  --f-display: 'Outfit', 'Century Gothic', 'Trebuchet MS', system-ui, sans-serif;
  --f-body: 'Source Sans 3', 'Segoe UI', Calibri, Arial, sans-serif;

  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
  line-height: 1.15;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--zinnober); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #F0855A; }

:focus-visible {
  outline: 2px solid var(--zinnober);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--zinnober); color: #fff; padding: 12px 20px;
  font-family: var(--f-display);
}
.skip:focus { left: 0; }

.inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.inner.narrow { max-width: 800px; }
.inner.center { text-align: center; }

/* --- Kopf --------------------------------------------------------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 20, 19, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar {
  max-width: var(--wrap); margin: 0 auto; padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: block; line-height: 0; }
.brand svg { width: 168px; height: auto; display: block; }
header.site nav {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
header.site nav a {
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 3px;
}
header.site nav a:hover { color: var(--ink); background: var(--panel-2); }
header.site nav a.nav-cta {
  color: var(--tief); background: var(--zinnober); font-weight: 500;
}
header.site nav a.nav-cta:hover { background: #F0855A; color: var(--tief); }

@media (max-width: 860px) {
  .bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .brand svg { width: 148px; }
  header.site { position: static; }
  header.site nav { width: 100%; min-width: 0; gap: 2px; margin-left: -12px; }
  header.site nav a { padding: 7px 12px; font-size: 14.5px; }
}

/* --- Abschnitte --------------------------------------------------- */
section.band { padding: clamp(64px, 9vw, 108px) 0; }
section.band.alt { background: var(--panel); }
section.band.accent { background: var(--panel); border-block: 1px solid var(--line); }

.kicker {
  font-family: var(--f-display);
  font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--zinnober);
  margin: 0 0 18px;
}
section h2 { font-size: 40px; letter-spacing: 0; }
@media (max-width: 760px) {
  section h2 { font-size: 32px; }
}
@media (max-width: 420px) {
  section h2 { font-size: 28px; }
}
.intro {
  margin: 20px 0 44px;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 18px;
}
.inner.center .intro { margin-left: auto; margin-right: auto; }

/* --- Hero --------------------------------------------------------- */
.hero {
  padding: clamp(72px, 11vw, 132px) 0 clamp(64px, 9vw, 104px);
  background:
    radial-gradient(80ch 50ch at 8% -10%, rgba(224, 82, 26, .16), transparent 65%),
    var(--ground);
}
.hero .eyebrow {
  font-family: var(--f-display);
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--zinnober); margin: 0 0 22px;
}
.hero h1 {
  font-size: 62px;
  letter-spacing: 0;
  margin-bottom: 26px;
  text-wrap: wrap;
}
@media (max-width: 760px) {
  .hero h1 { font-size: 44px; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 34px; overflow-wrap: anywhere; }
}
.hero .lead {
  font-size: 21px;
  color: var(--ink-2);
  max-width: 60ch;
  margin-bottom: 36px;
}
@media (max-width: 640px) {
  .hero .lead { font-size: 18px; }
}

.merksatz {
  font-family: var(--f-display);
  font-size: 20px;
  color: var(--zinnober);
  border-left: 2px solid var(--zinnober);
  padding-left: 16px;
  margin: 0 0 36px;
  max-width: 52ch;
}
@media (max-width: 640px) {
  .merksatz { font-size: 18px; }
}
.merksatz.center-line {
  display: inline-block;
  border-left: 0;
  border-top: 2px solid var(--zinnober);
  padding: 14px 0 0;
  margin-top: 8px;
  margin-bottom: 0;
}

.word-band {
  background: var(--ground);
  border-block: 1px solid var(--line);
}

.ai-word {
  white-space: nowrap;
}

.ai-mark {
  color: var(--zinnober);
}

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-row.center { justify-content: center; }
.btn {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 16px; font-weight: 500;
  padding: 13px 26px;
  border-radius: 3px;
  text-decoration: none;
  background: var(--zinnober);
  color: var(--tief);
  border: 1px solid var(--zinnober);
}
.btn:hover { background: #F0855A; border-color: #F0855A; color: var(--tief); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--panel-2); border-color: var(--ink-2); color: var(--ink); }

.hero-facts {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 30px;
  color: var(--ink-2); font-size: 15.5px;
}
.hero-facts li { position: relative; padding-left: 22px; }
.hero-facts li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; background: var(--zinnober);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.hero-facts b { color: var(--ink); font-weight: 600; }

/* --- Karten ------------------------------------------------------- */
.cards {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px 26px;
}
section.band.alt .card, section.band.accent .card { background: var(--panel-2); }
.card h3 { font-size: 20px; margin-bottom: 12px; }
.card p { color: var(--ink-2); font-size: 15.5px; }
.card ul {
  list-style: none; margin: 18px 0 0; padding: 0;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.card li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 14.5px; color: var(--ink-2);
}
.card li:last-child { margin-bottom: 0; }
.card li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; background: var(--zinnober);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* --- Zweispalter -------------------------------------------------- */
.split {
  display: grid; gap: clamp(28px, 5vw, 60px);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
.split > div > p { color: var(--ink-2); max-width: 62ch; }
.split h2 { margin-bottom: 22px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.checks { list-style: none; margin: 28px 0 0; padding: 0; }
.checks li {
  position: relative; padding-left: 30px; margin-bottom: 16px;
  color: var(--ink-2); font-size: 16px;
}
.checks li:last-child { margin-bottom: 0; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 14px; height: 14px;
  border: 2px solid var(--zinnober); border-top: 0; border-right: 0;
  transform: rotate(-45deg) scale(.85);
}
.checks b { color: var(--ink); font-weight: 600; }

.note {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--zinnober);
  border-radius: 4px;
  padding: 26px 24px;
}
section.band.accent .note { background: var(--ground); }
.note h3 { font-size: 17px; margin-bottom: 12px; }
.note p { color: var(--ink-2); font-size: 15.5px; }

.promise {
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--f-display); font-size: 19px;
  color: var(--ink-2) !important;
}
.promise b { color: var(--ink); font-weight: 500; }

/* --- Beispiele ---------------------------------------------------- */
.ex-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.ex { background: var(--ground); padding: 28px 26px; }
section.band.alt .ex { background: var(--panel); }
.ex h3 { font-size: 18px; margin-bottom: 10px; color: var(--ink); }
.ex p { color: var(--ink-2); font-size: 15.5px; margin: 0; }

/* --- Ablauf ------------------------------------------------------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  counter-reset: step;
}
.step {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 26px 24px;
  display: flex; gap: 18px; align-items: flex-start;
}
.step-n {
  font-family: var(--f-display);
  font-size: 15px; font-weight: 500;
  color: var(--zinnober);
  border: 1px solid var(--zinnober);
  border-radius: 50%;
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { font-size: 18px; margin-bottom: 9px; }
.step p { color: var(--ink-2); font-size: 15px; margin: 0; }

/* --- Fragen ------------------------------------------------------- */
.qa { border-top: 1px solid var(--line); margin-top: 40px; }
.q { border-bottom: 1px solid var(--line); }
.q summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  font-family: var(--f-display);
  font-size: 18.5px;
  position: relative;
  color: var(--ink);
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--zinnober);
  border-bottom: 2px solid var(--zinnober);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.q[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.q summary:hover { color: var(--zinnober); }
.a { padding: 0 44px 24px 0; }
.a p { color: var(--ink-2); max-width: 68ch; margin: 0; }

/* --- Kontakt ------------------------------------------------------ */
section.contact {
  background:
    radial-gradient(70ch 40ch at 50% 120%, rgba(224, 82, 26, .18), transparent 70%),
    var(--panel);
  border-top: 1px solid var(--line);
}
.small { margin-top: 30px; font-size: 14.5px; color: var(--ink-2); }

/* --- Rechtstexte -------------------------------------------------- */
.legal h1 { font-size: 44px; margin-bottom: 34px; }
@media (max-width: 640px) {
  .legal h1 { font-size: 34px; }
}
.legal h2 {
  font-size: 20px; margin: 40px 0 12px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { margin: 0 0 1em; padding-left: 1.25em; }
.legal li { margin-bottom: 6px; }
.highlight {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--zinnober);
  border-radius: 4px;
  padding: 22px 24px;
  margin-bottom: 8px;
}
.highlight b { color: var(--ink); }

/* --- Fuß ---------------------------------------------------------- */
footer.site {
  background: var(--tief);
  border-top: 1px solid var(--line);
  padding: clamp(44px, 6vw, 68px) var(--pad) 34px;
}
.foot-grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; gap: 34px;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 820px) {
  .foot-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
.foot-brand svg { width: 156px; height: auto; display: block; margin-bottom: 16px; }
.foot-brand p { color: var(--ink-2); font-size: 14.5px; }
footer.site h3 {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hellgrau); margin-bottom: 12px; font-weight: 500;
}
footer.site p { color: var(--ink-2); font-size: 15px; }
footer.site a { color: var(--ink-2); text-decoration: none; }
footer.site a:hover { color: var(--zinnober); text-decoration: underline; }
.foot-note {
  max-width: var(--wrap); margin: 40px auto 0;
  padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--hellgrau) !important;
}

/* --- Druck / PDF -------------------------------------------------- */
@page { size: A4; margin: 0; }

@media print {
  /* Preserve backgrounds and brand colors so light text does not print on white. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  header.site { position: static; }
  header.site nav, .skip { display: none; }

  /* nichts mitten durchschneiden */
  .card, .ex, .step, .q, .note, .highlight, .foot-grid { break-inside: avoid; }
  section.band { break-inside: auto; }
  h1, h2, h3 { break-after: avoid; }

  /* Fragen im Druck immer offen — zugeklappt wäre die Antwort weg.
     display allein genügt nicht: Chrome versteckt den Inhalt geschlossener
     <details> zusätzlich über content-visibility. */
  details:not([open]) > *:not(summary) {
    display: block !important;
    content-visibility: visible !important;
  }
  .q summary::after { display: none; }
  .q summary { cursor: auto; }

  a { text-decoration: none; }
}

/* --- Fließtext-Block ---------------------------------------------- */
.prose { max-width: 68ch; margin: 22px 0 8px; }
.prose p {
  color: var(--ink-2);
  font-size: 17.5px;
  line-height: 1.72;
  margin-bottom: 1.15em;
}
.prose p:last-child { margin-bottom: 0; }
.prose b { color: var(--ink); font-weight: 600; }

h3.sub {
  font-size: 25px;
  margin: 52px 0 4px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  h3.sub { font-size: 22px; }
}

/* --- Autonomie-Stufen --------------------------------------------- */
.stufen {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: stufe;
}
.stufe {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px;
  position: relative;
  counter-increment: stufe;
}
.stufe::before {
  content: "Stufe " counter(stufe);
  display: block;
  font-family: var(--f-display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--zinnober);
  margin-bottom: 10px;
}
.stufe h3 { font-size: 19px; margin-bottom: 10px; }
.stufe p { color: var(--ink-2); font-size: 15px; margin: 0; }
.stufe .wann {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--hellgrau);
}

/* --- Portrait ----------------------------------------------------- */
.about-side { display: flex; flex-direction: column; gap: 20px; }

.portrait { margin: 0; max-width: 290px; }
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.portrait figcaption {
  margin-top: 12px;
  font-family: var(--f-display);
  font-size: 15.5px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.portrait figcaption span {
  font-size: 13.5px;
  color: var(--ink-2);
  padding-left: 10px;
  border-left: 1px solid var(--line-2);
}

/* --- Schema ------------------------------------------------------- */
.schema-wrap {
  margin: 40px 0 0;
  padding: 26px 24px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow-x: auto;
}
.schema {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
  font-family: var(--f-display);
}

/* --- Bild im Hero ------------------------------------------------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero-bild { margin: 0; }
.hero-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--line);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-bild { display: none; }
}

/* --- Abschnitt mit Hintergrundbild -------------------------------- */
.bild-nacht {
  background-image:
    linear-gradient(rgba(20, 20, 19, .80), rgba(20, 20, 19, .90)),
    url("../img/nachtbetrieb.jpg");
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
}


/* --- Papier stapelt sich und wird zur Figur ----------------------- */
/* Ablauf: einfliegen und stapeln -> umbauen -> stehen -> ausblenden -> von vorn.
   Die Staffelung steckt bewusst in den Keyframes und nicht in animation-delay:
   sonst laufen die Blaetter bei jeder Wiederholung weiter auseinander. */
.papier-roboter { display: block; width: 100%; height: auto; overflow: visible; }
.papier-roboter .bl {
  fill: var(--ink-2);
  stroke: rgba(20, 20, 19, .55);
  stroke-width: 1.5;
  animation-duration: 13s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.55, 0, .3, 1);
  animation-fill-mode: backwards;
  transform-origin: 0 0;
}
.papier-roboter .gesicht circle { fill: var(--zinnober); }
.papier-roboter .gesicht path { stroke: var(--zinnober); }
.papier-roboter .gesicht > * {
  opacity: 0;
  animation: gesicht 13s infinite cubic-bezier(.55, 0, .3, 1);
  animation-fill-mode: backwards;
}
.papier-roboter .gesicht path { animation-delay: .3s; }
@keyframes gesicht {
  0%, 52%   { opacity: 0; }
  58%, 72%  { opacity: 1; }
  78%, 100% { opacity: 0; }
}

.b0 { animation-name: blatt0; }
@keyframes blatt0 {
  0%, 3.0%   { transform: translate(73px,90px) rotate(12deg) scale(1,1);
                        opacity: 0; }
  5.0%     { opacity: .95; }
  11.0%, 34.0% { transform: translate(46px,300px) rotate(2deg)
                        scale(1,1); opacity: .95; }
  40.0% { transform: translate(55.0px,
                        164.0px) rotate(8deg)
                        scale(0.54,1.25); opacity: .55; }
  46.0%, 72%  { transform: translate(108px,96px) rotate(0deg)
                        scale(0.542,2.923); opacity: 1; }
  80%, 100%          { transform: translate(108px,96px) rotate(0deg)
                        scale(0.542,2.923); opacity: 0; }
}
.b1 { animation-name: blatt1; }
@keyframes blatt1 {
  0%, 4.8%   { transform: translate(13px,75px) rotate(21.0deg) scale(1,1);
                        opacity: 0; }
  6.8%     { opacity: .95; }
  12.8%, 34.5% { transform: translate(46px,285px) rotate(3.5deg)
                        scale(1,1); opacity: .95; }
  40.5% { transform: translate(47.0px,
                        201.5px) rotate(14.0deg)
                        scale(0.70,1.25); opacity: .55; }
  46.5%, 72%  { transform: translate(96px,186px) rotate(0deg)
                        scale(0.701,4.538); opacity: 1; }
  80%, 100%          { transform: translate(96px,186px) rotate(0deg)
                        scale(0.701,4.538); opacity: 0; }
}
.b2 { animation-name: blatt2; }
@keyframes blatt2 {
  0%, 6.6%   { transform: translate(14px,60px) rotate(21.0deg) scale(1,1);
                        opacity: 0; }
  8.6%     { opacity: .95; }
  14.6%, 35.0% { transform: translate(30px,270px) rotate(3.5deg)
                        scale(1,1); opacity: .95; }
  41.0% { transform: translate(33.0px,
                        199.0px) rotate(14.0deg)
                        scale(0.21,1.25); opacity: .55; }
  47.0%, 72%  { transform: translate(58px,196px) rotate(-6deg)
                        scale(0.210,3.231); opacity: 1; }
  80%, 100%          { transform: translate(58px,196px) rotate(-6deg)
                        scale(0.210,3.231); opacity: 0; }
}
.b3 { animation-name: blatt3; }
@keyframes blatt3 {
  0%, 8.4%   { transform: translate(84px,45px) rotate(21.0deg) scale(1,1);
                        opacity: 0; }
  10.4%     { opacity: .95; }
  16.4%, 35.5% { transform: translate(48px,255px) rotate(3.5deg)
                        scale(1,1); opacity: .95; }
  41.5% { transform: translate(105.0px,
                        191.5px) rotate(14.0deg)
                        scale(0.19,1.25); opacity: .55; }
  47.5%, 72%  { transform: translate(212px,196px) rotate(6deg)
                        scale(0.190,3.231); opacity: 1; }
  80%, 100%          { transform: translate(212px,196px) rotate(6deg)
                        scale(0.190,3.231); opacity: 0; }
}
.b4 { animation-name: blatt4; }
@keyframes blatt4 {
  0%, 10.2%   { transform: translate(48px,30px) rotate(12deg) scale(1,1);
                        opacity: 0; }
  12.2%     { opacity: .95; }
  18.2%, 36.0% { transform: translate(29px,240px) rotate(2deg)
                        scale(1,1); opacity: .95; }
  42.0% { transform: translate(63.5px,
                        242.0px) rotate(8deg)
                        scale(0.24,1.25); opacity: .55; }
  48.0%, 72%  { transform: translate(110px,312px) rotate(0deg)
                        scale(0.241,2.308); opacity: 1; }
  80%, 100%          { transform: translate(110px,312px) rotate(0deg)
                        scale(0.241,2.308); opacity: 0; }
}
.b5 { animation-name: blatt5; }
@keyframes blatt5 {
  0%, 12.0%   { transform: translate(53px,15px) rotate(-30deg) scale(1,1);
                        opacity: 0; }
  14.0%     { opacity: .95; }
  20.0%, 36.5% { transform: translate(37px,225px) rotate(-5deg)
                        scale(1,1); opacity: .95; }
  42.5% { transform: translate(107.5px,
                        234.5px) rotate(-20deg)
                        scale(0.24,1.25); opacity: .55; }
  48.5%, 72%  { transform: translate(156px,312px) rotate(0deg)
                        scale(0.239,2.308); opacity: 1; }
  80%, 100%          { transform: translate(156px,312px) rotate(0deg)
                        scale(0.239,2.308); opacity: 0; }
}
.b6 { animation-name: blatt6; }
@keyframes blatt6 {
  0%, 13.8%   { transform: translate(5px,0px) rotate(12deg) scale(1,1);
                        opacity: 0; }
  15.8%     { opacity: .95; }
  21.8%, 37.0% { transform: translate(20px,210px) rotate(2deg)
                        scale(1,1); opacity: .95; }
  43.0% { transform: translate(87.0px,
                        102.0px) rotate(8deg)
                        scale(0.13,1.25); opacity: .55; }
  49.0%, 72%  { transform: translate(140px,62px) rotate(0deg)
                        scale(0.127,1.154); opacity: 1; }
  80%, 100%          { transform: translate(140px,62px) rotate(0deg)
                        scale(0.127,1.154); opacity: 0; }
}
.b7 { animation-name: blatt7; }
@keyframes blatt7 {
  0%, 15.6%   { transform: translate(35px,-15px) rotate(30deg) scale(1,1);
                        opacity: 0; }
  17.6%     { opacity: .95; }
  23.6%, 37.5% { transform: translate(46px,195px) rotate(5deg)
                        scale(1,1); opacity: .95; }
  43.5% { transform: translate(60.0px,
                        188.5px) rotate(20deg)
                        scale(0.16,1.25); opacity: .55; }
  49.5%, 72%  { transform: translate(46px,250px) rotate(-14deg)
                        scale(0.165,0.846); opacity: 1; }
  80%, 100%          { transform: translate(46px,250px) rotate(-14deg)
                        scale(0.165,0.846); opacity: 0; }
}
.b8 { animation-name: blatt8; }
@keyframes blatt8 {
  0%, 17.4%   { transform: translate(25px,-30px) rotate(-30deg) scale(1,1);
                        opacity: 0; }
  19.4%     { opacity: .95; }
  25.4%, 38.0% { transform: translate(28px,180px) rotate(-5deg)
                        scale(1,1); opacity: .95; }
  44.0% { transform: translate(133.0px,
                        181.0px) rotate(-20deg)
                        scale(0.17,1.25); opacity: .55; }
  50.0%, 72%  { transform: translate(228px,250px) rotate(14deg)
                        scale(0.166,0.846); opacity: 1; }
  80%, 100%          { transform: translate(228px,250px) rotate(14deg)
                        scale(0.166,0.846); opacity: 0; }
}

/* Wer weniger Bewegung will, sieht die fertige Figur ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .papier-roboter .bl,
  .papier-roboter .gesicht > * { animation: none; }
  .papier-roboter .gesicht > * { opacity: 1; }
  .papier-roboter .b0 { transform: translate(108px,96px) rotate(0deg) scale(0.542,2.923); opacity: 1; }
  .papier-roboter .b1 { transform: translate(96px,186px) rotate(0deg) scale(0.701,4.538); opacity: 1; }
  .papier-roboter .b2 { transform: translate(58px,196px) rotate(-6deg) scale(0.210,3.231); opacity: 1; }
  .papier-roboter .b3 { transform: translate(212px,196px) rotate(6deg) scale(0.190,3.231); opacity: 1; }
  .papier-roboter .b4 { transform: translate(110px,312px) rotate(0deg) scale(0.241,2.308); opacity: 1; }
  .papier-roboter .b5 { transform: translate(156px,312px) rotate(0deg) scale(0.239,2.308); opacity: 1; }
  .papier-roboter .b6 { transform: translate(140px,62px) rotate(0deg) scale(0.127,1.154); opacity: 1; }
  .papier-roboter .b7 { transform: translate(46px,250px) rotate(-14deg) scale(0.165,0.846); opacity: 1; }
  .papier-roboter .b8 { transform: translate(228px,250px) rotate(14deg) scale(0.166,0.846); opacity: 1; }
}

.hero-anim { max-width: 300px; margin: 0 auto; }

/* Auf schmalen Schirmen steht die Animation unter dem Text statt daneben.
   Nicht ausblenden: sie ist ein Hauptelement der Seite, kein Beiwerk. */
@media (max-width: 900px) {
  .hero-anim { max-width: 190px; margin: 4px auto 0; }
}
@media (max-width: 420px) {
  .hero-anim { max-width: 155px; }
}