/* ================================================== */
/*            🌌 Ambient Mode Global START           */
/* ================================================== */

/* Overlay-Basis mit GPU-Optimierung und sanfterem Übergang */
#ambientOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  will-change: background, opacity;
  transform: translateZ(0);
  transition: background 0.6s ease, opacity 0.5s ease;
  backface-visibility: hidden; /* verhindert Flackern auf manchen GPUs */
}

/* Allgemeine Glows außerhalb des Tabs */
#mainHeader > div,
.sidebar > div,
#gameContainer > div {
  transition: box-shadow 0.5s ease, filter 0.5s ease;
  will-change: box-shadow, filter;
}

/* === Bootstrap-optimiertes Layout fürs Ambient Mode Panel === */
.ambient-tab-content {
  background-color: #0c0c0c;
  border-radius: .5rem;
  padding: 1rem;
  border: 1px solid #2d2d2d;
}

/* Titel und Labels */
.ambient-tab-content h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #f8f9fa;
}
.ambient-tab-content label {
  font-weight: 500;
  color: #dee2e6;
  margin-bottom: .25rem;
}

/* Select und Inputs harmonisieren mit Bootstrap */
.ambient-tab-content select,
.ambient-tab-content input[type="range"],
.ambient-tab-content input[type="color"] {
  display: block;
  width: 70px;
  margin-bottom: .75rem;
  border-radius: .375rem;
  border: 1px solid #495057;
  background-color: #212529;
  color: #f8f9fa;
  padding: .375rem .5rem;
}

.ambient-tab-content input[type="color"] {
  height: 1.5rem;
  padding: 0;
  cursor: pointer;
}

.ambient-tab-content input[type="range"] {
  accent-color: #2f6dad;
  cursor: pointer;
}

/* Checkboxen hübscher im Bootstrap-Stil */
.ambient-tab-content input[type="checkbox"] {
  accent-color: #2f6dad;
  transform: scale(1.1);
  margin-right: .35rem;
}

/* =========================== */
/* 🌌 Ambient Mode Global END */
/* =========================== */

/* ================================================== */
/*               Theme Toogle Global START            */
/* ================================================== */

/* SOFORT-RENDER-SCHUTZ (verhindert Flash beim Laden) */
html { color-scheme: dark !important; }
html.light { color-scheme: light !important; }

html.light {
  --bg-color: #ffffff !important;
  --text-color: #222222 !important;
}

/* Home Page */
html.light .container {
  background-color: #fff !important;
}
html.light .bi-chevron-double-up {
  color: #fff !important;
}

html.light .single-item {
  background-color: rgb(236, 236, 236) !important;
}

html.light .swiper-backface-hidden .swiper-slide {
  background-color: rgb(228, 228, 228) !important;
}

html.light .game-slide__title.home-slider,
html.light .game-slide__desc.home-slider {
  color: rgb(76, 76, 76) !important;
}

html.light .game-slide__info .btn {
  background-color: #acacac;
  color: #0c6d93 !important;
}

html.light .grid-layout-2 .game-card,
html.light .grid-layout-3 .game-card {
  background-color: #e9e9e9 !important;
  border-color: #d3d3d3 !important;
}

html.light .game-slide__title,
html.light .game-slide__desc {
  color: rgb(240, 240, 240) !important;
}

