/* Nib3d Startseite, Variante B „Werkbank“: eine 3D-Szene (Schreibtisch bei Nacht) hinter echtem HTML. */
@font-face { font-family: 'Space Grotesk'; src: url(/pub/start/space_grotesk.ttf) format('truetype'); font-weight: 300 700; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0E1013; --karte: #15171B; --panel: #2A2D33; --ink: #E8EAED; --ink2: #B9BEC6; --ink-soft: #9AA0A8; --ink3: #6A7078;
  --linie: #24272C; --linie2: #3B3F46; --akzent: #0A84FF; --akzent-hi: #4AA3FF;
  --rand: clamp(16px, 5.6vw, 96px); --spalte: 33rem; --kopf: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--kopf) }
body {
  font: 17px/1.55 'Space Grotesk', system-ui, sans-serif; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01' 0; overflow-x: hidden;
}
a { color: inherit }
b { font-weight: 600; color: var(--ink) }
:focus-visible { outline: 2px solid var(--akzent-hi); outline-offset: 3px; border-radius: 4px }
::selection { background: rgba(10,132,255,.35) }

.sprung { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--akzent); color: #fff; padding: 10px 14px; border-radius: 6px; text-decoration: none }
.sprung:focus { top: 12px }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--kopf); display: flex; align-items: center; gap: 32px;
  padding: 0 var(--rand); border-bottom: 1px solid transparent; transition: background-color .25s, border-color .25s;
}
.kopf.fest, .keinjs .kopf { background: var(--bg); border-bottom-color: var(--linie) }
.keinjs .kopf { position: absolute }
.marke { display: inline-flex; align-items: center; min-height: 44px; gap: 9px; font-weight: 600; font-size: 19px; letter-spacing: -.01em; text-decoration: none }
.marke svg { width: 22px; height: 22px; fill: var(--akzent) }
.marke b { color: var(--akzent-hi); font-weight: inherit }
.kopf nav { display: flex; gap: 4px; margin-right: auto }
.kopf nav a, .sprache, .anmelden {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 6px;
  color: var(--ink2); text-decoration: none; font-size: 15px; transition: color .15s, background-color .15s;
}
.kopf nav a:hover, .sprache:hover, .anmelden:hover { color: var(--ink); background: rgba(255,255,255,.05) }
.kopf-rechts { display: flex; align-items: center; gap: 4px }
.kopf-rechts .los { margin-left: 8px }

/* ---------- Knöpfe ---------- */
.los, .neben {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border-radius: 7px; font: 600 15px/1 'Space Grotesk', system-ui, sans-serif; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.los { background: var(--akzent); color: #fff }
.los:hover { background: #2690FF }
.neben { border: 1px solid var(--linie2); color: var(--ink); background: rgba(14,16,19,.55) }
.neben:hover { border-color: #5B616B; background: rgba(42,45,51,.6) }
.neben span { color: var(--ink-soft); font-weight: 500; font-variant-numeric: tabular-nums }
.gross { min-height: 52px; padding: 0 22px; font-size: 16px }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px }

/* ---------- Bühne: Canvas, Schleier, Standbild ---------- */
.buehne { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none }
.standbild {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14,16,19,.9) 0, rgba(14,16,19,.66) 30%, rgba(14,16,19,0) 54%),
    linear-gradient(0deg, rgba(14,16,19,.6) 0, rgba(14,16,19,0) 22%),
    url(/pub/start/standbild.jpg) 72% 50% / cover no-repeat var(--bg);
}
.szene-an .standbild {
  background:
    linear-gradient(90deg, rgba(14,16,19,.86) 0, rgba(14,16,19,.55) 28%, rgba(14,16,19,0) 50%),
    linear-gradient(0deg, rgba(14,16,19,.5) 0, rgba(14,16,19,0) 18%);
}
.etiketten { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden }

/* Schild in der Szene: Verlauf und Cursor-Namen, an 3D-Punkte gebunden */
.verlauf-tafel {
  position: absolute; left: 0; top: 0; width: 212px; padding: 8px; border-radius: 8px; background: #1A1C20;
  border: 1px solid #2E3137; font-size: 12.5px; line-height: 1.25; color: var(--ink2); opacity: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.45); will-change: transform, opacity;
}
.verlauf-tafel .kopfzeile { display: flex; justify-content: space-between; padding: 4px 6px 8px; color: var(--ink-soft); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase }
.verlauf-tafel ol { list-style: none }
.verlauf-tafel li { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px; border-radius: 5px }
.verlauf-tafel li i { width: 7px; height: 7px; border-radius: 2px; background: #4A5059; flex: none }
.verlauf-tafel li em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-soft) }
.verlauf-tafel li.an { background: rgba(10,132,255,.16); color: var(--ink) }
.verlauf-tafel li.an i { background: var(--akzent) }
.verlauf-tafel li.an em { color: var(--akzent-hi); font-weight: 600 }
.namensschild {
  position: absolute; left: 0; top: 0; padding: 3px 7px; border-radius: 4px; font: 600 12px/1.2 'Space Grotesk', sans-serif;
  color: #fff; opacity: 0; white-space: nowrap; will-change: transform, opacity;
}

