/* AETER - Website. Schwarz, ein Akzent in Bernstein.
   Keine fremden Schriften, keine Skripte von außen: die Seite lädt nichts von
   Dritten nach (Datenschutz, siehe datenschutz.html). */

:root {
  --bg: #000;
  --flaeche: #0b0b0d;
  --flaeche-2: #111114;
  --linie: rgba(255, 255, 255, .08);
  --linie-2: rgba(255, 255, 255, .14);
  --text: #f4f2ee;
  --text-2: #a19d95;
  --text-3: #6e6a63;
  --akzent: #d4a15c;
  --akzent-hell: #f0c88c;
  --akzent-text: #140e05;
  --fehler: #f08a72;
  --radius: 18px;
  --breite: 1400px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--akzent); color: var(--akzent-text); }

a { color: var(--akzent); }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .huelle { padding: 0 32px; } }
@media (min-width: 1300px) { .huelle { padding: 0 56px; } }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--linie);
}
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 650; letter-spacing: .2em; font-size: 15px; }
.marke img { width: 28px; height: 28px; }
.kopf nav { display: flex; gap: 26px; align-items: center; font-size: 14px; }
.kopf nav a { color: var(--text-2); text-decoration: none; transition: color .2s; }
.kopf nav a:hover { color: var(--text); }
.kopf nav .knopf { color: var(--akzent-text); }
@media (max-width: 760px) { .kopf nav a:not(.knopf) { display: none; } }
body.unterseite main { padding-top: 64px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(180deg, var(--akzent-hell), var(--akzent));
  color: var(--akzent-text); text-decoration: none;
  font-weight: 650; border: 0; font-size: 14px; cursor: pointer; font-family: inherit;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 8px 30px -8px rgba(212, 161, 92, .55);
  transition: transform .2s, box-shadow .2s;
}
.knopf:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 12px 38px -8px rgba(212, 161, 92, .75); }
.knopf.gross { padding: 15px 28px; font-size: 16px; }
.knopf.leise { background: rgba(255, 255, 255, .04); color: var(--text); box-shadow: 0 0 0 1px var(--linie-2) inset; }
.knopf.leise:hover { background: rgba(255, 255, 255, .08); }
.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* ---------- Auftakt ---------- */
.auftakt { position: relative; padding: 140px 0 90px; min-height: 100svh; display: flex; align-items: center; }
.auftakt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 70% 45%, rgba(212, 161, 92, .13), transparent 70%),
    radial-gradient(40% 40% at 15% 80%, rgba(120, 140, 200, .07), transparent 70%);
}
.auftakt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent);
}
.auftakt .huelle { position: relative; z-index: 1; display: grid; gap: 40px; grid-template-columns: 1.05fr 1fr; align-items: center; width: 100%; }
@media (max-width: 920px) {
  .auftakt { padding-top: 110px; min-height: 0; }
  .auftakt .huelle { grid-template-columns: 1fr; }
}
.etikett {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--akzent-hell); border: 1px solid rgba(212, 161, 92, .35); background: rgba(212, 161, 92, .06);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 26px;
}
.etikett .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 10px var(--akzent); animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .35; } }
.auftakt h1 {
  font-size: clamp(40px, 6.4vw, 78px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 24px; font-weight: 700;
}
.verlauf {
  background: linear-gradient(100deg, var(--akzent-hell) 0%, var(--akzent) 45%, #fff3df 70%, var(--akzent) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: glanz 9s ease-in-out infinite;
}
@keyframes glanz { 50% { background-position: 100% 0; } }
.auftakt .einleitung { max-width: 560px; margin: 0 0 36px; color: var(--text-2); font-size: clamp(17px, 1.6vw, 20px); }
.auftakt .knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.slogan { margin-top: 36px; color: var(--text-3); font-size: 14px; letter-spacing: .08em; }

/* Das Geflecht */
.geflecht { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; }
.geflecht svg { width: 100%; height: 100%; overflow: visible; }
.geflecht .faden { stroke: rgba(212, 161, 92, .22); stroke-width: 1; fill: none; }
.geflecht .faden.quer { stroke: rgba(255, 255, 255, .07); stroke-dasharray: 3 6; }
.geflecht .faden.zieh { stroke-dasharray: 600; stroke-dashoffset: 600; animation: zieh 2.2s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes zieh { to { stroke-dashoffset: 0; } }
.geflecht .ring { fill: none; stroke: rgba(255, 255, 255, .05); }
.geflecht .knoten { transform-box: fill-box; transform-origin: center; animation: schwebe 7s ease-in-out infinite; }
.geflecht .knoten rect { fill: #0d0d10; stroke: var(--linie-2); }
.geflecht .knoten text { fill: var(--text); font-size: 23px; font-weight: 550; letter-spacing: .01em; }
.geflecht .knoten .glut { fill: var(--akzent); }
.geflecht .knoten.aktiv rect { stroke: var(--akzent); }
.geflecht .faden.aktiv { stroke: var(--akzent); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(212, 161, 92, .8)); }
.geflecht .impuls { fill: var(--akzent-hell); filter: drop-shadow(0 0 6px var(--akzent)); }
.geflecht .mitte { filter: drop-shadow(0 0 40px rgba(212, 161, 92, .35)); }
@keyframes schwebe { 50% { transform: translateY(-6px); } }

/* ---------- Abschnitte ---------- */
section { position: relative; padding: 110px 0; scroll-margin-top: 64px; }
@media (max-width: 700px) { section { padding: 80px 0; } }
.oberzeile { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); margin: 0 0 16px; font-weight: 600; }
h2 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 20px; font-weight: 700; max-width: 820px; }
.vorspann { color: var(--text-2); max-width: 680px; margin: 0 0 56px; font-size: 18px; }
.trenner { height: 1px; background: linear-gradient(90deg, transparent, var(--linie-2), transparent); }

/* Karten mit Lichtkegel unter dem Zeiger */
.karte {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--flaeche-2), var(--flaeche));
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 28px;
  transition: border-color .3s, transform .3s;
}
.karte::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 161, 92, .12), transparent 60%);
}
.karte:hover { border-color: var(--linie-2); }
.karte:hover::before { opacity: 1; }
.karte h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.01em; }
.karte p { margin: 0; color: var(--text-2); font-size: 16px; }
.zeichen { width: 40px; height: 40px; margin-bottom: 18px; color: var(--akzent); padding: 9px; border-radius: 12px; background: rgba(212, 161, 92, .08); border: 1px solid rgba(212, 161, 92, .2); }

.raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Verknüpfungsbeispiele: eine Kette aus Stationen */
.ketten { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .ketten { grid-template-columns: 1fr; } }
.ketten .karte.breit { grid-column: 1 / -1; }
/* Breite Bildschirme: drei nebeneinander, das breite Beispiel über zwei. */
@media (min-width: 1280px) {
  .ketten { grid-template-columns: repeat(3, 1fr); }
  .ketten .karte.breit { grid-column: span 2; }
}
.kette { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 0 0 22px; }
.station {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px;
  background: #141418; border: 1px solid var(--linie-2); font-size: 14px; font-weight: 550; white-space: nowrap;
}
.station i { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); font-style: normal; }
.leitung { position: relative; width: 38px; height: 2px; background: var(--linie-2); overflow: hidden; flex: none; }
.leitung::after {
  content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--akzent-hell), transparent);
  animation: fluss 2.2s linear infinite;
}
.kette .leitung:nth-of-type(2)::after { animation-delay: .5s; }
.kette .leitung:nth-of-type(3)::after { animation-delay: 1s; }
@keyframes fluss { to { left: 100%; } }
@media (max-width: 480px) { .leitung { width: 22px; } .station { font-size: 13px; padding: 6px 10px; } }

/* Zwei Hälften */
.haelften { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .haelften { grid-template-columns: 1fr; } }
.haelfte { padding: 36px; }
.haelfte h3 { font-size: 26px; }
.marken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.marken span { font-size: 14px; color: var(--text); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie-2); background: rgba(255, 255, 255, .02); }
.haelften .brueckentext { grid-column: 1 / -1; text-align: center; color: var(--text-2); padding: 18px; font-size: 16px; }
.haelften .brueckentext strong { color: var(--akzent-hell); font-weight: 600; }

