/* forum-wrapper styles */
.forum-wrapper {
    width: 100%; /* Allow full width */
    max-width: 1300px; /* Limit to 1300px */
    margin: 0 auto; /* Center horizontally */
    padding: 0; /* Remove any unintended padding */
	box-sizing: border-box;
}

/* Wrapper for the entire layout */
.guidebook-wrapper {
    max-width: 1290px;
    width: 100%;
    min-height: 400px;
    display: flex; /* Horizontal alignment */
    gap: 20px; /* Space between guidebook and content section */
    box-sizing: border-box;

    /* Background properties */
  background-color: var(--color-background-opac);
  background-blend-mode: overlay;
  background-attachment: fixed;
  background-image: var(--accent-bg);
  color: var(--color-main);
  margin-bottom: 30px;
}

/* Guidebook Section */
.guidebook {
    flex: 1;
    max-width: 30%; /* Restrict width to 35% of container */
    background-color: var(--color-accent1);
    background-blend-mode: multiply;
    padding: 40px 40px;
    box-sizing: border-box;
        background-image: var(--accent-bg);
	background-attachment: fixed;
  background-image: var(--accent-bg);
    color: var(--color-main3);
}

@media (max-width: 1200px) { 
    .content-section, 
    .content-images-wrapper {
        display: none !important; /* Komplett ausblenden */
    }
	
    .guidebook {
        width: 100% !important; /* Volle Breite */
        max-width: 100% !important; /* Hebt die 30% max-width-Beschränkung auf */
        flex: none !important; /* Falls Flexbox es begrenzt */
    }
}



/* Title Styling */
.intro-title {
    font-family: var(--main-font2);
    font-size: 11px;
    color: var(--color-main);
    text-transform: uppercase;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.intro-title span {
    font-family: var(--deco-font);
    font-size: 60px;
    color: var(--color-accent1);
    text-transform: none;
    display: block;
}

.intro-title a {
    color: var(--color-accent1);
    text-decoration: none;
    transition: color 1s ease;
}

.intro-title a:hover {
    color: var(--color-main);
}

/* Guidebook Text */
.intro-text {
    font-family: var(--main-font2);
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 260%;
    text-transform: uppercase;
    text-align: justify;
    color: var(--color-main3);
	margin-bottom:30px;
	hyphens: auto;
    word-break: break-word
}

.intro-text b {
  
    color: var(--color-accent1);

}

.intro-text i {
  
    color: var(--color-accent1);

}

.intro-text2 {
    font-family: var(--main-font2);
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 260%;
    text-transform: uppercase;
    text-align: justify;
    color: var(--color-main);
	margin-bottom:30px;
	hyphens: auto;
    word-break: break-word
}

.intro-text2 b {
  
    color: var(--color-accent1);

}

.intro-text2 i {
  
    color: var(--color-accent1);

}

/* Button Container */
.intro-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.intro-button-container a {
    padding: 5px 10px;
    border: 1px solid var(--color-accent1);
    font-size: 9px;
    text-transform: uppercase;
    color: var(--color-main3);
    text-decoration: none;
    transition: 0.3s;
	 font-family: var(--main-font2);
}

.intro-button-container a:hover {
    color: var(--color-accent1);
    border-color: var(--color-main3);
}

/* Content Section (Right Side) */
.content-section {
    flex: 2; /* Allow more space for the content */
    display: grid; /* Use a grid for text and images */
    grid-template-columns: 1fr 1fr; /* Two columns: text and images */
    gap: 20px; /* Space between columns */
    align-items: start;
    box-sizing: border-box;
    padding: 20px;
}

/* Text Column */
.content-text {
    font-family: var(--main-font2);
    color: var(--color-main);
    font-size: 12px;
    line-height: 1.8;
	hyphens: auto;
    word-break: break-word
}

/* Wrapper: Centers everything */
.content-images-wrapper {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center align both headline and grid */
    gap: 20px; /* Add space between headline and pictures */
    width: 100%; /* Full width of the container */
    box-sizing: border-box;
}

/* Grid container for the images */
.content-images {
    display: grid; /* Use grid layout for images */
    grid-template-columns: repeat(2, 1fr); /* Two images per row */
    gap: 20px; /* Equal spacing between rows and columns */
    justify-content: center; /* Center the grid horizontally */
	padding-left:50px;
	  width: 80px; /* Image width */
    height: 80px; /* Image height */
	position:relative;
}

.content-images1 {
    position: relative; /* Neu hinzugefügt */
    width: 80px; /* Bildbreite */
    height: 80px; /* Bildhöhe */
    overflow:hidden;
	outline: 1px solid var(--color-opac-border); /* Thin border */
    outline-offset: 5px;
}

.content-images1 span {
    font-family: var(--display-font);
    color: var(--color-main3);
    font-size: 17px;
    position: absolute;
    bottom: -6px;
    right: -1px;
    z-index: 2;
   text-transform:uppercase;
}

.content-images1 img {
width: 100%;
    filter: grayscale(100%);
}

.content-images1:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0; /* Neu hinzugefügt für exakte Positionierung */
    width: 100%;
    height: 100%;
    background-color: var(--color-accent1);
    mix-blend-mode: multiply;
	z-index:1;
}


/* Images styling */
.content-images img {
    width: 80px; /* Image width */
    height: 80px; /* Image height */
    filter: grayscale(100%); /* Start in grayscale */
    transition: 
        transform 0.3s ease, 
        filter 0.3s ease, 
        outline-offset 0.3s ease, 
        background-color 0.3s ease;
}




.bam_date {
font-weight: 700;
  border: 1px solid var(--color-opac-border);
  line-height: 1;
  margin: 0px 10px 0 0;
  font-size: 7px;
  width: 40px;
  height: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-family: var(--main-font);
  text-align: center;
  float: left;
  
	}
	
	.bam_date day {
   display: block;
  font-family: var(--display-font);
  font-size: 15px;
  font-weight: lighter;
  margin-bottom: 3px;
  padding-bottom: 2px;
  padding-top: 1px;
  color: var(--color-accent1);
  text-align: center;
	
}	

/* Kategorien */
.category-header {
    position: relative;
    width: 100%;
    height: 250px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: var(--light);
}

.category-blurred-text {
position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 138px;
  font-weight: 600;
	text-transform:uppercase;
  color: rgba(255, 255, 255, 0.1);
  filter: blur(5px);
  z-index: 1;
  white-space: nowrap;
  pointer-events: none;
}

.category-mainname {
    position: relative;
    font-size: 80px;
    color: var(--light);
    z-index: 2;
	font-family: var(--deco-font);
}

.category-mainname span {
    color: var(--color-accent1);

}

.category-subtext {
    position: relative;
    font-size: 11px;
	text-transform:uppercase;
    color: var(--light);
    margin-top: -5px;
    z-index: 2;
	font-family: var(--display-font);
	letter-spacing:4px;
	font-weight:200;
}


/* Orga Forum */

/* Hauptbox: Organisation Area Forum */
.organisationarea_forum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Dynamische Spalten */
  gap: 20px; /* Abstand zwischen den Boxen */
  max-width: 1290px;
  width: 100%;
  margin: 0 auto; /* Zentriert das Grid */
  box-sizing: border-box;
  color: var(--color-main);
}

.organisationarea_forum > div {
  position: relative;
  background-color: var(--color-background-opac);
  background-blend-mode: overlay;
  background-attachment: fixed;
  background-image: var(--accent-bg);
  color: var(--color-main);
	min-height: 200px; /* Gleiche Mindesthöhe für alle Boxen */
}

/* Forum-Box: Behält das Layout für Schnur und Rahmen */
.orga-forum-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert die Box horizontal */
}



/* Schnur */
.rope {
  position: absolute;
  top: 0; /* Schnur beginnt oben */
  left: 50%; /* Schnur zentriert */
  width: 2px; /* Breite der Schnur */
  height: 50px; /* Gesamtlänge der Schnur */
  background-color: var(--color-secondary); /* Standardfarbe für die Schnur */
  transform: translateX(-50%);
}

/* Lastpost Icon */

.orga-lastpost_icon {
 position: relative;
  width: 50px;
  height: 50px;
  transform: rotate(45deg); /* Diamond shape */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  margin-top: 75px; /* Adjust spacing if needed */
  outline: 2px solid var(--color-secondary);
  outline-offset: 10px;
  overflow: hidden; /* Prevent image overflow */
  box-sizing: border-box; /* Include padding and borders in dimensions */
}


/* Image inside the icon */
.orga-lastpost_icon img {
  width: 85.0px;
  height: 69.6px !important;
  transition: opacity 0.3s ease, filter 0.3s ease; /* Smooth transitions */
  z-index: 1; /* Image underneath the overlay */
  filter: grayscale(100%) brightness(0.2); /* Dark grey by default */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  object-fit: cover;
  transform: rotate(-45deg);
}

.Post_on .orga-lastpost_icon:before {
content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 101%;
  height: 100%;
  background-color: var(--color-accent1);
  mix-blend-mode: multiply;
  z-index: 2;
  box-sizing: border-box;
  transform: scale(1.01);
} 


.Post_on .orga-lastpost_icon img {
  filter: grayscale(100%) brightness(0.6) contrast(1); /* Normale Bilddarstellung */
  mix-blend-mode: multiply;
  background-color: var(--color-accent1); /* Overlay mit der Akzentfarbe */
}

/* Dynamische Farben für Post_on */
.Post_on .orga-lastpost_icon img {
  filter: grayscale(100%) brightness(0.6) contrast(1); /* Normale Bilddarstellung */
  opacity: 1; /* Volle Sichtbarkeit */
}

/* Dynamische Rahmen- und Linienfarben */
.Post_on .orga-lastpost_icon {
  outline: 2px solid var(--color-accent1);
  outline-offset: 10px;
  width: 50px;
  height: 50px;
}

.Post_off .orga-lastpost_icon {
  outline: 2px solid var(--color-secondary);
  outline-offset: 10px;
}

/* Forum Title */
.orga-forum-title {
  margin-top: 50px; /* Space between the icon and title */
  font-size: 28px; /* Adjust size as needed */
  text-align: center; /* Center text horizontally */
  color: var(--color-main); /* Use your theme's text color */
  font-family: var(--display-font);
  text-transform:uppercase;
  letter-spacing:1px;
}

.orga-forum-title a {
	   color: var(--color-main); /* Use your theme's text color */
  	transition: color 0.3s ease;
	text-decoration: none;
}

.orga-forum-title a:hover {
   color: var(--color-accent1); /* Use your theme's text color */
	cursor: pointer;
	transition: 1s ease-in-out;
}



.orga-forum-description b {
  color: var(--color-accent1);
}

.orga-forum-description i {
  color: var(--color-accent1);
}

/* Lastpost Container */
.orga-forum-lastpost {
  margin-top: 20px; /* Space above the lastpost area */
  margin-bottom: 20px; /* Space above the lastpost area */
  text-align: center; /* Center align the text */
  font-size: 10px; /* Slightly smaller font for lastpost area */
  color: var(--color-main); /* Main text color */
  font-family: var(--main-font2);
}

.orga-forum-description {
  all: unset; /* Entfernt potenziell vererbte Stile */
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 260%;
  font-family: var(--main-font2);
  color: var(--color-main);
  text-align: justify;
  hyphens: auto;
  word-break: break-word;
  padding: 20px 30px;
  max-height: 75px;
  min-height:75px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
}

/* Chrome, Edge, and Safari scrollbar styling */
.orga-forum-description::-webkit-scrollbar {
  width: 6px; /* Set scrollbar width */
}

.orga-forum-description::-webkit-scrollbar-thumb {
  background-color: var(--color-accent1); /* Scrollbar thumb color */
  border-radius: 10px; /* Rounded scrollbar */
}

.orga-forum-description::-webkit-scrollbar-track {
  background: transparent; /* Track background */
}


.orga-forum-lastpost {
margin-top:5px;
margin-bottom:35px;
}

/* Thread Link (Upper Line) */
.orga-forum-lastpost .lastpost-thread a {
  font-size: 11px; /* Larger font for the thread link */
  color: var(--color-accent1); /* Accent color for the link */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Emphasize thread link */
  transition: color 0.3s ease; /* Smooth hover effect */
	  text-transform:uppercase;

}

.orga-forum-lastpost .lastpost-thread a:hover {
  color: var(--color-main); /* Change color on hover */
}

/* Details (Lower Line) */
.orga-forum-lastpost .lastpost-details {
  margin-top: 5px; /* Space between thread link and details */
  font-size: 9px; /* Smaller font for details */
  color: var(--color-main); /* Subdued color for details */
	  text-transform:uppercase;

}



/* Subforum Box */
.orga-subforum-box {
    width: 100%;
    background-color: var(--color-accent1);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-image: var(--accent-bg);
    padding: 15px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    box-sizing: border-box;
    justify-content: center;
	color: var(--color-main3);
}

/* Placeholder for Missing Subforum Box */
.orga-forum-box:not(:has(.orga-subforum-box)) {
  /* If the subforum box doesn't exist, reserve the space */
  grid-template-rows: 1fr 50px; /* Placeholder height for subforum area */
}

.orga-subforum-box {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px; /* Ensures same height */
}



/* Subforum Links */
.orga-subforum-box a {
  padding: 5px 10px;
    border: 1px solid var(--color-accent1);
    font-size: 8px;
    text-transform: uppercase;
    color: var(--color-main3);
    text-decoration: none;
    transition: 0.3s;
}

.orga-subforum-box a:hover {
    color: var(--color-accent1);
    border-color: var(--color-main3);
}

/* Hide the Subforum Box if Empty */
.orga-subforum-box:empty {
  display: none; /* Completely hide if no subforums exist */
}

/* Staff Forum */

