/* base.css – Globale und gemeinsame Styles */

/* Farben aus Stylesheet.txt */
:root {
    --color-primary: #AA7B5F;    /* Überschriften, Buttons, Divider */
    --color-text: #FFFFFF;
    --color-bg: #000000;
    --color-elements: #3B3838;
}

/* Grundlegende Seite */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: Arial, sans-serif;
    margin: 0;                   /* Entferne den alten margin: 20px */
    padding: 0;
}

/* Neuer Haupt-Header mit Logo */
.main-header {
    width: 100%;
    margin: 0;
    padding: 0;
}

.logo-container {
    background-color: #000000;
    padding: 15px 10px;
    text-align: right;
}

.logo {
    height: 60px;
    width: auto;
}

/* Globale Styles */
body {
    background-color: #000000;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 20px 20px 40px 20px;
    box-sizing: border-box;
}

h1, h2 {
    color: #AA7B5F;
    margin: 0 0 12px 0;
    font-weight: 600;
}

.dashboard-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.box {
    background-color: #3B3838;
    padding: 20px;
    border-radius: 16px;
    border: none;
    min-height: 160px;
}

/* Grid-Positionen – NEUE ANORDNUNG */
#checkout       { grid-column: 1; grid-row: 1; }
#cleaning       { grid-column: 2; grid-row: 1; }
#checkin        { grid-column: 3; grid-row: 1; }
#activities     { grid-column: 4; grid-row: 1 / 3; }  /* groß über zwei Zeilen */

#tasks { grid-column: 1 ; grid-row: 2; }
#solutions      { grid-column: 2 / 4; grid-row: 2; }

#statistik      { grid-column: 1 / 5; grid-row: 3; }  /* ← jetzt ganz unten, volle Breite */


.content-placeholder {
            color: #e0e0e0;
            font-size: 15px;
            line-height: 1.5;
        }

/* Responsive Anpassungen, die global gelten */
@media (max-width: 768px) {
    .logo {
        height: 50px;
    }
    .dashboard-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, auto);
        gap: 28px;
    }

    #checkout, #cleaning, #checkin, #activities,
    #tasks, #solutions, #statistik {
        grid-column: 1;
        grid-row: auto;
    }

    body {
        padding: 16px 16px 60px 16px;
    }
}