/* Startseite von daw.rockinbear.net: flache Felder im dunklen Farbschema der DAW (wie app.css: Grund #1b1d21, Fläche #26292e,
   Akzent #3b8eea), ohne Rahmen und Rundungen; Schrift Open Sans, Lobster nur für „rockinbearstudios“ im Kopf.
   Die Menüleiste ist eine schmale Zeile aus Textlinks (wie auf rockinbear.net), keine Knopfkacheln.
   Der Abschnitt „Offline“ (.offline) stellt links, was ohne Netz läuft, neben die vier Teile, die ins Netz gehen (je eine Zeile: Name, was
   hinausgeht, wie man es abstellt).
   Grenzen: nur dunkles Thema; keine fremden Quellen; Bewegung ist abschaltbar (prefers-reduced-motion). Die Anwendung hat ihr eigenes app.css. */
@font-face { font-family: "Open Sans"; src: url("/fonts/opensans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Lobster"; src: url("/fonts/lobster.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --ground: #1b1d21; --soft: #26292e; --mid: #303642; --deep: #3a404c; --dark2: #202226; --dark: #121418; --line: #35383f;
  --ink: #d5d9e0; --ink-soft: #a3a9b3; --bright: #f2f4f7; --accent: #3b8eea; --accent-hi: #63a6f0; --on-accent: #0b1017; --solo: #e8b03a;
  --ok-bg: #1d3a28; --ok-ink: #93dba9; --logo-ground: #141e2a;
  --red: #ff3131; --gap: 2px; --r: 0px; --pad: 24px;
  --t-small: 14px; --t-body: 16px; --t-mid: 22px; --t-state: clamp(24px, 2.4vw, 36px); --t-display: clamp(84px, 14.4vw, 220px);
  --head: "Open Sans", system-ui, "Segoe UI", sans-serif; --text: "Open Sans", system-ui, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--deep) var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--t-body)/1.55 var(--text); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--on-accent); }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
h1, h2 { font-family: var(--head); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--bright); text-wrap: balance; }
h2 { font-size: var(--t-state); }
h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--bright); }
.skip { position: absolute; left: var(--gap); top: -60px; background: var(--accent); color: var(--on-accent); padding: 12px 18px; border-radius: var(--r); z-index: 5; }
.skip:focus { top: var(--gap); }
.fine { font-size: var(--t-small); color: var(--ink-soft); }

.tile { overflow: hidden; }
.soft { background: var(--soft); }
.dark { background: var(--dark); color: var(--bright); }
.accent { background: var(--accent); color: var(--on-accent); }
.accent h2 { color: var(--on-accent); }
.mark { display: block; width: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px; border: 0; border-radius: 3px; font: 600 14px/1 var(--text); text-decoration: none; cursor: pointer; transition: transform 160ms var(--ease), background-color 160ms; }
.btn.dark { background: var(--dark); color: var(--bright); }
.btn.dark:hover { background: var(--dark2); }
.btn.accent { background: var(--accent); color: var(--on-accent); }
.btn.accent:hover { background: var(--accent-hi); }
.btn.ghost { background: none; padding: 0 8px; text-decoration: underline; text-underline-offset: 4px; }
.btn:active { transform: scale(.97); }

/* Erstes Bild: Namensband mit Herkunftszeile, Menüleiste, darunter drei Spalten (2 + 8 + 2 von 12) */
.board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: var(--gap); }
.hero { grid-template-rows: 176px 40px minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; }
.name { grid-column: 1 / -1; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 12px var(--pad); }
.name .mark { height: 96px; max-width: 86%; object-fit: contain; }
.by { font-size: 13px; color: var(--ink-soft); text-decoration: none; letter-spacing: .02em; }
.by .rb { font: 400 22px/1 "Lobster", cursive; color: #fff; letter-spacing: 0; margin-left: 4px; }
.by .rb b { font-weight: 400; color: var(--red); }
.by:hover { color: var(--bright); }
.menu { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0 28px; background: var(--soft); border-bottom: 1px solid var(--line); }
.menu a { display: flex; align-items: center; min-height: 40px; padding: 0 4px; font: 700 14px/1 var(--text); color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: color 160ms, box-shadow 160ms; }
.menu a:hover { color: var(--bright); box-shadow: inset 0 -2px 0 var(--accent); }
.link { display: flex; align-items: center; padding: 12px var(--pad); font: 600 14px/1.3 var(--text); text-decoration: none; transition: background-color 160ms; }
.link:hover { background: var(--deep); }
.bear { grid-column: 1 / 3; background: var(--logo-ground); display: grid; place-items: center; padding: 14px; }
.bear img { width: 100%; max-height: 100%; object-fit: contain; }
.facts { grid-column: 1 / 3; padding: var(--pad); font-size: 15px; display: grid; align-content: start; gap: 10px; }
.stage { grid-column: 3 / 11; grid-row: 3 / 5; position: relative; background: var(--dark); min-height: 420px; }
.stage img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.statement { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ground); padding: var(--pad); display: grid; gap: 10px; }
.statement h1 { font-size: var(--t-state); }
.statement p { max-width: 62ch; }
.rail { grid-column: 11 / 13; grid-row: 3 / 5; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.rail .tile { padding: 18px var(--pad); font-size: 15px; }
.r1 { background: var(--soft); } .r2 { background: var(--mid); } .r3 { background: var(--deep); color: var(--bright); } .r4 { background: var(--dark2); }
.action { display: flex; align-items: flex-end; justify-content: space-between; font: 700 18px/1 var(--head); text-decoration: none; transition: background-color 160ms; }
.action:hover { background: var(--accent-hi); }
.action svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease); }
.action:hover svg { transform: translateX(4px); }

