/* ==========================================================================
   BladeCity CDN - Designsystem
   Abgeleitet aus dem Shop-Design (Figma "Blade City 08.2026").
   Leitfarbe #FFA800, Grundton nahezu schwarz, Rajdhani als Schriftfamilie.
   ========================================================================== */

:root {
  /* Flaechen */
  --bg: #050505;
  --bg-soft: #0a0a0a;
  --panel: #131313;
  --panel-2: #181818;
  --panel-3: #202020;
  --panel-hover: #1c1c1c;

  /* Linien */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Marke */
  --gold: #ffa800;
  --gold-hi: #ffc94d;
  --gold-lo: #ae7404;
  --gold-dim: rgba(255, 168, 0, 0.16);
  --gold-glow: rgba(255, 168, 0, 0.35);

  /* Signalfarben */
  --green: #48f768;
  --green-dark: #3ac957;
  --red: #f7484a;
  --amber: #ffc043;

  /* Text */
  --text: #ffffff;
  --text-2: #cfcfcf;
  --muted: #8a8a8a;
  --muted-2: #5c5c5c;

  /* Masse */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shell: 1600px;
  --header-h: 64px;

  --font-display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- Grundlagen */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Hintergrund: weiches Lichtzentrum + Vignette, wie im Shop */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(255, 168, 0, 0.07), transparent 62%),
    radial-gradient(900px 700px at 12% 108%, rgba(255, 168, 0, 0.05), transparent 60%),
    radial-gradient(1400px 900px at 50% 40%, #0d0d0d 0%, #050505 70%);
}

/* Die schraegen Schraffur-Spalten an den Raendern */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      114deg,
      transparent 0 7px,
      rgba(255, 255, 255, 0.05) 7px 9px
    ),
    repeating-linear-gradient(
      114deg,
      transparent 0 7px,
      rgba(255, 255, 255, 0.05) 7px 9px
    );
  background-repeat: no-repeat;
  background-size: 86px 100%, 86px 100%;
  background-position: left top, right top;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

/* Goldene Schwungkurven in den Ecken */
.swoosh {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}
.swoosh--tl {
  top: -180px;
  left: 4%;
  width: 620px;
}
.swoosh--br {
  bottom: -200px;
  right: 3%;
  width: 660px;
}

@media (max-width: 900px) {
  body::after { background-size: 44px 100%, 44px 100%; }
  .swoosh { display: none; }
}

/* -------------------------------------------------------------- Typografie */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.15;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}
a:hover { color: var(--gold-hi); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }

/* Kleine Überschriftenmarke: kurzer Strich über dem Titel (Shop-Muster) */
.eyebrow-line {
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--text);
  margin-bottom: 14px;
}
.eyebrow-line--gold { background: var(--gold); }