/* Schild über dem Rauschwürfel */
.notiz {
  position: absolute; left: 0; top: 0; padding: 5px 9px; border: 1px solid #2E3137; border-radius: 4px; background: rgba(14,16,19,.92);
  color: var(--ink2); font: 500 12.5px/1.2 'Space Grotesk', sans-serif; white-space: nowrap; opacity: 0; will-change: transform, opacity;
}

/* ---------- Abschnitte ---------- */
main { position: relative; z-index: 2 }
main section { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: 128px var(--rand) }
.text { width: 100%; max-width: var(--spalte) }

.vorzeile { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 22px }
h1 { font-size: clamp(42px, 4.7vw, 74px); line-height: 1; letter-spacing: -.035em; font-weight: 600 }
h1 span { color: var(--akzent-hi) }
h2 { font-size: clamp(31px, 3.1vw, 46px); line-height: 1.06; letter-spacing: -.028em; font-weight: 600; margin-bottom: 18px; text-wrap: pretty }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em }
.text > p, .text details > p { color: var(--ink2); max-width: 32em }
.text > p + p { margin-top: 14px }
.einleitung { font-size: 19px; margin-top: 24px; max-width: 28em }
.held .text { max-width: 44rem }
.held .einleitung { max-width: 31em }
.held .einleitung { color: var(--ink2) }
.nummer { font-size: 13.5px; font-weight: 500; letter-spacing: .06em; color: var(--akzent-hi); margin-bottom: 14px; font-variant-numeric: tabular-nums }
.klein { font-size: 14px; color: var(--ink-soft) !important; margin-top: 16px }
.klein a { color: var(--ink2) }
.unterschrift { color: var(--ink-soft) !important; font-size: 15px; border-left: 2px solid var(--akzent); padding-left: 14px; margin-top: 22px !important }

.fakten { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin-top: 30px; font-size: 14px; color: var(--ink-soft) }
.fakten li { display: inline-flex; align-items: center; gap: 9px }
.fakten li::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--akzent) }

/* Mehr auf Klick */
details { margin-top: 18px }
summary {
  display: inline-flex; align-items: center; gap: 11px; min-height: 44px; cursor: pointer; list-style: none;
  font-weight: 500; font-size: 15px; color: var(--ink); user-select: none;
}
summary::-webkit-details-marker { display: none }
summary::before {
  content: ''; flex: none; width: 20px; height: 20px; border: 1px solid var(--linie2); border-radius: 5px; color: var(--ink-soft);
  background: linear-gradient(currentColor, currentColor) center / 8px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 8px no-repeat;
  transition: border-color .15s, color .15s;
}
summary:hover::before { border-color: var(--akzent); color: var(--akzent-hi) }
details[open] > summary::before { background: linear-gradient(currentColor, currentColor) center / 8px 1.5px no-repeat; border-color: var(--akzent); color: var(--akzent-hi) }
details > p { padding-left: 31px; margin-top: 2px; font-size: 16px }
details > p + p { margin-top: 12px }
details a { color: var(--akzent-hi) }

/* Privat */
.privat .text { max-width: 35rem }
.punkte { list-style: none; margin-top: 26px; display: grid; gap: 2px }
.punkte li { padding: 14px 0 14px 22px; border-top: 1px solid var(--linie); color: var(--ink2); font-size: 16px; position: relative }
.punkte li::before { content: ''; position: absolute; left: 0; top: 23px; width: 8px; height: 8px; border: 1.5px solid var(--akzent-hi); border-radius: 2px }

/* Dateien */
.formate { display: grid; grid-template-columns: auto 1fr; margin: 24px 0 20px; border-top: 1px solid var(--linie) }
.formate dt, .formate dd { padding: 12px 0; border-bottom: 1px solid var(--linie) }
.formate dt { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); padding-right: 22px; padding-top: 14px }
.formate dd { color: var(--ink); font-weight: 500 }

/* Trailer */
.trailer { gap: clamp(24px, 4vw, 64px) }
.trailer .text { max-width: 17rem; flex: none }
.trailer figure { flex: 1; max-width: 920px; margin-left: auto }
.trailer video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; border: 1px solid #2E3137; box-shadow: 0 30px 80px rgba(0,0,0,.55) }
.trailer figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-soft) }