/* Hauptbox: Staff Area Forum */
.staffarea_forum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Dynamische Spalten */
  gap: 20px; /* Abstand zwischen den Boxen */
  max-width: 1290px;
  width: 100%;
  margin: 0 auto; /* Zentriert das Grid */
  box-sizing: border-box;
  color: var(--color-main);
}

.staffarea_forum > div {
  position: relative;
  background-color: var(--color-background-opac);
  background-blend-mode: overlay;
  background-attachment: fixed;
  background-image: var(--accent-bg);
  color: var(--color-main);
  min-height: 200px; /* Gleiche Mindesthöhe für alle Boxen */
}

/* Forum-Box: Behält das Layout für Schnur und Rahmen */
.staff-forum-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert die Box horizontal */
}

/* Schnur */
.staff-rope {
  position: absolute;
  top: 0; /* Schnur beginnt oben */
  left: 50%; /* Schnur zentriert */
  width: 2px; /* Breite der Schnur */
  height: 50px; /* Gesamtlänge der Schnur */
  background-color: gray; /* Standardfarbe für die Schnur */
  transform: translateX(-50%);
}

/* Lastpost Icon */
.staff-lastpost_icon {
  position: relative;
  width: 50px;
  height: 50px;
  transform: rotate(45deg); /* Diamond shape */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  margin-top: 75px; /* Adjust spacing if needed */
  outline: 2px solid var(--color-secondary);
  outline-offset: 10px;
  overflow: hidden; /* Prevent image overflow */
  box-sizing: border-box; /* Include padding and borders in dimensions */
}

/* Image inside the icon */
.staff-lastpost_icon img {
  width: 75px;
  height: 75px!important;
  object-fit: cover;
  transition: opacity 0.3s ease, filter 0.3s ease; /* Smooth transitions */
  z-index: 1; /* Image underneath the overlay */
  filter: grayscale(100%) brightness(0.2); /* Dark grey by default */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  object-fit: cover;
  transform: rotate(-45deg);
}

/* Overlay for Post_on (with :before) */
.Post_on .staff-lastpost_icon:before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--color-accent1);
  mix-blend-mode: multiply;
  z-index: 2;
  box-sizing: border-box;
  transform: scale(1.01);
}


/* Dynamische Farben für Post_on */
.Post_on .staff-rope {
  background-color: var(--color-accent1); /* Schnur grün bei neuen Beiträgen */
}

.Post_off .staff-rope {
  background-color: var(--color-secondary); /* Schnur grau bei keinen neuen Beiträgen */
}

.Post_on .staff-lastpost_icon img {
  filter: grayscale(100%) brightness(0.6) contrast(1); /* Normale Bilddarstellung */
  mix-blend-mode: multiply;
  background-color: var(--color-accent1); /* Overlay mit der Akzentfarbe */
}

.Post_on .staff-lastpost_icon img {
  filter: grayscale(100%) brightness(0.6) contrast(1); /* Normale Bilddarstellung */
  opacity: 1; /* Volle Sichtbarkeit */
}

.Post_on .staff-lastpost_icon {
  outline: 2px solid var(--color-accent1);
  outline-offset: 10px;
  width: 50px;
  height: 50px;
}

.Post_off .staff-lastpost_icon {
  outline: 2px solid var(--color-secondary);
  outline-offset: 10px;
}

/* Forum Title */
.staff-forum-title {
  margin-top: 50px; /* Space between the icon and title */
  font-size: 28px; /* Adjust size as needed */
  text-align: center; /* Center text horizontally */
  color: var(--color-main); /* Use your theme's text color */
  font-family: var(--display-font);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.staff-forum-title a {
  color: var(--color-main); /* Use your theme's text color */
  transition: color 0.3s ease;
  text-decoration: none;
}

.staff-forum-title a:hover {
  color: var(--color-accent1); /* Use your theme's text color */
  cursor: pointer;
  transition: 1s ease-in-out;
}

/* Forum Description - Unsichtbare Scrollbar */
.staff-forum-description {
  position: relative;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 260%;
  font-family: var(--main-font2);
  color: var(--color-main);
  text-align: justify;
  hyphens: auto;
  word-break: break-word;
  max-height: 90px; /* Beschränke die Höhe */
  overflow-y: scroll; /* Scrollbar aktiv, aber versteckt */
    padding: 20px 30px;
  box-sizing: border-box;
  scrollbar-width: none; /* Firefox: Keine sichtbare Scrollbar */
}

/* Chrome, Edge, Safari: Scrollbar ausblenden */
.staff-forum-description::-webkit-scrollbar {
  display: none;
}

/* Forum Description - Unsichtbare Scrollbar */
.staff-forum-description b {
 color: var(-color-accent);
}

.staff-forum-description i {
 color: var(-color-accent);
}

/* Lastpost Container */
.staff-forum-lastpost {
  margin-top: 25px; /* Abstand nach oben */
  margin-bottom: 25px; /* Abstand nach unten */
  text-align: center; /* Zentriere den Text */
  font-size: 10px; /* Kleinere Schriftgröße */
  color: var(--color-main); /* Haupttextfarbe */
  font-family: var(--main-font2);
}

/* Thread Link (obere Zeile) */
.staff-forum-lastpost .lastpost-thread a {
  font-size: 11px; /* Größere Schriftgröße für den Thread-Link */
  color: var(--color-accent1); /* Akzentfarbe */
  text-decoration: none; /* Entferne Unterstrich */
  font-weight: bold; /* Hebe den Link hervor */
  transition: color 0.3s ease; /* Sanfter Hover-Effekt */
  text-transform: uppercase;
}

.staff-forum-lastpost .lastpost-thread a:hover {
  color: var(--color-main); /* Hover-Effekt */
}

/* Details (untere Zeile) */
.staff-forum-lastpost .lastpost-details {
  margin-top: 5px; /* Abstand zwischen Thread-Link und Details */
  font-size: 9px; /* Kleinere Schriftgröße für Details */
  color: var(--color-main); /* Gedämpfte Farbe */
  text-transform: uppercase;
}

/* Subforum Box */
.staff-subforum-box {
  width: 100%;
  background-color: var(--color-accent1);
  background-blend-mode: multiply;
  background-attachment: fixed;
  background-image: var(--accent-bg);
  padding: 15px 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  box-sizing: border-box;
  justify-content: center;
	color: var(--color-main3);
}

.staff-subforum-box a {
  padding: 5px 10px;
  border: 1px solid var(--color-accent1);
  font-size: 8px;
  text-transform: uppercase;
  color: var(--color-main3);
  text-decoration: none;
  transition: 0.3s;
}

.staff-subforum-box a:hover {
  color: var(--color-accent1);
  border-color: var(--color-main3);
}


/* Wanted Forum */

/* Hauptbox: Wanted Area Forum */
.wantedarea_forum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Dynamische Spalten */
  gap: 20px; /* Abstand zwischen den Boxen */
  max-width: 1290px;
  width: 100%;
  margin: 0 auto; /* Zentriert das Grid */
  box-sizing: border-box;
  color: var(--color-main);
}

