/* Globale Variablen für konsistentes Design */
:root {
    --main-bg: #121212; /* Dunkles Grau, inspiriert von css.txt */
    --secondary-bg: #212121; /* Sekundärer Hintergrund */
    --accent-color: #ff4d4d; /* Akzentfarbe aus bestehendem Design */
    --text-light: #ffffff; /* Heller Text */
    --text-muted: #9a8d8d; /* Gedämpfter Text, inspiriert von --text-dark */
    --spacing-unit: 0.25rem; /* Basis für Abstände, wie in css.txt */
    --radius-sm: 0.375rem; /* Abgerundete Ecken, ähnlich --radius-md */
    --radius-lg: 0.75rem; /* Größere Ecken, ähnlich --radius-xl */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtiler Schatten */
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3); /* Stärkerer Schatten, ähnlich shadow-xl */
    --transition: all 0.3s ease; /* Sanfte Übergänge, inspiriert von css.txt */
}

/* Allgemeine Resets und Basisstile */
body {
    font-family: 'Arial', sans-serif; /* Fallback, kann durch Plus Jakarta Sans ersetzt werden */
    margin: 0;
    padding: 0;
    background-color: var(--main-bg);
    color: var(--text-light);
    line-height: 1.5;
}

/* Header */
header {
    background-color: var(--secondary-bg);
    padding: calc(var(--spacing-unit) * 4);
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: calc(var(--spacing-unit) * 10); /* Entspricht ~2.5rem */
    color: var(--accent-color);
}

/* Suchleiste */
.search-bar {
    margin: calc(var(--spacing-unit) * 4);
    text-align: center;
}

.search-bar input {
    padding: calc(var(--spacing-unit) * 3);
    width: 100%;
    max-width: calc(var(--spacing-unit) * 140); /* ~350px */
    border: none;
    border-radius: calc(var(--radius-sm) * 2);
    background-color: var(--secondary-bg);
    color: var(--text-light);
    font-size: calc(var(--spacing-unit) * 4);
    transition: var(--transition);
}

.search-bar input:focus {
    outline: none;
    background-color: #2a2a2a; /* Subtiler Hover-Effekt */
}

/* Anime-Grid (für index.php) */
.anime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: calc(var(--spacing-unit) * 6);
    padding: calc(var(--spacing-unit) * 6);
}

/* Anime-Karte (für index.php) */
.anime-card {
    background-color: transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    box-shadow: var(--shadow-sm); /* Subtiler Schatten für Tiefe */
}

.anime-card:hover {
    transform: scale(1.03); /* Subtiles Zoom, inspiriert von group-hover:scale-[1.03] */
    box-shadow: var(--shadow-lg); /* Stärkerer Schatten bei Hover */
}

.anime-card img {
    width: 100%;
    height: calc(var(--spacing-unit) * 200); /* ~500px, erhöht von 400px */
    aspect-ratio: 2 / 3; /* Konsistentes Verhältnis, inspiriert von css.txt */
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.anime-card h3 {
    margin: 0;
    font-size: calc(var(--spacing-unit) * 6);
    color: var(--text-light);
    padding: calc(var(--spacing-unit) * 2);
    position: absolute;
    top: calc(var(--spacing-unit) * 4);
    left: calc(var(--spacing-unit) * 4);
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.anime-card:hover h3 {
    background-color: rgba(0, 0, 0, 0.8); /* Dunklerer Hintergrund bei Hover */
}

.anime-card a {
    text-decoration: none;
    display: block;
    position: relative;
}

/* Anime-Details (für anime.php) */
.anime-details {
    max-width: calc(var(--spacing-unit) * 480); /* ~1200px */
    margin: calc(var(--spacing-unit) * 8) auto;
    padding: calc(var(--spacing-unit) * 8);
    background-color: var(--secondary-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: appear 0.5s forwards; /* Fade-In-Animation, inspiriert von css.txt */
}

.anime-header {
    display: flex;
    gap: calc(var(--spacing-unit) * 8);
    flex-wrap: wrap;
    align-items: flex-start;
}

.anime-image {
    width: 100%;
    max-width: calc(var(--spacing-unit) * 60); /* ~150px */
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    object-fit: cover;
}

.anime-info {
    flex: 1;
}

.anime-info h2 {
    margin: 0 0 calc(var(--spacing-unit) * 4);
    font-size: calc(var(--spacing-unit) * 8); /* ~2rem */
    color: var(--accent-color);
    font-weight: 700; /* Inspiriert von font-weight-bold */
}

.categories {
    font-size: calc(var(--spacing-unit) * 4);
    color: var(--text-muted);
    margin: calc(var(--spacing-unit) * 2) 0;
}

.description {
    font-size: calc(var(--spacing-unit) * 4.5);
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

/* Episoden-Grid */
.episode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: calc(var(--spacing-unit) * 4);
    margin-top: calc(var(--spacing-unit) * 8);
}

/* Episoden-Karte */
.episode-card {
    background-color: #2a2a2a; /* Etwas heller als secondary-bg */
    padding: calc(var(--spacing-unit) * 4);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.episode-card:hover {
    transform: translateY(-5px); /* Subtiles Heben, wie in css.txt */
    box-shadow: var(--shadow-lg);
    background-color: #333333; /* Hover-Effekt, inspiriert von hover:bg-[#...ec] */
}

.episode-card h4 {
    margin: 0 0 calc(var(--spacing-unit) * 2);
    font-size: calc(var(--spacing-unit) * 5);
    color: var(--accent-color);
}

.episode-type {
    margin: calc(var(--spacing-unit) * 2) 0;
}

.episode-type span {
    font-weight: 600; /* Inspiriert von font-weight-semibold */
    color: var(--text-muted);
}

.provider-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 2);
}

.episode-link {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
    background-color: var(--accent-color);
    color: var(--text-light);
    text-decoration: none;
    border-radius: calc(var(--radius-sm) * 2);
    font-size: calc(var(--spacing-unit) * 3.5);
    transition: var(--transition);
}

.episode-link:hover {
    background-color: #e63939; /* Dunkleres Rot bei Hover */
}

/* Player-Container (für player.php) */
.player-container {
    max-width: calc(var(--spacing-unit) * 400); /* ~1000px */
    margin: calc(var(--spacing-unit) * 8) auto;
    padding: calc(var(--spacing-unit) * 4);
    background-color: var(--secondary-bg);
    border-radius: var(--radius-lg);
}

.player-iframe {
    width: 100%;
    height: 800px;
    border-radius: var(--radius-sm);
    border: none;
}

/* Back-Link */
.back-link {
    display: inline-block;
    margin: calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 6);
    background-color: var(--accent-color);
    color: var(--text-light);
    text-decoration: none;
    border-radius: calc(var(--radius-sm) * 2);
    transition: var(--transition);
}

.back-link:hover {
    background-color: #e63939;
}

/* Admin-Container (für admin.php) */
.admin-container {
    max-width: calc(var(--spacing-unit) * 320); /* ~800px */
    margin: calc(var(--spacing-unit) * 8) auto;
    padding: calc(var(--spacing-unit) * 8);
    background-color: var(--secondary-bg);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.admin-container form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 6);
}

