body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 20px;
    background: #f4f6f8;
    color: #222;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-right img {
    max-height: 60px;
}

.user-info {
    font-size: 14px;
    color: #555;
}

button {
    background: #0066cc;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #004e9c;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#orderForm {
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    margin: 15px 0;
}

#orderForm form {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px;
}

#orderForm h2 {
    grid-column: 1 / -1;
}

#orderForm input,
#orderForm select {
    padding: 6px;
}

.filter {
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 15px;
}


/* ===============================
  Filamentlager
================================ */

#lagerSelect { font-size: 24px; }



/* ===============================
   NAVIGATION
================================ */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav li {
    margin-right: 20px;
}

.main-nav a {
    font-weight: bold;
    color: #0066cc;
}

.main-nav a:hover {
    text-decoration: underline;
}

.nav-user {
    font-size: 14px;
    color: #555;
}

/* ===============================
   TABELLEN – ÜBERSICHTLICH
================================ */

table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #999;       /* klarer Rahmen */
    padding: 8px 10px;
    vertical-align: middle;
}

th {
    background: #eaeaea;
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
}

tr:nth-child(even) {
    background: #f9f9f9;
}

tr:hover {
    background: #eef5ff;
}

td.right {
    text-align: right;
}

/* Mobile: Text nicht quetschen */
@media (max-width: 768px) {
    th, td {
        padding: 10px;
        font-size: 14px;
    }
}

/* ===============================
   FORCE TOP NAV LAYOUT
================================ */

.top-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    background: #1f2937 !important;
    padding: 0 10px !important;
    height: 50px !important;
}

.top-nav > .nav-item {
    display: inline-flex !important;
    position: relative !important;
}

.top-nav a,
.top-nav span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 14px 18px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.top-nav a:hover,
.top-nav span:hover {
    background: #374151 !important;
}

/* Rechts (Logout) */
.top-nav .right {
    margin-left: auto !important;
}

/* ===============================
   DROPDOWN
================================ */

.has-dropdown .dropdown {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #ffffff !important;
    min-width: 220px !important;
    border: 1px solid #ccc !important;
    z-index: 9999 !important;
}

.has-dropdown:hover .dropdown {
    display: block !important;
}

.dropdown a {
    display: block !important;
    padding: 10px 14px !important;
    color: #111827 !important;
}

.dropdown a:hover {
    background: #e5e7eb !important;
}



/* ===============================
   PREIS-KALKULATION – KOMPAKT
================================ */

/* Boxen enger */
.box {
    padding: 5px 5px;
    margin-bottom: 5px;
}

/* Überschriften kleiner & ruhiger */
.box h2 {
    font-size: 15px;
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #1f2937;
}

/* Nummern weniger dominant */
.box h2::first-letter {
    font-size: 14px;
}

/* Tabellen kompakter */
table.kalk {
    max-width: 680px;
}

table.kalk td,
table.kalk th {
    padding: 4px 8px;
    font-size: 13px;
}

/* Tabellenüberschriften */
table.kalk th {
    background: #f3f4f6;
    font-weight: 600;
}

/* Ergebnis-Zeilen etwas hervorheben */
.result {
    font-size: 16px;
    font-weight: 700;
}

/* Inputs kompakter */
select,
input[type="number"] {
    padding: 4px 6px;
    font-size: 13px;
}

/* Radio-Buttons enger */
label {
    font-size: 13px;
    margin-right: 10px;
}

/* Trennlinien dezenter */
.box hr {
    margin: 8px 0;
    border: none;
    border-top: 1px solid #ddd;
}

/* Kleine Hinweise */
.small {
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
}

/* Button kompakter */
button {
    padding: 6px 12px;
    font-size: 13px;
}

/* Mobile: noch etwas enger */
@media (max-width: 768px) {
    .box {
        padding: 8px 10px;
    }
    table.kalk td,
    table.kalk th {
        font-size: 12px;
    }
}

/* Kompaktere Boxen */
.box {
    padding: 8px 10px;
    margin-bottom: 10px;
}

/* Überschriften kleiner */
.box h2 {
    font-size: 14px;
    margin: 0 0 6px 0;
    font-weight: 600;
}

/* Tabellen enger */
.box table {
    width: 100%;
    border-collapse: collapse;
}

.box td {
    padding: 3px 6px;
    font-size: 13px;
    vertical-align: middle;
}

/* Inputs schmaler */
.box input,
.box select {
    padding: 3px 5px;
    font-size: 13px;
    width: 100%;
}

/* 3-Spalten-Layout */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

/* Mobile fallback */
@media (max-width: 900px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* === Plattformfarben – NORMALZUSTAND === */
td.plat-etsy, th.plat-etsy {
    background:#fff1e6 !important;
}
td.plat-ebay, th.plat-ebay {
    background:#eef5ff !important;
}
td.plat-shopify, th.plat-shopify {
    background:#f0fdf4 !important;
}
td.plat-bar, th.plat-bar {
    background:#f4f4f5 !important;
}

/* === Hover (optional, aber konsistent) === */
tr:hover td.plat-etsy {
    background:#ffe4cc !important;
}
tr:hover td.plat-ebay {
    background:#dbeafe !important;
}
tr:hover td.plat-shopify {
    background:#dcfce7 !important;
}
tr:hover td.plat-bar {
    background:#e5e7eb !important;
}

.gebuehren-zeile {
    font-size: 0.9em;
    color: #444;
    background: #f8f8f8;
}