.section-title {
  font-size: 26px;
  text-transform: none;
}
.section-title--upper {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.section-sub {
  color: var(--muted);
  font-size: 12.5px;
  max-width: 62ch;
  margin-top: 6px;
}

/* Wortmarke BLADE CITY */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wordmark b { color: #fff; font-weight: 700; }
.wordmark i { color: var(--gold); font-style: normal; }

/* ------------------------------------------------------------------ Gerüst */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 96px 60px;
}
@media (max-width: 1100px) { .shell { padding: 0 40px 48px; } }
@media (max-width: 720px) { .shell { padding: 0 18px 40px; } }

/* --------------------------------------------------------------- Kopfleiste */

.topbar {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: ein blankes 1fr ist minmax(auto, 1fr) und lässt
     eine Spalte breiter werden als ihren Anteil, sobald ihr Inhalt nicht mehr
     hineinpasst. Der Nutzerblock rechts ist breiter als die Navigation links -
     auf mittleren Bildschirmen wären die Außenspalten dadurch ungleich und
     das Logo säße nicht mehr mittig. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding-top: 22px;
  min-height: 96px;
}

/* Unter dieser Breite passen drei Spalten nicht mehr nebeneinander: Logo
   nach oben, Navigation und Nutzerblock darunter nebeneinander. */
@media (max-width: 860px) {
  .topbar {
    grid-template-columns: 1fr auto;
    gap: 14px;
    min-height: 0;
    padding-top: 14px;
  }
  .topbar > a { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .nav-pill { grid-row: 2; margin-top: 0; border-top: 1px solid var(--line); border-radius: var(--radius); }
  .user-block { grid-row: 2; }
  .user-block__text { display: none; }
  .brand-mark { width: 96px; }
}

/* Pillen-Navigation links (entspricht dem "Home"-Knopf im Shop) */
.nav-pill {
  /* Ohne justify-self zieht das Raster die Pille über die ganze Spalte -
     bei nur einem Eintrag steht dann ein riesiger leerer Kasten da. */
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(180deg, #1f1f1f 0%, #141414 100%);
  border: 1px solid var(--line);
  border-top: none;
  margin-top: -22px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55);
}
.nav-pill a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
}
.nav-pill a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.nav-pill a.is-active {
  background: linear-gradient(90deg, rgba(255, 168, 0, 0.22), rgba(255, 168, 0, 0.05));
  color: var(--gold);
  box-shadow: inset 2px 0 0 var(--gold);
}
.nav-pill svg { width: 16px; height: 16px; flex: none; }

/* Logo in der Mitte. Die mittlere Spalte ist "auto" breit, deshalb muss
   der Link selbst zentriert werden - sonst hängt er am linken Spaltenrand. */
.topbar > a { justify-self: center; }

.brand-mark {
  display: block;
  width: 132px;
  height: auto;
  filter: drop-shadow(0 0 26px rgba(255, 168, 0, 0.42)) drop-shadow(0 8px 22px rgba(0, 0, 0, 0.7));
  transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
}
.brand-mark:hover {
  filter: drop-shadow(0 0 38px rgba(255, 168, 0, 0.6)) drop-shadow(0 8px 22px rgba(0, 0, 0, 0.7));
  transform: translateY(-2px);
}
.brand-mark--sm { width: 92px; }

/* Nutzerblock rechts */
.user-block {
  justify-self: end;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  text-align: right;
}
.user-block__text { max-width: 260px; }
.user-block__hi {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
}
.user-block__hi span { color: var(--gold); }
.user-block__meta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  margin-top: 2px;
}
.user-block__avatar {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 22px rgba(255, 168, 0, 0.28);
  flex: none;
  background: var(--panel-2);
}
.user-block__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  align-self: center;
}
.user-block__logout:hover { color: var(--red); border-color: rgba(247, 72, 74, 0.4); }
.user-block__logout svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------- Infozeile */

.infobar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: -46px;
  padding-bottom: 6px;
}
.infobar__cell { display: flex; gap: 14px; align-items: flex-start; }
.infobar__cell--right {
  /* row-reverse dreht die Hauptachse um: flex-start liegt hier rechts.
     Mit flex-end rutschte der ganze Block an den linken Rand seiner Spalte
     und stand damit fast in der Seitenmitte statt am rechten Rand. */
  flex-direction: row-reverse;
  justify-content: flex-start;
  text-align: right;
}
.infobar__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  color: var(--gold);
}
.infobar__icon svg { width: 26px; height: 26px; }
.infobar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
}
.infobar__text {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 34ch;
  margin-top: 2px;
}
.infobar__badge {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1e1e1e, #121212);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}
.infobar__badge--gold { color: var(--gold); border-color: rgba(255, 168, 0, 0.3); }
.infobar__badge--green { color: var(--green); border-color: rgba(72, 247, 104, 0.28); }

@media (max-width: 980px) {
  .infobar { grid-template-columns: 1fr; gap: 22px; margin-top: 16px; }
  .infobar__cell--right { flex-direction: row; justify-content: flex-start; text-align: left; }
}

/* Trennlinie mit Endpunkten und Mittelmarke */
.rule {
  position: relative;
  height: 8px;
  margin: 30px 0 34px;
  display: flex;
  align-items: center;
}
.rule__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.14)
  );
}
.rule__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex: none;
  opacity: 0.85;
}
.rule__mark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) skewX(-20deg);
  display: flex;
  gap: 3px;
  background: var(--bg);
  padding: 0 10px;
}
.rule__mark i {
  display: block;
  width: 2px;
  height: 11px;
  background: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------- Layout 2-spaltig */

.layout {
  display: grid;
  grid-template-columns: 336px 1fr;
  gap: 38px;
  align-items: start;
}
@media (max-width: 1100px) { .layout { grid-template-columns: 1fr; gap: 24px; } }

/* Einspaltige Seiten (Upload, Galerie). Sie hatten früher eine Seitenleiste,
   deren Einträge aber dieselben waren wie in der Navigation darüber. Ohne sie
   braucht der Text eine Breitenbegrenzung, sonst laufen die Zeilen auf großen
   Bildschirmen über die ganzen 1600 px. */
.column {
  max-width: 1040px;
  margin: 0 auto;
}
.column--wide { max-width: none; }

/* Seitenleiste im Shop-Stil: Klammerlinie + Pillenliste.
   Sie bleibt beim Scrollen stehen - vorher wanderte sie mit und man hatte
   neben dem Inhalt dauernd Bewegung im Blickfeld. Der scrollbare Teil ist
   bewusst der Innenbereich: die Klammerlinie hängt am äußeren Kasten und
   soll nicht mitrutschen, wenn die Leiste länger wird als der Bildschirm. */
.side {
  position: sticky;
  top: 18px;
  align-self: start;
  padding-left: 26px;
}
.side__inner {
  max-height: calc(100vh - 42px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  padding-right: 4px;
}
.side__inner::-webkit-scrollbar { width: 6px; }
.side__inner::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}
@media (max-width: 1100px) {
  .side { position: static; }
  .side__inner { max-height: none; overflow: visible; }
}
.side::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 14px;
  border: 1px solid var(--line-strong);
  border-right: none;
  border-radius: 3px 0 0 3px;
}
.side__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
}
.side__sub {
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 4px;
  line-height: 1.5;
}
.side__meter {
  margin: 18px 0 16px;
  height: 6px;
  border-radius: 999px;
  background: #1b1b1b;
  overflow: hidden;
  position: relative;
}
.side__meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--gold-hi));
  box-shadow: 0 0 12px var(--gold-glow);
  transition: width 0.4s var(--ease);
}
.side__meterlabel {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: -8px;
  margin-bottom: 16px;
}