.wantedarea_forum > div {
  position: relative;
  background-color: var(--color-background-opac);
  background-blend-mode: overlay;
  background-attachment: fixed;
  background-image: var(--accent-bg);
  color: var(--color-main);
  min-height: 200px; /* Gleiche Mindesthöhe für alle Boxen */
}

/* Forum-Box: Behält das Layout für Schnur und Rahmen */
.wanted-forum-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert die Box horizontal */
}

/* Schnur */
.rope {
  position: absolute;
  top: 0; /* Schnur beginnt oben */
  left: 50%; /* Schnur zentriert */
  width: 2px; /* Breite der Schnur */
  height: 50px; /* Gesamtlänge der Schnur */
  background-color: var(--color-secondary); /* Standardfarbe für die Schnur */
  transform: translateX(-50%);
}

/* Lastpost Icon */
.wanted-lastpost_icon {
  position: relative;
  width: 50px;
  height: 50px;
  transform: rotate(45deg); /* Diamond shape */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  margin-top: 75px; /* Adjust spacing if needed */
  outline: 2px solid var(--color-secondary);
  outline-offset: 10px;
  overflow: hidden; /* Prevent image overflow */
  box-sizing: border-box; /* Include padding and borders in dimensions */
}

/* Image inside the icon */
.wanted-lastpost_icon img {
 width: 70.4px;
  height: 70.6px !important;
  transition: opacity 0.3s ease, filter 0.3s ease; /* Smooth transitions */
  z-index: 1; /* Image underneath the overlay */
  filter: grayscale(100%) brightness(0.2); /* Dark grey by default */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  object-fit: cover;
  transform: rotate(-45deg);
}

/* Overlay for Post_on (with :before) */
.Post_on .wanted-lastpost_icon:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 750.6%;
  height: 170.8%;
  background-color: var(--color-accent1);
  mix-blend-mode: multiply;
  z-index: 2;
  box-sizing: border-box;
  transform: scale(1.01);
}

/* Dynamische Farben für Post_on */
.Post_on .rope {
  background-color: var(--color-accent1); /* Schnur grün bei neuen Beiträgen */
}

.Post_off .rope {
  background-color: var(--color-secondary); /* Schnur grau bei keinen neuen Beiträgen */
}

.Post_on .wanted-lastpost_icon img {
  filter: grayscale(100%) brightness(0.6) contrast(1); /* Normale Bilddarstellung */
  mix-blend-mode: multiply;
  background-color: var(--color-accent1); /* Overlay mit der Akzentfarbe */
}

/* Dynamische Farben für Post_on */
.Post_on .wanted-lastpost_icon img {
  filter: grayscale(100%) brightness(0.6) contrast(1); /* Normale Bilddarstellung */
  opacity: 1; /* Volle Sichtbarkeit */
}

/* Dynamische Rahmen- und Linienfarben */
.Post_on .wanted-lastpost_icon {
  outline: 2px solid var(--color-accent1);
  outline-offset: 10px;
  width: 50px;
  height: 50px;
}

.Post_off .wanted-lastpost_icon {
  outline: 2px solid var(--color-secondary);
  outline-offset: 10px;
}

