body {
    margin: 0;
    margin-top: 60px;
    background: black;
    font-family: Verdana, Arial, sans-serif;
    color: #FFFFCC;
}

/* Hauptbereich */
.wrapper {
    position: relative;
    width: 1280px;
    height: 757px;
    margin: 0 auto;
}

/* Hintergrund */
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 757px;
}

/* Allgemeine Bildklasse */
.img {
    position: absolute;
}

/* Obere Struktur */
.img1 { top: 0; left: 0; width: 470px; height: 234px; }
.img2 { top: 0; left: 470px; width: 476px; height: 234px; }
.img3 { top: 0; left: 946px; width: 201px; height: 161px; }
.img4 { top: 0; left: 1147px; width: 133px; height: 234px; }
.img5 { top: 161px; left: 946px; width: 201px; height: 73px; }

/* Linke Seite */
.img6 { top: 234px; left: 0; width: 470px; height: 383px; }

/* UNTEN (JETZT VOLLSTÄNDIG) */
.img7 { top: 617px; left: 0; width: 470px; height: 139px; }     /* index_14.jpg */
.img8 { top: 617px; left: 470px; width: 676px; height: 139px; }  /* index_15.jpg */
.img9 { top: 617px; left: 1147px; width: 133px; height: 139px; } /* index_16.jpg */

/* Textbereich */
.content {
	position: absolute;
	top: 234px;
	left: 470px;
	width: 677px;
	height: 383px;
	background: url("Bilder/index_07bb.gif") no-repeat center;
	background-size: cover;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.text {
	width: 90%;
	font-size: 14px;
	line-height: 1.2;
	text-shadow: 
        0 0 3px #000,
        0 0 6px #000,
        0 0 10px #000;
}

.highlight {
    color: #FFCC99;
    font-weight: bold;
}

/* Navigation */
.nav {
    position: absolute;
    top: 234px;
    left: 1147px;
    width: 133px;
}

.nav img {
    display: block;
    width: 133px;
}

/* Impressum */
.impressum {
    position: absolute;
    top: 617px;
    left: 1147px;
    width: 133px;
    text-align: center;
    font-size: 10px;
}

.impressum a {
    color: #999;
    text-decoration: none;
}

/* Spezifische Anpassung für den Abenteuer-Inhalt */
.content.scroll-layout {
    display: block; 
    padding: 0; /* Padding wird in der Scrollbox geregelt */
}

.scrollbox {
    width: 650px;      /* Etwas schmaler für mehr Außenabstand */
    height: 350px;
    overflow-y: auto;
    margin: 15px auto; /* Zentrierung und Abstand oben/unten */
    padding: 0 25px;   /* KRÄFTIGER SEITENABSTAND (links/rechts) */
    text-align: left;  /* Standardmäßig linksbündig wie im Original */
    box-sizing: border-box;
}

/* Scrollbar Styling */
.scrollbox::-webkit-scrollbar { width: 8px; }
.scrollbox::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
.scrollbox::-webkit-scrollbar-thumb { background: #FF9933; border-radius: 4px; }

.episode-block {
    margin-bottom: 50px;
    border-bottom: 1px solid #333;
    padding-bottom: 30px;
}

/* Schriftgrößen-Anpassung an das Original */
.episode-title { 
    font-size: 13px; 
    color: #FFFFCC; 
    font-weight: bold; 
    display: block;
    margin-bottom: 10px; 
}

.episode-subtitle { 
    font-size: 16px; 
    color: #FFFFCC; 
    display: block; 
    margin-bottom: 10px;
}

.episode-description {
    font-size: 13px; /* Ähnlich wie die Tabellenschrift */
    line-height: 1.5;
    margin-bottom: 15px;
}

.episode-body { 
    display: flex; 
    gap: 25px; 
    align-items: flex-start; 
}

/* SPRECHERLISTE UNTEREINANDER */
.speaker-list {
    font-size: 11px;
    line-height: 1.3;
    color: #FFFFCC;
}

.speaker-item {
    display: block; /* Erzwingt Zeilenumbruch */
    margin-bottom: 1px;
}

.status-prod { 
    color: #FF3300; 
    font-weight: bold; 
    font-size: 12px;
    margin-top: 10px; 
    display: block; 
}

.orange-text { color: #FF9933; font-weight: bold; }
.white-text { color: #FFFFFF; }

.support-container {
    margin: 20px 0;
    text-align: center;
}

.paypal-button {
    display: inline-block;
    background-color: #FF9933;
    color: #000000 !important;
    padding: 5px 18px;       /* Viel kompakter */
    font-size: 12px;         /* Kleinere Schrift */
    font-weight: bold;
    text-decoration: none;
    border-radius: 20px;     /* Stark abgerundete Ecken */
    border: 1px solid #FFCC99;
    transition: all 0.3s ease;
    text-transform: lowercase; /* Alles kleingeschrieben wie gewünscht */
}

.paypal-button:hover {
    background-color: #FFCC99;
    transform: scale(1.05);  /* Kleiner Effekt beim Drüberfahren */
}

.banner-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Abstand zwischen den Bannern */
    padding-top: 20px;
}

.link-banner {
    width: 400px;
    height: 120px;
    border: 1px solid #444;
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: block;
}

.link-banner:hover {
    transform: scale(1.02);
    border-color: #FF9933;
}

.headline-freunde {
    font-size: 20px;
    color: #FFCC99;
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.wrapper::after {
    content: "© 2026 Joky One c/o S. Bartels"; 
    
    position: absolute;
    bottom: 8px;      /* Ganz unten */
    right: 15px;       /* Ganz rechts */
    
    font-size: 10px;
    color: #333333;    /* Sehr dunkles Grau, fast schwarz - extrem dezent */
    font-family: Verdana, Arial, sans-serif;
    pointer-events: none; /* Der Text stört keine Mausklicks auf die Grafiken */
    z-index: 100;      /* Sorgt dafür, dass es über den Bildern liegt */
}