html.light .faq-section {
  background: linear-gradient(135deg, #009fff, #00ffdb);
  color: #505050 !important;
}

html.light .faq-question:hover {
  color: #181818 !important;
}    

html.light .seo-content {
  background-color: #fff !important;
}   
   
html.light .load-more-link {
  color: #fff !important;
}

/* Category Page */
html.light .category-description {
  background-color: #fff !important;
}
html.light .single-category__meta {
  background-color: #f1f1f1 !important;
}

/* Tags Page */
html.light .section-tags {
  background-color: #fff !important;
}
html.light .btn.btn-secondary.btn-sm.mb-2.item-tag.btn-tags {
  background-color: #f2f2f2 !important;
    --bs-btn-border-color: #b6b6b6 !important;
}
html.light .btn.btn-secondary.btn-sm.mb-2.item-tag.btn-tags:hover {
  background-color: #dcdcdc !important;
}

/* Top Players Page */
html.light .top-user,
html.light .leaderboard-row {
  color: #323232 !important;
}

/* Games Page */
html.light .tab-sidebar-btn {
  background-color: #E0E0E0 !important;
}
html.light .online-games-description,
html.light .grid-layout-1 .game-card__details {
  background-color: #fff !important;
}
html.light .btn-load-more {
  background-color: #ACACAC !important;
  border-color: #0033fb !important;
}

/* Privacy Pages */
html.light .single-page__content {
  color: #000 !important;
}

/* Main Header */
html.light .z-50 {
  background-color: rgba(255, 255, 255, 0.66) !important;
  border-bottom: 1px solid #cbcbcb !important;
}
html.light .navbar-toggler {
  background-color: #e9e9e9 !important;
  border-radius: 5px !important;
}
html.light .nav-item {
  background-color: rgba(255, 255, 255, 0) !important;
}

/* Main Sidebar */
html.light .mainSidebar {
  background-color: #cbcbcb !important;
}
html.light .main-sidebar {
  background: rgba(255, 255, 255, 0.66) !important;
  border-right: 1px solid #cbcbcb !important;
}
html.light .nav-header,
html.light .main-sidebar::before {
  border-top: 1px solid #cbcbcb !important;
}
html.light .nav-link p {
  color: var(--text-color) !important;
}
html.light .nav-link.active {
  background-color: rgba(255, 255, 255, 0.87) !important;
}
html.light [class*="sidebar-dark-tnagele-"] .nav-sidebar > .nav-item:hover > .nav-link {
  background-color: #f5f5f591 !important;
}

/* Search Bar */
html.light .search-bar {
  background-color: rgba(255, 255, 255, 0.24) !important;
  color: var(--text-color) !important;
}

/* Search Bar */
html.light .controls {
  background-color: #e0e0e0 !important; /* dunkler Standard */
  color: var(--text-color) !important;
  transition: background 0.1s ease, color 0.1s ease;
}

/* LIGHT THEME ANPASSUNGEN / Game Page */
html.light .single-game__wrapper {
  background: #fff !important;
  color: #222 !important;
  transition: background 0.1s ease, color 0.1s ease;
}

html.light #timer,
html.light #nerdToggle,
html.light #notesOverlayBtn {
  background-color: unset !important;
  color: #222 !important;
  transition: background 0.1s ease, color 0.1s ease !important;
}

html.light .btn-capsule,
html.light .button,
html.light .controls .btn {
  background-color: #e0e0e0  !important;
  color: #222 !important;
  transition: background 0.1s ease, color 0.1s ease !important;
}

html.light .bi-star-fill {
  color: #6c6c6c !important;
}

html.light .btn-capsule:hover,
html.light .button:hover,
html.light .controls .btn:hover {
  background-color: #d0d0d0 !important;
}

html.light .btn.btn-circle {
  background-color: #e0e0e0 !important;
  color: #222  !important;
  transition: background 0.1s ease, color 0.1s ease !important;
}

html.light .controls i {
  color: #222 !important;
  transition: background 0.1s ease, color 0.1s ease !important;
}

html.light .breadcrumb .current,
html.light .breadcrumb .separator,
html.light .breadcrumb-item.active,
html.light .breadcrumb-item.active::before {
  color: rgb(88, 88, 88) !important;
}

html.light a,
html.light .text-muted,
html.light .related-game-title {
  color: #0086ff !important;
}

/* quickNoteWidget / Game Page */
html.light #quickNoteWidget {
  background-color: #e0e0e0 !important;
  border: 1px solid #bbb !important;
}
html.light #quickNoteHeader {
  color: #3f3f3f !important;
}
html.light .quick-note-input {
  background-color: white !important;
  color: #292929 !important;
}
html.light .quick-note-display {
  color: green !important;
}

/* visitedGamesBar / Game Page */
html.light #visitedGamesBar {
  background-color: #fff !important;
  color: #555 !important;    
}
html.light #visibleGames {
  background-color: #e0e0e0 !important;
  color: #555 !important; 
}
html.light #openVisitedOverlay {
  background-color: rgb(255, 255, 255) !important;
}

/* game-switcher / Game Page */
html.light .game-switcher,
html.light .current-wrapper,
html.light .widget-info {
  background-color: #e0e0e0 !important;
  color: var(--text-color) !important;    
}     

/* category-item/tag-item / Game Page */
html.light .category-item,
html.light .tag-item {
  background-color: #e9e9e9 !important;
  border-color: #d3d3d3 !important;
  color: var(--text-color) !important;    
}   

