/* Wissensseiten /skills/, /blender/, /unser-system/ (Schritt Hero 7). Eine Datei; nur der Einlauf der Überschriften braucht
   ein kleines Script in der Seite. Bewegung nur über Transform und Deckkraft. Ohne Unterstützung steht alles still und bleibt lesbar. */
:root {
  --w-tief: #050a18;
  --w-tief-2: #0a1a38;
  --w-papier: #f4f4ef;
  --w-neon: #d7f52a;
  --w-kobalt: #2442eb;
  --w-tinte: #0a1a14;
  --w-leise: #f4f4efc7;
  --w-linie: #f4f4ef2e;
  --w-rand: clamp(20px, 6vw, 110px);
  --w-titel: 'Familjen Grotesk', Familjen, sans-serif;
}
html { background: var(--w-tief); color: var(--w-papier); scroll-padding-top: 24px; }
body.w-seite { background: var(--w-tief); color: var(--w-papier); font-size: clamp(17px, 1.15vw, 19px); line-height: 1.6; overflow-x: clip; }
.w-seite :focus-visible { outline-color: var(--w-neon); }
.w-seite h1, .w-seite h2, .w-seite h3 { font-family: var(--w-titel); font-weight: 500; text-wrap: balance; }
.w-seite p { max-width: 62ch; }
.w-seite a { text-underline-offset: 4px; }

.w-sprung { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 14px; border-radius: 4px; background: var(--w-neon); color: var(--w-tinte); }
.w-sprung:focus { top: 12px; }

