/* ============================================================
   OLDSCHOOL RP — STARTSEITE (Cinematic Redesign)
   Eigenständiges Stylesheet, nur für index.php.
   Alle Klassen/Variablen sind mit "ix-" prefixed, damit nichts
   mit style.css (Rest der Seite) kollidiert.
   ============================================================ */
:root{
  --ix-bg:#07080b;
  --ix-bg-alt:#0c0d12;
  --ix-panel:#111319;
  --ix-gold:#f5a623;
  --ix-gold-light:#ffd166;
  --ix-white:#f4f2ec;
  --ix-grey:#9b9ba8;
  --ix-grey-dim:#5c5d6b;
  --ix-border:rgba(255,255,255,.09);
  --ix-border-gold:rgba(245,166,35,.35);
  --ix-display:'Anton',sans-serif;
  --ix-ease:.3s cubic-bezier(.4,0,.2,1);
}

.ix-root, .ix-root *, .ix-root *::before, .ix-root *::after{ box-sizing:border-box; }
.ix-root{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ix-white);
  background:var(--ix-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  min-width:0;
}
.ix-root img{ max-width:100%; display:block; }
.ix-root a{ color:inherit; text-decoration:none; }
.ix-root ul{ list-style:none; margin:0; padding:0; }
.ix-root section{ position:relative; z-index:1; }

/* film grain overlay, page-wide, purely decorative */
.ix-grain{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ix-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ix-gold-light);
}
.ix-eyebrow::before{ content:''; width:22px; height:1px; background:var(--ix-gold); display:inline-block; }

.ix-wrap{ max-width:1240px; margin:0 auto; padding:0 3rem; }

/* ================= HERO ================= */
.ix-hero{
  position:relative;
  min-height:clamp(440px,78vh,760px);
  display:flex; align-items:flex-end;
  /* padding-top reserviert Platz für den transparent darüberliegenden
     Header (main-header--hero), damit Nav/Logo sich nicht mit der
     Hero-Headline überschneiden. Siehe Responsive-Anpassungen weiter
     unten, die zu header.php's eigenen Breakpoints passen. */
  padding:180px 3rem 6rem;
  background:
    linear-gradient(180deg, rgba(6,7,9,.35) 0%, rgba(6,7,9,.55) 45%, rgba(6,7,9,.97) 92%),
    linear-gradient(90deg, rgba(6,7,9,.9) 0%, rgba(6,7,9,.15) 45%, rgba(6,7,9,.55) 100%),
    url('../index_bilder/loadingscreen_35.png');
  background-size:cover;
  background-position:center 60%;
}
.ix-hero-inner{ max-width:760px; position:relative; z-index:2; }
.ix-hero-inner .ix-eyebrow{ margin-bottom:1.4rem; }
.ix-hero h1{
  font-family:var(--ix-display);
  font-size:clamp(2.6rem,7.2vw,5.6rem);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--ix-white);
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.ix-hero h1 .ix-accent{
  background:linear-gradient(135deg,var(--ix-gold),var(--ix-gold-light));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.ix-hero p.ix-lead{
  margin-top:1.4rem;
  font-size:clamp(1rem,1.6vw,1.15rem);
  color:var(--ix-grey);
  max-width:560px;
  line-height:1.7;
}
.ix-hero-actions{ display:flex; gap:1rem; margin-top:2.3rem; flex-wrap:wrap; }
.ix-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:inherit; font-weight:700; font-size:.88rem; letter-spacing:.01em;
  padding:.95rem 1.9rem; border-radius:3px; cursor:pointer; border:none;
  transition:transform var(--ix-ease), box-shadow var(--ix-ease), background var(--ix-ease);
}
.ix-btn-primary{
  background:linear-gradient(135deg,var(--ix-gold),var(--ix-gold-light));
  color:#0a0a0a;
  box-shadow:0 6px 26px rgba(245,166,35,.3);
}
.ix-btn-primary:hover{ transform:translateY(-3px); box-shadow:0 10px 32px rgba(245,166,35,.45); }
.ix-btn-ghost{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:var(--ix-white);
  backdrop-filter:blur(6px);
}
.ix-btn-ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px); }

