#fw-section-custom-html-c300826e-ae86-4786-b238-4b35f43dd092 {

/* Twitch-Stream Container */
.twitch-container {
    position: relative;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 1280px;
    margin: 0 auto;
    border-radius: 25px !important;
}

.twitch-responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Reduziere die Breite auf kleineren Bildschirmen */
@media only screen and (max-width: 768px) {
    .twitch-container {
        max-width: 600px;
        border-radius: 20px !important; /* Kleinere Abrundung für Tablets */
    }
}

@media only screen and (max-width: 480px) {
    .twitch-container {
        max-width: 100%;
        width: 100%;
        border-radius: 16px !important /* Noch kleinere Abrundung für Smartphones */
    }
}
}



#fw-section-custom-html-6936f3fe-6e62-410e-8815-fdecf5a15c33 {

/* Basis-Styling */
body {
  background: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
  font-family: 'Roboto', 'Arial', sans-serif;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 75px auto 0;
  padding: 20px;
}

/* Intro-Section für die Beschreibung */
.intro-section {
  background: #2a2a2a;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.intro-section h2 {
  font-size: 32px;
  font-weight: 700;
  color: #40E0D0;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.intro-section:hover h2 {
  color: #9147FF;
}

.intro-section p {
  font-size: 16px;
  color: #FFFFFF;
  line-height: 1.5;
  background: rgba(200, 200, 200, 0.1);
  border-radius: 8px;
  padding: 10px 15px;
  display: inline-block;
}

/* Filter-Section */
.filter-section {
  position: relative;
  z-index: 10;
  margin-bottom: 20px;
}

.filter-section.sticky {
  position: sticky;
  top: 140px;
  background: #1a1a1a;
  padding-top: 10px;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.genre-filter-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 15px;
  background: #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  overflow-x: auto;
}

