/* ==========================================================
   1. REGULÄRE STYLES (DEIN ORIGINALES DARK-THEME FÜR PC)
   ========================================================== */

body {
    font-family: Arial, sans-serif;
    background-color: #121212;
    color: #ffffff;
    margin: 0;
    padding: 20px;
}

.plan-container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

h1 {
    text-align: center;
    color: #4ffbba;
}

.plan-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.plan-tabelle th, .plan-tabelle td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #333;
}

.plan-tabelle th {
    background-color: #2d2d2d;
    color: #4ffbba;
}

.wochentag {
    font-weight: bold;
    background-color: #252525;
}

.dropdown {
    width: 100%;
    padding: 8px;
    background-color: #333;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    box-sizing: border-box; /* Verhindert, dass Dropdowns aus der Tabelle herausstehen */
}

.dropdown:focus {
    border-color: #4ffbba;
    outline: none;
}

/* Flexbox-Container für die Buttons, damit sie nebeneinander stehen können */
.button-container {
    display: flex;
    flex-direction: column; /* Standard untereinander, am PC nebeneinander */
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* Speicher-Button */
.save-btn {
    padding: 10px 20px;
    background-color: #4ffbba;
    color: #121212;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    width: 200px;
    transition: background-color 0.2s;
}

.save-btn:hover {
    background-color: #3cdca2;
}

/* Home-Button */
.home-btn {
    padding: 10px 20px;
    background-color: #444444;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    width: 200px;
    text-align: center;
}

.home-btn:hover {
    background-color: #666666;
}

/* --- STYLING FÜR DIE STARTSEITE (HOME) --- */

.home-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    text-align: center;
}

.home-titel {
    color: #4ffbba;
    font-size: 32px;
    margin-bottom: 30px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.karte-dashboard {
    background-color: #1e1e1e;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    border: 1px solid #2d2d2d;
}

.karte-titel {
    font-size: 18px;
    color: #888888;
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.button-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: #2a2a2a;
    border: 2px solid #3a3a3a;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-button .icon {
    margin-right: 12px;
    font-size: 22px;
}

.aufgaben-btn:hover {
    background-color: #243a32;
    border-color: #4ffbba;
    color: #4ffbba;
    transform: translateY(-2px);
}

.dvd-btn:hover {
    background-color: #1f2d3d;
    border-color: #3498db;
    color: #3498db;
    transform: translateY(-2px);
}

.kontakt-btn:hover {
    background-color: #4d2b22;
    border-color: #bd2f0b;
    color: #bd2f0b;
    transform: translateY(-2px);
}

.plan-tabelle th:last-child {
    text-align: right;
    padding-right: 15px;
}
.chat-eingabe-gruppe {
    display: flex;
    align-items: stretch; /* Zwingt den Button, genauso hoch wie das Textfeld zu sein */
    width: 100%;
    background: #222;
    border: 1px solid #4ffbba;
    border-radius: 8px;
    padding: 5px; /* Kleiner Innenabstand für den edlen Look */
    box-sizing: border-box;
}

.chat-eingabe-gruppe textarea {
    flex: 1;
    height: 60px;        /* Hier bestimmst du die Start-Höhe des Textfelds */
    min-height: 40px;    /* Minimale Höhe */
    max-height: 150px;   /* Maximale Höhe, falls der Nutzer es zieht */
    background: transparent;
    color: #fff;
    border: none;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;    /* Der Nutzer kann es nur nach oben/unten größer ziehen */
    outline: none;
}

.chat-eingabe-gruppe button {
    background: #333;
    color: #4ffbba;
    border: 1px solid #4ffbba;
    border-radius: 6px;
    padding: 0 20px;
    margin-left: 5px;    /* Kleiner Abstand zum Textfeld */
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

/* Hover-Effekt für den Sende-Button */
.chat-eingabe-gruppe button:hover {
    background: #4ffbba;
    color: #111;
}

.plan-tabelle td:last-child {
    text-align: right;
    padding-right: 15px;
}
.chat-btn:hover {
    background-color: #494248;
    border-color: #924aa8;
    color: #9324c7;
    transform: translateY(-2px);
}
.lists-btn:hover {
    background-color: #302c09;
    border-color: #a19f0f;
    color: #99a813;
    transform: translateY(-2px);
}


input[type="password"] {
    width: 100%;
    padding: 8px;
    background-color: #333;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    box-sizing: border-box;
}
input[type="password"]:focus {
    border-color: #4ffbba;
    outline: none;

}



.logout-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626); /* Schöner roter Farbverlauf */
    color: #ffffff;                                         /* Weiße Textfarbe */
    border: none;                                           /* Kein hässlicher Standard-Rand */
    border-radius: 6px;                                     /* Leicht abgerundete Ecken */
    padding: 10px 20px;                                     /* Abstand nach innen (Größe des Buttons) */
    font-size: 14px;                                        /* Textgröße */
    font-weight: 600;                                       /* Leicht fett gedruckt */
    cursor: pointer;                                        /* Zeigt die Hand beim Drüberfahren */
    display: inline-flex;                                   /* Richtet Icon und Text perfekt aus */
    align-items: center;                                    /* Zentriert den Inhalt vertikal */
    gap: 8px;                                               /* Abstand zwischen Emoji/Icon und Text */
    transition: all 0.2s ease-in-out;                       /* Macht Animationen geschmeidig */
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.2);           /* Dezenter roter Schatten nach unten */
}