.ix-hero-stats{ display:flex; gap:1.9rem; margin-top:3.2rem; flex-wrap:wrap; }
.ix-hero-stat{ display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:var(--ix-grey); }
.ix-dot-live{ width:7px; height:7px; border-radius:50%; background:#3ddc84; box-shadow:0 0 10px #3ddc84; animation:ix-pulse 1.8s infinite; }
@keyframes ix-pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
.ix-hero-stat b{ color:var(--ix-white); font-weight:700; }

/* ================= MARQUEE =================
   Zwei verschachtelte Elemente statt einem: die Rotation/Skalierung (Look)
   sitzt auf dem AEUSSEREN Element, das Clipping (overflow:hidden) auf dem
   INNEREN – auf demselben Element kombiniert, hat "transform" + "overflow:hidden"
   bei einem breit ueberlaufenden, animierten Kind in manchen Browsern dazu
   gefuehrt, dass der Overflow trotzdem die Dokumentbreite aufgeblaeht hat. */
.ix-marquee-tilt{
  position:relative; z-index:3;
  transform:rotate(-1.1deg) scale(1.03);
  margin:-2.6rem 0 -1.6rem;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.ix-marquee-wrap{
  background:linear-gradient(135deg,var(--ix-gold),var(--ix-gold-light));
  overflow:hidden;
}
.ix-marquee{ display:flex; white-space:nowrap; animation:ix-marquee 32s linear infinite; }
.ix-marquee span{
  display:inline-flex; align-items:center;
  font-family:var(--ix-display); font-size:1rem; letter-spacing:.04em;
  color:#0a0a0a; padding:.85rem 0;
}
.ix-marquee span::after{ content:'\2726'; margin:0 2rem; font-size:.8rem; opacity:.55; }
@keyframes ix-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ================= SECTION HEAD ================= */
.ix-section-head{ text-align:center; max-width:640px; margin:0 auto 3.6rem; }
.ix-section-head .ix-eyebrow{ justify-content:center; display:inline-flex; }
.ix-section-head h2{
  font-family:var(--ix-display);
  font-size:clamp(2rem,4vw,3rem);
  text-transform:uppercase;
  margin-top:1rem;
  line-height:1.05;
}
.ix-section-head p{ color:var(--ix-grey); margin-top:1rem; font-size:.98rem; line-height:1.7; }

/* ================= FEATURES ================= */
.ix-features{ padding:6.5rem 0 6rem; background:var(--ix-bg); }
.ix-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.ix-feature-card{
  position:relative;
  background:var(--ix-panel);
  border:1px solid var(--ix-border);
  padding:2.6rem 2rem 2.2rem;
  border-radius:4px;
  overflow:hidden;
  transition:border-color var(--ix-ease), transform var(--ix-ease);
}
.ix-feature-card:hover{ border-color:var(--ix-border-gold); transform:translateY(-6px); }
.ix-feature-card .ix-num{
  font-family:var(--ix-display);
  font-size:4.6rem;
  color:transparent;
  -webkit-text-stroke:1px rgba(245,166,35,.28);
  position:absolute; top:-.6rem; right:1rem;
  line-height:1;
  user-select:none;
}
.ix-feature-card h3{
  font-family:var(--ix-display);
  font-size:1.25rem; text-transform:uppercase; letter-spacing:.02em;
  margin-bottom:.9rem; color:var(--ix-white); position:relative;
}
.ix-feature-card p{ color:var(--ix-grey); font-size:.92rem; line-height:1.75; position:relative; }
.ix-feature-card .ix-rule{ width:32px; height:2px; background:var(--ix-gold); margin-bottom:1.1rem; }

@media(max-width:900px){ .ix-feature-grid{ grid-template-columns:1fr; } }

/* ================= STATS BAND ================= */
.ix-stats-band{
  background:var(--ix-bg-alt);
  border-top:1px solid var(--ix-border-gold);
  border-bottom:1px solid var(--ix-border-gold);
  padding:3.4rem 0;
}
.ix-stats-row{
  max-width:1240px; margin:0 auto; padding:0 3rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem;
  text-align:center;
}
.ix-stat{ flex:1; min-width:150px; }
.ix-stat .ix-n{
  font-family:var(--ix-display);
  font-size:clamp(2.1rem,4vw,3.1rem);
  background:linear-gradient(135deg,var(--ix-gold),var(--ix-gold-light));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1;
}
.ix-stat .ix-l{ margin-top:.6rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ix-grey-dim); }

/* ================= GALLERY ================= */
.ix-gallery{ padding:7rem 0; }
.ix-gallery-grid{ columns:3 260px; column-gap:16px; }
.ix-gallery-grid figure{
  break-inside:avoid; margin:0 0 16px; position:relative; overflow:hidden; border-radius:4px;
  border:1px solid var(--ix-border);
}
.ix-gallery-grid img{ width:100%; display:block; transition:transform .5s var(--ix-ease), filter .5s var(--ix-ease); filter:saturate(.9) brightness(.92); }
.ix-gallery-grid figure:hover img{ transform:scale(1.06); filter:saturate(1.05) brightness(1); }
.ix-gallery-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1rem .9rem;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
  font-size:.78rem; font-weight:600; letter-spacing:.03em;
}
.ix-gallery-grid figcaption span.ix-tag{ color:var(--ix-gold-light); font-family:var(--ix-display); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.ix-gallery-more{ text-align:center; margin-top:3rem; }
.ix-link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.88rem; color:var(--ix-gold-light);
  border-bottom:1px solid var(--ix-border-gold); padding-bottom:.35rem; transition:gap var(--ix-ease);
}
.ix-link-arrow:hover{ gap:.9rem; }