/* Forum Title */
.wanted-forum-title {
  margin-top: 50px; /* Space between the icon and title */
  font-size: 28px; /* Adjust size as needed */
  text-align: center; /* Center text horizontally */
  color: var(--color-main); /* Use your theme's text color */
  font-family: var(--display-font);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.wanted-forum-title a {
  color: var(--color-main); /* Use your theme's text color */
  transition: color 0.3s ease;
  text-decoration: none;
}

.wanted-forum-title a:hover {
  color: var(--color-accent1); /* Use your theme's text color */
  cursor: pointer;
  transition: 1s ease-in-out;
}

.wanted-forum-description b {
  color: var(--color-accent1);
}

.wanted-forum-description i {
  color: var(--color-accent1);
}

/* Lastpost Container */
.wanted-forum-lastpost {
  margin-top: 20px; /* Space above the lastpost area */
  margin-bottom: 20px; /* Space above the lastpost area */
  text-align: center; /* Center align the text */
  font-size: 10px; /* Slightly smaller font for lastpost area */
  color: var(--color-main); /* Main text color */
  font-family: var(--main-font2);
}

.wanted-forum-description {
  all: unset; /* Entfernt potenziell vererbte Stile */
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 260%;
  font-family: var(--main-font2);
  color: var(--color-main);
  text-align: justify;
  hyphens: auto;
  word-break: break-word;
  padding: 20px 30px;
  max-height: 75px;
  min-height: 75px;
  overflow-y: scroll; /* Ermöglicht Scrollen */
  scrollbar-width: none; /* Versteckt den Scrollbalken in Firefox */
}

/* Für Chrome, Edge und Safari: Scrollbalken ausblenden */
.wanted-forum-description::-webkit-scrollbar {
  display: none;
}

.wanted-forum-lastpost {
  margin-top: 25px;
  margin-bottom: 35px;
}

/* Thread Link (Upper Line) */
.wanted-forum-lastpost .lastpost-thread a {
  font-size: 11px; /* Larger font for the thread link */
  color: var(--color-accent1); /* Accent color for the link */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Emphasize thread link */
  transition: color 0.3s ease; /* Smooth hover effect */
  text-transform: uppercase;
}

.wanted-forum-lastpost .lastpost-thread a:hover {
  color: var(--color-main); /* Change color on hover */
}

/* Details (Lower Line) */
.wanted-forum-lastpost .lastpost-details {
  margin-top: 5px; /* Space between thread link and details */
  font-size: 9px; /* Smaller font for details */
  color: var(--color-main); /* Subdued color for details */
  text-transform: uppercase;
}

.wanted-subforum-box {
    min-height: 50px; /* Ensures a placeholder space */
    width: 100%;
    background-color: var(--color-accent1);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-image: var(--accent-bg);
    padding: 15px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    box-sizing: border-box;
    justify-content: center;
	color: var(--color-main3);
}

.wanted-subforum-box {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px; /* Ensures same height */
}

/* If Empty: Keep the Space, But Make It Invisible */
.wanted-subforum-box:empty {
    visibility: hidden; /* Instead of display: none */
}

/* Placeholder for Missing Subforum Box */
.wanted-forum-box:not(:has(.wanted-subforum-box)) {
  /* If the subforum box doesn't exist, reserve the space */
  grid-template-rows: 1fr 50px; /* Placeholder height for subforum area */
}

/* Subforum Links */
.wanted-subforum-box a {
  padding: 5px 10px;
  border: 1px solid var(--color-accent1);
  font-size: 8px;
  text-transform: uppercase;
  color: var(--color-main3);
  text-decoration: none;
  transition: 0.3s;
}

.wanted-subforum-box a:hover {
  color: var(--color-accent1);
  border-color: var(--color-main3);
}




/* Container for the entire wanted section */
.wanted-box-outside {
  max-width: 1290px;
  width: 100%;
  min-height: 600px;
  box-sizing: border-box;
  background-color: var(--color-background-opac);
  background-blend-mode: overlay;
  background-attachment: fixed;
  background-image: var(--accent-bg);
  color: var(--color-main);
  margin-bottom: 30px;
  display: flex;
  flex-direction: column; /* Stack children vertically */
  justify-content: space-between; /* Push the big box to the bottom */
}

@media (max-width: 1200px) { 
   .wanted-box-outside {
        display: none !important; /* Komplett ausblenden */
    }
}

/* Row with dynamic content */
.wanted-box-row {
  display: flex;
  gap: 20px; /* Space between items in the row */
  flex: 1; /* Allow it to expand to fill available space */
}

/* Main container for dynamic content */
.wanted-container {
  max-width: 1290px; /* Limit max width */
  width: 100%; /* Full width inside the container */
  margin: 0 auto; /* Center the container */
}

/* Large box at the bottom */
.wanted-big-box {
  width: 100%; /* Full width */
  height: 350px; /* Adjust height based on content */
  min-height: 100px; /* Minimum height */
  color: var(--color-main); /* Text color */
  display: flex; /* Flexbox for side-by-side layout */
  gap: 20px; /* Space between left and right boxes */
  padding: 20px; /* Inner padding */
  box-sizing: border-box; /* Include padding in size calculation */
  background-color: var(--color-accent1);
  background-blend-mode: multiply;
  box-sizing: border-box;
        background-image: var(--accent-bg);
	background-attachment: fixed;
  color: var(--color-main3);	
}

.wanted-big-left {
    flex: 1;
    max-width: 100%; /* Beschränkt die Breite */
    padding: 5px 40px;
    box-sizing: border-box; /* Bezieht Padding in die Breite ein */
   
  
}

.wanted-big-right {
   flex: 1;
    max-width: 100%; /* Beschränkt die Breite */
    padding: 5px 40px;
    box-sizing: border-box; /* Bezieht Padding in die Breite ein */


}

.wanted-heading h2 {
font-family: var(--main-font2);
  font-size: 11px;
  color: var(--color-main3);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 2px;
  margin-bottom: 40px;
}

.wanted-heading h2 span {
   font-family: var(--deco-font);
  font-size: 60px;
  color: var(--color-accent1);
  text-transform: none;
  display: block;
}


.wanted-text {
font-family: var(--main-font2);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 260%;
  text-transform: uppercase;
  text-align: justify;
  color: var(--color-main3);
  margin-bottom: 30px;
  hyphens: auto;
  word-break: break-word;	
	
}

.wanted-text b {

  color: var(--color-main3);
font-weight:800;
	
}

.wanted-text i {

  color: var(--color-main3);

	
}

.wanted-link {
    text-align: right; /* Rechtsbündig */
    margin-top: 20px; /* Abstand zum Text */
}

.wanted-link a {
    padding: 5px 10px;
  border: 1px solid var(--color-accent1);
    font-size: 9px;
  text-transform: uppercase;
  color: var(--color-main3);
  text-decoration: none;
  transition: 0.3s;
	 font-family: var(--main-font2);
}

.wanted-link a:hover {
color: var(--color-accent1);
  border-color: var(--color-main3);
}


.lastusers-box {
    display: grid; /* Grid-Layout aktivieren */
    grid-template-columns: 1fr 1fr; /* 2 Spalten mit gleicher Breite */
    grid-template-rows: auto auto auto; /* 3 Zeilen mit automatischer Höhe */
    column-gap: 15px; /* Horizontal gap between the two columns */
    row-gap: 5px; /* Vertical gap within each column */
    width: 100%; /* Fülle die Breite des Containers aus */
    margin: 0 auto; /* Zentriere die Box horizontal */
}

.lastusers-row {
    display: flex; /* Flexbox für Icon und Text */
    align-items: center; /* Vertikale Zentrierung von Icon und Text */
    padding: 10px 15px; /* Innenabstand */
    color: var(--color-accent1); /* Textfarbe */
    box-sizing: border-box; /* Padding in die Breite einrechnen */
}

.lastusers-row:not(:nth-child(5)):not(:nth-child(6)) {
  border-bottom: 1px solid var(--color-secondary);
}




.lastusers-icon {
    margin-right: 10px; /* Abstand zwischen Icon und Text */
      color: var(--color-main);
    font-size: 18px; /* Icon-Größe */
	font-family: var(--icon-font);

}

.lastusers-icon i {

      color: var(--color-main3);

}

.lastusers-info {
    display: flex;
    flex-direction: column; /* Text untereinander anordnen */

}

.lastusers-name a {
    font-family: var(--main-font2);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent1);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 1s ease;
}

.lastusers-name a:hover {
  color: var(--color-main);
  text-decoration: none;
  transition: 1s ease;
}


.lastusers-regdate {
  margin-bottom: 9px;
  font-family: var(--main-font2);
  font-size: 10px;
  font-weight: 400;
     color: var(--color-main3);
  text-transform: uppercase;
}


/* Wrapper for the grid */
.random-wanted-wrapper {
    display: grid; /* Enable grid layout */
    grid-template-columns: repeat(3, 1fr); /* 3 columns for the boxes */
    gap: 20px; /* Space between boxes */
    margin-top: 10px;
    padding: 20px;
    justify-content: center; /* Center align the grid */
}

/* Box styling */
.random-wanted {
    background-color: var(--color-overlay-light);
    color: var(--color-main); /* Highlighted name color */
    display: flex;
    flex-direction: column; /* Stack header and content */
    gap: 15px;
    align-items: center; /* Center align content */
    justify-content: space-between; /* Space out content vertically */
    transition: background-color 0.3s ease; /* Smooth hover transition */
    padding: 0px 0px 35px 2px;
}



/* Header Section */
.random-header {
    display: flex;
    flex-direction: column; /* Stack the title and subtitle */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    text-align: center; /* Center the text itself */
    margin-bottom: 10px; /* Space below the header */
}

.name-container {
    font-size: 45px;
    color: var(--color-main); /* Highlighted name color */
	font-family: var(--deco-font);
}

.wanted-last-name {
 color:var(--color-accent1);	
}

.random-subtitle {
    font-size: 8px;
    text-transform:uppercase;
	font-family: var(--main-font2);
	color: var(--color-main);
	margin-top:-10px;
}

/* Layout der Box */
.random-content {
    display: flex;
    align-items: flex-start; /* Align content to the top */
    gap: 50px;
	font-family: var(--main-font2);
}

/* Rope */
.random-rope {
    top: 0;
  left: 1%;
    transform: translateX(-50%);
    width: 2px; /* Rope width */
    height: 50px; /* Fixed height to stop at the diamond */
    background-color: var(--color-accent1); /* Rope color */
    z-index: 1; /* Behind the diamond */
	position:relative;
}