.admin-container select,
.admin-container input,
.admin-container textarea {
    padding: calc(var(--spacing-unit) * 3);
    border: none;
    border-radius: var(--radius-sm);
    background-color: #2a2a2a;
    color: var(--text-light);
    font-size: calc(var(--spacing-unit) * 4);
    transition: var(--transition);
}

.admin-container select:focus,
.admin-container input:focus,
.admin-container textarea:focus {
    outline: none;
    background-color: #333333;
}

.admin-container button {
    padding: calc(var(--spacing-unit) * 3);
    background-color: var(--accent-color);
    color: var(--text-light);
    border: none;
    border-radius: calc(var(--radius-sm) * 2);
    cursor: pointer;
    font-size: calc(var(--spacing-unit) * 4);
    transition: var(--transition);
}

.admin-container button:hover {
    background-color: #e63939;
}

.episode-input {
    background-color: #2a2a2a;
    padding: calc(var(--spacing-unit) * 6);
    margin-bottom: calc(var(--spacing-unit) * 4);
    border-radius: var(--radius-sm);
}

.provider-inputs {
    margin: calc(var(--spacing-unit) * 2) 0;
}

.provider-pair {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.provider-pair input {
    flex: 1;
}

.add-provider {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
    background-color: #555555;
    color: var(--text-light);
    border: none;
    border-radius: calc(var(--radius-sm) * 2);
    cursor: pointer;
    font-size: calc(var(--spacing-unit) * 3.5);
    margin-top: calc(var(--spacing-unit) * 2);
    transition: var(--transition);
}

.add-provider:hover {
    background-color: #666666;
}

.error {
    color: var(--accent-color);
    margin-top: calc(var(--spacing-unit) * 4);
    font-size: calc(var(--spacing-unit) * 4);
}

/* Footer */
footer {
    text-align: center;
    padding: calc(var(--spacing-unit) * 4);
    background-color: var(--secondary-bg);
    color: var(--text-light);
    width: 100%;
}

/* Animation für Fade-In (inspiriert von css.txt appear) */
@keyframes appear {
    0% {
        opacity: 0;
        transform: translateY(calc(var(--spacing-unit) * 4));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 600px) {
    .search-bar input {
        max-width: 100%;
    }
    .anime-grid {
        grid-template-columns: 1fr;
    }
    .anime-card img {
        height: calc(var(--spacing-unit) * 160); /* ~400px für kleinere Bildschirme */
    }
    .player-iframe {
        height: 300px;
    }
    .anime-header {
        flex-direction: column;
    }
    .anime-image {
        max-width: 100%;
    }
    .episode-grid {
        grid-template-columns: 1fr;
    }
    .provider-pair {
        flex-direction: column;
    }
}

@media (min-width: 768px) {
    .anime-details {
        padding: calc(var(--spacing-unit) * 12);
    }
    .anime-info h2 {
        font-size: calc(var(--spacing-unit) * 10); /* ~2.5rem */
    }
    .episode-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (min-width: 1024px) {
    .anime-header {
        gap: calc(var(--spacing-unit) * 12);
    }
    .anime-image {
        max-width: calc(var(--spacing-unit) * 80); /* ~200px */
    }
}