/* ZENTRALES STYLESHEET v1.10 - Bernhard Batario Portfolio */

/* GLOBALER FIX: Padding berechnet sich innerhalb der Breite */
* { box-sizing: border-box; }

html { margin: 0; padding: 0; background: #f4f6f9; height: 100%; overflow: hidden; } 
body {
 margin: 0; padding: 0; background: #f4f6f9; height: 100%; overflow: hidden; /* overflow: hidden; bleibt für das feste Layout */
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; 
 color: #2c3e50; -webkit-overflow-scrolling: touch; /* Flüssigeres Scrollen auf iOS */
 display: flex; 
 flex-direction: column; 
 user-select: none; /* Textauswahl verhindern */
 -webkit-user-select: none; /* Für Safari */
 -moz-user-select: none; /* Für Firefox */
 -ms-user-select: none; /* Für IE/Edge */
} 

/* Formulare und Schutz-Overlay zwingend interaktiv machen */
#protection-overlay, #protection-overlay *, 
input, textarea, select, button, label {
    user-select: text !important;
    -webkit-user-select: text !important;
    pointer-events: auto !important;
    cursor: auto !important;
}
/* Spezielle Druck-Layouts auf body-Ebene überschreiben globale print-Regeln */
body.print-overview {
    overflow: visible !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 10pt; /* Basisschriftgröße für den Bauplan */
}
/* ADMIN-MODUS: Alle Sperren aufheben */
body.admin-mode {
    user-select: auto !important; /* Wieder auf auto, da text in manchen Fällen zu restriktiv war */
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    pointer-events: auto !important;
}

/* SCHUTZFUNKTIONEN */
@media print { 
    html, body { 
        overflow: visible !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important; /* Sicherstellen, dass der Hintergrund weiß ist */
    }
    
    /* Bilder und Medien beim Drucken immer erlauben */
    img, video, .list-img { display: block !important; visibility: visible !important; opacity: 1 !important; max-width: 100% !important; }

    /* UI-Elemente ausblenden */
    .sticky-container, footer, .side-bar, .enlarge-link, .stl-fullscreen-btn, 
    .btn, button, .thumb-nav, .pdf-controls, #timeout-warning, #timeout-backdrop,
    .print-hide { display: none !important; }

    .main-content {
        position: static !important; width: 100% !important; height: auto !important;
        overflow: visible !important; display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        display: block !important;
    }

    .page, .content-inner, .info-card {
        display: block !important; width: 100% !important; height: auto !important;
        box-shadow: none !important; border: none !important;
        padding: 0 !important;
    }

    /* Erzeugt einen Seitenumbruch vor jedem Log-Abschnitt, damit sie nicht überschneiden */
    .printable-log-section {
        page-break-before: always !important;
        break-before: page !important;
        margin-top: 0 !important;
        border: none !important;
    }
    .printable-log-section:first-of-type {
        page-break-before: avoid !important;
        break-before: avoid !important;
    }

    /* Den druckbaren Bereich und seinen Inhalt sichtbar machen */
    .admin-container, .admin-analysis-box, .printable-log-section, .info-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: white !important;
        color: inherit !important;
    }

    /* Spezifische Stile für die Protokolltabelle und ihre Überschrift */
    .printable-log-section > div:first-child { /* Das Div, das h4 und Filter enthält */
        display: block !important; /* Flex überschreiben */
        border-bottom: 1px solid #eee !important;
        padding: 5px 0 !important; /* Etwas Abstand für die Überschrift */
        margin-bottom: 10px !important;
    }
    .printable-log-section h4 {
        display: block !important;
        margin: 0 !important;
        color: #2c3e50 !important;
        font-size: 1.3em !important; /* Größe an andere h2/h4 anpassen */
        text-align: left !important;
        padding: 0 !important; /* Padding vom h4 selbst entfernen */
    }

    /* DRUCK-FIX: Alle Scrollboxen im Admin-Bereich aufklappen */
    .admin-table-scroll-container,
    [id^="logTableWrapper"] {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }

    /* Hilfsklasse um beim Einzeldruck alles andere zu verstecken */
    .print-force-hide {
        display: none !important;
    }

    table { width: 100% !important; border-collapse: collapse; }
    th, td { border: 1px solid #ddd !important; padding: 8px !important; }

    /* Sichtbarkeit für den Druck sicherstellen */
    #protected-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Verhindert leere Blätter durch Floats/Absolute Positionierung */
    .main-content, .content-inner {
        float: none !important;
        position: static !important;
    }
}

/* BOT-SCHUTZ & SICHERHEIT */
#protected-content { 
    display: none; /* Standardmäßig komplett weg für Bots */
}

