/* ============================================================
   CAROUSEL — Die 6 Kammern (3D-Rotation auf Desktop, Stack auf Mobile)
   Die Karussell-Rotation funktioniert nur ab 769px. Auf Mobile
   werden die Pages als flex-Column gestackt (siehe layout.css).
   ============================================================ */

.page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  transform-origin: 50% calc(100% + 2000px);
  scrollbar-width: thin;
  scrollbar-color: var(--brass-deep) transparent;
  -webkit-overflow-scrolling: touch;
}

.page::-webkit-scrollbar {
  width: 6px;
}

.page::-webkit-scrollbar-track {
  background: transparent;
}

.page::-webkit-scrollbar-thumb {
  background: var(--brass-deep);
  border-radius: 3px;
}

/* ===== KARUSSELL-POSITIONEN (Desktop only) ===== */
@media (min-width: 769px) {
  .page[data-page="0"] { transform: rotate(   0deg); }
  .page[data-page="1"] { transform: rotate( -60deg); }
  .page[data-page="2"] { transform: rotate(-120deg); }
  .page[data-page="3"] { transform: rotate(-180deg); }
  .page[data-page="4"] { transform: rotate(-240deg); }
  .page[data-page="5"] { transform: rotate(-300deg); }
}

/* ===== MOBILE STACK ===== */
@media (max-width: 768px) {
  .page {
    position: relative;
    inset: auto;
    height: auto;
    min-height: auto;
    transform: none !important;
    border-bottom: 1px solid rgba(201, 169, 97, .1);
  }
  .page:last-child { border-bottom: none; }
}

/* ===== PER-PAGE-ATMOSPHÄREN ===== */

/* Start (0): Forest — tiefer Wald, Lichtkegel */
.page[data-atmosphere="forest"] {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, #2D5240 0%, transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 80%, #0A1F18 0%, var(--forest-deep) 60%);
  color: #E8E5DD;
}

.page[data-atmosphere="forest"]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(201, 169, 97, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 97, .04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* Verein (1): Walnut — warmes Walnussholz */
.page[data-atmosphere="walnut"] {
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(201, 169, 97, .08) 0%, transparent 60%),
    linear-gradient(180deg, #2C1A0E 0%, var(--walnut-deep) 60%, #0F0805 100%);
  color: #E8E5DD;
}

/* Termine (2): Slate — kühles Slate */
.page[data-atmosphere="slate"] {
  background:
    radial-gradient(ellipse 70% 50% at 70% 30%, rgba(100, 120, 150, .1) 0%, transparent 60%),
    linear-gradient(180deg, var(--slate-mid) 0%, var(--slate-deep) 70%, #060810 100%);
  color: #E8E5DD;
}

/* Wettkämpfe (3): Oxblood — sportlich-ernster Ton */
.page[data-atmosphere="oxblood"] {
  background:
    radial-gradient(ellipse 60% 40% at 50% 20%, rgba(150, 60, 70, .15) 0%, transparent 60%),
    linear-gradient(180deg, #2A1018 0%, var(--oxblood-deep) 70%, #0A0508 100%);
  color: #E8E5DD;
}

/* Mitglieder (4) + Impressum (5): Paper — hell, freundlich */
.page[data-atmosphere="paper"] {
  background:
    radial-gradient(ellipse 60% 40% at 50% 20%, rgba(201, 169, 97, .15) 0%, transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, #D8CFB5 100%);
  color: #1F1408;
}

.page[data-atmosphere="paper"] .chamber-tag { color: #1F1408; opacity: 0.6; }

/* Impressum: dunkle Links statt Gold (besserer Kontrast auf hellem Hintergrund) */
.page[data-atmosphere="paper"] .info-block,
.page[data-atmosphere="paper"] .info-block--accent {
  border-left-color: var(--ink);
}

.page[data-atmosphere="paper"] .info-block strong,
.page[data-atmosphere="paper"] .eyebrow,
.page[data-atmosphere="paper"] .section-title {
  color: var(--ink);
}

.page[data-atmosphere="paper"] .info-block a {
  color: var(--ink);
  border-color: rgba(31, 20, 8, .3);
}

.page[data-atmosphere="paper"] .info-block a:hover {
  border-color: var(--ink);
}

.page[data-atmosphere="paper"] .dsgvo-hinweis {
  background: rgba(31, 20, 8, .05);
  border-left-color: var(--ink);
  color: rgba(31, 20, 8, .85);
}

.page[data-atmosphere="paper"] .dsgvo-hinweis a {
  color: var(--ink);
}

/* ===== MOBILE FIX: Atmosphären bleiben, aber als fließender BG ===== */
@media (max-width: 768px) {
  .page[data-atmosphere="paper"] {
    background:
      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201, 169, 97, .12) 0%, transparent 60%),
      linear-gradient(180deg, var(--paper) 0%, #E5DCC4 100%);
  }
}