/* Effekt, wenn man mit der Maus drüberfährt (Hover) */
.logout-btn:hover {
    background: linear-gradient(135deg, #f87171, #ef4444); /* Wird ein bisschen heller */
    transform: translateY(-2px);                            /* Bewegt den Button minimal nach oben */
    box-shadow: 0 6px 15px rgba(220, 38, 38, 0.4);          /* Der rote Schatten fängt an zu leuchten */
}

/* Effekt, wenn man den Button anklickt */
.logout-btn:active {
    transform: translateY(1px);                             /* Drückt den Button optisch nach unten */
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);           /* Schatten wird kleiner */
}

/* ==========================================================
   2. AUTOMATISCHE HANDY-ERKENNUNG (Bildschirme kleiner als 768px)
   ========================================================== */
@media screen and (max-width: 768px) {
    body {
        padding: 10px;
    }

    .plan-container {
        padding: 15px;
    }

    /* Setzt den Header (Home-Button & Titel) auf Handys sauber untereinander */
    .plan-container > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 12px;
        align-items: stretch !important;
    }

    .plan-container h1 {
        padding-right: 0 !important;
        font-size: 22px !important;
    }

    /* Der "Neuen Film hinzufügen"-Button nutzt am Handy die volle Breite */
    #btn-formular-toggle {
        width: 100% !important;
        text-align: center;
    }

    /* Knöpfe im Formular untereinander stapeln */
    #formular-box div[style*="display: flex"] {
        flex-direction: column;
        gap: 10px;
    }

    /* FSK-Checkboxen unter den Filtern ordentlich stapeln */
    .filter-fsk-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .filter-fsk-container label {
        margin-right: 0 !important;
        display: flex;
        align-items: center;
        background: #252525;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #333;
    }

    /* Verstecke die normale Tabellen-Kopfzeile auf dem Handy */
    .plan-tabelle thead {
        display: none;
    }

    /* Transformiere die Tabellen-Zeilen in eigenständige Karten */
    .plan-tabelle, .plan-tabelle tbody, .plan-tabelle tr, .plan-tabelle td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Jede Zeile wird zu einer Box / Karte */
    .plan-tabelle tr {
        background-color: #1e1e1e;
        border: 1px solid #333;
        border-radius: 8px;
        margin-bottom: 20px;
        padding: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    }

    /* --- REGELN FÜR DEN AUFGABENPLAN --- */
    .plan-tabelle td.wochentag {
        display: block;
        text-align: center;
        font-size: 1.2rem;
        padding: 10px;
        border-radius: 6px;
        margin-bottom: 15px;
        background-color: #252525;
        color: #4ffbba; 
        border-bottom: 2px solid #4ffbba;
    }

    .plan-tabelle td:not(.wochentag) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 5px;
        border-bottom: 1px dashed #333;
    }

    /* Fügt Bezeichnungen links ein, falls "data-label" im Aufgabenplan genutzt wird */
    .plan-tabelle td:not(.wochentag)::before {
        content: attr(data-label);
        font-weight: bold;
        color: #888888;
        text-align: left;
        font-size: 0.9rem;
        padding-right: 10px;
    }

    /* --- REGELN FÜR DIE DVD-DATENBANK KARTEN --- */
    /* Wenn es kein Aufgabenplan ist (also keine wochentag-Klasse existiert), richten wir die Zeilen als DVD-Daten aus */
/* Diese Regeln gelten JETZT NUR NOCH für die DVD-Tabelle! */
    .plan-tabelle.dvd-tabelle td {
        border-bottom: 1px dashed #333;
        padding: 10px 5px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: right !important;
    }

