body, html {
    margin: 0; padding: 0;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #fff;
    background-color: #003366;
}
a { color:#fff; text-decoration:none; }
a:hover { text-decoration:underline; }

/* HEADER – fixed, 20px von oben, 110px hoch, über allem */
#container_head {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    height: 110px;
    background: #000033;
    z-index: 200;
}
#container_head_content {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-sizing: border-box;
}
#logo a { text-decoration:none; }
.logo_de {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -1px;
}
.logo_com {
    font-family: Arial, sans-serif;
    font-size: 32px;
    font-weight: 300;
    color: #99aabb;
}
#nav_top a {
    display: block;
    min-height: 44px;
    padding: 8px 12px;
}
#nav_top a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;       /* wichtig! */
    padding: 0 14px;

    color: #aabbcc;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#nav_top a:hover, #nav_top a.nav_active { color:#fff; }

/* #000033 Hintergrund links – volle Höhe, hinter allem */
#col_left_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 265px;
    height: 100%;
    background: #000033;
    z-index: 1;
}

/* BILD – startet bei top:0 (Bildschirmkante), über #000033, unter Header */
#seitenbild_fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 265px;
    height: 1000px;
    z-index: 50;
    overflow: hidden;
    pointer-events: none;
}
#seitenbild_fixed img {
    width: 265px;
    height: 1000px;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.sb_placeholder {
    width: 265px;
    height: 1000px;
    background: #000033;
}

/* MAIN LAYOUT */
#container_main {
    position: relative;
    z-index: 10;
    display: flex;
    padding-top: 135px; /* 20 + 110 + 20 Luft */
    min-height: calc(100vh - 150px);
}
#col_spacer {
    width: 265px;
    min-width: 265px;
    flex-shrink: 0;
}
#col_right {
    flex: 1;
    min-width: 0;
    padding: 10px 14px 20px 14px;
}

/* CONTENT-BOXEN – OSC Stil */
table.main_container { width:100%; margin-bottom:8px; font-size:8pt; border-collapse:collapse; }
td.main_container_row1 { font-family:Verdana,Helvetica,sans-serif; letter-spacing:1px; color:#fff; font-weight:bold; padding:0 7px; background:#000033; text-align:left; text-transform:uppercase; height:15px; font-size:8pt; }
td.main_container_row2 { font-family:Verdana,Helvetica,sans-serif; font-size:8pt; color:#fff; padding:3px 7px; background:#336699; text-align:left; }
td.main_container_row3 { font-family:Verdana,Helvetica,sans-serif; font-size:8pt; color:#fff; padding:0; background:#336699; border-bottom:1px solid #003366; }
td.main_container_row4 { background:#000033; font-family:Verdana,Helvetica,sans-serif; font-size:7pt; text-align:left; padding:0 7px; color:#fff; }
td.main_container_row5 { font-family:Verdana,Helvetica,sans-serif; font-size:8pt; color:#fff; padding:0; background:#336699; }
td.main_container_row6 { font-family:Verdana,Helvetica,sans-serif; font-size:8pt; color:#fff; padding:3px 7px; background:#336699; border-bottom:1px solid #003366; }

/* TABELLEN */
table.data_table { width:100%; border-collapse:collapse; font-size:8pt; }
table.data_table thead tr { background:#000033; color:#aabbcc; }
table.data_table thead th { padding:4px 7px; text-align:left; font-weight:bold; }
table.data_table tbody tr { background:#336699; }
table.data_table tbody tr:nth-child(even) { background:#2d5a8a; }
table.data_table tbody tr:hover { background:#4477aa; }
table.data_table tbody td { padding:3px 7px; color:#fff; border-bottom:1px solid #003366; }

/* BUTTONS */
input,textarea,button,select { font-family:Verdana,Helvetica,sans-serif; font-size:8pt; color:#fff; background-color:#000033; border:1px solid #fff; padding:1px 5px; }
input:hover,button:hover { background-color:#6699cc; }
.button { background:#000033; border:1px solid #fff; color:#fff; padding:3px 10px; font-size:8pt; font-family:Verdana,Helvetica,sans-serif; cursor:pointer; text-decoration:none; display:inline-block; }
.button:hover { background:#6699cc; text-decoration:none; }
.button_red { background:#550000; border-color:#770000; color:#ffaaaa; }
.button_red:hover { background:#770000; }
.button_green { background:#003300; border-color:#006600; color:#90ee90; }
.button_green:hover { background:#006600; }

.msg_ok  { background:#003300; border:1px solid #006600; color:#90ee90; padding:5px 7px; margin-bottom:8px; font-size:8pt; }
.msg_err { background:#660000; border:1px solid #880000; color:#ffaaaa; padding:5px 7px; margin-bottom:8px; font-size:8pt; }
.online_dot { display:inline-block; width:7px; height:7px; background:#90ee90; border-radius:50%; margin-right:4px; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

.admin_nav_group { display:inline-block; vertical-align:top; margin-right:20px; margin-bottom:6px; }
.admin_nav_group .nav_group_title { color:#6699cc; font-weight:bold; font-size:8pt; border-bottom:1px solid #336699; margin-bottom:3px; padding-bottom:2px; text-transform:uppercase; }
.admin_nav_group a { display:block; color:#cce0ff; font-size:8pt; padding:1px 0; }

#admin_login_wrap { max-width:380px; margin:180px auto 60px; }

#cropModal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.92); z-index:9999; overflow:auto; }
#cropModal .modal_inner { max-width:700px; margin:40px auto; padding:20px; }
#cropContainer { position:relative; display:inline-block; border:2px solid #336699; }
#cropContainer img { display:block; max-width:650px; height:auto; }
#cropBox { position:absolute; border:3px solid #ffd700; cursor:move; box-shadow:0 0 0 9999px rgba(0,0,0,0.55); }
#cropBox .crop_label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#ffd700; font-weight:bold; font-size:12px; text-shadow:0 0 5px #000; pointer-events:none; white-space:nowrap; }

/* OSC-Style Fehler/Erfolg Boxen */
td.main_error_row1 { font-family:Verdana,Helvetica,sans-serif; letter-spacing:1px; color:#fff; font-weight:bold; padding:0 7px; background:#660000; text-align:left; text-transform:uppercase; height:15px; font-size:8pt; }
td.main_error_row2 { font-family:Verdana,Helvetica,sans-serif; font-size:8pt; color:#fff; padding:3px 7px; background:#993333; text-align:left; }
td.main_error_row3 { background:#660000; font-size:7pt; text-align:left; padding:0 7px; }
td.main_error2_row1 { font-family:Verdana,Helvetica,sans-serif; letter-spacing:1px; color:#fff; font-weight:bold; padding:0 7px; background:#003300; text-align:left; text-transform:uppercase; height:15px; font-size:8pt; }
td.main_error2_row2 { font-family:Verdana,Helvetica,sans-serif; font-size:8pt; color:#fff; padding:3px 7px; background:#006600; text-align:left; }
td.main_error2_row3 { background:#003300; font-size:7pt; text-align:left; padding:0 7px; }

/* reload-btn */
.reload-btn { background:#000033; border:1px solid #fff; color:#fff; font-size:12pt; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.reload-btn:hover { background:#6699cc; }