/* Powerwolf League · WolfsHallen Edition 1.7 */
:root {
  --wolf-gold: #e4bb5a;
  --wolf-gold-hot: #ffe49a;
  --wolf-ember: #a86d20;
  --wolf-ice: #91b7d8;
  --wolf-void: rgba(3, 6, 11, .88);
  --wolf-line: linear-gradient(90deg, transparent, rgba(228, 187, 90, .8), transparent);
  --wolf-glow: 0 0 34px rgba(228, 187, 90, .13);
}

::selection { background: rgba(228, 187, 90, .32); color: #fff8e5; }
* { scrollbar-color: rgba(228, 187, 90, .45) rgba(3, 6, 11, .45); scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(3, 6, 11, .55); }
*::-webkit-scrollbar-thumb { border: 2px solid rgba(3, 6, 11, .8); border-radius: 99px; background: linear-gradient(var(--gold-dark), var(--gold)); }

body { text-rendering: optimizeLegibility; }

.landing::before {
  content: '';
  position: fixed;
  z-index: 2;
  inset: 14px;
  pointer-events: none;
  border: 1px solid rgba(228, 187, 90, .27);
  border-radius: 3px;
  clip-path: polygon(0 0, 18% 0, 18% 1px, 82% 1px, 82% 0, 100% 0, 100% 100%, 82% 100%, 82% calc(100% - 1px), 18% calc(100% - 1px), 18% 100%, 0 100%);
  box-shadow: inset 0 0 60px rgba(228, 187, 90, .035);
}
.landing__copy { position: relative; padding-left: clamp(18px, 2.2vw, 34px); }
.landing__copy::before {
  content: '';
  position: absolute;
  inset: 5% auto 5% 0;
  width: 2px;
  background: linear-gradient(transparent, var(--wolf-gold), transparent);
  box-shadow: 0 0 18px rgba(228, 187, 90, .5);
}
.landing__copy h1 { text-shadow: 0 4px 38px rgba(0, 0, 0, .95); }
.landing__facts span {
  padding: 7px 11px;
  border: 1px solid rgba(228, 187, 90, .14);
  border-radius: 99px;
  background: rgba(4, 8, 14, .55);
  backdrop-filter: blur(8px);
}
.auth-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(228, 187, 90, .38);
  background:
    radial-gradient(circle at 100% 0, rgba(228, 187, 90, .12), transparent 32%),
    linear-gradient(145deg, rgba(17, 23, 32, .94), rgba(5, 8, 13, .91));
  box-shadow: 0 32px 90px rgba(0, 0, 0, .56), inset 0 1px rgba(255,255,255,.05), var(--wolf-glow);
}
.auth-card::before,
.auth-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 54px;
  height: 54px;
}
.auth-card::before { inset: 10px auto auto 10px; border-top: 1px solid var(--wolf-gold); border-left: 1px solid var(--wolf-gold); }
.auth-card::after { inset: auto 10px 10px auto; border-right: 1px solid var(--wolf-gold); border-bottom: 1px solid var(--wolf-gold); }

.platform { background-color: #05080d; }
.sidebar {
  isolation: isolate;
  gap: 18px;
  border-right: 0;
  background:
    radial-gradient(circle at 20% 0, rgba(228, 187, 90, .09), transparent 22%),
    linear-gradient(180deg, rgba(7, 11, 18, .97), rgba(3, 6, 11, .98)),
    url('../images/sidebar-atmosphere.jpg') center/cover;
  box-shadow: 22px 0 70px rgba(0, 0, 0, .34);
}
.sidebar::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 1px;
  background: linear-gradient(transparent 2%, rgba(228, 187, 90, .6) 18%, rgba(228, 187, 90, .08) 65%, transparent);
  box-shadow: 0 0 22px rgba(228, 187, 90, .3);
}
.sidebar .brand__emblem {
  border-color: rgba(255, 218, 128, .75);
  box-shadow: 0 0 0 4px rgba(228, 187, 90, .05), 0 0 28px rgba(228, 187, 90, .28);
  animation: emblem-breathe 5s ease-in-out infinite;
}
@keyframes emblem-breathe {
  0%, 100% { box-shadow: 0 0 0 4px rgba(228, 187, 90, .04), 0 0 20px rgba(228, 187, 90, .2); }
  50% { box-shadow: 0 0 0 6px rgba(228, 187, 90, .08), 0 0 34px rgba(228, 187, 90, .36); }
}

