/* style.css */

/* === Globale Stile === */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: darkorchid;
    background-image: linear-gradient(to left, coral, #f511a1);
    padding-top: 50px; /* Dauerhafter Platz für die fixe Top-Bar */
}

/* === Top-Bar und Footer === */
.top-bar {
    background-color: #333;
    padding: 10px 0;
    text-align: center;
    position: fixed; /* Hält die Leiste oben */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

footer {
    padding: 20px;
    text-align: center;
    font-weight: bold;
    color: white;
}

/* Eigener Container für den Footer, um ihn korrekt zu positionieren */
.footer-container {
    width: 100%;
}


/* === Layout für die Startseite (index.php) === */
.container-split {
    display: flex; /* Aktiviert das zweispaltige Layout */
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

.left-window {
    flex-basis: 50%; /* Linke Spalte nimmt 50% der Breite ein */
    border: 5px solid transparent;
    border-image: linear-gradient(90deg, #4f494e, #ababab) 1;
    padding: 20px;
    box-sizing: border-box;
    color: white;
    font-size: 18pt;
}

.right-window {
    flex-basis: 50%; /* Rechte Spalte nimmt 50% der Breite ein */
    border: 5px solid transparent;
    border-image: linear-gradient(90deg, #4f494e, #ababab) 1;
    padding: 20px;
    box-sizing: border-box;

    /* WICHTIG: Scrollbalken für die rechte Spalte */
    overflow-y: auto; /* Vertikaler Scrollbalken nur bei Bedarf */
    max-height: calc(100vh - 90px); /* Höhe berechnen: 100% der Sichthöhe minus padding und top-bar */
}

/* === Layout für die Umfragen-Seite (umfragen.php) === */
.container-centered {
    max-width: 900px; /* Maximale Breite für den Inhalt */
    margin: 20px auto; /* Zentriert den Container horizontal */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1); /* Leicht transparenter Hintergrund */
    border: 5px solid transparent;
    border-image: linear-gradient(90deg, #4f494e, #ababab) 1;
    color: white;
    font-size: 16pt;
}

/* === Tabellen-Stile === */
.right-window table, .container-centered table {
    width: 100%;
}

/* Anpassung der Bilder in der Tabelle */
td img {
    width: 32px; /* Feste Größe für Play/Download Icons */
    height: auto;
    vertical-align: middle;
}