section { scroll-margin-top: var(--gap); }
.offline { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 96px var(--gap) 0; }
.local { grid-column: 1 / 5; padding: 40px var(--pad); display: grid; gap: 18px; align-content: start; }
.local p { color: var(--ink); max-width: 44ch; }
.local ul { display: grid; margin-top: 6px; }
.local li { padding: 11px 0; border-top: 1px solid var(--line); font-weight: 600; color: var(--bright); }
.nets { grid-column: 5 / 13; display: grid; gap: var(--gap); }
.nets-head { padding: 40px var(--pad) 28px; display: grid; gap: 10px; align-content: end; }
.nets-head h3 { font-size: var(--t-mid); line-height: 1.25; text-wrap: balance; }
.nets-head p { max-width: 68ch; color: var(--ink-soft); }
.net { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 5fr); gap: 8px var(--pad); padding: 22px var(--pad); align-items: start; transition: background-color 160ms; }
.net:hover { background: var(--mid); }
.net h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; overflow-wrap: anywhere; }
.net .kind { font: 700 12px/1 var(--text); padding: 4px 7px; border-radius: 3px; background: var(--accent); color: var(--on-accent); }
.net p { font-size: 15px; overflow-wrap: break-word; }
.net p b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.showcase { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 96px var(--gap); align-items: start; }
.showcase .head { grid-column: 1 / 5; padding: var(--pad); display: grid; gap: 14px; }
.showcase noscript { grid-column: 1 / -1; padding: 0 var(--pad); }
.panel { grid-column: 5 / 13; display: grid; grid-template-columns: 62fr 38fr; background: var(--dark); color: var(--ink); overflow: hidden; min-height: 420px; }
.lanes { position: relative; padding: var(--pad); display: grid; gap: var(--gap); align-content: center; }
.lane { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; height: 64px; }
.lane i { border-radius: 3px; background: #202226; transition: background-color 90ms; }
.lane i.on { background: #2d5f9c; }
.lane.off i.on { background: #303642; }
.lane i.hit { background: var(--accent-hi); }
.playhead { position: absolute; top: var(--pad); bottom: var(--pad); left: var(--pad); width: 2px; background: var(--bright); opacity: 0; will-change: transform; }
.playing .playhead { opacity: 1; }
.controls { background: var(--soft); padding: var(--pad); display: grid; gap: 16px; align-content: start; }
.controls .fine { color: var(--ink-soft); }
.drow { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 8px; align-items: center; min-height: 44px; }
.drow .who { font-size: var(--t-small); color: var(--ink-soft); display: block; }
.drow input { grid-column: 1 / -1; }
.tog { width: 44px; height: 36px; border-radius: 4px; border: 1px solid var(--line); background: var(--mid); color: var(--ink); font: 700 14px/1 var(--text); cursor: pointer; transition: background-color 120ms, transform 120ms var(--ease); }
.tog:active { transform: scale(.94); }
.tog[aria-pressed="true"] { background: var(--solo); border-color: var(--solo); color: var(--on-accent); }
input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: var(--accent); cursor: pointer; }

.features { padding: 0 var(--gap) 96px; }
.features > h2 { padding: 0 var(--pad) 40px; }
.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cell { background: var(--soft); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 430px; }
.cell.flip { flex-direction: column-reverse; }
.cell .text { padding: var(--pad); display: grid; gap: 8px; }
.cell .text p { font-size: 15px; color: var(--ink-soft); }
.frag { width: 100%; height: 260px; object-fit: cover; }
.frag.left { object-position: left top; }
.frag.right { object-position: right bottom; }
.cell img { transition: transform 500ms var(--ease); }
.cell:hover img { transform: scale(1.03); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.field { min-height: max(520px, 72svh); padding: 28px; display: grid; grid-template-rows: 80px 1fr auto; gap: 20px; }
.field h2 { grid-row: 1; }
.field .card { grid-row: 2; align-self: center; justify-self: center; }
.field > p { grid-row: 3; font: 600 clamp(20px, 1.8vw, 26px)/1.25 var(--head); max-width: 16ch; color: var(--bright); }
.f1 { background: var(--dark2); } .f2 { background: var(--soft); } .f3 { background: var(--mid); } .f4 { background: var(--accent); }
.f4 > p { color: var(--on-accent); }
.card { width: min(260px, 100%); background: var(--ground); color: var(--ink); border-radius: 3px; padding: 16px; display: grid; gap: 6px; transition: transform 150ms var(--ease); }
.field:hover .card { transform: translateY(-6px); }
.card .t { font-weight: 700; color: var(--bright); }
.card .s { font-size: var(--t-small); color: var(--ink-soft); }
.card .bar { height: 34px; border-radius: 4px; margin-top: 6px; background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 7px); }
.card .bar.b2 { background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 8px); }
.card .note { font-size: var(--t-small); background: var(--soft); border-radius: 6px; padding: 8px 10px; margin-top: 4px; }
.card .note.done { background: var(--ok-bg); color: var(--ok-ink); justify-self: start; }

.player { display: grid; grid-template-columns: 2fr 7fr 3fr; gap: var(--gap); padding: 96px var(--gap) 0; }
.player .bear { grid-column: auto; grid-row: auto; min-height: 220px; }
.player .bear img { max-width: 200px; }
.player-text { padding: 40px; display: grid; gap: 14px; align-content: center; }
.player-text p { max-width: 62ch; }
.player-get { display: grid; grid-template-rows: 2fr 1fr; gap: var(--gap); }
.player-get .action { padding: 18px var(--pad); }
.player-get .link { align-items: center; }

.close { display: grid; grid-template-columns: 2fr 8fr 2fr; gap: var(--gap); padding-bottom: var(--gap); }
.close .tile { min-height: 360px; }
.flank img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.centre { padding: 40px; display: grid; gap: 14px; align-content: center; justify-items: start; }
.centre h2 { font-size: clamp(32px, 3.4vw, 44px); }
.centre p { max-width: 56ch; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }

.foot { background: var(--dark); color: var(--ink); border-top: 1px solid var(--line); padding: 20px calc(var(--gap) + var(--pad)) 20px; display: grid; gap: 8px; overflow: hidden; }
.legal { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: var(--t-small); }
.legal a { display: inline-block; padding: 8px 0; text-decoration: none; }
.legal a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Auftritt der Abschnitte: nur mit Skript, nur ohne Bewegungsverzicht */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].in { opacity: 1; transform: none; transition: opacity 520ms var(--ease), transform 520ms var(--ease); }