.sidebar__edition {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  margin: 2px 6px 4px;
  padding: 9px 10px;
  border-top: 1px solid rgba(228, 187, 90, .16);
  border-bottom: 1px solid rgba(228, 187, 90, .16);
  color: var(--text-soft);
}
.sidebar__edition > span:last-child { display: grid; }
.sidebar__edition strong { font-family: var(--font-display); color: var(--wolf-gold-hot); font-size: .66rem; letter-spacing: .13em; }
.sidebar__edition small { color: var(--text-muted); font-size: .53rem; font-weight: 800; letter-spacing: .16em; }
.sidebar__edition-mark { color: var(--wolf-gold); filter: drop-shadow(0 0 8px rgba(228,187,90,.7)); animation: rune-pulse 3.8s ease-in-out infinite; }
@keyframes rune-pulse { 50% { transform: rotate(45deg) scale(.78); color: var(--wolf-gold-hot); } }

.nav-item {
  position: relative;
  overflow: hidden;
  min-height: 46px;
  padding-left: 15px;
  border-radius: 3px 12px 3px 12px;
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.nav-item::before {
  content: '';
  position: absolute;
  inset: 7px auto 7px 0;
  width: 2px;
  background: var(--wolf-gold);
  box-shadow: 0 0 12px rgba(228, 187, 90, .75);
  transform: scaleY(0);
  transition: transform .2s ease;
}
.nav-item:hover { transform: translateX(3px); background: linear-gradient(90deg, rgba(228,187,90,.08), rgba(19,27,38,.68)); }
.nav-item.is-active {
  border-color: rgba(228, 187, 90, .28);
  background: linear-gradient(90deg, rgba(228,187,90,.17), rgba(228,187,90,.025));
  box-shadow: inset 0 0 24px rgba(228,187,90,.035), 0 8px 25px rgba(0,0,0,.2);
}
.nav-item.is-active::before { transform: scaleY(1); }
.nav-item.is-active .nav-item__icon { filter: drop-shadow(0 0 8px rgba(228,187,90,.8)); }

.sidebar__season {
  position: relative;
  border-color: rgba(228, 187, 90, .22);
  border-radius: 3px 14px 3px 14px;
  background: linear-gradient(145deg, rgba(21, 28, 39, .9), rgba(6, 10, 16, .88));
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 14px 35px rgba(0,0,0,.25);
}
.progress { height: 7px; padding: 1px; border: 1px solid rgba(228,187,90,.14); }
.progress span { box-shadow: 0 0 12px rgba(228,187,90,.65); }

.app-content { position: relative; }
.page { animation: wolf-page-in .42s cubic-bezier(.2,.8,.2,1); }
@keyframes wolf-page-in { from { opacity: 0; transform: translateY(10px) scale(.994); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

.page-header--scene {
  min-height: 270px;
  border-color: rgba(228, 187, 90, .32);
  border-radius: 4px 28px 4px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.38), inset 0 0 80px rgba(3,6,11,.26), var(--wolf-glow);
  animation: scene-arrive .7s cubic-bezier(.2,.8,.2,1);
}
/* Ligatabelle: flacher Header, Tabelle sofort sichtbar */
.page--league .page-header--scene,
.page-header--liga {
  min-height: 96px !important;
  padding-block: 12px !important;
  border-radius: 4px 18px 4px 18px;
}
/* Nur Helligkeit/Schärfe animieren: Die festgelegte Bildposition gilt ab dem ersten Frame. */
@keyframes scene-arrive { from { opacity: .2; filter: brightness(.72) saturate(.82); } to { opacity: 1; filter: none; } }
.page-header--scene::after { height: 3px; opacity: .9; box-shadow: 0 0 18px rgba(228,187,90,.55); }
.page-header__content { padding-left: clamp(4px, 1vw, 16px); }
.page-header__content h1 { max-width: 820px; color: #fffaf0; text-shadow: 0 4px 34px #000, 0 0 30px rgba(228,187,90,.08); }
.page-header__content .eyebrow::before { content: '◆'; margin-right: 9px; color: var(--wolf-gold-hot); filter: drop-shadow(0 0 7px rgba(228,187,90,.8)); }
.page-header__crest {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 20px;
  width: 72px;
  height: 72px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(228, 187, 90, .55);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, rgba(8,12,18,.35), rgba(3,6,11,.85));
  box-shadow: 0 0 0 3px rgba(228,187,90,.08), 0 0 26px rgba(228,187,90,.28);
  transform: none;
}
.page-header__crest img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-header__crest b,
.page-header__crest small { display: none; }

.hero-panel {
  min-height: 380px;
  border-color: rgba(228,187,90,.28);
  border-radius: 28px 4px 28px 4px;
  box-shadow: 0 28px 70px rgba(0,0,0,.4), inset 0 0 80px rgba(3,6,11,.24);
}
.hero-panel::before,
.hero-panel::after {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.hero-panel::before { inset: 14px auto auto 14px; width: 72px; height: 72px; border-top: 1px solid var(--wolf-gold); border-left: 1px solid var(--wolf-gold); opacity: .62; }
.hero-panel::after { inset: auto 14px 14px auto; width: 72px; height: 72px; border-right: 1px solid var(--wolf-gold); border-bottom: 1px solid var(--wolf-gold); opacity: .62; }
.hero-panel__content { padding-left: clamp(0px, 1vw, 12px); }

.stats-grid { counter-reset: wolf-stat; gap: 16px; }
.stat-card {
  counter-increment: wolf-stat;
  min-height: 146px;
  display: grid;
  align-content: end;
  border-color: rgba(228,187,90,.18);
  border-radius: 3px 18px 3px 18px;
  background:
    linear-gradient(145deg, rgba(21,29,40,.91), rgba(7,11,18,.93)),
    radial-gradient(circle at 100% 100%, rgba(228,187,90,.09), transparent 45%);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 38px rgba(0,0,0,.2);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.stat-card::before {
  content: '0' counter(wolf-stat);
  position: absolute;
  top: 12px;
  right: 15px;
  color: rgba(228,187,90,.28);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .08em;
}
.stat-card::after {
  width: 140px;
  height: 140px;
  right: -46px;
  bottom: -60px;
  background: radial-gradient(circle, rgba(228,187,90,.17), transparent 68%);
  filter: blur(1px);
}
.stat-card:hover { transform: translateY(-4px); border-color: rgba(228,187,90,.42); box-shadow: 0 22px 50px rgba(0,0,0,.28), var(--wolf-glow); }
.stat-card__label { color: #aab5c4; letter-spacing: .13em; }
.stat-card__value { color: #fff8e9; text-shadow: 0 0 22px rgba(228,187,90,.1); }

.panel {
  position: relative;
  border-color: rgba(168, 184, 203, .14);
  border-radius: 4px 18px 4px 18px;
  background:
    linear-gradient(145deg, rgba(18,25,35,.88), rgba(7,11,17,.9)),
    radial-gradient(circle at 100% 0, rgba(145,183,216,.05), transparent 38%);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 20px 48px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
}
.panel::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0 18% auto;
  height: 1px;
  background: var(--wolf-line);
  opacity: .42;
}
.panel::after {
  content: '';
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  width: 19px;
  height: 19px;
  border-right: 1px solid rgba(228,187,90,.42);
  border-bottom: 1px solid rgba(228,187,90,.42);
  pointer-events: none;
}
.panel__header { position: relative; padding-bottom: 12px; }
.panel__header::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, rgba(228,187,90,.35), rgba(145,183,216,.08), transparent); }
.panel__header h2,
.panel__header h3 { font-family: var(--font-display); letter-spacing: .045em; }

.activity-item { position: relative; margin-inline: -7px; padding-inline: 9px; border-radius: 8px; transition: background .2s ease, transform .2s ease; }
.activity-item:hover { transform: translateX(3px); background: linear-gradient(90deg, rgba(228,187,90,.06), transparent); }
.activity-icon { border: 1px solid rgba(145,183,216,.16); background: radial-gradient(circle, rgba(145,183,216,.14), rgba(4,8,13,.22)); box-shadow: inset 0 0 15px rgba(145,183,216,.04); }

.button { position: relative; isolation: isolate; overflow: hidden; border-radius: 3px 11px 3px 11px; transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease; }
.button::after { content: none; }
.button:hover { transform: translateY(-1px); border-color: rgba(228,187,90,.52); box-shadow: 0 8px 20px rgba(0,0,0,.24), inset 0 0 18px rgba(228,187,90,.045); }
.button--primary { box-shadow: 0 8px 25px rgba(228,187,90,.16), inset 0 1px rgba(255,255,255,.34); }
.button--primary:hover { box-shadow: 0 12px 34px rgba(228,187,90,.28), 0 0 18px rgba(228,187,90,.16); }

input, select, textarea { border-radius: 3px 10px 3px 10px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
input:focus, select:focus, textarea:focus { border-color: rgba(228,187,90,.62); box-shadow: 0 0 0 3px rgba(228,187,90,.08), 0 0 24px rgba(228,187,90,.07); background: rgba(8,13,21,.96); outline: 0; }

.table-wrap { background: rgba(3,6,11,.24); }
.data-table thead { background: linear-gradient(90deg, rgba(228,187,90,.08), rgba(13,20,29,.7)); }
.data-table th { color: #b9c3d0; border-bottom-color: rgba(228,187,90,.26); }
.data-table tbody tr { transition: background .17s ease, box-shadow .17s ease; }
.data-table tbody tr:hover { background: linear-gradient(90deg, rgba(228,187,90,.08), rgba(145,183,216,.035)); box-shadow: inset 3px 0 var(--wolf-gold); }
.data-table td:first-child { color: var(--wolf-gold-hot); font-family: var(--font-display); }

/* Die Spieleraktionen bleiben kompakt und erzeugen keine querliegenden Glanzstreifen. */
.warrior-database .data-table td:last-child { white-space: nowrap; }
.button--profile { color: var(--wolf-gold-hot); border-color: rgba(228,187,90,.28); background: linear-gradient(135deg, rgba(228,187,90,.11), rgba(11,18,28,.9)); }
.warrior-card-list { display: none; }
.warrior-list-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; margin-bottom: 10px; padding: 14px; border: 1px solid rgba(228,187,90,.18); border-radius: 3px 15px 3px 15px; background: linear-gradient(135deg, rgba(14,21,31,.94), rgba(4,8,14,.9)); box-shadow: 0 14px 34px rgba(0,0,0,.2); }
.warrior-list-card small { display: block; margin-top: 7px; color: var(--text-muted); }
.warrior-list-card__stats { display: grid; justify-items: end; gap: 4px; color: var(--wolf-gold); }
.warrior-list-card > .button { grid-column: 1 / -1; }

.connection-panel { margin-bottom: 1rem; overflow: hidden; }
.connections-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.connection-card { position: relative; min-height: 210px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; overflow: hidden; padding: 17px; border: 1px solid rgba(145,183,216,.16); border-radius: 3px 16px 3px 16px; background: radial-gradient(circle at 100% 0, var(--connection-glow, rgba(145,183,216,.1)), transparent 40%), linear-gradient(145deg, rgba(18,27,39,.92), rgba(4,8,14,.88)); box-shadow: inset 0 1px rgba(255,255,255,.03), 0 16px 32px rgba(0,0,0,.2); }
.connection-card::after { content: ''; position: absolute; inset: auto 14px 11px auto; width: 22px; height: 22px; border-right: 1px solid var(--connection-color, rgba(145,183,216,.38)); border-bottom: 1px solid var(--connection-color, rgba(145,183,216,.38)); pointer-events: none; }
.connection-card--steam { --connection-color: rgba(102,192,244,.58); --connection-glow: rgba(102,192,244,.13); }
.connection-card--faceit { --connection-color: rgba(255,85,33,.55); --connection-glow: rgba(255,85,33,.105); }
.connection-card--discord { --connection-color: rgba(88,101,242,.64); --connection-glow: rgba(88,101,242,.14); }
.connection-card__head { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid rgba(145,183,216,.12); }
.connection-card__head h3 { margin: 1px 0 0; font-family: var(--font-display); font-size: 1rem; letter-spacing: .055em; }
.connection-card__head small { color: var(--text-muted); font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.connection-card__icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--connection-color); border-radius: 50% 5px 50% 5px; color: #fff; background: rgba(3,7,12,.65); box-shadow: 0 0 18px var(--connection-glow); font-family: var(--font-display); font-weight: 900; }
.connection-card > strong { margin-top: 5px; color: #fff5d8; font-family: var(--font-display); letter-spacing: .03em; }
.connection-card > p { min-height: 36px; margin: 0 0 auto; color: var(--text-muted); font-size: .78rem; line-height: 1.5; word-break: break-word; }
.connection-state { padding: 4px 7px; border: 1px solid rgba(185,195,208,.16); border-radius: 3px 8px 3px 8px; color: var(--text-muted); font-size: .54rem; font-weight: 900; letter-spacing: .08em; }
.connection-state.is-linked { border-color: rgba(65,210,142,.28); color: #66d9a5; background: rgba(24,110,74,.12); }
.connection-editor { margin-top: 14px; border-top: 1px solid rgba(228,187,90,.14); }
.connection-editor summary { padding: 14px 3px 2px; color: var(--wolf-gold); cursor: pointer; font-size: .74rem; font-weight: 900; letter-spacing: .06em; }
.connection-editor .form-grid { margin-top: 12px; }
.profile-trophy-panel { margin-bottom: 1rem; }

.badge { border-radius: 3px 9px 3px 9px; letter-spacing: .05em; }
.badge--gold { box-shadow: 0 0 16px rgba(228,187,90,.08); }
.versus { position: relative; border-color: rgba(228,187,90,.45); box-shadow: inset 0 0 18px rgba(228,187,90,.07), 0 0 18px rgba(228,187,90,.06); }

.trophy,
.trophy-task,
.rank-step { border-radius: 3px 14px 3px 14px; }
.trophy--pinned { box-shadow: inset 0 0 38px rgba(228,187,90,.09), 0 0 24px rgba(228,187,90,.06); }
.trophy--pinned::before { content: '◆'; position: absolute; top: 7px; left: 10px; color: rgba(228,187,90,.52); font-size: .56rem; }
.rank-step.is-active { animation: active-rank 3.2s ease-in-out infinite; }
@keyframes active-rank { 50% { box-shadow: 0 0 34px color-mix(in srgb, var(--rank-color) 23%, transparent), inset 0 -30px 60px color-mix(in srgb, var(--rank-color) 16%, transparent); } }

.dialog {
  overflow: hidden;
  border-color: rgba(228,187,90,.38);
  border-radius: 4px 24px 4px 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(228,187,90,.1), transparent 32%),
    linear-gradient(145deg, #131b26, #070b11);
  box-shadow: 0 40px 120px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.04), var(--wolf-glow);
}
.dialog__content::before { content: ''; position: absolute; inset: 0 22% auto; height: 2px; background: var(--wolf-line); }
.dialog__head h2 { font-family: var(--font-display); }

html[data-theme='mondlicht'] .panel,
html[data-theme='mondlicht'] .stat-card { background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(232,238,245,.92)); }
html[data-theme='mondlicht'] .page-header--scene::before { background: linear-gradient(90deg, rgba(238,242,247,.96), rgba(238,242,247,.74) 45%, rgba(10,16,24,.18)); }
html[data-theme='mondlicht'] .page-header__content h1 { color: #17202a; text-shadow: 0 2px 20px rgba(255,255,255,.7); }
html[data-theme='mondlicht'] .page-header--scene p:not(.eyebrow) { color: #394756; text-shadow: none; }

@media (max-width: 820px) {
  .landing::before { inset: 7px; }
  .sidebar__edition { margin-top: 8px; }
  .page-header--scene { min-height: 240px; }
  .page-header__crest { display: none; }
  .stat-card { min-height: 128px; }
  .connections-grid { grid-template-columns: 1fr; }
  .warrior-card-list { display: block; }
}

@media (max-width: 560px) {
  .page-header--scene { min-height: 235px; border-radius: 3px 20px 3px 20px; }
  .hero-panel { min-height: 340px; border-radius: 20px 3px 20px 3px; }
  .stat-card { min-height: 120px; border-radius: 3px 14px 3px 14px; }
  .stat-card::before { font-size: .8rem; }
  .panel { border-radius: 3px 14px 3px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .brand__emblem,
  .sidebar__edition-mark,
  .rank-step.is-active,
  .page-header--scene { animation: none !important; }
}

/* ===== 1.7.1 · Sichtbare lebende Wolfshallen =====
   Die Kulisse liegt auf dem Dokument. Die Plattform bleibt durchsichtig, damit
   Nebel und Sterne im freien Raum zwischen den Karten wirklich sichtbar sind. */
.platform,
html[data-theme='mondlicht'] .platform {
  isolation: isolate;
  overflow: clip;
  background-color: transparent;
  background-image:
    linear-gradient(90deg, rgba(3, 6, 11, .66) 0%, rgba(3, 6, 11, .27) 52%, rgba(3, 6, 11, .18) 100%),
    linear-gradient(0deg, rgba(3, 6, 11, .58), rgba(3, 6, 11, .04) 62%);
  background-size: cover;
  background-attachment: fixed;
}

/* Mausreaktive Hallen-Nebel-Blobs (::before/::after) entfernt.
   Sichtbarer Nebel nur noch über .fog + Texturen (fog1/fog2). */

.platform > .sidebar,
.platform > .mobile-header,
.platform > .app-content {
  position: relative;
  z-index: 1;
}

/* Profilkulisse: Kopf und Silhouette des Wolfes bleiben im breiten Header sichtbar. */
.page-header--scene[data-scene='profile'] {
  background-position: center 27%;
}

/* Nur Sterne – kein Canvas-Nebel mehr */
.starfield {
  z-index: 2;
  opacity: .72;
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (max-width: 760px) {
  .page-header--scene[data-scene='profile'] { background-position: 64% 25%; }
  .starfield { opacity: .55; }
}

/* ===== Nebel-Fix � echte Textur (aus nebel-fix Pack) =====
   Ersetzt die alten Gradient-Blobs. Texturen lokal unter /assets/images/fog/ */
.fog {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: screen;
  filter: blur(1px) grayscale(.2) saturate(1.2) sepia(.2);
}
.fog #foglayer_01,
.fog #foglayer_02,
.fog #foglayer_03 {
  position: absolute;
  height: 100%;
  width: 200%;
}
.fog #foglayer_01 .image01,
.fog #foglayer_01 .image02,
.fog #foglayer_02 .image01,
.fog #foglayer_02 .image02,
.fog #foglayer_03 .image01,
.fog #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
.fog #foglayer_01 {
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}
.fog #foglayer_02,
.fog #foglayer_03 {
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
}
.fog #foglayer_01 .image01,
.fog #foglayer_01 .image02 {
  background: url("../images/fog/fog1.png") center center / cover no-repeat transparent;
}
.fog #foglayer_02 .image01,
.fog #foglayer_02 .image02,
.fog #foglayer_03 .image01,
.fog #foglayer_03 .image02 {
  background: url("../images/fog/fog2.png") center center / cover no-repeat transparent;
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@media (max-width: 767px) {
  .fog #foglayer_01 .image01,
  .fog #foglayer_01 .image02,
  .fog #foglayer_02 .image01,
  .fog #foglayer_02 .image02,
  .fog #foglayer_03 .image01,
  .fog #foglayer_03 .image02 {
    width: 100%;
  }
  .fog { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .fog #foglayer_01,
  .fog #foglayer_02,
  .fog #foglayer_03 {
    animation: none !important;
  }
}