/* ==========================================================
   HEADER – ZENTRALE STEUERUNG
========================================================== */

/* =========================
   ROOT / VARIABLEN
========================= */
:root{
    --header-arrow-size: 18px;
    --header-icon-size: 1.8em;
    --header-gap: 6px;

    --color-product: #b00000;   /* rot – Produkt */
    --color-image:   #005bbb;   /* blau – Bild */
    --color-disabled: #999;
}

/* =========================
   KOPFZEILE – LAYOUT
========================= */
.steer{
    min-height:50px;
    background:#cfcfcf;
    padding:8px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

/* =========================
   NAV-GROUP – BASIS
========================= */
.nav-group{
    display:flex;
    align-items:center;
}

/* =========================
   STATUSBOX
========================= */
.statusbox{
    display:grid;
    grid-template-rows: repeat(3, 1fr);
    font-size:12px;
    line-height:1;
    justify-content:center;
    gap:0;
    height:100%;
}

.statusbox > div:not(:last-child){
    border-bottom:1px solid #ddd;
}

/* =========================
   PRODUKT-NAVIGATION
========================= */
.nav-group.nav-product{
    gap:0;
    color: var(--color-product);
}

.nav-product .nav-arrow{
    padding: 0 1px;
    line-height:1;
    color: var(--color-product);
}

/* =========================
   MARKEN-LOGO (Header)
========================= */
.brand-logo{
    height:42px;        /* ~ Headerhöhe - Padding */
    min-width:42px;
    max-width:70px;     /* verhindert Eskalation */
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:4px;
}

.brand-logo img{
    max-height:100%;
    max-width:100%;
    object-fit:contain;
}

/* =========================
   BILD-NAVIGATION
========================= */
.nav-group.nav-image{
    gap:2px;
}

.nav-image .nav-arrow{
    color: var(--color-image);
}

/* =========================
   NAV-PFEILE – GEMEINSAM
========================= */
.nav-arrow{
    font-size: var(--header-arrow-size);
    padding: 4px 6px;
    text-decoration:none;
    line-height:1;
}

.nav-arrow.disabled{
    color: var(--color-disabled);
    opacity:0.35;
    pointer-events:none;
}

/* =========================
   SVG / ICONS
========================= */
.nav-img{
    width:18px;
    height:18px;
    display:inline-block;
    vertical-align:middle;
}

.product-icon,
.image-icon{
    font-size: var(--header-icon-size);
    line-height:1;
    margin: 0 var(--header-gap);
}

/* =========================
   PRODUKTNAME
========================= */
.product-name{
    width:220px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:bold;
}

/* =========================
   RECHTER BLOCK
========================= */
.header-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
}

/* =========================
   USERCODE
========================= */
.usercode-wrap{
    display:flex;
    align-items:center;
}

.usercode-input{
    width:110px;
    height:28px;
    padding:4px 6px;
    font-size:12px;
    border:1px solid #bbb;
    background:#f7f7f7;
}

.usercode-input::placeholder{
    color:#999;
}

/* =========================
   LOGO
========================= */
.logo{
    width:60px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

/* =========================
   THUMBNAILS – leerer Zustand
========================= */
.product-thumbnails.empty{
    background:#eee;           /* exakt wie normal */
    min-height:64px;           /* gleiche Höhe wie mit Thumbs */
}


/* ==========================================================
   UNKLAR / RESERVIERT (derzeit ungenutzt oder Altlasten)
========================================================== */
/*
.nav-product .product-icon{
    margin: 0 1px;
    line-height:1;
}
*/