/* Preise */
.preise { flex-direction: column; align-items: flex-start; justify-content: center }
.preise .text { max-width: 33rem }
.plaene { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 660px; margin-top: 40px }
.plan { display: flex; flex-direction: column; padding: 22px 20px 20px; background: var(--karte); border: 1px solid #262930; border-radius: 10px }
.plan h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.marker { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--akzent-hi); background: rgba(10,132,255,.14); padding: 4px 7px; border-radius: 4px }
.preis { margin: 12px 0 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.4 }
.preis b { font-size: 34px; letter-spacing: -.03em; margin-right: 2px }
.preis span { display: block; color: var(--ink3); font-size: 13px }
.plan ul { list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink2); margin-bottom: 22px }
.plan li { padding-left: 20px; position: relative }
.plan li::before { content: ''; position: absolute; left: 1px; top: 6px; width: 8px; height: 4px; border: solid var(--akzent-hi); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg) }
.plan .los, .plan .neben { margin-top: auto; width: 100% }
.plan.beliebt { border-color: rgba(10,132,255,.6); background: #141A23 }
.preise > .klein { max-width: 44em }

/* Fragen */
.fragen .text { max-width: calc(40rem + 64px); margin-left: -32px; padding: 34px 32px 30px; background: rgba(14,16,19,.9); border: 1px solid var(--linie); border-radius: 12px }
.fragen details { margin: 0; border-top: 1px solid var(--linie) }
.fragen details:last-child { border-bottom: 1px solid var(--linie) }
.fragen summary { display: flex; min-height: 56px; font-size: 16.5px }
.fragen details > p { padding-bottom: 18px }

/* Schluss */
.schluss h2 { font-size: clamp(40px, 4.6vw, 68px) }
.schluss .text > p { font-size: 19px }
.schluss .los { margin-top: 30px }

/* Fuß */
.fuss { position: relative; z-index: 2; background: #0B0C0F; border-top: 1px solid var(--linie); padding: 36px var(--rand) 40px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; font-size: 14px; color: var(--ink-soft) }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-right: auto }
.fuss nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; color: var(--ink2) }
.fuss nav a:hover { color: var(--ink) }
.fuss .klein { margin: 0; width: 100% }

/* ---------- Mittel ---------- */
@media (max-width: 1180px) {
  .kopf nav { display: none }
  .kopf-rechts { margin-left: auto }
}
@media (max-width: 1000px) {
  .trailer { flex-direction: column; align-items: flex-start; justify-content: center }
  .trailer figure { margin: 0; width: 100% }
}

/* ---------- Schmal: Szene oben, Text unten auf dunklem Verlauf ---------- */
@media (max-width: 760px) {
  :root { --rand: 16px; --kopf: 56px }
  body { font-size: 16px }
  .kopf { gap: 8px }
  .sprache, .anmelden { padding: 0 8px; font-size: 14px }
  .kopf-rechts .los { margin-left: 4px; padding: 0 14px }
  .standbild, .szene-an .standbild { background: linear-gradient(0deg, rgba(14,16,19,.5) 0, rgba(14,16,19,0) 30%) }
  .keinjs .standbild { background: linear-gradient(0deg, var(--bg) 40%, rgba(14,16,19,.2) 75%), url(/pub/start/standbild.jpg) 64% 0 / auto 62vh no-repeat var(--bg) }
  main section { align-items: flex-end; padding: 0 16px 56px }
  .text {
    width: calc(100% + 32px); max-width: none; margin: 0 -16px; padding: 120px 16px 4px;
    background: linear-gradient(180deg, rgba(14,16,19,0) 0, rgba(14,16,19,.84) 110px, rgba(14,16,19,.94) 100%);
  }
  .held .text, .privat .text, .preise .text, .fragen .text { max-width: none }
  .held { padding-top: 56px; padding-bottom: 28px }
  h1 { font-size: clamp(34px, 9.6vw, 44px) }
  .vorzeile { margin-bottom: 14px }
  .held .einleitung { margin-top: 16px }
  .held .knoepfe { margin-top: 22px; gap: 10px }
  .fakten { margin-top: 20px; gap: 6px 16px; font-size: 13.5px }
  .einleitung { font-size: 17px }
  .knoepfe { flex-direction: column; align-items: stretch }
  .knoepfe a { width: 100% }
  .trailer, .preise { padding-top: 96px }
  .plaene { grid-template-columns: 1fr; margin-top: 24px }
  .preise { background: linear-gradient(180deg, rgba(14,16,19,0) 0, rgba(14,16,19,.9) 40vh) }
  .preise .text { padding-top: 34vh; background: none }
  .fragen { background: rgba(14,16,19,.92) }
  .fragen .text { background: none; border: 0; border-radius: 0; margin: 0 -16px; padding-top: 72px }
  .trailer { justify-content: flex-end; background: linear-gradient(180deg, rgba(14,16,19,0) 0, rgba(14,16,19,.92) 42%) }
  .trailer .text { background: none; padding-top: 0; max-width: none }
  .sprache, .anmelden { min-height: 44px }
  .schluss { padding-bottom: 72px }
}
@media (max-width: 420px) {
  .sprache { display: none }
}