/* Diamond Image Container */
.random-image {
    position: relative; /* Position the diamond relative to its wrapper */
    transform: rotate(45deg); /* Maintain diamond shape */
    width: 50px; /* Diamond size */
    height: 50px; /* Diamond size */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    outline: 2px solid var(--color-accent1); /* Diamond border */
    outline-offset: 10px;
    box-sizing: border-box;
    overflow: hidden; /* Prevent overflow */
    z-index: 2; /* Above the rope */
	top:25px;
}

/* Image inside the diamond */
.random-image img {
    width: 70px; /* Larger than container for rotation */
    height: 70px; /* Larger than container for rotation */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    object-fit: cover;
    transform: rotate(-45deg); /* Correct rotation for image */
    filter: grayscale(100%) brightness(0.2); /* Add grayscale and dimming */
}

/* Wrapper for rope and image */
.random-image-wrapper {
    position: relative; /* Establish positioning context */
    display: flex;
    flex-direction: column; /* Stack rope and diamond */
    justify-content: center; /* Center vertically */
	align-items: center;
}


/* Link Icon Overlay */
.random-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px; /* Adjust icon size */
    color: var(--color-accent1); /* Default icon color */
    z-index: 3;
    pointer-events: none;
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover Effect */
.random-image:hover .random-icon {
    color: var(--color-main); /* Change to main color on hover */
}

/* Info-Bereich */
.random-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Header-Bereich */
.random-header {
    text-align: left; /* Linksbündig */
}

.random-header .name-container {
    font-size: 35px;
    color: var(--color-main);
    font-family: var(--deco-font);
	padding-top:10px;
}

.random-header .random-subtitle {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--color-muted);
	font-weight:700;
	letter-spacing:0.1em;
}

/* Details mit Icons */
.info-pair {
    display: flex;
    align-items: center; /* Align icon and text vertically */
    gap: 10px; /* Spacing between icon and text */
    font-size: 12px;
    color: var(--color-main);
}

/* Icon Styling */
.info-pair i {
    font-size: 14px;
    color: var(--color-accent1); /* Icon color */
    width: 20px; /* Fixed width for consistent alignment */
    text-align: center; /* Center icon within its space */
}

/* Text Value Styling */
.detail-value {
    font-size: 10px;
    color: var(--color-main);
    text-align: left;
    text-transform: uppercase;
    font-weight: 600;
    flex: 1; /* Ensure the text takes the remaining space */
}

/* Plot und IPT */
.index-box-special {
    margin-bottom: 30px;
    background-color: var(--color-background-opac);
  background-blend-mode: overlay;
  background-attachment: fixed;
  background-image: var(--accent-bg);
    box-sizing: border-box;
    padding: 30px;
    position: relative;
}

@media (max-width: 1200px) {
    .index-box-special,
	.index_box-threegrid {
        display: none !important;
    }
}





.index-box-special .plottext {
    font-size: 11px;
    line-height: 1.5em;
    text-align: justify;
    margin-bottom: var(--base-gap);
}

.index-box-special .plottext b,
.index-box-special .plottext i {
    color: var(--primary);
}

.index-box-special .index-calendar {
    grid-column: span 2;
    font-family: var(--main-font2);
}

.index_box-threegrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--base-gap);
}

.index-calendar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--base-gap);
    position: relative;
    z-index: 10;
}

.index-calendar .arrow-button {
  grid-column: span 2;
  font-family: var(--main-font2);
  cursor: pointer;
    transition: 1s ease;
    text-decoration: none;
	color:var(--light);
	text-decoration:none
}

.index-calendar .arrow-button:hover {
    color: var(--color-accent1);
    cursor: pointer;
    transition: 1s ease-in-out;
	text-decoration:none
}


.plotbox {
    font-family: var(--main-font2);
    text-align: justify;
    font-size: 11px;
    color: var(--color-main);
    line-height: 225%;
    font-weight: normal;
    letter-spacing: 1px;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Abstand zwischen den Boxen */
}

.plot {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 89px;
    /* Einheitliche Höhe für alle Plots */
    padding: 15px;
  background-color: var(--color-overlay-light);
    color: var(--color-main);
    box-sizing: border-box;
	position:relative;
}



.plot a {
    color: var(--color-accent1);
    cursor: pointer;
    transition: 1s ease;
    transition: 1s ease-in-out;
    text-decoration: none;

}

.plot a:hover {
    color: var(--color-main);
    cursor: pointer;
    transition: 1s ease;
    text-decoration: none;


}

.plot-title {
    font-size: 14px;
    font-weight: bold;
   color: var(--color-main);
    margin: 0 0 10px;
    text-transform: uppercase;
}

.arrow-button {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1em;
    color: var(--primary);
    cursor: pointer;
    transition: color 0.3s ease;
}

.arrow-button.align-right {
  justify-content: flex-end;
}

.arrow-button:before {
    content: "➔";
    color: var(--color-main);
    display: block;
    margin-right: 0.3em;
}

/* Inplayforen */

/* Container */
.inplay-container {
    display: flex;
    align-items: stretch; /* Ensures columns are the same height */
    justify-content: space-between;
    position: relative;
    width: 100%;
    height: 300px; /* Keep the fixed height as per your current CSS */
    background-color: var(--color-background-opac);
    background-blend-mode: overlay;
    background-attachment: fixed;
    background-image: var(--accent-bg);
    box-sizing: border-box;
	margin-bottom:30px;
}

.inplay-container.inplay-plots-events {
    margin-bottom: 0;
}