/* Wenn Zugriff gewährt, wird dies per JS oder Admin-Mode überschrieben */
body.admin-mode #protected-content,
.access-granted #protected-content {
    display: block !important;
}
/* Alle Schutz-CSS-Regeln entfernt */
* { -ms-overflow-style: auto; scrollbar-width: thin; } /* Scrollbalken dezent erlauben */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #3498db; border-radius: 10px; }

/* Standard-Höhe für die Admin-Tabellen auf dem Bildschirm */
.admin-table-scroll-container {
    max-height: 400px;
    overflow-y: auto;
}

/* HONEYPOT SCHUTZ (Für Bots sichtbar, für Menschen unsichtbar) */
.hp-field {
    position: absolute;
    left: -5000px;
    top: -5000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* HEADER & NAVIGATION */
.sticky-container { position: fixed; top: 0; left: 0; width: 100%; z-index: 2000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } 
header { background: #2c3e50; color: #ffffff; padding: 20px; text-align: center; border-bottom: 1px solid #1a252f; } 
header h1 { margin: 0; font-size: 24px; letter-spacing: 1px; } 
header p { margin: 6px 0 0; font-size: 13px; color: #3498db; font-weight: bold; text-transform: uppercase; } 
nav { background: #ffffff; padding: 10px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; border-bottom: 3px solid #3498db; position: relative; } 
nav a { background: #f8f9fa; border: 1px solid #ddd; color: #555; cursor: pointer; font-weight: bold; border-radius: 4px; padding: 10px 15px; font-size: 11px; transition: 0.3s; text-decoration: none; display: inline-block; } 
nav a.active { background: #3498db; color: white; border-color: #3498db; } 

/* QUADRATISCHER LOGOUT BUTTON */
.btn-logout-square { 
    background: #e74c3c !important; 
    color: white !important; 
    border: 1px solid #c0392b !important; 
    width: 38px; 
    height: 38px; 
    display: flex !important; 
    align-items: center; 
    justify-content: center; 
    padding: 0 !important; 
    border-radius: 6px; 
    position: absolute; 
    right: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
    transition: 0.2s; 
}
.btn-logout-square:hover { background: #c0392b !important; transform: translateY(-50%) scale(1.05); }

/* LAYOUT: SIDEBARS & HAUPTINHALT */
.side-bar { position: fixed; top: 0; bottom: 0; z-index: 15; width: 12.5%; pointer-events: none; overflow: hidden; display: block; } 
.left-bar { left: 0; } .right-bar { right: 0; } 
.side-bar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(90%); opacity: 0.8; }
.main-content { position: relative; z-index: 10; flex: 1; width: 75%; margin: 0 auto; overflow-y: auto; background: white; padding-top: 140px; padding-bottom: 100px; scroll-behavior: smooth; border-left: 1px solid #ddd; border-right: 1px solid #ddd; will-change: transform; display: block; }
.page { display: none; width: 100%; } 
.page.active { display: flex; flex-direction: column; animation: fadeIn 0.2s ease-out; } 
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 
.content-inner { width: 100%; max-width: 1000px; margin: auto; padding: 0; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; zoom: 1; } 
.info-card { background: white; padding: 25px; width: 95%; max-width: 900px; display: flex; flex-direction: column; align-items: center; text-align: center; margin: 10px 0; box-shadow: 0 8px 25px rgba(0,0,0,0.08); box-sizing: border-box; border-radius: 12px; min-height: 200px; } 

/* HERO SEKTION (index.php) */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 40px 20px;
    flex-wrap: wrap;
}

.hero-left {
    flex: 0 0 200px;
    text-align: center;
}

.hero-img {
    width: 180px;
    border-radius: 12px;
    border: 4px solid white;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.hero-right {
    max-width: 600px;
}

.hero-right h1 {
    font-size: 2.2em;
    margin-bottom: 5px;
}

.hero-right h2 {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 15px;
}

.hero-right p {
    font-size: 1em;
    line-height: 1.5;
}

.hero-buttons {
    margin-top: 20px;
}

.hero-buttons .btn {
    margin-right: 10px;
}

/* TYPOGRAFIE */
h2 { margin-top: 20px; margin-bottom: 15px; font-size: 1.6em; border-left: 5px solid #3498db; padding-left: 10px; width: 100%; text-align: left; }
.info-card h2 { margin-top: 40px; }
p { line-height: 1.6; margin-bottom: 15px; }

/* LISTEN & FEATURES */
.points { list-style: none; padding: 0; margin: 25px 0; width: 100%; text-align: left; max-width: 700px; }
.points li { padding: 10px 15px; background: #f8fafc; margin-bottom: 10px; border-radius: 6px; border-left: 4px solid #3498db; display: flex; align-items: flex-start; line-height: 1.4; transition: 0.2s; }
.points li:hover { background: #eef4fb; transform: translateX(3px); }
.feature-box { background: #ffffff; padding: 25px; border-radius: 12px; margin: 30px 0 25px; text-align: left; border-left: 5px solid #2ecc71; width: 100%; box-sizing: border-box; transition: 0.3s; box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.feature-box:hover { background: #f1f7fb; }

/* BUTTONS */
.btn { display: inline-block; padding: 10px 18px; margin: 5px; border-radius: 6px; background: #3498db; color: #fff; text-decoration: none; font-weight: bold; transition: 0.2s; }
.btn:hover { background: #2c80b4; transform: translateY(-2px); }
.btn.secondary { background: #95a5a6; }
.btn.secondary:hover { background: #7f8c8d; }

/* FOOTER */
footer { position: fixed; bottom: 0; left: 0; width: 100%; background: #2c3e50; color: #ffffff; padding: 15px 15px 55px; text-align: center; border-top: 2px solid #3498db; z-index: 3000; box-shadow: 0 -4px 20px rgba(0,0,0,0.3); } 
footer p { margin: 0; font-size: 12px; letter-spacing: 0.5px; opacity: 0.8; } 

/* BERUFSWEG-SEITE (beruf.php) */
.timeline { width: 100%; max-width: 800px; position: relative; padding: 20px 0; }
.timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 4px; background: #e9ecef; border-radius: 2px; }
.timeline-item { margin-bottom: 30px; position: relative; padding-left: 50px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-icon { position: absolute; left: 0; top: 0; width: 40px; height: 40px; background: #3498db; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; border: 4px solid #f4f4f4; z-index: 1; }
.timeline-content { background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #e9ecef; text-align: left; }
.timeline-content h3 { margin: 0 0 5px 0; font-size: 1.2em; color: #2c3e50; }
.timeline-company { font-weight: bold; color: #3498db; display: block; margin-bottom: 5px; font-size: 0.95em; }
.timeline-date { display: block; font-size: 0.9em; color: #777; margin-bottom: 15px; }
.timeline-content ul { padding-left: 20px; margin: 0; }
.timeline-content ul li { margin-bottom: 8px; line-height: 1.5; }
.timeline-highlight { background: #fff3cd; color: #856404; padding: 15px; margin-top: 15px; border-radius: 6px; font-size: 0.9em; border-left: 4px solid #ffeeba; }

/* SONSTIGES-SEITE (sonstiges.php) */
.content-section { width: 100%; max-width: 800px; margin-bottom: 30px; background: #f8f9fa; padding: 25px; border-radius: 8px; border-left: 5px solid #3498db; text-align: left; }
.content-section h3 { margin: 0 0 15px 0; font-size: 1.3em; color: #2c3e50; display: flex; align-items: center; gap: 10px; }
.content-section ul { list-style: none; padding: 0; margin: 0; }
.content-section ul li { padding: 8px 0; border-bottom: 1px solid #e9ecef; line-height: 1.6; }
.content-section ul li:last-child { border-bottom: none; }
.content-section strong { color: #333; }

/* PROJEKTE-SEITE (projekte.php) */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; width: 100%; margin: 20px 0; }
.media-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; border: 1px solid #ddd; transform: translateZ(0); backface-visibility: hidden; }
.media-wrapper { position: relative; height: 180px; overflow: hidden; background: #eee; }
.media-wrapper img, .media-wrapper video { width: 100%; height: 100%; object-fit: contain; background: #2c3e50; }
.watermark { position: absolute; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); font-size: 75px; color: rgba(255, 255, 255, 0.20); font-weight: 900; font-family: "Arial Black", Gadget, sans-serif; pointer-events: none; white-space: normal; line-height: 1.4; width: 100%; text-align: center; z-index: 10; text-transform: uppercase; letter-spacing: 4px; background: none !important; padding: 0 !important; border: none !important; }
.watermark.top { top: 25%; }
.watermark.bottom { top: 75%; }
.media-info { padding: 15px; text-align: center; }
.media-info h3 { font-size: 16px; margin: 0 0 5px 0; color: #333; }
.media-info p { 
    font-size: 13px; color: #666; margin: 0; 
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Zeigt maximal 2 Zeilen Text */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Erweitert die Beschreibung bei Hover oder Touch */
.media-card:hover .media-info p {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

/* OPTIMIERUNG FÜR HIGHLIGHT-KARTE (index.php) */
.featured-slideshow-card {
    border: 2px solid #f1c40f !important; /* Goldener Rand für das Highlight */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}
.featured-slideshow-card .media-info {
    padding: 20px !important;
    background: #fff !important;
}
.featured-slideshow-card .media-info h3 {
    font-size: 1.4em !important;
    color: #2c3e50;
    margin-bottom: 10px;
}
.featured-slideshow-card .media-info p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #444 !important;
    display: block !important; /* Hebt das Line-Clamping auf */
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

/* LIVE-EDIT FOLIE FÜR HAUPTBILDER */
.edit-foil {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    color: white;
    padding: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    word-wrap: break-word;
    text-align: center;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2); /* Ganz leichte Abdunklung für Lesbarkeit */
    min-height: 100px;
    pointer-events: auto !important;
}
body.admin-mode .edit-foil {
    display: flex; /* Nur im Admin-Modus sichtbar */
}

/* Platzhalter für die leere Folie */
.edit-foil:empty::before {
    content: attr(placeholder);
    color: rgba(255,255,255,0.5);
    font-weight: normal;
    font-size: 14px;
}

/* Verhindert, dass das Hauptbild Klicks stört */
body.admin-mode .media-wrapper.main-view > *:not(.edit-foil):not(.enlarge-link):not(.stl-fullscreen-btn) { pointer-events: none !important; }

/* GALERIE THUMBNAILS */
.thumb-nav { display: flex; gap: 8px; padding: 10px; overflow-x: auto; background: #fcfcfc; border-top: 1px solid #eee; }
.thumb-item { width: 60px; height: 45px; flex-shrink: 0; cursor: pointer; border: 2px solid transparent; border-radius: 4px; overflow: hidden; }
.thumb-item.active { border-color: #3498db; }
.thumb-item img, .thumb-item video { width: 100%; height: 100%; object-fit: cover; }

/* SLIDESHOW & ENLARGE CONTROLS */
.enlarge-link { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.5); color: white !important; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 4px; z-index: 20; transition: 0.2s; }
.enlarge-link:hover { background: #3498db; transform: scale(1.1); }

/* Schutz-Overlay für Dokumente */
#protection-overlay { box-sizing: border-box; margin-left: auto; margin-right: auto; }
#protected-content { display: none; } /* Standardmäßig versteckt */

/* Hintergrund für Timeout-Warnung */
#timeout-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: none;
}

/* DOKUMENTEN-SEITEN (lebenslauf.php, zeugnisse.php, etc.) */
.doc-card { background: white; width: 100%; max-width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin-bottom: 25px; border: 1px solid #ddd; display: flex; flex-direction: column; }
.pdf-cv { height: 72vh; background: #eee; overflow: hidden; }
.pdf-tile { height: 52vh; background: #eee; overflow: hidden; }
embed, iframe { width: 100%; height: 100%; border: none; display: block; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; width: 100%; box-sizing: border-box; padding: 10px; } 

/* PDF SEITEN-STEUERUNG */
.pdf-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; padding: 8px; background: #f1f1f1; border-bottom: 1px solid #ddd; width: 100%; box-sizing: border-box; }
.pdf-controls button { background: white; border: 1px solid #ccc; color: #333; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: bold; transition: 0.2s; }
.pdf-controls button:hover { background: #3498db; color: white; border-color: #2980b9; }

.card-info { padding: 12px; text-align: center; background: #fafafa; border-top: 1px solid #eee; display: flex; flex-direction: column; gap: 8px; align-items: center; } 
.btn-preview { display: inline-flex; background: #3498db; color: white !important; padding: 12px 24px; border-radius: 8px; font-size: 16px; text-decoration: none; font-weight: bold; align-items: center; gap: 10px; box-shadow: 0 4px 6px rgba(52, 152, 219, 0.2); transition: 0.3s; width: 100%; max-width: 400px; justify-content: center; }
.btn-preview:hover { background: #2980b9; transform: translateY(-2px); }

/* KONTAKT-SEITE (kontakt.php) */
.contact-btn { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; color: white !important; padding: 0; text-decoration: none; border-radius: 50%; font-weight: bold; margin: 5px; transition: transform 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.15); } 
.contact-btn:hover { transform: scale(1.1); }
.contact-btn.whatsapp { background: #25D366; } 
.contact-btn.phone { background: #3498db; } 
.contact-btn.mail { background: #444; } 

/* ADMIN PREVIEW */
.admin-media-preview { display: flex; flex-wrap: wrap; gap: 10px; background: #f4f4f4; padding: 15px; border-radius: 8px; }
.admin-thumb { width: 80px; height: 60px; background: #ddd; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-thumb .del-btn { position: absolute; top: 2px; right: 2px; background: #e74c3c; color: white; border: none; border-radius: 50%; width: 18px; height: 18px; cursor: pointer; font-size: 10px; }

/* SORTABLE DRAG STYLES */
.sortable-ghost { opacity: 0.4; background: #3498db !important; border: 2px dashed #2980b9 !important; }
.drag-handle { cursor: move; transition: color 0.2s; }
.drag-handle:hover { color: #3498db !important; }

/* LIGHTBOX MODAL */
.lightbox { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); align-items: center; justify-content: center; backdrop-filter: blur(5px); touch-action: none; }
.lightbox.active { display: flex; }
.lightbox-content { width: auto; height: auto; max-width: 90%; max-height: 80%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.lightbox-content img, .lightbox-content video { max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; display: block; }
.lightbox-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer; z-index: 10001; opacity: 0.7; transition: 0.3s; }
.lightbox-close:hover { opacity: 1; transform: scale(1.1); }

.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 50px; cursor: pointer; padding: 20px; user-select: none; z-index: 10001; opacity: 0.5; transition: 0.3s; }
.lightbox-nav:hover { opacity: 1; background: rgba(255,255,255,0.1); border-radius: 10px; }
.lightbox-nav.prev { left: 10px; }
.lightbox-nav.next { right: 10px; }

@media (max-width: 768px) {
    .lightbox-nav { font-size: 35px; padding: 10px; }
}

/* 3D VIEWER CONTAINER */
.stl-viewer-container { width: 100%; height: 100%; background: #eee; cursor: move; }
.stl-fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(44, 62, 80, 0.8);
    color: white;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    text-decoration: none;
    z-index: 20;
    transition: 0.2s;
}
.stl-fullscreen-btn:hover { background: #3498db; transform: scale(1.1); }

/* RESPONSIVE & MOBIL-ANPASSUNGEN */
@media (max-width: 1023px) { 
 .side-bar { display: block !important; width: 15% !important; z-index: 1; } 
 .side-bar img { filter: grayscale(50%) brightness(45%) contrast(120%) saturate(130%) !important; opacity: 0.4 !important; } 
 .main-content { width: 70% !important; z-index: 10; background: white; margin: 0 auto; } 
 .info-card { width: 100%; padding: 20px 30px; } 
 .grid-container { grid-template-columns: 1fr; } 
 .pdf-cv, .pdf-tile { display: block; } 
 .btn-preview { display: inline-flex; } 
}

@media (max-width: 768px) {
 .side-bar { display: none !important; } 
 .info-card { padding: 20px 15px; } 
 .pdf-cv, .pdf-tile, .pdf-controls { display: none !important; } /* Nur Vorschau und PDF-Blättern ausblenden */
 .watermark { font-size: 40px; line-height: 1.4; letter-spacing: 3px; }
 .doc-card { border-top: 4px solid #3498db; margin-bottom: 15px; max-width: 100% !important; } /* Optische Aufwertung der kompakten Karte */
 footer { padding-bottom: 10px !important; } /* So tief wie möglich für Mobilgeräte */
 .main-content { width: 100% !important; margin: 0 !important; padding-top: 120px !important; padding-bottom: 80px !important; border: none !important; will-change: transform; } 
 .content-inner { zoom: 1; -moz-transform: none; } /* Reset auf 100% */
 nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px !important; padding: 5px !important; }
 nav a { flex: 1 1 18% !important; min-width: 60px; text-align: center; padding: 8px 2px !important; font-size: 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
 .btn-logout-square { position: static; transform: none; width: 34px; height: 34px; flex: 0 0 auto !important; min-width: 34px !important; }
 header { padding: 8px !important; } /* Header extrem schlank */
 header h1 { font-size: 18px !important; }
 header p { font-size: 10px !important; margin-top: 0 !important; }
 #protection-overlay { 
    padding: 25px !important; 
    width: 95% !important; 
    zoom: 0.8; /* Wieder etwas vergrößert auf 80% für bessere Lesbarkeit */
    -moz-transform: scale(0.8); /* Fallback für Firefox */
    -moz-transform-origin: top center;
    margin-bottom: -50px !important; /* Abstand korrigiert, da der Kasten nun mehr Platz einnimmt */
 }
 #protection-overlay input:not([type="checkbox"]) { width: 100% !important; margin-bottom: 10px; }
 #protection-overlay input[type="checkbox"] { width: auto !important; margin-top: 5px !important; }
 #protection-overlay button { width: 100% !important; }
 .media-grid { padding: 20px 10px; width: 100%; box-sizing: border-box; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* Kleinere minmax für mehr Spalten auf Mobil */
}

@keyframes wave { 0% { transform: rotate( 0.0deg) } 10% { transform: rotate(14.0deg) } 20% { transform: rotate(-8.0deg) } 30% { transform: rotate(14.0deg) } 40% { transform: rotate(-4.0deg) } 50% { transform: rotate(10.0deg) } 60% { transform: rotate( 0.0deg) } 100% { transform: rotate( 0.0deg) } }

/* ADMIN BEREICH OPTIMIERUNG */
.admin-container { max-width: 1000px; margin: 0 auto 20px; padding: 0 20px 20px; }
.admin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.admin-top-nav { position: sticky; top: 0; z-index: 3000; background: white; padding: 15px 25px; border-radius: 0 0 12px 12px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 100%; box-sizing: border-box; }
.admin-analysis-box { background: #2c3e50; color: white; padding: 25px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.admin-content-box { background: white; padding: 30px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 8px 25px rgba(0,0,0,0.05); border: 1px solid #eee; max-width: 900px; margin-left: auto; margin-right: auto; } /* Zentriert und gibt max-width */
.admin-content-box h1, .admin-content-box h2 { margin-top: 0; border-bottom: 2px solid #3498db; padding-bottom: 10px; margin-bottom: 20px; font-size: 1.3em; color: #2c3e50; text-align: left; }
.admin-content-box h2 i { margin-right: 10px; color: #3498db; }
.list-item { background: #fff; border: 1px solid #eee; padding: 15px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; transition: 0.2s; }
.list-item:hover { border-color: #3498db; background: #fcfdfe; }
.list-img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; margin-right: 15px; background: #eee; }

/* DROP ZONE STYLES */
.drop-zone { border: 2px dashed #3498db; padding: 30px; border-radius: 12px; background: #f8fafc; color: #3498db; cursor: pointer; transition: 0.3s; margin-bottom: 20px; text-align: center; }
.drop-zone:hover, .drop-zone.dragover { background: #eef4fb; border-color: #2980b9; }

/* ADMIN PROJEKT LISTEN NEBENEINANDER */
.admin-projects-wrapper { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 1400px; margin: 0 auto; }
.admin-projects-wrapper .admin-content-box { flex: 1; min-width: 400px; margin: 0 0 25px 0; }
@media (max-width: 850px) { .admin-projects-wrapper .admin-content-box { min-width: 100%; } }

/* FIX: Dokumentenkarten zentrieren */
.grid-container { justify-content: center; }
.doc-card { margin-left: auto; margin-right: auto; width: 100%; }