/* Vision */
.vision { text-align: center; }
.vision h2 { margin-inline: auto; }
.vision .vorspann { margin-inline: auto; }
.zusagen { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; text-align: left; }
@media (max-width: 960px) { .zusagen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zusagen { grid-template-columns: 1fr; } }
.zusage { background: var(--flaeche); padding: 30px 26px; }
.zusage .zahl { font-size: 13px; color: var(--akzent); font-weight: 600; letter-spacing: .1em; }
.zusage h3 { font-size: 19px; margin: 10px 0 8px; }
.zusage p { margin: 0; color: var(--text-2); font-size: 15px; }

/* ---------- Beta ---------- */
.zweispaltig { display: grid; gap: 56px; grid-template-columns: 1fr 1.05fr; align-items: start; }
@media (max-width: 920px) { .zweispaltig { grid-template-columns: 1fr; gap: 40px; } }
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { padding: 16px 0 16px 34px; border-bottom: 1px solid var(--linie); position: relative; }
.liste li::before {
  content: ""; position: absolute; left: 4px; top: 25px; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid var(--akzent); box-shadow: 0 0 12px rgba(212, 161, 92, .5);
}
.liste li strong { display: block; }
.liste li span { color: var(--text-2); font-size: 16px; }

.formular {
  position: relative; background: linear-gradient(180deg, #101013, #0a0a0c);
  border: 1px solid var(--linie-2); border-radius: 22px; padding: 32px;
  box-shadow: 0 40px 120px -40px rgba(212, 161, 92, .25);
}
@media (max-width: 480px) { .formular { padding: 22px; } }
.feld { margin-bottom: 20px; }
.feld label, .feld legend { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.feld .hilfe { font-weight: 400; color: var(--text-3); }
.feld input[type="text"], .feld input[type="email"], .feld select, .feld textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--linie-2);
  background: #050506; color: var(--text); font: inherit; font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px rgba(212, 161, 92, .15);
}
fieldset.feld { border: 0; padding: 0; margin-inline: 0; }
.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.wahl label {
  display: flex; gap: 10px; align-items: center; font-weight: 450; margin: 0;
  border: 1px solid var(--linie-2); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 14px;
  transition: border-color .2s, background .2s;
}
.wahl label:has(input:checked) { border-color: var(--akzent); background: rgba(212, 161, 92, .07); }
.wahl input, .einwilligung input { accent-color: var(--akzent); }
.einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); font-weight: 400 !important; }
.einwilligung input { margin-top: 4px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; font-size: 15px; display: none; }
.meldung.fehler { display: block; border: 1px solid var(--fehler); color: var(--fehler); background: rgba(240, 138, 114, .06); }
.formular .knopf { width: 100%; justify-content: center; }