/* Left Column - 60% */
.inplay-left {
    flex: 0 0 60%; /* Take 60% of the container */
    padding: 40px;
    background-color: var(--color-main-muted); /* Replace with desired background */
    color: var(--color-main);
    font-family: var(--main-font2);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Right Column - 30% */
.inplay-right {
    flex: 0 0 40%; /* Take 30% of the container */
    padding: 40px;
    background-color: var(--color-accent-muted); /* Replace with desired background */
    color: var(--color-main);
    font-family: var(--main-font2);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Schnur */
.inplay-rope {
  position: absolute;
  top: 0; /* Schnur beginnt oben */
  left: 60%; /* Schnur zentriert */
  width: 2px; /* Breite der Schnur */
  height: 100px; /* Gesamtlänge der Schnur */
  background-color: var(--color-secondary); /* Standardfarbe für die Schnur */
  transform: translateX(-50%);
}

/* Dynamische Farben für Post_on und Post_off */
.Post_on .inplay-rope {
  background-color: var(--color-accent1); /* Schnur grün bei neuen Beiträgen */
}

.Post_off .inplay-rope {
  background-color: var(--color-secondary); /* Schnur grau bei keinen neuen Beiträgen */
}

/* Lastpost Icon */
.inplay-lastpost-icon {
position: absolute; /* Absolute positioning to place it correctly */
  top: 148px;
  left: 60%;
  transform: translate(-50%, -50%) rotate(45deg); /* Diamond shape */
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  outline: 1px solid var(--color-secondary); /* Default secondary color */
  outline-offset: 8px; /* Adjusted for better spacing */
  overflow: hidden; /* Prevents image overflow */
  box-sizing: border-box; /* Includes padding and border in measurements */
  z-index: 3; /* Ensures it appears on top */
}

/* Bild im Icon */
.inplay-lastpost-icon img {
width: 70px;
  height: 70px !important;
  transition: opacity 0.3s ease, filter 0.3s ease; /* Smooth transitions */
  z-index: 1; /* Image underneath the overlay */
  filter: grayscale(100%) brightness(0.2); /* Dark grey by default */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* Diamond shape */
  object-fit: cover; /* Ensure the image scales correctly */
  transform: rotate(-45deg); /* Fix the inner rotation to align with the diamond */
}

/* Overlay für Post_on (mit :before) */
.Post_on .inplay-lastpost-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 110%; /* Ganz leicht größer machen, falls nötig */
  height: 110%;
  background-color: var(--color-accent1);
  mix-blend-mode: multiply; /* Wieder hinzugefügt */
  z-index: 2;
  box-sizing: border-box;
}


/* Dynamische Farben für das Icon */
.Post_on .inplay-lastpost-icon img {
  filter: grayscale(100%) brightness(0.6) contrast(1); /* Bild in voller Helligkeit */
  opacity: 1; /* Vollständig sichtbar */
}

.Post_on .inplay-lastpost-icon {
  outline: 2px solid var(--color-accent1); /* Akzentfarbe */
}

.Post_off .inplay-lastpost-icon {
  outline: 2px solid var(--color-secondary); /* Sekundärfarbe */
}



/* Headline and Subheading */
.inplay-title {
 font-family: var(--display-font);
 font-size: 40px;
  text-transform: uppercase;
  font-weight:800;
}

.inplay-title a {
  color: var(--color-accent1); /* Use your theme's text color */
  transition: color 0.3s ease;
  text-decoration: none;
}

.inplay-title a:hover {
  color: var(--color-main); /* Use your theme's text color */
  cursor: pointer;
  transition: 1s ease-in-out;
}

.inplay-description {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 260%;
  font-family: var(--main-font2);
  color: var(--color-main);
  text-align: justify;
  hyphens: auto;
  word-break: break-word;
  max-height: 120px;
  min-height: 80px;
  overflow-y: scroll;
  scrollbar-width: none;
  max-width:650px;
}

/* Links Section */
.inplay-links a {
    font-family: 'Arial', sans-serif;
    font-size: 1rem;
    text-decoration: underline;
    color: #007acc; /* Accent color for links */
    margin-right: 15px;
}

.inplay-links a:hover {
    text-decoration: none;
    color: #005a99; /* Darker color on hover */
}

.footer-links li::marker{
    content: none;
}

/* Right Column Text */
.inplay-info {
   position: relative;
  margin-bottom: 20px;
  text-align: right;
  font-family: var(--main-font2);
}

.inplay-last-post-title {
    font-family: var(--display-font);
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: 0.4s;
    cursor: pointer;
    display: flex; /* Flexbox for layout */
    align-items: center; /* Center content vertically */
    justify-content: flex-end; /* Align items to the right */
    gap: 15px; /* Space between the icon and the text */
}

.inplay-last-post-title a {
    color: var(--color-main3);
    text-decoration: none;
    transition: color 0.4s ease;
    border-bottom: 1px solid var(--color-accent1);
    padding-bottom: 15px;
}

.inplay-last-post-title a:hover {
    color: var(--color-accent1);
    border-bottom: 1px solid var(--color-main3);
}

.inplay-last-post-title i {
    color: var(--color-accent1); /* Icon color */
    font-size: 30px; /* Adjust the icon size */
    transition: color 0.4s ease;
}

.inplay-last-post-author {
	font-family: var(--main-font2);
	color: var(--color-main3);
	text-transform:uppercase;
	font-size:11px;
	margin-top:20px;
	
}

.inplay-last-post-author a:hover {
   color: var(--main-color3)!important;
	transition: color 0.4s ease;
 
	
}

.inplay-last-post-date {
	font-family: var(--main-font2);
	color: var(--color-main3);
	text-transform:uppercase;
	font-size:11px;
	margin-top:5px;
}

.inplay-subforen {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  box-sizing: border-box;
  justify-content: right;
  margin-top:30px;
}

/* Subforum Links */
.inplay-subforen a {
  padding: 5px 10px;
  border: solid 1px var(--color-main3);
  font-size: 8px;
  text-transform: uppercase;
  color: var(--color-main3);
  text-decoration: none;
  transition: 0.3s;
}

.inplay-subforen a:hover {
  color: var(--color-main3);
  border: solid 1px var(--color-accent1);
}

.inplay-post-threads {
	text-align: left;
  font-family: var(--display-font);
  color: var(--color-main);
  letter-spacing: 2px;
  font-weight: 600;
  font-size: 9px;
  text-transform: uppercase;
  position: relative;
  margin-top:30px;
}

.inplay-post-threads:before {
content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--color-accent1);
  margin-right: 5px;
  position: relative;
  bottom: 2px;
}



/* General Styling for inplay-right */
.inplay-right {
    background-attachment: fixed;
    background-color: var(--color-accent1);
    background-blend-mode: multiply;
	color: var(--color-main3);
}

/* North America */
.inplay-north-america .inplay-right {
    background-image: var(--bg-north-america);
    background-position: 69% 100%;
}

/* Europe */
.inplay-europe .inplay-right {
    background-image: var(--bg-europe);
    background-position: 69% 100%;
}

/* Asia */
.inplay-asia .inplay-right {
    background-image: var(--bg-asia);
    background-position: 69% -26%;
}

/* Other Worlds */
.inplay-other-worlds .inplay-right {
    background-image: var(--bg-other-worlds);
    background-position: 69% 100%;
}

/* Communications */
.inplay-communications .inplay-right {
    background-image: var(--bg-communications);
    background-position: 69% 100%;
}

/* Alternative Universe */
.inplay-alternative-universe .inplay-right {
    background-image: var(--bg-alternative-universe);
    background-position: 69% 100%;
}

/* Plots & Events */
.inplay-plots-events .inplay-right {
    background-image: var(--bg-plots-events);
    background-position: 69% 100%;
}

/* Responsive Adjustments */
@media screen and (max-width: 1759px) {
    /* Default changes for ALL .inplay-right elements */
    .inplay-right {
        background-size: cover; /* Cover the container fully */
        background-attachment: scroll; /* Disable fixed attachment */
    }

    /* Override background-position ONLY for .inplay-asia .inplay-right */
    .inplay-asia .inplay-right {
        background-position: unset !important; /* Removes custom positioning */
    }
}




/* Forumlist Foren */

