/* Grundlayout */
body {
    margin: 0;
    height: 100vh;
    display: grid;
    grid-template-rows: 120px auto;
    grid-template-columns: 220px auto 220px;
    grid-template-areas:
        "header header header"
        "left main rightbar";
    font-family: Arial, sans-serif;
}

/* Kopfbereich */
#header {
    grid-area: header;
    background: var(--header-bg);
    color: var(--header-text);
    padding: 20px;
}

/* Linker Bereich (3 Zonen) */
#left {
    grid-area: left;
    display: grid;
    grid-template-rows: minmax(250px, 1fr) 300px 100px;  /* Menu, Extra, Log */
    grid-template-areas:
        "menu"
        "extra"
        "log";
    background: var(--left-bg);
    border-right: 2px solid var(--left-border);
}

/* Linker Bereich Menu */
#menu {
    grid-area: menu;
    padding: 15px;
    display: flex;
    flex-direction: column;
}

/* Linker Bereich extra in  (modules/extra/layout.css) */
/*
#extra {
    grid-area: extra;
    background: var(--left-extra-bg);
    display: flex;
    flex-direction: column;
}
*/


/* Linker Bereich log */
#log {
    grid-area: log;
    background: var(--left-log-main-bg);
	overflow-y: auto;
}

/* Linker Bereich left-ex-main in  (modules/extra/layout.css) */
/*
#left-ex-main p {
    margin: 0;
    padding: 0;
}
*/

/* Hauptbereich */
#main {
    grid-area: main;
    background: var(--main-bg);
    padding: 20px;
}

/* Rechter Bereich */
#rightbar {
    grid-area: rightbar;
    background: var(--rightbar-bg);
    border-left: 2px solid var(--rightbar-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

#ticker-static p {
    margin: 0;
    padding: 0;
}

/* ---------------  demo text main frame --------------- */
.demo-hint {
    text-align: center;
    font-size: 18px;
    color: var(--main-subtext-demo);
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 500;
}
/* ----------------------------------------------------- */

/* ------------------  alles zu left ------------------- */
/* Linker Bereich left-extra-header + left-extra-main in  (modules/extra/layout.css) */
/*
.left-extra-header {
    background-color: var(--sections-header);
    padding: 10px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid var(--sections-header-border);
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sections-text);
}

.left-extra-main {
    overflow-y: auto;
    padding: 5px; 
    font-size: 0.7rem;
    line-height: 1.0;   
    white-space: pre-wrap; 
}
*/

.left-log-header {
    background-color: var(--sections-header);
    padding: 10px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid var(--sections-header-border);
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sections-text);
}
	
.left-log-main {
    overflow-y: auto;
    padding: 5px;      /* weniger Luft oben/unten */
    font-size: 0.7rem;
    line-height: 1.0;      /* engste saubere Zeilenhöhe */
    white-space: normal;   /* KEIN pre-line! */
	color: var(--left-log-main-text);
}
/* ----------------------------------------------------- */

/* ----------------  alles zur rightbar ---------------- */
/* Oberer Haupt-Header */
.rightbar-header {
    background-color: var(--sections-header);
    padding: 10px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid var(--sections-header-border);
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sections-text);
}

/* Oberer statischer Bereich */
.rightbar-top {
    padding: 10px;
    border-bottom: 1px solid var(--rightbar-header-border);
    min-height: 100px;
    overflow-y: auto;
    font-size: 0.9rem;
	white-space: pre-line;
}

/* Sub-Header für Live-Status */
.rightbar-subheader {
    background-color: var(--sections-header);
    padding: 10px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid var(--sections-header-border);
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sections-text);
}

/* Live-Status-Bereich */
.rightbar-gw-status {
    overflow-y: auto;
    padding: 5px;      /* weniger Luft oben/unten */
    height: 120px;
    min-height: 120px;
    font-size: 0.7rem;
    line-height: 1.0;      /* engste saubere Zeilenhöhe */
    white-space: normal;   /* KEIN pre-line! */
    background-color: var(--rightbar-live_status);
}

/* Unterer Live-Bereich */
.rightbar-bottom {
    flex-grow: 1;        /* nimmt den restlichen Platz ein */
    overflow-y: auto;    /* Scrollbar wenn nötig */
    padding: 5px;
	font-size: 0.7rem;
	line-height: 1.0;      /* engste saubere Zeilenhöhe */
	white-space: pre-line;
	min-height: 120px;
}

/* ----------------------------------------------------- */