/* =========================================================================== Aufbau: KONSOLE Seitenleiste links (dunkel), Inhalt rechts randlos, dichte Tabelle. Wofür: Admin-Bereiche und Arbeitsplätze mit vielen Unterbereichen. Am Telefon verschwindet die Seitenleiste; dort übernimmt die .tabbar. seite_kopf() setzt am automatisch die Klasse a-konsole. Nach basis.css einbinden. HTML-Gerüst: references/aufbauten.md ========================================================================= */ :root { --luft: 14px; } .konsole { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 100vh; } .konsole__haupt { background: var(--flaeche); min-width: 0; } /* --- Seitenleiste --- */ .nav-seitlich { background: var(--dunkel); color: var(--dunkel-schwach); padding: 15px 0; } .nav-seitlich__logo { display: flex; align-items: center; gap: 9px; padding: 0 15px 15px; color: var(--dunkel-text); font-family: var(--schrift-titel); font-weight: 700; font-size: .98rem; text-decoration: none; } .nav-seitlich__logo .zeichen { width: 26px; height: 26px; border-radius: var(--radius); flex: none; background: var(--akzent); color: var(--akzent-text); display: grid; place-items: center; font-size: .78rem; } .nav-seitlich__gruppe { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dunkel-schwach); opacity: .7; padding: 13px 15px 5px; } .nav-seitlich a:not(.nav-seitlich__logo) { display: flex; align-items: center; gap: 10px; padding: 10px 15px; min-height: 44px; color: var(--dunkel-schwach); text-decoration: none; font-size: .87rem; border-left: 3px solid transparent; } .nav-seitlich a[aria-current="page"] { background: var(--dunkel-flaeche); color: var(--dunkel-text); border-left-color: var(--akzent); font-weight: 600; } .nav-seitlich svg { width: 17px; height: 17px; flex: none; } /* --- Kopfzeile über dem Inhalt --- */ .konsole__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid var(--rand); background: var(--flaeche); } .konsole__kopf .suche { flex: 1; min-width: 180px; max-width: 380px; } .konsole__kopf .suche input { background: var(--flaeche2); } /* --- Kennzahlenzeile --- */ .konsole__zahlen { display: flex; flex-wrap: wrap; gap: 30px; padding: 15px 18px 13px; border-bottom: 1px solid var(--rand-fein); } .konsole__zahlen small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--schwach); } .konsole__zahlen b { font-size: 1.35rem; font-weight: 650; font-family: var(--schrift-titel); font-variant-numeric: tabular-nums; } /* In diesem Aufbau geht die Tabelle bis an den Rand */ .konsole__haupt table.liste th, .konsole__haupt table.liste td { padding-left: 18px; padding-right: 18px; } /* --- Telefon: Seitenleiste weg, Tab-Leiste unten --- */ @media (max-width: 860px) { .konsole { grid-template-columns: minmax(0, 1fr); } .nav-seitlich { display: none; } .konsole__haupt { padding-bottom: 60px; } /* Platz für die .tabbar */ .konsole__zahlen { gap: 20px; } .konsole__haupt table.liste th, .konsole__haupt table.liste td { padding-left: 0; padding-right: 0; } table.liste { padding: 0 12px; display: block; } }