/* ============================================================
   001. GRUNDLEGENDES (DESKTOP BASIS)
   Beschreibung: Definiert die Schriftarten, Hintergrundfarbe, 
   Standard-Textgrößen und H1/H2-Überschriften des Hauptportals.
   ============================================================ */
body { 
    margin: 0; padding: 0 20px; background-color: #f0f4f8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6; color: #2d3748; font-size: 14px;
}

h1, h2 { color: #2c5282; margin: 10px 0 0 0; }
h1 { font-size: 26px; } h2 { font-size: 20px; }

label { display: block; margin-top: 15px; }
label h1 { font-size: 20px !important; margin: 0 !important; color: #2c5282; line-height: 1.0; }
label h2 { font-size: 16px !important; margin: 0 !important; color: #2c5282; line-height: 1.0; }
.hint-text { display: block; font-size: 11px; color: #4a5568; margin-bottom: 5px; }


/**
 * CMS-SICHERES AUTOMATISCHES AUSBLENDEN VIA CSS-ANIMATION 🚀
 * Blendet das Element nach 3 Sekunden sanft aus und schrumpft den Platz auf 0px.
 */
@keyframes cssStatusFadeOut {
    0% { opacity: 1; max-height: 100px; margin-bottom: 20px; padding: 12px; border-width: 1px; }
    85% { opacity: 1; max-height: 100px; margin-bottom: 20px; padding: 12px; border-width: 1px; }
    98% { opacity: 0; max-height: 100px; margin-bottom: 20px; padding: 12px; border-width: 1px; }
    100% { opacity: 0; max-height: 0; margin-bottom: 0; padding: 0; border-width: 0; visibility: hidden; overflow: hidden; }
}

/* Aktiviert die 3,5 Sekunden lange Animation für deine Status-Meldungen */
.status-msg {
    animation: cssStatusFadeOut 3.5s forwards ease-in-out !important;
}





/* ============================================================
   002. BUTTONS (BASIS-DESIGN)
   Beschreibung: Grund-Styling der Standard-Buttons im Portal 
   (Speichern, Hinzufügen, Abbrechen) für einheitliche Höhen.
   ============================================================ */
.btn-save, .btn-add, .btn-cancel, .btn-header {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: bold; text-decoration: none; border: none; border-radius: 4px;
    color: white; cursor: pointer; box-sizing: border-box;
    height: 34px; font-size: 13px; padding: 0 15px;
}
.btn-save, .btn-add { background-color: #3182ce; }
.btn-cancel { background-color: #718096; }

/* ============================================================
   003. LAYOUT-ELEMENTE (DESKTOP)
   Beschreibung: Steuert die Kopfzeile (Header-Bar), die Suche,
   breite Formular-Eingabefelder, Textareas und Status-Meldungen.
   ============================================================ */
.header-bar { 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    gap: 10px; 
    padding: 10px 20px; 
    background-color: #ebf8ff; 
    margin: 0 -20px 20px -20px; 
}

.header-bar input {
    height: 34px; 
    padding: 0 12px; 
    border: 1px solid #a0aec0; 
    border-radius: 4px; 
    background: white; 
    font-size: 14px; 
    box-sizing: border-box;
}

.input-header-pw, #searchField { height: 34px; padding: 0 12px; border: 1px solid #a0aec0; border-radius: 4px; background: white; font-size: 14px; box-sizing: border-box; }
.form-input-wide { width: 100%; height: 34px; padding: 0 12px; border: 1px solid #a0aec0; border-radius: 4px; background: white; font-size: 14px; box-sizing: border-box; }
textarea.form-input-wide { height: auto !important; min-height: 120px; padding: 10px; }
.button-bar { display: flex; gap: 10px; margin-top: 25px; }

table { width: 100%; border-collapse: collapse; background-color: white; margin-top: 10px; }
th, td { border: 1px solid #e2e8f0; padding: 10px; text-align: left; vertical-align: top; font-size: 14px; }
th { background: #bee3f8; color: #2a4365; font-weight: bold; cursor: pointer; }
th small { display: block; font-weight: normal; font-size: 10px; color: #4a5568; }

.edit-btn { color: #3182ce; font-size: 1.5em; text-decoration: none; margin-right: 10px; }
.delete-btn { color: #e53e3e; font-size: 1.3em; text-decoration: none; }

.status-msg { padding: 12px; margin-bottom: 20px; border-radius: 4px; font-weight: bold; transition: opacity 0.5s ease; }
.status-success { background: #c6f6d5; color: #22543d; border: 1px solid #9ae6b4; }
.status-error { background: #fed7d7; color: #822727; border: 1px solid #feb2b2; }

/* ============================================================
   004. DRAG & DROP SORTIERUNG (ADMIN-TABELLE)
   Beschreibung: Visuelle Effekte, Übergänge und Mauszeiger-Wechsel
   beim Verschieben von Tabellenzeilen in der Linkverwaltung.
   ============================================================ */
#sortable-table-body tr {
    transition: background-color 0.2s ease, transform 0.1s ease;
}
#sortable-table-body tr[draggable="true"]:active {
    background-color: #ebf8ff !important;
    box-shadow: 0 4px 10px rgba(49, 130, 206, 0.15);
    cursor: grabbing;
}
#sortable-table-body tr.drag-over {
    border-top: 2px solid #3182ce !important;
    background-color: #f7fafc;
}
#sortable-table-body td:first-child {
    font-size: 16px;
    color: #a0aec0;
    text-align: center;
    user-select: none;
}
#sortable-table-body tr:hover {
    background-color: #f7fafc;
}

/* ============================================================
   005. NEBENEINANDER-LAYOUT (LINKS & MITTE)
   Beschreibung: Das zweispaltige Desktop-Layout. Teilt den Bildschirm
   in die linke Menüleiste und das rechte, flexible Inhaltsfenster.
   ============================================================ */
.content-wrapper {
    display: flex;
    gap: 30px;                
    align-items: flex-start;  
    margin-top: 20px;
}

.link-section {
    flex: 0 0 280px;
    margin: 0;
}

.center-section {
    flex: 1;
    background: white;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

/* ============================================================
   006. LINKLISTE ALS BUTTONS & FUSSBEREICH (DESKTOP BASIS)
   Beschreibung: Formatiert die Menü-Linkliste links als klickbare 
   Button-Kacheln und steuert das Design des Desktop-Fussbereichs.
   ============================================================ */
.link-button-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  
    gap: 12px;                
    margin-top: 15px;
}

.btn-list-item {
    width: 100%;
    max-width: 350px;              
    justify-content: space-between; 
    padding: 0 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.1s ease, filter 0.2s ease;
}

.btn-list-item:active { transform: scale(0.98); }
.btn-list-item:hover { filter: brightness(1.1); }

#fuss {
    margin: 40px -20px 0 -20px;   
    padding: 15px 20px;
    background-color: #ebf8ff;     
    border-top: 1px solid #bee3f8;   
    color: #4a5568;
    font-size: 13px;
    text-align: center;
    line-height: 1.8;
}

#fuss a {
    color: #3182ce;
    text-decoration: none;
    font-weight: 500;
    padding: 0 5px;
    transition: color 0.2s ease;
}

#fuss a:hover {
    color: #2c5282;
    text-decoration: underline;
}
/* ============================================================
   007. MOBILE AUSGABE (AB 768PX) - INHALTS-BOOSTER POSITION 1 🚀
   Beschreibung: Steuert das Aussehen auf Smartphones. Schießt den 
   Inhalt (Tabelle/Formular) an Platz 1 nach ganz oben und verbannt 
   die lange Menüleiste auf Platz 2 darunter. Kein Scrollen mehr!
   ============================================================ */
@media screen and (max-width: 768px) {
    /* Streckt die Standard-Groß-Buttons (Speichern/Abbrechen) auf volle Breite */
    .btn-header, .btn-add, .btn-save, .btn-cancel {
        width: 100% !important;
        height: 50px !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        margin-bottom: 10px !important;
        border-radius: 4px !important;
        justify-content: center !important; 
    }

    .button-bar .btn-save, 
    .button-bar .btn-cancel {
        justify-content: flex-start !important;
        padding-left: 20px !important;
    }

    /* REPARIERT FÜR INTEGRATION 🚀: Aktiviert ein mobiles Grid zur flexiblen Umsortierung */
    .content-wrapper {
        display: grid !important;
        grid-template-columns: 100% !important;
        gap: 15px !important;
    }
    
    /* INHALT AN REIHENFOLGE 1: Tabelle/Maske steht sofort ohne Scrollen ganz oben */
    .center-section {
        grid-row: 1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* MENÜ AN REIHENFOLGE 2: Rutscht flüssig unter den Inhaltsblock */
    /* MENÜ AN REIHENFOLGE 2: Rutscht flüssig und OHNE große Lücke unter den Inhalt 🚀 */
    .link-section {
        grid-row: 2 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 5px !important; /* REPARIERT: Radikal verkleinert für perfekten Anschluss */
    }

    /* ERZWINGT DEN HORIZONTALEN SLIDER FÜR DIE REINE CSS-FORM 🚀 */
    .link-button-container {
        display: flex !important;
        flex-direction: row !important;       /* Nebeneinander-Ausrichtung */
        overflow-x: auto !important;          /* Aktiviert seitliches Wischen */
        white-space: nowrap !important;       /* Verhindert Zeilenumbrüche */
        gap: 10px !important;
        width: 100% !important;
        padding: 5px 0 15px 0 !important;     /* Platz für den Scrollbalken/Daumen */
        scrollbar-width: thin !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* KACHEL-FORMATIERUNG FÜR DEN SLIDER 🚀 */
    .btn-list-item {
        flex: 0 0 auto !important;            /* Verhindert Zusammenquetschen */
        width: auto !important;               /* Breite passt sich dem Text an */
        max-width: none !important;
        height: 40px !important;              /* Flache, kompakte Höhe */
        font-size: 14px !important;
        padding: 0 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* FUSSBEREICH AN REIHENFOLGE 3: Bleibt die saubere Endstation ganz unten */
    #fuss {
        grid-row: 3 !important;
        font-size: 14px !important;
        padding: 20px !important;
    }
    
    #fuss a {
        display: inline-block !important;
        background-color: white !important;
        border: 1px solid #a0aec0 !important;
        border-radius: 4px !important;
        padding: 8px 15px !important;
        margin: 5px 2px !important;
        color: #2c5282 !important;
    }
}


/* ============================================================
   008. OPTIMIERUNGEN FÜR ADMIN-BUTTONS & REIHENFOLGE
   Beschreibung: Definiert das Aussehen der Admin-Schaltflächen 
   in der Linkliste und färbt Zeilen beim Verschieben blau ein.
   ============================================================ */
.btn-admin {
    background-color: #444 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
}

.btn-admin-margin {
    margin-top: 20px;
}

.sortable-row.drag-over {
    border-top: 2px solid #007bff !important;
    background-color: #f0f7ff !important;
}

.drag-handle {
    cursor: move;
    user-select: none;
}

/* ============================================================
   009. FORMULAR-ELEMENTE & LINKSORTIERUNG (TABELLEN-FIXES)
   Beschreibung: Formatiert Trennlinien, responsive Textgrößen 
   und klickbare Sortier-Links direkt in den Tabellen-Köpfen.
   ============================================================ */
.section-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 25px 0;
}

.text-small {
    font-size: 14px;
}

.th-sortable {
    background-color: #bee3f8 !important;
    padding: 0 !important; 
}

.sort-link {
    color: #2a4365 !important;
    text-decoration: none;
    display: block;
    padding: 10px;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
}

.sort-link:hover {
    background-color: #90cdf4;
}

/* ============================================================
   010. ZEILENSTEUERUNG & VERSTECKTE NOTIZEN
   Beschreibung: Aktiviert den Hover-Effekt für Tabellenzeilen 
   und stellt das sichere Ausblenden der Notiz-Bereiche bereit.
   ============================================================ */
.table-row-hover:hover {
    background-color: #f7fafc;
}

.hide-notiz { 
    display: none !important; 
}