/* ================================
   LAYOUT – NRW Dashboard Struktur
================================ */

/* =========================
   Body als Dashboard Shell
========================= */

body {
    display: grid;
    grid-template-rows:
        auto   /* header */
        auto   /* main nav */
        auto   /* sub nav */
        1fr    /* main */
        auto;  /* footer */

    height: 100vh;
    overflow: hidden;

    background: var(--bg-body);
}

/* =========================
   Header (Classic NRW)
========================= */

header {
    padding: 10px 20px;

    background: var(--bg-surface);
    background-image: url('/assets/css/nrw-standart/cellpic.gif');
    background-repeat: repeat-x;

    box-shadow: var(--shadow-soft);
	display:none;
}

/* ================================
   NAVIGATION – NRW Style
================================ */

/* =========================
   Container
========================= */

nav[data-nav="main"],
nav[data-nav="sub"] {
    display: flex;
    justify-content: center;
    align-items: center;
font-weight: 500;
    gap: 20px;
    padding: 10px 20px;

    background: var(--bg-body);
}

/* Subnav leicht dezenter */

nav[data-nav="sub"] {
    font-size: 0.9rem;
    opacity: 0.95;
}


/* =========================
   NAV LINKS – Box Look
========================= */

nav[data-nav] a {
    display: inline-block;
    padding: 6px 16px;

    background: var(--bg-surface);
    border-radius: var(--radius-md);

    color: var(--text-main);
    text-decoration: underline;

    transition: color 0.2s ease;
}


/* =========================
   Hover
========================= */

nav[data-nav] a:hover,
nav[data-nav] a:focus {
    color: var(--accent);
}


/* =========================
   Active State
========================= */

nav[data-nav] a.active {
    color: var(--activ);
    font-weight: 500;
}


/* =========================
   Main Grid Layout
========================= */

main {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 10px;
    background: var(--bg-body);

    #padding: 10px 40px 0px 40px;

    height: 100%;
    min-height: 0;
}

/* =========================
   Zonen
========================= */

section[data-zone] > * + * {
    margin-top: 25px;
}


/* =========================
   Nur Center scrollt
========================= */

section[data-zone="center"] {
    overflow-y: auto;
    min-height: 0;
    display: block;   /* ← Flex entfernen */
}


/* =========================
   Footer
========================= */

footer {
    padding: 10px 20px;

    background: var(--bg-body);

    font-size: 0.85rem;
    color: var(--text-muted);
}