@media (max-width: 1000px) {
  .hero { grid-template-rows: 150px auto auto auto auto; min-height: 0; }
  .name .mark { height: 80px; }
  .stage { grid-column: 1 / -1; grid-row: 3; display: grid; }
  .stage img { height: auto; aspect-ratio: 16 / 9; }
  .statement { position: static; border-radius: 0; }
  .bear { grid-column: 1 / 5; grid-row: 4; }
  .facts { grid-column: 5 / -1; grid-row: 4; }
  .rail { grid-column: 1 / -1; grid-row: 5; grid-template-rows: none; grid-template-columns: repeat(4, 1fr); }
  .rail .action { grid-column: 1 / -1; min-height: 84px; }
  .showcase .head, .panel { grid-column: 1 / -1; }
  .offline { padding-top: 64px; }
  .local, .nets { grid-column: 1 / -1; }
  .player { grid-template-columns: 1fr 2fr; padding-top: 64px; }
  .player-get { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: repeat(2, 1fr); }
  .player-get .action { min-height: 84px; }
  .showcase { padding: 64px var(--gap); }
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .field { min-height: 420px; }
}
@media (max-width: 640px) {
  :root { --pad: 18px; }
  .hero { grid-template-rows: 124px auto auto auto auto; }
  .name .mark { height: 58px; }
  .by .rb { font-size: 19px; }
  .menu { gap: 0 18px; }
  .menu a { min-height: 44px; }
  .player { grid-template-columns: 1fr; }
  .player .bear { min-height: 160px; }
  .player .bear img { max-width: 130px; }
  .player-text { padding: 28px 20px; }
  .player-get { grid-template-columns: 1fr; }
  .link { min-height: 48px; }
  .stage img { aspect-ratio: 4 / 3; }
  .statement h1 { font-size: 24px; text-wrap: pretty; }
  .bear { grid-column: 1 / 6; }
  .facts { grid-column: 6 / -1; font-size: 14px; }
  .rail { grid-template-columns: repeat(2, 1fr); }
  .panel { grid-template-columns: 1fr; }
  .local, .nets-head { padding: 28px var(--pad); }
  .net { grid-template-columns: 1fr; gap: 12px; }
  .lane { height: 40px; }
  .cells { grid-template-columns: 1fr; }
  .cell { min-height: 0; }
  .cell.flip { flex-direction: column; }
  .frag { height: 200px; }
  .steps { grid-template-columns: 1fr; }
  .field { min-height: 0; grid-template-rows: auto auto auto; padding: 28px 20px 36px; }
  .field .card { justify-self: start; }
  .field > p { grid-row: auto; order: -1; max-width: none; font-size: 24px; }
  .field h2 { order: -2; }
  .close { grid-template-columns: 1fr 1fr; }
  .centre { grid-column: 1 / -1; grid-row: 1; padding: 28px 20px; }
  .close .flank { min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-reveal].in { opacity: 1; transform: none; transition: none; }
  .btn, .tog, .card, .cell img, .action svg, .menu a, .net { transition: none; }
  .cell:hover img, .field:hover .card { transform: none; }
}