.genre-filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.genre-filter-button {
  background: linear-gradient(to right, #6441A5, #9147FF);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(100, 65, 165, 0.5);
  white-space: nowrap;
}

.genre-filter-button:hover {
  background: linear-gradient(to right, #9147FF, #6441A5);
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(145, 71, 255, 0.6);
}

.genre-filter-button.active {
  background: linear-gradient(to right, #40E0D0, #20B2AA);
  box-shadow: 0 5px 12px rgba(64, 224, 208, 0.8);
  transform: translateY(-2px);
}

.genre-filter-dropdown {
  display: none;
  width: 100%;
  padding: 10px;
  font-size: 15px;
  background: #2a2a2a;
  color: #FFFFFF;
  border: 1px solid #6441A5;
  border-radius: 8px;
  cursor: pointer;
}

/* Scrollbar-Styling für genre-filter-bar */
.genre-filter-bar::-webkit-scrollbar {
  height: 8px;
}

.genre-filter-bar::-webkit-scrollbar-thumb {
  background: #6441A5;
  border-radius: 4px;
}

.genre-filter-bar::-webkit-scrollbar-track {
  background: #1a1a1a;
}

/* Tabelle */
.letsplay-table {
  width: 100%;
  border-radius: 12px;
}

.table-header {
  display: flex;
  background: linear-gradient(to right, #6441A5, #9147FF);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-radius: 12px 12px 0 0;
}

.header-cell {
  flex: 1;
  padding: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: left;
}

.header-cell:nth-child(1) {
  flex: 1.5;
}

.header-cell:nth-child(2) {
  flex: 0.8;
}

.header-cell.info-column {
  flex: 1.2;
}

.table-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 0 5px;
}

.table-row {
  display: flex;
  background: #1c1c1c;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  margin: 0 5px;
}

.table-row:hover {
  background: #2a2a2a;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(145, 71, 255, 0.4);
}

.table-row:active {
  transform: scale(0.98);
}

.table-cell {
  padding: 15px;
  display: flex;
  align-items: center;
}

.table-cell.game-cell {
  flex: 1.5;
}

.table-cell:nth-child(2) {
  flex: 0.8;
}

.table-cell.info-column {
  flex: 1.2;
}

.bubble {
  background: rgba(40, 40, 40, 0.85);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.game-cell .bubble {
  justify-content: flex-start;
  min-width: 300px;
}

.table-cell:nth-child(2) .bubble {
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  text-align: center;
}

.background-image {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  margin-right: 20px;
  border: 2px solid #6441A5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  background-color: #2a2a2a;
}

.game-text {
  font-size: 18px;
  font-weight: 500;
  color: #FFFFFF;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.episodes {
  font-size: 16px;
  font-weight: 500;
}

.duration {
  font-size: 14px;
  color: #40E0D0;
  font-weight: 400;
}

.table-cell.info-column .bubble {
  justify-content: flex-start;
}

.game-info {
  position: relative;
}

.game-info p {
  margin: 8px 0;
  font-size: 15px;
}

.game-info p strong {
  color: #40E0D0;
}

.info-toggle {
  display: none;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
}

/* Fade-in Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.table-row.fade-in {
  animation: fadeIn 0.4s ease forwards;
}

/* Paginierungsleiste */
.pagination-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  padding: 15px;
  background: #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-button {
  background: linear-gradient(to right, #6441A5, #9147FF);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(100, 65, 165, 0.5);
}

.pagination-button:hover {
  background: linear-gradient(to right, #9147FF, #6441A5);
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(145, 71, 255, 0.6);
}

.pagination-button.active {
  background: linear-gradient(to right, #40E0D0, #20B2AA);
  box-shadow: 0 5px 12px rgba(64, 224, 208, 0.8);
  transform: translateY(-2px);
}

.pagination-button:disabled {
  background: #444;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.pagination-numbers {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination-numbers span {
  color: #FFFFFF;
  font-size: 14px;
  padding: 0 8px;
}

.pagination-options {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #FFFFFF;
}

.pagination-options label {
  font-weight: 500;
}

#items-per-page {
  padding: 8px;
  font-size: 14px;
  background: #2a2a2a;
  color: #FFFFFF;
  border: 1px solid #6441A5;
  border-radius: 8px;
  cursor: pointer;
}

.pagination-info {
  font-size: 14px;
  color: #40E0D0;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .filter-section.sticky {
    position: static;
    box-shadow: none;
  }
  .genre-filter-buttons {
    display: none;
  }
  .genre-filter-dropdown {
    display: block;
  }
  .genre-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .table-header .header-cell.info-column,
  .table-cell.info-column {
    display: none;
  }
  .table-row {
    flex-direction: column;
    padding: 10px;
    margin: 0 5px;
  }
  .table-cell {
    width: 100%;
    padding: 10px;
  }
  .game-cell .bubble {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
  }
  .background-image {
    width: 80px;
    height: 80px;
    margin: 0 0 10px 0;
  }
  .game-text {
    font-size: 16px;
    white-space: normal;
    text-overflow: clip;
  }
  .table-cell .bubble {
    height: auto;
    padding: 10px;
  }
  .table-cell:nth-child(2) .bubble {
    flex-direction: column;
    gap: 6px;
  }
  .episodes {
    font-size: 15px;
  }
  .duration {
    font-size: 13px;
  }
  .info-column .bubble {
    display: none;
  }
  .info-column .bubble .game-info.expanded {
    display: block;
  }
  .info-toggle {
    display: block;
  }
  .intro-section h2 {
    font-size: 24px;
  }
  .intro-section p {
    font-size: 14px;
  }
  .pagination-section {
    padding: 10px;
  }
  .pagination-button {
    padding: 6px 12px;
    font-size: 13px;
  }
  .pagination-options {
    flex-direction: column;
    gap: 8px;
  }
  #items-per-page {
    width: 100%;
    padding: 6px;
    font-size: 13px;
  }
  .pagination-info {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 10px;
  }
  .genre-filter-bar {
    padding: 10px;
  }
  .genre-filter-dropdown {
    font-size: 14px;
  }
  .background-image {
    width: 60px;
    height: 60px;
  }
  .game-text {
    font-size: 14px;
  }
  .episodes {
    font-size: 14px;
  }
  .duration {
    font-size: 12px;
  }
  .intro-section h2 {
    font-size: 22px;
  }
  .intro-section p {
    font-size: 13px;
  }
  .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  .pagination-button {
    padding: 5px 10px;
    font-size: 12px;
  }
  .pagination-numbers {
    gap: 6px;
  }
  .pagination-info {
    font-size: 12px;
  }
}

/* Individuelle Hintergrundbilder */
.game-ark-survival-evolved {
  background-image: url('https://cdn2.unrealengine.com/Diesel%2Fproductv2%2Fark%2Fhome%2FEGS_ARKSurvivalEvolved_StudioWildcard_IC1-400x400-ec500108af61d56554971afd868f5921359867c3.png');
}
.game-assassins-creed {
  background-image: url('https://cdn.mobygames.com/44932a34-abca-11ed-ba50-02420a000199.webp');
}
.game-assassins-creed-2 {
  background-image: url('https://cdn.mobygames.com/b745aa7a-ab70-11ed-a061-02420a00019d.webp');
}
.game-assassins-creed-brotherhood {
  background-image: url('https://cdn.mobygames.com/edc0c256-abed-11ed-887e-02420a00012e.webp');
}
.game-at-tonys {
  background-image: url('https://static0.gamerantimages.com/wordpress/wp-content/uploads/2025/01/mixcollage-24-jan-2025-08-19-pm-5978.jpg');
}
.game-backrooms-escape-together {
  background-image: url('https://cdn.mobygames.com/84bbe84e-ac15-11ed-83f5-02420a000134.webp');
}
.game-chained-together {
  background-image: url('https://cdn.mobygames.com/5f1b9f6c-72e8-11ef-8e76-02420a000127.webp');
}
.game-embr {
  background-image: url('https://cdn.mobygames.com/d3a3a996-ac07-11ed-98b0-02420a000130.webp');
}
.game-escape-room-der-kranke-kollege {
  background-image: url('https://cdn.mobygames.com/48c8f0b4-b585-11ee-b906-02420a000164.webp');
}
.game-escape-the-backrooms {
  background-image: url('https://cdn.mobygames.com/2a0d12f6-ac15-11ed-803a-02420a000131.webp');
}
.game-far-cry-3 {
  background-image: url('https://cdn.mobygames.com/830b1af8-abf0-11ed-b7c8-02420a000136.webp');
}
.game-far-cry-3-coop {
  background-image: url('https://cdn.mobygames.com/41ed428e-5baa-11ee-b072-02420a0001d2.webp');
}
.game-getting-over-it {
  background-image: url('https://cdn.mobygames.com/f13a8632-abfd-11ed-9271-02420a000133.webp');
}
.game-house-flipper {
  background-image: url('https://cdn.mobygames.com/5f929f6c-ab8f-11ed-9b12-02420a00019d.webp');
}
.game-i-am-alive {
  background-image: url('https://cdn.mobygames.com/covers/3037201-i-am-alive-xbox-360-front-cover.jpg');
}
.game-inside-the-backrooms {
  background-image: url('https://images.igdb.com/igdb/image/upload/t_cover_big/co509a.webp');
}
.game-mad-max {
  background-image: url('https://cdn.mobygames.com/8483f88c-ab6e-11ed-aa5a-02420a0001a0.webp');
}
.game-murder-house {
  background-image: url('https://cdn.mobygames.com/6b1d18bc-ac07-11ed-aeca-02420a000130.webp');
}
.game-overcooked-2 {
  background-image: url('https://cdn.mobygames.com/865912c4-ab95-11ed-bddc-02420a00019e.webp');
}
.game-panicore {
  background-image: url('https://cdn.mobygames.com/98956400-2764-11ef-b1d2-02420a0001c6.webp');
}
.game-prey-2006 {
  background-image: url('https://cdn.mobygames.com/5c29b86e-abb3-11ed-87ec-02420a00019c.webp');
}
.game-prince-of-persia-forgotten-sands {
  background-image: url('https://cdn.mobygames.com/f222e376-ab64-11ed-8eb9-02420a00016d.webp');
}
.game-resident-evil-5 {
  background-image: url('https://cdn.mobygames.com/79c866c2-abea-11ed-9915-02420a000134.webp');
}
.game-resident-evil-7 {
  background-image: url('https://cdn.mobygames.com/76ecae14-ab8f-11ed-b042-02420a00019f.webp');
}
.game-resident-evil-7-teaser {
  background-image: url('https://cdn.mobygames.com/a56639fa-ab89-11ed-a13c-02420a00019f.webp');
}
.game-resident-evil-8-demo {
  background-image: url('https://cdn.mobygames.com/2ad3e818-ac0b-11ed-941d-02420a000132.webp');
}
.game-sons-of-the-forest {
  background-image: url('https://cdn.mobygames.com/ee53c93c-b4dc-11ed-828d-02420a0001f5.webp');
}
.game-star-wars-shadows-of-the-empire {
  background-image: url('https://cdn.mobygames.com/946a7890-aba3-11ed-8bed-02420a00019f.webp');
}
.game-tomb-raider-1996 {
  background-image: url('https://cdn.mobygames.com/016df5a2-aba4-11ed-b951-02420a000197.webp');
}
.game-tomb-raider-2-1997 {
  background-image: url('https://cdn.mobygames.com/ff0e6bfc-aba3-11ed-8b70-02420a00019a.webp');
}
.game-tomb-raider-3-1998 {
  background-image: url('https://cdn.mobygames.com/e920336e-abaf-11ed-a13c-02420a00019f.webp');
}
.game-visage {
  background-image: url('https://cdn.mobygames.com/7b33c1ec-ab99-11ed-a188-02420a00019a.webp');
}
}



#fw-section-custom-html-3938eb7c-757b-48d8-90e8-cbdebba23029 {

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #1c1c1c;
    color: #FFFFFF;
}

/* Übergeordneter Wrapper */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Container für die drei Hauptbereiche */
.container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* Allgemeiner Block-Stil */
.block {
    background-color: #2a2a2a;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Plattformspezifische Hover-Effekte für Blöcke */
.profile-block:hover {
    background-color: #323232;
    box-shadow: 0 6px 16px rgba(145, 71, 255, 0.75); /* Lila für Twitch */
    transform: translateY(-2px);
}

.info-block:hover {
    background-color: #555555;
    box-shadow: 0 6px 16px rgba(64, 224, 208, 0.75); /* Türkis für neutral */
    transform: translateY(-2px);
}

.letsplay-block:hover {
    background-color: #323232;
    box-shadow: 0 6px 16px rgba(64, 224, 208, 0.75); /* Türkis für neutral */
    transform: translateY(-2px);
}

.hallofplay-block:hover {
    background-color: #323232;
    box-shadow: 0 6px 16px rgba(64, 224, 208, 0.75); /* Türkis für neutral */
    transform: translateY(-2px);
}

.schedule-block:hover {
    background-color: #323232;
    box-shadow: 0 6px 16px rgba(145, 71, 255, 0.75); /* Standard: Lila für Twitch */
    transform: translateY(-2px);
}

/* Plattformspezifische Hover-Effekte für Stream-Buttons */
.schedule-block.twitch-hover {
    box-shadow: 0 6px 16px rgba(145, 71, 255, 0.75); /* Lila für Twitch */
    transform: translateY(-2px);
}

.schedule-block.kick-hover {
    box-shadow: 0 6px 16px rgba(0, 204, 0, 0.75); /* Grün für Kick */
    transform: translateY(-2px);
}

.schedule-block.youtube-hover {
    box-shadow: 0 6px 16px rgba(204, 0, 0, 0.75); /* Rot für YouTube */
    transform: translateY(-2px);
}

/* Profil-Sektion (Profilbild + Name/Link und Infoblock darunter) */
.profile-section {
    flex: 1.3;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-header {
    display: flex;
    align-items: center;
}

.profile-image {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    margin-right: 20px;
    border: 2px solid #6441A5;
    object-fit: cover;
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    margin-right: 20px;
    align-items: flex-start;
}

.username {
    font-size: 18px;
    font-weight: 700;
    color: #40E0D0;
    text-align: left;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    transition: color 0.3s ease;
}

/* Hover-Effekt für Username im profile-block */
.profile-block:hover .username {
    color: #9147FF;
}

.youtube-button {
    display: block;
    text-align: center;
    background: linear-gradient(to right, #FF4D4D, #FF6B6B);
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 77, 77, 0.4);
    min-width: 120px;
    margin: 0 auto;
}

.youtube-button:hover {
    background: linear-gradient(to right, #FF6B6B, #FF4D4D);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 77, 77, 0.6);
}

/* Neuer Block: Profil-Info */
.info-block {
    background-color: #4a4a4a;
    padding: 15px;
    border-radius: 5px;
}

.info-block h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #40E0D0;
    transition: color 0.3s ease;
}

.info-block:hover h3 {
    color: #9147FF;
}

.info-block p {
    font-size: 14px;
    line-height: 1.5;
}

/* Mittlerer Block: Let's Plays */
.letsplay-block {
    flex: 2.4;
    min-width: 400px;
    position: relative;
}

.letsplay-block h1,
.schedule-block h1,
.hallofplay-block h1 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #40E0D0;
    transition: color 0.3s ease;
}

.letsplay-block:hover h1,
.schedule-block:hover h1,
.hallofplay-block:hover h1 {
    color: #9147FF;
}

.letsplay-block p,
.schedule-description,
.hallofplay-description {
    font-size: 16px;
    margin-bottom: 15px;
    color: #c0c0c0;
}

/* Neuer Button: Alles LPs */
.all-lps-button {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    text-align: center;
    background: linear-gradient(to right, #40E0D0, #20B2AA);
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(64, 224, 208, 0.4);
}

.all-lps-button:hover {
    background: linear-gradient(to right, #20B2AA, #40E0D0);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(64, 224, 208, 0.6);
}

.letsplay-list {
    list-style: none;
}

.letsplay-list li {
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    margin-bottom: 5px;
    transition: background 0.3s ease;
}

.letsplay-list li:last-child {
    margin-bottom: 0;
}

/* Styling für anklickbare Listenelemente */
.letsplay-list li a {
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    padding: 12px 15px 12px 40px;
    position: relative;
    transition: color 0.3s ease, background 0.3s ease;
}

.letsplay-list li a::before {
    content: '\25B6';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #40E0D0;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.letsplay-list li a:hover {
    color: #40E0D0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.letsplay-list li a:hover::before {
    opacity: 1;
    color: #9147FF;
}

/* Rechter Block: Zaitex's Hall of Play */
.hallofplay-block {
    flex: 1.3;
    min-width: 250px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

/* Optional: Zusätzliche Formatierung für den ersten Teil des Titels */
.hallofplay-title-part1 {
    display: inline-block;
}

.hallofplay-button {
    display: block;
    text-align: center;
    background: linear-gradient(to right, #6441A5, #9147FF);
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(100, 65, 165, 0.4);
    width: fit-content;
    margin: 0 auto;
}

.hallofplay-button:hover {
    background: linear-gradient(to right, #9147FF, #6441A5);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(100, 65, 165, 0.6);
}

/* Neuer Block: Zeitplan */
.schedule-block {
    max-width: 1220px;
    width: 100%;
    display: block;
    position: relative;
}

/* Container für die Stream-Buttons */
.stream-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

/* Allgemeiner Stil für Stream-Buttons */
.stream-button {
    display: inline-block;
    text-align: center;
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    position: relative; /* Für Tooltip-Positionierung */
}

/* Tooltip-Styling */
.tooltip {
    display: none;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #1c1c1c; /* Fallback-Hintergrund */
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 10;
    white-space: nowrap;
}

.stream-button:hover .tooltip {
    display: block;
    animation: fadeInOut 2s ease;
}

/* Plattformspezifische Tooltip-Farben */
.twitch-button .tooltip {
    background: #9147FF;
}

.kick-button .tooltip {
    background: #00CC00;
}

.youtube-stream-button .tooltip {
    background: #FF6B6B;
}

/* Tooltip-Animation */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(5px); }
    10% { opacity: 1; transform: translateX(-50%) translateY(0); }
    90% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(5px); }
}

/* Twitch Button */
.twitch-button {
    background: linear-gradient(to right, #6441A5, #9147FF);
}

.twitch-button:hover {
    background: linear-gradient(to right, #9147FF, #6441A5);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(100, 65, 165, 0.6);
}

/* Kick Button */
.kick-button {
    background: linear-gradient(to right, #00FF00, #00CC00);
}

.kick-button:hover {
    background: linear-gradient(to right, #00CC00, #00FF00);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 204, 0, 0.6);
}

/* YouTube Stream Button */
.youtube-stream-button {
    background: linear-gradient(to right, #FF4D4D, #FF6B6B);
}

.youtube-stream-button:hover {
    background: linear-gradient(to right, #FF6B6B, #FF4D4D);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 77, 77, 0.6);
}

/* Zeitplan-Tabelle */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    background-color: #3a3a3a;
    font-family: 'Arial', sans-serif;
}

/* Kopfzeile (thead) */
.schedule-table thead tr {
    background-color: #6441A5;
    color: white;
}

/* Kopfzeilen-Zellen (th) */
.schedule-table th {
    padding: 15px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
}

/* Tabellenzeilen (tr) */
.schedule-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Plattformspezifische Hover-Effekte für Tabellenzeilen basierend auf Thema */
.schedule-table tbody tr:nth-child(1):hover { /* Minecraft */
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 16px rgba(145, 71, 255, 0.75); /* Lila für Twitch */
    transform: translateY(-2px);
}

.schedule-table tbody tr:nth-child(2):hover { /* Just Chatting */
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 16px rgba(64, 224, 208, 0.75); /* Türkis für neutral */
    transform: translateY(-2px);
}

.schedule-table tbody tr:nth-child(3):hover { /* Valorant */
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 16px rgba(145, 71, 255, 0.75); /* Lila für Twitch */
    transform: translateY(-2px);
}

/* Tabellenzellen (td) */
.schedule-table td {
    padding: 15px;
    font-size: 14px;
    color: #FFFFFF;
}

/* Responsives Design */
@media only screen and (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 0 10px;
        gap: 20px;
    }

    .profile-section {
        min-width: 100%;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-image {
        margin-right: 0;
        margin-bottom: 15px;
        width: 60px;
        height: 60px;
    }

    .profile-info {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-right: 0;
    }

    .username {
        font-size: 16px;
        text-align: center;
    }

    .youtube-button {
        font-size: 12px;
        padding: 6px 12px;
        min-width: 100px;
    }

    .letsplay-block {
        min-width: 0;
        width: 100%;
        padding: 10px;
        margin: 0;
    }

    .letsplay-block h1,
    .schedule-block h1 {
        font-size: 24px;
    }

    .all-lps-button {
        position: static;
        margin: 10px auto;
        width: fit-content;
        font-size: 12px;
        padding: 6px 12px;
    }

    .letsplay-list {
        max-width: 100%;
        margin: 0;
    }

    .letsplay-list li {
        font-size: 16px;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .letsplay-list li a {
        font-size: 16px;
        padding: 10px 12px 10px 30px;
    }

    .letsplay-list li a::before {
        font-size: 12px;
        left: 12px;
    }

    .hallofplay-block {
        min-width: 100%;
    }

    .hallofplay-block h1 {
        font-size: 20px;
    }

    .letsplay-block p,
    .schedule-description,
    .hallofplay-description {
        font-size: 14px;
    }

    .hallofplay-button {
        font-size: 12px;
        padding: 6px 12px;
    }

    .schedule-block {
        max-width: calc(100% - 20px);
    }

    .schedule-table th,
    .schedule-table td {
        padding: 10px;
        font-size: 13px;
    }

    .stream-buttons {
        position: static;
        margin: 10px auto;
        justify-content: center;
        flex-wrap: wrap;
    }

    .stream-button {
        font-size: 12px;
        padding: 6px 12px;
    }

    .tooltip {
        top: -25px;
        font-size: 10px;
        padding: 3px 6px;
    }
}
}


#fw-section-custom-html-00257b9b-eec8-4b39-be26-c275fc4f8307 {

/* Allgemeine Stile für die Spiel-Zellen */
.letsplay-table tbody td:first-child {
    background-size: cover;
    background-position: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    padding: 10px;
}

/* Individuelle Hintergrundbilder für jedes Spiel */
.game-ark-survival-evolved {
    background-image: url('https://cdn.mobygames.com/covers/2044675-ark-survival-evolved-linux-front-cover.jpg');
}
.game-assassins-creed {
    background-image: url('https://cdn.mobygames.com/44932a34-abca-11ed-ba50-02420a000199.webp');
}
.game-assassins-creed-2 {
    background-image: url('https://example.com/assassins-creed-2-cover.jpg');
}
.game-assassins-creed-brotherhood {
    background-image: url('https://example.com/assassins-creed-brotherhood-cover.jpg');
}
.game-at-tonys {
    background-image: url('https://example.com/at-tonys-cover.jpg');
}
.game-backrooms-escape-together {
    background-image: url('https://example.com/backrooms-escape-together-cover.jpg');
}
.game-chained-together {
    background-image: url('https://example.com/chained-together-cover.jpg');
}
.game-embr {
    background-image: url('https://example.com/embr-cover.jpg');
}
.game-escape-room-der-kranke-kollege {
    background-image: url('https://example.com/escape-room-der-kranke-kollege-cover.jpg');
}
.game-escape-the-backrooms {
    background-image: url('https://example.com/escape-the-backrooms-cover.jpg');
}
.game-far-cry-3 {
    background-image: url('https://example.com/far-cry-3-cover.jpg');
}
.game-far-cry-3-coop {
    background-image: url('https://example.com/far-cry-3-coop-cover.jpg');
}
.game-getting-over-it {
    background-image: url('https://example.com/getting-over-it-cover.jpg');
}
.game-house-flipper {
    background-image: url('https://example.com/house-flipper-cover.jpg');
}
.game-i-am-alive {
    background-image: url('https://example.com/i-am-alive-cover.jpg');
}
.game-inside-the-backrooms {
    background-image: url('https://example.com/inside-the-backrooms-cover.jpg');
}
.game-mad-max {
    background-image: url('https://example.com/mad-max-cover.jpg');
}
.game-murder-house {
    background-image: url('https://example.com/murder-house-cover.jpg');
}
.game-overcooked-2 {
    background-image: url('https://example.com/overcooked-2-cover.jpg');
}
.game-panicore {
    background-image: url('https://example.com/panicore-cover.jpg');
}
.game-prey-2006 {
    background-image: url('https://example.com/prey-2006-cover.jpg');
}
.game-prince-of-persia-forgotten-sands {
    background-image: url('https://example.com/prince-of-persia-forgotten-sands-cover.jpg');
}
.game-resident-evil-5 {
    background-image: url('https://example.com/resident-evil-5-cover.jpg');
}
.game-resident-evil-7 {
    background-image: url('https://example.com/resident-evil-7-cover.jpg');
}
.game-resident-evil-7-teaser {
    background-image: url('https://example.com/resident-evil-7-teaser-cover.jpg');
}
.game-resident-evil-8-demo {
    background-image: url('https://example.com/resident-evil-8-demo-cover.jpg');
}
.game-sons-of-the-forest {
    background-image: url('https://example.com/sons-of-the-forest-cover.jpg');
}
.game-star-wars-shadows-of-the-empire {
    background-image: url('https://example.com/star-wars-shadows-of-the-empire-cover.jpg');
}
.game-tomb-raider-1996 {
    background-image: url('https://example.com/tomb-raider-1996-cover.jpg');
}
.game-tomb-raider-2-1997 {
    background-image: url('https://example.com/tomb-raider-2-1997-cover.jpg');
}
.game-tomb-raider-3-1998 {
    background-image: url('https://example.com/tomb-raider-3-1998-cover.jpg');
}
.game-visage {
    background-image: url('https://example.com/visage-cover.jpg');
}
}

#fw-section-hero-1743804942 {

/* Ziel: Social Icons im hero__socials Container */
[class*="hero__socials"] {
    display: flex !important; /* Flexbox für Zentrierung */
    justify-content: center !important; /* Horizontal zentrieren */
    align-items: center !important; /* Vertikal zentrieren, falls nötig */
    overflow: visible !important; /* Verhindern, dass die Icons abgeschnitten werden */
    flex-wrap: wrap !important; /* Falls die Icons umbrechen müssen */
    gap: 10px !important; /* Abstand zwischen den Icons, ersetzt margin-left */
}

/* Styling für die einzelnen Social Items */
[class*="hero__socials"] [class*="hero__social-item"] {
    background-color: rgba(50, 50, 50, 0.8) !important; /* Sanfter dunkelgrauer Hintergrund für Desktop */
    border-radius: 5px !important; /* Abgerundete Ecken */
    padding: 8px !important; /* Standard-Innenabstand */
    display: inline-flex !important; /* Flexbox für bessere Zentrierung innerhalb des Items */
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease !important; /* Sanfte Übergangsanimation */
    visibility: visible !important; /* Sicherstellen, dass die Icons sichtbar sind */
}

/* Hover-Effekt, um die Icons interaktiver zu machen */
[class*="hero__socials"] [class*="hero__social-item"]:hover {
    background-color: rgba(70, 70, 70, 0.9) !important; /* Etwas hellerer Grauton beim Hover */
}

/* Sicherstellen, dass die Icons selbst (z. B. Font Awesome) korrekt gestylt sind */
[class*="hero__socials"] [class*="hero__social-item"] i,
[class*="hero__socials"] [class*="hero__social-item"] svg {
    color: #fff !important; /* Weiße Farbe für die Icons auf Desktop */
    font-size: 20px !important; /* Größe der Icons anpassen, falls nötig */
    visibility: visible !important; /* Sicherstellen, dass die Icons sichtbar sind */
}

/* Abstand zwischen den Icons (wird durch gap ersetzt, aber als Fallback beibehalten) */
[class*="hero__socials"] [class*="hero__social-item"] + [class*="hero__social-item"] {
    margin-left: 10px !important; /* Abstand zwischen den Icons */
}

/* Responsivität für Tablets (max-width: 768px) */
@media only screen and (max-width: 768px) {
    [class*="hero__socials"] [class*="hero__social-item"] {
        padding: 6px !important; /* Kleinerer Innenabstand auf Tablets */
    }

    [class*="hero__socials"] [class*="hero__social-item"] i,
    [class*="hero__socials"] [class*="hero__social-item"] svg {
        font-size: 18px !important; /* Kleinere Icons auf Tablets */
    }
}

/* Responsivität für Smartphones (max-width: 480px) */
@media only screen and (max-width: 480px) {
    /* Verstecke die Social Icons komplett */
    [class*="hero__socials"] {
        display: none !important; /* Icons auf Smartphones ausblenden */
    }
}
}
#fw-section-custom-html-b36d7815-192b-48ab-a293-066f8302d39c {

body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.page-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Hauptcontainer für die empfohlenen Spiele */
.recommended-games {
    width: 100%;
    max-width: 1300px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Game item */
.game-item {
    display: flex;
    width: calc(50% - 10px);
    background: #1c1c1c;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.game-item[style*="display: none"] {
    display: none !important;
}

.game-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(64, 224, 208, 0.4);
    background: #2a2a2a;
}

.game-item img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 15px;
    border: 2px solid #40E0D0;
    transition: border-color 0.3s ease;
}

.game-item:hover img {
    border-color: #9147FF;
}

/* Header box */
.game-header-box {
    width: 100%;
    max-width: 1300px;
    margin: 40px auto 20px;
    background: #1c1c1c; /* Angepasst an LP .table-row für dunklere Optik */
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* Header title */
.header-title {
    font-size: 36px;
    font-weight: 700;
    color: #40E0D0;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease;
}

.game-header-box:hover .header-title {
    color: #9147FF;
}

/* Header text */
.header-text {
    font-size: 16px;
    color: #c0c0c0;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Rating section */
.rating-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.additional-text-box {
    background: rgba(200, 200, 200, 0.1);
    border-radius: 8px;
    padding: 15px;
    flex: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.additional-text-box p {
    font-size: 15px;
    color: #c0c0c0;
    line-height: 1.5;
}

.rating-container {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(40, 40, 40, 0.85);
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.rating-label {
    font-size: 16px;
    font-weight: 600;
    color: #40E0D0;
}

.rating-boxes {
    display: flex;
    gap: 10px;
}

.rating-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}

.rating-box:hover {
    transform: scale(1.1);
}

.rating-box.s-plus {
    background: linear-gradient(to right, #FFD700, #FFA500);
    box-shadow: 0 2px 10px rgba(255, 165, 0, 0.5);
}

.rating-box.s {
    background: linear-gradient(to right, #40E0D0, #20B2AA);
    box-shadow: 0 2px 10px rgba(64, 224, 208, 0.5);
}

.rating-box.a {
    background: linear-gradient(to right, #6441A5, #9147FF);
    box-shadow: 0 2px 10px rgba(100, 65, 165, 0.5);
}

/* Filter section */
.filter-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Filter bar */
.filter-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-button {
    background: linear-gradient(to right, #6441A5, #9147FF);
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 5px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(100, 65, 165, 0.4);
}

.filter-button:hover {
    background: linear-gradient(to right, #9147FF, #6441A5);
    transform: scale(1.05);
}

.filter-button.active {
    background: linear-gradient(to right, #40E0D0, #20B2AA);
    box-shadow: 0 4px 12px rgba(64, 224, 208, 1);
}

/* Rating filter bar */
.rating-filter-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rating-filter-button {
    background: linear-gradient(to right, #6441A5, #9147FF);
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 5px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(100, 65, 165, 0.4);
}

.rating-filter-button:hover {
    background: linear-gradient(to right, #9147FF, #6441A5);
    transform: scale(1.05);
}

.rating-filter-button.active {
    background: linear-gradient(to right, #40E0D0, #20B2AA);
    box-shadow: 0 4px 12px rgba(64, 224, 208, 1);
}

/* Game details */
.game-details {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.game-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.game-title {
    font-size: 18px;
    font-weight: 600;
    color: #40E0D0;
    background: rgba(40, 40, 40, 0.85);
    border-radius: 6px;
    padding: 8px 12px;
    flex: 1;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: color 0.3s ease;
}

.game-item:hover .game-title {
    color: #9147FF;
}

.game-ranking {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(40, 40, 40, 0.85);
    border-radius: 6px;
    padding: 8px;
    min-width: 60px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.game-ranking[data-rating="s-plus"] {
    background: linear-gradient(to right, #FFD700, #FFA500);
    box-shadow: 0 2px 10px rgba(255, 165, 0, 0.5);
}

.game-ranking[data-rating="s"] {
    background: linear-gradient(to right, #40E0D0, #20B2AA);
    box-shadow: 0 2px 10px rgba(64, 224, 208, 0.5);
}

.game-ranking[data-rating="a"] {
    background: linear-gradient(to right, #6441A5, #9147FF);
    box-shadow: 0 2px 10px rgba(100, 65, 165, 0.5);
}

.ranking-label {
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
}

.ranking-value {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.game-info {
    background: rgba(40, 40, 40, 0.85);
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    color: #c0c0c0;
    line-height: 1.5;
    flex: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.game-info p {
    margin: 0;
}

/* Status bar */
.status-bar {
    display: flex;
    align-items: center;
    background: rgba(40, 40, 40, 0.85);
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    flex-wrap: wrap;
    gap: 10px;
}

.status-label {
    font-weight: 600;
    color: #40E0D0;
    margin-right: 10px;
}

.status-option {
    font-size: 14px;
    color: #c0c0c0;
    transition: color 0.3s ease;
}

.status-option:hover {
    color: #FFFFFF;
}

/* Highlight active status */
.game-item[data-status="offen"] .status-option[data-value="offen"],
.game-item[data-status="geplant"] .status-option[data-value="geplant"],
.game-item[data-status="in-bearbeitung"] .status-option[data-value="in-bearbeitung"],
.game-item[data-status="erledigt"] .status-option[data-value="erledigt"] {
    font-weight: 600;
}

.game-item[data-status="offen"] .status-option[data-value="offen"] {
    color: #FF0000; /* Rot für Offen */
}

.game-item[data-status="geplant"] .status-option[data-value="geplant"] {
    color: #FFA500; /* Orange für Geplant */
}

.game-item[data-status="in-bearbeitung"] .status-option[data-value="in-bearbeitung"] {
    color: #FFFF00; /* Gelb für In Bearbeitung */
}

.game-item[data-status="erledigt"] .status-option[data-value="erledigt"] {
    color: #00FF00; /* Grün für Erledigt */
}

.game-item[data-status="offen"] .status-option[data-value="offen"]::before,
.game-item[data-status="geplant"] .status-option[data-value="geplant"]::before,
.game-item[data-status="in-bearbeitung"] .status-option[data-value="in-bearbeitung"]::before,
.game-item[data-status="erledigt"] .status-option[data-value="erledigt"]::before {
    content: "✔";
    margin-right: 5px;
}

.game-item[data-status="offen"] .status-option[data-value="offen"]::before {
    color: #FF0000; /* Rot für Offen */
}

.game-item[data-status="geplant"] .status-option[data-value="geplant"]::before {
    color: #FFA500; /* Orange für Geplant */
}

.game-item[data-status="in-bearbeitung"] .status-option[data-value="in-bearbeitung"]::before {
    color: #FFFF00; /* Gelb für In Bearbeitung */
}

.game-item[data-status="erledigt"] .status-option[data-value="erledigt"]::before {
    color: #00FF00; /* Grün für Erledigt */
}

/* Fade-in animation for filtered items */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* Responsivität für Tablets (max-width: 768px) */
@media only screen and (max-width: 768px) {
    .page-container {
        padding: 0 10px;
    }

    .game-header-box {
        padding: 20px;
        margin: 20px auto;
    }

    .header-title {
        font-size: 28px;
    }

    .header-text {
        font-size: 14px;
    }

    .rating-section {
        flex-direction: row;
        gap: 15px;
    }

    .additional-text-box {
        padding: 10px;
    }

    .additional-text-box p {
        font-size: 13px;
    }

    .rating-container {
        padding: 8px;
    }

    .rating-label {
        font-size: 14px;
    }

    .rating-box {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .filter-button, .rating-filter-button {
        padding: 6px 12px;
        font-size: 12px;
    }

    .recommended-games {
        gap: 15px;
    }

    .game-item {
        width: 100%;
        padding: 10px;
    }

    .game-item img {
        width: 120px;
        height: 120px;
    }

    .game-title {
        font-size: 16px;
        padding: 6px 10px;
    }

    .game-ranking {
        min-width: 50px;
        padding: 6px;
    }

    .ranking-label {
        font-size: 10px;
    }

    .ranking-value {
        font-size: 16px;
    }

    .game-info {
        font-size: 13px;
        padding: 8px;
    }

    .status-bar {
        font-size: 12px;
        padding: 6px 10px;
        gap: 8px;
    }

    .status-option {
        font-size: 12px;
    }
}

/* Responsivität für Smartphones (max-width: 480px) */
@media only screen and (max-width: 480px) {
    .page-container {
        padding: 0 5px;
    }

    .game-header-box {
        padding: 15px;
    }

    .header-title {
        font-size: 24px;
    }

    .header-text {
        font-size: 13px;
    }

    .rating-section {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .additional-text-box {
        padding: 8px;
        width: 100%;
    }

    .additional-text-box p {
        font-size: 12px;
    }

    .rating-container {
        padding: 8px;
        width: auto;
    }

    .rating-label {
        font-size: 12px;
    }

    .rating-box {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .filter-button, .rating-filter-button {
        padding: 5px 10px;
        font-size: 11px;
    }

    .recommended-games {
        gap: 10px;
    }

    .game-item {
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }

    .game-item img {
        width: 150px;
        height: 150px;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .game-details {
        width: 100%;
    }

    .game-header {
        flex-direction: row;
        gap: 5px;
    }

    .game-title {
        font-size: 14px;
        padding: 6px 8px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .game-ranking {
        min-width: 50px;
        padding: 6px;
    }

    .ranking-label {
        font-size: 10px;
    }

    .ranking-value {
        font-size: 14px;
    }

    .game-info {
        font-size: 12px;
        padding: 6px;
    }

    .status-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 6px;
        gap: 5px;
    }

    .status-label {
        margin-bottom: 5px;
    }

    .status-option {
        font-size: 12px;
    }
}
}



#fw-section-header {

/* Header unter der Ankündigungsleiste */
.header {
    position: static;
    top: 35px !important; /* Höhe der Ankündigungsleiste */
    width: 100% !important;
    height: 115px !important; /* Neue Höhe des Headers */
    z-index: 1000 !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: solid 1px
      var(--color-background);
}

/* Deaktiviere die Änderungen im Mobile-Modus */
@media only screen and (max-width: 768px) {
    .header {
        position: static !important; /* Entfernt die fixierte Position */
        top: auto !important; /* Setzt top zurück */
        height: auto !important; /* Setzt die Höhe zurück */
        background-color: transparent !important; /* Entfernt den transparenten Hintergrund */
        backdrop-filter: none !important; /* Entfernt den Blur-Effekt */
        -webkit-backdrop-filter: none !important; /* Entfernt den Blur-Effekt für Webkit */
    }
}
}


#fw-section-announcement-bar-71c22fcf-4d0b-42d1-a228-9cf40713ff52 {
--color-primary: #5865f2;
--color-primary-rgb: 88, 101, 242;
--color-background: #16162D;
--color-background-rgb: 22, 22, 45;
--color-on-primary: #FFFFFF;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #FFFFFF;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #FFFFFF;
--color-background-brightness: 25;
background-color: var(--color-background);
color: var(--color-on-background);
/* Fixiere die Ankündigungsleiste */
.announcement-bar {
    position: static;
    top: 0 !important;
    width: 100% !important;
    z-index: 1001 !important; /* Höherer z-index als der Header, damit sie oben bleibt */
    height: 35px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Deaktiviere die Änderungen im Mobile-Modus */
@media only screen and (max-width: 768px) {
    .announcement-bar {
        position: static !important; /* Entfernt die fixierte Position */
        top: auto !important; /* Setzt top zurück */
        height: auto !important; /* Setzt die Höhe zurück */
        padding: 0px !important; /* Standard-Padding */
        -webkit-backdrop-filter: none !important; /* Entfernt den Blur-Effekt für Webkit */
    }
}
}







#fw-section-custom-html-a4a547da-7e86-4944-9418-f16e348f1fd6 {

/* Let's Play-Tabelle */
.letsplay-table {
    width: 100%;
    max-width: 960px;
    margin: 20px auto;
    border-collapse: collapse;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 2px 10px rgba(0, 0, 0, 0.05);
    background-color: #dddddd;
    font-family: 'Arial', sans-serif;
}

.letsplay-table thead tr {
    background-color: #6441A5;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.letsplay-table th {
    padding: 15px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
}

.letsplay-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.letsplay-table tbody tr:hover {
    background-color: #f5f5f5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.letsplay-table td {
    padding: 15px;
    font-size: 14px;
    color: #333;
}

.letsplay-table td a {
    color: #6441A5;
    text-decoration: none;
    transition: color 0.3s ease;
}

.letsplay-table td a:hover {
    color: #9147FF;
}

/* Reduziere Border-Radius der Tabellen auf kleineren Bildschirmen */
@media only screen and (max-width: 1024px) {
    .letsplay-table {
        border-radius: 10px;
    }
}

@media only screen and (max-width: 768px) {
    .letsplay-table {
        border-radius: 8px;
    }
    .letsplay-table th,
    .letsplay-table td {
        padding: 10px;
        font-size: 13px;
    }
}
}

#fw-section-custom-html-8f121c82-da14-43b1-9438-2d84ec9b1119 {

/* Basis-Styling */
body {
  background: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
  font-family: 'Arial', sans-serif;
  color: #F5F5F5;
  margin: 0;
  padding: 0;
}

.custom-link-section {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  box-sizing: border-box;
}

/* Profilbild */
.profile-image-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.profile-image {
  width: 150px; /* Größe des Profilbildes */
  height: 150px;
  border-radius: 50%; /* Rundes Bild */
  object-fit: cover; /* Verhindert Verzerrung */
  border: 2px solid #6441A5; /* Lila Rand, passend zu Buttons */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.custom-link-header {
  text-align: center;
  margin-bottom: 20px;
}

.custom-link-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #40E0D0;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
}

.social-handle {
  font-size: 20px;
  font-weight: 600;
  color: #F5F5F5;
  margin: 0;
}

.social-description {
  font-size: 16px;
  font-weight: 400;
  color: #D3D3D3; /* Etwas heller als Hintergrund für Kontrast */
  margin: 5px 0 0;
}

.custom-link-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.custom-link-button {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 20px; /* Größerer Text */
  font-weight: 600;
  color: #F5F5F5;
  background: rgba(40, 40, 40, 0.85);
  border: 1px solid #6441A5;
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  width: 100%;
  max-width: 450px; /* Feste Breite für Symmetrie */
  box-sizing: border-box;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.custom-link-icon {
  font-size: 32px; /* Größere Icons für Material Design Icons */
  flex-shrink: 0;
  line-height: 1; /* Verhindert Versatz bei WebFonts */
  color: #F5F5F5; /* Standardfarbe für Nicht-SVG-Icons */
  width: 44px; /* Fester Container für größere Icons */
  text-align: center; /* Zentriert das Icon im Container */
  position: absolute; /* Positioniert das Icon links */
  left: 20px; /* Standard-Abstand vom linken Rand */
  top: 50%;
  transform: translateY(-50%); /* Vertikale Zentrierung */
}

/* Spezifische Anpassung für Kick-Icon (SVG) */
.custom-link-button .kick-icon {
  width: 32px; /* Gleiche Größe wie font-size für Konsistenz */
  height: 32px;
  fill: #F5F5F5; /* Standardfarbe, passend zu anderen Icons */
  display: block; /* Verhindert unerwünschte Verschiebungen */
  position: absolute;
  left: 24px; /* Weiter nach rechts verschoben für Ausrichtung */
  top: 50%;
  transform: translateY(-50%) scale(0.95); /* Feinjustierung für Zentrierung */
}

/* Text mittig und symmetrisch */
.custom-link-text {
  flex-grow: 1;
  text-align: center;
  padding-left: 44px; /* Platz für größere Icons */
  padding-right: 20px; /* Symmetrischer Abstand rechts */
}

/* Hover-Effekt für den Button selbst */
.custom-link-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  background-color: rgba(60, 60, 60, 0.9);
}

/* Plattformspezifische Hover-Farben für Icons (nur für Material Design Icons) */
.custom-link-button:hover .custom-link-icon:not(.kick-icon) {
  color: #FFFFFF; /* Generische Regel nur für Material Design Icons */
}

.custom-link-button[href*="twitch.tv"]:hover .custom-link-icon {
  color: #9147FF; /* Twitch-Lila */
}

.custom-link-button[href*="youtube.com"]:hover .custom-link-icon {
  color: #FF3333; /* YouTube-Rot */
}

/* Hover für Kick-Icon */
.custom-link-button[href*="kick.com"]:hover .kick-icon {
  fill: #4CAF50; /* Kick-Grün für SVG */
  /* Alternative: fill: #53FC18; /* Neon-Grün des Kick-Brandings */
}

.custom-link-button[href*="discord.gg"]:hover .custom-link-icon {
  color: #7289DA; /* Discord-Blau */
}

.custom-link-button[href*="x.com"]:hover .custom-link-icon {
  color: #1DA1F2; /* X-Blau */
}

.custom-link-button[href*="instagram.com"]:hover .custom-link-icon {
  color: #E1306C; /* Instagram-Pink */
}

.custom-link-button[href*="steamcommunity.com"]:hover .custom-link-icon {
  color: #A9A9A9; /* Steam-Grau */
}

/* Plattformspezifische Hover-Effekte für Leuchten */
.custom-link-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Plattformspezifische Farben */
.custom-link-button[href*="twitch.tv"]::after {
  background: radial-gradient(circle, rgba(145, 71, 255, 0.9), rgba(145, 71, 255, 0));
}

.custom-link-button[href*="youtube.com"]::after {
  background: radial-gradient(circle, rgba(255, 51, 51, 0.9), rgba(255, 51, 51, 0));
}

.custom-link-button[href*="kick.com"]::after {
  background: radial-gradient(circle, rgba(76, 175, 80, 0.9), rgba(76, 175, 80, 0));
  /* Alternative: background: radial-gradient(circle, rgba(83, 252, 24, 0.9), rgba(83, 252, 24, 0)); */
}

.custom-link-button[href*="discord.gg"]::after {
  background: radial-gradient(circle, rgba(114, 137, 218, 0.9), rgba(114, 137, 218, 0));
}

.custom-link-button[href*="x.com"]::after {
  background: radial-gradient(circle, rgba(29, 161, 242, 0.9), rgba(29, 161, 242, 0));
}

.custom-link-button[href*="instagram.com"]::after {
  background: radial-gradient(circle, rgba(225, 48, 108, 0.9), rgba(225, 48, 108, 0));
}

.custom-link-button[href*="steamcommunity.com"]::after {
  background: radial-gradient(circle, rgba(169, 169, 169, 0.9), rgba(169, 169, 169, 0));
}

/* Hover für Leuchteffekt */
.custom-link-button:hover::after {
  opacity: 1;
  transform: scale(1.3);
}

/* Klick-Animation */
.custom-link-button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Responsivität für Tablets (max-width: 768px) */
@media only screen and (max-width: 768px) {
  .custom-link-section {
    padding: 15px;
  }

  .profile-image {
    width: 120px; /* Kleineres Profilbild */
    height: 120px;
  }

  .custom-link-header h2 {
    font-size: 28px;
  }

  .social-handle {
    font-size: 18px;
  }

  .social-description {
    font-size: 14px;
  }

  .custom-link-button {
    font-size: 18px;
    padding: 12px 16px;
    border-radius: 10px;
    max-width: 400px; /* Etwas kleinere Breite für Tablets */
  }

  .custom-link-icon {
    font-size: 28px; /* Angepasste Größe für Tablets */
    width: 40px; /* Fester Container für Symmetrie */
    left: 16px; /* Angepasster Abstand */
  }

  .custom-link-button .kick-icon {
    width: 28px; /* Angepasste Größe für SVG */
    height: 28px;
    left: 20px; /* Weiter nach rechts verschoben */
    transform: translateY(-50%) scale(0.95); /* Feinjustierung für Zentrierung */
  }

  .custom-link-text {
    padding-left: 40px; /* Angepasster Platz für Icon */
    padding-right: 16px; /* Symmetrischer Abstand */
  }
}

/* Responsivität für Smartphones (max-width: 480px) */
@media only screen and (max-width: 480px) {
  .custom-link-section {
    padding: 10px;
  }

  .profile-image {
    width: 100px; /* Noch kleineres Profilbild */
    height: 100px;
  }

  .custom-link-header h2 {
    font-size: 24px;
  }

  .social-handle {
    font-size: 16px;
  }

  .social-description {
    font-size: 12px;
  }

  .custom-link-button {
    font-size: 16px;
    padding: 12px 12px; /* Höheres Padding für leichteres Drücken */
    border-radius: 8px;
    max-width: 350px; /* Kleinere Breite für Smartphones */
  }

  .custom-link-icon {
    font-size: 24px; /* Angepasste Größe für Smartphones */
    width: 36px; /* Fester Container für Symmetrie */
    left: 12px; /* Angepasster Abstand */
  }

  .custom-link-button .kick-icon {
    width: 24px; /* Angepasste Größe für SVG */
    height: 24px;
    left: 16px; /* Weiter nach rechts verschoben */
    transform: translateY(-50%) scale(0.95); /* Feinjustierung für Zentrierung */
  }

  .custom-link-text {
    padding-left: 36px; /* Angepasster Platz für Icon */
    padding-right: 12px; /* Symmetrischer Abstand */
  }
}
}
#fw-section-custom-html-48bdc00f-72b8-4a9f-b20f-3199268542c0 {

/* Basis-Styling */
body {
    background: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
    font-family: 'Arial', sans-serif;
    color: #F5F5F5;
    margin: 0;
    padding: 0;
}

.command-section {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Profilbild */
.profile-image-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #6441a5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Header */
.command-header {
    text-align: center;
    margin-bottom: 20px;
}

.command-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: #40E0D0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
}

.social-handle {
    font-size: 20px;
    font-weight: 600;
    color: #F5F5F5;
    margin: 0;
}

.command-description {
    font-size: 16px;
    font-weight: 400;
    color: #D3D3D3;
    margin: 5px 0 0;
}

/* Plattform-Auswahl */
.platform-filter-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #1c1c1c;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.platform-input {
    position: absolute;
    visibility: hidden; /* Blendet Radio-Inputs aus */
}

.platform-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(to right, #4A4A4A, #6A6A6A); /* Grau für nicht ausgewählt */
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 15px; /* Größere Schrift */
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 8px rgba(74, 74, 74, 0.5);
}

/* Plattformspezifische Hover-Effekte für nicht ausgewählte Buttons */
.platform-button[for="twitch"]:hover:not(.platform-input#twitch:checked ~ .platform-filter-bar [for="twitch"]) {
    box-shadow: 0 5px 12px rgba(145, 71, 255, 0.4); /* Leichter lila Schimmer für Twitch */
    transform: translateY(-2px);
}

.platform-button[for="kick"]:hover:not(.platform-input#kick:checked ~ .platform-filter-bar [for="kick"]) {
    box-shadow: 0 5px 12px rgba(76, 175, 80, 0.4); /* Leichter grüner Schimmer für Kick */
    transform: translateY(-2px);
}

.platform-button[for="youtube"]:hover:not(.platform-input#youtube:checked ~ .platform-filter-bar [for="youtube"]) {
    box-shadow: 0 5px 12px rgba(255, 51, 51, 0.4); /* Leichter roter Schimmer für YouTube */
    transform: translateY(-2px);
}

/* Plattformspezifische Farben für ausgewählte Buttons */
.platform-input#twitch:checked ~ .platform-filter-bar [for="twitch"] {
    background: linear-gradient(to right, #6441A5, #9147FF); /* Lila für Twitch */
    box-shadow: 0 5px 12px rgba(100, 65, 165, 0.8);
    transform: translateY(-2px);
}

.platform-input#kick:checked ~ .platform-filter-bar [for="kick"] {
    background: linear-gradient(to right, #4CAF50, #388E3C); /* Grün für Kick */
    box-shadow: 0 5px 12px rgba(76, 175, 80, 0.8);
    transform: translateY(-2px);
}

.platform-input#youtube:checked ~ .platform-filter-bar [for="youtube"] {
    background: linear-gradient(to right, #FF3333, #CC0000); /* Rot für YouTube */
    box-shadow: 0 5px 12px rgba(255, 51, 51, 0.8);
    transform: translateY(-2px);
}

/* Plattform-Icons */
.platform-icon {
    font-size: 22px; /* Größere Icons für Twitch und YouTube */
    color: #FFFFFF; /* Standardfarbe für Material Design Icons */
}

/* Kick-Icon (SVG) */
.kick-icon {
    width: 18px; /* Beibehalten, passt laut Feedback */
    height: 18px;
    fill: #FFFFFF; /* Standardfarbe, passend zu anderen Icons */
    display: inline-block; /* Für korrekte Ausrichtung im Button */
    vertical-align: middle; /* Zentriert das Icon vertikal */
}

/* Hover-Farben für Icons */
.platform-button[for="twitch"]:hover .platform-icon {
    color: #9147FF; /* Twitch-Lila bei Hover */
}

.platform-button[for="kick"]:hover .kick-icon {
    fill: #4CAF50; /* Kick-Grün bei Hover */
    /* Alternative: fill: #53FC18; /* Neon-Grün, falls gewünscht */
}

.platform-button[for="youtube"]:hover .platform-icon {
    color: #FF3333; /* YouTube-Rot bei Hover */
}

/* Auswahl-Farben für Icons (weiß) */
.platform-input#twitch:checked ~ .platform-filter-bar [for="twitch"] .platform-icon {
    color: #FFFFFF; /* Weiß bei Auswahl */
}

.platform-input#kick:checked ~ .platform-filter-bar [for="kick"] .kick-icon {
    fill: #FFFFFF; /* Weiß bei Auswahl */
}

.platform-input#youtube:checked ~ .platform-filter-bar [for="youtube"] .platform-icon {
    color: #FFFFFF; /* Weiß bei Auswahl */
}

/* Command-Listen */
.command-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.command-list {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex-direction: column;
    gap: 10px; /* Abstand zwischen Command-Items */
}

.platform-input#twitch:checked ~ .command-container .command-list.twitch,
.platform-input#kick:checked ~ .command-container .command-list.kick,
.platform-input#youtube:checked ~ .command-container .command-list.youtube {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* Nicht-ausgewählte Listen ausblenden */
.platform-input#twitch:checked ~ .command-container .command-list:not(.twitch),
.platform-input#kick:checked ~ .command-container .command-list:not(.kick),
.platform-input#youtube:checked ~ .command-container .command-list:not(.youtube) {
    display: none;
    opacity: 0;
}

.command-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1c1c1c;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Für Tooltip-Positionierung */
    gap: 10px; /* Abstand zwischen Elementen im Command-Item */
}

.command-item:hover {
    transform: translateY(-2px);
}

.twitch .command-item:hover {
    box-shadow: 0 6px 16px rgba(145, 71, 255, 0.75); /* Lila für Twitch */
}

.kick .command-item:hover {
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.75); /* Grün für Kick */
}

.youtube .command-item:hover {
    box-shadow: 0 6px 16px rgba(255, 51, 51, 0.75); /* Rot für YouTube */
}

.command-name {
    font-size: 18px;
    font-weight: 600;
    color: #40E0D0;
    background: rgba(40, 40, 40, 0.85);
    border-radius: 6px;
    padding: 8px 12px;
    flex: 0 0 150px;
    text-align: center;
}

.command-desc {
    font-size: 16px;
    color: #D3D3D3;
    flex: 1;
    padding: 0 15px;
    text-align: left;
}

.copy-button {
    background: #40E0D0;
    border: none;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
    flex: 0 0 36px;
    height: 36px;
}

.copy-button i {
    font-size: 20px;
    color: #1c1c1c;
}

.twitch .command-item .copy-button:hover {
    background: #9147FF; /* Lila für Twitch */
    transform: scale(1.1);
}

.kick .command-item .copy-button:hover {
    background: #388E3C; /* Grün für Kick */
    transform: scale(1.1);
}

.youtube .command-item .copy-button:hover {
    background: #CC0000; /* Rot für YouTube */
    transform: scale(1.1);
}

.copy-tooltip {
    display: none;
    position: absolute;
    top: -30px;
    right: 10px;
    background: #1c1c1c;
    color: #F5F5F5;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.copy-tooltip.active {
    display: block;
}

/* Responsivität für Tablets (max-width: 768px) */
@media only screen and (max-width: 768px) {
    .command-section {
        padding: 15px;
    }

    .profile-image {
        width: 120px;
        height: 120px;
    }

    .command-header h2 {
        font-size: 28px;
    }

    .social-handle {
        font-size: 18px;
    }

    .command-description {
        font-size: 14px;
    }

    .platform-filter-bar {
        gap: 8px;
        padding: 10px;
    }

    .platform-button {
        padding: 6px 12px;
        font-size: 14px; /* Angepasste Schriftgröße */
    }

    .platform-icon {
        font-size: 20px; /* Angepasste Größe für Twitch und YouTube */
    }

    .kick-icon {
        width: 16px; /* Beibehalten */
        height: 16px;
    }

    .command-list {
        gap: 12px; /* Abstand für Tablet */
    }

    .command-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
    }

    .command-name {
        flex: none;
        width: 100%;
        text-align: left;
        padding: 6px 10px;
    }

    .command-desc {
        font-size: 14px;
        padding: 0;
    }

    .copy-button {
        flex: none;
        width: 32px;
        height: 32px;
        padding: 6px;
    }

    .copy-button i {
        font-size: 18px;
    }

    .copy-tooltip {
        top: auto;
        bottom: -30px;
        right: 10px;
    }
}

/* Responsivität für Smartphones (max-width: 480px) */
@media only screen and (max-width: 480px) {
    .command-section {
        padding: 10px;
    }

    .profile-image {
        width: 100px;
        height: 100px;
    }

    .command-header h2 {
        font-size: 24px;
    }

    .social-handle {
        font-size: 16px;
    }

    .command-description {
        font-size: 12px;
    }

    .platform-filter-bar {
        gap: 6px;
        padding: 8px;
    }

    .platform-button {
        padding: 5px 10px;
        font-size: 13px; /* Angepasste Schriftgröße */
    }

    .platform-icon {
        font-size: 18px; /* Angepasste Größe für Twitch und YouTube */
    }

    .kick-icon {
        width: 14px; /* Beibehalten */
        height: 14px;
    }

    .command-list {
        gap: 10px; /* Abstand für Smartphone */
    }

    .command-item {
        flex-direction: row; /* Horizontales Layout */
        align-items: center;
        gap: 8px; /* Reduzierter Abstand */
        padding: 10px;
    }

    .command-name {
        flex: 0 0 100px; /* Feste Breite für Command-Name */
        font-size: 16px;
        padding: 5px 8px;
        text-align: left;
    }

    .command-desc {
        font-size: 12px;
        padding: 0 10px;
        flex: 1; /* Nimmt restlichen Platz */
    }

    .copy-button {
        flex: 0 0 24px; /* Kleiner Button */
        height: 24px;
        padding: 4px;
    }

    .copy-button i {
        font-size: 14px;
    }

    .copy-tooltip {
        top: -25px; /* Tooltip oben für bessere Sichtbarkeit */
        right: 5px;
        font-size: 10px;
        padding: 3px 6px;
    }
}
}
#fw-section-custom-html-5cb1ee4c-a425-4f4d-99f7-15f3693de280 {

/* Entferne universelle Regel * { margin: 0; padding: 0; box-sizing: border-box; } */
html {
    box-sizing: border-box; /* Für konsistentes Layout */
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #1c1c1c;
    color: #FFFFFF;
    margin: 0; /* Sicherstellen, dass kein Standard-Margin vom Browser hinzugefügt wird */
}

/* Übergeordneter Wrapper */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 20px 20px; /* Reduzierter padding-top für kontrollierten oberen Abstand */
    min-height: auto; /* Entferne min-height: 100vh, um Freiraum zu reduzieren */
}

/* FAQ-Sektion */
.faq-section {
    max-width: 800px;
    width: calc(100% - 200px); /* 100px links + 100px rechts */
    margin: 0 100px;
    text-align: center;
}

/* FAQ-Header */
.faq-header {
    margin-bottom: 20px;
}

.faq-header h1 {
    font-size: 32px;
    font-weight: 700;
    color: #40E0D0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.faq-header:hover h1 {
    color: #9147FF;
}

.faq-header p {
    font-size: 16px;
    color: #c0c0c0;
}

/* FAQ-Kategorie */
.faq-category {
    font-size: 24px;
    font-weight: 700;
    color: #40E0D0;
    margin: 20px 0 10px;
    transition: color 0.3s ease;
}

.faq-category:hover {
    color: #9147FF;
}

/* FAQ-Container */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

/* FAQ-Item (Akkordeon) */
.faq-item {
    background-color: #2a2a2a;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    width: 100%;
    max-width: 760px;
}

/* Hover-Effekt */
.faq-item:hover {
    box-shadow: 0 6px 16px rgba(64, 224, 208, 0.75);
    transform: translateY(-2px);
}

/* FAQ-Frage (summary) */
.faq-question {
    font-size: 18px;
    font-weight: 600;
    color: #40E0D0;
    background-color: #2a2a2a;
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s ease, background 0.3s ease;
    border-radius: 10px;
    text-align: left;
}

.faq-question::after {
    content: '\25BC';
    font-size: 14px;
    color: #40E0D0;
    transition: transform 0.3s ease, color 0.3s ease;
}

.faq-item[open] .faq-question {
    color: #9147FF;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px 10px 0 0;
}

.faq-item[open] .faq-question::after {
    transform: rotate(180deg);
    color: #9147FF;
}

.faq-item:hover .faq-question {
    color: #9147FF;
    background: rgba(255, 255, 255, 0.05);
}

/* FAQ-Antwort */
.faq-answer {
    background-color: #3a3a3a;
    padding: 15px;
    border-radius: 0 0 10px 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #c0c0c0;
    text-align: left;
    opacity: 1;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    max-height: 800px; /* Erhöht, um mehr Inhalt aufzunehmen */
    overflow-y: auto; /* Scrollbalken bei zu langem Inhalt */
}

/* Abstand vor h3-Überschriften in FAQ-Antworten */
.faq-answer h3 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #40E0D0;
}

/* Slide-Down-Animation für Antwort */
.faq-item[open] .faq-answer {
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 800px; } /* Angepasst an neue max-height */
}

/* FAQ-Bilder */
.faq-answer img {
    max-width: 100%;
    height: auto;
    border: 2px solid #40E0D0;
    border-radius: 5px;
    margin-top: 10px;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-answer img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(64, 224, 208, 0.75);
}

/* FAQ-Links */
.faq-link {
    color: #40E0D0;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    transition: color 0.3s ease;
}

.faq-link:hover {
    color: #9147FF;
}

/* Plattformspezifische Link-Farben */
.twitch-link { color: #9147FF; }
.twitch-link:hover { color: #40E0D0; }

.kick-link { color: #00CC00; }
.kick-link:hover { color: #40E0D0; }

.youtube-link { color: #FF6B6B; }
.youtube-link:hover { color: #40E0D0; }

/* Zurück-Button */
.back-button {
    display: block;
    text-align: center;
    background: linear-gradient(to right, #40E0D0, #20B2AA);
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(64, 224, 208, 0.4);
    width: fit-content;
    margin: 20px auto;
}

/* Hover-Effekt für Zurück-Button */
.back-button:hover {
    background: linear-gradient(to right, #20B2AA, #40E0D0);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(64, 224, 208, 0.6);
}

/* Responsives Design */
@media only screen and (max-width: 768px) {
    .faq-section {
        padding: 10px;
        margin: 0 50px;
        width: calc(100% - 100px);
    }

    .faq-header h1 {
        font-size: 28px;
    }

    .faq-header p {
        font-size: 14px;
    }

    .faq-category {
        font-size: 20px;
    }

    .faq-container {
        gap: 12px;
    }

    .faq-item {
        padding: 10px;
        max-width: 100%;
    }

    .faq-question {
        font-size: 16px;
        padding: 10px;
    }

    .faq-answer {
        font-size: 13px;
        padding: 10px;
    }

    .faq-answer h3 {
        font-size: 15px;
        margin-top: 12px;
    }

    .faq-answer img {
        margin-top: 8px;
    }

    .back-button {
        font-size: 12px;
        padding: 6px 12px;
    }
}

@media only screen and (max-width: 480px) {
    .faq-section {
        padding: 10px;
        margin: 0 20px;
        width: calc(100% - 40px);
    }

    .faq-header h1 {
        font-size: 24px;
    }

    .faq-header p {
        font-size: 12px;
    }

    .faq-category {
        font-size: 18px;
    }

    .faq-container {
        gap: 10px;
    }

    .faq-item {
        padding: 8px;
        max-width: 100%;
    }

    .faq-question {
        font-size: 14px;
        padding: 8px;
    }

    .faq-question::after {
        font-size: 12px;
    }

    .faq-answer {
        font-size: 12px;
        padding: 8px;
    }

    .faq-answer h3 {
        font-size: 14px;
        margin-top: 10px;
    }

    .faq-answer img {
        margin-top: 6px;
    }

    .back-button {
        font-size: 11px;
        padding: 5px 10px;
    }
}
}