@font-face { font-family: Anybody; src: url(anybody.woff2) format('woff2'); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: Hanken; src: url(hanken.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --butter: #ffd23f; --violett: #3d1bff; --pink: #ff5c8a; --papier: #f7f3ff; --tinte: #17103f; --matt: #d9d3f2; }
* { box-sizing: border-box; margin: 0; }
html { background: var(--tinte); scroll-behavior: smooth; }
body { color: #fff; font: 400 18px/1.55 Hanken, system-ui, sans-serif; overflow-x: hidden; }
canvas#wand { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.ohne-gl body { background: linear-gradient(135deg, var(--violett), var(--pink)); }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.marke { font-family: Hanken, sans-serif; font-weight: 800; font-size: 29px; letter-spacing: -.02em; text-decoration: none; line-height: 1; }

.pille { display: inline-block; background: var(--butter); color: var(--tinte); font-weight: 700; padding: 9px 20px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; transition: scale .12s; }
.pille:hover { scale: 1.05; }
.pille:active { scale: .97; }
.pille.gross { font-size: 21px; padding: 15px 34px; }

/* Oberer Teil: die Seite ist ein Desktop */
#held { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr auto; gap: 0 32px; padding: 22px 32px 18px; }
#held::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23, 16, 63, .62), rgba(23, 16, 63, .12) 65%); pointer-events: none; }
#held > * { position: relative; }
#oben { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
#oben nav { display: flex; gap: 20px; align-items: center; font-weight: 600; }
#oben nav a:not(.pille) { text-decoration: none; }
#oben nav a:not(.pille):hover { text-decoration: underline; text-underline-offset: 4px; }

#botschaft { align-self: center; }
h1, h2 { font-family: Anybody, sans-serif; font-weight: 900; letter-spacing: -.012em; }
h1 { font-size: min(13.6vw, 26vh); line-height: .95; font-stretch: 75%; animation: dehnen 1.3s cubic-bezier(.16, 1, .3, 1) both; }
h1 span { display: block; white-space: nowrap; }
@keyframes dehnen { from { font-stretch: 50%; opacity: 0; } 35% { opacity: 1; } to { font-stretch: 75%; } }
#botschaft > p { max-width: 34em; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.35; font-weight: 500; margin-top: 26px; }
.taten { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; font-size: 16px; }

#widgets { align-self: center; display: grid; gap: 12px; }
.widget { background: rgba(23, 16, 63, .62); backdrop-filter: blur(24px) saturate(1.5); border-radius: 20px; padding: 16px 18px; }
.widget strong { display: block; font-weight: 700; }
.widget span { font-size: 15px; color: var(--matt); }
#uhr strong { font-family: Anybody, sans-serif; font-weight: 900; font-stretch: 70%; font-size: 76px; line-height: .95; font-variant-numeric: tabular-nums; }
#song { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
#song span { display: block; line-height: 1.3; }
#beat[aria-pressed=true] { background: var(--pink); }
#woche ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 8px; }
#woche li { display: grid; gap: 4px; text-align: center; font-size: 14px; }
#woche b { padding: 7px 0; border-radius: 8px; color: var(--tinte); font-size: 13px; }
.fr { background: var(--butter); } .sp { background: var(--pink); } .na { background: #b9a8ff; }

#dock { grid-column: 1 / -1; justify-self: center; margin-top: 18px; display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 9px; background: rgba(23, 16, 63, .62); backdrop-filter: blur(24px) saturate(1.5); border-radius: 26px; scrollbar-width: none; }
#dock button { flex: none; width: 68px; background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; font-weight: 600; display: grid; justify-items: center; gap: 4px; transition: translate .16s; }
#dock button:hover { translate: 0 -5px; }
#dock i { width: 52px; height: 52px; border-radius: 15px; display: block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
#dock button[aria-current=true] i { box-shadow: 0 0 0 3px #fff; }

/* Farbflächen */
.band { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 110px); align-items: end; padding: clamp(64px, 11vh, 130px) clamp(22px, 5vw, 80px); }
.band.gedreht { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.band.gedreht h2 { order: 2; text-align: right; }
.band h2 { font-size: clamp(60px, 9.2vw, 168px); line-height: .88; font-stretch: 72%; text-wrap: balance; }
.spalte { max-width: 34em; }
.gedreht .spalte { justify-self: start; }
.spalte > p { font-size: 21px; line-height: 1.35; font-weight: 500; }
.band dl { margin-top: 24px; display: grid; grid-template-columns: 8.5em 1fr; gap: 12px 18px; font-size: 17px; line-height: 1.4; }
.band dt { font-weight: 700; }
.band dd { margin: 0; }
.butter { background: var(--butter); color: var(--tinte); }
.violett { background: var(--violett); }
.pink { background: var(--pink); color: var(--tinte); }
.papier { background: var(--papier); color: var(--tinte); }
.tinte { background: var(--tinte); }
.ende { background: var(--butter); color: var(--tinte); }
.textlink { display: inline-block; margin-top: 24px; font-weight: 700; text-underline-offset: 4px; }

#chat { display: grid; gap: 8px; }
#chat p { max-width: 82%; padding: 11px 16px; border-radius: 20px; font-size: 18px; line-height: 1.3; }
#chat .du { justify-self: end; background: #fff; color: var(--tinte); border-bottom-right-radius: 5px; }
#chat .ki { background: var(--tinte); border-bottom-left-radius: 5px; }

#schalter { margin-top: 22px; }
#schalter button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: none; border: 0; border-top: 2px solid var(--tinte); padding: 13px 0; cursor: pointer; font-size: 20px; font-weight: 700; text-align: left; }
#schalter i { flex: none; width: 54px; height: 30px; border-radius: 15px; background: rgba(23, 16, 63, .28); position: relative; transition: background .15s; }
#schalter i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: translate .15s; }
#schalter [aria-pressed=true] i { background: var(--tinte); }
#schalter [aria-pressed=true] i::after { translate: 24px 0; }

#teile { list-style: none; padding: 0; margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
#teile li { background: var(--violett); color: #fff; padding: 7px 15px; border-radius: 999px; font-weight: 600; font-size: 16px; }
#teile li:nth-child(3n+2) { background: var(--pink); color: var(--tinte); }
#teile li:nth-child(3n) { background: var(--butter); color: var(--tinte); }

#schritte { padding: 0; list-style: none; counter-reset: s; margin-bottom: 26px; font-size: 22px; line-height: 1.3; font-weight: 600; }
#schritte li { counter-increment: s; display: grid; grid-template-columns: 1.5em 1fr; padding: 11px 0; border-top: 2px solid var(--tinte); }
#schritte li::before { content: counter(s); font-family: Anybody, sans-serif; font-weight: 900; }

#unten { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px clamp(22px, 5vw, 80px); background: var(--tinte); font-size: 16px; }
#unten nav { display: flex; gap: 20px; }

/* Konto und Rechtliches: ruhige Blätter auf dem Hintergrund */
.fenster { position: relative; z-index: 2; color: var(--tinte); background: var(--papier); border-radius: 26px; --matt: #4f4678; animation: auf .22s cubic-bezier(.16, 1, .3, 1); }
@keyframes auf { from { opacity: 0; scale: .98; } }
.fenster[hidden] { display: none; }
.kopf { padding: 28px 30px 0; }
.kopf h2 { font-size: clamp(36px, 6vw, 56px); line-height: 1; font-stretch: 78%; }
.innen { padding: 24px 30px 30px; }
.innen p + p { margin-top: 12px; }
.innen h3 { margin-top: 22px; font-size: 20px; }
.knopf { display: inline-block; margin-top: 20px; background: var(--violett); color: #fff; font-weight: 700; padding: 12px 28px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; }
.knopf:hover { background: var(--tinte); }
.knopf:disabled { opacity: .5; cursor: default; }
.ruhig { background: rgba(23, 16, 63, .1); color: var(--tinte); }
.ruhig:hover { background: rgba(23, 16, 63, .2); }
.gefahr:hover { background: #c4163f; color: #fff; }
#konto { position: relative; z-index: 2; min-height: 100vh; display: grid; place-items: center; padding: 86px 14px 40px; }
#konto .fenster { width: min(560px, 100%); }
.reiter { display: flex; gap: 20px; flex-wrap: wrap; }
.reiter button { background: none; border: 0; padding: 0; cursor: pointer; font-family: Anybody, sans-serif; font-size: clamp(27px, 5vw, 38px); font-weight: 900; font-stretch: 72%; opacity: .45; }
.reiter button[aria-selected=true] { opacity: 1; }
form label { display: block; margin-top: 14px; font-weight: 600; }
form input[type=text], form input[type=email], form input[type=password] { display: block; width: 100%; margin-top: 5px; padding: 12px 15px; background: #fff; border: 2px solid var(--tinte); border-radius: 12px; }
.haken { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.haken input { margin-top: 5px; }
.meldung { margin-top: 14px; min-height: 1.5em; font-weight: 600; color: #b3123a; }
.meldung.gut { color: #0a6b45; }
.leise { color: var(--matt); font-size: 16px; }
.rechtlich h3 { margin-top: 18px; }

@media (max-width: 900px) {
  #held { grid-template-columns: minmax(0, 1fr); padding: 16px 18px 12px; }
  #held::before { background: rgba(23, 16, 63, .42); }
  #widgets { display: none; }
  h1 { font-size: 18.6vw; }
  #oben nav a:not(.pille) { display: none; }
  .band, .band.gedreht { grid-template-columns: minmax(0, 1fr); }
  .band.gedreht h2 { order: 0; text-align: left; }
  .band h2 { font-size: 19vw; }
  #dock { justify-self: stretch; }
  .band dl { grid-template-columns: 1fr; gap: 2px; }
  .band dd { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }