/* Verbrauch-Dashboard
   Design nach Miet-Boot (Vorlagen in vorlage/: landing.css und intern.css): Navy, Orange, helles Blaugrau.
   Ohne Bootstrap und ohne fremde Dienste, alles in dieser Datei. */

:root {
	--navy: #283e55;
	--navy-tief: #1c2d3f;
	--navy-2: #34506c;
	--orange: #f89944;
	--orange-dunkel: #e9822a;
	--bg: #eef3f7;
	--flaeche: #f5f7fa;
	--linie: #e5eaf0;
	--text: #283e55;
	--grau: #64748b;
	--gruen: #1f9d55;
	--gelb: #d4a017;
	--rot: #d64545;
	--radius: 16px;
	--schatten: 0 1px 2px rgba(40, 62, 85, .05), 0 8px 24px rgba(40, 62, 85, .07);
	--schatten-hoch: 0 2px 4px rgba(40, 62, 85, .06), 0 18px 40px rgba(40, 62, 85, .14);

	/* Namen, die das Skript für Diagramme nutzt */
	--rand: var(--linie);
	--leise: var(--grau);
	--akzent: var(--orange);
	--akzent2: var(--navy-2);
	--cache: #c9d4df;
	--gut: var(--gruen);
	--p1: var(--orange);
	--p2: var(--navy);
	--p3: #2b8ad6;
	--p4: var(--gruen);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: rgba(248, 153, 68, .3); }
a { color: #1f5f9e; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.inhalt { padding-top: 22px; padding-bottom: 48px; }

/* ---------- Kopf ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(28, 45, 63, .92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
	padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.brand span { color: var(--orange); font-weight: 600; padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, .2); }
.nav-user { color: rgba(255, 255, 255, .75); font-size: 14px; }
.nav-user a { color: rgba(255, 255, 255, .75); margin-left: 6px; }
.nav-user a:hover { color: #fff; }

/* Band mit Seitentitel */
.band { position: relative; overflow: hidden; color: #fff; padding: 26px 0 28px;
	background: radial-gradient(120% 140% at 15% 0%, var(--navy-2) 0%, var(--navy) 45%, var(--navy-tief) 100%); }
.band::after { content: ''; position: absolute; right: -10%; top: -60%; width: 50%; height: 220%; background: radial-gradient(closest-side, rgba(248, 153, 68, .14), transparent); pointer-events: none; }
.band .wrap { position: relative; z-index: 1; }
.band h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.unterzeile { font-size: 15px; color: #c9d6e3; margin-top: 4px; }
.unter { color: var(--grau); font-size: 13px; }

/* ---------- Leiste mit Auswahl ---------- */
button, select, input { font: inherit; color: var(--text); background: #fff; border: 1px solid #d5dde6; border-radius: 10px; padding: 8px 13px; }
select:focus, input:focus, button:focus-visible { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(248, 153, 68, .2); }
button { cursor: pointer; font-weight: 600; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
button:hover { background: var(--flaeche); border-color: #c4cfda; }
.leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.schalter { display: flex; gap: 4px; background: #fff; border-radius: 14px; padding: 4px; box-shadow: var(--schatten); }
.schalter button { border: 0; background: transparent; color: #475569; padding: 6px 12px; font-size: 14px; }
.schalter button:hover { background: var(--flaeche); color: var(--text); }
.schalter button.an { background: var(--navy); color: #fff; }
#neu { background: var(--orange); color: #fff; border: 0; box-shadow: 0 4px 12px rgba(248, 153, 68, .28); }
#neu:hover { background: var(--orange-dunkel); box-shadow: 0 8px 18px rgba(248, 153, 68, .35); }
.stand { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--grau); margin-bottom: 14px; }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

/* ---------- Karten ---------- */
.karte { background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); padding: 20px 22px; }
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--linie); padding-bottom: 12px; margin-bottom: 14px; }
.kopf h2 { font-size: 16px; font-weight: 700; margin: 0; }
.zwei { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; margin-bottom: 14px; }
.abstand { margin-bottom: 14px; }

/* KPI-Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 14px; }
.kacheln .karte { padding: 16px 18px; transition: transform .18s ease, box-shadow .18s ease; }
.kacheln .karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.kacheln .karte:last-child .zahl { color: var(--orange-dunkel); }
.label { font-size: 13px; color: var(--grau); font-weight: 500; margin-bottom: 6px; }
.zahl { font-size: 28px; font-weight: 750; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.zahl small { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--grau); }
.fein { font-size: 13px; color: var(--grau); margin-top: 6px; }

/* Diagramme und Balken */
svg text { fill: var(--grau); font-size: 11px; }
.zeile { display: grid; grid-template-columns: minmax(0, 1.3fr) 2fr auto; gap: 10px; align-items: center; padding: 7px 0; font-size: 14px; }
.zeile .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.balken { height: 8px; border-radius: 999px; background: var(--linie); overflow: hidden; display: flex; }
.wert { font-variant-numeric: tabular-nums; color: var(--grau); font-size: 13px; text-align: right; min-width: 64px; }
.mix { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 4px 0 14px; }
.legende { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- Tabellen ---------- */
.tabelle { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
th { background: var(--flaeche); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--grau); font-weight: 700; }
thead tr th:first-child { border-top-left-radius: 10px; }
thead tr th:last-child { border-top-right-radius: 10px; }
tbody tr { transition: background-color .12s; }
tbody tr:hover { background: #f6f9fc; }
tbody tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Sonstiges ---------- */
.hinweis { font-size: 12px; color: var(--grau); margin-top: 18px; }
.fehler { color: #b42c22; }
.band .fehler { color: #ffb4ab; }
#tip { position: fixed; pointer-events: none; background: var(--navy-tief); color: #fff; border-radius: 10px; padding: 7px 10px; font-size: 12px; display: none; z-index: 30; box-shadow: var(--schatten-hoch); }

/* ---------- Anmeldung ---------- */
body.seite-login { min-height: 100vh; padding: 0 16px; background: radial-gradient(120% 90% at 50% 0%, var(--navy-2) 0%, var(--navy) 45%, var(--navy-tief) 100%); }
.login { max-width: 360px; margin: 12vh auto 0; border-radius: 22px; box-shadow: 0 30px 70px rgba(0, 0, 0, .3); padding: 32px; }
.login h1 { font-size: 22px; margin: 0; }
.login form { display: grid; gap: 10px; margin-top: 16px; }
.login button { background: var(--orange); color: #fff; border: 0; padding: 11px 16px; box-shadow: 0 4px 12px rgba(248, 153, 68, .28); }
.login button:hover { background: var(--orange-dunkel); }

@media (max-width: 1000px) { .kacheln { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .zwei { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
	.kacheln { grid-template-columns: 1fr 1fr; }
	.zahl { font-size: 22px; }
	.band h1 { font-size: 22px; }
	.karte { padding: 16px; }
	.mob-weg { display: none; }
	.legende { grid-template-columns: 1fr; }
	td:first-child { white-space: normal; word-break: break-word; }
	th, td { padding: 8px 5px; }
}

/* ---------- Erweiterungen: Sessions, Prognose, Tageszeit ---------- */
.marke { display: inline-block; background: #fdf0d8; color: #9a5d00; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.prognose { border-top: 1px solid var(--linie); margin-top: 12px; padding-top: 12px; }
.prognose b { color: var(--orange-dunkel); }
.heat { display: grid; grid-template-columns: 24px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.heat-kopf { font-size: 10px; color: var(--grau); text-align: center; }
.heat-zelle { aspect-ratio: 1; border-radius: 3px; background: var(--orange); }
.kopf .schalter { box-shadow: none; background: var(--flaeche); flex-wrap: wrap; }
.kopf .schalter button { padding: 4px 10px; font-size: 13px; }
td b { font-weight: 600; }
#ses td:nth-child(2) { white-space: normal; min-width: 170px; }
@media (max-width: 560px) { #ses td:nth-child(2) { min-width: 0; } }
@media (max-width: 900px) { .tab-weg { display: none; } }

/* ---------- Spartipps ---------- */
.tipp { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.tipp:last-child { border-bottom: 0; }
.tipp .fein { margin-top: 2px; }
.tipp .wert b { color: var(--orange-dunkel); font-size: 15px; }
#sparWoche { border-top: 1px solid var(--linie); padding-top: 10px; }

/* ---------- Ampel: grün wenig, gelb mittel, rot teuer ----------
   Weiche Töne passend zu Navy und Orange: Balken in der Grundfarbe, Beträge als helle Pillen. */
:root { --ampel-gruen: #3bb37f; --ampel-gelb: #f4bb4a; --ampel-rot: #ec6a6a; }
span.a-gruen, span.a-gelb, span.a-rot, b.a-gruen, b.a-gelb, b.a-rot {
	display: inline-block; border-radius: 999px; padding: 1px 9px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.6; }
span.a-gruen, .tipp .wert b.a-gruen { background: #e7f6ef; color: #1d7a52; }
span.a-gelb, .tipp .wert b.a-gelb { background: #fdf3dd; color: #93650a; }
span.a-rot, .tipp .wert b.a-rot { background: #fdeceb; color: #c24343; }
td.a-gruen { color: #1d7a52; }
td.a-gelb { color: #93650a; }
td.a-rot { color: #c24343; font-weight: 650; }

/* ---------- Benutzer ---------- */
.formular { display: grid; gap: 10px; max-width: 420px; }
.formular button { justify-self: start; }
.knopf-haupt { background: var(--orange); color: #fff; border: 0; }
.knopf-haupt:hover { background: var(--orange-dunkel); }
.knopf-rot { color: var(--rot); }
.meldung { border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; background: #e8f6ee; color: #17663a; }
.meldung.fehler { background: #fdecec; color: #b42c22; }
.dialog { border: 2px solid var(--rot); }
.dialog .knoepfe { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- Zusammensetzung ---------- */
.mix-zeile { grid-template-columns: 128px minmax(40px, 1fr) auto; }
.mix-zeile .name { overflow: visible; }
.mix-zeile .wert b { color: var(--text); font-weight: 650; }
.mix-farbe { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.mix-satz { border-top: 1px solid var(--linie); margin-top: 8px; padding-top: 10px; }