/* ================= CTA BANNER ================= */
.ix-cta-banner{
  position:relative; padding:7rem 3rem; text-align:center;
  background:
    linear-gradient(180deg,rgba(6,7,9,.75),rgba(6,7,9,.93)),
    url('../index_bilder/loadingscreen_45.png');
  background-size:cover; background-position:center;
}
.ix-cta-banner h2{ font-family:var(--ix-display); font-size:clamp(2.2rem,5vw,4rem); text-transform:uppercase; line-height:1.02; }
.ix-cta-banner p{ color:var(--ix-grey); margin:1.2rem auto 2.2rem; max-width:520px; }
.ix-cta-banner .ix-hero-actions{ justify-content:center; }

/* ================= FOOTER ================= */
.ix-footer{ background:var(--ix-bg-alt); border-top:1px solid var(--ix-border); padding:5rem 0 0; }
.ix-footer-grid{
  max-width:1240px; margin:0 auto; padding:0 3rem;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3.5rem;
}
.ix-footer-brand img{ height:38px; margin-bottom:1.1rem; border-radius:4px; }
.ix-footer-brand p{ color:var(--ix-grey); font-size:.86rem; line-height:1.7; max-width:280px; }
.ix-footer-col h4{ font-family:var(--ix-display); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ix-gold-light); margin-bottom:1.1rem; }
.ix-footer-col a{ display:block; color:var(--ix-grey); font-size:.86rem; padding:.35rem 0; transition:color var(--ix-ease); }
.ix-footer-col a:hover{ color:var(--ix-white); }
.ix-footer-bottom{
  border-top:1px solid var(--ix-border); padding:1.6rem 3rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  max-width:1240px; margin:0 auto; font-size:.76rem; color:var(--ix-grey-dim);
}
.ix-footer-socials{ display:flex; gap:1rem; }
.ix-footer-socials a{
  width:34px; height:34px; border:1px solid var(--ix-border); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--ix-grey);
  transition:all var(--ix-ease);
}
.ix-footer-socials a:hover{ border-color:var(--ix-border-gold); color:var(--ix-gold-light); }

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .ix-footer-grid{ grid-template-columns:1fr 1fr; }
  .ix-hero{ padding:180px 1.3rem 4rem; }
  .ix-wrap{ padding:0 1.3rem; }
  .ix-stats-row{ padding:0 1.3rem; }
  .ix-cta-banner{ padding:5rem 1.3rem; }
  .ix-footer-bottom{ padding:1.6rem 1.3rem; }
}
/* header.php wird bei <=768px 180px hoch, bei <=480px 150px (siehe style.css) */
@media(max-width:768px){
  .ix-hero{ padding-top:130px; }
}
@media(max-width:480px){
  .ix-hero{ padding-top:110px; }
}
@media(max-width:560px){
  .ix-footer-grid{ grid-template-columns:1fr; padding:0 1.3rem 2.5rem; }
  .ix-gallery-grid{ columns:1 100%; }
  .ix-hero-actions .ix-btn{ flex:1; justify-content:center; }
}

/* ================= HERO-HEADER (nur Startseite) =================
   header.php bekommt auf index.php die Klasse "main-header--hero".
   Statt einer eigenen Banner-Grafik legt sich der Header dann
   transparent ÜBER das Hero-Bild von .ix-hero (das darunterliegende
   .ix-hero rückt dafür ganz nach oben, da der Header aus dem
   normalen Fluss genommen wird). Logo/Login/Nav behalten dieselbe
   Innen-Positionierung wie zuvor, nur der Hintergrund fällt weg. */
header.main-header.main-header--hero{
  position:absolute;
  top:0; left:0; right:0;
  background:linear-gradient(180deg, rgba(6,7,9,.7) 0%, rgba(6,7,9,.15) 70%, rgba(6,7,9,0) 100%);
  z-index:50;
}
/* Nav-Positionierung (oben, neben Logo/Login) und der "Angled Badge
   Tabs"-Look kommen jetzt beide aus der gemeinsamen ".header-v2"-Regel
   in style.css, gelten also automatisch auch hier. */
@media(max-width:768px){
  header.main-header.main-header--hero{
    background:linear-gradient(180deg, rgba(6,7,9,.8) 0%, rgba(6,7,9,.2) 80%, rgba(6,7,9,0) 100%);
  }
}