@charset "UTF-8";

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: 210px; height: 159px; }
.img2 { top: 0; left: 210px; width: 879px; height: 159px; }
.img3 { top: 0; left: 1089px; width: 191px; height: 159px; }

/* links */
.img4 { top: 159px; left: 0px; width: 167px; height: 597px; }

/* oben mitte */
.img5 { top: 159px; left: 167px; width: 841px; height: 117px; }

/* rechts */
.img6 { top: 159px; left: 1008px; width: 272px; height: 561px; }

/* content hintergrund */
.img8 { top: 276px; left: 368px; width: 640px; height: 425px; }

/* footer */
.img15 { top: 701px; left: 167px; width: 201px; height: 55px; }
.img16 { top: 701px; left: 368px; width: 640px; height: 55px; }
.img17 { top: 718px; left: 1008px; width: 272px; height: 36px; }

/* Navigation */
.nav {
    position: absolute;
    /* Diese Werte fixieren den Block innerhalb des 1280px Wrappers */
    top: 276px;  /* Genau dort, wo index_05 aufhört */
    left: 167px; /* Genau dort, wo index_04 aufhört */
    width: 201px;
    z-index: 100; /* Damit die Buttons immer oben liegen */
}

.nav img {
    display: block;
    width: 201px;
    height: auto; /* Behält das Seitenverhältnis der Buttons bei */
}

/* Inhaltsbereich: Sitzt exakt auf der Position von index_08.jpg */
.content {
    position: absolute;
    top: 306px;    /* Gleiche Höhe wie Nav */
    left: 368px;   /* 167px (img4) + 201px (nav) = 368px */
    width: 625px;  /* Breite von index_08 */
    height: 375px; /* Höhe von index_08 */
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box; /* Wichtig, damit Padding die Box nicht vergrößert */
    color: #B55D2D;
    text-align: center;
    z-index: 99;
}

.covers img {
  margin: 5px;
}

.wrapper::after {
    content: "© 2026 Joky One c/o S. Bartels";
    
    position: absolute;
    bottom: 8px;
    right: 15px;
    
    font-size: 10px;
    color: #333333;    
    font-family: Verdana, Arial, sans-serif;
    pointer-events: none; 
    z-index: 100; 
}

/* Container für eine einzelne Episode */
.episode-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    width: 100%;
}

.episode-header {
    text-align: center;
    margin-bottom: 15px;
    width: 95%;
}

/* Die Flex-Box für Cover und Sprecher nebeneinander */
.episode-main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 20px; /* Abstand zwischen Bild und Text */
    width: 100%;
    max-width: 580px;
}

.episode-cover {
    flex: 0 0 280px; /* Fixe Breite für das Bild */
}

.episode-cover img {
    width: 280px;
    height: auto;
    border: 0;
}

.episode-details {
    flex: 1; /* Nimmt den restlichen Platz ein */
    text-align: left;
    font-size: 11px;
    line-height: 1.5;
}

.role-name {
    color: #FFFFFF; /* Sprechername in Weiß */
}

.label {
    color: #BB7C26;
    font-weight: bold;
    display: block;
    margin-top: 10px;
}

.text-info {
    flex: 1; 
    text-align: center;
    font-size: 13px;
    line-height: 1.1;
}

.text-info2 {
    flex: 1;
    color: #AA7937; 
    text-align: center;
    font-size: 14px;
    line-height: 1.1;
}

.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;
}