/* Greift nur auf Smartphones (Bildschirme schmaler als 768px) */
@media (max-width: 768px) {
    
    /* Macht die Tabellenzellen zu flexiblen Zeilen */
    .plan-tabelle.telefon-tabelle td {
        border-bottom: 1px dashed #333;
        padding: 12px 8px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: right !important;
        box-sizing: border-box;
    }

    /* Setzt die Beschriftungen links künstlich ein (passend zu den Telefon-Spalten!) */
    .plan-tabelle.telefon-tabelle td:nth-of-type(1)::before { content: "Vorname:"; font-weight: bold; color: #4ffbba; text-align: left; }
    .plan-tabelle.telefon-tabelle td:nth-of-type(2)::before { content: "Nachname:"; font-weight: bold; color: #4ffbba; text-align: left; }
    .plan-tabelle.telefon-tabelle td:nth-of-type(3)::before { content: "Nummer:"; font-weight: bold; color: #4ffbba; text-align: left; }
    .plan-tabelle.telefon-tabelle td:nth-of-type(4)::before { content: "Aktion:"; font-weight: bold; color: #4ffbba; text-align: left; }

    /* Die Aktions-Spalte (letzte Zelle mit Bearbeiten/Löschen) bekommt Platz */
    .plan-tabelle.telefon-tabelle td:last-child {
        border-bottom: 2px solid #4ffbba !important; /* Grüner Trenner nach jeder "Karte" */
        flex-direction: row !important; /* Buttons am Handy nebeneinander */
        gap: 10px;
        justify-content: flex-end !important;
        padding-top: 12px !important;
        padding-bottom: 15px !important;
    }

    /* Macht Buttons am Handy griffiger für den Daumen */
    .plan-tabelle.telefon-tabelle td button {
        flex: 1; /* Teilt den Platz gleichmäßig auf */
        margin: 0 !important;
        padding: 10px !important;
        font-size: 14px !important;
    }
}

    /* Beschriftungen links NUR für die DVD-Karten künstlich einblenden */
    .plan-tabelle.dvd-tabelle td:nth-of-type(1)::before { content: "DVD-Nr:"; font-weight: bold; color: #38bdf8; text-align: left; }
    .plan-tabelle.dvd-tabelle td:nth-of-type(2)::before { content: "Filmtitel:"; font-weight: bold; color: #38bdf8; text-align: left; }
    .plan-tabelle.dvd-tabelle td:nth-of-type(3)::before { content: "Besitzer:"; font-weight: bold; color: #38bdf8; text-align: left; }
    .plan-tabelle.dvd-tabelle td:nth-of-type(4)::before { content: "FSK:"; font-weight: bold; color: #38bdf8; text-align: left; }
    .plan-tabelle.dvd-tabelle td:nth-of-type(5)::before { content: "Lagerort:"; font-weight: bold; color: #38bdf8; text-align: left; }

    /* Die Aktions-Spalte für die DVDs */
    .plan-tabelle.dvd-tabelle td:last-child {
        border-bottom: none !important;
        flex-direction: column !important;
        gap: 8px;
        align-items: stretch !important;
        padding-top: 15px !important;
    }

    /* Buttons in den DVD-Karten */
    .plan-tabelle.dvd-tabelle td button {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        font-size: 14px !important;
    }

    /* ALLGEMEINE REGIN (Dürfen für beide gelten, da sie nur Eingabefelder vergrößern) */
    .dropdown, select, input[type="text"], input[type="number"] {
        padding: 10px;
        font-size: 16px;
    }
}
/* Der Haupt-Rahmen für deinen Chat */
.chat-container {
    display: flex;
    flex-direction: column; /* Stapelt Verlauf und Eingabe untereinander */
    height: 80vh;          /* 80% der Bildschirmhöhe */
    max-width: 600px;
    margin: 20px auto;
    background: #111;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px;
    box-sizing: border-box;
}

/* Der Nachrichtenbereich (automatisch scrollbar nach oben) */
.chat-verlauf {
    flex: 1;               /* Nutzt den gesamten verfügbaren Platz */
    overflow-y: auto;      /* Erlaubt Scrollen, wenn Nachrichten den Platz sprengen */
    padding-right: 10px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;             /* Abstand zwischen den Nachrichten */
}

/* Allgemeine Styles für eine einzelne Nachricht */
.nachricht {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}

/* Absender-Name über der Sprechblase */
.absender {
    font-size: 11px;
    color: #888;
    margin-bottom: 3px;
    padding: 0 5px;
}

/* Die eigentliche Textblase */
.text-blase {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    color: #fff;
    line-height: 1.4;
    word-wrap: break-word; /* Verhindert, dass lange Texte das Layout sprengen */
}

/* --- NACHRICHTEN VON ANDEREN (LINKS) --- */
.nachricht.links {
    align-self: flex-start; /* Schiebt die Nachricht nach links */
}
.nachricht.links .text-blase {
    background: #252525;
    border: 1px solid #333;
    border-top-left-radius: 2px; /* Ecke oben links spitz */
}

/* --- DEINE EIGENEN NACHRICHTEN (RECHTS) --- */
.nachricht.rechts {
    align-self: flex-end;   /* Schiebt deine Nachricht nach rechts */
}
.nachricht.rechts .absender {
    align-self: flex-end;   /* Richtet das "Du" rechtsbündig aus */
}
.nachricht.rechts .text-blase {
    background: #005c4b;    /* Chat-Grün */
    border: 1px solid #4ffbba;
    border-top-right-radius: 2px; /* Ecke oben rechts spitz */
}

/* Die Eingabe-Gruppe ganz unten */
.chat-eingabe-gruppe {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #222;
    border: 1px solid #4ffbba;
    border-radius: 8px;
    padding: 5px;
    box-sizing: border-box;
}

.chat-eingabe-gruppe textarea {
    flex: 1;
    height: 50px;
    background: transparent;
    color: #fff;
    border: none;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    resize: none; /* Verhindert manuelles Ziehen, da Höhe fixiert ist */
    outline: none;
}

.chat-eingabe-gruppe button {
    background: #333;
    color: #4ffbba;
    border: 1px solid #4ffbba;
    border-radius: 6px;
    padding: 0 20px;
    margin-left: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

.chat-eingabe-gruppe button:hover {
    background: #4ffbba;
    color: #111;
}