:root {
    --color-orange-header: #ff6b00; /* kräftiges Orange für Entsorgungsunternehmen */
    --color-orange-light: #fff3e6;  /* sehr helles Orange für Hintergrund */
    --color-white: #ffffff;
    --color-gray-light: #f9f9f9;
}

/* Basis */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, var(--color-orange-light), var(--color-gray-light));
    color: #000;
    padding-top: 150px; /* Platz für fixierten Header */
}

/* Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background-color: var(--color-orange-header);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 100;
    padding:1rem 1rem 0 1rem;
}

.site-header .inner {
    max-width: 960px;
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-areas:
    "logo hotline"
    ".    menu   ";
    grid-template-rows: 66% auto;
    grid-template-columns: auto 66%;
    height: 100%;
}
.site-header nav {
    max-width: 960px;
    grid-area: menu;
    justify-self: end;
    align-self: end;
}

/* Hotline-Link */
.site-header  .hotline {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-white);
    text-decoration: none;
    transition: all 0.3s ease;
    grid-area:hotline;
    justify-self: end; /* horizontal zentrieren */

}

.hotline {
        text-decoration: none;
}

.hotline:hover {
    color: #f0f0f0;
    text-shadow: 0 0 8px rgba(0,0,0,0.4);
}

/* Navigation */
.site-navigation {
    background-color: var(--color-orange-header);
    color: var(--color-white);
    padding: 1rem;
}

.site-navigation > .inner {
    max-width: 960px;
    margin: 0 auto;
}

/* Hero */
.hero {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content */
.main-content {
    max-width: 960px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--color-white);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* Footer */
.site-footer {
    background-color: var(--color-orange-header);
    color: var(--color-white);
    text-align: center;
    padding: 2rem 1rem;
}

/* Pre-Header, Past-Header, Help, Breadcrumbs */
.pre-header,
.past-header,
.help,
.breadcrumbs {
    max-width: 960px;
    margin: 1rem auto;
    background-color: var(--color-gray-light);
    padding: 0.5rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);


}

/* Breakpoints */
@media (min-width: 768px) {
    .main-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .main-content {
        padding: 4rem;
    }
}

/* Admin Toolbar berücksichtigen */
body.toolbar-fixed {
    padding-top: calc(150px + 39px); /* Headerhöhe + Toolbarhöhe */
}

body.toolbar-fixed .site-header {
    top: 39px; /* Header unter die Toolbar verschieben */
}


/* Menü-Container */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* horizontales Menü */
}

/* Menü-Links */
nav ul li a {
    font-weight: bold;        /* fett */
    color: white;             /* weiße Schrift */
    text-decoration: none;    /* keine Unterstreichung */
    padding: 10px 15px;       /* etwas Abstand */
    display: block;
}

/* Hover-Effekt */
nav ul li a:hover {
    background-color: gray;   /* graue Hervorhebung */
}

/* Aktiver Link */
nav ul li a:active,
nav ul li a.active {        /* optional: Klasse "active" für den aktuellen Menüpunkt */
    text-decoration: underline;
}