.side__list { display: flex; flex-direction: column; gap: 9px; }
.side__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #161616, #101010);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.18s var(--ease);
}
.side__item::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.18s var(--ease);
}
.side__item:hover {
  background: linear-gradient(180deg, #1d1d1d, #141414);
  color: #fff;
  transform: translateX(2px);
}
.side__item.is-active {
  background: linear-gradient(90deg, rgba(255, 168, 0, 0.24) 0%, rgba(255, 168, 0, 0.03) 78%);
  border-color: rgba(255, 168, 0, 0.28);
  color: var(--gold);
}
.side__item.is-active::before { background: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
.side__count {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 999px;
}
.side__item.is-active .side__count { color: var(--gold); background: rgba(255, 168, 0, 0.12); }

/* ----------------------------------------------------------------- Flächen */

.panel {
  background: linear-gradient(180deg, #161616 0%, #111111 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.panel + .panel { margin-top: 20px; }
.panel--flush { padding: 0; overflow: hidden; }
.panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px;
}

/* --------------------------------------------------------------- Schaltflächen */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.18s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:disabled,
.btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  color: #1a1200;
  box-shadow: 0 10px 26px rgba(255, 168, 0, 0.24);
}
.btn--gold:hover:not(:disabled) {
  color: #1a1200;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(255, 168, 0, 0.34);
}

.btn--green {
  background: linear-gradient(180deg, #5ff97b, var(--green) 55%, var(--green-dark));
  color: #06280f;
  box-shadow: 0 10px 26px rgba(72, 247, 104, 0.2);
}
.btn--green:hover:not(:disabled) { color: #06280f; transform: translateY(-1px); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--line-strong);
  color: var(--text-2);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.btn--danger {
  background: rgba(247, 72, 74, 0.1);
  border-color: rgba(247, 72, 74, 0.35);
  color: #ff8b8c;
}
.btn--danger:hover { background: rgba(247, 72, 74, 0.18); color: #ffb0b1; }

.btn--discord {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  color: #1a1200;
  width: 100%;
  padding: 15px 22px;
  font-size: 16px;
  box-shadow: 0 12px 30px rgba(255, 168, 0, 0.26);
}
.btn--discord:hover { color: #1a1200; transform: translateY(-1px); }

.btn--block { width: 100%; }
.btn--lg { padding: 16px 30px; font-size: 17px; }
.btn--sm { padding: 8px 14px; font-size: 13px; }

/* -------------------------------------------------------------- Formulare */

.field { display: block; margin-bottom: 16px; }
.field__label {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 12px 15px;
  background: #0d0d0d;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: rgba(255, 168, 0, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 168, 0, 0.1);
}
.textarea { resize: vertical; min-height: 96px; }

.input-group { display: flex; gap: 10px; flex-wrap: wrap; }
.input-group .input { flex: 1; min-width: 200px; }

.search {
  position: relative;
  max-width: 420px;
  width: 100%;
}
.search .input { padding-left: 40px; }
.search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted-2);
  pointer-events: none;
}

/* Segment-Umschalter (Alle / Bilder / Videos) */
.segments {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #0f0f0f;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.segments a {
  padding: 7px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.18s var(--ease);
}
.segments a:hover { color: #fff; }
.segments a.is-active {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo));
  color: #1a1200;
}

/* Kontrollkästchen im Shop-Stil */
.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  padding: 4px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: #1c1c1c;
  display: grid;
  place-items: center;
  transition: all 0.16s var(--ease);
}
.check__box svg { width: 11px; height: 11px; opacity: 0; color: #1a1200; }
.check input:checked + .check__box {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
}
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px rgba(255, 168, 0, 0.25); }

/* ------------------------------------------------------- Rechtlicher Hinweis */

.agreement {
  background: linear-gradient(180deg, #161616, #101010);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}
.agreement__title {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.agreement__text {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.6;
  margin-top: 8px;
  max-width: 52ch;
}
.agreement__checks { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 860px) { .agreement { grid-template-columns: 1fr; gap: 20px; } }

.notice {
  display: flex;
  gap: 13px;
  padding: 15px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 168, 0, 0.24);
  background: linear-gradient(90deg, rgba(255, 168, 0, 0.09), rgba(255, 168, 0, 0.02));
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.notice svg { width: 19px; height: 19px; flex: none; color: var(--gold); margin-top: 1px; }
.notice strong { color: var(--gold); font-family: var(--font-display); letter-spacing: 0.01em; }
.notice--danger {
  border-color: rgba(247, 72, 74, 0.3);
  background: linear-gradient(90deg, rgba(247, 72, 74, 0.1), rgba(247, 72, 74, 0.02));
}
.notice--danger svg, .notice--danger strong { color: var(--red); }
.notice--ok {
  border-color: rgba(72, 247, 104, 0.28);
  background: linear-gradient(90deg, rgba(72, 247, 104, 0.09), rgba(72, 247, 104, 0.02));
}
.notice--ok svg, .notice--ok strong { color: var(--green); }

/* ------------------------------------------------------------------ Upload */

.dropzone {
  position: relative;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(255, 168, 0, 0.06), transparent 70%),
    linear-gradient(180deg, #141414, #0e0e0e);
  padding: 58px 30px;
  text-align: center;
  cursor: pointer;
  transition: all 0.22s var(--ease);
}
.dropzone:hover,
.dropzone:focus-visible {
  border-color: rgba(255, 168, 0, 0.42);
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(255, 168, 0, 0.1), transparent 70%),
    linear-gradient(180deg, #171717, #101010);
  outline: none;
}
.dropzone.is-dragging {
  border-color: var(--gold);
  border-style: solid;
  box-shadow: inset 0 0 60px rgba(255, 168, 0, 0.1), 0 0 0 3px rgba(255, 168, 0, 0.14);
}
.dropzone__icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255, 168, 0, 0.2), rgba(255, 168, 0, 0.06));
  border: 1px solid rgba(255, 168, 0, 0.32);
  color: var(--gold);
  box-shadow: 0 0 30px rgba(255, 168, 0, 0.18);
}
.dropzone__icon svg { width: 26px; height: 26px; }
.dropzone__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
}
.dropzone__hint { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.dropzone input[type='file'] { display: none; }

.formats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 20px;
}
.formats span {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.formats span.is-limit { color: var(--gold); border-color: rgba(255, 168, 0, 0.28); }

/* Warteschlange der laufenden Uploads */
.queue { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.queue:empty { display: none; }
.queue__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.queue__thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: #0d0d0d;
  border: 1px solid var(--line);
}
.queue__name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.queue__meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.queue__bar {
  height: 4px;
  border-radius: 999px;
  background: #232323;
  overflow: hidden;
  margin-top: 7px;
}
.queue__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold));
  transition: width 0.25s var(--ease);
}
.queue__item.is-done { border-color: rgba(72, 247, 104, 0.28); }
.queue__item.is-done .queue__bar i { background: var(--green); }
.queue__item.is-error { border-color: rgba(247, 72, 74, 0.32); }
.queue__item.is-error .queue__meta { color: #ff9a9b; }
.queue__item.is-error .queue__bar i { background: var(--red); }
.queue__state {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.queue__item.is-done .queue__state { color: var(--green); }
.queue__item.is-error .queue__state { color: var(--red); }

/* ----------------------------------------------------------------- Galerie */

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

.tile {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition: all 0.2s var(--ease);
}
.tile:hover {
  border-color: rgba(255, 168, 0, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
}
.tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0b0b0b;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tile__media img,
.tile__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile__body { padding: 11px 13px 13px; }
.tile__name {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}
.tile__badges {
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  pointer-events: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-display);
  backdrop-filter: blur(6px);
  border: 1px solid transparent;
}
.badge--ok { background: rgba(72, 247, 104, 0.16); color: var(--green); border-color: rgba(72, 247, 104, 0.3); }
.badge--warn { background: rgba(255, 192, 67, 0.16); color: var(--amber); border-color: rgba(255, 192, 67, 0.3); }
.badge--bad { background: rgba(247, 72, 74, 0.16); color: #ff8b8c; border-color: rgba(247, 72, 74, 0.3); }
.badge--muted { background: rgba(255, 255, 255, 0.07); color: var(--muted); border-color: var(--line); }
.badge--gold { background: rgba(255, 168, 0, 0.15); color: var(--gold); border-color: rgba(255, 168, 0, 0.3); }

/* Leerer Zustand */
.empty {
  text-align: center;
  padding: 76px 24px;
}
.empty__icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  color: var(--muted-2);
}
.empty__icon svg { width: 26px; height: 26px; }
.empty h3 { font-size: 19px; }
.empty p { color: var(--muted); font-size: 12.5px; margin-top: 6px; }

/* -------------------------------------------------------------- Detailseite */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 1000px) { .detail { grid-template-columns: 1fr; } }

.detail__stage {
  background:
    repeating-conic-gradient(#0d0d0d 0% 25%, #101010 0% 50%) 50% / 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  place-items: center;
  min-height: 320px;
}
.detail__stage img,
.detail__stage video {
  max-width: 100%;
  max-height: 66vh;
  border-radius: var(--radius-sm);
  display: block;
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 12.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }

.copyfield {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.copyfield .input {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 11.5px;
}
.copyfield .btn { flex: none; }

/* ---------------------------------------------------------------- Tabellen */

.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 640px;
}
.table th {
  text-align: left;
  padding: 11px 14px;
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}
.table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.table code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
  color: var(--text-2);
}

.userchip { display: inline-flex; align-items: center; gap: 8px; }
.userchip img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

/* ------------------------------------------------------------- Seitenzahlen */

.pager {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
  flex-wrap: wrap;
}
.pager a,
.pager span {
  min-width: 36px;
  height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}
.pager a:hover { border-color: rgba(255, 168, 0, 0.35); color: var(--gold); }
.pager .is-current {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo));
  border-color: transparent;
  color: #1a1200;
}
.pager .is-disabled { opacity: 0.32; }