/* Container */
.forumlist-forum-container{
    display: flex;
    align-items: stretch; /* Beide Spalten sollen die gleiche Höhe haben */
    justify-content: space-between; /* Linke und rechte Spalte trennen */
    position: relative;
    width: 100%;
    height: 175px; /* Containerhöhe */
    background-color: var(--color-background-opac);
    background-blend-mode: overlay;
    background-attachment: fixed;
    background-image: var(--accent-bg);
    box-sizing: border-box;
    margin-bottom: 15px;
	overflow:hidden;
}

/* Linke Spalte */
.forumlist-left {
    flex: 0 0 60%; /* Nimmt 60% der Breite ein */
    height: 100%; /* Volle Höhe des Containers */
    padding: 20px; /* Innenabstand */
   background-color: var(--color-background-opac);
  background-blend-mode: overlay;
  background-attachment: fixed;
  background-image: var(--accent-bg);
    color: var(--color-main);
    font-family: var(--main-font2);
    display: flex;
    flex-direction: column; /* Inhalte vertikal anordnen */
    box-sizing: border-box;
}

/* Rechte Spalte */
.forumlist-right {
    flex: 0 0 40%; /* Nimmt 40% der Breite ein */
    height: 100%; /* Volle Höhe des Containers */
    padding: 20px; /* Innenabstand */
    background-image: var(--accent-bg);
     background-blend-mode: overlay;
    background-attachment: fixed;
    background-image: var(--accent-bg);
    background-color: var(--color-accent1); /* Fallback-Hintergrundfarbe */
    background-blend-mode: multiply; /* Bild mit Hintergrundfarbe kombinieren */
    color: var(--color-main3);
    font-family: var(--main-font2);
    display: flex;
    flex-direction: column; /* Inhalte vertikal anordnen */
    box-sizing: border-box;
}


/* Schnur */
.forumlist-rope {
  position: absolute;
  top: 0; /* Schnur beginnt oben */
  left: 60%; /* Schnur zentriert */
  width: 2px; /* Breite der Schnur */
  height: 55px; /* Gesamtlänge der Schnur */
  background-color: var(--color-secondary); /* Standardfarbe für die Schnur */
  transform: translateX(-50%);
}

/* Dynamische Farben für Post_on und Post_off */
.Post_on .forumlist-rope {
  background-color: var(--color-accent1); /* Schnur grün bei neuen Beiträgen */
}

.Post_off .forumlist-rope {
  background-color: var(--color-secondary); /* Schnur grau bei keinen neuen Beiträgen */
}

/* Lastpost Icon */
.forumlist-lastpost-icon {
  position: absolute; 
  top: 104px;
  left: 60%;
  transform: translate(-50%, -50%) rotate(45deg); /* Diamond shape */
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  outline: 1px solid var(--color-secondary);
  outline-offset: 8px;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 3;
}

/* Bild im Icon */
.forumlist-lastpost-icon img {
 width: 95.2px;
  height: 69.8px !important;
  transition: opacity 0.3s ease, filter 0.3s ease;
  z-index: 1;
  filter: grayscale(100%) brightness(0.2);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  object-fit: cover;
  transform: rotate(-45deg);
}

/* Overlay für Post_on (mit :before) */
.Post_on .forumlist-lastpost-icon:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 101%;
  height: 101%;
  background-color: var(--color-accent1);
  mix-blend-mode: multiply;
  z-index: 2;
  box-sizing: border-box;
  transform: scale(1.01);
}

/* Dynamische Farben für das Icon */
.Post_on .forumlist-lastpost-icon img {
  filter: grayscale(100%) brightness(0.6) contrast(1);
  opacity: 1;
}

.Post_on .forumlist-lastpost-icon {
  outline: 3px solid var(--color-accent1);
}

.Post_off .forumlist-lastpost-icon {
  outline: 3px solid var(--color-secondary);
}

/* Headline and Subheading */
.forumlist-title {
 font-family: var(--display-font);
 font-size: 40px;
 text-transform: uppercase;
 font-weight:800;
}

.forumlist-title a {
  color: var(--color-accent1);
  transition: color 0.3s ease;
  text-decoration: none;
}

.forumlist-title a:hover {
  color: var(--color-main);
  cursor: pointer;
  transition: 1s ease-in-out;
}

.forumlist-description {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 260%;
  font-family: var(--main-font2);
  color: var(--color-main);
  text-align: justify;
  hyphens: auto;
  word-break: break-word;
  max-height: 120px;
  min-height: 80px;
  overflow-y: scroll;
  scrollbar-width: none;
  max-width:650px;
  display:none;
}

/* Links Section */
.forumlist-links a {
    font-family: 'Arial', sans-serif;
    font-size: 1rem;
    text-decoration: underline;
    color: #007acc;
    margin-right: 15px;
}

.forumlist-links a:hover {
    text-decoration: none;
    color: #005a99;
}

/* Right Column Text */
.forumlist-info {
  position: relative;
  margin-bottom: 20px;
  text-align: right;
  font-family: var(--main-font2);
}

.forumlist-last-post-title {
    font-family: var(--display-font);
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: 0.4s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.forumlist-last-post-title a {
    color: var(--color-main3);
    text-decoration: none;
    transition: color 0.4s ease;
    border-bottom: 1px solid var(--color-accent1);
    padding-bottom: 15px;
}

.forumlist-last-post-title a:hover {
    color: var(--color-accent1);
    border-bottom: 1px solid var(--color-main);
}

.forumlist-last-post-title i {
    color: var(--color-accent1);
    font-size: 30px;
    transition: color 0.4s ease;
}

.forumlist-last-post-author {
  font-family: var(--main-font2);
  color: var(--color-main3);
  text-transform: uppercase;
  font-size: 11px;
  margin-top: 20px;
}

.forumlist-last-post-author a:hover {
   color: var(--main-color3)!important;
   transition: color 0.4s ease;
}

.forumlist-last-post-date {
  font-family: var(--main-font2);
  color: var(--color-main3);
  text-transform: uppercase;
  font-size: 11px;
  margin-top: 5px;
}

.forumlist-subforen {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  box-sizing: border-box;
  justify-content: right;
  margin-top:30px;
}

/* Subforum Links */
.forumlist-subforen a {
  padding: 5px 10px;
  border: 1px solid var(--color-accent1);
  font-size: 8px;
  text-transform: uppercase;
  color: var(--color-main);
  text-decoration: none;
  transition: 0.3s;
}

.forumlist-subforen a:hover {
  color: var(--color-accent1);
  border-color: var(--color-main);
}

.forumlist-post-threads {
  text-align: left;
  font-family: var(--display-font);
  color: var(--color-main);
  letter-spacing: 2px;
  font-weight: 600;
  font-size: 9px;
  text-transform: uppercase;
  margin-top:30px;
}


.forumlist-post-threads::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--color-accent1);
  margin-right: 5px;
  position: relative;
  bottom: 2px;
}

@media (max-width: 1200px) {
    .inplay-subforen {
        margin-top: 15px !important; /* Weniger Abstand auf kleinen Bildschirmen */
    }
}