/* comment-form / Game Page */
html.light #tpl-comment-form {
  background-color: #e0e0e0 !important;
  color: var(--text-color) !important;    
  border: 1px solid #bbb !important;
}
html.light .form-control {
  background-color: #fff !important;
  color: var(--text-color) !important;    
}

/* HEADINGS & TEXT */
html.light h1 {
  color: var(--text-color) !important;
}

html.light h2 {
  color: var(--text-color) !important;
}

html.light h3 {
  color: var(--text-color) !important;
}

html.light p {
  color: var(--text-color) !important;
}

/* TOGGLE BUTTON & ICONS */
#theme-toggle {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: currentColor;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

#theme-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Standardzustand (Dark Theme) – immer Mond zeigen */
.icon-sun,
.icon-moon {
  display: none;
}

.icon-sun {
  display: block; /* Standard (Dark‑Mode) */
}

/* Light‑Mode zeigt Sonne */
html.light .icon-moon {
  display: block;color: #777;
}

html.light .icon-sun {
  display: none;
}

/* Nur Scrollbar-Farbe im Light-Mode */
html.light {
  scrollbar-color: #bfbfbf #f1f1f1; /* Für Firefox */
}

/* Für Chrome, Edge, Safari */
html.light::-webkit-scrollbar-thumb {
  background-color: #bfbfbf;
}

html.light::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* ======================= */
/* Theme Toogle Global END */
/* ======================= */

/* ============================================== */
/*  Swiper Grundlayout - Globale Variablen START  */
/* ============================================== */

:root {
  --swiper-gap: 16px;        /* Mobile: Standardwert */
  --slide-width: 232px;      /* Breite einer Card */
  --card-bg: #111;
  --card-radius: 8px;
  --card-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Tablet */
@media (min-width: 768px) {
  :root {
    --swiper-gap: 20px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --swiper-gap: 24px;
  }
}

.mobile-search {
  display: none; /* Standard ausblenden */
}

@media (max-width: 768px) {
  .mobile-search {
    display: flex !important; /* Nur bis 768px anzeigen */
  }
}

/* ===================== */
/* Swiper Grundlayout    */
/* ===================== */

/* Slider Container */
.swiper {    
  width: 100% !important;
  overflow: hidden !important;
  padding: 6px 0 !important;
  /* optional: verhindern, dass uninitialisierter Slider flackert */
  visibility: hidden;
}

.swiper.swiper-initialized {
  visibility: visible;
}

/* Wrapper */
.swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
}

/* Einzelner Slide */
.swiper-slide {
  display: flex;
  height: auto;         /* Slide wächst mit Inhalt */
  width: 232px;         /* Feste Breite → verhindert "Stretch" auf 100% */
  flex-shrink: 0;
}

/* Fallback-Darstellung, falls JS deaktiviert oder noch nicht geladen ist */
.swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  flex-wrap: wrap;      /* mehrere Slides nebeneinander / darunter */
  gap: 20px;            /* Abstand zwischen Slides */
}

.swiper-pagination {
  position: static !important; /* raus aus absolute */
  margin-top: 15px !important;    
  margin-bottom: 40px !important;
  text-align: center !important; /* Punkte zentrieren */
}

/* ===================== */
/*     Swiper Random     */
/* ===================== */