/* ------------------------------------------------------------------ Fußzeile */

.footer {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 11.5px;
}
.footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__links a { color: var(--muted); }
.footer__links a:hover { color: var(--gold); }
.footer__copy {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2);
}

/* ------------------------------------------------------------- Anmeldeseite */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 60px 20px;
}
.auth__inner { width: 100%; max-width: 470px; text-align: center; }
.auth__logo {
  width: 128px;
  margin: 0 auto 26px;
  display: block;
  filter: drop-shadow(0 0 34px rgba(255, 168, 0, 0.45));
}
.auth__card {
  background: linear-gradient(180deg, #161616, #0e0e0e);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px 28px;
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.6);
  text-align: left;
}
.auth__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.auth__sub {
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  margin: 8px auto 24px;
  max-width: 34ch;
  line-height: 1.6;
}
.auth__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.auth__feature { display: flex; gap: 10px; align-items: flex-start; }
.auth__feature-ico {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255, 168, 0, 0.11);
  border: 1px solid rgba(255, 168, 0, 0.22);
  color: var(--gold);
}
.auth__feature-ico svg { width: 15px; height: 15px; }
.auth__feature b {
  display: block;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
}
.auth__feature span { font-size: 10.5px; color: var(--muted); line-height: 1.45; }
.auth__legal {
  margin-top: 22px;
  text-align: center;
  font-size: 10.5px;
  color: var(--muted-2);
  line-height: 1.6;
}
.auth__legal a { color: var(--muted); }
@media (max-width: 520px) { .auth__features { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Hinweise */

.alert {
  display: flex;
  gap: 11px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 18px;
  border: 1px solid rgba(247, 72, 74, 0.3);
  background: rgba(247, 72, 74, 0.08);
  color: #ffb0b1;
}
.alert svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.alert--ok {
  border-color: rgba(72, 247, 104, 0.3);
  background: rgba(72, 247, 104, 0.07);
  color: #a5ffb8;
}

/* Kurzmeldung unten rechts */
.toasts {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: min(380px, calc(100vw - 44px));
}
.toast {
  display: flex;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: #1a1a1a;
  border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  font-size: 12.5px;
  animation: toast-in 0.24s var(--ease);
}
.toast--ok { border-color: rgba(72, 247, 104, 0.35); }
.toast--error { border-color: rgba(247, 72, 74, 0.35); }
.toast svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.toast--ok svg { color: var(--green); }
.toast--error svg { color: var(--red); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Rechtstext */

.prose { max-width: 78ch; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.prose h2 {
  font-size: 20px;
  margin: 32px 0 10px;
  color: #fff;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16px; margin: 22px 0 8px; color: #fff; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: #fff; }
.prose code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 12px;
}

/* ----------------------------------------------------------------- Diverses */

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 34px; }
.mb-2 { margin-bottom: 16px; }
.hidden { display: none !important; }
.spacer { flex: 1; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: #1a1200;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 100;
  font-weight: 700;
}
.skip-link:focus { left: 0; color: #1a1200; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Mitlaufende Navigation
   --------------------------------------------------------------------------
   Der große Kopfbereich mit Logo ist Teil des Designs, scrollt aber weg. Auf
   langen Seiten stand die Navigation danach nirgends mehr - deshalb lag sie
   früher zusätzlich in der Seitenleiste. Diese Leiste übernimmt das: sie
   erscheint erst, wenn der Kopf oben raus ist, und steht dann still.
   ========================================================================== */

.scrollnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 96px;
  background: rgba(9, 9, 9, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  /* visibility mitanimieren: beim Einblenden sofort sichtbar, beim Ausblenden
     erst am Ende - sonst bleibt die Leiste unsichtbar anklickbar. */
  visibility: hidden;
  transition: transform 0.28s var(--ease), visibility 0.28s var(--ease);
  will-change: transform;
}
.scrollnav.is-visible { transform: translateY(0); visibility: visible; }

@media (max-width: 1100px) { .scrollnav { padding: 9px 40px; } }
@media (max-width: 720px) { .scrollnav { padding: 8px 18px; gap: 12px; } }

.scrollnav__mark {
  width: 30px;
  height: 30px;
  flex: none;
  filter: drop-shadow(0 0 12px rgba(255, 168, 0, 0.4));
}
.scrollnav__here {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scrollnav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.scrollnav__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.scrollnav__links a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.scrollnav__links a.is-active { color: var(--gold); background: rgba(255, 168, 0, 0.1); }
.scrollnav__links svg { width: 15px; height: 15px; flex: none; }

@media (max-width: 720px) {
  .scrollnav__here { display: none; }
  .scrollnav__links a span { display: none; }
  .scrollnav__links a { padding: 8px 10px; }
}

/* ==========================================================================
   Asset umbenennen
   ========================================================================== */

.rename {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.rename__input {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  padding: 8px 11px;
}
.rename__row { display: flex; gap: 6px; }
.rename__hint {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted-2);
}
.rename__hint strong { color: var(--gold); font-weight: 600; }
.rename__hint code {
  font-size: 10.5px;
  padding: 1px 4px;
}

/* Kurzes Aufleuchten, damit man nach dem Umbenennen sieht, welche Kachel es war */
.tile.is-renamed {
  border-color: rgba(255, 168, 0, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 168, 0, 0.25), 0 0 26px rgba(255, 168, 0, 0.15);
}