/* ---------- Fragen ---------- */
.fragen { max-width: 860px; }
details { border-bottom: 1px solid var(--linie); padding: 22px 0; }
summary { cursor: pointer; font-weight: 600; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--akzent); font-weight: 300; font-size: 26px; line-height: 1; transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--text-2); margin: 12px 0 0; max-width: 760px; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); padding: 36px 0 52px; color: var(--text-3); font-size: 14px; }
.fuss .huelle { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fuss a { color: var(--text-2); text-decoration: none; }
.fuss a:hover { color: var(--text); }

/* ---------- Rechtstexte und kleine Seiten ---------- */
.text { max-width: 760px; padding: 64px 0 90px; }
.text h1 { font-size: clamp(34px, 5vw, 48px); letter-spacing: -.03em; margin: 0 0 28px; }
.text h2 { font-size: 22px; margin: 36px 0 8px; letter-spacing: -.01em; }
.text p, .text li { color: var(--text-2); }
.platzhalter { background: rgba(212, 161, 92, .18); color: var(--text); padding: 0 4px; border-radius: 4px; }
.hinweisbox { border: 1px dashed var(--akzent); border-radius: 12px; padding: 14px 16px; margin-bottom: 28px; color: var(--text); }
.schlicht { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 40px 16px; }
.schlicht .siegel { width: 96px; height: 96px; margin: 0 auto 28px; display: block; filter: drop-shadow(0 0 40px rgba(212, 161, 92, .35)); }
.schlicht h1 { font-size: clamp(32px, 6vw, 52px); letter-spacing: -.03em; margin: 0 0 16px; }
.schlicht p { color: var(--text-2); max-width: 520px; margin: 0 auto 32px; }

/* ============================================================
   Beispielszenen: kleine, bewegte Bilder dessen, was passiert.
   Gezeichnet, keine Bildschirmfotos. Laufen erst, wenn sie im Bild sind.
   ============================================================ */
.szene {
  position: relative; overflow: hidden; margin: -6px -6px 24px; border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 0%, #15151a, #08080a);
  border: 1px solid var(--linie); min-height: 230px; padding: 18px;
  font-size: 12.5px; line-height: 1.45; color: var(--text);
}
.szene * { animation-play-state: paused !important; }
.sichtbar .szene * { animation-play-state: running !important; }
.fenster {
  background: #0f0f13; border: 1px solid var(--linie-2); border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
}
.fenster-kopf {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--linie);
  font-size: 11px; color: var(--text-2); background: rgba(255, 255, 255, .02);
}
.fenster-kopf b { color: var(--text); font-weight: 600; }
.fenster-kopf .art { margin-left: auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); }
.fenster-rumpf { padding: 10px 12px; }
.zeile { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .09); margin: 7px 0; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px;
  background: rgba(212, 161, 92, .16); color: var(--akzent-hell); border: 1px solid rgba(212, 161, 92, .4);
  font-weight: 600; white-space: nowrap;
}
.marke-klein { font-size: 10px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--linie-2); color: var(--text-2); white-space: nowrap; }