/* ---------- Kopf der Seite ---------- */
.w-kopf { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: center; min-height: min(100svh, 980px); padding: calc(var(--kopf) + clamp(32px, 6svh, 72px)) var(--w-rand) clamp(56px, 9svh, 110px); overflow: hidden; }
.w-kopf::before { content: ''; position: absolute; z-index: -1; inset: -20% -10% auto auto; width: 75vw; height: 110%; background: radial-gradient(closest-side, #2442eb73, #2442eb00); }
.w-spur { margin: 0 0 clamp(20px, 3svh, 34px); font-size: 14.5px; color: var(--w-leise); }
.w-spur ol { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 0; list-style: none; }
.w-spur li + li::before { content: '/'; margin-right: 8px; opacity: .55; }
.w-spur a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.w-spur [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.w-kopf h1 { font-size: clamp(42px, 5.6vw, 96px); line-height: 1; letter-spacing: -.036em; }
.w-kern { margin-top: clamp(20px, 3svh, 32px); font-size: clamp(19px, 1.55vw, 25px); line-height: 1.42; }
.w-von { margin-top: 18px; font-size: 14.5px; color: var(--w-leise); }
.w-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: clamp(24px, 4svh, 38px); }
.w-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--w-neon); color: var(--w-tinte); font-weight: 500; text-decoration: none; transition: transform .14s cubic-bezier(.23, 1, .32, 1), background .2s ease; }
.w-knopf:active { transform: scale(.97); }
.w-link { display: inline-flex; align-items: center; min-height: 48px; color: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--w-neon); text-decoration-thickness: 2px; }
@media (hover: hover) { .w-knopf:hover { background: #e4ff52; } .w-link:hover { color: var(--w-neon); } .w-text a:hover { color: var(--w-neon); } }

/* Blender: die Welt als ganzer Kopf */
.w-kopf--welt { display: flex; align-items: flex-end; min-height: min(100svh, 1080px); }
.w-kopf--welt::before { display: none; }
.w-kopf--welt::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #050a18f2 0, #050a18c7 40%, #050a1800 72%), linear-gradient(180deg, #050a1800 58%, #050a18 100%); }
.w-kopf-bild { position: absolute; z-index: -2; inset: 0; }
.w-kopf-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.w-kopf-text { max-width: 52rem; }
@media (min-width: 901px) { .w-kopf--welt .w-kopf-text { max-width: 44rem; } }

/* Skills: drei Blätter im Raum */
.w-blaetter { position: relative; margin: 0; perspective: 1300px; }
.w-blatt { position: absolute; inset: 0; border-radius: 10px; background: #101f45; box-shadow: 0 24px 60px #02061480; transform-origin: 30% 60%; font: clamp(14.5px, 1.08vw, 17px)/1.55 ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace; }
.w-blatt--1 { position: relative; inset: auto; padding: clamp(20px, 2.2vw, 32px); background: var(--w-papier); color: var(--w-tinte); transform: rotateY(-13deg) rotateX(5deg); animation: w-blatt1 .8s cubic-bezier(.23, 1, .32, 1) backwards; }
.w-blatt--2 { background: var(--w-kobalt); transform: translate3d(30px, -40px, -70px) rotateY(-13deg) rotateX(5deg); animation: w-blatt2 .8s cubic-bezier(.23, 1, .32, 1) backwards; }
.w-blatt--3 { background: #1d3473; transform: translate3d(58px, -82px, -140px) rotateY(-13deg) rotateX(5deg); animation: w-blatt3 .8s cubic-bezier(.23, 1, .32, 1) backwards; }
.w-blatt--2 span, .w-blatt--3 span { position: absolute; left: clamp(20px, 2.2vw, 32px); top: 7px; color: #f4f4ef; font-size: 13.5px; }
@keyframes w-blatt1 { from { opacity: 0; transform: translate3d(0, 26px, 0) rotateY(-4deg) rotateX(2deg); } }
@keyframes w-blatt2 { from { opacity: 0; transform: translate3d(0, 0, -10px) rotateY(-13deg) rotateX(5deg); } }
@keyframes w-blatt3 { from { opacity: 0; transform: translate3d(0, 0, -20px) rotateY(-13deg) rotateX(5deg); } }
.w-blatt pre { margin: 0; font: inherit; white-space: pre-wrap; }
.w-blatt b { font-weight: 600; color: var(--w-kobalt); }
.w-blatt i { font-style: normal; display: block; height: 1px; margin: 12px 0; background: #0a1a1426; }

/* System: der Kreislauf */
.w-ring { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 0 0 auto; }
.w-ring-bahn { position: absolute; inset: 15%; border-radius: 50%; border: 1px solid var(--w-linie); }
.w-ring-lauf { position: absolute; inset: 15%; border-radius: 50%; animation: w-kreis 24s linear infinite; }
.w-ring-lauf::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(from 300deg, #d7f52a00, #d7f52a 60deg, #d7f52a00 60.5deg); -webkit-mask: radial-gradient(closest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(closest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); }
.w-ring-lauf::after { content: ''; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--w-neon); box-shadow: 0 0 16px #d7f52a; }
@keyframes w-kreis { to { transform: rotate(360deg); } }
.w-ring-mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 15px; color: var(--w-leise); }
.w-ring-mitte b { display: block; font: 500 clamp(50px, 6vw, 84px)/1 var(--w-titel); letter-spacing: -.05em; color: var(--w-papier); }
.w-ring ol { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; font: 500 clamp(14px, 1.05vw, 17px)/1.1 var(--w-titel); }
.w-ring li { position: absolute; transform: translate(-50%, -50%); padding: 6px 10px; border-radius: 4px; background: var(--w-tief); white-space: nowrap; }
.w-ring li:nth-child(1) { left: 50%; top: 15%; }
.w-ring li:nth-child(2) { left: 84%; top: 32%; }
.w-ring li:nth-child(3) { left: 84%; top: 68%; }
.w-ring li:nth-child(4) { left: 50%; top: 85%; }
.w-ring li:nth-child(5) { left: 16%; top: 68%; }
.w-ring li:nth-child(6) { left: 16%; top: 32%; color: var(--w-neon); }

/* ---------- Teile der Seite ---------- */
.w-teil { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 96px); padding: clamp(56px, 10svh, 120px) var(--w-rand); border-top: 1px solid var(--w-linie); }
.w-teil h2 { font-size: clamp(32px, 3.5vw, 58px); line-height: 1.04; letter-spacing: -.04em; }
@media (min-width: 1000px) { .w-teil > h2, .w-teil > .w-kante { position: sticky; top: 32px; align-self: start; } }
.w-kante p { margin-top: 18px; color: var(--w-leise); }
.w-kante a { color: inherit; text-decoration: underline; text-decoration-color: var(--w-kobalt); text-decoration-thickness: 2px; }
.w-text > * + * { margin-top: 1.1em; }
.w-text a { color: inherit; text-decoration: underline; text-decoration-color: var(--w-neon); text-decoration-thickness: 2px; }
.w-text h3 { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.15; letter-spacing: -.025em; margin-top: 1.7em; }
.w-text code { font: .92em ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace; }
.w-breit { grid-column: 1 / -1; }

.w-zeilen { margin: 1.4em 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--w-linie); }
.w-zeilen li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px clamp(16px, 2.4vw, 40px); padding: 18px 0; border-top: 1px solid var(--w-linie); }
.w-zeilen b { font: 500 clamp(19px, 1.45vw, 23px)/1.2 var(--w-titel); letter-spacing: -.015em; }

/* Ein Weg mit Punkten wie „So läuft’s“ auf der Startseite: keine Ziffern (IMMERSIV-GRUNDSAETZE) */
.w-schritte { position: relative; margin: 1.4em 0 0; padding: 0 0 0 30px; list-style: none; }
.w-schritte::before { content: ''; position: absolute; left: 4px; top: .7em; bottom: clamp(32px, 5svh, 48px); width: 2px; background: linear-gradient(var(--w-neon), var(--w-kobalt)); }
.w-schritte li { position: relative; padding: 0 0 clamp(20px, 3svh, 30px); }
.w-schritte li::before { content: ''; position: absolute; left: -30px; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--w-neon); box-shadow: 0 0 0 4px var(--w-tief); }
.w-schritte b { display: block; font: 500 clamp(20px, 1.5vw, 24px)/1.2 var(--w-titel); letter-spacing: -.015em; margin-bottom: 4px; }

/* Regeln wie ein Protokoll */
.w-regeln { margin: 1.4em 0 0; padding: clamp(16px, 2vw, 26px); border-radius: 8px; background: var(--w-tief-2); list-style: none; font: 15px/1.5 ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace; }
.w-regeln li { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 2px 12px; padding: 7px 0; }
.w-regeln span { color: var(--w-neon); }

/* Film und Bilder */
.w-film-feld { margin: 0; }
.w-film, .w-film-start { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #3b3b3b; }
.w-text .w-film-start { position: relative; overflow: hidden; color: var(--w-tinte); text-decoration: none; }
.w-film-start img { width: 100%; height: 100%; object-fit: cover; }
.w-film-start span { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--w-neon); font-weight: 500; transition: transform .14s cubic-bezier(.23, 1, .32, 1); }
.w-film-start span::before { content: ''; width: 0; height: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.w-film-start:active span { transform: scale(.97); }
.w-film-feld figcaption, .w-bild figcaption { margin-top: 10px; font-size: 14.5px; color: var(--w-leise); }
.w-bild { margin: 0; }
.w-bild img { width: 100%; height: auto; border-radius: 8px; }
.w-film-reihe { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(20px, 4vw, 64px); align-items: start; margin-top: clamp(24px, 4svh, 40px); }

/* Heller Teil */
.w-hell { background: var(--w-papier); color: var(--w-tinte); --w-linie: #0a1a1426; --w-leise: #0a1a14b8; border-top: 0; }
.w-hell :focus-visible { outline-color: var(--w-kobalt); }
.w-hell .w-text a { text-decoration-color: var(--w-kobalt); }
.w-hell .w-link { text-decoration-color: var(--w-kobalt); }
.w-hell .w-schritte::before { background: var(--w-kobalt); }
.w-hell .w-schritte li::before { background: var(--w-kobalt); box-shadow: 0 0 0 4px var(--w-papier); }

/* Derselbe Auftrag, zweimal */
.w-probe { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(14px, 2vw, 28px); align-items: end; margin-top: 1.4em; }
.w-probe figure { margin: 0; }
.w-probe figcaption { margin-bottom: 8px; font-size: 14.5px; font-weight: 500; }
.w-probe-seite { overflow: hidden; border-radius: 10px; }
.w-probe-worte { padding: clamp(14px, 1.6vw, 22px); }
.w-probe-marke { margin: 0 0 10px; font-size: 13px; }
.w-probe-t { margin: 0; }
.w-probe-u { margin: 8px 0 14px; font-size: 15px; line-height: 1.4; }
.w-probe-k { display: inline-block; padding: 9px 14px; font-size: 14px; }
.w-probe--alt .w-probe-seite { background: #dcdcdc; color: #3b3b3b; font-family: Arial, Helvetica, sans-serif; }
.w-probe--alt .w-probe-bild { height: clamp(72px, 9vw, 120px); background: #bdbdbd; }
.w-probe--alt .w-probe-t { font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; line-height: 1.15; }
.w-probe--alt .w-probe-k { background: #8c8c8c; color: #fff; }
.w-probe--neu .w-probe-seite { background: var(--w-tief); color: var(--w-papier); }
.w-probe--neu img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.w-probe--neu .w-probe-marke { font-family: var(--w-titel); }
.w-probe--neu .w-probe-t { font: 500 clamp(26px, 3vw, 44px)/1 var(--w-titel); letter-spacing: -.035em; }
.w-probe--neu .w-probe-k { border-radius: 4px; background: var(--w-neon); color: var(--w-tinte); font-weight: 500; }
.w-probe--neu .w-probe-fein { margin: 10px 0 0; font-size: 13px; opacity: .8; }

/* Vergleich als echte Tabelle */
.w-tafel { width: 100%; margin-top: 1.4em; border-collapse: collapse; font-size: .96em; line-height: 1.45; }
.w-tafel th, .w-tafel td { padding: 14px 16px 14px 0; border-top: 1px solid var(--w-linie); text-align: left; vertical-align: top; font-weight: 400; }
.w-tafel thead th { border-top: 0; font: 500 clamp(17px, 1.3vw, 20px)/1.2 var(--w-titel); }
.w-tafel tbody th { font-weight: 600; white-space: nowrap; }
.w-tafel .w-wir { color: var(--w-neon); }
.w-hell .w-tafel .w-wir { color: var(--w-kobalt); }

/* Fragen */
.w-fragen { border-bottom: 1px solid var(--w-linie); }
.w-fragen details { border-top: 1px solid var(--w-linie); }
.w-fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; padding: 12px 0; cursor: pointer; list-style: none; font: 500 clamp(19px, 1.45vw, 23px)/1.2 var(--w-titel); letter-spacing: -.015em; }
.w-fragen summary::-webkit-details-marker { display: none; }
.w-fragen summary::after { content: '+'; flex: none; font-size: 28px; line-height: 1; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.w-fragen details[open] summary::after { transform: rotate(45deg); }
.w-fragen p { padding: 0 0 20px; }

/* Abschluss */
.w-schluss { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); padding: clamp(60px, 11svh, 130px) var(--w-rand); background: var(--w-kobalt); color: #fff; }
.w-schluss :focus-visible { outline-color: #fff; }
.w-schluss h2 { font-size: clamp(38px, 5vw, 84px); line-height: 1; letter-spacing: -.04em; }
.w-schluss p { margin-top: 18px; }
.w-schluss .w-link { text-decoration-color: var(--w-neon); }
.w-weiter { margin: 0; padding: 0; list-style: none; align-self: end; }
.w-weiter li { border-top: 1px solid #ffffff4d; }
.w-weiter a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 8px 0; color: inherit; font: 500 clamp(19px, 1.5vw, 24px)/1.2 var(--w-titel); letter-spacing: -.015em; text-decoration: none; }
.w-weiter a::after { content: '→'; flex: none; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) { .w-weiter a:hover::after { transform: translateX(6px); } .w-schluss .w-link:hover { color: var(--w-neon); } }

/* Einmal ruhig einlaufen (Gesamtprüfung 02.11., Befund 17: vorher an den Scrollstand gekoppelt, lief beim Zurückscrollen rückwärts).
   Das Script der Seite setzt nur Überschriften, die beim Laden außerhalb des Bildes liegen, auf „warten“ und beim ersten
   Erscheinen auf „da“ (IntersectionObserver). Kein Bezug zum Scrollstand; ohne Script und beim Drucken steht alles. */
@media screen and (prefers-reduced-motion: no-preference) {
  .w-einlauf.w-warte { opacity: 0; transform: translateY(22px); }
  .w-einlauf.w-da { transition: opacity .6s cubic-bezier(.23, 1, .32, 1), transform .6s cubic-bezier(.23, 1, .32, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .w-blatt { animation: none; }
  .w-ring-lauf { animation: none; transform: rotate(60deg); }
  .w-knopf, .w-film-start span, .w-weiter a::after, .w-fragen summary::after { transition: none; }
}

/* ---------- Handy ---------- */
@media (max-width: 999px) {
  .w-teil { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .w-kopf { grid-template-columns: minmax(0, 1fr); min-height: 0; align-items: start; }
  .w-kopf::before { inset: -10% -40% auto -40%; width: auto; height: 90%; }
  .w-kopf--welt { display: flex; min-height: 0; padding-top: min(68vw, 44svh); }
  .w-kopf--welt::after { background: linear-gradient(180deg, #050a1866 0, #050a1800 calc(var(--kopf) + 40px), #050a1800 24%, #050a18 min(80vw, 52svh)); }
  .w-kopf-bild { inset: 0 0 auto; height: min(88vw, 56svh); }
  .w-kopf-bild img { object-position: 50% 26%; }
  .w-kopf--welt .w-spur { margin-bottom: 8px; }
  .w-blaetter { margin: 6px 26px 0 0; }
  .w-blatt--1 { transform: rotateY(-7deg) rotateX(3deg); }
  .w-blaetter { margin-top: 44px; }
  .w-blatt--2 { transform: translate3d(14px, -30px, -50px) rotateY(-7deg) rotateX(3deg); }
  .w-blatt--3 { transform: translate3d(26px, -58px, -100px) rotateY(-7deg) rotateX(3deg); }
  .w-ring { margin: 0 auto; }
  .w-film-reihe { grid-template-columns: minmax(0, 1fr); }
  .w-film, .w-film-start { aspect-ratio: 4 / 5; }
  .w-schluss { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .w-zeilen li { grid-template-columns: minmax(0, 1fr); }
  .w-regeln li { grid-template-columns: minmax(0, 1fr); }
  .w-regeln { font-size: 14.5px; }
  .w-tafel, .w-tafel tbody, .w-tafel tr { display: block; }
  .w-tafel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .w-tafel tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; padding: 14px 0; border-top: 1px solid var(--w-linie); }
  .w-tafel th, .w-tafel td { padding: 0; border: 0; }
  .w-tafel tbody th { grid-column: 1 / -1; margin-bottom: 6px; }
  .w-tafel td::before { content: attr(data-spalte); display: block; margin-bottom: 2px; font-size: 13px; color: var(--w-leise); }
  .w-probe { gap: 10px; }
  .w-probe-u { font-size: 13.5px; }
}