.random-games-header {
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.random-games-header h2 {
  font-size: 2rem;
  color: #601df8;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.random-games-header p {
  font-size: 1rem;
  color: #e5e5e5;
  max-width: 800px;
  margin: 0 auto;
}

/* ===================== */
/*    Swiper Trending    */
/* ===================== */
.trending-games-header {
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.trending-games-header h2 {
  font-size: 2rem;
  color: #ab1383;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.trending-games-header p {
  font-size: 1rem;
  color: #e5e5e5;
  max-width: 600px;
  margin: 0 auto;
}

/* ===================== */
/* Einheitlicher Slide Layout */
/* ===================== */
.game-slide {
  background-color: #601df8;
  color: #fff;
  border-radius: 8px;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.game-slide__inner {
  display: flex;
  gap: 0;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.game-slide-category__inner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  width: 34%;
}

.game-slide__thumb {
  flex: 0 0 232px;   /* fester Platz */
  aspect-ratio: 16 / 9;
  background-color: unset; /* Platzhalter */
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
}

.game-slide__thumb img {
  aspect-ratio: 16 / 9;
  object-fit: cover;   /* Bild füllt den Container, auch wenn es zurechtgeschnitten wird */
  border-radius: 6px;
}

.game-slide__info {
  display: flex;
  flex-direction: column;
  min-width: 0; /* erlaubt den Kindern, sich zu schrumpfen */
}

/* --- Änderung: Titel jetzt per Clamp gekürzt --- */
.game-slide__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;   /* Nur eine Zeile */
  line-clamp: 1;           /* Standard-Eigenschaft */
  overflow: hidden;
  text-overflow: ellipsis; /* ... bei Überlänge */
  min-width: 0;
  font-size: 1.4rem;
  margin-bottom: 3px;
}

/* Beschreibung: belassen, wie es war (2-Zeilen Clamp) */
.game-slide__desc {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;        /* spezielles Flexbox-Modell */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;       /* maximale Zeilenanzahl */
  line-clamp: 2;               /* Standard-Eigenschaft */
  overflow: hidden;            /* Überhang verstecken */
  text-overflow: ellipsis;     /* Ellipsis anzeigen */
  min-width: 0;                /* wichtig bei Flex/Grid */
}

.game-slide__info .btn {
  background-color: #5a5a5a;
  color: #0ff !important;
  border: none;
  padding: 3px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
.game-slide__info .btn:hover {
  background-color: #e0e0e0;
  color: #3b004f;
}

.game-slide__thumb {
  flex: 0 0 190px;   /* fester Platz */
  aspect-ratio: 16 / 9;
  background-color: unset; /* Platzhalter */
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 20px
}

/* ===================== */
/* Responsive Anpassungen */
/* ===================== */
@media (max-width: 767px) {
  .game-slide__thumb {
    width: 100%;
    max-width: 320px;    /* Begrenzung */
    aspect-ratio: 16 / 9;
    flex: 0 0 180px;   /* fester Platz */
  }
}
@media (max-width: 767px) {
  .game-slide__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .game-slide__thumb img {
    width: 100%;
    max-width: 320px;
  }
}

/* ============================================== */
/*   Swiper Grundlayout - Globale Variablen END   */
/* ============================================== */

/* ============================================== */
/*              Scroll to Top START               */
/* ============================================== */

/* COLOR SETTINGS */
/* MISC SETTINGS */
/* RWD */
.back-to-the-top {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  z-index: 7000;
  display: block;
  text-align: center;
  width: 54px;
  height: 54px;
  line-height: 48px;
  font-size: 24px;
  background: #cb2026;
  color: #fff;
  cursor: pointer;
  transition: 0.3s all;
  -webkit-transition: 0.3s all;
  -moz-transition: 0.3s all;
  -o-transition: 0.3s all;
  -ms-transition: 0.3s all;
  /* BUTTON POSITIONS */
  /* BUTTON ANIMATIONS */
}
.back-to-the-top * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.back-to-the-top.bttt-animated i {
  position: relative;
  top: 0;
  left: 0;
  -webkit-animation-name: moveIcon;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-name: moveIcon;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.back-to-the-top:hover,
.back-to-the-top:visited,
.back-to-the-top:focus {
  color: #fff;
}
.back-to-the-top.bttt-opacity {
  opacity: 0.7;
}
.back-to-the-top.bttt-opacity:hover {
  opacity: 1;
}
.back-to-the-top.bttt-round {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  -khtml-border-radius: 100%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.back-to-the-top.bttt-round:after {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -o-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  -khtml-border-radius: 100%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.back-to-the-top.bttt-border {
  line-height: 46px;
  border: 2px solid #cb2026;
  background: #fff;
  color: #cb2026;
}
.back-to-the-top.bttt-border:after {
  content: '';
  display: block;
  opacity: 0;
  position: absolute;
  top: -8px;
  left: -8px;
  width: 64px;
  height: 64px;
  border: 1px solid #cb2026;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  transition: 0.3s all;
  -webkit-transition: 0.3s all;
  -moz-transition: 0.3s all;
  -o-transition: 0.3s all;
  -ms-transition: 0.3s all;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -o-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}
.back-to-the-top.bttt-border:hover:after {
  opacity: 0.8;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.back-to-the-top.bttt-positionRight {
  right: 20px;
  bottom: 20px;
}
.back-to-the-top.bttt-positionLeft {
  left: 20px;
  bottom: 20px;
}
.back-to-the-top.bttt-positionCenter {
  left: 50%;
  bottom: 20px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.back-to-the-top.bttt-positionRightTop {
  right: 20px;
  top: 20px;
}
.back-to-the-top.bttt-positionLeftTop {
  left: 20px;
  top: 20px;
}
.back-to-the-top.bttt-positionCenterTop {
  left: 50%;
  top: 20px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.back-to-the-top.bttt-default {
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.back-to-the-top.bttt-default.bttt-active {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.back-to-the-top.bttt-default.bttt-active.bttt-opacity {
  opacity: 0.7;
}
.back-to-the-top.bttt-default.bttt-active.bttt-opacity:hover {
  opacity: 1;
}
.back-to-the-top.bttt-default.bttt-positionCenterTop,
.back-to-the-top.bttt-default.bttt-positionCenter {
  -webkit-transform: scale(0) translateX(-50%);
  -moz-transform: scale(0) translateX(-50%);
  -ms-transform: scale(0) translateX(-50%);
  -o-transform: scale(0) translateX(-50%);
  transform: scale(0) translateX(-50%);
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.back-to-the-top.bttt-default.bttt-positionCenterTop.bttt-active,
.back-to-the-top.bttt-default.bttt-positionCenter.bttt-active {
  -webkit-transform: scale(1) translateX(-50%);
  -moz-transform: scale(1) translateX(-50%);
  -ms-transform: scale(1) translateX(-50%);
  -o-transform: scale(1) translateX(-50%);
  transform: scale(1) translateX(-50%);
}
.back-to-the-top.bttt-slideFromBottom {
  bottom: -120px;
}
.back-to-the-top.bttt-slideFromBottom.bttt-active {
  bottom: 20px;
}
.back-to-the-top.bttt-slideFromTop {
  top: -120px;
}
.back-to-the-top.bttt-slideFromTop.bttt-active {
  top: 20px;
}
.back-to-the-top.bttt-slideFromRight {
  right: -120px;
}
.back-to-the-top.bttt-slideFromRight.bttt-active {
  right: 20px;
}
.back-to-the-top.bttt-slideFromLeft {
  left: -120px;
}
.back-to-the-top.bttt-slideFromLeft.bttt-active {
  left: 20px;
}
/* FIX ICON POSITIONS */
.fa.fa-angle-up:before,
.fa.fa-angle-double-up:before,
.fa.fa-hand-o-up:before,
.fa.fa-long-arrow-up:before {
  position: relative;
  left: 0;
}
.fa.fa-angle-up:before {
  top: 2px;
}
.fa.fa-angle-double-up:before {
  top: 3px;
  color: white;
}
.fa.fa-hand-o-up:before {
  top: 3px;
}
.fa.fa-long-arrow-up:before {
  top: 3px;
}
/* MISC */
.bttt-clear {
  clear: both;
  overflow: hidden;
}
.bttt-hidden {
  display: none;
}
@media (max-width: 800px) {
  .is-bttt {
    padding-bottom: 94px;
  }
}
@-webkit-keyframes moveIcon {
  0% {
    top: 0;
  }
  25% {
    top: 3px;
  }
  75% {
    top: -3px;
  }
}
@keyframes moveIcon {
  0% {
    top: 0;
  }
  25% {
    top: 3px;
  }
  75% {
    top: -3px;
  }
}
/*# sourceMappingURL=bttt.red.css.map */

/* ============================================== */
/*              Scroll to Top END                 */
/* ============================================== */

/* ============================================== */
/*           FAQ Section - Widget START           */
/* ============================================== */

/* Dark Theme FAQ Section */
.faq-section {
  background: linear-gradient(135deg, #0f0f0f, #1a1a1a);
  padding: 60px 20px;
  font-family: Arial, sans-serif;
  color: #f5f5f5; /* Grundtext hell */
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
}

.faq-container h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 30px;
  color: #ffffff;
}

.faq-item {
  border-bottom: 1px solid #333; /* dezente Linie */
  padding: 15px 0;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  outline: none;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  padding: 10px 0;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: #00bfff; /* Akzentfarbe auf Hover (Cyan-Blue) */
}

.faq-answer {
  display: none;
  padding: 10px 0;
  color: #cccccc; /* Antwort leicht heller als Grau */
  line-height: 1.5;
}

.faq-answer.active {
  display: block;
}

/* Sanfter Fade-In Effekt */
.faq-answer {
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
/* ============================================== */
/*            FAQ Section - Widget END            */
/* ============================================== */