/* 1 - Name in einer Notiz */
.sz-name { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.sz-name .getippt { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: sz-tippe 9s steps(12) infinite; }
@keyframes sz-tippe { 0% { max-width: 0; opacity: 1; } 14% { max-width: 12ch; opacity: 1; } 16%, 100% { max-width: 12ch; opacity: 0; } }
.sz-name .erwaehnung { opacity: 0; animation: sz-ein-a 9s infinite; }
@keyframes sz-ein-a { 0%, 15% { opacity: 0; transform: scale(.8); } 19%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sz-name .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 11px; background: linear-gradient(135deg, #3b3b48, #1d1d24); border: 1px solid var(--linie-2); flex: none; }
.sz-name .person { display: flex; gap: 9px; align-items: center; margin-bottom: 8px; }
.sz-name .person small { display: block; color: var(--text-3); font-size: 10.5px; }
.sz-name .abschnitt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 10px 0 5px; }
.sz-name .eintrag { display: flex; gap: 6px; align-items: center; padding: 5px 7px; border-radius: 7px; border: 1px solid var(--linie); margin-top: 5px; font-size: 11.5px; }
.sz-name .eintrag::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--text-3); flex: none; }
.sz-name .eintrag.neu { border-color: rgba(212, 161, 92, .55); background: rgba(212, 161, 92, .08); opacity: 0; animation: sz-neu 9s infinite; }
.sz-name .eintrag.neu::before { background: var(--akzent); }
@keyframes sz-neu { 0%, 30% { opacity: 0; transform: translateY(-6px); } 36%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sz-name .bruecke { position: absolute; left: 50%; top: 50%; width: 26px; margin-left: -13px; height: 2px; background: var(--akzent); box-shadow: 0 0 10px var(--akzent); transform-origin: left; animation: sz-bruecke 9s infinite; }
@keyframes sz-bruecke { 0%, 20% { transform: scaleX(0); opacity: 1; } 30%, 88% { transform: scaleX(1); opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 520px) { .sz-name { grid-template-columns: 1fr; gap: 14px; } .sz-name .bruecke { display: none; } }

/* 2 - Kalender */
.sz-kalender .tag { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 10px; }
.sz-kalender .tag b { font-size: 14px; }
.sz-kalender .tag span { color: var(--text-3); font-size: 11px; }
.sz-kalender .posten {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center;
  padding: 7px 10px; margin-top: 6px; border-radius: 8px; background: #111116; border: 1px solid var(--linie);
  border-left: 3px solid var(--farbe); opacity: 0; animation: sz-posten 9s infinite; animation-delay: var(--v);
}
.sz-kalender .posten time { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 11px; }
.sz-kalender .posten .marke-klein { color: var(--farbe); border-color: var(--farbe); }
@keyframes sz-posten { 0% { opacity: 0; transform: translateX(-10px); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 3 - Whiteboard */
.sz-wand {
  background-color: #0a0a0d; min-height: 250px;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 16px 16px;
}
.sz-wand svg.faeden { position: absolute; inset: 0; width: 100%; height: 100%; }
.sz-wand svg.faeden path { fill: none; stroke: rgba(212, 161, 92, .55); stroke-width: 1.5; stroke-dasharray: 4 4; animation: sz-faden 1.2s linear infinite; }
@keyframes sz-faden { to { stroke-dashoffset: -16; } }
.sz-wand .notiz { position: absolute; width: 40%; max-width: 200px; }
.sz-wand .notiz .fenster-rumpf { padding: 8px 10px; }
.sz-wand .n1 { left: 5%; top: 14%; transform: rotate(-2deg); animation: sz-klick 7s infinite; }
.sz-wand .n2 { right: 6%; top: 8%; transform: rotate(1.5deg); }
.sz-wand .n3 { left: 33%; bottom: 7%; transform: rotate(-1deg); }
.sz-wand .minikarte { height: 34px; border-radius: 6px; margin-top: 4px; background: linear-gradient(135deg, #1b2a24, #14201c); position: relative; overflow: hidden; }
.sz-wand .minikarte::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(35deg, transparent 0 9px, rgba(255, 255, 255, .05) 9px 10px); }
.sz-wand .minikarte::after { content: ""; position: absolute; left: 55%; top: 30%; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--akzent); }
.sz-wand .zeiger { position: absolute; left: 70%; top: 85%; width: 18px; animation: sz-zeiger 7s infinite; z-index: 3; }
.sz-wand .oeffnen { position: absolute; left: 7%; top: 14%; margin-top: -24px; padding: 3px 9px; border-radius: 7px; background: var(--akzent); color: var(--akzent-text); font-weight: 700; font-size: 11px; opacity: 0; animation: sz-oeffnen 7s infinite; z-index: 2; }
@keyframes sz-zeiger { 0% { left: 70%; top: 85%; } 35%, 60% { left: 24%; top: 34%; } 45% { transform: scale(.85); } 50% { transform: none; } 100% { left: 70%; top: 85%; } }
@keyframes sz-klick { 0%, 42% { box-shadow: none; } 46%, 70% { box-shadow: 0 0 0 2px var(--akzent), 0 0 30px rgba(212, 161, 92, .45); } 80%, 100% { box-shadow: none; } }
@keyframes sz-oeffnen { 0%, 45% { opacity: 0; transform: translateY(4px); } 50%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; } }
@media (max-width: 480px) { .sz-wand .notiz { width: 46%; } .sz-wand .n3 { left: 27%; } }

/* 4 - Suche */
.sz-suche .feldchen { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--akzent); background: #0b0b0e; box-shadow: 0 0 0 4px rgba(212, 161, 92, .12); margin-bottom: 12px; font-size: 13px; }
.sz-suche .feldchen svg { width: 14px; height: 14px; color: var(--text-3); flex: none; }
.sz-suche .getippt { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: sz-tippe-s 9s steps(4) infinite; }
@keyframes sz-tippe-s { 0% { max-width: 0; } 12%, 100% { max-width: 4ch; } }
.sz-suche .cursor { width: 1px; height: 14px; background: var(--akzent); animation: puls 1s steps(2) infinite; }
.sz-suche .gruppe { opacity: 0; animation: sz-posten 9s infinite; animation-delay: var(--v); margin-top: 8px; }
.sz-suche .gruppe small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.sz-suche .treffer { display: flex; justify-content: space-between; gap: 10px; padding: 5px 9px; border-radius: 7px; background: #111116; border: 1px solid var(--linie); }
.sz-suche .treffer em { font-style: normal; color: var(--akzent-hell); font-weight: 600; }
.sz-suche .treffer span:last-child { color: var(--text-3); font-size: 11px; white-space: nowrap; }

/* 5 - Nichts zeigt ins Leere */
.sz-leere { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; min-height: 210px; }
@media (max-width: 620px) { .sz-leere { grid-template-columns: 1fr; gap: 16px; } }
.wechsel { display: inline-grid; vertical-align: middle; }
.wechsel > * { grid-area: 1 / 1; }
.s1 { animation: sz-s1 12s infinite; }
.s2 { animation: sz-s2 12s infinite; opacity: 0; }
.s3 { animation: sz-s3 12s infinite; opacity: 0; }
@keyframes sz-s1 { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes sz-s2 { 0%, 30% { opacity: 0; } 34%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes sz-s3 { 0%, 62% { opacity: 0; } 66%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sz-s23 { 0%, 30% { opacity: 0; } 34%, 96% { opacity: 1; } 100% { opacity: 0; } }
.sz-leere .chip.tot { background: rgba(240, 138, 114, .1); color: var(--fehler); border: 1px dashed var(--fehler); text-decoration: line-through; text-decoration-color: rgba(240, 138, 114, .6); }
.sz-leere .hinweis { margin-top: 12px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fehler); }
.sz-leere .hinweis.ruhig { color: var(--akzent-hell); }
.sz-leere .ziel { animation: sz-weg 12s infinite; }
@keyframes sz-weg { 0%, 62% { opacity: 1; transform: none; filter: none; } 70%, 96% { opacity: .2; transform: scale(.94) translateY(8px); filter: grayscale(1); } 100% { opacity: 1; transform: none; } }

/* Zwei Hälften: Fäden über die Naht */
.haelften-bild { grid-column: 1 / -1; }
.sz-haelften { margin: 0; min-height: 380px; border-radius: var(--radius); }
.sz-haelften::before, .sz-haelften::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none;
}
.sz-haelften::before { left: 0; background: radial-gradient(80% 70% at 30% 50%, rgba(122, 167, 255, .07), transparent 70%); }
.sz-haelften::after { right: 0; background: radial-gradient(80% 70% at 70% 50%, rgba(212, 161, 92, .08), transparent 70%); }
.sz-haelften .seite { position: absolute; top: 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; z-index: 2; }
.sz-haelften .seite.links { left: 20px; color: #9dbbff; }
.sz-haelften .seite.rechts { right: 20px; color: var(--akzent-hell); }
.sz-haelften .naht { position: absolute; left: 50%; top: 14%; bottom: 6%; width: 1px; background: linear-gradient(transparent, var(--linie-2) 20%, var(--linie-2) 80%, transparent); }
.sz-haelften .naht-titel { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.sz-haelften svg.faeden { position: absolute; inset: 0; width: 100%; height: 100%; }
.sz-haelften .grund path { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sz-haelften .licht path {
  /* Ohne non-scaling-stroke: sonst rechnet der Strich in Bildpunkten statt
     in pathLength, und aus einem Lichtpunkt wird eine Perlenkette. */
  fill: none; stroke: var(--akzent-hell); stroke-width: .7; stroke-linecap: round;
  stroke-dasharray: 8 92; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px var(--akzent));
  animation: sz-strom 3.4s linear infinite; animation-delay: var(--v);
}
@keyframes sz-strom { to { stroke-dashoffset: 0; } }
.knoten-h {
  position: absolute; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: #101014; border: 1px solid var(--linie-2);
}
.knoten-h.l { left: 19%; border-color: rgba(122, 167, 255, .35); }
.knoten-h.r { left: 81%; border-color: rgba(212, 161, 92, .4); }
.knoten-h.leise { opacity: .45; }
@media (max-width: 520px) { .knoten-h { font-size: 11.5px; padding: 6px 10px; } .knoten-h.l { left: 21%; } .knoten-h.r { left: 79%; } }

/* Der Tresorschlüssel */
.tresor { display: grid; gap: 48px; grid-template-columns: 1fr 1fr; align-items: center; margin-top: 72px; text-align: left; }
@media (max-width: 920px) { .tresor { grid-template-columns: 1fr; gap: 32px; } }
.tresor-text h3 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; margin: 0 0 14px; }
.tresor-text > p { color: var(--text-2); margin: 0 0 18px; }
.tresor-text .ehrlich { font-size: 14px; color: var(--text-3); margin-top: 18px; }
.sz-tresor { margin: 0; padding: 22px; display: flex; flex-direction: column; align-items: stretch; border-radius: var(--radius); }
.tr-reihe { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.tr-stufe {
  position: relative; padding: 11px 14px; border-radius: 12px; background: #111116; border: 1px solid var(--linie-2);
  animation: tr-glut 10s infinite; animation-delay: var(--v, 0s);
}
.tr-stufe small { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tr-stufe b { font-size: 13.5px; font-weight: 600; }
.tr-stufe .punkte { letter-spacing: .2em; color: var(--akzent-hell); }
.tr-notfall { animation: none; border-style: dashed; opacity: .75; }
@keyframes tr-glut { 0%, 2% { border-color: var(--linie-2); box-shadow: none; } 6%, 14% { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(212, 161, 92, .12), 0 0 24px rgba(212, 161, 92, .25); } 22%, 100% { border-color: var(--linie-2); box-shadow: none; } }
.tr-pfeil { position: relative; height: 38px; display: flex; align-items: center; padding-left: 34px; }
.tr-pfeil::before { content: ""; position: absolute; left: 22px; top: 4px; bottom: 4px; width: 2px; background: var(--linie-2); border-radius: 1px; }
.tr-pfeil::after {
  content: ""; position: absolute; left: 22px; top: 4px; width: 2px; height: 12px; border-radius: 1px;
  background: var(--akzent-hell); box-shadow: 0 0 8px var(--akzent); animation: tr-fall 1.6s linear infinite;
}
@keyframes tr-fall { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
.tr-pfeil span { font-size: 11px; color: var(--text-3); letter-spacing: .04em; }
.tr-kern { display: flex; gap: 12px; align-items: center; border-color: rgba(212, 161, 92, .45); background: linear-gradient(180deg, #17140f, #0f0d0a); }
.tr-kern .schloss { width: 30px; height: 30px; color: var(--akzent); flex: none; overflow: visible; }
.tr-kern .buegel { animation: tr-buegel 10s infinite; transform-box: fill-box; transform-origin: right bottom; }
@keyframes tr-buegel { 0%, 24% { transform: none; } 30%, 88% { transform: translateY(-3px) rotate(18deg); } 94%, 100% { transform: none; } }
.tr-felder { display: grid; gap: 6px; }
.tr-feld { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 9px; background: #0d0d11; border: 1px solid var(--linie); }
.tr-feld small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.tr-feld code { font: 12px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text-3); }
.tr-feld .zu { animation: tr-zu 10s infinite; }
.tr-feld .auf { animation: tr-auf 10s infinite; opacity: 0; color: var(--text); font-weight: 550; }
@keyframes tr-zu { 0%, 32% { opacity: 1; } 36%, 86% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes tr-auf { 0%, 32% { opacity: 0; } 36%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
.tr-feld:nth-child(2) .zu, .tr-feld:nth-child(2) .auf { animation-delay: .25s; }
.tr-feld:nth-child(3) .zu, .tr-feld:nth-child(3) .auf { animation-delay: .5s; }
@media (max-width: 480px) { .tr-reihe { grid-template-columns: 1fr; } .tr-feld { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Erscheinen beim Scrollen ---------- */
.js .zeige { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--verzug, 0s); }
.js .zeige.sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .zeige { opacity: 1; transform: none; }
  .geflecht .faden.zieh { stroke-dashoffset: 0; }
  /* Szenen als Standbild im Endzustand */
  .szene .getippt { max-width: none; }
  .sz-name .erwaehnung, .sz-name .eintrag.neu, .sz-kalender .posten, .sz-suche .gruppe { opacity: 1; }
  .sz-wand .zeiger, .sz-wand .oeffnen, .sz-name .bruecke, .sz-name .getippt { display: none; }
  .sz-haelften .licht { display: none; }
  .tr-feld .zu { opacity: 0; }
  .tr-feld .auf { opacity: 1; }
}