.joblist{
	display: flex;
}

/* Style the tab */
.tab {
  overflow: hidden;
	display: flex;
	 flex-flow: column wrap;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
	box-sizing: border-box;
	width: 100%;
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.joblist_infotext{
	margin: 20px;
	text-align: justify;
	font-size: 13px;
}



.joblist_job_flex{
	display: flex;
	flex-flow: row wrap;
}

.joblist_job_flex > div{
	margin: 5px;	
}

.joblist_job{
	width: 33%;
}

.joblist_job_top{
	background: #efefef;
  color: #333;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #ccc;
  padding: 5px;
	box-sizing: border-box;
	text-align: center;
}

.joblist_job_desc{
	height: 100px;
	overflow: auto;
	padding: 2px 5px;
	box-sizing: border-box;
	text-align: justify;
}

.joblist_job_staff_top{
	text-align: center;	
}

.joblist_job_staff{
	padding: 10px;
	box-sizing: border-box;
	max-height: 100px;
	overflow: auto;
}

	.joblist_staff{
	padding: 2px 5px;		
}

.joblist_staff::before{
		content: "» ";
	padding-right: 2px;
}

.joblist_otherinfos{
	padding: 10px 20px;	
}
        

/* Container für die gesamte Jobliste */.joblist_job_flex {    display: grid !important;    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));    gap: 25px;    padding: 20px 0;}/* Die einzelne Job-Kachel */.joblist_job {    background: #1a1e24 !important; /* Dunkler Hintergrund */    border: 1px solid #2d3540 !important;    border-radius: 4px;    overflow: hidden;    width: 100% !important; /* Grid regelt die Breite */    transition: transform 0.3s ease, border-color 0.3s ease;}.joblist_job:hover {    transform: translateY(-5px);    border-color: #e0ad52 !important; /* Gold bei Hover */}/* Der obere Bereich mit dem Bild (Platzhalter oder GIF) */.joblist_job_top {    height: 150px;    background-image: url(https://64.media.tumblr.com/71261394467d530058e57f2023d53664/tumblr_inline_p8v2m3vW0S1v3n7h8_540.gif);    background-size: cover;    background-position: center;    border-bottom: 1px solid #e0ad52 !important;    position: relative;    display: flex;    align-items: center;    justify-content: center;}/* Berufsname auf dem Bild oder direkt darunter */.joblist_job_top strong {    color: #e0ad52 !important;    font-family: 'Oswald', sans-serif;    font-size: 16px;    letter-spacing: 2px;    text-transform: uppercase;    background: rgba(0,0,0,0.6);    padding: 5px 15px;}/* Inhaltsbereich */.joblist_job_desc {    padding: 15px !important;    color: #cfd8dc !important;    font-size: 13px;    height: auto !important; /* Klappt sich auf */    text-align: center;}/* Labels wie "TÄTIGKEIT" */.joblist_job_desc b, .joblist_job_staff_top strong {    display: block;    color: #5c6b7d !important;    font-size: 10px;    letter-spacing: 1px;    text-transform: uppercase;    margin-top: 10px;}/* Mitarbeiter-Liste */.joblist_job_staff {    background: transparent !important;    border-top: 1px solid #2d3540;    padding: 10px !important;    text-align: center;    color: #e0ad52;}

.job-container-main {    display: flex;    gap: 20px;    margin: 20px auto;    max-width: 1200px;}.job-sidebar {    width: 250px;    display: flex;    flex-direction: column;}.job-sidebar-title {    color: #e0ad52;    font-family: 'Oswald', sans-serif;    padding: 10px;    letter-spacing: 2px;    border-bottom: 1px solid #2d3540;    margin-bottom: 10px;}.job-sidebar button, .job-sidebar a {    background: #1a1e24;    color: #8a9bb8;    border: none;    border-left: 3px solid #2d3540;    padding: 12px;    margin-bottom: 5px;    text-align: left;    cursor: pointer;    text-transform: uppercase;    transition: 0.3s;}.job-sidebar button:hover, .job-sidebar button.active {    background: #252a32;    color: #e0ad52;    border-left-color: #e0ad52;}.job-content {    flex: 1;}.job-infobox {    background: #1a1e24;    border: 1px solid #2d3540;    padding: 20px;    margin-bottom: 20px;    text-align: center;}.job-form-wrapper {    background: #1a1e24;    border: 1px solid #2d3540;    padding: 15px;    margin-bottom: 20px;}

/* Grid für die Formulare */.job-form-grid {    display: flex;    gap: 15px;    margin-bottom: 10px;}.job-form-grid .form-group {    flex: 1;}.job-form-grid label {    display: block;    font-size: 10px;    color: #5c6b7d;    margin-bottom: 5px;    letter-spacing: 1px;}/* MyBB Standard-Tabellen in der Jobliste verstecken, falls sie noch auftauchen */#join_job table, #add_job table {    display: none !important;}

/* Grid für die Formulare */.job-form-grid {    display: flex;    gap: 15px;    margin-bottom: 10px;}.job-form-grid .form-group {    flex: 1;}.job-form-grid label {    display: block;    font-size: 10px;    color: #5c6b7d;    margin-bottom: 5px;    letter-spacing: 1px;}/* MyBB Standard-Tabellen in der Jobliste verstecken, falls sie noch auftauchen */#join_job table, #add_job table {    display: none !important;}

/* Haupt-Farbe: Dark Secrets Grün */:root {    --ds-green: #7fa394; /* Das Grün aus deinem Banner */    --ds-dark: #1a1e24;    --ds-border: #2d3540;}.job-sidebar-title, .job-header-banner h2, .job-card-title {    color: var(--ds-green) !important;}.job-sidebar button.active, .job-sidebar button:hover {    border-left-color: var(--ds-green) !important;    color: var(--ds-green) !important;}.job-submit-btn {    background: var(--ds-green) !important;    color: #1a1e24 !important;    border: none;    font-weight: bold;    cursor: pointer;}/* Kachel-Erzwingung */.joblist_job_flex {    display: grid !important;    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;    gap: 20px !important;    padding: 20px 0;}.job-display-card {    background: var(--ds-dark);    border: 1px solid var(--ds-border);    border-radius: 4px;    overflow: hidden;    transition: 0.3s;}.job-display-card:hover {    border-color: var(--ds-green);}.job-card-image {    height: 120px;    background: #000 url(https://64.media.tumblr.com/71261394467d530058e57f2023d53664/tumblr_inline_p8v2m3vW0S1v3n7h8_540.gif) center/cover;    display: flex;    align-items: center;    justify-content: center;    border-bottom: 1px solid var(--ds-green);}.job-divider {    height: 1px;    background: linear-gradient(to right, transparent, var(--ds-green), transparent);    width: 80%;    margin: 10px auto;}

/* JOBLISTE DARK SECRETS GREEN STYLE */:root {    --ds-green: #7fa394;     --ds-dark: #1a1e24;    --ds-border: #2d3540;    --ds-text: #cfd8dc;}/* Layout-Struktur */.job-container-main { display: flex; gap: 20px; margin: 20px auto; max-width: 1200px; align-items: flex-start; }.job-sidebar { width: 250px; display: flex; flex-direction: column; }.job-content { flex: 1; }/* Sidebar Navigation */.job-sidebar-title { color: var(--ds-green); font-family: 'Oswald', sans-serif; padding: 10px; letter-spacing: 2px; border-bottom: 1px solid var(--ds-border); margin-bottom: 10px; }.job-sidebar button, .job-sidebar a {     background: var(--ds-dark); color: #8a9bb8; border: none; border-left: 3px solid var(--ds-border);     padding: 12px; margin-bottom: 5px; text-align: left; cursor: pointer; text-transform: uppercase; transition: 0.3s; }.job-sidebar button:hover, .job-sidebar button.active { background: #252a32; color: var(--ds-green); border-left-color: var(--ds-green); }/* Kachel-Grid Erzwingung */.joblist_job_flex {     display: grid !important;     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;     gap: 20px !important;     padding: 20px 0; }/* Die Kachel */.job-display-card { background: var(--ds-dark); border: 1px solid var(--ds-border); border-radius: 4px; overflow: hidden; transition: 0.3s; position: relative; }.job-display-card:hover { border-color: var(--ds-green); }.job-card-image {     height: 120px; background: #000 url(https://64.media.tumblr.com/71261394467d530058e57f2023d53664/tumblr_inline_p8v2m3vW0S1v3n7h8_540.gif) center/cover;     display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--ds-green); }.job-card-title { background: rgba(0,0,0,0.7); color: var(--ds-green); padding: 5px 15px; font-weight: bold; letter-spacing: 1px; font-size: 13px; text-transform: uppercase; }/* Formulare & Buttons */.job-dark-card-form { background: var(--ds-dark); border: 1px solid var(--ds-border); padding: 20px; margin-bottom: 25px; border-radius: 4px; }.job-dark-card-form h3 { color: var(--ds-green); font-size: 13px; margin-bottom: 15px; border-bottom: 1px solid var(--ds-border); padding-bottom: 8px; }.job-submit-btn { background: var(--ds-green) !important; color: #1a1e24 !important; font-weight: bold; border: none; padding: 12px; cursor: pointer; width: 100%; letter-spacing: 1px; }.job-dark-card-form input, .job-dark-card-form select, .job-dark-card-form textarea { background: #0f1215 !important; border: 1px solid var(--ds-border) !important; color: #fff !important; padding: 8px; width: 100%; margin-bottom: 10px; }

/* GRÜNES DESIGN VARIABLEN */:root {    --ds-green: #7fa394;     --ds-dark: #1a1e24;    --ds-border: #2d3540;}/* Layout Anpassung für Navigation oben */.job-container-vertical { max-width: 1200px; margin: 20px auto; padding: 0 10px; }.job-top-nav {     display: grid;     grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));     gap: 5px;     margin-bottom: 20px;     border-bottom: 1px solid var(--ds-border);    padding-bottom: 15px;}.job-nav-btn {     background: var(--ds-dark);     color: #8a9bb8;     border: 1px solid var(--ds-border);     padding: 10px 5px;     text-align: center;     cursor: pointer;     text-transform: uppercase;     font-size: 10px;     transition: 0.3s; }.job-nav-btn:hover, .job-nav-btn.active {     background: #252a32;     color: var(--ds-green);     border-color: var(--ds-green); }/* Kachel Design (Grün) */.joblist_job_flex {     display: grid !important;     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;     gap: 20px !important; }.job-display-card { background: var(--ds-dark); border: 1px solid var(--ds-border); border-radius: 4px; overflow: hidden; }.job-card-image {     height: 120px;     background: #000 url(https://64.media.tumblr.com/71261394467d530058e57f2023d53664/tumblr_inline_p8v2m3vW0S1v3n7h8_540.gif) center/cover;     border-bottom: 1px solid var(--ds-green);     display: flex; align-items: center; justify-content: center;}.job-card-title { background: rgba(0,0,0,0.7); color: var(--ds-green); padding: 5px 15px; font-weight: bold; font-size: 13px; text-transform: uppercase; }/* Formular Design */.job-form-wrapper { background: var(--ds-dark); border: 1px solid var(--ds-border); padding: 20px; margin-bottom: 20px; }.job-form-wrapper input, .job-form-wrapper select, .job-form-wrapper textarea {     background: #0f1215 !important; border: 1px solid var(--ds-border) !important; color: #fff !important; padding: 10px; margin-bottom: 10px; width: 100%; }.job-submit-btn { background: var(--ds-green) !important; color: #1a1e24 !important; font-weight: bold; border: none; padding: 12px; cursor: pointer; width: 100%; }